nitrostack 1.0.71 → 1.0.73

package/src/studio/app/page.tsx

@@ -3,53 +3,68 @@
 import { useEffect, useState } from 'react';
 import { useStudioStore } from '@/lib/store';
 import { api } from '@/lib/api';
-import { ToolCard } from '@/components/ToolCard';
-import { WidgetRenderer } from '@/components/WidgetRenderer';
 import type { Tool } from '@/lib/types';
-import { Wrench, RefreshCw, X, Play, AlertCircle } from 'lucide-react';
+import dynamic from 'next/dynamic';
+import { ArrowPathIcon, WrenchScrewdriverIcon, XMarkIcon, PlayIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+import { WidgetRenderer } from '@/components/WidgetRenderer';
+
+
+// Dynamic import for ToolsCanvas
+const ToolsCanvas = dynamic(() => import('@/components/tools/ToolsCanvas').then(mod => mod.default), {
+  ssr: false,
+  loading: () => <div className="w-full h-[600px] bg-muted/10 animate-pulse rounded-xl" />
+});
+
+export default function AppPage() {
+  const {
+    tools, setTools,
+    resources, setResources,
+    prompts, setPrompts,
+    loading, setLoading,
+    connection, setConnection,
+    jwtToken, apiKey, oauthState
+  } = useStudioStore();
 
-export default function ToolsPage() {
-  const { tools, setTools, loading, setLoading, connection, setConnection, jwtToken, apiKey, oauthState } = useStudioStore();
-  const [searchQuery, setSearchQuery] = useState('');
   const [selectedTool, setSelectedTool] = useState<Tool | null>(null);
-  const [toolArgs, setToolArgs] = useState<Record<string, any>>({});
-  const [toolResult, setToolResult] = useState<any>(null);
+  const [toolArgs, setToolArgs] = useState<Record<string, unknown>>({});
+  const [toolResult, setToolResult] = useState<unknown>(null);
   const [executingTool, setExecutingTool] = useState(false);
-  
-  // Get effective token - check both jwtToken and OAuth token
+
+
+
+  // Get effective token
   const effectiveToken = jwtToken || oauthState?.currentToken;
 
-  // Initialize MCP, load tools and check connection on mount
   useEffect(() => {
     const init = async () => {
-      await api.initialize();
-      await loadTools();
-      await checkConnection();
+      if (tools.length === 0 || resources.length === 0 || prompts.length === 0) {
+        await loadData();
+      }
     };
     init();
   }, []);
 
-  const checkConnection = async () => {
-    try {
-      const health = await api.checkConnection();
-      setConnection({
-        connected: health.connected,
-        status: health.connected ? 'connected' : 'disconnected',
-      });
-    } catch (error) {
-      setConnection({ connected: false, status: 'disconnected' });
-    }
-  };
-
-  const loadTools = async () => {
+  const loadData = async () => {
     setLoading('tools', true);
+    setLoading('resources', true);
+    setLoading('prompts', true);
+
     try {
-      const data = await api.getTools();
-      setTools(data.tools || []);
+      const [toolsData, resourcesData, promptsData] = await Promise.all([
+        api.getTools().catch(() => ({ tools: [] })),
+        api.getResources().catch(() => ({ resources: [] })),
+        api.getPrompts().catch(() => ({ prompts: [] }))
+      ]);
+
+      setTools(toolsData.tools || []);
+      setResources(resourcesData.resources || []);
+      setPrompts(promptsData.prompts || []);
     } catch (error) {
-      console.error('Failed to load tools:', error);
+      console.error('Failed to load data:', error);
     } finally {
       setLoading('tools', false);
+      setLoading('resources', false);
+      setLoading('prompts', false);
     }
   };
 
@@ -59,6 +74,15 @@ export default function ToolsPage() {
     setToolResult(null);
   };
 
+  const handleResourceClick = (resource: { name: string; uri: string }) => {
+    // For now just console log, or we could open a details modal
+    console.log('Resource clicked:', resource);
+  };
+
+  const handlePromptClick = (prompt: { name: string }) => {
+    console.log('Prompt clicked:', prompt);
+  };
+
   const handleSubmitTool = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!selectedTool) return;
@@ -67,26 +91,21 @@ export default function ToolsPage() {
     setToolResult(null);
 
     try {
-      // Pass JWT token and API key if available (check both jwtToken and OAuth token)
       const result = await api.callTool(selectedTool.name, toolArgs, effectiveToken || undefined, apiKey || undefined);
       setToolResult(result);
 
-      // Extract JWT token from ANY tool response (not just 'login')
-      // Check if result contains a token field at any level
       if (result.content) {
         try {
           const content = result.content[0]?.text;
           if (content) {
             const parsed = JSON.parse(content);
-            // Check for token in multiple possible locations
             const token = parsed.token || parsed.access_token || parsed.jwt || parsed.data?.token;
             if (token) {
-              console.log('🔐 Token received from tool, saving to global state');
               useStudioStore.getState().setJwtToken(token);
             }
           }
         } catch (e) {
-          // Ignore parsing errors
+          // Ignore
         }
       }
     } catch (error) {
@@ -97,247 +116,131 @@ export default function ToolsPage() {
     }
   };
 
-  const filteredTools = tools.filter((tool) =>
-    tool.name.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+
 
   return (
     <>
       <div className="fixed inset-0 flex flex-col bg-background" style={{ left: 'var(--sidebar-width, 15rem)' }}>
-        {/* Sticky Header */}
-        <div className="sticky top-0 z-10 border-b border-border/50 px-6 py-3 flex items-center justify-between bg-card/80 backdrop-blur-md shadow-sm">
+        {/* Minimal Professional Header */}
+        <div className="sticky top-0 z-10 border-b border-border/50 px-6 py-4 flex items-center justify-between bg-card/50 backdrop-blur-sm">
+          <div className="flex items-center gap-6">
+            <h1 className="text-lg font-semibold text-foreground">App Canvas</h1>
+          </div>
+
           <div className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-amber-500 flex items-center justify-center shadow-md">
-              <Wrench className="w-5 h-5 text-white" strokeWidth={2.5} />
-            </div>
-            <div>
-              <h1 className="text-lg font-bold text-foreground">Tools</h1>
-            </div>
+            {/* Run App Button Removed */}
+
+            <button onClick={loadData} className="btn btn-ghost text-muted-foreground hover:text-foreground text-sm px-3 py-2 gap-2">
+              <ArrowPathIcon className="h-4 w-4" />
+            </button>
           </div>
-          <button onClick={loadTools} className="btn btn-primary text-sm px-4 py-2 gap-2">
-            <RefreshCw className="w-4 h-4" />
-            Refresh
-          </button>
         </div>
 
-        {/* Content - ONLY this scrolls */}
-        <div className="flex-1 overflow-y-auto overflow-x-hidden">
-          <div className="max-w-7xl mx-auto px-6 py-6">
-            {/* Search */}
-            <div className="mb-6">
-              <input
-                type="text"
-                placeholder="Search tools..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="input w-full"
-              />
+        {/* Content - Canvas View */}
+        <div className="flex-1 relative overflow-hidden bg-[#09090b]">
+          {loading.tools || loading.resources || loading.prompts ? (
+            <div className="w-full h-full flex items-center justify-center">
+              <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin"></div>
             </div>
-
-            {/* Tools Grid */}
-            {loading.tools ? (
-              <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>
-            ) : filteredTools.length === 0 ? (
-              <div className="empty-state">
-                <AlertCircle className="empty-state-icon" />
-                <p className="empty-state-title">
-                  {searchQuery ? 'No tools found matching your search' : 'No tools available'}
-                </p>
-                <p className="empty-state-description">
-                  {searchQuery ? 'Try a different search term' : 'No MCP tools have been registered'}
-                </p>
-              </div>
-            ) : (
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                {filteredTools.map((tool) => (
-                  <ToolCard key={tool.name} tool={tool} onExecute={handleExecuteTool} />
-                ))}
-              </div>
-            )}
-          </div>
+          ) : (
+            <ToolsCanvas
+              tools={tools}
+              resources={resources}
+              prompts={prompts}
+              onToolClick={handleExecuteTool}
+              onResourceClick={handleResourceClick}
+              onPromptClick={handlePromptClick}
+            />
+          )}
         </div>
       </div>
 
-      {/* Tool Executor Modal */}
+      {/* Run App Modal - Removed */}
+
+      {/* Tool Executor Side Drawer - Reused for consistency */}
       {selectedTool && (
-          <div
-            className="fixed inset-0 z-50 flex items-center justify-center animate-fade-in"
-            style={{ backgroundColor: 'rgba(0, 0, 0, 0.85)' }}
-            onClick={() => setSelectedTool(null)}
-          >
-            <div
-              className="w-[700px] max-h-[90vh] overflow-auto rounded-2xl border border-border p-6 bg-card shadow-2xl animate-scale-in"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <div className="flex items-center justify-between mb-4">
-                <div className="flex items-center gap-3">
-                  <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
-                    <Wrench className="w-5 h-5 text-primary" />
-                  </div>
-                  <h2 className="text-xl font-bold text-foreground">{selectedTool.name}</h2>
+        <div className="fixed inset-0 z-50 flex justify-end bg-background/80 backdrop-blur-sm animate-fade-in" onClick={() => setSelectedTool(null)}>
+          <div className="relative w-full max-w-2xl h-full bg-card border-l border-border shadow-2xl overflow-hidden animate-slide-in-right flex flex-col" onClick={(e) => e.stopPropagation()}>
+            <div className="flex items-center justify-between px-6 py-4 border-b border-border bg-card">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                  <WrenchScrewdriverIcon className="w-5 h-5 text-primary" />
+                </div>
+                <div>
+                  <h2 className="text-lg font-bold text-foreground">{selectedTool.name}</h2>
+                  <p className="text-xs text-muted-foreground">Tool Executor</p>
                 </div>
-                <button
-                  onClick={() => setSelectedTool(null)}
-                  className="btn btn-ghost w-10 h-10 p-0"
-                >
-                  <X className="w-5 h-5" />
-                </button>
               </div>
+              <button onClick={() => setSelectedTool(null)} className="btn btn-ghost w-8 h-8 p-0 flex items-center justify-center rounded-full hover:bg-muted" aria-label="Close">
+                <XMarkIcon className="w-5 h-5" />
+              </button>
+            </div>
 
-              <p className="text-sm text-muted-foreground mb-6">
-                {selectedTool.description || 'No description'}
-              </p>
+            <div className="flex-1 overflow-y-auto bg-muted/5 p-6">
+              <div className="bg-card p-4 rounded-xl border border-border mb-6">
+                <p className="text-sm text-foreground leading-relaxed">{selectedTool.description || 'No description available'}</p>
+              </div>
 
-              <form onSubmit={handleSubmitTool}>
-                {/* Generate form inputs from schema */}
+              <form onSubmit={handleSubmitTool} className="space-y-6">
                 {selectedTool.inputSchema?.properties && typeof selectedTool.inputSchema.properties === 'object' && Object.keys(selectedTool.inputSchema.properties).length > 0 ? (
-                  <>
+                  <div className="space-y-4">
                     {Object.entries(selectedTool.inputSchema.properties).map(([key, prop]: [string, any]) => {
                       const isRequired = selectedTool.inputSchema?.required?.includes(key);
-                      
-                      // Handle different input types
                       if (prop.enum) {
-                        // Enum/Select field
                         return (
-                          <div key={key} className="mb-4">
-                            <label className="block text-sm font-medium text-foreground mb-2">
-                              {prop.title || key}
-                              {isRequired && <span className="text-destructive ml-1">*</span>}
-                            </label>
-                            <select
-                              className="input"
-                              value={toolArgs[key] || prop.default || ''}
-                              onChange={(e) => setToolArgs({ ...toolArgs, [key]: e.target.value })}
-                              required={isRequired}
-                            >
+                          <div key={key}>
+                            <label className="block text-sm font-medium text-foreground mb-2">{prop.title || key}{isRequired && <span className="text-destructive ml-1">*</span>}</label>
+                            <select className="input w-full" value={toolArgs[key] || prop.default || ''} onChange={(e) => setToolArgs({ ...toolArgs, [key]: e.target.value })} required={isRequired}>
                               <option value="">Select...</option>
-                              {prop.enum.map((val: any) => (
-                                <option key={val} value={val}>
-                                  {val}
-                                </option>
-                              ))}
+                              {prop.enum.map((val) => <option key={String(val)} value={String(val)}>{String(val)}</option>)}
                             </select>
-                            {prop.description && (
-                              <p className="text-xs text-muted-foreground mt-1">{prop.description}</p>
-                            )}
                           </div>
                         );
                       } else if (prop.type === 'boolean') {
-                        // Checkbox field
                         return (
-                          <div key={key} className="mb-4">
-                            <label className="flex items-center gap-2 cursor-pointer">
-                              <input
-                                type="checkbox"
-                                className="w-4 h-4"
-                                checked={toolArgs[key] || false}
-                                onChange={(e) => setToolArgs({ ...toolArgs, [key]: e.target.checked })}
-                              />
-                              <span className="text-sm font-medium text-foreground">
-                                {prop.title || key}
-                                {isRequired && <span className="text-destructive ml-1">*</span>}
-                              </span>
+                          <div key={key}>
+                            <label className="flex items-center gap-2 cursor-pointer p-3 bg-muted/30 rounded-lg border border-border">
+                              <input type="checkbox" className="checkbox checkbox-primary w-4 h-4" checked={toolArgs[key] || false} onChange={(e) => setToolArgs({ ...toolArgs, [key]: e.target.checked })} />
+                              <span className="text-sm font-medium text-foreground">{prop.title || key}</span>
                             </label>
-                            {prop.description && (
-                              <p className="text-xs text-muted-foreground mt-1 ml-6">{prop.description}</p>
-                            )}
                           </div>
                         );
                       } else {
-                        // Text/Number field
                         return (
-                          <div key={key} className="mb-4">
-                            <label className="block text-sm font-medium text-foreground mb-2">
-                              {prop.title || key}
-                              {isRequired && <span className="text-destructive ml-1">*</span>}
-                            </label>
-                            <input
-                              type={prop.type === 'number' || prop.type === 'integer' ? 'number' : 'text'}
-                              className="input"
-                              value={toolArgs[key] || prop.default || ''}
-                              onChange={(e) => {
-                                const value = prop.type === 'number' || prop.type === 'integer' 
-                                  ? (e.target.value ? Number(e.target.value) : '') 
-                                  : e.target.value;
-                                setToolArgs({ ...toolArgs, [key]: value });
-                              }}
-                              required={isRequired}
-                              placeholder={prop.description}
-                              min={prop.minimum}
-                              max={prop.maximum}
-                            />
-                            {prop.description && (
-                              <p className="text-xs text-muted-foreground mt-1">{prop.description}</p>
-                            )}
+                          <div key={key}>
+                            <label className="block text-sm font-medium text-foreground mb-2">{prop.title || key}{isRequired && <span className="text-destructive ml-1">*</span>}</label>
+                            <input type={prop.type === 'number' || prop.type === 'integer' ? 'number' : 'text'} className="input w-full" value={toolArgs[key] || prop.default || ''} onChange={(e) => setToolArgs({ ...toolArgs, [key]: prop.type === 'number' || prop.type === 'integer' ? Number(e.target.value) : e.target.value })} required={isRequired} placeholder={prop.description} />
                           </div>
                         );
                       }
                     })}
-                  </>
-                ) : (
-                  <div className="mb-4 p-4 bg-muted/30 rounded-lg border border-border">
-                    <p className="text-sm text-muted-foreground">No input required</p>
                   </div>
+                ) : (
+                  <div className="p-4 bg-muted/30 rounded-lg border border-border border-dashed text-center"><p className="text-sm text-muted-foreground">No arguments required</p></div>
                 )}
 
-                <button
-                  type="submit"
-                  className="btn btn-primary w-full gap-2"
-                  disabled={executingTool}
-                >
-                  <Play className="w-4 h-4" />
-                  {executingTool ? 'Executing...' : 'Execute Tool'}
-                </button>
+                <div className="sticky bottom-0 -mx-6 -mb-6 p-6 bg-card border-t border-border mt-auto">
+                  <button type="submit" className="btn btn-primary w-full gap-2 py-3" disabled={executingTool}>
+                    <PlayIcon className="w-4 h-4" />{executingTool ? 'Executing...' : 'Execute Tool'}
+                  </button>
+                </div>
               </form>
 
-              {/* Result */}
               {toolResult && (
-                <div className="mt-6 space-y-4">
-                  <div>
-                    <h3 className="font-semibold text-foreground mb-3">Result:</h3>
-                    <pre className="bg-muted/30 p-4 rounded-lg text-sm overflow-auto max-h-64 text-foreground font-mono border border-border">
-                      {JSON.stringify(toolResult, null, 2)}
-                    </pre>
+                <div className="mt-8 pt-8 border-t border-border">
+                  <div className="bg-muted/30 rounded-xl border border-border overflow-hidden mb-6">
+                    <pre className="p-4 text-xs font-mono text-foreground overflow-auto max-h-96">{JSON.stringify(toolResult, null, 2)}</pre>
                   </div>
-                  
-                  {/* Widget UI Rendering */}
                   {(() => {
-                    // Get widget URI from multiple sources (same as ToolCard)
-                    const widgetUri = 
-                      selectedTool.widget?.route || 
-                      selectedTool.outputTemplate || 
-                      selectedTool._meta?.['ui/template'] || 
-                      selectedTool._meta?.['openai/outputTemplate'];
-                    
+                    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 {
-                                const parsed = JSON.parse(toolResult.content[0].text);
-                                // Unwrap if response was wrapped by TransformInterceptor
-                                if (parsed.success !== undefined && parsed.data !== undefined) {
-                                  return parsed.data;
-                                }
-                                return parsed;
-                              } catch {
-                                return { message: toolResult.content[0].text };
-                              }
-                            }
-                            return toolResult;
-                          })()}
-                            className="w-full h-full"
-                          />
-                        </div>
+                      <div className="border border-border rounded-xl overflow-hidden bg-background shadow-sm">
+                        <WidgetRenderer uri={widgetUri} data={(() => {
+                          if (toolResult.content?.[0]?.text) {
+                            try { const parsed = JSON.parse(toolResult.content[0].text); return (parsed.success !== undefined && parsed.data !== undefined) ? parsed.data : parsed; } catch { return { message: toolResult.content[0].text }; }
+                          }
+                          return toolResult;
+                        })()} className="w-full widget-in-chat widget-expanded" />
                       </div>
                     ) : null;
                   })()}
@@ -345,7 +248,8 @@ export default function ToolsPage() {
               )}
             </div>
           </div>
-        )}
+        </div>
+      )}
     </>
   );
 }