| 19 | type TestStatus = "idle" | "testing" | "ok" | "error"; |
| 20 | |
| 21 | function ServerRow({ |
| 22 | server, |
| 23 | onUpdate, |
| 24 | onDelete, |
| 25 | }: { |
| 26 | server: MCPServerConfig; |
| 27 | onUpdate: (updated: MCPServerConfig) => void; |
| 28 | onDelete: () => void; |
| 29 | }) { |
| 30 | const [expanded, setExpanded] = useState(false); |
| 31 | const [testStatus, setTestStatus] = useState<TestStatus>("idle"); |
| 32 | |
| 33 | async function testConnection() { |
| 34 | setTestStatus("testing"); |
| 35 | // Simulate connection test — in real impl this would call an API |
| 36 | await new Promise((r) => setTimeout(r, 800)); |
| 37 | setTestStatus(Math.random() > 0.3 ? "ok" : "error"); |
| 38 | } |
| 39 | |
| 40 | const statusDot = { |
| 41 | idle: <Circle className="w-2 h-2 text-surface-600" />, |
| 42 | testing: <Loader2 className="w-3 h-3 animate-spin text-surface-400" />, |
| 43 | ok: <CheckCircle className="w-3 h-3 text-green-400" />, |
| 44 | error: <XCircle className="w-3 h-3 text-red-400" />, |
| 45 | }[testStatus]; |
| 46 | |
| 47 | return ( |
| 48 | <div className="border border-surface-800 rounded-lg overflow-hidden"> |
| 49 | {/* Header row */} |
| 50 | <div className="flex items-center gap-3 px-3 py-2.5 bg-surface-800/40"> |
| 51 | <Toggle |
| 52 | checked={server.enabled} |
| 53 | onChange={(v) => onUpdate({ ...server, enabled: v })} |
| 54 | /> |
| 55 | <div className="flex-1 min-w-0"> |
| 56 | <p className="text-sm font-medium text-surface-200 truncate">{server.name}</p> |
| 57 | <p className="text-xs text-surface-500 font-mono truncate">{server.command}</p> |
| 58 | </div> |
| 59 | <div className="flex items-center gap-2"> |
| 60 | {statusDot} |
| 61 | <button |
| 62 | onClick={testConnection} |
| 63 | disabled={testStatus === "testing"} |
| 64 | className="text-xs text-surface-400 hover:text-surface-200 transition-colors disabled:opacity-50" |
| 65 | > |
| 66 | Test |
| 67 | </button> |
| 68 | <button |
| 69 | onClick={() => setExpanded((v) => !v)} |
| 70 | className="text-surface-500 hover:text-surface-300 transition-colors" |
| 71 | > |
| 72 | <ChevronDown |
| 73 | className={cn("w-4 h-4 transition-transform", expanded && "rotate-180")} |
| 74 | /> |
| 75 | </button> |
| 76 | <button |
| 77 | onClick={onDelete} |
| 78 | className="text-surface-500 hover:text-red-400 transition-colors" |