added keep_hourly

frontend/src/components/VMDetail.jsx

@@ -3,11 +3,15 @@ import { useEffect, useMemo, useState } from 'react';
 import { api, errorMessage } from '../api.js';
 import { JobStatusPanel } from './JobStatusPanel.jsx';
 import { RestoreModal } from './RestoreModal.jsx';
+import { SnapshotFilesPanel } from './SnapshotFilesPanel.jsx';
 import { SnapshotTable } from './SnapshotTable.jsx';
 
 export function VMDetail({ jobs, onBack, onChanged, vm }) {
   const [snapshots, setSnapshots] = useState([]);
   const [selectedSnapshot, setSelectedSnapshot] = useState(null);
+  const [inspectedSnapshot, setInspectedSnapshot] = useState(null);
+  const [snapshotFiles, setSnapshotFiles] = useState([]);
+  const [snapshotFilesLoading, setSnapshotFilesLoading] = useState(false);
   const [confirmText, setConfirmText] = useState('');
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState('');
@@ -61,6 +65,21 @@ export function VMDetail({ jobs, onBack, onChanged, vm }) {
     }
   }
 
+  async function inspectSnapshot(snapshot) {
+    setInspectedSnapshot(snapshot);
+    setSnapshotFiles([]);
+    setSnapshotFilesLoading(true);
+    setError('');
+    try {
+      const result = await api.get(`/snapshots/${encodeURIComponent(vm.name)}/${encodeURIComponent(snapshot.id)}/files`);
+      setSnapshotFiles(result.data);
+    } catch (requestError) {
+      setError(errorMessage(requestError));
+    } finally {
+      setSnapshotFilesLoading(false);
+    }
+  }
+
   return (
     <section className="space-y-5">
       <div className="flex flex-col gap-4 border-b border-zinc-800 pb-5 sm:flex-row sm:items-end sm:justify-between">
@@ -95,7 +114,20 @@ export function VMDetail({ jobs, onBack, onChanged, vm }) {
       {error ? <div className="rounded-md border border-amber-900 bg-amber-950/50 px-4 py-3 text-sm text-amber-200">{error}</div> : null}
 
       <JobStatusPanel job={visibleJob} />
-      <SnapshotTable snapshots={snapshots} onRestore={(snapshot) => setSelectedSnapshot(snapshot)} />
+      <SnapshotTable
+        snapshots={snapshots}
+        onInspect={inspectSnapshot}
+        onRestore={(snapshot) => setSelectedSnapshot(snapshot)}
+      />
+      <SnapshotFilesPanel
+        files={snapshotFiles}
+        loading={snapshotFilesLoading}
+        onClose={() => {
+          setInspectedSnapshot(null);
+          setSnapshotFiles([]);
+        }}
+        snapshot={inspectedSnapshot}
+      />
       <RestoreModal
         busy={busy}
         confirmText={confirmText}