@skippr/live-agent-sdk 0.91.0 → 0.92.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 useCallback31, useEffect as useEffect48, useMemo as useMemo7, useRef as useRef42, useState as useState38 } from "react";
+import { useCallback as useCallback32, useEffect as useEffect49, useMemo as useMemo7, useRef as useRef42, useState as useState39 } from "react";
 // ../../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";
 
@@ -5526,6 +5526,39 @@ function DomCapture({ pushOrTapMicMode = false }) {
 // src/components/HighlightOverlay.tsx
 import { useDataChannel } from "@livekit/components-react/hooks";
 import { useCallback as useCallback15, useEffect as useEffect22, useRef as useRef17 } from "react";
+
+// src/capture/highlightSignal.ts
+var highlightActive = false;
+var activeSubscribers = new Set;
+function setHighlightActive(active) {
+  if (highlightActive === active)
+    return;
+  highlightActive = active;
+  for (const subscriber of activeSubscribers)
+    subscriber(active);
+}
+function isHighlightActive() {
+  return highlightActive;
+}
+function subscribeHighlightActive(subscriber) {
+  activeSubscribers.add(subscriber);
+  return () => {
+    activeSubscribers.delete(subscriber);
+  };
+}
+var clearSubscribers = new Set;
+function clearHighlight() {
+  for (const subscriber of clearSubscribers)
+    subscriber();
+}
+function onHighlightCleared(subscriber) {
+  clearSubscribers.add(subscriber);
+  return () => {
+    clearSubscribers.delete(subscriber);
+  };
+}
+
+// src/components/HighlightOverlay.tsx
 var HIGHLIGHT_AUTO_CLEAR_MS = 25000;
 var textDecoder = new TextDecoder;
 function parseHighlightMessage(payload) {
@@ -5556,6 +5589,7 @@ function HighlightOverlay() {
     autoClearRef.current = null;
     targetRef.current = null;
     clearCursorTarget("guide");
+    setHighlightActive(false);
   }, []);
   const onHighlightMessage = useCallback15((msg) => {
     const parsed = parseHighlightMessage(msg.payload);
@@ -5578,9 +5612,11 @@ function HighlightOverlay() {
       label: parsed.message || "Click here",
       mode: "guide"
     });
+    setHighlightActive(true);
     autoClearRef.current = setTimeout(clear, HIGHLIGHT_AUTO_CLEAR_MS);
   }, [clear]);
   useDataChannel(HIGHLIGHT_TOPIC, onHighlightMessage);
+  useEffect22(() => onHighlightCleared(clear), [clear]);
   useEffect22(() => {
     const onClick = (event) => {
       const target = targetRef.current;
@@ -8876,7 +8912,7 @@ function SidebarTrigger() {
 }
 
 // src/components/VoiceBar.tsx
-import { useCallback as useCallback30, useContext as useContext22, useState as useState37 } from "react";
+import { useCallback as useCallback31, useContext as useContext22, useState as useState38 } from "react";
 
 // src/hooks/useBarNotifications.ts
 import { useContext as useContext19 } from "react";
@@ -8948,15 +8984,37 @@ function useBarNotifications() {
 }
 
 // src/components/VoiceBarFrame.tsx
-import { useIsSpeaking, useLocalParticipant as useLocalParticipant12 } from "@livekit/components-react/hooks";
-import { useCallback as useCallback28, useContext as useContext21, useEffect as useEffect45, useRef as useRef39, useState as useState34 } from "react";
+import { useIsSpeaking, useLocalParticipant as useLocalParticipant13 } from "@livekit/components-react/hooks";
+import { useCallback as useCallback29, useContext as useContext21, useEffect as useEffect46, useRef as useRef39, useState as useState35 } from "react";
+
+// src/hooks/useHighlightControl.ts
+import { useLocalParticipant as useLocalParticipant12 } from "@livekit/components-react/hooks";
+import { useCallback as useCallback26, useEffect as useEffect37, useState as useState28 } from "react";
+var textEncoder7 = new TextEncoder;
+function useHighlightControl() {
+  const { localParticipant } = useLocalParticipant12();
+  const [active, setActive] = useState28(isHighlightActive);
+  useEffect37(() => subscribeHighlightActive(setActive), []);
+  const requestClear = useCallback26(async () => {
+    clearHighlight();
+    try {
+      await localParticipant.publishData(textEncoder7.encode(JSON.stringify({ type: "dismiss" })), {
+        reliable: true,
+        topic: HIGHLIGHT_TOPIC
+      });
+    } catch (error) {
+      console.error("Failed to send highlight dismiss:", error);
+    }
+  }, [localParticipant]);
+  return { highlightActive: active, clearHighlight: requestClear };
+}
 
 // src/hooks/useKeyboardStop.ts
-import { useEffect as useEffect37, useRef as useRef33 } from "react";
+import { useEffect as useEffect38, useRef as useRef33 } from "react";
 function useKeyboardStop({ enabled, onStop }) {
   const handler = useRef33(onStop);
   handler.current = onStop;
-  useEffect37(() => {
+  useEffect38(() => {
     if (!enabled)
       return;
     const onKeyDown = (event) => {
@@ -8973,18 +9031,18 @@ function useKeyboardStop({ enabled, onStop }) {
 }
 
 // src/hooks/useSessionTimer.ts
-import { useEffect as useEffect39, useState as useState29 } from "react";
+import { useEffect as useEffect40, useState as useState30 } from "react";
 
 // src/hooks/useElapsedSeconds.ts
-import { useEffect as useEffect38, useRef as useRef34, useState as useState28 } from "react";
+import { useEffect as useEffect39, useRef as useRef34, useState as useState29 } from "react";
 function useElapsedSeconds(isRunning, resetSignal) {
-  const [elapsed, setElapsed] = useState28(0);
+  const [elapsed, setElapsed] = useState29(0);
   const accumulatedSecondsRef = useRef34(0);
-  useEffect38(() => {
+  useEffect39(() => {
     accumulatedSecondsRef.current = 0;
     setElapsed(0);
   }, [resetSignal]);
-  useEffect38(() => {
+  useEffect39(() => {
     if (!isRunning)
       return;
     const resumedAt = Date.now();
@@ -9009,8 +9067,8 @@ function useSessionTimer(isRunning, resetSignal) {
   const active = isRunning && remaining !== null;
   const warning = active && remaining !== null && remaining <= SESSION_TIMER_WARNING_S;
   const revealCycle = !active ? null : warning ? "warning" : "normal";
-  const [revealed, setRevealed] = useState29(false);
-  useEffect39(() => {
+  const [revealed, setRevealed] = useState30(false);
+  useEffect40(() => {
     if (!revealCycle) {
       setRevealed(false);
       return;
@@ -9038,7 +9096,7 @@ function useSessionTimer(isRunning, resetSignal) {
 }
 
 // src/hooks/useVoiceBarDrag.ts
-import { useEffect as useEffect40, useRef as useRef35 } from "react";
+import { useEffect as useEffect41, useRef as useRef35 } from "react";
 import { flushSync as flushSync2 } from "react-dom";
 var DRAG_THRESHOLD_PX2 = 5;
 function useVoiceBarDrag(containerRef, onDrop, followRefs, reportDragging) {
@@ -9049,7 +9107,7 @@ function useVoiceBarDrag(containerRef, onDrop, followRefs, reportDragging) {
   followTargetsRef.current = followRefs;
   const reportDraggingRef = useRef35(reportDragging);
   reportDraggingRef.current = reportDragging;
-  useEffect40(() => {
+  useEffect41(() => {
     const el = containerRef.current;
     if (!el)
       return;
@@ -9201,7 +9259,7 @@ function useVoiceBarDrag(containerRef, onDrop, followRefs, reportDragging) {
 }
 
 // src/components/VoiceBarChatLine.tsx
-import { useCallback as useCallback26, useContext as useContext20, useEffect as useEffect41, useRef as useRef36, useState as useState30 } from "react";
+import { useCallback as useCallback27, useContext as useContext20, useEffect as useEffect42, useRef as useRef36, useState as useState31 } from "react";
 import { jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
 var IDLE_HIDE_MS = 6000;
 function VoiceBarChatLine({
@@ -9213,19 +9271,19 @@ function VoiceBarChatLine({
   const { sendChatMessage, isSendingChat } = useChatMessages();
   const ctx = useContext20(LiveAgentContext);
   const reportChatActivity = ctx?.reportChatActivity;
-  const [localDraft, setLocalDraft] = useState30("");
+  const [localDraft, setLocalDraft] = useState31("");
   const text = ctx?.chatDraft ?? localDraft;
   const setText = ctx?.setChatDraft ?? setLocalDraft;
   const inputRef = useRef36(null);
   const idleTimerRef = useRef36(null);
   const onCloseRef = useRef36(onClose);
   onCloseRef.current = onClose;
-  const armIdle = useCallback26(() => {
+  const armIdle = useCallback27(() => {
     if (idleTimerRef.current)
       clearTimeout(idleTimerRef.current);
     idleTimerRef.current = setTimeout(() => onCloseRef.current(), IDLE_HIDE_MS);
   }, []);
-  useEffect41(() => {
+  useEffect42(() => {
     inputRef.current?.focus();
     armIdle();
     return () => {
@@ -9294,26 +9352,26 @@ function VoiceBarChatLine({
 }
 
 // src/components/VoiceBarLinkCard.tsx
-import { useCallback as useCallback27, useEffect as useEffect42, useRef as useRef37, useState as useState31 } from "react";
+import { useCallback as useCallback28, useEffect as useEffect43, useRef as useRef37, useState as useState32 } from "react";
 import { jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
 var COPIED_RESET_MS2 = 2000;
 var DISMISS_AFTER_COPY_MS2 = 3000;
 function VoiceBarLinkCard({ card, onDismiss }) {
-  const [copied, setCopied] = useState31(false);
+  const [copied, setCopied] = useState32(false);
   const dismissTimerRef = useRef37(null);
-  useEffect42(() => {
+  useEffect43(() => {
     if (!copied)
       return;
     const timer = setTimeout(() => setCopied(false), COPIED_RESET_MS2);
     return () => clearTimeout(timer);
   }, [copied]);
-  useEffect42(() => {
+  useEffect43(() => {
     return () => {
       if (dismissTimerRef.current)
         clearTimeout(dismissTimerRef.current);
     };
   }, []);
-  const handleCopy = useCallback27(async () => {
+  const handleCopy = useCallback28(async () => {
     const ok = await copyToClipboard(card.url);
     if (!ok)
       return;
@@ -9381,17 +9439,17 @@ function VoiceBarLinkCard({ card, onDismiss }) {
 }
 
 // src/components/VoiceBarNotification.tsx
-import { useEffect as useEffect43, useRef as useRef38, useState as useState32 } from "react";
+import { useEffect as useEffect44, useRef as useRef38, useState as useState33 } from "react";
 import { jsx as jsx40, jsxs as jsxs33 } from "react/jsx-runtime";
 function VoiceBarNotification({
   notifications,
   dock,
   onDismiss
 }) {
-  const [index2, setIndex] = useState32(0);
-  const [paused, setPaused] = useState32(false);
+  const [index2, setIndex] = useState33(0);
+  const [paused, setPaused] = useState33(false);
   const cardRef = useRef38(null);
-  useEffect43(() => {
+  useEffect44(() => {
     const el = cardRef.current;
     if (!el)
       return;
@@ -9404,7 +9462,7 @@ function VoiceBarNotification({
       el.removeEventListener("mouseleave", leave);
     };
   }, []);
-  useEffect43(() => {
+  useEffect44(() => {
     if (paused)
       return;
     const rotate = setInterval(() => setIndex((current) => (current + 1) % notifications.length), TIP_ROTATE_MS);
@@ -9483,7 +9541,7 @@ function VoiceBarNotification({
 }
 
 // src/components/VoiceBarPlanCard.tsx
-import { useEffect as useEffect44, useState as useState33 } from "react";
+import { useEffect as useEffect45, useState as useState34 } from "react";
 import { jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
 var APPROVING_RESET_MS2 = 8000;
 function StepIndicator({ step }) {
@@ -9518,8 +9576,8 @@ function VoiceBarPlanCard({
   embedded = false
 }) {
   const awaitingApproval = plan.state === "proposed";
-  const [isApproving, setIsApproving] = useState33(false);
-  const [lastPlanId, setLastPlanId] = useState33(plan.planId);
+  const [isApproving, setIsApproving] = useState34(false);
+  const [lastPlanId, setLastPlanId] = useState34(plan.planId);
   if (plan.planId !== lastPlanId) {
     setLastPlanId(plan.planId);
     setIsApproving(false);
@@ -9534,13 +9592,13 @@ function VoiceBarPlanCard({
   const cancel = () => {
     sendChatMessage(CANCEL_MESSAGE).catch((e) => console.warn("[Skippr] plan reply failed", e));
   };
-  useEffect44(() => {
+  useEffect45(() => {
     if (!isApproving)
       return;
     const timer = setTimeout(() => setIsApproving(false), APPROVING_RESET_MS2);
     return () => clearTimeout(timer);
   }, [isApproving]);
-  useEffect44(() => {
+  useEffect45(() => {
     if (plan.state !== "completed")
       return;
     const timer = setTimeout(onDismiss, COMPLETED_CARD_VISIBLE_MS);
@@ -9678,6 +9736,24 @@ function BusyRing({ tone }) {
     className: cn("skippr:pointer-events-none skippr:absolute skippr:-inset-[3px] skippr:rounded-full skippr:border-2 skippr:animate-spin", tone === "white" ? "skippr:border-white/30 skippr:border-t-white" : "skippr:border-[var(--skippr-brand-ring)] skippr:border-t-brand")
   });
 }
+function useTransientHint(timeoutMs) {
+  const [visible, setVisible] = useState35(false);
+  const hideTimer = useRef39(null);
+  useEffect46(() => () => clearTimeout(hideTimer.current ?? undefined), []);
+  const show = () => {
+    setVisible(true);
+    clearTimeout(hideTimer.current ?? undefined);
+    hideTimer.current = setTimeout(() => setVisible(false), timeoutMs);
+  };
+  const hide = () => {
+    clearTimeout(hideTimer.current ?? undefined);
+    setVisible(false);
+  };
+  return {
+    visible,
+    hintProps: { onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide }
+  };
+}
 function AgentDots() {
   return /* @__PURE__ */ jsxs35("span", {
     className: "skippr:flex skippr:items-center skippr:gap-[4px]",
@@ -9711,7 +9787,7 @@ var MIC_HALO_IDLE_PX = 30;
 var MIC_HALO_GROWTH_PX = 12;
 var MIC_HALO_NOISE_GATE = 0.15;
 function MicLevelHalo({ enabled }) {
-  const { microphoneTrack } = useLocalParticipant12();
+  const { microphoneTrack } = useLocalParticipant13();
   const { barRefs } = useAudioLevelBars(enabled ? microphoneTrack?.track?.mediaStreamTrack : undefined, {
     barCount: 1,
     idleHeightPx: MIC_HALO_IDLE_PX,
@@ -9739,8 +9815,8 @@ function ShortcutHint({
   children
 }) {
   const ref = useRef39(null);
-  const [visible, setVisible] = useState34(false);
-  useEffect45(() => {
+  const [visible, setVisible] = useState35(false);
+  useEffect46(() => {
     if (!enabled)
       return;
     const el = ref.current;
@@ -9853,15 +9929,15 @@ function VoiceBarFrame({
     captureMode,
     chatActivityAt
   } = ctx;
-  const [bannerOpen, setBannerOpen] = useState34(false);
+  const [bannerOpen, setBannerOpen] = useState35(false);
   const hasNotifications = notifications.length > 0;
   const notifAccent = notifications[0]?.accentColor;
-  const closeBanner = useCallback28(() => setBannerOpen(false), []);
+  const closeBanner = useCallback29(() => setBannerOpen(false), []);
   const containerRef = useRef39(null);
   const dragFollowers = isPanelOpen ? [panelRef] : null;
   const { wasDraggedRef } = useVoiceBarDrag(containerRef, onDrop, dragFollowers, setDragging);
   const { isMuted, toggleMute } = useMediaControls();
-  const { localParticipant } = useLocalParticipant12();
+  const { localParticipant } = useLocalParticipant13();
   const isUserSpeaking = useIsSpeaking(localParticipant);
   const { state } = useAgentVoiceState();
   const { isCapturingSpeech, toggle: toggleTapToTalk, start, commit } = useVoiceTurnContext();
@@ -9870,20 +9946,22 @@ function VoiceBarFrame({
   const plan = usePlanUpdates();
   const linkCard = useLinkCard();
   const { sendChatMessage } = useChatMessages();
-  const [dismissedFloatingPlanId, setDismissedFloatingPlanId] = useState34(null);
-  const [dismissedBlockPlanId, setDismissedBlockPlanId] = useState34(null);
-  const [dismissedLinkCardId, setDismissedLinkCardId] = useState34(null);
+  const [dismissedFloatingPlanId, setDismissedFloatingPlanId] = useState35(null);
+  const [dismissedBlockPlanId, setDismissedBlockPlanId] = useState35(null);
+  const [dismissedLinkCardId, setDismissedLinkCardId] = useState35(null);
   const micMode = agentControls?.micMode;
   const pushOrTap = isRequestResponseMicMode(micMode);
   const isPushToTalk = micMode === MIC_MODE.PushToTalk;
   const agentActive = state === "speaking" || state === "thinking";
-  const { actionsActive } = useActionControl();
+  const { actionsActive, stopActions: stopActions2 } = useActionControl();
+  const { highlightActive: highlightActive2, clearHighlight: clearHighlight2 } = useHighlightControl();
+  const { visible: stopHintVisible, hintProps: stopHintProps } = useTransientHint(1000);
   const showActionControl = isConnected && captureMode === CAPTURE_MODE.Auto && actionsActive;
   const chatSurface = agentControls?.chat ?? DEFAULT_CHAT_SURFACE;
   const isRoomChat = chatSurface === CHAT_SURFACE.Room;
-  const [chatLineOpen, setChatLineOpen] = useState34(false);
-  const [chatLineMounted, setChatLineMounted] = useState34(false);
-  const [chatLineClosing, setChatLineClosing] = useState34(false);
+  const [chatLineOpen, setChatLineOpen] = useState35(false);
+  const [chatLineMounted, setChatLineMounted] = useState35(false);
+  const [chatLineClosing, setChatLineClosing] = useState35(false);
   const chatOpen = isRoomChat ? isPanelOpen : chatLineOpen;
   const lineBlockOpen = !isRoomChat && chatLineMounted;
   const toggleChat = () => {
@@ -9893,7 +9971,7 @@ function VoiceBarFrame({
       setChatLineOpen((open) => !open);
     }
   };
-  useEffect45(() => {
+  useEffect46(() => {
     if (chatLineOpen) {
       setChatLineMounted(true);
       setChatLineClosing(false);
@@ -9924,16 +10002,14 @@ function VoiceBarFrame({
       return;
     action();
   };
-  const [pauseSource, setPauseSource] = useState34(null);
-  const closeBar = (source) => {
+  const closeBar = () => {
     if (sessionLive) {
-      setPauseSource(source);
       pauseSession();
     } else {
       minimizePanel();
     }
   };
-  useKeyboardStop({ enabled: sessionLive, onStop: () => closeBar("stop") });
+  useKeyboardStop({ enabled: sessionLive, onStop: closeBar });
   const hintSeenRef = useRef39(false);
   const requestPillBg = isCapturingSpeech ? "var(--skippr-brand-active)" : "var(--skippr-brand, #2bc0ae)";
   const agentStateLabel = state === "thinking" ? "thinking…" : state === "speaking" ? "talking…" : null;
@@ -9941,17 +10017,17 @@ function VoiceBarFrame({
   const requestLabel = agentStateLabel ?? (isCapturingSpeech ? "listening…" : idleRequestLabel);
   const livePillBg = agentActive && !isHeld ? "var(--skippr-brand-active)" : "var(--skippr-brand, #2bc0ae)";
   const glow = isConnected && !isHeld && agentActive;
-  const [autoOffClosing, setAutoOffClosing] = useState34(false);
+  const [autoOffClosing, setAutoOffClosing] = useState35(false);
   const { reportActivity } = useIdleAutoOff({
     enabled: isConnected && !autoOffClosing,
     active: agentActive || isCapturingSpeech || isUserSpeaking,
     onExpire: () => setAutoOffClosing(true)
   });
-  useEffect45(() => {
+  useEffect46(() => {
     if (chatActivityAt)
       reportActivity();
   }, [chatActivityAt, reportActivity]);
-  useEffect45(() => {
+  useEffect46(() => {
     if (!autoOffClosing)
       return;
     if (!isConnected) {
@@ -9967,12 +10043,12 @@ function VoiceBarFrame({
   const floatingPlanActive = planEnabled && !isRoomChat && !lineBlockOpen && activePlan.planId !== dismissedFloatingPlanId;
   const planInLineBlock = planEnabled && lineBlockOpen && activePlan.planId !== dismissedBlockPlanId;
   const planCardActive = floatingPlanActive || planInLineBlock;
-  useEffect45(() => {
+  useEffect46(() => {
     if (lineBlockOpen)
       setDismissedBlockPlanId(null);
   }, [lineBlockOpen]);
-  const [autoOpenedPlanId, setAutoOpenedPlanId] = useState34(null);
-  useEffect45(() => {
+  const [autoOpenedPlanId, setAutoOpenedPlanId] = useState35(null);
+  useEffect46(() => {
     if (!isRoomChat || !planEnabled || !activePlan)
       return;
     if (activePlan.planId === autoOpenedPlanId)
@@ -10162,12 +10238,12 @@ function VoiceBarFrame({
         children: [
           showClose && /* @__PURE__ */ jsxs35("button", {
             type: "button",
-            onClick: ifNotDragged(() => closeBar("close")),
+            onClick: ifNotDragged(closeBar),
             disabled: isPausing || isStarting,
             "aria-label": sessionLive ? "End session" : "Close",
             className: cn(EDGE_BUTTON, "skippr:relative skippr:size-[26px]", isStarting && "skippr:cursor-not-allowed skippr:opacity-40 skippr:hover:bg-transparent skippr:hover:text-[#b8b4ac]"),
             children: [
-              isPausing && pauseSource === "close" && /* @__PURE__ */ jsx42(BusyRing, {
+              isPausing && /* @__PURE__ */ jsx42(BusyRing, {
                 tone: "brand"
               }),
               /* @__PURE__ */ jsx42(X, {
@@ -10276,20 +10352,29 @@ function VoiceBarFrame({
                       })
                     ]
                   }),
-                  /* @__PURE__ */ jsxs35("button", {
-                    type: "button",
-                    onClick: ifNotDragged(() => closeBar("stop")),
-                    disabled: isPausing,
-                    "aria-label": "End session",
-                    className: "skippr:relative skippr:flex skippr:size-[26px] skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-full skippr:bg-transparent skippr:cursor-pointer skippr:transition-colors skippr:hover:bg-white/20 skippr:disabled:cursor-not-allowed",
+                  /* @__PURE__ */ jsxs35("span", {
+                    className: "skippr:relative skippr:inline-flex",
                     children: [
-                      isPausing && pauseSource === "stop" && /* @__PURE__ */ jsx42(BusyRing, {
-                        tone: "white"
+                      /* @__PURE__ */ jsx42("button", {
+                        type: "button",
+                        onClick: ifNotDragged(() => {
+                          stopActions2();
+                          if (highlightActive2)
+                            clearHighlight2();
+                        }),
+                        ...stopHintProps,
+                        "aria-label": "Stop live action",
+                        className: "skippr:flex skippr:size-[26px] skippr:shrink-0 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-full skippr:bg-transparent skippr:transition-colors skippr:hover:bg-white/20",
+                        children: /* @__PURE__ */ jsx42(Square, {
+                          className: "skippr:size-[11px]",
+                          fill: "currentColor",
+                          strokeWidth: 0
+                        })
                       }),
-                      /* @__PURE__ */ jsx42(Square, {
-                        className: "skippr:size-[11px]",
-                        fill: "currentColor",
-                        strokeWidth: 0
+                      stopHintVisible && /* @__PURE__ */ jsx42("span", {
+                        className: "skippr:pointer-events-none skippr:absolute skippr:bottom-full skippr:left-1/2 skippr:z-10 skippr:mb-1.5 skippr:-translate-x-1/2 skippr:whitespace-nowrap skippr:rounded skippr:bg-foreground skippr:px-1.5 skippr:py-0.5 skippr:text-[10px] skippr:font-medium skippr:text-background",
+                        "aria-hidden": "true",
+                        children: "Stop live action"
                       })
                     ]
                   })
@@ -10372,10 +10457,10 @@ function VoiceBarFrame({
 }
 
 // src/components/VoiceBarLauncher.tsx
-import { useCallback as useCallback29, useEffect as useEffect47, useRef as useRef41, useState as useState36 } from "react";
+import { useCallback as useCallback30, useEffect as useEffect48, useRef as useRef41, useState as useState37 } from "react";
 
 // src/components/LauncherNotification.tsx
-import { useEffect as useEffect46, useRef as useRef40, useState as useState35 } from "react";
+import { useEffect as useEffect47, useRef as useRef40, useState as useState36 } from "react";
 import { jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
 function LauncherNotification({
   notifications,
@@ -10383,10 +10468,10 @@ function LauncherNotification({
   mode,
   onDismiss
 }) {
-  const [index2, setIndex] = useState35(0);
-  const [paused, setPaused] = useState35(false);
+  const [index2, setIndex] = useState36(0);
+  const [paused, setPaused] = useState36(false);
   const cardRef = useRef40(null);
-  useEffect46(() => {
+  useEffect47(() => {
     const el = cardRef.current;
     if (!el)
       return;
@@ -10399,7 +10484,7 @@ function LauncherNotification({
       el.removeEventListener("mouseleave", leave);
     };
   }, []);
-  useEffect46(() => {
+  useEffect47(() => {
     if (paused)
       return;
     const rotate = setInterval(() => setIndex((current) => (current + 1) % notifications.length), TIP_ROTATE_MS);
@@ -10597,11 +10682,11 @@ function VoiceBarLauncher({
   const containerRef = useRef41(null);
   const { wasDraggedRef } = useVoiceBarDrag(containerRef, onDrop, null, setDragging);
   const horizontal = isHorizontalEdge(dock.edge);
-  const [cardOpen, setCardOpen] = useState36(false);
-  const [hovered, setHovered] = useState36(false);
+  const [cardOpen, setCardOpen] = useState37(false);
+  const [hovered, setHovered] = useState37(false);
   const hasNotif = notifications.length > 0;
   const dotColor = notifications.find((item) => item.kind === NOTIFICATION_KIND.Module)?.accentColor ?? notifications[0]?.accentColor ?? NOTIF_ACCENT_COLOR;
-  useEffect47(() => {
+  useEffect48(() => {
     const el = containerRef.current;
     if (!el)
       return;
@@ -10631,7 +10716,7 @@ function VoiceBarLauncher({
       return;
     setCardOpen((open2) => !open2);
   };
-  const closeCard = useCallback29(() => setCardOpen(false), []);
+  const closeCard = useCallback30(() => setCardOpen(false), []);
   if (mode === "strip") {
     const expanded = hovered && !!onChat;
     const length = expanded ? 84 : 40;
@@ -10779,8 +10864,8 @@ function VoiceBar({ revealed }) {
     barDock,
     setBarDock
   } = ctx;
-  const [launcherDock, setLauncherDock] = useState37(() => readSavedDock("launcher"));
-  const onLauncherDrop = useCallback30((next) => {
+  const [launcherDock, setLauncherDock] = useState38(() => readSavedDock("launcher"));
+  const onLauncherDrop = useCallback31((next) => {
     setLauncherDock(next);
     persistDock("launcher", next);
   }, []);
@@ -10850,7 +10935,7 @@ function PlanPanelOpener() {
   const plan = usePlanUpdates();
   const { expandPanel } = useLiveAgent();
   const surfacedPlanIdRef = useRef42(null);
-  useEffect48(() => {
+  useEffect49(() => {
     if (plan?.state !== "proposed" || surfacedPlanIdRef.current === plan.planId)
       return;
     surfacedPlanIdRef.current = plan.planId;
@@ -10890,19 +10975,19 @@ function LiveAgent(props) {
   const auth = useAuth({ appKey });
   const usesHostAuth = !!getUserToken || !!userToken || !!authTokenProp;
   const effectiveAuthToken = usesHostAuth ? authTokenProp : auth.authToken ?? undefined;
-  const [activeModule, setActiveModule] = useState38(null);
-  const [sessionAgentMode, setSessionAgentMode] = useState38(null);
-  const minimizeOnSessionStart = useCallback31(() => {
+  const [activeModule, setActiveModule] = useState39(null);
+  const [sessionAgentMode, setSessionAgentMode] = useState39(null);
+  const minimizeOnSessionStart = useCallback32(() => {
     if (minimizable) {
       setIsMinimized(true);
       setIsPanelOpen(false);
     }
   }, [minimizable]);
-  const expandOnSessionStartError = useCallback31(() => {
+  const expandOnSessionStartError = useCallback32(() => {
     setIsMinimized(false);
     setIsPanelOpen(true);
   }, []);
-  const minimizeOnSessionDisconnect = useCallback31(() => {
+  const minimizeOnSessionDisconnect = useCallback32(() => {
     setActiveModule(null);
     setSessionAgentMode(null);
     if (minimizable) {
@@ -10941,28 +11026,28 @@ function LiveAgent(props) {
   });
   const teardownInFlightRef = useRef42(false);
   teardownInFlightRef.current = isPaused || isPausing || isDisconnecting;
-  const handleRoomDisconnected = useCallback31(() => {
+  const handleRoomDisconnected = useCallback32(() => {
     if (teardownInFlightRef.current)
       return;
     disconnect();
   }, [disconnect]);
   const isSessionLive = connection !== null || isStarting || isPausing || isDisconnecting;
-  const [isPanelOpen, setIsPanelOpen] = useState38(defaultOpen);
-  const [isMinimized, setIsMinimized] = useState38(minimizable && !defaultOpen);
-  const [sidebarTab, setSidebarTab] = useState38("agenda");
-  const [phasesSnapshot, setPhasesSnapshot] = useState38([]);
-  const [textMode, setTextMode] = useState38(false);
-  const [panelExpanded, setPanelExpanded] = useState38(false);
-  const togglePanelExpanded = useCallback31(() => setPanelExpanded((prev) => !prev), []);
+  const [isPanelOpen, setIsPanelOpen] = useState39(defaultOpen);
+  const [isMinimized, setIsMinimized] = useState39(minimizable && !defaultOpen);
+  const [sidebarTab, setSidebarTab] = useState39("agenda");
+  const [phasesSnapshot, setPhasesSnapshot] = useState39([]);
+  const [textMode, setTextMode] = useState39(false);
+  const [panelExpanded, setPanelExpanded] = useState39(false);
+  const togglePanelExpanded = useCallback32(() => setPanelExpanded((prev) => !prev), []);
   const panelRef = useRef42(null);
   const controlBarRef = useRef42(null);
-  const [isDragging, setIsDragging] = useState38(false);
-  const setTextModeState = useCallback31((enabled) => {
+  const [isDragging, setIsDragging] = useState39(false);
+  const setTextModeState = useCallback32((enabled) => {
     setTextMode(enabled);
   }, []);
   const isConnected = connection !== null;
   const showControlBar = isConnected || isStarting || isPausing;
-  useEffect48(() => {
+  useEffect49(() => {
     if (!isConnected)
       setTextModeState(false);
   }, [isConnected, setTextModeState]);
@@ -10993,7 +11078,7 @@ function LiveAgent(props) {
   const buddyActive = isBuddyActive(appearance) && variant !== "sidebar" && !hostAgentId;
   const buddyShape = appearance?.buddy?.shape ?? DEFAULT_BUDDY_SHAPE;
   const effectiveHostAgentId = buddyActive ? undefined : hostAgentId;
-  const startSession = useCallback31((opts) => startSessionRaw(buddyActive ? { ...opts, agentControls: buddyEffectiveControls(opts.agentControls) } : opts), [startSessionRaw, buddyActive]);
+  const startSession = useCallback32((opts) => startSessionRaw(buddyActive ? { ...opts, agentControls: buddyEffectiveControls(opts.agentControls) } : opts), [startSessionRaw, buddyActive]);
   const defaultAgentId = buddyActive ? defaultSelection.agentId : hostAgentId ?? defaultSelection.agentId;
   const defaultModule = availableModules.find((m) => m.id === defaultAgentId) ?? null;
   const operatingModule = buddyActive ? defaultModule : activeModule ?? (effectiveHostAgentId ? availableModules[0] ?? null : null);
@@ -11004,7 +11089,7 @@ function LiveAgent(props) {
   const shouldAnimateCursor = operatingModule?.uiPreferences?.animateCursor ?? animateAgentCursor;
   const buddyDefaultMissing = buddyActive && hasResolvedModules && !modulesError && !defaultModule && !isSessionLive;
   const resumableSession = useMemo7(() => getResumableSession(operatingModule), [operatingModule]);
-  const resumeSession = useCallback31(async () => {
+  const resumeSession = useCallback32(async () => {
     if (!resumableSession)
       return;
     if (operatingModule) {
@@ -11017,7 +11102,7 @@ function LiveAgent(props) {
       existingSessionId: resumableSession.id
     });
   }, [resumableSession, operatingModule, startSession, baseAgentControls]);
-  const selectModule = useCallback31((moduleId, opts) => {
+  const selectModule = useCallback32((moduleId, opts) => {
     const found = availableModules.find((m) => m.id === moduleId);
     if (!found)
       return;
@@ -11030,7 +11115,7 @@ function LiveAgent(props) {
       autoStarted: opts?.autoStarted
     });
   }, [availableModules, startSession]);
-  const startAdoptionSession = useCallback31((goal) => {
+  const startAdoptionSession = useCallback32((goal) => {
     attendGoal(goal.goalId);
     const found = availableModules.find((m) => m.id === goal.agentId);
     if (found)
@@ -11042,12 +11127,12 @@ function LiveAgent(props) {
       adoptionGoalId: goal.goalId
     });
   }, [attendGoal, availableModules, startSession]);
-  const [welcomeDismissed, setWelcomeDismissed] = useState38(false);
-  const dismissWelcome = useCallback31(() => setWelcomeDismissed(true), []);
-  const [savedPosition] = useState38(readSavedPosition);
-  const [currentPosition, setCurrentPosition] = useState38(savedPosition ?? "right");
+  const [welcomeDismissed, setWelcomeDismissed] = useState39(false);
+  const dismissWelcome = useCallback32(() => setWelcomeDismissed(true), []);
+  const [savedPosition] = useState39(readSavedPosition);
+  const [currentPosition, setCurrentPosition] = useState39(savedPosition ?? "right");
   const positionLockedRef = useRef42(savedPosition !== null);
-  const setPositionWithPersist = useCallback31((pos) => {
+  const setPositionWithPersist = useCallback32((pos) => {
     positionLockedRef.current = true;
     setCurrentPosition(pos);
     try {
@@ -11055,18 +11140,18 @@ function LiveAgent(props) {
     } catch {}
   }, []);
   const serverPosition = appearance?.position ?? null;
-  useEffect48(() => {
+  useEffect49(() => {
     if (!serverPosition || positionLockedRef.current)
       return;
     setCurrentPosition(serverPosition);
   }, [serverPosition]);
-  const [savedLauncherBottom] = useState38(readSavedLauncherBottom);
+  const [savedLauncherBottom] = useState39(readSavedLauncherBottom);
   const hasDraggedRef = useRef42(savedLauncherBottom !== null);
   const verticalAlignRef = useRef42(hostVerticalAlign ?? "bottom");
-  const [launcherBottomPx, setLauncherBottomPxState] = useState38(() => savedLauncherBottom !== null ? clampLauncherBottom(savedLauncherBottom) : verticalAlignToBottomPx(verticalAlignRef.current));
-  const [popsDown, setPopsDown] = useState38(() => launcherPopsDown(launcherBottomPx));
+  const [launcherBottomPx, setLauncherBottomPxState] = useState39(() => savedLauncherBottom !== null ? clampLauncherBottom(savedLauncherBottom) : verticalAlignToBottomPx(verticalAlignRef.current));
+  const [popsDown, setPopsDown] = useState39(() => launcherPopsDown(launcherBottomPx));
   const serverVerticalAlign = appearance?.verticalAlign ?? null;
-  useEffect48(() => {
+  useEffect49(() => {
     if (!serverVerticalAlign || hostVerticalAlign !== undefined || hasDraggedRef.current)
       return;
     verticalAlignRef.current = serverVerticalAlign;
@@ -11074,7 +11159,7 @@ function LiveAgent(props) {
     setLauncherBottomPxState(next);
     setPopsDown(launcherPopsDown(next));
   }, [serverVerticalAlign, hostVerticalAlign]);
-  const setLauncherBottomPx = useCallback31((px) => {
+  const setLauncherBottomPx = useCallback32((px) => {
     hasDraggedRef.current = true;
     setLauncherBottomPxState(px);
     setPopsDown(launcherPopsDown(px));
@@ -11084,22 +11169,22 @@ function LiveAgent(props) {
   }, []);
   const launcherBottomPxRef = useRef42(launcherBottomPx);
   launcherBottomPxRef.current = launcherBottomPx;
-  const [chatActivityAt, setChatActivityAt] = useState38(0);
-  const reportChatActivity = useCallback31(() => {
+  const [chatActivityAt, setChatActivityAt] = useState39(0);
+  const reportChatActivity = useCallback32(() => {
     const now = Date.now();
     setChatActivityAt((last) => now - last < CHAT_ACTIVITY_THROTTLE_MS ? last : now);
   }, []);
-  const [chatDraft, setChatDraft] = useState38("");
-  const commitLauncherDrop = useCallback31(({ side, bottomPx }) => {
+  const [chatDraft, setChatDraft] = useState39("");
+  const commitLauncherDrop = useCallback32(({ side, bottomPx }) => {
     setPositionWithPersist(side);
     setLauncherBottomPx(bottomPx);
   }, [setPositionWithPersist, setLauncherBottomPx]);
-  const [barDock, setBarDockState] = useState38(() => readSavedDock("bar"));
-  const setBarDock = useCallback31((next) => {
+  const [barDock, setBarDockState] = useState39(() => readSavedDock("bar"));
+  const setBarDock = useCallback32((next) => {
     setBarDockState(next);
     persistDock("bar", next);
   }, []);
-  useEffect48(() => {
+  useEffect49(() => {
     const syncToViewport = () => {
       const next = hasDraggedRef.current ? clampLauncherBottom(launcherBottomPxRef.current) : verticalAlignToBottomPx(verticalAlignRef.current);
       setLauncherBottomPxState(next);
@@ -11109,24 +11194,24 @@ function LiveAgent(props) {
     window.addEventListener("resize", syncToViewport);
     return () => window.removeEventListener("resize", syncToViewport);
   }, []);
-  const openPanel = useCallback31(() => setIsPanelOpen(true), []);
-  const closePanel = useCallback31(() => setIsPanelOpen(false), []);
-  const togglePanel = useCallback31(() => setIsPanelOpen((prev) => !prev), []);
-  const expandPanel = useCallback31(() => {
+  const openPanel = useCallback32(() => setIsPanelOpen(true), []);
+  const closePanel = useCallback32(() => setIsPanelOpen(false), []);
+  const togglePanel = useCallback32(() => setIsPanelOpen((prev) => !prev), []);
+  const expandPanel = useCallback32(() => {
     setIsMinimized(false);
     setIsPanelOpen(true);
   }, []);
-  const minimizePanel = useCallback31(() => {
+  const minimizePanel = useCallback32(() => {
     if (!minimizable)
       return;
     setIsMinimized(true);
     setIsPanelOpen(false);
   }, [minimizable]);
-  const pauseSessionAndMinimize = useCallback31(async () => {
+  const pauseSessionAndMinimize = useCallback32(async () => {
     await pauseSession();
     minimizePanel();
   }, [pauseSession, minimizePanel]);
-  const startDefaultSession = useCallback31(() => {
+  const startDefaultSession = useCallback32(() => {
     const target = availableModules.find((m) => m.id === defaultAgentId);
     if (!target)
       return;
@@ -11394,9 +11479,9 @@ function LiveAgent(props) {
   });
 }
 // src/hooks/useIsLocalSpeaking.ts
-import { useIsSpeaking as useIsSpeaking2, useLocalParticipant as useLocalParticipant13 } from "@livekit/components-react/hooks";
+import { useIsSpeaking as useIsSpeaking2, useLocalParticipant as useLocalParticipant14 } from "@livekit/components-react/hooks";
 function useIsLocalSpeaking() {
-  const { localParticipant } = useLocalParticipant13();
+  const { localParticipant } = useLocalParticipant14();
   return useIsSpeaking2(localParticipant);
 }
 // src/hooks/useIsSessionHeld.ts