nitrostack 1.0.1 → 1.0.2

package/src/studio/app/page.tsx

@@ -0,0 +1,337 @@
+'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 { Wrench, RefreshCw, X, Play, AlertCircle } from 'lucide-react';
+
+export default function ToolsPage() {
+  const { tools, setTools, loading, setLoading, connection, setConnection, jwtToken, apiKey } = 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);
+
+  // Initialize MCP, load tools and check connection on mount
+  useEffect(() => {
+    const init = async () => {
+      await api.initialize();
+      await loadTools();
+      await checkConnection();
+    };
+    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 () => {
+    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 {
+      // Pass JWT token and API key if available
+      const result = await api.callTool(selectedTool.name, toolArgs, jwtToken || 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
+        }
+      }
+    } 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="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-primary to-amber-500 flex items-center justify-center">
+                <Wrench className="w-6 h-6 text-black" />
+              </div>
+              <div>
+                <h1 className="text-3xl font-bold text-foreground">Tools</h1>
+                <p className="text-muted-foreground mt-1">
+                  Browse and execute MCP tools
+                </p>
+              </div>
+            </div>
+            <button onClick={loadTools} className="btn btn-primary gap-2">
+              <RefreshCw className="w-4 h-4" />
+              Refresh
+            </button>
+          </div>
+
+          {/* Search */}
+          <input
+            type="text"
+            placeholder="Search tools..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="input"
+          />
+        </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>
+        )}
+
+        {/* Tool Executor Modal */}
+        {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>
+                <button
+                  onClick={() => setSelectedTool(null)}
+                  className="btn btn-ghost w-10 h-10 p-0"
+                >
+                  <X className="w-5 h-5" />
+                </button>
+              </div>
+
+              <p className="text-sm text-muted-foreground mb-6">
+                {selectedTool.description || 'No description'}
+              </p>
+
+              <form onSubmit={handleSubmitTool}>
+                {/* Generate form inputs from schema */}
+                {selectedTool.inputSchema?.properties && typeof selectedTool.inputSchema.properties === 'object' && Object.keys(selectedTool.inputSchema.properties).length > 0 ? (
+                  <>
+                    {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}
+                            >
+                              <option value="">Select...</option>
+                              {prop.enum.map((val: any) => (
+                                <option key={val} value={val}>
+                                  {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>
+                            </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>
+                        );
+                      }
+                    })}
+                  </>
+                ) : (
+                  <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>
+                )}
+
+                <button
+                  type="submit"
+                  className="btn btn-primary w-full gap-2"
+                  disabled={executingTool}
+                >
+                  <Play className="w-4 h-4" />
+                  {executingTool ? 'Executing...' : 'Execute Tool'}
+                </button>
+              </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>
+                  
+                  {/* Widget UI Rendering */}
+                  {(selectedTool.widget || selectedTool.outputTemplate) && toolResult && (
+                    <div>
+                      <h3 className="font-semibold text-foreground mb-3">UI Widget:</h3>
+                      <div className="border border-border rounded-lg overflow-hidden h-64 bg-background shadow-inner">
+                        <WidgetRenderer
+                          uri={selectedTool.widget?.route || selectedTool.outputTemplate}
+                          data={(() => {
+                            // 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>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,346 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useStudioStore } from '@/lib/store';
+import { api } from '@/lib/api';
+import { ToolCard } from '@/components/ToolCard';
+import { EnlargeModal } from '@/components/EnlargeModal';
+import { WidgetRenderer } from '@/components/WidgetRenderer';
+import type { Tool } from '@/lib/types';
+
+export default function ToolsPage() {
+  const { tools, setTools, loading, setLoading, connection, setConnection } = 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);
+
+  // Initialize MCP, load tools and check connection on mount
+  useEffect(() => {
+    const init = async () => {
+      await api.initialize();
+      await loadTools();
+      await checkConnection();
+    };
+    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 () => {
+    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);
+      setToolResult(result);
+
+      // Check for JWT token in login response
+      if (selectedTool.name === 'login' && result.content) {
+        try {
+          const content = result.content[0]?.text;
+          if (content) {
+            const parsed = JSON.parse(content);
+            if (parsed.token) {
+              useStudioStore.getState().setJwtToken(parsed.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="min-h-screen bg-dark-bg p-8">
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-center justify-between mb-4">
+            <div>
+              <h1 className="text-3xl font-bold">⚡ Tools</h1>
+              <p className="text-text-secondary mt-1">
+                Browse and execute MCP tools
+              </p>
+            </div>
+            <button onClick={loadTools} className="btn btn-primary">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                />
+              </svg>
+              Refresh
+            </button>
+          </div>
+
+          {/* Search */}
+          <input
+            type="text"
+            placeholder="Search tools..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="input"
+          />
+        </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="text-center py-16">
+            <p className="text-text-secondary text-lg">
+              {searchQuery ? 'No tools found matching your search' : 'No tools available'}
+            </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>
+        )}
+
+        {/* Tool Executor Modal */}
+        {selectedTool && (
+          <div
+            className="fixed inset-0 z-40 flex items-center justify-center"
+            style={{ backgroundColor: 'rgba(0, 0, 0, 0.8)' }}
+            onClick={() => setSelectedTool(null)}
+          >
+            <div
+              className="w-[700px] max-h-[90vh] overflow-auto rounded-2xl border p-6"
+              style={{
+                backgroundColor: '#ffffff',
+                borderColor: '#e5e7eb'
+              }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-xl font-bold">{selectedTool.name}</h2>
+                <button
+                  onClick={() => setSelectedTool(null)}
+                  className="text-text-secondary hover:text-text-primary"
+                >
+                  ✕
+                </button>
+              </div>
+
+              <p className="text-sm text-text-secondary mb-6">
+                {selectedTool.description || 'No description'}
+              </p>
+
+              <form onSubmit={handleSubmitTool}>
+                {/* Debug Info */}
+                <div className="mb-4 p-4 rounded-lg" style={{ backgroundColor: '#fef3c7', border: '1px solid #fbbf24' }}>
+                  <p className="text-xs font-mono" style={{ color: '#92400e' }}>
+                    DEBUG: Has inputSchema: {selectedTool.inputSchema ? 'YES' : 'NO'}<br/>
+                    Has properties: {selectedTool.inputSchema?.properties ? 'YES' : 'NO'}<br/>
+                    Properties type: {typeof selectedTool.inputSchema?.properties}<br/>
+                    Properties keys: {selectedTool.inputSchema?.properties ? JSON.stringify(Object.keys(selectedTool.inputSchema.properties)) : 'NONE'}<br/>
+                    Raw schema: {JSON.stringify(selectedTool.inputSchema, null, 2).substring(0, 200)}...
+                  </p>
+                </div>
+
+                {/* Generate form inputs from schema */}
+                {selectedTool.inputSchema?.properties && typeof selectedTool.inputSchema.properties === 'object' && Object.keys(selectedTool.inputSchema.properties).length > 0 ? (
+                  <>
+                    <div className="mb-4 p-3 rounded-lg" style={{ backgroundColor: '#f0fdf4' }}>
+                      <p className="text-sm font-medium" style={{ color: '#166534' }}>✓ Input Fields Detected:</p>
+                    </div>
+                    {Object.entries(selectedTool.inputSchema.properties).map(([key, prop]: [string, any]) => {
+                      const isRequired = selectedTool.inputSchema?.required?.includes(key);
+                      
+                      console.log('Rendering input field:', { key, prop, isRequired });
+                      
+                      // Handle different input types
+                      if (prop.enum) {
+                        // Enum/Select field
+                        return (
+                          <div key={key} className="mb-4">
+                            <label className="block text-sm font-medium mb-2">
+                              {prop.title || key}
+                              {isRequired && <span className="text-red-500 ml-1">*</span>}
+                            </label>
+                            <select
+                              className="input"
+                              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>
+                              ))}
+                            </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">
+                              <input
+                                type="checkbox"
+                                checked={toolArgs[key] || false}
+                                onChange={(e) => setToolArgs({ ...toolArgs, [key]: e.target.checked })}
+                              />
+                              <span className="text-sm font-medium">
+                                {prop.title || key}
+                                {isRequired && <span className="text-red-500 ml-1">*</span>}
+                              </span>
+                            </label>
+                            {prop.description && (
+                              <p className="text-xs text-muted-foreground mt-1">{prop.description}</p>
+                            )}
+                          </div>
+                        );
+                      } else {
+                        // Text/Number field
+                        return (
+                          <div key={key} className="mb-4">
+                            <label className="block text-sm font-medium mb-2">
+                              {prop.title || key}
+                              {isRequired && <span className="text-red-500 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>
+                        );
+                      }
+                    })}
+                  </>
+                ) : (
+                  <p className="text-sm text-muted-foreground mb-4">No input required</p>
+                )}
+
+                <button
+                  type="submit"
+                  className="btn btn-primary w-full"
+                  disabled={executingTool}
+                >
+                  {executingTool ? 'Executing...' : 'Execute Tool'}
+                </button>
+              </form>
+
+              {/* Result */}
+              {toolResult && (
+                <div className="mt-6 space-y-4">
+                  <div>
+                    <h3 className="font-medium mb-2">Result:</h3>
+                    <pre className="bg-muted p-4 rounded-lg text-sm overflow-auto max-h-64 text-foreground">
+                      {JSON.stringify(toolResult, null, 2)}
+                    </pre>
+                  </div>
+                  
+                  {/* Widget UI Rendering */}
+                  {(selectedTool.widget || selectedTool.outputTemplate) && toolResult && (
+                    <div>
+                      <h3 className="font-medium mb-2">UI Widget:</h3>
+                      <div className="border border-border rounded-lg overflow-hidden h-64">
+                        <WidgetRenderer
+                          uri={selectedTool.widget?.route || selectedTool.outputTemplate}
+                          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
+                                // Check if it has the interceptor's structure: { success, data, metadata }
+                                if (parsed.success !== undefined && parsed.data !== undefined) {
+                                  return parsed.data; // Return the unwrapped data
+                                }
+                                return parsed;
+                              } catch {
+                                // If parsing fails, return the text wrapped in an object
+                                return { message: toolResult.content[0].text };
+                              }
+                            }
+                            return toolResult;
+                          })()}
+                          className="w-full h-full"
+                        />
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <EnlargeModal />
+    </>
+  );
+}
+