Add Direction mode help text and mirror --delete warning in sync pair form

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, Pencil } from 'lucide-react';
+import { Play, Trash2, Plus, GitCompare, ArrowRight, ArrowLeft, Pencil, AlertTriangle } from 'lucide-react';
 import { toast } from 'sonner';
 import { cn } from '@/lib/utils';
 
@@ -295,8 +295,8 @@ export default function SyncPairs() {
             <ModalTitle>{form.id ? 'Edit Sync Pair' : 'Add Sync Pair'}</ModalTitle>
             <ModalDescription>
               {form.id
-                ? 'Update the configuration for this sync pair'
-                : 'Define a new source and destination for data syncing'}
+                ? 'Update this sync pair. Direction: push (src→dst), pull (dst←src), or mirror (push + --delete).'
+                : 'Define source and destination for data syncing. Pick a direction: push (src→dst), pull (dst←src), or mirror (push + --delete).'}
             </ModalDescription>
           </ModalHeader>
           <form onSubmit={handleSubmit}>
@@ -414,6 +414,12 @@ export default function SyncPairs() {
                       <SelectItem value="mirror">Mirror</SelectItem>
                     </SelectContent>
                   </Select>
+                  <p className="text-xs text-fg-subtle">
+                    <span className="font-medium">Push</span> copies source → destination.{' '}
+                    <span className="font-medium">Pull</span> reverses it (dest ← source).{' '}
+                    <span className="font-medium">Mirror</span> is like push but adds{' '}
+                    <code className="font-mono">--delete</code> (see warning).
+                  </p>
                 </div>
                 <div className="space-y-1.5">
                   <Label htmlFor="sp-rsync-flags">Rsync Flags</Label>
@@ -427,6 +433,22 @@ export default function SyncPairs() {
                   />
                 </div>
               </div>
+              {form.direction === 'mirror' && (
+                <div
+                  role="alert"
+                  className="flex items-start gap-2 rounded-card p-3 bg-amber-500/10 border border-amber-500/30"
+                >
+                  <AlertTriangle className="h-4 w-4 text-amber-400 shrink-0 mt-0.5" />
+                  <div className="text-xs text-amber-200 leading-relaxed">
+                    <span className="font-semibold">Mirror will delete files.</span>{' '}
+                    With <code className="font-mono">--delete</code>, any file in the
+                    destination that doesn&apos;t exist in the source is permanently
+                    removed. Double-check both paths before saving — a wrong
+                    destination (e.g. <code className="font-mono">/</code> or{' '}
+                    <code className="font-mono">/home</code>) can wipe data.
+                  </div>
+                </div>
+              )}
               <div className="space-y-1.5">
                 <Label htmlFor="sp-exclude">Exclude Patterns</Label>
                 <Textarea