npm - groove-dev - Versions diffs - 0.27.89 → 0.27.92 - Mend

groove-dev 0.27.89 → 0.27.92

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 (74) 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-BKD8JAsV.js"></script>
+    <script type="module" crossorigin src="/assets/index-DWv32qyJ.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-D4vJ_1ET.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-Bo6AeNmM.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.89",
+  "version": "0.27.92",
   "description": "GROOVE GUI — visual agent control plane",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",

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

@@ -3,7 +3,6 @@ import { useState, useRef, useEffect } from 'react';
 import { Send, Loader2, MessageSquare, HelpCircle, ArrowRight, Paperclip, Square } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
-import { Avatar } from '../ui/avatar';
 import { ThinkingIndicator } from '../ui/thinking-indicator';
 import { timeAgo } from '../../lib/format';
@@ -45,14 +44,14 @@ function UserMessage({ msg }) {
           </div>
         )}
         <div className={cn(
-          'px-3.5 py-2.5 rounded-2xl rounded-br-md',
+          'px-3 py-2 rounded-xl rounded-br-sm',
           msg.isQuery ? 'bg-info/10 border border-info/15' : 'bg-accent/10 border border-accent/15',
         )}>
-          <p className="text-sm text-text-0 font-sans whitespace-pre-wrap break-words leading-relaxed">
+          <p className="text-xs text-text-0 font-sans whitespace-pre-wrap break-words leading-relaxed">
             <FormattedText text={msg.text} />
           </p>
         </div>
-        <div className="text-2xs text-text-4 font-sans mt-1 text-right">{timeAgo(msg.timestamp)}</div>
+        <div className="text-2xs text-text-4 font-sans mt-0.5 text-right">{timeAgo(msg.timestamp)}</div>
       </div>
     </div>
   );
@@ -60,17 +59,14 @@ function UserMessage({ msg }) {
 function AgentMessage({ msg, agent }) {
   return (
-    <div className="flex gap-2.5">
-      <Avatar name={agent?.name} role={agent?.role} size="sm" className="mt-1 flex-shrink-0" />
-      <div className="max-w-[85%]">
-        <div className="text-2xs text-text-3 font-sans mb-1 font-medium">{agent?.name}</div>
-        <div className="px-3.5 py-2.5 rounded-2xl rounded-bl-md bg-surface-4 border border-border-subtle">
-          <div className="text-sm text-text-1 font-sans whitespace-pre-wrap break-words leading-relaxed">
-            <FormattedText text={msg.text} />
-          </div>
+    <div>
+      <div className="text-2xs text-text-3 font-sans mb-0.5 font-medium">{agent?.name}</div>
+      <div className="border-l-2 border-accent/40 pl-3 py-0.5">
+        <div className="text-xs text-text-1 font-sans whitespace-pre-wrap break-words leading-relaxed">
+          <FormattedText text={msg.text} />
         </div>
-        <div className="text-2xs text-text-4 font-sans mt-1">{timeAgo(msg.timestamp)}</div>
       </div>
+      <div className="text-2xs text-text-4 font-sans mt-0.5">{timeAgo(msg.timestamp)}</div>
     </div>
   );
 }
@@ -86,16 +82,13 @@ function SystemMessage({ msg }) {
   );
 }
-function TypingIndicator({ name }) {
+function TypingIndicator() {
   return (
-    <div className="flex gap-2.5">
-      <div className="w-6 h-6" />
-      <div className="px-3.5 py-2.5 rounded-2xl rounded-bl-md bg-surface-4 border border-border-subtle">
-        <div className="flex items-center gap-1">
-          <span className="w-1.5 h-1.5 rounded-full bg-text-3 animate-pulse" style={{ animationDelay: '0ms' }} />
-          <span className="w-1.5 h-1.5 rounded-full bg-text-3 animate-pulse" style={{ animationDelay: '150ms' }} />
-          <span className="w-1.5 h-1.5 rounded-full bg-text-3 animate-pulse" style={{ animationDelay: '300ms' }} />
-        </div>
+    <div className="border-l-2 border-accent/40 pl-3 py-2">
+      <div className="flex items-center gap-1">
+        <span className="w-1.5 h-1.5 rounded-full bg-text-3 animate-pulse" style={{ animationDelay: '0ms' }} />
+        <span className="w-1.5 h-1.5 rounded-full bg-text-3 animate-pulse" style={{ animationDelay: '150ms' }} />
+        <span className="w-1.5 h-1.5 rounded-full bg-text-3 animate-pulse" style={{ animationDelay: '300ms' }} />
       </div>
     </div>
   );
@@ -166,7 +159,7 @@ export function AgentChat({ agent }) {
   return (
     <div className="flex flex-col h-full">
       {/* Messages */}
-      <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-4 space-y-4">
+      <div ref={scrollRef} className="flex-1 overflow-y-auto px-3 py-3 space-y-3">
         {messages.length === 0 && (
           <div className="flex flex-col items-center justify-center h-full text-center py-12">
             <div className="w-12 h-12 rounded-full bg-accent/8 flex items-center justify-center mb-4">
@@ -191,19 +184,8 @@ export function AgentChat({ agent }) {
       </div>
       {/* ── Input area ──────────────────────────────────── */}
-      <div className="border-t border-border-subtle px-4 py-3 bg-surface-1">
-        {/* Mode indicator */}
-        <div className="flex items-center gap-2 mb-2">
-          <span className="text-2xs font-semibold font-sans px-2 py-0.5 rounded-full bg-accent/12 text-accent">
-            {isAlive ? 'Instruct' : 'Continue'}
-          </span>
-          <span className="text-2xs text-text-4 font-sans">
-            {isAlive ? 'Message goes directly to this agent' : 'Resumes with full context'}
-          </span>
-        </div>
-        <div className="flex items-end gap-2">
-          {/* File import */}
+      <div className="border-t border-border-subtle px-3 py-2 bg-surface-1">
+        <div className="flex items-end gap-1.5">
           <input
             ref={fileInputRef}
             type="file"
@@ -214,10 +196,10 @@ export function AgentChat({ agent }) {
           />
           <button
             onClick={() => fileInputRef.current?.click()}
-            className="w-10 h-10 flex items-center justify-center rounded-xl text-text-4 hover:text-text-1 hover:bg-surface-3 transition-colors cursor-pointer"
+            className="w-8 h-8 flex items-center justify-center rounded-lg text-text-4 hover:text-text-1 hover:bg-surface-3 transition-colors cursor-pointer flex-shrink-0"
             title="Attach file"
           >
-            <Paperclip size={16} />
+            <Paperclip size={14} />
           </button>
           <textarea
             ref={inputRef}
@@ -227,11 +209,11 @@ export function AgentChat({ agent }) {
             placeholder={isAlive ? 'Instruct this agent...' : 'Continue conversation...'}
             rows={1}
             className={cn(
-              'flex-1 resize-y rounded-xl px-4 py-2.5 text-sm',
+              'flex-1 resize-none rounded-lg px-3 py-1.5 text-xs',
               'bg-surface-0 border text-text-0 font-sans',
               'placeholder:text-text-4',
               'focus:outline-none focus:ring-1',
-              'min-h-[40px]',
+              'min-h-[32px] max-h-[120px]',
               'border-border focus:ring-accent/40',
             )}
           />
@@ -239,23 +221,23 @@ export function AgentChat({ agent }) {
             <button
               onClick={() => useGrooveStore.getState().stopAgent(agent.id)}
               title="Stop agent"
-              className="w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer bg-danger/80 text-white hover:bg-danger shadow-lg shadow-danger/20"
+              className="w-8 h-8 flex items-center justify-center rounded-lg transition-all cursor-pointer bg-danger/80 text-white hover:bg-danger flex-shrink-0"
             >
-              <Square size={14} fill="currentColor" />
+              <Square size={12} fill="currentColor" />
             </button>
           )}
           <button
             onClick={handleSend}
             disabled={!input.trim() || sending}
             className={cn(
-              'w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer',
+              'w-8 h-8 flex items-center justify-center rounded-lg transition-all cursor-pointer flex-shrink-0',
               'disabled:opacity-20 disabled:cursor-not-allowed',
               input.trim()
                 ? 'bg-accent/15 text-accent hover:bg-accent/25 border border-accent/25'
                 : 'bg-surface-4 text-text-4',
             )}
           >
-            {sending ? <Loader2 size={16} className="animate-spin" /> : <Send size={16} />}
+            {sending ? <Loader2 size={14} className="animate-spin" /> : <Send size={14} />}
           </button>
         </div>
       </div>

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, FilePlus, FolderPlus, RefreshCw, ChevronsDownUp } from 'lucide-react';
+import { ChevronRight, ChevronDown, File, Folder, FolderOpen, FileEdit, Eye, FilePlus, FolderPlus, RefreshCw, ChevronsDownUp } from 'lucide-react';
 import { ScrollArea } from '../ui/scroll-area';
 const FILE_COLORS = {
@@ -78,7 +78,6 @@ function TreeEntry({ entry, depth, onOpen, expandedDirs, 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 createFile = useGrooveStore((s) => s.createFile);
@@ -86,29 +85,26 @@ export function AgentFileTree({ agentId }) {
   const agent = agents.find((a) => a.id === agentId);
   const scope = agent?.scope || [];
-  const log = activityLog[agentId] || [];
+  const isRunning = agent?.status === 'running' || agent?.status === 'starting';
   const [treeData, setTreeData] = useState([]);
   const [expandedDirs, setExpandedDirs] = useState(new Set());
   const [loading, setLoading] = useState(true);
+  const [touchedFiles, setTouchedFiles] = useState([]);
   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+([\w./-]+\.[\w]+)/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;
+  useEffect(() => {
+    let cancelled = false;
+    async function poll() {
+      try {
+        const data = await api.get(`/agents/${encodeURIComponent(agentId)}/files-touched`);
+        if (!cancelled && data.files) setTouchedFiles(data.files);
+      } catch { /* agent may not exist yet */ }
     }
-    return files;
-  })();
+    poll();
+    const interval = isRunning ? setInterval(poll, 5000) : null;
+    return () => { cancelled = true; if (interval) clearInterval(interval); };
+  }, [agentId, isRunning]);
   const fetchDir = useCallback(async (dirPath) => {
     if (fetchedRef.current.has(dirPath)) return;
@@ -230,26 +226,31 @@ export function AgentFileTree({ agentId }) {
       </div>
       <ScrollArea className="flex-1 min-h-0">
       <div className="py-2">
-        {recentFiles.length > 0 && (
+        {touchedFiles.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
+              <FileEdit size={10} />
+              Agent Files
             </div>
-            {recentFiles.map((path) => {
-              const name = path.split('/').pop();
+            {touchedFiles.slice(0, 15).map((f) => {
+              const name = f.path.split('/').pop();
+              const hasWrites = f.writes > 0;
               return (
                 <button
-                  key={path}
-                  onClick={() => openFile(path)}
+                  key={f.path}
+                  onClick={() => openFile(f.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',
+                    editorActiveFile === f.path && 'bg-accent/8 text-accent',
                   )}
                 >
-                  <File size={12} className={cn(getFileColor(name), 'flex-shrink-0')} />
-                  <span className="truncate text-text-1">{name}</span>
+                  {hasWrites
+                    ? <FileEdit size={12} className="text-warning flex-shrink-0" />
+                    : <Eye size={12} className="text-info flex-shrink-0" />
+                  }
+                  <span className="truncate text-text-1 flex-1">{name}</span>
+                  {hasWrites && <span className="text-2xs text-warning/60 flex-shrink-0">{f.writes}w</span>}
                 </button>
               );
             })}

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

@@ -3,33 +3,20 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
 import { AgentFileTree } from './agent-file-tree';
-import { AgentChat } from './agent-chat';
-import { AgentFeed } from './agent-feed';
 import { DiffViewer } from './diff-viewer';
 import { CodeReview } from './code-review';
 import { CodeEditor } from '../editor/code-editor';
-import { Badge } from '../ui/badge';
 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, Users,
+  X, Code2, FileCode, GitCompareArrows,
+  ClipboardCheck, Users,
 } from 'lucide-react';
-const STATUS_VARIANT = {
-  running: 'success', starting: 'warning', stopped: 'default',
-  crashed: 'danger', completed: 'accent', killed: 'default', rotating: 'purple',
-};
 const TREE_DEFAULT = 220;
 const TREE_MIN = 140;
 const TREE_MAX = 360;
-const RIGHT_DEFAULT = 340;
-const RIGHT_MIN = 260;
-const RIGHT_MAX = 520;
 function AgentRail({ agents, activeId, onSelect }) {
   return (
@@ -70,11 +57,11 @@ function AgentRail({ agents, activeId, onSelect }) {
   );
 }
-function TabBar({ tabs, activeFile, files, onSelect, onClose, diffMode, onToggleDiff, workspaceSnapshots }) {
+function TabBar({ tabs, activeFile, files, onSelect, onClose, diffMode, onToggleDiff, workspaceSnapshots, onBackToTeam, onToggleReview, reviewMode }) {
   const hasSnapshot = activeFile && workspaceSnapshots[activeFile];
   return (
-    <div className="flex items-stretch h-8 bg-surface-2 border-b border-border-subtle flex-shrink-0">
+    <div className="flex items-stretch h-8 bg-[#1a1e25] border-b border-[#1e2229] 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;
@@ -106,28 +93,53 @@ function TabBar({ tabs, activeFile, files, onSelect, onClose, diffMode, onToggle
           );
         })}
       </div>
-      {hasSnapshot && (
-        <div className="flex items-center gap-0.5 px-2 border-l border-border-subtle flex-shrink-0">
+      <div className="flex items-center gap-0.5 px-2 border-l border-border-subtle flex-shrink-0">
+        {hasSnapshot && (
+          <>
+            <button
+              onClick={() => onToggleDiff(false)}
+              className={cn(
+                'flex items-center gap-1 px-2 py-1 text-xs font-sans rounded cursor-pointer transition-colors',
+                !diffMode ? 'bg-surface-4 text-text-0 font-medium' : 'text-text-3 hover:text-text-1',
+              )}
+            >
+              <FileCode size={11} /> Code
+            </button>
+            <button
+              onClick={() => onToggleDiff(true)}
+              className={cn(
+                'flex items-center gap-1 px-2 py-1 text-xs font-sans rounded cursor-pointer transition-colors',
+                diffMode ? 'bg-surface-4 text-text-0 font-medium' : 'text-text-3 hover:text-text-1',
+              )}
+            >
+              <GitCompareArrows size={11} /> Diff
+            </button>
+            <div className="w-px h-4 bg-border-subtle mx-1" />
+          </>
+        )}
+        <Tooltip content="Review Changes" side="bottom">
           <button
-            onClick={() => onToggleDiff(false)}
+            onClick={onToggleReview}
             className={cn(
               'flex items-center gap-1 px-2 py-1 text-xs font-sans rounded cursor-pointer transition-colors',
-              !diffMode ? 'bg-surface-4 text-text-0 font-medium' : 'text-text-3 hover:text-text-1',
+              reviewMode
+                ? 'bg-accent/15 text-accent'
+                : 'text-text-3 hover:text-text-1 hover:bg-surface-3',
             )}
           >
-            <FileCode size={11} /> Code
+            <ClipboardCheck size={12} />
           </button>
+        </Tooltip>
+        <Tooltip content="Back to Team View" side="bottom">
           <button
-            onClick={() => onToggleDiff(true)}
-            className={cn(
-              'flex items-center gap-1 px-2 py-1 text-xs font-sans rounded cursor-pointer transition-colors',
-              diffMode ? 'bg-surface-4 text-text-0 font-medium' : 'text-text-3 hover:text-text-1',
-            )}
+            onClick={onBackToTeam}
+            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"
           >
-            <GitCompareArrows size={11} /> Diff
+            <Users size={12} />
+            <span className="text-2xs">Team</span>
           </button>
-        </div>
-      )}
+        </Tooltip>
+      </div>
     </div>
   );
 }
@@ -157,12 +169,9 @@ export function WorkspaceMode() {
   const agent = teamAgents.find((a) => a.id === workspaceAgentId) || teamAgents[0];
   const [treeWidth, setTreeWidth] = useState(TREE_DEFAULT);
-  const [rightWidth, setRightWidth] = useState(RIGHT_DEFAULT);
   const [diffMode, setDiffMode] = useState(false);
-  const [rightTab, setRightTab] = useState('chat');
   const treeDragging = useRef(false);
-  const rightDragging = useRef(false);
   const startX = useRef(0);
   const startW = useRef(0);
@@ -188,24 +197,6 @@ export function WorkspaceMode() {
     document.addEventListener('mouseup', onUp);
   }, [treeWidth]);
-  const onRightMouseDown = useCallback((e) => {
-    e.preventDefault();
-    rightDragging.current = true;
-    startX.current = e.clientX;
-    startW.current = rightWidth;
-    function onMove(e) {
-      if (!rightDragging.current) return;
-      setRightWidth(Math.min(Math.max(startW.current - (e.clientX - startX.current), RIGHT_MIN), RIGHT_MAX));
-    }
-    function onUp() {
-      rightDragging.current = false;
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-    }
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
-  }, [rightWidth]);
   if (!agent) {
     return (
       <div className="flex items-center justify-center h-full text-text-4 text-xs font-sans">
@@ -214,8 +205,6 @@ export function WorkspaceMode() {
     );
   }
-  const isAlive = agent.status === 'running' || agent.status === 'starting';
-  const ctxPct = Math.round((agent.contextUsage || 0) * 100);
   const file = editorActiveFile ? editorFiles[editorActiveFile] : null;
   const hasExternalChange = editorActiveFile && editorChangedFiles[editorActiveFile];
   const isMedia = editorActiveFile && isMediaFile(editorActiveFile);
@@ -238,7 +227,7 @@ export function WorkspaceMode() {
         </div>
         {/* Editor Area */}
-        <div className="flex-1 flex flex-col min-w-0 bg-[#1a1e25]">
+        <div className="flex-1 flex flex-col min-w-0 bg-[#13161b]">
           {workspaceReviewMode ? (
             <CodeReview agentId={agent.id} />
           ) : (
@@ -252,30 +241,32 @@ export function WorkspaceMode() {
                 diffMode={diffMode}
                 onToggleDiff={setDiffMode}
                 workspaceSnapshots={workspaceSnapshots}
+                onBackToTeam={() => setWorkspaceMode(false)}
+                onToggleReview={toggleReviewMode}
+                reviewMode={workspaceReviewMode}
               />
               <div className="flex-1 relative min-h-0">
                 {hasExternalChange && (
-                  <div className="absolute top-0 left-0 right-0 z-10 flex items-center gap-2 px-4 py-2 bg-warning/10 border-b border-warning/20">
-                    <AlertTriangle size={14} className="text-warning" />
-                    <span className="text-xs text-warning font-sans flex-1">File modified externally</span>
+                  <div className="absolute top-1 right-3 z-10 flex items-center gap-1.5 px-2 py-1 rounded-md bg-surface-2/90 border border-border-subtle backdrop-blur-sm">
+                    <span className="text-2xs text-text-3 font-sans">Modified</span>
                     <button
                       onClick={() => reloadFile(editorActiveFile)}
-                      className="flex items-center gap-1 px-2 py-1 text-xs text-text-1 hover:bg-surface-4 rounded cursor-pointer"
+                      className="text-2xs text-accent hover:text-accent/80 font-sans cursor-pointer"
                     >
-                      <RefreshCw size={12} /> Reload
+                      Reload
                     </button>
                     <button
                       onClick={() => dismissFileChange(editorActiveFile)}
-                      className="flex items-center gap-1 px-2 py-1 text-xs text-text-3 hover:bg-surface-4 rounded cursor-pointer"
+                      className="p-0.5 text-text-4 hover:text-text-1 cursor-pointer"
                     >
-                      <X size={12} /> Dismiss
+                      <X size={10} />
                     </button>
                   </div>
                 )}
                 {!editorActiveFile && (
-                  <div className="w-full h-full flex items-center justify-center text-text-4 font-sans bg-[#1a1e25]">
+                  <div className="w-full h-full flex items-center justify-center text-text-4 font-sans bg-[#13161b]">
                     <div className="text-center space-y-2">
                       <Code2 size={32} className="mx-auto" />
                       <p className="text-sm">Open a file from the tree</p>
@@ -305,87 +296,6 @@ export function WorkspaceMode() {
           )}
         </div>
       </div>
-      {/* Right Panel — Chat + Activity */}
-      <div className="flex flex-col bg-surface-1 border-l border-border relative" style={{ width: rightWidth }}>
-        {/* Resize handle */}
-        <div
-          className="absolute top-0 left-0 bottom-0 w-1 cursor-col-resize hover:bg-accent/30 transition-colors z-10"
-          onMouseDown={onRightMouseDown}
-          onDoubleClick={() => setRightWidth(RIGHT_DEFAULT)}
-        />
-        {/* Header */}
-        <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border flex-shrink-0">
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2">
-              <span className="text-sm font-bold text-text-0 font-sans truncate">{agent.name}</span>
-              <Badge variant={STATUS_VARIANT[agent.status]} dot={isAlive ? 'pulse' : undefined}>
-                {agent.status}
-              </Badge>
-            </div>
-            <div className="flex items-center gap-3 mt-0.5">
-              <span className="text-2xs text-text-3 font-sans">
-                {fmtNum(agent.tokensUsed || 0)} tokens
-              </span>
-              <span className="text-2xs text-text-3 font-sans">
-                ctx {ctxPct}%
-              </span>
-            </div>
-          </div>
-          <button
-            onClick={toggleReviewMode}
-            className={cn(
-              'flex items-center gap-1 px-2 py-1 text-xs font-sans rounded cursor-pointer transition-colors',
-              workspaceReviewMode
-                ? 'bg-accent/15 text-accent'
-                : 'text-text-3 hover:text-text-1 hover:bg-surface-3',
-            )}
-            title="Review Changes"
-          >
-            <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 */}
-        <div className="flex items-center gap-0 border-b border-border-subtle flex-shrink-0">
-          <button
-            onClick={() => setRightTab('chat')}
-            className={cn(
-              'flex items-center gap-1.5 px-3 py-2 text-xs font-sans cursor-pointer transition-colors',
-              rightTab === 'chat'
-                ? 'text-text-0 border-b border-b-accent font-medium'
-                : 'text-text-3 hover:text-text-1',
-            )}
-          >
-            <MessageSquare size={12} /> Chat
-          </button>
-          <button
-            onClick={() => setRightTab('activity')}
-            className={cn(
-              'flex items-center gap-1.5 px-3 py-2 text-xs font-sans cursor-pointer transition-colors',
-              rightTab === 'activity'
-                ? 'text-text-0 border-b border-b-accent font-medium'
-                : 'text-text-3 hover:text-text-1',
-            )}
-          >
-            <Activity size={12} /> Activity
-          </button>
-        </div>
-        {/* Content */}
-        <div className="flex-1 min-h-0">
-          {rightTab === 'chat' && <AgentChat agent={agent} />}
-          {rightTab === 'activity' && <AgentFeed agent={agent} />}
-        </div>
-      </div>
     </div>
   );
 }

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

@@ -1,10 +1,9 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useState, useRef, useEffect } from 'react';
-import { Pencil, Pin, PinOff, Trash2, Hash, MoreHorizontal, Zap, Bot, ChevronDown, X } from 'lucide-react';
+import { Pencil, Pin, PinOff, Trash2, Hash, MoreHorizontal, ChevronDown, X } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { fmtNum } from '../../lib/format';
 import { ModelPicker, formatModelName } from './model-picker';
-import { Tooltip } from '../ui/tooltip';
 import { cn } from '../../lib/cn';
 import { roleColor } from '../../lib/status';
@@ -25,7 +24,7 @@ const CHAT_ROLES = [
   { id: 'support', label: 'Support', desc: 'Customer support, FAQs' },
 ];
-export function ChatHeader({ conversation, model, onModelChange, onModeChange, role, onRoleChange }) {
+export function ChatHeader({ conversation, model, onModelChange, role, onRoleChange, sidebarCollapsed }) {
   const renameConversation = useGrooveStore((s) => s.renameConversation);
   const pinConversation = useGrooveStore((s) => s.pinConversation);
   const deleteConversation = useGrooveStore((s) => s.deleteConversation);
@@ -77,10 +76,9 @@ export function ChatHeader({ conversation, model, onModelChange, onModeChange, r
   const agent = useGrooveStore((s) => s.agents.find((a) => a.id === conversation.agentId));
   const tokens = agent?.tokensUsed || 0;
-  const mode = conversation.mode || 'api';
   return (
-    <div className="h-12 flex items-center gap-3 px-4 border-b border-border-subtle bg-surface-0/80 flex-shrink-0">
+    <div className={cn("h-12 flex items-center gap-3 border-b border-border-subtle bg-surface-0/80 flex-shrink-0", sidebarCollapsed ? 'pl-10 pr-4' : 'px-4')}>
       <Hash size={14} className="text-text-4 flex-shrink-0" />
       {editing ? (
@@ -105,31 +103,6 @@ export function ChatHeader({ conversation, model, onModelChange, onModeChange, r
       <div className="w-px h-5 bg-border-subtle" />
       <div className="flex items-center gap-2 flex-shrink-0">
-        <div className="flex items-center h-7 rounded-lg bg-surface-3 border border-border-subtle p-0.5">
-          <Tooltip content="Lightweight — fast and cheap, no tools" side="bottom">
-            <button
-              onClick={() => onModeChange?.('api')}
-              className={cn(
-                'flex items-center gap-1 h-6 px-2 rounded-md text-2xs font-semibold font-sans transition-colors cursor-pointer',
-                mode === 'api' ? 'bg-accent/15 text-accent border border-accent/25' : 'text-text-3 hover:text-text-1',
-              )}
-            >
-              <Zap size={11} /> Chat
-            </button>
-          </Tooltip>
-          <Tooltip content="Full agent — tools, files, session resume" side="bottom">
-            <button
-              onClick={() => onModeChange?.('agent')}
-              className={cn(
-                'flex items-center gap-1 h-6 px-2 rounded-md text-2xs font-semibold font-sans transition-colors cursor-pointer',
-                mode === 'agent' ? 'bg-purple/15 text-purple border border-purple/25' : 'text-text-3 hover:text-text-1',
-              )}
-            >
-              <Bot size={11} /> Agent
-            </button>
-          </Tooltip>
-        </div>
         <div ref={roleMenuRef} className="relative">
           <button
             onClick={() => setRoleMenuOpen(!roleMenuOpen)}