npm - groove-dev - Versions diffs - 0.27.59 → 0.27.61 - Mend

groove-dev 0.27.59 → 0.27.61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (68) hide show

package/node_modules/@groove-dev/gui/dist/index.html CHANGED Viewed

@@ -6,12 +6,12 @@
     <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-BycOlqLx.js"></script>
+    <script type="module" crossorigin src="/assets/index-DWao9glo.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">
     <link rel="modulepreload" crossorigin href="/assets/xterm--7_ns2zW.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-BrfCzrxJ.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-B3AqeyS4.css">
   </head>
   <body>
     <div id="root"></div>

package/node_modules/@groove-dev/gui/package.json CHANGED Viewed

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

package/node_modules/@groove-dev/gui/src/components/chat/chat-view.jsx CHANGED Viewed

@@ -38,6 +38,7 @@ export function ChatView() {
   const stopAgent = useGrooveStore((s) => s.stopAgent);
   const stopChatStreaming = useGrooveStore((s) => s.stopChatStreaming);
   const setConversationMode = useGrooveStore((s) => s.setConversationMode);
+  const setConversationModel = useGrooveStore((s) => s.setConversationModel);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
@@ -74,11 +75,11 @@ export function ChatView() {
   const handleModelChange = useCallback(async (selection) => {
     if (activeConversationId) {
-      // TODO: Update conversation model via API
+      await setConversationModel(activeConversationId, selection.provider, selection.model);
     } else {
       await handleNewChat(selection.provider, selection.model);
     }
-  }, [activeConversationId, handleNewChat]);
+  }, [activeConversationId, setConversationModel, handleNewChat]);
   const currentModel = activeConversation
     ? { provider: activeConversation.provider, model: activeConversation.model }

package/node_modules/@groove-dev/gui/src/components/chat/model-picker.jsx CHANGED Viewed

@@ -83,7 +83,7 @@ export function ModelPicker({ value, onChange, disabled }) {
       </button>
       {open && (
-        <div className="absolute top-full left-0 mt-1 w-72 max-h-80 overflow-y-auto rounded-lg border border-border bg-surface-1 shadow-xl z-50">
+        <div className="absolute top-full right-0 mt-1 w-72 max-h-80 overflow-y-auto rounded-lg border border-border bg-surface-1 shadow-xl z-50">
           {providers.length === 0 && (
             <div className="px-4 py-6 text-center text-xs text-text-3 font-sans">No providers available</div>
           )}

package/node_modules/@groove-dev/gui/src/components/layout/status-bar.jsx CHANGED Viewed

@@ -2,9 +2,11 @@
 import { Terminal, BookOpen, Radio, Plug, Globe, ArrowUpCircle, X, Unplug } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { StatusDot } from '../ui/status-dot';
+import { Badge } from '../ui/badge';
 import { fmtUptime } from '../../lib/format';
 import { useGrooveStore } from '../../stores/groove';
 import { isElectron, openExternal } from '../../lib/electron';
+import { UpdateModal } from '../ui/update-modal';
 export function StatusBar({
   connected,
@@ -18,7 +20,8 @@ export function StatusBar({
   const tunneled = useGrooveStore((s) => s.tunneled);
   const version = useGrooveStore((s) => s.version);
   const updateReady = useGrooveStore((s) => s.updateReady);
-  const installUpdate = useGrooveStore((s) => s.installUpdate);
+  const updateProgress = useGrooveStore((s) => s.updateProgress);
+  const setUpdateModalOpen = useGrooveStore((s) => s.setUpdateModalOpen);
   const subscription = useGrooveStore((s) => s.subscription);
   const navigate = useGrooveStore((s) => s.setActiveView);
   const activeTunnel = savedTunnels.find((t) => t.active);
@@ -110,14 +113,16 @@ export function StatusBar({
       <div className="flex-1" />
       {/* Right: version + docs + terminal toggle */}
-      {updateReady ? (
+      {updateReady || updateProgress ? (
         <button
-          onClick={installUpdate}
-          className="flex items-center gap-1.5 px-2 h-full text-success hover:bg-success/10 transition-colors cursor-pointer"
-          title={`Update to v${updateReady}`}
+          onClick={() => setUpdateModalOpen(true)}
+          className="flex items-center gap-1 px-2 h-full cursor-pointer"
+          title={updateReady ? `Update to v${updateReady}` : 'Downloading update\u2026'}
         >
-          <ArrowUpCircle size={12} />
-          <span>v{updateReady}</span>
+          <Badge variant="warning" className="cursor-pointer">
+            <ArrowUpCircle size={10} />
+            {updateReady ? 'Update Available' : 'Downloading\u2026'}
+          </Badge>
         </button>
       ) : version ? (
         <span className="text-text-4 px-2">v{version}</span>
@@ -146,6 +151,7 @@ export function StatusBar({
         <span>Terminal</span>
         <kbd className="font-mono text-text-4 ml-0.5">Cmd+J</kbd>
       </button>
+      <UpdateModal />
     </footer>
   );
 }

package/node_modules/@groove-dev/gui/src/components/network/activity-chart.jsx ADDED Viewed

@@ -0,0 +1,245 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useRef, useEffect, useState, useCallback, useMemo, memo } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { HEX, hexAlpha } from '../../lib/theme-hex';
+import { Badge } from '../ui/badge';
+function shortAddr(addr) {
+  if (!addr || typeof addr !== 'string') return '—';
+  if (addr.length < 14) return addr;
+  return `${addr.slice(0, 6)}…${addr.slice(-4)}`;
+}
+export const ActivityChart = memo(function ActivityChart() {
+  const snapshots = useGrooveStore((s) => s.networkSnapshots);
+  const nodes = useGrooveStore((s) => s.networkStatus.nodes || []);
+  const ownNodeId = useGrooveStore((s) => s.networkNode.nodeId);
+  const containerRef = useRef(null);
+  const canvasRef = useRef(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const [hover, setHover] = useState(null);
+  const { width, height } = size;
+  const pad = { top: 28, right: 12, bottom: 8, left: 12 };
+  const w = Math.max(width - pad.left - pad.right, 0);
+  const h = Math.max(height - pad.top - pad.bottom, 0);
+  const chartData = useMemo(() => {
+    if (!snapshots || snapshots.length < 2) return [];
+    return snapshots;
+  }, [snapshots]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      const { width: cw, height: ch } = entries[0].contentRect;
+      if (cw > 0 && ch > 0) setSize({ width: Math.floor(cw), height: Math.floor(ch) });
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const onMouseMove = useCallback((e) => {
+    const canvas = canvasRef.current;
+    if (!canvas || !chartData.length || w <= 0) return;
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left - pad.left;
+    if (x < 0 || x > w) { setHover(null); return; }
+    const index = Math.round((x / w) * (chartData.length - 1));
+    setHover({ x: pad.left + (index / Math.max(chartData.length - 1, 1)) * w, index });
+  }, [chartData, w, pad.left]);
+  const onMouseLeave = useCallback(() => setHover(null), []);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !chartData.length || width <= 0 || height <= 0 || w <= 0 || h <= 0) return;
+    const ctx = canvas.getContext('2d');
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    ctx.scale(dpr, dpr);
+    ctx.clearRect(0, 0, width, height);
+    const globalSessions = chartData.map((d) => d.globalSessions);
+    const mySessions = chartData.map((d) => d.mySessions);
+    const maxVal = Math.max(...globalSessions, ...mySessions, 1);
+    const xAt = (i) => pad.left + (i / Math.max(chartData.length - 1, 1)) * w;
+    const yAt = (v) => pad.top + h - (v / maxVal) * h;
+    // Horizontal grid lines
+    ctx.setLineDash([2, 4]);
+    ctx.strokeStyle = hexAlpha(HEX.text4, 0.2);
+    ctx.lineWidth = 1;
+    for (let i = 1; i <= 3; i++) {
+      const y = pad.top + (h / 4) * i;
+      ctx.beginPath();
+      ctx.moveTo(pad.left, y);
+      ctx.lineTo(pad.left + w, y);
+      ctx.stroke();
+    }
+    ctx.setLineDash([]);
+    // Y-axis labels
+    ctx.font = "9px 'JetBrains Mono Variable', monospace";
+    ctx.textAlign = 'left';
+    ctx.fillStyle = hexAlpha(HEX.text3, 0.5);
+    ctx.fillText(String(maxVal), pad.left + 4, pad.top + 10);
+    ctx.fillText(String(Math.round(maxVal / 2)), pad.left + 4, pad.top + h / 2 + 4);
+    // Network line — gradient fill
+    ctx.beginPath();
+    ctx.moveTo(pad.left, pad.top + h);
+    for (let i = 0; i < chartData.length; i++) {
+      ctx.lineTo(xAt(i), yAt(globalSessions[i]));
+    }
+    ctx.lineTo(xAt(chartData.length - 1), pad.top + h);
+    ctx.closePath();
+    const grad = ctx.createLinearGradient(0, pad.top, 0, pad.top + h);
+    grad.addColorStop(0, hexAlpha(HEX.purple, 0.2));
+    grad.addColorStop(0.7, hexAlpha(HEX.purple, 0.04));
+    grad.addColorStop(1, hexAlpha(HEX.purple, 0));
+    ctx.fillStyle = grad;
+    ctx.fill();
+    // Network line — stroke
+    ctx.beginPath();
+    ctx.strokeStyle = HEX.purple;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = 'round';
+    for (let i = 0; i < chartData.length; i++) {
+      const x = xAt(i);
+      const y = yAt(globalSessions[i]);
+      i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+    }
+    ctx.stroke();
+    // Your Node line — stroke only
+    ctx.beginPath();
+    ctx.strokeStyle = HEX.accent;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = 'round';
+    for (let i = 0; i < chartData.length; i++) {
+      const x = xAt(i);
+      const y = yAt(mySessions[i]);
+      i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+    }
+    ctx.stroke();
+    // Inline legend (top-right)
+    ctx.font = "9px 'Inter Variable', sans-serif";
+    ctx.textAlign = 'right';
+    let rx = width - pad.right - 4;
+    const ly = 14;
+    ctx.fillStyle = HEX.accent;
+    ctx.fillText('Your Node', rx, ly);
+    rx -= ctx.measureText('Your Node').width + 4;
+    ctx.beginPath(); ctx.arc(rx, ly - 3, 2.5, 0, Math.PI * 2); ctx.fill();
+    rx -= 14;
+    ctx.fillStyle = HEX.purple;
+    ctx.fillText('Network', rx, ly);
+    rx -= ctx.measureText('Network').width + 4;
+    ctx.beginPath(); ctx.arc(rx, ly - 3, 2.5, 0, Math.PI * 2); ctx.fill();
+    // Hover
+    if (hover && hover.index >= 0 && hover.index < chartData.length) {
+      const hx = hover.x;
+      const d = chartData[hover.index];
+      // Crosshair
+      ctx.beginPath();
+      ctx.moveTo(hx, pad.top);
+      ctx.lineTo(hx, pad.top + h);
+      ctx.strokeStyle = hexAlpha(HEX.text1, 0.15);
+      ctx.lineWidth = 1;
+      ctx.stroke();
+      // Dots
+      ctx.beginPath(); ctx.arc(hx, yAt(d.globalSessions), 3, 0, Math.PI * 2);
+      ctx.fillStyle = HEX.purple; ctx.fill();
+      ctx.beginPath(); ctx.arc(hx, yAt(d.mySessions), 3, 0, Math.PI * 2);
+      ctx.fillStyle = HEX.accent; ctx.fill();
+      // Tooltip
+      const lines = [
+        { label: 'Network', value: String(d.globalSessions), color: HEX.purple },
+        { label: 'Your Node', value: String(d.mySessions), color: HEX.accent },
+        { label: 'Nodes', value: String(d.nodeCount), color: HEX.text2 },
+      ];
+      const tooltipW = 104;
+      const tooltipH = lines.length * 16 + 12;
+      let tx = hx + 12;
+      if (tx + tooltipW > width - 8) tx = hx - tooltipW - 12;
+      const ty = Math.max(pad.top, yAt(d.globalSessions) - tooltipH / 2);
+      ctx.fillStyle = hexAlpha(HEX.surface0, 0.92);
+      ctx.beginPath(); ctx.roundRect(tx, ty, tooltipW, tooltipH, 4); ctx.fill();
+      ctx.strokeStyle = hexAlpha(HEX.text4, 0.2);
+      ctx.lineWidth = 1; ctx.stroke();
+      ctx.textAlign = 'left';
+      lines.forEach((line, i) => {
+        const rowY = ty + 14 + i * 16;
+        ctx.beginPath(); ctx.arc(tx + 8, rowY - 3, 2, 0, Math.PI * 2);
+        ctx.fillStyle = line.color; ctx.fill();
+        ctx.font = "8px 'Inter Variable', sans-serif";
+        ctx.fillStyle = HEX.text3; ctx.fillText(line.label, tx + 14, rowY);
+        ctx.font = "9px 'JetBrains Mono Variable', monospace";
+        ctx.fillStyle = HEX.text0; ctx.textAlign = 'right';
+        ctx.fillText(line.value, tx + tooltipW - 8, rowY);
+        ctx.textAlign = 'left';
+      });
+    }
+  }, [chartData, width, height, hover, w, h, pad]);
+  const activeNodes = nodes.filter((n) => n.status === 'active');
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-3 pt-2.5 pb-1 flex-shrink-0 flex items-center justify-between">
+        <span className="text-2xs font-mono text-text-3 uppercase tracking-widest">Network Activity</span>
+        <span className="text-2xs font-mono text-text-3 tabular-nums">{activeNodes.length} nodes</span>
+      </div>
+      <div className="relative flex-1 min-h-0">
+        {chartData.length < 2 ? (
+          <div className="absolute inset-0 flex items-center justify-center">
+            <span className="text-xs font-mono text-text-3">Collecting network data…</span>
+          </div>
+        ) : (
+          <div ref={containerRef} className="absolute inset-0">
+            {width > 0 && height > 0 && (
+              <canvas
+                ref={canvasRef}
+                style={{ width, height }}
+                className="block cursor-crosshair"
+                onMouseMove={onMouseMove}
+                onMouseLeave={onMouseLeave}
+              />
+            )}
+          </div>
+        )}
+      </div>
+      <div className="px-3 py-1.5 border-t border-border-subtle flex items-center gap-2 flex-shrink-0 font-mono text-2xs" style={{ background: hexAlpha(HEX.accent, 0.04) }}>
+        <span className="text-text-3">{activeNodes.length} node{activeNodes.length !== 1 ? 's' : ''} online</span>
+        {activeNodes.map((n) => {
+          const id = n.node_id || n.nodeId || '';
+          const isSelf = ownNodeId && id === ownNodeId;
+          const layers = Array.isArray(n.layers) ? `${n.layers[0]}-${n.layers[1]}` : '';
+          return (
+            <span key={id} className={isSelf ? 'text-accent' : 'text-text-2'}>
+              {shortAddr(id)}{isSelf ? ' (You' : '('}{layers ? ` · ${layers}` : ''})
+            </span>
+          );
+        })}
+      </div>
+    </div>
+  );
+});

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

@@ -121,7 +121,7 @@ export const ComputeHeader = memo(function ComputeHeader() {
   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)
-    : 'google/gemma-3-4b';
+    : 'Qwen/Qwen3-4B';
   const kpis = [
     { label: 'RAM', value: `${fmtMbToGb(compute.totalRamMb)} GB`, color: HEX.accent, hint: 'Total RAM across all network nodes.' },

package/node_modules/@groove-dev/gui/src/components/network/network-health.jsx CHANGED Viewed

@@ -22,7 +22,7 @@ export const NetworkHealth = memo(function NetworkHealth() {
   const node = useGrooveStore((s) => s.networkNode);
   const nodes = Array.isArray(status.nodes) ? status.nodes : [];
-  const totalLayers = status.totalLayers || 34;
+  const totalLayers = status.totalLayers || 36;
   const covered = status.coverage || 0;
   const coverage = coverageState(covered, totalLayers);
   const coveragePct = totalLayers ? Math.min(100, (covered / totalLayers) * 100) : 0;

package/node_modules/@groove-dev/gui/src/components/network/network-status.jsx CHANGED Viewed

@@ -24,7 +24,7 @@ function coverageState(covered, total) {
 function KpiTile({ icon: Icon, label, value, sub }) {
   return (
-    <div className="rounded-lg border border-border bg-surface-1 px-3 py-2.5 flex items-center gap-2.5 min-w-0">
+    <div className="rounded-sm border border-border bg-surface-1 px-3 py-2.5 flex items-center gap-2.5 min-w-0">
       <div className="w-8 h-8 rounded-md bg-accent/10 text-accent flex items-center justify-center flex-shrink-0">
         <Icon size={14} />
       </div>
@@ -53,7 +53,7 @@ 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">
+      <div className="flex items-center gap-2 px-3 py-2 rounded-sm 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>
@@ -71,7 +71,7 @@ export function NetworkStatus() {
       </div>
       {/* Coverage bar */}
-      <div className="rounded-lg border border-border bg-surface-1 px-4 py-3">
+      <div className="rounded-sm border border-border bg-surface-1 px-4 py-3">
         <div className="flex items-center justify-between mb-2">
           <span className="text-xs font-semibold text-text-1 font-sans">Layer Coverage</span>
           <Badge variant={coverage.tone}>{coverage.label}</Badge>
@@ -86,7 +86,7 @@ export function NetworkStatus() {
       </div>
       {/* Models */}
-      <div className="rounded-lg border border-border bg-surface-1 overflow-hidden">
+      <div className="rounded-sm border border-border bg-surface-1 overflow-hidden">
         <div className="px-4 py-2.5 border-b border-border-subtle">
           <span className="text-xs font-semibold text-text-1 font-sans">Models</span>
         </div>
@@ -111,7 +111,7 @@ export function NetworkStatus() {
       </div>
       {/* Nodes table */}
-      <div className="rounded-lg border border-border bg-surface-1 overflow-hidden">
+      <div className="rounded-sm border border-border bg-surface-1 overflow-hidden">
         <button
           onClick={() => setNodesOpen((v) => !v)}
           className="w-full flex items-center gap-2 px-4 py-2.5 border-b border-border-subtle cursor-pointer hover:bg-surface-2/40 transition-colors"

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

@@ -29,7 +29,7 @@ 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 flex-col rounded-sm 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>

package/node_modules/@groove-dev/gui/src/components/ui/update-modal.jsx ADDED Viewed

@@ -0,0 +1,70 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { ArrowUpCircle, Loader2 } from 'lucide-react';
+import { Dialog, DialogContent } from './dialog';
+import { Button } from './button';
+import { useGrooveStore } from '../../stores/groove';
+export function UpdateModal() {
+  const open = useGrooveStore((s) => s.updateModalOpen);
+  const setOpen = useGrooveStore((s) => s.setUpdateModalOpen);
+  const version = useGrooveStore((s) => s.version);
+  const updateReady = useGrooveStore((s) => s.updateReady);
+  const updateProgress = useGrooveStore((s) => s.updateProgress);
+  const installUpdate = useGrooveStore((s) => s.installUpdate);
+  const downloading = updateProgress && !updateReady;
+  const percent = downloading ? Math.max(0, Math.min(100, updateProgress.percent || 0)) : 100;
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent title="Update Available" description="Desktop app update">
+        <div className="px-5 py-4 flex flex-col gap-3">
+          <div className="flex items-center gap-3">
+            <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-accent/12">
+              <ArrowUpCircle size={20} className="text-accent" />
+            </div>
+            <div>
+              <p className="text-sm text-text-1 font-sans font-medium">
+                {downloading ? 'Downloading update\u2026' : `Ready to update`}
+              </p>
+              <p className="text-xs text-text-3 font-sans mt-0.5">
+                {version && <span className="font-mono">{version}</span>}
+                {version && updateReady && ' \u2192 '}
+                {updateReady && <span className="font-mono text-accent">{updateReady}</span>}
+              </p>
+            </div>
+          </div>
+          {downloading && (
+            <div className="flex items-center gap-2 mt-1">
+              <Loader2 size={12} className="animate-spin text-accent flex-shrink-0" />
+              <div className="flex-1 h-1.5 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>
+              <span className="text-2xs font-mono text-text-3 tabular-nums">{percent}%</span>
+            </div>
+          )}
+          {!downloading && (
+            <p className="text-xs text-text-3 font-sans leading-relaxed">
+              The app will restart to apply the update. Your work is saved automatically.
+            </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)}>Later</Button>
+          <Button
+            variant="primary"
+            size="sm"
+            disabled={downloading}
+            onClick={() => { installUpdate(); setOpen(false); }}
+          >
+            <ArrowUpCircle size={12} />
+            Update &amp; Restart
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -104,6 +104,7 @@ export const useGrooveStore = create((set, get) => ({
   networkVersion: { installed: null, latest: null, updateAvailable: false },
   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: [],
   // ── Marketplace Auth ───────────────────────────────────────
   marketplaceUser: null,        // { id, displayName, avatar, ... } or null
@@ -122,6 +123,8 @@ export const useGrooveStore = create((set, get) => ({
   // ── Version / Auto-Update ──────────────────────────────────
   version: null,
   updateReady: null,
+  updateProgress: null,
+  updateModalOpen: false,
   // ── Toasts ────────────────────────────────────────────────
   toasts: [],
@@ -183,10 +186,14 @@ export const useGrooveStore = create((set, get) => ({
           if (data) set({ subscription: { ...get().subscription, ...data } });
         });
       }
+      if (window.groove?.update?.onUpdateProgress) {
+        window.groove.update.onUpdateProgress((data) => {
+          set({ updateProgress: data });
+        });
+      }
       if (window.groove?.update?.onUpdateDownloaded) {
         window.groove.update.onUpdateDownloaded((data) => {
-          set({ updateReady: data.version });
-          get().addToast('info', 'Update available', `v${data.version} downloaded — restart to apply`);
+          set({ updateReady: data.version, updateModalOpen: true, updateProgress: null });
         });
       }
     };
@@ -712,6 +719,24 @@ export const useGrooveStore = create((set, get) => ({
             };
           }
           set(nsUpdate);
+          // Push snapshot for activity chart
+          const wsNodes = nsData.nodes || [];
+          const wsOwnId = get().networkNode.nodeId;
+          const wsOwn = wsOwnId ? wsNodes.find((n) => (n.node_id || n.nodeId) === wsOwnId) : null;
+          const wsActive = wsNodes.filter((n) => n.status === 'active');
+          const wsSnap = {
+            t: Date.now(),
+            globalSessions: nsData.activeSessions || 0,
+            mySessions: wsOwn?.active_sessions ?? wsOwn?.sessions ?? 0,
+            nodeCount: wsActive.length,
+            avgLoad: wsActive.length > 0 ? wsActive.reduce((s, n) => s + (n.load || 0), 0) / wsActive.length : 0,
+            myLoad: wsOwn?.load ?? 0,
+          };
+          let wsSnapshots = [...get().networkSnapshots, wsSnap];
+          if (wsSnapshots.length > 100) wsSnapshots = wsSnapshots.slice(-100);
+          set({ networkSnapshots: wsSnapshots });
           break;
         }
@@ -842,7 +867,6 @@ export const useGrooveStore = create((set, get) => ({
               arr.push({ from: 'assistant', text, timestamp: Date.now() });
             }
             msgs[conversationId] = arr.slice(-200);
-            persistJSON('groove:conversationMessages', msgs);
             return { conversationMessages: msgs, streamingConversationId: conversationId };
           });
           break;
@@ -850,10 +874,10 @@ export const useGrooveStore = create((set, get) => ({
         case 'conversation:complete': {
           const { conversationId } = msg.data || msg;
-          if (conversationId) {
+          if (conversationId && get().streamingConversationId === conversationId) {
             set({ sendingMessage: false, streamingConversationId: null });
-            persistJSON('groove:conversationMessages', get().conversationMessages);
           }
+          if (conversationId) persistJSON('groove:conversationMessages', get().conversationMessages);
           break;
         }
@@ -865,7 +889,8 @@ export const useGrooveStore = create((set, get) => ({
               if (!msgs[conversationId]) msgs[conversationId] = [];
               msgs[conversationId] = [...msgs[conversationId], { from: 'system', text: `Error: ${error || 'Unknown error'}`, timestamp: Date.now() }];
               persistJSON('groove:conversationMessages', msgs);
-              return { conversationMessages: msgs, sendingMessage: false, streamingConversationId: null };
+              const isActive = s.streamingConversationId === conversationId;
+              return { conversationMessages: msgs, sendingMessage: isActive ? false : s.sendingMessage, streamingConversationId: isActive ? null : s.streamingConversationId };
             });
           }
           break;
@@ -1052,6 +1077,12 @@ export const useGrooveStore = create((set, get) => ({
   installUpdate() {
     window.groove?.update?.installUpdate();
   },
+  setUpdateModalOpen(open) {
+    set({ updateModalOpen: open });
+  },
+  checkForUpdate() {
+    window.groove?.update?.checkForUpdate();
+  },
   // ── Marketplace Auth ────────────────────────────────────────
@@ -1699,6 +1730,15 @@ export const useGrooveStore = create((set, get) => ({
     }
   },
+  async setConversationModel(id, provider, model) {
+    try {
+      const conv = await api.patch(`/conversations/${encodeURIComponent(id)}`, { provider, model });
+      set((s) => ({ conversations: s.conversations.map((c) => c.id === id ? { ...c, ...conv } : c) }));
+    } catch (err) {
+      get().addToast('error', 'Model change failed', err.message);
+    }
+  },
   async stopChatStreaming(conversationId) {
     try {
       await api.post(`/conversations/${encodeURIComponent(conversationId)}/stop`);
@@ -2106,6 +2146,26 @@ export const useGrooveStore = create((set, get) => ({
         };
       }
       set(update);
+      // Push snapshot for activity chart
+      if (data) {
+        const ownId = get().networkNode.nodeId;
+        const nodes = data.nodes || [];
+        const ownNode = ownId ? nodes.find((n) => (n.node_id || n.nodeId) === ownId) : null;
+        const activeNodes = nodes.filter((n) => n.status === 'active');
+        const snap = {
+          t: Date.now(),
+          globalSessions: data.activeSessions || 0,
+          mySessions: ownNode?.active_sessions ?? ownNode?.sessions ?? 0,
+          nodeCount: activeNodes.length,
+          avgLoad: activeNodes.length > 0 ? activeNodes.reduce((s, n) => s + (n.load || 0), 0) / activeNodes.length : 0,
+          myLoad: ownNode?.load ?? 0,
+        };
+        let snapshots = [...get().networkSnapshots, snap];
+        if (snapshots.length > 100) snapshots = snapshots.slice(-100);
+        set({ networkSnapshots: snapshots });
+      }
       return data;
     } catch {
       set({ networkStatusReachable: false });