groove-dev 0.27.67 → 0.27.69

package/packages/gui/src/components/network/token-waterfall.jsx

@@ -0,0 +1,111 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useMemo, memo } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { HEX } from '../../lib/theme-hex';
+import { cn } from '../../lib/cn';
+import { Badge } from '../ui/badge';
+
+const PHASE_COLORS = {
+  serialize_ms: HEX.info,
+  send_ms: HEX.accent,
+  wait_ms: HEX.text3,
+  forward_ms: HEX.success,
+  queue_ms: HEX.warning,
+};
+
+const PHASE_LABELS = {
+  serialize_ms: 'Serialize',
+  send_ms: 'Send',
+  wait_ms: 'Wait',
+  forward_ms: 'Forward',
+  queue_ms: 'Queue',
+};
+
+function shortAddr(addr) {
+  if (!addr || typeof addr !== 'string') return '\u2014';
+  if (addr.length < 14) return addr;
+  return `${addr.slice(0, 6)}\u2026${addr.slice(-4)}`;
+}
+
+export const TokenWaterfall = memo(function TokenWaterfall() {
+  const timing = useGrooveStore((s) => s.networkTokenTiming);
+
+  const stages = useMemo(() => {
+    if (!timing?.stages || !Array.isArray(timing.stages)) return [];
+    return timing.stages;
+  }, [timing]);
+
+  if (!stages.length) {
+    return (
+      <div className="flex items-center justify-center py-6">
+        <span className="text-xs font-mono text-text-3">Waiting for token timing data\u2026</span>
+      </div>
+    );
+  }
+
+  const maxRtt = Math.max(...stages.map((s) => s.rtt_ms || 1), 1);
+  const phases = Object.keys(PHASE_COLORS);
+
+  return (
+    <div className="flex flex-col gap-0.5">
+      <div className="flex items-center gap-3 px-3 py-1.5 flex-wrap">
+        {phases.map((p) => (
+          <div key={p} className="flex items-center gap-1">
+            <span className="w-2 h-2 rounded-sm flex-shrink-0" style={{ background: PHASE_COLORS[p] }} />
+            <span className="text-2xs font-mono text-text-3">{PHASE_LABELS[p]}</span>
+          </div>
+        ))}
+      </div>
+
+      {stages.map((stage, i) => {
+        const rtt = stage.rtt_ms || 1;
+        const tel = stage.node_telemetry;
+        const gpuModel = tel?.gpu_model;
+        const device = tel?.device;
+
+        return (
+          <div key={i} className="flex items-center gap-2 px-3 py-1">
+            <div className="w-[110px] flex-shrink-0 flex flex-col gap-0.5">
+              <div className="flex items-center gap-1.5">
+                <span className="text-2xs font-mono text-text-2 truncate">{shortAddr(stage.node)}</span>
+                <Badge variant={stage.via === 'p2p' ? 'success' : 'warning'} className="text-2xs px-1 py-0 leading-tight">
+                  {stage.via || '?'}
+                </Badge>
+              </div>
+              {gpuModel && (
+                <div className="flex items-center gap-1">
+                  {device && (
+                    <span className={cn(
+                      'text-2xs font-mono px-1 py-0 rounded leading-tight',
+                      device === 'cuda' ? 'bg-info/20 text-info' : 'bg-purple/20 text-purple',
+                    )}>
+                      {device}
+                    </span>
+                  )}
+                  <span className="text-2xs font-mono text-text-4 truncate">{gpuModel}</span>
+                </div>
+              )}
+            </div>
+            <div className="flex-1 min-w-0 h-4 bg-surface-2 rounded-sm overflow-hidden relative flex">
+              {phases.map((p) => {
+                const ms = stage[p] || 0;
+                const pct = (ms / maxRtt) * 100;
+                return (
+                  <div
+                    key={p}
+                    className="h-full flex-shrink-0 transition-all"
+                    style={{ width: `${pct}%`, background: PHASE_COLORS[p] }}
+                    title={`${PHASE_LABELS[p]}: ${ms.toFixed(1)}ms`}
+                  />
+                );
+              })}
+            </div>
+            <span className="text-2xs font-mono text-text-3 tabular-nums w-[52px] text-right flex-shrink-0">
+              {rtt.toFixed(1)}ms
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+});

package/packages/gui/src/stores/groove.js

@@ -106,6 +106,11 @@ export const useGrooveStore = create((set, get) => ({
   networkUpdateProgress: { updating: false, step: null, message: null, percent: 0, error: null },
   networkCompute: { totalRamMb: 0, totalVramMb: 0, totalCpuCores: 0, totalBandwidthMbps: 0, activeNodes: 0, totalNodes: 0, avgLoad: 0 },
   networkSnapshots: [],
+  networkTokenTiming: null,
+  networkBenchmarks: [],
+  networkTraces: [],
+  networkPerfSnapshots: [],
+  networkNodeTelemetry: {},
   networkWallet: { connected: false, address: null, balance: '0.00', token: 'GROOVE', chain: 'base-l2' },
   networkEarnings: { today: 0, thisWeek: 0, allTime: 0, history: [] },
 
@@ -901,6 +906,33 @@ export const useGrooveStore = create((set, get) => ({
           }
           break;
         }
+
+        case 'network:token:timing': {
+          const { __proto__: _a, constructor: _b, prototype: _c, ...td } = msg.data || {};
+          const updates = {
+            networkTokenTiming: td,
+            networkPerfSnapshots: [...get().networkPerfSnapshots, { t: Date.now(), tps: td.tps || 0 }].slice(-100),
+          };
+          if (Array.isArray(td.stages)) {
+            const telMap = { ...get().networkNodeTelemetry };
+            const unsafe = new Set(['__proto__', 'constructor', 'prototype']);
+            for (const stage of td.stages) {
+              const nid = stage.node_telemetry?.node_id;
+              if (nid && typeof nid === 'string' && !unsafe.has(nid)) {
+                telMap[nid] = { ...stage.node_telemetry, forward_ms: stage.forward_ms, updatedAt: Date.now() };
+              }
+            }
+            updates.networkNodeTelemetry = telMap;
+          }
+          set(updates);
+          break;
+        }
+
+        case 'network:timing:summary': {
+          const { __proto__: _a, constructor: _b, prototype: _c, ...sd } = msg.data || {};
+          set((s) => ({ networkBenchmarks: [...s.networkBenchmarks, sd].slice(-100) }));
+          break;
+        }
       }
     };
 
@@ -2279,6 +2311,34 @@ export const useGrooveStore = create((set, get) => ({
     return get().networkEarnings;
   },
 
+  async fetchNetworkBenchmarks() {
+    try {
+      const data = await api.get('/network/benchmarks');
+      if (Array.isArray(data)) set({ networkBenchmarks: data.slice(-100) });
+      return data;
+    } catch { return null; }
+  },
+
+  async fetchNetworkTraces() {
+    try {
+      const data = await api.get('/network/traces');
+      if (Array.isArray(data)) set({ networkTraces: data });
+      return data;
+    } catch { return null; }
+  },
+
+  async fetchNetworkTrace(filename) {
+    try {
+      return await api.get(`/network/traces/${encodeURIComponent(filename)}`);
+    } catch { return null; }
+  },
+
+  async fetchLiveTrace(offset = 0) {
+    try {
+      return await api.get(`/network/traces/live?offset=${offset}`);
+    } catch { return null; }
+  },
+
   async renameFile(oldPath, newPath) {
     try {
       await api.post('/files/rename', { oldPath, newPath });

package/packages/gui/src/views/network.jsx

@@ -17,6 +17,7 @@ import { NodeCard } from '../components/network/node-card';
 import { EarningsCard } from '../components/network/earnings-card';
 import { FleetTable } from '../components/network/fleet-table';
 import { WalletView } from '../components/network/wallet-view';
+import { PerformanceDashboard } from '../components/network/performance-dashboard';
 import { HEX, hexAlpha } from '../lib/theme-hex';
 import { Globe, Download, Check, AlertCircle, Loader2, Trash2, ArrowUpCircle, Zap } from 'lucide-react';
 
@@ -483,6 +484,7 @@ export default function NetworkView() {
         <TabsList className="bg-surface-0 border-b border-border-subtle px-4 flex-shrink-0">
           <TabsTrigger value="overview" className="text-xs">Overview</TabsTrigger>
           <TabsTrigger value="fleet" className="text-xs">Fleet</TabsTrigger>
+          <TabsTrigger value="performance" className="text-xs flex items-center gap-1"><Zap size={10} />Performance</TabsTrigger>
           <TabsTrigger value="wallet" className="text-xs">Wallet</TabsTrigger>
         </TabsList>
 
@@ -494,6 +496,10 @@ export default function NetworkView() {
           <FleetTable />
         </TabsContent>
 
+        <TabsContent value="performance" className="flex-1 min-h-0 overflow-hidden bg-surface-1">
+          <PerformanceDashboard active={activeTab === 'performance'} />
+        </TabsContent>
+
         <TabsContent value="wallet" className="flex-1 min-h-0 overflow-hidden">
           <WalletView />
         </TabsContent>