npm - groove-dev - Versions diffs - 0.27.161 → 0.27.164 - Mend

groove-dev 0.27.161 → 0.27.164

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 (55) 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-DpRdb7o1.js"></script>
+    <script type="module" crossorigin src="/assets/index-CkCFf4Fl.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/vendor-26L3JoZv.js">
     <link rel="modulepreload" crossorigin href="/assets/reactflow-DoBZjiHE.js">
     <link rel="modulepreload" crossorigin href="/assets/codemirror-BYKpdS2W.js">
     <link rel="modulepreload" crossorigin href="/assets/xterm--7_ns2zW.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-Dzofq3wS.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-BJVNpGIp.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.161",
+  "version": "0.27.164",
   "description": "GROOVE GUI — visual agent control plane",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",

package/packages/gui/src/App.jsx CHANGED Viewed

@@ -24,6 +24,7 @@ import ModelLabView from './views/model-lab';
 import NetworkView from './views/network';
 import ChatView from './views/chat';
 import MemoryView from './views/memory';
+import FleetView from './views/fleet';
 // Agent components
 import { AgentPanel } from './components/agents/agent-panel';
@@ -77,6 +78,7 @@ function ViewRouter() {
     case 'federation':  content = <FederationView />;  break;
     case 'settings':    content = <SettingsView />;    break;
     case 'chat':        content = <ChatView />;        break;
+    case 'fleet':       content = <FleetView />;       break;
     case 'memory':      content = <MemoryView />;      break;
     case 'network':     content = networkUnlocked ? <NetworkView /> : <AgentsView />; break;
     default:            content = <AgentsView />;

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

@@ -168,21 +168,21 @@ function SideBySideView({ pairs }) {
 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');
-  const [gitOriginal, setGitOriginal] = useState(null);
+  const [headContent, setHeadContent] = useState(undefined);
   useEffect(() => {
-    if (gitDiffData?.original !== undefined) {
-      setGitOriginal(gitDiffData.original);
-    } else if (originalContent === undefined && !snapshot && !file?.originalContent) {
-      api.get(`/files/git-show?path=${encodeURIComponent(filePath)}`).then((data) => {
-        if (data?.content !== undefined) setGitOriginal(data.content);
-      }).catch(() => {});
-    }
-  }, [filePath, gitDiffData, snapshot, file?.originalContent, originalContent]);
+    if (originalContent !== undefined || gitDiffData?.original !== undefined) return;
+    let cancelled = false;
+    setHeadContent(undefined);
+    api.get(`/files/git-show?path=${encodeURIComponent(filePath)}`).then((data) => {
+      if (!cancelled) setHeadContent(data?.content ?? '');
+    }).catch(() => { if (!cancelled) setHeadContent(''); });
+    return () => { cancelled = true; };
+  }, [filePath, gitDiffData, originalContent]);
-  const original = originalContent ?? gitOriginal ?? snapshot ?? file?.originalContent ?? '';
+  const loading = originalContent === undefined && gitDiffData?.original === undefined && headContent === undefined;
+  const original = originalContent ?? gitDiffData?.original ?? headContent ?? '';
   const modified = modifiedContent ?? file?.content ?? '';
   const diffLines = useMemo(() => computeDiff(original, modified), [original, modified]);
@@ -197,6 +197,14 @@ export function DiffViewer({ filePath, gitDiffData, originalContent, modifiedCon
     return { adds, dels };
   }, [diffLines]);
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full text-text-4 text-xs font-sans">
+        Loading diff…
+      </div>
+    );
+  }
   if (!original && !modified) {
     return (
       <div className="flex items-center justify-center h-full text-text-4 text-xs font-sans">
@@ -205,7 +213,7 @@ export function DiffViewer({ filePath, gitDiffData, originalContent, modifiedCon
     );
   }
-  if (original === modified && !gitDiffData) {
+  if (original === modified) {
     return (
       <div className="flex items-center justify-center h-full text-text-4 text-xs font-sans">
         No changes detected

package/packages/gui/src/components/agents/spawn-wizard.jsx CHANGED Viewed

@@ -94,7 +94,8 @@ export function SpawnWizard() {
   const availableModels = selectedProvider?.models || [];
   const installedProviders = providers.filter((p) => p.authType === 'api-key' ? (p.installed && p.hasKey) : p.installed);
   const isFromModelLab = !!(detailPanel?.presetProvider || detailPanel?.presetModel);
-  const showTeamSelector = isFromModelLab || !activeTeamId;
+  const presetTeamId = detailPanel?.presetTeamId || null;
+  const showTeamSelector = !presetTeamId && (isFromModelLab || !activeTeamId);
   useEffect(() => {
     if (open) {
@@ -185,7 +186,9 @@ export function SpawnWizard() {
     setSpawning(true);
     try {
       let teamId;
-      if (!showTeamSelector) {
+      if (presetTeamId) {
+        teamId = presetTeamId;
+      } else if (!showTeamSelector) {
         teamId = activeTeamId;
       } else if (teamMode === 'new') {
         const teamName = newTeamName.trim() || selectedRole || 'New Team';

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

@@ -2,7 +2,6 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
-import { api } from '../../lib/api';
 import { AgentFileTree } from './agent-file-tree';
 import { DiffViewer } from './diff-viewer';
 import { CodeReview } from './code-review';
@@ -61,9 +60,7 @@ function AgentRail({ agents, activeId, onSelect }) {
   );
 }
-function TabBar({ tabs, activeFile, files, onSelect, onClose, diffMode, onToggleDiff, workspaceSnapshots, onBackToTeam, onToggleReview, reviewMode, onCmdP }) {
-  const hasSnapshot = activeFile && workspaceSnapshots[activeFile];
+function TabBar({ tabs, activeFile, files, onSelect, onClose, diffMode, onToggleDiff, onBackToTeam, onToggleReview, reviewMode, onCmdP }) {
   return (
     <div className="flex items-stretch h-8 bg-surface-2 border-b border-border flex-shrink-0">
       <div className="flex items-stretch flex-1 min-w-0 overflow-x-auto scrollbar-none">
@@ -106,7 +103,7 @@ function TabBar({ tabs, activeFile, files, onSelect, onClose, diffMode, onToggle
             <Search size={12} />
           </button>
         </Tooltip>
-        {hasSnapshot && (
+        {activeFile && (
           <>
             <button
               onClick={() => onToggleDiff(false)}
@@ -162,7 +159,6 @@ export function WorkspaceMode() {
   const setWorkspaceAgent = useGrooveStore((s) => s.setWorkspaceAgent);
   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 setQuickSearchOpen = useGrooveStore((s) => s.setEditorQuickSearchOpen);
@@ -189,18 +185,6 @@ export function WorkspaceMode() {
   const startX = useRef(0);
   const startW = useRef(0);
-  // Fetch git HEAD content as diff baseline when no snapshot exists
-  useEffect(() => {
-    if (!editorActiveFile || workspaceSnapshots[editorActiveFile]) return;
-    let cancelled = false;
-    api.get(`/files/git-show?path=${encodeURIComponent(editorActiveFile)}`).then((data) => {
-      if (cancelled) return;
-      const captureSnapshot = useGrooveStore.getState().captureSnapshot;
-      captureSnapshot(editorActiveFile, data.content ?? '');
-    }).catch(() => {});
-    return () => { cancelled = true; };
-  }, [editorActiveFile, workspaceSnapshots]);
   // Set the selected agent in the store so AI features use it
   useEffect(() => {
     if (agent?.id) {
@@ -323,7 +307,6 @@ export function WorkspaceMode() {
                 onClose={closeFile}
                 diffMode={diffMode}
                 onToggleDiff={setDiffMode}
-                workspaceSnapshots={workspaceSnapshots}
                 onBackToTeam={() => setWorkspaceMode(false)}
                 onToggleReview={toggleReviewMode}
                 reviewMode={workspaceReviewMode}

package/packages/gui/src/components/fleet/fleet-agent-row.jsx ADDED Viewed

@@ -0,0 +1,176 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { X } from 'lucide-react';
+import { useGrooveStore } from '../../stores/groove';
+import { cn } from '../../lib/cn';
+import { api } from '../../lib/api';
+const STATUS_DOT = {
+  running: 'bg-accent',
+  starting: 'bg-text-3',
+  completed: 'bg-info',
+  crashed: 'bg-danger',
+  stopped: 'bg-text-4',
+  killed: 'bg-text-4',
+  rotating: 'bg-accent',
+};
+function ctxBarColor(pct) {
+  if (pct >= 75) return 'bg-danger';
+  if (pct >= 50) return 'bg-warning';
+  return 'bg-accent';
+}
+export function FleetAgentRow({ agent }) {
+  const selected = useGrooveStore((s) => s.fleetSelectedAgents);
+  const fleetSelectAgent = useGrooveStore((s) => s.fleetSelectAgent);
+  const fleetMarkRead = useGrooveStore((s) => s.fleetMarkRead);
+  const killAgent = useGrooveStore((s) => s.killAgent);
+  const unreadTs = useGrooveStore((s) => s.fleetUnreadMap[agent.id]);
+  const chatHistory = useGrooveStore((s) => s.chatHistory[agent.id]);
+  const [confirmKill, setConfirmKill] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [editName, setEditName] = useState('');
+  const inputRef = useRef(null);
+  const isSelected = selected[0] === agent.id || selected[1] === agent.id;
+  const ctxPct = Math.round((agent.contextUsage || 0) * 100);
+  const lastMsg = chatHistory?.[chatHistory.length - 1];
+  const hasUnread = lastMsg && (!unreadTs || lastMsg.timestamp > unreadTs) && lastMsg.from === 'agent';
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editing]);
+  function handleClick(e) {
+    if (editing) return;
+    if (e.metaKey || e.ctrlKey) {
+      fleetSelectAgent(agent.id, 1);
+    } else {
+      fleetSelectAgent(agent.id, 0);
+    }
+    fleetMarkRead(agent.id);
+  }
+  function handleDoubleClick(e) {
+    e.stopPropagation();
+    setEditing(true);
+    setEditName(agent.name);
+  }
+  async function commitRename() {
+    setEditing(false);
+    const trimmed = editName.trim().replace(/\s+/g, '-');
+    if (!trimmed || trimmed === agent.name) return;
+    try {
+      await api.patch(`/agents/${agent.id}`, { name: trimmed });
+    } catch { /* toast handles */ }
+  }
+  function handleKeyDown(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      commitRename();
+    } else if (e.key === 'Escape') {
+      setEditing(false);
+    }
+  }
+  function handleRemove(e) {
+    e.stopPropagation();
+    const isAlive = agent.status === 'running' || agent.status === 'starting';
+    if (confirmKill) {
+      killAgent(agent.id, !isAlive);
+      setConfirmKill(false);
+    } else {
+      setConfirmKill(true);
+      setTimeout(() => setConfirmKill(false), 3000);
+    }
+  }
+  const handleDragStart = useCallback((e) => {
+    if (editing) { e.preventDefault(); return; }
+    e.dataTransfer.setData('application/x-fleet-agent', agent.id);
+    e.dataTransfer.effectAllowed = 'link';
+  }, [agent.id, editing]);
+  return (
+    <div
+      onClick={handleClick}
+      draggable={!editing}
+      onDragStart={handleDragStart}
+      className={cn(
+        'w-full flex items-center gap-2 px-2 py-1.5 transition-colors cursor-pointer group rounded-md',
+        isSelected ? 'text-text-0' : 'hover:bg-surface-2',
+        confirmKill && 'bg-danger/10',
+      )}
+    >
+      {/* Status dot */}
+      <span className={cn('w-2 h-2 rounded-full flex-shrink-0', STATUS_DOT[agent.status] || 'bg-text-4')} />
+      {/* Name + role */}
+      <div className="flex-1 min-w-0 text-left">
+        {editing ? (
+          <input
+            ref={inputRef}
+            type="text"
+            value={editName}
+            onChange={(e) => setEditName(e.target.value)}
+            onBlur={commitRename}
+            onKeyDown={handleKeyDown}
+            className="w-full text-xs font-sans text-text-0 bg-surface-3 border border-border-subtle rounded px-1 py-0 leading-tight outline-none focus:border-accent"
+          />
+        ) : (
+          <>
+            <div
+              onDoubleClick={handleDoubleClick}
+              className={cn(
+                'text-xs font-sans truncate leading-tight',
+                confirmKill ? 'text-danger' : isSelected ? 'text-accent' : 'text-text-0',
+              )}
+            >
+              {confirmKill ? 'Click again to remove' : agent.name}
+            </div>
+            {!confirmKill && (
+              <div className="text-xs text-text-3 font-sans truncate leading-tight">{agent.role}</div>
+            )}
+          </>
+        )}
+      </div>
+      {/* Context gauge (hidden on hover to make room for X) */}
+      {ctxPct > 0 && !confirmKill && !editing && (
+        <div className="group-hover:hidden w-8 h-1 rounded-sm bg-surface-4 overflow-hidden flex-shrink-0">
+          <div
+            className={cn('h-full rounded-sm transition-all', ctxBarColor(ctxPct))}
+            style={{ width: `${ctxPct}%` }}
+          />
+        </div>
+      )}
+      {/* Unread dot (hidden on hover) */}
+      {hasUnread && !confirmKill && !editing && (
+        <span className="group-hover:hidden w-1.5 h-1.5 rounded-full bg-accent flex-shrink-0" />
+      )}
+      {/* Remove button (visible on hover) */}
+      {!editing && (
+        <button
+          onClick={handleRemove}
+          className={cn(
+            'hidden group-hover:flex items-center justify-center p-0.5 rounded transition-colors cursor-pointer flex-shrink-0',
+            confirmKill ? 'flex text-danger' : 'text-text-4 hover:text-danger',
+          )}
+          title={agent.status === 'running' || agent.status === 'starting' ? 'Kill agent' : 'Remove agent'}
+        >
+          <X size={14} />
+        </button>
+      )}
+    </div>
+  );
+}

package/packages/gui/src/components/fleet/fleet-content.jsx ADDED Viewed

@@ -0,0 +1,135 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useRef, useCallback, useState } from 'react';
+import { LayoutList } from 'lucide-react';
+import { useGrooveStore } from '../../stores/groove';
+import { FleetPane } from './fleet-pane';
+export function FleetContent() {
+  const selected = useGrooveStore((s) => s.fleetSelectedAgents);
+  const splitMode = useGrooveStore((s) => s.fleetSplitMode);
+  const fleetSelectAgent = useGrooveStore((s) => s.fleetSelectAgent);
+  const [dropTarget, setDropTarget] = useState(null);
+  const dragging = useRef(false);
+  const dividerRef = useRef(null);
+  const leftRef = useRef(null);
+  const rightRef = useRef(null);
+  const onDividerDown = useCallback((e) => {
+    e.preventDefault();
+    dragging.current = true;
+    const container = dividerRef.current?.parentElement;
+    if (!container) return;
+    function onMove(ev) {
+      if (!dragging.current || !container || !leftRef.current || !rightRef.current) return;
+      const rect = container.getBoundingClientRect();
+      const pct = ((ev.clientX - rect.left) / rect.width) * 100;
+      const clamped = Math.max(25, Math.min(75, pct));
+      leftRef.current.style.flex = `0 0 ${clamped}%`;
+      rightRef.current.style.flex = `0 0 ${100 - clamped}%`;
+    }
+    function onUp() {
+      dragging.current = false;
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    }
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  }, []);
+  function handleDragOver(e, side) {
+    const agentId = e.dataTransfer.types.includes('application/x-fleet-agent');
+    if (!agentId) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'link';
+    setDropTarget(side);
+  }
+  function handleDrop(e, pane) {
+    e.preventDefault();
+    setDropTarget(null);
+    const agentId = e.dataTransfer.getData('application/x-fleet-agent');
+    if (!agentId) return;
+    fleetSelectAgent(agentId, pane);
+  }
+  function handleDragLeave() {
+    setDropTarget(null);
+  }
+  if (!selected[0] && !selected[1]) {
+    return (
+      <div
+        className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3"
+        onDragOver={(e) => handleDragOver(e, 'left')}
+        onDragLeave={handleDragLeave}
+        onDrop={(e) => handleDrop(e, 0)}
+      >
+        <LayoutList size={32} strokeWidth={1} className="text-text-4" />
+        <p className="text-sm font-sans">Select an agent or drag one here</p>
+        <p className="text-xs font-sans text-text-4">Cmd+Click or drag to open side-by-side</p>
+      </div>
+    );
+  }
+  if (!splitMode || !selected[1]) {
+    return (
+      <div className="flex-1 flex min-w-0 min-h-0">
+        <div className="flex-1 min-w-0 min-h-0">
+          <FleetPane agentId={selected[0]} paneIndex={0} />
+        </div>
+        {/* Drop zone for second pane */}
+        <div
+          className={`w-1 flex-shrink-0 transition-all ${dropTarget === 'right' ? 'w-1 bg-accent/40' : ''}`}
+          onDragOver={(e) => handleDragOver(e, 'right')}
+          onDragLeave={handleDragLeave}
+          onDrop={(e) => handleDrop(e, 1)}
+        />
+        {dropTarget === 'right' && (
+          <div
+            className="w-48 flex-shrink-0 flex items-center justify-center border-2 border-dashed border-accent/30 bg-accent/5 rounded-lg m-1 transition-all"
+            onDragOver={(e) => handleDragOver(e, 'right')}
+            onDragLeave={handleDragLeave}
+            onDrop={(e) => handleDrop(e, 1)}
+          >
+            <p className="text-xs text-accent font-sans">Drop to open</p>
+          </div>
+        )}
+      </div>
+    );
+  }
+  return (
+    <div className="flex-1 flex min-w-0 min-h-0">
+      <div
+        ref={leftRef}
+        className={`min-w-0 min-h-0 ${dropTarget === 'left' ? 'ring-2 ring-inset ring-accent/30' : ''}`}
+        style={{ flex: '0 0 50%' }}
+        onDragOver={(e) => handleDragOver(e, 'left')}
+        onDragLeave={handleDragLeave}
+        onDrop={(e) => handleDrop(e, 0)}
+      >
+        <FleetPane agentId={selected[0]} paneIndex={0} />
+      </div>
+      <div
+        ref={dividerRef}
+        className="w-1 bg-border hover:bg-accent/30 cursor-col-resize transition-colors flex-shrink-0"
+        onMouseDown={onDividerDown}
+      />
+      <div
+        ref={rightRef}
+        className={`min-w-0 min-h-0 ${dropTarget === 'right' ? 'ring-2 ring-inset ring-accent/30' : ''}`}
+        style={{ flex: '0 0 calc(50% - 4px)' }}
+        onDragOver={(e) => handleDragOver(e, 'right')}
+        onDragLeave={handleDragLeave}
+        onDrop={(e) => handleDrop(e, 1)}
+      >
+        <FleetPane agentId={selected[1]} paneIndex={1} />
+      </div>
+    </div>
+  );
+}

package/packages/gui/src/components/fleet/fleet-pane.jsx ADDED Viewed

@@ -0,0 +1,105 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useEffect, useRef, useState } from 'react';
+import { X } from 'lucide-react';
+import { useGrooveStore } from '../../stores/groove';
+import { cn } from '../../lib/cn';
+import { Badge } from '../ui/badge';
+import { AgentFeed } from '../agents/agent-feed';
+import { fmtNum } from '../../lib/format';
+const STATUS_VARIANT = {
+  running: 'success',
+  starting: 'warning',
+  stopped: 'default',
+  crashed: 'danger',
+  completed: 'accent',
+  killed: 'default',
+  rotating: 'purple',
+};
+const STATUS_LABEL = {
+  running: 'Running',
+  starting: 'Starting',
+  stopped: 'Stopped',
+  crashed: 'Crashed',
+  completed: 'Done',
+  killed: 'Killed',
+  rotating: 'Rotating',
+};
+export function FleetPane({ agentId, paneIndex }) {
+  const liveAgent = useGrooveStore((s) => s.agents.find((a) => a.id === agentId));
+  const fleetSelectAgent = useGrooveStore((s) => s.fleetSelectAgent);
+  const fleetMarkRead = useGrooveStore((s) => s.fleetMarkRead);
+  const lastAgentRef = useRef(liveAgent);
+  const [gone, setGone] = useState(false);
+  const goneTimer = useRef(null);
+  if (liveAgent) {
+    lastAgentRef.current = liveAgent;
+    if (gone) setGone(false);
+    if (goneTimer.current) { clearTimeout(goneTimer.current); goneTimer.current = null; }
+  }
+  useEffect(() => {
+    if (!liveAgent && agentId && !gone) {
+      goneTimer.current = setTimeout(() => setGone(true), 2000);
+      return () => { if (goneTimer.current) clearTimeout(goneTimer.current); };
+    }
+  }, [liveAgent, agentId, gone]);
+  useEffect(() => {
+    if (agentId) fleetMarkRead(agentId);
+  }, [agentId, fleetMarkRead]);
+  const agent = liveAgent || lastAgentRef.current;
+  if (!agent) {
+    return (
+      <div className="h-full flex items-center justify-center text-text-4">
+        <p className="text-xs font-sans">Select an agent</p>
+      </div>
+    );
+  }
+  const ctxPct = Math.round((agent.contextUsage || 0) * 100);
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      {/* Header */}
+      <div className="h-10 bg-surface-1 border-b border-border px-3 flex items-center gap-2 flex-shrink-0">
+        <span className="text-sm font-medium text-text-0 font-sans truncate">{agent.name}</span>
+        <Badge variant="default">{agent.role}</Badge>
+        {agent.provider && (
+          <span className="text-xs text-text-3 font-mono truncate">
+            {agent.provider}{agent.model ? `:${agent.model}` : ''}
+          </span>
+        )}
+        <Badge variant={STATUS_VARIANT[agent.status] || 'default'} dot={agent.status === 'running' ? 'pulse' : undefined}>
+          {STATUS_LABEL[agent.status] || agent.status}
+        </Badge>
+        <div className="flex-1" />
+        <span className="text-xs text-text-3 font-mono">{fmtNum(agent.tokensUsed)}</span>
+        <span className={cn(
+          'text-xs font-mono',
+          ctxPct >= 75 ? 'text-danger' : ctxPct >= 50 ? 'text-warning' : 'text-text-3',
+        )}>
+          {ctxPct}%
+        </span>
+        <button
+          onClick={() => fleetSelectAgent(null, paneIndex)}
+          className="p-1 rounded-md text-text-3 hover:text-text-0 hover:bg-surface-3 transition-colors cursor-pointer"
+          title="Close pane"
+        >
+          <X size={14} />
+        </button>
+      </div>
+      {/* Agent feed */}
+      <div className="flex-1 min-h-0">
+        <AgentFeed agent={agent} />
+      </div>
+    </div>
+  );
+}