feat(frontend): Add version display in header near connection status

Co-authored-by: elisiariocouto <818914+elisiariocouto@users.noreply.github.com>

frontend/src/components/SiteHeader.tsx

@@ -30,6 +30,17 @@ export function SiteHeader() {
     refetchInterval: 30000,
   });
 
+  const {
+    data: versionData,
+    isLoading: versionLoading,
+    isError: versionError,
+  } = useQuery({
+    queryKey: ["version"],
+    queryFn: apiClient.getVersion,
+    refetchInterval: 5 * 60 * 1000, // Refetch version every 5 minutes
+    retry: 1, // Only retry once since version is less critical
+  });
+
   return (
     <header className="flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear pt-safe-top">
       <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
@@ -43,6 +54,20 @@ export function SiteHeader() {
         </h1>
 
         <div className="ml-auto flex items-center space-x-3">
+          {/* Version display */}
+          <div className="flex items-center space-x-1">
+            {versionLoading ? (
+              <span className="text-xs text-muted-foreground">v...</span>
+            ) : versionError || !versionData ? (
+              <span className="text-xs text-muted-foreground">v?</span>
+            ) : (
+              <span className="text-xs text-muted-foreground">
+                v{versionData.version}
+              </span>
+            )}
+          </div>
+          
+          {/* Connection status */}
           <div className="flex items-center space-x-1">
             {healthLoading ? (
               <>

frontend/src/lib/api.ts

@@ -10,6 +10,7 @@ import type {
   NotificationService,
   NotificationServicesResponse,
   HealthData,
+  VersionData,
   AccountUpdate,
   TransactionStats,
 } from "../types/api";
@@ -167,6 +168,15 @@ export const apiClient = {
     return response.data.data;
   },
 
+  // Get version information
+  getVersion: async (): Promise<VersionData> => {
+    // Use the root endpoint (/) which provides version information
+    const response = await api.get<VersionData>("/", {
+      baseURL: import.meta.env.VITE_API_URL?.replace('/api/v1', '') || '',
+    });
+    return response.data;
+  },
+
   // Analytics endpoints
   getTransactionStats: async (days?: number): Promise<TransactionStats> => {
     const queryParams = new URLSearchParams();

frontend/src/types/api.ts

@@ -201,6 +201,12 @@ export interface HealthData {
   error?: string;
 }
 
+// Version information from root endpoint
+export interface VersionData {
+  message: string;
+  version: string;
+}
+
 // Analytics data types
 export interface TransactionStats {
   period_days: number;