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

groove-dev 0.27.86 → 0.27.88

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 (538) 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-BbDDgazC.js"></script>
+    <script type="module" crossorigin src="/assets/index-B_igwWvq.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-fhMxiPGp.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-BSqk8cbI.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.86",
+  "version": "0.27.88",
   "description": "GROOVE GUI — visual agent control plane",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",
@@ -38,6 +38,7 @@
     "@xyflow/react": "^12.0.0",
     "clsx": "^2.1.1",
     "framer-motion": "^12.38.0",
+    "html2canvas": "^1.4.1",
     "lucide-react": "^1.7.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/node_modules/@groove-dev/gui/src/components/agents/agent-file-tree.jsx ADDED Viewed

@@ -0,0 +1,254 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+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 { ScrollArea } from '../ui/scroll-area';
+const FILE_COLORS = {
+  js: 'text-warning', jsx: 'text-warning', ts: 'text-info', tsx: 'text-info',
+  css: 'text-info', html: 'text-orange', json: 'text-warning',
+  md: 'text-text-2', py: 'text-success', rs: 'text-orange',
+  go: 'text-accent', sh: 'text-success', yaml: 'text-danger', yml: 'text-danger',
+  sql: 'text-purple', xml: 'text-orange', svg: 'text-warning',
+};
+function getFileColor(name) {
+  const ext = name.split('.').pop()?.toLowerCase();
+  return FILE_COLORS[ext] || 'text-text-3';
+}
+function matchesScope(filePath, scopePatterns) {
+  if (!scopePatterns || scopePatterns.length === 0) return true;
+  for (const pattern of scopePatterns) {
+    const escaped = pattern
+      .replace(/[.+^${}()|[\]\\]/g, '\\$&')
+      .replace(/\*\*/g, '<<GLOBSTAR>>')
+      .replace(/\*/g, '[^/]*')
+      .replace(/<<GLOBSTAR>>/g, '.*');
+    if (new RegExp(`^${escaped}$`).test(filePath) || new RegExp(`^${escaped}`).test(filePath)) {
+      return true;
+    }
+  }
+  return false;
+}
+function TreeEntry({ entry, depth, onOpen, expandedDirs, onToggleDir }) {
+  const isDir = entry.type === 'directory';
+  const isExpanded = expandedDirs.has(entry.path);
+  const fileColor = isDir ? 'text-accent' : getFileColor(entry.name);
+  return (
+    <>
+      <button
+        onClick={() => isDir ? onToggleDir(entry.path) : onOpen(entry.path)}
+        className={cn(
+          'w-full flex items-center gap-1.5 py-1 text-xs font-sans cursor-pointer',
+          'hover:bg-surface-4/50 transition-colors text-left',
+        )}
+        style={{ paddingLeft: depth * 14 + 8 }}
+      >
+        {isDir ? (
+          <>
+            {isExpanded ? <ChevronDown size={12} className="text-text-4 flex-shrink-0" /> : <ChevronRight size={12} className="text-text-4 flex-shrink-0" />}
+            {isExpanded ? <FolderOpen size={13} className={cn(fileColor, 'flex-shrink-0')} /> : <Folder size={13} className={cn(fileColor, 'flex-shrink-0')} />}
+          </>
+        ) : (
+          <>
+            <span className="w-3 flex-shrink-0" />
+            <File size={13} className={cn(fileColor, 'flex-shrink-0')} />
+          </>
+        )}
+        <span className="truncate text-text-1">{entry.name}</span>
+      </button>
+      {isDir && isExpanded && entry.children?.map((child) => (
+        <TreeEntry
+          key={child.path}
+          entry={child}
+          depth={depth + 1}
+          onOpen={onOpen}
+          expandedDirs={expandedDirs}
+          onToggleDir={onToggleDir}
+        />
+      ))}
+    </>
+  );
+}
+export function AgentFileTree({ agentId }) {
+  const agents = useGrooveStore((s) => s.agents);
+  const activityLog = useGrooveStore((s) => s.activityLog);
+  const openFile = useGrooveStore((s) => s.openFile);
+  const editorActiveFile = useGrooveStore((s) => s.editorActiveFile);
+  const agent = agents.find((a) => a.id === agentId);
+  const scope = agent?.scope || [];
+  const log = activityLog[agentId] || [];
+  const [treeData, setTreeData] = useState([]);
+  const [expandedDirs, setExpandedDirs] = useState(new Set());
+  const [loading, setLoading] = useState(true);
+  const fetchedRef = useRef(new Set());
+  const recentFiles = (() => {
+    const seen = new Set();
+    const files = [];
+    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);
+      if (!match) continue;
+      const path = match[1];
+      if (seen.has(path) || path.startsWith('.') || path.includes('node_modules')) continue;
+      seen.add(path);
+      files.push(path);
+      if (files.length >= 10) break;
+    }
+    return files;
+  })();
+  const fetchDir = useCallback(async (dirPath) => {
+    if (fetchedRef.current.has(dirPath)) return;
+    fetchedRef.current.add(dirPath);
+    try {
+      const data = await api.get(`/files/tree?path=${encodeURIComponent(dirPath)}`);
+      return data.entries || [];
+    } catch {
+      return [];
+    }
+  }, []);
+  useEffect(() => {
+    let cancelled = false;
+    async function loadTree() {
+      setLoading(true);
+      fetchedRef.current = new Set();
+      if (scope.length === 0) {
+        const entries = await fetchDir('');
+        if (!cancelled) setTreeData(entries);
+        setLoading(false);
+        return;
+      }
+      const dirs = new Set();
+      for (const pattern of scope) {
+        const parts = pattern.split('/');
+        let dir = '';
+        for (let i = 0; i < parts.length; i++) {
+          if (parts[i].includes('*')) break;
+          dir = dir ? `${dir}/${parts[i]}` : parts[i];
+        }
+        if (dir) dirs.add(dir);
+      }
+      if (dirs.size === 0) {
+        const entries = await fetchDir('');
+        if (!cancelled) setTreeData(entries);
+        setLoading(false);
+        return;
+      }
+      const results = [];
+      for (const dir of dirs) {
+        const entries = await fetchDir(dir);
+        if (entries.length > 0) {
+          results.push({ name: dir.split('/').pop(), path: dir, type: 'directory', children: entries });
+        }
+      }
+      if (!cancelled) setTreeData(results);
+      setLoading(false);
+    }
+    loadTree();
+    return () => { cancelled = true; };
+  }, [agentId, scope.join(','), fetchDir]);
+  async function handleToggleDir(path) {
+    const next = new Set(expandedDirs);
+    if (next.has(path)) {
+      next.delete(path);
+    } else {
+      next.add(path);
+      const entries = await fetchDir(path);
+      setTreeData((prev) => updateTreeChildren(prev, path, entries));
+    }
+    setExpandedDirs(next);
+  }
+  function handleOpen(path) {
+    openFile(path);
+  }
+  return (
+    <ScrollArea className="h-full">
+      <div className="py-2">
+        {recentFiles.length > 0 && (
+          <div className="mb-3">
+            <div className="flex items-center gap-1.5 px-3 py-1.5 text-2xs font-semibold text-text-3 uppercase tracking-wider">
+              <Clock size={10} />
+              Recently Touched
+            </div>
+            {recentFiles.map((path) => {
+              const name = path.split('/').pop();
+              return (
+                <button
+                  key={path}
+                  onClick={() => openFile(path)}
+                  className={cn(
+                    'w-full flex items-center gap-1.5 px-3 py-1 text-xs font-sans cursor-pointer',
+                    'hover:bg-surface-4/50 transition-colors text-left',
+                    editorActiveFile === path && 'bg-accent/8 text-accent',
+                  )}
+                >
+                  <File size={12} className={cn(getFileColor(name), 'flex-shrink-0')} />
+                  <span className="truncate text-text-1">{name}</span>
+                </button>
+              );
+            })}
+            <div className="h-px bg-border-subtle mx-3 mt-2" />
+          </div>
+        )}
+        {loading ? (
+          <div className="flex items-center justify-center py-8 text-text-4 text-xs font-sans">
+            Loading...
+          </div>
+        ) : treeData.length === 0 ? (
+          <div className="flex items-center justify-center py-8 text-text-4 text-xs font-sans">
+            No files in scope
+          </div>
+        ) : (
+          <div className="px-1">
+            <div className="flex items-center gap-1.5 px-2 py-1.5 text-2xs font-semibold text-text-3 uppercase tracking-wider">
+              <Folder size={10} />
+              Scope
+            </div>
+            {treeData.map((entry) => (
+              <TreeEntry
+                key={entry.path}
+                entry={entry}
+                depth={0}
+                onOpen={handleOpen}
+                expandedDirs={expandedDirs}
+                onToggleDir={handleToggleDir}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </ScrollArea>
+  );
+}
+function updateTreeChildren(tree, targetPath, children) {
+  return tree.map((entry) => {
+    if (entry.path === targetPath) {
+      return { ...entry, children };
+    }
+    if (entry.children) {
+      return { ...entry, children: updateTreeChildren(entry.children, targetPath, children) };
+    }
+    return entry;
+  });
+}

package/node_modules/@groove-dev/gui/src/components/agents/code-review.jsx ADDED Viewed

@@ -0,0 +1,177 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { cn } from '../../lib/cn';
+import { ScrollArea } from '../ui/scroll-area';
+import { Button } from '../ui/button';
+import { DiffViewer } from './diff-viewer';
+import { Check, X, MessageSquare, ChevronLeft, CheckCircle2, XCircle, Send } from 'lucide-react';
+export function CodeReview({ agentId }) {
+  const reviewFiles = useGrooveStore((s) => s.workspaceReviewFiles);
+  const approveFile = useGrooveStore((s) => s.approveFile);
+  const rejectFile = useGrooveStore((s) => s.rejectFile);
+  const commentFile = useGrooveStore((s) => s.commentFile);
+  const instructAgent = useGrooveStore((s) => s.instructAgent);
+  const toggleReviewMode = useGrooveStore((s) => s.toggleReviewMode);
+  const openFile = useGrooveStore((s) => s.openFile);
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [commentingPath, setCommentingPath] = useState(null);
+  const [commentText, setCommentText] = useState('');
+  const approved = reviewFiles.filter((f) => f.status === 'approved').length;
+  const rejected = reviewFiles.filter((f) => f.status === 'rejected').length;
+  function handleComment(path) {
+    if (!commentText.trim()) return;
+    commentFile(path, commentText.trim());
+    setCommentText('');
+    setCommentingPath(null);
+  }
+  function handleApproveAll() {
+    for (const f of reviewFiles) {
+      approveFile(f.path);
+    }
+  }
+  async function handleRequestChanges() {
+    const comments = reviewFiles
+      .filter((f) => f.comment || f.status === 'rejected')
+      .map((f) => {
+        const status = f.status === 'rejected' ? '[REJECTED]' : '[COMMENT]';
+        return `${status} ${f.path}: ${f.comment || 'Changes needed'}`;
+      });
+    if (comments.length > 0) {
+      await instructAgent(agentId, `Code review feedback:\n${comments.join('\n')}`);
+    }
+    toggleReviewMode();
+  }
+  if (selectedFile) {
+    return (
+      <div className="flex flex-col h-full">
+        <div className="flex items-center gap-2 px-4 py-2 bg-surface-1 border-b border-border flex-shrink-0">
+          <button
+            onClick={() => setSelectedFile(null)}
+            className="p-1 rounded hover:bg-surface-4 text-text-3 hover:text-text-1 cursor-pointer"
+          >
+            <ChevronLeft size={14} />
+          </button>
+          <span className="text-xs font-mono text-text-1 truncate">{selectedFile}</span>
+        </div>
+        <div className="flex-1 min-h-0">
+          <DiffViewer filePath={selectedFile} />
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center gap-3 px-4 py-3 bg-surface-1 border-b border-border flex-shrink-0">
+        <span className="text-sm font-semibold text-text-0 font-sans flex-1">Review Changes</span>
+        <span className="text-xs text-text-3 font-sans">
+          {reviewFiles.length} file{reviewFiles.length !== 1 ? 's' : ''} changed
+        </span>
+        {approved > 0 && <span className="text-xs text-success font-sans">{approved} approved</span>}
+        {rejected > 0 && <span className="text-xs text-danger font-sans">{rejected} rejected</span>}
+      </div>
+      <ScrollArea className="flex-1">
+        <div className="p-2 space-y-1">
+          {reviewFiles.length === 0 && (
+            <div className="flex items-center justify-center py-12 text-text-4 text-xs font-sans">
+              No modified files found
+            </div>
+          )}
+          {reviewFiles.map((file) => (
+            <div key={file.path} className="rounded-md border border-border-subtle bg-surface-2">
+              <div className="flex items-center gap-2 px-3 py-2">
+                <button
+                  onClick={() => { openFile(file.path); setSelectedFile(file.path); }}
+                  className="flex-1 min-w-0 text-xs font-mono text-text-1 hover:text-accent truncate text-left cursor-pointer"
+                >
+                  {file.path}
+                </button>
+                <div className="flex items-center gap-1 flex-shrink-0">
+                  <button
+                    onClick={() => approveFile(file.path)}
+                    className={cn(
+                      'p-1 rounded cursor-pointer transition-colors',
+                      file.status === 'approved'
+                        ? 'bg-success/15 text-success'
+                        : 'text-text-4 hover:text-success hover:bg-success/10',
+                    )}
+                    title="Approve"
+                  >
+                    <Check size={14} />
+                  </button>
+                  <button
+                    onClick={() => rejectFile(file.path)}
+                    className={cn(
+                      'p-1 rounded cursor-pointer transition-colors',
+                      file.status === 'rejected'
+                        ? 'bg-danger/15 text-danger'
+                        : 'text-text-4 hover:text-danger hover:bg-danger/10',
+                    )}
+                    title="Reject"
+                  >
+                    <X size={14} />
+                  </button>
+                  <button
+                    onClick={() => setCommentingPath(commentingPath === file.path ? null : file.path)}
+                    className={cn(
+                      'p-1 rounded cursor-pointer transition-colors',
+                      file.comment
+                        ? 'bg-accent/15 text-accent'
+                        : 'text-text-4 hover:text-accent hover:bg-accent/10',
+                    )}
+                    title="Comment"
+                  >
+                    <MessageSquare size={14} />
+                  </button>
+                </div>
+              </div>
+              {file.comment && commentingPath !== file.path && (
+                <div className="px-3 pb-2 text-2xs text-text-2 font-sans italic">
+                  {file.comment}
+                </div>
+              )}
+              {commentingPath === file.path && (
+                <div className="flex items-center gap-1.5 px-3 pb-2">
+                  <input
+                    value={commentText}
+                    onChange={(e) => setCommentText(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === 'Enter') handleComment(file.path); if (e.key === 'Escape') setCommentingPath(null); }}
+                    placeholder="Add review comment..."
+                    className="flex-1 h-7 px-2 text-xs bg-surface-0 border border-border-subtle rounded text-text-0 font-sans focus:outline-none focus:border-accent"
+                    autoFocus
+                  />
+                  <button
+                    onClick={() => handleComment(file.path)}
+                    className="p-1 text-accent hover:text-accent/80 cursor-pointer"
+                  >
+                    <Send size={12} />
+                  </button>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+      <div className="flex items-center gap-2 px-4 py-3 border-t border-border bg-surface-1 flex-shrink-0">
+        <Button variant="ghost" size="sm" onClick={handleApproveAll} className="gap-1.5">
+          <CheckCircle2 size={13} />
+          Approve All
+        </Button>
+        <Button variant="ghost" size="sm" onClick={handleRequestChanges} className="gap-1.5 text-warning">
+          <XCircle size={13} />
+          Request Changes
+        </Button>
+      </div>
+    </div>
+  );
+}

package/node_modules/@groove-dev/gui/src/components/agents/diff-viewer.jsx ADDED Viewed

@@ -0,0 +1,148 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useMemo } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { cn } from '../../lib/cn';
+import { ScrollArea } from '../ui/scroll-area';
+function computeDiff(original, modified) {
+  const origLines = (original || '').split('\n');
+  const modLines = (modified || '').split('\n');
+  const result = [];
+  const maxLen = Math.max(origLines.length, modLines.length);
+  let oi = 0, mi = 0;
+  while (oi < origLines.length || mi < modLines.length) {
+    if (oi >= origLines.length) {
+      result.push({ type: 'add', lineNum: mi + 1, text: modLines[mi] });
+      mi++;
+    } else if (mi >= modLines.length) {
+      result.push({ type: 'del', lineNum: oi + 1, text: origLines[oi] });
+      oi++;
+    } else if (origLines[oi] === modLines[mi]) {
+      result.push({ type: 'same', lineNum: mi + 1, origLineNum: oi + 1, text: modLines[mi] });
+      oi++;
+      mi++;
+    } else {
+      let foundOrig = -1;
+      let foundMod = -1;
+      const lookAhead = Math.min(10, maxLen);
+      for (let k = 1; k <= lookAhead; k++) {
+        if (mi + k < modLines.length && origLines[oi] === modLines[mi + k]) {
+          foundMod = mi + k;
+          break;
+        }
+      }
+      for (let k = 1; k <= lookAhead; k++) {
+        if (oi + k < origLines.length && origLines[oi + k] === modLines[mi]) {
+          foundOrig = oi + k;
+          break;
+        }
+      }
+      if (foundMod >= 0 && (foundOrig < 0 || foundMod - mi <= foundOrig - oi)) {
+        while (mi < foundMod) {
+          result.push({ type: 'add', lineNum: mi + 1, text: modLines[mi] });
+          mi++;
+        }
+      } else if (foundOrig >= 0) {
+        while (oi < foundOrig) {
+          result.push({ type: 'del', lineNum: oi + 1, text: origLines[oi] });
+          oi++;
+        }
+      } else {
+        result.push({ type: 'del', lineNum: oi + 1, text: origLines[oi] });
+        result.push({ type: 'add', lineNum: mi + 1, text: modLines[mi] });
+        oi++;
+        mi++;
+      }
+    }
+  }
+  return result;
+}
+export function DiffViewer({ filePath }) {
+  const file = useGrooveStore((s) => s.editorFiles[filePath]);
+  const snapshot = useGrooveStore((s) => s.workspaceSnapshots[filePath]);
+  const original = snapshot || file?.originalContent || '';
+  const modified = file?.content || '';
+  const diffLines = useMemo(() => computeDiff(original, modified), [original, modified]);
+  const stats = useMemo(() => {
+    let adds = 0, dels = 0;
+    for (const line of diffLines) {
+      if (line.type === 'add') adds++;
+      if (line.type === 'del') dels++;
+    }
+    return { adds, dels };
+  }, [diffLines]);
+  if (!file) {
+    return (
+      <div className="flex items-center justify-center h-full text-text-4 text-xs font-sans">
+        No file loaded
+      </div>
+    );
+  }
+  if (original === modified) {
+    return (
+      <div className="flex items-center justify-center h-full text-text-4 text-xs font-sans">
+        No changes detected
+      </div>
+    );
+  }
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center gap-3 px-4 py-2 bg-surface-1 border-b border-border-subtle text-xs font-sans flex-shrink-0">
+        <span className="text-text-2">{filePath.split('/').pop()}</span>
+        <span className="text-success">+{stats.adds}</span>
+        <span className="text-danger">-{stats.dels}</span>
+      </div>
+      <ScrollArea className="flex-1">
+        <div className="font-mono text-xs leading-5">
+          {diffLines.map((line, i) => (
+            <div
+              key={i}
+              className={cn(
+                'flex',
+                line.type === 'add' && 'bg-success/8',
+                line.type === 'del' && 'bg-danger/8',
+              )}
+            >
+              <span className={cn(
+                'w-12 flex-shrink-0 text-right pr-3 select-none',
+                line.type === 'add' ? 'text-success/60' : line.type === 'del' ? 'text-danger/60' : 'text-text-4',
+              )}>
+                {line.type === 'add' ? '' : (line.origLineNum || line.lineNum)}
+              </span>
+              <span className={cn(
+                'w-12 flex-shrink-0 text-right pr-3 select-none',
+                line.type === 'add' ? 'text-success/60' : line.type === 'del' ? 'text-danger/60' : 'text-text-4',
+              )}>
+                {line.type === 'del' ? '' : line.lineNum}
+              </span>
+              <span className={cn(
+                'w-5 flex-shrink-0 text-center select-none font-bold',
+                line.type === 'add' ? 'text-success' : line.type === 'del' ? 'text-danger' : 'text-text-4',
+              )}>
+                {line.type === 'add' ? '+' : line.type === 'del' ? '-' : ' '}
+              </span>
+              <span className={cn(
+                'flex-1 whitespace-pre px-2',
+                line.type === 'add' ? 'text-success/90' : line.type === 'del' ? 'text-danger/90' : 'text-text-1',
+              )}>
+                {line.text}
+              </span>
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}