feat: add version information component and integrate version check in health API

src/components/layout/Sidebar.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
 import { ExternalLink } from "lucide-react";
 import { links } from "@/data/Sidebar";
+import { VersionInfo } from "./VersionInfo";
 
 interface SidebarProps {
   className?: string;
@@ -19,7 +20,7 @@ export function Sidebar({ className }: SidebarProps) {
 
   return (
     <aside className={cn("w-64 border-r bg-background", className)}>
-      <div className="flex flex-col h-full py-4">
+      <div className="flex flex-col h-full pt-4">
         <nav className="flex flex-col gap-y-1 pl-2 pr-3">
           {links.map((link, index) => {
             const isActive = currentPath === link.href;
@@ -59,6 +60,7 @@ export function Sidebar({ className }: SidebarProps) {
               <ExternalLink className="h-3 w-3" />
             </a>
           </div>
+          <VersionInfo />
         </div>
       </div>
     </aside>

src/components/layout/VersionInfo.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+import { healthApi } from "@/lib/api";
+
+export function VersionInfo() {
+  const [versionInfo, setVersionInfo] = useState<{
+    current: string;
+    latest: string;
+    updateAvailable: boolean;
+  }>({
+    current: "loading...",
+    latest: "",
+    updateAvailable: false
+  });
+
+  useEffect(() => {
+    const fetchVersion = async () => {
+      try {
+        const healthData = await healthApi.check();
+        setVersionInfo({
+          current: healthData.version || "unknown",
+          latest: healthData.latestVersion || "unknown",
+          updateAvailable: healthData.updateAvailable || false
+        });
+      } catch (error) {
+        console.error("Failed to fetch version:", error);
+        setVersionInfo({
+          current: "unknown",
+          latest: "",
+          updateAvailable: false
+        });
+      }
+    };
+
+    fetchVersion();
+  }, []);
+
+  return (
+    <div className="text-xs text-muted-foreground text-center pt-2 pb-3 border-t border-border mt-2">
+      {versionInfo.updateAvailable ? (
+        <div className="flex flex-col">
+          <span>v{versionInfo.current}</span>
+          <span className="text-primary">v{versionInfo.latest} available</span>
+        </div>
+      ) : (
+        <span>v{versionInfo.current}</span>
+      )}
+    </div>
+  );
+}