feat: auto update works

Author: antoncoding

src-tauri/capabilities/deafult.json

@@ -0,0 +1,42 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "main",
+  "description": "Default capability set for Milo desktop windows",
+  "local": true,
+  "windows": ["*"],
+  "permissions": [
+    "core:default",
+    "core:window:allow-center",
+    "core:window:allow-set-title",
+    "core:window:allow-set-position",
+    "core:window:allow-start-dragging",
+    "core:window:allow-set-theme",
+    "core:window:deny-internal-toggle-maximize",
+    "core:window:allow-set-size",
+    "core:window:allow-set-focus",
+    "core:window:allow-show",
+    "core:window:allow-hide",
+    "dialog:default",
+    "notification:default",
+    "clipboard-manager:default",
+    "global-shortcut:default",
+    "shell:default",
+    {
+      "identifier": "shell:allow-execute",
+      "allow": [
+        {
+          "name": "bin/ocr",
+          "sidecar": true,
+          "args": true
+        }
+      ]
+    },
+    "updater:default",
+    "updater:allow-check",
+    "updater:allow-download",
+    "updater:allow-download-and-install",
+    "updater:allow-install",
+    "core:app:default",
+    "core:app:allow-version"
+  ]
+}

src-tauri/capabilities/main.json

@@ -1,4 +1,4 @@
-use tauri::Manager;
+use tauri::{AppHandle, Manager};
 
 use crate::{
     settings::{api_key_file_path, litellm_api_key_file_path, Settings},
@@ -90,3 +90,11 @@ pub async fn show_settings(window: tauri::Window) -> Result<(), String> {
     }
     Ok(())
 }
+
+#[tauri::command]
+pub async fn relaunch_app(app: AppHandle) -> Result<(), String> {
+    std::thread::spawn(move || {
+        app.restart();
+    });
+    Ok(())
+}

src-tauri/src/api.rs

@@ -83,6 +83,7 @@ pub fn run() {
             api::save_settings,
             api::get_settings,
             api::show_settings,
+            api::relaunch_app,
             core::transform_clipboard,
             core::transform_clip_with_setting,
             shortcuts::get_current_shortcut,

src-tauri/src/lib.rs

@@ -20,13 +20,15 @@
   },
   "productName": "Milo",
   "mainBinaryName": "Milo",
-  "version": "0.1.15",
+  "version": "0.1.14",
   "identifier": "com.milo.dev",
   "plugins": {
     "updater": {
+      "active": true,
       "endpoints": [
         "https://raw.githubusercontent.com/antoncoding/milo/master/latest.json"
       ],
+      "dialog": true,
       "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEVEN0Q0OEYzNDgyOTIxQUEKUldTcUlTbEk4MGg5N1VITktmZ3VBK2QrVzcrRzJYTmhSVTQ0ZjRvSVFxUGsvcmtEdHE0SXhKemIK"
     }
   },

src-tauri/tauri.conf.json

@@ -1,22 +1,32 @@
 import { invoke } from "@tauri-apps/api/core";
 import { getVersion } from "@tauri-apps/api/app";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { backendFormatToShortcut, Shortcut } from "../utils/keyboardUtils";
 import { updateManager, UpdateInfo } from "../utils/updater";
 import miloLogo from "../assets/icon.png";
 
 export function InfoPage() {
+  const isDev = import.meta.env.DEV;
   const [shortcut, setShortcut] = useState<Shortcut>([]);
   const [shortcutEnabled, setShortcutEnabled] = useState(true);
   const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null);
   const [isCheckingUpdate, setIsCheckingUpdate] = useState(false);
   const [isDownloading, setIsDownloading] = useState(false);
   const [downloadProgress, setDownloadProgress] = useState(0);
   const [statusMessage, setStatusMessage] = useState<string | null>(null);
+  const [statusVariant, setStatusVariant] = useState<'neutral' | 'success' | 'error'>('neutral');
   const [currentVersion, setCurrentVersion] = useState<string>("");
+  const totalBytesRef = useRef<number | null>(null);
+  const downloadedBytesRef = useRef(0);
+  const initRef = useRef(false);
 
   // Load initial settings and check for updates
   useEffect(() => {
+    if (initRef.current) {
+      return;
+    }
+    initRef.current = true;
+
     const loadSettings = async () => {
       try {
         console.log("🔄 Frontend: Loading initial settings...");
@@ -57,47 +67,88 @@ export function InfoPage() {
       console.error("❌ Failed to get app version:", error);
     });
     // Check for updates 2 seconds after loading to avoid blocking UI
-    setTimeout(checkForUpdatesOnLaunch, 2000);
-  }, []);
+    if (isDev) {
+      setStatusVariant('neutral');
+      setStatusMessage('Auto-updater is disabled in dev builds. Run a packaged app to test updates.');
+    } else {
+      setTimeout(checkForUpdatesOnLaunch, 2000);
+    }
+  }, [isDev]);
 
   const checkForUpdates = async () => {
+    if (isDev) {
+      setStatusVariant('neutral');
+      setStatusMessage('Auto-updater is disabled in dev builds. Run a packaged app to test updates.');
+      return;
+    }
+
     try {
       setIsCheckingUpdate(true);
       const update = await updateManager.checkForUpdates();
       setUpdateInfo(update);
       if (!update) {
         // Show a message that no updates are available
         console.log('No updates available');
+        setStatusVariant('success');
         setStatusMessage(currentVersion ? `Your Milo version v${currentVersion} is up to date!` : 'Milo is up to date!');
       } else {
         setStatusMessage(null);
       }
     } catch (error) {
       console.error('Failed to check for updates:', error);
+      setStatusVariant('error');
       setStatusMessage('Failed to check for updates. Please try again.');
     } finally {
       setIsCheckingUpdate(false);
     }
   };
 
   const downloadUpdate = async () => {
+    if (isDev) {
+      setStatusVariant('neutral');
+      setStatusMessage('Auto-updater is disabled in dev builds. Run a packaged app to test updates.');
+      return;
+    }
+
     if (!updateInfo) return;
 
     try {
       setIsDownloading(true);
+      totalBytesRef.current = null;
+      downloadedBytesRef.current = 0;
+      setDownloadProgress(0);
+      console.log('⬇️ Frontend: Starting update download');
       updateManager.setProgressCallback((event) => {
+        console.log('⬇️ Frontend: Download event received', event);
         if (event.event === 'Started') {
+          totalBytesRef.current = event.data.contentLength ?? null;
+          downloadedBytesRef.current = 0;
           setDownloadProgress(0);
         } else if (event.event === 'Progress') {
-          const progress = Math.round((event.data.chunkLength / event.data.contentLength) * 100);
-          setDownloadProgress(progress);
+          downloadedBytesRef.current += event.data.chunkLength ?? 0;
+          if (totalBytesRef.current && totalBytesRef.current > 0) {
+            const progress = Math.min(100, Math.round((downloadedBytesRef.current / totalBytesRef.current) * 100));
+            setDownloadProgress(progress);
+          } else {
+            setDownloadProgress((prev) => (prev < 99 ? prev + 1 : prev));
+          }
+        } else if (event.event === 'Finished') {
+          setDownloadProgress(100);
+          setIsDownloading(false);
+          setUpdateInfo(null);
+          setStatusVariant('success');
+          setStatusMessage('Update downloaded. Milo will restart once installation finishes.');
         }
       });
 
       await updateManager.downloadAndInstall();
     } catch (error) {
       console.error('Failed to download update:', error);
       setIsDownloading(false);
+      setStatusVariant('error');
+      setStatusMessage(`Failed to download update. ${error instanceof Error ? error.message : ''}`.trim());
+    } finally {
+      downloadedBytesRef.current = 0;
     }
   };
 
@@ -207,8 +258,16 @@ export function InfoPage() {
             </div>
           )}
 
-          {statusMessage && !updateInfo && !isDownloading && (
-            <div className="p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg text-xs text-green-800 dark:text-green-200">
+          {statusMessage && (
+            <div
+              className={`p-3 rounded-lg text-xs ${
+                statusVariant === 'error'
+                  ? 'bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200'
+                  : statusVariant === 'success'
+                  ? 'bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-200'
+                  : 'bg-background-secondary/80 border border-border-primary text-text-secondary'
+              }`}
+            >
               {statusMessage}
             </div>
           )}

src/components/InfoPage.tsx

@@ -1,4 +1,5 @@
-import { check } from '@tauri-apps/plugin-updater';
+import { invoke } from '@tauri-apps/api/core';
+import { check, type DownloadEvent, type Update } from '@tauri-apps/plugin-updater';
 
 export interface UpdateInfo {
   version: string;
@@ -8,50 +9,85 @@ export interface UpdateInfo {
 }
 
 export class UpdateManager {
-  private onProgressCallback?: (event: any) => void;
+  private onProgressCallback?: (event: DownloadEvent) => void;
+  private currentUpdate: Update | null = null;
 
-  setProgressCallback(callback: (event: any) => void) {
+  setProgressCallback(callback: (event: DownloadEvent) => void) {
     this.onProgressCallback = callback;
   }
 
   async checkForUpdates(): Promise<UpdateInfo | null> {
     try {
       const update = await check();
       if (update?.available) {
+        this.currentUpdate = update;
         return {
           version: update.version,
           currentVersion: update.currentVersion,
           body: update.body,
           date: update.date
         };
       }
+      this.currentUpdate = null;
       return null;
     } catch (error) {
       console.error('Failed to check for updates:', error);
       throw new Error('Failed to check for updates');
     }
   }
 
+  private async ensureUpdate(): Promise<Update | null> {
+    if (this.currentUpdate) {
+      return this.currentUpdate;
+    }
+
+    const update = await check();
+    if (update?.available) {
+      this.currentUpdate = update;
+      return update;
+    }
+
+    this.currentUpdate = null;
+    return null;
+  }
+
   async downloadAndInstall(): Promise<void> {
+    let update: Update | null = null;
     try {
-      const update = await check();
-      if (update?.available) {
-        await update.downloadAndInstall((event) => {
-          if (this.onProgressCallback) {
-            this.onProgressCallback(event);
-          }
-        });
-
-        // The updater will handle the restart automatically
-        // No need to manually call relaunch() in Tauri 2.0
-      } else {
+      update = await this.ensureUpdate();
+
+      if (!update) {
         throw new Error('No updates available');
       }
+
+      await update.download((event) => {
+        console.debug('[Updater] download event', event);
+        this.onProgressCallback?.(event);
+      });
+
+      // Ensure UI reaches 100% even if the plugin's Finished event is skipped.
+      this.onProgressCallback?.({ event: 'Finished' } as DownloadEvent);
+
+      await update.install();
+
+      await update.close();
+      update = null;
+      this.currentUpdate = null;
+
+      await invoke('relaunch_app');
     } catch (error) {
       console.error('Failed to download and install update:', error);
       throw error;
+    } finally {
+      if (update) {
+        try {
+          await update.close();
+        } catch (closeError) {
+          console.warn('Failed to close update resource:', closeError);
+        }
+      }
     }
   }
 }
 
-export const updateManager = new UpdateManager();
+export const updateManager = new UpdateManager();