groove-dev 0.27.74 → 0.27.75

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

@@ -56,8 +56,13 @@ export const useGrooveStore = create((set, get) => ({
     selectedPeerId: null,
   },
 
+  // ── Preview ───────────────────────────────────────────────
+  previewState: { url: null, teamId: null, kind: null, deviceSize: 'desktop', screenshotMode: false },
+  previewChat: [],
+  previewIterating: false,
+
   // ── Navigation ────────────────────────────────────────────
-  activeView: 'agents',           // 'agents' | 'editor' | 'dashboard' | 'marketplace' | 'teams' | 'settings'
+  activeView: 'agents',           // 'agents' | 'editor' | 'dashboard' | 'marketplace' | 'teams' | 'settings' | 'preview'
   detailPanel: null,              // null | { type: 'agent', agentId } | { type: 'spawn' } | { type: 'journalist' }
   teamDetailPanels: {},            // { [teamId]: detailPanel } — persists panel state per team
   commandPaletteOpen: false,
@@ -455,21 +460,30 @@ export const useGrooveStore = create((set, get) => ({
             'success',
             'Project ready to preview',
             msg.url,
-            { label: 'View Site', url: msg.url },
+            { label: 'Open Preview', onClick: () => get().openPreview(msg.url, msg.teamId, msg.kind) },
             { persistent: true },
           );
           break;
 
-        case 'preview:failed':
-          get().addToast(
-            'warning',
-            'Preview could not launch',
-            msg.reason ? String(msg.reason).slice(0, 200) : 'Unknown error',
-          );
+        case 'preview:failed': {
+          const failKind = msg.kind || '';
+          if (failKind !== 'no_preview' && failKind !== 'cli' && failKind !== 'none') {
+            get().addToast(
+              'warning',
+              'Preview could not launch',
+              msg.reason ? String(msg.reason).slice(0, 200) : 'Unknown error',
+            );
+          }
           break;
+        }
 
-        case 'preview:stopped':
+        case 'preview:stopped': {
+          const ps = get().previewState;
+          if (ps.teamId && ps.teamId === msg.teamId) {
+            set({ previewState: { url: null, teamId: null, kind: null, deviceSize: 'desktop', screenshotMode: false }, previewChat: [], previewIterating: false });
+          }
           break;
+        }
 
         case 'agent:stalled': {
           const name = msg.agentName || msg.agentId;
@@ -899,6 +913,55 @@ export const useGrooveStore = create((set, get) => ({
           break;
         }
 
+        case 'conversation:image': {
+          const { conversationId, prompt, url, b64_json, mimeType, model: imgModel, provider: imgProvider } = msg.data || msg;
+          if (!conversationId) break;
+          const imageUrl = url || (b64_json ? `data:${mimeType || 'image/png'};base64,${b64_json}` : null);
+          set((s) => {
+            const msgs = { ...s.conversationMessages };
+            if (!msgs[conversationId]) msgs[conversationId] = [];
+            const arr = [...msgs[conversationId]];
+            const loadingIdx = arr.findLastIndex((m) => m.type === 'image-loading' && m.prompt === prompt);
+            if (loadingIdx >= 0) {
+              arr[loadingIdx] = { from: 'assistant', type: 'image', imageUrl, prompt, model: imgModel, provider: imgProvider, timestamp: Date.now() };
+            } else {
+              arr.push({ from: 'assistant', type: 'image', imageUrl, prompt, model: imgModel, provider: imgProvider, timestamp: Date.now() });
+            }
+            msgs[conversationId] = arr.slice(-200);
+            persistJSON('groove:conversationMessages', msgs);
+            const isActive = s.streamingConversationId === conversationId;
+            return { conversationMessages: msgs, sendingMessage: isActive ? false : s.sendingMessage, streamingConversationId: isActive ? null : s.streamingConversationId };
+          });
+          break;
+        }
+
+        case 'conversation:image-progress': {
+          const { conversationId, status, prompt: imgPrompt, error: imgError } = msg.data || msg;
+          if (!conversationId) break;
+          if (status === 'generating') {
+            set((s) => {
+              const msgs = { ...s.conversationMessages };
+              if (!msgs[conversationId]) msgs[conversationId] = [];
+              msgs[conversationId] = [...msgs[conversationId], { from: 'assistant', type: 'image-loading', prompt: imgPrompt, timestamp: Date.now() }];
+              return { conversationMessages: msgs, streamingConversationId: conversationId };
+            });
+          } else if (status === 'error') {
+            set((s) => {
+              const msgs = { ...s.conversationMessages };
+              if (!msgs[conversationId]) msgs[conversationId] = [];
+              const arr = [...msgs[conversationId]];
+              const loadingIdx = arr.findLastIndex((m) => m.type === 'image-loading');
+              if (loadingIdx >= 0) arr.splice(loadingIdx, 1);
+              arr.push({ from: 'system', text: `Image generation failed: ${imgError || 'Unknown error'}`, timestamp: Date.now() });
+              msgs[conversationId] = arr;
+              persistJSON('groove:conversationMessages', msgs);
+              const isActive = s.streamingConversationId === conversationId;
+              return { conversationMessages: msgs, sendingMessage: isActive ? false : s.sendingMessage, streamingConversationId: isActive ? null : s.streamingConversationId };
+            });
+          }
+          break;
+        }
+
         case 'conversation:error': {
           const { conversationId, error } = msg.data || msg;
           if (conversationId) {
@@ -1107,6 +1170,50 @@ export const useGrooveStore = create((set, get) => ({
     persistJSON('groove:expandedNodes', expanded);
   },
 
+  // ── Preview ──────────────────────────────────────────────
+
+  openPreview(url, teamId, kind) {
+    set({ previewState: { url, teamId, kind, deviceSize: 'desktop', screenshotMode: false }, previewChat: [], activeView: 'preview' });
+  },
+  closePreview() {
+    const { previewState } = get();
+    if (previewState.teamId) {
+      api.delete(`/preview/${previewState.teamId}`).catch(() => {});
+    }
+    set({ previewState: { url: null, teamId: null, kind: null, deviceSize: 'desktop', screenshotMode: false }, previewChat: [], previewIterating: false, activeView: 'agents' });
+  },
+  setPreviewDevice(size) {
+    set((s) => ({ previewState: { ...s.previewState, deviceSize: size } }));
+  },
+  toggleScreenshotMode() {
+    set((s) => ({ previewState: { ...s.previewState, screenshotMode: !s.previewState.screenshotMode } }));
+  },
+  async iteratePreview(message, screenshotBase64) {
+    const { previewState } = get();
+    if (!previewState.teamId) return;
+
+    const userMsg = { role: 'user', content: message, screenshot: screenshotBase64 || null, timestamp: Date.now() };
+    set((s) => ({ previewChat: [...s.previewChat, userMsg], previewIterating: true }));
+
+    try {
+      const body = { message };
+      if (screenshotBase64) body.screenshot = screenshotBase64;
+      const res = await api.post(`/preview/${previewState.teamId}/iterate`, body);
+      const assistantMsg = { role: 'assistant', content: res.response || res.message || 'Changes routed to planner.', timestamp: Date.now() };
+      set((s) => ({ previewChat: [...s.previewChat, assistantMsg], previewIterating: false }));
+    } catch (err) {
+      const errMsg = { role: 'assistant', content: `Failed to iterate: ${err.message}`, timestamp: Date.now() };
+      set((s) => ({ previewChat: [...s.previewChat, errMsg], previewIterating: false }));
+    }
+  },
+  addPreviewChatMessage(role, content, screenshot) {
+    const msg = { role, content, screenshot: screenshot || null, timestamp: Date.now() };
+    set((s) => ({ previewChat: [...s.previewChat, msg] }));
+  },
+  clearPreviewChat() {
+    set({ previewChat: [] });
+  },
+
   // ── Toasts ────────────────────────────────────────────────
 
   addToast(type, message, detail, action, options = {}) {
@@ -1488,6 +1595,13 @@ export const useGrooveStore = create((set, get) => ({
     get().fetchTreeDir('');
   },
 
+  async removeRecentProject(path) {
+    try {
+      await api.delete('/projects/recent', { path });
+    } catch {}
+    get().fetchProjectDir();
+  },
+
   toggleProjectPicker() {
     set((s) => ({ showProjectPicker: !s.showProjectPicker }));
   },
@@ -1977,6 +2091,32 @@ export const useGrooveStore = create((set, get) => ({
     }
   },
 
+  async sendImageMessage(conversationId, prompt, { model, size, quality } = {}) {
+    const conv = get().conversations.find((c) => c.id === conversationId);
+    if (!conv) return;
+
+    set((s) => {
+      const msgs = { ...s.conversationMessages };
+      if (!msgs[conversationId]) msgs[conversationId] = [];
+      msgs[conversationId] = [...msgs[conversationId], { from: 'user', text: prompt, timestamp: Date.now() }];
+      persistJSON('groove:conversationMessages', msgs);
+      return { conversationMessages: msgs, sendingMessage: true, streamingConversationId: conversationId };
+    });
+
+    try {
+      await api.post(`/conversations/${encodeURIComponent(conversationId)}/generate-image`, { prompt, model, size, quality });
+    } catch (err) {
+      set((s) => {
+        const msgs = { ...s.conversationMessages };
+        if (!msgs[conversationId]) msgs[conversationId] = [];
+        msgs[conversationId] = [...msgs[conversationId], { from: 'system', text: `Image failed: ${err.message}`, timestamp: Date.now() }];
+        persistJSON('groove:conversationMessages', msgs);
+        return { conversationMessages: msgs, sendingMessage: false, streamingConversationId: null };
+      });
+      get().addToast('error', 'Image generation failed', err.message);
+    }
+  },
+
   // ── Editor ────────────────────────────────────────────────
 
   async openFile(path) {

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

@@ -0,0 +1,6 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { PreviewWorkspace } from '../components/preview/preview-workspace';
+
+export default function PreviewView() {
+  return <PreviewWorkspace />;
+}

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

@@ -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,6 +59,7 @@ 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);
@@ -97,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() {
@@ -310,54 +315,154 @@ function ProviderCard({ provider, onKeyChange }) {
 
           {/* 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>
           )}
@@ -390,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}
@@ -1445,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>