nitrostack 1.0.71 → 1.0.73

package/src/studio/components/ToolCard.tsx

@@ -4,7 +4,7 @@ import type { Tool } from '@/lib/types';
 import { useStudioStore } from '@/lib/store';
 import { WidgetRenderer } from './WidgetRenderer';
 import { useRouter } from 'next/navigation';
-import { Zap, Palette, Maximize2, Play, Sparkles, MessageSquare } from 'lucide-react';
+import { BoltIcon, PaintBrushIcon, ArrowsPointingOutIcon, PlayIcon, SparklesIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline';
 
 interface ToolCardProps {
   tool: Tool;
@@ -16,16 +16,16 @@ export function ToolCard({ tool, onExecute }: ToolCardProps) {
   const router = useRouter();
 
   // Check if tool has widget - check multiple sources
-  const widgetUri = 
-    tool.widget?.route || 
-    tool.outputTemplate || 
-    tool._meta?.['ui/template'] || 
+  const widgetUri =
+    tool.widget?.route ||
+    tool.outputTemplate ||
+    tool._meta?.['ui/template'] ||
     tool._meta?.['openai/outputTemplate'];
   const hasWidget = !!widgetUri && widgetUri.trim().length > 0;
-  
+
   // Get example data for preview - check both examples and _meta
   const exampleData = tool.examples?.response || tool._meta?.['tool/examples']?.response;
-  
+
   // Debug logging for widget detection
   if (hasWidget) {
     console.log('ToolCard - Widget detected:', {
@@ -41,16 +41,16 @@ export function ToolCard({ tool, onExecute }: ToolCardProps) {
 
   const handleUseInChat = (e: React.MouseEvent) => {
     e.stopPropagation();
-    
+
     // Build the tool execution message
     const toolMessage = `Use the ${tool.name} tool`;
-    
+
     // Store the message in localStorage
     if (typeof window !== 'undefined') {
       window.localStorage.setItem('chatInput', toolMessage);
       window.localStorage.setItem('suggestedTool', tool.name);
     }
-    
+
     router.push('/chat');
   };
 
@@ -64,24 +64,29 @@ export function ToolCard({ tool, onExecute }: ToolCardProps) {
       className="card card-hover p-6 animate-fade-in cursor-pointer"
       onClick={() => onExecute(tool)}
     >
-      {/* Header */}
-      <div className="flex items-start justify-between mb-4">
-        <div className="flex items-center gap-3">
-          <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${hasWidget ? 'bg-purple-500/10' : 'bg-primary/10'}`}>
-            {hasWidget ? (
-              <Palette className="w-6 h-6 text-purple-500" />
-            ) : (
-              <Zap className="w-6 h-6 text-primary" />
+      {/* Clean Minimal Header */}
+      <div className="flex items-center gap-3 mb-3">
+        {/* Icon - MCP Brand Colors Only */}
+        {hasWidget ? (
+          <PaintBrushIcon className="h-5 w-5 text-secondary flex-shrink-0" />
+        ) : (
+          <BoltIcon className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+        )}
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          <h3 className="font-medium text-[15px] text-foreground leading-tight truncate">
+            {tool.name}
+          </h3>
+          <div className="flex items-center gap-1.5 text-xs text-muted-foreground leading-none mt-1">
+            <span>Tool</span>
+            {hasWidget && (
+              <>
+                <span className="text-muted-foreground/40">•</span>
+                <span className="text-secondary">Widget</span>
+              </>
             )}
           </div>
-          <div>
-            <h3 className="font-semibold text-lg text-foreground">
-              {tool.name}
-            </h3>
-            <span className={`badge ${hasWidget ? 'badge-secondary' : 'badge-primary'} text-xs mt-1`}>
-              {hasWidget ? 'tool + widget' : 'tool'}
-            </span>
-          </div>
         </div>
       </div>
 
@@ -94,7 +99,7 @@ export function ToolCard({ tool, onExecute }: ToolCardProps) {
       {hasWidget && widgetUri && exampleData && (
         <div className="relative mb-4 rounded-lg overflow-hidden border border-border bg-muted/20">
           <div className="absolute top-2 left-2 z-10 flex items-center gap-1 bg-primary/90 backdrop-blur-sm text-black px-2 py-1 rounded-md text-xs font-semibold shadow-lg">
-            <Sparkles className="w-3 h-3" />
+            <SparklesIcon className="h-3 w-3" />
             Widget Preview
           </div>
           <div className="h-64 relative">
@@ -107,31 +112,35 @@ export function ToolCard({ tool, onExecute }: ToolCardProps) {
         </div>
       )}
 
-      {/* Action Buttons */}
-      <div className="flex flex-wrap items-center gap-2" onClick={(e) => e.stopPropagation()}>
+      {/* Premium Action Toolbar */}
+      <div className="flex items-center gap-1.5 pt-4 border-t border-border/50" onClick={(e) => e.stopPropagation()}>
+        {/* Secondary: Enlarge Widget (Icon-only) */}
         {hasWidget && (
           <button
             onClick={handleEnlarge}
-            className="btn btn-secondary flex-1 min-w-[90px] text-xs sm:text-sm gap-1.5 px-2.5 py-1.5 sm:px-4 sm:py-2"
+            className="group relative h-8 w-8 rounded hover:bg-muted transition-all duration-200 flex items-center justify-center"
+            title="View fullscreen"
           >
-            <Maximize2 className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
-            <span className="truncate">Enlarge</span>
+            <ArrowsPointingOutIcon className="h-4 w-4 text-muted-foreground group-hover:text-foreground group-hover:scale-110 transition-all" />
           </button>
         )}
-        <button 
-          onClick={() => onExecute(tool)} 
-          className="btn btn-primary flex-1 min-w-[90px] text-xs sm:text-sm gap-1.5 px-2.5 py-1.5 sm:px-4 sm:py-2"
+
+        {/* Primary: Execute Tool (Prominent Button) */}
+        <button
+          onClick={() => onExecute(tool)}
+          className="group relative flex-1 h-8 rounded bg-primary hover:bg-primary/90 transition-all duration-200 flex items-center justify-center gap-1.5 shadow-sm hover:shadow-md"
         >
-          <Play className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
-          <span className="truncate">Execute</span>
+          <PlayIcon className="h-4 w-4 text-white" />
+          <span className="text-sm font-medium text-white">Execute</span>
         </button>
+
+        {/* Secondary: Use in Chat (Icon-only) */}
         <button
           onClick={handleUseInChat}
-          className="btn btn-secondary flex-1 min-w-[90px] text-xs sm:text-sm gap-1.5 px-2.5 py-1.5 sm:px-4 sm:py-2"
-          title="Use in Chat"
+          className="group relative h-8 w-8 rounded hover:bg-muted transition-all duration-200 flex items-center justify-center"
+          title="Use in AI chat"
         >
-          <MessageSquare className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
-          <span className="truncate">Chat</span>
+          <ChatBubbleLeftIcon className="h-4 w-4 text-muted-foreground group-hover:text-foreground group-hover:scale-110 transition-all" />
         </button>
       </div>
     </div>

package/src/studio/components/VoiceOrbOverlay.tsx

@@ -0,0 +1,475 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import {
+    MicrophoneIcon,
+    XMarkIcon,
+    Cog6ToothIcon,
+    ChatBubbleLeftRightIcon,
+    SpeakerWaveIcon
+} from '@heroicons/react/24/outline';
+
+// LLM State type
+type LLMState = 'idle' | 'listening' | 'thinking' | 'speaking';
+
+interface VoiceOrbOverlayProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSendMessage: (text: string) => void;
+    elevenLabsApiKey: string;
+    llmState: LLMState;
+    spokenText?: string;
+    onGreet?: () => void;
+    onSettingsClick?: () => void;
+    displayMode?: 'voice-only' | 'voice-chat';
+    onDisplayModeChange?: (mode: 'voice-only' | 'voice-chat') => void;
+    inputLanguage?: string;
+    onInterrupt?: () => void;
+    voiceModeActive?: boolean; // Keep speech recognition active even when overlay closed
+}
+
+export function VoiceOrbOverlay({
+    isOpen,
+    onClose,
+    onSendMessage,
+    elevenLabsApiKey,
+    llmState,
+    spokenText,
+    onGreet,
+    onSettingsClick,
+    displayMode = 'voice-only',
+    onDisplayModeChange,
+    inputLanguage = 'en-US',
+    onInterrupt,
+    voiceModeActive = false
+}: VoiceOrbOverlayProps) {
+    const [transcript, setTranscript] = useState('');
+    const [hasGreeted, setHasGreeted] = useState(false);
+
+    const recognitionRef = useRef<SpeechRecognition | null>(null);
+    const silenceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const isListeningRef = useRef(false);
+
+    // Keep ref in sync
+    useEffect(() => {
+        isListeningRef.current = llmState === 'listening';
+    }, [llmState]);
+
+    // Handle sending message
+    const handleSend = useCallback((text: string) => {
+        if (!text.trim()) return;
+
+        if (recognitionRef.current) {
+            try {
+                recognitionRef.current.stop();
+            } catch (e) { }
+        }
+        setTranscript('');
+        onSendMessage(text.trim());
+    }, [onSendMessage]);
+
+    // Initialize Speech Recognition
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+
+        // Web Speech API types
+        interface WebWindow extends Window {
+            SpeechRecognition?: typeof SpeechRecognition;
+            webkitSpeechRecognition?: typeof SpeechRecognition;
+        }
+        const webWindow = window as WebWindow;
+        const SpeechRecognitionCtor = webWindow.SpeechRecognition || webWindow.webkitSpeechRecognition;
+        if (!SpeechRecognitionCtor) {
+            console.error('Speech Recognition not supported');
+            return;
+        }
+
+        const recognition = new SpeechRecognitionCtor();
+        recognition.continuous = false;
+        recognition.interimResults = true;
+        recognition.lang = inputLanguage; // Use configured input language
+
+        let currentTranscript = '';
+
+        recognition.onresult = (event: SpeechRecognitionEvent) => {
+            let finalTranscript = '';
+            let interimTranscript = '';
+
+            for (let i = event.resultIndex; i < event.results.length; i++) {
+                const text = event.results[i][0].transcript;
+                if (event.results[i].isFinal) {
+                    finalTranscript += text;
+                } else {
+                    interimTranscript += text;
+                }
+            }
+
+            // Talk-to-interrupt: if user speaks during TTS, stop it immediately
+            if ((finalTranscript || interimTranscript) && llmState === 'speaking' && onInterrupt) {
+                console.log('🛑 User interrupted TTS');
+                onInterrupt();
+            }
+
+            currentTranscript = finalTranscript || interimTranscript;
+            setTranscript(currentTranscript);
+
+            if (finalTranscript.trim()) {
+                if (silenceTimeoutRef.current) {
+                    clearTimeout(silenceTimeoutRef.current);
+                }
+
+                silenceTimeoutRef.current = setTimeout(() => {
+                    if (currentTranscript.trim() && llmState === 'listening') {
+                        handleSend(currentTranscript.trim());
+                        currentTranscript = '';
+                    }
+                }, 800);
+            }
+        };
+
+        recognition.onerror = (event: SpeechRecognitionErrorEvent) => {
+            console.error('Speech recognition error:', event.error);
+        };
+
+        recognition.onend = () => {
+            setTimeout(() => {
+                if (isListeningRef.current && llmState === 'listening') {
+                    try {
+                        recognition.start();
+                    } catch (e) { }
+                }
+            }, 100);
+        };
+
+        recognitionRef.current = recognition;
+
+        return () => {
+            if (silenceTimeoutRef.current) {
+                clearTimeout(silenceTimeoutRef.current);
+            }
+            try {
+                recognition.stop();
+            } catch (e) { }
+        };
+    }, [handleSend, llmState]);
+
+    // Start listening
+    const startListening = useCallback(() => {
+        if (recognitionRef.current && llmState !== 'speaking' && llmState !== 'thinking') {
+            try {
+                recognitionRef.current.start();
+            } catch (e) {
+                console.error('Failed to start speech recognition:', e);
+            }
+        }
+    }, [llmState]);
+
+    // Stop listening
+    const stopListening = useCallback(() => {
+        if (recognitionRef.current) {
+            try {
+                recognitionRef.current.stop();
+            } catch (e) { }
+        }
+        if (silenceTimeoutRef.current) {
+            clearTimeout(silenceTimeoutRef.current);
+        }
+    }, []);
+
+    // Greet on open
+    useEffect(() => {
+        if (isOpen && !hasGreeted && onGreet) {
+            setHasGreeted(true);
+            onGreet();
+        }
+        if (!isOpen && !voiceModeActive) {
+            setHasGreeted(false);
+            setTranscript('');
+        }
+    }, [isOpen, hasGreeted, onGreet, voiceModeActive]);
+
+    // Start listening after greeting or when state becomes listening
+    // Also listen when voiceModeActive is true (voice+chat mode)
+    useEffect(() => {
+        const shouldListen = (isOpen || voiceModeActive) && llmState === 'listening';
+        if (shouldListen) {
+            startListening();
+        } else if (!isOpen && !voiceModeActive) {
+            stopListening();
+        }
+    }, [isOpen, voiceModeActive, llmState, startListening, stopListening]);
+
+    // Cleanup on close - only if voice mode is completely off
+    useEffect(() => {
+        if (!isOpen && !voiceModeActive) {
+            stopListening();
+        }
+    }, [isOpen, voiceModeActive, stopListening]);
+
+    // Handle mic click
+    const handleMicClick = () => {
+        if (llmState === 'listening' && transcript.trim()) {
+            handleSend(transcript.trim());
+        }
+    };
+
+    // Handle close
+    const handleClose = () => {
+        stopListening();
+        setHasGreeted(false);
+        onClose();
+    };
+
+    if (!isOpen) return null;
+
+    // Status text based on state
+    const getStatusText = () => {
+        switch (llmState) {
+            case 'speaking':
+                return spokenText || 'Speaking...';
+            case 'thinking':
+                return 'Processing your request...';
+            case 'listening':
+                return transcript || 'Listening...';
+            default:
+                return 'Ready';
+        }
+    };
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#0a0a0a]/98 backdrop-blur-xl" style={{ left: 'var(--sidebar-width, 15rem)' }}>
+            {/* Main Container - Properly Centered */}
+            <div className="flex flex-col items-center justify-center gap-10 w-full max-w-lg px-6 h-full">
+
+                {/* Professional Orb */}
+                <div className="relative flex items-center justify-center">
+                    {/* Ambient glow */}
+                    <div
+                        className={`absolute w-64 h-64 rounded-full transition-all duration-700 ${llmState === 'speaking'
+                            ? 'bg-gradient-to-br from-blue-500/30 via-violet-500/20 to-cyan-500/30 scale-110 blur-3xl animate-pulse'
+                            : llmState === 'thinking'
+                                ? 'bg-gradient-to-br from-amber-500/20 via-orange-500/15 to-yellow-500/20 scale-100 blur-3xl animate-spin-slow'
+                                : llmState === 'listening'
+                                    ? 'bg-gradient-to-br from-blue-500/25 via-cyan-500/20 to-blue-600/25 scale-105 blur-3xl animate-pulse'
+                                    : 'bg-gradient-to-br from-slate-500/15 via-slate-600/10 to-slate-500/15 scale-100 blur-3xl'
+                            }`}
+                    />
+
+                    {/* Orb container */}
+                    <div
+                        className={`relative w-44 h-44 rounded-full transition-transform duration-500 ${llmState === 'speaking' ? 'scale-110'
+                            : llmState === 'thinking' ? 'scale-95'
+                                : llmState === 'listening' ? 'scale-105'
+                                    : 'scale-100'
+                            }`}
+                    >
+                        {/* Rotating gradient ring */}
+                        <div
+                            className={`absolute inset-0 rounded-full ${llmState === 'thinking' ? 'animate-spin-slow' : ''
+                                }`}
+                            style={{
+                                background: llmState === 'thinking'
+                                    ? 'conic-gradient(from 0deg, #f59e0b, #f97316, #ef4444, #f59e0b)'
+                                    : llmState === 'speaking'
+                                        ? 'conic-gradient(from 0deg, #3b82f6, #8b5cf6, #06b6d4, #3b82f6)'
+                                        : llmState === 'listening'
+                                            ? 'conic-gradient(from 0deg, #3b82f6, #60a5fa, #3b82f6)'
+                                            : 'conic-gradient(from 0deg, #475569, #64748b, #475569)',
+                                padding: '3px',
+                                borderRadius: '50%'
+                            }}
+                        >
+                            {/* Inner orb */}
+                            <div
+                                className="w-full h-full rounded-full bg-[#0a0a0a] flex items-center justify-center"
+                                style={{
+                                    boxShadow: llmState === 'speaking'
+                                        ? '0 0 60px 10px rgba(59, 130, 246, 0.3), inset 0 0 30px rgba(139, 92, 246, 0.2)'
+                                        : llmState === 'thinking'
+                                            ? '0 0 40px 5px rgba(245, 158, 11, 0.2), inset 0 0 20px rgba(249, 115, 22, 0.1)'
+                                            : llmState === 'listening'
+                                                ? '0 0 50px 8px rgba(59, 130, 246, 0.25), inset 0 0 25px rgba(96, 165, 250, 0.15)'
+                                                : '0 0 30px 5px rgba(71, 85, 105, 0.15)'
+                                }}
+                            >
+                                {/* Center gradient */}
+                                <div
+                                    className={`w-32 h-32 rounded-full transition-all duration-500 ${llmState === 'speaking' ? 'animate-pulse-fast'
+                                        : llmState === 'listening' ? 'animate-pulse'
+                                            : ''
+                                        }`}
+                                    style={{
+                                        background: llmState === 'thinking'
+                                            ? 'radial-gradient(circle, #f59e0b 0%, #0a0a0a 70%)'
+                                            : llmState === 'speaking'
+                                                ? 'radial-gradient(circle, #8b5cf6 0%, #3b82f6 40%, #0a0a0a 70%)'
+                                                : llmState === 'listening'
+                                                    ? 'radial-gradient(circle, #60a5fa 0%, #3b82f6 40%, #0a0a0a 70%)'
+                                                    : 'radial-gradient(circle, #64748b 0%, #0a0a0a 60%)'
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Status Text */}
+                <div className="text-center max-w-md min-h-[80px] flex items-center justify-center">
+                    <p
+                        className={`text-lg font-light leading-relaxed transition-all duration-300 ${llmState === 'speaking'
+                            ? 'text-white/90'
+                            : llmState === 'thinking'
+                                ? 'text-amber-400/80 animate-pulse'
+                                : llmState === 'listening' && transcript
+                                    ? 'text-white/80'
+                                    : 'text-white/50'
+                            }`}
+                    >
+                        {getStatusText()}
+                    </p>
+                </div>
+
+                {/* Control Bar */}
+                <div className="flex items-center gap-3">
+                    {/* Settings */}
+                    {onSettingsClick && (
+                        <button
+                            onClick={onSettingsClick}
+                            className="w-12 h-12 rounded-full bg-white/5 hover:bg-white/10 border border-white/10 flex items-center justify-center transition-all"
+                            title="Voice Settings"
+                        >
+                            <Cog6ToothIcon className="w-5 h-5 text-white/60" />
+                        </button>
+                    )}
+
+                    {/* Main mic button */}
+                    <button
+                        onClick={handleMicClick}
+                        disabled={llmState === 'thinking' || llmState === 'speaking'}
+                        className={`w-16 h-16 rounded-full flex items-center justify-center transition-all duration-300 ${llmState === 'listening'
+                            ? 'bg-blue-500 text-white shadow-lg shadow-blue-500/30 scale-110'
+                            : llmState === 'thinking'
+                                ? 'bg-amber-500/20 text-amber-400 cursor-wait'
+                                : llmState === 'speaking'
+                                    ? 'bg-violet-500/20 text-violet-400 cursor-not-allowed'
+                                    : 'bg-white/10 text-white/60 hover:bg-white/20'
+                            }`}
+                    >
+                        {llmState === 'speaking' ? (
+                            <SpeakerWaveIcon className="w-7 h-7 animate-pulse" />
+                        ) : (
+                            <MicrophoneIcon className="w-7 h-7" />
+                        )}
+                    </button>
+
+                    {/* Display mode toggle */}
+                    {onDisplayModeChange && (
+                        <button
+                            onClick={() => onDisplayModeChange(displayMode === 'voice-only' ? 'voice-chat' : 'voice-only')}
+                            className={`w-12 h-12 rounded-full border border-white/10 flex items-center justify-center transition-all ${displayMode === 'voice-chat'
+                                ? 'bg-blue-500/20 text-blue-400'
+                                : 'bg-white/5 hover:bg-white/10 text-white/60'
+                                }`}
+                            title={displayMode === 'voice-only' ? 'Show Chat' : 'Voice Only'}
+                        >
+                            <ChatBubbleLeftRightIcon className="w-5 h-5" />
+                        </button>
+                    )}
+
+                    {/* Close */}
+                    <button
+                        onClick={handleClose}
+                        className="w-12 h-12 rounded-full bg-white/5 hover:bg-red-500/20 border border-white/10 hover:border-red-500/30 flex items-center justify-center transition-all group"
+                        title="End Voice Mode"
+                    >
+                        <XMarkIcon className="w-5 h-5 text-white/60 group-hover:text-red-400" />
+                    </button>
+                </div>
+
+                {/* State Indicator Pills */}
+                <div className="flex items-center gap-2 text-xs">
+                    <div className={`px-3 py-1 rounded-full border transition-all ${llmState === 'listening'
+                        ? 'bg-blue-500/20 border-blue-500/30 text-blue-400'
+                        : 'bg-white/5 border-white/10 text-white/30'
+                        }`}>
+                        Listening
+                    </div>
+                    <div className={`px-3 py-1 rounded-full border transition-all ${llmState === 'thinking'
+                        ? 'bg-amber-500/20 border-amber-500/30 text-amber-400'
+                        : 'bg-white/5 border-white/10 text-white/30'
+                        }`}>
+                        Processing
+                    </div>
+                    <div className={`px-3 py-1 rounded-full border transition-all ${llmState === 'speaking'
+                        ? 'bg-violet-500/20 border-violet-500/30 text-violet-400'
+                        : 'bg-white/5 border-white/10 text-white/30'
+                        }`}>
+                        Speaking
+                    </div>
+                </div>
+            </div>
+
+            {/* Custom CSS animations */}
+            <style jsx>{`
+        @keyframes spin-slow {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+        @keyframes pulse-fast {
+          0%, 100% { opacity: 1; transform: scale(1); }
+          50% { opacity: 0.8; transform: scale(1.05); }
+        }
+        .animate-spin-slow {
+          animation: spin-slow 3s linear infinite;
+        }
+        .animate-pulse-fast {
+          animation: pulse-fast 0.8s ease-in-out infinite;
+        }
+      `}</style>
+        </div>
+    );
+}
+
+// Header Voice Badge for Voice+Chat mode - shows orb + state text
+export function MiniVoiceOrb({
+    llmState,
+    onClick
+}: {
+    llmState: LLMState;
+    onClick?: () => void;
+}) {
+    const getStateInfo = () => {
+        switch (llmState) {
+            case 'speaking':
+                return { text: 'Speaking', bgClass: 'bg-violet-500/10 border-violet-500/30', dotClass: 'bg-violet-500', textClass: 'text-violet-400' };
+            case 'thinking':
+                return { text: 'Processing', bgClass: 'bg-amber-500/10 border-amber-500/30', dotClass: 'bg-amber-500', textClass: 'text-amber-400' };
+            case 'listening':
+                return { text: 'Listening', bgClass: 'bg-blue-500/10 border-blue-500/30', dotClass: 'bg-blue-500', textClass: 'text-blue-400' };
+            default:
+                return { text: 'Ready', bgClass: 'bg-slate-500/10 border-slate-500/30', dotClass: 'bg-slate-500', textClass: 'text-slate-400' };
+        }
+    };
+
+    const stateInfo = getStateInfo();
+
+    return (
+        <button
+            onClick={onClick}
+            className={`flex items-center gap-2 px-3 py-1.5 rounded-full border transition-all hover:scale-105 ${stateInfo.bgClass}`}
+            title="Click to expand voice mode"
+        >
+            {/* Mini orb */}
+            <div className="relative">
+                <div className={`w-2.5 h-2.5 rounded-full ${stateInfo.dotClass} ${llmState === 'listening' || llmState === 'speaking' ? 'animate-pulse' : llmState === 'thinking' ? 'animate-spin' : ''}`} />
+                {(llmState === 'listening' || llmState === 'speaking') && (
+                    <div className={`absolute inset-0 w-2.5 h-2.5 rounded-full ${stateInfo.dotClass} animate-ping opacity-75`} />
+                )}
+            </div>
+            {/* State text */}
+            <span className={`text-xs font-medium ${stateInfo.textClass}`}>
+                {stateInfo.text}
+            </span>
+        </button>
+    );
+}

package/src/studio/components/WidgetErrorBoundary.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+/**
+ * Error boundary for widgets - silently catches errors and renders nothing
+ * to prevent broken widgets from affecting the rest of the UI
+ */
+export class WidgetErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // Log the error silently - don't show to user
+    console.error('🚫 Widget error caught by boundary:', {
+      error: error.message,
+      stack: error.stack,
+      componentStack: errorInfo.componentStack,
+    });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // Return fallback or nothing - don't show error UI
+      return this.props.fallback ?? null;
+    }
+
+    return this.props.children;
+  }
+}
+