groove-dev 0.26.20 → 0.26.22

package/packages/gui/src/components/ui/thinking-indicator.jsx

@@ -1,89 +1,51 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useState, useEffect } from 'react';
 
-const PHASES = [
-  'Analyzing codebase',
-  'Reading context',
-  'Planning approach',
-  'Reasoning through solution',
-  'Evaluating options',
-];
-
-const DETAILS = [
-  ['Scanning project structure...', 'Checking dependencies...', 'Reviewing recent changes...'],
-  ['Parsing file tree...', 'Loading imports...', 'Indexing symbols...'],
-  ['Mapping task scope...', 'Identifying constraints...', 'Outlining steps...'],
-  ['Tracing logic flow...', 'Considering edge cases...', 'Weighing approaches...'],
-  ['Comparing alternatives...', 'Checking tradeoffs...', 'Selecting best path...'],
+const MESSAGES = [
+  'Reading through the codebase...',
+  'Thinking through your request...',
+  'Planning the approach...',
+  'Running tool calls...',
+  'Working through the problem...',
+  'Reasoning step by step...',
+  'Reviewing context...',
+  'Considering options...',
+  'Analyzing the code...',
+  'Making progress...',
 ];
 
 export function ThinkingIndicator({ agent, className }) {
-  const [phase, setPhase] = useState(0);
-  const [elapsed, setElapsed] = useState(0);
-
-  // Cycle phases every 3.5s
-  useEffect(() => {
-    const t = setInterval(() => setPhase((p) => (p + 1) % PHASES.length), 3500);
-    return () => clearInterval(t);
-  }, []);
+  const [idx, setIdx] = useState(0);
+  const [fade, setFade] = useState(true);
 
-  // Elapsed timer
   useEffect(() => {
-    const t = setInterval(() => setElapsed((e) => e + 1), 1000);
+    const t = setInterval(() => {
+      setFade(false);
+      setTimeout(() => {
+        setIdx((i) => (i + 1) % MESSAGES.length);
+        setFade(true);
+      }, 250);
+    }, 2800);
     return () => clearInterval(t);
   }, []);
 
-  const secs = elapsed < 60 ? `${elapsed}s` : `${Math.floor(elapsed / 60)}m ${elapsed % 60}s`;
-
   return (
-    <div className={`relative rounded-xl bg-surface-2 border border-border-subtle overflow-hidden my-2 ${className || ''}`}>
-      {/* Shimmer sweep */}
-      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-accent/[0.04] to-transparent animate-shimmer pointer-events-none" />
-
-      <div className="relative px-4 py-4 min-h-[90px]">
-        {/* Header: spinning ring + identity + timer */}
-        <div className="flex items-center gap-3 mb-4">
-          {/* Spinning ring — same pattern as BootSequence */}
-          <div className="relative w-8 h-8 flex-shrink-0">
-            <span className="absolute inset-0 rounded-full border-2 border-accent/15 animate-ping" style={{ animationDuration: '2.5s' }} />
-            <span className="absolute inset-0 rounded-full border-2 border-transparent border-t-accent animate-spin" style={{ animationDuration: '1.2s' }} />
-            <span className="absolute inset-[6px] rounded-full bg-accent/10" />
-          </div>
-
-          <div className="flex-1 min-w-0">
-            {agent ? (
-              <>
-                <p className="text-xs font-sans font-semibold text-text-1 truncate leading-tight">{agent.name}</p>
-                <p className="text-[10px] font-mono text-accent leading-tight mt-0.5">thinking</p>
-              </>
-            ) : (
-              <p className="text-xs font-sans font-semibold text-text-1 leading-tight">Thinking</p>
-            )}
-          </div>
-
-          <span className="text-xs font-mono text-text-2 tabular-nums flex-shrink-0">{secs}</span>
-        </div>
-
-        {/* Phase label — re-keyed to replay fade-in on phase change */}
-        <div className="pl-3 border-l-2 border-accent/25 mb-3">
-          <span key={phase} className="block text-[13px] font-sans font-medium text-text-1 animate-phase-in">
-            {PHASES[phase]}
-          </span>
-        </div>
-
-        {/* Staggered detail lines — re-keyed to replay cascade on phase change */}
-        <div className="space-y-1.5 pl-3 border-l border-border-subtle">
-          {DETAILS[phase].map((line, i) => (
-            <div
-              key={`${phase}-${i}`}
-              className="flex items-center gap-2 animate-cascade-in"
-              style={{ animationDelay: `${150 + i * 200}ms` }}
-            >
-              <span className="w-1 h-1 rounded-full bg-accent/35 flex-shrink-0" />
-              <span className="text-[11px] font-mono text-text-3">{line}</span>
-            </div>
-          ))}
+    <div className={`${className || ''}`}>
+      <div className="flex items-center gap-2 mb-1">
+        <span className="text-2xs font-semibold text-text-1 font-sans">{agent?.name || 'Agent'}</span>
+        <span className="text-2xs text-accent font-mono">thinking</span>
+      </div>
+      <div className="border-l border-accent/40 pl-3.5 py-1 flex items-center gap-2.5">
+        {/* Spinning ring */}
+        <div className="relative w-3.5 h-3.5 flex-shrink-0">
+          <span className="absolute inset-0 rounded-full border border-transparent border-t-accent animate-spin" style={{ animationDuration: '0.9s' }} />
         </div>
+        <span
+          className="text-[12px] font-sans text-text-3 transition-opacity duration-[250ms]"
+          style={{ opacity: fade ? 1 : 0 }}
+        >
+          {MESSAGES[idx]}
+        </span>
       </div>
     </div>
   );

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

@@ -136,15 +136,6 @@ export const useGrooveStore = create((set, get) => ({
         case 'agent:output': {
           const { agentId, data } = msg;
 
-          // Clear thinking indicator when agent responds
-          if (get().thinkingAgents.has(agentId)) {
-            set((s) => {
-              const next = new Set(s.thinkingAgents);
-              next.delete(agentId);
-              return { thinkingAgents: next };
-            });
-          }
-
           // Separate text content from tool calls
           let chatText = '';
           let activityText = '';
@@ -177,6 +168,15 @@ export const useGrooveStore = create((set, get) => ({
             (data.type === 'activity' && typeof data.data === 'string')
           );
           if (showAsChat) {
+            // Clear thinking indicator only when actual text renders as a chat bubble
+            if (get().thinkingAgents.has(agentId)) {
+              set((s) => {
+                const next = new Set(s.thinkingAgents);
+                next.delete(agentId);
+                return { thinkingAgents: next };
+              });
+            }
+
             const trimmed = chatText.trim();
             const history = { ...get().chatHistory };
             if (!history[agentId]) history[agentId] = [];
@@ -516,21 +516,46 @@ export const useGrooveStore = create((set, get) => ({
   async checkRecommendedTeam() {
     try {
       const data = await api.get('/recommended-team');
-      if (data && data.agents?.length) {
-        set({ recommendedTeam: data });
-      } else {
+      if (!data || !data.agents?.length) {
         set({ recommendedTeam: null });
+        return;
       }
+
+      // Check if all recommended roles already exist in the planner's team.
+      // If so, auto-delegate instead of showing the "Launch Team" modal.
+      const planners = get().agents.filter((a) => a.role === 'planner');
+      const planner = planners.sort((a, b) => (b.lastActivity || '').localeCompare(a.lastActivity || ''))[0];
+      const teamId = planner?.teamId;
+
+      if (teamId) {
+        const teamAgents = get().agents.filter((a) => a.teamId === teamId && a.role !== 'planner');
+        const phase1Roles = data.agents.filter((a) => !a.phase || a.phase === 1).map((a) => a.role);
+        const allExist = phase1Roles.every((role) => teamAgents.some((a) => a.role === role));
+
+        if (allExist && phase1Roles.length > 0) {
+          // Auto-delegate — all agents already exist in the team
+          set({ recommendedTeam: null });
+          const result = await api.post('/recommended-team/launch');
+          const names = result.agents?.map((a) => a.name).join(', ') || '';
+          get().addToast('success', 'Planner delegated work', names ? `→ ${names}` : undefined);
+          api.post('/cleanup').catch(() => {});
+          return;
+        }
+      }
+
+      // New agents needed — show the modal for approval
+      set({ recommendedTeam: data });
     } catch {
       set({ recommendedTeam: null });
     }
   },
 
-  async launchRecommendedTeam() {
+  async launchRecommendedTeam(modifiedAgents) {
     try {
       set({ recommendedTeam: null }); // Dismiss modal immediately
       get().addToast('info', 'Launching team...');
-      const result = await api.post('/recommended-team/launch');
+      const body = modifiedAgents ? { agents: modifiedAgents } : undefined;
+      const result = await api.post('/recommended-team/launch', body);
       const sub = [
         result.phase2Pending ? `${result.phase2Pending} QC queued` : '',
         result.projectDir ? `→ ${result.projectDir}/` : '',

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

@@ -474,11 +474,17 @@ function EmptyState({ onPlanner, onSpawn }) {
 
 const ROLE_ICONS = { backend: Server, frontend: Monitor, fullstack: Code2, testing: TestTube, security: Shield };
 
+const NAME_RE = /^[a-zA-Z0-9_-]{1,64}$/;
+
+function sanitizeName(raw) {
+  return raw.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9_-]/g, '').slice(0, 64);
+}
+
 function RecommendedTeamCard() {
   const recommendedTeam = useGrooveStore((s) => s.recommendedTeam);
   const launchRecommendedTeam = useGrooveStore((s) => s.launchRecommendedTeam);
-  const checkRecommendedTeam = useGrooveStore((s) => s.checkRecommendedTeam);
   const [launching, setLaunching] = useState(false);
+  const [editedAgents, setEditedAgents] = useState(null);
 
   if (!recommendedTeam?.agents?.length) return null;
 
@@ -486,10 +492,23 @@ function RecommendedTeamCard() {
   const phase1 = agents.filter((a) => !a.phase || a.phase === 1);
   const phase2 = agents.filter((a) => a.phase === 2);
 
+  // Initialize edits lazily so we get fresh data if recommendedTeam changes
+  const agentEdits = editedAgents ?? phase1.map((a) => ({ ...a, name: a.name || '' }));
+
+  function handleNameChange(i, raw) {
+    const next = agentEdits.map((a, idx) => idx === i ? { ...a, name: sanitizeName(raw) } : a);
+    setEditedAgents(next);
+  }
+
   async function handleLaunch() {
     setLaunching(true);
     try {
-      await launchRecommendedTeam();
+      // Merge edited phase1 names back with phase2 agents
+      const modified = [
+        ...agentEdits,
+        ...phase2,
+      ];
+      await launchRecommendedTeam(modified);
     } catch { /* toast handles */ }
     setLaunching(false);
   }
@@ -507,26 +526,38 @@ function RecommendedTeamCard() {
           <button onClick={handleDismiss} className="text-text-4 hover:text-text-1 cursor-pointer"><X size={14} /></button>
         </div>
 
-        <div className="px-4 py-3 space-y-2">
-          {/* Phase 1 agents */}
-          <div className="flex flex-wrap gap-2">
-            {phase1.map((a, i) => {
-              const Icon = ROLE_ICONS[a.role] || Code2;
-              return (
-                <div key={i} className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md bg-surface-4 border border-border-subtle">
-                  <Icon size={12} className="text-text-2" />
-                  <span className="text-xs font-semibold text-text-0 font-sans capitalize">{a.name || a.role}</span>
-                  {a.scope?.length > 0 && (
-                    <span className="text-2xs text-text-4 font-mono">{a.scope[0]}{a.scope.length > 1 ? ` +${a.scope.length - 1}` : ''}</span>
+        <div className="px-4 py-3 space-y-1.5">
+          {/* Phase 1 agents — editable rows */}
+          {agentEdits.map((a, i) => {
+            const Icon = ROLE_ICONS[a.role] || Code2;
+            const nameValid = !a.name || NAME_RE.test(a.name);
+            return (
+              <div key={i} className="flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-surface-4 border border-border-subtle">
+                <Icon size={12} className="text-text-2 shrink-0" />
+                <input
+                  type="text"
+                  value={a.name}
+                  onChange={(e) => handleNameChange(i, e.target.value)}
+                  placeholder={a.role}
+                  className={cn(
+                    'flex-1 min-w-0 bg-transparent text-xs font-mono text-text-0 outline-none placeholder:text-text-4',
+                    !nameValid && 'text-red-400',
                   )}
-                </div>
-              );
-            })}
-          </div>
+                  maxLength={64}
+                  spellCheck={false}
+                />
+                {a.scope?.length > 0 && (
+                  <span className="text-2xs text-text-4 font-mono shrink-0 truncate max-w-[120px]">
+                    {a.scope[0]}{a.scope.length > 1 ? ` +${a.scope.length - 1}` : ''}
+                  </span>
+                )}
+              </div>
+            );
+          })}
 
           {/* Project dir indicator */}
           {recommendedTeam.projectDir && (
-            <div className="flex items-center gap-1.5 text-2xs text-text-2 font-mono">
+            <div className="flex items-center gap-1.5 text-2xs text-text-2 font-mono pt-0.5">
               <span className="text-text-4">Project:</span>
               <span className="text-accent">{recommendedTeam.projectDir}/</span>
             </div>