Visual fixes: base href, dashboard pair names, edit button

web/src/pages/Dashboard.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Server, Activity, HardDrive, Clock, Plus } from 'lucide-react';
-import { api, Machine, Job } from '../api/client';
+import { api, Machine, Job, SyncPair } from '../api/client';
 import { Badge } from '@/components/ui/Badge';
 import { Button } from '@/components/ui/Button';
 import { Card, CardBody } from '@/components/ui/Card';
@@ -15,21 +15,26 @@ import { formatRelativeTime } from '@/lib/utils';
 export default function Dashboard() {
   const [machines, setMachines] = useState<Machine[]>([]);
   const [jobs, setJobs] = useState<Job[]>([]);
+  const [pairs, setPairs] = useState<SyncPair[]>([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     Promise.all([
       api<Machine[]>('/api/machines'),
       api<Job[]>('/api/jobs?limit=5'),
+      api<SyncPair[]>('/api/sync-pairs'),
     ])
-      .then(([m, j]) => {
+      .then(([m, j, p]) => {
         setMachines(m);
         setJobs(j);
+        setPairs(p);
       })
       .catch(() => {})
       .finally(() => setLoading(false));
   }, []);
 
+  const pairName = (id: number) => pairs.find(p => p.id === id)?.name ?? `Pair ${id}`;
+
   const online = machines.filter(m => m.status.startsWith('online')).length;
   const todayJobs = jobs.filter(j => {
     if (!j.started_at) return false;
@@ -152,7 +157,7 @@ export default function Dashboard() {
                       </Link>
                     </TableCell>
                     <TableCell className="text-fg-muted">
-                      Pair {j.sync_pair_id}
+                      {pairName(j.sync_pair_id)}
                     </TableCell>
                     <TableCell>
                       <Badge variant={statusVariant(j.status)} label={statusLabel(j.status)} />