Merge pull request #87 from beNative/codex/enhance-auto-update-functionality-and-ui

Add auto-update preferences and in-app install controls

Author: beNative

App.tsx

@@ -181,6 +181,10 @@ const App: React.FC = () => {
   const autoCheckIntervalRef = useRef<number | null>(null);
   const isAutoCheckingRef = useRef(false);
   const [updateReady, setUpdateReady] = useState(false);
+  const [updateStatus, setUpdateStatus] = useState<UpdateStatusMessage | null>(null);
+  const [isUpdateBannerVisible, setIsUpdateBannerVisible] = useState(false);
+  const [autoInstallScheduled, setAutoInstallScheduled] = useState(false);
+  const autoInstallTimeoutRef = useRef<number | null>(null);
 
   // New states for deeper VCS integration
   const [detailedStatuses, setDetailedStatuses] = useState<Record<string, DetailedStatus | null>>({});
@@ -254,6 +258,70 @@ const App: React.FC = () => {
     onCancel: () => {},
   });
 
+  const cancelAutoInstall = useCallback(() => {
+    if (autoInstallTimeoutRef.current) {
+      window.clearTimeout(autoInstallTimeoutRef.current);
+      autoInstallTimeoutRef.current = null;
+    }
+    setAutoInstallScheduled(false);
+  }, []);
+
+  const handleRestartAndUpdate = useCallback(() => {
+    cancelAutoInstall();
+    if (window.electronAPI?.restartAndInstallUpdate) {
+      setToast({ message: 'Restarting to install the latest update…', type: 'info' });
+      window.electronAPI.restartAndInstallUpdate();
+    } else {
+      setToast({ message: 'Could not restart. Please restart the app manually.', type: 'error' });
+    }
+  }, [cancelAutoInstall, setToast]);
+
+  const scheduleAutoInstall = useCallback(() => {
+    cancelAutoInstall();
+    autoInstallTimeoutRef.current = window.setTimeout(() => {
+      setAutoInstallScheduled(false);
+      handleRestartAndUpdate();
+    }, 8000);
+    setAutoInstallScheduled(true);
+  }, [cancelAutoInstall, handleRestartAndUpdate]);
+
+  const handleAutoInstallPreferenceChange = useCallback((mode: GlobalSettings['autoInstallUpdates']) => {
+    if (mode === settings.autoInstallUpdates) {
+      return;
+    }
+    saveSettings({ ...settings, autoInstallUpdates: mode });
+    if (mode === 'manual') {
+      cancelAutoInstall();
+      setToast({
+        message: 'Automatic installation disabled. Use the Update Ready controls when you want to apply the update.',
+        type: 'info',
+      });
+    } else {
+      setToast({
+        message: 'Updates will now install automatically as soon as they finish downloading.',
+        type: 'success',
+      });
+    }
+  }, [cancelAutoInstall, saveSettings, settings, setToast]);
+
+  const handleDeferUpdate = useCallback(() => {
+    if (settings.autoInstallUpdates === 'auto') {
+      handleAutoInstallPreferenceChange('manual');
+    }
+    cancelAutoInstall();
+    setIsUpdateBannerVisible(false);
+    setToast({
+      message: 'Update postponed. Use the “Update Ready” control in the title bar to install whenever you are ready.',
+      type: 'info',
+    });
+  }, [cancelAutoInstall, handleAutoInstallPreferenceChange, settings.autoInstallUpdates, setToast]);
+
+  const handleShowUpdateDetails = useCallback(() => {
+    if (updateReady) {
+      setIsUpdateBannerVisible(true);
+    }
+  }, [updateReady]);
+
   useEffect(() => {
     if (!instrumentation) {
       return;
@@ -467,31 +535,74 @@ const App: React.FC = () => {
   // Effect for auto-updater
   useEffect(() => {
     const handleUpdateStatus = (_event: any, data: UpdateStatusMessage) => {
-        logger.info(`Update status change received: ${data.status}`, data);
-        switch (data.status) {
-            case 'available':
-                setToast({ message: data.message, type: 'info' });
-                break;
-            case 'downloaded':
-                setToast({ message: data.message, type: 'success' });
-                setUpdateReady(true);
-                break;
-            case 'error':
-                setToast({ message: data.message, type: 'error' });
-                break;
-        }
+      logger.info(`Update status change received: ${data.status}`, data);
+      setUpdateStatus(data);
+
+      switch (data.status) {
+        case 'checking':
+          cancelAutoInstall();
+          setUpdateReady(false);
+          setIsUpdateBannerVisible(false);
+          break;
+        case 'available':
+          setToast({ message: data.message, type: 'info' });
+          break;
+        case 'downloaded':
+          setUpdateReady(true);
+          setIsUpdateBannerVisible(true);
+          if (settings.autoInstallUpdates === 'auto') {
+            setToast({ message: 'Update downloaded. Restarting automatically in a few seconds…', type: 'info' });
+            scheduleAutoInstall();
+          } else {
+            cancelAutoInstall();
+            setToast({ message: data.message, type: 'success' });
+          }
+          break;
+        case 'error':
+          cancelAutoInstall();
+          setUpdateReady(false);
+          setIsUpdateBannerVisible(false);
+          setToast({ message: data.message, type: 'error' });
+          break;
+        default:
+          break;
+      }
     };
 
     if (window.electronAPI?.onUpdateStatusChange) {
-        window.electronAPI.onUpdateStatusChange(handleUpdateStatus);
+      window.electronAPI.onUpdateStatusChange(handleUpdateStatus);
     }
 
     return () => {
-        if (window.electronAPI?.removeUpdateStatusChangeListener) {
-            window.electronAPI.removeUpdateStatusChangeListener(handleUpdateStatus);
-        }
+      if (window.electronAPI?.removeUpdateStatusChangeListener) {
+        window.electronAPI.removeUpdateStatusChangeListener(handleUpdateStatus);
+      }
     };
-  }, [logger]);
+  }, [logger, cancelAutoInstall, scheduleAutoInstall, settings.autoInstallUpdates, setToast]);
+
+  useEffect(() => {
+    if (!updateReady) {
+      return;
+    }
+
+    if (settings.autoInstallUpdates === 'auto') {
+      if (!autoInstallScheduled) {
+        scheduleAutoInstall();
+      }
+    } else if (autoInstallScheduled) {
+      cancelAutoInstall();
+    }
+  }, [
+    updateReady,
+    settings.autoInstallUpdates,
+    autoInstallScheduled,
+    scheduleAutoInstall,
+    cancelAutoInstall,
+  ]);
+
+  useEffect(() => () => {
+    cancelAutoInstall();
+  }, [cancelAutoInstall]);
 
   // Effect to check local paths
   useEffect(() => {
@@ -1319,15 +1430,6 @@ const App: React.FC = () => {
     }
   }, []);
 
-  const handleRestartAndUpdate = useCallback(() => {
-    if (window.electronAPI?.restartAndInstallUpdate) {
-        window.electronAPI.restartAndInstallUpdate();
-    } else {
-        setToast({ message: 'Could not restart. Please restart the app manually.', type: 'error' });
-    }
-  }, []);
-
-
   const latestLog = useMemo(() => {
     const allLogs = Object.values(logs).flat();
     if (allLogs.length === 0) return null;
@@ -1428,9 +1530,22 @@ const App: React.FC = () => {
             isCheckingAll={isCheckingAll}
             onToggleAllCategories={toggleAllCategoriesCollapse}
             canCollapseAll={canCollapseAll}
+            updateReady={updateReady}
+            onInstallUpdate={handleRestartAndUpdate}
+            onShowUpdateDetails={handleShowUpdateDetails}
           />
           <div className="flex-1 flex flex-col min-h-0">
-            {updateReady && <UpdateBanner onInstall={handleRestartAndUpdate} />}
+            {updateReady && isUpdateBannerVisible && updateStatus?.status === 'downloaded' && (
+              <UpdateBanner
+                version={updateStatus.version}
+                message={updateStatus.message}
+                autoInstallMode={settings.autoInstallUpdates}
+                autoInstallScheduled={autoInstallScheduled}
+                onChangeMode={handleAutoInstallPreferenceChange}
+                onInstallNow={handleRestartAndUpdate}
+                onInstallLater={handleDeferUpdate}
+              />
+            )}
             <main
               className={mainContentClass}
               data-automation-id="main-content"

components/Header.tsx

@@ -13,6 +13,7 @@ import { ArrowsPointingOutIcon } from './icons/ArrowsPointingOutIcon';
 import { useSettings } from '../contexts/SettingsContext';
 import type { AppView } from '../types';
 import { useTooltip } from '../hooks/useTooltip';
+import { RocketLaunchIcon } from './icons/RocketLaunchIcon';
 
 interface TitleBarProps {
   activeView: AppView;
@@ -22,6 +23,9 @@ interface TitleBarProps {
   isCheckingAll: boolean;
   onToggleAllCategories: () => void;
   canCollapseAll: boolean;
+  updateReady: boolean;
+  onInstallUpdate: () => void;
+  onShowUpdateDetails: () => void;
 }
 
 const TitleBar: React.FC<TitleBarProps> = ({
@@ -32,6 +36,9 @@ const TitleBar: React.FC<TitleBarProps> = ({
   isCheckingAll,
   onToggleAllCategories,
   canCollapseAll,
+  updateReady,
+  onInstallUpdate,
+  onShowUpdateDetails,
 }) => {
   const { settings, saveSettings } = useSettings();
   const isEditing = activeView === 'edit-repository';
@@ -55,6 +62,8 @@ const TitleBar: React.FC<TitleBarProps> = ({
   const newRepoTooltip = useTooltip('Add New Repository');
   const checkUpdatesTooltip = useTooltip('Check all repositories for updates');
   const expandCollapseTooltip = useTooltip(canCollapseAll ? 'Collapse all categories' : 'Expand all categories');
+  const installUpdateTooltip = useTooltip('Restart to apply the update now');
+  const updateDetailsTooltip = useTooltip('Show update installation options');
 
   const noDragStyle = { WebkitAppRegion: 'no-drag' } as React.CSSProperties;
 
@@ -109,6 +118,36 @@ const TitleBar: React.FC<TitleBarProps> = ({
         )}
       </div>
       <div className="flex items-center">
+        {updateReady && (
+          <div
+            className="flex items-center gap-2 pr-2 mr-2 rounded-md border border-green-400/40 bg-green-500/20 px-2 py-1 text-xs font-semibold uppercase tracking-widest text-green-100 shadow-sm"
+            style={noDragStyle}
+            data-automation-id="titlebar-update-ready"
+          >
+            <RocketLaunchIcon className="h-4 w-4" aria-hidden="true" />
+            <span className="hidden sm:inline">Update Ready</span>
+            <div className="flex items-center gap-1">
+              <button
+                {...installUpdateTooltip}
+                onClick={onInstallUpdate}
+                className="rounded bg-white/80 px-2 py-0.5 text-xs font-bold text-green-700 transition hover:bg-white"
+                style={noDragStyle}
+                data-automation-id="titlebar-update-install"
+              >
+                Install
+              </button>
+              <button
+                {...updateDetailsTooltip}
+                onClick={onShowUpdateDetails}
+                className="rounded border border-white/60 px-2 py-0.5 text-xs font-bold text-white/90 transition hover:bg-white/20"
+                style={noDragStyle}
+                data-automation-id="titlebar-update-details"
+              >
+                Details
+              </button>
+            </div>
+          </div>
+        )}
         <div className="flex items-center gap-1 pr-1 border-r border-gray-300/60 dark:border-gray-700/60 mr-1" style={noDragStyle}>
           <button
             {...dashboardTooltip}

components/SettingsView.tsx

@@ -283,6 +283,63 @@ const SettingsView: React.FC<SettingsViewProps> = ({ onSave, currentSettings, se
                 </div>
              </div>
 
+             <div className="space-y-4 pt-6 border-t border-gray-200 dark:border-gray-700">
+                <div className="flex flex-col gap-1">
+                  <span className="text-[11px] font-semibold uppercase tracking-widest text-blue-600 dark:text-blue-400">Application Updates</span>
+                  <h4 className="text-lg font-semibold">Keep Git Automation Dashboard current</h4>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">Control how the app checks for new releases and whether updates install themselves once downloaded.</p>
+                </div>
+                <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+                  <label className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white/60 p-4 shadow-sm transition dark:border-gray-700 dark:bg-gray-900/50">
+                    <input
+                      type="checkbox"
+                      name="autoUpdateChecksEnabled"
+                      checked={settings.autoUpdateChecksEnabled}
+                      onChange={handleChange}
+                      className="mt-1 focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded"
+                      data-automation-id="settings-auto-update-checks"
+                    />
+                    <div>
+                      <p className="font-medium text-gray-900 dark:text-gray-100">Enable automatic update checks</p>
+                      <p className="text-xs text-gray-500 dark:text-gray-400">When enabled, Git Automation Dashboard looks for the latest release whenever it starts.</p>
+                    </div>
+                  </label>
+                  <div className="rounded-lg border border-gray-200 bg-white/60 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900/50">
+                    <p className="text-xs font-semibold uppercase tracking-wide text-purple-600 dark:text-purple-300" data-automation-id="settings-install-label">Installation preference</p>
+                    <fieldset className="mt-3 space-y-3" data-automation-id="settings-auto-install-options">
+                      <label className="flex items-start gap-3">
+                        <input
+                          type="radio"
+                          name="autoInstallUpdates"
+                          value="auto"
+                          checked={settings.autoInstallUpdates === 'auto'}
+                          onChange={handleChange}
+                          className="mt-1 focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300 dark:border-gray-600"
+                        />
+                        <div>
+                          <p className="font-medium text-gray-900 dark:text-gray-100">Install automatically after download</p>
+                          <p className="text-xs text-gray-500 dark:text-gray-400">The app restarts itself to finish installing as soon as an update is ready.</p>
+                        </div>
+                      </label>
+                      <label className="flex items-start gap-3">
+                        <input
+                          type="radio"
+                          name="autoInstallUpdates"
+                          value="manual"
+                          checked={settings.autoInstallUpdates === 'manual'}
+                          onChange={handleChange}
+                          className="mt-1 focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300 dark:border-gray-600"
+                        />
+                        <div>
+                          <p className="font-medium text-gray-900 dark:text-gray-100">I'll install updates manually</p>
+                          <p className="text-xs text-gray-500 dark:text-gray-400">Keep working and choose when to restart. You'll still see reminders when an update is ready.</p>
+                        </div>
+                      </label>
+                    </fieldset>
+                  </div>
+                </div>
+             </div>
+
              <div className="space-y-4 pt-6 border-t border-gray-200 dark:border-gray-700">
                 <h4 className="text-lg font-semibold">Automatic Update Checks</h4>
                 <label className="flex items-start gap-3">