nitrostack 1.0.14 → 1.0.16

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

@@ -111,37 +111,37 @@ export default function ResourcesPage() {
   }, [selectedExamples, openEnlargeModal, getSelectedExample]);
 
   return (
-    <div className="min-h-screen bg-background p-8">
-      {/* Header */}
-      <div className="mb-8">
-        <div className="flex items-center justify-between mb-6">
-          <div className="flex items-center gap-3">
-            <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
-              <Package className="w-6 h-6 text-white" />
-            </div>
-            <div>
-              <h1 className="text-3xl font-bold text-foreground">Resources</h1>
-              <p className="text-muted-foreground mt-1">Browse MCP resources and UI widgets</p>
-            </div>
+    <div 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">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center shadow-md">
+            <Package className="w-5 h-5 text-white" strokeWidth={2.5} />
+          </div>
+          <div>
+            <h1 className="text-lg font-bold text-foreground">Resources</h1>
           </div>
-          <button onClick={loadResources} className="btn btn-primary gap-2">
-            <RefreshCw className="w-4 h-4" />
-            Refresh
-          </button>
         </div>
-
-        <input
-          type="text"
-          placeholder="Search resources..."
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          className="input"
-        />
+        <button onClick={loadResources} className="btn btn-primary text-sm px-4 py-2 gap-2">
+          <RefreshCw className="w-4 h-4" />
+          Refresh
+        </button>
       </div>
 
-      {/* UI Widgets Section */}
-      {(loadingWidgets || widgets.length > 0) && (
-        <div className="mb-12">
+      {/* 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">
+          <input
+            type="text"
+            placeholder="Search resources..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="input mb-6"
+          />
+
+          {/* UI Widgets Section */}
+          {(loadingWidgets || widgets.length > 0) && (
+            <div className="mb-12">
           <h2 className="text-2xl font-bold text-foreground mb-6 flex items-center gap-2">
             <Palette className="w-6 h-6 text-primary" />
             UI Widgets {widgets.length > 0 && `(${filteredWidgets.length})`}
@@ -240,73 +240,75 @@ export default function ResourcesPage() {
               ))}
             </div>
           )}
-        </div>
-      )}
+            </div>
+          )}
 
-      {/* MCP Resources Section */}
-      <div>
-        <h2 className="text-2xl font-bold text-foreground mb-6 flex items-center gap-2">
-          <Package className="w-6 h-6 text-primary" />
-          MCP Resources {resources.length > 0 && `(${filteredResources.length})`}
-        </h2>
-        
-        {/* Resources Grid */}
-        {loading.resources ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {[1, 2, 3].map((i) => (
-              <div key={i} className="card skeleton h-64"></div>
-            ))}
-          </div>
-        ) : filteredResources.length === 0 ? (
-          <div className="empty-state">
-            <Package className="empty-state-icon" />
-            <p className="empty-state-title">
-              {searchQuery ? 'No resources found' : 'No resources available'}
-            </p>
-            <p className="empty-state-description">
-              {searchQuery ? 'Try a different search term' : 'No MCP resources have been registered'}
-            </p>
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {filteredResources.map((resource) => (
-              <div key={resource.uri} className="card card-hover p-6 animate-fade-in">
-                <div className="flex items-start justify-between mb-4">
-                  <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
-                      <Package className="w-5 h-5 text-blue-500" />
-                    </div>
-                    <div>
-                      <h3 className="font-semibold text-foreground">{resource.name}</h3>
-                      <span className="badge badge-primary text-xs mt-1">
-                        Resource
-                      </span>
+          {/* MCP Resources Section */}
+          <div>
+            <h2 className="text-2xl font-bold text-foreground mb-6 flex items-center gap-2">
+              <Package className="w-6 h-6 text-primary" />
+              MCP Resources {resources.length > 0 && `(${filteredResources.length})`}
+            </h2>
+            
+            {/* Resources Grid */}
+            {loading.resources ? (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {[1, 2, 3].map((i) => (
+                  <div key={i} className="card skeleton h-64"></div>
+                ))}
+              </div>
+            ) : filteredResources.length === 0 ? (
+              <div className="empty-state">
+                <Package className="empty-state-icon" />
+                <p className="empty-state-title">
+                  {searchQuery ? 'No resources found' : 'No resources available'}
+                </p>
+                <p className="empty-state-description">
+                  {searchQuery ? 'Try a different search term' : 'No MCP resources have been registered'}
+                </p>
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {filteredResources.map((resource) => (
+                  <div key={resource.uri} className="card card-hover p-6 animate-fade-in">
+                    <div className="flex items-start justify-between mb-4">
+                      <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
+                          <Package className="w-5 h-5 text-blue-500" />
+                        </div>
+                        <div>
+                          <h3 className="font-semibold text-foreground">{resource.name}</h3>
+                          <span className="badge badge-primary text-xs mt-1">
+                            Resource
+                          </span>
+                        </div>
+                      </div>
                     </div>
-                  </div>
-                </div>
 
-                <p className="text-sm text-muted-foreground mb-4 line-clamp-2">
-                  {resource.description || 'No description'}
-                </p>
+                    <p className="text-sm text-muted-foreground mb-4 line-clamp-2">
+                      {resource.description || 'No description'}
+                    </p>
 
-                <div className="bg-muted/30 rounded-lg p-3 border border-border">
-                  <p className="text-xs text-muted-foreground mb-1 font-semibold uppercase tracking-wide">URI</p>
-                  <p className="text-xs text-foreground font-mono truncate">
-                    {resource.uri}
-                  </p>
-                </div>
+                    <div className="bg-muted/30 rounded-lg p-3 border border-border">
+                      <p className="text-xs text-muted-foreground mb-1 font-semibold uppercase tracking-wide">URI</p>
+                      <p className="text-xs text-foreground font-mono truncate">
+                        {resource.uri}
+                      </p>
+                    </div>
 
-                {resource.mimeType && (
-                  <div className="mt-3">
-                    <span className="badge badge-secondary text-xs">
-                      {resource.mimeType}
-                    </span>
+                    {resource.mimeType && (
+                      <div className="mt-3">
+                        <span className="badge badge-secondary text-xs">
+                          {resource.mimeType}
+                        </span>
+                      </div>
+                    )}
                   </div>
-                )}
+                ))}
               </div>
-            ))}
+            )}
           </div>
-        )}
+        </div>
       </div>
     </div>
   );

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

@@ -0,0 +1,270 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Settings as SettingsIcon, Wifi, CheckCircle, AlertCircle } from 'lucide-react';
+
+export default function SettingsPage() {
+  const [transport, setTransport] = useState<'stdio' | 'http'>('stdio');
+  const [httpUrl, setHttpUrl] = useState('http://localhost:3002');
+  const [httpBasePath, setHttpBasePath] = useState('/mcp');
+  const [connecting, setConnecting] = useState(false);
+  const [connectionStatus, setConnectionStatus] = useState<'idle' | 'success' | 'error'>('idle');
+  const [errorMessage, setErrorMessage] = useState('');
+
+  useEffect(() => {
+    // Load saved settings from localStorage
+    const savedTransport = localStorage.getItem('mcp_transport');
+    const savedHttpUrl = localStorage.getItem('mcp_http_url');
+    const savedHttpBasePath = localStorage.getItem('mcp_http_base_path');
+
+    if (savedTransport) setTransport(savedTransport as 'stdio' | 'http');
+    if (savedHttpUrl) setHttpUrl(savedHttpUrl);
+    if (savedHttpBasePath) setHttpBasePath(savedHttpBasePath);
+  }, []);
+
+  const handleSaveSettings = async () => {
+    setConnecting(true);
+    setConnectionStatus('idle');
+    setErrorMessage('');
+
+    try {
+      // Save settings to localStorage
+      localStorage.setItem('mcp_transport', transport);
+      if (transport === 'http') {
+        localStorage.setItem('mcp_http_url', httpUrl);
+        localStorage.setItem('mcp_http_base_path', httpBasePath);
+      }
+
+      // Try to reconnect with new settings
+      const response = await fetch('/api/init', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          transport,
+          baseUrl: httpUrl,
+          basePath: httpBasePath,
+        }),
+      });
+
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || 'Failed to connect');
+      }
+
+      const data = await response.json();
+      setConnectionStatus('success');
+      console.log('✅ Settings saved and connection established:', data);
+    } catch (error: any) {
+      console.error('❌ Failed to save settings:', error);
+      setConnectionStatus('error');
+      setErrorMessage(error.message || 'Failed to connect');
+    } finally {
+      setConnecting(false);
+    }
+  };
+
+  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">
+        <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">
+            <SettingsIcon className="w-5 h-5 text-white" strokeWidth={2.5} />
+          </div>
+          <div>
+            <h1 className="text-lg font-bold text-foreground">Settings</h1>
+          </div>
+        </div>
+      </div>
+
+      {/* Content - ONLY this scrolls */}
+      <div className="flex-1 overflow-y-auto overflow-x-hidden">
+        <div className="max-w-4xl mx-auto px-6 py-6">
+
+      {/* Settings Card */}
+      <div className="max-w-2xl">
+        <div className="card p-6">
+          <h2 className="text-xl font-semibold text-foreground mb-6">Transport Configuration</h2>
+
+          {/* Transport Type Selection */}
+          <div className="mb-6">
+            <label className="block text-sm font-medium text-foreground mb-3">
+              Transport Type
+            </label>
+            <div className="grid grid-cols-2 gap-4">
+              <button
+                onClick={() => setTransport('stdio')}
+                className={`p-4 rounded-lg border-2 transition-all text-left ${
+                  transport === 'stdio'
+                    ? 'border-primary bg-primary/10'
+                    : 'border-border hover:border-primary/50'
+                }`}
+              >
+                <div className="flex items-center gap-3 mb-2">
+                  <div className={`w-3 h-3 rounded-full ${transport === 'stdio' ? 'bg-primary' : 'bg-muted'}`} />
+                  <h3 className="font-semibold text-foreground">STDIO</h3>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  Direct process communication (default)
+                </p>
+              </button>
+
+              <button
+                onClick={() => setTransport('http')}
+                className={`p-4 rounded-lg border-2 transition-all text-left ${
+                  transport === 'http'
+                    ? 'border-primary bg-primary/10'
+                    : 'border-border hover:border-primary/50'
+                }`}
+              >
+                <div className="flex items-center gap-3 mb-2">
+                  <div className={`w-3 h-3 rounded-full ${transport === 'http' ? 'bg-primary' : 'bg-muted'}`} />
+                  <h3 className="font-semibold text-foreground">HTTP</h3>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  HTTP/SSE transport for remote servers
+                </p>
+              </button>
+            </div>
+          </div>
+
+          {/* HTTP Configuration (shown only when HTTP is selected) */}
+          {transport === 'http' && (
+            <div className="space-y-4 mb-6 p-4 bg-muted/30 rounded-lg border border-border">
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
+                  Server URL
+                </label>
+                <input
+                  type="text"
+                  value={httpUrl}
+                  onChange={(e) => setHttpUrl(e.target.value)}
+                  placeholder="http://localhost:3002"
+                  className="input"
+                />
+                <p className="text-xs text-muted-foreground mt-1">
+                  The base URL of your MCP HTTP server (default: port 3002)
+                </p>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
+                  Base Path
+                </label>
+                <input
+                  type="text"
+                  value={httpBasePath}
+                  onChange={(e) => setHttpBasePath(e.target.value)}
+                  placeholder="/mcp"
+                  className="input"
+                />
+                <p className="text-xs text-muted-foreground mt-1">
+                  The base path for MCP endpoints
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Port Allocation Info */}
+          <div className="mb-6 p-4 bg-blue-500/10 rounded-lg border border-blue-500/20">
+            <h4 className="font-semibold text-foreground mb-2">Port Allocation</h4>
+            <div className="space-y-1 text-sm">
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground">Studio UI:</span>
+                <code className="px-2 py-0.5 bg-muted rounded text-foreground">Port 3000</code>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground">Widget Server:</span>
+                <code className="px-2 py-0.5 bg-muted rounded text-foreground">Port 3001</code>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground">MCP HTTP Server:</span>
+                <code className="px-2 py-0.5 bg-primary/20 rounded text-primary font-semibold">Port 3002</code>
+              </div>
+            </div>
+          </div>
+
+          {/* Info Box */}
+          <div className="mb-6 p-4 bg-primary/5 rounded-lg border border-primary/20">
+            <div className="flex gap-3">
+              <Wifi className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
+              <div>
+                <h4 className="font-semibold text-foreground mb-1">Transport Information</h4>
+                <p className="text-sm text-muted-foreground mb-2">
+                  {transport === 'stdio' ? (
+                    <>
+                      <strong>STDIO</strong> (Default): Studio spawns the MCP server as a child process and communicates 
+                      via standard input/output. The MCP server still runs dual transport (STDIO + HTTP on port 3002).
+                    </>
+                  ) : (
+                    <>
+                      <strong>HTTP</strong>: Studio connects to the running MCP HTTP server on port 3002. 
+                      Use this when you want to inspect an already-running server or connect remotely.
+                    </>
+                  )}
+                </p>
+                {transport === 'http' && (
+                  <p className="text-xs text-amber-600 dark:text-amber-500">
+                    ⚠️ Make sure your MCP server is running with <code>npm run dev</code> or <code>npm start</code>
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Connection Status */}
+          {connectionStatus !== 'idle' && (
+            <div className={`mb-6 p-4 rounded-lg border ${
+              connectionStatus === 'success'
+                ? 'bg-emerald-500/10 border-emerald-500/20'
+                : 'bg-rose-500/10 border-rose-500/20'
+            }`}>
+              <div className="flex gap-3">
+                {connectionStatus === 'success' ? (
+                  <>
+                    <CheckCircle className="w-5 h-5 text-emerald-500 flex-shrink-0 mt-0.5" />
+                    <div>
+                      <h4 className="font-semibold text-emerald-500 mb-1">Connected</h4>
+                      <p className="text-sm text-emerald-600">
+                        Settings saved and connection established successfully.
+                      </p>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <AlertCircle className="w-5 h-5 text-rose-500 flex-shrink-0 mt-0.5" />
+                    <div>
+                      <h4 className="font-semibold text-rose-500 mb-1">Connection Failed</h4>
+                      <p className="text-sm text-rose-600">
+                        {errorMessage || 'Failed to establish connection with the selected transport.'}
+                      </p>
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Save Button */}
+          <button
+            onClick={handleSaveSettings}
+            disabled={connecting}
+            className="btn btn-primary w-full"
+          >
+            {connecting ? (
+              <>
+                <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                Connecting...
+              </>
+            ) : (
+              'Save & Connect'
+            )}
+          </button>
+        </div>
+      </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+