npm - groove-dev - Versions diffs - 0.27.59 → 0.27.60 - Mend

groove-dev 0.27.59 → 0.27.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/packages/gui/dist/index.html CHANGED Viewed

@@ -6,12 +6,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <title>Groove GUI</title>
-    <script type="module" crossorigin src="/assets/index-BycOlqLx.js"></script>
+    <script type="module" crossorigin src="/assets/index-DcnRqlqB.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/vendor-C0HXlhrU.js">
     <link rel="modulepreload" crossorigin href="/assets/reactflow-BQPfi37R.js">
     <link rel="modulepreload" crossorigin href="/assets/codemirror-BBL3i_JW.js">
     <link rel="modulepreload" crossorigin href="/assets/xterm--7_ns2zW.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-BrfCzrxJ.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-DD6taBMp.css">
   </head>
   <body>
     <div id="root"></div>

package/packages/gui/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@groove-dev/gui",
-  "version": "0.27.59",
+  "version": "0.27.60",
   "description": "GROOVE GUI — visual agent control plane",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",

package/packages/gui/src/components/network/activity-chart.jsx ADDED Viewed

@@ -0,0 +1,245 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useRef, useEffect, useState, useCallback, useMemo, memo } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { HEX, hexAlpha } from '../../lib/theme-hex';
+import { Badge } from '../ui/badge';
+function shortAddr(addr) {
+  if (!addr || typeof addr !== 'string') return '—';
+  if (addr.length < 14) return addr;
+  return `${addr.slice(0, 6)}…${addr.slice(-4)}`;
+}
+export const ActivityChart = memo(function ActivityChart() {
+  const snapshots = useGrooveStore((s) => s.networkSnapshots);
+  const nodes = useGrooveStore((s) => s.networkStatus.nodes || []);
+  const ownNodeId = useGrooveStore((s) => s.networkNode.nodeId);
+  const containerRef = useRef(null);
+  const canvasRef = useRef(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const [hover, setHover] = useState(null);
+  const { width, height } = size;
+  const pad = { top: 28, right: 12, bottom: 8, left: 12 };
+  const w = Math.max(width - pad.left - pad.right, 0);
+  const h = Math.max(height - pad.top - pad.bottom, 0);
+  const chartData = useMemo(() => {
+    if (!snapshots || snapshots.length < 2) return [];
+    return snapshots;
+  }, [snapshots]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      const { width: cw, height: ch } = entries[0].contentRect;
+      if (cw > 0 && ch > 0) setSize({ width: Math.floor(cw), height: Math.floor(ch) });
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const onMouseMove = useCallback((e) => {
+    const canvas = canvasRef.current;
+    if (!canvas || !chartData.length || w <= 0) return;
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left - pad.left;
+    if (x < 0 || x > w) { setHover(null); return; }
+    const index = Math.round((x / w) * (chartData.length - 1));
+    setHover({ x: pad.left + (index / Math.max(chartData.length - 1, 1)) * w, index });
+  }, [chartData, w, pad.left]);
+  const onMouseLeave = useCallback(() => setHover(null), []);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !chartData.length || width <= 0 || height <= 0 || w <= 0 || h <= 0) return;
+    const ctx = canvas.getContext('2d');
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    ctx.scale(dpr, dpr);
+    ctx.clearRect(0, 0, width, height);
+    const globalSessions = chartData.map((d) => d.globalSessions);
+    const mySessions = chartData.map((d) => d.mySessions);
+    const maxVal = Math.max(...globalSessions, ...mySessions, 1);
+    const xAt = (i) => pad.left + (i / Math.max(chartData.length - 1, 1)) * w;
+    const yAt = (v) => pad.top + h - (v / maxVal) * h;
+    // Horizontal grid lines
+    ctx.setLineDash([2, 4]);
+    ctx.strokeStyle = hexAlpha(HEX.text4, 0.2);
+    ctx.lineWidth = 1;
+    for (let i = 1; i <= 3; i++) {
+      const y = pad.top + (h / 4) * i;
+      ctx.beginPath();
+      ctx.moveTo(pad.left, y);
+      ctx.lineTo(pad.left + w, y);
+      ctx.stroke();
+    }
+    ctx.setLineDash([]);
+    // Y-axis labels
+    ctx.font = "9px 'JetBrains Mono Variable', monospace";
+    ctx.textAlign = 'left';
+    ctx.fillStyle = hexAlpha(HEX.text3, 0.5);
+    ctx.fillText(String(maxVal), pad.left + 4, pad.top + 10);
+    ctx.fillText(String(Math.round(maxVal / 2)), pad.left + 4, pad.top + h / 2 + 4);
+    // Network line — gradient fill
+    ctx.beginPath();
+    ctx.moveTo(pad.left, pad.top + h);
+    for (let i = 0; i < chartData.length; i++) {
+      ctx.lineTo(xAt(i), yAt(globalSessions[i]));
+    }
+    ctx.lineTo(xAt(chartData.length - 1), pad.top + h);
+    ctx.closePath();
+    const grad = ctx.createLinearGradient(0, pad.top, 0, pad.top + h);
+    grad.addColorStop(0, hexAlpha(HEX.purple, 0.2));
+    grad.addColorStop(0.7, hexAlpha(HEX.purple, 0.04));
+    grad.addColorStop(1, hexAlpha(HEX.purple, 0));
+    ctx.fillStyle = grad;
+    ctx.fill();
+    // Network line — stroke
+    ctx.beginPath();
+    ctx.strokeStyle = HEX.purple;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = 'round';
+    for (let i = 0; i < chartData.length; i++) {
+      const x = xAt(i);
+      const y = yAt(globalSessions[i]);
+      i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+    }
+    ctx.stroke();
+    // Your Node line — stroke only
+    ctx.beginPath();
+    ctx.strokeStyle = HEX.accent;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = 'round';
+    for (let i = 0; i < chartData.length; i++) {
+      const x = xAt(i);
+      const y = yAt(mySessions[i]);
+      i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+    }
+    ctx.stroke();
+    // Inline legend (top-right)
+    ctx.font = "9px 'Inter Variable', sans-serif";
+    ctx.textAlign = 'right';
+    let rx = width - pad.right - 4;
+    const ly = 14;
+    ctx.fillStyle = HEX.accent;
+    ctx.fillText('Your Node', rx, ly);
+    rx -= ctx.measureText('Your Node').width + 4;
+    ctx.beginPath(); ctx.arc(rx, ly - 3, 2.5, 0, Math.PI * 2); ctx.fill();
+    rx -= 14;
+    ctx.fillStyle = HEX.purple;
+    ctx.fillText('Network', rx, ly);
+    rx -= ctx.measureText('Network').width + 4;
+    ctx.beginPath(); ctx.arc(rx, ly - 3, 2.5, 0, Math.PI * 2); ctx.fill();
+    // Hover
+    if (hover && hover.index >= 0 && hover.index < chartData.length) {
+      const hx = hover.x;
+      const d = chartData[hover.index];
+      // Crosshair
+      ctx.beginPath();
+      ctx.moveTo(hx, pad.top);
+      ctx.lineTo(hx, pad.top + h);
+      ctx.strokeStyle = hexAlpha(HEX.text1, 0.15);
+      ctx.lineWidth = 1;
+      ctx.stroke();
+      // Dots
+      ctx.beginPath(); ctx.arc(hx, yAt(d.globalSessions), 3, 0, Math.PI * 2);
+      ctx.fillStyle = HEX.purple; ctx.fill();
+      ctx.beginPath(); ctx.arc(hx, yAt(d.mySessions), 3, 0, Math.PI * 2);
+      ctx.fillStyle = HEX.accent; ctx.fill();
+      // Tooltip
+      const lines = [
+        { label: 'Network', value: String(d.globalSessions), color: HEX.purple },
+        { label: 'Your Node', value: String(d.mySessions), color: HEX.accent },
+        { label: 'Nodes', value: String(d.nodeCount), color: HEX.text2 },
+      ];
+      const tooltipW = 104;
+      const tooltipH = lines.length * 16 + 12;
+      let tx = hx + 12;
+      if (tx + tooltipW > width - 8) tx = hx - tooltipW - 12;
+      const ty = Math.max(pad.top, yAt(d.globalSessions) - tooltipH / 2);
+      ctx.fillStyle = hexAlpha(HEX.surface0, 0.92);
+      ctx.beginPath(); ctx.roundRect(tx, ty, tooltipW, tooltipH, 4); ctx.fill();
+      ctx.strokeStyle = hexAlpha(HEX.text4, 0.2);
+      ctx.lineWidth = 1; ctx.stroke();
+      ctx.textAlign = 'left';
+      lines.forEach((line, i) => {
+        const rowY = ty + 14 + i * 16;
+        ctx.beginPath(); ctx.arc(tx + 8, rowY - 3, 2, 0, Math.PI * 2);
+        ctx.fillStyle = line.color; ctx.fill();
+        ctx.font = "8px 'Inter Variable', sans-serif";
+        ctx.fillStyle = HEX.text3; ctx.fillText(line.label, tx + 14, rowY);
+        ctx.font = "9px 'JetBrains Mono Variable', monospace";
+        ctx.fillStyle = HEX.text0; ctx.textAlign = 'right';
+        ctx.fillText(line.value, tx + tooltipW - 8, rowY);
+        ctx.textAlign = 'left';
+      });
+    }
+  }, [chartData, width, height, hover, w, h, pad]);
+  const activeNodes = nodes.filter((n) => n.status === 'active');
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-3 pt-2.5 pb-1 flex-shrink-0 flex items-center justify-between">
+        <span className="text-2xs font-mono text-text-3 uppercase tracking-widest">Network Activity</span>
+        <span className="text-2xs font-mono text-text-3 tabular-nums">{activeNodes.length} nodes</span>
+      </div>
+      <div className="relative flex-1 min-h-0">
+        {chartData.length < 2 ? (
+          <div className="absolute inset-0 flex items-center justify-center">
+            <span className="text-xs font-mono text-text-3">Collecting network data…</span>
+          </div>
+        ) : (
+          <div ref={containerRef} className="absolute inset-0">
+            {width > 0 && height > 0 && (
+              <canvas
+                ref={canvasRef}
+                style={{ width, height }}
+                className="block cursor-crosshair"
+                onMouseMove={onMouseMove}
+                onMouseLeave={onMouseLeave}
+              />
+            )}
+          </div>
+        )}
+      </div>
+      <div className="px-3 py-1.5 border-t border-border-subtle flex items-center gap-2 flex-shrink-0 font-mono text-2xs" style={{ background: hexAlpha(HEX.accent, 0.04) }}>
+        <span className="text-text-3">{activeNodes.length} node{activeNodes.length !== 1 ? 's' : ''} online</span>
+        {activeNodes.map((n) => {
+          const id = n.node_id || n.nodeId || '';
+          const isSelf = ownNodeId && id === ownNodeId;
+          const layers = Array.isArray(n.layers) ? `${n.layers[0]}-${n.layers[1]}` : '';
+          return (
+            <span key={id} className={isSelf ? 'text-accent' : 'text-text-2'}>
+              {shortAddr(id)}{isSelf ? ' (You' : '('}{layers ? ` · ${layers}` : ''})
+            </span>
+          );
+        })}
+      </div>
+    </div>
+  );
+});

package/packages/gui/src/components/network/compute-header.jsx CHANGED Viewed

@@ -121,7 +121,7 @@ export const ComputeHeader = memo(function ComputeHeader() {
   const loadColor = compute.avgLoad > 2.0 ? HEX.danger : compute.avgLoad > 1.0 ? HEX.warning : HEX.success;
   const activeModel = models.length > 0
     ? (typeof models[0] === 'string' ? models[0] : models[0].name)
-    : 'google/gemma-3-4b';
+    : 'Qwen/Qwen3-4B';
   const kpis = [
     { label: 'RAM', value: `${fmtMbToGb(compute.totalRamMb)} GB`, color: HEX.accent, hint: 'Total RAM across all network nodes.' },

package/packages/gui/src/components/network/network-health.jsx CHANGED Viewed

@@ -22,7 +22,7 @@ export const NetworkHealth = memo(function NetworkHealth() {
   const node = useGrooveStore((s) => s.networkNode);
   const nodes = Array.isArray(status.nodes) ? status.nodes : [];
-  const totalLayers = status.totalLayers || 34;
+  const totalLayers = status.totalLayers || 36;
   const covered = status.coverage || 0;
   const coverage = coverageState(covered, totalLayers);
   const coveragePct = totalLayers ? Math.min(100, (covered / totalLayers) * 100) : 0;

package/packages/gui/src/components/network/network-status.jsx CHANGED Viewed

@@ -24,7 +24,7 @@ function coverageState(covered, total) {
 function KpiTile({ icon: Icon, label, value, sub }) {
   return (
-    <div className="rounded-lg border border-border bg-surface-1 px-3 py-2.5 flex items-center gap-2.5 min-w-0">
+    <div className="rounded-sm border border-border bg-surface-1 px-3 py-2.5 flex items-center gap-2.5 min-w-0">
       <div className="w-8 h-8 rounded-md bg-accent/10 text-accent flex items-center justify-center flex-shrink-0">
         <Icon size={14} />
       </div>
@@ -53,7 +53,7 @@ export function NetworkStatus() {
   return (
     <div className="flex flex-col gap-3">
       {/* Signal connection indicator */}
-      <div className="flex items-center gap-2 px-3 py-2 rounded-lg border border-border bg-surface-1">
+      <div className="flex items-center gap-2 px-3 py-2 rounded-sm border border-border bg-surface-1">
         <StatusDot status={signalReachable ? 'running' : 'crashed'} size="sm" />
         <span className="text-2xs font-sans text-text-3">Signal:</span>
         <span className="text-2xs font-mono text-text-1">signal.groovedev.ai</span>
@@ -71,7 +71,7 @@ export function NetworkStatus() {
       </div>
       {/* Coverage bar */}
-      <div className="rounded-lg border border-border bg-surface-1 px-4 py-3">
+      <div className="rounded-sm border border-border bg-surface-1 px-4 py-3">
         <div className="flex items-center justify-between mb-2">
           <span className="text-xs font-semibold text-text-1 font-sans">Layer Coverage</span>
           <Badge variant={coverage.tone}>{coverage.label}</Badge>
@@ -86,7 +86,7 @@ export function NetworkStatus() {
       </div>
       {/* Models */}
-      <div className="rounded-lg border border-border bg-surface-1 overflow-hidden">
+      <div className="rounded-sm border border-border bg-surface-1 overflow-hidden">
         <div className="px-4 py-2.5 border-b border-border-subtle">
           <span className="text-xs font-semibold text-text-1 font-sans">Models</span>
         </div>
@@ -111,7 +111,7 @@ export function NetworkStatus() {
       </div>
       {/* Nodes table */}
-      <div className="rounded-lg border border-border bg-surface-1 overflow-hidden">
+      <div className="rounded-sm border border-border bg-surface-1 overflow-hidden">
         <button
           onClick={() => setNodesOpen((v) => !v)}
           className="w-full flex items-center gap-2 px-4 py-2.5 border-b border-border-subtle cursor-pointer hover:bg-surface-2/40 transition-colors"

package/packages/gui/src/components/network/node-details.jsx CHANGED Viewed

@@ -29,7 +29,7 @@ export function NodeDetails() {
   const events = useGrooveStore((s) => s.networkEvents);
   return (
-    <div className="flex flex-col rounded-lg border border-border bg-surface-1 overflow-hidden min-h-0">
+    <div className="flex flex-col rounded-sm border border-border bg-surface-1 overflow-hidden min-h-0">
       <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border-subtle">
         <Activity size={12} className="text-text-3" />
         <span className="text-xs font-semibold text-text-1 font-sans">Node Activity</span>

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

@@ -104,6 +104,7 @@ export const useGrooveStore = create((set, get) => ({
   networkVersion: { installed: null, latest: null, updateAvailable: false },
   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: [],
   // ── Marketplace Auth ───────────────────────────────────────
   marketplaceUser: null,        // { id, displayName, avatar, ... } or null
@@ -712,6 +713,24 @@ export const useGrooveStore = create((set, get) => ({
             };
           }
           set(nsUpdate);
+          // Push snapshot for activity chart
+          const wsNodes = nsData.nodes || [];
+          const wsOwnId = get().networkNode.nodeId;
+          const wsOwn = wsOwnId ? wsNodes.find((n) => (n.node_id || n.nodeId) === wsOwnId) : null;
+          const wsActive = wsNodes.filter((n) => n.status === 'active');
+          const wsSnap = {
+            t: Date.now(),
+            globalSessions: nsData.activeSessions || 0,
+            mySessions: wsOwn?.active_sessions ?? wsOwn?.sessions ?? 0,
+            nodeCount: wsActive.length,
+            avgLoad: wsActive.length > 0 ? wsActive.reduce((s, n) => s + (n.load || 0), 0) / wsActive.length : 0,
+            myLoad: wsOwn?.load ?? 0,
+          };
+          let wsSnapshots = [...get().networkSnapshots, wsSnap];
+          if (wsSnapshots.length > 100) wsSnapshots = wsSnapshots.slice(-100);
+          set({ networkSnapshots: wsSnapshots });
           break;
         }
@@ -2106,6 +2125,26 @@ export const useGrooveStore = create((set, get) => ({
         };
       }
       set(update);
+      // Push snapshot for activity chart
+      if (data) {
+        const ownId = get().networkNode.nodeId;
+        const nodes = data.nodes || [];
+        const ownNode = ownId ? nodes.find((n) => (n.node_id || n.nodeId) === ownId) : null;
+        const activeNodes = nodes.filter((n) => n.status === 'active');
+        const snap = {
+          t: Date.now(),
+          globalSessions: data.activeSessions || 0,
+          mySessions: ownNode?.active_sessions ?? ownNode?.sessions ?? 0,
+          nodeCount: activeNodes.length,
+          avgLoad: activeNodes.length > 0 ? activeNodes.reduce((s, n) => s + (n.load || 0), 0) / activeNodes.length : 0,
+          myLoad: ownNode?.load ?? 0,
+        };
+        let snapshots = [...get().networkSnapshots, snap];
+        if (snapshots.length > 100) snapshots = snapshots.slice(-100);
+        set({ networkSnapshots: snapshots });
+      }
       return data;
     } catch {
       set({ networkStatusReachable: false });

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

@@ -9,11 +9,11 @@ import { ScrollArea } from '../components/ui/scroll-area';
 import { cn } from '../lib/cn';
 import { NodeToggle } from '../components/network/node-toggle';
 import { ComputeHeader } from '../components/network/compute-header';
-import { FleetTable } from '../components/network/fleet-table';
+import { ActivityChart } from '../components/network/activity-chart';
 import { ActivityStream } from '../components/network/activity-stream';
 import { NetworkHealth } from '../components/network/network-health';
-import { HEX } from '../lib/theme-hex';
-import { Globe, Download, Check, AlertCircle, Loader2, Trash2, ArrowUpCircle } from 'lucide-react';
+import { HEX, hexAlpha } from '../lib/theme-hex';
+import { Globe, Download, Check, AlertCircle, Loader2, Trash2, ArrowUpCircle, Zap } from 'lucide-react';
 const REQUIREMENTS = [
   'Python 3.10 or higher',
@@ -312,6 +312,99 @@ function NetworkHeader() {
   );
 }
+function IdleHero() {
+  const node = useGrooveStore((s) => s.networkNode);
+  const networkStatus = useGrooveStore((s) => s.networkStatus);
+  const startNetworkNode = useGrooveStore((s) => s.startNetworkNode);
+  const [pending, setPending] = useState(false);
+  const hardware = node.hardware || {};
+  const activeNodes = (networkStatus.nodes || []).filter((n) => n.status === 'active').length;
+  const activeSessions = networkStatus.activeSessions || 0;
+  async function handleStart() {
+    setPending(true);
+    try { await startNetworkNode(); }
+    catch { /* toasted in store */ }
+    setPending(false);
+  }
+  return (
+    <div className="flex flex-col h-full">
+      <NetworkHeader />
+      <div
+        className="flex-1 flex items-center justify-center bg-surface-0"
+        style={{ background: `radial-gradient(ellipse at 50% 40%, ${hexAlpha(HEX.accent, 0.06)} 0%, transparent 70%) ${HEX.surface0}` }}
+      >
+        <div className="max-w-lg w-full px-6 flex flex-col items-center text-center">
+          <div
+            className="w-24 h-24 rounded-full flex items-center justify-center mb-6 mx-auto"
+            style={{
+              background: hexAlpha(HEX.accent, 0.08),
+              border: `1px solid ${hexAlpha(HEX.accent, 0.15)}`,
+              boxShadow: `0 0 40px ${hexAlpha(HEX.accent, 0.1)}`,
+            }}
+          >
+            <Globe size={56} className="text-accent" strokeWidth={1.25} />
+          </div>
+          <h2 className="text-xl font-semibold text-text-0 font-sans text-center">
+            Join the Groove Network
+          </h2>
+          <p className="text-sm text-text-2 font-sans text-center leading-relaxed mt-2 max-w-sm mx-auto">
+            Contribute your compute to power decentralized AI inference. Your hardware runs model shards alongside other nodes in the network.
+          </p>
+          <div className="mt-8 w-full">
+            <div className="text-2xs font-mono text-text-3 uppercase tracking-widest mb-2 text-left">Your Hardware</div>
+            <div className="grid grid-cols-3 gap-2">
+              <div className="bg-surface-1 rounded-sm border border-border-subtle px-4 py-3">
+                <div className="text-2xs font-mono text-text-4 uppercase tracking-wider">Device</div>
+                <div className="text-sm font-mono text-text-0 mt-1 truncate">{hardware.device || 'auto'}</div>
+              </div>
+              <div className="bg-surface-1 rounded-sm border border-border-subtle px-4 py-3">
+                <div className="text-2xs font-mono text-text-4 uppercase tracking-wider">Memory</div>
+                <div className="text-sm font-mono text-text-0 mt-1 truncate">{hardware.memory || '—'}</div>
+              </div>
+              <div className="bg-surface-1 rounded-sm border border-border-subtle px-4 py-3">
+                <div className="text-2xs font-mono text-text-4 uppercase tracking-wider">GPU</div>
+                <div className="text-sm font-mono text-text-0 mt-1 truncate">{hardware.gpu || 'None'}</div>
+              </div>
+            </div>
+          </div>
+          <div className="mt-6 w-full max-w-sm mx-auto">
+            <Button variant="primary" size="lg" onClick={handleStart} disabled={pending} className="w-full">
+              {pending ? (
+                <><Loader2 size={14} className="animate-spin" /> Connecting…</>
+              ) : (
+                <><Zap size={14} /> Start Contributing</>
+              )}
+            </Button>
+          </div>
+          <div className="mt-4 text-center text-2xs font-mono text-text-3">
+            {activeNodes > 0 || activeSessions > 0 ? (
+              <span>
+                <span className="text-accent">{activeNodes}</span> node{activeNodes !== 1 ? 's' : ''} online · {activeSessions} active session{activeSessions !== 1 ? 's' : ''}
+              </span>
+            ) : (
+              <span>Checking network status…</span>
+            )}
+          </div>
+          {node.nodeId && (
+            <div className="mt-6 text-center text-2xs font-mono text-text-4">
+              Node identity: {node.nodeId.length > 14 ? `${node.nodeId.slice(0, 6)}…${node.nodeId.slice(-4)}` : node.nodeId}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
 export default function NetworkView() {
   const fetchNetworkNodeStatus = useGrooveStore((s) => s.fetchNetworkNodeStatus);
   const fetchNetworkStatus = useGrooveStore((s) => s.fetchNetworkStatus);
@@ -341,18 +434,7 @@ export default function NetworkView() {
   }
   if (!nodeActive) {
-    return (
-      <div className="flex flex-col h-full">
-        <NetworkHeader />
-        <ScrollArea className="flex-1">
-          <div className="flex items-center justify-center min-h-full px-6 py-12">
-            <div className="w-full max-w-md">
-              <NodeToggle />
-            </div>
-          </div>
-        </ScrollArea>
-      </div>
-    );
+    return <IdleHero />;
   }
   return (
@@ -361,10 +443,10 @@ export default function NetworkView() {
       <ComputeHeader />
-      <div className="flex-1 min-h-0 flex flex-col" style={{ background: '#282c34', gap: '1px' }}>
+      <div className="flex-1 min-h-0 flex flex-col" style={{ background: HEX.surface3, gap: '1px' }}>
         <div className="min-h-0 flex-1 grid" style={{ gridTemplateColumns: '3fr 1.5fr', gap: '0 1px' }}>
           <div className="min-w-0 min-h-0 overflow-hidden bg-surface-1">
-            <FleetTable />
+            <ActivityChart />
           </div>
           <div className="min-w-0 min-h-0 overflow-hidden bg-surface-1">
             <NetworkHealth />

package/default/fix-beta-endpoint-deployment.md DELETED Viewed

@@ -1,68 +0,0 @@
-# BUG: POST /api/beta/validate returns 404 — not deployed
-From: Groove UI Team
-To: groovedev.ai Team
-Date: 2026-04-18
-Priority: BLOCKING
-## The Problem
-The beta invite code validation endpoint is returning 404 from nginx. The route handler was built (routes/beta.js, mounted in server.js) but it's not reachable in production.
-```bash
-curl -s https://groovedev.ai/api/beta/validate \
-  -H 'Content-Type: application/json' \
-  -d '{"code":"GROOVE-NET-ALPHA-001","machineId":"test"}'
-```
-Returns:
-```html
-<center>nginx/1.24.0 (Ubuntu)</center>
-404
-```
-This is an nginx 404, not an app-level 404. The request never reaches the Node.js server.
-## What Should Happen
-The endpoint should return:
-```json
-{"valid": true, "expiresAt": "2026-07-18T00:00:00Z", "features": ["network-node", "network-consumer"], "message": "Welcome to the Groove Network beta"}
-```
-Or for invalid codes:
-```json
-{"valid": false, "message": "Invalid invite code"}
-```
-## Likely Causes
-1. Nginx isn't proxying /api/beta/* to the Node.js app — needs a location block or the existing proxy_pass doesn't cover this path
-2. The Node.js server isn't running or was restarted without the new routes
-3. The route is mounted at a different path than /api/beta/validate
-## What to Check
-1. Nginx config — does it proxy /api/* to the Node.js backend? If routes are whitelisted individually, add /api/beta/*
-2. Is the Node.js server running? Check with: `pm2 status` or `systemctl status groovedev` (whatever process manager is used)
-3. Did server.js get deployed with the beta route mount? Verify the deployed code includes: `app.use('/api/beta', betaRoutes)` or equivalent
-4. Test locally on the server: `curl http://localhost:<app-port>/api/beta/validate -H 'Content-Type: application/json' -d '{"code":"test","machineId":"test"}'` — if this works, it's purely an nginx issue
-## Impact
-Every Groove app trying to activate a beta invite code fails. We have a hardcoded fallback for 5 ALPHA codes, but any codes generated through the admin portal (like GROOVE-NET-SWIFT-899) are completely broken until this is fixed. Beta testers cannot activate.
-## Expected Nginx Config
-Something like this should work (adjust upstream port):
-```nginx
-location /api/beta/ {
-    proxy_pass http://127.0.0.1:3000;
-    proxy_set_header Host $host;
-    proxy_set_header X-Real-IP $remote_addr;
-    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-    proxy_set_header X-Forwarded-Proto $scheme;
-}
-```
-Or if there's already a catch-all /api/ proxy, make sure it's not being overridden by a more specific location block.