groove-dev 0.27.49 → 0.27.51

package/packages/gui/dist/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <title>Groove GUI</title>
-    <script type="module" crossorigin src="/assets/index-B9oPxmNj.js"></script>
+    <script type="module" crossorigin src="/assets/index-Dd4u8X70.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/vendor-C0HXlhrU.js">
     <link rel="modulepreload" crossorigin href="/assets/reactflow-BQPfi37R.js">
     <link rel="modulepreload" crossorigin href="/assets/codemirror-BBL3i_JW.js">

package/packages/gui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groove-dev/gui",
-  "version": "0.27.49",
+  "version": "0.27.51",
   "description": "GROOVE GUI — visual agent control plane",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",

package/packages/gui/src/components/network/network-status.jsx

@@ -40,6 +40,7 @@ function KpiTile({ icon: Icon, label, value, sub }) {
 export function NetworkStatus() {
   const status = useGrooveStore((s) => s.networkStatus);
   const ownNodeId = useGrooveStore((s) => s.networkNode.nodeId);
+  const signalReachable = useGrooveStore((s) => s.networkStatusReachable);
   const [nodesOpen, setNodesOpen] = useState(true);
 
   const nodes = Array.isArray(status.nodes) ? status.nodes : [];
@@ -51,6 +52,17 @@ export function NetworkStatus() {
 
   return (
     <div className="flex flex-col gap-3">
+      {/* Signal connection indicator */}
+      <div className="flex items-center gap-2 px-3 py-2 rounded-lg border border-border bg-surface-1">
+        <StatusDot status={signalReachable ? 'running' : 'crashed'} size="sm" />
+        <span className="text-2xs font-sans text-text-3">Signal:</span>
+        <span className="text-2xs font-mono text-text-1">signal.groovedev.ai</span>
+        <div className="flex-1" />
+        <span className={cn('text-2xs font-sans', signalReachable ? 'text-success' : 'text-danger')}>
+          {signalReachable ? 'Connected' : 'Unreachable'}
+        </span>
+      </div>
+
       {/* KPI strip */}
       <div className="grid grid-cols-3 gap-2">
         <KpiTile icon={Globe}   label="Nodes"    value={fmtNum(nodes.length)} sub={`${nodes.filter((n) => n.status === 'active').length} active`} />

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

@@ -121,22 +121,25 @@ export function NodeToggle() {
             </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>
+            {node.nodeId && (
+              <div className="rounded-md border border-border-subtle bg-surface-0 px-3 py-2.5">
+                <div className="text-2xs font-semibold text-text-3 font-sans uppercase tracking-wider mb-1.5">Your Node Identity</div>
+                <div className="flex items-center gap-2">
+                  <code className="flex-1 h-8 px-2.5 flex items-center bg-surface-1 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-1 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 className="mt-1.5 text-2xs font-sans text-text-4">This is your network wallet address</div>
               </div>
-            </div>
+            )}
 
             {/* Sessions + memory */}
             <div className="grid grid-cols-2 gap-2">

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

@@ -92,7 +92,10 @@ export const useGrooveStore = create((set, get) => ({
   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 },
+  networkStatusReachable: false,
   networkEvents: [],
+  networkVersion: { installed: null, latest: null, updateAvailable: false },
+  networkUpdateProgress: { updating: false, step: null, message: null, percent: 0, error: null },
 
   // ── Marketplace Auth ───────────────────────────────────────
   marketplaceUser: null,        // { id, displayName, avatar, ... } or null
@@ -616,6 +619,34 @@ export const useGrooveStore = create((set, get) => ({
           break;
         }
 
+        case 'signal_connected': {
+          const ev = msg.data || msg || {};
+          set((s) => ({
+            networkEvents: [...s.networkEvents, {
+              level: 'connected',
+              msg: ev.msg || ev.message || 'Connected to signal',
+              detail: ev.detail || ev.url,
+              ...ev,
+              timestamp: ev.timestamp || Date.now(),
+            }].slice(-100),
+          }));
+          break;
+        }
+
+        case 'matched': {
+          const ev = msg.data || msg || {};
+          set((s) => ({
+            networkEvents: [...s.networkEvents, {
+              level: 'session',
+              msg: ev.msg || ev.message || 'Session matched',
+              detail: ev.detail || ev.peer || ev.nodeId,
+              ...ev,
+              timestamp: ev.timestamp || Date.now(),
+            }].slice(-100),
+          }));
+          break;
+        }
+
         case 'network:status':
           set({ networkStatus: { ...get().networkStatus, ...(msg.data || {}) } });
           break;
@@ -652,6 +683,55 @@ export const useGrooveStore = create((set, get) => ({
           break;
         }
 
+        case 'network:update:available': {
+          const { installed, latest, updateAvailable } = msg.data || {};
+          set({
+            networkVersion: {
+              installed: installed ?? get().networkVersion.installed,
+              latest: latest ?? get().networkVersion.latest,
+              updateAvailable: !!updateAvailable,
+            },
+          });
+          break;
+        }
+
+        case 'network:update:progress': {
+          const { step, message, percent, version, error } = msg.data || {};
+          if (step === 'done') {
+            set({
+              networkUpdateProgress: { updating: false, step: null, message: null, percent: 0, error: null },
+              networkVersion: {
+                ...get().networkVersion,
+                installed: version || get().networkVersion.latest || get().networkVersion.installed,
+                updateAvailable: false,
+              },
+            });
+            get().addToast('success', 'Network package updated');
+          } else if (step === 'error') {
+            set({
+              networkUpdateProgress: {
+                updating: false,
+                step: 'error',
+                message: message || error || 'Update failed',
+                percent: 0,
+                error: message || error || 'Update failed',
+              },
+            });
+            get().addToast('error', 'Network update failed', message || error);
+          } else {
+            set({
+              networkUpdateProgress: {
+                updating: true,
+                step: step || 'progress',
+                message: message || '',
+                percent: Number.isFinite(percent) ? Math.max(0, Math.min(100, percent)) : get().networkUpdateProgress.percent,
+                error: null,
+              },
+            });
+          }
+          break;
+        }
+
         case 'config:updated':
           get().fetchBetaStatus();
           get().fetchNetworkInstallStatus();
@@ -1749,11 +1829,58 @@ export const useGrooveStore = create((set, get) => ({
   async fetchNetworkStatus() {
     try {
       const data = await api.get('/network/status');
-      set({ networkStatus: { ...get().networkStatus, ...(data || {}) } });
+      set({
+        networkStatus: { ...get().networkStatus, ...(data || {}) },
+        networkStatusReachable: true,
+      });
+      return data;
+    } catch {
+      set({ networkStatusReachable: false });
+      return null;
+    }
+  },
+
+  async checkNetworkUpdate() {
+    try {
+      const data = await api.get('/network/update/check');
+      if (!data) return null;
+      set({
+        networkVersion: {
+          installed: data.installed ?? null,
+          latest: data.latest ?? null,
+          updateAvailable: !!data.updateAvailable,
+        },
+      });
       return data;
     } catch { return null; }
   },
 
+  async updateNetworkPackage() {
+    set({
+      networkUpdateProgress: {
+        updating: true,
+        step: 'starting',
+        message: 'Starting update…',
+        percent: 0,
+        error: null,
+      },
+    });
+    try {
+      await api.post('/network/update');
+    } catch (err) {
+      set({
+        networkUpdateProgress: {
+          updating: false,
+          step: 'error',
+          message: err.message,
+          percent: 0,
+          error: err.message,
+        },
+      });
+      get().addToast('error', 'Update failed', err.message);
+    }
+  },
+
   async startNetworkNode() {
     set({ networkNode: { ...get().networkNode, status: 'connecting' } });
     try {

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

@@ -9,7 +9,7 @@ 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';
+import { Globe, Download, Check, AlertCircle, Loader2, Trash2, ArrowUpCircle } from 'lucide-react';
 
 const REQUIREMENTS = [
   'Python 3.10 or higher',
@@ -113,6 +113,79 @@ function InstallGate() {
   );
 }
 
+function UpdateProgress({ progress }) {
+  const percent = Math.max(0, Math.min(100, Number.isFinite(progress.percent) ? progress.percent : 0));
+  return (
+    <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>
+        <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"
+            style={{ width: `${percent}%` }}
+          />
+        </div>
+      </div>
+      <span className="text-2xs font-mono text-text-3 tabular-nums">{percent}%</span>
+    </div>
+  );
+}
+
+function UpdateButton() {
+  const [open, setOpen] = useState(false);
+  const version = useGrooveStore((s) => s.networkVersion);
+  const progress = useGrooveStore((s) => s.networkUpdateProgress);
+  const updateNetworkPackage = useGrooveStore((s) => s.updateNetworkPackage);
+
+  if (progress.updating) {
+    return <UpdateProgress progress={progress} />;
+  }
+
+  if (!version.updateAvailable) return null;
+
+  const confirm = async () => {
+    try {
+      await updateNetworkPackage();
+      setOpen(false);
+    } catch { /* toast handled */ }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <button
+          type="button"
+          className="inline-flex items-center gap-1"
+          title={`Update to ${version.latest}`}
+        >
+          <Badge variant="warning" className="cursor-pointer">
+            <ArrowUpCircle size={10} />
+            Update Available
+          </Badge>
+        </button>
+      </DialogTrigger>
+      <DialogContent title="Update Network Package" description="Confirm update">
+        <div className="px-5 py-4 flex flex-col gap-3">
+          <p className="text-sm text-text-1 font-sans leading-relaxed">
+            Update to <span className="font-mono text-accent">{version.latest}</span>?
+          </p>
+          <p className="text-xs text-text-3 font-sans leading-relaxed">
+            You are currently running <span className="font-mono">{version.installed || 'unknown'}</span>. Your node will be stopped during the update and restarted after.
+          </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)}>Cancel</Button>
+          <Button variant="primary" size="sm" onClick={confirm}>
+            <ArrowUpCircle size={12} />
+            Update
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 function UninstallButton() {
   const [open, setOpen] = useState(false);
   const uninstallNetworkPackage = useGrooveStore((s) => s.uninstallNetworkPackage);
@@ -162,17 +235,20 @@ function UninstallButton() {
 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);
 
   useEffect(() => {
     fetchNetworkNodeStatus();
     if (installed) {
       fetchNetworkStatus();
+      checkNetworkUpdate();
       const interval = setInterval(() => { fetchNetworkStatus(); }, 10000);
       return () => clearInterval(interval);
     }
-  }, [fetchNetworkNodeStatus, fetchNetworkStatus, installed]);
+  }, [fetchNetworkNodeStatus, fetchNetworkStatus, checkNetworkUpdate, installed]);
 
   return (
     <div className="flex flex-col h-full">
@@ -181,6 +257,10 @@ export default function NetworkView() {
         <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 && (
           <>