groove-dev 0.27.107 → 0.27.108

package/packages/gui/package.json

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

package/packages/gui/src/components/layout/command-palette.jsx

@@ -4,7 +4,7 @@ import { useGrooveStore } from '../../stores/groove';
 import {
   Network, Code2, ChartSpline, Puzzle, Users, Plus,
   RotateCw, Skull, MessageSquare, Terminal, Newspaper,
-  Search, Radio, ExternalLink, FolderOpen, Globe,
+  Search, Radio, ExternalLink, FolderOpen, Globe, Shield,
 } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -16,6 +16,7 @@ const STATIC_COMMANDS = [
   { id: 'nav:marketplace', label: 'Go to Marketplace', icon: Puzzle,     category: 'Navigation', action: (s) => { s.setActiveView('marketplace'); } },
   { id: 'nav:teams',       label: 'Go to Teams',       icon: Users,      category: 'Navigation', action: (s) => { s.setActiveView('teams'); } },
   { id: 'nav:federation', label: 'Go to Federation',  icon: Globe,      category: 'Navigation', action: (s) => { s.setActiveView('federation'); } },
+  { id: 'action:whitelist', label: 'Add to Federation Whitelist', icon: Shield, category: 'Federation', action: (s) => { s.setActiveView('federation'); } },
   { id: 'action:spawn',    label: 'Spawn Agent',       icon: Plus,       category: 'Actions',    action: (s) => { s.openDetail({ type: 'spawn' }); } },
   { id: 'action:terminal', label: 'Toggle Terminal',   icon: Terminal,   category: 'Actions',    action: (s) => { s.setTerminalVisible(!s.terminalVisible); }, shortcut: 'Cmd+J' },
   { id: 'action:journalist', label: 'Toggle Journalist', icon: Newspaper, category: 'Actions',  action: (s) => {

package/packages/gui/src/components/layout/status-bar.jsx

@@ -1,5 +1,5 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { Terminal, BookOpen, Radio, Plug, Globe, ArrowUpCircle, X, Unplug } from 'lucide-react';
+import { Terminal, BookOpen, Radio, Plug, Globe, ArrowUpCircle, X, Unplug, Shield } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { StatusDot } from '../ui/status-dot';
 import { Badge } from '../ui/badge';
@@ -22,7 +22,6 @@ export function StatusBar({
   const updateReady = useGrooveStore((s) => s.updateReady);
   const updateProgress = useGrooveStore((s) => s.updateProgress);
   const setUpdateModalOpen = useGrooveStore((s) => s.setUpdateModalOpen);
-  const subscription = useGrooveStore((s) => s.subscription);
   const navigate = useGrooveStore((s) => s.setActiveView);
   const activeTunnel = savedTunnels.find((t) => t.active);
   const electron = isElectron();
@@ -71,6 +70,13 @@ export function StatusBar({
                 <span className="text-text-4">{activeTunnel.latencyMs}ms</span>
               )}
             </button>
+            <button
+              onClick={() => useGrooveStore.getState().addToWhitelist(activeTunnel.host)}
+              className="p-0.5 text-text-4 hover:text-accent cursor-pointer transition-colors rounded"
+              title="Add to Federation Whitelist"
+            >
+              <Shield size={10} />
+            </button>
             <button
               onClick={() => useGrooveStore.getState().disconnectTunnel(activeTunnel.id)}
               className="p-0.5 text-text-4 hover:text-danger cursor-pointer transition-colors rounded"
@@ -98,7 +104,7 @@ export function StatusBar({
             <span>Connect</span>
           </button>
         )}
-        {subscription?.active && (subscription.plan === 'pro' || subscription.plan === 'team') && (
+        {connected && (
           <button
             onClick={() => navigate('federation')}
             className="flex items-center gap-1.5 text-text-4 hover:text-text-1 cursor-pointer transition-colors"

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

@@ -22,7 +22,7 @@ function statusBadge(status) {
   }
 }
 
-function WhitelistTab() {
+export function WhitelistTab() {
   const whitelist = useGrooveStore((s) => s.federation.whitelist);
   const addToWhitelist = useGrooveStore((s) => s.addToWhitelist);
   const removeFromWhitelist = useGrooveStore((s) => s.removeFromWhitelist);
@@ -198,7 +198,7 @@ function WhitelistTab() {
   );
 }
 
-function AmbassadorsTab() {
+export function AmbassadorsTab() {
   const ambassadors = useGrooveStore((s) => s.federation.ambassadors);
 
   return (

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

@@ -22,6 +22,8 @@ export function FederationPeers({ onOpenWizard }) {
   const connections = useGrooveStore((s) => s.federation.connections);
   const peers = useGrooveStore((s) => s.federation.peers);
   const sendPouch = useGrooveStore((s) => s.sendPouch);
+  const disconnectPeer = useGrooveStore((s) => s.disconnectPeer);
+  const addToast = useGrooveStore((s) => s.addToast);
   const [sendingTo, setSendingTo] = useState(null);
 
   const allPeers = peers.length > 0 ? peers : connections;
@@ -97,7 +99,12 @@ export function FederationPeers({ onOpenWizard }) {
                 </div>
 
                 <div className="flex items-center gap-1.5 mt-3 pt-2.5 border-t border-border-subtle">
-                  <Button size="sm" variant="ghost" className="h-6 text-2xs gap-1 text-text-2">
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    className="h-6 text-2xs gap-1 text-text-2"
+                    onClick={() => addToast('info', name, `ID: ${id}\nIP: ${ip}${peer.port ? `:${peer.port}` : ''}\nLatency: ${latency != null ? `${latency}ms` : 'N/A'}\nState: ${state}`)}
+                  >
                     <Eye size={10} />
                     Details
                   </Button>
@@ -111,7 +118,12 @@ export function FederationPeers({ onOpenWizard }) {
                     <Send size={10} />
                     Send Pouch
                   </Button>
-                  <Button size="sm" variant="ghost" className="h-6 text-2xs gap-1 text-danger/70 hover:text-danger ml-auto">
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    className="h-6 text-2xs gap-1 text-danger/70 hover:text-danger ml-auto"
+                    onClick={() => disconnectPeer(id)}
+                  >
                     <Unplug size={10} />
                     Disconnect
                   </Button>

package/packages/gui/src/components/settings/quick-connect.jsx

@@ -25,6 +25,15 @@ export function QuickConnect() {
     setConnectingId(id);
     try {
       await useGrooveStore.getState().connectTunnel(id);
+      const tunnel = savedTunnels.find((t) => t.id === id);
+      if (tunnel?.host) {
+        addToast('info', `Add ${tunnel.host} to Federation Whitelist?`, '', {
+          action: {
+            label: 'Add',
+            onClick: () => useGrooveStore.getState().addToWhitelist(tunnel.host),
+          },
+        });
+      }
       toggle();
     } catch (err) {
       let detail = err?.message || 'Unknown error';

package/packages/gui/src/stores/groove.js

@@ -2660,6 +2660,16 @@ export const useGrooveStore = create((set, get) => ({
     }
   },
 
+  async disconnectPeer(peerId) {
+    try {
+      await api.delete(`/federation/peers/${encodeURIComponent(peerId)}`);
+      get().addToast('info', 'Peer disconnected');
+      get().fetchFederationStatus();
+    } catch (err) {
+      get().addToast('error', 'Disconnect failed', err.message);
+    }
+  },
+
   // ── Training Data ─────────────────────────────────────────
 
   async setTrainingOptIn(enabled) {

package/packages/gui/src/views/federation.jsx

@@ -1,37 +1,78 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useGrooveStore } from '../stores/groove';
-import { FederationPanel } from '../components/settings/federation-panel';
-import { ProGate } from '../components/pro/pro-gate';
+import { FederationPeers } from '../components/settings/federation-peers';
+import { FederationActivity } from '../components/settings/federation-activity';
+import { FederationWizard } from '../components/settings/federation-wizard';
+import { WhitelistTab, AmbassadorsTab } from '../components/settings/federation-panel';
+import { Button } from '../components/ui/button';
 import { ScrollArea } from '../components/ui/scroll-area';
-import { Globe } from 'lucide-react';
+import { Globe, Plus } from 'lucide-react';
 
 export default function FederationView() {
   const fetchFederationStatus = useGrooveStore((s) => s.fetchFederationStatus);
+  const fetchPouchLog = useGrooveStore((s) => s.fetchPouchLog);
+  const peers = useGrooveStore((s) => s.federation.peers);
+  const connections = useGrooveStore((s) => s.federation.connections);
+  const whitelist = useGrooveStore((s) => s.federation.whitelist);
+  const [wizardOpen, setWizardOpen] = useState(false);
+
+  const peerCount = (peers.length > 0 ? peers : connections).length;
 
   useEffect(() => {
     fetchFederationStatus();
+    fetchPouchLog();
   }, []);
 
   return (
     <div className="flex flex-col h-full bg-surface-0">
-      <div className="flex items-center gap-3 px-6 py-4 border-b border-border">
-        <div className="w-8 h-8 rounded-md bg-accent/10 flex items-center justify-center">
-          <Globe size={16} className="text-accent" />
-        </div>
-        <div>
-          <h1 className="text-sm font-semibold text-text-0 font-sans">Federation</h1>
-          <p className="text-2xs text-text-3 font-sans">Connect to remote Groove daemons</p>
+      {/* Hero strip */}
+      <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-md bg-accent/10 flex items-center justify-center">
+            <Globe size={16} className="text-accent" />
+          </div>
+          <div>
+            <h1 className="text-sm font-semibold text-text-0 font-sans">Federation</h1>
+            <p className="text-2xs text-text-3 font-sans">
+              {peerCount} peer{peerCount !== 1 ? 's' : ''} &middot; {whitelist.length} whitelisted
+            </p>
+          </div>
         </div>
+        <Button size="sm" variant="primary" onClick={() => setWizardOpen(true)} className="h-8 text-xs gap-1.5">
+          <Plus size={12} />
+          Add Peer
+        </Button>
       </div>
 
+      {/* Content */}
       <ScrollArea className="flex-1">
-        <div className="max-w-2xl mx-auto px-6 py-5">
-          <ProGate feature="Federation" featureKey="federation" description="Daemon-to-daemon federation over Tailscale mesh for multi-machine agent coordination">
-            <FederationPanel />
-          </ProGate>
+        <div className="p-6">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+            {/* Left: Peers + Activity (stacked) */}
+            <div className="lg:col-span-2 space-y-4">
+              <div className="rounded-lg border border-border-subtle bg-surface-1 p-4">
+                <FederationPeers onOpenWizard={() => setWizardOpen(true)} />
+              </div>
+              <div className="rounded-lg border border-border-subtle bg-surface-1 p-4">
+                <FederationActivity />
+              </div>
+            </div>
+
+            {/* Right: Whitelist + Ambassadors (stacked) */}
+            <div className="space-y-4">
+              <div className="rounded-lg border border-border-subtle bg-surface-1 p-4">
+                <WhitelistTab />
+              </div>
+              <div className="rounded-lg border border-border-subtle bg-surface-1 p-4">
+                <AmbassadorsTab />
+              </div>
+            </div>
+          </div>
         </div>
       </ScrollArea>
+
+      <FederationWizard open={wizardOpen} onOpenChange={setWizardOpen} />
     </div>
   );
 }