feat(instances): add VM owner assignment and snapshot archive view

Surface two previously-unused admin endpoints: assign/clear a VM's owner from
the instance Settings tab, and a /instances/snapshot-archives page listing
snapshots preserved from deleted guests (with config detail), linked from the
Instances header for admins.

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

frontend/src/features/instances/InstancesPage.tsx

@@ -67,6 +67,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
 import { StatusDot } from '@/components/shared/status-dot';
 import { useVirtualMachines, useBulkOperation, usePowerAction, useVMStatusSync, useInstancesMetricsSync } from '@/hooks/use-instances';
 import { useServers } from '@/hooks/use-nodes';
+import { useProfile } from '@/hooks/use-settings';
 import { formatBytes, vmTypeLabel, formatUptime } from '@/lib/format';
 import { apiClient } from '@/lib/api-client';
 import { useDeployTasksStore } from '@/stores/deploy-tasks-store';
@@ -258,6 +259,7 @@ export default function InstancesPage() {
   }, [activeTasks.length, activeTasks.map((t) => t.id).join(',')]);
 
   const { data: servers = [] } = useServers();
+  const { data: profile } = useProfile();
 
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState<string>('all');
@@ -664,10 +666,18 @@ export default function InstancesPage() {
       {/* Header */}
       <div className="flex items-center justify-between">
         <h1 className="text-[22px] font-semibold">{t('nav.instances', 'Instances')}</h1>
-        <Button render={<Link to="/instances/create" />} size="sm">
-          <Plus className="mr-1.5 h-4 w-4" />
-          {t('instances.create', 'Create Instance')}
-        </Button>
+        <div className="flex items-center gap-2">
+          {profile?.is_admin && (
+            <Button render={<Link to="/instances/snapshot-archives" />} size="sm" variant="outline">
+              <Camera className="mr-1.5 h-4 w-4" />
+              {t('snap_archive.title')}
+            </Button>
+          )}
+          <Button render={<Link to="/instances/create" />} size="sm">
+            <Plus className="mr-1.5 h-4 w-4" />
+            {t('instances.create', 'Create Instance')}
+          </Button>
+        </div>
       </div>
 
       {/* Type Tabs */}

frontend/src/features/instances/SnapshotArchivesPage.tsx

@@ -0,0 +1,112 @@
+import { useState } from 'react';
+import { Link } from 'react-router';
+import { useTranslation } from 'react-i18next';
+import { ArrowLeft, Camera, Eye } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useSnapshotArchives, useSnapshotArchiveDetail } from '@/hooks/use-instances';
+
+export default function SnapshotArchivesPage() {
+  const { t } = useTranslation();
+  const { data, isLoading } = useSnapshotArchives({ limit: 200 });
+  const [detailId, setDetailId] = useState<number | null>(null);
+  const { data: detail } = useSnapshotArchiveDetail(detailId);
+
+  const archives = data?.archives ?? [];
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-3">
+        <Button render={<Link to="/instances" />} variant="ghost" size="sm"><ArrowLeft className="h-4 w-4" /></Button>
+        <div>
+          <h1 className="text-2xl font-bold flex items-center gap-2"><Camera className="h-6 w-6" />{t('snap_archive.title')}</h1>
+          <p className="text-sm text-muted-foreground">{t('snap_archive.subtitle')}</p>
+        </div>
+        {data && <Badge variant="secondary" className="ml-auto">{data.total}</Badge>}
+      </div>
+
+      <Card>
+        <CardContent className="p-0">
+          {isLoading ? (
+            <p className="py-12 text-center text-sm text-muted-foreground">{t('common.loading')}</p>
+          ) : archives.length === 0 ? (
+            <div className="py-16 text-center text-muted-foreground">
+              <Camera className="mx-auto h-12 w-12 mb-3 opacity-50" />
+              <p>{t('snap_archive.empty')}</p>
+            </div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('snap_archive.snapshot')}</TableHead>
+                  <TableHead>VM</TableHead>
+                  <TableHead>{t('nodes.title')}</TableHead>
+                  <TableHead>{t('snap_archive.deleted_by')}</TableHead>
+                  <TableHead>{t('snap_archive.archived_at')}</TableHead>
+                  <TableHead className="text-right">{t('common.actions')}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {archives.map(a => (
+                  <TableRow key={a.id}>
+                    <TableCell className="font-mono font-medium">
+                      {a.snapname}
+                      {a.description && <p className="text-xs text-muted-foreground font-sans">{a.description}</p>}
+                    </TableCell>
+                    <TableCell>
+                      <span className="text-sm">{a.vm_name || '—'}</span>
+                      <span className="ml-1 text-xs text-muted-foreground">#{a.vmid}</span>
+                      {a.vm_type && <Badge variant="outline" className="ml-2 text-[10px]">{a.vm_type === 'qemu' ? 'VM' : 'LXC'}</Badge>}
+                    </TableCell>
+                    <TableCell className="text-xs text-muted-foreground">{a.server_name || a.server_id}{a.node ? ` / ${a.node}` : ''}</TableCell>
+                    <TableCell className="text-xs">{a.deleted_by || '—'}</TableCell>
+                    <TableCell className="text-xs text-muted-foreground">{a.archived_at ? new Date(a.archived_at).toLocaleString() : '—'}</TableCell>
+                    <TableCell className="text-right">
+                      <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setDetailId(a.id)}>
+                        <Eye className="h-3.5 w-3.5" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      <Dialog open={detailId != null} onOpenChange={(v) => { if (!v) setDetailId(null); }}>
+        <DialogContent>
+          <DialogHeader><DialogTitle>{detail?.snapname || t('snap_archive.title')}</DialogTitle></DialogHeader>
+          {detail && (
+            <div className="space-y-2 text-sm">
+              <Row label="VM" value={`${detail.vm_name || ''} #${detail.vmid} (${detail.vm_type})`} />
+              <Row label={t('nodes.title')} value={`${detail.server_name || detail.server_id}${detail.node ? ` / ${detail.node}` : ''}`} />
+              {detail.parent && <Row label={t('snap_archive.parent')} value={detail.parent} />}
+              <Row label={t('snap_archive.deleted_by')} value={detail.deleted_by || '—'} />
+              {detail.deletion_reason && <Row label={t('snap_archive.reason')} value={detail.deletion_reason} />}
+              <Row label={t('snap_archive.archived_at')} value={detail.archived_at ? new Date(detail.archived_at).toLocaleString() : '—'} />
+              {detail.snapshot_config && (
+                <div>
+                  <p className="mb-1 text-xs font-medium text-muted-foreground">{t('snap_archive.config')}</p>
+                  <pre className="max-h-64 overflow-auto rounded-md bg-muted p-3 text-xs whitespace-pre-wrap">{detail.snapshot_config}</pre>
+                </div>
+              )}
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+function Row({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex gap-2">
+      <span className="w-32 shrink-0 text-muted-foreground">{label}</span>
+      <span className="font-mono">{value}</span>
+    </div>
+  );
+}

frontend/src/features/instances/tabs/SettingsTab.tsx

@@ -5,7 +5,9 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { useVMConfig, useUpdateConfig, useResizeDisk } from '@/hooks/use-instances';
+import { useVMConfig, useUpdateConfig, useResizeDisk, useVMOwner, useSetVMOwner } from '@/hooks/use-instances';
+import { useProfile } from '@/hooks/use-settings';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { toast } from 'sonner';
 
 interface Props {
@@ -15,6 +17,58 @@ interface Props {
   node: string;
 }
 
+const OWNER_NONE = '__none__';
+
+function OwnerCard({ serverId, vmid }: { serverId: number; vmid: number }) {
+  const { t } = useTranslation();
+  const { data: profile } = useProfile();
+  const isAdmin = !!profile?.is_admin;
+  const { data: owner } = useVMOwner(serverId, vmid, isAdmin);
+  const setOwner = useSetVMOwner(serverId, vmid);
+  const [selected, setSelected] = useState<string | null>(null);
+
+  if (!isAdmin) return null;
+
+  const current = owner?.owner_id != null ? String(owner.owner_id) : OWNER_NONE;
+  const value = selected ?? current;
+
+  const handleSave = () => {
+    const userId = value === OWNER_NONE ? null : Number(value);
+    setOwner.mutate(userId, {
+      onSuccess: () => { toast.success(t('instances.owner_saved')); setSelected(null); },
+      onError: (e: Error) => toast.error(e.message),
+    });
+  };
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-semibold flex items-center gap-2">
+          <Settings className="h-4 w-4" />{t('instances.owner')}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="flex items-end gap-2">
+          <div className="flex-1">
+            <Label>{t('instances.owner')}</Label>
+            <Select value={value} onValueChange={v => { if (v) setSelected(v); }}>
+              <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value={OWNER_NONE}>{t('instances.no_owner')}</SelectItem>
+                {(owner?.users ?? []).map(u => (
+                  <SelectItem key={u.id} value={String(u.id)}>{u.username}{u.full_name ? ` (${u.full_name})` : ''}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <Button size="sm" onClick={handleSave} disabled={setOwner.isPending || value === current}>{t('common.save')}</Button>
+        </div>
+        <p className="text-xs text-muted-foreground">{t('instances.owner_hint')}</p>
+      </CardContent>
+    </Card>
+  );
+}
+
 export default function SettingsTab({ serverId, vmid, type, node }: Props) {
   const { t } = useTranslation();
   const { data: config } = useVMConfig(serverId, vmid, type, node);
@@ -66,6 +120,8 @@ export default function SettingsTab({ serverId, vmid, type, node }: Props) {
 
   return (
     <div className="space-y-6 max-w-2xl">
+      <OwnerCard serverId={serverId} vmid={vmid} />
+
       {/* CPU & Memory */}
       <Card>
         <CardHeader className="pb-2">