npm - groove-dev - Versions diffs - 0.27.88 → 0.27.91 - Mend

groove-dev 0.27.88 → 0.27.91

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 (53) hide show

package/packages/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-B_igwWvq.js"></script>
+    <script type="module" crossorigin src="/assets/index-MLIZRMj1.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-BSqk8cbI.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-D4vJ_1ET.css">
   </head>
   <body>
     <div id="root"></div>

package/packages/gui/package.json CHANGED Viewed

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

package/packages/gui/src/components/agents/agent-file-tree.jsx CHANGED Viewed

@@ -3,7 +3,7 @@ import { useState, useEffect, useRef, useCallback } from 'react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
 import { api } from '../../lib/api';
-import { ChevronRight, ChevronDown, File, Folder, FolderOpen, Clock } from 'lucide-react';
+import { ChevronRight, ChevronDown, File, Folder, FolderOpen, Clock, FilePlus, FolderPlus, RefreshCw, ChevronsDownUp } from 'lucide-react';
 import { ScrollArea } from '../ui/scroll-area';
 const FILE_COLORS = {
@@ -81,6 +81,8 @@ export function AgentFileTree({ agentId }) {
   const activityLog = useGrooveStore((s) => s.activityLog);
   const openFile = useGrooveStore((s) => s.openFile);
   const editorActiveFile = useGrooveStore((s) => s.editorActiveFile);
+  const createFile = useGrooveStore((s) => s.createFile);
+  const addToast = useGrooveStore((s) => s.addToast);
   const agent = agents.find((a) => a.id === agentId);
   const scope = agent?.scope || [];
@@ -97,7 +99,7 @@ export function AgentFileTree({ agentId }) {
     for (let i = log.length - 1; i >= 0; i--) {
       const t = (log[i].text || '').toLowerCase();
       if (!(t.includes('writ') || t.includes('edit') || t.includes('creat') || t.includes('read'))) continue;
-      const match = log[i].text.match(/(?:Write|Edit|Create|Read|wrote|editing|writing|reading)\S*\s+(\S+)/i);
+      const match = log[i].text.match(/(?:Write|Edit|Create|Read|wrote|editing|writing|reading)\S*\s+([\w./-]+\.[\w]+)/i);
       if (!match) continue;
       const path = match[1];
       if (seen.has(path) || path.startsWith('.') || path.includes('node_modules')) continue;
@@ -180,8 +182,53 @@ export function AgentFileTree({ agentId }) {
     openFile(path);
   }
+  async function handleNewFile() {
+    const name = prompt('File name:');
+    if (!name?.trim()) return;
+    await createFile?.(name.trim());
+  }
+  async function handleNewFolder() {
+    const name = prompt('Folder name:');
+    if (!name?.trim()) return;
+    try {
+      await api.post('/files/mkdir', { path: name.trim() });
+      addToast('success', `Created ${name.trim()}/`);
+      handleRefresh();
+    } catch (err) {
+      addToast('error', 'Create folder failed', err.message);
+    }
+  }
+  function handleRefresh() {
+    fetchedRef.current = new Set();
+    setExpandedDirs(new Set());
+    setLoading(true);
+    fetchDir('').then((entries) => { setTreeData(entries || []); setLoading(false); });
+  }
+  function handleCollapseAll() {
+    setExpandedDirs(new Set());
+  }
   return (
-    <ScrollArea className="h-full">
+    <div className="flex flex-col h-full">
+      <div className="flex items-center gap-0.5 px-2 py-1.5 border-b border-border-subtle flex-shrink-0">
+        <span className="flex-1 text-2xs font-semibold text-text-3 uppercase tracking-wider px-1">Files</span>
+        <button onClick={handleNewFile} className="p-1 text-text-4 hover:text-text-1 transition-colors cursor-pointer" title="New file">
+          <FilePlus size={12} />
+        </button>
+        <button onClick={handleNewFolder} className="p-1 text-text-4 hover:text-text-1 transition-colors cursor-pointer" title="New folder">
+          <FolderPlus size={12} />
+        </button>
+        <button onClick={handleRefresh} className="p-1 text-text-4 hover:text-text-1 transition-colors cursor-pointer" title="Refresh">
+          <RefreshCw size={12} />
+        </button>
+        <button onClick={handleCollapseAll} className="p-1 text-text-4 hover:text-text-1 transition-colors cursor-pointer" title="Collapse all">
+          <ChevronsDownUp size={12} />
+        </button>
+      </div>
+      <ScrollArea className="flex-1 min-h-0">
       <div className="py-2">
         {recentFiles.length > 0 && (
           <div className="mb-3">
@@ -238,6 +285,7 @@ export function AgentFileTree({ agentId }) {
         )}
       </div>
     </ScrollArea>
+    </div>
   );
 }

package/packages/gui/src/components/agents/workspace-mode.jsx CHANGED Viewed

@@ -13,9 +13,10 @@ import { Tooltip } from '../ui/tooltip';
 import { ScrollArea } from '../ui/scroll-area';
 import { roleColor } from '../../lib/status';
 import { fmtNum } from '../../lib/format';
+import { MediaViewer, isMediaFile } from '../editor/media-viewer';
 import {
   X, Code2, MessageSquare, Activity, FileCode, GitCompareArrows,
-  ClipboardCheck, AlertTriangle, RefreshCw,
+  ClipboardCheck, AlertTriangle, RefreshCw, Users,
 } from 'lucide-react';
 const STATUS_VARIANT = {
@@ -73,7 +74,7 @@ function TabBar({ tabs, activeFile, files, onSelect, onClose, diffMode, onToggle
   const hasSnapshot = activeFile && workspaceSnapshots[activeFile];
   return (
-    <div className="flex items-stretch h-9 bg-surface-3 border-b border-border-subtle flex-shrink-0">
+    <div className="flex items-stretch h-8 bg-surface-2 border-b border-border-subtle flex-shrink-0">
       <div className="flex items-stretch flex-1 min-w-0 overflow-x-auto scrollbar-none">
         {tabs.map((path) => {
           const isActive = path === activeFile;
@@ -85,11 +86,11 @@ function TabBar({ tabs, activeFile, files, onSelect, onClose, diffMode, onToggle
             <div
               key={path}
               className={cn(
-                'flex items-center gap-1.5 px-3 text-xs font-sans cursor-pointer select-none',
+                'flex items-center gap-1.5 px-3 text-2xs font-sans cursor-pointer select-none',
                 'border-r border-white/5 transition-colors duration-75 flex-shrink-0',
                 isActive
-                  ? 'bg-surface-0 text-text-0 border-b border-b-accent'
-                  : 'bg-surface-3 text-text-4 hover:text-text-1 hover:bg-surface-4 border-b border-b-transparent',
+                  ? 'bg-surface-0 text-text-1 border-b border-b-accent'
+                  : 'text-text-4 hover:text-text-2 hover:bg-surface-3 border-b border-b-transparent',
               )}
               onClick={() => onSelect(path)}
             >
@@ -99,7 +100,7 @@ function TabBar({ tabs, activeFile, files, onSelect, onClose, diffMode, onToggle
                 onClick={(e) => { e.stopPropagation(); onClose(path); }}
                 className="p-0.5 rounded hover:bg-surface-5 text-text-4 hover:text-text-1 transition-colors cursor-pointer ml-0.5"
               >
-                <X size={12} />
+                <X size={10} />
               </button>
             </div>
           );
@@ -139,6 +140,7 @@ export function WorkspaceMode() {
   const workspaceReviewMode = useGrooveStore((s) => s.workspaceReviewMode);
   const toggleReviewMode = useGrooveStore((s) => s.toggleReviewMode);
   const workspaceSnapshots = useGrooveStore((s) => s.workspaceSnapshots);
+  const setWorkspaceMode = useGrooveStore((s) => s.setWorkspaceMode);
   const editorFiles = useGrooveStore((s) => s.editorFiles);
   const editorActiveFile = useGrooveStore((s) => s.editorActiveFile);
@@ -216,6 +218,7 @@ export function WorkspaceMode() {
   const ctxPct = Math.round((agent.contextUsage || 0) * 100);
   const file = editorActiveFile ? editorFiles[editorActiveFile] : null;
   const hasExternalChange = editorActiveFile && editorChangedFiles[editorActiveFile];
+  const isMedia = editorActiveFile && isMediaFile(editorActiveFile);
   return (
     <div className="flex h-full bg-surface-0">
@@ -235,7 +238,7 @@ export function WorkspaceMode() {
         </div>
         {/* Editor Area */}
-        <div className="flex-1 flex flex-col min-w-0">
+        <div className="flex-1 flex flex-col min-w-0 bg-[#1a1e25]">
           {workspaceReviewMode ? (
             <CodeReview agentId={agent.id} />
           ) : (
@@ -272,7 +275,7 @@ export function WorkspaceMode() {
                 )}
                 {!editorActiveFile && (
-                  <div className="w-full h-full flex items-center justify-center text-text-4 font-sans">
+                  <div className="w-full h-full flex items-center justify-center text-text-4 font-sans bg-[#1a1e25]">
                     <div className="text-center space-y-2">
                       <Code2 size={32} className="mx-auto" />
                       <p className="text-sm">Open a file from the tree</p>
@@ -281,11 +284,15 @@ export function WorkspaceMode() {
                   </div>
                 )}
-                {editorActiveFile && diffMode && (
+                {editorActiveFile && isMedia && (
+                  <MediaViewer path={editorActiveFile} />
+                )}
+                {editorActiveFile && diffMode && !isMedia && (
                   <DiffViewer filePath={editorActiveFile} />
                 )}
-                {editorActiveFile && !diffMode && file && (
+                {editorActiveFile && !diffMode && !isMedia && file && (
                   <CodeEditor
                     content={file.content}
                     language={file.language}
@@ -338,6 +345,13 @@ export function WorkspaceMode() {
           >
             <ClipboardCheck size={13} />
           </button>
+          <button
+            onClick={() => setWorkspaceMode(false)}
+            className="flex items-center gap-1 px-2 py-1 text-xs font-sans rounded cursor-pointer transition-colors text-text-3 hover:text-text-1 hover:bg-surface-3"
+            title="Back to agent tree"
+          >
+            <Users size={13} />
+          </button>
         </div>
         {/* Tab switcher */}

package/packages/gui/src/components/chat/chat-messages.jsx CHANGED Viewed

@@ -259,13 +259,15 @@ function UserMessage({ msg }) {
 function AssistantMessage({ msg, model, role }) {
   const cleanText = stripEmojis(msg.text);
-  const displayName = role
-    ? `${model || 'Assistant'} ${role.charAt(0).toUpperCase() + role.slice(1)}`
-    : (model || 'Assistant');
+  const modelName = model || 'Assistant';
+  const roleLabel = role ? role.charAt(0).toUpperCase() + role.slice(1) : null;
   return (
     <div className="max-w-[85%]">
-      <div className="text-2xs text-text-3 font-sans mb-1 font-medium">{displayName}</div>
-      <div className="border-l-2 border-accent/40 pl-3.5 py-1">
+      <div className="text-2xs font-sans mb-1 font-medium">
+        <span className="text-text-1">{modelName}</span>
+        {roleLabel && <span className="text-text-3 ml-1">{roleLabel}</span>}
+      </div>
+      <div className="border-l-2 border-accent pl-3.5 py-1">
         <div className="text-sm text-text-1 font-sans whitespace-pre-wrap break-words leading-relaxed">
           <RenderedMarkdown text={cleanText} />
         </div>

package/packages/gui/src/components/chat/chat-view.jsx CHANGED Viewed

@@ -64,10 +64,8 @@ export function ChatView() {
   const currentModelIsImage = activeConversation ? isImageModel(activeConversation.model) : false;
   const handleNewChat = useCallback(async (provider, model) => {
-    const p = provider || 'claude-code';
-    const m = model || 'claude-sonnet-4-6';
     try {
-      await createConversation(p, m, 'api');
+      await createConversation(provider || null, model || null, 'api');
     } catch { /* toast handles */ }
   }, [createConversation]);
@@ -134,7 +132,7 @@ export function ChatView() {
     <div className="flex h-full bg-surface-0">
       {/* Conversation sidebar */}
       <div className={cn(
-        'flex-shrink-0 border-r border-accent/12 bg-accent transition-all duration-200 overflow-hidden',
+        'flex-shrink-0 border-r border-accent/12 bg-surface-1 transition-all duration-200 overflow-hidden',
         sidebarCollapsed ? 'w-0' : 'w-64',
       )}>
         <ConversationList onNewChat={() => handleNewChat()} />

package/packages/gui/src/components/chat/conversation-list.jsx CHANGED Viewed

@@ -31,7 +31,7 @@ function groupByDate(conversations) {
 function GroupLabel({ label }) {
   return (
     <div className="px-3 pt-4 pb-1.5">
-      <span className="text-2xs font-semibold text-white/60 uppercase tracking-wider font-sans">{label}</span>
+      <span className="text-2xs font-semibold text-text-4 uppercase tracking-wider font-sans">{label}</span>
     </div>
   );
 }
@@ -45,23 +45,23 @@ function ConversationItem({ conv, isActive, onSelect, onRename, onPin, onDelete
           className={cn(
             'w-full flex items-center gap-2 px-3 py-2 text-left rounded-md transition-colors cursor-pointer group',
             isActive
-              ? 'bg-white/15 text-white'
-              : 'text-white/80 hover:bg-white/10 hover:text-white',
+              ? 'bg-accent/10 text-text-0'
+              : 'text-text-2 hover:bg-surface-4 hover:text-text-1',
           )}
         >
-          <MessageCircle size={13} className={cn('flex-shrink-0', isActive ? 'text-white' : 'text-white/50 group-hover:text-white/70')} />
+          <MessageCircle size={13} className={cn('flex-shrink-0', isActive ? 'text-accent' : 'text-text-4 group-hover:text-text-3')} />
           <div className="flex-1 min-w-0">
-            <div className="text-xs font-medium font-sans truncate text-white">{conv.title || 'New Chat'}</div>
+            <div className="text-xs font-medium font-sans truncate">{conv.title || 'New Chat'}</div>
             <div className="flex items-center gap-1.5 mt-0.5">
               {conv.mode === 'agent'
-                ? <Bot size={9} className="text-white/70 flex-shrink-0" />
-                : <Zap size={9} className="text-white/70 flex-shrink-0" />
+                ? <Bot size={9} className="text-purple flex-shrink-0" />
+                : <Zap size={9} className="text-accent flex-shrink-0" />
               }
               {conv.model && <Badge variant="default" className="text-[8px] px-1 py-0">{formatModelName(conv.model)}</Badge>}
-              <span className="text-2xs text-white/50 font-sans">{timeAgo(conv.updatedAt || conv.createdAt)}</span>
+              <span className="text-2xs text-text-4 font-sans">{timeAgo(conv.updatedAt || conv.createdAt)}</span>
             </div>
           </div>
-          {conv.pinned && <Pin size={10} className="text-white flex-shrink-0" />}
+          {conv.pinned && <Pin size={10} className="text-accent flex-shrink-0" />}
         </button>
       </ContextMenuTrigger>
       <ContextMenuContent>
@@ -125,9 +125,9 @@ export function ConversationList({ onNewChat }) {
       <div className="flex-1 overflow-y-auto px-1.5 pt-3 pb-3 space-y-0.5">
         {conversations.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-16 text-center px-4">
-            <MessageCircle size={24} className="text-white/50 mb-3" />
-            <p className="text-xs text-white/80 font-sans">No conversations yet</p>
-            <p className="text-2xs text-white/60 font-sans mt-1">Start a new chat to begin</p>
+            <MessageCircle size={24} className="text-text-4 mb-3" />
+            <p className="text-xs text-text-3 font-sans">No conversations yet</p>
+            <p className="text-2xs text-text-4 font-sans mt-1">Start a new chat to begin</p>
           </div>
         ) : (
           <>
@@ -140,10 +140,10 @@ export function ConversationList({ onNewChat }) {
         )}
       </div>
-      <div className="p-3 border-t border-white/15">
+      <div className="p-3 border-t border-border-subtle">
         <button
           onClick={onNewChat}
-          className="w-full flex items-center justify-center gap-2 h-9 rounded-lg bg-white/15 text-white text-xs font-semibold font-sans hover:bg-white/25 transition-colors cursor-pointer border border-white/20"
+          className="w-full flex items-center justify-center gap-2 h-9 rounded-lg bg-accent/15 text-accent text-xs font-semibold font-sans hover:bg-accent/25 transition-colors cursor-pointer border border-accent/20"
         >
           <Plus size={14} />
           New Chat

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

@@ -2363,6 +2363,9 @@ export const useGrooveStore = create((set, get) => ({
   setWorkspaceMode(on) {
     set({ workspaceMode: on });
     localStorage.setItem('groove:workspaceMode', String(on));
+    if (on) {
+      get().closeDetail();
+    }
     if (on && !get().workspaceAgentId) {
       const teamAgents = get().agents.filter((a) => a.teamId === get().activeTeamId);
       const selected = get().detailPanel?.type === 'agent' ? get().detailPanel.agentId : null;

package/packages/gui/src/views/agents.jsx CHANGED Viewed

@@ -854,7 +854,7 @@ export default function AgentsView() {
           <EmptyState onPlanner={launchPlanner} onSpawn={() => openDetail({ type: 'spawn' })} />
         ) : workspaceMode ? (
           <WorkspaceMode />
-        ) : showPreviewInAgents && previewState.url ? (
+        ) : showPreviewInAgents && previewState.url && previewState.teamId === activeTeamId ? (
           <PreviewWorkspace embedded />
         ) : (
           <ReactFlowProvider key={activeTeamId}>
@@ -872,21 +872,19 @@ export default function AgentsView() {
           Spawn
         </button>
       )}
-      {!isLoading && teamAgents.length > 0 && (
+      {!isLoading && teamAgents.length > 0 && !workspaceMode && (
         <button
-          onClick={() => setWorkspaceMode(!workspaceMode)}
+          onClick={() => setWorkspaceMode(true)}
           className={cn(
             'absolute bottom-4 z-40 flex items-center gap-1.5 h-8 px-4 rounded-md text-xs font-semibold font-sans transition-colors cursor-pointer select-none shadow-lg shadow-black/10',
-            previewState.url && !workspaceMode ? 'right-32' : 'right-4',
-            workspaceMode
-              ? 'bg-accent/15 text-accent hover:bg-accent/25'
-              : 'bg-purple/15 text-purple hover:bg-purple/25',
+            previewState.url && previewState.teamId === activeTeamId ? 'right-32' : 'right-4',
+            'bg-purple/15 text-purple hover:bg-purple/25',
           )}
         >
-          {workspaceMode ? <><Users size={14} /> Tree</> : <><Code2 size={14} /> Workspace</>}
+          <Code2 size={14} /> Workspace
         </button>
       )}
-      {!isLoading && teamAgents.length > 0 && !workspaceMode && previewState.url && (
+      {!isLoading && teamAgents.length > 0 && !workspaceMode && previewState.url && previewState.teamId === activeTeamId && (
         <button
           onClick={togglePreviewInAgents}
           className="absolute bottom-4 right-4 z-40 flex items-center gap-1.5 h-8 px-4 rounded-md bg-info/15 text-info text-xs font-semibold font-sans hover:bg-info/25 transition-colors cursor-pointer select-none shadow-lg shadow-black/10"