groove-dev 0.27.147 → 0.27.149

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-BKbsE_hn.js"></script>
+    <script type="module" crossorigin src="/assets/index-CReKPWhY.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/vendor-26L3JoZv.js">
     <link rel="modulepreload" crossorigin href="/assets/reactflow-DoBZjiHE.js">
     <link rel="modulepreload" crossorigin href="/assets/codemirror-BYKpdS2W.js">

package/packages/gui/package.json

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

package/packages/gui/src/components/lab/runtime-config.jsx

@@ -91,6 +91,7 @@ function AddRuntimeDialog({ open, onOpenChange }) {
 
 function RuntimeItem({ runtime, active, onSelect, onTest, onRemove, onStop, onStart, testing }) {
   const online = runtime.status === 'connected';
+  const starting = runtime.status === 'starting';
   const managed = !!(runtime._localModelId || runtime._mlxModelId || runtime.launchConfig || runtime.type === 'mlx' || runtime.type === 'llama-cpp');
   return (
     <button
@@ -102,15 +103,15 @@ function RuntimeItem({ runtime, active, onSelect, onTest, onRemove, onStop, onSt
     >
       <span className={cn(
         'w-1.5 h-1.5 rounded-full flex-shrink-0',
-        online ? 'bg-success' : runtime.status === 'error' ? 'bg-danger' : 'bg-text-4',
+        starting ? 'bg-warning animate-pulse' : online ? 'bg-success' : runtime.status === 'error' ? 'bg-danger' : 'bg-text-4',
       )} />
       <div className="flex-1 min-w-0">
         <div className={cn('text-[11px] font-sans font-medium truncate', active ? 'text-text-0' : 'text-text-2')}>
           {RUNTIME_TYPES.find((t) => t.value === runtime.type)?.label || runtime.type}
         </div>
         <div className="text-[10px] text-text-4 flex items-center gap-1.5">
-          <span className={cn('font-sans', online ? 'text-success' : 'text-danger')}>
-            {online ? 'Online' : 'Offline'}
+          <span className={cn('font-sans', starting ? 'text-warning' : online ? 'text-success' : 'text-danger')}>
+            {starting ? 'Starting...' : online ? 'Online' : 'Offline'}
           </span>
           {runtime.latency != null && online && (
             <span className="font-mono">{Math.round(runtime.latency)}ms</span>
@@ -128,7 +129,14 @@ function RuntimeItem({ runtime, active, onSelect, onTest, onRemove, onStop, onSt
             </button>
           </Tooltip>
         )}
-        {managed && !online && (
+        {starting && (
+          <Tooltip content="Starting server...">
+            <span className="p-1 text-warning">
+              <Loader2 size={10} className="animate-spin" />
+            </span>
+          </Tooltip>
+        )}
+        {managed && !online && !starting && (
           <Tooltip content="Start server">
             <button
               onClick={(e) => { e.stopPropagation(); onStart(runtime.id); }}

package/packages/gui/src/components/layout/status-bar.jsx

@@ -26,7 +26,7 @@ export function StatusBar({
   const labRuntimes = useGrooveStore((s) => s.labRuntimes);
   const stopLabRuntime = useGrooveStore((s) => s.stopLabRuntime);
   const activeTunnels = savedTunnels.filter((t) => t.active);
-  const runningRuntimes = (labRuntimes || []).filter((rt) => rt.status === 'connected');
+  const visibleRuntimes = (labRuntimes || []).filter((rt) => rt.status === 'connected' || rt.status === 'starting');
   const electron = isElectron();
 
   return (
@@ -113,26 +113,35 @@ export function StatusBar({
             <span>Federation</span>
           </button>
         )}
-        {runningRuntimes.map((rt) => (
-          <div key={rt.id} className="flex items-center gap-1">
-            <button
-              onClick={() => navigate('model-lab')}
-              className="flex items-center gap-1.5 text-text-3 hover:text-text-1 cursor-pointer transition-colors"
-              title={`${rt.name} — running`}
-            >
-              <Cpu size={10} className="text-success" />
-              <span>{rt.name}</span>
-              <span className="w-1.5 h-1.5 rounded-full bg-success" />
-            </button>
-            <button
-              onClick={() => stopLabRuntime(rt.id)}
-              className="p-0.5 text-text-4 hover:text-danger cursor-pointer transition-colors rounded"
-              title={`Stop ${rt.name}`}
-            >
-              <Square size={8} />
-            </button>
-          </div>
-        ))}
+        {visibleRuntimes.map((rt) => {
+          const starting = rt.status === 'starting';
+          return (
+            <div key={rt.id} className="flex items-center gap-1">
+              <button
+                onClick={() => navigate('model-lab')}
+                className="flex items-center gap-1.5 text-text-3 hover:text-text-1 cursor-pointer transition-colors"
+                title={`${rt.name} — ${starting ? 'starting...' : 'running'}`}
+              >
+                <Cpu size={10} className={starting ? 'text-warning animate-pulse' : 'text-success'} />
+                <span>{rt.name}</span>
+                {starting ? (
+                  <span className="w-1.5 h-1.5 rounded-full bg-warning animate-pulse" />
+                ) : (
+                  <span className="w-1.5 h-1.5 rounded-full bg-success" />
+                )}
+              </button>
+              {!starting && (
+                <button
+                  onClick={() => stopLabRuntime(rt.id)}
+                  className="p-0.5 text-text-4 hover:text-danger cursor-pointer transition-colors rounded"
+                  title={`Stop ${rt.name}`}
+                >
+                  <Square size={8} />
+                </button>
+              )}
+            </div>
+          );
+        })}
       </div>
 
       <div className="flex-1" />

package/packages/gui/src/stores/slices/providers-slice.js

@@ -396,12 +396,17 @@ export const createProvidersSlice = (set, get) => ({
 
   async startLabRuntime(id) {
     try {
-      get().addToast('info', 'Starting server...');
+      const runtimes = get().labRuntimes.map((r) =>
+        r.id === id ? { ...r, status: 'starting' } : r,
+      );
+      set({ labRuntimes: runtimes });
+      persistJSON('groove:labRuntimes', runtimes);
       await api.post(`/lab/runtimes/${id}/start`);
       await get().fetchLabRuntimes();
       get().setLabActiveRuntime(id);
       get().addToast('success', 'Server started');
     } catch (err) {
+      await get().fetchLabRuntimes();
       get().addToast('error', 'Failed to start server', err.message);
     }
   },