fixes and improvements

frontend/src/pages/FileBrowser.impl.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
 import { DataGrid } from "@mui/x-data-grid";
 import type { GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
@@ -25,6 +26,7 @@ import {
 	useRunJob,
 } from "../hooks/useFiles";
 import { usePersistentState } from "../hooks/usePersistentState";
+import { useMonitoringSettings } from "../hooks/useSettings";
 
 interface DisplayRow {
 	id: string;
@@ -556,9 +558,22 @@ function FfprobeDetails({ path, data }: { path: string; data: FfprobeData }) {
 }
 
 export function FileBrowser() {
-	const [searchParams] = useSearchParams();
+	const [searchParams, setSearchParams] = useSearchParams();
 	const isMobile = useMediaQuery("(max-width: 900px)");
+	const { data: machines } = useMonitoringSettings();
+	const fileMachines = useMemo(
+		() =>
+			(machines ?? []).filter(
+				(machine) =>
+					machine.enabled &&
+					(machine.services.includes("files") ||
+						machine.services.includes("monitoring")),
+			),
+		[machines],
+	);
 	const initialRequestedPath = searchParams.get("path");
+	const initialMachineId =
+		searchParams.get("machine_id") || fileMachines[0]?.id || "";
 	const [browserState, setBrowserState] = usePersistentState<FileBrowserState>(
 		FILE_BROWSER_STATE_KEY,
 		() => {
@@ -580,6 +595,7 @@ export function FileBrowser() {
 		},
 	);
 	const { currentDir, pathInput, selectedPath, selectedJob } = browserState;
+	const selectedMachineId = searchParams.get("machine_id") || initialMachineId;
 	const updateBrowserState = (patch: Partial<FileBrowserState>) =>
 		setBrowserState((current) => ({ ...current, ...patch }));
 
@@ -588,7 +604,7 @@ export function FileBrowser() {
 		isLoading,
 		error,
 		refetch,
-	} = useDirectoryListing(currentDir);
+	} = useDirectoryListing(currentDir, selectedMachineId || undefined);
 	const {
 		data: ffprobeData,
 		isLoading: ffprobeLoading,
@@ -596,9 +612,10 @@ export function FileBrowser() {
 	} = useFfprobe(
 		selectedPath ?? "",
 		!!selectedPath && isVideoFile(selectedPath),
+		selectedMachineId || undefined,
 	);
 	const { data: templates } = useJobTemplates();
-	const runJob = useRunJob();
+	const runJob = useRunJob(selectedMachineId || undefined);
 
 	const navigate = (path: string) => {
 		updateBrowserState({
@@ -608,6 +625,18 @@ export function FileBrowser() {
 		});
 	};
 
+	const setMachine = (machineId: string) => {
+		setSearchParams(
+			(current) => {
+				const next = new URLSearchParams(current);
+				if (machineId) next.set("machine_id", machineId);
+				else next.delete("machine_id");
+				return next;
+			},
+			{ replace: true },
+		);
+	};
+
 	const handlePathSubmit = (e: React.KeyboardEvent) => {
 		if (e.key === "Enter") navigate(pathInput || "/");
 	};
@@ -657,7 +686,27 @@ export function FileBrowser() {
 
 	return (
 		<Stack spacing={2}>
-			<Typography variant="h5">File Browser</Typography>
+			<Stack
+				direction="row"
+				spacing={1}
+				sx={{ alignItems: "center", flexWrap: "wrap" }}
+			>
+				<Typography variant="h5">File Browser</Typography>
+				<FormControl size="small" sx={{ minWidth: 220 }}>
+					<InputLabel>Machine</InputLabel>
+					<Select
+						label="Machine"
+						value={selectedMachineId}
+						onChange={(e) => setMachine(String(e.target.value))}
+					>
+						{fileMachines.map((machine) => (
+							<MenuItem key={machine.id} value={machine.id}>
+								{machine.name} · {machine.mode}
+							</MenuItem>
+						))}
+					</Select>
+				</FormControl>
+			</Stack>
 
 			<Stack direction={isMobile ? "column" : "row"} spacing={1}>
 				<TextField