Display BanGUI version in dashboard and server config UI

frontend/src/components/ServerStatusBar.tsx

@@ -83,7 +83,7 @@ const useStyles = makeStyles({
  */
 export function ServerStatusBar(): React.JSX.Element {
   const styles = useStyles();
-  const { status, loading, error, refresh } = useServerStatus();
+  const { status, banguiVersion, loading, error, refresh } = useServerStatus();
 
   return (
     <div className={styles.bar} role="status" aria-label="fail2ban server status">
@@ -116,6 +116,14 @@ export function ServerStatusBar(): React.JSX.Element {
         </Tooltip>
       )}
 
+      {banguiVersion != null && (
+        <Tooltip content="BanGUI version" relationship="description">
+          <Badge appearance="filled" size="small">
+            BanGUI v{banguiVersion}
+          </Badge>
+        </Tooltip>
+      )}
+
       {/* ---------------------------------------------------------------- */}
       {/* Stats (only when online)                                         */}
       {/* ---------------------------------------------------------------- */}

frontend/src/components/__tests__/ServerStatusBar.test.tsx

@@ -41,6 +41,7 @@ describe("ServerStatusBar", () => {
   it("shows a spinner while the initial load is in progress", () => {
     mockedUseServerStatus.mockReturnValue({
       status: null,
+      banguiVersion: null,
       loading: true,
       error: null,
       refresh: vi.fn(),
@@ -59,6 +60,7 @@ describe("ServerStatusBar", () => {
         total_bans: 10,
         total_failures: 5,
       },
+      banguiVersion: "1.1.0",
       loading: false,
       error: null,
       refresh: vi.fn(),
@@ -76,6 +78,7 @@ describe("ServerStatusBar", () => {
         total_bans: 0,
         total_failures: 0,
       },
+      banguiVersion: "1.1.0",
       loading: false,
       error: null,
       refresh: vi.fn(),
@@ -93,6 +96,7 @@ describe("ServerStatusBar", () => {
         total_bans: 0,
         total_failures: 0,
       },
+      banguiVersion: "1.2.3",
       loading: false,
       error: null,
       refresh: vi.fn(),
@@ -101,6 +105,24 @@ describe("ServerStatusBar", () => {
     expect(screen.getByText("v1.2.3")).toBeInTheDocument();
   });
 
+  it("renders a BanGUI version badge", () => {
+    mockedUseServerStatus.mockReturnValue({
+      status: {
+        online: true,
+        version: "1.2.3",
+        active_jails: 1,
+        total_bans: 0,
+        total_failures: 0,
+      },
+      banguiVersion: "9.9.9",
+      loading: false,
+      error: null,
+      refresh: vi.fn(),
+    });
+    renderBar();
+    expect(screen.getByText("BanGUI v9.9.9")).toBeInTheDocument();
+  });
+
   it("does not render the version element when version is null", () => {
     mockedUseServerStatus.mockReturnValue({
       status: {
@@ -110,6 +132,7 @@ describe("ServerStatusBar", () => {
         total_bans: 0,
         total_failures: 0,
       },
+      banguiVersion: "1.2.3",
       loading: false,
       error: null,
       refresh: vi.fn(),
@@ -128,6 +151,7 @@ describe("ServerStatusBar", () => {
         total_bans: 21,
         total_failures: 99,
       },
+      banguiVersion: "1.0.0",
       loading: false,
       error: null,
       refresh: vi.fn(),
@@ -143,6 +167,7 @@ describe("ServerStatusBar", () => {
   it("renders an error message when the status fetch fails", () => {
     mockedUseServerStatus.mockReturnValue({
       status: null,
+      banguiVersion: null,
       loading: false,
       error: "Network error",
       refresh: vi.fn(),

frontend/src/components/config/ServerHealthSection.tsx

@@ -352,6 +352,12 @@ export function ServerHealthSection(): React.JSX.Element {
                   <Text className={styles.statValue}>{status.version}</Text>
                 </div>
               )}
+              {status.bangui_version && (
+                <div className={styles.statCard}>
+                  <Text className={styles.statLabel}>BanGUI</Text>
+                  <Text className={styles.statValue}>{status.bangui_version}</Text>
+                </div>
+              )}
               <div className={styles.statCard}>
                 <Text className={styles.statLabel}>Active Jails</Text>
                 <Text className={styles.statValue}>{status.jail_count}</Text>

frontend/src/components/config/__tests__/ServerHealthSection.test.tsx

@@ -0,0 +1,51 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { FluentProvider, webLightTheme } from "@fluentui/react-components";
+import { ServerHealthSection } from "../ServerHealthSection";
+
+vi.mock("../../../api/config");
+
+import { fetchFail2BanLog, fetchServiceStatus } from "../../../api/config";
+
+const mockedFetchServiceStatus = vi.mocked(fetchServiceStatus);
+const mockedFetchFail2BanLog = vi.mocked(fetchFail2BanLog);
+
+describe("ServerHealthSection", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("shows the BanGUI version in the service health panel", async () => {
+    mockedFetchServiceStatus.mockResolvedValue({
+      online: true,
+      version: "1.2.3",
+      bangui_version: "1.2.3",
+      jail_count: 2,
+      total_bans: 5,
+      total_failures: 1,
+      log_level: "INFO",
+      log_target: "STDOUT",
+    });
+
+    mockedFetchFail2BanLog.mockResolvedValue({
+      log_path: "/var/log/fail2ban.log",
+      lines: ["2026-01-01 fail2ban[123]: INFO  Test"],
+      total_lines: 1,
+      log_level: "INFO",
+      log_target: "STDOUT",
+    });
+
+    render(
+      <FluentProvider theme={webLightTheme}>
+        <ServerHealthSection />
+      </FluentProvider>,
+    );
+
+    // The service health panel should render and include the BanGUI version.
+    const banGuiLabel = await screen.findByText("BanGUI");
+    expect(banGuiLabel).toBeInTheDocument();
+
+    const banGuiCard = banGuiLabel.closest("div");
+    expect(banGuiCard).toHaveTextContent("1.2.3");
+  });
+});