groove-dev 0.27.42 → 0.27.45

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

@@ -0,0 +1,66 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useGrooveStore } from '../../stores/groove';
+import { ScrollArea } from '../ui/scroll-area';
+import { timeAgo } from '../../lib/format';
+import { cn } from '../../lib/cn';
+import { Activity, Zap, AlertTriangle, CheckCircle } from 'lucide-react';
+
+const EVENT_ICON = {
+  info: Activity,
+  success: CheckCircle,
+  warning: AlertTriangle,
+  error: AlertTriangle,
+  connected: CheckCircle,
+  disconnected: AlertTriangle,
+  session: Zap,
+};
+
+const EVENT_COLOR = {
+  info: 'text-text-3',
+  success: 'text-success',
+  warning: 'text-warning',
+  error: 'text-danger',
+  connected: 'text-success',
+  disconnected: 'text-warning',
+  session: 'text-accent',
+};
+
+export function NodeDetails() {
+  const events = useGrooveStore((s) => s.networkEvents);
+
+  return (
+    <div className="flex flex-col rounded-lg border border-border bg-surface-1 overflow-hidden min-h-0">
+      <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border-subtle">
+        <Activity size={12} className="text-text-3" />
+        <span className="text-xs font-semibold text-text-1 font-sans">Node Activity</span>
+        <div className="flex-1" />
+        <span className="text-2xs font-mono text-text-4">{events.length} events</span>
+      </div>
+      <ScrollArea className="flex-1 min-h-[160px] max-h-[320px]">
+        {events.length === 0 ? (
+          <div className="px-4 py-8 text-center text-2xs text-text-4 font-sans">
+            Toggle on to start contributing — events will appear here.
+          </div>
+        ) : (
+          <ul className="divide-y divide-border-subtle">
+            {[...events].reverse().map((ev, i) => {
+              const level = ev.level || ev.type || 'info';
+              const Icon = EVENT_ICON[level] || Activity;
+              const color = EVENT_COLOR[level] || 'text-text-3';
+              return (
+                <li key={i} className="flex items-start gap-2.5 px-4 py-2">
+                  <Icon size={11} className={cn('flex-shrink-0 mt-0.5', color)} />
+                  <div className="flex-1 min-w-0">
+                    <div className="text-xs font-sans text-text-1 break-words">{ev.msg || ev.message || ev.text || 'event'}</div>
+                    {ev.detail && <div className="text-2xs text-text-4 font-mono mt-0.5">{ev.detail}</div>}
+                  </div>
+                  <span className="text-2xs font-mono text-text-4 flex-shrink-0">{timeAgo(ev.timestamp || ev.ts)}</span>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </ScrollArea>
+    </div>
+  );
+}

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) => {
@@ -585,6 +595,7 @@ export const useGrooveStore = create((set, get) => ({
               },
             });
           }).catch(() => {});
+          get().fetchTunnels();
           break;
         }
 
@@ -592,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;
       }
     };
 
@@ -1588,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/agents.jsx

@@ -181,7 +181,7 @@ export function TeamTabBar() {
                 className={cn(
                   'relative flex items-center gap-2 px-3 h-9 text-xs font-sans cursor-pointer select-none transition-colors flex-shrink-0',
                   isActive
-                    ? 'text-text-0 font-semibold border-x border-x-border bg-[#242830]'
+                    ? 'text-text-0 font-semibold border-x border-x-[#242830] bg-[#242830]'
                     : 'text-text-3 hover:text-text-1 hover:bg-surface-3/50',
                   dragId === team.id && 'opacity-40',
                   dragOverId === team.id && dragId !== team.id && 'border-l-2 !border-l-accent',