groove-dev 0.27.93 → 0.27.96

package/packages/gui/package.json

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

package/packages/gui/src/components/agents/agent-file-tree.jsx

@@ -34,8 +34,41 @@ function matchesScope(filePath, scopePatterns) {
   return false;
 }
 
+// ── Inline Input (for new file/folder) ─────────────────
+function InlineInput({ defaultValue = '', placeholder, onSubmit, onCancel, depth = 0 }) {
+  const [value, setValue] = useState(defaultValue);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+    if (defaultValue) inputRef.current?.select();
+  }, [defaultValue]);
+
+  function handleKeyDown(e) {
+    if (e.key === 'Enter') {
+      const name = value.trim();
+      if (name) onSubmit(name);
+    }
+    if (e.key === 'Escape') onCancel();
+  }
+
+  return (
+    <div className="flex items-center py-0.5" style={{ paddingLeft: depth * 16 + 8 }}>
+      <input
+        ref={inputRef}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={onCancel}
+        placeholder={placeholder}
+        className="w-full h-5 px-1.5 text-xs bg-surface-0 border border-accent rounded text-text-0 font-sans focus:outline-none"
+      />
+    </div>
+  );
+}
+
 function TreeEntry({ entry, depth, onOpen, expandedDirs, onToggleDir }) {
-  const isDir = entry.type === 'directory';
+  const isDir = entry.type === 'dir';
   const isExpanded = expandedDirs.has(entry.path);
   const fileColor = isDir ? 'text-accent' : getFileColor(entry.name);
 
@@ -91,6 +124,7 @@ export function AgentFileTree({ agentId }) {
   const [expandedDirs, setExpandedDirs] = useState(new Set());
   const [loading, setLoading] = useState(true);
   const [touchedFiles, setTouchedFiles] = useState([]);
+  const [inlineInput, setInlineInput] = useState(null);
   const fetchedRef = useRef(new Set());
 
   useEffect(() => {
@@ -152,7 +186,7 @@ export function AgentFileTree({ agentId }) {
       for (const dir of dirs) {
         const entries = await fetchDir(dir);
         if (entries.length > 0) {
-          results.push({ name: dir.split('/').pop(), path: dir, type: 'directory', children: entries });
+          results.push({ name: dir.split('/').pop(), path: dir, type: 'dir', children: entries });
         }
       }
       if (!cancelled) setTreeData(results);
@@ -178,22 +212,32 @@ export function AgentFileTree({ agentId }) {
     openFile(path);
   }
 
-  async function handleNewFile() {
-    const name = prompt('File name:');
-    if (!name?.trim()) return;
-    await createFile?.(name.trim());
+  function handleNewFile() {
+    setInlineInput({
+      type: 'file',
+      onSubmit: async (name) => {
+        setInlineInput(null);
+        await createFile?.(name);
+      },
+      onCancel: () => setInlineInput(null)
+    });
   }
 
-  async function handleNewFolder() {
-    const name = prompt('Folder name:');
-    if (!name?.trim()) return;
-    try {
-      await api.post('/files/mkdir', { path: name.trim() });
-      addToast('success', `Created ${name.trim()}/`);
-      handleRefresh();
-    } catch (err) {
-      addToast('error', 'Create folder failed', err.message);
-    }
+  function handleNewFolder() {
+    setInlineInput({
+      type: 'folder',
+      onSubmit: async (name) => {
+        setInlineInput(null);
+        try {
+          await api.post('/files/mkdir', { path: name });
+          addToast('success', `Created ${name}/`);
+          handleRefresh();
+        } catch (err) {
+          addToast('error', 'Create folder failed', err.message);
+        }
+      },
+      onCancel: () => setInlineInput(null)
+    });
   }
 
   function handleRefresh() {
@@ -226,6 +270,14 @@ export function AgentFileTree({ agentId }) {
       </div>
       <ScrollArea className="flex-1 min-h-0">
       <div className="py-2">
+        {inlineInput && (
+          <InlineInput
+            placeholder={inlineInput.type === 'file' ? 'filename.ext' : 'folder-name'}
+            onSubmit={inlineInput.onSubmit}
+            onCancel={inlineInput.onCancel}
+            depth={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">

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

@@ -80,11 +80,13 @@ function InlineName({ agent }) {
 export function AgentPanel() {
   const detailPanel = useGrooveStore((s) => s.detailPanel);
   const agents = useGrooveStore((s) => s.agents);
+  const activeTeamId = useGrooveStore((s) => s.activeTeamId);
   const [activeTab, setActiveTab] = useState('command');
 
   if (detailPanel?.type !== 'agent') return null;
   const agent = agents.find((a) => a.id === detailPanel.agentId);
   if (!agent) return null;
+  if (activeTeamId && agent.teamId && agent.teamId !== activeTeamId) return null;
 
   const isAlive = agent.status === 'running' || agent.status === 'starting';
   const ctxPct = Math.round((agent.contextUsage || 0) * 100);

package/packages/gui/src/components/agents/code-review.jsx

@@ -5,7 +5,7 @@ import { cn } from '../../lib/cn';
 import { ScrollArea } from '../ui/scroll-area';
 import { Button } from '../ui/button';
 import { DiffViewer } from './diff-viewer';
-import { Check, X, MessageSquare, ChevronLeft, CheckCircle2, XCircle, Send } from 'lucide-react';
+import { Check, X, MessageSquare, ChevronLeft, CheckCircle2, XCircle, Send, Users } from 'lucide-react';
 
 export function CodeReview({ agentId }) {
   const reviewFiles = useGrooveStore((s) => s.workspaceReviewFiles);
@@ -15,6 +15,7 @@ export function CodeReview({ agentId }) {
   const instructAgent = useGrooveStore((s) => s.instructAgent);
   const toggleReviewMode = useGrooveStore((s) => s.toggleReviewMode);
   const openFile = useGrooveStore((s) => s.openFile);
+  const setWorkspaceMode = useGrooveStore((s) => s.setWorkspaceMode);
 
   const [selectedFile, setSelectedFile] = useState(null);
   const [commentingPath, setCommentingPath] = useState(null);
@@ -71,12 +72,19 @@ export function CodeReview({ agentId }) {
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center gap-3 px-4 py-3 bg-surface-1 border-b border-border flex-shrink-0">
+        <button onClick={toggleReviewMode} className="p-1 rounded hover:bg-surface-4 text-text-3 hover:text-text-1 cursor-pointer" title="Back to Files">
+          <ChevronLeft size={16} />
+        </button>
         <span className="text-sm font-semibold text-text-0 font-sans flex-1">Review Changes</span>
         <span className="text-xs text-text-3 font-sans">
           {reviewFiles.length} file{reviewFiles.length !== 1 ? 's' : ''} changed
         </span>
         {approved > 0 && <span className="text-xs text-success font-sans">{approved} approved</span>}
         {rejected > 0 && <span className="text-xs text-danger font-sans">{rejected} rejected</span>}
+        <button onClick={() => { toggleReviewMode(); setWorkspaceMode(false); }} className="p-1.5 rounded bg-surface-3 hover:bg-surface-4 text-text-2 hover:text-text-0 cursor-pointer flex items-center gap-1.5" title="Back to Team">
+          <Users size={14} />
+          <span className="text-xs font-sans">Team</span>
+        </button>
       </div>
 
       <ScrollArea className="flex-1">

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

@@ -227,7 +227,7 @@ export function WorkspaceMode() {
         </div>
 
         {/* Editor Area */}
-        <div className="flex-1 flex flex-col min-w-0 bg-[#13161b]">
+        <div className="flex-1 flex flex-col min-w-0 bg-surface-0">
           {workspaceReviewMode ? (
             <CodeReview agentId={agent.id} />
           ) : (
@@ -266,7 +266,7 @@ export function WorkspaceMode() {
                 )}
 
                 {!editorActiveFile && (
-                  <div className="w-full h-full flex items-center justify-center text-text-4 font-sans bg-[#13161b]">
+                  <div className="w-full h-full flex items-center justify-center text-text-4 font-sans bg-surface-0">
                     <div className="text-center space-y-2">
                       <Code2 size={32} className="mx-auto" />
                       <p className="text-sm">Open a file from the tree</p>

package/packages/gui/src/components/editor/code-editor.jsx

@@ -141,5 +141,5 @@ export function CodeEditor({ content, language, onChange, onSave, onCursorChange
     view.dispatch({ effects: langCompartment.current.reconfigure(langExt()) });
   }, [language]);
 
-  return <div ref={containerRef} className="w-full h-full overflow-hidden bg-[#13161b]" />;
+  return <div ref={containerRef} className="w-full h-full overflow-hidden bg-surface-0" />;
 }

package/packages/gui/src/stores/groove.js

@@ -70,7 +70,6 @@ export const useGrooveStore = create((set, get) => ({
   teamBuilderRoles: [],
   teamBuilderSettings: { provider: null, model: null, reasoningEffort: 50, temperature: 0.5 },
   teamBuilderTask: '',
-  teamBuilderLaunchMode: 'plan',
   teamTemplates: { builtIn: [], custom: [] },
 
   // ── Navigation ────────────────────────────────────────────
@@ -1201,6 +1200,8 @@ export const useGrooveStore = create((set, get) => ({
   },
   selectAgent(id) {
     const tid = get().activeTeamId;
+    const match = get().agents.find((a) => a.id === id);
+    if (tid && match && match.teamId && match.teamId !== tid) return;
     const panel = { type: 'agent', agentId: id };
     set((s) => ({ detailPanel: panel, teamDetailPanels: { ...s.teamDetailPanels, [tid]: panel } }));
   },
@@ -1522,7 +1523,14 @@ export const useGrooveStore = create((set, get) => ({
           if (get()._delegatingTeamIds.has(teamId)) return;
           set((s) => ({ recommendedTeam: null, _delegatingTeamIds: new Set([...s._delegatingTeamIds, teamId]) }));
           try {
-            const result = await api.post('/recommended-team/launch', { teamId });
+            const tlc = get().teamLaunchConfig;
+            const result = await api.post('/recommended-team/launch', {
+              teamId,
+              ...(tlc?.provider && { teamProvider: tlc.provider }),
+              ...(tlc?.model && { teamModel: tlc.model }),
+              ...(tlc?.reasoningEffort != null && { teamReasoningEffort: tlc.reasoningEffort }),
+              ...(tlc?.temperature != null && { teamTemperature: tlc.temperature }),
+            });
             const agents = result.agents || [];
             const failures = result.failed || [];
             const names = agents.map((a) => a.name).join(', ') || '';
@@ -1619,7 +1627,6 @@ export const useGrooveStore = create((set, get) => ({
       teamBuilderRoles: [],
       teamBuilderSettings: { provider: null, model: null, reasoningEffort: 50, temperature: 0.5 },
       teamBuilderTask: '',
-      teamBuilderLaunchMode: 'plan',
     });
   },
   addTeamBuilderRole(role) {
@@ -1651,12 +1658,18 @@ export const useGrooveStore = create((set, get) => ({
     set((s) => ({ teamBuilderSettings: { ...s.teamBuilderSettings, ...settings } }));
   },
   setTeamBuilderTask(task) { set({ teamBuilderTask: task }); },
-  setTeamBuilderLaunchMode(mode) { set({ teamBuilderLaunchMode: mode }); },
 
   async fetchTeamTemplates() {
     try {
       const data = await api.get('/team-templates');
-      set({ teamTemplates: data });
+      const builtIn = [];
+      const custom = [];
+      for (const [key, tmpl] of Object.entries(data || {})) {
+        const entry = { ...tmpl, name: key };
+        if (tmpl.builtIn) builtIn.push(entry);
+        else custom.push(entry);
+      }
+      set({ teamTemplates: { builtIn, custom } });
     } catch { /* endpoint may not exist yet */ }
   },
 
@@ -1686,21 +1699,25 @@ export const useGrooveStore = create((set, get) => ({
   },
 
   async launchTeamBuilder() {
-    const { teamBuilderRoles, teamBuilderSettings, teamBuilderTask, teamBuilderLaunchMode, activeTeamId } = get();
+    const { teamBuilderRoles, teamBuilderSettings, teamBuilderTask, activeTeamId } = get();
     if (teamBuilderRoles.length === 0) return;
+    set({ teamLaunchConfig: {
+      provider: teamBuilderSettings.provider || null,
+      model: teamBuilderSettings.model || null,
+      reasoningEffort: teamBuilderSettings.reasoningEffort,
+      temperature: teamBuilderSettings.temperature,
+    }});
+    get().closeTeamBuilder();
     try {
-      get().addToast('info', 'Launching team...');
       const body = {
         task: teamBuilderTask,
         roles: teamBuilderRoles,
         settings: teamBuilderSettings,
-        launchMode: teamBuilderLaunchMode,
+        launchMode: 'plan-first',
         teamId: activeTeamId,
       };
       const result = await api.post('/team-builder/launch', body);
-      const count = result.launched || result.agents?.length || 0;
-      get().addToast('success', `Launched ${count} agent${count !== 1 ? 's' : ''}`);
-      get().closeTeamBuilder();
+      get().addToast('success', 'Planner spawned — team will build automatically');
       return result;
     } catch (err) {
       get().addToast('error', 'Team launch failed', err.message);
@@ -2529,27 +2546,24 @@ export const useGrooveStore = create((set, get) => ({
     });
   },
 
-  toggleReviewMode() {
+  async 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 });
+    if (!agentId) return;
+    try {
+      const res = await api.get(`/agents/${agentId}/files-touched`);
+      const touched = res.data || [];
+      const files = touched
+        .filter((f) => f.writes > 0)
+        .map((f) => ({ path: f.path, status: 'pending', comment: '' }));
+      set({ workspaceReviewMode: true, workspaceReviewFiles: files });
+    } catch (err) {
+      console.error('Failed to fetch touched files for review:', err);
+    }
   },
 
   approveFile(path) {

package/packages/gui/src/views/agents.jsx

@@ -10,7 +10,7 @@ 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, UserPlus, Zap, X, Check, Rocket, Server, Monitor, Code2, TestTube, Shield, Pencil, Copy, Trash2, ChevronDown, ChevronLeft, ChevronRight, FolderOpen, Eye, Settings2, Search, GripVertical, Cloud, FileText, Database, Megaphone, Calculator, UserCheck, Headphones, BarChart3, Pen, Presentation, Globe, MessageCircle, Save, Play, Clock, ListChecks, Layers } from 'lucide-react';
+import { Plus, Users, UserPlus, Zap, X, Check, Rocket, Server, Monitor, Code2, TestTube, Shield, Pencil, Copy, Trash2, ChevronDown, ChevronLeft, ChevronRight, FolderOpen, Eye, Settings2, Search, GripVertical, Cloud, FileText, Database, Megaphone, Calculator, UserCheck, Headphones, BarChart3, Pen, Presentation, Globe, MessageCircle, Save, Layers } 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';
@@ -750,7 +750,6 @@ function TeamBuilder() {
   const roles = useGrooveStore((s) => s.teamBuilderRoles);
   const settings = useGrooveStore((s) => s.teamBuilderSettings);
   const task = useGrooveStore((s) => s.teamBuilderTask);
-  const launchMode = useGrooveStore((s) => s.teamBuilderLaunchMode);
   const templates = useGrooveStore((s) => s.teamTemplates);
   const closeTeamBuilder = useGrooveStore((s) => s.closeTeamBuilder);
   const addRole = useGrooveStore((s) => s.addTeamBuilderRole);
@@ -759,7 +758,6 @@ function TeamBuilder() {
   const applyTemplate = useGrooveStore((s) => s.applyTemplate);
   const setSettings = useGrooveStore((s) => s.setTeamBuilderSettings);
   const setTask = useGrooveStore((s) => s.setTeamBuilderTask);
-  const setLaunchMode = useGrooveStore((s) => s.setTeamBuilderLaunchMode);
   const launchTeamBuilder = useGrooveStore((s) => s.launchTeamBuilder);
   const saveTeamTemplate = useGrooveStore((s) => s.saveTeamTemplate);
   const fetchTeamTemplates = useGrooveStore((s) => s.fetchTeamTemplates);
@@ -789,8 +787,6 @@ function TeamBuilder() {
 
   const selectedProvider = providers.find((p) => p.id === settings.provider);
   const settingsModels = (selectedProvider?.models || []).filter((m) => m.type !== 'image' && !m.disabled);
-  const showTemp = PROVIDER_TEMP_SUPPORT.has(settings.provider);
-
   function handleSettingsProviderChange(id) {
     setSettings({ provider: id });
     const p = providers.find((x) => x.id === id);
@@ -829,8 +825,8 @@ function TeamBuilder() {
         {/* Top Bar */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-border-subtle">
           <div className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-lg bg-purple/15 flex items-center justify-center">
-              <Users size={16} className="text-purple" />
+            <div className="w-8 h-8 rounded-lg bg-info/15 flex items-center justify-center">
+              <Users size={16} className="text-info" />
             </div>
             <h2 className="text-lg font-bold text-text-0 font-sans">Team Builder</h2>
           </div>
@@ -1017,16 +1013,6 @@ function TeamBuilder() {
                               formatValue={(v) => v.toFixed(2)}
                             />
                           )}
-                          <div className="space-y-1">
-                            <label className="text-2xs text-text-3 font-sans">Custom Prompt</label>
-                            <textarea
-                              value={r.prompt || ''}
-                              onChange={(e) => updateRole(i, { prompt: e.target.value })}
-                              placeholder="Optional instructions for this agent..."
-                              rows={2}
-                              className="w-full px-2.5 py-1.5 text-xs bg-surface-3 border border-border-subtle rounded-md text-text-0 font-sans placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent resize-none"
-                            />
-                          </div>
                         </div>
                       )}
                     </div>
@@ -1040,38 +1026,16 @@ function TeamBuilder() {
         {/* Bottom Bar */}
         <div className="border-t border-border-subtle px-6 py-4">
           <div className="flex gap-4">
-            {/* Task + Launch Mode */}
-            <div className="flex-1 space-y-3">
+            {/* Task */}
+            <div className="flex-1 space-y-1.5">
               <textarea
                 value={task}
                 onChange={(e) => setTask(e.target.value)}
-                placeholder="Describe what this team should work on..."
-                rows={2}
-                className="w-full px-3 py-2 text-sm bg-surface-3 border border-border-subtle rounded-lg text-text-0 font-sans placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent resize-none"
+                placeholder="Describe what you want to build... (optional)"
+                rows={3}
+                className="w-full px-3 py-2 text-sm bg-surface-3 border border-border-subtle rounded-md text-text-0 font-sans placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent resize-none"
               />
-              <div className="flex items-center gap-2">
-                <span className="text-2xs text-text-3 font-sans mr-1">Launch Mode:</span>
-                {[
-                  { id: 'direct', label: 'Direct', icon: Play, tip: 'Agents start working immediately' },
-                  { id: 'plan', label: 'Plan First', icon: ListChecks, tip: 'Planner designs prompts, then team launches' },
-                  { id: 'await', label: 'Await', icon: Clock, tip: 'Agents spawn idle, await instructions' },
-                ].map((m) => (
-                  <Tooltip key={m.id} content={m.tip}>
-                    <button
-                      onClick={() => setLaunchMode(m.id)}
-                      className={cn(
-                        'flex items-center gap-1.5 px-2.5 py-1 rounded-md text-2xs font-semibold font-sans transition-colors cursor-pointer',
-                        launchMode === m.id
-                          ? 'bg-accent/15 text-accent border border-accent/30'
-                          : 'bg-surface-3 text-text-3 border border-border-subtle hover:text-text-1 hover:border-border',
-                      )}
-                    >
-                      <m.icon size={11} />
-                      {m.label}
-                    </button>
-                  </Tooltip>
-                ))}
-              </div>
+              <p className="text-2xs text-text-4 font-sans italic">Leave empty to spawn agents awaiting instructions</p>
             </div>
 
             {/* Team Settings + Launch */}
@@ -1102,21 +1066,6 @@ function TeamBuilder() {
                   </Select>
                 </div>
               </div>
-              <TuningSlider
-                label="Reasoning"
-                value={settings.reasoningEffort}
-                onChange={(v) => setSettings({ reasoningEffort: v })}
-                min={0} max={100} step={1}
-              />
-              {showTemp && (
-                <TuningSlider
-                  label="Temperature"
-                  value={settings.temperature}
-                  onChange={(v) => setSettings({ temperature: v })}
-                  min={0} max={1} step={0.01}
-                  formatValue={(v) => v.toFixed(2)}
-                />
-              )}
               <Button
                 variant="primary"
                 size="md"
@@ -1125,7 +1074,7 @@ function TeamBuilder() {
                 className="w-full gap-2 mt-1"
               >
                 <Zap size={14} />
-                {launching ? 'Launching...' : `Launch Team (${roles.length})`}
+                {launching ? 'Launching...' : `Plan & Launch (${roles.length})`}
               </Button>
             </div>
           </div>
@@ -1197,10 +1146,10 @@ function EmptyState({ onPlanner, onSpawn, onTeamBuilder }) {
           <div className="grid grid-cols-2 gap-3">
             <button
               onClick={onTeamBuilder}
-              className="flex items-center gap-3 p-4 rounded-lg border border-purple/25 bg-gradient-to-r from-purple/6 to-purple/2 hover:from-purple/12 hover:to-purple/5 hover:border-purple/35 transition-all cursor-pointer group text-left"
+              className="flex items-center gap-3 p-4 rounded-lg border border-info/25 bg-gradient-to-r from-info/6 to-info/2 hover:from-info/12 hover:to-info/5 hover:border-info/35 transition-all cursor-pointer group text-left"
             >
-              <div className="w-10 h-10 rounded-lg bg-purple/15 flex items-center justify-center group-hover:scale-110 transition-transform flex-shrink-0">
-                <UserPlus size={20} className="text-purple" />
+              <div className="w-10 h-10 rounded-lg bg-info/15 flex items-center justify-center group-hover:scale-110 transition-transform flex-shrink-0">
+                <UserPlus size={20} className="text-info" />
               </div>
               <div className="min-w-0">
                 <div className="text-sm font-semibold text-text-0 font-sans">Build a Team</div>
@@ -1558,7 +1507,7 @@ export default function AgentsView() {
           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 && previewState.teamId === activeTeamId ? 'right-32' : 'right-4',
-            'bg-purple/15 text-purple hover:bg-purple/25',
+            'bg-accent/15 text-accent hover:bg-accent/25',
           )}
         >
           <Code2 size={14} /> Workspace