groove-dev 0.27.15 → 0.27.18

package/packages/gui/src/components/pro/pro-gate.jsx

@@ -1,20 +1,27 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useGrooveStore } from '../../stores/groove';
 import { UpgradeCard } from './upgrade-card';
+import { isElectron } from '../../lib/electron';
 
-export function ProGate({ feature, description, children }) {
+export function ProGate({ feature, featureKey, description, children }) {
   const authenticated = useGrooveStore((s) => s.marketplaceAuthenticated);
-  const user = useGrooveStore((s) => s.marketplaceUser);
+  const subscription = useGrooveStore((s) => s.subscription);
+  const edition = useGrooveStore((s) => s.edition);
 
-  if (__GROOVE_EDITION__ !== 'pro') {
-    return <UpgradeCard feature={feature} description={description} variant="community" />;
+  if (edition !== 'pro') {
+    const variant = isElectron() ? 'community-electron' : 'community';
+    return <UpgradeCard feature={feature} description={description} variant={variant} />;
   }
 
   if (!authenticated) {
     return <UpgradeCard feature={feature} description={description} variant="sign-in" />;
   }
 
-  if (!user?.subscription?.active) {
+  if (!subscription?.active) {
+    return <UpgradeCard feature={feature} description={description} variant="subscribe" />;
+  }
+
+  if (featureKey && subscription?.plan !== 'pro' && !(subscription.features || []).includes(featureKey)) {
     return <UpgradeCard feature={feature} description={description} variant="subscribe" />;
   }
 

package/packages/gui/src/components/pro/upgrade-card.jsx

@@ -1,6 +1,6 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { Lock, Download, LogIn, Sparkles } from 'lucide-react';
-import { openExternal } from '../../lib/electron';
+import { isElectron, openExternal } from '../../lib/electron';
 import { useGrooveStore } from '../../stores/groove';
 
 const VARIANTS = {
@@ -10,6 +10,12 @@ const VARIANTS = {
     icon: Download,
     action: () => openExternal('https://groovedev.ai/download'),
   },
+  'community-electron': {
+    heading: 'Pro Feature',
+    cta: 'Upgrade to Pro',
+    icon: Sparkles,
+    action: () => useGrooveStore.getState().setUpgradeModalOpen(true),
+  },
   'sign-in': {
     heading: 'Sign in to unlock',
     cta: 'Sign in',
@@ -17,28 +23,29 @@ const VARIANTS = {
     action: () => useGrooveStore.getState().marketplaceLogin(),
   },
   subscribe: {
-    heading: 'Upgrade to Pro',
-    cta: 'Subscribe',
+    heading: 'Pro Feature',
+    cta: 'Upgrade to Pro',
     icon: Sparkles,
-    action: () => openExternal('https://groovedev.ai/pro'),
+    action: () => useGrooveStore.getState().setUpgradeModalOpen(true),
   },
 };
 
 export function UpgradeCard({ feature, description, variant = 'community' }) {
-  const v = VARIANTS[variant] || VARIANTS.community;
+  const resolvedVariant = variant === 'community' && isElectron() ? 'community-electron' : variant;
+  const v = VARIANTS[resolvedVariant] || VARIANTS.community;
   const CtaIcon = v.icon;
 
   return (
     <div className="rounded-lg border border-border-subtle bg-surface-1/50 px-5 py-6 text-center">
-      <div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-purple/10">
-        <Lock size={18} className="text-purple" />
+      <div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-accent/10">
+        <Lock size={18} className="text-accent" />
       </div>
       <h3 className="text-sm font-semibold text-text-1 font-sans">{v.heading}</h3>
       <p className="mt-1.5 text-2xs text-text-3 font-sans">{feature}</p>
       <p className="mt-1 text-2xs text-text-4 font-sans max-w-xs mx-auto">{description}</p>
       <button
         onClick={v.action}
-        className="mt-4 inline-flex items-center gap-1.5 h-7 px-4 rounded-full bg-purple/15 text-purple text-xs font-semibold font-sans hover:bg-purple/25 transition-colors cursor-pointer"
+        className="mt-4 inline-flex items-center gap-1.5 h-7 px-4 rounded-full bg-accent/15 text-accent text-xs font-semibold font-sans hover:bg-accent/25 transition-colors cursor-pointer"
       >
         <CtaIcon size={13} />
         {v.cta}

package/packages/gui/src/components/pro/upgrade-modal.jsx

@@ -0,0 +1,151 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useEffect } from 'react';
+import { Dialog, DialogContent } from '../ui/dialog';
+import { useGrooveStore } from '../../stores/groove';
+import { openExternal } from '../../lib/electron';
+import { cn } from '../../lib/cn';
+import { Sparkles, Check, Radio, Server, Cloud, LogIn } from 'lucide-react';
+
+const PRO_FEATURES = [
+  { icon: Radio, label: 'SSH Tunnel', desc: 'Connect to remote servers' },
+  { icon: Server, label: 'Federation', desc: 'Multi-machine daemon pairing' },
+  { icon: Cloud, label: 'Cloud Teams', desc: 'Coming soon' },
+];
+
+export function UpgradeModal() {
+  const open = useGrooveStore(s => s.upgradeModalOpen);
+  const setOpen = useGrooveStore(s => s.setUpgradeModalOpen);
+  const authenticated = useGrooveStore(s => s.marketplaceAuthenticated);
+  const marketplaceLogin = useGrooveStore(s => s.marketplaceLogin);
+  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);
+
+  useEffect(() => {
+    if (open && !plans) {
+      useGrooveStore.getState().fetchSubscriptionPlans()
+        .then(p => setPlans(p))
+        .catch(() => {});
+    }
+  }, [open, plans]);
+
+  const price = plans?.pro?.[billing];
+  const displayPrice = billing === 'annual'
+    ? `$${Math.round((price?.price || 96) / 12)}/mo`
+    : `$${price?.price || 10}/mo`;
+
+  async function handleSubscribe() {
+    if (!authenticated) {
+      marketplaceLogin();
+      return;
+    }
+    if (!price?.priceId) {
+      openExternal('https://groovedev.ai/pro');
+      setOpen(false);
+      return;
+    }
+    setLoading(true);
+    try {
+      await startCheckout(price.priceId);
+      setOpen(false);
+    } catch (err) {
+      if (err.status === 401 || err.message?.includes('Not authenticated')) {
+        addToast('info', 'Please sign in first');
+        marketplaceLogin();
+      } else if (err.status === 409) {
+        addToast('info', 'You already have a subscription');
+        setOpen(false);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent title="Upgrade to Pro" className="max-w-[440px]">
+        <div className="px-6 py-5">
+          <div className="text-center mb-6">
+            <div className="mx-auto mb-3 w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center">
+              <Sparkles size={22} className="text-accent" />
+            </div>
+            <h2 className="text-lg font-bold text-text-0">Upgrade to Groove Pro</h2>
+            <p className="text-sm text-text-2 mt-1">Unlock powerful features for your AI workflow</p>
+          </div>
+
+          <div className="space-y-3 mb-6">
+            {PRO_FEATURES.map(f => (
+              <div key={f.label} className="flex items-center gap-3">
+                <div className="w-8 h-8 rounded-md bg-surface-4 flex items-center justify-center flex-shrink-0">
+                  <f.icon size={15} className="text-accent" />
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-text-0">{f.label}</p>
+                  <p className="text-2xs text-text-3">{f.desc}</p>
+                </div>
+                <Check size={14} className="text-success ml-auto flex-shrink-0" />
+              </div>
+            ))}
+          </div>
+
+          <div className="flex gap-1 mb-5 bg-surface-3 p-0.5 rounded-md">
+            <button
+              type="button"
+              onClick={() => setBilling('monthly')}
+              className={cn(
+                'flex-1 h-8 rounded text-xs font-medium transition-colors cursor-pointer',
+                billing === 'monthly' ? 'bg-surface-5 text-text-0' : 'text-text-3 hover:text-text-1',
+              )}
+            >
+              Monthly
+            </button>
+            <button
+              type="button"
+              onClick={() => setBilling('annual')}
+              className={cn(
+                'flex-1 h-8 rounded text-xs font-medium transition-colors cursor-pointer',
+                billing === 'annual' ? 'bg-surface-5 text-text-0' : 'text-text-3 hover:text-text-1',
+              )}
+            >
+              Annual
+              <span className="ml-1 text-success text-2xs">Save 20%</span>
+            </button>
+          </div>
+
+          <div className="text-center mb-5">
+            <span className="text-3xl font-bold text-text-0">{displayPrice}</span>
+            {billing === 'annual' && (
+              <p className="text-2xs text-text-3 mt-1">Billed ${price?.price || 96}/year</p>
+            )}
+          </div>
+
+          <button
+            type="button"
+            onClick={handleSubscribe}
+            disabled={loading}
+            className="w-full h-10 rounded-lg bg-accent text-white font-semibold text-sm hover:bg-accent/90 transition-colors cursor-pointer disabled:opacity-50 disabled:pointer-events-none flex items-center justify-center gap-2"
+          >
+            {loading ? (
+              'Processing...'
+            ) : !authenticated ? (
+              <><LogIn size={15} /> Sign in to subscribe</>
+            ) : (
+              <><Sparkles size={15} /> Subscribe — {displayPrice}</>
+            )}
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setOpen(false)}
+            className="w-full mt-2 text-xs text-text-4 hover:text-text-2 transition-colors cursor-pointer py-1"
+          >
+            Maybe later
+          </button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/packages/gui/src/components/settings/federation-activity.jsx

@@ -0,0 +1,98 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { Badge } from '../ui/badge';
+import { ScrollArea } from '../ui/scroll-area';
+import { cn } from '../../lib/cn';
+import { timeAgo } from '../../lib/format';
+import {
+  ArrowUpRight, ArrowDownLeft, MessageSquare,
+} from 'lucide-react';
+
+const FILTERS = ['All', 'Sent', 'Received'];
+
+export function FederationActivity() {
+  const pouchLog = useGrooveStore((s) => s.federation.pouchLog);
+  const [filter, setFilter] = useState('All');
+
+  const filtered = filter === 'All'
+    ? pouchLog
+    : pouchLog.filter((e) => e.direction === filter.toLowerCase());
+
+  const entries = [...filtered].reverse().slice(0, 200);
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <MessageSquare size={12} className="text-accent" />
+          <span className="text-xs font-semibold text-text-1 font-sans">Activity</span>
+          {pouchLog.length > 0 && (
+            <Badge variant="default" className="text-2xs">{pouchLog.length}</Badge>
+          )}
+        </div>
+        <div className="flex bg-surface-0 rounded-md p-0.5 border border-border-subtle">
+          {FILTERS.map((f) => (
+            <button
+              key={f}
+              onClick={() => setFilter(f)}
+              className={cn(
+                'px-2.5 py-1 text-2xs font-semibold font-sans rounded transition-all cursor-pointer',
+                filter === f
+                  ? 'bg-accent/15 text-accent shadow-sm'
+                  : 'text-text-3 hover:text-text-1',
+              )}
+            >
+              {f}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {entries.length === 0 ? (
+        <div className="rounded-lg border border-dashed border-border-subtle bg-surface-1/50 px-4 py-6 text-center">
+          <MessageSquare size={18} className="text-text-4 mx-auto mb-1.5" />
+          <p className="text-2xs text-text-4 font-sans">
+            {filter === 'All'
+              ? 'No diplomatic pouches exchanged yet.'
+              : `No ${filter.toLowerCase()} pouches.`}
+          </p>
+        </div>
+      ) : (
+        <ScrollArea className="max-h-80">
+          <div className="relative pl-5">
+            <div className="absolute left-[7px] top-2 bottom-2 w-px bg-border-subtle" />
+
+            {entries.map((entry, i) => {
+              const isSent = entry.direction === 'sent';
+              return (
+                <div key={entry.id || i} className="relative flex items-start gap-3 pb-3 last:pb-0">
+                  <div className={cn(
+                    'absolute left-[-13px] top-1.5 w-2.5 h-2.5 rounded-full border-2 border-surface-2 z-10',
+                    isSent ? 'bg-accent' : 'bg-success',
+                  )} />
+                  <div className="flex items-center gap-2 flex-1 rounded-md bg-surface-1 px-3 py-2 min-w-0">
+                    {isSent ? (
+                      <ArrowUpRight size={11} className="text-accent flex-shrink-0" />
+                    ) : (
+                      <ArrowDownLeft size={11} className="text-success flex-shrink-0" />
+                    )}
+                    <span className="text-2xs text-text-1 font-sans truncate flex-1">
+                      {entry.contractType || entry.type || 'message'}
+                    </span>
+                    <span className="text-2xs text-text-4 font-mono truncate max-w-24">
+                      {entry.peerId || ''}
+                    </span>
+                    <span className="text-2xs text-text-3 font-sans flex-shrink-0">
+                      {timeAgo(entry.timestamp || entry.ts)}
+                    </span>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </ScrollArea>
+      )}
+    </div>
+  );
+}

package/packages/gui/src/components/settings/federation-panel.jsx

@@ -0,0 +1,290 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useEffect, useMemo } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/tabs';
+import { Button } from '../ui/button';
+import { Badge } from '../ui/badge';
+import { Input } from '../ui/input';
+import { StatusDot } from '../ui/status-dot';
+import { cn } from '../../lib/cn';
+import { FederationPeers } from './federation-peers';
+import { FederationActivity } from './federation-activity';
+import { FederationWizard } from './federation-wizard';
+import {
+  Shield, Plus, Trash2, Loader2, Globe, Users, Search, ChevronUp,
+} from 'lucide-react';
+
+function statusBadge(status) {
+  switch (status) {
+    case 'mutual': return <Badge variant="success" className="text-2xs gap-1"><StatusDot status="running" size="sm" /> Mutual</Badge>;
+    case 'connected': return <Badge variant="info" className="text-2xs">Connected</Badge>;
+    default: return <Badge variant="default" className="text-2xs">Waiting</Badge>;
+  }
+}
+
+function WhitelistTab() {
+  const whitelist = useGrooveStore((s) => s.federation.whitelist);
+  const addToWhitelist = useGrooveStore((s) => s.addToWhitelist);
+  const removeFromWhitelist = useGrooveStore((s) => s.removeFromWhitelist);
+
+  const [showForm, setShowForm] = useState(false);
+  const [ip, setIp] = useState('');
+  const [port, setPort] = useState('31415');
+  const [serverName, setServerName] = useState('');
+  const [adding, setAdding] = useState(false);
+  const [search, setSearch] = useState('');
+
+  async function handleAdd(e) {
+    e.preventDefault();
+    if (!ip.trim()) return;
+    setAdding(true);
+    try {
+      await addToWhitelist(ip.trim(), parseInt(port, 10) || 31415, serverName.trim() || undefined);
+      setIp('');
+      setPort('31415');
+      setServerName('');
+      setShowForm(false);
+    } catch {}
+    setAdding(false);
+  }
+
+  const filtered = useMemo(() => {
+    if (!search.trim()) return whitelist;
+    const q = search.toLowerCase();
+    return whitelist.filter((entry) => {
+      const key = typeof entry === 'string' ? entry : entry.ip;
+      const name = typeof entry === 'object' ? entry.name : '';
+      return key?.toLowerCase().includes(q) || name?.toLowerCase().includes(q);
+    });
+  }, [whitelist, search]);
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Shield size={12} className="text-accent" />
+          <span className="text-xs font-semibold text-text-1 font-sans">Whitelist</span>
+          {whitelist.length > 0 && (
+            <Badge variant="default" className="text-2xs">{whitelist.length}</Badge>
+          )}
+        </div>
+        <Button
+          size="sm"
+          variant={showForm ? 'ghost' : 'primary'}
+          onClick={() => setShowForm(!showForm)}
+          className="h-7 text-2xs gap-1.5"
+        >
+          {showForm ? (
+            <><ChevronUp size={11} /> Hide</>
+          ) : (
+            <><Plus size={11} /> Add Server</>
+          )}
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        {/* Add form card */}
+        {showForm && (
+          <form onSubmit={handleAdd} className="rounded-lg border border-border-subtle bg-surface-1 px-4 py-3.5">
+            <div className="flex items-center gap-2 mb-3">
+              <div className="w-6 h-6 rounded bg-accent/8 flex items-center justify-center flex-shrink-0">
+                <Plus size={12} className="text-accent" />
+              </div>
+              <span className="text-[13px] font-medium text-text-0 font-sans">New Server</span>
+            </div>
+            <div className="space-y-2.5">
+              <div>
+                <label className="text-2xs font-semibold text-text-2 font-sans mb-1 block">Name</label>
+                <Input
+                  placeholder="Server name"
+                  value={serverName}
+                  onChange={(e) => setServerName(e.target.value)}
+                  className="h-7 text-xs"
+                />
+              </div>
+              <div>
+                <label className="text-2xs font-semibold text-text-2 font-sans mb-1 block">IP Address</label>
+                <Input
+                  placeholder="100.64.0.2"
+                  value={ip}
+                  onChange={(e) => setIp(e.target.value)}
+                  mono
+                  className="h-7 text-xs"
+                />
+              </div>
+              <div>
+                <label className="text-2xs font-semibold text-text-2 font-sans mb-1 block">Port</label>
+                <Input
+                  placeholder="31415"
+                  value={port}
+                  onChange={(e) => setPort(e.target.value)}
+                  mono
+                  className="h-7 text-xs w-28"
+                />
+              </div>
+              <div className="pt-1">
+                <Button type="submit" variant="primary" size="sm" disabled={adding || !ip.trim()} className="h-7 text-2xs gap-1">
+                  {adding ? <Loader2 size={11} className="animate-spin" /> : <Plus size={11} />}
+                  Add to Whitelist
+                </Button>
+              </div>
+            </div>
+          </form>
+        )}
+
+        {/* Server list card */}
+        <div className={cn(
+          'rounded-lg border border-border-subtle bg-surface-1 px-4 py-3.5',
+          !showForm && 'col-span-2',
+        )}>
+          <div className="flex items-center gap-2 mb-3">
+            <div className="w-6 h-6 rounded bg-accent/8 flex items-center justify-center flex-shrink-0">
+              <Globe size={12} className="text-accent" />
+            </div>
+            <span className="text-[13px] font-medium text-text-0 font-sans">Servers</span>
+            {whitelist.length >= 5 && (
+              <div className="relative ml-auto">
+                <Search size={10} className="absolute left-2 top-1/2 -translate-y-1/2 text-text-4" />
+                <input
+                  type="text"
+                  placeholder="Filter…"
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  className="h-6 pl-6 pr-2 w-32 text-2xs font-sans bg-surface-0 border border-border-subtle rounded-md text-text-0 placeholder:text-text-4 focus:outline-none focus:border-accent"
+                />
+              </div>
+            )}
+          </div>
+
+          {filtered.length === 0 && whitelist.length === 0 ? (
+            <div className="px-2 py-4 text-center">
+              <Globe size={16} className="text-text-4 mx-auto mb-1.5" />
+              <p className="text-2xs text-text-4 font-sans">No peers whitelisted yet.</p>
+            </div>
+          ) : filtered.length === 0 ? (
+            <div className="text-2xs text-text-4 font-sans py-3 text-center">No servers match your filter.</div>
+          ) : (
+            <div className="space-y-1.5">
+              {filtered.map((entry) => {
+                const key = typeof entry === 'string' ? entry : entry.ip;
+                const entryName = typeof entry === 'object' ? entry.name : null;
+                const status = typeof entry === 'object' ? entry.status : 'waiting';
+                const entryPort = typeof entry === 'object' ? entry.port : null;
+
+                return (
+                  <div key={key} className="flex items-center gap-2.5 px-2.5 py-2 rounded-md bg-surface-0 border border-border-subtle">
+                    <div className="flex-1 min-w-0">
+                      {entryName && <span className="text-xs font-sans font-medium text-text-0 block truncate">{entryName}</span>}
+                      <span className={cn('font-mono truncate block', entryName ? 'text-2xs text-text-3' : 'text-xs text-text-1')}>
+                        {key}{entryPort ? `:${entryPort}` : ''}
+                      </span>
+                    </div>
+                    {statusBadge(status)}
+                    <button
+                      onClick={() => removeFromWhitelist(key)}
+                      className="p-1 rounded text-text-4 hover:text-danger hover:bg-danger/10 cursor-pointer transition-colors flex-shrink-0"
+                      title="Remove"
+                    >
+                      <Trash2 size={11} />
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function AmbassadorsTab() {
+  const ambassadors = useGrooveStore((s) => s.federation.ambassadors);
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <Users size={12} className="text-accent" />
+        <span className="text-xs font-semibold text-text-1 font-sans">Ambassadors</span>
+        {ambassadors.length > 0 && (
+          <Badge variant="info" className="text-2xs">{ambassadors.length}</Badge>
+        )}
+      </div>
+
+      {ambassadors.length === 0 ? (
+        <div className="rounded-lg border border-dashed border-border-subtle bg-surface-1/50 px-4 py-6 text-center">
+          <Users size={18} className="text-text-4 mx-auto mb-1.5" />
+          <p className="text-2xs text-text-4 font-sans">No active ambassadors. Ambassadors appear when agents are shared across federated peers.</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-2 gap-2">
+          {ambassadors.map((amb) => (
+            <div key={amb.id || amb.agentId} className="rounded-lg border border-border-subtle bg-surface-1 px-3.5 py-3">
+              <div className="flex items-center gap-2 mb-1.5">
+                <StatusDot status={amb.status === 'active' ? 'running' : 'stopped'} size="sm" />
+                <span className="text-xs font-sans font-medium text-text-0 truncate flex-1">
+                  {amb.name || amb.agentId || amb.id}
+                </span>
+                {amb.role && (
+                  <Badge variant="purple" className="text-2xs">{amb.role}</Badge>
+                )}
+              </div>
+              <div className="flex items-center justify-between text-2xs">
+                {amb.peerId ? (
+                  <span className="text-text-3 font-mono truncate max-w-28">{amb.peerId}</span>
+                ) : (
+                  <span className="text-text-4 font-sans">Local</span>
+                )}
+                <Badge variant={amb.status === 'active' ? 'success' : 'default'} className="text-2xs">
+                  {amb.status || 'idle'}
+                </Badge>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function FederationPanel() {
+  const fetchFederationStatus = useGrooveStore((s) => s.fetchFederationStatus);
+  const fetchPouchLog = useGrooveStore((s) => s.fetchPouchLog);
+  const [wizardOpen, setWizardOpen] = useState(false);
+
+  useEffect(() => {
+    fetchFederationStatus();
+    fetchPouchLog();
+  }, []);
+
+  return (
+    <div>
+      <Tabs defaultValue="whitelist">
+        <TabsList className="mb-4">
+          <TabsTrigger value="whitelist" className="text-xs px-3 py-1.5">Whitelist</TabsTrigger>
+          <TabsTrigger value="peers" className="text-xs px-3 py-1.5">Peers</TabsTrigger>
+          <TabsTrigger value="ambassadors" className="text-xs px-3 py-1.5">Ambassadors</TabsTrigger>
+          <TabsTrigger value="activity" className="text-xs px-3 py-1.5">Activity</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="whitelist">
+          <WhitelistTab />
+        </TabsContent>
+
+        <TabsContent value="peers">
+          <FederationPeers onOpenWizard={() => setWizardOpen(true)} />
+        </TabsContent>
+
+        <TabsContent value="ambassadors">
+          <AmbassadorsTab />
+        </TabsContent>
+
+        <TabsContent value="activity">
+          <FederationActivity />
+        </TabsContent>
+      </Tabs>
+
+      <FederationWizard open={wizardOpen} onOpenChange={setWizardOpen} />
+    </div>
+  );
+}