Bump version to 1.0.23

web/src/pages/Machines.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { api, Machine, SSHKey } from '../api/client';
+import { api, Machine, SSHKey, TestConnectionResponse } from '../api/client';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Label } from '@/components/ui/Label';
@@ -26,7 +26,7 @@ import {
 import { EmptyState } from '@/components/ui/EmptyState';
 import { CopyButton } from '@/components/ui/CopyButton';
 import { Card } from '@/components/ui/Card';
-import { Pencil, Trash2, Plus, Server, Zap } from 'lucide-react';
+import { Pencil, Trash2, Plus, Server, Zap, Cable } from 'lucide-react';
 import { toast } from 'sonner';
 import { cn } from '@/lib/utils';
 import { subscribeMachineStatus } from '@/lib/sse';
@@ -67,6 +67,7 @@ export default function Machines() {
   const [form, setForm] = useState<MachineForm>(defaultForm);
   const [loading, setLoading] = useState(false);
   const [probing, setProbing] = useState(false);
+  const [connModal, setConnModal] = useState<{ machine: Machine | null; result: TestConnectionResponse | null; loading: boolean }>({ machine: null, result: null, loading: false });
 
   useEffect(() => {
     load();
@@ -183,6 +184,35 @@ export default function Machines() {
     }
   }
 
+  async function handleTestConnection(m: Machine) {
+    setConnModal({ machine: m, result: null, loading: true });
+    try {
+      const result = await api<TestConnectionResponse>(`/api/machines/${m.id}/test-connection`, { method: 'POST' });
+      setConnModal({ machine: m, result, loading: false });
+    } catch (e: unknown) {
+      setConnModal({ machine: m, result: { success: false, error: (e as Error).message }, loading: false });
+    }
+  }
+
+  async function handleApproveFingerprint() {
+    if (!connModal.machine || !connModal.result?.fingerprint) return;
+    try {
+      const updated = await api<Machine>(`/api/machines/${connModal.machine.id}/approve-fingerprint`, {
+        method: 'POST',
+        body: { fingerprint: connModal.result.fingerprint },
+      });
+      setMachines(prev => prev.map(m => m.id === updated.id ? updated : m));
+      toast.success('Fingerprint approved');
+      setConnModal({ machine: null, result: null, loading: false });
+    } catch (e: unknown) {
+      toast.error(`Approve failed: ${(e as Error).message}`);
+    }
+  }
+
+  function closeConnModal() {
+    setConnModal({ machine: null, result: null, loading: false });
+  }
+
   function keyLabel(id: number | null) {
     if (!id) return 'Server Key';
     const k = sshKeys.find(k => k.id === id);
@@ -277,6 +307,14 @@ export default function Machines() {
                         >
                           <Pencil className="h-3.5 w-3.5" />
                         </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          onClick={() => handleTestConnection(m)}
+                          title="Test SSH Connection"
+                        >
+                          <Cable className="h-3.5 w-3.5" />
+                        </Button>
                         {m.wol_enabled && (
                           <Button
                             variant="ghost"
@@ -512,6 +550,71 @@ export default function Machines() {
           </ModalFooter>
         </ModalContent>
       </Modal>
+
+      <Modal open={connModal.machine !== null} onOpenChange={v => !v && closeConnModal()}>
+        <ModalContent size="md">
+          <ModalHeader>
+            <ModalTitle>SSH Connection Test</ModalTitle>
+            <ModalDescription>
+              {connModal.machine?.name} ({connModal.machine?.host}:{connModal.machine?.port})
+            </ModalDescription>
+          </ModalHeader>
+          <ModalBody className="space-y-4">
+            {connModal.loading && (
+              <div className="flex items-center justify-center py-8">
+                <div className="h-6 w-6 border-2 border-accent border-t-transparent rounded-full animate-spin" />
+              </div>
+            )}
+            {!connModal.loading && connModal.result && (
+              <div className="space-y-4">
+                {connModal.result.success ? (
+                  <div className="rounded-card bg-emerald-500/10 border border-emerald-500/30 p-4">
+                    <p className="text-sm font-medium text-emerald-400 mb-1">Connection successful</p>
+                    <pre className="text-xs text-fg-muted whitespace-pre-wrap">{connModal.result.output}</pre>
+                  </div>
+                ) : (
+                  <div className="rounded-card bg-rose-500/10 border border-rose-500/30 p-4">
+                    <p className="text-sm font-medium text-rose-400 mb-1">Connection failed</p>
+                    <p className="text-xs text-fg-muted">{connModal.result.error}</p>
+                  </div>
+                )}
+                {connModal.result.fingerprint && (
+                  <div className="space-y-2">
+                    <p className="text-sm font-medium text-fg">Host Key Fingerprint</p>
+                    <div className="flex items-center gap-2">
+                      <code className="flex-1 text-xs font-mono bg-surface-raised rounded-card px-3 py-2 text-fg-muted border border-border">
+                        {connModal.result.fingerprint}
+                      </code>
+                      <CopyButton text={connModal.result.fingerprint} />
+                    </div>
+                    {connModal.machine && !connModal.machine.fingerprint_confirmed && (
+                      <div className="flex items-center gap-2 mt-2">
+                        <Badge variant="pending" label="Not verified" />
+                        <span className="text-xs text-fg-muted">Approve to trust this fingerprint</span>
+                      </div>
+                    )}
+                    {connModal.machine && connModal.machine.fingerprint_confirmed && (
+                      <div className="flex items-center gap-2 mt-2">
+                        <Badge variant="success" label="Verified" />
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+          </ModalBody>
+          <ModalFooter>
+            <Button variant="secondary" onClick={closeConnModal}>
+              Close
+            </Button>
+            {!connModal.loading && connModal.result && !connModal.result.success && connModal.result.fingerprint && connModal.machine && !connModal.machine.fingerprint_confirmed && (
+              <Button onClick={handleApproveFingerprint}>
+                Approve &amp; Trust Fingerprint
+              </Button>
+            )}
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
     </div>
   );
 }