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}

frontend/src/api/client.ts

@@ -12,6 +12,7 @@ import type {
 	NowPlayingSession,
 	MonitoringPollerStatus,
 	MonitoringOverviewResponse,
+	AppVersionInfo,
 	MonitoringStatus,
 	MonitoringMetrics,
 	DiskSpace,
@@ -165,6 +166,7 @@ export const fetchMonitoringMachines = () =>
 	get<MonitoringMachine[]>("/api/monitoring/machines");
 export const fetchMonitoringPoller = () =>
 	get<MonitoringPollerStatus>("/api/monitoring/poller");
+export const fetchAppVersion = () => get<AppVersionInfo>("/api/version");
 export const fetchMonitoringOverview = () =>
 	get<MonitoringOverviewResponse>("/api/dashboard/monitoring");
 export const fetchDashboardShortcuts = () =>

frontend/src/types/index.ts

@@ -297,6 +297,13 @@ export interface MonitoringPollerStatus {
 	retention_days: number;
 }
 
+export interface AppVersionInfo {
+	app: string;
+	backend_version: string;
+	backend_build: string;
+	backend_label: string;
+}
+
 export interface MonitoringMachineOverview {
 	machine: MonitoringMachine;
 	status: string;

frontend/src/version.ts

@@ -0,0 +1,19 @@
+declare const __APP_VERSION__: string;
+declare const __APP_BUILD_INFO__: string;
+
+export const FRONTEND_VERSION = __APP_VERSION__;
+export const FRONTEND_BUILD_INFO = __APP_BUILD_INFO__;
+
+export function formatVersionLabel(version: string, buildInfo: string): string {
+	const trimmedVersion = version.trim() || "0.1.0";
+	const trimmedBuild = buildInfo.trim();
+	if (trimmedBuild && trimmedBuild !== "dev") {
+		return `${trimmedVersion}+${trimmedBuild}`;
+	}
+	return trimmedVersion;
+}
+
+export const FRONTEND_VERSION_LABEL = formatVersionLabel(
+	FRONTEND_VERSION,
+	FRONTEND_BUILD_INFO,
+);