groove-dev 0.27.14 → 0.27.17

package/node_modules/@groove-dev/gui/src/views/settings.jsx

@@ -12,15 +12,12 @@ import { Sheet, SheetContent } from '../components/ui/sheet';
 import { api } from '../lib/api';
 import { cn } from '../lib/cn';
 import { fmtUptime } from '../lib/format';
-import { RemoteServerCard } from '../components/settings/remote-server-card';
-import { ServerDialog } from '../components/settings/server-dialog';
-import { ProGate } from '../components/pro/pro-gate';
 import {
-  Key, Eye, EyeOff, Check, Cpu, ChevronDown,
-  FolderOpen, FolderSearch, RotateCw, Users, Gauge, Zap,
-  LogIn, LogOut, User, ShieldCheck, Settings,
-  Newspaper, Layers, Radio, Send, MessageSquare, MessageCircle,
-  Plus, Trash2, Plug, PlugZap, TestTube, X, HelpCircle, ExternalLink, ChevronRight,
+  Key, Eye, EyeOff, Check, Cpu,
+  FolderOpen, FolderSearch, Users, Gauge,
+  ShieldCheck, Settings,
+  Newspaper, Radio, Send, MessageSquare, MessageCircle,
+  Plus, Trash2, Plug, PlugZap, TestTube, X, HelpCircle, ExternalLink,
 } from 'lucide-react';
 
 /* ── Toggle ────────────────────────────────────────────────── */
@@ -42,32 +39,6 @@ function Toggle({ value, onChange }) {
   );
 }
 
-/* ── Profile Pic ──────────────────────────────────────────── */
-
-function ProfilePic({ user }) {
-  const [broken, setBroken] = useState(false);
-  const src = user?.avatar || user?.picture || user?.photoURL || user?.photo;
-
-  if (src && !broken) {
-    return (
-      <img
-        src={src}
-        alt=""
-        className="w-6 h-6 rounded-full"
-        referrerPolicy="no-referrer"
-        crossOrigin="anonymous"
-        onError={() => setBroken(true)}
-      />
-    );
-  }
-
-  return (
-    <div className="w-6 h-6 rounded-full bg-accent/10 flex items-center justify-center">
-      <User size={12} className="text-accent" />
-    </div>
-  );
-}
-
 /* ── Provider Card ─────────────────────────────────────────── */
 
 function ProviderCard({ provider, onKeyChange }) {
@@ -85,7 +56,7 @@ function ProviderCard({ provider, onKeyChange }) {
   async function handleSetKey() {
     if (!keyInput.trim()) return;
     try {
-      await api.post(`/credentials/${provider.id}`, { key: keyInput.trim() });
+      await api.post(`/credentials/${encodeURIComponent(provider.id)}`, { key: keyInput.trim() });
       addToast('success', `API key set for ${provider.name}`);
       setKeyInput('');
       setSettingKey(false);
@@ -97,7 +68,7 @@ function ProviderCard({ provider, onKeyChange }) {
 
   async function handleDeleteKey() {
     try {
-      await api.delete(`/credentials/${provider.id}`);
+      await api.delete(`/credentials/${encodeURIComponent(provider.id)}`);
       addToast('info', `Removed ${provider.name} key`);
       if (onKeyChange) onKeyChange();
     } catch (err) {
@@ -577,7 +548,7 @@ function GatewayCard({ gateway, onRefresh }) {
   // Fetch channels when connected Slack gateway has no chatId
   useEffect(() => {
     if (gateway.connected && !gateway.chatId && gateway.type === 'slack') {
-      api.get(`/gateways/${gateway.id}/channels`).then((ch) => setChannels(Array.isArray(ch) ? ch : [])).catch(() => {});
+      api.get(`/gateways/${encodeURIComponent(gateway.id)}/channels`).then((ch) => setChannels(Array.isArray(ch) ? ch : [])).catch(() => {});
     }
   }, [gateway.connected, gateway.chatId, gateway.id, gateway.type]);
 
@@ -587,9 +558,9 @@ function GatewayCard({ gateway, onRefresh }) {
   async function handleSaveToken() {
     if (!tokenInput.trim()) return;
     try {
-      await api.post(`/gateways/${gateway.id}/credentials`, { key: 'bot_token', value: tokenInput.trim() });
+      await api.post(`/gateways/${encodeURIComponent(gateway.id)}/credentials`, { key: 'bot_token', value: tokenInput.trim() });
       if (isSlack && appTokenInput.trim()) {
-        await api.post(`/gateways/${gateway.id}/credentials`, { key: 'app_token', value: appTokenInput.trim() });
+        await api.post(`/gateways/${encodeURIComponent(gateway.id)}/credentials`, { key: 'app_token', value: appTokenInput.trim() });
       }
       addToast('success', `Token saved — connecting...`);
       setTokenInput('');
@@ -597,7 +568,7 @@ function GatewayCard({ gateway, onRefresh }) {
       setSettingToken(false);
       // Auto-connect after saving tokens
       try {
-        await api.post(`/gateways/${gateway.id}/connect`);
+        await api.post(`/gateways/${encodeURIComponent(gateway.id)}/connect`);
         addToast('success', `${GATEWAY_LABELS[gateway.type]} connected!`);
       } catch (connErr) {
         addToast('error', 'Token saved but connect failed', connErr.message);
@@ -611,7 +582,7 @@ function GatewayCard({ gateway, onRefresh }) {
   async function handleTest() {
     setTesting(true);
     try {
-      await api.post(`/gateways/${gateway.id}/test`);
+      await api.post(`/gateways/${encodeURIComponent(gateway.id)}/test`);
       addToast('success', 'Test message sent!');
     } catch (err) {
       addToast('error', 'Test failed', err.message);
@@ -623,10 +594,10 @@ function GatewayCard({ gateway, onRefresh }) {
     setConnecting(true);
     try {
       if (gateway.connected) {
-        await api.post(`/gateways/${gateway.id}/disconnect`);
+        await api.post(`/gateways/${encodeURIComponent(gateway.id)}/disconnect`);
         addToast('info', `${GATEWAY_LABELS[gateway.type]} disconnected`);
       } else {
-        await api.post(`/gateways/${gateway.id}/connect`);
+        await api.post(`/gateways/${encodeURIComponent(gateway.id)}/connect`);
         addToast('success', `${GATEWAY_LABELS[gateway.type]} connected!`);
       }
       onRefresh();
@@ -638,7 +609,7 @@ function GatewayCard({ gateway, onRefresh }) {
 
   async function handleToggleEnabled(enabled) {
     try {
-      await api.patch(`/gateways/${gateway.id}`, { enabled });
+      await api.patch(`/gateways/${encodeURIComponent(gateway.id)}`, { enabled });
       onRefresh();
     } catch (err) {
       addToast('error', 'Update failed', err.message);
@@ -647,7 +618,7 @@ function GatewayCard({ gateway, onRefresh }) {
 
   async function handlePresetChange(preset) {
     try {
-      await api.patch(`/gateways/${gateway.id}`, { notifications: { preset } });
+      await api.patch(`/gateways/${encodeURIComponent(gateway.id)}`, { notifications: { preset } });
       onRefresh();
     } catch (err) {
       addToast('error', 'Update failed', err.message);
@@ -656,7 +627,7 @@ function GatewayCard({ gateway, onRefresh }) {
 
   async function handlePermissionChange(perm) {
     try {
-      await api.patch(`/gateways/${gateway.id}`, { commandPermission: perm });
+      await api.patch(`/gateways/${encodeURIComponent(gateway.id)}`, { commandPermission: perm });
       onRefresh();
     } catch (err) {
       addToast('error', 'Update failed', err.message);
@@ -665,7 +636,7 @@ function GatewayCard({ gateway, onRefresh }) {
 
   async function handleDelete() {
     try {
-      await api.delete(`/gateways/${gateway.id}`);
+      await api.delete(`/gateways/${encodeURIComponent(gateway.id)}`);
       addToast('info', `${GATEWAY_LABELS[gateway.type]} gateway removed`);
       onRefresh();
     } catch (err) {
@@ -718,7 +689,7 @@ function GatewayCard({ gateway, onRefresh }) {
                   </code>
                   <button
                     onClick={async () => {
-                      try { await api.patch(`/gateways/${gateway.id}`, { chatId: null }); onRefresh(); }
+                      try { await api.patch(`/gateways/${encodeURIComponent(gateway.id)}`, { chatId: null }); onRefresh(); }
                       catch (err) { addToast('error', 'Failed', err.message); }
                     }}
                     className="text-2xs text-text-4 hover:text-text-1 cursor-pointer font-sans"
@@ -729,7 +700,7 @@ function GatewayCard({ gateway, onRefresh }) {
                   onChange={async (e) => {
                     if (!e.target.value) return;
                     try {
-                      await api.patch(`/gateways/${gateway.id}`, { chatId: e.target.value });
+                      await api.patch(`/gateways/${encodeURIComponent(gateway.id)}`, { chatId: e.target.value });
                       onRefresh();
                     } catch (err) { addToast('error', 'Failed to set channel', err.message); }
                   }}
@@ -752,7 +723,7 @@ function GatewayCard({ gateway, onRefresh }) {
                     onKeyDown={async (e) => {
                       if (e.key === 'Enter' && e.target.value.trim()) {
                         try {
-                          await api.patch(`/gateways/${gateway.id}`, { chatId: e.target.value.trim() });
+                          await api.patch(`/gateways/${encodeURIComponent(gateway.id)}`, { chatId: e.target.value.trim() });
                           onRefresh();
                         } catch (err) { addToast('error', 'Failed to set channel', err.message); }
                       }
@@ -977,14 +948,7 @@ export default function SettingsView() {
   const [gwList, setGwList] = useState([]);
   const [loading, setLoading] = useState(true);
   const [folderBrowserOpen, setFolderBrowserOpen] = useState(false);
-  const [serverDialogOpen, setServerDialogOpen] = useState(false);
-  const [editingServer, setEditingServer] = useState(null);
-  const savedTunnels = useGrooveStore((s) => s.savedTunnels);
   const addToast = useGrooveStore((s) => s.addToast);
-  const marketplaceUser = useGrooveStore((s) => s.marketplaceUser);
-  const marketplaceAuthenticated = useGrooveStore((s) => s.marketplaceAuthenticated);
-  const marketplaceLogin = useGrooveStore((s) => s.marketplaceLogin);
-  const marketplaceLogout = useGrooveStore((s) => s.marketplaceLogout);
 
   function loadProviders() {
     api.get('/providers').then((d) => setProviders(Array.isArray(d) ? d : [])).catch(() => {});
@@ -998,7 +962,6 @@ export default function SettingsView() {
     Promise.all([api.get('/providers'), api.get('/config'), api.get('/status'), api.get('/gateways')])
       .then(([p, c, s, g]) => { setProviders(Array.isArray(p) ? p : []); setConfig(c); setDaemonInfo(s); setGwList(Array.isArray(g) ? g : []); setLoading(false); })
       .catch(() => setLoading(false));
-    useGrooveStore.getState().fetchTunnels();
   }, []);
 
   async function addGateway(type) {
@@ -1056,22 +1019,6 @@ export default function SettingsView() {
           {daemonInfo?.uptime > 0 && <span>Up {fmtUptime(daemonInfo.uptime)}</span>}
         </div>
 
-        <div className="w-px h-4 bg-border-subtle" />
-
-        {marketplaceAuthenticated ? (
-          <div className="flex items-center gap-2.5">
-            <ProfilePic user={marketplaceUser} />
-            <span className="text-xs font-medium text-text-0 font-sans">{marketplaceUser?.displayName || 'User'}</span>
-            <button onClick={marketplaceLogout} className="text-2xs text-text-4 hover:text-text-1 cursor-pointer font-sans flex items-center gap-1">
-              <LogOut size={10} /> Sign out
-            </button>
-          </div>
-        ) : (
-          <Button variant="ghost" size="sm" onClick={marketplaceLogin} className="h-7 text-2xs gap-1.5 text-text-3">
-            <LogIn size={11} /> Sign in
-          </Button>
-        )}
-
         <StatusDot status="running" size="sm" />
       </div>
 
@@ -1137,7 +1084,17 @@ export default function SettingsView() {
                     <code className="flex-1 h-8 px-2 flex items-center bg-surface-0 border border-border-subtle rounded-md text-2xs font-mono text-text-2 truncate min-w-0">
                       {config.defaultWorkingDir || 'Project root'}
                     </code>
-                    <Button variant="secondary" size="sm" onClick={() => setFolderBrowserOpen(true)} className="h-8 px-2 flex-shrink-0">
+                    <Button variant="secondary" size="sm" onClick={async () => {
+                      if (window.groove?.folders?.select) {
+                        const dir = await window.groove.folders.select({
+                          title: 'Select Working Directory',
+                          defaultPath: config?.defaultWorkingDir || undefined,
+                        });
+                        if (dir) updateConfig('defaultWorkingDir', dir);
+                      } else {
+                        setFolderBrowserOpen(true);
+                      }
+                    }} className="h-8 px-2 flex-shrink-0">
                       <FolderSearch size={12} />
                     </Button>
                   </div>
@@ -1229,67 +1186,10 @@ export default function SettingsView() {
             </div>
           )}
 
-          {/* ═══════ REMOTE SERVERS ═══════ */}
-          <div>
-            <div className="flex items-center gap-2 mb-2.5 px-0.5">
-              <span className="text-2xs font-semibold text-text-3 font-sans uppercase tracking-wider">Remote Servers</span>
-              <div className="flex-1 h-px bg-border-subtle" />
-            </div>
-            <ProGate feature="Remote Access" description="Connect to remote servers via SSH tunnel and manage agents across machines">
-              <div>
-                <div className="flex justify-end mb-2.5">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => { setEditingServer(null); setServerDialogOpen(true); }}
-                    className="h-6 text-2xs gap-1 text-text-3 hover:text-accent"
-                  >
-                    <Plus size={11} /> Add Server
-                  </Button>
-                </div>
-                {savedTunnels.length === 0 ? (
-                  <div className="rounded-lg border border-dashed border-border-subtle bg-surface-1/50 px-4 py-6 text-center">
-                    <Radio size={20} className="text-text-4 mx-auto mb-2" />
-                    <p className="text-xs text-text-3 font-sans">No remote servers configured.</p>
-                    <p className="text-2xs text-text-4 font-sans mt-1">Add one to connect to a VPS or remote machine.</p>
-                  </div>
-                ) : (
-                  <div className="grid grid-cols-2 gap-3">
-                    {savedTunnels.map((server) => (
-                      <RemoteServerCard
-                        key={server.id}
-                        server={server}
-                        onConnect={() => useGrooveStore.getState().connectTunnel(server.id)}
-                        onDisconnect={() => useGrooveStore.getState().disconnectTunnel(server.id)}
-                        onTest={() => useGrooveStore.getState().testTunnel(server.id)}
-                        onEdit={(s) => { setEditingServer(s); setServerDialogOpen(true); }}
-                        onDelete={(id) => useGrooveStore.getState().deleteTunnel(id)}
-                      />
-                    ))}
-                  </div>
-                )}
-              </div>
-            </ProGate>
-          </div>
 
         </div>
       </ScrollArea>
 
-      {/* Server Dialog */}
-      <ServerDialog
-        open={serverDialogOpen}
-        onOpenChange={setServerDialogOpen}
-        server={editingServer}
-        onSave={async (data) => {
-          if (data.id) {
-            await useGrooveStore.getState().updateTunnel(data.id, data);
-          } else {
-            await useGrooveStore.getState().saveTunnel(data);
-          }
-          addToast('success', data.id ? 'Server updated' : 'Server added');
-        }}
-      />
-
       {/* Folder Browser Modal */}
       <FolderBrowser
         open={folderBrowserOpen}

package/node_modules/@groove-dev/gui/src/views/subscription-panel.jsx

@@ -0,0 +1,327 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useEffect } from 'react';
+import { useGrooveStore } from '../stores/groove';
+import { Badge } from '../components/ui/badge';
+import { Button } from '../components/ui/button';
+import { cn } from '../lib/cn';
+import {
+  Crown, Sparkles, Users, Check, CreditCard, AlertTriangle,
+  Minus, Plus, Shield, Radio, Cloud, Server, Headphones,
+} from 'lucide-react';
+
+const FEATURE_LABELS = {
+  'remote-access': { label: 'Remote Access', icon: Radio },
+  'federation': { label: 'Federation', icon: Server },
+  'cloud-teams': { label: 'Cloud Teams', icon: Cloud },
+  'cloud-backup': { label: 'Cloud Backup', icon: Shield },
+  'shared-workspace': { label: 'Shared Workspace', icon: Users },
+  'admin-controls': { label: 'Admin Controls', icon: Shield },
+  'priority-support': { label: 'Priority Support', icon: Headphones },
+};
+
+function formatDate(iso) {
+  if (!iso) return '';
+  return new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+function PlanBadge({ plan, status, cancelAtPeriodEnd }) {
+  if (status === 'past_due') {
+    return <Badge variant="outline" className="border-warning/30 bg-warning/10 text-warning text-2xs">Payment issue</Badge>;
+  }
+  if (cancelAtPeriodEnd) {
+    return <Badge variant="outline" className="border-warning/30 bg-warning/10 text-warning text-2xs">Cancels at period end</Badge>;
+  }
+  if (status === 'active' || status === 'trialing') {
+    return <Badge variant="outline" className="border-success/30 bg-success/10 text-success text-2xs">Active</Badge>;
+  }
+  return null;
+}
+
+function FeatureList({ features }) {
+  return (
+    <div className="flex flex-wrap gap-1.5 mt-3">
+      {features.map((key) => {
+        const f = FEATURE_LABELS[key] || { label: key, icon: Check };
+        const Icon = f.icon;
+        return (
+          <span key={key} className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-surface-3 text-2xs text-text-2 font-sans">
+            <Icon size={10} className="text-accent" />
+            {f.label}
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+function SeatControl({ seats, onChange }) {
+  const [value, setValue] = useState(seats);
+
+  useEffect(() => { setValue(seats); }, [seats]);
+
+  const dec = () => { if (value > 1) { setValue(value - 1); onChange(value - 1); } };
+  const inc = () => { if (value < 999) { setValue(value + 1); onChange(value + 1); } };
+
+  return (
+    <div className="mt-4 flex items-center gap-3">
+      <span className="text-xs text-text-2 font-sans">Seats</span>
+      <div className="flex items-center gap-1 bg-surface-0 rounded-md border border-border-subtle p-0.5">
+        <button onClick={dec} disabled={value <= 1} className="w-6 h-6 flex items-center justify-center rounded text-text-3 hover:text-text-0 hover:bg-surface-3 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed">
+          <Minus size={12} />
+        </button>
+        <span className="w-8 text-center text-xs font-semibold text-text-0 font-mono">{value}</span>
+        <button onClick={inc} disabled={value >= 999} className="w-6 h-6 flex items-center justify-center rounded text-text-3 hover:text-text-0 hover:bg-surface-3 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed">
+          <Plus size={12} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function ActivePlanCard({ subscription }) {
+  const openPortal = useGrooveStore((s) => s.openPortal);
+  const updateSeats = useGrooveStore((s) => s.updateSeats);
+  const planLabel = subscription.plan === 'team' ? 'Team Plan' : 'Pro Plan';
+  const PlanIcon = subscription.plan === 'team' ? Users : Crown;
+
+  return (
+    <div className="rounded-md border border-border-subtle bg-surface-1 p-4">
+      <div className="flex items-start justify-between">
+        <div className="flex items-center gap-2.5">
+          <div className="flex h-8 w-8 items-center justify-center rounded-md bg-purple/15">
+            <PlanIcon size={16} className="text-purple" />
+          </div>
+          <div>
+            <h4 className="text-sm font-semibold text-text-0 font-sans">{planLabel}</h4>
+            <div className="flex items-center gap-2 mt-0.5">
+              <PlanBadge plan={subscription.plan} status={subscription.status} cancelAtPeriodEnd={subscription.cancelAtPeriodEnd} />
+              {subscription.periodEnd && (
+                <span className="text-2xs text-text-3 font-sans">
+                  {subscription.cancelAtPeriodEnd ? 'Ends' : 'Renews'} {formatDate(subscription.periodEnd)}
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {subscription.features?.length > 0 && (
+        <FeatureList features={subscription.features} />
+      )}
+
+      {subscription.plan === 'team' && (
+        <SeatControl seats={subscription.seats || 1} onChange={updateSeats} />
+      )}
+
+      {subscription.status === 'past_due' && (
+        <div className="mt-3 flex items-center gap-2 rounded-md bg-warning/10 border border-warning/20 px-3 py-2">
+          <AlertTriangle size={14} className="text-warning shrink-0" />
+          <span className="text-2xs text-warning font-sans">There's an issue with your payment method.</span>
+        </div>
+      )}
+
+      <div className="flex gap-2 mt-4">
+        <Button size="sm" variant="ghost" onClick={openPortal} className="h-7 text-2xs gap-1.5 text-text-2 hover:text-accent">
+          <CreditCard size={12} />
+          Manage Subscription
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function PricingCard({ name, plan, price, interval, features, onUpgrade, highlighted }) {
+  const PlanIcon = plan === 'team' ? Users : Sparkles;
+  const perSeat = plan === 'team';
+
+  return (
+    <div className={cn(
+      'rounded-md border bg-surface-1 p-4 flex flex-col',
+      highlighted ? 'border-accent/40' : 'border-border-subtle',
+    )}>
+      <div className="flex items-center gap-2 mb-1">
+        <div className={cn(
+          'flex h-7 w-7 items-center justify-center rounded-md',
+          highlighted ? 'bg-accent/15' : 'bg-purple/15',
+        )}>
+          <PlanIcon size={14} className={highlighted ? 'text-accent' : 'text-purple'} />
+        </div>
+        <h4 className="text-sm font-semibold text-text-0 font-sans">{name}</h4>
+      </div>
+
+      <div className="mt-2 mb-3">
+        <span className="text-lg font-bold text-text-0 font-sans">${price}</span>
+        <span className="text-2xs text-text-3 font-sans">/{interval === 'year' ? 'yr' : 'mo'}{perSeat ? '/seat' : ''}</span>
+      </div>
+
+      <div className="flex-1 space-y-1.5 mb-4">
+        {features.map((key) => {
+          const f = FEATURE_LABELS[key] || { label: key };
+          return (
+            <div key={key} className="flex items-center gap-1.5 text-2xs text-text-2 font-sans">
+              <Check size={11} className="text-success shrink-0" />
+              {f.label}
+            </div>
+          );
+        })}
+      </div>
+
+      <Button
+        size="sm"
+        onClick={onUpgrade}
+        className={cn(
+          'h-8 text-xs font-semibold w-full',
+          highlighted
+            ? 'bg-accent/15 text-accent hover:bg-accent/25'
+            : 'bg-purple/15 text-purple hover:bg-purple/25',
+        )}
+      >
+        Upgrade
+      </Button>
+    </div>
+  );
+}
+
+export function SubscriptionPanel() {
+  const subscription = useGrooveStore((s) => s.subscription);
+  const authenticated = useGrooveStore((s) => s.marketplaceAuthenticated);
+  const fetchSubscriptionPlans = useGrooveStore((s) => s.fetchSubscriptionPlans);
+  const checkMarketplaceAuth = useGrooveStore((s) => s.checkMarketplaceAuth);
+  const startCheckout = useGrooveStore((s) => s.startCheckout);
+  const addToast = useGrooveStore((s) => s.addToast);
+
+  const [plans, setPlans] = useState(null);
+  const [billing, setBilling] = useState('monthly');
+  const [loading, setLoading] = useState(false);
+  const [planError, setPlanError] = useState(false);
+  const [verifying, setVerifying] = useState(false);
+
+  useEffect(() => {
+    if (authenticated && !subscription?.active) {
+      setVerifying(true);
+      checkMarketplaceAuth().finally(() => setVerifying(false));
+    }
+  }, [authenticated]);
+
+  useEffect(() => {
+    if (!subscription?.active && !verifying && authenticated) {
+      setLoading(true);
+      setPlanError(false);
+      fetchSubscriptionPlans()
+        .then((data) => setPlans(data))
+        .catch(() => setPlanError(true))
+        .finally(() => setLoading(false));
+    }
+  }, [subscription?.active, verifying, authenticated, fetchSubscriptionPlans]);
+
+  const handleUpgrade = async (priceId) => {
+    try {
+      await startCheckout(priceId);
+    } catch (err) {
+      if (err.status === 409) {
+        addToast('info', 'Already subscribed', 'Use Manage Subscription to switch plans');
+      }
+    }
+  };
+
+  if (subscription?.active) {
+    return (
+      <div className="py-2">
+        <ActivePlanCard subscription={subscription} />
+      </div>
+    );
+  }
+
+  if (verifying) {
+    return (
+      <div className="rounded-md border border-border-subtle bg-surface-1 p-4 flex items-center gap-3 my-2">
+        <div className="h-4 w-4 border-2 border-accent border-t-transparent rounded-full animate-spin" />
+        <span className="text-xs text-text-2 font-sans">Verifying subscription…</span>
+      </div>
+    );
+  }
+
+  if (!authenticated) {
+    return (
+      <div className="rounded-md border border-dashed border-border-subtle bg-surface-1/50 px-4 py-6 text-center my-2">
+        <Crown size={20} className="text-text-4 mx-auto mb-2" />
+        <p className="text-xs text-text-3 font-sans">Sign in to manage your subscription.</p>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="grid grid-cols-2 gap-3 py-2">
+        {[0, 1].map((i) => (
+          <div key={i} className="rounded-md border border-border-subtle bg-surface-1 p-4 h-52 animate-pulse" />
+        ))}
+      </div>
+    );
+  }
+
+  if (planError || !plans) {
+    return (
+      <div className="rounded-md border border-dashed border-border-subtle bg-surface-1/50 px-4 py-6 text-center my-2">
+        <Sparkles size={20} className="text-text-4 mx-auto mb-2" />
+        <p className="text-xs text-text-3 font-sans">Plans unavailable right now. Visit groovedev.ai/pro for details.</p>
+      </div>
+    );
+  }
+
+  const proPlan = plans.pro;
+  const teamPlan = plans.team;
+  const isAnnual = billing === 'annual';
+
+  return (
+    <div className="py-2">
+      <div className="flex justify-center mb-4">
+        <div className="flex bg-surface-0 rounded-md p-0.5 border border-border-subtle">
+          <button
+            onClick={() => setBilling('monthly')}
+            className={cn(
+              'px-3 py-1.5 text-2xs font-semibold font-sans rounded transition-all cursor-pointer',
+              billing === 'monthly' ? 'bg-accent/15 text-accent shadow-sm' : 'text-text-3 hover:text-text-1',
+            )}
+          >
+            Monthly
+          </button>
+          <button
+            onClick={() => setBilling('annual')}
+            className={cn(
+              'px-3 py-1.5 text-2xs font-semibold font-sans rounded transition-all cursor-pointer',
+              billing === 'annual' ? 'bg-accent/15 text-accent shadow-sm' : 'text-text-3 hover:text-text-1',
+            )}
+          >
+            Annual
+            <span className="ml-1 text-success">-20%</span>
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        {proPlan && (
+          <PricingCard
+            name="Pro"
+            plan="pro"
+            price={isAnnual ? proPlan.annual.price : proPlan.monthly.price}
+            interval={isAnnual ? 'year' : 'month'}
+            features={proPlan.features}
+            highlighted
+            onUpgrade={() => handleUpgrade(isAnnual ? proPlan.annual.priceId : proPlan.monthly.priceId)}
+          />
+        )}
+        {teamPlan && (
+          <PricingCard
+            name="Team"
+            plan="team"
+            price={isAnnual ? teamPlan.annual.price : teamPlan.monthly.price}
+            interval={isAnnual ? 'year' : 'month'}
+            features={teamPlan.features}
+            onUpgrade={() => handleUpgrade(isAnnual ? teamPlan.annual.priceId : teamPlan.monthly.priceId)}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/node_modules/@groove-dev/gui/src/views/teams.jsx

@@ -344,13 +344,13 @@ export default function TeamsView() {
         </TabsList>
       </div>
 
-      <TabsContent value="dashboard" className="flex-1 min-h-0">
+      <TabsContent value="dashboard" className="flex flex-col min-h-0">
         <TeamsDashboard />
       </TabsContent>
-      <TabsContent value="approvals" className="flex-1 min-h-0">
+      <TabsContent value="approvals" className="flex flex-col min-h-0">
         <ApprovalsTab />
       </TabsContent>
-      <TabsContent value="schedules" className="flex-1 min-h-0">
+      <TabsContent value="schedules" className="flex flex-col min-h-0">
         <SchedulesTab />
       </TabsContent>
     </Tabs>