groove-dev 0.27.44 → 0.27.45

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

@@ -0,0 +1,172 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { cn } from '../../lib/cn';
+import { Badge } from '../ui/badge';
+import { StatusDot } from '../ui/status-dot';
+import { Tooltip } from '../ui/tooltip';
+import { Copy, Check, Cpu } from 'lucide-react';
+
+function shortAddress(addr) {
+  if (!addr || typeof addr !== 'string') return '—';
+  if (addr.length < 14) return addr;
+  return `${addr.slice(0, 6)}…${addr.slice(-4)}`;
+}
+
+function nodeStatus(node) {
+  if (node.active && node.status === 'connected') return 'running';
+  if (node.status === 'connecting') return 'starting';
+  return 'crashed';
+}
+
+function Toggle({ value, onChange, disabled }) {
+  return (
+    <button
+      onClick={() => !disabled && onChange(!value)}
+      disabled={disabled}
+      className={cn(
+        'relative inline-flex h-7 w-12 rounded-full p-0.5 transition-colors',
+        disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+        value ? 'bg-accent' : 'bg-surface-5',
+      )}
+    >
+      <span
+        className={cn(
+          'inline-block h-6 w-6 rounded-full bg-white shadow-sm transition-transform',
+          value ? 'translate-x-5' : 'translate-x-0',
+        )}
+      />
+    </button>
+  );
+}
+
+export function NodeToggle() {
+  const node = useGrooveStore((s) => s.networkNode);
+  const startNetworkNode = useGrooveStore((s) => s.startNetworkNode);
+  const stopNetworkNode = useGrooveStore((s) => s.stopNetworkNode);
+  const [pending, setPending] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  async function handleToggle(next) {
+    setPending(true);
+    try {
+      if (next) await startNetworkNode();
+      else await stopNetworkNode();
+    } catch { /* toasted in store */ }
+    setPending(false);
+  }
+
+  async function handleCopy() {
+    if (!node.nodeId) return;
+    try {
+      await navigator.clipboard.writeText(node.nodeId);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch { /* clipboard blocked */ }
+  }
+
+  const active = !!node.active;
+  const hardware = node.hardware || {};
+  const layersLabel = Array.isArray(node.layers)
+    ? `layers ${node.layers[0]}-${node.layers[1]}`
+    : (node.layers && node.layers.start != null)
+      ? `layers ${node.layers.start}-${node.layers.end}`
+      : 'unassigned';
+  const modelLabel = node.model || 'No model assigned';
+  const memPct = Number.isFinite(node.memoryPct) ? node.memoryPct : null;
+
+  return (
+    <div className="rounded-lg 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">
+          <div className="text-sm font-semibold text-text-0 font-sans">Lend Compute</div>
+          <div className="text-2xs text-text-3 font-sans mt-0.5">
+            {active ? 'Contributing to the Groove network' : 'Your machine can contribute to the Groove network'}
+          </div>
+        </div>
+        <Toggle value={active} onChange={handleToggle} disabled={pending} />
+      </div>
+
+      {/* Body */}
+      <div className="px-5 py-4 space-y-4">
+        {!active ? (
+          <div>
+            <div className="text-2xs font-semibold text-text-3 font-sans uppercase tracking-wider mb-2">Detected hardware</div>
+            <div className="grid grid-cols-3 gap-2">
+              <div className="rounded-md border border-border-subtle bg-surface-0 px-3 py-2">
+                <div className="text-2xs text-text-4 font-sans">Device</div>
+                <div className="text-xs font-mono text-text-1 truncate">{hardware.device || 'auto'}</div>
+              </div>
+              <div className="rounded-md border border-border-subtle bg-surface-0 px-3 py-2">
+                <div className="text-2xs text-text-4 font-sans">Memory</div>
+                <div className="text-xs font-mono text-text-1 truncate">{hardware.memory || '—'}</div>
+              </div>
+              <div className="rounded-md border border-border-subtle bg-surface-0 px-3 py-2">
+                <div className="text-2xs text-text-4 font-sans">GPU</div>
+                <div className="text-xs font-mono text-text-1 truncate">{hardware.gpu || 'None'}</div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <>
+            {/* Status row */}
+            <div className="flex items-center gap-3">
+              <StatusDot status={nodeStatus(node)} />
+              <div className="text-xs font-sans text-text-1 capitalize">{node.status || 'disconnected'}</div>
+              <div className="flex-1" />
+              <Badge variant="accent" className="font-mono">
+                <Cpu size={9} /> {modelLabel} · {layersLabel}
+              </Badge>
+            </div>
+
+            {/* Identity */}
+            <div>
+              <div className="text-2xs font-semibold text-text-3 font-sans uppercase tracking-wider mb-1.5">Node Identity</div>
+              <div className="flex items-center gap-2">
+                <code className="flex-1 h-8 px-2.5 flex items-center bg-surface-0 border border-border-subtle rounded-md text-xs font-mono text-text-1">
+                  {shortAddress(node.nodeId)}
+                </code>
+                <Tooltip content={copied ? 'Copied' : 'Copy full address'} side="top">
+                  <button
+                    onClick={handleCopy}
+                    className="h-8 w-8 inline-flex items-center justify-center rounded-md border border-border-subtle bg-surface-0 text-text-3 hover:text-accent hover:border-accent/40 cursor-pointer transition-colors"
+                  >
+                    {copied ? <Check size={12} /> : <Copy size={12} />}
+                  </button>
+                </Tooltip>
+              </div>
+            </div>
+
+            {/* Sessions + memory */}
+            <div className="grid grid-cols-2 gap-2">
+              <div className="rounded-md border border-border-subtle bg-surface-0 px-3 py-2">
+                <div className="text-2xs text-text-4 font-sans uppercase tracking-wider">Active Sessions</div>
+                <div className="text-lg font-mono text-text-0 tabular-nums leading-tight">{node.sessions || 0}</div>
+              </div>
+              <div className="rounded-md border border-border-subtle bg-surface-0 px-3 py-2">
+                <div className="text-2xs text-text-4 font-sans uppercase tracking-wider mb-1">Memory</div>
+                {memPct != null ? (
+                  <>
+                    <div className="h-1.5 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 className="mt-1 text-2xs font-mono text-text-3 tabular-nums">{Math.round(memPct)}%</div>
+                  </>
+                ) : (
+                  <div className="text-xs font-mono text-text-3">—</div>
+                )}
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -86,6 +86,14 @@ export const useGrooveStore = create((set, get) => ({
   // ── Journalist ────────────────────────────────────────────
   journalistStatus: null, // { cycleCount, lastCycleTime, history, lastSynthesis }
 
+  // ── Network (Early Access) ────────────────────────────────
+  networkUnlocked: false,
+  networkInstalled: false,
+  networkInstallProgress: { installing: false, step: null, message: null, percent: 0, error: null },
+  networkNode: { active: false, status: 'disconnected', nodeId: null, layers: null, model: null, sessions: 0, hardware: null },
+  networkStatus: { nodes: [], coverage: 0, totalLayers: 0, models: [], activeSessions: 0 },
+  networkEvents: [],
+
   // ── Marketplace Auth ───────────────────────────────────────
   marketplaceUser: null,        // { id, displayName, avatar, ... } or null
   marketplaceAuthenticated: false,
@@ -155,6 +163,8 @@ export const useGrooveStore = create((set, get) => ({
       get().fetchApprovals();
       get().checkMarketplaceAuth();
       get().fetchTunnels();
+      get().fetchBetaStatus();
+      get().fetchNetworkInstallStatus();
       if (!get().onboardingComplete) get().fetchOnboardingStatus();
       if (window.groove?.auth?.onSubscriptionStatus) {
         window.groove.auth.onSubscriptionStatus((data) => {
@@ -593,6 +603,59 @@ export const useGrooveStore = create((set, get) => ({
           set({ marketplaceAuthenticated: false, marketplaceUser: null });
           get().addToast('warning', 'Session expired', 'Please sign in again');
           break;
+
+        case 'network:node:status':
+          set({ networkNode: { ...get().networkNode, ...(msg.data || {}) } });
+          break;
+
+        case 'network:node:event': {
+          const ev = msg.data || {};
+          set((s) => ({
+            networkEvents: [...s.networkEvents, { ...ev, timestamp: ev.timestamp || Date.now() }].slice(-100),
+          }));
+          break;
+        }
+
+        case 'network:status':
+          set({ networkStatus: { ...get().networkStatus, ...(msg.data || {}) } });
+          break;
+
+        case 'network:install:progress': {
+          const { step, message, percent } = msg.data || {};
+          if (step === 'done') {
+            set({
+              networkInstalled: true,
+              networkInstallProgress: { installing: false, step: null, message: null, percent: 0, error: null },
+            });
+            get().addToast('success', 'Network package installed');
+          } else if (step === 'error') {
+            set({
+              networkInstallProgress: {
+                installing: false,
+                step: 'error',
+                message: message || 'Install failed',
+                percent: 0,
+                error: message || 'Install failed',
+              },
+            });
+          } else {
+            set({
+              networkInstallProgress: {
+                installing: true,
+                step: step || 'progress',
+                message: message || '',
+                percent: Number.isFinite(percent) ? Math.max(0, Math.min(100, percent)) : get().networkInstallProgress.percent,
+                error: null,
+              },
+            });
+          }
+          break;
+        }
+
+        case 'config:updated':
+          get().fetchBetaStatus();
+          get().fetchNetworkInstallStatus();
+          break;
       }
     };
 
@@ -1589,6 +1652,133 @@ export const useGrooveStore = create((set, get) => ({
     }
   },
 
+  // ── Network (Early Access) ────────────────────────────────
+
+  async fetchBetaStatus() {
+    try {
+      const data = await api.get('/beta/status');
+      set({ networkUnlocked: !!data?.unlocked });
+    } catch { /* endpoint may not exist yet */ }
+  },
+
+  async activateBeta(code) {
+    const data = await api.post('/beta/activate', { code });
+    if (!data?.unlocked) {
+      throw new Error(data?.message || 'Invalid invite code');
+    }
+    set({ networkUnlocked: true });
+    return data;
+  },
+
+  async deactivateBeta() {
+    try {
+      await api.post('/beta/deactivate');
+      set({
+        networkUnlocked: false,
+        activeView: get().activeView === 'network' ? 'agents' : get().activeView,
+      });
+    } catch (err) {
+      get().addToast('error', 'Deactivate failed', err.message);
+      throw err;
+    }
+  },
+
+  async fetchNetworkNodeStatus() {
+    try {
+      const data = await api.get('/network/node/status');
+      const update = { networkNode: { ...get().networkNode, ...(data || {}) } };
+      if (data && typeof data.installed === 'boolean') {
+        update.networkInstalled = data.installed;
+      }
+      set(update);
+      return data;
+    } catch { return null; }
+  },
+
+  async fetchNetworkInstallStatus() {
+    try {
+      const data = await api.get('/network/install/status');
+      if (data && typeof data.installed === 'boolean') {
+        set({ networkInstalled: data.installed });
+      }
+      return data;
+    } catch { return null; }
+  },
+
+  async installNetworkPackage() {
+    set({
+      networkInstallProgress: {
+        installing: true,
+        step: 'starting',
+        message: 'Starting install…',
+        percent: 0,
+        error: null,
+      },
+    });
+    try {
+      await api.post('/network/install');
+    } catch (err) {
+      set({
+        networkInstallProgress: {
+          installing: false,
+          step: 'error',
+          message: err.message,
+          percent: 0,
+          error: err.message,
+        },
+      });
+      get().addToast('error', 'Install failed', err.message);
+    }
+  },
+
+  async uninstallNetworkPackage() {
+    try {
+      await api.post('/network/uninstall');
+      set({
+        networkInstalled: false,
+        networkNode: { active: false, status: 'disconnected', nodeId: null, layers: null, model: null, sessions: 0, hardware: null },
+        networkInstallProgress: { installing: false, step: null, message: null, percent: 0, error: null },
+      });
+      get().addToast('success', 'Network package uninstalled');
+    } catch (err) {
+      get().addToast('error', 'Uninstall failed', err.message);
+      throw err;
+    }
+  },
+
+  async fetchNetworkStatus() {
+    try {
+      const data = await api.get('/network/status');
+      set({ networkStatus: { ...get().networkStatus, ...(data || {}) } });
+      return data;
+    } catch { return null; }
+  },
+
+  async startNetworkNode() {
+    set({ networkNode: { ...get().networkNode, status: 'connecting' } });
+    try {
+      const data = await api.post('/network/node/start');
+      set({ networkNode: { ...get().networkNode, active: true, ...(data || {}) } });
+      get().addToast('success', 'Node started', 'Connecting to the Groove network');
+      return data;
+    } catch (err) {
+      set({ networkNode: { ...get().networkNode, status: 'disconnected', active: false } });
+      get().addToast('error', 'Node start failed', err.message);
+      throw err;
+    }
+  },
+
+  async stopNetworkNode() {
+    try {
+      await api.post('/network/node/stop');
+      set({ networkNode: { ...get().networkNode, active: false, status: 'disconnected' } });
+      get().addToast('info', 'Node stopped');
+    } catch (err) {
+      get().addToast('error', 'Node stop failed', err.message);
+      throw err;
+    }
+  },
+
   async renameFile(oldPath, newPath) {
     try {
       await api.post('/files/rename', { oldPath, newPath });

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

@@ -0,0 +1,227 @@
+// 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 { NodeToggle } from '../components/network/node-toggle';
+import { NodeDetails } from '../components/network/node-details';
+import { NetworkStatus } from '../components/network/network-status';
+import { Globe, Download, Check, AlertCircle, Loader2, Trash2 } from 'lucide-react';
+
+const REQUIREMENTS = [
+  'Python 3.10 or higher',
+  '~2 GB disk space for model shards',
+  '8 GB+ RAM recommended',
+];
+
+function InstallProgress({ progress }) {
+  const percent = Math.max(0, Math.min(100, Number.isFinite(progress.percent) ? progress.percent : 0));
+  return (
+    <div className="w-full flex flex-col gap-3">
+      <div className="h-2 w-full rounded-full bg-surface-3 overflow-hidden">
+        <div
+          className="h-full rounded-full bg-accent transition-all duration-500 ease-out"
+          style={{ width: `${percent}%` }}
+        />
+      </div>
+      <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>
+        </div>
+        <span>{percent}%</span>
+      </div>
+    </div>
+  );
+}
+
+function InstallError({ message, onRetry }) {
+  return (
+    <div className="w-full flex flex-col gap-3">
+      <div className="rounded-md border border-danger/40 bg-danger/10 px-4 py-3 flex items-start gap-2.5 text-left">
+        <AlertCircle size={14} className="text-danger flex-shrink-0 mt-0.5" />
+        <div className="flex-1 min-w-0">
+          <div className="text-xs font-semibold text-danger font-sans mb-0.5">Install failed</div>
+          <div className="text-xs text-text-1 font-sans break-words">{message}</div>
+        </div>
+      </div>
+      <Button variant="primary" size="lg" onClick={onRetry} className="w-full">
+        <Download size={14} />
+        Retry Install
+      </Button>
+    </div>
+  );
+}
+
+function InstallGate() {
+  const installNetworkPackage = useGrooveStore((s) => s.installNetworkPackage);
+  const progress = useGrooveStore((s) => s.networkInstallProgress);
+  const { installing, error } = progress;
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-full px-6 py-12">
+      <div className="w-full max-w-md flex flex-col items-center text-center">
+        <div className="mb-5 rounded-full bg-surface-2 border border-border-subtle p-5">
+          <Globe size={48} className="text-text-3" strokeWidth={1.25} />
+        </div>
+        <h3 className="text-base font-semibold text-text-0 font-sans mb-2">
+          Install Groove Network
+        </h3>
+        <p className="text-sm text-text-2 font-sans leading-relaxed mb-6">
+          The network package enables decentralized LLM inference. Contribute your compute power or run models across the Groove network.
+        </p>
+
+        <div className="w-full rounded-md border border-border-subtle bg-surface-1 px-4 py-3 mb-6">
+          <div className="text-2xs font-semibold text-text-3 font-sans uppercase tracking-wider mb-2 text-left">
+            Requirements
+          </div>
+          <ul className="flex flex-col gap-1.5">
+            {REQUIREMENTS.map((req) => (
+              <li key={req} className="flex items-center gap-2 text-xs font-sans text-text-1 text-left">
+                <Check size={12} className="text-accent flex-shrink-0" />
+                <span>{req}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {installing ? (
+          <InstallProgress progress={progress} />
+        ) : error ? (
+          <InstallError message={error} onRetry={() => installNetworkPackage()} />
+        ) : (
+          <>
+            <Button
+              variant="primary"
+              size="lg"
+              onClick={() => installNetworkPackage()}
+              className="w-full"
+            >
+              <Download size={14} />
+              Install Network Package
+            </Button>
+            <p className="text-2xs font-sans text-text-3 mt-3">
+              This will download and set up the Groove Network runtime (~500 MB)
+            </p>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function UninstallButton() {
+  const [open, setOpen] = useState(false);
+  const uninstallNetworkPackage = useGrooveStore((s) => s.uninstallNetworkPackage);
+  const [busy, setBusy] = useState(false);
+
+  const confirm = async () => {
+    setBusy(true);
+    try {
+      await uninstallNetworkPackage();
+      setOpen(false);
+    } catch { /* toast already shown */ }
+    finally { setBusy(false); }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <button
+          type="button"
+          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
+        </button>
+      </DialogTrigger>
+      <DialogContent title="Uninstall Network Package" description="Confirm uninstall">
+        <div className="px-5 py-4 flex flex-col gap-3">
+          <p className="text-sm text-text-1 font-sans leading-relaxed">
+            This will stop your node and remove the network package from <span className="font-mono text-text-2">~/.groove/network</span>.
+          </p>
+          <p className="text-xs text-text-3 font-sans leading-relaxed">
+            Your identity (<span className="font-mono">~/.groove/node_key.json</span>) will be preserved — you can reinstall later without losing your wallet.
+          </p>
+        </div>
+        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-border-subtle bg-surface-0">
+          <Button variant="ghost" size="sm" onClick={() => setOpen(false)} disabled={busy}>Cancel</Button>
+          <Button variant="danger" size="sm" onClick={confirm} disabled={busy}>
+            {busy ? <Loader2 size={12} className="animate-spin" /> : <Trash2 size={12} />}
+            Uninstall
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default function NetworkView() {
+  const fetchNetworkNodeStatus = useGrooveStore((s) => s.fetchNetworkNodeStatus);
+  const fetchNetworkStatus = useGrooveStore((s) => s.fetchNetworkStatus);
+  const node = useGrooveStore((s) => s.networkNode);
+  const installed = useGrooveStore((s) => s.networkInstalled);
+
+  useEffect(() => {
+    fetchNetworkNodeStatus();
+    if (installed) {
+      fetchNetworkStatus();
+      const interval = setInterval(() => { fetchNetworkStatus(); }, 10000);
+      return () => clearInterval(interval);
+    }
+  }, [fetchNetworkNodeStatus, fetchNetworkStatus, 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>
+        <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>
+          </>
+        )}
+      </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 />
+            </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>
+          </div>
+        )}
+      </ScrollArea>
+    </div>
+  );
+}