groove-dev 0.27.119 → 0.27.121

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

@@ -62,10 +62,8 @@ function ProviderCard({ provider, onKeyChange }) {
   const [customPathOpen, setCustomPathOpen] = useState(false);
   const [customPath, setCustomPath] = useState('');
   const [savingPath, setSavingPath] = useState(false);
-  const [loginPending, setLoginPending] = useState(false);
   const addToast = useGrooveStore((s) => s.addToast);
   const installProgress = useGrooveStore((s) => s.providerInstallProgress[provider.id]);
-  const loginProvider = useGrooveStore((s) => s.loginProvider);
   const setProviderPath = useGrooveStore((s) => s.setProviderPath);
   const verifyProvider = useGrooveStore((s) => s.verifyProvider);
   const installProvider = useGrooveStore((s) => s.installProvider);
@@ -100,15 +98,6 @@ function ProviderCard({ provider, onKeyChange }) {
     }
   }
 
-  async function handleLogin(body) {
-    try {
-      setLoginPending(true);
-      await loginProvider(provider.id, body);
-    } catch {
-      setLoginPending(false);
-    }
-  }
-
   async function handleSavePath() {
     if (!customPath.trim()) return;
     setSavingPath(true);
@@ -321,15 +310,30 @@ function ProviderCard({ provider, onKeyChange }) {
           {effectivelyInstalled && !isReady && !settingKey && !isInstalling && (
             <div className="flex flex-col gap-3 flex-1">
               {/* ── Claude Code auth ── */}
-              {provider.id === 'claude-code' && !loginPending && (
+              {provider.id === 'claude-code' && (
                 <>
-                  <div className="space-y-1.5">
-                    <p className="text-xs text-text-1 font-sans font-medium">Sign in with your Claude account</p>
-                    <p className="text-2xs text-text-3 font-sans">A browser window will open where you can sign in with your existing Anthropic account or Claude subscription.</p>
+                  <div className="space-y-2">
+                    <p className="text-xs text-text-1 font-sans font-medium">Sign in via terminal</p>
+                    <div className="space-y-1.5">
+                      <div className="flex items-start gap-2">
+                        <span className="text-2xs font-bold text-accent font-mono mt-0.5">1</span>
+                        <p className="text-2xs text-text-2 font-sans flex items-center gap-1">
+                          <Terminal size={10} className="text-text-3 flex-shrink-0" />
+                          Open the Groove terminal below
+                        </p>
+                      </div>
+                      <div className="flex items-start gap-2">
+                        <span className="text-2xs font-bold text-accent font-mono mt-0.5">2</span>
+                        <p className="text-2xs text-text-2 font-sans">
+                          Run: <code className="font-mono text-accent bg-surface-4 px-1.5 py-0.5 rounded text-2xs">claude</code>
+                        </p>
+                      </div>
+                      <div className="flex items-start gap-2">
+                        <span className="text-2xs font-bold text-accent font-mono mt-0.5">3</span>
+                        <p className="text-2xs text-text-2 font-sans">Follow the prompts to sign in with your Anthropic account</p>
+                      </div>
+                    </div>
                   </div>
-                  <Button variant="primary" size="sm" onClick={() => handleLogin()} className="w-full h-9 text-xs gap-1.5">
-                    <ExternalLink size={12} /> Sign In
-                  </Button>
                   <button
                     onClick={() => { setSettingKey(true); setShowKey(false); setKeyInput(''); }}
                     className="text-2xs text-text-4 hover:text-accent cursor-pointer font-sans text-center"
@@ -340,15 +344,36 @@ function ProviderCard({ provider, onKeyChange }) {
               )}
 
               {/* ── Codex auth ── */}
-              {provider.id === 'codex' && !loginPending && (
+              {provider.id === 'codex' && (
                 <>
-                  <div className="space-y-1.5">
-                    <p className="text-xs text-text-1 font-sans font-medium">Sign in with your ChatGPT account</p>
-                    <p className="text-2xs text-text-3 font-sans">A browser window will open where you can sign in with your ChatGPT Plus or Teams subscription.</p>
+                  <div className="space-y-2">
+                    <p className="text-xs text-text-1 font-sans font-medium">Sign in via terminal</p>
+                    <div className="space-y-1.5">
+                      <div className="flex items-start gap-2">
+                        <span className="text-2xs font-bold text-accent font-mono mt-0.5">1</span>
+                        <p className="text-2xs text-text-2 font-sans flex items-center gap-1">
+                          <Terminal size={10} className="text-text-3 flex-shrink-0" />
+                          Open the Groove terminal below
+                        </p>
+                      </div>
+                      <div className="flex items-start gap-2">
+                        <span className="text-2xs font-bold text-accent font-mono mt-0.5">2</span>
+                        <p className="text-2xs text-text-2 font-sans">
+                          Run: <code className="font-mono text-accent bg-surface-4 px-1.5 py-0.5 rounded text-2xs">npm i -g @openai/codex</code> (if not installed)
+                        </p>
+                      </div>
+                      <div className="flex items-start gap-2">
+                        <span className="text-2xs font-bold text-accent font-mono mt-0.5">3</span>
+                        <p className="text-2xs text-text-2 font-sans">
+                          Run: <code className="font-mono text-accent bg-surface-4 px-1.5 py-0.5 rounded text-2xs">codex login</code>
+                        </p>
+                      </div>
+                      <div className="flex items-start gap-2">
+                        <span className="text-2xs font-bold text-accent font-mono mt-0.5">4</span>
+                        <p className="text-2xs text-text-2 font-sans">Follow the prompts to authenticate</p>
+                      </div>
+                    </div>
                   </div>
-                  <Button variant="primary" size="sm" onClick={() => handleLogin({ method: 'chatgpt-plus' })} className="w-full h-9 text-xs gap-1.5">
-                    <ExternalLink size={12} /> Sign In
-                  </Button>
                   <button
                     onClick={() => { setSettingKey(true); setShowKey(false); setKeyInput(''); }}
                     className="text-2xs text-text-4 hover:text-accent cursor-pointer font-sans text-center"
@@ -442,65 +467,6 @@ function ProviderCard({ provider, onKeyChange }) {
                 </>
               )}
 
-              {/* ── Any provider: login pending state ── */}
-              {(provider.id === 'claude-code' || provider.id === 'codex') && loginPending && (
-                <div className="flex flex-col gap-3">
-                  <div className="flex items-center gap-2 p-3 bg-accent/5 border border-accent/15 rounded-md">
-                    <Loader2 size={14} className="text-accent animate-spin" />
-                    <div>
-                      <p className="text-xs text-accent font-sans font-medium">Check your browser</p>
-                      <p className="text-2xs text-text-3 font-sans">Complete the sign-in in the browser window that opened.</p>
-                    </div>
-                  </div>
-                  <Button
-                    variant="primary"
-                    size="sm"
-                    disabled={checking}
-                    onClick={async () => {
-                      if (provider.id === 'codex') {
-                        setChecking(true);
-                        try {
-                          const res = await api.post(`/providers/codex/verify`);
-                          if (res.authenticated) {
-                            setLoginPending(false);
-                            if (onKeyChange) onKeyChange();
-                          } else {
-                            addToast('error', 'Authentication not detected yet. Please complete sign-in in your browser and try again.');
-                          }
-                        } catch {
-                          addToast('error', 'Authentication not detected yet. Please complete sign-in in your browser and try again.');
-                        } finally {
-                          setChecking(false);
-                        }
-                      } else {
-                        setChecking(true);
-                        try {
-                          const res = await api.post(`/providers/claude-code/verify`);
-                          if (res.authenticated) {
-                            setLoginPending(false);
-                            if (onKeyChange) onKeyChange();
-                          } else {
-                            addToast('error', 'Authentication not detected yet. Please complete sign-in in your browser and try again.');
-                          }
-                        } catch {
-                          addToast('error', 'Authentication not detected yet. Please complete sign-in in your browser and try again.');
-                        } finally {
-                          setChecking(false);
-                        }
-                      }
-                    }}
-                    className="w-full h-8 text-xs gap-1.5"
-                  >
-                    {checking ? <Loader2 size={12} className="animate-spin" /> : <Check size={12} />} I've signed in
-                  </Button>
-                  <button
-                    onClick={() => setLoginPending(false)}
-                    className="text-2xs text-text-4 hover:text-text-2 cursor-pointer font-sans text-center"
-                  >
-                    Cancel
-                  </button>
-                </div>
-              )}
             </div>
           )}
 

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

@@ -9,10 +9,11 @@ import { api } from '../lib/api';
 import { useToast } from '../lib/hooks/use-toast';
 import { fmtNum, fmtDollar, timeAgo, fmtUptime } from '../lib/format';
 import { cn } from '../lib/cn';
+import { Dialog, DialogContent } from '../components/ui/dialog';
 import {
   Clock, CheckCircle, XCircle, AlertTriangle, ShieldCheck, ShieldX,
   Users, Folder, Cpu, Trash2, Play, Pause, LayoutDashboard, ListChecks, Calendar,
-  Archive, RotateCcw, ChevronRight,
+  Archive, RotateCcw, ChevronRight, ArrowUpCircle,
 } from 'lucide-react';
 import { TeamRemovalDialog, PurgeConfirmDialog } from '../components/teams/team-removal-dialog';
 
@@ -28,9 +29,11 @@ function TeamsDashboard() {
   const fetchArchivedTeams = useGrooveStore((s) => s.fetchArchivedTeams);
   const restoreTeam = useGrooveStore((s) => s.restoreTeam);
   const purgeTeam = useGrooveStore((s) => s.purgeTeam);
+  const promoteTeam = useGrooveStore((s) => s.promoteTeam);
 
   const [archiveConfirm, setArchiveConfirm] = useState(null);
   const [purgeConfirm, setPurgeConfirm] = useState(null);
+  const [promoteConfirm, setPromoteConfirm] = useState(null);
   const [archivedOpen, setArchivedOpen] = useState(false);
 
   useEffect(() => { fetchArchivedTeams(); }, []);
@@ -84,6 +87,15 @@ function TeamsDashboard() {
                     </div>
                   )}
                 </div>
+                {team.mode !== 'production' && (
+                  <button
+                    onClick={() => setPromoteConfirm(team)}
+                    className="p-1.5 text-text-4 hover:text-success rounded transition-colors cursor-pointer"
+                    title="Promote to production"
+                  >
+                    <ArrowUpCircle size={13} />
+                  </button>
+                )}
                 <button
                   onClick={() => {
                     if (teamAgents.some((a) => a.status === 'running' || a.status === 'starting')) {
@@ -195,10 +207,58 @@ function TeamsDashboard() {
         onOpenChange={(open) => !open && setPurgeConfirm(null)}
         onPurge={purgeTeam}
       />
+
+      <PromoteConfirmDialog
+        team={promoteConfirm}
+        open={!!promoteConfirm}
+        onOpenChange={(open) => !open && setPromoteConfirm(null)}
+        onPromote={promoteTeam}
+      />
     </div>
   );
 }
 
+function PromoteConfirmDialog({ team, open, onOpenChange, onPromote }) {
+  const [promoting, setPromoting] = useState(false);
+
+  useEffect(() => {
+    if (!open) setPromoting(false);
+  }, [open]);
+
+  async function handleConfirm() {
+    setPromoting(true);
+    try {
+      await onPromote(team?.id);
+      onOpenChange(false);
+    } catch {
+      setPromoting(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent title="Promote to Production" description="Promote this team to production mode">
+        <div className="px-5 py-4 space-y-3">
+          <p className="text-sm text-text-1 font-sans">
+            Promote <span className="font-semibold text-text-0">{team?.name}</span> to production?
+          </p>
+          <p className="text-xs text-text-3 font-sans">
+            This will move files from the team directory into the project directory.
+            The team will switch to production mode and files will persist when the team is removed.
+          </p>
+        </div>
+        <div className="px-5 py-3 border-t border-border-subtle flex justify-end gap-2">
+          <Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>Cancel</Button>
+          <Button variant="primary" size="sm" disabled={promoting} onClick={handleConfirm} className="gap-1.5">
+            <ArrowUpCircle size={12} />
+            {promoting ? 'Promoting...' : 'Promote'}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 function Stat({ label, value, color }) {
   return (
     <div className="text-center">