groove-dev 0.27.128 → 0.27.130

package/node_modules/@groove-dev/gui/src/components/ui/combobox.jsx

@@ -0,0 +1,118 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { cn } from '../../lib/cn';
+import { ChevronDown } from 'lucide-react';
+
+export function Combobox({ value, onChange, options = [], placeholder, className, renderOption }) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [highlightIndex, setHighlightIndex] = useState(-1);
+  const wrapperRef = useRef(null);
+  const inputRef = useRef(null);
+
+  const filtered = query
+    ? options.filter((o) => (o.name || o.id).toLowerCase().includes(query.toLowerCase()))
+    : options;
+
+  useEffect(() => {
+    function handleClickOutside(e) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  useEffect(() => {
+    setHighlightIndex(-1);
+  }, [query, open]);
+
+  const handleSelect = useCallback((val) => {
+    onChange(val);
+    setQuery('');
+    setOpen(false);
+    inputRef.current?.blur();
+  }, [onChange]);
+
+  function handleKeyDown(e) {
+    if (!open && (e.key === 'ArrowDown' || e.key === 'Enter')) {
+      setOpen(true);
+      return;
+    }
+    if (!open) return;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setHighlightIndex((i) => Math.min(i + 1, filtered.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setHighlightIndex((i) => Math.max(i - 1, 0));
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      if (highlightIndex >= 0 && filtered[highlightIndex]) {
+        handleSelect(filtered[highlightIndex].id || filtered[highlightIndex].name);
+      } else if (query.trim()) {
+        handleSelect(query.trim());
+      }
+    } else if (e.key === 'Escape') {
+      setOpen(false);
+      setQuery('');
+    }
+  }
+
+  const displayValue = value && !open ? (options.find((o) => (o.id || o.name) === value)?.name || value) : query;
+
+  return (
+    <div ref={wrapperRef} className={cn('relative', className)}>
+      <div className="relative">
+        <input
+          ref={inputRef}
+          value={displayValue}
+          onChange={(e) => { setQuery(e.target.value); setOpen(true); }}
+          onFocus={() => setOpen(true)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          className={cn(
+            'h-8 w-full rounded-md pl-3 pr-8 text-sm',
+            'bg-surface-1 border border-border text-text-0 font-sans',
+            'placeholder:text-text-4',
+            'focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent',
+            'transition-colors duration-100',
+          )}
+        />
+        <ChevronDown
+          size={12}
+          className="absolute right-2.5 top-1/2 -translate-y-1/2 text-text-4 pointer-events-none"
+        />
+      </div>
+
+      {open && filtered.length > 0 && (
+        <div className="absolute left-0 right-0 top-full mt-1 z-30 bg-surface-1 border border-border rounded-md shadow-xl py-1 max-h-48 overflow-y-auto">
+          {filtered.map((option, i) => (
+            <button
+              key={option.id || option.name}
+              onClick={() => handleSelect(option.id || option.name)}
+              onMouseEnter={() => setHighlightIndex(i)}
+              className={cn(
+                'w-full text-left px-3 py-1.5 text-sm font-sans cursor-pointer transition-colors',
+                (option.id || option.name) === value && 'text-accent',
+                highlightIndex === i ? 'bg-accent/10 text-text-0' : 'text-text-2 hover:bg-surface-5 hover:text-text-0',
+              )}
+            >
+              {renderOption ? renderOption(option) : (option.name || option.id)}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {open && filtered.length === 0 && query && (
+        <div className="absolute left-0 right-0 top-full mt-1 z-30 bg-surface-1 border border-border rounded-md shadow-xl py-2 px-3">
+          <p className="text-xs text-text-3 font-sans">
+            Press Enter to use &ldquo;{query}&rdquo;
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -219,6 +219,11 @@ export const useGrooveStore = create((set, get) => ({
   }),
   labSystemPrompt: localStorage.getItem('groove:labSystemPrompt') || '',
   labStreaming: false,
+  labLocalModels: [],
+  labLaunching: null,
+  labLlamaInstalled: null,
+  labLaunchPhase: null,
+  labLaunchError: null,
 
   // ── Onboarding ────────────────────────────────────────────
   onboardingComplete: localStorage.getItem('groove:onboardingComplete') === 'true',
@@ -628,6 +633,17 @@ export const useGrooveStore = create((set, get) => ({
           get().fetchOllamaStatus();
           break;
 
+        case 'lab:runtime:added':
+        case 'lab:runtime:updated':
+        case 'lab:runtime:removed':
+          get().fetchLabRuntimes();
+          break;
+
+        case 'lab:preset:created':
+        case 'lab:preset:updated':
+        case 'lab:preset:deleted':
+          break;
+
         case 'rotation:start':
           break;
 
@@ -3282,7 +3298,11 @@ export const useGrooveStore = create((set, get) => ({
 
   async fetchLabRuntimes() {
     try {
-      const data = await api.get('/lab/runtimes');
+      const raw = await api.get('/lab/runtimes');
+      const data = raw.map((rt) => ({
+        ...rt,
+        status: rt.online === true ? 'connected' : rt.online === false ? 'error' : rt.status,
+      }));
       set({ labRuntimes: data });
       persistJSON('groove:labRuntimes', data);
       if (data.length > 0 && !get().labActiveRuntime) {
@@ -3293,6 +3313,39 @@ export const useGrooveStore = create((set, get) => ({
     } catch { /* backend may not have lab endpoints yet */ }
   },
 
+  async fetchLabLocalModels() {
+    try {
+      const data = await api.get('/lab/local-models');
+      set({ labLocalModels: data });
+    } catch { set({ labLocalModels: [] }); }
+  },
+
+  async checkLlamaStatus() {
+    try {
+      const data = await api.get('/llama/status');
+      set({ labLlamaInstalled: !!data.installed });
+    } catch { set({ labLlamaInstalled: false }); }
+  },
+
+  async launchLocalModel(modelId) {
+    set({ labLaunching: modelId, labLaunchPhase: 'starting', labLaunchError: null });
+    try {
+      const result = await api.post('/lab/launch-local', { modelId });
+      const runtimes = await api.get('/lab/runtimes');
+      set({ labRuntimes: runtimes });
+      persistJSON('groove:labRuntimes', runtimes);
+      get().setLabActiveRuntime(result.runtime.id);
+      set({ labActiveModel: result.model, labLaunching: null, labLaunchPhase: 'ready' });
+      get().addToast('success', `Launched ${result.model}`);
+      setTimeout(() => { if (get().labLaunchPhase === 'ready') set({ labLaunchPhase: null }); }, 3000);
+      return result;
+    } catch (err) {
+      set({ labLaunching: null, labLaunchPhase: 'error', labLaunchError: err.message });
+      get().addToast('error', 'Failed to launch model', err.message);
+      throw err;
+    }
+  },
+
   async addLabRuntime(runtime) {
     try {
       const created = await api.post('/lab/runtimes', runtime);

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

@@ -2,10 +2,10 @@
 import { useState, useCallback, useRef, useEffect } from 'react';
 import { useGrooveStore } from '../stores/groove';
 import { ScrollArea } from '../components/ui/scroll-area';
-import { Select, SelectTrigger, SelectContent, SelectItem } from '../components/ui/select';
 import { Badge } from '../components/ui/badge';
 import { Tooltip } from '../components/ui/tooltip';
-import { RuntimeConfig } from '../components/lab/runtime-config';
+import { Combobox } from '../components/ui/combobox';
+import { RuntimeConfig, LaunchModel } from '../components/lab/runtime-config';
 import { ParameterPanel } from '../components/lab/parameter-panel';
 import { SystemPromptEditor } from '../components/lab/system-prompt-editor';
 import { ChatPlayground } from '../components/lab/chat-playground';
@@ -32,25 +32,21 @@ function ModelSelector() {
   return (
     <div className="space-y-1.5">
       <span className="text-xs font-semibold font-sans text-text-2 uppercase tracking-wider">Model</span>
-      {models.length > 0 ? (
-        <Select value={activeModel || ''} onValueChange={setActiveModel}>
-          <SelectTrigger placeholder="Select model" />
-          <SelectContent>
-            {models.map((m) => (
-              <SelectItem key={m.id || m.name} value={m.id || m.name}>
-                <div className="flex items-center gap-2">
-                  <Box size={12} className="text-text-3" />
-                  <span>{m.name}</span>
-                  {m.size && <span className="text-2xs text-text-4 font-mono">{m.size}</span>}
-                </div>
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      ) : (
-        <div className="px-3 py-2 rounded-md bg-surface-1 border border-border-subtle">
-          <p className="text-2xs text-text-4 font-sans">No models discovered</p>
-        </div>
+      <Combobox
+        value={activeModel || ''}
+        onChange={setActiveModel}
+        options={models.map((m) => ({ id: m.id || m.name, name: m.name, size: m.size }))}
+        placeholder="Select or type a model name"
+        renderOption={(o) => (
+          <div className="flex items-center gap-2">
+            <Box size={12} className="text-text-3 flex-shrink-0" />
+            <span className="truncate">{o.name}</span>
+            {o.size && <span className="text-2xs text-text-4 font-mono flex-shrink-0">{o.size}</span>}
+          </div>
+        )}
+      />
+      {!activeModel && models.length === 0 && (
+        <p className="text-2xs text-text-4 font-sans px-1">No models discovered — type a model name or test the runtime</p>
       )}
     </div>
   );
@@ -70,8 +66,14 @@ function ResizeHandle({ onMouseDown, direction = 'vertical' }) {
 
 export default function ModelLabView() {
   const fetchLabRuntimes = useGrooveStore((s) => s.fetchLabRuntimes);
+
   useEffect(() => { fetchLabRuntimes(); }, [fetchLabRuntimes]);
 
+  useEffect(() => {
+    const interval = setInterval(fetchLabRuntimes, 30000);
+    return () => clearInterval(interval);
+  }, [fetchLabRuntimes]);
+
   const [leftCollapsed, setLeftCollapsed] = useState(false);
   const [rightCollapsed, setRightCollapsed] = useState(false);
   const [leftWidth, setLeftWidth] = useState(LEFT_DEFAULT);
@@ -169,6 +171,8 @@ export default function ModelLabView() {
         >
           <ScrollArea className="h-full">
             <div className="px-4 py-4 space-y-5">
+              <LaunchModel />
+              <div className="border-t border-border-subtle" />
               <RuntimeConfig />
               <div className="border-t border-border-subtle" />
               <ModelSelector />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "groove-dev",
-  "version": "0.27.128",
+  "version": "0.27.130",
   "description": "Open-source agent orchestration layer — the AI company OS. Local model agent engine (GGUF/Ollama/llama-server), HuggingFace model browser, MCP integrations (Slack, Gmail, Stripe, 15+), agent scheduling (cron), business roles (CMO, CFO, EA). GUI dashboard, multi-agent coordination, zero cold-start, infinite sessions. Works with Claude Code, Codex, Gemini CLI, Ollama, any local model.",
   "license": "FSL-1.1-Apache-2.0",
   "author": "Groove Dev <hello@groovedev.ai> (https://groovedev.ai)",

package/packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groove-dev/cli",
-  "version": "0.27.128",
+  "version": "0.27.130",
   "description": "GROOVE CLI — manage AI coding agents from your terminal",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",

package/packages/daemon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groove-dev/daemon",
-  "version": "0.27.128",
+  "version": "0.27.130",
   "description": "GROOVE daemon — agent orchestration engine",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",

package/packages/daemon/src/api.js

@@ -6669,6 +6669,27 @@ Keep responses concise. Help them think, don't lecture them about the system the
     }
   });
 
+  app.get('/api/lab/local-models', (req, res) => {
+    try {
+      res.json(daemon.modelLab.listLocalModels());
+    } catch (err) {
+      res.status(500).json({ error: err.message });
+    }
+  });
+
+  app.post('/api/lab/launch-local', async (req, res) => {
+    try {
+      const { modelId } = req.body;
+      if (!modelId || typeof modelId !== 'string') {
+        return res.status(400).json({ error: 'modelId is required' });
+      }
+      const result = await daemon.modelLab.launchLocalModel(modelId);
+      res.json(result);
+    } catch (err) {
+      res.status(400).json({ error: err.message });
+    }
+  });
+
   app.post('/api/lab/inference', async (req, res) => {
     try {
       const params = validateLabInferenceParams(req.body);

package/packages/daemon/src/model-lab.js

@@ -442,6 +442,52 @@ export class ModelLab {
     this._saveSession(session);
   }
 
+  // ─── Launch Local GGUF ───────────────────────────────────────
+
+  async launchLocalModel(modelId) {
+    const mm = this.daemon.modelManager;
+    const ls = this.daemon.llamaServer;
+    if (!mm || !ls) throw new Error('Local model serving not available');
+
+    const model = mm.getModel(modelId);
+    if (!model) throw new Error('Model not found in local store');
+
+    const modelPath = mm.getModelPath(modelId);
+    if (!modelPath) throw new Error('Model file not found on disk');
+
+    const endpoint = await ls.ensureServer(modelPath);
+    if (!endpoint) throw new Error('Failed to start inference server');
+
+    const existing = [...this.runtimes.values()].find(
+      (r) => r._localModelId === modelId,
+    );
+    if (existing) {
+      existing.endpoint = endpoint;
+      existing.models = [{ id: model.filename, name: model.filename, size: model.sizeBytes }];
+      this._saveRuntimes();
+      this.daemon.broadcast({ type: 'lab:runtime:updated', data: existing });
+      return { runtime: existing, model: model.filename };
+    }
+
+    const label = model.filename.replace(/\.gguf$/i, '');
+    const runtime = await this.addRuntime({
+      name: `${label} (local)`,
+      type: 'llama-cpp',
+      endpoint,
+      models: [{ id: model.filename, name: model.filename, size: model.sizeBytes }],
+    });
+    runtime._localModelId = modelId;
+    this._saveRuntimes();
+
+    return { runtime, model: model.filename };
+  }
+
+  listLocalModels() {
+    const mm = this.daemon.modelManager;
+    if (!mm) return [];
+    return mm.getInstalled().filter((m) => m.exists);
+  }
+
   // ─── Auto-detect Ollama ─────────────────────────────────────
 
   async autoDetectOllama() {