nitrostack 1.0.72 → 1.0.73

package/src/studio/components/Sidebar.tsx

@@ -93,9 +93,24 @@ export function Sidebar() {
     window.dispatchEvent(new Event('sidebar-toggle'));
   };
 
-  const renderNavItem = (item: any, depth = 0) => {
+  interface NavChild {
+    id: string;
+    label: string;
+    icon: React.ComponentType<{ className?: string }>;
+    path: string;
+  }
+
+  interface NavItem {
+    id: string;
+    label: string;
+    icon: React.ComponentType<{ className?: string }>;
+    path: string;
+    children?: NavChild[];
+  }
+
+  const renderNavItem = (item: NavItem, depth = 0) => {
     const Icon = item.icon;
-    const isActive = pathname === item.path || (item.children && item.children.some((child: any) => pathname === child.path));
+    const isActive = pathname === item.path || (item.children && item.children.some((child) => pathname === child.path));
     const isExpanded = expandedItems.includes(item.id);
     const hasChildren = item.children && item.children.length > 0;
 
@@ -157,7 +172,7 @@ export function Sidebar() {
         {/* Render Children */}
         {!isCollapsed && hasChildren && isExpanded && (
           <div className="mt-0.5 space-y-0.5">
-            {item.children.map((child: any) => renderNavItem(child, depth + 1))}
+            {item.children!.map((child) => renderNavItem(child as NavItem, depth + 1))}
           </div>
         )}
       </div>

package/src/studio/components/VoiceOrbOverlay.tsx

@@ -46,7 +46,7 @@ export function VoiceOrbOverlay({
     const [transcript, setTranscript] = useState('');
     const [hasGreeted, setHasGreeted] = useState(false);
 
-    const recognitionRef = useRef<any>(null);
+    const recognitionRef = useRef<SpeechRecognition | null>(null);
     const silenceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const isListeningRef = useRef(false);
 
@@ -72,20 +72,26 @@ export function VoiceOrbOverlay({
     useEffect(() => {
         if (typeof window === 'undefined') return;
 
-        const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
-        if (!SpeechRecognition) {
+        // 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 SpeechRecognition();
+        const recognition = new SpeechRecognitionCtor();
         recognition.continuous = false;
         recognition.interimResults = true;
         recognition.lang = inputLanguage; // Use configured input language
 
         let currentTranscript = '';
 
-        recognition.onresult = (event: any) => {
+        recognition.onresult = (event: SpeechRecognitionEvent) => {
             let finalTranscript = '';
             let interimTranscript = '';
 
@@ -121,7 +127,7 @@ export function VoiceOrbOverlay({
             }
         };
 
-        recognition.onerror = (event: any) => {
+        recognition.onerror = (event: SpeechRecognitionErrorEvent) => {
             console.error('Speech recognition error:', event.error);
         };
 

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;
+  }
+}
+

package/src/studio/components/WidgetRenderer.tsx

@@ -1,164 +1,77 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
-import { getWidgetUrl, createWidgetHTML, postMessageToWidget } from '@/lib/widget-loader';
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { createWidgetHTML } from '@/lib/widget-loader';
 
 interface WidgetRendererProps {
   uri: string;
-  data: any;
+  data: unknown;
   className?: string;
 }
 
 export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProps) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
-  const [contentHeight, setContentHeight] = useState<number>(200); // Start with smaller default
+  const [contentHeight, setContentHeight] = useState<number>(100); // Start small, let widget report its actual size
+  const [hasError, setHasError] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const messageHandlerRef = useRef<((event: MessageEvent) => void) | null>(null);
+  const mountedRef = useRef(true);
 
   // Check if we're in dev mode (localhost)
   const isDevMode =
     typeof window !== 'undefined' &&
     (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
 
+  // Minimum height to prevent collapse
+  const MIN_HEIGHT = 50;
+
+  // Stable handler for resize messages - no max height limit
+  const handleResize = useCallback((height: number) => {
+    if (!mountedRef.current) return;
+    if (height && typeof height === 'number' && height > 0) {
+      // Allow widget to be any height it needs
+      const newHeight = Math.max(MIN_HEIGHT, height);
+      setContentHeight(newHeight);
+    }
+  }, []);
+
   useEffect(() => {
+    mountedRef.current = true;
+    
     if (!iframeRef.current) return;
 
-    const injectOpenAiRuntime = (iframe: HTMLIFrameElement) => {
-      if (!iframe.contentWindow) return;
+    const iframe = iframeRef.current;
+    const timeoutIds: NodeJS.Timeout[] = [];
 
-      // Detect system theme
-      const getSystemTheme = (): 'light' | 'dark' => {
-        if (typeof window === 'undefined') return 'light';
-        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-      };
+    // Create message handler that checks if component is still mounted
+    const handleMessage = (event: MessageEvent) => {
+      if (!mountedRef.current) return;
 
-      // Detect device capabilities
-      const getUserAgent = () => ({
-        device: {
-          type: (window.matchMedia('(max-width: 768px)').matches
-            ? 'mobile'
-            : window.matchMedia('(max-width: 1024px)').matches
-              ? 'tablet'
-              : 'desktop') as 'mobile' | 'tablet' | 'desktop',
-        },
-        capabilities: {
-          hover: window.matchMedia('(hover: hover)').matches,
-          touch: window.matchMedia('(pointer: coarse)').matches,
-        },
-      });
-
-      // Create window.openai polyfill
-      const openaiRuntime = {
-        // Data
-        toolInput: {},
-        toolOutput: data,
-        toolResponseMetadata: null,
-        widgetState: null,
-
-        // Visuals
-        theme: getSystemTheme(),
-        locale: navigator.language || 'en-US',
-        userAgent: getUserAgent(),
-
-        // Layout
-        maxHeight: 450, // Match iframe height
-        displayMode: 'inline' as const,
-        safeArea: {
-          insets: { top: 0, bottom: 0, left: 0, right: 0 },
-        },
-
-        // State management
-        setWidgetState: async (state: any) => {
-          console.log('📦 Widget state updated:', state);
-          openaiRuntime.widgetState = state;
-
-          // Dispatch event for hooks to react
-          const event = new CustomEvent('openai:set_globals', {
-            detail: { globals: { widgetState: state } },
-          });
-          iframe.contentWindow?.dispatchEvent(event);
-
-          // TODO: Persist to chat message context
-        },
-
-        // Actions
-        callTool: async (name: string, args: Record<string, unknown>) => {
-          console.log('🔧 Widget calling tool:', name, args);
-          // TODO: Implement tool call via studio API
-          return { result: 'Tool call not yet implemented' };
-        },
-
-        sendFollowUpMessage: async ({ prompt }: { prompt: string }) => {
-          console.log('💬 Widget sending follow-up:', prompt);
-          // TODO: Implement follow-up message
-        },
-
-        openExternal: ({ href }: { href: string }) => {
-          window.open(href, '_blank', 'noopener,noreferrer');
-        },
-
-        requestClose: () => {
-          console.log('❌ Widget requested close');
-          // TODO: Implement widget close
-        },
-
-        requestDisplayMode: async ({ mode }: { mode: 'inline' | 'pip' | 'fullscreen' }) => {
-          console.log('🖼️ Widget requested display mode:', mode);
-          // TODO: Implement display mode change
-          return { mode: 'inline' as const };
-        },
-      };
-
-      // Prepare serializable data (no functions)
-      const openaiData = {
-        // Data
-        toolInput: {},
-        toolOutput: data,
-        toolResponseMetadata: null,
-        widgetState: null,
-
-        // Visuals
-        theme: getSystemTheme(),
-        locale: navigator.language || 'en-US',
-        userAgent: getUserAgent(),
-
-        // Layout
-        maxHeight: 450,
-        displayMode: 'inline' as const,
-        safeArea: {
-          insets: { top: 0, bottom: 0, left: 0, right: 0 },
-        },
-      };
-
-      // Send openai data to iframe via postMessage (cross-origin safe)
-      const sendData = () => {
-        try {
-          iframe.contentWindow?.postMessage({
-            type: 'NITRO_INJECT_OPENAI',
-            data: openaiData
-          }, '*');
-          console.log('✅ window.openai data sent to widget via postMessage');
-        } catch (e) {
-          console.error('❌ Failed to send window.openai:', e);
+      try {
+        // Handle widget error messages
+        if (event.data?.type === 'NITRO_WIDGET_ERROR') {
+          console.error('❌ Widget reported error:', event.data.error);
+          setHasError(true);
+          return;
         }
-      };
 
-      // Send immediately
-      sendData();
+        // Handle resize messages from widget
+        if (event.data?.type === 'NITRO_WIDGET_RESIZE') {
+          const { height } = event.data;
+          handleResize(height);
+        }
 
-      // Retry after delays to ensure widget React app has mounted
-      setTimeout(sendData, 100);
-      setTimeout(sendData, 300);
-      setTimeout(sendData, 500);
+        // Handle widget ready message
+        if (event.data?.type === 'NITRO_WIDGET_READY') {
+          setIsLoaded(true);
+        }
 
-      // Set up message listener for widget RPC calls
-      const handleWidgetMessage = (event: MessageEvent) => {
+        // Handle RPC calls
         if (event.data?.type === 'NITRO_WIDGET_RPC') {
           const { method, args, id } = event.data;
 
           switch (method) {
             case 'setWidgetState':
-              console.log('📦 Widget state updated:', args[0]);
-              openaiData.widgetState = args[0];
-              // Send response
               iframe.contentWindow?.postMessage({
                 type: 'NITRO_WIDGET_RPC_RESPONSE',
                 id,
@@ -167,8 +80,6 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
               break;
 
             case 'callTool':
-              console.log('🔧 Widget calling tool:', args[0], args[1]);
-              // Dispatch event for chat page to handle
               window.dispatchEvent(new CustomEvent('widget-tool-call', {
                 detail: { toolName: args[0], toolArgs: args[1] }
               }));
@@ -189,9 +100,7 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
               break;
 
             case 'requestDisplayMode':
-              console.log('🖼️ Widget requested display mode:', args[0].mode);
               if (args[0].mode === 'fullscreen') {
-                // Dispatch custom event for chat page to handle
                 window.dispatchEvent(new CustomEvent('widget-fullscreen-request', {
                   detail: { uri, data }
                 }));
@@ -204,131 +113,176 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
               break;
           }
         }
+      } catch (e) {
+        console.error('❌ Error handling widget message:', e);
+      }
+    };
 
-        // Handle resize messages from widget
-        if (event.data?.type === 'NITRO_WIDGET_RESIZE') {
-          const { height } = event.data;
-          console.log('📏 Received widget resize:', height);
-          if (height && typeof height === 'number') {
-            const isExpanded = className?.includes('widget-expanded');
-            const max = isExpanded ? 800 : 400;
-            const newHeight = Math.min(height, max);
-            console.log('📏 Setting content height to:', newHeight);
-            setContentHeight(newHeight); // Cap at max height
-          }
-        }
-      };
+    messageHandlerRef.current = handleMessage;
+    window.addEventListener('message', handleMessage);
+
+    // Function to send data to iframe
+    const sendDataToIframe = () => {
+      if (!mountedRef.current || !iframe.contentWindow) return;
+
+      try {
+        const getSystemTheme = (): 'light' | 'dark' => {
+          if (typeof window === 'undefined') return 'light';
+          return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        };
+
+        const getUserAgent = () => ({
+          device: {
+            type: (window.matchMedia('(max-width: 768px)').matches
+              ? 'mobile'
+              : window.matchMedia('(max-width: 1024px)').matches
+                ? 'tablet'
+                : 'desktop') as 'mobile' | 'tablet' | 'desktop',
+          },
+          capabilities: {
+            hover: window.matchMedia('(hover: hover)').matches,
+            touch: window.matchMedia('(pointer: coarse)').matches,
+          },
+        });
+
+        const openaiData = {
+          toolInput: {},
+          toolOutput: data,
+          toolResponseMetadata: null,
+          widgetState: null,
+          theme: getSystemTheme(),
+          locale: navigator.language || 'en-US',
+          userAgent: getUserAgent(),
+          maxHeight: undefined, // No height limit - widget determines its own height
+          displayMode: 'inline' as const,
+          safeArea: {
+            insets: { top: 0, bottom: 0, left: 0, right: 0 },
+          },
+        };
+
+        iframe.contentWindow.postMessage({
+          type: 'NITRO_INJECT_OPENAI',
+          data: openaiData
+        }, '*');
+
+        // Also send legacy format
+        iframe.contentWindow.postMessage({
+          type: 'toolOutput',
+          data,
+        }, '*');
+      } catch (e) {
+        console.error('❌ Failed to send data to widget:', e);
+      }
+    };
 
-      window.addEventListener('message', handleWidgetMessage);
+    const handleIframeLoad = () => {
+      if (!mountedRef.current) return;
+      setIsLoaded(true);
+
+      // Send data with retries
+      sendDataToIframe();
+      const t1 = setTimeout(sendDataToIframe, 100);
+      const t2 = setTimeout(sendDataToIframe, 300);
+      const t3 = setTimeout(sendDataToIframe, 500);
+      timeoutIds.push(t1, t2, t3);
+    };
+
+    const handleIframeError = () => {
+      if (!mountedRef.current) return;
+      console.error('❌ Widget iframe error:', uri);
+      setHasError(true);
     };
 
+    iframe.onload = handleIframeLoad;
+    iframe.onerror = handleIframeError;
+
     if (isDevMode) {
       // Dev mode: load from widget dev server (port 3001)
       let widgetPath = uri;
 
-      // Handle ui://widget/ URIs
       if (widgetPath.startsWith('ui://widget/')) {
         widgetPath = widgetPath.replace('ui://widget/', '');
         widgetPath = widgetPath.replace(/\.html$/, '');
-      }
-      // Handle /widgets/ prefix (legacy)
-      else if (widgetPath.startsWith('/widgets/')) {
+      } else if (widgetPath.startsWith('/widgets/')) {
         widgetPath = widgetPath.replace('/widgets/', '');
-      }
-      // Handle leading slash
-      else if (widgetPath.startsWith('/')) {
+      } else if (widgetPath.startsWith('/')) {
         widgetPath = widgetPath.substring(1);
       }
 
       const widgetUrl = `http://localhost:3001/${widgetPath}`;
-
-      console.log('Loading widget in dev mode:', { uri, widgetPath, widgetUrl, data });
-
-      // Set up onload handler BEFORE setting src
-      iframeRef.current.onload = () => {
-        console.log('Widget iframe loaded, injecting window.openai...');
-
-        // Inject window.openai runtime
-        if (iframeRef.current) {
-          injectOpenAiRuntime(iframeRef.current);
-        }
-
-        // Also send legacy postMessage for backward compatibility
-        setTimeout(() => {
-          try {
-            iframeRef.current?.contentWindow?.postMessage(
-              {
-                type: 'toolOutput',
-                data,
-              },
-              '*'
-            );
-            console.log('✅ Legacy data posted to widget:', data);
-          } catch (e) {
-            console.error('❌ Failed to post message to widget:', e);
-          }
-        }, 300);
-      };
-
-      // Set src AFTER onload handler is set
-      iframeRef.current.src = widgetUrl;
+      console.log('Loading widget in dev mode:', { uri, widgetPath, widgetUrl });
+      iframe.src = widgetUrl;
     } else {
       // Production mode: fetch and render
       const loadProductionWidget = async () => {
+        if (!mountedRef.current) return;
+
         try {
-          // Convert widget route/path to resource URI format if needed
           let resourceUri = uri;
           if (!uri.startsWith('widget://') && !uri.startsWith('http://') && !uri.startsWith('https://')) {
             const widgetPath = uri.startsWith('/') ? uri.substring(1) : uri;
             resourceUri = `widget://${widgetPath}`;
           }
 
-          console.log('Loading widget in production mode:', { originalUri: uri, resourceUri, data });
-
           const response = await fetch(`/api/resources/${encodeURIComponent(resourceUri)}`);
+          if (!mountedRef.current) return;
+
           const result = await response.json();
 
           if (result.contents && result.contents.length > 0) {
             const html = result.contents[0].text || '';
             const completeHtml = createWidgetHTML(html, data);
-
-            // Use Blob URL
             const blob = new Blob([completeHtml], { type: 'text/html' });
             const blobUrl = URL.createObjectURL(blob);
 
-            if (iframeRef.current) {
-              iframeRef.current.src = blobUrl;
-              iframeRef.current.onload = () => {
-                // Inject window.openai runtime
-                if (iframeRef.current) {
-                  injectOpenAiRuntime(iframeRef.current);
-                }
-
+            if (mountedRef.current && iframe) {
+              iframe.src = blobUrl;
+              // Revoke URL after load
+              const revokeTimeout = setTimeout(() => {
                 URL.revokeObjectURL(blobUrl);
-              };
+              }, 5000);
+              timeoutIds.push(revokeTimeout);
             }
-            console.log('✅ Widget loaded successfully:', { resourceUri, hasHtml: !!html, hasData: !!data });
           } else {
             console.warn('⚠️ Widget resource found but no content:', { resourceUri, result });
+            if (mountedRef.current) setHasError(true);
           }
         } catch (error) {
-          console.error('❌ Failed to load widget:', {
-            originalUri: uri,
-            error: error instanceof Error ? error.message : String(error),
-            stack: error instanceof Error ? error.stack : undefined
-          });
+          console.error('❌ Failed to load widget:', error);
+          if (mountedRef.current) setHasError(true);
         }
       };
 
       loadProductionWidget();
     }
-  }, [uri, data, isDevMode]);
 
-  const isInChat = className?.includes('widget-in-chat');
-  const isExpanded = className?.includes('widget-expanded');
-  const maxHeight = isExpanded ? 800 : 400;
+    // Cleanup function
+    return () => {
+      mountedRef.current = false;
+      
+      // Clear all timeouts
+      timeoutIds.forEach(id => clearTimeout(id));
+      
+      // Remove message listener
+      if (messageHandlerRef.current) {
+        window.removeEventListener('message', messageHandlerRef.current);
+        messageHandlerRef.current = null;
+      }
+
+      // Clear iframe handlers
+      if (iframe) {
+        iframe.onload = null;
+        iframe.onerror = null;
+      }
+    };
+  }, [uri, data, isDevMode, handleResize]);
+
+  // If there's an error, don't render the widget at all
+  if (hasError) {
+    return null;
+  }
 
-  const finalHeight = isInChat ? `${contentHeight}px` : '100%';
+  const effectiveHeight = Math.max(contentHeight, MIN_HEIGHT);
 
   return (
     <iframe
@@ -337,8 +291,8 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
       sandbox="allow-scripts allow-same-origin"
       style={{
         width: '100%',
-        height: finalHeight,
-        maxHeight: isInChat ? `${maxHeight}px` : '100%',
+        height: `${effectiveHeight}px`,
+        minHeight: `${MIN_HEIGHT}px`,
         border: 'none',
         background: 'transparent',
         overflow: 'hidden',
@@ -348,4 +302,3 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
     />
   );
 }
-