nitrostack 1.0.1 → 1.0.2

package/src/studio/app/resources/page.tsx

@@ -0,0 +1,313 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { useStudioStore } from '@/lib/store';
+import { api } from '@/lib/api';
+import { WidgetRenderer } from '@/components/WidgetRenderer';
+import type { Resource } from '@/lib/types';
+import { Package, RefreshCw, Palette, Maximize2, Sparkles, AlertCircle } from 'lucide-react';
+
+interface WidgetExample {
+  name: string;
+  description: string;
+  data: Record<string, any>;
+}
+
+interface WidgetMetadata {
+  uri: string;
+  name: string;
+  description: string;
+  examples: WidgetExample[];
+  tags?: string[];
+}
+
+export default function ResourcesPage() {
+  const { resources, setResources, loading, setLoading, openEnlargeModal } = useStudioStore();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [widgets, setWidgets] = useState<WidgetMetadata[]>([]);
+  const [loadingWidgets, setLoadingWidgets] = useState(false);
+  const [selectedExamples, setSelectedExamples] = useState<Record<string, number>>({});
+
+  useEffect(() => {
+    loadResources();
+    loadWidgets();
+  }, []);
+
+  const loadResources = async () => {
+    setLoading('resources', true);
+    try {
+      const data = await api.getResources();
+      setResources(data.resources || []);
+    } catch (error) {
+      console.error('Failed to load resources:', error);
+    } finally {
+      setLoading('resources', false);
+    }
+  };
+
+  const loadWidgets = async () => {
+    setLoadingWidgets(true);
+    try {
+      console.log('📦 Loading widget examples from API...');
+      const data = await api.getWidgetExamples();
+      console.log('📦 Widget examples response:', data);
+      console.log('📦 Number of widgets loaded:', data.widgets?.length || 0);
+      
+      if (data.widgets && data.widgets.length > 0) {
+        console.log('📦 First widget:', data.widgets[0]);
+      } else {
+        console.warn('⚠️ No widgets returned from API. Check MCP server logs.');
+      }
+      
+      setWidgets(data.widgets || []);
+    } catch (error) {
+      console.error('❌ Failed to load widget examples:', error);
+    } finally {
+      setLoadingWidgets(false);
+    }
+  };
+
+  const isUIWidget = (resource: Resource) => {
+    return resource.mimeType === 'text/html' || 
+           resource.uri.startsWith('widget://') ||
+           resource._meta?.['ui/widget'] === true;
+  };
+
+  const filteredResources = resources.filter(
+    (resource) =>
+      !isUIWidget(resource) &&
+      (resource.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        resource.uri.toLowerCase().includes(searchQuery.toLowerCase()))
+  );
+
+  const filteredWidgets = widgets.filter((widget) =>
+    widget.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    widget.uri.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    widget.description.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleExampleChange = useCallback((widgetUri: string, exampleIndex: number) => {
+    setSelectedExamples(prev => ({ ...prev, [widgetUri]: exampleIndex }));
+  }, []);
+
+  const getSelectedExample = useCallback((widgetUri: string) => {
+    return selectedExamples[widgetUri] || 0;
+  }, [selectedExamples]);
+
+  const handleWidgetEnlarge = useCallback((e: React.MouseEvent, widget: WidgetMetadata) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    const exampleIndex = getSelectedExample(widget.uri);
+    
+    setTimeout(() => {
+      openEnlargeModal('resource', {
+        uri: widget.uri,
+        name: widget.name,
+        description: widget.description,
+        responseData: widget.examples[exampleIndex]?.data
+      });
+    }, 0);
+  }, [selectedExamples, openEnlargeModal, getSelectedExample]);
+
+  return (
+    <div className="min-h-screen bg-background p-8">
+      {/* Header */}
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
+              <Package className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold text-foreground">Resources</h1>
+              <p className="text-muted-foreground mt-1">Browse MCP resources and UI widgets</p>
+            </div>
+          </div>
+          <button onClick={loadResources} className="btn btn-primary gap-2">
+            <RefreshCw className="w-4 h-4" />
+            Refresh
+          </button>
+        </div>
+
+        <input
+          type="text"
+          placeholder="Search resources..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="input"
+        />
+      </div>
+
+      {/* UI Widgets Section */}
+      {(loadingWidgets || widgets.length > 0) && (
+        <div className="mb-12">
+          <h2 className="text-2xl font-bold text-foreground mb-6 flex items-center gap-2">
+            <Palette className="w-6 h-6 text-primary" />
+            UI Widgets {widgets.length > 0 && `(${filteredWidgets.length})`}
+          </h2>
+          
+          {loadingWidgets ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {[1, 2].map((i) => (
+                <div key={i} className="card skeleton h-96"></div>
+              ))}
+            </div>
+          ) : filteredWidgets.length === 0 ? (
+            <div className="card p-8 text-center">
+              <AlertCircle className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
+              <p className="text-muted-foreground">
+                {searchQuery ? 'No widgets match your search' : 'No UI widgets configured'}
+              </p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {filteredWidgets.map((widget) => (
+                <div key={widget.uri} className="card card-hover p-6 animate-fade-in">
+                  <div className="flex items-center gap-3 mb-4">
+                    <div className="w-10 h-10 rounded-lg bg-purple-500/10 flex items-center justify-center">
+                      <Palette className="w-5 h-5 text-purple-500" />
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-foreground">{widget.name}</h3>
+                      <span className="badge badge-success text-xs mt-1">
+                        {widget.examples.length} example{widget.examples.length !== 1 ? 's' : ''}
+                      </span>
+                    </div>
+                  </div>
+
+                  <p className="text-sm text-muted-foreground mb-3 line-clamp-2">
+                    {widget.description}
+                  </p>
+
+                  <p className="text-xs text-muted-foreground mb-4 font-mono truncate bg-muted/30 px-2 py-1 rounded">
+                    {widget.uri}
+                  </p>
+
+                  {widget.tags && widget.tags.length > 0 && (
+                    <div className="flex flex-wrap gap-2 mb-4">
+                      {widget.tags.map((tag) => (
+                        <span key={tag} className="badge badge-secondary text-xs">
+                          #{tag}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* Widget Preview with selected example */}
+                  {widget.examples.length > 0 && (() => {
+                    const selectedIdx = getSelectedExample(widget.uri);
+                    const selectedExample = widget.examples[selectedIdx];
+                    return (
+                      <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" />
+                          {selectedExample.name}
+                        </div>
+                        <div className="h-64">
+                          <WidgetRenderer
+                            uri={widget.uri}
+                            data={selectedExample.data}
+                          />
+                        </div>
+                      </div>
+                    );
+                  })()}
+
+                  {/* Example Selector (if more than 1) */}
+                  {widget.examples.length > 1 && (
+                    <select
+                      className="input text-sm mb-4"
+                      value={getSelectedExample(widget.uri)}
+                      onChange={(e) => handleExampleChange(widget.uri, parseInt(e.target.value))}
+                    >
+                      {widget.examples.map((example, idx) => (
+                        <option key={idx} value={idx}>
+                          {example.name}
+                        </option>
+                      ))}
+                    </select>
+                  )}
+
+                  <button
+                    onClick={(e) => handleWidgetEnlarge(e, widget)}
+                    className="btn btn-secondary w-full gap-2"
+                  >
+                    <Maximize2 className="w-4 h-4" />
+                    Enlarge
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* MCP Resources Section */}
+      <div>
+        <h2 className="text-2xl font-bold text-foreground mb-6 flex items-center gap-2">
+          <Package className="w-6 h-6 text-primary" />
+          MCP Resources {resources.length > 0 && `(${filteredResources.length})`}
+        </h2>
+        
+        {/* Resources Grid */}
+        {loading.resources ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="card skeleton h-64"></div>
+            ))}
+          </div>
+        ) : filteredResources.length === 0 ? (
+          <div className="empty-state">
+            <Package className="empty-state-icon" />
+            <p className="empty-state-title">
+              {searchQuery ? 'No resources found' : 'No resources available'}
+            </p>
+            <p className="empty-state-description">
+              {searchQuery ? 'Try a different search term' : 'No MCP resources have been registered'}
+            </p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {filteredResources.map((resource) => (
+              <div key={resource.uri} className="card card-hover p-6 animate-fade-in">
+                <div className="flex items-start justify-between mb-4">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
+                      <Package className="w-5 h-5 text-blue-500" />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-foreground">{resource.name}</h3>
+                      <span className="badge badge-primary text-xs mt-1">
+                        Resource
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                <p className="text-sm text-muted-foreground mb-4 line-clamp-2">
+                  {resource.description || 'No description'}
+                </p>
+
+                <div className="bg-muted/30 rounded-lg p-3 border border-border">
+                  <p className="text-xs text-muted-foreground mb-1 font-semibold uppercase tracking-wide">URI</p>
+                  <p className="text-xs text-foreground font-mono truncate">
+                    {resource.uri}
+                  </p>
+                </div>
+
+                {resource.mimeType && (
+                  <div className="mt-3">
+                    <span className="badge badge-secondary text-xs">
+                      {resource.mimeType}
+                    </span>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/studio/components/EnlargeModal.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { useStudioStore } from '@/lib/store';
+import { WidgetRenderer } from './WidgetRenderer';
+import { X, MessageSquare } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+
+export function EnlargeModal() {
+  const { enlargeModal, closeEnlargeModal, setCurrentTab } = useStudioStore();
+  const router = useRouter();
+
+  if (!enlargeModal.open || !enlargeModal.item) return null;
+
+  const { type, item } = enlargeModal;
+  
+  // Get widget URI
+  const componentUri =
+    type === 'tool'
+      ? (item.widget?.route || item.outputTemplate || item._meta?.['openai/outputTemplate'] || item._meta?.['ui/template'])
+      : item.uri;
+
+  // Get data from item's examples or responseData
+  const widgetData = item.examples?.response || item.responseData || {};
+
+  const handleUseInChat = () => {
+    if (type !== 'tool') return;
+    
+    closeEnlargeModal();
+    setCurrentTab('chat');
+    router.push('/chat');
+    
+    // Store the tool name so chat can suggest using it
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem('suggestedTool', item.name);
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center animate-fade-in"
+      style={{ backgroundColor: 'rgba(0, 0, 0, 0.85)' }}
+      onClick={closeEnlargeModal}
+    >
+      <div
+        className="relative w-[90vw] h-[90vh] bg-card border border-border rounded-2xl shadow-2xl overflow-hidden animate-scale-in"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-border bg-muted/30">
+          <div className="flex items-center gap-4">
+            <span className="text-3xl">{type === 'tool' ? '⚡' : '🎨'}</span>
+            <div>
+              <h2 className="text-xl font-bold text-foreground">{item.name}</h2>
+              <p className="text-sm text-muted-foreground mt-1">
+                {item.description || 'No description available'}
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            {type === 'tool' && (
+              <button
+                onClick={handleUseInChat}
+                className="btn btn-primary flex items-center gap-2"
+              >
+                <MessageSquare className="w-4 h-4" />
+                Use in Chat
+              </button>
+            )}
+            <button
+              onClick={closeEnlargeModal}
+              className="btn btn-ghost w-10 h-10 p-0 flex items-center justify-center"
+              aria-label="Close"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Widget Content */}
+        <div className="h-[calc(100%-88px)] p-6 overflow-auto bg-background">
+          {componentUri && widgetData ? (
+            <div className="w-full h-full rounded-xl overflow-hidden border border-border shadow-inner">
+              <WidgetRenderer uri={componentUri} data={widgetData} className="w-full h-full" />
+            </div>
+          ) : (
+            <div className="flex items-center justify-center h-full">
+              <div className="text-center">
+                <p className="text-muted-foreground mb-2">
+                  {!componentUri ? 'No widget URI available' : 'No example data available'}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {type === 'tool' ? 'This tool does not have a UI widget attached' : 'No preview data found'}
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Metadata Footer */}
+        {type === 'tool' && item.inputSchema && (
+          <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-border glass">
+            <details className="text-sm">
+              <summary className="cursor-pointer text-muted-foreground hover:text-foreground font-medium">
+                Input Schema
+              </summary>
+              <pre className="mt-2 p-3 bg-muted rounded-lg text-xs text-foreground overflow-auto max-h-40 font-mono">
+                {JSON.stringify(item.inputSchema, null, 2)}
+              </pre>
+            </details>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/studio/components/Sidebar.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useStudioStore } from '@/lib/store';
+import type { TabType } from '@/lib/types';
+import { useRouter, usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { 
+  Wrench, 
+  MessageSquare, 
+  Package, 
+  FileText, 
+  Activity, 
+  Shield, 
+  Wifi,
+  Zap
+} from 'lucide-react';
+
+const navItems: Array<{ id: TabType; label: string; icon: any; path: string }> = [
+  { id: 'tools', label: 'Tools', icon: Wrench, path: '/' },
+  { id: 'chat', label: 'AI Chat', icon: MessageSquare, path: '/chat' },
+  { id: 'resources', label: 'Resources', icon: Package, path: '/resources' },
+  { id: 'prompts', label: 'Prompts', icon: FileText, path: '/prompts' },
+  { id: 'health', label: 'Health', icon: Activity, path: '/health' },
+  { id: 'auth', label: 'OAuth 2.1', icon: Shield, path: '/auth' },
+  { id: 'ping', label: 'Ping', icon: Wifi, path: '/ping' },
+];
+
+export function Sidebar() {
+  const { connection } = useStudioStore();
+  const router = useRouter();
+  const pathname = usePathname();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    // Force dark mode
+    document.documentElement.className = 'dark antialiased';
+  }, []);
+
+  const handleNavigation = (path: string) => {
+    router.push(path);
+  };
+
+  const getConnectionStatus = () => {
+    if (connection.status === 'connected') return 'connected';
+    if (connection.status === 'connecting') return 'connecting';
+    return 'disconnected';
+  };
+
+  if (!mounted) return null;
+
+  return (
+    <nav className="fixed left-0 top-0 h-screen w-64 glass flex flex-col z-50">
+      {/* Header */}
+      <div className="p-6 border-b border-border">
+        <div className="flex items-center gap-3 mb-4">
+          <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-amber-500 flex items-center justify-center shadow-lg">
+            <Zap className="w-6 h-6 text-black" />
+          </div>
+          <div>
+            <h1 className="text-xl font-bold bg-gradient-to-r from-primary to-amber-500 bg-clip-text text-transparent">
+              NitroStack
+            </h1>
+            <p className="text-xs text-muted-foreground font-medium">Studio v3.1</p>
+          </div>
+        </div>
+
+        {/* Connection Status */}
+        <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-muted/50 border border-border/50">
+          <div className="relative flex items-center justify-center">
+            <div 
+              className={`w-2.5 h-2.5 rounded-full ${
+                getConnectionStatus() === 'connected' 
+                  ? 'bg-emerald-500' 
+                  : getConnectionStatus() === 'connecting'
+                  ? 'bg-amber-500'
+                  : 'bg-rose-500'
+              }`}
+              style={{
+                boxShadow: getConnectionStatus() === 'connected'
+                  ? '0 0 12px rgba(34, 197, 94, 0.6)'
+                  : getConnectionStatus() === 'connecting'
+                  ? '0 0 12px rgba(245, 158, 11, 0.6)'
+                  : '0 0 12px rgba(239, 68, 68, 0.6)'
+              }}
+            />
+          </div>
+          <span className="text-xs font-semibold uppercase tracking-wide text-foreground">
+            {connection.status}
+          </span>
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <div className="flex-1 overflow-y-auto py-4 px-2">
+        <div className="space-y-1">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = pathname === item.path;
+            
+            return (
+              <button
+                key={item.id}
+                onClick={() => handleNavigation(item.path)}
+                className={`
+                  w-full flex items-center gap-3 px-4 py-2.5 text-sm font-medium rounded-lg transition-all group
+                  ${isActive 
+                    ? 'bg-primary/10 text-primary shadow-sm ring-1 ring-primary/20' 
+                    : 'text-foreground hover:bg-muted hover:text-primary'
+                  }
+                `}
+              >
+                <Icon className={`w-5 h-5 ${isActive ? 'text-primary' : 'text-muted-foreground group-hover:text-primary'}`} />
+                <span>{item.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="p-4 border-t border-border bg-card/50 backdrop-blur">
+        {/* Version */}
+        <div className="px-4 py-2 text-xs text-muted-foreground">
+          <div className="flex items-center justify-between">
+            <span>MCP Protocol</span>
+            <span className="font-mono font-semibold text-primary">v1.0</span>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}

package/src/studio/components/ToolCard.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+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 } from 'lucide-react';
+
+interface ToolCardProps {
+  tool: Tool;
+  onExecute: (tool: Tool) => void;
+}
+
+export function ToolCard({ tool, onExecute }: ToolCardProps) {
+  const { openEnlargeModal } = useStudioStore();
+  const router = useRouter();
+
+  // Check if tool has widget - check multiple sources
+  const widgetUri = 
+    tool.widget?.route || 
+    tool.outputTemplate || 
+    tool._meta?.['ui/template'] || 
+    tool._meta?.['openai/outputTemplate'];
+  const hasWidget = !!widgetUri;
+  
+  // Get example data for preview
+  const exampleData = tool.examples?.response;
+
+  const handleUseInChat = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    router.push(`/chat?tool=${tool.name}`);
+  };
+
+  const handleEnlarge = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    openEnlargeModal('tool', { ...tool, responseData: exampleData });
+  };
+
+  return (
+    <div
+      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" />
+            )}
+          </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>
+
+      {/* Description */}
+      <p className="text-sm text-muted-foreground mb-4 line-clamp-2">
+        {tool.description || 'No description'}
+      </p>
+
+      {/* Widget Preview */}
+      {hasWidget && 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" />
+            Widget Preview
+          </div>
+          <div className="h-64 relative">
+            <WidgetRenderer
+              uri={widgetUri}
+              data={exampleData}
+              className="w-full h-full"
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Action Buttons */}
+      <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
+        {hasWidget && exampleData && (
+          <button
+            onClick={handleEnlarge}
+            className="btn btn-secondary flex-1 text-sm gap-2"
+          >
+            <Maximize2 className="w-4 h-4" />
+            <span>Enlarge</span>
+          </button>
+        )}
+        <button 
+          onClick={() => onExecute(tool)} 
+          className="btn btn-primary flex-1 text-sm gap-2"
+        >
+          <Play className="w-4 h-4" />
+          <span>Execute</span>
+        </button>
+      </div>
+    </div>
+  );
+}