From 144171c5e008b601571ce969df4bc11c30d980bd Mon Sep 17 00:00:00 2001
From: Copilot <223556219+Copilot@users.noreply.github.com>
Date: Tue, 25 Aug 2026 07:20:44 +0000
Subject: [PATCH] Fall back to build-time PANEL_VERSION in AppHeader and
 Overview

AppHeader.tsx and Overview.tsx both rendered the version badge only
when `useVersion().data` resolved (`{panelVersion && ...}`), with no
fallback. If GET /api/version fails for any reason (network error,
transient 401/403, request still in flight), `panelVersion` stays
undefined and the badge silently never renders.

AppSidebar.tsx already handles this correctly by falling back to the
Vite-injected `__PANEL_VERSION__` build-time constant:
  const version = useVersion().data ?? PANEL_VERSION;

Applied the same fallback pattern to AppHeader.tsx and Overview.tsx so
the version is always shown immediately from the build-time constant
and seamlessly upgraded to the live API value once/if it resolves.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 web/src/components/AppHeader.tsx | 4 +++-
 web/src/pages/Overview.tsx       | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/web/src/components/AppHeader.tsx b/web/src/components/AppHeader.tsx
index 62f4cac..05a74f2 100644
--- a/web/src/components/AppHeader.tsx
+++ b/web/src/components/AppHeader.tsx
@@ -20,12 +20,14 @@ import type { Lang } from "@/i18n/dict";
 import { TelemetryTicker } from "@/components/TelemetryTicker";
 import { useVersion } from "@/api/hooks";
 
+const PANEL_VERSION = __PANEL_VERSION__;
+
 export function AppHeader() {
   const { session, sudo } = useAuth();
   const { resolved, toggle: toggleTheme } = useTheme();
   const { t, lang, setLang } = useI18n();
   const navigate = useNavigate();
-  const panelVersion = useVersion().data;
+  const panelVersion = useVersion().data ?? PANEL_VERSION;
   const [searchFocused, setSearchFocused] = useState(false);
   const [langOpen, setLangOpen] = useState(false);
 
diff --git a/web/src/pages/Overview.tsx b/web/src/pages/Overview.tsx
index 2ac0679..a5220a9 100644
--- a/web/src/pages/Overview.tsx
+++ b/web/src/pages/Overview.tsx
@@ -28,6 +28,8 @@ import { AnimatedCounter } from "@/components/AnimatedCounter";
 import { cn, formatBytes, formatSpeed } from "@/lib/utils";
 import { SystemGauges } from "@/components/SystemGauges";
 
+const PANEL_VERSION = __PANEL_VERSION__;
+
 function fmtUptime(sec: number): string {
   const d = Math.floor(sec / 86400);
   const h = Math.floor((sec % 86400) / 3600);
@@ -105,7 +107,7 @@ export function Overview() {
   const { data, isLoading: overviewLoading } = useOverview();
   const sys = useSystem();
   const nodesQ = useNodes();
-  const panelVersion = useVersion().data;
+  const panelVersion = useVersion().data ?? PANEL_VERSION;
   const { t } = useI18n();
   const [trafficRange, setTrafficRange] = useState<TrafficRange>("24h");
   const trafficSeries = useTrafficSeries(trafficRange);