groove-dev 0.26.38 → 0.27.0

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

@@ -1,5 +1,5 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { Dialog, DialogContent } from '../ui/dialog';
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
@@ -8,7 +8,7 @@ import { api } from '../../lib/api';
 import { useToast } from '../../lib/hooks/use-toast';
 import {
   Check, CheckCircle, ExternalLink, Loader2, Eye, EyeOff,
-  Key, Shield, Trash2, ChevronRight, X,
+  Key, Shield, Trash2, ChevronRight, X, Copy, RefreshCw,
 } from 'lucide-react';
 
 // Reuse integration logos from marketplace-card
@@ -19,6 +19,9 @@ const INTEGRATION_LOGOS = {
   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',
@@ -233,13 +236,25 @@ function OverviewStep({ item, status, installing, onInstall, onUninstall, onNext
   );
 }
 
+// ── Which APIs each Google integration needs ───────────
+const GOOGLE_API_NAMES = {
+  gmail:             'Gmail API',
+  'google-calendar': 'Google Calendar API',
+  'google-drive':    'Google Drive API',
+  'google-docs':     'Google Docs API',
+  'google-sheets':   'Google Sheets API',
+  'google-slides':   'Google Slides API',
+};
+
 // ── Google OAuth Setup (shared by google-autoauth + oauth-google) ──
-function GoogleOAuthSetup({ onConfigured }) {
+function GoogleOAuthSetup({ integrationId, onConfigured }) {
   const toast = useToast();
   const [clientId, setClientId] = useState('');
   const [clientSecret, setClientSecret] = useState('');
   const [saving, setSaving] = useState(false);
 
+  const apiName = GOOGLE_API_NAMES[integrationId] || 'the relevant Google API';
+
   async function handleSave() {
     if (!clientId.trim() || !clientSecret.trim()) return;
     setSaving(true);
@@ -256,23 +271,75 @@ function GoogleOAuthSetup({ 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' } },
+    { text: 'Create a new project (or select an existing one). Any name is fine — this is just a container for your credentials.' },
+    { text: <>Enable the <strong>{apiName}</strong> — search for it in the API Library and click <strong>Enable</strong></>,
+      link: { url: 'https://console.cloud.google.com/apis/library', label: 'Open API Library' } },
+    { 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: <>Click <strong>Create</strong>, then copy the <strong>Client ID</strong> and <strong>Client Secret</strong> and paste them below.</> },
+  ];
+
   return (
     <div className="space-y-4">
-      <div className="bg-warning/8 border border-warning/15 rounded-md px-4 py-3">
-        <p className="text-xs font-semibold text-warning font-sans">Google Cloud credentials required</p>
-        <p className="text-2xs text-text-3 font-sans mt-1">
-          Create an OAuth 2.0 Client ID in the Google Cloud Console, then paste the credentials below.
+      <div className="bg-surface-2 rounded-md px-4 py-3 space-y-3">
+        <span className="text-xs font-semibold text-text-1 font-sans">How to get your Google credentials</span>
+        <ol className="space-y-2.5">
+          {steps.map((step, i) => (
+            <li key={i} className="flex gap-2.5 text-xs text-text-2 font-sans leading-relaxed">
+              <span className="text-accent font-mono font-bold flex-shrink-0 w-4 text-right">{i + 1}.</span>
+              <div className="min-w-0">
+                <span>{step.text}</span>
+                {step.link && (
+                  <a
+                    href={step.link.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-1 text-2xs text-accent font-sans hover:underline mt-0.5"
+                  >
+                    <ExternalLink size={9} />
+                    {step.link.label}
+                  </a>
+                )}
+                {step.copyable && (
+                  <div className="mt-1.5 flex items-center gap-1.5">
+                    <code className="flex-1 min-w-0 text-2xs font-mono text-accent bg-surface-4 px-2.5 py-1.5 rounded select-all break-all">
+                      {step.copyable}
+                    </code>
+                    <button
+                      type="button"
+                      onClick={() => { navigator.clipboard.writeText(step.copyable); }}
+                      className="flex-shrink-0 p-1.5 rounded text-text-3 hover:text-accent hover:bg-accent/10 transition-colors cursor-pointer"
+                      title="Copy to clipboard"
+                    >
+                      <Copy size={12} />
+                    </button>
+                  </div>
+                )}
+              </div>
+            </li>
+          ))}
+        </ol>
+      </div>
+
+      <div className="bg-accent/8 border border-accent/15 rounded-md px-4 py-2.5">
+        <p className="text-2xs text-text-2 font-sans leading-relaxed">
+          <strong className="text-text-1">One-time setup</strong> — these same credentials work for
+          Gmail, Calendar, Drive, Docs, Sheets, and Slides. You only need to do this once.
+          For each integration, just enable the matching API in your Google Cloud project.
         </p>
-        <a
-          href="https://console.cloud.google.com/apis/credentials"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="inline-flex items-center gap-1 text-2xs text-accent font-sans hover:underline mt-1.5"
-        >
-          <ExternalLink size={10} />
-          console.cloud.google.com
-        </a>
       </div>
+
+      <div className="h-px bg-border-subtle" />
+
       <div className="space-y-3">
         <div className="space-y-1.5">
           <label className="text-xs font-medium text-text-2 font-sans flex items-center gap-1.5">
@@ -318,17 +385,6 @@ function ConfigureStep({ item, status, onDone, onRefreshStatus }) {
     }
   }, [needsGoogleOAuth]);
 
-  async function handleGoogleAutoAuth() {
-    setAuthenticating(true);
-    try {
-      await api.post(`/integrations/${item.id}/authenticate`);
-      toast.success('Browser opened — complete sign-in there');
-    } catch (err) {
-      toast.error('Auth failed', err.message);
-    }
-    setAuthenticating(false);
-  }
-
   async function handleOAuthStart() {
     setAuthenticating(true);
     try {
@@ -338,7 +394,7 @@ function ConfigureStep({ item, status, onDone, onRefreshStatus }) {
         toast.success('Browser opened — complete sign-in there');
       }
     } catch (err) {
-      toast.error('OAuth failed', err.message);
+      toast.error('Sign-in failed', err.message);
     }
     setAuthenticating(false);
   }
@@ -359,8 +415,8 @@ function ConfigureStep({ item, status, onDone, onRefreshStatus }) {
         </div>
       </div>
 
-      {/* Setup steps */}
-      {item.setupSteps?.length > 0 && (
+      {/* Setup steps — hide when Google OAuth setup guide is showing (it has its own steps) */}
+      {item.setupSteps?.length > 0 && !(needsGoogleOAuth && googleOAuthReady === false) && (
         <div className="bg-surface-2 rounded-md px-4 py-3 space-y-2">
           <span className="text-xs font-semibold text-text-1 font-sans">Setup guide</span>
           <ol className="space-y-1.5">
@@ -385,7 +441,7 @@ function ConfigureStep({ item, status, onDone, onRefreshStatus }) {
         </div>
       )}
 
-      <div className="h-px bg-border-subtle" />
+      {!(needsGoogleOAuth && googleOAuthReady === false) && <div className="h-px bg-border-subtle" />}
 
       {/* Auth type specific UI */}
       {authType === 'api-key' && (
@@ -402,15 +458,15 @@ function ConfigureStep({ item, status, onDone, onRefreshStatus }) {
       )}
 
       {needsGoogleOAuth && googleOAuthReady === false && (
-        <GoogleOAuthSetup onConfigured={() => setGoogleOAuthReady(true)} />
+        <GoogleOAuthSetup integrationId={item.id} onConfigured={() => setGoogleOAuthReady(true)} />
       )}
 
-      {authType === 'google-autoauth' && googleOAuthReady && (
+      {needsGoogleOAuth && googleOAuthReady && (
         <div className="space-y-3">
           <Button
             variant="primary"
             size="lg"
-            onClick={handleGoogleAutoAuth}
+            onClick={handleOAuthStart}
             disabled={authenticating}
             className="w-full gap-2"
           >
@@ -427,35 +483,15 @@ function ConfigureStep({ item, status, onDone, onRefreshStatus }) {
             )}
           </Button>
           <p className="text-2xs text-text-4 font-sans text-center">
-            A browser window will open for Google authorization
+            A browser window will open — sign in and allow access to your {item.name}
           </p>
-        </div>
-      )}
-
-      {authType === 'oauth-google' && googleOAuthReady && (
-        <div className="space-y-3">
-          <Button
-            variant="primary"
-            size="lg"
-            onClick={handleOAuthStart}
-            disabled={authenticating}
-            className="w-full gap-2"
+          <button
+            type="button"
+            onClick={() => setGoogleOAuthReady(false)}
+            className="w-full text-2xs text-text-4 font-sans hover:text-text-2 transition-colors cursor-pointer py-1"
           >
-            {authenticating ? (
-              <>
-                <Loader2 size={14} className="animate-spin" />
-                Connecting...
-              </>
-            ) : (
-              <>
-                <img src="https://cdn.simpleicons.org/google/white" alt="" className="w-4 h-4" />
-                Connect with Google
-              </>
-            )}
-          </Button>
-          <p className="text-2xs text-text-4 font-sans text-center">
-            Authorize Groove to access your {item.name}
-          </p>
+            Reconfigure Google OAuth credentials
+          </button>
         </div>
       )}
 
@@ -601,3 +637,297 @@ export function IntegrationWizard({ integration, open, onClose }) {
     </Dialog>
   );
 }
+
+// ── Google Workspace Wizard ────────────────────────────
+const GOOGLE_IDS = ['gmail', 'google-calendar', 'google-drive', 'google-docs', 'google-sheets', 'google-slides'];
+
+function ServiceRow({ item, status, onInstall, onUninstall, busy }) {
+  const installed = status?.installed;
+  const authenticated = status?.authenticated;
+
+  return (
+    <div className="flex items-center gap-3 px-3 py-2.5 rounded-md bg-surface-2 border border-border-subtle">
+      <IntegrationIcon item={item} size={32} />
+      <div className="flex-1 min-w-0">
+        <div className="text-xs font-semibold text-text-0 font-sans">{item.name}</div>
+        <div className="text-2xs text-text-3 font-sans truncate">{item.description}</div>
+      </div>
+      {installed && authenticated && !status?.needsReauth && (
+        <Badge variant="success" className="text-2xs flex-shrink-0 gap-1">
+          <Check size={8} /> Ready
+        </Badge>
+      )}
+      {installed && authenticated && status?.needsReauth && (
+        <Badge variant="warning" className="text-2xs flex-shrink-0 gap-1">
+          <RefreshCw size={8} /> Update
+        </Badge>
+      )}
+      {installed && !authenticated && (
+        <Badge variant="warning" className="text-2xs flex-shrink-0">Needs sign-in</Badge>
+      )}
+      <Button
+        variant={installed ? 'ghost' : 'primary'}
+        size="sm"
+        onClick={() => installed ? onUninstall(item.id) : onInstall(item.id)}
+        disabled={busy === item.id}
+        className={installed ? 'text-text-3 hover:text-danger' : ''}
+      >
+        {busy === item.id ? (
+          <Loader2 size={12} className="animate-spin" />
+        ) : installed ? (
+          <Trash2 size={12} />
+        ) : (
+          'Install'
+        )}
+      </Button>
+    </div>
+  );
+}
+
+export function GoogleWorkspaceWizard({ integrations, open, onClose }) {
+  const toast = useToast();
+  const [googleOAuthReady, setGoogleOAuthReady] = useState(null);
+  const [statuses, setStatuses] = useState({});
+  const [busy, setBusy] = useState(null);
+  const [authenticating, setAuthenticating] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const pollRef = useRef(null);
+
+  const googleItems = integrations.filter((i) => GOOGLE_IDS.includes(i.id));
+
+  const fetchStatuses = useCallback(async () => {
+    const results = {};
+    await Promise.all(googleItems.map(async (item) => {
+      try {
+        results[item.id] = await api.get(`/integrations/${item.id}/status`);
+      } catch {
+        results[item.id] = null;
+      }
+    }));
+    setStatuses(results);
+    setLoading(false);
+  }, [googleItems.map((i) => i.id).join(',')]);
+
+  useEffect(() => {
+    if (open) {
+      setLoading(true);
+      api.get('/integrations/google-oauth/status')
+        .then((d) => setGoogleOAuthReady(d.configured))
+        .catch(() => setGoogleOAuthReady(false));
+      fetchStatuses();
+    }
+    return () => { if (pollRef.current) clearInterval(pollRef.current); };
+  }, [open]);
+
+  const installedIds = Object.entries(statuses).filter(([, s]) => s?.installed).map(([id]) => id);
+  const allAuthenticated = installedIds.length > 0 && installedIds.every((id) => statuses[id]?.authenticated);
+  const needsAuth = installedIds.some((id) => !statuses[id]?.authenticated);
+  const needsReauth = allAuthenticated && installedIds.some((id) => statuses[id]?.needsReauth);
+
+  async function handleInstall(id) {
+    setBusy(id);
+    try {
+      await api.post(`/integrations/${id}/install`);
+      toast.success(`${googleItems.find((i) => i.id === id)?.name} installed`);
+      await fetchStatuses();
+    } catch (err) {
+      toast.error('Install failed', err.message);
+    }
+    setBusy(null);
+  }
+
+  async function handleUninstall(id) {
+    setBusy(id);
+    try {
+      await api.delete(`/integrations/${id}`);
+      toast.success(`${googleItems.find((i) => i.id === id)?.name} removed`);
+      await fetchStatuses();
+    } catch (err) {
+      toast.error('Uninstall failed', err.message);
+    }
+    setBusy(null);
+  }
+
+  async function handleConnect() {
+    if (!installedIds.length) {
+      toast.error('Install at least one service first');
+      return;
+    }
+    setAuthenticating(true);
+    try {
+      const data = await api.post('/integrations/google-workspace/oauth/start', { integrationIds: installedIds });
+      if (data.url) {
+        window.open(data.url, '_blank', 'noopener');
+        toast.success('Browser opened — complete sign-in there');
+        // Poll for auth completion
+        if (pollRef.current) clearInterval(pollRef.current);
+        pollRef.current = setInterval(async () => {
+          await fetchStatuses();
+        }, 3000);
+        // Stop polling after 3 minutes
+        setTimeout(() => { if (pollRef.current) clearInterval(pollRef.current); }, 180_000);
+      }
+    } catch (err) {
+      toast.error('Sign-in failed', err.message);
+    }
+    setAuthenticating(false);
+  }
+
+  // Stop polling once all installed services are authenticated
+  useEffect(() => {
+    if (allAuthenticated && pollRef.current) {
+      clearInterval(pollRef.current);
+      pollRef.current = null;
+    }
+  }, [allAuthenticated]);
+
+  if (!open) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => { if (!v) onClose(); }}>
+      <DialogContent
+        title="Google Workspace"
+        description="Connect your Google services"
+        className="max-w-md"
+      >
+        <div className="px-5 py-5 space-y-5">
+          {/* Header */}
+          <div className="flex items-center gap-3">
+            <div className="w-11 h-11 rounded-lg bg-surface-4 flex items-center justify-center flex-shrink-0">
+              <img src="https://cdn.simpleicons.org/google/white" alt="Google" className="w-6 h-6" />
+            </div>
+            <div>
+              <h2 className="text-sm font-bold text-text-0 font-sans">Google Workspace</h2>
+              <p className="text-2xs text-text-3 font-sans">
+                One set of credentials for all Google services
+              </p>
+            </div>
+          </div>
+
+          {/* OAuth Setup */}
+          {googleOAuthReady === false && (
+            <GoogleOAuthSetup integrationId="gmail" onConfigured={() => setGoogleOAuthReady(true)} />
+          )}
+
+          {googleOAuthReady === null && (
+            <div className="flex justify-center py-3">
+              <Loader2 size={16} className="animate-spin text-text-4" />
+            </div>
+          )}
+
+          {/* Services list */}
+          {googleOAuthReady && (
+            <>
+              <div className="space-y-1.5">
+                <span className="text-xs font-semibold text-text-2 font-sans">Services</span>
+                <div className="space-y-1.5">
+                  {loading ? (
+                    Array.from({ length: 4 }).map((_, i) => (
+                      <div key={i} className="h-14 rounded-md bg-surface-2 animate-pulse" />
+                    ))
+                  ) : (
+                    googleItems.map((item) => (
+                      <ServiceRow
+                        key={item.id}
+                        item={item}
+                        status={statuses[item.id]}
+                        onInstall={handleInstall}
+                        onUninstall={handleUninstall}
+                        busy={busy}
+                      />
+                    ))
+                  )}
+                </div>
+              </div>
+
+              <div className="h-px bg-border-subtle" />
+
+              {/* Connect button */}
+              {installedIds.length > 0 && !allAuthenticated && (
+                <div className="space-y-3">
+                  <Button
+                    variant="primary"
+                    size="lg"
+                    onClick={handleConnect}
+                    disabled={authenticating}
+                    className="w-full gap-2"
+                  >
+                    {authenticating ? (
+                      <><Loader2 size={14} className="animate-spin" /> Opening browser...</>
+                    ) : (
+                      <>
+                        <img src="https://cdn.simpleicons.org/google/white" alt="" className="w-4 h-4" />
+                        Sign in with Google
+                      </>
+                    )}
+                  </Button>
+                  <p className="text-2xs text-text-4 font-sans text-center">
+                    Connects {installedIds.length} service{installedIds.length !== 1 ? 's' : ''} with one sign-in
+                  </p>
+                </div>
+              )}
+
+              {allAuthenticated && installedIds.length > 0 && (
+                <div className="flex flex-col items-center text-center gap-2 py-2">
+                  <div className="w-10 h-10 rounded-full bg-success/15 flex items-center justify-center">
+                    <CheckCircle size={20} className="text-success" />
+                  </div>
+                  <p className="text-sm font-medium text-success font-sans">
+                    All services connected
+                  </p>
+                  <p className="text-2xs text-text-3 font-sans">
+                    Your agents can now use these Google integrations.
+                  </p>
+                  {needsReauth ? (
+                    <div className="w-full space-y-2 pt-2">
+                      <p className="text-2xs text-warning font-sans">
+                        New permissions available — re-authenticate to enable all features.
+                      </p>
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        onClick={handleConnect}
+                        disabled={authenticating}
+                        className="w-full gap-2"
+                      >
+                        {authenticating ? (
+                          <><Loader2 size={12} className="animate-spin" /> Opening browser...</>
+                        ) : (
+                          <><RefreshCw size={12} /> Re-authenticate</>
+                        )}
+                      </Button>
+                    </div>
+                  ) : (
+                    <button
+                      onClick={handleConnect}
+                      disabled={authenticating}
+                      className="text-2xs text-text-4 hover:text-text-2 font-sans underline underline-offset-2 transition-colors mt-1"
+                    >
+                      {authenticating ? 'Opening browser...' : 'Re-authenticate'}
+                    </button>
+                  )}
+                </div>
+              )}
+
+              {installedIds.length === 0 && !loading && (
+                <p className="text-xs text-text-4 font-sans text-center py-2">
+                  Install at least one service above, then connect with Google.
+                </p>
+              )}
+            </>
+          )}
+
+          {/* Close */}
+          <Button
+            variant="secondary"
+            size="lg"
+            onClick={onClose}
+            className="w-full"
+          >
+            {allAuthenticated && installedIds.length > 0 ? 'Done' : 'Close'}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/packages/gui/src/components/marketplace/marketplace-card.jsx

@@ -5,20 +5,40 @@ import { Badge } from '../ui/badge';
 import { fmtNum } from '../../lib/format';
 
 // Well-known integration logos via CDN (simple-icons on cdn.simpleicons.org)
-const INTEGRATION_LOGOS = {
-  slack:       'https://cdn.simpleicons.org/slack/E01E5A',
+export 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',
-  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',
+  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',
 };
 
 function ItemIcon({ item, size = 40 }) {
@@ -62,7 +82,7 @@ function ItemIcon({ item, size = 40 }) {
   );
 }
 
-export function MarketplaceCard({ item, onClick, className }) {
+export function MarketplaceCard({ item, onClick, className, statusBadge }) {
   const installed = item.installed;
 
   return (
@@ -107,9 +127,11 @@ export function MarketplaceCard({ item, onClick, className }) {
           </span>
         )}
         <span className="flex-1" />
-        {installed && (
-          <Badge variant="accent" className="text-2xs">Installed</Badge>
-        )}
+        {statusBadge || (installed && (
+          <Badge variant="accent" className="text-2xs">
+            {item._installedCount ? `${item._installedCount} active` : 'Installed'}
+          </Badge>
+        ))}
       </div>
     </button>
   );

package/packages/gui/src/lib/format.js

@@ -42,9 +42,3 @@ export function timeAgo(ts) {
   if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
   return `${Math.floor(diff / 86400)}d ago`;
 }
-
-export function formatDuration(ms) {
-  if (!ms) return '0s';
-  const s = Math.floor(ms / 1000);
-  return fmtUptime(s);
-}