nitrostack 1.0.65 → 1.0.66

package/src/studio/components/Sidebar.tsx

@@ -0,0 +1,295 @@
+'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 Image from 'next/image';
+import { 
+  Wrench, 
+  MessageSquare, 
+  Package, 
+  FileText, 
+  Activity, 
+  Shield, 
+  Wifi,
+  Zap,
+  Settings,
+  Sparkles,
+  Terminal
+} from 'lucide-react';
+
+const navItems: Array<{ id: TabType | 'settings' | 'logs'; 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: 'logs', label: 'Logs', icon: Terminal, path: '/logs' },
+  { id: 'auth', label: 'OAuth 2.1', icon: Shield, path: '/auth' },
+  { id: 'ping', label: 'Ping', icon: Wifi, path: '/ping' },
+  { id: 'settings', label: 'Settings', icon: Settings, path: '/settings' },
+];
+
+export function Sidebar() {
+  const { connection } = useStudioStore();
+  const router = useRouter();
+  const pathname = usePathname();
+  const [mounted, setMounted] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    // Force dark mode
+    document.documentElement.className = 'dark antialiased';
+    // Load collapse state from localStorage
+    const saved = localStorage.getItem('sidebar_collapsed');
+    if (saved !== null) setIsCollapsed(saved === 'true');
+  }, []);
+
+  const handleNavigation = (path: string) => {
+    router.push(path);
+  };
+
+  const getConnectionStatus = () => {
+    if (connection.status === 'connected') return 'connected';
+    if (connection.status === 'connecting') return 'connecting';
+    return 'disconnected';
+  };
+
+  const toggleSidebar = () => {
+    const newState = !isCollapsed;
+    setIsCollapsed(newState);
+    localStorage.setItem('sidebar_collapsed', String(newState));
+    // Dispatch custom event to update layout
+    window.dispatchEvent(new Event('sidebar-toggle'));
+  };
+
+  if (!mounted) return null;
+
+  return (
+    <nav className={`fixed left-0 top-0 h-screen glass flex flex-col z-50 border-r border-border/50 transition-all duration-300 ease-in-out ${
+      isCollapsed ? 'w-16' : 'w-60 md:w-60'
+    } ${isCollapsed ? '' : 'max-md:w-16'}`}>
+      {/* Compact Professional Header */}
+      <div className="relative p-3 border-b border-border/50 bg-gradient-to-b from-card/80 to-transparent">
+        <div className="flex items-center justify-between mb-2">
+          {/* Minimalist Professional Logo */}
+          <div 
+            className="flex items-center gap-2 group cursor-pointer flex-1"
+            onClick={() => handleNavigation('/')}
+          >
+            <div className="relative flex-shrink-0">
+              <div className="absolute inset-0 rounded-lg bg-gradient-to-br from-primary to-amber-500 blur opacity-30 group-hover:opacity-50 transition-opacity duration-300" />
+              <div className="relative w-9 h-9 rounded-lg bg-gradient-to-br from-slate-900 to-slate-800 border border-primary/30 flex items-center justify-center shadow-lg group-hover:shadow-primary/30 transition-all duration-300 overflow-hidden">
+                {/* NitroCloud Logo */}
+                <Image
+                  src="/nitrocloud.png"
+                  alt="NitroCloud Logo"
+                  width={36}
+                  height={36}
+                  className="relative z-10 object-contain"
+                  unoptimized
+                />
+                {/* Subtle glow effect */}
+                <div className="absolute inset-0 bg-gradient-to-tr from-primary/20 to-amber-500/20 group-hover:opacity-100 opacity-0 transition-opacity duration-300" />
+              </div>
+          </div>
+            
+            {!isCollapsed && (
+              <div className="flex-1 overflow-hidden">
+                <h1 className="text-base font-bold bg-gradient-to-r from-primary to-amber-500 bg-clip-text text-transparent tracking-tight whitespace-nowrap">
+                  NitroStudio
+            </h1>
+                <p className="text-[9px] text-muted-foreground font-medium uppercase tracking-wider">
+                  MCP Suite
+                </p>
+              </div>
+            )}
+          </div>
+          
+          {/* Toggle Button */}
+          <button
+            onClick={toggleSidebar}
+            className="flex-shrink-0 w-7 h-7 rounded-md bg-muted/50 hover:bg-muted border border-border/50 hover:border-primary/30 flex items-center justify-center transition-all duration-300 group/toggle"
+            title={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          >
+            <svg 
+              width="14" 
+              height="14" 
+              viewBox="0 0 24 24" 
+              fill="none" 
+              className={`text-muted-foreground group-hover/toggle:text-primary transition-all duration-300 ${
+                isCollapsed ? 'rotate-180' : ''
+              }`}
+            >
+              <path d="M15 18L9 12L15 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+          </button>
+        </div>
+
+        {/* Compact Status Indicators */}
+        {!isCollapsed ? (
+          <div className="space-y-1.5">
+        {/* Connection Status */}
+            <div className="relative group">
+              <div className="relative flex items-center gap-2 px-2 py-1.5 rounded-md bg-card/60 border border-border/50 backdrop-blur-sm group-hover:border-primary/30 transition-all duration-300">
+                <div className="relative flex items-center justify-center flex-shrink-0">
+                  {getConnectionStatus() === 'connected' && (
+                    <div className="absolute inset-0 rounded-full bg-emerald-500/30 animate-ping" />
+                  )}
+            <div 
+                    className={`relative w-2 h-2 rounded-full transition-all duration-300 ${
+                getConnectionStatus() === 'connected' 
+                  ? 'bg-emerald-500' 
+                  : getConnectionStatus() === 'connecting'
+                        ? 'bg-amber-500 animate-pulse'
+                  : 'bg-rose-500'
+              }`}
+              style={{
+                boxShadow: getConnectionStatus() === 'connected'
+                        ? '0 0 8px rgba(34, 197, 94, 0.6)'
+                  : getConnectionStatus() === 'connecting'
+                        ? '0 0 8px rgba(245, 158, 11, 0.6)'
+                        : '0 0 8px rgba(239, 68, 68, 0.6)'
+              }}
+            />
+          </div>
+                <span className="text-[10px] font-semibold uppercase tracking-wide text-foreground">
+            {connection.status}
+          </span>
+        </div>
+      </div>
+
+            {/* Transport Mode */}
+            <div className="relative group">
+              <div className="relative px-2 py-1.5 rounded-md bg-primary/5 border border-primary/20 backdrop-blur-sm group-hover:border-primary/30 transition-all duration-300">
+                <div className="flex items-center justify-between text-[10px]">
+                  <span className="font-medium text-muted-foreground">Transport:</span>
+                  <span className="font-bold text-primary uppercase">
+                    STDIO
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center gap-1.5">
+            {/* Collapsed: Just the status dot */}
+            <div 
+              className="relative w-7 h-7 rounded-md bg-card/60 border border-border/50 flex items-center justify-center group hover:border-primary/30 transition-all"
+              title={`Status: ${connection.status}`}
+            >
+              {getConnectionStatus() === 'connected' && (
+                <div className="absolute inset-0 rounded-md bg-emerald-500/20 animate-ping" />
+              )}
+              <div 
+                className={`relative w-2 h-2 rounded-full ${
+                  getConnectionStatus() === 'connected' 
+                    ? 'bg-emerald-500' 
+                    : getConnectionStatus() === 'connecting'
+                    ? 'bg-amber-500 animate-pulse'
+                    : 'bg-rose-500'
+                }`}
+                style={{
+                  boxShadow: getConnectionStatus() === 'connected'
+                    ? '0 0 8px rgba(34, 197, 94, 0.8)'
+                    : getConnectionStatus() === 'connecting'
+                    ? '0 0 8px rgba(245, 158, 11, 0.8)'
+                    : '0 0 8px rgba(239, 68, 68, 0.8)'
+                }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Compact Navigation */}
+      <div className="flex-1 overflow-y-auto py-2 px-2 scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
+        <div className={`space-y-0.5 ${isCollapsed ? 'flex flex-col items-center' : ''}`}>
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = pathname === item.path;
+            
+            return (
+              <button
+                key={item.id}
+                onClick={() => handleNavigation(item.path)}
+                title={isCollapsed ? item.label : undefined}
+                className={`
+                  relative flex items-center gap-2 text-sm font-medium rounded-lg transition-all duration-300 group overflow-hidden
+                  ${isCollapsed ? 'w-10 h-10 justify-center' : 'w-full px-3 py-2'}
+                  ${isActive 
+                    ? 'bg-gradient-to-r from-primary/15 to-amber-500/10 text-primary shadow-md ring-1 ring-primary/30' 
+                    : 'text-foreground/70 hover:bg-primary/5 hover:text-primary'
+                  }
+                `}
+              >
+                {/* Active indicator */}
+                {isActive && !isCollapsed && (
+                  <div className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-6 bg-gradient-to-b from-primary to-amber-500 rounded-r-full" />
+                )}
+                
+                {/* Icon */}
+                <div className={`relative flex-shrink-0 ${isActive ? 'scale-105' : 'group-hover:scale-105'} transition-transform duration-300`}>
+                  <Icon 
+                    className={`w-4 h-4 ${
+                      isActive 
+                        ? 'text-primary' 
+                        : 'text-muted-foreground group-hover:text-primary'
+                    }`}
+                    strokeWidth={isActive ? 2.5 : 2}
+                  />
+                </div>
+                
+                {/* Label - only show when expanded */}
+                {!isCollapsed && (
+                  <span className="text-xs whitespace-nowrap overflow-hidden">
+                    {item.label}
+                  </span>
+                )}
+                
+                {/* Subtle shine effect */}
+                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out pointer-events-none" />
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Compact Footer */}
+      <div className="p-2 border-t border-border/50 bg-gradient-to-t from-card/60 to-transparent backdrop-blur-sm">
+        {!isCollapsed ? (
+          <div className="space-y-1.5">
+            {/* Version info */}
+            <div className="px-2 py-1.5 rounded-md bg-muted/30 border border-border/30">
+              <div className="flex items-center justify-between text-[9px]">
+                <span className="font-medium text-muted-foreground uppercase tracking-wide">MCP v1.0</span>
+                <span className="font-bold text-foreground">NitroStack</span>
+              </div>
+            </div>
+            
+            {/* Copyright */}
+            <div className="text-center">
+              <p className="text-[8px] text-muted-foreground/50 font-medium">
+                © 2025 NitroCloud
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center">
+            {/* Collapsed: Minimal version indicator */}
+            <div 
+              className="w-10 h-10 rounded-md bg-muted/30 border border-border/30 flex items-center justify-center group hover:border-primary/30 transition-all"
+              title="MCP v1.0 • NitroStack"
+            >
+              <span className="text-[9px] font-bold text-primary group-hover:scale-110 transition-transform">
+                v1
+              </span>
+          </div>
+        </div>
+        )}
+      </div>
+    </nav>
+  );
+}

package/src/studio/components/ToolCard.tsx

@@ -0,0 +1,139 @@
+'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, MessageSquare } 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 && 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:', {
+      toolName: tool.name,
+      widgetUri,
+      hasExampleData: !!exampleData,
+      exampleDataType: exampleData ? typeof exampleData : 'none',
+      toolExamples: tool.examples,
+      toolMeta: tool._meta,
+      metaExamples: tool._meta?.['tool/examples'],
+    });
+  }
+
+  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');
+  };
+
+  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 - 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" />
+            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 flex-wrap items-center gap-2" onClick={(e) => e.stopPropagation()}>
+        {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"
+          >
+            <Maximize2 className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+            <span className="truncate">Enlarge</span>
+          </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"
+        >
+          <Play className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+          <span className="truncate">Execute</span>
+        </button>
+        <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"
+        >
+          <MessageSquare className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+          <span className="truncate">Chat</span>
+        </button>
+      </div>
+    </div>
+  );
+}