Add hybrid app version labels

frontend/src/App.tsx

@@ -5,7 +5,11 @@ import {
 	NavLink,
 	useLocation,
 } from "react-router-dom";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+	QueryClient,
+	QueryClientProvider,
+	useQuery,
+} from "@tanstack/react-query";
 import { ThemeProvider } from "@mui/material/styles";
 import {
 	AppBar,
@@ -34,6 +38,8 @@ import { FileBrowser } from "./pages/FileBrowser";
 import { Actions } from "./pages/Actions";
 import { getAppTheme } from "./theme";
 import { getOidcConfig, isOidcConfigured, setAccessToken } from "./auth";
+import { fetchAppVersion } from "./api/client";
+import { FRONTEND_VERSION_LABEL } from "./version";
 
 const queryClient = new QueryClient({
 	defaultOptions: { queries: { retry: 1, refetchOnWindowFocus: false } },
@@ -51,6 +57,12 @@ function Shell({
 	const location = useLocation();
 	const current = location.pathname;
 	const isMobile = useMediaQuery("(max-width: 900px)");
+	const { data: appVersion } = useQuery({
+		queryKey: ["app-version"],
+		queryFn: fetchAppVersion,
+		staleTime: 60 * 60 * 1000,
+	});
+	const backendLabel = appVersion?.backend_label || "…";
 
 	return (
 		<>
@@ -126,6 +138,16 @@ function Shell({
 							width: { xs: "100%", md: "auto" },
 						}}
 					>
+						<Chip
+							label={`FE ${FRONTEND_VERSION_LABEL}`}
+							variant="outlined"
+							sx={{ maxWidth: { xs: "100%", sm: 220 } }}
+						/>
+						<Chip
+							label={`BE ${backendLabel}`}
+							variant="outlined"
+							sx={{ maxWidth: { xs: "100%", sm: 220 } }}
+						/>
 						{authLabel && (
 							<Chip
 								label={authLabel}