feat: add update notification banner to dashboard homepage (resolves #552)

src/app/(dashboard)/dashboard/HomePageClient.tsx

@@ -23,6 +23,9 @@ export default function HomePageClient({ machineId }) {
   const [selectedProvider, setSelectedProvider] = useState(null);
   const [providerMetrics, setProviderMetrics] = useState({});
 
+  const [versionInfo, setVersionInfo] = useState<any>(null);
+  const [updating, setUpdating] = useState(false);
+
   useEffect(() => {
     if (typeof window !== "undefined") {
       setBaseUrl(`${window.location.origin}/v1`);
@@ -31,10 +34,11 @@ export default function HomePageClient({ machineId }) {
 
   const fetchData = useCallback(async () => {
     try {
-      const [provRes, modelsRes, metricsRes] = await Promise.all([
+      const [provRes, modelsRes, metricsRes, versionRes] = await Promise.all([
         fetch("/api/providers"),
         fetch("/api/models"),
         fetch("/api/provider-metrics"),
+        fetch("/api/system/version"),
       ]);
       if (provRes.ok) {
         const provData = await provRes.json();
@@ -48,6 +52,10 @@ export default function HomePageClient({ machineId }) {
         const metricsData = await metricsRes.json();
         setProviderMetrics(metricsData.metrics || {});
       }
+      if (versionRes.ok) {
+        const versionData = await versionRes.json();
+        setVersionInfo(versionData);
+      }
     } catch (e) {
       console.log("Error fetching data:", e);
     } finally {
@@ -123,6 +131,27 @@ export default function HomePageClient({ machineId }) {
     },
   ];
 
+  const handleUpdate = async () => {
+    const notify = useNotificationStore.getState();
+    setUpdating(true);
+    try {
+      notify.info(t("updateStarted") || "Update process started...");
+      const res = await fetch("/api/system/version", { method: "POST" });
+      const data = await res.json();
+      if (res.ok && data.success) {
+        notify.success(
+          data.message || "Update initiated successfully. The system will restart shortly."
+        );
+      } else {
+        notify.error(data.error || "Failed to start update.");
+        setUpdating(false);
+      }
+    } catch {
+      notify.error("Network error while trying to update.");
+      setUpdating(false);
+    }
+  };
+
   if (loading) {
     return (
       <div className="flex flex-col gap-8">
@@ -136,6 +165,30 @@ export default function HomePageClient({ machineId }) {
 
   return (
     <div className="flex flex-col gap-8">
+      {/* Update Notification Banner */}
+      {versionInfo?.updateAvailable && (
+        <div className="bg-primary/10 border border-primary/20 text-primary px-5 py-4 rounded-xl flex items-center justify-between min-h-[64px]">
+          <div className="flex items-center gap-4">
+            <span className="material-symbols-outlined text-[24px]">system_update_alt</span>
+            <div>
+              <p className="font-semibold text-sm">Update Available: v{versionInfo.latest}</p>
+              <p className="text-xs opacity-80 mt-0.5">
+                {t("updateAvailableDesc") ||
+                  `You are currently using v${versionInfo.current}. Update to access the latest features and bug fixes.`}
+              </p>
+            </div>
+          </div>
+          <Button
+            size="sm"
+            onClick={handleUpdate}
+            disabled={updating}
+            className="shrink-0 ml-4 font-semibold"
+          >
+            {updating ? t("updating") || "Updating..." : t("updateNow") || "Update Now"}
+          </Button>
+        </div>
+      )}
+
       {/* Quick Start */}
       <Card>
         <div className="flex flex-col gap-5">