feat: Add update available modal on app startup

- Create UpdateContext for global update state management
- Add UpdateAvailableModal component with "Download Now", "View in Settings", and "Remind Me Later" options
- Integrate modal at app root level via UpdateProvider
- Track dismissed versions to avoid showing modal again in same session
- Bump version to 1.4.0

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

Author: yemirhan

apps/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@android-debugger/desktop",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "Android Debugger Desktop Application",
   "author": "Android Debugger Team",
   "private": true,

apps/desktop/src/renderer/App.tsx

@@ -25,20 +25,27 @@ import { WebSocketPanel } from './components/WebSocketPanel';
 import { AppInstallerPanel } from './components/AppInstallerPanel';
 import { useDevices } from './hooks/useDevices';
 import { useBackgroundLogcat } from './hooks/useBackgroundLogcat';
-import { SdkProvider, LogsProvider } from './contexts';
+import { SdkProvider, LogsProvider, UpdateProvider, useUpdateContext } from './contexts';
+import { UpdateAvailableModal } from './components/UpdateAvailableModal';
 
 export type TabId = 'dashboard' | 'memory' | 'logs' | 'cpu-fps' | 'network' | 'sdk' | 'settings' | 'app-info' | 'screen-capture' | 'dev-options' | 'file-inspector' | 'intent-tester' | 'battery' | 'crashes' | 'services' | 'network-stats' | 'activity-stack' | 'jobs' | 'alarms' | 'websocket' | 'install-app';
 
-function App() {
+function AppContent() {
   const [activeTab, setActiveTab] = useState<TabId>('dashboard');
   const [selectedDevice, setSelectedDevice] = useState<Device | null>(null);
   const [packageName, setPackageName] = useState<string>('');
   const { devices, loading: devicesLoading, refresh: refreshDevices } = useDevices();
+  const { setNavigateToSettings } = useUpdateContext();
 
   // Start logcat in background when device is selected
   // This ensures SDK messages are captured regardless of which panel is active
   useBackgroundLogcat(selectedDevice);
 
+  // Register settings navigation for update modal
+  useEffect(() => {
+    setNavigateToSettings(() => setActiveTab('settings'));
+  }, [setNavigateToSettings]);
+
   // Auto-select first device
   useEffect(() => {
     if (!selectedDevice && devices.length > 0) {
@@ -171,9 +178,18 @@ function App() {
             </main>
           </div>
         </div>
+        <UpdateAvailableModal />
       </LogsProvider>
     </SdkProvider>
   );
 }
 
+function App() {
+  return (
+    <UpdateProvider>
+      <AppContent />
+    </UpdateProvider>
+  );
+}
+
 export default App;

apps/desktop/src/renderer/components/UpdateAvailableModal.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { useUpdateContext } from '../contexts/UpdateContext';
+
+export function UpdateAvailableModal() {
+  const {
+    updateStatus,
+    updateInfo,
+    updateProgress,
+    showModal,
+    dismissModal,
+    downloadUpdate,
+    navigateToSettings,
+  } = useUpdateContext();
+
+  if (!showModal || updateStatus !== 'available' || !updateInfo) {
+    return null;
+  }
+
+  const handleViewInSettings = () => {
+    dismissModal();
+    navigateToSettings?.();
+  };
+
+  const handleDownload = async () => {
+    dismissModal();
+    await downloadUpdate();
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        onClick={dismissModal}
+      />
+
+      {/* Modal */}
+      <div className="relative bg-surface border border-border-muted rounded-xl shadow-2xl w-full max-w-md mx-4 overflow-hidden">
+        {/* Header */}
+        <div className="px-6 pt-6 pb-4">
+          <div className="flex items-start gap-4">
+            <div className="w-12 h-12 rounded-xl bg-accent/10 flex items-center justify-center flex-shrink-0">
+              <svg
+                className="w-6 h-6 text-accent"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={1.5}
+                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                />
+              </svg>
+            </div>
+            <div className="flex-1 min-w-0">
+              <h2 className="text-lg font-semibold text-text-primary">
+                Update Available
+              </h2>
+              <p className="text-sm text-text-secondary mt-1">
+                Version {updateInfo.version} is ready to download
+              </p>
+            </div>
+            <button
+              onClick={dismissModal}
+              className="p-1 rounded-md text-text-muted hover:text-text-primary hover:bg-surface-hover transition-colors"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* Release Notes */}
+        {updateInfo.releaseNotes && (
+          <div className="px-6 pb-4">
+            <div className="bg-background rounded-lg p-4 max-h-40 overflow-y-auto">
+              <h3 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-2">
+                What's New
+              </h3>
+              <p className="text-sm text-text-secondary whitespace-pre-wrap">
+                {updateInfo.releaseNotes}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="px-6 pb-6 flex gap-3">
+          <button
+            onClick={dismissModal}
+            className="flex-1 px-4 py-2.5 text-sm font-medium text-text-secondary bg-surface-hover hover:bg-border-muted rounded-lg transition-colors"
+          >
+            Remind Me Later
+          </button>
+          <button
+            onClick={handleViewInSettings}
+            className="flex-1 px-4 py-2.5 text-sm font-medium text-text-primary bg-surface-hover hover:bg-border-muted border border-border-muted rounded-lg transition-colors"
+          >
+            View in Settings
+          </button>
+          <button
+            onClick={handleDownload}
+            className="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-accent hover:bg-accent/80 rounded-lg transition-colors"
+          >
+            Download Now
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/desktop/src/renderer/contexts/UpdateContext.tsx

@@ -0,0 +1,136 @@
+import React, { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
+import type { UpdateInfo, UpdateProgress } from '@android-debugger/shared';
+
+export type UpdateStatus = 'idle' | 'checking' | 'available' | 'downloading' | 'downloaded' | 'error';
+
+interface UpdateContextType {
+  updateStatus: UpdateStatus;
+  updateInfo: UpdateInfo | null;
+  updateProgress: UpdateProgress | null;
+  updateError: string | null;
+  showModal: boolean;
+  dismissModal: () => void;
+  checkForUpdates: () => Promise<void>;
+  downloadUpdate: () => Promise<void>;
+  installUpdate: () => Promise<void>;
+  navigateToSettings: (() => void) | null;
+  setNavigateToSettings: (fn: () => void) => void;
+}
+
+const UpdateContext = createContext<UpdateContextType | null>(null);
+
+interface UpdateProviderProps {
+  children: ReactNode;
+}
+
+export function UpdateProvider({ children }: UpdateProviderProps) {
+  const [updateStatus, setUpdateStatus] = useState<UpdateStatus>('idle');
+  const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null);
+  const [updateProgress, setUpdateProgress] = useState<UpdateProgress | null>(null);
+  const [updateError, setUpdateError] = useState<string | null>(null);
+  const [showModal, setShowModal] = useState(false);
+  const [dismissedVersion, setDismissedVersion] = useState<string | null>(null);
+  const [navigateToSettings, setNavigateToSettingsFn] = useState<(() => void) | null>(null);
+
+  // Set up update event listeners
+  useEffect(() => {
+    const unsubChecking = window.electronAPI.onUpdateChecking(() => {
+      setUpdateStatus('checking');
+      setUpdateError(null);
+    });
+
+    const unsubAvailable = window.electronAPI.onUpdateAvailable((info) => {
+      setUpdateStatus('available');
+      setUpdateInfo(info);
+      // Show modal only if this version wasn't dismissed in this session
+      if (info.version !== dismissedVersion) {
+        setShowModal(true);
+      }
+    });
+
+    const unsubNotAvailable = window.electronAPI.onUpdateNotAvailable(() => {
+      setUpdateStatus('idle');
+      setUpdateInfo(null);
+      setShowModal(false);
+    });
+
+    const unsubProgress = window.electronAPI.onUpdateProgress((progress) => {
+      setUpdateStatus('downloading');
+      setUpdateProgress(progress);
+    });
+
+    const unsubDownloaded = window.electronAPI.onUpdateDownloaded((info) => {
+      setUpdateStatus('downloaded');
+      setUpdateInfo(info);
+      setUpdateProgress(null);
+    });
+
+    const unsubError = window.electronAPI.onUpdateError((error) => {
+      setUpdateStatus('error');
+      setUpdateError(error);
+      setShowModal(false);
+    });
+
+    return () => {
+      unsubChecking();
+      unsubAvailable();
+      unsubNotAvailable();
+      unsubProgress();
+      unsubDownloaded();
+      unsubError();
+    };
+  }, [dismissedVersion]);
+
+  const dismissModal = useCallback(() => {
+    setShowModal(false);
+    if (updateInfo?.version) {
+      setDismissedVersion(updateInfo.version);
+    }
+  }, [updateInfo?.version]);
+
+  const checkForUpdates = useCallback(async () => {
+    setUpdateStatus('checking');
+    setUpdateError(null);
+    await window.electronAPI.checkForUpdates();
+  }, []);
+
+  const downloadUpdate = useCallback(async () => {
+    await window.electronAPI.downloadUpdate();
+  }, []);
+
+  const installUpdate = useCallback(async () => {
+    await window.electronAPI.installUpdate();
+  }, []);
+
+  const setNavigateToSettings = useCallback((fn: () => void) => {
+    setNavigateToSettingsFn(() => fn);
+  }, []);
+
+  return (
+    <UpdateContext.Provider
+      value={{
+        updateStatus,
+        updateInfo,
+        updateProgress,
+        updateError,
+        showModal,
+        dismissModal,
+        checkForUpdates,
+        downloadUpdate,
+        installUpdate,
+        navigateToSettings,
+        setNavigateToSettings,
+      }}
+    >
+      {children}
+    </UpdateContext.Provider>
+  );
+}
+
+export function useUpdateContext() {
+  const context = useContext(UpdateContext);
+  if (!context) {
+    throw new Error('useUpdateContext must be used within an UpdateProvider');
+  }
+  return context;
+}

apps/desktop/src/renderer/contexts/index.ts

@@ -1,3 +1,4 @@
 export { SdkProvider, useSdkContext } from './SdkContext';
 export { LogsProvider, useLogsContext } from './LogsContext';
 export { CrashProvider, useCrashContext } from './CrashContext';
+export { UpdateProvider, useUpdateContext } from './UpdateContext';