groove-dev 0.27.143 → 0.27.145

package/packages/gui/src/components/agents/code-review.jsx

@@ -1,5 +1,5 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
 import { ScrollArea } from '../ui/scroll-area';
@@ -7,144 +7,161 @@ import { Button } from '../ui/button';
 import { DiffViewer } from './diff-viewer';
 import { api } from '../../lib/api';
 import {
-  Check, X, MessageSquare, ChevronLeft, CheckCircle2,
-  XCircle, Send, FilePlus, FileMinus, FileEdit,
+  ChevronLeft, ChevronRight, Send, FilePlus, FileMinus, FileEdit,
+  RotateCcw, MessageSquare, Eye,
 } from 'lucide-react';
 
+function statusIcon(status) {
+  if (status === 'added') return <FilePlus size={12} className="text-success" />;
+  if (status === 'deleted') return <FileMinus size={12} className="text-danger" />;
+  return <FileEdit size={12} className="text-warning" />;
+}
+
 export function CodeReview({ agentId: agentIdProp, onBack }) {
-  const storeAgentId = useGrooveStore((s) => s.editorSelectedAgent);
+  const storeAgentId = useGrooveStore((s) => s.workspaceAgentId);
   const agentId = agentIdProp || storeAgentId;
+  const agents = useGrooveStore((s) => s.agents);
   const instructAgent = useGrooveStore((s) => s.instructAgent);
-  const openFile = useGrooveStore((s) => s.openFile);
-  const setViewMode = useGrooveStore((s) => s.setEditorViewMode);
+  const setEditorViewMode = useGrooveStore((s) => s.setEditorViewMode);
+
+  const agent = agents.find((a) => a.id === agentId);
+  const agentRunning = agent?.status === 'running' || agent?.status === 'starting';
 
   const [files, setFiles] = useState([]);
   const [loading, setLoading] = useState(true);
-  const [selectedFile, setSelectedFile] = useState(null);
+  const [expandedFile, setExpandedFile] = useState(null);
+  const [fileContents, setFileContents] = useState({});
+  const [reverting, setReverting] = useState({});
   const [comments, setComments] = useState({});
-  const [statuses, setStatuses] = useState({});
   const [commentingPath, setCommentingPath] = useState(null);
   const [commentText, setCommentText] = useState('');
 
-  useEffect(() => {
-    loadChanges();
-  }, []);
-
-  async function loadChanges() {
+  const loadChanges = useCallback(async () => {
     setLoading(true);
     try {
-      const data = await api.get('/files/git-status');
-      const changed = (data.entries || []).map((f) => ({
-        path: f.path,
-        status: f.status,
-        additions: f.additions || 0,
-        deletions: f.deletions || 0,
-      }));
-      setFiles(changed);
+      const url = agentId ? `/files/git-diff?agentId=${encodeURIComponent(agentId)}` : '/files/git-diff';
+      const data = await api.get(url);
+      const diffs = (data.diffs || []).filter((d) => !d.path.endsWith('/'));
+      setFiles(diffs);
     } catch {
       setFiles([]);
     }
     setLoading(false);
-  }
+  }, [agentId]);
+
+  useEffect(() => { loadChanges(); }, [loadChanges]);
 
-  function statusIcon(status) {
-    if (status === 'added' || status === 'A' || status === '?') return <FilePlus size={12} className="text-success" />;
-    if (status === 'deleted' || status === 'D') return <FileMinus size={12} className="text-danger" />;
-    return <FileEdit size={12} className="text-warning" />;
+  async function loadFileContent(filePath) {
+    if (fileContents[filePath]) return;
+    try {
+      const [origRes, currRes] = await Promise.all([
+        api.get(`/files/git-show?path=${encodeURIComponent(filePath)}`),
+        api.get(`/files/read?path=${encodeURIComponent(filePath)}`).catch(() => null),
+      ]);
+      setFileContents((prev) => ({
+        ...prev,
+        [filePath]: {
+          original: origRes.content ?? '',
+          modified: currRes?.content ?? '',
+        },
+      }));
+    } catch {
+      setFileContents((prev) => ({
+        ...prev,
+        [filePath]: { original: '', modified: '', error: true },
+      }));
+    }
   }
 
-  function handleComment(path) {
-    if (!commentText.trim()) return;
-    setComments((prev) => ({ ...prev, [path]: commentText.trim() }));
-    setCommentText('');
-    setCommentingPath(null);
+  function toggleExpand(filePath) {
+    if (expandedFile === filePath) {
+      setExpandedFile(null);
+    } else {
+      setExpandedFile(filePath);
+      loadFileContent(filePath);
+    }
   }
 
-  function approveFile(path) {
-    setStatuses((prev) => ({ ...prev, [path]: prev[path] === 'approved' ? 'pending' : 'approved' }));
+  async function revertFile(filePath) {
+    setReverting((prev) => ({ ...prev, [filePath]: true }));
+    try {
+      await api.post('/files/revert', { path: filePath });
+      setFiles((prev) => prev.filter((f) => f.path !== filePath));
+      setFileContents((prev) => { const next = { ...prev }; delete next[filePath]; return next; });
+      if (expandedFile === filePath) setExpandedFile(null);
+    } catch (err) {
+      useGrooveStore.getState().addToast('error', 'Failed to revert', err.message);
+    }
+    setReverting((prev) => ({ ...prev, [filePath]: false }));
   }
 
-  function rejectFile(path) {
-    setStatuses((prev) => ({ ...prev, [path]: prev[path] === 'rejected' ? 'pending' : 'rejected' }));
+  async function revertAll() {
+    for (const file of files) {
+      await revertFile(file.path);
+    }
   }
 
-  function handleApproveAll() {
-    const next = {};
-    files.forEach((f) => { next[f.path] = 'approved'; });
-    setStatuses(next);
+  function handleComment(path) {
+    if (!commentText.trim()) return;
+    setComments((prev) => ({ ...prev, [path]: commentText.trim() }));
+    setCommentText('');
+    setCommentingPath(null);
   }
 
-  async function handleRequestChanges() {
+  async function handleSendFeedback() {
     if (!agentId) return;
-    const reviewComments = files
-      .filter((f) => comments[f.path] || statuses[f.path] === 'rejected')
-      .map((f) => {
-        const st = statuses[f.path] === 'rejected' ? '[REJECTED]' : '[COMMENT]';
-        return `${st} ${f.path}: ${comments[f.path] || 'Changes needed'}`;
-      });
-    if (reviewComments.length > 0) {
-      await instructAgent(agentId, `Code review feedback:\n${reviewComments.join('\n')}`);
-    }
-    if (onBack) onBack(); else setViewMode('code');
+    const feedbackLines = files
+      .filter((f) => comments[f.path])
+      .map((f) => `${f.path}: ${comments[f.path]}`);
+    if (feedbackLines.length === 0) return;
+    await instructAgent(agentId, `Code review feedback:\n${feedbackLines.join('\n')}`);
+    setComments({});
+    if (onBack) onBack(); else setEditorViewMode('code');
   }
 
-  const approved = Object.values(statuses).filter((s) => s === 'approved').length;
-  const rejected = Object.values(statuses).filter((s) => s === 'rejected').length;
-
-  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>
-    );
-  }
+  const totalAdds = files.reduce((s, f) => s + (f.additions || 0), 0);
+  const totalDels = files.reduce((s, f) => s + (f.deletions || 0), 0);
+  const hasComments = Object.keys(comments).length > 0;
 
   return (
     <div className="flex flex-col h-full">
+      {/* Header */}
       <div className="flex items-center gap-3 px-4 py-3 bg-surface-1 border-b border-border flex-shrink-0">
-        <button onClick={() => onBack ? onBack() : setViewMode('code')} className="p-1 rounded hover:bg-surface-4 text-text-3 hover:text-text-1 cursor-pointer" title="Back to Editor">
+        <button onClick={() => onBack ? onBack() : setEditorViewMode('code')} className="p-1 rounded hover:bg-surface-4 text-text-3 hover:text-text-1 cursor-pointer" title="Back">
           <ChevronLeft size={16} />
         </button>
         <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">
-          {files.length} file{files.length !== 1 ? 's' : ''} changed
+          {files.length} file{files.length !== 1 ? 's' : ''}
         </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>}
+        {totalAdds > 0 && <span className="text-xs text-success font-sans">+{totalAdds}</span>}
+        {totalDels > 0 && <span className="text-xs text-danger font-sans">-{totalDels}</span>}
       </div>
 
+      {/* File list */}
       <ScrollArea className="flex-1">
         <div className="p-2 space-y-1">
           {loading && (
             <div className="flex items-center justify-center py-12 text-text-4 text-xs font-sans">
-              Loading git changes...
+              Loading changes...
             </div>
           )}
           {!loading && files.length === 0 && (
             <div className="flex items-center justify-center py-12 text-text-4 text-xs font-sans">
-              No modified files found
+              No changes found
             </div>
           )}
           {files.map((file) => (
-            <div key={file.path} className="rounded-md border border-border-subtle bg-surface-2">
+            <div key={file.path} className="rounded-md border border-border-subtle bg-surface-2 overflow-hidden">
+              {/* File row */}
               <div className="flex items-center gap-2 px-3 py-2">
                 {statusIcon(file.status)}
                 <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"
+                  onClick={() => toggleExpand(file.path)}
+                  className="flex-1 min-w-0 flex items-center gap-1 text-xs font-mono text-text-1 hover:text-accent text-left cursor-pointer"
                 >
-                  {file.path}
+                  <ChevronRight size={10} className={cn('text-text-4 transition-transform flex-shrink-0', expandedFile === file.path && 'rotate-90')} />
+                  <span className="truncate">{file.path}</span>
                 </button>
                 <div className="flex items-center gap-2 flex-shrink-0 text-2xs font-sans">
                   {file.additions > 0 && <span className="text-success">+{file.additions}</span>}
@@ -152,43 +169,43 @@ export function CodeReview({ agentId: agentIdProp, onBack }) {
                 </div>
                 <div className="flex items-center gap-1 flex-shrink-0">
                   <button
-                    onClick={() => approveFile(file.path)}
-                    className={cn(
-                      'p-1 rounded cursor-pointer transition-colors',
-                      statuses[file.path] === 'approved'
-                        ? 'bg-success/15 text-success'
-                        : 'text-text-4 hover:text-success hover:bg-success/10',
-                    )}
-                    title="Approve"
+                    onClick={() => toggleExpand(file.path)}
+                    className="p-1 rounded text-text-4 hover:text-accent hover:bg-accent/10 cursor-pointer transition-colors"
+                    title="View diff"
                   >
-                    <Check size={14} />
+                    <Eye size={13} />
                   </button>
+                  {agentRunning && (
+                    <button
+                      onClick={() => setCommentingPath(commentingPath === file.path ? null : file.path)}
+                      className={cn(
+                        'p-1 rounded cursor-pointer transition-colors',
+                        comments[file.path]
+                          ? 'bg-accent/15 text-accent'
+                          : 'text-text-4 hover:text-accent hover:bg-accent/10',
+                      )}
+                      title="Comment"
+                    >
+                      <MessageSquare size={13} />
+                    </button>
+                  )}
                   <button
-                    onClick={() => rejectFile(file.path)}
+                    onClick={() => revertFile(file.path)}
+                    disabled={reverting[file.path]}
                     className={cn(
                       'p-1 rounded cursor-pointer transition-colors',
-                      statuses[file.path] === 'rejected'
-                        ? 'bg-danger/15 text-danger'
+                      reverting[file.path]
+                        ? 'text-text-4 opacity-50'
                         : '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',
-                      comments[file.path]
-                        ? 'bg-accent/15 text-accent'
-                        : 'text-text-4 hover:text-accent hover:bg-accent/10',
-                    )}
-                    title="Comment"
+                    title="Revert file"
                   >
-                    <MessageSquare size={14} />
+                    <RotateCcw size={13} />
                   </button>
                 </div>
               </div>
+
+              {/* Comment input */}
               {comments[file.path] && commentingPath !== file.path && (
                 <div className="px-3 pb-2 text-2xs text-text-2 font-sans italic">
                   {comments[file.path]}
@@ -204,31 +221,51 @@ export function CodeReview({ agentId: agentIdProp, onBack }) {
                     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"
-                  >
+                  <button onClick={() => handleComment(file.path)} className="p-1 text-accent hover:text-accent/80 cursor-pointer">
                     <Send size={12} />
                   </button>
                 </div>
               )}
+
+              {/* Inline diff */}
+              {expandedFile === file.path && (
+                <div className="border-t border-border-subtle max-h-[400px] overflow-auto">
+                  {fileContents[file.path] ? (
+                    fileContents[file.path].error ? (
+                      <div className="p-4 text-xs text-text-4 font-sans text-center">Could not load file contents</div>
+                    ) : (
+                      <DiffViewer
+                        filePath={file.path}
+                        originalContent={fileContents[file.path].original}
+                        modifiedContent={fileContents[file.path].modified}
+                      />
+                    )
+                  ) : (
+                    <div className="p-4 text-xs text-text-4 font-sans text-center">Loading diff...</div>
+                  )}
+                </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>
-        {agentId && (
-          <Button variant="ghost" size="sm" onClick={handleRequestChanges} className="gap-1.5 text-warning">
-            <XCircle size={13} />
-            Send Review to Agent
+      {/* Footer actions */}
+      {files.length > 0 && (
+        <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={revertAll} className="gap-1.5 text-danger">
+            <RotateCcw size={13} />
+            Revert All
           </Button>
-        )}
-      </div>
+          <div className="flex-1" />
+          {agentRunning && hasComments && (
+            <Button variant="ghost" size="sm" onClick={handleSendFeedback} className="gap-1.5 text-accent">
+              <Send size={13} />
+              Send Feedback
+            </Button>
+          )}
+        </div>
+      )}
     </div>
   );
 }

package/packages/gui/src/components/agents/diff-viewer.jsx

@@ -6,7 +6,7 @@ import { ScrollArea } from '../ui/scroll-area';
 import { api } from '../../lib/api';
 import { Columns2, AlignJustify } from 'lucide-react';
 
-function computeDiff(original, modified) {
+export function computeDiff(original, modified) {
   const origLines = (original || '').split('\n');
   const modLines = (modified || '').split('\n');
   const result = [];
@@ -71,14 +71,14 @@ function buildSideBySide(diffLines) {
 
 function UnifiedView({ diffLines }) {
   return (
-    <div className="font-mono text-xs leading-5">
+    <div className="font-mono text-xs leading-5 overflow-x-auto">
       {diffLines.map((line, i) => (
         <div
           key={i}
           className={cn(
             'flex',
-            line.type === 'add' && 'bg-success/8',
-            line.type === 'del' && 'bg-danger/8',
+            line.type === 'add' && 'bg-success/15',
+            line.type === 'del' && 'bg-danger/15',
           )}
         >
           <span className={cn(
@@ -100,8 +100,8 @@ function UnifiedView({ diffLines }) {
             {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',
+            'whitespace-pre px-2 flex-1',
+            line.type === 'add' ? 'text-success' : line.type === 'del' ? 'text-danger' : 'text-text-1',
           )}>
             {line.text}
           </span>
@@ -113,14 +113,14 @@ function UnifiedView({ diffLines }) {
 
 function SideBySideView({ pairs }) {
   return (
-    <div className="font-mono text-xs leading-5">
+    <div className="font-mono text-xs leading-5 overflow-x-auto">
       {pairs.map((pair, i) => (
         <div key={i} className="flex">
           {/* Left (original) */}
           <div className={cn(
             'flex flex-1 min-w-0 border-r border-border-subtle',
-            pair.left.type === 'del' && 'bg-danger/8',
-            pair.left.type === 'mod' && 'bg-warning/6',
+            pair.left.type === 'del' && 'bg-danger/15',
+            pair.left.type === 'mod' && 'bg-warning/10',
             pair.left.type === 'empty' && 'bg-surface-2/50',
           )}>
             <span className={cn(
@@ -130,9 +130,9 @@ function SideBySideView({ pairs }) {
               {pair.left.num}
             </span>
             <span className={cn(
-              'flex-1 whitespace-pre px-1 truncate',
-              pair.left.type === 'del' ? 'text-danger/90' :
-              pair.left.type === 'mod' ? 'text-warning/90' :
+              'whitespace-pre px-1',
+              pair.left.type === 'del' ? 'text-danger' :
+              pair.left.type === 'mod' ? 'text-warning' :
               pair.left.type === 'empty' ? '' : 'text-text-1',
             )}>
               {pair.left.text}
@@ -141,8 +141,8 @@ function SideBySideView({ pairs }) {
           {/* Right (modified) */}
           <div className={cn(
             'flex flex-1 min-w-0',
-            pair.right.type === 'add' && 'bg-success/8',
-            pair.right.type === 'mod' && 'bg-success/6',
+            pair.right.type === 'add' && 'bg-success/15',
+            pair.right.type === 'mod' && 'bg-success/10',
             pair.right.type === 'empty' && 'bg-surface-2/50',
           )}>
             <span className={cn(
@@ -152,9 +152,9 @@ function SideBySideView({ pairs }) {
               {pair.right.num}
             </span>
             <span className={cn(
-              'flex-1 whitespace-pre px-1 truncate',
-              pair.right.type === 'add' ? 'text-success/90' :
-              pair.right.type === 'mod' ? 'text-success/90' :
+              'whitespace-pre px-1',
+              pair.right.type === 'add' ? 'text-success' :
+              pair.right.type === 'mod' ? 'text-success' :
               pair.right.type === 'empty' ? '' : 'text-text-1',
             )}>
               {pair.right.text}
@@ -166,7 +166,7 @@ function SideBySideView({ pairs }) {
   );
 }
 
-export function DiffViewer({ filePath, gitDiffData }) {
+export function DiffViewer({ filePath, gitDiffData, originalContent, modifiedContent }) {
   const file = useGrooveStore((s) => s.editorFiles[filePath]);
   const snapshot = useGrooveStore((s) => s.workspaceSnapshots[filePath]);
   const [viewMode, setViewMode] = useState('side-by-side');
@@ -175,15 +175,15 @@ export function DiffViewer({ filePath, gitDiffData }) {
   useEffect(() => {
     if (gitDiffData?.original !== undefined) {
       setGitOriginal(gitDiffData.original);
-    } else if (!snapshot && !file?.originalContent) {
+    } else if (originalContent === undefined && !snapshot && !file?.originalContent) {
       api.get(`/files/git-diff?path=${encodeURIComponent(filePath)}`).then((data) => {
         if (data?.original !== undefined) setGitOriginal(data.original);
       }).catch(() => {});
     }
-  }, [filePath, gitDiffData, snapshot, file?.originalContent]);
+  }, [filePath, gitDiffData, snapshot, file?.originalContent, originalContent]);
 
-  const original = gitOriginal ?? snapshot ?? file?.originalContent ?? '';
-  const modified = file?.content || '';
+  const original = originalContent ?? gitOriginal ?? snapshot ?? file?.originalContent ?? '';
+  const modified = modifiedContent ?? file?.content ?? '';
 
   const diffLines = useMemo(() => computeDiff(original, modified), [original, modified]);
   const sidePairs = useMemo(() => buildSideBySide(diffLines), [diffLines]);
@@ -197,7 +197,7 @@ export function DiffViewer({ filePath, gitDiffData }) {
     return { adds, dels };
   }, [diffLines]);
 
-  if (!file) {
+  if (!original && !modified) {
     return (
       <div className="flex items-center justify-center h-full text-text-4 text-xs font-sans">
         No file loaded

package/packages/gui/src/components/agents/journalist-panel.jsx

@@ -47,7 +47,7 @@ export function JournalistPanel() {
   return (
     <div className="flex flex-col h-full">
       {/* Header */}
-      <div className="px-5 py-4 border-b border-border-subtle flex items-center gap-2">
+      <div className="pl-5 pr-10 py-4 border-b border-border-subtle flex items-center gap-2">
         <Newspaper size={16} className="text-accent" />
         <h3 className="text-sm font-semibold text-text-0 font-sans flex-1">Journalist</h3>
         <Button