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)} />

web/src/pages/SyncPairs.tsx

@@ -26,7 +26,7 @@ import {
 import { EmptyState } from '@/components/ui/EmptyState';
 import { Badge } from '@/components/ui/Badge';
 import { Card } from '@/components/ui/Card';
-import { Play, Trash2, Plus, GitCompare, ArrowRight, ArrowLeft } from 'lucide-react';
+import { Play, Trash2, Plus, GitCompare, ArrowRight, ArrowLeft, Pencil } from 'lucide-react';
 import { toast } from 'sonner';
 import { cn } from '@/lib/utils';
 
@@ -242,6 +242,15 @@ export default function SyncPairs() {
                     </TableCell>
                     <TableCell>
                       <div className="flex items-center gap-1">
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          onClick={() => openEdit(p)}
+                          className="text-fg-muted hover:text-fg hover:bg-surface-raised"
+                          title="Edit"
+                        >
+                          <Pencil className="h-3.5 w-3.5" />
+                        </Button>
                         <Button
                           variant="ghost"
                           size="icon-sm"