nitrostack 1.0.25 → 1.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitrostack",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "description": "NitroStack - Build powerful MCP servers with TypeScript",
   "type": "module",
   "main": "dist/core/index.js",

package/src/studio/app/page.tsx

@@ -305,13 +305,21 @@ export default function ToolsPage() {
                   </div>
                   
                   {/* Widget UI Rendering */}
-                  {(selectedTool.widget || selectedTool.outputTemplate) && toolResult && (
-                    <div>
-                      <h3 className="font-semibold text-foreground mb-3">UI Widget:</h3>
-                      <div className="border border-border rounded-lg overflow-hidden h-64 bg-background shadow-inner">
-                        <WidgetRenderer
-                          uri={selectedTool.widget?.route || selectedTool.outputTemplate}
-                          data={(() => {
+                  {(() => {
+                    // Get widget URI from multiple sources (same as ToolCard)
+                    const widgetUri = 
+                      selectedTool.widget?.route || 
+                      selectedTool.outputTemplate || 
+                      selectedTool._meta?.['ui/template'] || 
+                      selectedTool._meta?.['openai/outputTemplate'];
+                    
+                    return widgetUri && toolResult ? (
+                      <div>
+                        <h3 className="font-semibold text-foreground mb-3">UI Widget:</h3>
+                        <div className="border border-border rounded-lg overflow-hidden h-64 bg-background shadow-inner">
+                          <WidgetRenderer
+                            uri={widgetUri}
+                            data={(() => {
                             // Try to parse JSON from content[0].text, otherwise use raw result
                             if (toolResult.content?.[0]?.text) {
                               try {
@@ -327,11 +335,12 @@ export default function ToolsPage() {
                             }
                             return toolResult;
                           })()}
-                          className="w-full h-full"
-                        />
+                            className="w-full h-full"
+                          />
+                        </div>
                       </div>
-                    </div>
-                  )}
+                    ) : null;
+                  })()}
                 </div>
               )}
             </div>

package/src/studio/components/EnlargeModal.tsx

@@ -21,6 +21,16 @@ export function EnlargeModal() {
 
   // Get data from item's examples or responseData
   const widgetData = item.examples?.response || item.responseData || {};
+  
+  // Debug logging
+  console.log('EnlargeModal - Widget info:', {
+    type,
+    itemName: item.name,
+    componentUri,
+    hasWidgetData: !!widgetData && Object.keys(widgetData).length > 0,
+    widgetDataType: widgetData ? typeof widgetData : 'none',
+    itemMeta: item._meta,
+  });
 
   const handleUseInChat = () => {
     if (type !== 'tool') return;

package/src/studio/components/ToolCard.tsx

@@ -21,10 +21,21 @@ export function ToolCard({ tool, onExecute }: ToolCardProps) {
     tool.outputTemplate || 
     tool._meta?.['ui/template'] || 
     tool._meta?.['openai/outputTemplate'];
-  const hasWidget = !!widgetUri;
+  const hasWidget = !!widgetUri && widgetUri.trim().length > 0;
   
   // Get example data for preview
   const exampleData = tool.examples?.response;
+  
+  // Debug logging for widget detection
+  if (hasWidget) {
+    console.log('ToolCard - Widget detected:', {
+      toolName: tool.name,
+      widgetUri,
+      hasExampleData: !!exampleData,
+      exampleDataType: exampleData ? typeof exampleData : 'none',
+      toolMeta: tool._meta,
+    });
+  }
 
   const handleUseInChat = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -77,8 +88,8 @@ export function ToolCard({ tool, onExecute }: ToolCardProps) {
         {tool.description || 'No description'}
       </p>
 
-      {/* Widget Preview */}
-      {hasWidget && exampleData && (
+      {/* Widget Preview - Show if widget exists AND has example data */}
+      {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" />
@@ -96,7 +107,7 @@ export function ToolCard({ tool, onExecute }: ToolCardProps) {
 
       {/* Action Buttons */}
       <div className="flex flex-wrap items-center gap-2" onClick={(e) => e.stopPropagation()}>
-        {hasWidget && exampleData && (
+        {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"

package/src/studio/components/WidgetRenderer.tsx

@@ -55,7 +55,18 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
       // Production mode: fetch and render
       const loadProductionWidget = async () => {
         try {
-          const response = await fetch(`/api/resources/${encodeURIComponent(uri)}`);
+          // Convert widget route/path to resource URI format if needed
+          // Routes like "/calculator-result" or "calculator-result" should become "widget://calculator-result"
+          let resourceUri = uri;
+          if (!uri.startsWith('widget://') && !uri.startsWith('http://') && !uri.startsWith('https://')) {
+            // Remove leading slash if present
+            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)}`);
           const result = await response.json();
 
           if (result.contents && result.contents.length > 0) {
@@ -72,9 +83,17 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
                 URL.revokeObjectURL(blobUrl);
               };
             }
+            console.log('✅ Widget loaded successfully:', { resourceUri, hasHtml: !!html, hasData: !!data });
+          } else {
+            console.warn('⚠️ Widget resource found but no content:', { resourceUri, result });
           }
         } catch (error) {
-          console.error('Failed to load widget:', error);
+          console.error('❌ Failed to load widget:', { 
+            originalUri: uri, 
+            resourceUri, 
+            error: error instanceof Error ? error.message : String(error),
+            stack: error instanceof Error ? error.stack : undefined
+          });
         }
       };