groove-dev 0.27.174 → 0.27.175

package/packages/gui/dist/index.html

@@ -6,7 +6,7 @@
     <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-DZY-EWPs.js"></script>
+    <script type="module" crossorigin src="/assets/index-BMaxZVeX.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">

package/packages/gui/package.json

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

package/packages/gui/src/components/agents/agent-feed.jsx

@@ -601,7 +601,7 @@ function SnippetTag({ snippet, onRemove }) {
 
 // ── Main Feed ────────────────────────────────────────────────
 
-export function AgentFeed({ agent }) {
+export function AgentFeed({ agent, readOnly = false }) {
   const rawChatHistory = useGrooveStore((s) => s.chatHistory[agent.id]) || EMPTY;
   const rawActivityLog = useGrooveStore((s) => s.activityLog[agent.id]) || EMPTY;
   const instructAgent = useGrooveStore((s) => s.instructAgent);
@@ -903,8 +903,8 @@ export function AgentFeed({ agent }) {
         </AnimatePresence>
       </div>
 
-      {/* Input area */}
-      <div className="bg-surface-1/50 flex-shrink-0">
+      {/* Input area — hidden in readOnly (fleet single-pane) mode, chat is in the right detail panel */}
+      {readOnly ? null : <div className="bg-surface-1/50 flex-shrink-0">
         {/* Drag handle */}
         <div
           ref={dragRef}
@@ -1115,7 +1115,7 @@ export function AgentFeed({ agent }) {
           </div>
         </div>
         </div>
-      </div>
+      </div>}
     </div>
   );
 }

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

@@ -1,6 +1,6 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useEffect, useRef, useState } from 'react';
-import { X } from 'lucide-react';
+import { X, PanelRight } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
 import { Badge } from '../ui/badge';
@@ -27,7 +27,7 @@ const STATUS_LABEL = {
   rotating: 'Rotating',
 };
 
-export function FleetPane({ agentId, paneIndex }) {
+export function FleetPane({ agentId, paneIndex, readOnly = false }) {
   const effectiveId = agentId || null;
   const lastIdRef = useRef(effectiveId);
   if (effectiveId) lastIdRef.current = effectiveId;
@@ -36,6 +36,9 @@ export function FleetPane({ agentId, paneIndex }) {
   const liveAgent = useGrooveStore((s) => resolvedId ? s.agents.find((a) => a.id === resolvedId) : null);
   const fleetSelectAgent = useGrooveStore((s) => s.fleetSelectAgent);
   const fleetMarkRead = useGrooveStore((s) => s.fleetMarkRead);
+  const openDetail = useGrooveStore((s) => s.openDetail);
+  const detailPanel = useGrooveStore((s) => s.detailPanel);
+  const isPanelOpen = detailPanel?.type === 'agent' && detailPanel?.agentId === resolvedId;
 
   const lastAgentRef = useRef(liveAgent);
   const [gone, setGone] = useState(false);
@@ -92,6 +95,16 @@ export function FleetPane({ agentId, paneIndex }) {
         )}>
           {ctxPct}%
         </span>
+        <button
+          onClick={() => openDetail({ type: 'agent', agentId: resolvedId })}
+          className={cn(
+            'p-1 rounded-md transition-colors cursor-pointer',
+            isPanelOpen ? 'text-accent' : 'text-text-3 hover:text-text-0 hover:bg-surface-3',
+          )}
+          title="Open agent panel"
+        >
+          <PanelRight size={14} />
+        </button>
         <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"
@@ -103,7 +116,7 @@ export function FleetPane({ agentId, paneIndex }) {
 
       {/* Agent feed */}
       <div className="flex-1 min-h-0">
-        <AgentFeed agent={agent} />
+        <AgentFeed agent={agent} readOnly={readOnly} />
       </div>
     </div>
   );

package/packages/gui/src/stores/slices/agents-slice.js

@@ -38,6 +38,8 @@ export const createAgentsSlice = (set, get) => ({
   // ── Agent Actions ─────────────────────────────────────────
 
   selectAgent(id) {
+    // In fleet view, selection is managed by fleetSelectAgent — don't override detail panel here
+    if (get().activeView === 'fleet') return;
     const tid = get().activeTeamId;
     const match = get().agents.find((a) => a.id === id);
     if (tid && match && match.teamId && match.teamId !== tid) return;

package/packages/gui/src/stores/slices/ui-slice.js

@@ -120,15 +120,6 @@ export const createUiSlice = (set, get) => ({
     if (pane === 1 && agentId === null) {
       updates.fleetSplitMode = false;
     }
-    const primaryId = agentId || selected[0];
-    if (primaryId) {
-      const tid = get().activeTeamId;
-      const panel = { type: 'agent', agentId: primaryId };
-      updates.detailPanel = panel;
-      updates.teamDetailPanels = { ...get().teamDetailPanels, [tid]: panel };
-    } else {
-      updates.detailPanel = null;
-    }
     set(updates);
   },
   fleetToggleSplit() {