groove-dev 0.27.87 → 0.27.88

package/packages/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/packages/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/packages/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/packages/gui/src/stores/groove.js

@@ -92,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: [],
@@ -173,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',
 
@@ -451,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);
@@ -567,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;
         }
 
@@ -2050,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);
@@ -2093,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;
@@ -2122,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) => {
@@ -2303,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/packages/gui/src/views/agents.jsx

@@ -12,6 +12,7 @@ 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, 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 };
@@ -799,6 +800,8 @@ export default function AgentsView() {
   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(() => {
@@ -849,6 +852,8 @@ export default function AgentsView() {
           </div>
         ) : teamAgents.length === 0 ? (
           <EmptyState onPlanner={launchPlanner} onSpawn={() => openDetail({ type: 'spawn' })} />
+        ) : workspaceMode ? (
+          <WorkspaceMode />
         ) : showPreviewInAgents && previewState.url ? (
           <PreviewWorkspace embedded />
         ) : (
@@ -857,8 +862,8 @@ export default function AgentsView() {
           </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"
@@ -867,7 +872,21 @@ export default function AgentsView() {
           Spawn
         </button>
       )}
-      {!isLoading && teamAgents.length > 0 && previewState.url && (
+      {!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"

package/test/doomsday-clock/index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Doomsday Clock</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Nosifer&family=Special+Elite&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="particles">
+    <span class="particle"></span>
+    <span class="particle"></span>
+    <span class="particle"></span>
+    <span class="particle"></span>
+    <span class="particle"></span>
+    <span class="particle"></span>
+    <span class="particle"></span>
+    <span class="particle"></span>
+  </div>
+
+  <main class="container">
+    <p class="tagline" id="tagline">TIME IS RUNNING OUT</p>
+
+    <div class="clock-ring">
+      <div class="glow"></div>
+      <div class="countdown" id="countdown">
+        <div class="unit">
+          <span class="digit" id="days">00</span>
+          <span class="label">Days</span>
+        </div>
+        <div class="separator">:</div>
+        <div class="unit">
+          <span class="digit" id="hours">00</span>
+          <span class="label">Hours</span>
+        </div>
+        <div class="separator">:</div>
+        <div class="unit">
+          <span class="digit" id="minutes">00</span>
+          <span class="label">Minutes</span>
+        </div>
+        <div class="separator">:</div>
+        <div class="unit">
+          <span class="digit" id="seconds">00</span>
+          <span class="label">Seconds</span>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <script src="script.js"></script>
+</body>
+</html>

package/test/doomsday-clock/script.js

@@ -0,0 +1,66 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+(function () {
+  var STORAGE_KEY = 'doomsday-target';
+  var FIVE_DAYS_MS = 5 * 24 * 60 * 60 * 1000;
+
+  var daysEl = document.getElementById('days');
+  var hoursEl = document.getElementById('hours');
+  var minutesEl = document.getElementById('minutes');
+  var secondsEl = document.getElementById('seconds');
+  var taglineEl = document.getElementById('tagline');
+
+  var target = localStorage.getItem(STORAGE_KEY);
+  if (!target) {
+    target = Date.now() + FIVE_DAYS_MS;
+    localStorage.setItem(STORAGE_KEY, target);
+  } else {
+    target = Number(target);
+  }
+
+  var done = false;
+
+  function pad(n) {
+    return n < 10 ? '0' + n : String(n);
+  }
+
+  function tick() {
+    if (done) return;
+
+    var remaining = target - Date.now();
+
+    if (remaining <= 0) {
+      done = true;
+      daysEl.textContent = '00';
+      hoursEl.textContent = '00';
+      minutesEl.textContent = '00';
+      secondsEl.textContent = '00';
+
+      taglineEl.textContent = 'IT IS DONE';
+      taglineEl.classList.add('done');
+
+      document.querySelectorAll('.digit').forEach(function (el) {
+        el.classList.add('stopped');
+      });
+      document.querySelectorAll('.separator').forEach(function (el) {
+        el.classList.add('stopped');
+      });
+
+      document.body.classList.add('flash');
+      return;
+    }
+
+    var totalSeconds = Math.floor(remaining / 1000);
+    var d = Math.floor(totalSeconds / 86400);
+    var h = Math.floor((totalSeconds % 86400) / 3600);
+    var m = Math.floor((totalSeconds % 3600) / 60);
+    var s = totalSeconds % 60;
+
+    daysEl.textContent = pad(d);
+    hoursEl.textContent = pad(h);
+    minutesEl.textContent = pad(m);
+    secondsEl.textContent = pad(s);
+  }
+
+  tick();
+  setInterval(tick, 1000);
+})();