groove-dev 0.27.86 → 0.27.88

package/node_modules/@groove-dev/gui/src/components/chat/chat-view.jsx

@@ -45,12 +45,20 @@ export function ChatView() {
   const conversationRoles = useGrooveStore((s) => s.conversationRoles);
   const setConversationRole = useGrooveStore((s) => s.setConversationRole);
 
+  const conversationReasoningEffort = useGrooveStore((s) => s.conversationReasoningEffort);
+  const setConversationReasoningEffort = useGrooveStore((s) => s.setConversationReasoningEffort);
+  const conversationVerbosity = useGrooveStore((s) => s.conversationVerbosity);
+  const setConversationVerbosity = useGrooveStore((s) => s.setConversationVerbosity);
+
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [replyContext, setReplyContext] = useState(null);
 
   const activeRole = activeConversationId ? (conversationRoles?.[activeConversationId] || null) : null;
+  const activeReasoningEffort = activeConversationId ? (conversationReasoningEffort?.[activeConversationId] || 'medium') : 'medium';
+  const activeVerbosity = activeConversationId ? (conversationVerbosity?.[activeConversationId] || 'medium') : 'medium';
 
   const activeConversation = conversations.find((c) => c.id === activeConversationId) || null;
+  const isCodexProvider = activeConversation?.provider === 'codex';
   const messages = activeConversationId ? (conversationMessages[activeConversationId] || []) : [];
   const isStreaming = streamingConversationId === activeConversationId && sendingMessage;
   const currentModelIsImage = activeConversation ? isImageModel(activeConversation.model) : false;
@@ -108,6 +116,16 @@ export function ChatView() {
     setReplyContext(msg);
   }, []);
 
+  const handleReasoningEffortChange = useCallback((effort) => {
+    if (!activeConversationId) return;
+    setConversationReasoningEffort(activeConversationId, effort);
+  }, [activeConversationId, setConversationReasoningEffort]);
+
+  const handleVerbosityChange = useCallback((verbosity) => {
+    if (!activeConversationId) return;
+    setConversationVerbosity(activeConversationId, verbosity);
+  }, [activeConversationId, setConversationVerbosity]);
+
   const currentModel = activeConversation
     ? { provider: activeConversation.provider, model: activeConversation.model }
     : null;
@@ -116,7 +134,7 @@ export function ChatView() {
     <div className="flex h-full bg-surface-0">
       {/* Conversation sidebar */}
       <div className={cn(
-        'flex-shrink-0 border-r border-accent/12 bg-surface-1 transition-all duration-200 overflow-hidden',
+        'flex-shrink-0 border-r border-accent/12 bg-accent transition-all duration-200 overflow-hidden',
         sidebarCollapsed ? 'w-0' : 'w-64',
       )}>
         <ConversationList onNewChat={() => handleNewChat()} />
@@ -146,6 +164,13 @@ export function ChatView() {
               replyContext={replyContext}
               onClearReply={() => setReplyContext(null)}
               role={activeRole}
+              isCodex={isCodexProvider}
+              reasoningEffort={activeReasoningEffort}
+              onReasoningEffortChange={handleReasoningEffortChange}
+              verbosity={activeVerbosity}
+              onVerbosityChange={handleVerbosityChange}
+              mode={activeConversation?.mode || 'api'}
+              onModeChange={handleModeChange}
             />
           </>
         ) : (

package/node_modules/@groove-dev/gui/src/components/chat/conversation-list.jsx

@@ -31,7 +31,7 @@ function groupByDate(conversations) {
 function GroupLabel({ label }) {
   return (
     <div className="px-3 pt-4 pb-1.5">
-      <span className="text-2xs font-semibold text-text-4 uppercase tracking-wider font-sans">{label}</span>
+      <span className="text-2xs font-semibold text-white/60 uppercase tracking-wider font-sans">{label}</span>
     </div>
   );
 }
@@ -45,23 +45,23 @@ function ConversationItem({ conv, isActive, onSelect, onRename, onPin, onDelete
           className={cn(
             'w-full flex items-center gap-2 px-3 py-2 text-left rounded-md transition-colors cursor-pointer group',
             isActive
-              ? 'bg-accent/10 text-text-0'
-              : 'text-text-2 hover:bg-surface-4 hover:text-text-1',
+              ? 'bg-white/15 text-white'
+              : 'text-white/80 hover:bg-white/10 hover:text-white',
           )}
         >
-          <MessageCircle size={13} className={cn('flex-shrink-0', isActive ? 'text-accent' : 'text-text-4 group-hover:text-text-3')} />
+          <MessageCircle size={13} className={cn('flex-shrink-0', isActive ? 'text-white' : 'text-white/50 group-hover:text-white/70')} />
           <div className="flex-1 min-w-0">
-            <div className="text-xs font-medium font-sans truncate">{conv.title || 'New Chat'}</div>
+            <div className="text-xs font-medium font-sans truncate text-white">{conv.title || 'New Chat'}</div>
             <div className="flex items-center gap-1.5 mt-0.5">
               {conv.mode === 'agent'
-                ? <Bot size={9} className="text-purple flex-shrink-0" />
-                : <Zap size={9} className="text-accent flex-shrink-0" />
+                ? <Bot size={9} className="text-white/70 flex-shrink-0" />
+                : <Zap size={9} className="text-white/70 flex-shrink-0" />
               }
               {conv.model && <Badge variant="default" className="text-[8px] px-1 py-0">{formatModelName(conv.model)}</Badge>}
-              <span className="text-2xs text-text-4 font-sans">{timeAgo(conv.updatedAt || conv.createdAt)}</span>
+              <span className="text-2xs text-white/50 font-sans">{timeAgo(conv.updatedAt || conv.createdAt)}</span>
             </div>
           </div>
-          {conv.pinned && <Pin size={10} className="text-accent flex-shrink-0" />}
+          {conv.pinned && <Pin size={10} className="text-white flex-shrink-0" />}
         </button>
       </ContextMenuTrigger>
       <ContextMenuContent>
@@ -125,9 +125,9 @@ export function ConversationList({ onNewChat }) {
       <div className="flex-1 overflow-y-auto px-1.5 pt-3 pb-3 space-y-0.5">
         {conversations.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-16 text-center px-4">
-            <MessageCircle size={24} className="text-text-4 mb-3" />
-            <p className="text-xs text-text-3 font-sans">No conversations yet</p>
-            <p className="text-2xs text-text-4 font-sans mt-1">Start a new chat to begin</p>
+            <MessageCircle size={24} className="text-white/50 mb-3" />
+            <p className="text-xs text-white/80 font-sans">No conversations yet</p>
+            <p className="text-2xs text-white/60 font-sans mt-1">Start a new chat to begin</p>
           </div>
         ) : (
           <>
@@ -140,10 +140,10 @@ export function ConversationList({ onNewChat }) {
         )}
       </div>
 
-      <div className="p-3 border-t border-border-subtle">
+      <div className="p-3 border-t border-white/15">
         <button
           onClick={onNewChat}
-          className="w-full flex items-center justify-center gap-2 h-9 rounded-lg bg-accent/15 text-accent text-xs font-semibold font-sans hover:bg-accent/25 transition-colors cursor-pointer border border-accent/20"
+          className="w-full flex items-center justify-center gap-2 h-9 rounded-lg bg-white/15 text-white text-xs font-semibold font-sans hover:bg-white/25 transition-colors cursor-pointer border border-white/20"
         >
           <Plus size={14} />
           New Chat

package/node_modules/@groove-dev/gui/src/components/chat/model-picker.jsx

@@ -23,6 +23,10 @@ const TIER_CONFIG = {
 
 function getTier(model) {
   const name = (model || '').toLowerCase();
+  if (name.includes('gpt-5.5') || name.includes('gpt-5.4-pro')) return 'frontier';
+  if (name.includes('gpt-5.4-mini') || name.includes('gpt-5-mini')) return 'mid';
+  if (name.includes('gpt-5.4-nano') || name.includes('gpt-5-nano')) return 'fast';
+  if (name.includes('gpt-5.4')) return 'frontier';
   if (name.includes('opus') || name.includes('pro') || name.includes('o3') || name.includes('gpt-4o')) return 'frontier';
   if (name.includes('sonnet') || name.includes('flash') || name.includes('o4-mini')) return 'mid';
   return 'fast';
@@ -30,6 +34,7 @@ function getTier(model) {
 
 function getContextSize(model) {
   const name = (model || '').toLowerCase();
+  if (name.startsWith('gpt-5')) return '200k';
   if (name.includes('opus') || name.includes('sonnet')) return '200k';
   if (name.includes('haiku')) return '200k';
   if (name.includes('pro')) return '1M';

package/node_modules/@groove-dev/gui/src/components/preview/preview-workspace.jsx

@@ -224,7 +224,7 @@ const DEVICE_WIDTHS = {
   mobile: '375px',
 };
 
-export function PreviewWorkspace() {
+export function PreviewWorkspace({ embedded = false }) {
   const previewState = useGrooveStore((s) => s.previewState);
   const iframeRef = useRef(null);
   const [iframeKey, setIframeKey] = useState(0);
@@ -269,10 +269,11 @@ export function PreviewWorkspace() {
         </div>
       </div>
 
-      {/* Right pane: chat */}
-      <div className="flex-[2] min-w-[280px] max-w-[480px] border-l border-border md:max-w-none md:flex-[2]">
-        <PreviewChat />
-      </div>
+      {!embedded && (
+        <div className="flex-[2] min-w-[280px] max-w-[480px] border-l border-border md:max-w-none md:flex-[2]">
+          <PreviewChat />
+        </div>
+      )}
     </div>
   );
 }

package/node_modules/@groove-dev/gui/src/components/preview/screenshot-overlay.jsx

@@ -2,6 +2,7 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { Send, X, Loader2 } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
+import html2canvas from 'html2canvas';
 
 export function ScreenshotOverlay({ iframeRef }) {
   const toggleScreenshotMode = useGrooveStore((s) => s.toggleScreenshotMode);
@@ -77,37 +78,48 @@ export function ScreenshotOverlay({ iframeRef }) {
       return canvas.toDataURL('image/png');
     }
 
-    try {
-      const iframe = iframeRef.current;
-      if (!iframe) { finishCapture(drawPlaceholder()); return; }
+    const iframe = iframeRef.current;
+    if (!iframe) { finishCapture(drawPlaceholder()); return; }
 
-      const canvas = document.createElement('canvas');
-      const dpr = window.devicePixelRatio || 1;
-      canvas.width = selRect.w * dpr;
-      canvas.height = selRect.h * dpr;
-      const ctx = canvas.getContext('2d');
-      ctx.scale(dpr, dpr);
+    const iframeRect = iframe.getBoundingClientRect();
+    const overlayRect = overlayRef.current.getBoundingClientRect();
+    const offsetX = selRect.x - (iframeRect.left - overlayRect.left);
+    const offsetY = selRect.y - (iframeRect.top - overlayRect.top);
 
-      const iframeRect = iframe.getBoundingClientRect();
-      const overlayRect = overlayRef.current.getBoundingClientRect();
-      const offsetX = selRect.x - (iframeRect.left - overlayRect.left);
-      const offsetY = selRect.y - (iframeRect.top - overlayRect.top);
-
-      try {
-        ctx.drawImage(iframe, -offsetX * dpr, -offsetY * dpr, iframeRect.width * dpr, iframeRect.height * dpr, 0, 0, selRect.w, selRect.h);
-        const testPixel = ctx.getImageData(0, 0, 1, 1).data;
-        if (testPixel[0] === 0 && testPixel[1] === 0 && testPixel[2] === 0 && testPixel[3] === 0) {
-          throw new Error('blank');
-        }
-        finishCapture(canvas.toDataURL('image/png'));
-      } catch {
-        finishCapture(drawPlaceholder());
-      }
-    } catch {
-      setStart(null);
-      setEnd(null);
-      setCaptured(null);
-    }
+    let iframeBody;
+    try {
+      iframeBody = iframe.contentDocument?.body || iframe.contentWindow?.document?.body;
+    } catch { /* cross-origin fallback */ }
+
+    if (!iframeBody) { finishCapture(drawPlaceholder()); return; }
+
+    html2canvas(iframeBody, {
+      width: iframeRect.width,
+      height: iframeRect.height,
+      windowWidth: iframeRect.width,
+      windowHeight: iframeRect.height,
+      x: 0,
+      y: 0,
+      useCORS: true,
+      logging: false,
+    }).then((fullCanvas) => {
+      const dpr = window.devicePixelRatio || 1;
+      const cropCanvas = document.createElement('canvas');
+      cropCanvas.width = selRect.w * dpr;
+      cropCanvas.height = selRect.h * dpr;
+      const ctx = cropCanvas.getContext('2d');
+      ctx.drawImage(
+        fullCanvas,
+        offsetX * (fullCanvas.width / iframeRect.width),
+        offsetY * (fullCanvas.height / iframeRect.height),
+        selRect.w * (fullCanvas.width / iframeRect.width),
+        selRect.h * (fullCanvas.height / iframeRect.height),
+        0, 0, cropCanvas.width, cropCanvas.height,
+      );
+      finishCapture(cropCanvas.toDataURL('image/png'));
+    }).catch(() => {
+      finishCapture(drawPlaceholder());
+    });
   }, [dragging, start, end, iframeRef]);
 
   useEffect(() => {

package/node_modules/@groove-dev/gui/src/stores/groove.js

@@ -58,6 +58,7 @@ export const useGrooveStore = create((set, get) => ({
 
   // ── Preview ───────────────────────────────────────────────
   previewState: { url: null, teamId: null, kind: null, deviceSize: 'desktop', screenshotMode: false },
+  showPreviewInAgents: false,
   previewChat: [],
   previewIterating: false,
 
@@ -91,6 +92,8 @@ export const useGrooveStore = create((set, get) => ({
   sendingMessage: false,
   streamingConversationId: null,
   conversationRoles: loadJSON('groove:conversationRoles'),
+  conversationReasoningEffort: loadJSON('groove:conversationReasoningEffort'),
+  conversationVerbosity: loadJSON('groove:conversationVerbosity'),
 
   // ── Approvals ─────────────────────────────────────────────
   pendingApprovals: [],
@@ -172,6 +175,13 @@ export const useGrooveStore = create((set, get) => ({
   editorRecentSaves: {},
   editorSidebarWidth: Number(localStorage.getItem('groove:editorSidebarWidth')) || 240,
 
+  // ── Workspace Mode ────────────────────────────────────────
+  workspaceMode: localStorage.getItem('groove:workspaceMode') === 'true',
+  workspaceAgentId: null,
+  workspaceSnapshots: {},
+  workspaceReviewMode: false,
+  workspaceReviewFiles: [],
+
   // ── Onboarding ────────────────────────────────────────────
   onboardingComplete: localStorage.getItem('groove:onboardingComplete') === 'true',
 
@@ -450,6 +460,15 @@ export const useGrooveStore = create((set, get) => ({
           if (msg.error && msg.agentId) {
             get().addChatMessage(msg.agentId, 'system', `Crashed: ${msg.error}`);
           }
+          // Clear workspace if the exiting agent was the workspace target
+          if (get().workspaceAgentId === msg.agentId) {
+            const teamAgents = get().agents.filter(
+              (a) => a.id !== msg.agentId && a.teamId === get().activeTeamId,
+            );
+            const next = teamAgents.find((a) => a.status === 'running') || teamAgents[0];
+            set({ workspaceAgentId: next?.id || null });
+          }
+
           // Check for recommended team when planner completes
           if (agent?.role === 'planner' && msg.status === 'completed') {
             setTimeout(() => get().checkRecommendedTeam(), 1000);
@@ -566,6 +585,13 @@ export const useGrooveStore = create((set, get) => ({
           const savedAt = get().editorRecentSaves[msg.path];
           if (savedAt && Date.now() - savedAt < 2000) break;
           set((s) => ({ editorChangedFiles: { ...s.editorChangedFiles, [msg.path]: msg.timestamp } }));
+          // Auto-capture workspace snapshot for diff viewer
+          if (get().workspaceMode && msg.path && !get().workspaceSnapshots[msg.path]) {
+            const existing = get().editorFiles[msg.path];
+            if (existing?.content) {
+              get().captureSnapshot(msg.path, existing.content);
+            }
+          }
           break;
         }
 
@@ -1187,14 +1213,17 @@ export const useGrooveStore = create((set, get) => ({
   // ── Preview ──────────────────────────────────────────────
 
   openPreview(url, teamId, kind) {
-    set({ previewState: { url, teamId, kind, deviceSize: 'desktop', screenshotMode: false }, previewChat: [], activeView: 'preview' });
+    set({ previewState: { url, teamId, kind, deviceSize: 'desktop', screenshotMode: false }, previewChat: [], showPreviewInAgents: true });
   },
   closePreview() {
     const { previewState } = get();
     if (previewState.teamId) {
       api.delete(`/preview/${previewState.teamId}`).catch(() => {});
     }
-    set({ previewState: { url: null, teamId: null, kind: null, deviceSize: 'desktop', screenshotMode: false }, previewChat: [], previewIterating: false, activeView: 'agents' });
+    set({ previewState: { url: null, teamId: null, kind: null, deviceSize: 'desktop', screenshotMode: false }, previewChat: [], previewIterating: false, showPreviewInAgents: false, activeView: 'agents' });
+  },
+  togglePreviewInAgents() {
+    set((s) => ({ showPreviewInAgents: !s.showPreviewInAgents }));
   },
   setPreviewDevice(size) {
     set((s) => ({ previewState: { ...s.previewState, deviceSize: size } }));
@@ -2046,7 +2075,13 @@ export const useGrooveStore = create((set, get) => ({
         const conversationRoles = { ...s.conversationRoles };
         delete conversationRoles[id];
         persistJSON('groove:conversationRoles', conversationRoles);
-        return { conversations, conversationMessages, conversationRoles, activeConversationId };
+        const conversationReasoningEffort = { ...s.conversationReasoningEffort };
+        delete conversationReasoningEffort[id];
+        persistJSON('groove:conversationReasoningEffort', conversationReasoningEffort);
+        const conversationVerbosity = { ...s.conversationVerbosity };
+        delete conversationVerbosity[id];
+        persistJSON('groove:conversationVerbosity', conversationVerbosity);
+        return { conversations, conversationMessages, conversationRoles, conversationReasoningEffort, conversationVerbosity, activeConversationId };
       });
     } catch (err) {
       get().addToast('error', 'Delete failed', err.message);
@@ -2089,6 +2124,24 @@ export const useGrooveStore = create((set, get) => ({
     });
   },
 
+  setConversationReasoningEffort(id, effort) {
+    set((s) => {
+      const map = { ...s.conversationReasoningEffort };
+      map[id] = effort || 'medium';
+      persistJSON('groove:conversationReasoningEffort', map);
+      return { conversationReasoningEffort: map };
+    });
+  },
+
+  setConversationVerbosity(id, verbosity) {
+    set((s) => {
+      const map = { ...s.conversationVerbosity };
+      map[id] = verbosity || 'medium';
+      persistJSON('groove:conversationVerbosity', map);
+      return { conversationVerbosity: map };
+    });
+  },
+
   async sendChatMessage(conversationId, message) {
     const conv = get().conversations.find((c) => c.id === conversationId);
     if (!conv) return;
@@ -2118,6 +2171,12 @@ export const useGrooveStore = create((set, get) => ({
           ...body.history,
         ];
       }
+      const effort = get().conversationReasoningEffort?.[conversationId] || 'medium';
+      const verbosity = get().conversationVerbosity?.[conversationId] || 'medium';
+      if (conv.provider === 'codex') {
+        body.reasoning_effort = effort;
+        body.verbosity = verbosity;
+      }
       await api.post(`/conversations/${encodeURIComponent(conversationId)}/message`, body);
     } catch (err) {
       set((s) => {
@@ -2299,6 +2358,82 @@ export const useGrooveStore = create((set, get) => ({
     }
   },
 
+  // ── Workspace Mode ────────────────────────────────────────
+
+  setWorkspaceMode(on) {
+    set({ workspaceMode: on });
+    localStorage.setItem('groove:workspaceMode', String(on));
+    if (on && !get().workspaceAgentId) {
+      const teamAgents = get().agents.filter((a) => a.teamId === get().activeTeamId);
+      const selected = get().detailPanel?.type === 'agent' ? get().detailPanel.agentId : null;
+      const running = teamAgents.find((a) => a.status === 'running');
+      set({ workspaceAgentId: selected || running?.id || teamAgents[0]?.id || null });
+    }
+  },
+
+  setWorkspaceAgent(id) {
+    set({ workspaceAgentId: id });
+  },
+
+  captureSnapshot(path, content) {
+    set((s) => {
+      if (s.workspaceSnapshots[path]) return s;
+      const next = { ...s.workspaceSnapshots, [path]: content };
+      const keys = Object.keys(next);
+      if (keys.length > 200) {
+        delete next[keys[0]];
+      }
+      return { workspaceSnapshots: next };
+    });
+  },
+
+  toggleReviewMode() {
+    const st = get();
+    if (st.workspaceReviewMode) {
+      set({ workspaceReviewMode: false, workspaceReviewFiles: [] });
+      return;
+    }
+    const agentId = st.workspaceAgentId;
+    const log = st.activityLog[agentId] || [];
+    const seen = new Set();
+    const files = [];
+    for (const entry of log) {
+      const t = (entry.text || '').toLowerCase();
+      if (!(t.includes('writ') || t.includes('edit') || t.includes('creat'))) continue;
+      const match = entry.text.match(/(?:Write|Edit|Create|wrote|editing|writing)\S*\s+(\S+)/i);
+      if (!match) continue;
+      const path = match[1];
+      if (seen.has(path)) continue;
+      seen.add(path);
+      files.push({ path, status: 'pending', comment: '' });
+    }
+    set({ workspaceReviewMode: true, workspaceReviewFiles: files });
+  },
+
+  approveFile(path) {
+    set((s) => ({
+      workspaceReviewFiles: s.workspaceReviewFiles.map((f) =>
+        f.path === path ? { ...f, status: 'approved' } : f,
+      ),
+    }));
+  },
+
+  rejectFile(path) {
+    set((s) => ({
+      workspaceReviewFiles: s.workspaceReviewFiles.map((f) =>
+        f.path === path ? { ...f, status: 'rejected' } : f,
+      ),
+    }));
+  },
+
+  commentFile(path, comment) {
+    set((s) => ({
+      workspaceReviewFiles: s.workspaceReviewFiles.map((f) =>
+        f.path === path ? { ...f, comment } : f,
+      ),
+    }));
+  },
+
   // ── Federation ────────────────────────────────────────────
 
   async fetchFederationStatus() {

package/node_modules/@groove-dev/gui/src/views/agents.jsx

@@ -10,7 +10,9 @@ import { RootNode } from '../components/agents/root-node';
 import { cn } from '../lib/cn';
 import { Button } from '../components/ui/button';
 import { Badge } from '../components/ui/badge';
-import { Plus, Users, Zap, X, Check, Rocket, Server, Monitor, Code2, TestTube, Shield, Pencil, Copy, Trash2, ChevronDown, ChevronLeft, ChevronRight, FolderOpen, Radio } from 'lucide-react';
+import { Plus, Users, Zap, X, Check, Rocket, Server, Monitor, Code2, TestTube, Shield, Pencil, Copy, Trash2, ChevronDown, ChevronLeft, ChevronRight, FolderOpen, Radio, Eye } from 'lucide-react';
+import { PreviewWorkspace } from '../components/preview/preview-workspace';
+import { WorkspaceMode } from '../components/agents/workspace-mode';
 import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator } from '../components/ui/context-menu';
 
 const NODE_TYPES = { agentNode: AgentNode, rootNode: RootNode };
@@ -795,6 +797,11 @@ export default function AgentsView() {
   const selectAgent = useGrooveStore((s) => s.selectAgent);
   const recommendedTeam = useGrooveStore((s) => s.recommendedTeam);
   const checkRecommendedTeam = useGrooveStore((s) => s.checkRecommendedTeam);
+  const showPreviewInAgents = useGrooveStore((s) => s.showPreviewInAgents);
+  const previewState = useGrooveStore((s) => s.previewState);
+  const togglePreviewInAgents = useGrooveStore((s) => s.togglePreviewInAgents);
+  const workspaceMode = useGrooveStore((s) => s.workspaceMode);
+  const setWorkspaceMode = useGrooveStore((s) => s.setWorkspaceMode);
 
   // Poll for recommended team while a planner is running
   useEffect(() => {
@@ -845,14 +852,18 @@ export default function AgentsView() {
           </div>
         ) : teamAgents.length === 0 ? (
           <EmptyState onPlanner={launchPlanner} onSpawn={() => openDetail({ type: 'spawn' })} />
+        ) : workspaceMode ? (
+          <WorkspaceMode />
+        ) : showPreviewInAgents && previewState.url ? (
+          <PreviewWorkspace embedded />
         ) : (
           <ReactFlowProvider key={activeTeamId}>
             <AgentTreeInner />
           </ReactFlowProvider>
         )}
       </div>
-      <RecommendedTeamCard />
-      {!isLoading && teamAgents.length > 0 && (
+      {!workspaceMode && <RecommendedTeamCard />}
+      {!isLoading && teamAgents.length > 0 && !workspaceMode && (
         <button
           onClick={() => openDetail({ type: 'spawn' })}
           className="absolute bottom-4 left-4 z-40 flex items-center gap-1.5 h-8 px-4 rounded-md bg-accent/15 text-accent text-xs font-semibold font-sans hover:bg-accent/25 transition-colors cursor-pointer select-none shadow-lg shadow-black/10"
@@ -861,6 +872,28 @@ export default function AgentsView() {
           Spawn
         </button>
       )}
+      {!isLoading && teamAgents.length > 0 && (
+        <button
+          onClick={() => setWorkspaceMode(!workspaceMode)}
+          className={cn(
+            'absolute bottom-4 z-40 flex items-center gap-1.5 h-8 px-4 rounded-md text-xs font-semibold font-sans transition-colors cursor-pointer select-none shadow-lg shadow-black/10',
+            previewState.url && !workspaceMode ? 'right-32' : 'right-4',
+            workspaceMode
+              ? 'bg-accent/15 text-accent hover:bg-accent/25'
+              : 'bg-purple/15 text-purple hover:bg-purple/25',
+          )}
+        >
+          {workspaceMode ? <><Users size={14} /> Tree</> : <><Code2 size={14} /> Workspace</>}
+        </button>
+      )}
+      {!isLoading && teamAgents.length > 0 && !workspaceMode && previewState.url && (
+        <button
+          onClick={togglePreviewInAgents}
+          className="absolute bottom-4 right-4 z-40 flex items-center gap-1.5 h-8 px-4 rounded-md bg-info/15 text-info text-xs font-semibold font-sans hover:bg-info/25 transition-colors cursor-pointer select-none shadow-lg shadow-black/10"
+        >
+          {showPreviewInAgents ? <><Users size={14} /> Team</> : <><Eye size={14} /> Preview</>}
+        </button>
+      )}
     </div>
   );
 }