nitrostack 1.0.1 → 1.0.3

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

@@ -0,0 +1,204 @@
+'use client';
+
+import { useState } from 'react';
+import { useStudioStore } from '@/lib/store';
+import { api } from '@/lib/api';
+import { Wifi, Activity, Clock, TrendingUp, Radio } from 'lucide-react';
+
+export default function PingPage() {
+  const { pingHistory, addPingResult } = useStudioStore();
+  const [pinging, setPinging] = useState(false);
+  const [lastLatency, setLastLatency] = useState<number | null>(null);
+
+  const handlePing = async () => {
+    setPinging(true);
+    const startTime = Date.now();
+
+    try {
+      await api.ping();
+      const latency = Date.now() - startTime;
+      setLastLatency(latency);
+      addPingResult({ time: new Date(), latency });
+    } catch (error) {
+      console.error('Ping failed:', error);
+    } finally {
+      setPinging(false);
+    }
+  };
+
+  const averageLatency =
+    pingHistory.length > 0
+      ? Math.round(pingHistory.reduce((sum, p) => sum + p.latency, 0) / pingHistory.length)
+      : null;
+
+  const minLatency =
+    pingHistory.length > 0
+      ? Math.min(...pingHistory.map((p) => p.latency))
+      : null;
+
+  const maxLatency =
+    pingHistory.length > 0
+      ? Math.max(...pingHistory.map((p) => p.latency))
+      : null;
+
+  const getLatencyColor = (latency: number) => {
+    if (latency < 100) return 'text-emerald-500';
+    if (latency < 500) return 'text-amber-500';
+    return 'text-rose-500';
+  };
+
+  const getLatencyBg = (latency: number) => {
+    if (latency < 100) return 'bg-emerald-500/10 border-emerald-500/20';
+    if (latency < 500) return 'bg-amber-500/10 border-amber-500/20';
+    return 'bg-rose-500/10 border-rose-500/20';
+  };
+
+  const getLatencyDotColor = (latency: number) => {
+    if (latency < 100) return 'bg-emerald-500';
+    if (latency < 500) return 'bg-amber-500';
+    return 'bg-rose-500';
+  };
+
+  return (
+    <div className="min-h-screen bg-background p-8">
+      {/* Header */}
+      <div className="mb-8">
+        <div className="flex items-center gap-3 mb-4">
+          <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-500 flex items-center justify-center">
+            <Wifi className="w-6 h-6 text-white" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-foreground">Ping</h1>
+            <p className="text-muted-foreground mt-1">Test server connectivity and latency</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Ping Card */}
+      <div className="card card-hover p-8 mb-8 text-center bg-gradient-to-br from-card via-card to-muted/20">
+        <button
+          onClick={handlePing}
+          disabled={pinging}
+          className="btn btn-primary btn-lg mx-auto px-12 py-4 text-lg gap-3 shadow-lg hover:shadow-xl transition-all"
+        >
+          {pinging ? (
+            <>
+              <Radio className="w-6 h-6 animate-pulse" />
+              Pinging...
+            </>
+          ) : (
+            <>
+              <Wifi className="w-6 h-6" />
+              Send Ping
+            </>
+          )}
+        </button>
+
+        {lastLatency !== null && (
+          <div className="mt-8 animate-fade-in">
+            <div className={`inline-block px-8 py-4 rounded-2xl border ${getLatencyBg(lastLatency)}`}>
+              <div className={`text-6xl font-bold ${getLatencyColor(lastLatency)}`}>
+                {lastLatency}ms
+              </div>
+              <div className="text-muted-foreground mt-2 flex items-center justify-center gap-2">
+                <Clock className="w-4 h-4" />
+                Last ping latency
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Statistics Grid */}
+      {pingHistory.length > 0 && (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+          {/* Average */}
+          <div className="card card-hover p-6">
+            <div className="flex items-center gap-3 mb-3">
+              <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
+                <TrendingUp className="w-5 h-5 text-blue-500" />
+              </div>
+              <h3 className="font-semibold text-foreground">Average</h3>
+            </div>
+            <div className="text-3xl font-bold text-foreground">{averageLatency}ms</div>
+            <p className="text-sm text-muted-foreground mt-1">{pingHistory.length} total pings</p>
+          </div>
+
+          {/* Min */}
+          <div className="card card-hover p-6">
+            <div className="flex items-center gap-3 mb-3">
+              <div className="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center">
+                <Activity className="w-5 h-5 text-emerald-500" />
+              </div>
+              <h3 className="font-semibold text-foreground">Fastest</h3>
+            </div>
+            <div className="text-3xl font-bold text-emerald-500">{minLatency}ms</div>
+            <p className="text-sm text-muted-foreground mt-1">Best response time</p>
+          </div>
+
+          {/* Max */}
+          <div className="card card-hover p-6">
+            <div className="flex items-center gap-3 mb-3">
+              <div className="w-10 h-10 rounded-lg bg-amber-500/10 flex items-center justify-center">
+                <Clock className="w-5 h-5 text-amber-500" />
+              </div>
+              <h3 className="font-semibold text-foreground">Slowest</h3>
+            </div>
+            <div className="text-3xl font-bold text-amber-500">{maxLatency}ms</div>
+            <p className="text-sm text-muted-foreground mt-1">Worst response time</p>
+          </div>
+        </div>
+      )}
+
+      {/* Ping History */}
+      {pingHistory.length > 0 && (
+        <div>
+          <h2 className="text-2xl font-semibold text-foreground mb-6 flex items-center gap-2">
+            <Activity className="w-6 h-6 text-primary" />
+            Recent Pings
+          </h2>
+          <div className="space-y-3">
+            {pingHistory.slice().reverse().map((ping, idx) => (
+              <div
+                key={idx}
+                className="card card-hover p-5 flex items-center justify-between animate-fade-in"
+              >
+                <div className="flex items-center gap-3">
+                  <div className={`w-3 h-3 rounded-full ${getLatencyDotColor(ping.latency)} shadow-lg`} />
+                  <span className="text-sm text-muted-foreground font-mono">
+                    {ping.time.toLocaleTimeString()}
+                  </span>
+                </div>
+                <div className="flex items-center gap-3">
+                  <span className={`text-lg font-bold ${getLatencyColor(ping.latency)}`}>
+                    {ping.latency}ms
+                  </span>
+                  <span className={`badge ${
+                    ping.latency < 100
+                      ? 'badge-success'
+                      : ping.latency < 500
+                      ? 'badge-warning'
+                      : 'badge-error'
+                  }`}>
+                    {ping.latency < 100 ? 'Excellent' : ping.latency < 500 ? 'Good' : 'Slow'}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Empty State */}
+      {pingHistory.length === 0 && !pinging && (
+        <div className="empty-state">
+          <Wifi className="empty-state-icon" />
+          <p className="empty-state-title">No ping history yet</p>
+          <p className="empty-state-description">
+            Click the "Send Ping" button above to test your connection
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,228 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useStudioStore } from '@/lib/store';
+import { api } from '@/lib/api';
+import type { Prompt } from '@/lib/types';
+import { FileText, RefreshCw, X, Play, AlertCircle } from 'lucide-react';
+
+export default function PromptsPage() {
+  const { prompts, setPrompts, loading, setLoading } = useStudioStore();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedPrompt, setSelectedPrompt] = useState<Prompt | null>(null);
+  const [promptArgs, setPromptArgs] = useState<Record<string, string>>({});
+  const [promptResult, setPromptResult] = useState<any>(null);
+  const [executing, setExecuting] = useState(false);
+
+  useEffect(() => {
+    loadPrompts();
+  }, []);
+
+  const loadPrompts = async () => {
+    setLoading('prompts', true);
+    try {
+      const data = await api.getPrompts();
+      setPrompts(data.prompts || []);
+    } catch (error) {
+      console.error('Failed to load prompts:', error);
+    } finally {
+      setLoading('prompts', false);
+    }
+  };
+
+  const handleExecutePrompt = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedPrompt) return;
+
+    setExecuting(true);
+    setPromptResult(null);
+
+    try {
+      const result = await api.executePrompt(selectedPrompt.name, promptArgs);
+      setPromptResult(result);
+    } catch (error) {
+      console.error('Prompt execution failed:', error);
+      setPromptResult({ error: 'Execution failed' });
+    } finally {
+      setExecuting(false);
+    }
+  };
+
+  const filteredPrompts = prompts.filter((prompt) =>
+    prompt.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-blue-500 to-cyan-500 flex items-center justify-center">
+              <FileText className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold text-foreground">Prompts</h1>
+              <p className="text-muted-foreground mt-1">Browse and execute MCP prompts</p>
+            </div>
+          </div>
+          <button onClick={loadPrompts} className="btn btn-primary gap-2">
+            <RefreshCw className="w-4 h-4" />
+            Refresh
+          </button>
+        </div>
+
+        <input
+          type="text"
+          placeholder="Search prompts..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="input"
+        />
+      </div>
+
+      {/* Prompts Grid */}
+      {loading.prompts ? (
+        <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-40"></div>
+          ))}
+        </div>
+      ) : filteredPrompts.length === 0 ? (
+        <div className="empty-state">
+          <AlertCircle className="empty-state-icon" />
+          <p className="empty-state-title">
+            {searchQuery ? 'No prompts found' : 'No prompts available'}
+          </p>
+          <p className="empty-state-description">
+            {searchQuery ? 'Try a different search term' : 'No prompts have been registered'}
+          </p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {filteredPrompts.map((prompt) => (
+            <div
+              key={prompt.name}
+              className="card card-hover p-6 cursor-pointer animate-fade-in"
+              onClick={() => {
+                setSelectedPrompt(prompt);
+                setPromptArgs({});
+                setPromptResult(null);
+              }}
+            >
+              <div className="flex items-center gap-3 mb-3">
+                <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
+                  <FileText className="w-5 h-5 text-blue-500" />
+                </div>
+                <h3 className="font-semibold text-foreground">{prompt.name}</h3>
+              </div>
+
+              <p className="text-sm text-muted-foreground line-clamp-2 mb-3">
+                {prompt.description || 'No description'}
+              </p>
+
+              {prompt.arguments && prompt.arguments.length > 0 && (
+                <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                  <span className="badge badge-secondary">
+                    {prompt.arguments.length} argument{prompt.arguments.length !== 1 ? 's' : ''}
+                  </span>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Prompt Executor Modal */}
+      {selectedPrompt && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center animate-fade-in"
+          style={{ backgroundColor: 'rgba(0, 0, 0, 0.85)' }}
+          onClick={() => setSelectedPrompt(null)}
+        >
+          <div
+            className="bg-card rounded-2xl p-6 w-[600px] max-h-[80vh] overflow-auto border border-border 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-blue-500/10 flex items-center justify-center">
+                  <FileText className="w-5 h-5 text-blue-500" />
+                </div>
+                <h2 className="text-xl font-bold text-foreground">{selectedPrompt.name}</h2>
+              </div>
+              <button
+                onClick={() => setSelectedPrompt(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">
+              {selectedPrompt.description || 'No description'}
+            </p>
+
+            <form onSubmit={handleExecutePrompt}>
+              {selectedPrompt.arguments && selectedPrompt.arguments.length > 0 ? (
+                selectedPrompt.arguments.map((arg) => (
+                  <div key={arg.name} className="mb-4">
+                    <label className="block text-sm font-medium text-foreground mb-2">
+                      {arg.name}
+                      {arg.required && <span className="text-destructive ml-1">*</span>}
+                    </label>
+                    <input
+                      type="text"
+                      className="input"
+                      value={promptArgs[arg.name] || ''}
+                      onChange={(e) =>
+                        setPromptArgs({ ...promptArgs, [arg.name]: e.target.value })
+                      }
+                      required={arg.required}
+                      placeholder={arg.description || `Enter ${arg.name}`}
+                    />
+                    {arg.description && (
+                      <p className="text-xs text-muted-foreground mt-1">{arg.description}</p>
+                    )}
+                  </div>
+                ))
+              ) : (
+                <div className="bg-muted/30 rounded-lg p-4 mb-4">
+                  <p className="text-sm text-muted-foreground">No arguments required</p>
+                </div>
+              )}
+
+              <button type="submit" className="btn btn-primary w-full gap-2" disabled={executing}>
+                <Play className="w-4 h-4" />
+                {executing ? 'Executing...' : 'Execute Prompt'}
+              </button>
+            </form>
+
+            {promptResult && (
+              <div className="mt-6">
+                <h3 className="font-semibold text-foreground mb-3">Messages:</h3>
+                <div className="space-y-3">
+                  {promptResult.messages?.map((msg: any, idx: number) => {
+                    // Extract text from content (can be string or object with type/text)
+                    const contentText = typeof msg.content === 'string' 
+                      ? msg.content 
+                      : msg.content?.text || JSON.stringify(msg.content);
+                    
+                    return (
+                      <div key={idx} className="bg-muted/30 border border-border p-4 rounded-lg">
+                        <div className="text-xs text-muted-foreground mb-2 uppercase font-semibold">
+                          {msg.role}
+                        </div>
+                        <div className="text-sm whitespace-pre-wrap text-foreground">{contentText}</div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}