nitrostack 1.0.71 → 1.0.73

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

@@ -1,209 +0,0 @@
-'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="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-cyan-500 to-blue-500 flex items-center justify-center shadow-md">
-            <Wifi className="w-5 h-5 text-white" strokeWidth={2.5} />
-          </div>
-          <div>
-            <h1 className="text-lg font-bold text-foreground">Ping</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">
-
-      {/* 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>
-      </div>
-    </div>
-  );
-}