feat(web): display backend version info in sidebar (#2087)

* feat(web): display backend version info in sidebar

* fix(web): improve version parsing and timeout behavior

* refactor(web): remove useless --version fallback

* feat(web): implement version info caching and improve retrieval logic

* fix(web): clarify version timeout rationale

* fix(web): harden gateway version probing and tests

* style(web): split regexp to two lines for lint

web/frontend/src/components/app-sidebar.tsx

@@ -10,10 +10,12 @@ import {
   IconSparkles,
   IconTools,
 } from "@tabler/icons-react"
+import { useQuery } from "@tanstack/react-query"
 import { Link, useRouterState } from "@tanstack/react-router"
 import * as React from "react"
 import { useTranslation } from "react-i18next"
 
+import { getSystemVersionInfo } from "@/api/system"
 import {
   Collapsible,
   CollapsibleContent,
@@ -27,6 +29,7 @@ import {
   SidebarGroupLabel,
   SidebarMenu,
   SidebarMenuButton,
+  SidebarFooter,
   SidebarMenuItem,
   SidebarRail,
 } from "@/components/ui/sidebar"
@@ -78,6 +81,13 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
     language: (i18n.resolvedLanguage ?? i18n.language ?? "").toLowerCase(),
     t,
   })
+  const { data: versionInfo } = useQuery({
+    queryKey: ["system", "version"],
+    queryFn: getSystemVersionInfo,
+    staleTime: 5 * 60 * 1000,
+  })
+
+  const versionText = versionInfo?.version ?? t("footer.version_unknown")
 
   const navGroups: NavGroup[] = React.useMemo(() => {
     return [
@@ -235,6 +245,26 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           </Collapsible>
         ))}
       </SidebarContent>
+      <SidebarFooter className="border-t-border/30 group-data-[collapsible=icon]:hidden border-t px-3 py-2">
+        <div className="text-muted-foreground flex flex-col gap-0.5 text-[11px] leading-4">
+          <div className="truncate" title={versionText}>
+            <span className="text-foreground/80">{t("footer.version")}:</span>{" "}
+            {versionText}
+          </div>
+          {versionInfo?.git_commit && (
+            <div className="truncate" title={versionInfo.git_commit}>
+              <span className="text-foreground/80">{t("footer.commit")}:</span>{" "}
+              {versionInfo.git_commit}
+            </div>
+          )}
+          {versionInfo?.build_time && (
+            <div className="truncate" title={versionInfo.build_time}>
+              <span className="text-foreground/80">{t("footer.build")}:</span>{" "}
+              {versionInfo.build_time}
+            </div>
+          )}
+        </div>
+      </SidebarFooter>
       <SidebarRail />
     </Sidebar>
   )