groove-dev 0.27.57 → 0.27.59

package/node_modules/@groove-dev/gui/src/components/network/fleet-table.jsx

@@ -0,0 +1,190 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { memo, useState, useMemo } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { cn } from '../../lib/cn';
+import { HEX } from '../../lib/theme-hex';
+import { ScrollArea } from '../ui/scroll-area';
+import { StatusDot } from '../ui/status-dot';
+import { Badge } from '../ui/badge';
+import { ArrowUp, ArrowDown } from 'lucide-react';
+
+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)}`;
+}
+
+function fmtMb(mb) {
+  if (!mb && mb !== 0) return '\u2014';
+  if (mb >= 1024) return `${(mb / 1024).toFixed(1)} GB`;
+  return `${Math.round(mb)} MB`;
+}
+
+function statusMap(s) {
+  if (s === 'active') return 'running';
+  if (s === 'connecting') return 'starting';
+  return 'crashed';
+}
+
+function fmtUptime(secs) {
+  if (!secs && secs !== 0) return '\u2014';
+  const d = Math.floor(secs / 86400);
+  const h = Math.floor((secs % 86400) / 3600);
+  const m = Math.floor((secs % 3600) / 60);
+  if (d > 0) return `${d}d ${h}h`;
+  if (h > 0) return `${h}h ${m}m`;
+  return `${m}m`;
+}
+
+const COLUMNS = [
+  { key: 'status', label: 'STATUS', w: 'w-[52px]' },
+  { key: 'node', label: 'NODE', w: 'flex-1 min-w-[90px]' },
+  { key: 'device', label: 'DEVICE', w: 'w-[72px]' },
+  { key: 'gpu', label: 'GPU', w: 'w-[90px]' },
+  { key: 'ram', label: 'RAM', w: 'w-[88px]', numeric: true },
+  { key: 'vram', label: 'VRAM', w: 'w-[88px]', numeric: true },
+  { key: 'cpu', label: 'CPU', w: 'w-[42px]', numeric: true },
+  { key: 'gpuUtil', label: 'GPU%', w: 'w-[48px]', numeric: true },
+  { key: 'layers', label: 'LAYERS', w: 'w-[60px]' },
+  { key: 'sessions', label: 'SESS', w: 'w-[42px]', numeric: true },
+  { key: 'uptime', label: 'UPTIME', w: 'w-[60px]' },
+];
+
+function getSortValue(node, key) {
+  switch (key) {
+    case 'status': return node.status === 'active' ? 0 : node.status === 'connecting' ? 1 : 2;
+    case 'node': return (node.node_id || node.nodeId || '').toLowerCase();
+    case 'device': return (node.device || '').toLowerCase();
+    case 'gpu': return (node.gpu_model || '').toLowerCase();
+    case 'ram': return node.ram_mb || 0;
+    case 'vram': return node.vram_mb || 0;
+    case 'cpu': return node.cpu_cores || 0;
+    case 'layers': return Array.isArray(node.layers) ? node.layers[0] : 0;
+    case 'gpuUtil': return node.gpu_utilization_pct ?? -1;
+    case 'sessions': return node.sessions || node.active_sessions || 0;
+    case 'uptime': return node.uptime_seconds || 0;
+    default: return 0;
+  }
+}
+
+export const FleetTable = memo(function FleetTable() {
+  const nodes = useGrooveStore((s) => s.networkStatus.nodes || []);
+  const ownNodeId = useGrooveStore((s) => s.networkNode.nodeId);
+  const [sortKey, setSortKey] = useState('status');
+  const [sortAsc, setSortAsc] = useState(true);
+
+  function handleSort(key) {
+    if (sortKey === key) setSortAsc((v) => !v);
+    else { setSortKey(key); setSortAsc(true); }
+  }
+
+  const sorted = useMemo(() => {
+    const list = [...nodes];
+    list.sort((a, b) => {
+      const va = getSortValue(a, sortKey);
+      const vb = getSortValue(b, sortKey);
+      if (va < vb) return sortAsc ? -1 : 1;
+      if (va > vb) return sortAsc ? 1 : -1;
+      return 0;
+    });
+    return list;
+  }, [nodes, sortKey, sortAsc]);
+
+  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">Node Fleet</span>
+        <span className="text-2xs font-mono text-text-3 tabular-nums">{nodes.length} nodes</span>
+      </div>
+
+      <div className="flex items-center gap-0 px-3 py-1 flex-shrink-0" style={{ background: 'rgba(51,175,188,0.04)' }}>
+        {COLUMNS.map((col) => (
+          <button
+            key={col.key}
+            onClick={() => handleSort(col.key)}
+            className={cn(
+              'flex items-center gap-0.5 text-2xs font-mono text-text-4 uppercase tracking-wider cursor-pointer hover:text-text-2 transition-colors',
+              col.w,
+              col.numeric && 'justify-end',
+            )}
+          >
+            {col.label}
+            {sortKey === col.key && (
+              sortAsc ? <ArrowUp size={8} /> : <ArrowDown size={8} />
+            )}
+          </button>
+        ))}
+      </div>
+
+      <ScrollArea className="flex-1 min-h-0">
+        {sorted.length === 0 ? (
+          <div className="px-3 py-6 text-2xs font-mono text-text-4 text-center">No nodes online</div>
+        ) : (
+          <div>
+            {sorted.map((n, i) => {
+              const id = n.node_id || n.nodeId || '';
+              const isSelf = ownNodeId && id && id === ownNodeId;
+              const layersLabel = Array.isArray(n.layers) ? `${n.layers[0]}-${n.layers[1]}` : n.layers || '\u2014';
+              const isActive = n.status === 'active' || n.status === 'connecting';
+              const gpuPct = n.gpu_utilization_pct;
+              const gpuClr = gpuPct == null ? undefined : gpuPct > 80 ? HEX.danger : gpuPct > 50 ? HEX.warning : HEX.success;
+              const ramPct = n.ram_pct || (n.ram_mb > 0 && n.ram_used_mb != null ? (n.ram_used_mb / n.ram_mb) * 100 : null);
+              const vramPct = n.vram_mb > 0 && n.vram_used_mb != null ? (n.vram_used_mb / n.vram_mb) * 100 : null;
+
+              return (
+                <div
+                  key={id || i}
+                  className={cn(
+                    'flex items-center gap-0 px-3 py-2 text-xs font-mono transition-colors',
+                    isSelf ? 'bg-[rgba(51,175,188,0.06)]' : 'hover:bg-[rgba(51,175,188,0.06)]',
+                  )}
+                >
+                  <div className={cn('flex items-center gap-1.5', COLUMNS[0].w)}>
+                    <span className="relative flex-shrink-0 w-[6px] h-[6px]">
+                      <span className="absolute inset-0 rounded-sm" style={{ background: isActive ? HEX.success : HEX.text4 }} />
+                      {isActive && (
+                        <span
+                          className="absolute inset-[-2px] rounded-sm"
+                          style={{ background: HEX.success, opacity: 0.15, animation: 'node-pulse-bar 2s ease-in-out infinite' }}
+                        />
+                      )}
+                    </span>
+                  </div>
+                  <div className={cn('truncate text-text-1', COLUMNS[1].w)}>
+                    {shortAddr(id)}
+                    {isSelf && <Badge variant="accent" className="ml-1 text-2xs">You</Badge>}
+                  </div>
+                  <div className={cn('truncate text-text-2', COLUMNS[2].w)}>{n.device || '\u2014'}</div>
+                  <div className={cn('truncate text-text-2', COLUMNS[3].w)}>{n.gpu_model || '\u2014'}</div>
+                  <div className={cn('text-right tabular-nums', COLUMNS[4].w)}>
+                    <div className="text-text-2">{n.ram_used_mb != null ? `${fmtMb(n.ram_used_mb)}/${fmtMb(n.ram_mb)}` : fmtMb(n.ram_mb)}</div>
+                    {ramPct != null && (
+                      <div className="h-0.5 rounded-sm mt-0.5 overflow-hidden" style={{ background: 'rgba(51,175,188,0.08)' }}>
+                        <div className="h-full rounded-sm" style={{ width: `${Math.min(100, ramPct)}%`, background: ramPct > 90 ? HEX.danger : ramPct > 70 ? HEX.warning : HEX.accent }} />
+                      </div>
+                    )}
+                  </div>
+                  <div className={cn('text-right tabular-nums', COLUMNS[5].w)}>
+                    <div className="text-text-2">{n.vram_used_mb != null ? `${fmtMb(n.vram_used_mb)}/${fmtMb(n.vram_mb)}` : fmtMb(n.vram_mb)}</div>
+                    {vramPct != null && (
+                      <div className="h-0.5 rounded-sm mt-0.5 overflow-hidden" style={{ background: 'rgba(51,175,188,0.08)' }}>
+                        <div className="h-full rounded-sm" style={{ width: `${Math.min(100, vramPct)}%`, background: vramPct > 90 ? HEX.danger : vramPct > 70 ? HEX.warning : HEX.info }} />
+                      </div>
+                    )}
+                  </div>
+                  <div className={cn('text-right text-text-2 tabular-nums', COLUMNS[6].w)}>{n.cpu_cores || '\u2014'}</div>
+                  <div className={cn('text-right tabular-nums', COLUMNS[7].w)} style={{ color: gpuClr }}>
+                    {gpuPct != null ? `${Math.round(gpuPct)}%` : '\u2014'}
+                  </div>
+                  <div className={cn('text-text-2', COLUMNS[8].w)}>{layersLabel}</div>
+                  <div className={cn('text-right text-text-2 tabular-nums', COLUMNS[9].w)}>{n.sessions ?? n.active_sessions ?? 0}</div>
+                  <div className={cn('text-text-2', COLUMNS[10].w)}>{fmtUptime(n.uptime_seconds)}</div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </ScrollArea>
+    </div>
+  );
+});

package/node_modules/@groove-dev/gui/src/components/network/network-health.jsx

@@ -0,0 +1,135 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { memo } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { cn } from '../../lib/cn';
+import { HEX, hexAlpha } from '../../lib/theme-hex';
+import { fmtNum } from '../../lib/format';
+import { StatusDot } from '../ui/status-dot';
+import { Badge } from '../ui/badge';
+import { ScrollArea } from '../ui/scroll-area';
+
+function coverageState(covered, total) {
+  if (!total) return { color: HEX.danger, label: 'Insufficient' };
+  const pct = covered / total;
+  if (pct >= 1) return { color: HEX.success, label: 'Full coverage' };
+  if (pct >= 0.5) return { color: HEX.warning, label: 'Partial' };
+  return { color: HEX.danger, label: 'Insufficient' };
+}
+
+export const NetworkHealth = memo(function NetworkHealth() {
+  const status = useGrooveStore((s) => s.networkStatus);
+  const signalReachable = useGrooveStore((s) => s.networkStatusReachable);
+  const node = useGrooveStore((s) => s.networkNode);
+
+  const nodes = Array.isArray(status.nodes) ? status.nodes : [];
+  const totalLayers = status.totalLayers || 34;
+  const covered = status.coverage || 0;
+  const coverage = coverageState(covered, totalLayers);
+  const coveragePct = totalLayers ? Math.min(100, (covered / totalLayers) * 100) : 0;
+  const models = Array.isArray(status.models) ? status.models : [];
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-3 pt-2.5 pb-1 flex-shrink-0">
+        <span className="text-2xs font-mono text-text-3 uppercase tracking-widest">Network Health</span>
+      </div>
+
+      <ScrollArea className="flex-1 min-h-0">
+        <div className="px-3 py-2 space-y-3">
+          {/* Signal connection */}
+          <div className="bg-surface-0 rounded p-2.5">
+            <div className="flex items-center gap-2">
+              <span className="relative flex-shrink-0 w-[6px] h-[6px]">
+                <span className="absolute inset-0 rounded-sm" style={{ background: signalReachable ? HEX.success : HEX.danger }} />
+                {signalReachable && (
+                  <span
+                    className="absolute inset-[-2px] rounded-sm"
+                    style={{ background: HEX.success, opacity: 0.15, animation: 'node-pulse-bar 2s ease-in-out infinite' }}
+                  />
+                )}
+              </span>
+              <span className="text-2xs font-mono text-text-3">Signal</span>
+              <span className="text-2xs font-mono text-text-1">signal.groovedev.ai</span>
+              <div className="flex-1" />
+              <span className="text-2xs font-mono" style={{ color: signalReachable ? HEX.success : HEX.danger }}>
+                {signalReachable ? 'Connected' : 'Unreachable'}
+              </span>
+            </div>
+          </div>
+
+          {/* Coverage */}
+          <div className="bg-surface-0 rounded p-2.5">
+            <div className="flex items-center justify-between mb-1.5">
+              <span className="text-2xs font-mono text-text-3 uppercase tracking-wider">Layer Coverage</span>
+              <span className="text-2xs font-mono tabular-nums" style={{ color: coverage.color }}>
+                {covered}/{totalLayers}
+              </span>
+            </div>
+            <div className="h-0.5 rounded-sm overflow-hidden" style={{ background: hexAlpha(HEX.accent, 0.08) }}>
+              <div
+                className="h-full rounded-sm transition-all duration-700"
+                style={{ width: `${coveragePct}%`, background: coverage.color }}
+              />
+            </div>
+            <div className="mt-1 text-2xs font-mono text-text-4">{coverage.label}</div>
+          </div>
+
+          {/* Session throughput */}
+          <div className="bg-surface-0 rounded p-2.5">
+            <div className="flex items-center justify-between">
+              <span className="text-2xs font-mono text-text-3 uppercase tracking-wider">Sessions</span>
+              <span className="text-base font-mono font-semibold text-text-0 tabular-nums leading-none">
+                {fmtNum(status.activeSessions || 0)}
+              </span>
+            </div>
+            <div className="text-2xs font-mono text-text-4 mt-0.5">Active streams</div>
+          </div>
+
+          {/* Uptime */}
+          {node.active && (
+            <div className="bg-surface-0 rounded p-2.5">
+              <div className="flex items-center justify-between">
+                <span className="text-2xs font-mono text-text-3 uppercase tracking-wider">Node Status</span>
+                <span className="text-2xs font-mono capitalize" style={{ color: node.status === 'connected' ? HEX.success : HEX.warning }}>
+                  {node.status || 'disconnected'}
+                </span>
+              </div>
+              {node.sessions > 0 && (
+                <div className="flex items-center justify-between mt-1.5">
+                  <span className="text-2xs font-mono text-text-4">Local Sessions</span>
+                  <span className="text-xs font-mono text-text-1 tabular-nums">{node.sessions}</span>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Models */}
+          <div>
+            <div className="text-2xs font-mono text-text-3 uppercase tracking-wider mb-1.5">Models</div>
+            {models.length === 0 ? (
+              <div className="text-2xs font-mono text-text-4">No models available</div>
+            ) : (
+              <div className="space-y-1">
+                {models.map((m, i) => {
+                  const name = typeof m === 'string' ? m : m.name;
+                  const available = typeof m === 'string' ? true : !!m.available;
+                  return (
+                    <div key={i} className="flex items-center gap-2 bg-surface-0 rounded px-2.5 py-1.5">
+                      <span className="relative flex-shrink-0 w-[5px] h-[5px]">
+                        <span className="absolute inset-0 rounded-sm" style={{ background: available ? HEX.success : HEX.text4 }} />
+                      </span>
+                      <span className="text-xs font-mono text-text-1 truncate flex-1">{name}</span>
+                      <span className="text-2xs font-mono" style={{ color: available ? HEX.success : HEX.text3 }}>
+                        {available ? 'Online' : 'Offline'}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      </ScrollArea>
+    </div>
+  );
+});

package/node_modules/@groove-dev/gui/src/components/network/node-toggle.jsx

@@ -76,7 +76,7 @@ export function NodeToggle() {
   const memPct = Number.isFinite(node.memoryPct) ? node.memoryPct : null;
 
   return (
-    <div className="rounded-lg border border-border bg-surface-1 overflow-hidden">
+    <div className="rounded-sm border border-border bg-surface-1 overflow-hidden">
       {/* Hero toggle */}
       <div className="flex items-center gap-4 px-5 py-4 border-b border-border-subtle">
         <div className="flex-1 min-w-0">

package/node_modules/@groove-dev/gui/src/stores/groove.js

@@ -103,6 +103,7 @@ export const useGrooveStore = create((set, get) => ({
   networkEvents: [],
   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 },
 
   // ── Marketplace Auth ───────────────────────────────────────
   marketplaceUser: null,        // { id, displayName, avatar, ... } or null
@@ -683,9 +684,36 @@ export const useGrooveStore = create((set, get) => ({
           break;
         }
 
-        case 'network:status':
-          set({ networkStatus: { ...get().networkStatus, ...(msg.data || {}) } });
+        case 'network:status': {
+          const nsData = msg.data || {};
+          const nsUpdate = { networkStatus: { ...get().networkStatus, ...nsData } };
+          if (nsData.compute) {
+            const c = nsData.compute;
+            nsUpdate.networkCompute = {
+              totalRamMb: c.totalRamMb ?? c.total_ram_mb ?? 0,
+              totalVramMb: c.totalVramMb ?? c.total_vram_mb ?? 0,
+              totalCpuCores: c.totalCpuCores ?? c.total_cpu_cores ?? 0,
+              totalBandwidthMbps: c.totalBandwidthMbps ?? c.total_bandwidth_mbps ?? 0,
+              activeNodes: c.activeNodes ?? c.active_nodes ?? 0,
+              totalNodes: c.totalNodes ?? c.total_nodes ?? 0,
+              avgLoad: c.avgLoad ?? c.avg_load ?? 0,
+            };
+          } else if (Array.isArray(nsData.nodes) && nsData.nodes.length > 0) {
+            const wsNodes = nsData.nodes;
+            const wsActive = wsNodes.filter((n) => n.status === 'active');
+            nsUpdate.networkCompute = {
+              totalRamMb: wsNodes.reduce((s, n) => s + (n.ram_mb || 0), 0),
+              totalVramMb: wsNodes.reduce((s, n) => s + (n.vram_mb || 0), 0),
+              totalCpuCores: wsNodes.reduce((s, n) => s + (n.cpu_cores || 0), 0),
+              totalBandwidthMbps: wsNodes.reduce((s, n) => s + (n.bandwidth_mbps || 0), 0),
+              activeNodes: wsActive.length,
+              totalNodes: wsNodes.length,
+              avgLoad: wsActive.length > 0 ? wsActive.reduce((s, n) => s + (n.load || 0), 0) / wsActive.length : 0,
+            };
+          }
+          set(nsUpdate);
           break;
+        }
 
         case 'network:install:progress': {
           const { step, message, percent } = msg.data || {};
@@ -2049,10 +2077,35 @@ export const useGrooveStore = create((set, get) => ({
   async fetchNetworkStatus() {
     try {
       const data = await api.get('/network/status');
-      set({
+      const update = {
         networkStatus: { ...get().networkStatus, ...(data || {}) },
         networkStatusReachable: true,
-      });
+      };
+      if (data?.compute) {
+        const c = data.compute;
+        update.networkCompute = {
+          totalRamMb: c.totalRamMb ?? c.total_ram_mb ?? 0,
+          totalVramMb: c.totalVramMb ?? c.total_vram_mb ?? 0,
+          totalCpuCores: c.totalCpuCores ?? c.total_cpu_cores ?? 0,
+          totalBandwidthMbps: c.totalBandwidthMbps ?? c.total_bandwidth_mbps ?? 0,
+          activeNodes: c.activeNodes ?? c.active_nodes ?? 0,
+          totalNodes: c.totalNodes ?? c.total_nodes ?? 0,
+          avgLoad: c.avgLoad ?? c.avg_load ?? 0,
+        };
+      } else if (Array.isArray(data?.nodes) && data.nodes.length > 0) {
+        const nodes = data.nodes;
+        const active = nodes.filter((n) => n.status === 'active');
+        update.networkCompute = {
+          totalRamMb: nodes.reduce((s, n) => s + (n.ram_mb || 0), 0),
+          totalVramMb: nodes.reduce((s, n) => s + (n.vram_mb || 0), 0),
+          totalCpuCores: nodes.reduce((s, n) => s + (n.cpu_cores || 0), 0),
+          totalBandwidthMbps: nodes.reduce((s, n) => s + (n.bandwidth_mbps || 0), 0),
+          activeNodes: active.length,
+          totalNodes: nodes.length,
+          avgLoad: active.length > 0 ? active.reduce((s, n) => s + (n.load || 0), 0) / active.length : 0,
+        };
+      }
+      set(update);
       return data;
     } catch {
       set({ networkStatusReachable: false });

package/node_modules/@groove-dev/gui/src/views/network.jsx

@@ -1,14 +1,18 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useEffect, useState } from 'react';
 import { useGrooveStore } from '../stores/groove';
-import { ScrollArea } from '../components/ui/scroll-area';
 import { StatusDot } from '../components/ui/status-dot';
 import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
 import { Dialog, DialogContent, DialogTrigger } from '../components/ui/dialog';
+import { ScrollArea } from '../components/ui/scroll-area';
+import { cn } from '../lib/cn';
 import { NodeToggle } from '../components/network/node-toggle';
-import { NodeDetails } from '../components/network/node-details';
-import { NetworkStatus } from '../components/network/network-status';
+import { ComputeHeader } from '../components/network/compute-header';
+import { FleetTable } from '../components/network/fleet-table';
+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';
 
 const REQUIREMENTS = [
@@ -30,7 +34,7 @@ function InstallProgress({ progress }) {
       <div className="flex items-center justify-between text-2xs font-mono text-text-3 tabular-nums">
         <div className="flex items-center gap-2 text-text-2 font-sans">
           <Loader2 size={12} className="animate-spin text-accent" />
-          <span className="truncate">{progress.message || 'Installing…'}</span>
+          <span className="truncate">{progress.message || 'Installing\u2026'}</span>
         </div>
         <span>{percent}%</span>
       </div>
@@ -119,7 +123,7 @@ function UpdateProgress({ progress }) {
     <div className="flex items-center gap-2 px-3 py-1.5 rounded-md border border-border-subtle bg-surface-0">
       <Loader2 size={11} className="animate-spin text-accent flex-shrink-0" />
       <div className="flex flex-col min-w-0">
-        <span className="text-2xs font-sans text-text-1 truncate">{progress.message || 'Updating…'}</span>
+        <span className="text-2xs font-sans text-text-1 truncate">{progress.message || 'Updating\u2026'}</span>
         <div className="h-1 w-32 rounded-full bg-surface-3 overflow-hidden mt-0.5">
           <div
             className="h-full rounded-full bg-accent transition-all duration-500 ease-out"
@@ -208,7 +212,7 @@ function UninstallButton() {
           className="inline-flex items-center gap-1.5 text-2xs font-sans text-text-3 hover:text-danger transition-colors"
         >
           <Trash2 size={11} />
-          Uninstall Network Package
+          Uninstall
         </button>
       </DialogTrigger>
       <DialogContent title="Uninstall Network Package" description="Confirm uninstall">
@@ -232,13 +236,88 @@ function UninstallButton() {
   );
 }
 
+function InlineToggle({ value, onChange, disabled }) {
+  return (
+    <button
+      onClick={() => !disabled && onChange(!value)}
+      disabled={disabled}
+      className={cn(
+        'relative inline-flex h-5 w-9 rounded-full p-0.5 transition-colors flex-shrink-0',
+        disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+        value ? 'bg-accent' : 'bg-surface-5',
+      )}
+    >
+      <span
+        className={cn(
+          'inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform',
+          value ? 'translate-x-4' : 'translate-x-0',
+        )}
+      />
+    </button>
+  );
+}
+
+function NetworkHeader() {
+  const node = useGrooveStore((s) => s.networkNode);
+  const installed = useGrooveStore((s) => s.networkInstalled);
+  const version = useGrooveStore((s) => s.networkVersion);
+  const signalReachable = useGrooveStore((s) => s.networkStatusReachable);
+  const startNetworkNode = useGrooveStore((s) => s.startNetworkNode);
+  const stopNetworkNode = useGrooveStore((s) => s.stopNetworkNode);
+  const [pending, setPending] = useState(false);
+
+  async function handleToggle(next) {
+    setPending(true);
+    try {
+      if (next) await startNetworkNode();
+      else await stopNetworkNode();
+    } catch { /* toasted in store */ }
+    setPending(false);
+  }
+
+  return (
+    <div className="flex items-center gap-4 px-4 py-2 bg-surface-1 border-b border-border flex-shrink-0">
+      <h2 className="text-xs font-semibold text-text-0 font-sans tracking-wide uppercase">Network Command Center</h2>
+
+      {installed && version.installed && (
+        <>
+          <span className="text-text-4">/</span>
+          <span className="text-xs font-mono text-text-2 tabular-nums">v{String(version.installed).replace(/^v/, '')}</span>
+        </>
+      )}
+
+      {installed && <UpdateButton />}
+
+      <div className="flex-1" />
+
+      {installed && (
+        <div className="flex items-center gap-3.5 text-xs font-mono text-text-2">
+          <span className="flex items-center gap-1.5">
+            <InlineToggle value={!!node.active} onChange={handleToggle} disabled={pending} />
+            <span className="text-text-3">{node.active ? 'Contributing' : 'Idle'}</span>
+          </span>
+          <span className="flex items-center gap-1.5">
+            <span className="relative flex-shrink-0 w-[5px] h-[5px]">
+              <span className="absolute inset-0 rounded-sm" style={{ background: signalReachable ? HEX.accent : HEX.danger }} />
+            </span>
+            <span className="text-text-3">Signal</span>
+          </span>
+        </div>
+      )}
+
+      {installed && <UninstallButton />}
+
+      <StatusDot status={installed && node.active ? 'running' : installed ? 'stopped' : 'crashed'} size="sm" />
+    </div>
+  );
+}
+
 export default function NetworkView() {
   const fetchNetworkNodeStatus = useGrooveStore((s) => s.fetchNetworkNodeStatus);
   const fetchNetworkStatus = useGrooveStore((s) => s.fetchNetworkStatus);
   const checkNetworkUpdate = useGrooveStore((s) => s.checkNetworkUpdate);
-  const node = useGrooveStore((s) => s.networkNode);
   const installed = useGrooveStore((s) => s.networkInstalled);
-  const version = useGrooveStore((s) => s.networkVersion);
+  const nodeActive = useGrooveStore((s) => s.networkNode.active);
 
   useEffect(() => {
     fetchNetworkNodeStatus();
@@ -250,58 +329,52 @@ export default function NetworkView() {
     }
   }, [fetchNetworkNodeStatus, fetchNetworkStatus, checkNetworkUpdate, installed]);
 
-  return (
-    <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className="flex items-center gap-3 px-4 py-2.5 bg-surface-1 border-b border-border flex-shrink-0">
-        <Globe size={14} className="text-accent" />
-        <h2 className="text-sm font-semibold text-text-0 font-sans">Groove Network</h2>
-        <Badge variant="purple">Early Access</Badge>
-        {installed && version.installed && (
-          <span className="text-2xs font-mono text-text-3 tabular-nums">v{String(version.installed).replace(/^v/, '')}</span>
-        )}
-        {installed && <UpdateButton />}
-        <div className="flex-1" />
-        {installed && (
-          <>
-            <UninstallButton />
-            <div className="flex items-center gap-1.5 text-2xs font-sans text-text-3">
-              <StatusDot status={node.active ? 'running' : 'crashed'} size="sm" />
-              {node.active ? 'Contributing' : 'Idle'}
-            </div>
-          </>
-        )}
+  if (!installed) {
+    return (
+      <div className="flex flex-col h-full">
+        <NetworkHeader />
+        <ScrollArea className="flex-1">
+          <InstallGate />
+        </ScrollArea>
       </div>
+    );
+  }
 
-      {/* Body */}
-      <ScrollArea className="flex-1">
-        {!installed ? (
-          <InstallGate />
-        ) : (
-          <div className="p-4 grid grid-cols-1 xl:grid-cols-2 gap-4">
-            {/* Left column — node operator */}
-            <div className="flex flex-col gap-3 min-w-0">
-              <div>
-                <div className="flex items-center gap-2 mb-2 px-0.5">
-                  <span className="text-2xs font-semibold text-text-3 font-sans uppercase tracking-wider">Node Operator</span>
-                  <div className="flex-1 h-px bg-border-subtle" />
-                </div>
-                <NodeToggle />
-              </div>
-              <NodeDetails />
+  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>
+    );
+  }
 
-            {/* Right column — network status */}
-            <div className="flex flex-col gap-3 min-w-0">
-              <div className="flex items-center gap-2 px-0.5">
-                <span className="text-2xs font-semibold text-text-3 font-sans uppercase tracking-wider">Network Status</span>
-                <div className="flex-1 h-px bg-border-subtle" />
-              </div>
-              <NetworkStatus />
-            </div>
+  return (
+    <div className="flex flex-col h-full">
+      <NetworkHeader />
+
+      <ComputeHeader />
+
+      <div className="flex-1 min-h-0 flex flex-col" style={{ background: '#282c34', 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 />
           </div>
-        )}
-      </ScrollArea>
+          <div className="min-w-0 min-h-0 overflow-hidden bg-surface-1">
+            <NetworkHealth />
+          </div>
+        </div>
+
+        <div className="min-h-0 flex-[0.6] bg-surface-1">
+          <ActivityStream />
+        </div>
+      </div>
     </div>
   );
 }