nitrostack 1.0.71 → 1.0.73

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

@@ -0,0 +1,343 @@
+'use client';
+
+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 { WrenchScrewdriverIcon, ArrowPathIcon, XMarkIcon, PlayIcon, ExclamationCircleIcon } from '@heroicons/react/24/outline';
+
+export default function DetailedToolsPage() {
+    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 [executingTool, setExecutingTool] = useState(false);
+
+    // Get effective token - check both jwtToken and OAuth token
+    const effectiveToken = jwtToken || oauthState?.currentToken;
+
+    // Initialize MCP, load tools and check connection on mount
+    useEffect(() => {
+        const init = async () => {
+            // Connection is handled by Sidebar globally
+            await loadTools();
+        };
+        init();
+    }, []);
+
+    const loadTools = async () => {
+        setLoading('tools', true);
+        try {
+            const data = await api.getTools();
+            setTools(data.tools || []);
+        } catch (error) {
+            console.error('Failed to load tools:', error);
+        } finally {
+            setLoading('tools', false);
+        }
+    };
+
+    const handleExecuteTool = (tool: Tool) => {
+        setSelectedTool(tool);
+        setToolArgs({});
+        setToolResult(null);
+    };
+
+    const handleSubmitTool = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!selectedTool) return;
+
+        setExecutingTool(true);
+        setToolResult(null);
+
+        try {
+            const result = await api.callTool(selectedTool.name, toolArgs, effectiveToken || undefined, apiKey || undefined);
+            setToolResult(result);
+
+            if (result.content) {
+                try {
+                    const content = result.content[0]?.text;
+                    if (content) {
+                        const parsed = JSON.parse(content);
+                        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
+                }
+            }
+        } catch (error) {
+            console.error('Tool execution failed:', error);
+            setToolResult({ error: 'Tool execution failed' });
+        } finally {
+            setExecutingTool(false);
+        }
+    };
+
+    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)' }}>
+                {/* 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">Tools Browser</h1>
+                    </div>
+
+                    <button onClick={loadTools} className="btn btn-primary text-sm px-4 py-2 gap-2">
+                        <ArrowPathIcon className="h-4 w-4" />
+                        Refresh
+                    </button>
+                </div>
+
+                {/* Content - ONLY this scrolls */}
+                <div className="flex-1 overflow-y-auto overflow-x-hidden relative">
+                    <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"
+                            />
+                        </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">
+                                <ExclamationCircleIcon 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>
+                </div>
+            </div>
+
+            {/* Tool Executor Side Drawer */}
+            {selectedTool && (
+                <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()}
+                    >
+                        {/* Header */}
+                        <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>
+                            </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>
+
+                        {/* Scrollable Content */}
+                        <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} className="space-y-6">
+                                {/* Generate form inputs from schema */}
+                                {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) {
+                                                return (
+                                                    <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) => (
+                                                                <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') {
+                                                return (
+                                                    <div key={key}>
+                                                        <label className="flex items-center gap-2 cursor-pointer p-3 bg-muted/30 rounded-lg border border-border hover:bg-muted/50 transition-colors">
+                                                            <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}
+                                                                {isRequired && <span className="text-destructive ml-1">*</span>}
+                                                            </span>
+                                                        </label>
+                                                        {prop.description && (
+                                                            <p className="text-xs text-muted-foreground mt-1 ml-1">{prop.description}</p>
+                                                        )}
+                                                    </div>
+                                                );
+                                            } else {
+                                                return (
+                                                    <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) => {
+                                                                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>
+                                                );
+                                            }
+                                        })}
+                                    </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 for this tool</p>
+                                    </div>
+                                )}
+
+                                <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-8 pt-8 border-t border-border animate-fade-in">
+                                    <div className="space-y-6">
+                                        <div>
+                                            <div className="flex items-center justify-between mb-3">
+                                                <h3 className="font-semibold text-foreground">Result Output</h3>
+                                                <div className="badge badge-success text-xs">Success</div>
+                                            </div>
+                                            <div className="bg-muted/30 rounded-xl border border-border overflow-hidden">
+                                                <pre className="p-4 text-xs font-mono text-foreground overflow-auto max-h-96">
+                                                    {JSON.stringify(toolResult, null, 2)}
+                                                </pre>
+                                            </div>
+                                        </div>
+
+                                        {/* Widget UI Rendering */}
+                                        {(() => {
+                                            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 text-sm uppercase tracking-wider">Preview Component</h3>
+                                                    <div className="border border-border rounded-xl overflow-hidden bg-background shadow-sm transition-all duration-200">
+                                                        <WidgetRenderer
+                                                            uri={widgetUri}
+                                                            data={(() => {
+                                                                if (toolResult.content?.[0]?.text) {
+                                                                    try {
+                                                                        const parsed = JSON.parse(toolResult.content[0].text);
+                                                                        if (parsed.success !== undefined && parsed.data !== undefined) {
+                                                                            return parsed.data;
+                                                                        }
+                                                                        return parsed;
+                                                                    } catch {
+                                                                        return { message: toolResult.content[0].text };
+                                                                    }
+                                                                }
+                                                                return toolResult;
+                                                            })()}
+                                                            className="w-full widget-in-chat widget-expanded"
+                                                        />
+                                                    </div>
+                                                </div>
+                                            ) : null;
+                                        })()}
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}

package/src/studio/components/EnlargeModal.tsx

@@ -2,7 +2,7 @@
 
 import { useStudioStore } from '@/lib/store';
 import { WidgetRenderer } from './WidgetRenderer';
-import { X, MessageSquare } from 'lucide-react';
+import { XMarkIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline';
 import { useRouter } from 'next/navigation';
 
 export function EnlargeModal() {
@@ -12,7 +12,7 @@ export function EnlargeModal() {
   if (!enlargeModal.open || !enlargeModal.item) return null;
 
   const { type, item } = enlargeModal;
-  
+
   // Get widget URI
   const componentUri =
     type === 'tool'
@@ -20,12 +20,12 @@ export function EnlargeModal() {
       : item.uri;
 
   // Get data from item's examples or responseData - check both examples and _meta
-  const widgetData = 
-    item.examples?.response || 
-    item._meta?.['tool/examples']?.response || 
-    item.responseData || 
+  const widgetData =
+    item.examples?.response ||
+    item._meta?.['tool/examples']?.response ||
+    item.responseData ||
     {};
-  
+
   // Debug logging
   console.log('EnlargeModal - Widget info:', {
     type,
@@ -40,96 +40,107 @@ export function EnlargeModal() {
 
   const handleUseInChat = () => {
     if (type !== 'tool') return;
-    
+
     closeEnlargeModal();
-    
+
     // Build the tool execution message
     const toolMessage = `Use the ${item.name} tool`;
-    
+
     // Store both the tool name and the message
     if (typeof window !== 'undefined') {
       window.localStorage.setItem('suggestedTool', item.name);
       window.localStorage.setItem('chatInput', toolMessage);
     }
-    
+
     setCurrentTab('chat');
     router.push('/chat');
   };
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center animate-fade-in"
-      style={{ backgroundColor: 'rgba(0, 0, 0, 0.85)' }}
+      className="fixed inset-0 z-50 flex justify-end bg-background/80 backdrop-blur-sm animate-fade-in"
       onClick={closeEnlargeModal}
     >
       <div
-        className="relative w-[95vw] max-w-7xl h-[90vh] bg-card border border-border rounded-xl sm:rounded-2xl shadow-2xl overflow-hidden animate-scale-in"
+        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()}
       >
         {/* Header */}
-        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-4 sm:p-6 border-b border-border bg-muted/30 gap-3 sm:gap-0">
-          <div className="flex items-start sm:items-center gap-3 sm:gap-4 flex-1 min-w-0">
-            <span className="text-2xl sm:text-3xl flex-shrink-0">{type === 'tool' ? '⚡' : '🎨'}</span>
-            <div className="min-w-0 flex-1">
-              <h2 className="text-lg sm:text-xl font-bold text-foreground truncate">{item.name}</h2>
-              <p className="text-xs sm:text-sm text-muted-foreground mt-1 line-clamp-2">
-                {item.description || 'No description available'}
+        <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">
+              <span className="text-xl">{type === 'tool' ? '⚡' : '🎨'}</span>
+            </div>
+            <div>
+              <h2 className="text-lg font-semibold text-foreground truncate max-w-[300px]">{item.name}</h2>
+              <p className="text-xs text-muted-foreground">
+                {type === 'tool' ? 'Tool Details' : 'Component Preview'}
               </p>
             </div>
           </div>
 
-          <div className="flex items-center gap-2 w-full sm:w-auto">
-            {type === 'tool' && (
-              <button
-                onClick={handleUseInChat}
-                className="btn btn-primary flex items-center gap-2 flex-1 sm:flex-none text-sm"
-              >
-                <MessageSquare className="w-4 h-4" />
-                <span className="hidden sm:inline">Use in Chat</span>
-                <span className="sm:hidden">Chat</span>
-              </button>
-            )}
-            <button
-              onClick={closeEnlargeModal}
-              className="btn btn-ghost w-10 h-10 p-0 flex items-center justify-center flex-shrink-0"
-              aria-label="Close"
-            >
-              <X className="w-5 h-5" />
-            </button>
-          </div>
+          <button
+            onClick={closeEnlargeModal}
+            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>
 
-        {/* Widget Content */}
-        <div className="h-[calc(100%-120px)] sm:h-[calc(100%-100px)] p-3 sm: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" />
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto bg-muted/5 p-6">
+          <div className="space-y-6">
+            {/* Description */}
+            <div className="bg-card p-4 rounded-xl border border-border">
+              <p className="text-sm text-foreground leading-relaxed">
+                {item.description || 'No description available'}
+              </p>
             </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'}
+
+            {/* Preview/Widget */}
+            {componentUri && widgetData ? (
+              <div className="space-y-2">
+                <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Preview</h3>
+                <div className="w-full rounded-xl overflow-hidden border border-border bg-background shadow-sm transition-all duration-200">
+                  <WidgetRenderer uri={componentUri} data={widgetData} className="w-full widget-in-chat widget-expanded" />
+                </div>
+              </div>
+            ) : (
+              <div className="bg-muted/20 p-8 rounded-xl border border-border border-dashed text-center">
+                <p className="text-sm text-muted-foreground mb-1">
+                  {!componentUri ? 'No visual widget available' : 'No preview data'}
                 </p>
-                <p className="text-xs text-muted-foreground">
-                  {type === 'tool' ? 'This tool does not have a UI widget attached' : 'No preview data found'}
+                <p className="text-xs text-muted-foreground/70">
+                  {type === 'tool' ? 'This tool operates without a UI component' : 'Preview data is missing'}
                 </p>
               </div>
-            </div>
-          )}
+            )}
+
+            {/* Input Schema */}
+            {type === 'tool' && item.inputSchema && (
+              <div className="space-y-2">
+                <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Input Schema</h3>
+                <div className="bg-muted/30 rounded-xl border border-border overflow-hidden">
+                  <pre className="p-4 text-xs font-mono text-foreground overflow-x-auto bg-transparent">
+                    {JSON.stringify(item.inputSchema, null, 2)}
+                  </pre>
+                </div>
+              </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>
+        {/* Footer Actions */}
+        {type === 'tool' && (
+          <div className="p-4 border-t border-border bg-card">
+            <button
+              onClick={handleUseInChat}
+              className="btn btn-primary w-full flex items-center justify-center gap-2 py-3 text-sm font-medium"
+            >
+              <ChatBubbleLeftIcon className="w-4 h-4" />
+              Use in Chat
+            </button>
           </div>
         )}
       </div>

package/src/studio/components/LogMessage.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { Copy, Check, ChevronDown, ChevronRight } from 'lucide-react';
+import { ClipboardDocumentIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 
 interface LogMessageProps {
   message: string;
@@ -22,7 +22,7 @@ export function LogMessage({ message }: LogMessageProps) {
   };
 
   // Try to parse and format JSON
-  const tryParseJSON = (text: string): { isJSON: boolean; formatted?: string; parsed?: any } => {
+  const tryParseJSON = (text: string): { isJSON: boolean; formatted?: string; parsed?: unknown } => {
     try {
       const trimmed = text.trim();
       if (!trimmed.startsWith('{') && !trimmed.startsWith('[')) {
@@ -81,9 +81,9 @@ export function LogMessage({ message }: LogMessageProps) {
           className="text-slate-400 hover:text-slate-200 transition-colors"
         >
           {isExpanded ? (
-            <ChevronDown className="w-4 h-4" />
+            <ChevronDownIcon className="w-4 h-4" />
           ) : (
-            <ChevronRight className="w-4 h-4" />
+            <ChevronRightIcon className="w-4 h-4" />
           )}
         </button>
         <span className="text-slate-500 text-xs font-semibold">JSON Response</span>
@@ -93,9 +93,9 @@ export function LogMessage({ message }: LogMessageProps) {
           title={copied ? 'Copied!' : 'Copy JSON'}
         >
           {copied ? (
-            <Check className="w-3.5 h-3.5 text-green-400" />
+            <CheckIcon className="w-3.5 h-3.5 text-green-400" />
           ) : (
-            <Copy className="w-3.5 h-3.5" />
+            <ClipboardDocumentIcon className="w-3.5 h-3.5" />
           )}
         </button>
       </div>