groove-dev 0.27.26 → 0.27.28

package/packages/gui/dist/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <title>Groove GUI</title>
-    <script type="module" crossorigin src="/assets/index-DieCV-v1.js"></script>
+    <script type="module" crossorigin src="/assets/index-Ch1N9G4Z.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/vendor-C0HXlhrU.js">
     <link rel="modulepreload" crossorigin href="/assets/reactflow-BQPfi37R.js">
     <link rel="modulepreload" crossorigin href="/assets/codemirror-BBL3i_JW.js">

package/packages/gui/package.json

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

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

@@ -6,6 +6,7 @@ import {
   AlertCircle, Layers, Activity,
   RotateCw, Skull, Copy, Trash2,
   Sparkles, Calendar, Plug, MessageCircle, Save, GitBranch,
+  ExternalLink, Loader2,
 } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { Badge } from '../ui/badge';
@@ -15,6 +16,7 @@ import { api } from '../../lib/api';
 import { cn } from '../../lib/cn';
 import { timeAgo } from '../../lib/format';
 import { OllamaSetup } from './ollama-setup';
+import { INTEGRATION_LOGOS } from '../../lib/integration-logos';
 
 /* ── Segmented Control ─────────────────────────────────────── */
 
@@ -164,13 +166,21 @@ export function AgentConfig({ agent }) {
   const [personalityLoaded, setPersonalityLoaded] = useState(false);
   const [personalities, setPersonalities] = useState([]);
   const [savingPersonality, setSavingPersonality] = useState(false);
+  const [installedIntegrations, setInstalledIntegrations] = useState([]);
+  const [claudeAuth, setClaudeAuth] = useState(null);
+  const [claudeAuthLoading, setClaudeAuthLoading] = useState(false);
+  const [claudeAuthPolling, setClaudeAuthPolling] = useState(false);
 
   const isAlive = agent.status === 'running' || agent.status === 'starting';
 
   useEffect(() => {
     loadProviders();
     api.get('/skills/installed').then((data) => setInstalledSkills(Array.isArray(data) ? data : data.skills || [])).catch(() => {});
+    api.get('/integrations/installed').then((data) => setInstalledIntegrations(Array.isArray(data) ? data : [])).catch(() => {});
     api.get('/repos/imported').then((data) => setImportedRepos((Array.isArray(data) ? data : []).filter((r) => r.status === 'active'))).catch(() => {});
+    if (agent.provider === 'claude-code') {
+      api.get('/providers/claude-code/auth').then((data) => setClaudeAuth(data)).catch(() => setClaudeAuth(null));
+    }
     function onChanged() { loadProviders(); }
     window.addEventListener('groove:providers-changed', onChanged);
     return () => window.removeEventListener('groove:providers-changed', onChanged);
@@ -206,6 +216,23 @@ export function AgentConfig({ agent }) {
     }).catch(() => {});
   }, [agent.id, agent.name]);
 
+  useEffect(() => {
+    if (!claudeAuthPolling) return;
+    const start = Date.now();
+    const interval = setInterval(() => {
+      if (Date.now() - start > 300000) { setClaudeAuthPolling(false); clearInterval(interval); return; }
+      api.get('/providers/claude-code/auth').then((data) => {
+        if (data?.authenticated) {
+          setClaudeAuth(data);
+          setClaudeAuthPolling(false);
+          setClaudeAuthLoading(false);
+          clearInterval(interval);
+        }
+      }).catch(() => {});
+    }, 2000);
+    return () => clearInterval(interval);
+  }, [claudeAuthPolling]);
+
   const currentProvider = providers.find((p) => p.id === agent.provider);
 
   async function handleModelSwap(providerId, modelId) {
@@ -276,6 +303,16 @@ export function AgentConfig({ agent }) {
     }
   }
 
+  async function handleClaudeLogin() {
+    setClaudeAuthLoading(true);
+    try {
+      await api.post('/providers/claude-code/login');
+      setClaudeAuthPolling(true);
+    } catch {
+      setClaudeAuthLoading(false);
+    }
+  }
+
   const spawned = agent.spawnedAt || agent.createdAt;
 
   return (
@@ -430,6 +467,33 @@ export function AgentConfig({ agent }) {
         )}
       </ConfigSection>
 
+      {/* ── Claude Code Auth ──────────────────────────────── */}
+      {agent.provider === 'claude-code' && claudeAuth && !claudeAuth.authenticated && (
+        <div className="rounded-lg border border-warning/30 bg-warning/5 px-4 py-3 space-y-2">
+          <div className="flex items-center gap-2">
+            <AlertCircle size={13} className="text-warning flex-shrink-0" />
+            <span className="text-xs font-semibold text-text-0 font-sans">Claude Code is not signed in</span>
+          </div>
+          {claudeAuthLoading ? (
+            <div className="flex items-center gap-2 text-2xs text-text-2 font-sans">
+              <Loader2 size={12} className="animate-spin text-accent" />
+              Waiting for browser authentication...
+            </div>
+          ) : (
+            <Button variant="primary" size="sm" onClick={handleClaudeLogin} className="text-2xs gap-1.5">
+              <ExternalLink size={10} />
+              Sign in to Claude
+            </Button>
+          )}
+        </div>
+      )}
+      {agent.provider === 'claude-code' && claudeAuth?.authenticated && (
+        <div className="flex items-center gap-2 text-2xs text-text-2 font-sans">
+          <div className="w-2 h-2 rounded-full bg-success flex-shrink-0" />
+          Signed in as {claudeAuth.email || 'Claude user'} ({claudeAuth.subscriptionType || 'subscription'})
+        </div>
+      )}
+
       {/* ── Working Directory ──────────────────────────────── */}
       <ConfigSection label="Working Directory" icon={FolderOpen} description="The root directory this agent operates in.">
         <div className="flex gap-2">
@@ -461,27 +525,6 @@ export function AgentConfig({ agent }) {
         />
       </ConfigSection>
 
-      {/* ── Integration Approvals ────────────────────────────── */}
-      {agent.integrations?.length > 0 && (
-        <ConfigSection label="Integration Approvals" icon={Plug} description="Manual = you approve dangerous actions. Auto = agent acts freely.">
-          <SegmentedControl
-            options={[
-              { value: 'manual', label: 'Manual' },
-              { value: 'auto', label: 'Auto' },
-            ]}
-            value={agent.integrationApproval || 'manual'}
-            onChange={async (val) => {
-              try {
-                await api.patch(`/agents/${agent.id}`, { integrationApproval: val });
-                addToast('success', `Integration approvals → ${val === 'auto' ? 'Auto' : 'Manual'}`);
-              } catch (err) {
-                addToast('error', 'Update failed', err.message);
-              }
-            }}
-          />
-        </ConfigSection>
-      )}
-
       {/* ── Model Routing ────────────────────────────────────── */}
       <ConfigSection label="Model Routing" icon={Activity} description="How Groove selects models for this agent's tasks.">
         <SegmentedControl
@@ -637,6 +680,89 @@ export function AgentConfig({ agent }) {
         </div>
       </ConfigSection>
 
+      {/* ── Integrations ─────────────────────────────────── */}
+      <ConfigSection label="Integrations" icon={Plug} description="Attach MCP integrations for external services.">
+        <div className="flex flex-wrap gap-1.5">
+          {(agent.integrations || []).map((integrationId) => {
+            const logoUrl = INTEGRATION_LOGOS[integrationId];
+            const integration = installedIntegrations.find((i) => i.id === integrationId);
+            return (
+              <Badge key={integrationId} variant="accent" className="font-mono text-xs gap-1.5 px-2.5 py-1">
+                {logoUrl ? (
+                  <img src={logoUrl} alt="" className="w-2.5 h-2.5" />
+                ) : (
+                  <Plug size={9} />
+                )}
+                {integration?.name || integrationId}
+                <button
+                  onClick={async () => {
+                    try {
+                      await api.delete(`/agents/${agent.id}/integrations/${integrationId}`);
+                      addToast('success', `Detached ${integration?.name || integrationId}`);
+                    } catch (err) { addToast('error', 'Detach failed', err.message); }
+                  }}
+                  className="hover:text-danger cursor-pointer"
+                >
+                  <X size={10} />
+                </button>
+              </Badge>
+            );
+          })}
+          {installedIntegrations.filter((i) => i.configured !== false && !(agent.integrations || []).includes(i.id)).length > 0 && (
+            <div className="relative group">
+              <button className="w-7 h-7 flex items-center justify-center rounded-md bg-surface-4 border border-border-subtle text-text-3 hover:text-accent cursor-pointer transition-colors">
+                <Plus size={12} />
+              </button>
+              <div className="absolute top-full left-0 mt-1 z-20 hidden group-hover:block bg-surface-2 border border-border-subtle rounded-lg shadow-xl py-1 min-w-[200px]">
+                {installedIntegrations.filter((i) => i.configured !== false && !(agent.integrations || []).includes(i.id)).map((integration) => {
+                  const logoUrl = INTEGRATION_LOGOS[integration.id];
+                  return (
+                    <button
+                      key={integration.id}
+                      onClick={async () => {
+                        try {
+                          await api.post(`/agents/${agent.id}/integrations/${integration.id}`);
+                          addToast('success', `Attached ${integration.name || integration.id}`);
+                        } catch (err) { addToast('error', 'Attach failed', err.message); }
+                      }}
+                      className="w-full flex items-center gap-2 text-left px-3 py-1.5 text-xs font-sans text-text-1 hover:bg-surface-4 cursor-pointer transition-colors"
+                    >
+                      {logoUrl ? (
+                        <img src={logoUrl} alt="" className="w-3.5 h-3.5 flex-shrink-0" />
+                      ) : (
+                        <Plug size={12} className="text-text-3 flex-shrink-0" />
+                      )}
+                      {integration.name || integration.id}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+          {(agent.integrations || []).length === 0 && installedIntegrations.length === 0 && (
+            <span className="text-2xs text-text-4 font-sans">No integrations installed — browse the Marketplace</span>
+          )}
+        </div>
+        {(agent.integrations || []).length > 0 && (
+          <div className="mt-3">
+            <label className="text-2xs font-medium text-text-3 font-sans block mb-1.5">Integration Approvals</label>
+            <SegmentedControl
+              options={[
+                { value: 'auto', label: 'Auto' },
+                { value: 'manual', label: 'Manual' },
+              ]}
+              value={agent.integrationApproval || 'manual'}
+              onChange={async (val) => {
+                try {
+                  await api.patch(`/agents/${agent.id}`, { integrationApproval: val });
+                  addToast('success', `Integration approvals → ${val === 'auto' ? 'Auto' : 'Manual'}`);
+                } catch (err) { addToast('error', 'Update failed', err.message); }
+              }}
+            />
+          </div>
+        )}
+      </ConfigSection>
+
       {/* ── Repos ─────────────────────────────────────────── */}
       {importedRepos.length > 0 && (
         <ConfigSection label="Repos" icon={GitBranch} description="Attach imported repos so this agent knows where they are.">

package/packages/gui/src/components/agents/spawn-wizard.jsx

@@ -12,45 +12,11 @@ import {
   Shield, Database, Megaphone, Calculator, UserCheck,
   Headphones, BarChart3, Rocket, ChevronDown, Pen, Presentation,
   Sparkles, X, Search, AlertTriangle, Plug, MessageCircle, GitBranch, Globe,
+  Check, ExternalLink, Loader2,
 } from 'lucide-react';
 import { api } from '../../lib/api';
 import { Dialog, DialogContent } from '../ui/dialog';
-
-const INTEGRATION_LOGOS = {
-  'google-workspace': 'https://cdn.simpleicons.org/google/white',
-  github:      'https://cdn.simpleicons.org/github/white',
-  stripe:      'https://cdn.simpleicons.org/stripe/635BFF',
-  gmail:       'https://cdn.simpleicons.org/gmail/EA4335',
-  'google-calendar': 'https://cdn.simpleicons.org/googlecalendar/4285F4',
-  'google-drive':    'https://cdn.simpleicons.org/googledrive/4285F4',
-  'google-docs':     'https://cdn.simpleicons.org/googledocs/4285F4',
-  'google-sheets':   'https://cdn.simpleicons.org/googlesheets/34A853',
-  'google-slides':   'https://cdn.simpleicons.org/googleslides/FBBC04',
-  'google-maps':     'https://cdn.simpleicons.org/googlemaps/4285F4',
-  postgres:    'https://cdn.simpleicons.org/postgresql/4169E1',
-  notion:      'https://cdn.simpleicons.org/notion/white',
-  linear:      'https://cdn.simpleicons.org/linear/5E6AD2',
-  'brave-search': 'https://cdn.simpleicons.org/brave/FB542B',
-  'home-assistant': 'https://cdn.simpleicons.org/homeassistant/18BCF2',
-  sentry:      'https://cdn.simpleicons.org/sentry/362D59',
-  elevenlabs:  'https://cdn.simpleicons.org/elevenlabs/white',
-  hubspot:     'https://cdn.simpleicons.org/hubspot/FF7A59',
-  jira:        'https://cdn.simpleicons.org/jira/0052CC',
-  sendgrid:    'https://cdn.simpleicons.org/sendgrid/1A82E2',
-  resend:      'https://cdn.simpleicons.org/resend/white',
-  replicate:   'https://cdn.simpleicons.org/replicate/white',
-  vercel:      'https://cdn.simpleicons.org/vercel/white',
-  supabase:    'https://cdn.simpleicons.org/supabase/3FCF8E',
-  mixpanel:    'https://cdn.simpleicons.org/mixpanel/7856FF',
-  datadog:     'https://cdn.simpleicons.org/datadog/632CA6',
-  airtable:    'https://cdn.simpleicons.org/airtable/18BFFF',
-  zendesk:     'https://cdn.simpleicons.org/zendesk/03363D',
-  intercom:    'https://cdn.simpleicons.org/intercom/6AFDEF',
-  twilio:      'https://cdn.simpleicons.org/twilio/F22F46',
-  telnyx:      'https://cdn.simpleicons.org/telnyx/00C08B',
-  aws:         'https://cdn.simpleicons.org/amazonaws/FF9900',
-  plaid:       'https://cdn.simpleicons.org/plaid/white',
-};
+import { INTEGRATION_LOGOS } from '../../lib/integration-logos';
 
 const ROLE_PRESETS = [
   { id: 'chat',      label: 'Chat',       desc: 'Companion, assistant, conversation', icon: MessageCircle, tier: 'Medium' },
@@ -114,14 +80,23 @@ export function SpawnWizard() {
   const [showAdvanced, setShowAdvanced] = useState(false);
   const [spawning, setSpawning] = useState(false);
   const [selectedPeerId, setSelectedPeerId] = useState('');
+  const [recommendations, setRecommendations] = useState([]);
+  const [preflightDialog, setPreflightDialog] = useState(null);
+  const [claudeAuth, setClaudeAuth] = useState(null);
+  const [claudeAuthLoading, setClaudeAuthLoading] = useState(false);
+  const [claudeAuthPolling, setClaudeAuthPolling] = useState(false);
   const federation = useGrooveStore((s) => s.federation);
 
+  const selectedRole = role || customRole;
+  const selectedProvider = providers.find((p) => p.id === provider);
+  const availableModels = selectedProvider?.models || [];
+  const installedProviders = providers.filter((p) => p.installed);
+
   useEffect(() => {
     if (open) {
       fetchProviders().then((data) => {
         const list = Array.isArray(data) ? data : data.providers || [];
         setProviders(list);
-        // Auto-select first installed provider
         const installed = list.filter((p) => p.installed);
         if (installed.length > 0 && !provider) {
           const priority = ['claude-code', 'gemini', 'codex', 'ollama'];
@@ -149,16 +124,53 @@ export function SpawnWizard() {
       setSelectedPersonality('');
       setSelectedPeerId('');
       setShowAdvanced(false);
+      setRecommendations([]);
+      setPreflightDialog(null);
+      setClaudeAuth(null);
+      setClaudeAuthLoading(false);
+      setClaudeAuthPolling(false);
     }
   }, [open, fetchProviders]);
 
-  const selectedRole = role || customRole;
-  const selectedProvider = providers.find((p) => p.id === provider);
-  const availableModels = selectedProvider?.models || [];
-  const installedProviders = providers.filter((p) => p.installed);
+  useEffect(() => {
+    if (!selectedRole || !open) { setRecommendations([]); return; }
+    api.get(`/roles/integrations?role=${encodeURIComponent(selectedRole)}`).then((data) => {
+      const recs = Array.isArray(data) ? data : data?.recommendations || [];
+      setRecommendations(recs);
+      const autoSelect = recs
+        .filter((r) => r.installed && r.configured && r.authenticated)
+        .map((r) => r.id);
+      if (autoSelect.length > 0) {
+        setSelectedIntegrations((prev) => [...new Set([...prev, ...autoSelect])]);
+      }
+    }).catch(() => setRecommendations([]));
+  }, [selectedRole, open]);
 
-  async function handleSpawn() {
-    if (!selectedRole) return;
+  useEffect(() => {
+    if (!open || provider !== 'claude-code') { setClaudeAuth(null); return; }
+    api.get('/providers/claude-code/auth').then((data) => {
+      setClaudeAuth(data);
+    }).catch(() => setClaudeAuth(null));
+  }, [open, provider]);
+
+  useEffect(() => {
+    if (!claudeAuthPolling) return;
+    const start = Date.now();
+    const interval = setInterval(() => {
+      if (Date.now() - start > 300000) { setClaudeAuthPolling(false); clearInterval(interval); return; }
+      api.get('/providers/claude-code/auth').then((data) => {
+        if (data?.authenticated) {
+          setClaudeAuth(data);
+          setClaudeAuthPolling(false);
+          setClaudeAuthLoading(false);
+          clearInterval(interval);
+        }
+      }).catch(() => {});
+    }, 2000);
+    return () => clearInterval(interval);
+  }, [claudeAuthPolling]);
+
+  async function runSpawn() {
     setSpawning(true);
     try {
       const config = {
@@ -180,6 +192,33 @@ export function SpawnWizard() {
     setSpawning(false);
   }
 
+  async function handleSpawn() {
+    if (!selectedRole) return;
+    try {
+      const preflight = await api.post('/agents/preflight', {
+        role: selectedRole,
+        integrations: selectedIntegrations,
+      });
+      if (preflight?.issues?.length > 0) {
+        setPreflightDialog(preflight.issues);
+        return;
+      }
+    } catch { /* preflight endpoint may not exist yet — proceed */ }
+    runSpawn();
+  }
+
+  async function handleClaudeLogin() {
+    setClaudeAuthLoading(true);
+    try {
+      await api.post('/providers/claude-code/login');
+      setClaudeAuthPolling(true);
+    } catch {
+      setClaudeAuthLoading(false);
+    }
+  }
+
+  const claudeNotAuthed = provider === 'claude-code' && claudeAuth && !claudeAuth.authenticated;
+
   return (
     <Sheet open={open} onOpenChange={(o) => { if (!o) closeDetail(); }}>
       <SheetContent title="Spawn Agent" width={480}>
@@ -237,6 +276,77 @@ export function SpawnWizard() {
               </div>
             </div>
 
+            {/* Recommended Integrations */}
+            {selectedRole && recommendations.length > 0 && (
+              <div>
+                <label className="text-xs font-semibold text-text-2 font-sans uppercase tracking-wider block mb-2">
+                  Recommended Integrations
+                </label>
+                <div className="space-y-1.5">
+                  {recommendations.map((rec) => {
+                    const logoUrl = INTEGRATION_LOGOS[rec.id];
+                    if (rec.installed && rec.configured && rec.authenticated) {
+                      return (
+                        <div key={rec.id} className="flex items-center gap-2.5 px-3 py-2 rounded-md bg-success/5 border border-success/20">
+                          <Check size={13} className="text-success flex-shrink-0" />
+                          {logoUrl ? (
+                            <img src={logoUrl} alt="" className="w-3.5 h-3.5 flex-shrink-0" />
+                          ) : (
+                            <Plug size={12} className="text-text-3 flex-shrink-0" />
+                          )}
+                          <span className="text-xs font-semibold text-text-0 font-sans">{rec.name || rec.id}</span>
+                          <Badge variant="success" className="text-2xs ml-auto">Ready</Badge>
+                        </div>
+                      );
+                    }
+                    if (rec.installed) {
+                      return (
+                        <div key={rec.id} className="flex items-center gap-2.5 px-3 py-2 rounded-md bg-warning/5 border border-warning/20">
+                          <AlertTriangle size={13} className="text-warning flex-shrink-0" />
+                          {logoUrl ? (
+                            <img src={logoUrl} alt="" className="w-3.5 h-3.5 flex-shrink-0" />
+                          ) : (
+                            <Plug size={12} className="text-text-3 flex-shrink-0" />
+                          )}
+                          <span className="text-xs font-semibold text-text-0 font-sans">{rec.name || rec.id}</span>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="ml-auto text-2xs text-warning h-6 px-2"
+                            onClick={() => {
+                              closeDetail();
+                              useGrooveStore.getState().setActiveView('marketplace');
+                            }}
+                          >
+                            Configure
+                          </Button>
+                        </div>
+                      );
+                    }
+                    return (
+                      <div key={rec.id} className="flex items-center gap-2.5 px-3 py-2 rounded-md bg-surface-1 border border-border-subtle">
+                        {logoUrl ? (
+                          <img src={logoUrl} alt="" className="w-3.5 h-3.5 flex-shrink-0 opacity-40" />
+                        ) : (
+                          <Plug size={12} className="text-text-4 flex-shrink-0" />
+                        )}
+                        <span className="text-xs text-text-3 font-sans">{rec.name || rec.id}</span>
+                        <button
+                          onClick={() => {
+                            closeDetail();
+                            useGrooveStore.getState().setActiveView('marketplace');
+                          }}
+                          className="ml-auto text-2xs text-accent hover:underline font-sans cursor-pointer"
+                        >
+                          Install in Marketplace
+                        </button>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+
             {/* Ambassador server picker */}
             {selectedRole === 'ambassador' && (() => {
               const eligible = federation.whitelist.filter((e) => typeof e === 'object' && (e.status === 'mutual' || e.status === 'connected'));
@@ -340,6 +450,33 @@ export function SpawnWizard() {
                   </div>
                 )}
 
+                {/* Claude Code Auth */}
+                {claudeNotAuthed && (
+                  <div className="rounded-lg border border-warning/30 bg-warning/5 px-4 py-3">
+                    <div className="flex items-center gap-2 mb-2">
+                      <AlertTriangle size={13} className="text-warning flex-shrink-0" />
+                      <span className="text-xs font-semibold text-text-0 font-sans">Claude Code is not signed in</span>
+                    </div>
+                    {claudeAuthLoading ? (
+                      <div className="flex items-center gap-2 text-2xs text-text-2 font-sans">
+                        <Loader2 size={12} className="animate-spin text-accent" />
+                        Waiting for browser authentication...
+                      </div>
+                    ) : (
+                      <Button variant="primary" size="sm" onClick={handleClaudeLogin} className="text-2xs gap-1.5">
+                        <ExternalLink size={10} />
+                        Sign in to Claude
+                      </Button>
+                    )}
+                  </div>
+                )}
+                {provider === 'claude-code' && claudeAuth?.authenticated && (
+                  <div className="flex items-center gap-2 text-2xs text-text-2 font-sans">
+                    <div className="w-2 h-2 rounded-full bg-success flex-shrink-0" />
+                    Signed in as {claudeAuth.email || 'Claude user'} ({claudeAuth.subscriptionType || 'subscription'})
+                  </div>
+                )}
+
                 {/* Skills */}
                 <div className="space-y-1.5">
                   <label className="text-xs font-medium text-text-2 font-sans">Skills</label>
@@ -742,7 +879,7 @@ export function SpawnWizard() {
               variant="primary"
               size="lg"
               onClick={handleSpawn}
-              disabled={!selectedRole || spawning || installedProviders.length === 0}
+              disabled={!selectedRole || spawning || installedProviders.length === 0 || claudeNotAuthed}
               className="w-full"
             >
               {spawning ? 'Spawning...' : 'Spawn Agent'}
@@ -750,6 +887,31 @@ export function SpawnWizard() {
           </div>
         </div>
       </SheetContent>
+
+      {/* Preflight confirmation dialog */}
+      <Dialog open={!!preflightDialog} onOpenChange={(o) => { if (!o) setPreflightDialog(null); }}>
+        <DialogContent title="Integration Warning" className="max-w-sm">
+          <div className="space-y-4 p-4">
+            <div className="space-y-2">
+              {(preflightDialog || []).map((issue, i) => (
+                <div key={i} className="flex items-start gap-2 text-xs text-text-1 font-sans">
+                  <AlertTriangle size={13} className="text-warning flex-shrink-0 mt-0.5" />
+                  <span>{issue.name ? `${issue.name}: ${issue.problem === 'not_installed' ? 'not installed' : issue.problem === 'not_configured' ? 'not configured' : 'not authenticated'}` : issue.message || String(issue)}</span>
+                </div>
+              ))}
+            </div>
+            <p className="text-2xs text-text-3 font-sans">Continue anyway?</p>
+            <div className="flex gap-2">
+              <Button variant="ghost" size="md" onClick={() => setPreflightDialog(null)} className="flex-1">
+                Cancel
+              </Button>
+              <Button variant="warning" size="md" onClick={() => { setPreflightDialog(null); runSpawn(); }} className="flex-1">
+                Spawn Anyway
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
     </Sheet>
   );
 }

package/packages/gui/src/components/marketplace/integration-wizard.jsx

@@ -12,25 +12,7 @@ import {
   Key, Shield, Trash2, ChevronRight, X, Copy, RefreshCw,
 } from 'lucide-react';
 
-// Reuse integration logos from marketplace-card
-const INTEGRATION_LOGOS = {
-  slack:       'https://cdn.simpleicons.org/slack/E01E5A',
-  github:      'https://cdn.simpleicons.org/github/white',
-  stripe:      'https://cdn.simpleicons.org/stripe/635BFF',
-  gmail:       'https://cdn.simpleicons.org/gmail/EA4335',
-  'google-calendar': 'https://cdn.simpleicons.org/googlecalendar/4285F4',
-  'google-drive':    'https://cdn.simpleicons.org/googledrive/4285F4',
-  'google-docs':     'https://cdn.simpleicons.org/googledocs/4285F4',
-  'google-sheets':   'https://cdn.simpleicons.org/googlesheets/34A853',
-  'google-slides':   'https://cdn.simpleicons.org/googleslides/FBBC04',
-  'google-maps':     'https://cdn.simpleicons.org/googlemaps/4285F4',
-  postgres:    'https://cdn.simpleicons.org/postgresql/4169E1',
-  notion:      'https://cdn.simpleicons.org/notion/white',
-  discord:     'https://cdn.simpleicons.org/discord/5865F2',
-  linear:      'https://cdn.simpleicons.org/linear/5E6AD2',
-  'brave-search': 'https://cdn.simpleicons.org/brave/FB542B',
-  'home-assistant': 'https://cdn.simpleicons.org/homeassistant/18BCF2',
-};
+import { INTEGRATION_LOGOS } from '../../lib/integration-logos';
 
 function IntegrationIcon({ item, size = 48 }) {
   const logoUrl = INTEGRATION_LOGOS[item.id];
@@ -272,8 +254,6 @@ function GoogleOAuthSetup({ integrationId, onConfigured }) {
     setSaving(false);
   }
 
-  const redirectUri = 'http://localhost:31415/api/integrations/oauth/callback';
-
   const steps = [
     { text: 'Go to the Google Cloud Console and sign in with your Google account',
       link: { url: 'https://console.cloud.google.com', label: 'Open Google Cloud Console' } },
@@ -283,9 +263,8 @@ function GoogleOAuthSetup({ integrationId, onConfigured }) {
     { text: <>Go to <strong>Credentials</strong> and click <strong>Create Credentials</strong> &rarr; <strong>OAuth client ID</strong></>,
       link: { url: 'https://console.cloud.google.com/apis/credentials', label: 'Open Credentials page' } },
     { text: <>If prompted to configure the consent screen, choose <strong>External</strong>, fill in an app name (e.g. &quot;Groove&quot;), your email, and save. You can skip optional fields.</> },
-    { text: <>For Application type, choose <strong>Web application</strong>. Give it any name.</> },
-    { text: <>Under <strong>Authorized redirect URIs</strong>, click <strong>Add URI</strong> and paste this exact URL:</>,
-      copyable: redirectUri },
+    { text: <>Go to <strong>Audience</strong> and click <strong>Publish App</strong>. Then scroll down to <strong>Test users</strong>, click <strong>Add Users</strong>, enter your Google email address, and save.</> },
+    { text: <>For Application type, choose <strong>Desktop app</strong> (not Web application). Give it any name.</> },
     { text: <>Click <strong>Create</strong>, then copy the <strong>Client ID</strong> and <strong>Client Secret</strong> and paste them below.</> },
   ];
 
@@ -339,6 +318,14 @@ function GoogleOAuthSetup({ integrationId, onConfigured }) {
         </p>
       </div>
 
+      <div className="bg-warning/8 border border-warning/15 rounded-md px-4 py-2.5">
+        <p className="text-2xs text-text-2 font-sans leading-relaxed">
+          <strong className="text-text-1">Google &quot;unverified app&quot; warning</strong> — when signing in, Google may show a warning
+          that the app isn&apos;t verified. This is normal for personal OAuth apps. Click <strong>Advanced</strong>, then <strong>Go
+          to [your app name] (unsafe)</strong> to continue. Your credentials stay local and are never sent to Groove servers.
+        </p>
+      </div>
+
       <div className="h-px bg-border-subtle" />
 
       <div className="space-y-3">