@skippr/live-agent-sdk 0.32.0 → 0.34.0

package/dist/esm/lib-exports.js

@@ -8,7 +8,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 
 // src/components/LiveAgent.tsx
 import { LiveKitRoom, RoomAudioRenderer } from "@livekit/components-react";
-import { useCallback as useCallback7, useEffect as useEffect14, useMemo as useMemo5, useRef as useRef8, useState as useState9 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo5, useState as useState11 } from "react";
 
 // src/context/LiveAgentContext.tsx
 import { createContext } from "react";
@@ -155,11 +155,58 @@ function useAuth({ appKey }) {
   };
 }
 
-// src/hooks/useSession.ts
+// src/hooks/useAvailableModules.ts
 import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
 var API_URL2 = "https://specialist.skippr.ai/api";
+function useAvailableModules({
+  enabled,
+  bearerToken
+}) {
+  const [modules, setModules] = useState2([]);
+  const [isLoading, setIsLoading] = useState2(false);
+  const [error, setError] = useState2(null);
+  const fetchModules = useCallback2(async () => {
+    if (!bearerToken) {
+      setError("No auth token available");
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const resp = await fetch(`${API_URL2}/v1/modules/available`, {
+        credentials: "omit",
+        headers: { Authorization: `Bearer ${bearerToken}` }
+      });
+      if (!resp.ok) {
+        const body = await resp.json().catch(() => null);
+        throw new Error(body?.detail || `Failed to load modules: ${resp.status}`);
+      }
+      const data = await resp.json();
+      setModules(Array.isArray(data?.modules) ? data.modules : []);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load modules");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [bearerToken]);
+  useEffect2(() => {
+    if (!enabled || !bearerToken)
+      return;
+    fetchModules();
+  }, [enabled, bearerToken, fetchModules]);
+  return {
+    modules,
+    isLoading,
+    error,
+    refetch: fetchModules
+  };
+}
+
+// src/hooks/useSession.ts
+import { useCallback as useCallback3, useEffect as useEffect3, useState as useState3 } from "react";
+var API_URL3 = "https://specialist.skippr.ai/api";
 async function exchangeForBearerToken(appKey, userToken) {
-  const resp = await fetch(`${API_URL2}/v1/auth/token-exchange`, {
+  const resp = await fetch(`${API_URL3}/v1/auth/token-exchange`, {
     method: "POST",
     credentials: "omit",
     headers: {
@@ -174,22 +221,24 @@ async function exchangeForBearerToken(appKey, userToken) {
   return token;
 }
 function useSession({
-  agentId,
   captureMode = "screenshare",
-  agentControls,
   authToken,
   appKey,
-  userToken
+  userToken,
+  onStart,
+  onStartError,
+  onDisconnect
 }) {
-  const [connection, setConnection] = useState2(null);
-  const [shouldConnect, setShouldConnect] = useState2(false);
-  const [isStarting, setIsStarting] = useState2(false);
-  const [error, setError] = useState2("");
-  const [errorCode, setErrorCode] = useState2(null);
-  const [sessionId, setSessionId] = useState2(null);
-  const [bearerToken, setBearerToken] = useState2(authToken ?? null);
-  const [pendingScreenStream, setPendingScreenStream] = useState2(null);
-  useEffect2(() => {
+  const [connection, setConnection] = useState3(null);
+  const [shouldConnect, setShouldConnect] = useState3(false);
+  const [isStarting, setIsStarting] = useState3(false);
+  const [isDisconnecting, setIsDisconnecting] = useState3(false);
+  const [error, setError] = useState3("");
+  const [errorCode, setErrorCode] = useState3(null);
+  const [sessionId, setSessionId] = useState3(null);
+  const [bearerToken, setBearerToken] = useState3(authToken ?? null);
+  const [pendingScreenStream, setPendingScreenStream] = useState3(null);
+  useEffect3(() => {
     let stale = false;
     if (authToken) {
       setBearerToken(authToken);
@@ -208,15 +257,19 @@ function useSession({
       stale = true;
     };
   }, [authToken, appKey, userToken]);
-  const highlightOptIn = agentControls?.highlight;
-  const startSession = useCallback2(async () => {
+  const startSession = useCallback3(async ({ agentId, agentControls }) => {
     if (!bearerToken) {
       setError("No auth token available");
       return;
     }
+    if (!agentId) {
+      setError("No agent selected");
+      return;
+    }
     setIsStarting(true);
     setError("");
     setErrorCode(null);
+    onStart?.();
     let screenStream = null;
     if (captureMode === "screenshare") {
       try {
@@ -227,10 +280,10 @@ function useSession({
         screenStream = null;
       }
     }
-    const requestAgentControls = highlightOptIn === true ? { highlight: true } : undefined;
+    const requestAgentControls = agentControls?.highlight === true ? { highlight: true } : undefined;
     const headers = { Authorization: `Bearer ${bearerToken}` };
     try {
-      const createResp = await fetch(`${API_URL2}/v1/sessions`, {
+      const createResp = await fetch(`${API_URL3}/v1/sessions`, {
         method: "POST",
         credentials: "omit",
         headers: { "Content-Type": "application/json", ...headers },
@@ -246,7 +299,7 @@ function useSession({
         throw new Error(body?.detail || `Failed to create session: ${createResp.status}`);
       }
       const { session } = await createResp.json();
-      const startResp = await fetch(`${API_URL2}/v1/sessions/${session.id}/start`, {
+      const startResp = await fetch(`${API_URL3}/v1/sessions/${session.id}/start`, {
         method: "POST",
         credentials: "omit",
         headers
@@ -270,40 +323,49 @@ function useSession({
           track.stop();
       }
       setError(e instanceof Error ? e.message : "Failed to start session");
+      onStartError?.();
     } finally {
       setIsStarting(false);
     }
-  }, [agentId, captureMode, highlightOptIn, bearerToken]);
-  const disconnect = useCallback2(async () => {
-    if (sessionId && bearerToken) {
-      try {
-        await fetch(`${API_URL2}/v1/sessions/${sessionId}/complete`, {
-          method: "POST",
-          credentials: "omit",
-          headers: { "Content-Type": "application/json", Authorization: `Bearer ${bearerToken}` },
-          body: JSON.stringify({})
-        });
-      } catch {}
-    }
-    if (pendingScreenStream) {
-      for (const track of pendingScreenStream.getTracks())
-        track.stop();
+  }, [captureMode, bearerToken, onStart, onStartError]);
+  const disconnect = useCallback3(async () => {
+    setIsDisconnecting(true);
+    try {
+      if (sessionId && bearerToken) {
+        try {
+          await fetch(`${API_URL3}/v1/sessions/${sessionId}/complete`, {
+            method: "POST",
+            credentials: "omit",
+            headers: { "Content-Type": "application/json", Authorization: `Bearer ${bearerToken}` },
+            body: JSON.stringify({})
+          });
+        } catch {}
+      }
+      if (pendingScreenStream) {
+        for (const track of pendingScreenStream.getTracks())
+          track.stop();
+      }
+      setError("");
+      setShouldConnect(false);
+      setConnection(null);
+      setSessionId(null);
+      setPendingScreenStream(null);
+      onDisconnect?.();
+    } finally {
+      setIsDisconnecting(false);
     }
-    setError("");
-    setShouldConnect(false);
-    setConnection(null);
-    setSessionId(null);
-    setPendingScreenStream(null);
-  }, [sessionId, bearerToken, pendingScreenStream]);
+  }, [sessionId, bearerToken, pendingScreenStream, onDisconnect]);
   return {
     connection,
     shouldConnect,
     isStarting,
+    isDisconnecting,
     error,
     errorCode,
     startSession,
     disconnect,
-    pendingScreenStream
+    pendingScreenStream,
+    bearerToken
   };
 }
 
@@ -320,12 +382,12 @@ var NAME_MAX_CHARS = 80;
 // src/components/AutoStartMedia.tsx
 import { useConnectionState, useLocalParticipant } from "@livekit/components-react/hooks";
 import { ConnectionState, Track } from "livekit-client";
-import { useEffect as useEffect3, useRef } from "react";
+import { useEffect as useEffect4, useRef } from "react";
 function AutoStartMedia({ pendingScreenStream }) {
   const { localParticipant } = useLocalParticipant();
   const connectionState = useConnectionState();
   const didStartRef = useRef(false);
-  useEffect3(() => {
+  useEffect4(() => {
     if (didStartRef.current)
       return;
     if (connectionState !== ConnectionState.Connected)
@@ -350,7 +412,7 @@ function AutoStartMedia({ pendingScreenStream }) {
 // src/components/DomCapture.tsx
 import { useConnectionState as useConnectionState2, useLocalParticipant as useLocalParticipant2 } from "@livekit/components-react/hooks";
 import { ConnectionState as ConnectionState2, ScreenSharePresets, Track as Track2 } from "livekit-client";
-import { useEffect as useEffect4, useRef as useRef2 } from "react";
+import { useEffect as useEffect5, useRef as useRef2 } from "react";
 
 // src/capture/a11yUtils.ts
 var ROLE_BY_TAG = {
@@ -1098,7 +1160,7 @@ function DomCapture() {
   const { localParticipant } = useLocalParticipant2();
   const connectionState = useConnectionState2();
   const didStartRef = useRef2(false);
-  useEffect4(() => {
+  useEffect5(() => {
     if (didStartRef.current)
       return;
     if (connectionState !== ConnectionState2.Connected)
@@ -1194,255 +1256,6 @@ function DomCapture() {
 
 // src/components/HighlightOverlay.tsx
 import { useDataChannel } from "@livekit/components-react/hooks";
-import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef3, useState as useState3 } from "react";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-var TOOLTIP_MAX_WIDTH = 280;
-var TOOLTIP_GAP = 8;
-var VIEWPORT_MARGIN = 8;
-var TOOLTIP_TOP_THRESHOLD = 48;
-var Z_INDEX = 2147483646;
-var RING_INNER = "oklab(0.585 0.0288678 -0.231205 / 0.95)";
-var RING_OUTER = "oklab(0.585 0.0288678 -0.231205 / 0.25)";
-var textDecoder = new TextDecoder;
-function parseHighlightMessage(payload) {
-  try {
-    const json = JSON.parse(textDecoder.decode(payload));
-    if (!json || typeof json !== "object")
-      return null;
-    if (json.type === "show" && typeof json.ref === "string") {
-      return {
-        type: "show",
-        ref: json.ref,
-        message: typeof json.message === "string" ? json.message : ""
-      };
-    }
-    if (json.type === "clear")
-      return { type: "clear" };
-    return null;
-  } catch {
-    return null;
-  }
-}
-function safeGetIframeDocument(iframe) {
-  try {
-    return iframe.contentDocument;
-  } catch {
-    return null;
-  }
-}
-function safeQuerySelector(doc, selector) {
-  try {
-    return doc.querySelector(selector);
-  } catch {
-    return null;
-  }
-}
-function safeQueryAllIframes(doc) {
-  try {
-    return Array.from(doc.querySelectorAll("iframe"));
-  } catch {
-    return [];
-  }
-}
-function findElementInDocumentTree(rootDoc, selector) {
-  const hit = safeQuerySelector(rootDoc, selector);
-  if (hit)
-    return hit;
-  for (const iframe of safeQueryAllIframes(rootDoc)) {
-    const innerDoc = safeGetIframeDocument(iframe);
-    if (!innerDoc)
-      continue;
-    const nested = findElementInDocumentTree(innerDoc, selector);
-    if (nested)
-      return nested;
-  }
-  return null;
-}
-function findElementByRef(ref) {
-  const selector = `[${REF_ATTR}="${CSS.escape(ref)}"]`;
-  return findElementInDocumentTree(document, selector);
-}
-function findIframeHostingDocument(targetDoc) {
-  const queue = [document];
-  while (queue.length > 0) {
-    const doc = queue.shift();
-    if (!doc)
-      continue;
-    for (const iframe of safeQueryAllIframes(doc)) {
-      if (safeGetIframeDocument(iframe) === targetDoc)
-        return iframe;
-      const innerDoc = safeGetIframeDocument(iframe);
-      if (innerDoc)
-        queue.push(innerDoc);
-    }
-  }
-  return null;
-}
-function getRectInTopViewport(el) {
-  let rect = el.getBoundingClientRect();
-  let ownerDoc = el.ownerDocument;
-  while (ownerDoc && ownerDoc !== document) {
-    const hostingIframe = findIframeHostingDocument(ownerDoc);
-    if (!hostingIframe)
-      return rect;
-    const iframeRect = hostingIframe.getBoundingClientRect();
-    rect = new DOMRect(rect.left + iframeRect.left, rect.top + iframeRect.top, rect.width, rect.height);
-    ownerDoc = hostingIframe.ownerDocument;
-  }
-  return rect;
-}
-function findScrollableAncestor(el) {
-  const win = el.ownerDocument?.defaultView ?? window;
-  let node = el.parentElement;
-  while (node) {
-    const overflow = win.getComputedStyle(node).overflow;
-    if (/auto|scroll|overlay/.test(overflow))
-      return node;
-    node = node.parentElement;
-  }
-  return el.ownerDocument?.documentElement ?? document.documentElement;
-}
-function HighlightOverlay() {
-  const [overlayState, setOverlayState] = useState3(null);
-  const targetElementRef = useRef3(null);
-  const pendingFrameRef = useRef3(null);
-  const clearOverlay = useCallback3(() => {
-    targetElementRef.current = null;
-    setOverlayState(null);
-  }, []);
-  const recomputeRect = useCallback3(() => {
-    pendingFrameRef.current = null;
-    const target = targetElementRef.current;
-    if (!target)
-      return;
-    if (!target.isConnected) {
-      clearOverlay();
-      return;
-    }
-    const rect2 = getRectInTopViewport(target);
-    setOverlayState((prev) => prev ? { ...prev, rect: rect2 } : prev);
-  }, [clearOverlay]);
-  const scheduleRecompute = useCallback3(() => {
-    if (pendingFrameRef.current !== null)
-      return;
-    pendingFrameRef.current = window.requestAnimationFrame(recomputeRect);
-  }, [recomputeRect]);
-  const onHighlightMessage = useCallback3((msg) => {
-    const parsed = parseHighlightMessage(msg.payload);
-    if (!parsed)
-      return;
-    if (parsed.type === "clear") {
-      clearOverlay();
-      return;
-    }
-    const target = findElementByRef(parsed.ref);
-    if (!target) {
-      clearOverlay();
-      return;
-    }
-    targetElementRef.current = target;
-    setOverlayState({
-      ref: parsed.ref,
-      message: parsed.message ?? "",
-      rect: getRectInTopViewport(target)
-    });
-  }, [clearOverlay]);
-  useDataChannel(HIGHLIGHT_TOPIC, onHighlightMessage);
-  useEffect5(() => {
-    if (!overlayState)
-      return;
-    const target = targetElementRef.current;
-    if (!target)
-      return;
-    const onScroll = () => scheduleRecompute();
-    const onResize = () => scheduleRecompute();
-    const watchedWindows = new Set;
-    watchedWindows.add(window);
-    const ownerWindow = target.ownerDocument?.defaultView;
-    if (ownerWindow && ownerWindow !== window)
-      watchedWindows.add(ownerWindow);
-    for (const win of watchedWindows) {
-      win.addEventListener("scroll", onScroll, { capture: true, passive: true });
-      win.addEventListener("resize", onResize, { passive: true });
-    }
-    const resizeObserver = new ResizeObserver(scheduleRecompute);
-    resizeObserver.observe(target);
-    const scrollContainer = findScrollableAncestor(target);
-    const mutationObserver = new MutationObserver(() => {
-      if (!targetElementRef.current?.isConnected) {
-        clearOverlay();
-        return;
-      }
-      scheduleRecompute();
-    });
-    mutationObserver.observe(scrollContainer, { childList: true, subtree: true });
-    return () => {
-      for (const win of watchedWindows) {
-        win.removeEventListener("scroll", onScroll, { capture: true });
-        win.removeEventListener("resize", onResize);
-      }
-      resizeObserver.disconnect();
-      mutationObserver.disconnect();
-      if (pendingFrameRef.current !== null) {
-        window.cancelAnimationFrame(pendingFrameRef.current);
-        pendingFrameRef.current = null;
-      }
-    };
-  }, [overlayState, scheduleRecompute, clearOverlay]);
-  if (!overlayState)
-    return null;
-  const { rect, message } = overlayState;
-  const ringStyle = {
-    position: "fixed",
-    left: `${rect.left}px`,
-    top: `${rect.top}px`,
-    width: `${rect.width}px`,
-    height: `${rect.height}px`,
-    pointerEvents: "none",
-    zIndex: Z_INDEX,
-    boxShadow: `0 0 0 2px ${RING_INNER}, 0 0 0 6px ${RING_OUTER}`,
-    borderRadius: "4px",
-    transition: "none"
-  };
-  const showTooltipBelow = rect.top < TOOLTIP_TOP_THRESHOLD;
-  const tooltipTop = showTooltipBelow ? rect.bottom + TOOLTIP_GAP : rect.top - TOOLTIP_GAP;
-  const tooltipTransform = showTooltipBelow ? "translateY(0)" : "translateY(-100%)";
-  const tooltipLeft = Math.min(Math.max(rect.left, VIEWPORT_MARGIN), window.innerWidth - TOOLTIP_MAX_WIDTH - VIEWPORT_MARGIN);
-  const tooltipStyle = {
-    position: "fixed",
-    left: `${tooltipLeft}px`,
-    top: `${tooltipTop}px`,
-    transform: tooltipTransform,
-    maxWidth: `${TOOLTIP_MAX_WIDTH}px`,
-    pointerEvents: "none",
-    zIndex: Z_INDEX,
-    background: "rgba(45, 43, 61, 0.96)",
-    color: "#ffffff",
-    padding: "6px 10px",
-    borderRadius: "8px",
-    fontSize: "13px",
-    lineHeight: "1.35",
-    fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif',
-    boxShadow: "0 6px 20px rgba(0, 0, 0, 0.25)",
-    whiteSpace: "normal",
-    wordWrap: "break-word"
-  };
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      /* @__PURE__ */ jsx("div", {
-        "data-skippr-private": "true",
-        style: ringStyle,
-        "aria-hidden": "true"
-      }),
-      message && /* @__PURE__ */ jsx("div", {
-        "data-skippr-private": "true",
-        style: tooltipStyle,
-        role: "tooltip",
-        children: message
-      })
-    ]
-  });
-}
 // ../../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";
 
@@ -1557,28 +1370,63 @@ var __iconNode3 = [
   ["circle", { cx: "4", cy: "20", r: "2", key: "6kqj1y" }]
 ];
 var Sparkles = createLucideIcon("sparkles", __iconNode3);
-// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/calendar.js
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/bot.js
 var __iconNode4 = [
+  ["path", { d: "M12 8V4H8", key: "hb8ula" }],
+  ["rect", { width: "16", height: "12", x: "4", y: "8", rx: "2", key: "enze0r" }],
+  ["path", { d: "M2 14h2", key: "vft8re" }],
+  ["path", { d: "M20 14h2", key: "4cs60a" }],
+  ["path", { d: "M15 13v2", key: "1xurst" }],
+  ["path", { d: "M9 13v2", key: "rq6x2g" }]
+];
+var Bot = createLucideIcon("bot", __iconNode4);
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/calendar.js
+var __iconNode5 = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
   ["path", { d: "M3 10h18", key: "8toen8" }]
 ];
-var Calendar = createLucideIcon("calendar", __iconNode4);
+var Calendar = createLucideIcon("calendar", __iconNode5);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/chevron-down.js
-var __iconNode5 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-var ChevronDown = createLucideIcon("chevron-down", __iconNode5);
+var __iconNode6 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+var ChevronDown = createLucideIcon("chevron-down", __iconNode6);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/circle.js
-var __iconNode6 = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
-var Circle = createLucideIcon("circle", __iconNode6);
+var __iconNode7 = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
+var Circle = createLucideIcon("circle", __iconNode7);
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/graduation-cap.js
+var __iconNode8 = [
+  [
+    "path",
+    {
+      d: "M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z",
+      key: "j76jl0"
+    }
+  ],
+  ["path", { d: "M22 10v6", key: "1lu8f3" }],
+  ["path", { d: "M6 12.5V16a6 3 0 0 0 12 0v-3.5", key: "1r8lef" }]
+];
+var GraduationCap = createLucideIcon("graduation-cap", __iconNode8);
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/headset.js
+var __iconNode9 = [
+  [
+    "path",
+    {
+      d: "M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z",
+      key: "12oyoe"
+    }
+  ],
+  ["path", { d: "M21 16v2a4 4 0 0 1-4 4h-5", key: "1x7m43" }]
+];
+var Headset = createLucideIcon("headset", __iconNode9);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mail.js
-var __iconNode7 = [
+var __iconNode10 = [
   ["path", { d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7", key: "132q7q" }],
   ["rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", key: "izxlao" }]
 ];
-var Mail = createLucideIcon("mail", __iconNode7);
+var Mail = createLucideIcon("mail", __iconNode10);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/message-circle.js
-var __iconNode8 = [
+var __iconNode11 = [
   [
     "path",
     {
@@ -1587,9 +1435,9 @@ var __iconNode8 = [
     }
   ]
 ];
-var MessageCircle = createLucideIcon("message-circle", __iconNode8);
+var MessageCircle = createLucideIcon("message-circle", __iconNode11);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/message-square.js
-var __iconNode9 = [
+var __iconNode12 = [
   [
     "path",
     {
@@ -1598,9 +1446,9 @@ var __iconNode9 = [
     }
   ]
 ];
-var MessageSquare = createLucideIcon("message-square", __iconNode9);
+var MessageSquare = createLucideIcon("message-square", __iconNode12);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic-off.js
-var __iconNode10 = [
+var __iconNode13 = [
   ["path", { d: "M12 19v3", key: "npa21l" }],
   ["path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33", key: "1gzdoj" }],
   ["path", { d: "M16.95 16.95A7 7 0 0 1 5 12v-2", key: "cqa7eg" }],
@@ -1608,71 +1456,341 @@ var __iconNode10 = [
   ["path", { d: "m2 2 20 20", key: "1ooewy" }],
   ["path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12", key: "r2i35w" }]
 ];
-var MicOff = createLucideIcon("mic-off", __iconNode10);
+var MicOff = createLucideIcon("mic-off", __iconNode13);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic.js
-var __iconNode11 = [
+var __iconNode14 = [
   ["path", { d: "M12 19v3", key: "npa21l" }],
   ["path", { d: "M19 10v2a7 7 0 0 1-14 0v-2", key: "1vc78b" }],
   ["rect", { x: "9", y: "2", width: "6", height: "13", rx: "3", key: "s6n7sd" }]
 ];
-var Mic = createLucideIcon("mic", __iconNode11);
+var Mic = createLucideIcon("mic", __iconNode14);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/minimize-2.js
-var __iconNode12 = [
+var __iconNode15 = [
   ["path", { d: "m14 10 7-7", key: "oa77jy" }],
   ["path", { d: "M20 10h-6V4", key: "mjg0md" }],
   ["path", { d: "m3 21 7-7", key: "tjx5ai" }],
   ["path", { d: "M4 14h6v6", key: "rmj7iw" }]
 ];
-var Minimize2 = createLucideIcon("minimize-2", __iconNode12);
+var Minimize2 = createLucideIcon("minimize-2", __iconNode15);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor-off.js
-var __iconNode13 = [
+var __iconNode16 = [
   ["path", { d: "M12 17v4", key: "1riwvh" }],
   ["path", { d: "M17 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 1.184-1.826", key: "cv7jms" }],
   ["path", { d: "m2 2 20 20", key: "1ooewy" }],
   ["path", { d: "M8 21h8", key: "1ev6f3" }],
   ["path", { d: "M8.656 3H20a2 2 0 0 1 2 2v10a2 2 0 0 1-.293 1.042", key: "z8ni2w" }]
 ];
-var MonitorOff = createLucideIcon("monitor-off", __iconNode13);
+var MonitorOff = createLucideIcon("monitor-off", __iconNode16);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor.js
-var __iconNode14 = [
+var __iconNode17 = [
   ["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
   ["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
   ["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
 ];
-var Monitor = createLucideIcon("monitor", __iconNode14);
+var Monitor = createLucideIcon("monitor", __iconNode17);
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mouse-pointer-2.js
+var __iconNode18 = [
+  [
+    "path",
+    {
+      d: "M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z",
+      key: "edeuup"
+    }
+  ]
+];
+var MousePointer2 = createLucideIcon("mouse-pointer-2", __iconNode18);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/phone-off.js
-var __iconNode15 = [
+var __iconNode19 = [
   [
     "path",
     {
       d: "M10.1 13.9a14 14 0 0 0 3.732 2.668 1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2 18 18 0 0 1-12.728-5.272",
       key: "1wngk7"
     }
-  ],
-  ["path", { d: "M22 2 2 22", key: "y4kqgn" }],
-  [
-    "path",
-    {
-      d: "M4.76 13.582A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 .244.473",
-      key: "10hv5p"
+  ],
+  ["path", { d: "M22 2 2 22", key: "y4kqgn" }],
+  [
+    "path",
+    {
+      d: "M4.76 13.582A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 .244.473",
+      key: "10hv5p"
+    }
+  ]
+];
+var PhoneOff = createLucideIcon("phone-off", __iconNode19);
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/rocket.js
+var __iconNode20 = [
+  ["path", { d: "M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5", key: "qeys4" }],
+  [
+    "path",
+    {
+      d: "M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09",
+      key: "u4xsad"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z",
+      key: "676m9"
+    }
+  ],
+  ["path", { d: "M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05", key: "92ym6u" }]
+];
+var Rocket = createLucideIcon("rocket", __iconNode20);
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/send.js
+var __iconNode21 = [
+  [
+    "path",
+    {
+      d: "M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z",
+      key: "1ffxy3"
+    }
+  ],
+  ["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
+];
+var Send = createLucideIcon("send", __iconNode21);
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/user-plus.js
+var __iconNode22 = [
+  ["path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2", key: "1yyitq" }],
+  ["circle", { cx: "9", cy: "7", r: "4", key: "nufk8" }],
+  ["line", { x1: "19", x2: "19", y1: "8", y2: "14", key: "1bvyxn" }],
+  ["line", { x1: "22", x2: "16", y1: "11", y2: "11", key: "1shjgl" }]
+];
+var UserPlus = createLucideIcon("user-plus", __iconNode22);
+// src/components/HighlightOverlay.tsx
+import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef3, useState as useState4 } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Z_INDEX = 2147483646;
+var HIGHLIGHT_PADDING = 6;
+var textDecoder = new TextDecoder;
+function parseHighlightMessage(payload) {
+  try {
+    const json = JSON.parse(textDecoder.decode(payload));
+    if (!json || typeof json !== "object")
+      return null;
+    if (json.type === "show" && typeof json.ref === "string") {
+      return {
+        type: "show",
+        ref: json.ref,
+        message: typeof json.message === "string" ? json.message : undefined
+      };
+    }
+    if (json.type === "clear")
+      return { type: "clear" };
+    return null;
+  } catch {
+    return null;
+  }
+}
+function safeGetIframeDocument(iframe) {
+  try {
+    return iframe.contentDocument;
+  } catch {
+    return null;
+  }
+}
+function safeQuerySelector(doc, selector) {
+  try {
+    return doc.querySelector(selector);
+  } catch {
+    return null;
+  }
+}
+function safeQueryAllIframes(doc) {
+  try {
+    return Array.from(doc.querySelectorAll("iframe"));
+  } catch {
+    return [];
+  }
+}
+function findElementInDocumentTree(rootDoc, selector) {
+  const hit = safeQuerySelector(rootDoc, selector);
+  if (hit)
+    return hit;
+  for (const iframe of safeQueryAllIframes(rootDoc)) {
+    const innerDoc = safeGetIframeDocument(iframe);
+    if (!innerDoc)
+      continue;
+    const nested = findElementInDocumentTree(innerDoc, selector);
+    if (nested)
+      return nested;
+  }
+  return null;
+}
+function findElementByRef(ref) {
+  const selector = `[${REF_ATTR}="${CSS.escape(ref)}"]`;
+  return findElementInDocumentTree(document, selector);
+}
+function findIframeHostingDocument(targetDoc) {
+  const queue = [document];
+  while (queue.length > 0) {
+    const doc = queue.shift();
+    if (!doc)
+      continue;
+    for (const iframe of safeQueryAllIframes(doc)) {
+      if (safeGetIframeDocument(iframe) === targetDoc)
+        return iframe;
+      const innerDoc = safeGetIframeDocument(iframe);
+      if (innerDoc)
+        queue.push(innerDoc);
+    }
+  }
+  return null;
+}
+function getRectInTopViewport(el) {
+  let rect = el.getBoundingClientRect();
+  let ownerDoc = el.ownerDocument;
+  while (ownerDoc && ownerDoc !== document) {
+    const hostingIframe = findIframeHostingDocument(ownerDoc);
+    if (!hostingIframe)
+      return rect;
+    const iframeRect = hostingIframe.getBoundingClientRect();
+    rect = new DOMRect(rect.left + iframeRect.left, rect.top + iframeRect.top, rect.width, rect.height);
+    ownerDoc = hostingIframe.ownerDocument;
+  }
+  return rect;
+}
+function findScrollableAncestor(el) {
+  const win = el.ownerDocument?.defaultView ?? window;
+  let node = el.parentElement;
+  while (node) {
+    const overflow = win.getComputedStyle(node).overflow;
+    if (/auto|scroll|overlay/.test(overflow))
+      return node;
+    node = node.parentElement;
+  }
+  return el.ownerDocument?.documentElement ?? document.documentElement;
+}
+function HighlightOverlay() {
+  const [overlayState, setOverlayState] = useState4(null);
+  const targetElementRef = useRef3(null);
+  const pendingFrameRef = useRef3(null);
+  const clearOverlay = useCallback4(() => {
+    targetElementRef.current = null;
+    setOverlayState(null);
+  }, []);
+  const recomputeRect = useCallback4(() => {
+    pendingFrameRef.current = null;
+    const target = targetElementRef.current;
+    if (!target)
+      return;
+    if (!target.isConnected) {
+      clearOverlay();
+      return;
+    }
+    const rect2 = getRectInTopViewport(target);
+    setOverlayState((prev) => prev ? { ...prev, rect: rect2 } : prev);
+  }, [clearOverlay]);
+  const scheduleRecompute = useCallback4(() => {
+    if (pendingFrameRef.current !== null)
+      return;
+    pendingFrameRef.current = window.requestAnimationFrame(recomputeRect);
+  }, [recomputeRect]);
+  const onHighlightMessage = useCallback4((msg) => {
+    const parsed = parseHighlightMessage(msg.payload);
+    if (!parsed)
+      return;
+    if (parsed.type === "clear") {
+      clearOverlay();
+      return;
     }
-  ]
-];
-var PhoneOff = createLucideIcon("phone-off", __iconNode15);
-// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/send.js
-var __iconNode16 = [
-  [
-    "path",
-    {
-      d: "M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z",
-      key: "1ffxy3"
+    const target = findElementByRef(parsed.ref);
+    if (!target) {
+      clearOverlay();
+      return;
     }
-  ],
-  ["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
-];
-var Send = createLucideIcon("send", __iconNode16);
+    targetElementRef.current = target;
+    setOverlayState({
+      ref: parsed.ref,
+      message: parsed.message || "Click here",
+      rect: getRectInTopViewport(target)
+    });
+  }, [clearOverlay]);
+  useDataChannel(HIGHLIGHT_TOPIC, onHighlightMessage);
+  useEffect6(() => {
+    if (!overlayState)
+      return;
+    const target = targetElementRef.current;
+    if (!target)
+      return;
+    const onScroll = () => scheduleRecompute();
+    const onResize = () => scheduleRecompute();
+    const watchedWindows = new Set;
+    watchedWindows.add(window);
+    const ownerWindow = target.ownerDocument?.defaultView;
+    if (ownerWindow && ownerWindow !== window)
+      watchedWindows.add(ownerWindow);
+    for (const win of watchedWindows) {
+      win.addEventListener("scroll", onScroll, { capture: true, passive: true });
+      win.addEventListener("resize", onResize, { passive: true });
+    }
+    const resizeObserver = new ResizeObserver(scheduleRecompute);
+    resizeObserver.observe(target);
+    const scrollContainer = findScrollableAncestor(target);
+    const mutationObserver = new MutationObserver(() => {
+      if (!targetElementRef.current?.isConnected) {
+        clearOverlay();
+        return;
+      }
+      scheduleRecompute();
+    });
+    mutationObserver.observe(scrollContainer, { childList: true, subtree: true });
+    return () => {
+      for (const win of watchedWindows) {
+        win.removeEventListener("scroll", onScroll, { capture: true });
+        win.removeEventListener("resize", onResize);
+      }
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+      if (pendingFrameRef.current !== null) {
+        window.cancelAnimationFrame(pendingFrameRef.current);
+        pendingFrameRef.current = null;
+      }
+    };
+  }, [overlayState, scheduleRecompute, clearOverlay]);
+  if (!overlayState)
+    return null;
+  const { rect, message } = overlayState;
+  const containerStyle = {
+    position: "fixed",
+    left: `${rect.left - HIGHLIGHT_PADDING}px`,
+    top: `${rect.top - HIGHLIGHT_PADDING}px`,
+    width: `${rect.width + HIGHLIGHT_PADDING * 2}px`,
+    height: `${rect.height + HIGHLIGHT_PADDING * 2}px`,
+    pointerEvents: "none",
+    zIndex: Z_INDEX
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    "data-skippr-private": "true",
+    style: containerStyle,
+    className: "skippr:relative",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        "aria-hidden": "true",
+        className: "skippr:absolute skippr:inset-0 skippr:rounded-[1rem] skippr:border-2 skippr:border-cyan-400 skippr:animate-skippr-annotation-pulse"
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        role: "tooltip",
+        className: "skippr:absolute skippr:-bottom-9 skippr:left-1/2 skippr:-translate-x-1/2 skippr:flex skippr:items-center skippr:gap-1.5 skippr:rounded-full skippr:bg-cyan-400 skippr:px-2.5 skippr:py-1 skippr:shadow-[0_4px_12px_rgba(0,0,0,0.12)]",
+        children: [
+          /* @__PURE__ */ jsx(MousePointer2, {
+            "aria-hidden": "true",
+            className: "skippr:h-3 skippr:w-3 skippr:text-cyan-900",
+            fill: "currentColor"
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: "skippr:text-[11px] skippr:font-medium skippr:text-cyan-900 skippr:whitespace-nowrap",
+            children: message
+          })
+        ]
+      })
+    ]
+  });
+}
+
 // src/components/MinimizedBubble.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 
 // src/hooks/useLiveAgent.ts
 import { use } from "react";
@@ -1688,7 +1806,7 @@ function useLiveAgent() {
 // src/hooks/useMediaControls.ts
 import { useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react/hooks";
 import { ScreenSharePresets as ScreenSharePresets2 } from "livekit-client";
-import { useCallback as useCallback4 } from "react";
+import { useCallback as useCallback5 } from "react";
 var SCREEN_SHARE_OPTIONS = {
   video: { displaySurface: "browser" },
   resolution: ScreenSharePresets2.h720fps30.resolution,
@@ -1698,14 +1816,14 @@ function useMediaControls() {
   const { localParticipant } = useLocalParticipant3();
   const isMuted = !localParticipant.isMicrophoneEnabled;
   const isScreenSharing = localParticipant.isScreenShareEnabled;
-  const toggleMute = useCallback4(async () => {
+  const toggleMute = useCallback5(async () => {
     try {
       await localParticipant.setMicrophoneEnabled(isMuted);
     } catch (error) {
       console.error("Failed to toggle microphone:", error);
     }
   }, [localParticipant, isMuted]);
-  const toggleScreenShare = useCallback4(async () => {
+  const toggleScreenShare = useCallback5(async () => {
     try {
       await localParticipant.setScreenShareEnabled(!isScreenSharing, SCREEN_SHARE_OPTIONS);
     } catch (error) {
@@ -1734,7 +1852,7 @@ function useAgentVoiceState() {
 }
 
 // src/components/LauncherStatusPill.tsx
-import { jsx as jsx2, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
 function pillStatusFromAgent(state, canSeePage) {
   if (state === "speaking")
     return "talking";
@@ -1743,26 +1861,36 @@ function pillStatusFromAgent(state, canSeePage) {
   return canSeePage ? "observing" : "connected";
 }
 function LauncherStatusPill() {
-  const { isConnected, expandPanel, setSidebarTab, position, captureMode } = useLiveAgent();
+  const { isConnected, isStarting, expandPanel, setSidebarTab, position, captureMode } = useLiveAgent();
   const { state } = useAgentVoiceState();
   const { isScreenSharing } = useMediaControls();
-  if (!isConnected)
+  const isStandingBy = isStarting && !isConnected;
+  if (!isConnected && !isStandingBy)
     return null;
   const canSeePage = captureMode === "auto" || isScreenSharing;
-  const status = pillStatusFromAgent(state, canSeePage);
-  const openChat = () => {
-    setSidebarTab("chat");
+  const status = isStandingBy ? "standing-by" : pillStatusFromAgent(state, canSeePage);
+  const handleClick = () => {
+    if (!isStandingBy)
+      setSidebarTab("chat");
     expandPanel();
   };
   return /* @__PURE__ */ jsx2("button", {
     type: "button",
-    onClick: openChat,
+    onClick: handleClick,
     className: cn("skippr:fixed skippr:bottom-20 skippr:z-[9999]", "skippr:flex skippr:items-center skippr:gap-2", "skippr:rounded-full skippr:bg-bubble/95 skippr:backdrop-blur-sm", "skippr:px-3 skippr:py-1.5", "skippr:text-xs skippr:font-medium skippr:text-white", "skippr:shadow-[0_8px_24px_rgba(45,43,61,0.35)]", "skippr:cursor-pointer skippr:transition-colors skippr:hover:bg-bubble", "skippr:animate-[skippr-bubble-in_0.28s_ease-out]", position === "right" ? "skippr:right-6" : "skippr:left-6"),
-    "aria-label": `Skippr is ${status} — click to open chat`,
+    "aria-label": isStandingBy ? "Skippr is standing by — click to open" : `Skippr is ${status} — click to open chat`,
     children: /* @__PURE__ */ jsxs2("span", {
       className: "skippr:flex skippr:items-center skippr:gap-2 skippr:animate-[skippr-pill-content_0.22s_ease-out]",
       children: [
-        status === "observing" && /* @__PURE__ */ jsxs2(Fragment2, {
+        status === "standing-by" && /* @__PURE__ */ jsxs2(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx2("span", {
+              children: "Standing by"
+            }),
+            /* @__PURE__ */ jsx2(ThinkingDots, {})
+          ]
+        }),
+        status === "observing" && /* @__PURE__ */ jsxs2(Fragment, {
           children: [
             /* @__PURE__ */ jsx2(ObservingIcon, {}),
             /* @__PURE__ */ jsx2("span", {
@@ -1770,7 +1898,7 @@ function LauncherStatusPill() {
             })
           ]
         }),
-        status === "connected" && /* @__PURE__ */ jsxs2(Fragment2, {
+        status === "connected" && /* @__PURE__ */ jsxs2(Fragment, {
           children: [
             /* @__PURE__ */ jsx2(ConnectedDot, {}),
             /* @__PURE__ */ jsx2("span", {
@@ -1778,7 +1906,7 @@ function LauncherStatusPill() {
             })
           ]
         }),
-        status === "talking" && /* @__PURE__ */ jsxs2(Fragment2, {
+        status === "talking" && /* @__PURE__ */ jsxs2(Fragment, {
           children: [
             /* @__PURE__ */ jsx2(SpeakingBars, {}),
             /* @__PURE__ */ jsx2("span", {
@@ -1786,7 +1914,7 @@ function LauncherStatusPill() {
             })
           ]
         }),
-        status === "thinking" && /* @__PURE__ */ jsxs2(Fragment2, {
+        status === "thinking" && /* @__PURE__ */ jsxs2(Fragment, {
           children: [
             /* @__PURE__ */ jsx2(ThinkingDots, {}),
             /* @__PURE__ */ jsx2("span", {
@@ -1958,7 +2086,7 @@ function Logo({ className }) {
 }
 
 // src/components/MinimizedBubble.tsx
-import { jsx as jsx4, jsxs as jsxs4, Fragment as Fragment3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4, Fragment as Fragment2 } from "react/jsx-runtime";
 var CONTROL_BUTTON = "skippr:flex skippr:size-12 skippr:items-center skippr:justify-center skippr:rounded-[14px] skippr:cursor-pointer skippr:transition-all skippr:hover:-translate-y-0.5 skippr:active:translate-y-0";
 var CONTROL_SHADOW = "skippr:shadow-[0_4px_16px_rgba(0,0,0,0.15),0_2px_4px_rgba(0,0,0,0.1)]";
 function ConnectedLauncher() {
@@ -1969,7 +2097,7 @@ function ConnectedLauncher() {
     setSidebarTab("chat");
     expandPanel();
   };
-  return /* @__PURE__ */ jsxs4(Fragment3, {
+  return /* @__PURE__ */ jsxs4(Fragment2, {
     children: [
       /* @__PURE__ */ jsx4("button", {
         type: "button",
@@ -2031,7 +2159,7 @@ function WelcomeBubble({
   position,
   onDismiss
 }) {
-  useEffect6(() => {
+  useEffect7(() => {
     const timer = setTimeout(onDismiss, 5000);
     return () => clearTimeout(timer);
   }, [onDismiss]);
@@ -2054,14 +2182,14 @@ function MinimizedBubble({
   onDismissWelcome
 }) {
   const { isConnected, isStarting, position } = useLiveAgent();
-  const inSession = isConnected || isStarting;
-  return /* @__PURE__ */ jsxs4(Fragment3, {
+  const inSession = isConnected;
+  return /* @__PURE__ */ jsxs4(Fragment2, {
     children: [
       /* @__PURE__ */ jsx4(LauncherStatusPill, {}),
       /* @__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__ */ jsx4(WelcomeBubble, {
+          welcomeMessage && !isConnected && !isStarting && !welcomeDismissed && /* @__PURE__ */ jsx4(WelcomeBubble, {
             message: welcomeMessage,
             position,
             onDismiss: onDismissWelcome
@@ -2074,7 +2202,7 @@ function MinimizedBubble({
 }
 
 // src/components/Sidebar.tsx
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect15 } from "react";
 
 // src/hooks/useCombinedMessages.ts
 import { useMemo as useMemo4 } from "react";
@@ -2156,15 +2284,15 @@ function useCombinedMessages() {
 }
 
 // src/hooks/usePhaseUpdates.ts
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback6 } from "react";
 
 // src/hooks/useAgentState.ts
 import { useRemoteParticipants } from "@livekit/components-react/hooks";
-import { useEffect as useEffect7, useState as useState4 } from "react";
+import { useEffect as useEffect8, useState as useState5 } from "react";
 function useAgentState(attributeKey, parse, initial) {
-  const [value, setValue] = useState4(initial);
+  const [value, setValue] = useState5(initial);
   const remoteParticipants = useRemoteParticipants();
-  useEffect7(() => {
+  useEffect8(() => {
     const agentParticipant = remoteParticipants.find((p) => p.attributes?.[attributeKey]);
     if (agentParticipant) {
       const attr = agentParticipant.attributes?.[attributeKey];
@@ -2210,13 +2338,13 @@ function parsePhases(json) {
   return null;
 }
 function usePhaseUpdates() {
-  const parse = useCallback5(parsePhases, []);
+  const parse = useCallback6(parsePhases, []);
   const phases = useAgentState("phases", parse, []);
   return { phases };
 }
 
 // src/hooks/useSessionRemaining.ts
-import { useEffect as useEffect8, useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect9, useRef as useRef4, useState as useState6 } from "react";
 
 // src/lib/format.ts
 function formatTime(seconds) {
@@ -2233,8 +2361,8 @@ function parseNumber(s) {
 function useSessionRemaining() {
   const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
   const endTimeRef = useRef4(null);
-  const [remaining, setRemaining] = useState5(null);
-  useEffect8(() => {
+  const [remaining, setRemaining] = useState6(null);
+  useEffect9(() => {
     if (maxCallDuration === null || endTimeRef.current !== null)
       return;
     const endTime = Date.now() + maxCallDuration * 1000;
@@ -2251,10 +2379,10 @@ function useSessionRemaining() {
 }
 
 // src/hooks/useElapsedSeconds.ts
-import { useEffect as useEffect9, useState as useState6 } from "react";
+import { useEffect as useEffect10, useState as useState7 } from "react";
 function useElapsedSeconds(isRunning) {
-  const [elapsed, setElapsed] = useState6(0);
-  useEffect9(() => {
+  const [elapsed, setElapsed] = useState7(0);
+  useEffect10(() => {
     if (!isRunning) {
       setElapsed(0);
       return;
@@ -2352,7 +2480,7 @@ function LoadingDots({ label }) {
 }
 
 // src/components/LoginFlow.tsx
-import { useCallback as useCallback6, useEffect as useEffect10, useRef as useRef5, useState as useState7 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect11, useRef as useRef5, useState as useState8 } from "react";
 
 // src/components/ui/button.tsx
 import { forwardRef as forwardRef3 } from "react";
@@ -2388,20 +2516,20 @@ import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var OTP_LENGTH = 6;
 var DIGIT_KEYS = ["d0", "d1", "d2", "d3", "d4", "d5"];
 function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
-  const [step, setStep] = useState7("email");
-  const [email, setEmail] = useState7("");
-  const handleRequestOtp = useCallback6(async (emailValue) => {
+  const [step, setStep] = useState8("email");
+  const [email, setEmail] = useState8("");
+  const handleRequestOtp = useCallback7(async (emailValue) => {
     const success = await requestOtp(emailValue);
     if (success)
       setStep("otp");
   }, [requestOtp]);
-  const handleVerifyOtp = useCallback6(async (code) => {
+  const handleVerifyOtp = useCallback7(async (code) => {
     await verifyOtp(email, code);
   }, [verifyOtp, email]);
-  const handleBack = useCallback6(() => {
+  const handleBack = useCallback7(() => {
     setStep("email");
   }, []);
-  const handleResend = useCallback6(async () => {
+  const handleResend = useCallback7(async () => {
     await requestOtp(email);
   }, [requestOtp, email]);
   if (step === "otp") {
@@ -2478,30 +2606,30 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
   });
 }
 function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
-  const [digits, setDigits] = useState7(Array(OTP_LENGTH).fill(""));
-  const [resendCooldown, setResendCooldown] = useState7(0);
+  const [digits, setDigits] = useState8(Array(OTP_LENGTH).fill(""));
+  const [resendCooldown, setResendCooldown] = useState8(0);
   const inputRefs = useRef5([]);
   const submittedRef = useRef5(false);
-  useEffect10(() => {
+  useEffect11(() => {
     inputRefs.current[0]?.focus();
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     if (error)
       submittedRef.current = false;
   }, [error]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (resendCooldown <= 0)
       return;
     const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
     return () => clearTimeout(timer);
   }, [resendCooldown]);
-  const submitCode = useCallback6((code) => {
+  const submitCode = useCallback7((code) => {
     if (submittedRef.current || isSubmitting)
       return;
     submittedRef.current = true;
     onSubmit(code);
   }, [onSubmit, isSubmitting]);
-  const handleDigitChange = useCallback6((index2, value) => {
+  const handleDigitChange = useCallback7((index2, value) => {
     const digit = value.replace(/\D/g, "").slice(-1);
     const newDigits = [...digits];
     newDigits[index2] = digit;
@@ -2515,12 +2643,12 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
         submitCode(code);
     }
   }, [digits, submitCode]);
-  const handleKeyDown = useCallback6((index2, e) => {
+  const handleKeyDown = useCallback7((index2, e) => {
     if (e.key === "Backspace" && !digits[index2] && index2 > 0) {
       inputRefs.current[index2 - 1]?.focus();
     }
   }, [digits]);
-  const handlePaste = useCallback6((e) => {
+  const handlePaste = useCallback7((e) => {
     e.preventDefault();
     const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, OTP_LENGTH);
     if (pasted.length > 0) {
@@ -2682,17 +2810,17 @@ function MeetingControls({ onHangUp, showScreenShareToggle = true }) {
 }
 
 // src/components/MessageList.tsx
-import { useEffect as useEffect12, useRef as useRef7 } from "react";
+import { useEffect as useEffect13, useRef as useRef7 } from "react";
 
 // src/components/ChatInput.tsx
-import { useEffect as useEffect11, useRef as useRef6, useState as useState8 } from "react";
+import { useEffect as useEffect12, useRef as useRef6, useState as useState9 } 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] = useState8("");
+  const [inputText, setInputText] = useState9("");
   const textareaRef = useRef6(null);
   const canSend = inputText.trim().length > 0 && !isSendingChat;
-  useEffect11(() => {
+  useEffect12(() => {
     if (autoFocus)
       textareaRef.current?.focus();
   }, [autoFocus]);
@@ -2839,7 +2967,7 @@ function MessageList({
 }) {
   const scrollRef = useRef7(null);
   const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
-  useEffect12(() => {
+  useEffect13(() => {
     scrollRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages.length, lastMessage?.content]);
   const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
@@ -2870,50 +2998,205 @@ function MessageList({
   });
 }
 
-// src/components/SessionAgenda.tsx
+// src/components/ModuleSelector.tsx
+import { useEffect as useEffect14, useRef as useRef8, useState as useState10 } from "react";
 import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+var AGENT_TYPE_ICONS = {
+  onboarding: UserPlus,
+  demo: Rocket,
+  training: GraduationCap,
+  support: Headset
+};
+function getAgentIcon(type) {
+  return AGENT_TYPE_ICONS[type] ?? Bot;
+}
+function ModuleSelector() {
+  const {
+    availableModules,
+    isLoadingModules,
+    modulesError,
+    refetchModules,
+    selectModule,
+    isStarting,
+    isDisconnecting,
+    error
+  } = useLiveAgent();
+  const isBusy = isStarting || isDisconnecting;
+  const scrollRef = useRef8(null);
+  const [showScrollHint, setShowScrollHint] = useState10(false);
+  const [isScrolled, setIsScrolled] = useState10(false);
+  useEffect14(() => {
+    const el = scrollRef.current;
+    if (!el)
+      return;
+    function update() {
+      if (!el)
+        return;
+      const overflows = el.scrollHeight > el.clientHeight + 1;
+      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 4;
+      setShowScrollHint(overflows && !atBottom);
+      setIsScrolled(el.scrollTop > 0);
+    }
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const observer = new ResizeObserver(update);
+    observer.observe(el);
+    return () => {
+      el.removeEventListener("scroll", update);
+      observer.disconnect();
+    };
+  }, []);
+  if (isLoadingModules && availableModules.length === 0) {
+    return /* @__PURE__ */ jsx14("div", {
+      className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center skippr:p-6",
+      children: /* @__PURE__ */ jsx14(LoadingDots, {
+        label: "Loading modules..."
+      })
+    });
+  }
+  if (modulesError) {
+    return /* @__PURE__ */ jsxs13("div", {
+      className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:p-6 skippr:text-center",
+      children: [
+        /* @__PURE__ */ jsx14("p", {
+          className: "skippr:text-sm skippr:text-foreground",
+          children: "Couldn't load modules."
+        }),
+        /* @__PURE__ */ jsx14("p", {
+          className: "skippr:text-xs skippr:text-muted-foreground",
+          children: modulesError
+        }),
+        /* @__PURE__ */ jsx14("button", {
+          type: "button",
+          onClick: () => void refetchModules(),
+          className: "skippr:cursor-pointer skippr:rounded-lg skippr:bg-foreground skippr:px-3 skippr:py-1.5 skippr:text-xs skippr:font-medium skippr:text-background",
+          children: "Try again"
+        })
+      ]
+    });
+  }
+  if (availableModules.length === 0) {
+    return /* @__PURE__ */ jsx14("div", {
+      className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center skippr:p-6 skippr:text-center",
+      children: /* @__PURE__ */ jsx14("p", {
+        className: "skippr:text-sm skippr:text-muted-foreground",
+        children: "No experts available."
+      })
+    });
+  }
+  return /* @__PURE__ */ jsxs13("div", {
+    className: "skippr:relative skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
+    children: [
+      /* @__PURE__ */ jsxs13("div", {
+        ref: scrollRef,
+        className: "skippr-no-scrollbar skippr:flex-1 skippr:overflow-y-auto",
+        children: [
+          /* @__PURE__ */ jsx14("h3", {
+            className: `skippr:sticky skippr:top-0 skippr:z-10 skippr:bg-background skippr:px-4 skippr:py-3 skippr:text-xs skippr:font-medium skippr:uppercase skippr:tracking-wider skippr:text-muted-foreground skippr:transition-shadow ${isScrolled ? "skippr:border-b skippr:border-border" : ""}`,
+            children: "Choose an agent"
+          }),
+          /* @__PURE__ */ jsxs13("div", {
+            className: "skippr:px-4 skippr:pt-3 skippr:pb-5",
+            children: [
+              error && /* @__PURE__ */ jsx14("div", {
+                role: "alert",
+                className: "skippr:mb-3 skippr:rounded-lg skippr:border skippr:border-destructive/20 skippr:bg-destructive/10 skippr:px-3 skippr:py-2 skippr:text-xs skippr:text-destructive",
+                children: error
+              }),
+              /* @__PURE__ */ jsx14("div", {
+                className: "skippr:grid skippr:grid-cols-2 skippr:gap-2.5",
+                children: availableModules.map((module, index2) => {
+                  const isFeatured = index2 === 0;
+                  const isWide = index2 === availableModules.length - 1 && availableModules.length % 2 === 1;
+                  const Icon2 = getAgentIcon(module.type);
+                  const base = "skippr:group skippr:flex skippr:cursor-pointer skippr:gap-3 skippr:rounded-xl skippr:text-left skippr:transition-colors skippr:disabled:cursor-not-allowed skippr:disabled:opacity-50";
+                  const layout = isWide ? "skippr:items-center skippr:p-3.5 skippr:pb-5" : "skippr:flex-col skippr:items-start skippr:p-3.5";
+                  const variant = isFeatured ? "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90" : "skippr:bg-background skippr:ring-1 skippr:ring-foreground/10 skippr:hover:bg-muted/50";
+                  const span = isWide ? "skippr:col-span-2" : "";
+                  return /* @__PURE__ */ jsxs13("button", {
+                    type: "button",
+                    disabled: isBusy,
+                    onClick: () => selectModule(module.id),
+                    className: `${base} ${layout} ${variant} ${span}`,
+                    children: [
+                      /* @__PURE__ */ jsx14("div", {
+                        className: isFeatured ? "skippr:flex skippr:h-9 skippr:w-9 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-lg skippr:bg-primary-foreground/15" : "skippr:flex skippr:h-9 skippr:w-9 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-lg skippr:bg-muted",
+                        children: /* @__PURE__ */ jsx14(Icon2, {
+                          className: isFeatured ? "skippr:h-4 skippr:w-4" : "skippr:h-4 skippr:w-4 skippr:text-muted-foreground"
+                        })
+                      }),
+                      /* @__PURE__ */ jsxs13("div", {
+                        className: "skippr:min-w-0 skippr:w-full skippr:space-y-0.5",
+                        children: [
+                          /* @__PURE__ */ jsx14("p", {
+                            className: "skippr:line-clamp-1 skippr:text-sm skippr:font-semibold",
+                            children: module.name
+                          }),
+                          module.description && /* @__PURE__ */ jsx14("p", {
+                            className: isFeatured ? "skippr:line-clamp-2 skippr:text-[11px] skippr:leading-snug skippr:text-primary-foreground/70" : "skippr:line-clamp-2 skippr:text-[11px] skippr:leading-snug skippr:text-muted-foreground",
+                            children: module.description
+                          })
+                        ]
+                      })
+                    ]
+                  }, module.id);
+                })
+              })
+            ]
+          })
+        ]
+      }),
+      showScrollHint && /* @__PURE__ */ jsx14("div", {
+        className: "skippr:pointer-events-none skippr:absolute skippr:bottom-0 skippr:left-0 skippr:right-0 skippr:h-12 skippr:bg-gradient-to-t skippr:from-background skippr:to-transparent"
+      })
+    ]
+  });
+}
+
+// src/components/SessionAgenda.tsx
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function SessionAgenda({ phases, hasStarted }) {
   if (phases.length === 0 || !hasStarted) {
-    return /* @__PURE__ */ jsx14("div", {
+    return /* @__PURE__ */ jsx15("div", {
       className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
-      children: /* @__PURE__ */ jsx14(LoadingDots, {
+      children: /* @__PURE__ */ jsx15(LoadingDots, {
         label: "Waiting for agenda to load..."
       })
     });
   }
-  return /* @__PURE__ */ jsx14("div", {
+  return /* @__PURE__ */ jsx15("div", {
     className: "skippr:flex-1 skippr:overflow-y-auto skippr:px-4 skippr:py-4",
-    children: /* @__PURE__ */ jsx14("div", {
+    children: /* @__PURE__ */ jsx15("div", {
       className: "skippr:space-y-1",
       children: phases.map((phase) => {
         const isActive = phase.status === "active";
         const isCompleted = phase.status === "completed";
-        return /* @__PURE__ */ jsxs13("div", {
+        return /* @__PURE__ */ jsxs14("div", {
           className: cn("skippr:flex skippr:items-start skippr:gap-2.5 skippr:rounded-lg skippr:p-2 skippr:transition-colors", isActive && "skippr:bg-primary/10"),
           children: [
-            /* @__PURE__ */ jsx14("div", {
+            /* @__PURE__ */ jsx15("div", {
               className: "skippr:mt-0.5",
-              children: isCompleted ? /* @__PURE__ */ jsx14(CircleCheck, {
+              children: isCompleted ? /* @__PURE__ */ jsx15(CircleCheck, {
                 className: "skippr:size-4 skippr:text-chart-3"
-              }) : isActive ? /* @__PURE__ */ jsx14(Circle, {
+              }) : isActive ? /* @__PURE__ */ jsx15(Circle, {
                 className: "skippr:size-4 skippr:fill-primary/30 skippr:text-primary"
-              }) : /* @__PURE__ */ jsx14(Circle, {
+              }) : /* @__PURE__ */ jsx15(Circle, {
                 className: "skippr:size-4 skippr:text-muted-foreground/30"
               })
             }),
-            /* @__PURE__ */ jsxs13("div", {
+            /* @__PURE__ */ jsxs14("div", {
               className: "skippr:min-w-0 skippr:flex-1",
               children: [
-                /* @__PURE__ */ jsx14("p", {
+                /* @__PURE__ */ jsx15("p", {
                   className: cn("skippr:text-sm", isCompleted && "skippr:text-muted-foreground skippr:line-through", isActive && "skippr:font-medium skippr:text-foreground", phase.status === "pending" && "skippr:text-muted-foreground"),
                   children: phase.name
                 }),
-                phase.highlights.length > 0 && /* @__PURE__ */ jsx14("ul", {
+                phase.highlights.length > 0 && /* @__PURE__ */ jsx15("ul", {
                   className: "skippr:mt-1 skippr:space-y-0.5",
-                  children: phase.highlights.map((text) => /* @__PURE__ */ jsxs13("li", {
+                  children: phase.highlights.map((text) => /* @__PURE__ */ jsxs14("li", {
                     className: cn("skippr:flex skippr:items-center skippr:gap-1.5 skippr:text-[11px] skippr:leading-tight", isCompleted ? "skippr:text-muted-foreground/40 skippr:line-through" : "skippr:text-muted-foreground/70"),
                     children: [
-                      /* @__PURE__ */ jsx14("span", {
+                      /* @__PURE__ */ jsx15("span", {
                         className: "skippr:size-1 skippr:shrink-0 skippr:rounded-full skippr:bg-current"
                       }),
                       text
@@ -2930,12 +3213,12 @@ function SessionAgenda({ phases, hasStarted }) {
 }
 
 // src/components/SessionWarningBanner.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var SESSION_WARNING_THRESHOLD_SECS = 60;
 function SessionWarningBanner({ remaining }) {
   if (remaining === null || remaining <= 0 || remaining > SESSION_WARNING_THRESHOLD_SECS)
     return null;
-  return /* @__PURE__ */ jsx15("div", {
+  return /* @__PURE__ */ jsx16("div", {
     "data-testid": "session-warning-banner",
     className: "skippr:bg-red-50 skippr:px-4 skippr:py-1.5 skippr:text-center skippr:text-xs skippr:font-medium skippr:text-red-700",
     children: "Session ending soon"
@@ -2943,24 +3226,30 @@ function SessionWarningBanner({ remaining }) {
 }
 
 // src/components/StartSessionPrompt.tsx
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function StartSessionPrompt({
   onStartSession,
+  agentId,
+  agentControls,
   isStarting,
   error,
   label = "Talk to Skippr"
 }) {
-  return /* @__PURE__ */ jsxs14("div", {
+  return /* @__PURE__ */ jsxs15("div", {
     className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:px-4",
     children: [
-      /* @__PURE__ */ jsx16("button", {
+      /* @__PURE__ */ jsx17("button", {
         type: "button",
-        onClick: onStartSession,
-        disabled: isStarting,
+        onClick: () => {
+          if (!agentId)
+            return;
+          onStartSession(agentControls ? { agentId, agentControls } : { agentId });
+        },
+        disabled: isStarting || !agentId,
         className: "skippr:cursor-pointer skippr:rounded-xl skippr:bg-primary skippr:px-8 skippr:py-3 skippr:text-sm skippr:font-medium skippr:text-primary-foreground skippr:transition-all skippr:hover:bg-primary/90 skippr:disabled:cursor-not-allowed skippr:disabled:opacity-60",
         children: isStarting ? "Starting..." : label
       }),
-      error && /* @__PURE__ */ jsx16("p", {
+      error && /* @__PURE__ */ jsx17("p", {
         className: "skippr:text-xs skippr:text-destructive",
         children: error
       })
@@ -2969,7 +3258,7 @@ function StartSessionPrompt({
 }
 
 // src/components/Sidebar.tsx
-import { jsx as jsx17, jsxs as jsxs15, Fragment as Fragment4 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs16, Fragment as Fragment3 } from "react/jsx-runtime";
 function Sidebar({
   hideControls = false,
   hideHeader = false,
@@ -2993,11 +3282,14 @@ function Sidebar({
     sidebarTab: activeTab,
     setSidebarTab: setActiveTab,
     autoFocusChat,
-    captureMode
+    captureMode,
+    hasModuleSelector,
+    agentId,
+    agentControls
   } = useLiveAgent();
   const isFloating = variant === "floating";
   const isSidebar = variant === "sidebar";
-  useEffect13(() => {
+  useEffect15(() => {
     if (!isSidebar)
       return;
     const prop = position === "right" ? "marginRight" : "marginLeft";
@@ -3011,22 +3303,22 @@ function Sidebar({
       document.body.style.transition = "";
     };
   }, [isSidebar, isPanelOpen, position]);
-  return /* @__PURE__ */ jsxs15("div", {
+  return /* @__PURE__ */ jsxs16("div", {
     className: cn("skippr:fixed skippr:z-[9999]", "skippr:bg-card", "skippr:flex skippr:flex-col", "skippr:overflow-hidden", isFloating && "skippr:border skippr:border-border skippr:bottom-[88px] skippr:h-[min(460px,calc(100vh-200px))] skippr:rounded-2xl skippr:shadow-[0_8px_30px_rgba(0,0,0,0.16),0_4px_12px_rgba(0,0,0,0.08)]", isFloating && (position === "right" ? "skippr:right-6" : "skippr:left-6"), isFloating && "skippr:transition-[opacity,transform] skippr:duration-300 skippr:ease-in-out", isFloating && (position === "right" ? "skippr:origin-bottom-right" : "skippr:origin-bottom-left"), isFloating && !isPanelOpen && "skippr:scale-0 skippr:opacity-0 skippr:pointer-events-none", isFloating && isPanelOpen && "skippr:scale-100 skippr:opacity-100", isSidebar && "skippr:top-0 skippr:h-full", isSidebar && "skippr:transition-[width] skippr:duration-300 skippr:ease-in-out", isSidebar && position === "right" && "skippr:right-0 skippr:border-l skippr:border-l-border", isSidebar && position === "left" && "skippr:left-0 skippr:border-r skippr:border-r-border", isSidebar && !isPanelOpen && "skippr:w-0 skippr:border-0"),
     style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined },
     children: [
-      !hideHeader && /* @__PURE__ */ jsx17(ChatHeader, {}),
-      !isAuthenticated && isValidating ? /* @__PURE__ */ jsx17("div", {
+      !hideHeader && /* @__PURE__ */ jsx18(ChatHeader, {}),
+      !isAuthenticated && isValidating ? /* @__PURE__ */ jsx18("div", {
         className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
-        children: /* @__PURE__ */ jsx17(LoadingDots, {
+        children: /* @__PURE__ */ jsx18(LoadingDots, {
           label: "Loading..."
         })
-      }) : !isAuthenticated ? /* @__PURE__ */ jsx17(LoginFlow, {
+      }) : !isAuthenticated ? /* @__PURE__ */ jsx18(LoginFlow, {
         requestOtp,
         verifyOtp,
         error: authError,
         isSubmitting: isAuthSubmitting
-      }) : /* @__PURE__ */ jsx17(AuthenticatedContent, {
+      }) : /* @__PURE__ */ jsx18(AuthenticatedContent, {
         isConnected,
         onStartSession: startSession,
         onDisconnect: disconnect,
@@ -3037,7 +3329,10 @@ function Sidebar({
         hideControls,
         startSessionLabel,
         autoFocusChat,
-        showScreenShareToggle: captureMode === "screenshare"
+        showScreenShareToggle: captureMode === "screenshare",
+        hasModuleSelector,
+        agentId,
+        agentControls
       })
     ]
   });
@@ -3053,60 +3348,67 @@ function AuthenticatedContent({
   hideControls,
   startSessionLabel,
   autoFocusChat,
-  showScreenShareToggle
+  showScreenShareToggle,
+  hasModuleSelector,
+  agentId,
+  agentControls
 }) {
-  return /* @__PURE__ */ jsxs15(Fragment4, {
+  const showSelectorAsPrompt = hasModuleSelector && !isConnected && !isStarting;
+  const showTabBar = !showSelectorAsPrompt;
+  return /* @__PURE__ */ jsxs16(Fragment3, {
     children: [
-      isConnected && /* @__PURE__ */ jsx17(ConnectedBanner, {}),
-      /* @__PURE__ */ jsxs15("div", {
-        className: "skippr:flex skippr:gap-2 skippr:border-b skippr:border-border skippr:px-3 skippr:py-2",
+      isConnected && /* @__PURE__ */ jsx18(ConnectedBanner, {}),
+      showTabBar && /* @__PURE__ */ jsxs16("div", {
+        className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-b skippr:border-border skippr:px-3 skippr:py-2",
         children: [
-          /* @__PURE__ */ jsxs15("button", {
+          /* @__PURE__ */ jsxs16("button", {
             type: "button",
             className: cn("skippr:relative skippr:inline-flex skippr:cursor-pointer skippr:items-center skippr:gap-1.5 skippr:rounded-lg skippr:px-3 skippr:py-2 skippr:text-sm skippr:font-medium skippr:transition-all", activeTab === "chat" ? "skippr:text-foreground" : "skippr:text-muted-foreground skippr:hover:text-foreground"),
             onClick: () => onTabChange("chat"),
             children: [
-              /* @__PURE__ */ jsx17(MessageCircle, {
+              /* @__PURE__ */ jsx18(MessageCircle, {
                 className: "skippr:size-3.5"
               }),
               "Chat",
-              activeTab === "chat" && /* @__PURE__ */ jsx17("span", {
+              activeTab === "chat" && /* @__PURE__ */ jsx18("span", {
                 className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
               })
             ]
           }),
-          /* @__PURE__ */ jsxs15("button", {
+          /* @__PURE__ */ jsxs16("button", {
             type: "button",
             className: cn("skippr:relative skippr:inline-flex skippr:cursor-pointer skippr:items-center skippr:gap-1.5 skippr:rounded-lg skippr:px-3 skippr:py-2 skippr:text-sm skippr:font-medium skippr:transition-all", activeTab === "agenda" ? "skippr:text-foreground" : "skippr:text-muted-foreground skippr:hover:text-foreground"),
             onClick: () => onTabChange("agenda"),
             children: [
-              /* @__PURE__ */ jsx17(Calendar, {
+              /* @__PURE__ */ jsx18(Calendar, {
                 className: "skippr:size-3.5"
               }),
               "Agenda",
-              activeTab === "agenda" && /* @__PURE__ */ jsx17("span", {
+              activeTab === "agenda" && /* @__PURE__ */ jsx18("span", {
                 className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
               })
             ]
           })
         ]
       }),
-      /* @__PURE__ */ jsx17("div", {
+      /* @__PURE__ */ jsx18("div", {
         className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
-        children: isConnected || isStarting ? /* @__PURE__ */ jsx17(ConnectedBody, {
+        children: showSelectorAsPrompt ? /* @__PURE__ */ jsx18(ModuleSelector, {}) : isConnected || isStarting ? /* @__PURE__ */ jsx18(ConnectedBody, {
           activeTab,
           autoFocusChat
-        }) : /* @__PURE__ */ jsx17("div", {
+        }) : /* @__PURE__ */ jsx18("div", {
           className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
-          children: /* @__PURE__ */ jsx17(StartSessionPrompt, {
+          children: /* @__PURE__ */ jsx18(StartSessionPrompt, {
             onStartSession,
+            agentId,
+            agentControls,
             isStarting,
             error,
             label: startSessionLabel
           })
         }, `${activeTab}-empty`)
       }),
-      isConnected && !hideControls && /* @__PURE__ */ jsx17(MeetingControls, {
+      isConnected && !hideControls && /* @__PURE__ */ jsx18(MeetingControls, {
         onHangUp: onDisconnect,
         showScreenShareToggle
       })
@@ -3115,7 +3417,7 @@ function AuthenticatedContent({
 }
 function ConnectedBanner() {
   const remaining = useSessionRemaining();
-  return /* @__PURE__ */ jsx17(SessionWarningBanner, {
+  return /* @__PURE__ */ jsx18(SessionWarningBanner, {
     remaining
   });
 }
@@ -3126,17 +3428,17 @@ function ConnectedBody({
   const { allMessages, agentState, sendChatMessage, isSendingChat } = useCombinedMessages();
   const { phases } = usePhaseUpdates();
   if (activeTab === "agenda") {
-    return /* @__PURE__ */ jsx17("div", {
+    return /* @__PURE__ */ jsx18("div", {
       className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto skippr:animate-skippr-tab-fade",
-      children: /* @__PURE__ */ jsx17(SessionAgenda, {
+      children: /* @__PURE__ */ jsx18(SessionAgenda, {
         phases,
         hasStarted: allMessages.length > 0 || agentState === "speaking"
       })
     }, "agenda");
   }
-  return /* @__PURE__ */ jsx17("div", {
+  return /* @__PURE__ */ jsx18("div", {
     className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
-    children: /* @__PURE__ */ jsx17(MessageList, {
+    children: /* @__PURE__ */ jsx18(MessageList, {
       messages: allMessages,
       isStreaming: agentState === "speaking",
       sendChatMessage,
@@ -3147,31 +3449,31 @@ function ConnectedBody({
 }
 
 // src/components/SidebarTrigger.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function SidebarTrigger() {
   const { isPanelOpen, togglePanel, minimizePanel, minimizable, position, isMinimized } = useLiveAgent();
   if (isMinimized)
     return null;
   const handleClick = isPanelOpen && minimizable ? minimizePanel : togglePanel;
-  return /* @__PURE__ */ jsx18("button", {
+  return /* @__PURE__ */ jsx19("button", {
     type: "button",
     onClick: handleClick,
     title: isPanelOpen ? "Close chat" : "Open chat",
     "aria-label": isPanelOpen ? "Close chat" : "Open chat",
     className: cn("skippr:fixed skippr:bottom-6 skippr:z-[9998]", "skippr:flex skippr:size-12 skippr:items-center skippr:justify-center", "skippr:rounded-[14px] skippr:bg-bubble skippr:text-white", "skippr:shadow-[0_4px_16px_rgba(45,43,61,0.45),0_2px_4px_rgba(0,0,0,0.1)] skippr:transition-all", "skippr:cursor-pointer skippr:hover:brightness-110 skippr:hover:-translate-y-0.5 skippr:active:translate-y-0", position === "right" ? "skippr:right-6" : "skippr:left-6"),
-    children: isPanelOpen ? /* @__PURE__ */ jsx18(ChevronDown, {
+    children: isPanelOpen ? /* @__PURE__ */ jsx19(ChevronDown, {
       className: "skippr:size-5"
-    }) : /* @__PURE__ */ jsx18(Logo, {
+    }) : /* @__PURE__ */ jsx19(Logo, {
       className: "skippr:size-7"
     })
   });
 }
 
 // src/components/LiveAgent.tsx
-import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 function LiveAgent(props) {
   const {
-    agentId,
+    agentId: hostAgentId,
     authToken: authTokenProp,
     appKey,
     userToken,
@@ -3187,39 +3489,81 @@ function LiveAgent(props) {
     children
   } = props;
   const captureMode = props.captureMode ?? "screenshare";
-  let agentControls;
+  let hostAgentControls;
   if ("agentControls" in props && props.agentControls) {
     if (captureMode === "auto") {
-      agentControls = props.agentControls;
+      hostAgentControls = props.agentControls;
     } else {
       console.warn('[Skippr] agentControls requires captureMode: "auto"');
     }
   }
   const auth = useAuth({ appKey });
   const effectiveAuthToken = authTokenProp || auth.authToken || undefined;
+  const hasModuleSelector = !hostAgentId;
+  const [activeModule, setActiveModule] = useState11(null);
+  const agentId = hasModuleSelector ? activeModule?.id ?? null : hostAgentId;
+  const agentControls = hasModuleSelector ? activeModule?.controls : hostAgentControls;
+  const minimizeOnSessionStart = useCallback8(() => {
+    if (minimizable) {
+      setIsMinimized(true);
+      setIsPanelOpen(false);
+    }
+  }, [minimizable]);
+  const expandOnSessionStartError = useCallback8(() => {
+    setIsMinimized(false);
+    setIsPanelOpen(true);
+  }, []);
+  const minimizeOnSessionDisconnect = useCallback8(() => {
+    if (hasModuleSelector) {
+      setActiveModule(null);
+    }
+    if (minimizable && !hasModuleSelector) {
+      setIsMinimized(true);
+      setIsPanelOpen(false);
+    }
+  }, [minimizable, hasModuleSelector]);
   const {
     connection,
     shouldConnect,
     isStarting,
+    isDisconnecting,
     error,
     errorCode,
     startSession,
     disconnect,
-    pendingScreenStream
+    pendingScreenStream,
+    bearerToken
   } = useSession({
-    agentId,
     captureMode,
-    agentControls,
     authToken: effectiveAuthToken,
     appKey,
-    userToken
+    userToken,
+    onStart: minimizeOnSessionStart,
+    onStartError: expandOnSessionStartError,
+    onDisconnect: minimizeOnSessionDisconnect
+  });
+  const [isPanelOpen, setIsPanelOpen] = useState11(defaultOpen);
+  const [isMinimized, setIsMinimized] = useState11(minimizable && !defaultOpen);
+  const [sidebarTab, setSidebarTab] = useState11("agenda");
+  const {
+    modules: availableModules,
+    isLoading: isLoadingModules,
+    error: modulesError,
+    refetch: refetchModules
+  } = useAvailableModules({
+    enabled: hasModuleSelector && isPanelOpen,
+    bearerToken
   });
-  const [isPanelOpen, setIsPanelOpen] = useState9(defaultOpen);
-  const [isMinimized, setIsMinimized] = useState9(minimizable && !defaultOpen);
-  const [sidebarTab, setSidebarTab] = useState9("agenda");
-  const [welcomeDismissed, setWelcomeDismissed] = useState9(false);
-  const dismissWelcome = useCallback7(() => setWelcomeDismissed(true), []);
-  const [currentPosition, setCurrentPosition] = useState9(() => {
+  const selectModule = useCallback8((moduleId) => {
+    const found = availableModules.find((m) => m.id === moduleId);
+    if (!found)
+      return;
+    setActiveModule(found);
+    startSession({ agentId: found.id, agentControls: found.controls });
+  }, [availableModules, startSession]);
+  const [welcomeDismissed, setWelcomeDismissed] = useState11(false);
+  const dismissWelcome = useCallback8(() => setWelcomeDismissed(true), []);
+  const [currentPosition, setCurrentPosition] = useState11(() => {
     try {
       const saved = localStorage.getItem("skippr_widget_position");
       if (saved === "left" || saved === "right")
@@ -3227,20 +3571,20 @@ function LiveAgent(props) {
     } catch {}
     return position;
   });
-  const setPositionWithPersist = useCallback7((pos) => {
+  const setPositionWithPersist = useCallback8((pos) => {
     setCurrentPosition(pos);
     try {
       localStorage.setItem("skippr_widget_position", pos);
     } catch {}
   }, []);
-  const openPanel = useCallback7(() => setIsPanelOpen(true), []);
-  const closePanel = useCallback7(() => setIsPanelOpen(false), []);
-  const togglePanel = useCallback7(() => setIsPanelOpen((prev) => !prev), []);
-  const expandPanel = useCallback7(() => {
+  const openPanel = useCallback8(() => setIsPanelOpen(true), []);
+  const closePanel = useCallback8(() => setIsPanelOpen(false), []);
+  const togglePanel = useCallback8(() => setIsPanelOpen((prev) => !prev), []);
+  const expandPanel = useCallback8(() => {
     setIsMinimized(false);
     setIsPanelOpen(true);
   }, []);
-  const minimizePanel = useCallback7(() => {
+  const minimizePanel = useCallback8(() => {
     if (!minimizable)
       return;
     setIsMinimized(true);
@@ -3248,20 +3592,12 @@ function LiveAgent(props) {
   }, [minimizable]);
   const isConnected = connection !== null;
   const isAuthenticated = !!userToken || !!authTokenProp || auth.isAuthenticated;
-  const prevConnectionRef = useRef8(connection);
-  useEffect14(() => {
-    const connectionChanged = prevConnectionRef.current !== connection;
-    prevConnectionRef.current = connection;
-    if (connectionChanged && minimizable) {
-      setIsMinimized(true);
-      setIsPanelOpen(false);
-    }
-  }, [connection, minimizable]);
   const ctx = useMemo5(() => ({
     connection,
     shouldConnect,
     isConnected,
     isStarting,
+    isDisconnecting,
     error,
     errorCode,
     startSession,
@@ -3288,12 +3624,21 @@ function LiveAgent(props) {
     setSidebarTab,
     autoFocusChat,
     captureMode,
-    agentControls
+    agentId,
+    agentControls,
+    hasModuleSelector,
+    availableModules,
+    activeModule,
+    isLoadingModules,
+    modulesError,
+    refetchModules,
+    selectModule
   }), [
     connection,
     shouldConnect,
     isConnected,
     isStarting,
+    isDisconnecting,
     error,
     errorCode,
     startSession,
@@ -3319,33 +3664,41 @@ function LiveAgent(props) {
     sidebarTab,
     autoFocusChat,
     captureMode,
-    agentControls
+    agentId,
+    agentControls,
+    hasModuleSelector,
+    availableModules,
+    activeModule,
+    isLoadingModules,
+    modulesError,
+    refetchModules,
+    selectModule
   ]);
-  return /* @__PURE__ */ jsx19(LiveAgentContext.Provider, {
+  return /* @__PURE__ */ jsx20(LiveAgentContext.Provider, {
     value: ctx,
-    children: /* @__PURE__ */ jsxs16(LiveKitRoom, {
+    children: /* @__PURE__ */ jsxs17(LiveKitRoom, {
       serverUrl: connection?.livekitUrl,
       token: connection?.token,
       connect: shouldConnect,
       audio: true,
       onDisconnected: disconnect,
       children: [
-        connection && /* @__PURE__ */ jsx19(RoomAudioRenderer, {}),
-        connection && captureMode === "screenshare" && /* @__PURE__ */ jsx19(AutoStartMedia, {
+        connection && /* @__PURE__ */ jsx20(RoomAudioRenderer, {}),
+        connection && captureMode === "screenshare" && /* @__PURE__ */ jsx20(AutoStartMedia, {
           pendingScreenStream
         }),
-        connection && captureMode === "auto" && /* @__PURE__ */ jsx19(DomCapture, {}),
-        connection && captureMode === "auto" && agentControls?.highlight && /* @__PURE__ */ jsx19(HighlightOverlay, {}),
-        /* @__PURE__ */ jsxs16("div", {
+        connection && captureMode === "auto" && /* @__PURE__ */ jsx20(DomCapture, {}),
+        connection && captureMode === "auto" && agentControls?.highlight && /* @__PURE__ */ jsx20(HighlightOverlay, {}),
+        /* @__PURE__ */ jsxs17("div", {
           id: WIDGET_ROOT_ID,
           children: [
-            isMinimized && /* @__PURE__ */ jsx19(MinimizedBubble, {
+            isMinimized && /* @__PURE__ */ jsx20(MinimizedBubble, {
               welcomeMessage,
               welcomeDismissed,
               onDismissWelcome: dismissWelcome
             }),
-            /* @__PURE__ */ jsx19(SidebarTrigger, {}),
-            /* @__PURE__ */ jsx19(Sidebar, {
+            /* @__PURE__ */ jsx20(SidebarTrigger, {}),
+            /* @__PURE__ */ jsx20(Sidebar, {
               hideControls,
               hideHeader,
               startSessionLabel