groove-dev 0.27.73 → 0.27.75

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

@@ -14,7 +14,7 @@ import { api } from '../lib/api';
 import { cn } from '../lib/cn';
 import { fmtUptime } from '../lib/format';
 import {
-  Key, Eye, EyeOff, Check, Cpu, Download, Loader2,
+  Key, Eye, EyeOff, Check, Cpu, Download, Loader2, RefreshCw, Terminal, Copy,
   FolderOpen, FolderSearch, Users, Gauge, ChevronRight,
   ShieldCheck, Settings, Lock,
   Newspaper, Radio, Send, MessageSquare, MessageCircle,
@@ -46,6 +46,7 @@ const KEY_PLACEHOLDERS = {
   'claude-code': 'sk-ant-...',
   codex: 'Paste from platform.openai.com',
   gemini: 'Paste from aistudio.google.com',
+  grok: 'xai-...',
 };
 
 function ProviderCard({ provider, onKeyChange }) {
@@ -58,10 +59,14 @@ 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);
+  const [checking, setChecking] = useState(false);
 
   const isLocal = provider.authType === 'local';
   const isSubscription = provider.authType === 'subscription';
@@ -94,8 +99,11 @@ function ProviderCard({ provider, onKeyChange }) {
 
   async function handleLogin(body) {
     try {
+      setLoginPending(true);
       await loginProvider(provider.id, body);
-    } catch { /* handled in store */ }
+    } catch {
+      setLoginPending(false);
+    }
   }
 
   async function handleSavePath() {
@@ -221,73 +229,240 @@ function ProviderCard({ provider, onKeyChange }) {
             </div>
           )}
 
-          {/* Not installed — prominent Install button */}
+          {/* Not installed */}
           {!provider.installed && !isInstalling && !settingKey && (
-            <div className="flex flex-col items-center justify-center flex-1 gap-3 py-2">
-              <p className="text-xs text-text-3 font-sans text-center">
-                {provider.name} is not installed on this machine.
-              </p>
+            <div className="flex flex-col gap-2.5 flex-1">
+              {/* Install error from last attempt */}
+              {installProgress?.error && (
+                <div className="p-2.5 bg-danger/5 border border-danger/15 rounded-md">
+                  <p className="text-2xs text-danger font-sans break-all">{installProgress.error}</p>
+                </div>
+              )}
+
+              {/* Auto-install button */}
               <Button
                 variant="primary"
                 size="sm"
-                onClick={() => openWizard(0)}
-                className="h-8 px-4 text-xs gap-1.5"
+                onClick={() => installProvider(provider.id).catch(() => {})}
+                className="w-full h-8 text-2xs gap-1.5"
               >
-                <Download size={12} /> Install {provider.name}
+                <Download size={11} /> Install {provider.name}
               </Button>
+
+              {/* Manual install command */}
+              {provider.installCommand && (
+                <div className="space-y-1">
+                  <p className="text-2xs text-text-4 font-sans">Or install manually in your terminal:</p>
+                  <div className="flex items-center gap-1">
+                    <code className="flex-1 px-2 py-1.5 bg-surface-0 border border-border-subtle rounded text-2xs font-mono text-text-2 select-all">
+                      {provider.installCommand}
+                    </code>
+                    <button
+                      onClick={() => { navigator.clipboard.writeText(provider.installCommand); addToast('success', 'Copied'); }}
+                      className="p-1.5 text-text-4 hover:text-text-2 cursor-pointer"
+                    >
+                      <Copy size={10} />
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {/* Re-check + custom path */}
+              <div className="flex items-center gap-2 pt-1">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={async () => {
+                    setChecking(true);
+                    try {
+                      await verifyProvider(provider.id);
+                      if (onKeyChange) onKeyChange();
+                    } catch { /* handled in store */ }
+                    setChecking(false);
+                  }}
+                  disabled={checking}
+                  className="h-7 text-2xs gap-1 px-2"
+                >
+                  <RefreshCw size={10} className={checking ? 'animate-spin' : ''} /> Re-check
+                </Button>
+                <button
+                  onClick={() => setCustomPathOpen(!customPathOpen)}
+                  className="text-2xs text-text-4 hover:text-accent cursor-pointer font-sans"
+                >
+                  Set custom path
+                </button>
+              </div>
+
+              {/* Custom path input (shown for not-installed too) */}
+              {customPathOpen && (
+                <div className="space-y-2">
+                  <div className="flex gap-2">
+                    <input
+                      value={customPath}
+                      onChange={(e) => setCustomPath(e.target.value)}
+                      onKeyDown={(e) => e.key === 'Enter' && handleSavePath()}
+                      placeholder={`/path/to/${provider.id}`}
+                      className="flex-1 h-7 px-2 text-2xs bg-surface-0 border border-border-subtle rounded-md text-text-0 font-mono placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent"
+                    />
+                    <Button variant="primary" size="sm" onClick={handleSavePath} disabled={!customPath.trim() || savingPath} className="h-7 text-2xs px-2.5">
+                      {savingPath ? '...' : 'Save'}
+                    </Button>
+                  </div>
+                </div>
+              )}
             </div>
           )}
 
           {/* Installed but needs auth */}
           {provider.installed && !isReady && !settingKey && !isInstalling && (
-            <div className="flex flex-col gap-2.5 flex-1">
-              {isSubscription ? (
+            <div className="flex flex-col gap-3 flex-1">
+              {/* ── Claude Code auth ── */}
+              {provider.id === 'claude-code' && !loginPending && (
                 <>
-                  <Button
-                    variant="primary"
-                    size="sm"
-                    onClick={handleLogin}
-                    className="w-full h-8 text-2xs gap-1.5"
+                  <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>
+                  <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"
                   >
-                    <ExternalLink size={11} /> Sign In with Anthropic
+                    I have an API key instead
+                  </button>
+                </>
+              )}
+
+              {/* ── Codex auth ── */}
+              {provider.id === 'codex' && !loginPending && (
+                <>
+                  <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>
+                  <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
-                    variant="secondary"
-                    size="sm"
+                  <button
                     onClick={() => { setSettingKey(true); setShowKey(false); setKeyInput(''); }}
-                    className="w-full h-8 text-2xs gap-1.5"
+                    className="text-2xs text-text-4 hover:text-accent cursor-pointer font-sans text-center"
                   >
-                    <Key size={11} /> Add API Key Instead
+                    I have an API key instead
+                  </button>
+                </>
+              )}
+
+              {/* ── Gemini auth ── */}
+              {provider.id === 'gemini' && (
+                <>
+                  <div className="space-y-2">
+                    <p className="text-xs text-text-1 font-sans font-medium">Add your Gemini API key</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">
+                          Go to <button onClick={() => window.open('https://aistudio.google.com/apikey', '_blank')} className="text-accent hover:underline cursor-pointer font-sans">aistudio.google.com</button> and sign in with Google
+                        </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">Click "Create API Key" and copy it</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">Paste it below</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="relative">
+                    <input
+                      value={keyInput}
+                      onChange={(e) => setKeyInput(e.target.value)}
+                      onKeyDown={(e) => e.key === 'Enter' && handleSetKey()}
+                      type={showKey ? 'text' : 'password'}
+                      placeholder="AIza..."
+                      className="w-full h-9 px-3 pr-9 text-xs bg-surface-0 border border-border rounded-md text-text-0 font-mono placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent"
+                      autoFocus
+                    />
+                    <button onClick={() => setShowKey(!showKey)} className="absolute right-2.5 top-1/2 -translate-y-1/2 text-text-4 hover:text-text-2 cursor-pointer">
+                      {showKey ? <EyeOff size={12} /> : <Eye size={12} />}
+                    </button>
+                  </div>
+                  <Button variant="primary" size="sm" onClick={handleSetKey} disabled={!keyInput.trim()} className="w-full h-8 text-xs">
+                    Save Key
                   </Button>
                 </>
-              ) : provider.id === 'codex' ? (
+              )}
+
+              {/* ── Grok (xAI) auth ── */}
+              {provider.id === 'grok' && (
                 <>
+                  <div className="space-y-2">
+                    <p className="text-xs text-text-1 font-sans font-medium">Add your xAI API key</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">
+                          Go to <button onClick={() => window.open('https://console.x.ai', '_blank')} className="text-accent hover:underline cursor-pointer font-sans">console.x.ai</button> and sign in
+                        </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">Create an API key and copy it</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">Paste it below</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="relative">
+                    <input
+                      value={keyInput}
+                      onChange={(e) => setKeyInput(e.target.value)}
+                      onKeyDown={(e) => e.key === 'Enter' && handleSetKey()}
+                      type={showKey ? 'text' : 'password'}
+                      placeholder="xai-..."
+                      className="w-full h-9 px-3 pr-9 text-xs bg-surface-0 border border-border rounded-md text-text-0 font-mono placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent"
+                      autoFocus
+                    />
+                    <button onClick={() => setShowKey(!showKey)} className="absolute right-2.5 top-1/2 -translate-y-1/2 text-text-4 hover:text-text-2 cursor-pointer">
+                      {showKey ? <EyeOff size={12} /> : <Eye size={12} />}
+                    </button>
+                  </div>
+                  <Button variant="primary" size="sm" onClick={handleSetKey} disabled={!keyInput.trim()} className="w-full h-8 text-xs">
+                    Save Key
+                  </Button>
+                </>
+              )}
+
+              {/* ── 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"
-                    onClick={() => { setSettingKey(true); setShowKey(false); setKeyInput(''); }}
-                    className="w-full h-8 text-2xs gap-1.5"
+                    onClick={() => { setLoginPending(false); if (onKeyChange) onKeyChange(); }}
+                    className="w-full h-8 text-xs gap-1.5"
                   >
-                    <Key size={11} /> Add API Key
+                    <Check size={12} /> I've signed in
                   </Button>
-                  <Button
-                    variant="secondary"
-                    size="sm"
-                    onClick={() => handleLogin({ method: 'chatgpt-plus' })}
-                    className="w-full h-8 text-2xs gap-1.5"
+                  <button
+                    onClick={() => setLoginPending(false)}
+                    className="text-2xs text-text-4 hover:text-text-2 cursor-pointer font-sans text-center"
                   >
-                    <ExternalLink size={11} /> Sign in with ChatGPT Plus
-                  </Button>
-                </>
-              ) : (
-                <Button
-                  variant="primary"
-                  size="sm"
-                  onClick={() => { setSettingKey(true); setShowKey(false); setKeyInput(''); }}
-                  className="w-full h-8 text-2xs gap-1.5"
-                >
-                  <Key size={11} /> Add API Key
-                </Button>
+                    Cancel
+                  </button>
+                </div>
               )}
             </div>
           )}
@@ -320,6 +495,26 @@ function ProviderCard({ provider, onKeyChange }) {
                 <label className="text-2xs font-semibold text-text-2 font-sans mb-1.5 block">
                   {provider.hasKey ? 'Update API Key' : `${provider.name} API Key`}
                 </label>
+                {!provider.hasKey && provider.id === 'claude-code' && (
+                  <p className="text-2xs text-text-3 font-sans mb-1.5">
+                    Get yours at <button onClick={() => window.open('https://console.anthropic.com/settings/keys', '_blank')} className="text-accent hover:underline cursor-pointer font-sans">console.anthropic.com</button>
+                  </p>
+                )}
+                {!provider.hasKey && provider.id === 'codex' && (
+                  <p className="text-2xs text-text-3 font-sans mb-1.5">
+                    Get yours at <button onClick={() => window.open('https://platform.openai.com/api-keys', '_blank')} className="text-accent hover:underline cursor-pointer font-sans">platform.openai.com</button>
+                  </p>
+                )}
+                {!provider.hasKey && provider.id === 'gemini' && (
+                  <p className="text-2xs text-text-3 font-sans mb-1.5">
+                    Get yours at <button onClick={() => window.open('https://aistudio.google.com/apikey', '_blank')} className="text-accent hover:underline cursor-pointer font-sans">aistudio.google.com</button>
+                  </p>
+                )}
+                {!provider.hasKey && provider.id === 'grok' && (
+                  <p className="text-2xs text-text-3 font-sans mb-1.5">
+                    Get yours at <button onClick={() => window.open('https://console.x.ai', '_blank')} className="text-accent hover:underline cursor-pointer font-sans">console.x.ai</button>
+                  </p>
+                )}
                 <div className="relative">
                   <input
                     value={keyInput}
@@ -1375,85 +1570,45 @@ export default function SettingsView() {
                   </div>
                 </ConfigCard>
 
-                <ConfigCard icon={Gauge} label="Rotation Threshold" description="Context usage that triggers auto-rotation.">
-                  <div className="flex bg-surface-0 rounded-md p-0.5 border border-border-subtle">
-                    {['auto', '50%', '65%', '75%', '85%'].map((opt) => {
-                      const val = opt === 'auto' ? 0 : parseInt(opt, 10) / 100;
-                      const isActive = rotationValue === val;
-                      return (
-                        <button
-                          key={opt}
-                          onClick={() => updateConfig('rotationThreshold', val)}
-                          className={cn(
-                            'flex-1 px-2 py-1.5 text-2xs font-semibold font-sans rounded transition-all cursor-pointer',
-                            isActive ? 'bg-accent/15 text-accent shadow-sm' : 'text-text-3 hover:text-text-1',
-                          )}
-                        >
-                          {opt === 'auto' ? 'Auto' : opt}
-                        </button>
-                      );
-                    })}
-                  </div>
-                </ConfigCard>
-
-                <ConfigCard icon={ShieldCheck} label="QC Threshold" description="Running agents count that triggers auto-QC.">
-                  <div className="flex bg-surface-0 rounded-md p-0.5 border border-border-subtle">
-                    {[2, 3, 4, 6, 8].map((n) => {
-                      const isActive = (config.qcThreshold || 2) === n;
-                      return (
-                        <button
-                          key={n}
-                          onClick={() => updateConfig('qcThreshold', n)}
-                          className={cn(
-                            'flex-1 px-2 py-1.5 text-2xs font-semibold font-sans rounded transition-all cursor-pointer',
-                            isActive ? 'bg-accent/15 text-accent shadow-sm' : 'text-text-3 hover:text-text-1',
-                          )}
-                        >
-                          {n}
-                        </button>
-                      );
-                    })}
-                  </div>
-                </ConfigCard>
-
-                <ConfigCard icon={Users} label="Max Agents" description="Concurrent agent limit. 0 = unlimited.">
-                  <div className="flex bg-surface-0 rounded-md p-0.5 border border-border-subtle">
-                    {[0, 4, 8, 12, 20].map((n) => {
-                      const isActive = (config.maxAgents || 0) === n;
-                      return (
-                        <button
-                          key={n}
-                          onClick={() => updateConfig('maxAgents', n)}
-                          className={cn(
-                            'flex-1 px-2 py-1.5 text-2xs font-semibold font-sans rounded transition-all cursor-pointer',
-                            isActive ? 'bg-accent/15 text-accent shadow-sm' : 'text-text-3 hover:text-text-1',
-                          )}
-                        >
-                          {n === 0 ? '\u221E' : n}
-                        </button>
-                      );
-                    })}
-                  </div>
-                </ConfigCard>
-
-                <ConfigCard icon={Newspaper} label="Journalist Interval" description="Seconds between synthesis cycles.">
-                  <div className="flex bg-surface-0 rounded-md p-0.5 border border-border-subtle">
-                    {[60, 120, 300, 600].map((n) => {
-                      const isActive = (config.journalistInterval || 120) === n;
-                      const label = n < 60 ? `${n}s` : `${n / 60}m`;
-                      return (
-                        <button
-                          key={n}
-                          onClick={() => updateConfig('journalistInterval', n)}
-                          className={cn(
-                            'flex-1 px-2 py-1.5 text-2xs font-semibold font-sans rounded transition-all cursor-pointer',
-                            isActive ? 'bg-accent/15 text-accent shadow-sm' : 'text-text-3 hover:text-text-1',
-                          )}
-                        >
-                          {label}
-                        </button>
-                      );
-                    })}
+                <ConfigCard icon={MessageSquare} label="Default Chat Model" description="Provider and model for new chat conversations.">
+                  <div className="space-y-2">
+                    <select
+                      value={config.defaultChatProvider || config.defaultProvider || 'claude-code'}
+                      onChange={(e) => {
+                        updateConfig('defaultChatProvider', e.target.value);
+                        const prov = providers.find((p) => p.id === e.target.value);
+                        const chatModels = (prov?.models || []).filter((m) => {
+                          const id = (typeof m === 'string' ? m : m.id || '').toLowerCase();
+                          return !id.includes('dall-e') && !id.includes('imagen') && !id.includes('image');
+                        });
+                        if (chatModels.length > 0) {
+                          const first = typeof chatModels[0] === 'string' ? chatModels[0] : chatModels[0].id;
+                          updateConfig('defaultChatModel', first);
+                        }
+                      }}
+                      className="w-full h-8 px-2.5 text-xs bg-surface-0 border border-border-subtle rounded-md text-text-0 font-mono focus:outline-none focus:ring-1 focus:ring-accent cursor-pointer"
+                    >
+                      {visibleProviders.filter((p) => p.installed && (p.authType === 'local' || p.authType === 'subscription' || p.hasKey)).map((p) => (
+                        <option key={p.id} value={p.id}>{p.name}</option>
+                      ))}
+                    </select>
+                    <select
+                      value={config.defaultChatModel || ''}
+                      onChange={(e) => updateConfig('defaultChatModel', e.target.value || null)}
+                      className="w-full h-8 px-2.5 text-xs bg-surface-0 border border-border-subtle rounded-md text-text-0 font-mono focus:outline-none focus:ring-1 focus:ring-accent cursor-pointer"
+                    >
+                      <option value="">Auto (Sonnet)</option>
+                      {(providers.find((p) => p.id === (config.defaultChatProvider || config.defaultProvider || 'claude-code'))?.models || [])
+                        .filter((m) => {
+                          const id = (typeof m === 'string' ? m : m.id || '').toLowerCase();
+                          return !id.includes('dall-e') && !id.includes('imagen') && !id.includes('image');
+                        })
+                        .map((m) => {
+                          const id = typeof m === 'string' ? m : m.id;
+                          const name = typeof m === 'string' ? m : m.name || m.id;
+                          return <option key={id} value={id}>{name}</option>;
+                        })}
+                    </select>
                   </div>
                 </ConfigCard>