bosun 0.36.2 → 0.36.4

package/ui/modules/voice-overlay.js

@@ -18,6 +18,12 @@ import {
   voiceToolCalls, voiceDuration,
   startVoiceSession, stopVoiceSession, interruptResponse,
 } from "./voice-client.js";
+import {
+  sdkVoiceState, sdkVoiceTranscript, sdkVoiceResponse, sdkVoiceError,
+  sdkVoiceToolCalls, sdkVoiceDuration, sdkVoiceSdkActive,
+  startSdkVoiceSession, stopSdkVoiceSession, interruptSdkResponse,
+  sendSdkTextMessage, onSdkVoiceEvent,
+} from "./voice-client-sdk.js";
 import {
   fallbackState, fallbackTranscript, fallbackResponse,
   fallbackError,
@@ -422,6 +428,53 @@ function injectOverlayStyles() {
     width: 162px;
     height: 162px;
   }
+}
+.voice-overlay.compact {
+  background: rgba(0, 0, 0, 0.93);
+}
+.voice-overlay.compact .voice-overlay-header {
+  padding: 12px 14px;
+}
+.voice-overlay.compact .voice-overlay-main {
+  padding: 62px 10px 10px;
+  flex-direction: column;
+  gap: 10px;
+}
+.voice-overlay.compact .voice-overlay-stage {
+  gap: 12px;
+}
+.voice-overlay.compact .voice-overlay-center {
+  gap: 12px;
+}
+.voice-overlay.compact .voice-orb-container {
+  width: 138px;
+  height: 138px;
+}
+.voice-overlay.compact .voice-transcript-area {
+  max-width: none;
+  width: 100%;
+  min-height: 46px;
+}
+.voice-overlay.compact .voice-transcript-user {
+  font-size: 14px;
+}
+.voice-overlay.compact .voice-transcript-assistant {
+  font-size: 15px;
+  line-height: 1.4;
+}
+.voice-overlay.compact .voice-tool-cards {
+  max-width: none;
+}
+.voice-overlay.compact .voice-overlay-chat {
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+  max-height: 44vh;
+}
+.voice-overlay.compact .voice-end-btn {
+  width: 56px;
+  height: 56px;
+  font-size: 20px;
 }
   `;
   document.head.appendChild(style);
@@ -441,6 +494,8 @@ function formatDuration(seconds) {
  * @param {{
  * visible: boolean,
  * onClose: () => void,
+ * onDismiss?: () => void,
+ * compact?: boolean,
  * tier: number,
  * sessionId?: string,
  * executor?: string,
@@ -453,6 +508,8 @@ function formatDuration(seconds) {
 export function VoiceOverlay({
   visible,
   onClose,
+  onDismiss,
+  compact = false,
   tier = 1,
   sessionId,
   executor,
@@ -470,16 +527,33 @@ export function VoiceOverlay({
   const [meetingChatError, setMeetingChatError] = useState(null);
   const autoVisionAppliedRef = useRef(false);
   const meetingScrollRef = useRef(null);
+  const [usingSdk, setUsingSdk] = useState(false);
+  const sdkFallbackCleanupRef = useRef(null);
 
   useEffect(() => { injectOverlayStyles(); }, []);
 
-  // Use computed signals based on tier
-  const state = tier === 1 ? voiceState.value : fallbackState.value;
-  const transcript = tier === 1 ? voiceTranscript.value : fallbackTranscript.value;
-  const response = tier === 1 ? voiceResponse.value : fallbackResponse.value;
-  const error = tier === 1 ? voiceError.value : fallbackError.value;
-  const toolCalls = tier === 1 ? voiceToolCalls.value : [];
-  const duration = tier === 1 ? voiceDuration.value : 0;
+  // Determine effective tier: SDK takes over tier 1 when active
+  const effectiveSdk = usingSdk && sdkVoiceSdkActive.value;
+
+  // Use computed signals based on tier — SDK overrides tier 1 when active
+  const state = effectiveSdk
+    ? sdkVoiceState.value
+    : tier === 1 ? voiceState.value : fallbackState.value;
+  const transcript = effectiveSdk
+    ? sdkVoiceTranscript.value
+    : tier === 1 ? voiceTranscript.value : fallbackTranscript.value;
+  const response = effectiveSdk
+    ? sdkVoiceResponse.value
+    : tier === 1 ? voiceResponse.value : fallbackResponse.value;
+  const error = effectiveSdk
+    ? sdkVoiceError.value
+    : tier === 1 ? voiceError.value : fallbackError.value;
+  const toolCalls = effectiveSdk
+    ? sdkVoiceToolCalls.value
+    : tier === 1 ? voiceToolCalls.value : [];
+  const duration = effectiveSdk
+    ? sdkVoiceDuration.value
+    : tier === 1 ? voiceDuration.value : 0;
   const visionState = visionShareState.value;
   const visionSource = visionShareSource.value;
   const visionErr = visionShareError.value;
@@ -495,12 +569,35 @@ export function VoiceOverlay({
     return normalizedCallType === "video" ? "camera" : null;
   })();
 
-  // Start session on mount
+  // Start session on mount — try Agents SDK first, fallback to legacy
   useEffect(() => {
     if (!visible || started) return;
     setStarted(true);
+
     if (tier === 1) {
-      startVoiceSession({ sessionId, executor, mode, model });
+      // Try SDK-first for tier 1
+      startSdkVoiceSession({ sessionId, executor, mode, model })
+        .then((result) => {
+          if (result.sdk) {
+            setUsingSdk(true);
+          } else {
+            // SDK not available — fallback to legacy WebRTC
+            setUsingSdk(false);
+            startVoiceSession({ sessionId, executor, mode, model });
+          }
+        })
+        .catch(() => {
+          // SDK threw unexpectedly — fallback to legacy
+          setUsingSdk(false);
+          startVoiceSession({ sessionId, executor, mode, model });
+        });
+
+      // Listen for SDK runtime failures to auto-fallback
+      const cleanup = onSdkVoiceEvent("sdk-unavailable", () => {
+        setUsingSdk(false);
+        startVoiceSession({ sessionId, executor, mode, model });
+      });
+      sdkFallbackCleanupRef.current = cleanup;
     } else if (sessionId) {
       startFallbackSession(sessionId, { executor, mode, model });
     }
@@ -600,23 +697,39 @@ export function VoiceOverlay({
   const handleClose = useCallback(() => {
     haptic("medium");
     stopVisionShare().catch(() => {});
-    if (tier === 1) {
+    // Clean up SDK fallback listener
+    if (typeof sdkFallbackCleanupRef.current === "function") {
+      sdkFallbackCleanupRef.current();
+      sdkFallbackCleanupRef.current = null;
+    }
+    if (usingSdk) {
+      stopSdkVoiceSession();
+    } else if (tier === 1) {
       stopVoiceSession();
     } else {
       stopFallbackSession();
     }
+    setUsingSdk(false);
     setStarted(false);
     onClose();
-  }, [tier, onClose]);
+  }, [tier, onClose, usingSdk]);
+
+  const handleDismiss = useCallback(() => {
+    haptic("light");
+    const fn = typeof onDismiss === "function" ? onDismiss : onClose;
+    fn();
+  }, [onDismiss, onClose]);
 
   const handleInterrupt = useCallback(() => {
     haptic("light");
-    if (tier === 1) {
+    if (usingSdk) {
+      interruptSdkResponse();
+    } else if (tier === 1) {
       interruptResponse();
     } else {
       interruptFallback();
     }
-  }, [tier]);
+  }, [tier, usingSdk]);
 
   const handleToggleScreenShare = useCallback(() => {
     haptic("light");
@@ -689,10 +802,10 @@ export function VoiceOverlay({
         : "live";
 
   return html`
-    <div class="voice-overlay">
+    <div class=${`voice-overlay${compact ? " compact" : ""}`}>
       <!-- Header -->
       <div class="voice-overlay-header">
-        <button class="voice-overlay-close" onClick=${handleClose} title="End voice session">
+        <button class="voice-overlay-close" onClick=${handleDismiss} title="Hide voice window">
           ${resolveIcon("close")}
         </button>
         <div>

package/ui/modules/voice.js

@@ -38,8 +38,8 @@ function injectVoiceStyles() {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 34px;
+  height: 34px;
   border-radius: 50%;
   border: 1px solid rgba(255,255,255,0.10);
   background: var(--tg-theme-secondary-bg-color, #1e1e2e);
@@ -49,10 +49,16 @@ function injectVoiceStyles() {
   transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
   -webkit-tap-highlight-color: transparent;
   padding: 0;
-  font-size: 15px;
+  box-sizing: border-box;
+  font-size: 0;
   line-height: 1;
   user-select: none;
 }
+.mic-btn svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
 .mic-btn:hover:not(:disabled) {
   background: rgba(255,255,255,0.06);
   color: var(--tg-theme-text-color, #fff);
@@ -74,9 +80,12 @@ function injectVoiceStyles() {
   50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0.06); }
 }
 .mic-btn-sm {
-  width: 26px;
-  height: 26px;
-  font-size: 13px;
+  width: 24px;
+  height: 24px;
+}
+.mic-btn-sm svg {
+  width: 12px;
+  height: 12px;
 }
 .mic-btn-inline {
   position: absolute;