groove-dev 0.27.64 → 0.27.66

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

@@ -6,59 +6,12 @@ import { HEX } from '../../lib/theme-hex';
 import { Tooltip } from '../ui/tooltip';
 import { HelpCircle } from 'lucide-react';
 
-const BAR_WIDTH = 28;
-
-function gaugeColor(ratio) {
-  if (ratio > 0.9) return HEX.danger;
-  if (ratio > 0.7) return HEX.warning;
-  return HEX.success;
-}
-
 function fmtMbToGb(mb) {
   if (!mb) return '0';
   return (mb / 1024).toFixed(1);
 }
 
-function AsciiBar({ label, value, max, unit, nodeCount }) {
-  const ratio = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;
-  const filled = Math.round(ratio * BAR_WIDTH);
-  const empty = BAR_WIDTH - filled;
-  const bar = '\u2502'.repeat(filled) + '\u2500'.repeat(empty);
-  const color = gaugeColor(ratio);
-
-  let displayVal, displayMax;
-  if (unit === 'GB') {
-    displayVal = fmtMbToGb(value);
-    displayMax = fmtMbToGb(max);
-  } else if (unit === 'cores' || unit === 'Mbps') {
-    displayVal = Math.round(value);
-    displayMax = Math.round(max);
-  } else {
-    displayVal = value.toFixed(1);
-    displayMax = max.toFixed(1);
-  }
-
-  return (
-    <div className="flex items-center gap-2 font-mono text-xs leading-tight">
-      <span className="w-[40px] text-right text-text-3 uppercase text-2xs tracking-wider flex-shrink-0">
-        {label}
-      </span>
-      <span className="text-text-4">[</span>
-      <span style={{ color: ratio > 0 ? color : undefined }} className={cn('whitespace-pre', !ratio && 'text-text-4')}>
-        {bar}
-      </span>
-      <span className="text-text-4">]</span>
-      <span className="text-text-1 tabular-nums whitespace-nowrap text-2xs">
-        {displayVal} / {displayMax} {unit}
-      </span>
-      {nodeCount != null && (
-        <span className="text-text-4 text-2xs whitespace-nowrap">({nodeCount} nodes)</span>
-      )}
-    </div>
-  );
-}
-
-function MiniSparkline({ data, color = HEX.accent, width = 72, height = 22 }) {
+function MiniSparkline({ data, color = HEX.accent, width = 60, height = 16 }) {
   if (!data || data.length < 2) return <div style={{ width, height }} />;
   const vals = data.map((d) => (typeof d === 'number' ? d : d.v));
   const min = Math.min(...vals);
@@ -69,12 +22,12 @@ function MiniSparkline({ data, color = HEX.accent, width = 72, height = 22 }) {
     const y = height - ((v - min) / range) * (height - 2) - 1;
     return `${x},${y}`;
   }).join(' ');
-  const gradId = `net-${color.replace('#', '')}`;
+  const gradId = `ch-${color.replace('#', '')}`;
   return (
-    <svg width={width} height={height} className="flex-shrink-0">
+    <svg width={width} height={height} className="flex-shrink-0 mt-1">
       <defs>
         <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
-          <stop offset="0%" stopColor={color} stopOpacity="0.2" />
+          <stop offset="0%" stopColor={color} stopOpacity="0.25" />
           <stop offset="100%" stopColor={color} stopOpacity="0" />
         </linearGradient>
       </defs>
@@ -84,175 +37,89 @@ function MiniSparkline({ data, color = HEX.accent, width = 72, height = 22 }) {
   );
 }
 
-function KpiCard({ label, value, color = HEX.accent, hint, className }) {
-  return (
-    <div className={cn('flex items-center gap-2.5 px-3 py-2.5 min-w-0 bg-surface-1', className)}>
-      <div className="flex-1 min-w-0">
-        <div className="text-2xs font-mono text-text-3 uppercase tracking-wider mb-0.5 truncate flex items-center gap-1">
-          {label}
-          {hint && (
-            <Tooltip content={<span className="max-w-[220px] block leading-relaxed">{hint}</span>} side="bottom">
-              <HelpCircle size={10} className="text-text-4 hover:text-text-2 cursor-help flex-shrink-0 transition-colors" />
-            </Tooltip>
-          )}
-        </div>
-        <div className="text-base font-semibold font-mono text-text-0 tabular-nums leading-none">{value}</div>
-      </div>
-    </div>
-  );
-}
-
-const MAX_RAM_MB = 256 * 1024;
-const MAX_VRAM_MB = 128 * 1024;
-const MAX_CPU = 128;
-const MAX_LOAD = 4.0;
-
-const SPARKLINE_ROWS = [
-  { key: 'globalSessions', label: 'Sessions', color: HEX.accent },
-  { key: 'mySessions', label: 'My Sessions', color: HEX.info },
-  { key: 'nodeCount', label: 'Nodes', color: HEX.purple },
-  { key: 'avgLoad', label: 'Load', color: HEX.warning },
-  { key: 'myLoad', label: 'My Load', color: HEX.success },
-];
-
-function TrendsColumn({ snapshots }) {
-  const hasData = snapshots && snapshots.length >= 2;
-  return (
-    <div className="flex flex-col gap-1.5 min-w-0">
-      <div className="text-2xs font-mono text-text-3 uppercase tracking-widest mb-1.5">Trends</div>
-      {!hasData ? (
-        <div className="text-2xs font-mono text-text-4">Collecting data…</div>
-      ) : (
-        SPARKLINE_ROWS.map((row) => {
-          const data = snapshots.map((s) => ({ v: s[row.key] ?? 0 }));
-          const current = data[data.length - 1].v;
-          const display = Number.isInteger(current) ? current : current.toFixed(2);
-          return (
-            <div key={row.key} className="flex items-center gap-2 bg-surface-1 rounded px-2 py-1">
-              <span className="w-[72px] text-2xs font-mono text-text-3 uppercase truncate flex-shrink-0">{row.label}</span>
-              <MiniSparkline data={data} color={row.color} width={140} height={24} />
-              <span className="text-2xs font-mono text-text-1 tabular-nums flex-shrink-0">{display}</span>
-            </div>
-          );
-        })
-      )}
-    </div>
-  );
-}
-
-function YourNodeColumn({ node, compute }) {
-  if (!node || !node.active) {
-    return (
-      <div className="flex flex-col gap-1.5 min-w-0">
-        <div className="text-2xs font-mono text-text-3 uppercase tracking-widest mb-1.5">Your Node</div>
-        <div className="text-2xs font-mono text-text-4">Node idle</div>
-      </div>
-    );
-  }
-
-  const layersLabel = node.layers ? `Layers ${node.layers} / 36` : 'Unassigned';
-  const modelLabel = node.model || 'Qwen/Qwen3-4B';
-  const bw = compute.totalBandwidthMbps ? `${Math.round(compute.totalBandwidthMbps)} Mbps` : '— Mbps';
-  const nodeRam = node.hardware?.memory;
-  const ramPct = nodeRam && compute.totalRamMb > 0
-    ? `${((nodeRam / compute.totalRamMb) * 100).toFixed(1)}%`
-    : '—';
-
-  const metrics = [
-    { label: 'Layers', value: layersLabel },
-    { label: 'Model', value: modelLabel },
-    { label: 'Sessions', value: node.sessions ?? 0 },
-    { label: 'Bandwidth', value: bw },
-    { label: 'RAM Share', value: ramPct },
-  ];
-
-  return (
-    <div className="flex flex-col gap-1.5 min-w-0">
-      <div className="text-2xs font-mono text-text-3 uppercase tracking-widest mb-1.5">Your Node</div>
-      {metrics.map((m) => (
-        <div key={m.label} className="bg-surface-1 rounded px-2.5 py-1.5 min-w-0">
-          <div className="text-2xs font-mono text-text-4 uppercase tracking-wider leading-none">{m.label}</div>
-          <div className="text-xs font-mono text-text-1 truncate leading-tight">{m.value}</div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function BarsTrendsNode({ compute, allZero, avgGpuUtil }) {
-  const snapshots = useGrooveStore((s) => s.networkSnapshots);
-  const node = useGrooveStore((s) => s.networkNode);
-
+function KpiCard({ label, value, color, hint, sparkData, className }) {
   return (
-    <div className="bg-surface-1 border-b border-border px-4 py-3" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr 1fr', gap: '1.5rem' }}>
-      <div className="bg-surface-0 rounded border border-border-subtle px-3 py-2.5">
-        <div className="flex flex-col gap-0.5 min-w-0">
-          <div className="text-2xs font-mono text-text-3 uppercase tracking-widest mb-1.5">Resources</div>
-          {allZero ? (
-            <div className="text-2xs font-mono text-text-4">Waiting for network data...</div>
-          ) : (
-            <>
-              <AsciiBar label="RAM" value={compute.totalRamMb} max={MAX_RAM_MB} unit="GB" nodeCount={compute.totalNodes} />
-              <AsciiBar label="VRAM" value={compute.totalVramMb} max={MAX_VRAM_MB} unit="GB" nodeCount={compute.totalNodes} />
-              <AsciiBar label="CPU" value={compute.totalCpuCores} max={MAX_CPU} unit="cores" />
-              <AsciiBar label="GPU%" value={avgGpuUtil} max={100} unit="%" />
-              <AsciiBar label="LOAD" value={compute.avgLoad} max={MAX_LOAD} unit="" />
-            </>
-          )}
-        </div>
-      </div>
-      <div className="bg-surface-0 rounded border border-border-subtle px-3 py-2.5">
-        <TrendsColumn snapshots={snapshots} />
+    <div className={cn('px-3 py-2 min-w-0', className)}>
+      <div className="text-2xs font-mono text-text-4 uppercase tracking-wider truncate flex items-center gap-1">
+        {label}
+        {hint && (
+          <Tooltip content={<span className="max-w-[220px] block leading-relaxed">{hint}</span>} side="bottom">
+            <HelpCircle size={9} className="text-text-4 hover:text-text-2 cursor-help flex-shrink-0 transition-colors" />
+          </Tooltip>
+        )}
       </div>
-      <div className="bg-surface-0 rounded border border-border-subtle px-3 py-2.5">
-        <YourNodeColumn node={node} compute={compute} />
+      <div className="text-base font-mono font-semibold tabular-nums leading-none mt-0.5" style={{ color: color || HEX.text0 }}>
+        {value}
       </div>
+      {sparkData && <MiniSparkline data={sparkData} color={color || HEX.accent} />}
     </div>
   );
 }
 
 export const ComputeHeader = memo(function ComputeHeader() {
   const compute = useGrooveStore((s) => s.networkCompute);
-  const nodes = useGrooveStore((s) => s.networkStatus.nodes || []);
-  const models = useGrooveStore((s) => s.networkStatus.models || []);
-  const allZero = !compute.totalRamMb && !compute.totalVramMb && !compute.totalCpuCores;
+  const status = useGrooveStore((s) => s.networkStatus);
+  const snapshots = useGrooveStore((s) => s.networkSnapshots);
+  const nodes = status.nodes || [];
 
   const activeNodes = nodes.filter((n) => n.status === 'active');
   const avgGpuUtil = activeNodes.length > 0
     ? activeNodes.reduce((s, n) => s + (n.gpu_utilization_pct || 0), 0) / activeNodes.length
     : 0;
+
+  const totalLayers = status.totalLayers || 36;
+  const covered = status.coverage || 0;
+  const coverageColor = covered >= totalLayers ? HEX.success : covered >= totalLayers * 0.5 ? HEX.warning : HEX.danger;
   const gpuColor = avgGpuUtil > 80 ? HEX.danger : avgGpuUtil > 50 ? HEX.warning : HEX.success;
-  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)
-    : 'Qwen/Qwen3-4B';
+
+  const nodeSnap = snapshots.map((s) => ({ v: s.nodeCount ?? 0 }));
+  const sessionSnap = snapshots.map((s) => ({ v: s.globalSessions ?? 0 }));
+  const vramSnap = snapshots.map((s) => ({ v: s.totalVramMb ?? 0 }));
+  const ramSnap = snapshots.map((s) => ({ v: s.totalRamMb ?? 0 }));
 
   const kpis = [
-    { label: 'RAM', value: `${fmtMbToGb(compute.totalRamMb)} GB`, color: HEX.accent, hint: 'Total RAM across all network nodes.' },
-    { label: 'VRAM', value: `${fmtMbToGb(compute.totalVramMb)} GB`, color: HEX.info, hint: 'Total GPU VRAM across all network nodes.' },
-    { label: 'CPU Cores', value: `${compute.totalCpuCores}`, color: HEX.purple, hint: 'Total CPU cores across all network nodes.' },
-    { label: 'GPU Util', value: avgGpuUtil > 0 ? `${Math.round(avgGpuUtil)}%` : '--', color: gpuColor, hint: 'Average GPU utilization across active nodes. Green <50%, yellow 50-80%, red >80%.' },
-    { label: 'Nodes', value: `${compute.activeNodes}/${compute.totalNodes}`, color: HEX.accent, hint: 'Active nodes out of total registered.' },
-    { label: 'Load', value: compute.avgLoad > 0 ? compute.avgLoad.toFixed(2) : '0.00', color: loadColor, hint: 'Average load across active nodes. Green <1.0, yellow 1.0-2.0, red >2.0.' },
-    { label: 'Model', value: activeModel, color: HEX.info, hint: 'Active inference model on the network.' },
+    {
+      label: 'NODES', value: `${compute.activeNodes}/${compute.totalNodes}`,
+      color: HEX.accent, hint: 'Active nodes / total registered', sparkData: nodeSnap,
+    },
+    {
+      label: 'SESSIONS', value: `${status.activeSessions || 0}`,
+      color: HEX.info, hint: 'Active inference sessions', sparkData: sessionSnap,
+    },
+    {
+      label: 'COVERAGE', value: `${covered}/${totalLayers}`,
+      color: coverageColor, hint: 'Layer coverage — green=full, orange=partial, red=<50%',
+    },
+    {
+      label: 'VRAM', value: `${fmtMbToGb(compute.totalVramMb)} GB`,
+      color: HEX.purple, hint: 'Total GPU VRAM across nodes', sparkData: vramSnap,
+    },
+    {
+      label: 'RAM', value: `${fmtMbToGb(compute.totalRamMb)} GB`,
+      color: HEX.info, hint: 'Total RAM across nodes', sparkData: ramSnap,
+    },
+    {
+      label: 'GPU UTIL', value: avgGpuUtil > 0 ? `${Math.round(avgGpuUtil)}%` : '--',
+      color: gpuColor, hint: 'Average GPU utilization — green <50%, yellow 50-80%, red >80%',
+    },
   ];
 
   return (
-    <div className="flex-shrink-0">
-      <div className="flex flex-wrap border-b border-border" style={{ background: 'var(--color-surface-0)' }}>
-        {kpis.map((kpi) => (
-          <KpiCard
-            key={kpi.label}
-            label={kpi.label}
-            value={kpi.value}
-            color={kpi.color}
-            hint={kpi.hint}
-            className={cn('flex-1 basis-[14.2%] min-w-[110px]', 'border-b border-r border-border')}
-          />
-        ))}
-      </div>
-
-      <BarsTrendsNode compute={compute} allZero={allZero} avgGpuUtil={avgGpuUtil} />
+    <div className="flex flex-shrink-0 border-b border-border-subtle bg-surface-0">
+      {kpis.map((kpi, i) => (
+        <KpiCard
+          key={kpi.label}
+          label={kpi.label}
+          value={kpi.value}
+          color={kpi.color}
+          hint={kpi.hint}
+          sparkData={kpi.sparkData}
+          className={cn(
+            'basis-[16%] min-w-[120px] flex-shrink-0',
+            i < kpis.length - 1 && 'border-r border-border-subtle',
+          )}
+        />
+      ))}
     </div>
   );
 });

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

@@ -0,0 +1,30 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { memo } from 'react';
+import { Badge } from '../ui/badge';
+
+const ROWS = [
+  { label: 'Today', value: '—' },
+  { label: 'This Week', value: '—' },
+  { label: 'All Time', value: '—' },
+];
+
+export const EarningsCard = memo(function EarningsCard() {
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-3 pt-2.5 pb-1 flex items-center justify-between">
+        <span className="text-2xs font-mono text-text-3 uppercase tracking-widest">EARNINGS</span>
+        <Badge variant="purple">SOON</Badge>
+      </div>
+
+      <div className="px-3 py-2 space-y-1.5">
+        {ROWS.map((row) => (
+          <div key={row.label} className="flex items-center justify-between">
+            <span className="text-2xs font-sans text-text-4">{row.label}</span>
+            <span className="text-xs font-mono text-text-3 tabular-nums">{row.value}</span>
+          </div>
+        ))}
+        <div className="text-2xs text-text-4 mt-2 italic">Connect wallet to track earnings</div>
+      </div>
+    </div>
+  );
+});

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

@@ -1,12 +1,12 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { memo, useState, useMemo } from 'react';
+import { memo, useState, useMemo, useCallback } 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';
+import { fmtUptime } from '../../lib/format';
+import { ArrowUp, ArrowDown, Search } from 'lucide-react';
 
 function shortAddr(addr) {
   if (!addr || typeof addr !== 'string') return '\u2014';
@@ -20,22 +20,6 @@ function fmtMb(mb) {
   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]' },
@@ -67,19 +51,58 @@ function getSortValue(node, key) {
   }
 }
 
+function ExpandedRow({ node }) {
+  const gpuPct = node.gpu_utilization_pct;
+  const details = [
+    { label: 'GPU Utilization', value: gpuPct != null ? `${Math.round(gpuPct)}%` : '—' },
+    { label: 'VRAM Used', value: node.vram_used_mb != null ? fmtMb(node.vram_used_mb) : '—' },
+    { label: 'RAM Used', value: node.ram_used_mb != null ? fmtMb(node.ram_used_mb) : '—' },
+    { label: 'Uptime', value: node.uptime_seconds ? fmtUptime(node.uptime_seconds) : '—' },
+    { label: 'Bandwidth', value: node.bandwidth_mbps ? `${Math.round(node.bandwidth_mbps)} Mbps` : '—' },
+  ];
+  return (
+    <div className="px-3 py-2 bg-surface-0 border-t border-border-subtle">
+      <div className="grid grid-cols-5 gap-3">
+        {details.map((d) => (
+          <div key={d.label}>
+            <div className="text-2xs font-mono text-text-4 uppercase tracking-wider">{d.label}</div>
+            <div className="text-xs font-mono text-text-1 tabular-nums">{d.value}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 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);
+  const [search, setSearch] = useState('');
+  const [expandedId, setExpandedId] = useState(null);
 
-  function handleSort(key) {
-    if (sortKey === key) setSortAsc((v) => !v);
-    else { setSortKey(key); setSortAsc(true); }
-  }
+  const handleSort = useCallback((key) => {
+    setSortKey((prev) => {
+      if (prev === key) { setSortAsc((v) => !v); return prev; }
+      setSortAsc(true);
+      return key;
+    });
+  }, []);
+
+  const filtered = useMemo(() => {
+    if (!search.trim()) return nodes;
+    const q = search.toLowerCase();
+    return nodes.filter((n) => {
+      const id = (n.node_id || n.nodeId || '').toLowerCase();
+      const gpu = (n.gpu_model || '').toLowerCase();
+      const device = (n.device || '').toLowerCase();
+      return id.includes(q) || gpu.includes(q) || device.includes(q);
+    });
+  }, [nodes, search]);
 
   const sorted = useMemo(() => {
-    const list = [...nodes];
+    const list = [...filtered];
     list.sort((a, b) => {
       const va = getSortValue(a, sortKey);
       const vb = getSortValue(b, sortKey);
@@ -88,7 +111,7 @@ export const FleetTable = memo(function FleetTable() {
       return 0;
     });
     return list;
-  }, [nodes, sortKey, sortAsc]);
+  }, [filtered, sortKey, sortAsc]);
 
   return (
     <div className="flex flex-col h-full">
@@ -97,7 +120,20 @@ export const FleetTable = memo(function FleetTable() {
         <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)' }}>
+      <div className="px-3 pb-1 flex-shrink-0">
+        <div className="relative">
+          <Search size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-text-4" />
+          <input
+            type="text"
+            placeholder="Search nodes..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="h-7 w-full rounded-md pl-7 pr-2 text-xs bg-surface-1 border border-border-subtle text-text-0 placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent font-mono transition-colors"
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-0 px-3 py-1 flex-shrink-0 bg-accent/[0.04]">
         {COLUMNS.map((col) => (
           <button
             key={col.key}
@@ -118,7 +154,9 @@ export const FleetTable = memo(function FleetTable() {
 
       <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 className="px-3 py-6 text-2xs font-mono text-text-4 text-center">
+            {search ? 'No matching nodes' : 'No nodes online'}
+          </div>
         ) : (
           <div>
             {sorted.map((n, i) => {
@@ -130,55 +168,59 @@ export const FleetTable = memo(function FleetTable() {
               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;
+              const isExpanded = expandedId === id;
 
               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 key={id || i}>
+                  <div
+                    onClick={() => setExpandedId(isExpanded ? null : id)}
+                    className={cn(
+                      'flex items-center gap-0 px-3 py-2 text-xs font-mono transition-colors cursor-pointer',
+                      isSelf ? 'border-l-2 border-accent bg-accent/[0.04]' : 'hover:bg-surface-2',
                     )}
+                  >
+                    <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 bg-accent/[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 bg-accent/[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)}>{n.uptime_seconds ? fmtUptime(n.uptime_seconds) : '\u2014'}</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>
+                  {isExpanded && <ExpandedRow node={n} />}
                 </div>
               );
             })}