groove-dev 0.27.152 → 0.27.154

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

@@ -9,7 +9,7 @@ import { Dialog, DialogContent } from '../ui/dialog';
 import { Select, SelectTrigger, SelectContent, SelectItem } from '../ui/select';
 import { Tooltip } from '../ui/tooltip';
 import { ScrollArea } from '../ui/scroll-area';
-import { Plus, Trash2, Loader2, WifiOff, RotateCcw, HardDrive, Play, Square, CheckCircle, AlertTriangle, ChevronRight, Wrench, Settings2 } from 'lucide-react';
+import { Plus, Trash2, Loader2, WifiOff, RotateCcw, HardDrive, Play, Square, CheckCircle, AlertTriangle, ChevronRight, Wrench, Settings2, Download } from 'lucide-react';
 import { cn } from '../../lib/cn';
 
 const IS_APPLE = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || '');
@@ -229,9 +229,11 @@ export function LaunchModel() {
   const localModels = useGrooveStore((s) => s.labLocalModels);
   const fetchLocalModels = useGrooveStore((s) => s.fetchLabLocalModels);
   const checkLlama = useGrooveStore((s) => s.checkLlamaStatus);
+  const installLlama = useGrooveStore((s) => s.installLlamaServer);
   const launchModel = useGrooveStore((s) => s.launchLocalModel);
   const launching = useGrooveStore((s) => s.labLaunching);
   const llamaInstalled = useGrooveStore((s) => s.labLlamaInstalled);
+  const llamaInstalling = useGrooveStore((s) => s.labLlamaInstalling);
   const launchPhase = useGrooveStore((s) => s.labLaunchPhase);
   const launchError = useGrooveStore((s) => s.labLaunchError);
   const launchLabAssistant = useGrooveStore((s) => s.launchLabAssistant);
@@ -395,13 +397,26 @@ export function LaunchModel() {
                       <div className="flex items-center gap-2 text-[11px] text-danger font-sans">
                         <AlertTriangle size={10} /> llama-server not found
                       </div>
-                      <code className="block text-[10px] font-mono text-text-3 bg-surface-2 px-2.5 py-1.5 rounded">brew install llama.cpp</code>
-                      <button
-                        onClick={checkLlama}
-                        className="flex items-center gap-1.5 text-[11px] font-sans text-accent hover:text-accent/80 transition-colors cursor-pointer"
-                      >
-                        <RotateCcw size={10} /> Recheck after install
-                      </button>
+                      {llamaInstalling ? (
+                        <div className="flex items-center gap-2 text-[11px] text-accent font-sans">
+                          <Loader2 size={10} className="animate-spin" /> Installing llama-server...
+                        </div>
+                      ) : (
+                        <div className="flex items-center gap-2">
+                          <button
+                            onClick={installLlama}
+                            className="flex items-center gap-1.5 text-[11px] font-sans font-medium text-surface-0 bg-accent hover:bg-accent/90 px-2.5 py-1 rounded transition-colors cursor-pointer"
+                          >
+                            <Download size={10} /> Install
+                          </button>
+                          <button
+                            onClick={checkLlama}
+                            className="flex items-center gap-1.5 text-[11px] font-sans text-text-3 hover:text-text-2 transition-colors cursor-pointer"
+                          >
+                            <RotateCcw size={10} /> Recheck
+                          </button>
+                        </div>
+                      )}
                     </div>
                   )}
                 </div>

package/packages/gui/src/components/settings/quick-connect.jsx

@@ -1,5 +1,5 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -20,6 +20,13 @@ export function QuickConnect() {
   const [showWizard, setShowWizard] = useState(false);
   const wizardTunnelId = useRef(null);
 
+  useEffect(() => {
+    if (open) {
+      setShowWizard(false);
+      useGrooveStore.getState().fetchTunnels();
+    }
+  }, [open]);
+
   if (!open) return null;
 
   async function handleConnect(id) {

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

@@ -306,7 +306,15 @@ export const useGrooveStore = create((set, get) => ({
               const filePath = block.input?.file_path || block.input?.path;
               if (filePath && agentId === get().workspaceAgentId) {
                 const relPath = filePath.replace(/^\/[^/]+.*?\/groove\//, '');
-                get().openFile(relPath);
+                const hasActiveFile = get().editorActiveFile;
+                if (hasActiveFile) {
+                  // Add to tabs without switching away from the user's current file
+                  set((s) => ({
+                    editorOpenTabs: s.editorOpenTabs.includes(relPath) ? s.editorOpenTabs : [...s.editorOpenTabs, relPath],
+                  }));
+                } else {
+                  get().openFile(relPath);
+                }
               }
             }
           }

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

@@ -95,12 +95,19 @@ export const createAgentsSlice = (set, get) => ({
 
   // ── Chat ──────────────────────────────────────────────────
 
-  addChatMessage(agentId, from, text, isQuery = false) {
+  addChatMessage(agentId, from, text, isQuery = false, attachments = undefined) {
     set((s) => {
       const history = { ...s.chatHistory };
       if (!history[agentId]) history[agentId] = [];
-      history[agentId] = [...history[agentId].slice(-100), { from, text, timestamp: Date.now(), isQuery }];
-      persistJSON('groove:chatHistory', history);
+      const msg = { from, text, timestamp: Date.now(), isQuery };
+      if (attachments?.length) msg.attachments = attachments;
+      history[agentId] = [...history[agentId].slice(-100), msg];
+      const forStorage = { ...history };
+      forStorage[agentId] = forStorage[agentId].map((m) => {
+        if (!m.attachments?.length) return m;
+        return { ...m, attachments: m.attachments.map(({ dataUrl, ...rest }) => rest) };
+      });
+      persistJSON('groove:chatHistory', forStorage);
       return { chatHistory: history };
     });
   },
@@ -120,7 +127,7 @@ export const createAgentsSlice = (set, get) => ({
     }
   },
 
-  async instructAgent(id, message) {
+  async instructAgent(id, message, attachments = undefined) {
     // ── Keeper command interception ─────────────────────────
     const keeperCmd = message.match(/\[(save|append|update|delete|view|doc|link|read|instruct)\]/i);
     if (keeperCmd) {
@@ -131,7 +138,7 @@ export const createAgentsSlice = (set, get) => ({
       }
     }
 
-    get().addChatMessage(id, 'user', message, false);
+    get().addChatMessage(id, 'user', message, false, attachments);
     set((s) => ({ thinkingAgents: new Set([...s.thinkingAgents, id]) }));
 
     // Auto-attach active file context when in workspace mode
@@ -332,6 +339,18 @@ export const createAgentsSlice = (set, get) => ({
     }
   },
 
+  async moveKeeperItem(oldTag, newTag) {
+    try {
+      const item = await api.post('/keeper/move', { oldTag, newTag });
+      get().fetchKeeperItems();
+      get().addToast('success', `Moved #${oldTag} → #${item.tag}`);
+      return item;
+    } catch (err) {
+      get().addToast('error', 'Failed to move memory', err.message);
+      throw err;
+    }
+  },
+
   async getKeeperItem(tag) {
     try {
       return await api.get(`/keeper/${tag}`);

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

@@ -42,6 +42,7 @@ export const createProvidersSlice = (set, get) => ({
   labLocalModels: [],
   labLaunching: null,
   labLlamaInstalled: null,
+  labLlamaInstalling: false,
   labLaunchPhase: null,
   labLaunchError: null,
   labAssistantAgentId: localStorage.getItem('groove:labAssistantAgentId') || null,
@@ -356,6 +357,18 @@ export const createProvidersSlice = (set, get) => ({
     } catch { set({ labLlamaInstalled: false }); }
   },
 
+  async installLlamaServer() {
+    set({ labLlamaInstalling: true });
+    try {
+      await api.post('/llama/install');
+      set({ labLlamaInstalled: true, labLlamaInstalling: false });
+      get().addToast('success', 'llama-server installed successfully');
+    } catch (err) {
+      set({ labLlamaInstalling: false });
+      get().addToast('error', 'Install failed', err.message);
+    }
+  },
+
   async launchLocalModel(modelId) {
     set({ labLaunching: modelId, labLaunchPhase: 'starting', labLaunchError: null });
     try {

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

@@ -1,10 +1,10 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { useGrooveStore } from '../stores/groove';
 import { Button } from '../components/ui/button';
 import { ScrollArea } from '../components/ui/scroll-area';
 import { Dialog, DialogContent } from '../components/ui/dialog';
-import { BookOpen, Plus, Search, Trash2, Pencil, ChevronRight, Hash, FolderOpen, Clock, Save, Link2, FileText, Sparkles, HelpCircle } from 'lucide-react';
+import { BookOpen, Plus, Search, Trash2, Pencil, ChevronRight, Hash, FolderOpen, Clock, Save, Link2, FileText, Sparkles, HelpCircle, GripVertical } from 'lucide-react';
 
 const COMMANDS = [
   { cmd: 'save',     args: '#tag',                desc: 'Save the message and send it to the agent' },
@@ -249,38 +249,71 @@ function InstructModal({ open, onOpenChange }) {
   );
 }
 
-function TreeGroup({ node, onSelect }) {
+function TreeItem({ tag, label, isDoc, indent, isDragOver, onSelect, onDragStart, onDragOver, onDragLeave, onDrop }) {
+  return (
+    <div
+      draggable
+      onDragStart={(e) => { e.dataTransfer.setData('text/plain', tag); e.dataTransfer.effectAllowed = 'move'; onDragStart?.(tag); }}
+      onDragOver={(e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; onDragOver?.(tag); }}
+      onDragLeave={() => onDragLeave?.()}
+      onDrop={(e) => { e.preventDefault(); onDrop?.(e.dataTransfer.getData('text/plain'), tag); }}
+      onClick={() => onSelect({ tag })}
+      className={`flex items-center gap-1.5 w-full px-2 py-1.5 rounded-md text-xs transition-colors cursor-pointer group ${isDragOver ? 'bg-accent/15 border border-accent/30 border-dashed' : 'hover:bg-surface-2'}`}
+      style={indent ? { paddingLeft: `${8 + indent * 16}px` } : undefined}
+    >
+      <GripVertical size={10} className="text-text-4 opacity-0 group-hover:opacity-50 flex-shrink-0 cursor-grab" />
+      <Hash size={11} className="text-text-4 flex-shrink-0" />
+      <span className="font-medium text-text-2 truncate">{label}</span>
+      {isDoc && <Sparkles size={9} className="text-purple flex-shrink-0" />}
+    </div>
+  );
+}
+
+function TreeGroup({ node, onSelect, dragOverTag, onDragStart, onDragOver, onDragLeave, onDrop }) {
   const [expanded, setExpanded] = useState(true);
   const hasChildren = node.children && node.children.length > 0;
 
+  if (!hasChildren) {
+    return (
+      <TreeItem
+        tag={node.tag} label={node.tag} isDoc={node.type === 'doc'}
+        isDragOver={dragOverTag === node.tag}
+        onSelect={onSelect} onDragStart={onDragStart} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={onDrop}
+      />
+    );
+  }
+
   return (
-    <div>
+    <div
+      onDragOver={(e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; onDragOver?.(node.tag); }}
+      onDragLeave={() => onDragLeave?.()}
+      onDrop={(e) => { e.preventDefault(); onDrop?.(e.dataTransfer.getData('text/plain'), node.tag); }}
+    >
       <button
-        onClick={() => hasChildren ? setExpanded(!expanded) : onSelect(node)}
-        className="flex items-center gap-1.5 w-full px-2 py-1 rounded-md text-xs text-text-2 hover:bg-surface-2 transition-colors cursor-pointer"
+        onClick={() => setExpanded(!expanded)}
+        className={`flex items-center gap-1.5 w-full px-2 py-1.5 rounded-md text-xs transition-colors cursor-pointer ${dragOverTag === node.tag ? 'bg-accent/15 border border-accent/30 border-dashed' : 'hover:bg-surface-2'}`}
       >
-        {hasChildren ? (
-          <ChevronRight size={12} className={`transition-transform ${expanded ? 'rotate-90' : ''}`} />
-        ) : (
-          <Hash size={12} className="text-text-4" />
-        )}
-        <FolderOpen size={12} className={hasChildren ? 'text-accent' : 'text-text-4'} />
-        <span className="font-medium">{node.tag}</span>
-        {hasChildren && (
-          <span className="text-2xs text-text-4 ml-auto">{node.children.length}</span>
-        )}
+        <ChevronRight size={12} className={`transition-transform text-text-4 ${expanded ? 'rotate-90' : ''}`} />
+        <FolderOpen size={12} className="text-accent" />
+        <span className="font-medium text-text-1">{node.tag}</span>
+        {!node.virtual && node.type === 'doc' && <Sparkles size={9} className="text-purple" />}
+        <span className="text-2xs text-text-4 ml-auto">{node.children.length}</span>
       </button>
-      {expanded && hasChildren && (
-        <div className="ml-4 mt-0.5 space-y-0.5">
+      {expanded && (
+        <div className="mt-0.5 space-y-0.5">
+          {!node.virtual && (
+            <TreeItem
+              tag={node.tag} label={node.tag} isDoc={node.type === 'doc'} indent={1}
+              isDragOver={false}
+              onSelect={onSelect} onDragStart={onDragStart} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={onDrop}
+            />
+          )}
           {node.children.map((child) => (
-            <button
-              key={child.tag}
-              onClick={() => onSelect(child)}
-              className="flex items-center gap-1.5 w-full px-2 py-1 rounded-md text-xs text-text-3 hover:text-text-1 hover:bg-surface-2 transition-colors cursor-pointer"
-            >
-              <Hash size={10} className="text-text-4" />
-              <span>{child.tag.split('/').pop()}</span>
-            </button>
+            <TreeItem
+              key={child.tag} tag={child.tag} label={child.tag.split('/').pop()} isDoc={child.type === 'doc'} indent={1}
+              isDragOver={dragOverTag === child.tag}
+              onSelect={onSelect} onDragStart={onDragStart} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={onDrop}
+            />
           ))}
         </div>
       )}
@@ -297,12 +330,15 @@ export default function MemoryView() {
   const saveKeeperItem = useGrooveStore((s) => s.saveKeeperItem);
   const updateKeeperItem = useGrooveStore((s) => s.updateKeeperItem);
   const deleteKeeperItem = useGrooveStore((s) => s.deleteKeeperItem);
+  const moveKeeperItem = useGrooveStore((s) => s.moveKeeperItem);
   const getKeeperItem = useGrooveStore((s) => s.getKeeperItem);
   const setKeeperEditing = useGrooveStore((s) => s.setKeeperEditing);
 
   const [search, setSearch] = useState('');
   const [viewMode, setViewMode] = useState('list');
   const [editorOpen, setEditorOpen] = useState(false);
+  const [dragOverTag, setDragOverTag] = useState(null);
+  const [draggingTag, setDraggingTag] = useState(null);
 
   useEffect(() => { fetchKeeperItems(); }, []);
 
@@ -344,8 +380,22 @@ export default function MemoryView() {
     await handleEdit(node);
   };
 
+  const handleDrop = useCallback(async (sourceTag, targetTag) => {
+    setDragOverTag(null);
+    setDraggingTag(null);
+    if (!sourceTag || !targetTag || sourceTag === targetTag) return;
+    // Don't drop onto self or own children
+    if (targetTag.startsWith(sourceTag + '/')) return;
+    const sourceName = sourceTag.split('/').pop();
+    const newTag = targetTag + '/' + sourceName;
+    if (sourceTag === newTag) return;
+    try {
+      await moveKeeperItem(sourceTag, newTag);
+    } catch { /* toast handles */ }
+  }, [moveKeeperItem]);
+
   return (
-    <div className="flex-1 flex flex-col overflow-hidden">
+    <div className="flex flex-col h-full overflow-hidden">
       {/* Header */}
       <div className="flex-shrink-0 px-4 py-3 border-b border-border">
         <div className="flex items-center justify-between gap-3 mb-3">
@@ -394,7 +444,7 @@ export default function MemoryView() {
       </div>
 
       {/* Content */}
-      <ScrollArea className="flex-1">
+      <ScrollArea className="flex-1 min-h-0">
         {keeperItems.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-64 gap-3">
             <BookOpen size={32} className="text-text-4" />
@@ -414,24 +464,17 @@ export default function MemoryView() {
             </div>
           </div>
         ) : viewMode === 'tree' ? (
-          <div className="p-3 space-y-1">
+          <div className="p-3 space-y-0.5" onDragOver={(e) => e.preventDefault()}>
             {keeperTree.map((node) => (
-              <TreeGroup key={node.tag} node={node} onSelect={handleTreeSelect} />
+              <TreeGroup
+                key={node.tag} node={node} onSelect={handleTreeSelect}
+                dragOverTag={dragOverTag}
+                onDragStart={(tag) => setDraggingTag(tag)}
+                onDragOver={(tag) => { if (tag !== draggingTag) setDragOverTag(tag); }}
+                onDragLeave={() => setDragOverTag(null)}
+                onDrop={handleDrop}
+              />
             ))}
-            {keeperItems
-              .filter((item) => !item.tag.includes('/') && !keeperTree.some((t) => t.tag === item.tag && t.children?.length))
-              .map((item) => (
-                <button
-                  key={item.tag}
-                  onClick={() => handleEdit(item)}
-                  className="flex items-center gap-1.5 w-full px-2 py-1 rounded-md text-xs text-text-2 hover:bg-surface-2 transition-colors cursor-pointer"
-                >
-                  <Hash size={12} className="text-text-4" />
-                  <span className="font-medium">{item.tag}</span>
-                  {item.type === 'doc' && <Sparkles size={10} className="text-purple" />}
-                  <span className="text-2xs text-text-4 ml-auto">{formatRelative(item.updatedAt)}</span>
-                </button>
-              ))}
           </div>
         ) : (
           <div className="p-3 space-y-2">

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

@@ -720,7 +720,7 @@ export default function ModelsView() {
             <Box size={28} className="text-text-4 mb-3" />
             <div className="text-sm font-mono font-semibold text-text-1 mb-1">No local models</div>
             <div className="text-xs font-mono text-text-3 text-center max-w-sm mb-5">
-              Pull from Ollama or search HuggingFace for GGUF models to run locally.
+              Pull from Ollama or search HuggingFace for models to run locally.
             </div>
             <div className="flex gap-2">
               <Button variant="primary" onClick={() => {
@@ -855,7 +855,7 @@ export default function ModelsView() {
                     </div>
                   ) : searchResults.length === 0 ? (
                     <div className="py-6 text-center">
-                      <div className="text-xs font-mono text-text-3">Search for GGUF models</div>
+                      <div className="text-xs font-mono text-text-3">Search for models on HuggingFace</div>
                       <div className="text-2xs font-mono text-text-4 mt-1">
                         Try "qwen coder", "deepseek", "codestral", "llama"
                       </div>
@@ -869,6 +869,19 @@ export default function ModelsView() {
                             className="w-full text-left flex items-center gap-2 py-1.5 border-b border-border hover:bg-surface-2/50 transition-colors cursor-pointer"
                           >
                             <span className="text-xs font-mono font-semibold text-text-1 truncate flex-1">{r.name}</span>
+                            {r.recommendedRuntimes?.length > 0 && (
+                              <span className="flex gap-1 flex-shrink-0">
+                                {r.recommendedRuntimes.map((rt) => (
+                                  <span key={rt} className={cn(
+                                    'px-1.5 py-0.5 rounded text-[9px] font-mono font-medium leading-none',
+                                    rt === 'llama.cpp' && 'bg-blue-500/15 text-blue-400',
+                                    rt === 'vLLM' && 'bg-purple-500/15 text-purple-400',
+                                    rt === 'MLX' && 'bg-emerald-500/15 text-emerald-400',
+                                    rt === 'TGI' && 'bg-amber-500/15 text-amber-400',
+                                  )}>{rt}</span>
+                                ))}
+                              </span>
+                            )}
                             <span className="text-2xs font-mono text-text-4">{r.author}</span>
                             <span className="text-2xs font-mono text-text-4 tabular-nums">{r.downloads?.toLocaleString()}</span>
                             {expandedResult === r.id