@jlongo78/agent-spaces 0.7.7 → 0.8.0

package/.next/standalone/src/components/network/api-key-list.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { useState } from 'react';
+import { useApiKeys, useCreateApiKey, useRevokeApiKey } from '@/hooks/use-network';
+import { Plus, Trash2, Copy, Check, Key, Loader2 } from 'lucide-react';
+import { formatRelativeTime } from '@/lib/utils';
+
+export function ApiKeyList() {
+  const { data: keys, isLoading } = useApiKeys();
+  const createKey = useCreateApiKey();
+  const revokeKey = useRevokeApiKey();
+
+  const [showCreate, setShowCreate] = useState(false);
+  const [name, setName] = useState('');
+  const [permissions, setPermissions] = useState('terminal');
+  const [newKey, setNewKey] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const handleCreate = async () => {
+    if (!name.trim()) return;
+    const result = await createKey.mutateAsync({ name: name.trim(), permissions });
+    setNewKey(result.rawKey);
+    setName('');
+    setShowCreate(false);
+  };
+
+  const copyKey = async () => {
+    if (!newKey) return;
+    try {
+      await navigator.clipboard.writeText(newKey);
+    } catch {
+      // Fallback for non-secure contexts (HTTP)
+      const textarea = document.createElement('textarea');
+      textarea.value = newKey;
+      textarea.style.position = 'fixed';
+      textarea.style.opacity = '0';
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textarea);
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="w-5 h-5 animate-spin text-zinc-400" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {/* New key banner */}
+      {newKey && (
+        <div className="bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-800 rounded-lg p-4">
+          <p className="text-sm font-medium text-green-800 dark:text-green-200 mb-2">
+            API key created. Copy it now — it won't be shown again.
+          </p>
+          <div className="flex items-center gap-2">
+            <code className="flex-1 text-xs font-mono bg-white dark:bg-zinc-900 border border-green-200 dark:border-green-800 rounded px-3 py-2 select-all break-all">
+              {newKey}
+            </code>
+            <button
+              onClick={copyKey}
+              className="flex-shrink-0 p-2 text-green-700 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-900 rounded-md"
+            >
+              {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+            </button>
+          </div>
+          <button
+            onClick={() => setNewKey(null)}
+            className="text-xs text-green-600 dark:text-green-400 mt-2 hover:underline"
+          >
+            Dismiss
+          </button>
+        </div>
+      )}
+
+      {/* Key table */}
+      {keys && keys.length > 0 ? (
+        <div className="border border-zinc-200 dark:border-zinc-800 rounded-lg overflow-hidden">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="bg-zinc-50 dark:bg-zinc-900 text-left text-xs text-zinc-500">
+                <th className="px-4 py-2 font-medium">Name</th>
+                <th className="px-4 py-2 font-medium">Prefix</th>
+                <th className="px-4 py-2 font-medium">Permissions</th>
+                <th className="px-4 py-2 font-medium">Last Used</th>
+                <th className="px-4 py-2 font-medium">Created</th>
+                <th className="px-4 py-2 font-medium w-10"></th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
+              {keys.map((key) => (
+                <tr key={key.id} className="hover:bg-zinc-50 dark:hover:bg-zinc-900/50">
+                  <td className="px-4 py-2.5 font-medium">{key.name}</td>
+                  <td className="px-4 py-2.5 font-mono text-xs text-zinc-500">{key.keyPrefix}...</td>
+                  <td className="px-4 py-2.5">
+                    <span className="text-xs px-1.5 py-0.5 rounded bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400">
+                      {key.permissions}
+                    </span>
+                  </td>
+                  <td className="px-4 py-2.5 text-zinc-500 text-xs">
+                    {key.lastUsed ? formatRelativeTime(key.lastUsed) : 'Never'}
+                  </td>
+                  <td className="px-4 py-2.5 text-zinc-500 text-xs">
+                    {formatRelativeTime(key.created)}
+                  </td>
+                  <td className="px-4 py-2.5">
+                    <button
+                      onClick={() => {
+                        if (confirm(`Revoke API key "${key.name}"? Remote nodes using this key will lose access.`)) {
+                          revokeKey.mutate(key.id);
+                        }
+                      }}
+                      className="p-1 text-zinc-400 hover:text-red-500 rounded"
+                      title="Revoke key"
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <div className="text-center py-8 text-sm text-zinc-500">
+          <Key className="w-8 h-8 mx-auto mb-2 text-zinc-300 dark:text-zinc-700" />
+          <p>No API keys yet.</p>
+          <p className="text-xs mt-1">Create a key so other nodes can connect to this one.</p>
+        </div>
+      )}
+
+      {/* Create form */}
+      {showCreate ? (
+        <div className="flex items-end gap-2 bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg p-3">
+          <div className="flex-1">
+            <label className="text-xs text-zinc-500 mb-1 block">Key Name</label>
+            <input
+              autoFocus
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && handleCreate()}
+              placeholder="e.g., Team Server"
+              className="w-full px-3 py-1.5 text-sm bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-700 rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500"
+            />
+          </div>
+          <div>
+            <label className="text-xs text-zinc-500 mb-1 block">Permissions</label>
+            <select
+              value={permissions}
+              onChange={(e) => setPermissions(e.target.value)}
+              className="px-3 py-1.5 text-sm bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-700 rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500"
+            >
+              <option value="read">Read</option>
+              <option value="terminal">Terminal</option>
+              <option value="admin">Admin</option>
+            </select>
+          </div>
+          <button
+            onClick={handleCreate}
+            disabled={!name.trim() || createKey.isPending}
+            className="px-3 py-1.5 text-sm bg-indigo-600 text-white rounded-md hover:bg-indigo-500 disabled:opacity-50"
+          >
+            Create
+          </button>
+          <button
+            onClick={() => { setShowCreate(false); setName(''); }}
+            className="px-3 py-1.5 text-sm border border-zinc-200 dark:border-zinc-700 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800"
+          >
+            Cancel
+          </button>
+        </div>
+      ) : (
+        <button
+          onClick={() => setShowCreate(true)}
+          className="flex items-center gap-1.5 text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-500"
+        >
+          <Plus className="w-3.5 h-3.5" />
+          Create API Key
+        </button>
+      )}
+    </div>
+  );
+}

package/.next/standalone/src/components/network/connection-requests.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { useConnectionRequests, useRespondToRequest } from '@/hooks/use-network';
+import { Check, X, Loader2, Radio } from 'lucide-react';
+import { formatRelativeTime } from '@/lib/utils';
+
+export function ConnectionRequests() {
+  const { data, isLoading } = useConnectionRequests();
+  const respond = useRespondToRequest();
+
+  const incoming = data?.incoming || [];
+  const outgoing = data?.outgoing || [];
+
+  if (isLoading || (incoming.length === 0 && outgoing.length === 0)) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Incoming requests */}
+      {incoming.length > 0 && (
+        <div>
+          <h3 className="text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider mb-2">
+            Incoming Requests
+          </h3>
+          <div className="space-y-2">
+            {incoming.map((req) => (
+              <div
+                key={req.id}
+                className="flex items-center justify-between p-3 bg-indigo-50 dark:bg-indigo-950/30 border border-indigo-200 dark:border-indigo-800 rounded-lg"
+              >
+                <div className="flex items-center gap-3">
+                  <Radio className="w-4 h-4 text-indigo-500 animate-pulse" />
+                  <div>
+                    <div className="text-sm font-medium">{req.nodeName}</div>
+                    <div className="text-xs text-zinc-500">
+                      {req.nodeUrl} &middot; {formatRelativeTime(req.created)}
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <button
+                    onClick={() => respond.mutate({ id: req.id, action: 'accept' })}
+                    disabled={respond.isPending}
+                    className="flex items-center gap-1 px-3 py-1.5 text-xs bg-green-600 text-white rounded-md hover:bg-green-500 disabled:opacity-50"
+                  >
+                    {respond.isPending ? <Loader2 className="w-3 h-3 animate-spin" /> : <Check className="w-3 h-3" />}
+                    Accept
+                  </button>
+                  <button
+                    onClick={() => respond.mutate({ id: req.id, action: 'deny' })}
+                    disabled={respond.isPending}
+                    className="flex items-center gap-1 px-3 py-1.5 text-xs border border-zinc-300 dark:border-zinc-600 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 disabled:opacity-50"
+                  >
+                    <X className="w-3 h-3" />
+                    Deny
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Outgoing requests */}
+      {outgoing.length > 0 && (
+        <div>
+          <h3 className="text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider mb-2">
+            Pending Requests
+          </h3>
+          <div className="space-y-2">
+            {outgoing.map((req) => (
+              <div
+                key={req.id}
+                className="flex items-center justify-between p-3 border border-zinc-200 dark:border-zinc-800 rounded-lg"
+              >
+                <div className="flex items-center gap-3">
+                  <Loader2 className="w-4 h-4 text-zinc-400 animate-spin" />
+                  <div>
+                    <div className="text-sm font-medium">{req.nodeName}</div>
+                    <div className="text-xs text-zinc-500">
+                      Waiting for approval &middot; {formatRelativeTime(req.created)}
+                    </div>
+                  </div>
+                </div>
+                <span className="text-xs text-zinc-400">Expires in ~10 min</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/.next/standalone/src/components/network/node-add-dialog.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { useState } from 'react';
+import { useAddNode, useConnectDiscoveredNode } from '@/hooks/use-network';
+import { X, Loader2 } from 'lucide-react';
+
+interface NodeAddDialogProps {
+  onClose: () => void;
+  prefillUrl?: string;
+  prefillName?: string;
+  nodeId?: string;
+}
+
+export function NodeAddDialog({ onClose, prefillUrl, prefillName, nodeId }: NodeAddDialogProps) {
+  const addNode = useAddNode();
+  const [url, setUrl] = useState(prefillUrl || '');
+  const [apiKey, setApiKey] = useState('');
+  const [name, setName] = useState(prefillName || '');
+  const [error, setError] = useState('');
+  const isConnecting = !!prefillUrl;
+
+  const connectDiscovered = useConnectDiscoveredNode();
+
+  const handleAdd = async () => {
+    setError('');
+    try {
+      if (isConnecting && nodeId) {
+        await connectDiscovered.mutateAsync({ id: nodeId, url, apiKey, name: name || undefined });
+      } else {
+        await addNode.mutateAsync({ url, apiKey, name: name || undefined });
+      }
+      onClose();
+    } catch (e: any) {
+      setError(e.message || 'Failed to connect');
+    }
+  };
+
+  const isPending = addNode.isPending || connectDiscovered.isPending;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className="bg-white dark:bg-zinc-900 rounded-xl shadow-2xl border border-zinc-200 dark:border-zinc-800 w-full max-w-md mx-4">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-zinc-200 dark:border-zinc-800">
+          <h2 className="text-base font-semibold">{isConnecting ? 'Connect to Node' : 'Add Node'}</h2>
+          <button onClick={onClose} className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200">
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        <div className="p-5 space-y-4">
+          <div>
+            <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400 mb-1.5 block">
+              Node URL
+            </label>
+            <input
+              autoFocus={!isConnecting}
+              type="url"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              readOnly={isConnecting}
+              placeholder="https://my-server.example.com/spaces"
+              className={`w-full px-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+                isConnecting
+                  ? 'bg-zinc-50 dark:bg-zinc-900 border-zinc-200 dark:border-zinc-700 text-zinc-500'
+                  : 'bg-white dark:bg-zinc-950 border-zinc-200 dark:border-zinc-700'
+              }`}
+            />
+            {isConnecting ? (
+              <p className="text-[11px] text-zinc-400 mt-1">Auto-discovered on your network</p>
+            ) : (
+              <p className="text-[11px] text-zinc-400 mt-1">The base URL of the remote Spaces instance</p>
+            )}
+          </div>
+
+          <div>
+            <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400 mb-1.5 block">
+              API Key
+            </label>
+            <input
+              autoFocus={isConnecting}
+              type="password"
+              value={apiKey}
+              onChange={(e) => setApiKey(e.target.value)}
+              placeholder="spk_..."
+              className="w-full px-3 py-2 text-sm font-mono bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-700 rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500"
+            />
+            <p className="text-[11px] text-zinc-400 mt-1">Generated on the remote node's Network page</p>
+          </div>
+
+          {!isConnecting && (
+            <div>
+              <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400 mb-1.5 block">
+                Display Name <span className="text-zinc-400">(optional)</span>
+              </label>
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Auto-detected from remote node"
+                className="w-full px-3 py-2 text-sm bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-700 rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500"
+              />
+            </div>
+          )}
+
+          {error && (
+            <div className="text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 rounded-md px-3 py-2">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-2 px-5 py-4 border-t border-zinc-200 dark:border-zinc-800">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-md hover:bg-zinc-50 dark:hover:bg-zinc-800"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleAdd}
+            disabled={!url.trim() || !apiKey.trim() || isPending}
+            className="flex items-center gap-2 px-4 py-2 text-sm bg-indigo-600 text-white rounded-md hover:bg-indigo-500 disabled:opacity-50"
+          >
+            {isPending && <Loader2 className="w-3.5 h-3.5 animate-spin" />}
+            Connect
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/.next/standalone/src/components/network/node-badge.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+const statusColors: Record<string, string> = {
+  online: '#22c55e',
+  offline: '#ef4444',
+  error: '#f59e0b',
+  unknown: '#71717a',
+};
+
+interface NodeBadgeProps {
+  name: string;
+  status?: string;
+  className?: string;
+}
+
+export function NodeBadge({ name, status = 'unknown', className = '' }: NodeBadgeProps) {
+  return (
+    <span className={`inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 ${className}`}>
+      <span
+        className="w-1.5 h-1.5 rounded-full flex-shrink-0"
+        style={{ backgroundColor: statusColors[status] || statusColors.unknown }}
+      />
+      {name}
+    </span>
+  );
+}

package/.next/standalone/src/components/network/node-list.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+import { useState } from 'react';
+import { useNodes, useRemoveNode, useCheckHealth, useSendConnectionRequest } from '@/hooks/use-network';
+import { NodeAddDialog } from './node-add-dialog';
+import { Plus, Trash2, RefreshCw, Globe, Loader2, Link, Radio } from 'lucide-react';
+import { formatRelativeTime } from '@/lib/utils';
+
+const statusConfig: Record<string, { color: string; bg: string; label: string }> = {
+  online: { color: 'text-green-600 dark:text-green-400', bg: 'bg-green-500', label: 'Online' },
+  offline: { color: 'text-red-600 dark:text-red-400', bg: 'bg-red-500', label: 'Offline' },
+  error: { color: 'text-amber-600 dark:text-amber-400', bg: 'bg-amber-500', label: 'Error' },
+  unknown: { color: 'text-zinc-500', bg: 'bg-zinc-400', label: 'Unknown' },
+};
+
+export function NodeList() {
+  const { data: nodes, isLoading } = useNodes();
+  const removeNode = useRemoveNode();
+  const checkHealth = useCheckHealth();
+  const sendRequest = useSendConnectionRequest();
+  const [showAdd, setShowAdd] = useState(false);
+  const [connectNode, setConnectNode] = useState<{ id: string; url: string; name: string } | null>(null);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="w-5 h-5 animate-spin text-zinc-400" />
+      </div>
+    );
+  }
+
+  const connectedNodes = nodes?.filter(n => n.apiKeyHint) || [];
+  const discoveredNodes = nodes?.filter(n => n.discoveredVia === 'mdns' && !n.apiKeyHint) || [];
+
+  return (
+    <div className="space-y-3">
+      {/* Actions */}
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => setShowAdd(true)}
+          className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-indigo-600 text-white rounded-md hover:bg-indigo-500"
+        >
+          <Plus className="w-3.5 h-3.5" />
+          Add Node
+        </button>
+        {connectedNodes.length > 0 && (
+          <button
+            onClick={() => checkHealth.mutate()}
+            disabled={checkHealth.isPending}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-sm border border-zinc-200 dark:border-zinc-700 rounded-md hover:bg-zinc-50 dark:hover:bg-zinc-800 disabled:opacity-50"
+          >
+            <RefreshCw className={`w-3.5 h-3.5 ${checkHealth.isPending ? 'animate-spin' : ''}`} />
+            Check All
+          </button>
+        )}
+      </div>
+
+      {/* Connected node cards */}
+      {connectedNodes.length > 0 ? (
+        <div className="grid gap-3 sm:grid-cols-2">
+          {connectedNodes.map((node) => {
+            const st = statusConfig[node.status] || statusConfig.unknown;
+            return (
+              <div
+                key={node.id}
+                className="border border-zinc-200 dark:border-zinc-800 rounded-lg p-4 hover:border-zinc-300 dark:hover:border-zinc-700 transition-colors"
+              >
+                <div className="flex items-start justify-between mb-2">
+                  <div className="flex items-center gap-2">
+                    <span className={`w-2 h-2 rounded-full ${st.bg}`} />
+                    <h3 className="font-medium text-sm">{node.name}</h3>
+                  </div>
+                  <button
+                    onClick={() => {
+                      if (confirm(`Remove node "${node.name}"? You can re-add it later.`)) {
+                        removeNode.mutate(node.id);
+                      }
+                    }}
+                    className="p-1 text-zinc-400 hover:text-red-500 rounded"
+                    title="Remove node"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+
+                <div className="space-y-1 text-xs text-zinc-500">
+                  <div className="flex items-center gap-1 font-mono truncate" title={node.url}>
+                    <Globe className="w-3 h-3 flex-shrink-0" />
+                    {node.url}
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className={st.color}>{st.label}</span>
+                    {node.lastSeen && (
+                      <span>Last seen {formatRelativeTime(node.lastSeen)}</span>
+                    )}
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span>{node.sessionCount} sessions</span>
+                    {node.version && <span>v{node.version}</span>}
+                  </div>
+                  {node.lastError && node.status !== 'online' && (
+                    <div className="text-amber-600 dark:text-amber-400 text-[11px] truncate" title={node.lastError}>
+                      {node.lastError}
+                    </div>
+                  )}
+                  <div className="text-[10px] text-zinc-400 font-mono">
+                    Key: ...{node.apiKeyHint}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="text-center py-8 text-sm text-zinc-500">
+          <Globe className="w-8 h-8 mx-auto mb-2 text-zinc-300 dark:text-zinc-700" />
+          <p>No connected nodes.</p>
+          <p className="text-xs mt-1">Add a node to see sessions and terminals from other Spaces instances.</p>
+        </div>
+      )}
+
+      {/* Discovered via mDNS but not yet connected */}
+      {discoveredNodes.length > 0 && (
+        <div className="mt-6">
+          <h3 className="text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider mb-2">
+            Discovered on Network
+          </h3>
+          <p className="text-[11px] text-zinc-400 mb-3">
+            These nodes were found via mDNS. Request a connection or enter an API key manually.
+          </p>
+          <div className="grid gap-3 sm:grid-cols-2">
+            {discoveredNodes.map((node) => {
+              const st = statusConfig[node.status] || statusConfig.unknown;
+              return (
+                <div
+                  key={node.id}
+                  className="border border-dashed border-zinc-300 dark:border-zinc-700 rounded-lg p-4 hover:border-indigo-400 dark:hover:border-indigo-600 transition-colors"
+                >
+                  <div className="flex items-start justify-between mb-2">
+                    <div className="flex items-center gap-2">
+                      <span className={`w-2 h-2 rounded-full ${st.bg}`} />
+                      <h3 className="font-medium text-sm">{node.name}</h3>
+                    </div>
+                    <div className="flex items-center gap-1">
+                      <button
+                        onClick={() => sendRequest.mutate({ nodeUrl: node.url, nodeId: node.id, nodeName: node.name })}
+                        disabled={sendRequest.isPending}
+                        className="flex items-center gap-1 px-2 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-500 disabled:opacity-50"
+                        title="Request connection (no API key needed)"
+                      >
+                        {sendRequest.isPending ? <Loader2 className="w-3 h-3 animate-spin" /> : <Radio className="w-3 h-3" />}
+                        Request
+                      </button>
+                      <button
+                        onClick={() => setConnectNode({ id: node.id, url: node.url, name: node.name })}
+                        className="flex items-center gap-1 px-2 py-1 text-xs border border-zinc-300 dark:border-zinc-600 text-zinc-600 dark:text-zinc-300 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800"
+                        title="Connect with API key"
+                      >
+                        <Link className="w-3 h-3" />
+                        API Key
+                      </button>
+                      <button
+                        onClick={() => {
+                          if (confirm(`Remove "${node.name}" from discovered list?`)) {
+                            removeNode.mutate(node.id);
+                          }
+                        }}
+                        className="p-1 text-zinc-400 hover:text-red-500 rounded"
+                        title="Dismiss"
+                      >
+                        <Trash2 className="w-3 h-3" />
+                      </button>
+                    </div>
+                  </div>
+
+                  <div className="space-y-1 text-xs text-zinc-500">
+                    <div className="flex items-center gap-1 font-mono truncate" title={node.url}>
+                      <Globe className="w-3 h-3 flex-shrink-0" />
+                      {node.url}
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className={st.color}>{st.label}</span>
+                      {node.version && <span>v{node.version}</span>}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Add dialog */}
+      {showAdd && <NodeAddDialog onClose={() => setShowAdd(false)} />}
+
+      {/* Connect discovered node dialog */}
+      {connectNode && (
+        <NodeAddDialog
+          onClose={() => setConnectNode(null)}
+          prefillUrl={connectNode.url}
+          prefillName={connectNode.name}
+          nodeId={connectNode.id}
+        />
+      )}
+    </div>
+  );
+}