Phase 8: back up & restore remote (agent) stacks (0.8.0)

- Agent: GET /agent/stacks/{id}/backup + POST /agent/stacks/restore (reuse
  backup_service). backup_service gains backup_basename/backup_filename helpers.
- Main proxy streams agent <-> main <-> destination (creds stay central):
  agent_service download_to_file/upload_file; routers/agents.py backup download,
  backup/push, restore upload, restore-from.
- Schedules: BackupSchedule.agent_id; schedule_service downloads from the agent
  when set; per-host filename prefix isolates retention across hosts.
- Frontend: agents api backup/restore; BackupButton/RestoreButton agent-aware
  (Backup on remote stack detail, Restore per host section); schedule form host
  selector (local or an online agent) + host shown on schedule rows.

Rough-verified (per request): py_compile, frontend tsc build, image imports
(main 99 / agent 16 routes). Full live agent round-trip to be tested post-deploy.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/pages/RemoteStackDetail.tsx

@@ -14,6 +14,7 @@ import {
 import { toast } from "sonner";
 import { Badge, Button, Card, Spinner, StatusDot } from "@/components/ui";
 import { HostDot } from "@/components/hosts/HostDot";
+import { BackupButton } from "@/components/stacks/BackupRestore";
 import { agentsApi } from "@/api/agents";
 import { apiErrorMessage } from "@/api/client";
 import { useAuthStore } from "@/store/auth";
@@ -92,6 +93,7 @@ export function RemoteStackDetail() {
             <Button variant="outline" onClick={() => run("down", "Tearing down")} loading={busy}>
               <Power className="h-4 w-4" /> Down
             </Button>
+            <BackupButton stackId={id} agentId={aid} />
           </div>
         )}
       </div>

frontend/src/pages/Settings.tsx

@@ -78,6 +78,7 @@ function SchedulesSection() {
   const { data, isLoading } = useQuery({ queryKey: ["schedules"], queryFn: schedulesApi.list });
   const destinations = useQuery({ queryKey: ["destinations"], queryFn: destinationsApi.list });
   const stacks = useQuery({ queryKey: ["stacks"], queryFn: stacksApi.list });
+  const agents = useQuery({ queryKey: ["agents"], queryFn: () => agentsApi.list() });
   const [adding, setAdding] = useState(false);
   const invalidate = () => qc.invalidateQueries({ queryKey: ["schedules"] });
   const noDest = (destinations.data?.length ?? 0) === 0;
@@ -103,6 +104,7 @@ function SchedulesSection() {
           <ScheduleForm
             stacks={stacks.data ?? []}
             destinations={destinations.data ?? []}
+            agents={agents.data ?? []}
             onDone={() => { setAdding(false); invalidate(); }}
             onCancel={() => setAdding(false)}
           />
@@ -143,6 +145,7 @@ function ScheduleRow({ schedule, onChange }: { schedule: BackupSchedule; onChang
     <Card className="space-y-2">
       <div className="flex flex-wrap items-center justify-between gap-2">
         <div className="flex items-center gap-2">
+          {schedule.agent_name && <Badge>{schedule.agent_name}</Badge>}
           <span className="font-mono text-sm font-medium">{schedule.stack_id}</span>
           <span className="text-slate-400">→</span>
           <Badge>{schedule.destination_name ?? `dest ${schedule.destination_id}`}</Badge>
@@ -178,14 +181,17 @@ function ScheduleRow({ schedule, onChange }: { schedule: BackupSchedule; onChang
 function ScheduleForm({
   stacks,
   destinations,
+  agents,
   onDone,
   onCancel,
 }: {
   stacks: { id: string; name: string }[];
   destinations: BackupDestination[];
+  agents: Agent[];
   onDone: () => void;
   onCancel: () => void;
 }) {
+  const [host, setHost] = useState("local"); // "local" | agent id (string)
   const [form, setForm] = useState({
     stack_id: stacks[0]?.id ?? "",
     destination_id: destinations[0]?.id ?? 0,
@@ -200,19 +206,51 @@ function ScheduleForm({
   });
   const set = (k: string, v: unknown) => setForm((f) => ({ ...f, [k]: v }));
 
+  const isRemote = host !== "local";
+  const agentId = isRemote ? Number(host) : undefined;
+
+  // When a remote host is selected, pull its stacks for the picker.
+  const remoteStacks = useQuery({
+    queryKey: ["agent-stacks", agentId],
+    queryFn: () => agentsApi.stacks(agentId!),
+    enabled: isRemote,
+  });
+  const stackOptions = isRemote
+    ? (remoteStacks.data ?? []).map((s) => ({ id: s.id, name: s.name }))
+    : stacks;
+
+  // Keep stack_id valid as host/options change.
+  useEffect(() => {
+    if (stackOptions.length && !stackOptions.some((s) => s.id === form.stack_id)) {
+      set("stack_id", stackOptions[0].id);
+    }
+  }, [stackOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onlineAgents = agents.filter((a) => a.status === "online");
+
   const create = useMutation({
-    mutationFn: () => schedulesApi.create(form),
+    mutationFn: () => schedulesApi.create({ ...form, agent_id: agentId ?? null }),
     onSuccess: () => { toast.success("Schedule added"); onDone(); },
     onError: (e) => toast.error(apiErrorMessage(e)),
   });
 
   return (
     <Card className="space-y-3">
-      <div className="grid gap-3 sm:grid-cols-2">
+      <div className="grid gap-3 sm:grid-cols-3">
+        <label className="space-y-1">
+          <span className="text-xs font-medium text-slate-500">Host</span>
+          <select className={selectClass} value={host} onChange={(e) => setHost(e.target.value)}>
+            <option value="local">This host</option>
+            {onlineAgents.map((a) => (
+              <option key={a.id} value={String(a.id)}>{a.name}</option>
+            ))}
+          </select>
+        </label>
         <label className="space-y-1">
           <span className="text-xs font-medium text-slate-500">Stack</span>
           <select className={selectClass} value={form.stack_id} onChange={(e) => set("stack_id", e.target.value)}>
-            {stacks.map((s) => (
+            {stackOptions.length === 0 && <option value="">{isRemote ? "no stacks" : "—"}</option>}
+            {stackOptions.map((s) => (
               <option key={s.id} value={s.id}>{s.name}</option>
             ))}
           </select>