groove-dev 0.27.15 → 0.27.18

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

@@ -0,0 +1,126 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { Button } from '../ui/button';
+import { Badge } from '../ui/badge';
+import { StatusDot } from '../ui/status-dot';
+import { cn } from '../../lib/cn';
+import {
+  Server, Link2, Send, Unplug, Eye, Plus, Wifi,
+} from 'lucide-react';
+
+function connectionBadge(state) {
+  switch (state) {
+    case 'established': return <Badge variant="success" className="text-2xs gap-1"><StatusDot status="running" size="sm" /> Connected</Badge>;
+    case 'connecting': return <Badge variant="warning" className="text-2xs" dot="pulse">Connecting</Badge>;
+    case 'error': return <Badge variant="danger" className="text-2xs">Error</Badge>;
+    default: return <Badge variant="default" className="text-2xs">Unknown</Badge>;
+  }
+}
+
+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 [sendingTo, setSendingTo] = useState(null);
+
+  const allPeers = peers.length > 0 ? peers : connections;
+
+  async function handleSendPouch(peerId) {
+    setSendingTo(peerId);
+    try {
+      await sendPouch(peerId, { type: 'ping' });
+    } catch {}
+    setSendingTo(null);
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Server size={12} className="text-accent" />
+          <span className="text-xs font-semibold text-text-1 font-sans">Connected Peers</span>
+          {allPeers.length > 0 && (
+            <Badge variant="success" className="text-2xs">{allPeers.length}</Badge>
+          )}
+        </div>
+        <Button size="sm" variant="primary" onClick={onOpenWizard} className="h-7 text-2xs gap-1.5">
+          <Plus size={11} />
+          Pair New Peer
+        </Button>
+      </div>
+
+      {allPeers.length === 0 ? (
+        <div className="rounded-lg border border-dashed border-border-subtle bg-surface-1/50 px-4 py-8 text-center">
+          <Link2 size={20} className="text-text-4 mx-auto mb-2" />
+          <p className="text-xs text-text-3 font-sans mb-1">No peers connected</p>
+          <p className="text-2xs text-text-4 font-sans mb-3">Pair with a remote Groove daemon to share agents and coordinate work.</p>
+          <Button size="sm" variant="outline" onClick={onOpenWizard} className="h-7 text-2xs gap-1.5">
+            <Plus size={11} />
+            Pair Your First Peer
+          </Button>
+        </div>
+      ) : (
+        <div className="grid gap-2">
+          {allPeers.map((peer) => {
+            const id = peer.peerId || peer.ip || peer.id;
+            const name = peer.name || peer.peerId || 'Unknown Peer';
+            const state = peer.state || peer.status || 'unknown';
+            const ip = peer.ip || peer.address || '';
+            const latency = peer.latency;
+
+            return (
+              <div key={id} className="rounded-md border border-border-subtle bg-surface-1 p-3">
+                <div className="flex items-start gap-3">
+                  <div className="flex h-8 w-8 items-center justify-center rounded-md bg-accent/10 flex-shrink-0 mt-0.5">
+                    <Server size={14} className="text-accent" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-0.5">
+                      <span className="text-xs font-semibold text-text-0 font-sans truncate">{name}</span>
+                      {connectionBadge(state)}
+                    </div>
+                    <div className="flex items-center gap-3 text-2xs text-text-3">
+                      {ip && (
+                        <span className="font-mono truncate">{ip}{peer.port ? `:${peer.port}` : ''}</span>
+                      )}
+                      {latency != null && (
+                        <span className="flex items-center gap-1 font-sans">
+                          <Wifi size={9} className={cn(
+                            latency < 100 ? 'text-success' : latency < 300 ? 'text-warning' : 'text-danger'
+                          )} />
+                          {latency}ms
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </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">
+                    <Eye size={10} />
+                    Details
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    className="h-6 text-2xs gap-1 text-text-2"
+                    disabled={sendingTo === id}
+                    onClick={() => handleSendPouch(id)}
+                  >
+                    <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">
+                    <Unplug size={10} />
+                    Disconnect
+                  </Button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,293 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { Dialog, DialogContent } from '../ui/dialog';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Badge } from '../ui/badge';
+import { StatusDot } from '../ui/status-dot';
+import { cn } from '../../lib/cn';
+import {
+  Link2, Loader2, Check, Server, ArrowRight, Wifi, AlertCircle,
+} from 'lucide-react';
+
+const STEPS = [
+  { label: 'Connect', icon: Link2 },
+  { label: 'Verify', icon: Server },
+  { label: 'Paired', icon: Check },
+];
+
+function StepIndicator({ current }) {
+  return (
+    <div className="flex items-center justify-center gap-2 mb-6">
+      {STEPS.map((step, i) => {
+        const done = i < current;
+        const active = i === current;
+        const Icon = step.icon;
+        return (
+          <div key={step.label} className="flex items-center gap-2">
+            {i > 0 && (
+              <div className={cn(
+                'w-8 h-px',
+                done ? 'bg-accent' : 'bg-border-subtle',
+              )} />
+            )}
+            <div className="flex items-center gap-1.5">
+              <div className={cn(
+                'w-6 h-6 rounded-full flex items-center justify-center transition-colors',
+                done ? 'bg-accent text-white' : active ? 'bg-accent/15 text-accent border border-accent/30' : 'bg-surface-3 text-text-4',
+              )}>
+                {done ? <Check size={12} /> : <Icon size={12} />}
+              </div>
+              <span className={cn(
+                'text-2xs font-semibold font-sans',
+                active ? 'text-text-0' : done ? 'text-accent' : 'text-text-4',
+              )}>
+                {step.label}
+              </span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function FederationWizard({ open, onOpenChange }) {
+  const addToWhitelist = useGrooveStore((s) => s.addToWhitelist);
+  const fetchFederationStatus = useGrooveStore((s) => s.fetchFederationStatus);
+
+  const [step, setStep] = useState(0);
+  const [ip, setIp] = useState('');
+  const [port, setPort] = useState('31415');
+  const [name, setName] = useState('');
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState(null);
+  const [pairing, setPairing] = useState(false);
+  const [error, setError] = useState(null);
+  const [remoteInfo, setRemoteInfo] = useState(null);
+
+  function reset() {
+    setStep(0);
+    setIp('');
+    setPort('31415');
+    setName('');
+    setTesting(false);
+    setTestResult(null);
+    setPairing(false);
+    setError(null);
+    setRemoteInfo(null);
+  }
+
+  function handleOpenChange(open) {
+    if (!open) reset();
+    onOpenChange(open);
+  }
+
+  async function testReachability() {
+    setTesting(true);
+    setTestResult(null);
+    setError(null);
+    try {
+      const target = `${ip.trim()}:${port || '31415'}`;
+      const res = await fetch(`http://localhost:31415/api/federation/test?target=${encodeURIComponent(target)}`);
+      if (res.ok) {
+        const data = await res.json();
+        setTestResult('reachable');
+        setRemoteInfo(data);
+      } else {
+        setTestResult('unreachable');
+      }
+    } catch {
+      setTestResult('unreachable');
+    }
+    setTesting(false);
+  }
+
+  async function handlePair() {
+    setPairing(true);
+    setError(null);
+    try {
+      await addToWhitelist(ip.trim(), parseInt(port, 10) || 31415, name.trim() || undefined);
+      await fetchFederationStatus();
+      setStep(2);
+    } catch (err) {
+      setError(err.message || 'Failed to pair with peer');
+    }
+    setPairing(false);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent title="Pair New Peer" description="Connect to a remote Groove daemon">
+        <div className="px-5 py-5">
+          <StepIndicator current={step} />
+
+          {step === 0 && (
+            <div className="space-y-4">
+              <Input
+                label="Friendly Name"
+                placeholder="e.g. Production Server"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+              <div className="grid grid-cols-[1fr,100px] gap-2">
+                <Input
+                  label="IP / Hostname"
+                  placeholder="192.168.1.100"
+                  value={ip}
+                  onChange={(e) => setIp(e.target.value)}
+                  mono
+                />
+                <Input
+                  label="Port"
+                  placeholder="31415"
+                  value={port}
+                  onChange={(e) => setPort(e.target.value)}
+                  mono
+                />
+              </div>
+
+              {testResult === 'reachable' && (
+                <div className="flex items-center gap-2 rounded-md bg-success/10 border border-success/20 px-3 py-2">
+                  <Wifi size={13} className="text-success" />
+                  <span className="text-2xs text-success font-sans font-medium">Peer is reachable</span>
+                </div>
+              )}
+              {testResult === 'unreachable' && (
+                <div className="flex items-center gap-2 rounded-md bg-danger/10 border border-danger/20 px-3 py-2">
+                  <AlertCircle size={13} className="text-danger" />
+                  <span className="text-2xs text-danger font-sans font-medium">Could not reach peer — check IP and port</span>
+                </div>
+              )}
+
+              <div className="flex items-center gap-2 pt-2">
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  disabled={!ip.trim() || testing}
+                  onClick={testReachability}
+                  className="h-8 text-xs gap-1.5"
+                >
+                  {testing ? <Loader2 size={12} className="animate-spin" /> : <Wifi size={12} />}
+                  Test Reachability
+                </Button>
+                <Button
+                  size="sm"
+                  variant="primary"
+                  disabled={!ip.trim()}
+                  onClick={() => setStep(1)}
+                  className="h-8 text-xs gap-1.5 ml-auto"
+                >
+                  Continue
+                  <ArrowRight size={12} />
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {step === 1 && (
+            <div className="space-y-4">
+              <div className="rounded-md border border-border-subtle bg-surface-0 p-4">
+                <div className="flex items-center gap-3 mb-3">
+                  <div className="flex h-9 w-9 items-center justify-center rounded-md bg-accent/10">
+                    <Server size={16} className="text-accent" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-semibold text-text-0 font-sans">{name || 'Remote Peer'}</p>
+                    <p className="text-2xs text-text-3 font-mono">{ip}:{port || '31415'}</p>
+                  </div>
+                </div>
+
+                {remoteInfo && (
+                  <div className="space-y-1.5 pt-2 border-t border-border-subtle">
+                    {remoteInfo.version && (
+                      <div className="flex items-center justify-between text-2xs font-sans">
+                        <span className="text-text-3">Version</span>
+                        <span className="text-text-1 font-mono">{remoteInfo.version}</span>
+                      </div>
+                    )}
+                    {remoteInfo.peerId && (
+                      <div className="flex items-center justify-between text-2xs font-sans">
+                        <span className="text-text-3">Peer ID</span>
+                        <span className="text-text-1 font-mono truncate max-w-40">{remoteInfo.peerId}</span>
+                      </div>
+                    )}
+                    {remoteInfo.agents != null && (
+                      <div className="flex items-center justify-between text-2xs font-sans">
+                        <span className="text-text-3">Active Agents</span>
+                        <span className="text-text-1">{remoteInfo.agents}</span>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+
+              {error && (
+                <div className="flex items-center gap-2 rounded-md bg-danger/10 border border-danger/20 px-3 py-2">
+                  <AlertCircle size={13} className="text-danger" />
+                  <span className="text-2xs text-danger font-sans">{error}</span>
+                </div>
+              )}
+
+              <div className="flex items-center gap-2 pt-2">
+                <Button size="sm" variant="ghost" onClick={() => setStep(0)} className="h-8 text-xs">
+                  Back
+                </Button>
+                <Button
+                  size="sm"
+                  variant="primary"
+                  disabled={pairing}
+                  onClick={handlePair}
+                  className="h-8 text-xs gap-1.5 ml-auto"
+                >
+                  {pairing ? <Loader2 size={12} className="animate-spin" /> : <Link2 size={12} />}
+                  Confirm Pairing
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {step === 2 && (
+            <div className="text-center space-y-4">
+              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-success/15 mx-auto">
+                <Check size={20} className="text-success" />
+              </div>
+              <div>
+                <h3 className="text-sm font-semibold text-text-0 font-sans mb-1">Peer Paired Successfully</h3>
+                <p className="text-2xs text-text-3 font-sans">
+                  {name || ip} has been added to your federation whitelist.
+                </p>
+              </div>
+
+              <div className="rounded-md border border-border-subtle bg-surface-0 p-3 text-left">
+                <div className="flex items-center gap-3">
+                  <div className="flex h-8 w-8 items-center justify-center rounded-md bg-accent/10">
+                    <Server size={14} className="text-accent" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <span className="text-xs font-semibold text-text-0 font-sans block truncate">{name || 'Remote Peer'}</span>
+                    <span className="text-2xs text-text-3 font-mono">{ip}:{port || '31415'}</span>
+                  </div>
+                  <Badge variant="success" className="text-2xs gap-1">
+                    <StatusDot status="running" size="sm" />
+                    Whitelisted
+                  </Badge>
+                </div>
+              </div>
+
+              <Button
+                size="sm"
+                variant="primary"
+                onClick={() => handleOpenChange(false)}
+                className="h-8 text-xs"
+              >
+                Done
+              </Button>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -4,15 +4,19 @@ import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
 import { AnimatePresence, motion } from 'framer-motion';
 import {
-  Server, Radio, ExternalLink, Loader2, X, Plus, Settings,
+  Server, Radio, ExternalLink, Loader2, X, Plus, ArrowLeft,
 } from 'lucide-react';
 import { StatusDot } from '../ui/status-dot';
+import { Button } from '../ui/button';
+import { SSHWizard } from './ssh-wizard';
 
 export function QuickConnect() {
   const open = useGrooveStore((s) => s.quickConnectOpen);
   const toggle = useGrooveStore((s) => s.toggleQuickConnect);
   const savedTunnels = useGrooveStore((s) => s.savedTunnels);
+  const addToast = useGrooveStore((s) => s.addToast);
   const [connectingId, setConnectingId] = useState(null);
+  const [showWizard, setShowWizard] = useState(false);
 
   if (!open) return null;
 
@@ -32,9 +36,14 @@ export function QuickConnect() {
     toggle();
   }
 
+  function handleClose() {
+    setShowWizard(false);
+    toggle();
+  }
+
   return (
     <>
-      <div className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm" onClick={toggle} />
+      <div className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm" onClick={handleClose} />
 
       <AnimatePresence>
         <motion.div
@@ -42,85 +51,119 @@ export function QuickConnect() {
           animate={{ opacity: 1, y: 0, scale: 1 }}
           exit={{ opacity: 0, y: -10, scale: 0.98 }}
           transition={{ duration: 0.15 }}
-          className="fixed top-[20%] left-1/2 -translate-x-1/2 z-50 w-[400px] bg-surface-1 border border-border rounded-lg shadow-2xl overflow-hidden"
+          className={cn(
+            'fixed top-[15%] left-1/2 -translate-x-1/2 z-50 bg-surface-1 border border-border rounded-lg shadow-2xl overflow-hidden',
+            showWizard ? 'w-[520px]' : 'w-[400px]',
+          )}
         >
           {/* Header */}
           <div className="flex items-center justify-between px-4 py-3 border-b border-border-subtle">
             <div className="flex items-center gap-2">
+              {showWizard && (
+                <button
+                  onClick={() => setShowWizard(false)}
+                  className="p-1 -ml-1 text-text-4 hover:text-text-1 cursor-pointer transition-colors"
+                >
+                  <ArrowLeft size={14} />
+                </button>
+              )}
               <Radio size={15} className="text-accent" />
-              <span className="text-sm font-semibold text-text-0 font-sans">Quick Connect</span>
+              <span className="text-sm font-semibold text-text-0 font-sans">
+                {showWizard ? 'Add Connection' : 'Quick Connect'}
+              </span>
             </div>
-            <button onClick={toggle} className="p-1 text-text-4 hover:text-text-1 cursor-pointer transition-colors">
+            <button onClick={handleClose} className="p-1 text-text-4 hover:text-text-1 cursor-pointer transition-colors">
               <X size={14} />
             </button>
           </div>
 
-          {/* Server list */}
-          <div className="overflow-y-auto max-h-[320px] py-1">
-            {savedTunnels.length === 0 ? (
-              <div className="px-4 py-8 text-center">
-                <Server size={24} className="text-text-4 mx-auto mb-2" />
-                <p className="text-sm text-text-3 font-sans">No saved servers</p>
-                <p className="text-2xs text-text-4 font-sans mt-1">Add one in Settings to get started.</p>
-                <button
-                  onClick={() => {
-                    toggle();
-                    useGrooveStore.getState().setActiveView('settings');
-                  }}
-                  className="mt-3 inline-flex items-center gap-1.5 text-xs text-accent hover:text-accent/80 font-sans cursor-pointer transition-colors"
-                >
-                  <Settings size={12} /> Go to Settings
-                </button>
+          {showWizard ? (
+            <SSHWizard
+              server={null}
+              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');
+              }}
+              onTest={() => {
+                const tunnels = useGrooveStore.getState().savedTunnels;
+                const last = tunnels[tunnels.length - 1];
+                if (last?.id) return useGrooveStore.getState().testTunnel(last.id);
+              }}
+              onConnect={() => {
+                const tunnels = useGrooveStore.getState().savedTunnels;
+                const last = tunnels[tunnels.length - 1];
+                if (last?.id) return useGrooveStore.getState().connectTunnel(last.id);
+              }}
+              onCancel={() => setShowWizard(false)}
+            />
+          ) : (
+            <>
+              {/* Server list */}
+              <div className="overflow-y-auto max-h-[320px] py-1">
+                {savedTunnels.length === 0 ? (
+                  <div className="px-4 py-8 text-center">
+                    <Server size={24} className="text-text-4 mx-auto mb-2" />
+                    <p className="text-sm text-text-3 font-sans">No saved servers</p>
+                    <p className="text-2xs text-text-4 font-sans mt-1">Add a connection to get started.</p>
+                    <Button
+                      variant="primary"
+                      size="sm"
+                      onClick={() => setShowWizard(true)}
+                      className="h-8 text-xs gap-1.5 mt-3"
+                    >
+                      <Plus size={12} /> Add Connection
+                    </Button>
+                  </div>
+                ) : (
+                  savedTunnels.map((server) => (
+                    <button
+                      key={server.id}
+                      onClick={() => server.active ? handleOpenRemote(server) : handleConnect(server.id)}
+                      disabled={connectingId === server.id}
+                      className={cn(
+                        'w-full flex items-center gap-3 px-4 py-2.5 text-left cursor-pointer transition-colors',
+                        'hover:bg-surface-5',
+                        connectingId === server.id && 'opacity-60 pointer-events-none',
+                      )}
+                    >
+                      <Server size={15} className={server.active ? 'text-success' : 'text-text-4'} />
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span className="text-sm font-medium text-text-0 font-sans truncate">{server.name}</span>
+                          {server.active && <StatusDot status="running" size="sm" />}
+                        </div>
+                        <span className="text-2xs text-text-4 font-mono">{server.user}@{server.host}</span>
+                      </div>
+                      <div className="flex-shrink-0">
+                        {connectingId === server.id ? (
+                          <Loader2 size={14} className="text-text-3 animate-spin" />
+                        ) : server.active ? (
+                          <span className="flex items-center gap-1 text-2xs text-success font-sans">
+                            <ExternalLink size={11} /> Open
+                          </span>
+                        ) : (
+                          <span className="text-2xs text-text-3 font-sans">Connect</span>
+                        )}
+                      </div>
+                    </button>
+                  ))
+                )}
               </div>
-            ) : (
-              savedTunnels.map((server) => (
+
+              {/* Footer with Add button */}
+              <div className="px-4 py-2.5 border-t border-border-subtle">
                 <button
-                  key={server.id}
-                  onClick={() => server.active ? handleOpenRemote(server) : handleConnect(server.id)}
-                  disabled={connectingId === server.id}
-                  className={cn(
-                    'w-full flex items-center gap-3 px-4 py-2.5 text-left cursor-pointer transition-colors',
-                    'hover:bg-surface-5',
-                    connectingId === server.id && 'opacity-60 pointer-events-none',
-                  )}
+                  onClick={() => setShowWizard(true)}
+                  className="flex items-center gap-1.5 text-2xs text-accent hover:text-accent/80 font-sans font-medium cursor-pointer transition-colors"
                 >
-                  <Server size={15} className={server.active ? 'text-success' : 'text-text-4'} />
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2">
-                      <span className="text-sm font-medium text-text-0 font-sans truncate">{server.name}</span>
-                      {server.active && <StatusDot status="running" size="sm" />}
-                    </div>
-                    <span className="text-2xs text-text-4 font-mono">{server.user}@{server.host}</span>
-                  </div>
-                  <div className="flex-shrink-0">
-                    {connectingId === server.id ? (
-                      <Loader2 size={14} className="text-text-3 animate-spin" />
-                    ) : server.active ? (
-                      <span className="flex items-center gap-1 text-2xs text-success font-sans">
-                        <ExternalLink size={11} /> Open
-                      </span>
-                    ) : (
-                      <span className="text-2xs text-text-3 font-sans">Connect</span>
-                    )}
-                  </div>
+                  <Plus size={10} /> Add new connection
                 </button>
-              ))
-            )}
-          </div>
-
-          {/* Footer */}
-          {savedTunnels.length > 0 && (
-            <div className="px-4 py-2 border-t border-border-subtle">
-              <button
-                onClick={() => {
-                  toggle();
-                  useGrooveStore.getState().setActiveView('settings');
-                }}
-                className="flex items-center gap-1.5 text-2xs text-text-4 hover:text-text-2 font-sans cursor-pointer transition-colors"
-              >
-                <Plus size={10} /> Manage servers in Settings
-              </button>
-            </div>
+              </div>
+            </>
           )}
         </motion.div>
       </AnimatePresence>

package/packages/gui/src/components/settings/remote-server-card.jsx

@@ -111,10 +111,10 @@ export function RemoteServerCard({ server, onEdit, onDelete, onConnect, onDiscon
         {server.user}@{server.host}:{server.port || 22}
       </div>
 
-      {/* SSH key path */}
-      {server.sshKeyPath && (
+      {/* SSH key */}
+      {server.sshKeyDisplay && (
         <div className="text-2xs text-text-4 font-mono truncate mb-2">
-          Key: {server.sshKeyPath}
+          Key: {server.sshKeyDisplay}
         </div>
       )}