internal/ota/ota.go

@@ -152,12 +152,12 @@ func (s *State) doUpdate(ctx context.Context, params UpdateParams) error {
 		return nil
 	}
 
-	if shouldUpdateApp && appUpdate.available {
+	if shouldUpdateApp && (appUpdate.available || appUpdate.downgradeAvailable) {
 		appUpdate.pending = true
 		s.triggerComponentUpdateState("app", appUpdate)
 	}
 
-	if shouldUpdateSystem && systemUpdate.available {
+	if shouldUpdateSystem && (systemUpdate.available || systemUpdate.downgradeAvailable) {
 		systemUpdate.pending = true
 		s.triggerComponentUpdateState("system", systemUpdate)
 	}
@@ -220,8 +220,6 @@ type UpdateParams struct {
 	ResetConfig         bool     `json:"resetConfig"`
 }
 
-// getUpdateStatus gets the update status for the given components
-// and updates the componentUpdateStatuses map
 func (s *State) getUpdateStatus(
 	ctx context.Context,
 	params UpdateParams,
@@ -241,7 +239,7 @@ func (s *State) getUpdateStatus(
 		systemUpdate = &currentSystemUpdate
 	}
 
-	err = s.checkUpdateStatus(ctx, params, appUpdate, systemUpdate)
+	err = s.doGetUpdateStatus(ctx, params, appUpdate, systemUpdate)
 	if err != nil {
 		return nil, nil, err
 	}
@@ -252,20 +250,21 @@ func (s *State) getUpdateStatus(
 	return appUpdate, systemUpdate, nil
 }
 
-// checkUpdateStatus checks the update status for the given components
+// doGetUpdateStatus is the internal function that gets the update status
-func (s *State) checkUpdateStatus(
+// it WON'T change the state of the OTA state
+func (s *State) doGetUpdateStatus(
 	ctx context.Context,
 	params UpdateParams,
-	appUpdateStatus *componentUpdateStatus,
+	appUpdate *componentUpdateStatus,
-	systemUpdateStatus *componentUpdateStatus,
+	systemUpdate *componentUpdateStatus,
 ) error {
 	// Get local versions
 	systemVersionLocal, appVersionLocal, err := s.getLocalVersion()
 	if err != nil {
 		return fmt.Errorf("error getting local version: %w", err)
 	}
-	appUpdateStatus.localVersion = appVersionLocal.String()
+	appUpdate.localVersion = appVersionLocal.String()
-	systemUpdateStatus.localVersion = systemVersionLocal.String()
+	systemUpdate.localVersion = systemVersionLocal.String()
 
 	// Get remote metadata
 	remoteMetadata, err := s.fetchUpdateMetadata(ctx, params)
@@ -277,13 +276,13 @@ func (s *State) checkUpdateStatus(
 		}
 		return err
 	}
-	appUpdateStatus.url = remoteMetadata.AppURL
+	appUpdate.url = remoteMetadata.AppURL
-	appUpdateStatus.hash = remoteMetadata.AppHash
+	appUpdate.hash = remoteMetadata.AppHash
-	appUpdateStatus.version = remoteMetadata.AppVersion
+	appUpdate.version = remoteMetadata.AppVersion
 
-	systemUpdateStatus.url = remoteMetadata.SystemURL
+	systemUpdate.url = remoteMetadata.SystemURL
-	systemUpdateStatus.hash = remoteMetadata.SystemHash
+	systemUpdate.hash = remoteMetadata.SystemHash
-	systemUpdateStatus.version = remoteMetadata.SystemVersion
+	systemUpdate.version = remoteMetadata.SystemVersion
 
 	// Get remote versions
 	systemVersionRemote, err := semver.NewVersion(remoteMetadata.SystemVersion)
@@ -291,33 +290,26 @@ func (s *State) checkUpdateStatus(
 		err = fmt.Errorf("error parsing remote system version: %w", err)
 		return err
 	}
-	systemUpdateStatus.available = systemVersionRemote.GreaterThan(systemVersionLocal)
+	systemUpdate.available = systemVersionRemote.GreaterThan(systemVersionLocal)
+	systemUpdate.downgradeAvailable = systemVersionRemote.LessThan(systemVersionLocal)
 
 	appVersionRemote, err := semver.NewVersion(remoteMetadata.AppVersion)
 	if err != nil {
 		err = fmt.Errorf("error parsing remote app version: %w, %s", err, remoteMetadata.AppVersion)
 		return err
 	}
-	appUpdateStatus.available = appVersionRemote.GreaterThan(appVersionLocal)
+	appUpdate.available = appVersionRemote.GreaterThan(appVersionLocal)
+	appUpdate.downgradeAvailable = appVersionRemote.LessThan(appVersionLocal)
 
 	// Handle pre-release updates
 	isRemoteSystemPreRelease := systemVersionRemote.Prerelease() != ""
 	isRemoteAppPreRelease := appVersionRemote.Prerelease() != ""
 
 	if isRemoteSystemPreRelease && !params.IncludePreRelease {
-		systemUpdateStatus.available = false
+		systemUpdate.available = false
 	}
 	if isRemoteAppPreRelease && !params.IncludePreRelease {
-		appUpdateStatus.available = false
+		appUpdate.available = false
-	}
-
-	// Handle custom target versions
-	if slices.Contains(params.Components, "app") && params.AppTargetVersion != "" {
-		appUpdateStatus.available = appVersionRemote.String() != appUpdateStatus.localVersion
-	}
-
-	if slices.Contains(params.Components, "system") && params.SystemTargetVersion != "" {
-		systemUpdateStatus.available = systemVersionRemote.String() != systemUpdateStatus.localVersion
 	}
 
 	return nil
@@ -325,12 +317,12 @@ func (s *State) checkUpdateStatus(
 
 // GetUpdateStatus returns the current update status (for backwards compatibility)
 func (s *State) GetUpdateStatus(ctx context.Context, params UpdateParams) (*UpdateStatus, error) {
-	appUpdateStatus := componentUpdateStatus{}
+	appUpdate := &componentUpdateStatus{}
-	systemUpdateStatus := componentUpdateStatus{}
+	systemUpdate := &componentUpdateStatus{}
-	err := s.checkUpdateStatus(ctx, params, &appUpdateStatus, &systemUpdateStatus)
+	err := s.doGetUpdateStatus(ctx, params, appUpdate, systemUpdate)
 	if err != nil {
 		return nil, fmt.Errorf("error getting update status: %w", err)
 	}
 
-	return toUpdateStatus(&appUpdateStatus, &systemUpdateStatus, ""), nil
+	return toUpdateStatus(appUpdate, systemUpdate, ""), nil
 }

internal/ota/state.go

@@ -28,10 +28,12 @@ type LocalMetadata struct {
 
 // UpdateStatus represents the current update status
 type UpdateStatus struct {
-	Local                 *LocalMetadata  `json:"local"`
+	Local                    *LocalMetadata  `json:"local"`
-	Remote                *UpdateMetadata `json:"remote"`
+	Remote                   *UpdateMetadata `json:"remote"`
-	SystemUpdateAvailable bool            `json:"systemUpdateAvailable"`
+	SystemUpdateAvailable    bool            `json:"systemUpdateAvailable"`
-	AppUpdateAvailable    bool            `json:"appUpdateAvailable"`
+	SystemDowngradeAvailable bool            `json:"systemDowngradeAvailable"`
+	AppUpdateAvailable       bool            `json:"appUpdateAvailable"`
+	AppDowngradeAvailable    bool            `json:"appDowngradeAvailable"`
 
 	// for backwards compatibility
 	Error string `json:"error,omitempty"`
@@ -48,6 +50,7 @@ type PostRebootAction struct {
 type componentUpdateStatus struct {
 	pending              bool
 	available            bool
+	downgradeAvailable   bool
 	version              string
 	localVersion         string
 	targetVersion        string
@@ -167,9 +170,11 @@ func toUpdateStatus(appUpdate *componentUpdateStatus, systemUpdate *componentUpd
 			SystemURL:     systemUpdate.url,
 			SystemHash:    systemUpdate.hash,
 		},
-		SystemUpdateAvailable: systemUpdate.available,
+		SystemUpdateAvailable:    systemUpdate.available,
-		AppUpdateAvailable:    appUpdate.available,
+		SystemDowngradeAvailable: systemUpdate.downgradeAvailable,
-		Error:                 error,
+		AppUpdateAvailable:       appUpdate.available,
+		AppDowngradeAvailable:    appUpdate.downgradeAvailable,
+		Error:                    error,
 	}
 }
 

jsonrpc.go

@@ -1155,6 +1155,7 @@ var rpcHandlers = map[string]RPCHandler{
 	"getUpdateStatusChannel": {Func: rpcGetUpdateStatusChannel},
 	"tryUpdate":              {Func: rpcTryUpdate},
 	"tryUpdateComponents":    {Func: rpcTryUpdateComponents, Params: []string{"params", "includePreRelease", "resetConfig"}},
+	"cancelDowngrade":        {Func: rpcCancelDowngrade},
 	"getDevModeState":        {Func: rpcGetDevModeState},
 	"setDevModeState":        {Func: rpcSetDevModeState, Params: []string{"enabled"}},
 	"getSSHKeyState":         {Func: rpcGetSSHKeyState},

ota.go

@@ -135,8 +135,8 @@ func rpcGetLocalVersion() (*ota.LocalMetadata, error) {
 }
 
 type updateParams struct {
-	AppTargetVersion    string `json:"appTargetVersion"`
+	AppTargetVersion    string `json:"app"`
-	SystemTargetVersion string `json:"systemTargetVersion"`
+	SystemTargetVersion string `json:"system"`
 	Components          string `json:"components,omitempty"` // components is a comma-separated list of components to update
 }
 
@@ -194,3 +194,13 @@ func rpcTryUpdateComponents(params updateParams, includePreRelease bool, resetCo
 	}()
 	return nil
 }
+
+func rpcCancelDowngrade() error {
+	if err := otaState.SetTargetVersion("app", ""); err != nil {
+		return fmt.Errorf("failed to set app target version: %w", err)
+	}
+	if err := otaState.SetTargetVersion("system", ""); err != nil {
+		return fmt.Errorf("failed to set system target version: %w", err)
+	}
+	return nil
+}

ui/src/hooks/stores.ts

@@ -554,6 +554,7 @@ export type UpdateModalViews =
   | "updating"
   | "upToDate"
   | "updateAvailable"
+  | "updateDowngradeAvailable"
   | "updateCompleted"
   | "error";
 

ui/src/hooks/useVersion.tsx

@@ -15,7 +15,9 @@ export interface SystemVersionInfo {
   local: VersionInfo;
   remote?: VersionInfo;
   systemUpdateAvailable: boolean;
+  systemDowngradeAvailable: boolean;
   appUpdateAvailable: boolean;
+  appDowngradeAvailable: boolean;
   error?: string;
 }
 

ui/src/routes/devices.$id.settings.advanced.tsx

@@ -185,10 +185,10 @@ export default function SettingsAdvancedRoute() {
     setShowLoopbackWarning(false);
   }, [applyLoopbackOnlyMode, setShowLoopbackWarning]);
 
-  const handleVersionUpdateError = useCallback((error?: JsonRpcError | string) => {
+  const handleVersionUpdateError = useCallback((error?: JsonRpcError) => {
     notifications.error(
       m.advanced_error_version_update({
-        error: typeof error === "string" ? error : (error?.data ?? error?.message ?? m.unknown_error())
+        error: error?.data ?? error?.message ?? m.unknown_error()
       }),
       { duration: 1000 * 15 } // 15 seconds
     );
@@ -204,40 +204,30 @@ export default function SettingsAdvancedRoute() {
       setVersionUpdateLoading(true);
       versionInfo = await checkUpdateComponents({
         components: components.join(","),
-        appTargetVersion: appVersion,
+        app: appVersion,
-        systemTargetVersion: systemVersion,
+        system: systemVersion,
       }, devChannel);
       console.log("versionInfo", versionInfo);
     } catch (error: unknown) {
       const jsonRpcError = error as JsonRpcError;
       handleVersionUpdateError(jsonRpcError);
-      return;
+      return ;
     }
 
-    console.debug("versionInfo", versionInfo, components.includes("app") && versionInfo.remote?.appVersion && versionInfo?.appUpdateAvailable, components.includes("system") && versionInfo.remote?.systemVersion && versionInfo?.systemUpdateAvailable);
+    if (!versionInfo) {
-    console.debug("components", components);
+      handleVersionUpdateError();
-    console.debug("versionInfo.remote?.appVersion", versionInfo.remote?.appVersion);
+      return;
-    console.debug("versionInfo.appUpdateAvailable", versionInfo?.appUpdateAvailable);
+    }
-    console.debug("versionInfo.remote?.systemVersion", versionInfo.remote?.systemVersion);
-    console.debug("versionInfo.systemUpdateAvailable", versionInfo?.systemUpdateAvailable);
-
-    let hasUpdate = false;
 
     const pageParams = new URLSearchParams();
-    if (components.includes("app") && versionInfo.remote?.appVersion && versionInfo.appUpdateAvailable) {
+    pageParams.set("downgrade", "true");
-      hasUpdate = true;
+    if (components.includes("app") && versionInfo.remote?.appVersion && versionInfo.appDowngradeAvailable) {
-      pageParams.set("custom_app_version", versionInfo.remote?.appVersion);
+      pageParams.set("app", versionInfo.remote?.appVersion);
     }
-    if (components.includes("system") && versionInfo.remote?.systemVersion && versionInfo.systemUpdateAvailable) {
+    if (components.includes("system") && versionInfo.remote?.systemVersion && versionInfo.systemDowngradeAvailable) {
-      hasUpdate = true;
+      pageParams.set("system", versionInfo.remote?.systemVersion);
-      pageParams.set("custom_system_version", versionInfo.remote?.systemVersion);
-    }
-    pageParams.set("reset_config", resetConfig.toString());
-
-    if (!hasUpdate) {
-      handleVersionUpdateError("No update available");
-      return;
     }
+    pageParams.set("resetConfig", resetConfig.toString());
 
     // Navigate to update page
     navigateTo(`/settings/general/update?${pageParams.toString()}`);

ui/src/routes/devices.$id.settings.general.update.tsx

@@ -11,7 +11,7 @@ import LoadingSpinner from "@components/LoadingSpinner";
 import UpdatingStatusCard, { type UpdatePart } from "@components/UpdatingStatusCard";
 import { m } from "@localizations/messages.js";
 import { sleep } from "@/utils";
-import { checkUpdateComponents, SystemVersionInfo, updateParams } from "@/utils/jsonrpc";
+import { SystemVersionInfo } from "@/utils/jsonrpc";
 
 export default function SettingsGeneralUpdateRoute() {
   const navigate = useNavigate();
@@ -22,9 +22,10 @@ export default function SettingsGeneralUpdateRoute() {
   const { setModalView, otaState } = useUpdateStore();
   const { send } = useJsonRpc();
 
-  const customAppVersion = useMemo(() => searchParams.get("custom_app_version") || undefined, [searchParams]);
+  const downgrade = useMemo(() => searchParams.get("downgrade") === "true", [searchParams]);
-  const customSystemVersion = useMemo(() => searchParams.get("custom_system_version") || undefined, [searchParams]);
+  const customAppVersion = useMemo(() => searchParams.get("app") || "", [searchParams]);
-  const resetConfig = useMemo(() => searchParams.get("reset_config") === "true", [searchParams]);
+  const customSystemVersion = useMemo(() => searchParams.get("system") || "", [searchParams]);
+  const resetConfig = useMemo(() => searchParams.get("resetConfig") === "true", [searchParams]);
 
   const onClose = useCallback(async () => {
     navigate(".."); // back to the devices.$id.settings page
@@ -38,16 +39,20 @@ export default function SettingsGeneralUpdateRoute() {
     setModalView("updating");
   }, [send, setModalView]);
 
-  const onConfirmCustomUpdate = useCallback((appTargetVersion?: string, systemTargetVersion?: string) => {
+  const onConfirmDowngrade = useCallback(() => {
     const components = [];
-    if (appTargetVersion) components.push("app");
+    if (customSystemVersion) {
-    if (systemTargetVersion) components.push("system");
+      components.push("system");
+    }
+    if (customAppVersion) {
+      components.push("app");
+    }
 
     send("tryUpdateComponents", {
       params: {
         components: components.join(","),
-        appTargetVersion,
+        app: customAppVersion,
-        systemTargetVersion,
+        system: customSystemVersion,
       },
       includePreRelease: false,
       resetConfig,
@@ -55,7 +60,7 @@ export default function SettingsGeneralUpdateRoute() {
       if ("error" in resp) return;
       setModalView("updating");
     });
-  }, [send, setModalView, resetConfig]);
+  }, [send, setModalView, customAppVersion, customSystemVersion, resetConfig]);
 
   useEffect(() => {
     if (otaState.updating) {
@@ -72,7 +77,8 @@ export default function SettingsGeneralUpdateRoute() {
   return <Dialog
     onClose={onClose}
     onConfirmUpdate={onConfirmUpdate}
-    onConfirmCustomUpdate={onConfirmCustomUpdate}
+    onConfirmDowngrade={onConfirmDowngrade}
+    downgrade={downgrade}
     customAppVersion={customAppVersion}
     customSystemVersion={customSystemVersion}
   />;
@@ -81,13 +87,15 @@ export default function SettingsGeneralUpdateRoute() {
 export function Dialog({
   onClose,
   onConfirmUpdate,
-  onConfirmCustomUpdate: onConfirmCustomUpdateCallback,
+  onConfirmDowngrade,
+  downgrade,
   customAppVersion,
   customSystemVersion,
 }: Readonly<{
+  downgrade: boolean;
   onClose: () => void;
   onConfirmUpdate: () => void;
-  onConfirmCustomUpdate: (appVersion?: string, systemVersion?: string) => void;
+  onConfirmDowngrade: () => void;
   customAppVersion?: string;
   customSystemVersion?: string;
 }>) {
@@ -95,31 +103,32 @@ export function Dialog({
 
   const [versionInfo, setVersionInfo] = useState<null | SystemVersionInfo>(null);
   const { modalView, setModalView, otaState } = useUpdateStore();
-  const forceCustomUpdate = customSystemVersion !== undefined || customAppVersion !== undefined;
+  const { send } = useJsonRpc();
-  const onConfirmCustomUpdate = useCallback(() => {
-    console.debug("onConfirmCustomUpdate", customAppVersion, customSystemVersion, versionInfo);
-    onConfirmCustomUpdateCallback(
-      customAppVersion !== undefined ? customAppVersion : versionInfo?.remote?.appVersion,
-      customSystemVersion !== undefined ? customSystemVersion : versionInfo?.remote?.systemVersion,
-    );
-  }, [onConfirmCustomUpdateCallback, customAppVersion, customSystemVersion, versionInfo]);
 
   const onFinishedLoading = useCallback(
     (versionInfo: SystemVersionInfo) => {
       const hasUpdate =
         versionInfo?.systemUpdateAvailable || versionInfo?.appUpdateAvailable;
+      const hasDowngrade = customSystemVersion !== undefined || customAppVersion !== undefined;
 
       setVersionInfo(versionInfo);
 
-      if (hasUpdate || forceCustomUpdate) {
+      if (hasDowngrade && downgrade) {
+        setModalView("updateDowngradeAvailable");
+      } else if (hasUpdate) {
         setModalView("updateAvailable");
       } else {
         setModalView("upToDate");
       }
     },
-    [setModalView, forceCustomUpdate],
+    [setModalView, downgrade, customAppVersion, customSystemVersion],
   );
 
+  const onCancelDowngrade = useCallback(() => {
+    send("cancelDowngrade", {});
+    onClose();
+  }, [onClose, send]);
+
   return (
     <div className="pointer-events-auto relative mx-auto text-left">
       <div>
@@ -132,22 +141,24 @@ export function Dialog({
         )}
 
         {modalView === "loading" && (
-          <LoadingState
+          <LoadingState onFinished={onFinishedLoading} onCancelCheck={onClose} />
-            onFinished={onFinishedLoading}
-            onCancelCheck={onClose}
-            customAppVersion={customAppVersion}
-            customSystemVersion={customSystemVersion}
-          />
         )}
 
         {modalView === "updateAvailable" && (
           <UpdateAvailableState
-            forceCustomUpdate={forceCustomUpdate}
+            onConfirmUpdate={onConfirmUpdate}
-            onConfirm={forceCustomUpdate ? onConfirmCustomUpdate : onConfirmUpdate}
             onClose={onClose}
             versionInfo={versionInfo!}
           />
         )}
+        {modalView === "updateDowngradeAvailable" && (
+          <UpdateDowngradeAvailableState
+            appVersion={customAppVersion}
+            systemVersion={customSystemVersion}
+            onConfirmDowngrade={onConfirmDowngrade}
+            onCancelDowngrade={onCancelDowngrade}
+          />
+        )}
 
         {modalView === "updating" && (
           <UpdatingDeviceState
@@ -172,13 +183,9 @@ export function Dialog({
 function LoadingState({
   onFinished,
   onCancelCheck,
-  customAppVersion,
-  customSystemVersion,
 }: {
   onFinished: (versionInfo: SystemVersionInfo) => void;
   onCancelCheck: () => void;
-  customAppVersion?: string;
-  customSystemVersion?: string;
 }) {
   const [progressWidth, setProgressWidth] = useState("0%");
   const abortControllerRef = useRef<AbortController | null>(null);
@@ -187,23 +194,6 @@ function LoadingState({
   const { setModalView } = useUpdateStore();
 
   const progressBarRef = useRef<HTMLDivElement>(null);
-
-  const checkUpdate = useCallback(async () => {
-    if (!customAppVersion && !customSystemVersion) {
-      return await getVersionInfo();
-    }
-    const params : updateParams = {
-      components: "",
-      appTargetVersion: customAppVersion,
-      systemTargetVersion: customSystemVersion,
-    };
-    if (customAppVersion) params.components += ",app";
-    if (customSystemVersion) params.components += ",system";
-    params.components = params.components?.replace(/^,+/, "");
-
-    return await checkUpdateComponents(params, false);
-  }, [customAppVersion, customSystemVersion, getVersionInfo]);
-
   useEffect(() => {
     abortControllerRef.current = new AbortController();
     const signal = abortControllerRef.current.signal;
@@ -213,7 +203,7 @@ function LoadingState({
       setProgressWidth("100%");
     }, 0);
 
-    checkUpdate()
+    getVersionInfo()
       .then(async versionInfo => {
         // Add a small delay to ensure it's not just flickering
         await sleep(600);
@@ -235,7 +225,7 @@ function LoadingState({
       clearTimeout(animationTimer);
       abortControllerRef.current?.abort();
     };
-  }, [checkUpdate, onFinished, setModalView]);
+  }, [getVersionInfo, onFinished, setModalView]);
 
   return (
     <div className="flex flex-col items-start justify-start space-y-4 text-left">
@@ -443,12 +433,11 @@ function SystemUpToDateState({
 
 function UpdateAvailableState({
   versionInfo,
-  onConfirm,
+  onConfirmUpdate,
   onClose,
 }: {
   versionInfo: SystemVersionInfo;
-  forceCustomUpdate: boolean;
+  onConfirmUpdate: () => void;
-  onConfirm: () => void;
   onClose: () => void;
 }) {
   return (
@@ -463,18 +452,18 @@ function UpdateAvailableState({
         <p className="mb-4 text-sm text-slate-600 dark:text-slate-300">
           {versionInfo?.systemUpdateAvailable ? (
             <>
-              <span className="font-semibold">{m.general_update_system_type()}</span>: {versionInfo?.local?.systemVersion} <span className="text-slate-600 dark:text-slate-300">→</span> {versionInfo?.remote?.systemVersion}
+              <span className="font-semibold">{m.general_update_system_type()}</span>: {versionInfo?.remote?.systemVersion}
               <br />
             </>
           ) : null}
           {versionInfo?.appUpdateAvailable ? (
             <>
-              <span className="font-semibold">{m.general_update_application_type()}</span>: {versionInfo?.local?.appVersion} <span className="text-slate-600 dark:text-slate-300">→</span> {versionInfo?.remote?.appVersion}
+              <span className="font-semibold">{m.general_update_application_type()}</span>: {versionInfo?.remote?.appVersion}
             </>
           ) : null}
         </p>
         <div className="flex items-center justify-start gap-x-2">
-          <Button size="SM" theme="primary" text={m.general_update_now_button()} onClick={onConfirm} />
+          <Button size="SM" theme="primary" text={m.general_update_now_button()} onClick={onConfirmUpdate} />
           <Button size="SM" theme="light" text={m.general_update_later_button()} onClick={onClose} />
         </div>
       </div>
@@ -482,6 +471,51 @@ function UpdateAvailableState({
   );
 }
 
+function UpdateDowngradeAvailableState({
+  appVersion,
+  systemVersion,
+  onConfirmDowngrade,
+  onCancelDowngrade,
+}: {
+  appVersion?: string;
+  systemVersion?: string;
+  onConfirmDowngrade: () => void;
+  onCancelDowngrade: () => void;
+}) {
+  const confirmDowngrade = useCallback(() => {
+    onConfirmDowngrade();
+  }, [onConfirmDowngrade]);
+  return (
+    <div className="flex flex-col items-start justify-start space-y-4 text-left">
+      <div className="text-left">
+        <p className="text-base font-semibold text-black dark:text-white">
+          {m.general_update_downgrade_available_title()}
+        </p>
+        <p className="mb-2 text-sm text-slate-600 dark:text-slate-300">
+          {m.general_update_downgrade_available_description()}
+        </p>
+        <p className="mb-4 text-sm text-slate-600 dark:text-slate-300">
+          {systemVersion ? (
+            <>
+              <span className="font-semibold">{m.general_update_system_type()}</span>: {systemVersion}
+              <br />
+            </>
+          ) : null}
+          {appVersion ? (
+            <>
+              <span className="font-semibold">{m.general_update_application_type()}</span>: {appVersion}
+            </>
+          ) : null}
+        </p>
+        <div className="flex items-center justify-start gap-x-2">
+          <Button size="SM" theme="primary" text={m.general_update_downgrade_button()} onClick={confirmDowngrade} />
+          <Button size="SM" theme="light" text={m.general_update_keep_current_button()} onClick={onCancelDowngrade} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function UpdateCompletedState({ onClose }: { onClose: () => void }) {
   return (
     <div className="flex flex-col items-start justify-start space-y-4 text-left">

ui/src/utils/jsonrpc.ts

@@ -220,7 +220,9 @@ export interface SystemVersionInfo {
   local: VersionInfo;
   remote?: VersionInfo;
   systemUpdateAvailable: boolean;
+  systemDowngradeAvailable: boolean;
   appUpdateAvailable: boolean;
+  appDowngradeAvailable: boolean;
   error?: string;
 }
 
@@ -244,8 +246,8 @@ export async function getLocalVersion() {
 }
 
 export interface updateParams {
-  appTargetVersion?: string;
+  app?: string;
-  systemTargetVersion?: string;
+  system?: string;
   components?: string;
 }