groove-dev 0.26.38 → 0.27.0

package/node_modules/@groove-dev/gui/src/components/agents/spawn-wizard.jsx

@@ -11,11 +11,47 @@ import {
   Server, Monitor, Code2, TestTube, Cloud, FileText,
   Shield, Database, Megaphone, Calculator, UserCheck,
   Headphones, BarChart3, Rocket, ChevronDown, Pen, Presentation,
-  Sparkles, X, Search, AlertTriangle,
+  Sparkles, X, Search, AlertTriangle, Plug,
 } 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',
+};
+
 const ROLE_PRESETS = [
   { id: 'planner',   label: 'Planner',    desc: 'Plans the team and tasks',       icon: Rocket,     tier: 'Heavy' },
   { id: 'backend',   label: 'Backend',    desc: 'APIs, services, databases',       icon: Server,     tier: 'Medium' },
@@ -62,6 +98,11 @@ export function SpawnWizard() {
   const [selectedSkills, setSelectedSkills] = useState([]);
   const [skillModalOpen, setSkillModalOpen] = useState(false);
   const [skillSearch, setSkillSearch] = useState('');
+  const [installedIntegrations, setInstalledIntegrations] = useState([]);
+  const [selectedIntegrations, setSelectedIntegrations] = useState([]);
+  const [integrationModalOpen, setIntegrationModalOpen] = useState(false);
+  const [integrationSearch, setIntegrationSearch] = useState('');
+  const [integrationApproval, setIntegrationApproval] = useState('manual');
   const [spawning, setSpawning] = useState(false);
 
   useEffect(() => {
@@ -80,8 +121,13 @@ export function SpawnWizard() {
       api.get('/skills/installed').then((data) => {
         setInstalledSkills(Array.isArray(data) ? data : []);
       }).catch(() => {});
+      api.get('/integrations/installed').then((data) => {
+        setInstalledIntegrations(Array.isArray(data) ? data : []);
+      }).catch(() => {});
       setRole(''); setCustomRole(''); setName(''); setProvider(''); setModel(''); setPrompt('');
       setSelectedSkills([]);
+      setSelectedIntegrations([]);
+      setIntegrationApproval('manual');
     }
   }, [open, fetchProviders]);
 
@@ -101,6 +147,8 @@ export function SpawnWizard() {
         ...(model && { model }),
         ...(prompt && { prompt }),
         ...(selectedSkills.length > 0 && { skills: selectedSkills }),
+        ...(selectedIntegrations.length > 0 && { integrations: selectedIntegrations }),
+        ...(selectedIntegrations.length > 0 && { integrationApproval }),
       };
       await spawnAgent(config);
       closeDetail();
@@ -328,6 +376,169 @@ export function SpawnWizard() {
                   </DialogContent>
                 </Dialog>
 
+                {/* Integrations */}
+                <div className="space-y-1.5">
+                  <label className="text-xs font-medium text-text-2 font-sans">Integrations</label>
+                  <div className="flex flex-wrap items-center gap-1.5">
+                    {selectedIntegrations.map((integrationId) => {
+                      const integration = installedIntegrations.find((i) => i.id === integrationId);
+                      const logoUrl = INTEGRATION_LOGOS[integrationId];
+                      return (
+                        <span
+                          key={integrationId}
+                          className="inline-flex items-center gap-1 px-2 py-1 rounded bg-accent/12 text-accent border border-accent/25 text-2xs font-sans"
+                        >
+                          {logoUrl ? (
+                            <img src={logoUrl} alt="" className="w-2.5 h-2.5" />
+                          ) : (
+                            <Plug size={9} />
+                          )}
+                          {integration?.name || integrationId}
+                          <button
+                            onClick={() => setSelectedIntegrations((prev) => prev.filter((i) => i !== integrationId))}
+                            className="ml-0.5 hover:text-text-0 cursor-pointer"
+                          >
+                            <X size={9} />
+                          </button>
+                        </span>
+                      );
+                    })}
+                    <button
+                      onClick={() => { setIntegrationModalOpen(true); setIntegrationSearch(''); }}
+                      className={cn(
+                        'inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-2xs font-sans transition-colors cursor-pointer',
+                        'bg-surface-0 text-text-2 border border-border-subtle hover:border-border hover:text-text-0',
+                      )}
+                    >
+                      <Plug size={10} />
+                      {selectedIntegrations.length > 0 ? 'Add integration' : 'Attach integration'}
+                    </button>
+                  </div>
+                </div>
+
+                {/* Integration picker modal */}
+                <Dialog open={integrationModalOpen} onOpenChange={setIntegrationModalOpen}>
+                  <DialogContent title="Select Integration" className="max-w-sm">
+                    <div className="space-y-3 p-4">
+                      <div className="relative">
+                        <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-text-4" />
+                        <input
+                          value={integrationSearch}
+                          onChange={(e) => setIntegrationSearch(e.target.value)}
+                          placeholder="Search integrations..."
+                          autoFocus
+                          className="w-full h-8 pl-8 pr-3 text-xs rounded-md bg-surface-0 border border-border text-text-0 font-sans focus:outline-none focus:ring-1 focus:ring-accent"
+                        />
+                      </div>
+                      <div className="max-h-64 overflow-y-auto space-y-1">
+                        {installedIntegrations
+                          .filter((i) => {
+                            if (!integrationSearch) return true;
+                            const q = integrationSearch.toLowerCase();
+                            return (i.name || i.id).toLowerCase().includes(q) || (i.description || '').toLowerCase().includes(q);
+                          })
+                          .map((integration) => {
+                            const active = selectedIntegrations.includes(integration.id);
+                            const configured = integration.configured !== false;
+                            const logoUrl = INTEGRATION_LOGOS[integration.id];
+                            const roleMatch = selectedRole && Array.isArray(integration.roles) && integration.roles.includes(selectedRole);
+                            return (
+                              <button
+                                key={integration.id}
+                                onClick={() => {
+                                  if (!configured) return;
+                                  setSelectedIntegrations((prev) =>
+                                    active ? prev.filter((i) => i !== integration.id) : [...prev, integration.id]
+                                  );
+                                }}
+                                disabled={!configured}
+                                className={cn(
+                                  'w-full flex items-center gap-2.5 px-3 py-2 rounded-md text-left transition-colors',
+                                  configured ? 'cursor-pointer' : 'opacity-40 cursor-not-allowed',
+                                  active
+                                    ? 'bg-accent/10 border border-accent/25'
+                                    : configured
+                                      ? 'hover:bg-surface-3 border border-transparent'
+                                      : 'border border-transparent',
+                                )}
+                              >
+                                {logoUrl ? (
+                                  <img src={logoUrl} alt="" className="w-4 h-4 flex-shrink-0" />
+                                ) : (
+                                  <Plug size={12} className={active ? 'text-accent' : 'text-text-3'} />
+                                )}
+                                <div className="flex-1 min-w-0">
+                                  <div className="flex items-center gap-1.5">
+                                    <span className="text-xs font-semibold text-text-0 font-sans truncate">{integration.name || integration.id}</span>
+                                    {!configured && (
+                                      <span className="text-2xs text-text-4 font-sans">(not configured)</span>
+                                    )}
+                                    {configured && roleMatch && (
+                                      <span className="text-2xs font-mono text-accent/70 bg-accent/8 px-1 py-px rounded">
+                                        rec
+                                      </span>
+                                    )}
+                                  </div>
+                                  {integration.description && (
+                                    <div className="text-2xs text-text-3 font-sans truncate">{integration.description}</div>
+                                  )}
+                                  {!configured && (
+                                    <div className="text-2xs text-text-4 font-sans">Configure in Marketplace</div>
+                                  )}
+                                </div>
+                                {active && <CheckMark />}
+                              </button>
+                            );
+                          })}
+                        {installedIntegrations.length === 0 && (
+                          <div className="text-center py-6 text-xs text-text-3 font-sans">
+                            No integrations installed. Visit the Marketplace to install integrations.
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </DialogContent>
+                </Dialog>
+
+                {/* Approval mode */}
+                {selectedIntegrations.length > 0 && (
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-medium text-text-2 font-sans">Integration Approvals</label>
+                    <div className="flex gap-1.5">
+                      <button
+                        onClick={() => setIntegrationApproval('manual')}
+                        className={cn(
+                          'flex-1 flex items-center gap-2 px-3 py-2 rounded-md border text-left transition-all cursor-pointer',
+                          integrationApproval === 'manual'
+                            ? 'border-accent bg-accent/5'
+                            : 'border-border-subtle bg-surface-1 hover:border-border',
+                        )}
+                      >
+                        <Shield size={13} className={integrationApproval === 'manual' ? 'text-accent' : 'text-text-3'} />
+                        <div>
+                          <div className="text-2xs font-semibold text-text-0 font-sans">Manual</div>
+                          <div className="text-2xs text-text-3 font-sans">You approve each action</div>
+                        </div>
+                      </button>
+                      <button
+                        onClick={() => setIntegrationApproval('auto')}
+                        className={cn(
+                          'flex-1 flex items-center gap-2 px-3 py-2 rounded-md border text-left transition-all cursor-pointer',
+                          integrationApproval === 'auto'
+                            ? 'border-warning bg-warning/5'
+                            : 'border-border-subtle bg-surface-1 hover:border-border',
+                        )}
+                      >
+                        <Sparkles size={13} className={integrationApproval === 'auto' ? 'text-warning' : 'text-text-3'} />
+                        <div>
+                          <div className="text-2xs font-semibold text-text-0 font-sans">Auto</div>
+                          <div className="text-2xs text-text-3 font-sans">Agent acts without asking</div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                )}
+
               </div>
             )}
           </div>

package/node_modules/@groove-dev/gui/src/components/dashboard/cache-ring.jsx

@@ -5,8 +5,12 @@ import { fmtNum } from '../../lib/format';
 
 const CacheRing = memo(function CacheRing({ cacheRead = 0, cacheCreation = 0, totalInput = 0, size = 140 }) {
   const canvasRef = useRef(null);
-  const total = cacheRead + cacheCreation + totalInput;
-  const hitRate = total > 0 ? (cacheRead / total) * 100 : 0;
+  // Cache hit rate denominator is only cacheable tokens (reads + creation).
+  // Fresh inputTokens are conversation turns that were never cache-eligible;
+  // including them falsely depresses the rate.
+  const cacheable = cacheRead + cacheCreation;
+  const total = cacheable; // used only by arc-fill and hit-rate
+  const hitRate = cacheable > 0 ? (cacheRead / cacheable) * 100 : 0;
 
   useEffect(() => {
     const canvas = canvasRef.current;