fix: update remote server form tests for new test connection feature

frontend/src/components/RemoteServerForm.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
-import { type RemoteServer, testRemoteServerConnection } from '../api/remoteServers'
+import { Loader2, Check, X, CircleHelp } from 'lucide-react'
+import { type RemoteServer, testCustomRemoteServerConnection } from '../api/remoteServers'
 
 interface Props {
   server?: RemoteServer
@@ -19,6 +20,7 @@ export default function RemoteServerForm({ server, onSubmit, onCancel }: Props)
 
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [testStatus, setTestStatus] = useState<'idle' | 'testing' | 'success' | 'error'>('idle')
 
   useEffect(() => {
     setFormData({
@@ -45,16 +47,21 @@ export default function RemoteServerForm({ server, onSubmit, onCancel }: Props)
   }
 
   const handleTestConnection = async () => {
-    if (!server?.uuid) return
-    setLoading(true)
+    if (!formData.host || !formData.port) return
+    setTestStatus('testing')
     setError(null)
     try {
-      const result = await testRemoteServerConnection(server.uuid)
-      alert(`Connection successful: ${result.address}`)
+      const result = await testCustomRemoteServerConnection(formData.host, formData.port)
+      if (result.reachable) {
+        setTestStatus('success')
+        setTimeout(() => setTestStatus('idle'), 3000)
+      } else {
+        setTestStatus('error')
+        setError(`Connection failed: ${result.error || 'Unknown error'}`)
+      }
     } catch {
+      setTestStatus('error')
       setError('Connection failed')
-    } finally {
-      setLoading(false)
     }
   }
 
@@ -156,16 +163,22 @@ export default function RemoteServerForm({ server, onSubmit, onCancel }: Props)
           </label>
 
           <div className="flex gap-3 justify-end pt-4 border-t border-gray-800">
-            {server && (
-              <button
-                type="button"
-                onClick={handleTestConnection}
-                disabled={loading}
-                className="px-6 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors disabled:opacity-50 mr-auto"
-              >
-                Test Connection
-              </button>
-            )}
+            <button
+              type="button"
+              onClick={handleTestConnection}
+              disabled={testStatus === 'testing' || !formData.host || !formData.port}
+              className={`px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 mr-auto ${
+                testStatus === 'success' ? 'bg-green-600 text-white' :
+                testStatus === 'error' ? 'bg-red-600 text-white' :
+                'bg-gray-700 hover:bg-gray-600 text-white'
+              }`}
+            >
+              {testStatus === 'testing' ? <Loader2 className="w-4 h-4 animate-spin" /> :
+               testStatus === 'success' ? <Check className="w-4 h-4" /> :
+               testStatus === 'error' ? <X className="w-4 h-4" /> :
+               <CircleHelp className="w-4 h-4" />}
+              Test Connection
+            </button>
             <button
               type="button"
               onClick={onCancel}

frontend/src/components/__tests__/RemoteServerForm.test.tsx

@@ -6,6 +6,7 @@ import * as remoteServersApi from '../../api/remoteServers'
 // Mock the API
 vi.mock('../../api/remoteServers', () => ({
   testRemoteServerConnection: vi.fn(() => Promise.resolve({ address: 'localhost:8080' })),
+  testCustomRemoteServerConnection: vi.fn(() => Promise.resolve({ address: 'localhost:8080', reachable: true })),
 }))
 
 describe('RemoteServerForm', () => {
@@ -49,12 +50,12 @@ describe('RemoteServerForm', () => {
     expect(screen.getByDisplayValue('5000')).toBeInTheDocument()
   })
 
-  it('shows test connection button only in edit mode', () => {
+  it('shows test connection button in create and edit mode', () => {
     const { rerender } = render(
       <RemoteServerForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
     )
 
-    expect(screen.queryByText('Test Connection')).not.toBeInTheDocument()
+    expect(screen.getByText('Test Connection')).toBeInTheDocument()
 
     const mockServer = {
       uuid: '123',
@@ -139,7 +140,6 @@ describe('RemoteServerForm', () => {
   })
 
   it('handles test connection success', async () => {
-    const mockAlert = vi.spyOn(window, 'alert').mockImplementation(() => {})
     const mockServer = {
       uuid: '123',
       name: 'Test Server',
@@ -156,17 +156,18 @@ describe('RemoteServerForm', () => {
       <RemoteServerForm server={mockServer} onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
     )
 
-    fireEvent.click(screen.getByText('Test Connection'))
+    const testButton = screen.getByText('Test Connection')
+    fireEvent.click(testButton)
 
     await waitFor(() => {
-      expect(mockAlert).toHaveBeenCalledWith('Connection successful: localhost:8080')
+      // Check for success state (green background)
+      expect(testButton).toHaveClass('bg-green-600')
     })
-    mockAlert.mockRestore()
   })
 
   it('handles test connection failure', async () => {
     // Override mock for this test
-    vi.mocked(remoteServersApi.testRemoteServerConnection).mockRejectedValueOnce(new Error('Connection failed'))
+    vi.mocked(remoteServersApi.testCustomRemoteServerConnection).mockRejectedValueOnce(new Error('Connection failed'))
 
     const mockServer = {
       uuid: '123',