nvcurve with some fixes and better limits

2026-05-09 15:05:29 +02:00
commit 024dcbceb0
@@ -0,0 +1,52 @@
+interface Props {
+  label: string;
+  value: string;
+  history: number[];
+  unit?: string;
+  color?: string; // tailwind color class for the sparkline stroke
+  max?: number;
+}
+
+const SPARKLINE_H = 32;
+const SPARKLINE_W = 120;
+
+function Sparkline({ data, color = '#a78bfa', max }: { data: number[]; color?: string; max?: number }) {
+  const points = data.length >= 2 ? (() => {
+    const dataMax = max ?? Math.max(...data, 1);
+    const dataMin = Math.min(...data, 0);
+    const range = dataMax - dataMin || 1;
+    return data.map((v, i) => {
+      const x = (i / (data.length - 1)) * SPARKLINE_W;
+      const y = SPARKLINE_H - ((v - dataMin) / range) * SPARKLINE_H;
+      return `${x},${y}`;
+    }).join(' ');
+  })() : null;
+
+  return (
+    <svg width="100%" height={SPARKLINE_H} viewBox={`0 0 ${SPARKLINE_W} ${SPARKLINE_H}`} preserveAspectRatio="none" className="overflow-visible">
+      {points && (
+        <polyline
+          points={points}
+          fill="none"
+          stroke={color}
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+          strokeLinecap="round"
+          opacity="0.8"
+        />
+      )}
+    </svg>
+  );
+}
+
+export function GaugeCard({ label, value, history, color = '#a78bfa', max }: Props) {
+  return (
+    <div className="bg-zinc-900 rounded-lg p-3 flex flex-col gap-1 min-w-0">
+      <div className="text-xs text-zinc-500 uppercase tracking-wider">{label}</div>
+      <div className="text-xl font-mono font-semibold text-zinc-100">{value}</div>
+      <div className="mt-1 w-full">
+        <Sparkline data={history} color={color} max={max} />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,66 @@
+import { GaugeCard } from './GaugeCard';
+import { fmt } from '../../utils/units';
+import type { MonitoringSample } from '../../types';
+
+interface Props {
+  monitor: MonitoringSample | null;
+  history: MonitoringSample[];
+}
+
+function pluck<K extends keyof MonitoringSample>(
+  history: MonitoringSample[],
+  key: K,
+): number[] {
+  return history.map((s) => (s[key] as number | null) ?? 0);
+}
+
+export function LiveMonitor({ monitor, history }: Props) {
+  return (
+    <div className="flex flex-col gap-2 w-full h-full">
+      <div className="bg-zinc-900 rounded-lg p-3 flex flex-col gap-2 h-full">
+        <div className="flex items-center justify-between pb-2 border-b border-zinc-800">
+          <span className="text-xs text-zinc-500 uppercase tracking-wider font-semibold">Live Monitor</span>
+        </div>
+        <div className="flex flex-col gap-2 mt-1">
+        <GaugeCard
+          label="Core Clock"
+          value={fmt.mhz(monitor?.clock_mhz)}
+          history={pluck(history, 'clock_mhz')}
+          color="#34d399"
+          max={3000}
+        />
+        <GaugeCard
+          label="Voltage"
+          value={fmt.mv(monitor?.voltage_mv)}
+          history={pluck(history, 'voltage_mv')}
+          color="#a78bfa"
+          max={1100}
+        />
+        <GaugeCard
+          label="Power Draw"
+          value={fmt.watts(monitor?.power_w)}
+          history={pluck(history, 'power_w')}
+          color="#f472b6"
+          max={600}
+        />
+        <GaugeCard
+          label="GPU Util"
+          value={fmt.pct(monitor?.gpu_util_pct)}
+          history={pluck(history, 'gpu_util_pct')}
+          color="#facc15"
+          max={100}
+        />
+        <div className="mt-auto">
+          <GaugeCard
+            label="P-State"
+            value={monitor?.pstate_label ?? 'Unknown'}
+            history={pluck(history, 'pstate')}
+            color="#a8a29e"
+            max={15}
+          />
+        </div>
+      </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,56 @@
+import { GaugeCard } from './GaugeCard';
+import { fmt } from '../../utils/units';
+import type { MonitoringSample } from '../../types';
+
+interface Props {
+  monitor: MonitoringSample | null;
+  history: MonitoringSample[];
+}
+
+function pluck<K extends keyof MonitoringSample>(
+  history: MonitoringSample[],
+  key: K,
+): number[] {
+  return history.map((s) => (s[key] as number | null) ?? 0);
+}
+
+export function PerformanceMonitor({ monitor, history }: Props) {
+  const memUsed = monitor?.mem_used_mib ?? null;
+  const memTotal = monitor?.mem_total_mib ?? null;
+  const memLabel = memUsed != null && memTotal != null
+    ? `${memUsed.toFixed(0)} / ${memTotal.toFixed(0)} MiB`
+    : '—';
+
+  return (
+    <div className="flex flex-col gap-2 w-full h-full">
+      <div className="bg-zinc-900 rounded-lg p-3 flex flex-col gap-2 h-full">
+        <div className="flex items-center justify-between pb-2 border-b border-zinc-800">
+          <span className="text-xs text-zinc-500 uppercase tracking-wider font-semibold">Live Monitor</span>
+        </div>
+        <div className="flex flex-col gap-2 mt-1">
+          <GaugeCard
+            label="Mem Clock"
+            value={fmt.mhz(monitor?.mem_clock_mhz)}
+            history={pluck(history, 'mem_clock_mhz')}
+            color="#67e8f9"
+            max={20000}
+          />
+          <GaugeCard
+            label="Power Draw"
+            value={fmt.watts(monitor?.power_w)}
+            history={pluck(history, 'power_w')}
+            color="#f472b6"
+            max={600}
+          />
+          <GaugeCard
+            label="VRAM Used"
+            value={memLabel}
+            history={pluck(history, 'mem_used_mib')}
+            color="#a78bfa"
+            max={memTotal ?? 32768}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,128 @@
+import { Cpu, Wifi, WifiOff, Loader, Terminal, ChevronDown } from 'lucide-react';
+import type { GpuInfo, MonitoringSample } from '../../types';
+import { fmt } from '../../utils/units';
+import { useCurveStore } from '../../store/curveStore';
+import { useState, useRef, useEffect } from 'react';
+
+interface Props {
+  gpuInfo: GpuInfo | null;
+  wsStatus: 'connecting' | 'connected' | 'disconnected';
+  monitor: MonitoringSample | null;
+}
+
+const statusIcon = {
+  connected: <Wifi size={14} className="text-emerald-400" />,
+  connecting: <Loader size={14} className="text-yellow-400 animate-spin" />,
+  disconnected: <WifiOff size={14} className="text-red-400" />,
+};
+
+const statusText = {
+  connected: 'Connected',
+  connecting: 'Connecting…',
+  disconnected: 'Disconnected',
+};
+
+export function StatusBar({ gpuInfo, wsStatus, monitor }: Props) {
+  const { availableGpus, selectedGpuIndex, setSelectedGpuIndex } = useCurveStore();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return (
+    <header className="bg-zinc-900 border-b border-zinc-800 text-sm">
+      <div className="flex items-center gap-4 px-4 py-2 w-full max-w-[1600px] mx-auto min-w-0">
+        {/* Left: GPU name */}
+        <div className="flex items-center gap-2 min-w-0 shrink-0">
+          <img src="/logo.svg" alt="NVCurve" className="w-5 h-5 shrink-0" />
+          <span className="font-bold text-transparent bg-clip-text bg-gradient-to-r from-violet-400 to-fuchsia-400 tracking-tight mr-1">
+            NVCurve
+          </span>
+          <div className="w-px h-4 bg-zinc-700 mx-1 hidden sm:block"></div>
+          
+          {availableGpus.length > 1 ? (
+            <div className="relative" ref={dropdownRef}>
+              <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="flex items-center gap-1.5 px-2 py-1 -ml-2 rounded hover:bg-zinc-800 transition-colors group"
+              >
+                <Cpu size={14} className="text-zinc-400 group-hover:text-zinc-300 transition-colors" />
+                <span className="font-medium text-zinc-200 truncate group-hover:text-white transition-colors">
+                  {gpuInfo?.name ?? 'No Device'}
+                </span>
+                <ChevronDown size={14} className={`text-zinc-500 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+              </button>
+              
+              {isOpen && (
+                <div className="absolute top-full left-0 mt-1 w-64 bg-zinc-800 border border-zinc-700 rounded-lg shadow-xl overflow-hidden z-50 py-1">
+                  {availableGpus.map((gpu) => (
+                    <button
+                      key={gpu.index}
+                      onClick={() => {
+                        setSelectedGpuIndex(gpu.index);
+                        setIsOpen(false);
+                      }}
+                      className={`w-full text-left px-3 py-2 text-sm flex items-center gap-2 hover:bg-zinc-700 transition-colors ${
+                        gpu.index === selectedGpuIndex ? 'text-cyan-400 font-medium bg-zinc-700/50' : 'text-zinc-300'
+                      }`}
+                    >
+                      <Cpu size={14} className={gpu.index === selectedGpuIndex ? 'text-cyan-400' : 'text-zinc-500'} />
+                      <span className="truncate flex-1">{gpu.name}</span>
+                      <span className="text-xs text-zinc-500 font-mono">GPU {gpu.index}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          ) : (
+            <>
+              <Cpu size={16} className="shrink-0 text-zinc-400 ml-1 hidden sm:block" />
+              <span className="font-medium text-zinc-200 truncate">
+                {gpuInfo?.name ?? 'No Device'}
+              </span>
+            </>
+          )}
+
+          {gpuInfo?.driver_version && (
+            <div className="flex items-center gap-1.5 text-zinc-400 shrink-0 hidden sm:flex bg-zinc-800/80 border border-zinc-700/50 px-2 py-0.5 rounded text-xs ml-2">
+              <Terminal size={12} className="text-zinc-500" />
+              <span>{gpuInfo.driver_version}</span>
+            </div>
+          )}
+        </div>
+
+        {/* Centre: live stats */}
+        <div className="flex-1 flex items-center justify-center gap-5 min-w-0 hidden lg:flex">
+          <StatPill label="Temp" value={fmt.celsius(monitor?.temp_c)} color="text-orange-400" />
+          <StatPill label="Power" value={fmt.watts(monitor?.power_w)} color="text-pink-400" />
+          <StatPill label="Fan" value={fmt.pct(monitor?.fan_pct)} color="text-blue-400" />
+          <StatPill label="GPU Util" value={fmt.pct(monitor?.gpu_util_pct)} color="text-yellow-400" />
+          <StatPill label="Mem Util" value={fmt.pct(monitor?.mem_util_pct)} color="text-sky-400" />
+        </div>
+
+        {/* Right: connection status */}
+        <div className="flex items-center gap-1.5 text-zinc-400 shrink-0">
+          {statusIcon[wsStatus]}
+          <span className="hidden sm:inline">{statusText[wsStatus]}</span>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+function StatPill({ label, value, color }: { label: string; value: string; color: string }) {
+  return (
+    <div className="flex items-baseline gap-1">
+      <span className="text-zinc-500 text-xs">{label}</span>
+      <span className={`font-mono font-semibold text-sm ${color}`}>{value}</span>
+    </div>
+  );
+}