feat: add auto-updater and About view

- Integrate electron-updater with GitHub releases as update source
- Add About view showing app version, Electron/Chrome/Node versions,
  and update status with check/download/install controls
- Add info icon to sidebar (pinned to bottom) for About navigation
- Update release workflow to generate latest.yml for auto-updater
- Upload RELEASES and nupkg alongside exe/zip in GitHub releases

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: dbfx

.github/workflows/release.yml

@@ -27,6 +27,31 @@ jobs:
       - name: Build installers
         run: npm run make
 
+      - name: Generate latest.yml for auto-updater
+        shell: bash
+        run: |
+          VERSION=${GITHUB_REF_NAME#v}
+          SETUP_EXE=$(find out/make -name "*.exe" | head -1)
+          SETUP_NAME=$(basename "$SETUP_EXE")
+          SHA512=$(sha512sum "$SETUP_EXE" | awk '{print $1}')
+          SIZE=$(stat -c%s "$SETUP_EXE")
+
+          cat > out/make/latest.yml << EOF
+          version: ${VERSION}
+          files:
+            - url: ${SETUP_NAME}
+              sha512: ${SHA512}
+              size: ${SIZE}
+          path: ${SETUP_NAME}
+          sha512: ${SHA512}
+          releaseDate: $(date -u +"%Y-%m-%dT%H:%M:%S.000Z")
+          EOF
+
+          # Remove leading whitespace from heredoc
+          sed -i 's/^          //' out/make/latest.yml
+          echo "--- latest.yml ---"
+          cat out/make/latest.yml
+
       - name: Upload artifacts
         uses: actions/upload-artifact@v4
         with:
@@ -35,6 +60,7 @@ jobs:
             out/make/**/*.exe
             out/make/**/*.zip
             out/make/**/*.nupkg
+            out/make/latest.yml
 
       - name: Create GitHub Release
         uses: softprops/action-gh-release@v2
@@ -43,5 +69,8 @@ jobs:
           files: |
             out/make/**/*.exe
             out/make/**/*.zip
+            out/make/**/*.nupkg
+            out/make/**/RELEASES
+            out/make/latest.yml
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package-lock.json

@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "electron-squirrel-startup": "^1.0.1",
+    "electron-updater": "^6.8.3",
     "framer-motion": "^11.15.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package.json

@@ -1,13 +1,40 @@
-import { app, BrowserWindow } from 'electron';
+import { app, BrowserWindow, ipcMain } from 'electron';
 import path from 'node:path';
 import started from 'electron-squirrel-startup';
+import { autoUpdater } from 'electron-updater';
 import { registerIpcHandlers, cleanupSession } from './ipc-handlers';
 
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
 if (started) app.quit();
 
 let mainWindow: BrowserWindow | null = null;
 
+function setupAutoUpdater(win: BrowserWindow) {
+  autoUpdater.setFeedURL({
+    provider: 'github',
+    owner: 'dbfx',
+    repo: 'modern-win-mtr',
+  });
+  autoUpdater.autoDownload = false;
+  autoUpdater.autoInstallOnAppQuit = true;
+
+  const send = (channel: string, data?: unknown) => {
+    if (!win.isDestroyed()) win.webContents.send(channel, data);
+  };
+
+  autoUpdater.on('checking-for-update', () => send('updater:status', 'checking'));
+  autoUpdater.on('update-available', () => send('updater:status', 'available'));
+  autoUpdater.on('update-not-available', () => send('updater:status', 'up-to-date'));
+  autoUpdater.on('download-progress', (progress) => send('updater:progress', progress.percent));
+  autoUpdater.on('update-downloaded', () => send('updater:status', 'downloaded'));
+  autoUpdater.on('error', () => send('updater:status', 'error'));
+
+  ipcMain.handle('updater:check', () => autoUpdater.checkForUpdates().catch(() => {}));
+  ipcMain.handle('updater:download', () => autoUpdater.downloadUpdate().catch(() => {}));
+  ipcMain.handle('updater:install', () => autoUpdater.quitAndInstall());
+  ipcMain.handle('app:version', () => app.getVersion());
+}
+
 const createWindow = () => {
   mainWindow = new BrowserWindow({
     width: 1600,
@@ -36,6 +63,7 @@ const createWindow = () => {
   }
 
   registerIpcHandlers(mainWindow);
+  setupAutoUpdater(mainWindow);
 };
 
 app.on('ready', createWindow);

src/main/main.ts

@@ -34,4 +34,20 @@ contextBridge.exposeInMainWorld('mtrApi', {
     ipcRenderer.on('loss:data', listener as (...args: unknown[]) => void);
     return () => { ipcRenderer.removeListener('loss:data', listener as (...args: unknown[]) => void); };
   },
+
+  // Auto-updater
+  getVersion: () => ipcRenderer.invoke('app:version'),
+  checkForUpdates: () => ipcRenderer.invoke('updater:check'),
+  downloadUpdate: () => ipcRenderer.invoke('updater:download'),
+  installUpdate: () => ipcRenderer.invoke('updater:install'),
+  onUpdaterStatus: (callback: (status: string) => void) => {
+    const listener = (_: unknown, status: string) => callback(status);
+    ipcRenderer.on('updater:status', listener as (...args: unknown[]) => void);
+    return () => { ipcRenderer.removeListener('updater:status', listener as (...args: unknown[]) => void); };
+  },
+  onUpdaterProgress: (callback: (percent: number) => void) => {
+    const listener = (_: unknown, percent: number) => callback(percent);
+    ipcRenderer.on('updater:progress', listener as (...args: unknown[]) => void);
+    return () => { ipcRenderer.removeListener('updater:progress', listener as (...args: unknown[]) => void); };
+  },
 });

src/main/preload.ts

@@ -4,11 +4,12 @@ import Layout from './components/Layout';
 import TraceView from './components/TraceView';
 import MapView from './components/MapView';
 import LossMonitorView from './components/LossMonitorView';
+import AboutView from './components/AboutView';
 import { useMtrSession } from './hooks/useMtrSession';
 import { useLossMonitor } from './hooks/useLossMonitor';
 
 export default function App() {
-  const [activeView, setActiveView] = useState<'trace' | 'map' | 'loss'>('trace');
+  const [activeView, setActiveView] = useState<'trace' | 'map' | 'loss' | 'about'>('trace');
   const { hops, status, target, resolvedIp, error, start, stop } = useMtrSession();
   const lossMonitor = useLossMonitor();
 
@@ -86,6 +87,18 @@ export default function App() {
             />
           </motion.div>
         )}
+        {activeView === 'about' && (
+          <motion.div
+            key="about"
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
+            transition={{ duration: 0.2 }}
+            className="h-full"
+          >
+            <AboutView />
+          </motion.div>
+        )}
       </AnimatePresence>
     </Layout>
   );