nitrostack 1.0.65 → 1.0.66

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

@@ -0,0 +1,199 @@
+'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 [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');
+
+    if (savedTransport) setTransport(savedTransport as 'stdio' | 'http');
+  }, []);
+
+  const handleSaveSettings = async () => {
+    setConnecting(true);
+    setConnectionStatus('idle');
+    setErrorMessage('');
+
+    try {
+      // Save settings to localStorage
+      localStorage.setItem('mcp_transport', transport);
+
+      // Try to reconnect with new settings
+      const response = await fetch('/api/init', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          transport,
+        }),
+      });
+
+      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
+                disabled
+                className={`p-4 rounded-lg border-2 transition-all text-left border-primary bg-primary/10`}
+              >
+                <div className="flex items-center gap-3 mb-2">
+                  <div className={`w-3 h-3 rounded-full bg-primary`} />
+                  <h3 className="font-semibold text-foreground">STDIO</h3>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  Direct process communication (default)
+                </p>
+              </button>
+
+              <button
+                disabled
+                className={`p-4 rounded-lg border-2 transition-all text-left border-border hover:border-primary/50`}
+              >
+                <div className="flex items-center gap-3 mb-2">
+                  <div className={`w-3 h-3 rounded-full 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>
+
+          {/* 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">
+                  <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).
+                </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>
+  );
+}
+