From 340e1a3235916566a4e403e9ec7b82ea799fbffd Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 21 Sep 2025 23:08:17 +0000
Subject: [PATCH] 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 | 25 +++++++++++++++++++++++++
 frontend/src/lib/api.ts                | 10 ++++++++++
 frontend/src/types/api.ts              |  6 ++++++
 3 files changed, 41 insertions(+)

diff --git a/frontend/src/components/SiteHeader.tsx b/frontend/src/components/SiteHeader.tsx
index f6d1359..8494265 100644
--- a/frontend/src/components/SiteHeader.tsx
+++ b/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 ? (
               <>
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index 66ddca7..e1c6356 100644
--- a/frontend/src/lib/api.ts
+++ b/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();
diff --git a/frontend/src/types/api.ts b/frontend/src/types/api.ts
index 5a09e3b..1eae3d0 100644
--- a/frontend/src/types/api.ts
+++ b/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;