groove-dev 0.27.64 → 0.27.66

package/packages/gui/src/components/network/identity-bar.jsx

@@ -0,0 +1,94 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { memo, useState, useEffect, useCallback } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { cn } from '../../lib/cn';
+import { StatusDot } from '../ui/status-dot';
+import { Button } from '../ui/button';
+import { Tooltip } from '../ui/tooltip';
+import { fmtUptime } from '../../lib/format';
+import { Copy, Check, Wallet } from 'lucide-react';
+
+function shortAddr(addr) {
+  if (!addr || typeof addr !== 'string') return '—';
+  if (addr.length < 14) return addr;
+  return `${addr.slice(0, 6)}…${addr.slice(-4)}`;
+}
+
+function nodeStatusMap(node) {
+  if (node.active && node.status === 'connected') return 'running';
+  if (node.status === 'connecting') return 'starting';
+  return 'stopped';
+}
+
+function statusColor(status) {
+  if (status === 'connected') return 'text-success';
+  if (status === 'connecting') return 'text-warning';
+  return 'text-danger';
+}
+
+export const IdentityBar = memo(function IdentityBar() {
+  const node = useGrooveStore((s) => s.networkNode);
+  const wallet = useGrooveStore((s) => s.networkWallet);
+  const [copied, setCopied] = useState(false);
+  const [uptime, setUptime] = useState(0);
+
+  useEffect(() => {
+    if (!node.startedAt) return;
+    const tick = () => setUptime(Math.floor((Date.now() - node.startedAt) / 1000));
+    tick();
+    const id = setInterval(tick, 1000);
+    return () => clearInterval(id);
+  }, [node.startedAt]);
+
+  const handleCopy = useCallback(async () => {
+    if (!node.nodeId) return;
+    try {
+      await navigator.clipboard.writeText(node.nodeId);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch { /* clipboard blocked */ }
+  }, [node.nodeId]);
+
+  const connStatus = node.status || 'disconnected';
+
+  return (
+    <div className="flex items-center h-11 px-4 bg-surface-0 border-b border-border-subtle gap-3">
+      {/* Left: node identity */}
+      <div className="flex items-center gap-2">
+        <StatusDot status={nodeStatusMap(node)} size="sm" />
+        <code className="text-xs font-mono text-text-0">{shortAddr(node.nodeId)}</code>
+        <Tooltip content={copied ? 'Copied' : 'Copy address'} side="bottom">
+          <button
+            onClick={handleCopy}
+            className="h-6 w-6 inline-flex items-center justify-center rounded border border-border-subtle text-text-3 hover:text-accent hover:border-accent/40 cursor-pointer transition-colors"
+          >
+            {copied ? <Check size={10} /> : <Copy size={10} />}
+          </button>
+        </Tooltip>
+      </div>
+
+      {/* Center: status + uptime */}
+      <div className="flex-1 flex items-center justify-center gap-3">
+        <span className={cn('text-2xs uppercase tracking-widest font-sans', statusColor(connStatus))}>
+          {connStatus === 'connected' ? 'Connected' : connStatus === 'connecting' ? 'Connecting' : 'Disconnected'}
+        </span>
+        <span className="w-1 h-1 rounded-full bg-text-4" />
+        <span className="text-2xs font-mono text-text-3 tabular-nums">
+          {fmtUptime(uptime)}
+        </span>
+      </div>
+
+      {/* Right: token balance + wallet */}
+      <div className="flex items-center gap-3">
+        <span className="text-xs font-mono text-text-2">
+          <span className="text-text-0">{wallet.balance}</span>
+          <span className="text-text-3"> GROOVE</span>
+        </span>
+        <Button variant="outline" size="sm" className="text-2xs gap-1.5" disabled>
+          <Wallet size={12} />
+          Connect Wallet
+        </Button>
+      </div>
+    </div>
+  );
+});

package/packages/gui/src/components/network/node-card.jsx

@@ -0,0 +1,88 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { memo } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { cn } from '../../lib/cn';
+import { StatusDot } from '../ui/status-dot';
+
+function shortAddr(addr) {
+  if (!addr || typeof addr !== 'string') return '—';
+  if (addr.length < 14) return addr;
+  return `${addr.slice(0, 6)}…${addr.slice(-4)}`;
+}
+
+function nodeStatusMap(node) {
+  if (node.active && node.status === 'connected') return 'running';
+  if (node.status === 'connecting') return 'starting';
+  return 'stopped';
+}
+
+function modelShort(model) {
+  if (!model) return '—';
+  const parts = model.split('/');
+  return parts[parts.length - 1];
+}
+
+export const NodeCard = memo(function NodeCard() {
+  const node = useGrooveStore((s) => s.networkNode);
+  const hardware = node.hardware || {};
+  const memPct = Number.isFinite(node.memoryPct) ? node.memoryPct : null;
+  const layersLabel = Array.isArray(node.layers) ? `${node.layers[0]}-${node.layers[1]}` : '—';
+
+  const metrics = [
+    { label: 'DEVICE', value: hardware.device || 'auto' },
+    { label: 'GPU', value: hardware.gpu || 'None' },
+    { label: 'LAYERS', value: layersLabel },
+    { label: 'MODEL', value: modelShort(node.model) },
+    { label: 'SESSIONS', value: node.sessions ?? 0 },
+    { label: 'VRAM', value: hardware.memory || '—' },
+  ];
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-3 pt-2.5 pb-1">
+        <span className="text-2xs font-mono text-text-3 uppercase tracking-widest">Your Node</span>
+      </div>
+
+      <div className="px-3 py-2 space-y-2">
+        <div>
+          <div className="text-2xs text-text-4 uppercase tracking-wider">ADDRESS</div>
+          <div className="text-xs font-mono text-accent truncate">{shortAddr(node.nodeId)}</div>
+        </div>
+
+        <div className="flex items-center gap-1.5">
+          <StatusDot status={nodeStatusMap(node)} size="sm" />
+          <span className="text-2xs capitalize text-text-2">{node.status || 'disconnected'}</span>
+        </div>
+
+        <div className="border-t border-border-subtle my-1" />
+
+        <div className="grid grid-cols-2 gap-x-3 gap-y-1.5">
+          {metrics.map((m) => (
+            <div key={m.label}>
+              <div className="text-2xs text-text-4 uppercase tracking-wider">{m.label}</div>
+              <div className="text-xs font-mono text-text-1 tabular-nums truncate">{m.value}</div>
+            </div>
+          ))}
+        </div>
+
+        {memPct != null && (
+          <div className="mt-1">
+            <div className="flex items-center justify-between mb-0.5">
+              <span className="text-2xs text-text-4 uppercase tracking-wider">MEM</span>
+              <span className="text-2xs font-mono text-text-3 tabular-nums">{Math.round(memPct)}%</span>
+            </div>
+            <div className="h-1 w-full rounded-full bg-surface-3 overflow-hidden">
+              <div
+                className={cn(
+                  'h-full rounded-full transition-all',
+                  memPct > 90 ? 'bg-danger' : memPct > 70 ? 'bg-warning' : 'bg-accent',
+                )}
+                style={{ width: `${Math.min(100, Math.max(0, memPct))}%` }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});

package/packages/gui/src/components/network/wallet-view.jsx

@@ -0,0 +1,77 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { memo } from 'react';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+import { Wallet, Cpu, Activity, Clock, Zap } from 'lucide-react';
+
+const REWARD_CARDS = [
+  { icon: Cpu, label: 'Compute Hours', value: '—' },
+  { icon: Activity, label: 'Sessions Served', value: '—' },
+  { icon: Clock, label: 'Uptime Score', value: '—' },
+  { icon: Zap, label: 'Network Score', value: '—' },
+];
+
+const PAYOUT_COLS = ['Date', 'Amount', 'Status', 'TX'];
+
+export const WalletView = memo(function WalletView() {
+  return (
+    <div className="flex flex-col h-full overflow-auto">
+      {/* Hero */}
+      <div className="px-6 py-8 text-center border-b border-border-subtle bg-surface-0">
+        <div className="text-3xl font-mono font-semibold text-text-0 tabular-nums">0.00</div>
+        <div className="text-sm font-mono text-text-3 mt-1">GROOVE</div>
+        <Badge variant="purple" className="mt-3">Base L2</Badge>
+        <div className="mt-4">
+          <Button variant="primary" size="md" className="gap-2" disabled>
+            <Wallet size={14} />
+            Connect Wallet
+          </Button>
+        </div>
+        <div className="text-2xs text-text-4 mt-2">Connect your Base wallet to claim rewards</div>
+      </div>
+
+      {/* Reward Metrics */}
+      <div className="px-4 py-4">
+        <div className="text-2xs font-mono text-text-3 uppercase tracking-widest mb-3">EARNING POTENTIAL</div>
+        <div className="grid grid-cols-4 gap-2">
+          {REWARD_CARDS.map((card) => (
+            <div key={card.label} className="rounded-md border border-border-subtle bg-surface-1 px-3 py-3 text-center">
+              <card.icon size={16} className="text-text-3 mx-auto mb-1.5" />
+              <div className="text-lg font-mono text-text-0 tabular-nums">{card.value}</div>
+              <div className="text-2xs text-text-4 mt-0.5">{card.label}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Earnings Timeline */}
+      <div className="px-4 py-4 border-t border-border-subtle">
+        <div className="text-2xs font-mono text-text-3 uppercase tracking-widest mb-3">EARNINGS HISTORY</div>
+        <div className="h-40 rounded-md border border-border-subtle bg-surface-0 flex items-center justify-center">
+          <span className="text-xs font-mono text-text-4">Earnings data will appear here</span>
+        </div>
+      </div>
+
+      {/* Payouts Table */}
+      <div className="px-4 py-4 border-t border-border-subtle">
+        <div className="text-2xs font-mono text-text-3 uppercase tracking-widest mb-3">PAYOUT HISTORY</div>
+        <div className="grid grid-cols-4 px-3 py-1.5 text-2xs font-mono text-text-4 uppercase tracking-wider">
+          {PAYOUT_COLS.map((col) => (
+            <span key={col}>{col}</span>
+          ))}
+        </div>
+        <div className="px-3 py-6 text-center text-xs font-mono text-text-4">No payouts yet</div>
+      </div>
+
+      {/* Banner */}
+      <div className="px-4 pb-6">
+        <div className="rounded-md border border-purple/20 bg-purple/5 px-4 py-3 flex items-center gap-3">
+          <Zap size={16} className="text-purple flex-shrink-0" />
+          <span className="text-xs font-sans text-text-2">
+            Rewards go live when the GROOVE token launches on Base. Keep your node running to accumulate compute credits.
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+});

package/packages/gui/src/components/onboarding/setup-wizard.jsx

@@ -19,7 +19,7 @@ const PROVIDERS = [
     id: 'claude-code',
     name: 'Claude Code',
     subtitle: 'by Anthropic',
-    models: ['Opus 4.7', 'Opus 4.6', 'Sonnet 4.6', 'Haiku 4.5'],
+    models: ['Opus 4.6', 'Sonnet 4.6', 'Haiku 4.5'],
     authType: 'Subscription or API key',
     authModes: ['subscription', 'apikey'],
     recommended: true,

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

@@ -105,6 +105,8 @@ 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: [],
+  networkWallet: { connected: false, address: null, balance: '0.00', token: 'GROOVE', chain: 'base-l2' },
+  networkEarnings: { today: 0, thisWeek: 0, allTime: 0, history: [] },
 
   // ── Marketplace Auth ───────────────────────────────────────
   marketplaceUser: null,        // { id, displayName, avatar, ... } or null
@@ -732,6 +734,8 @@ export const useGrooveStore = create((set, get) => ({
             nodeCount: wsActive.length,
             avgLoad: wsActive.length > 0 ? wsActive.reduce((s, n) => s + (n.load || 0), 0) / wsActive.length : 0,
             myLoad: wsOwn?.load ?? 0,
+            totalVramMb: wsNodes.reduce((s, n) => s + (n.vram_mb || 0), 0),
+            totalRamMb: wsNodes.reduce((s, n) => s + (n.ram_mb || 0), 0),
           };
           let wsSnapshots = [...get().networkSnapshots, wsSnap];
           if (wsSnapshots.length > 100) wsSnapshots = wsSnapshots.slice(-100);
@@ -2179,6 +2183,8 @@ export const useGrooveStore = create((set, get) => ({
           nodeCount: activeNodes.length,
           avgLoad: activeNodes.length > 0 ? activeNodes.reduce((s, n) => s + (n.load || 0), 0) / activeNodes.length : 0,
           myLoad: ownNode?.load ?? 0,
+          totalVramMb: nodes.reduce((s, n) => s + (n.vram_mb || 0), 0),
+          totalRamMb: nodes.reduce((s, n) => s + (n.ram_mb || 0), 0),
         };
         let snapshots = [...get().networkSnapshots, snap];
         if (snapshots.length > 100) snapshots = snapshots.slice(-100);
@@ -2258,6 +2264,13 @@ export const useGrooveStore = create((set, get) => ({
     }
   },
 
+  async fetchNetworkWallet() {
+    return get().networkWallet;
+  },
+  async fetchNetworkEarnings() {
+    return get().networkEarnings;
+  },
+
   async renameFile(oldPath, newPath) {
     try {
       await api.post('/files/rename', { oldPath, newPath });

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

@@ -6,12 +6,17 @@ 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 { Tabs, TabsList, TabsTrigger, TabsContent } from '../components/ui/tabs';
 import { cn } from '../lib/cn';
-import { NodeToggle } from '../components/network/node-toggle';
+import { IdentityBar } from '../components/network/identity-bar';
 import { ComputeHeader } from '../components/network/compute-header';
 import { ActivityChart } from '../components/network/activity-chart';
 import { ActivityStream } from '../components/network/activity-stream';
 import { NetworkHealth } from '../components/network/network-health';
+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 { HEX, hexAlpha } from '../lib/theme-hex';
 import { Globe, Download, Check, AlertCircle, Loader2, Trash2, ArrowUpCircle, Zap } from 'lucide-react';
 
@@ -405,12 +410,44 @@ function IdleHero() {
   );
 }
 
+function NetworkOverview() {
+  return (
+    <div className="flex flex-col h-full">
+      <ComputeHeader />
+      <div className="flex-1 min-h-0 grid" style={{ gridTemplateColumns: '2.5fr 1fr', gap: '1px', background: HEX.surface3 }}>
+        {/* Left column */}
+        <div className="flex flex-col min-w-0 min-h-0" style={{ gap: '1px' }}>
+          <div className="flex-1 min-h-0 overflow-hidden bg-surface-1">
+            <ActivityChart />
+          </div>
+          <div className="flex-[0.5] min-h-0 overflow-hidden bg-surface-1">
+            <ActivityStream />
+          </div>
+        </div>
+        {/* Right column */}
+        <div className="flex flex-col min-w-0 min-h-0" style={{ gap: '1px' }}>
+          <div className="min-h-0 overflow-hidden bg-surface-1">
+            <NodeCard />
+          </div>
+          <div className="flex-1 min-h-0 overflow-hidden bg-surface-1">
+            <NetworkHealth />
+          </div>
+          <div className="min-h-0 overflow-hidden bg-surface-1">
+            <EarningsCard />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function NetworkView() {
   const fetchNetworkNodeStatus = useGrooveStore((s) => s.fetchNetworkNodeStatus);
   const fetchNetworkStatus = useGrooveStore((s) => s.fetchNetworkStatus);
   const checkNetworkUpdate = useGrooveStore((s) => s.checkNetworkUpdate);
   const installed = useGrooveStore((s) => s.networkInstalled);
   const nodeActive = useGrooveStore((s) => s.networkNode.active);
+  const [activeTab, setActiveTab] = useState('overview');
 
   useEffect(() => {
     fetchNetworkNodeStatus();
@@ -440,23 +477,27 @@ export default function NetworkView() {
   return (
     <div className="flex flex-col h-full">
       <NetworkHeader />
-
-      <ComputeHeader />
-
-      <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">
-            <ActivityChart />
-          </div>
-          <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>
+      <IdentityBar />
+
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 min-h-0 flex flex-col">
+        <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="wallet" className="text-xs">Wallet</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview" className="flex-1 min-h-0 overflow-hidden">
+          <NetworkOverview />
+        </TabsContent>
+
+        <TabsContent value="fleet" className="flex-1 min-h-0 overflow-hidden bg-surface-1">
+          <FleetTable />
+        </TabsContent>
+
+        <TabsContent value="wallet" className="flex-1 min-h-0 overflow-hidden">
+          <WalletView />
+        </TabsContent>
+      </Tabs>
     </div>
   );
 }