feat: sse for volume status change

apps/client/app/components/volume-file-browser.tsx

@@ -15,7 +15,6 @@ interface FileEntry {
 type VolumeFileBrowserProps = {
 	volumeName: string;
 	enabled?: boolean;
-	refetchInterval?: number | false;
 	withCheckboxes?: boolean;
 	selectedPaths?: Set<string>;
 	onSelectionChange?: (paths: Set<string>) => void;
@@ -28,7 +27,6 @@ type VolumeFileBrowserProps = {
 export const VolumeFileBrowser = ({
 	volumeName,
 	enabled = true,
-	refetchInterval,
 	withCheckboxes = false,
 	selectedPaths,
 	onSelectionChange,
@@ -46,7 +44,6 @@ export const VolumeFileBrowser = ({
 	const { data, isLoading, error } = useQuery({
 		...listFilesOptions({ path: { name: volumeName } }),
 		enabled,
-		refetchInterval,
 	});
 
 	useMemo(() => {

apps/client/app/hooks/use-server-events.ts

@@ -92,6 +92,17 @@ export function useServerEvents() {
 			});
 		});
 
+		eventSource.addEventListener("volume:status_updated", (e) => {
+			const data = JSON.parse(e.data) as VolumeEvent;
+			console.log("[SSE] Volume status updated:", data);
+
+			queryClient.invalidateQueries();
+
+			handlersRef.current.get("volume:updated")?.forEach((handler) => {
+				handler(data);
+			});
+		});
+
 		eventSource.onerror = (error) => {
 			console.error("[SSE] Connection error:", error);
 		};

apps/client/app/modules/volumes/tabs/files.tsx

@@ -30,7 +30,6 @@ export const FilesTabContent = ({ volume }: Props) => {
 				<VolumeFileBrowser
 					volumeName={volume.name}
 					enabled={volume.status === "mounted"}
-					refetchInterval={10000}
 					className="overflow-auto flex-1 border rounded-md bg-card p-2"
 					emptyMessage="This volume is empty."
 					emptyDescription="Files and folders will appear here once you add them."

apps/server/src/core/events.ts

@@ -6,10 +6,16 @@ import type { TypedEmitter } from "tiny-typed-emitter";
  */
 interface ServerEvents {
 	"backup:started": (data: { scheduleId: number; volumeName: string; repositoryName: string }) => void;
-	"backup:completed": (data: { scheduleId: number; volumeName: string; repositoryName: string; status: "success" | "error" }) => void;
+	"backup:completed": (data: {
+		scheduleId: number;
+		volumeName: string;
+		repositoryName: string;
+		status: "success" | "error";
+	}) => void;
 	"volume:mounted": (data: { volumeName: string }) => void;
 	"volume:unmounted": (data: { volumeName: string }) => void;
 	"volume:updated": (data: { volumeName: string }) => void;
+	"volume:status_changed": (data: { volumeName: string; status: string }) => void;
 }
 
 /**

apps/server/src/modules/events/events.controller.ts

@@ -75,7 +75,7 @@ export const eventsController = new Hono().get("/", (c) => {
 				data: JSON.stringify({ timestamp: Date.now() }),
 				event: "heartbeat",
 			});
-			await stream.sleep(30000);
+			await stream.sleep(5000);
 		}
 	});
 });

apps/server/src/modules/volumes/volume.service.ts

@@ -224,6 +224,10 @@ const checkHealth = async (name: string) => {
 	const backend = createVolumeBackend(volume);
 	const { error, status } = await backend.checkHealth();
 
+	if (status !== volume.status) {
+		serverEvents.emit("volume:status_changed", { volumeName: name, status });
+	}
+
 	await db
 		.update(volumesTable)
 		.set({ lastHealthCheck: Date.now(), status, lastError: error ?? null })