@mentra/engine 3.1.0-dev.20 → 3.1.0-dev.22

package/build/react/MentraLiveOtaFlow.js

@@ -1,13 +1,9 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+/* eslint-disable react-native/no-raw-text -- BodyText and PercentText are local Text wrappers. */
+import React, { useMemo } from "react";
 import { ActivityIndicator, Pressable, StyleSheet, Text, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import Svg, { Path, Rect } from "react-native-svg";
-import { ota } from "../facades/ota";
-import { beginOtaAutoChain, clearOtaAutoChainReconnectWait, isOtaAutoChainActive, otaAutoChainFingerprint, otaAutoChainReconnectWaitRemaining, stopOtaAutoChain, tryAdvanceOtaAutoChain, } from "../services/OtaAutoChain";
-import { BES_INSTALL_RESTART_MESSAGE, getOtaErrorMessage, shouldRequireGlassesRebootForBesFailure, shouldShowChangeWifiForOtaDownloadFailure, } from "../services/OtaErrorMapping";
-import { useEngineSnapshot } from "./useEngineSnapshot";
-const AUTO_CHAIN_NETWORK_RETRY_DELAY_MS = 5000;
-const AUTO_CHAIN_COMPLETE_DELAY_MS = 750;
+import { useMentraLiveOta } from "./useMentraLiveOta";
 const DEFAULT_THEME = {
     background: "#FFFFFF",
     border: "#D7DFDA",
@@ -55,403 +51,130 @@ function defaultTranslate(key, options) {
 }
 export function MentraLiveOtaFlow({ allowDevSkip = typeof __DEV__ !== "undefined" && __DEV__, deviceName = "Mentra Live", initialPage = "check", initializeRuntime = true, onFinished, onFirmwareRestartingChange, onOpenWifiSetup, style, superMode = false, theme, translate = defaultTranslate, }) {
     const colors = useMemo(() => ({ ...DEFAULT_THEME, ...theme }), [theme]);
-    const [page, setPage] = useState(initialPage);
-    const [checkGeneration, setCheckGeneration] = useState(0);
-    const [runtimeReady, setRuntimeReady] = useState(!initializeRuntime);
-    useEffect(() => {
-        if (!initializeRuntime) {
-            setRuntimeReady(true);
-            return;
-        }
-        let cancelled = false;
-        setRuntimeReady(false);
-        void ota.initialize().finally(() => {
-            if (!cancelled)
-                setRuntimeReady(true);
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [initializeRuntime]);
-    const showCheck = useCallback(() => {
-        setPage("check");
-        setCheckGeneration((generation) => generation + 1);
-    }, []);
+    const controller = useMentraLiveOta({
+        initialPage,
+        initializeRuntime,
+        onFinished,
+        onFirmwareRestartingChange,
+        onOpenWifiSetup,
+    });
     return (<SafeAreaView style={[styles.safeArea, { backgroundColor: colors.background }, style]}>
       <View style={styles.header}>
         <View />
         <MentraMark color={colors.primary}/>
       </View>
-      {!runtimeReady ? (<FlowPage colors={colors} icon="download" title={translate("ota:checkingForUpdates")}>
-          <ActivityIndicator size="large" color={colors.foreground}/>
-        </FlowPage>) : page === "check" ? (<OtaCheckPage allowDevSkip={allowDevSkip} colors={colors} deviceName={deviceName} generation={checkGeneration} onFinished={onFinished} onOpenWifiSetup={onOpenWifiSetup} onStartProgress={() => setPage("progress")} translate={translate}/>) : (<OtaProgressPage colors={colors} onFirmwareRestartingChange={onFirmwareRestartingChange} onOpenWifiSetup={onOpenWifiSetup} onReturnToCheck={showCheck} superMode={superMode} translate={translate}/>)}
+      <OtaFlowContent allowDevSkip={allowDevSkip} colors={colors} controller={controller} deviceName={deviceName} superMode={superMode} translate={translate}/>
     </SafeAreaView>);
 }
-function OtaCheckPage({ allowDevSkip, colors, deviceName, generation, onFinished, onOpenWifiSetup, onStartProgress, translate, }) {
-    const otaSnapshot = useEngineSnapshot(ota.snapshot, ota.onSnapshot);
-    const [checkState, setCheckState] = useState("checking");
-    const [isUpdateRequired, setIsUpdateRequired] = useState(true);
-    const [isDowngradeUpdate, setIsDowngradeUpdate] = useState(false);
-    const [errorKind, setErrorKind] = useState("network");
-    const [updateFingerprint, setUpdateFingerprint] = useState(null);
-    const [retryGeneration, setRetryGeneration] = useState(0);
-    const performCheckGenerationRef = useRef(0);
-    const activeCheckKeyRef = useRef(null);
-    const checkStartedRef = useRef(false);
-    const checkCompletedRef = useRef(false);
-    const selectedCheckResultRef = useRef(null);
-    const onFinishedRef = useRef(onFinished);
-    const onStartProgressRef = useRef(onStartProgress);
-    onFinishedRef.current = onFinished;
-    onStartProgressRef.current = onStartProgress;
-    const glassesWifiConnected = otaSnapshot.wifiConnected;
-    const glassesWifiStatusKnown = otaSnapshot.wifiStatusKnown;
-    const hotspotOtaSupported = otaSnapshot.hotspotOtaVersion === 1;
-    const canInstallUpdate = glassesWifiStatusKnown && (glassesWifiConnected || hotspotOtaSupported);
-    const checkKey = `${generation}:${retryGeneration}`;
-    const navigateToProgress = useCallback(() => {
-        ota.clearProgress();
-        onStartProgressRef.current();
-    }, []);
-    useEffect(() => {
-        const MIN_DISPLAY_TIME_MS = 1100;
-        const MAX_WAIT_FOR_VERSION_INFO_MS = 10_000;
-        if (activeCheckKeyRef.current !== checkKey) {
-            activeCheckKeyRef.current = checkKey;
-            checkStartedRef.current = false;
-            checkCompletedRef.current = false;
-            setCheckState("checking");
-        }
-        const myGeneration = ++performCheckGenerationRef.current;
-        let cancelled = false;
-        let reconnectTimeout = null;
-        const performCheck = async () => {
-            if (checkCompletedRef.current)
-                return;
-            if (!otaSnapshot.connected) {
-                if (isOtaAutoChainActive()) {
-                    const remainingMs = otaAutoChainReconnectWaitRemaining();
-                    if (remainingMs === null)
-                        return;
-                    reconnectTimeout = setTimeout(() => {
-                        if (cancelled || myGeneration !== performCheckGenerationRef.current || ota.snapshot().connected)
-                            return;
-                        stopOtaAutoChain();
-                        checkCompletedRef.current = true;
-                        setCheckState("error");
-                    }, remainingMs);
-                    return;
-                }
-                if (checkStartedRef.current) {
-                    stopOtaAutoChain();
-                    checkCompletedRef.current = true;
-                    setCheckState("error");
-                    return;
-                }
-                checkCompletedRef.current = true;
-                onFinishedRef.current();
-                return;
-            }
-            clearOtaAutoChainReconnectWait();
-            checkStartedRef.current = true;
-            const startTime = Date.now();
-            try {
-                let result = await ota.checkForUpdates({
-                    waitForBuildNumberMs: MAX_WAIT_FOR_VERSION_INFO_MS,
-                    waitForBesVersionMs: 5000,
-                    waitForMtkVersionMs: 2000,
-                    refreshVersionInfo: true,
-                    fixClockBeforeCheck: false,
-                });
-                if (cancelled || myGeneration !== performCheckGenerationRef.current)
-                    return;
-                if (!result.hasCheckCompleted && result.checkFailureReason === "network" && isOtaAutoChainActive()) {
-                    await new Promise((resolve) => setTimeout(resolve, AUTO_CHAIN_NETWORK_RETRY_DELAY_MS));
-                    if (cancelled || myGeneration !== performCheckGenerationRef.current)
-                        return;
-                    result = await ota.checkForUpdates({
-                        waitForBuildNumberMs: MAX_WAIT_FOR_VERSION_INFO_MS,
-                        waitForBesVersionMs: 5000,
-                        waitForMtkVersionMs: 2000,
-                        refreshVersionInfo: true,
-                        fixClockBeforeCheck: false,
-                    });
-                }
-                if (cancelled || myGeneration !== performCheckGenerationRef.current)
-                    return;
-                selectedCheckResultRef.current = result;
-                await new Promise((resolve) => setTimeout(resolve, Math.max(0, MIN_DISPLAY_TIME_MS - (Date.now() - startTime))));
-                if (cancelled || myGeneration !== performCheckGenerationRef.current)
-                    return;
-                if (result.skippedReason === "disconnected") {
-                    stopOtaAutoChain();
-                    checkCompletedRef.current = true;
-                    setCheckState("error");
-                    return;
-                }
-                if (result.skippedReason === "missing_build") {
-                    checkCompletedRef.current = true;
-                    if (isOtaAutoChainActive()) {
-                        stopOtaAutoChain();
-                        setCheckState("error");
-                    }
-                    else {
-                        onFinishedRef.current();
-                    }
-                    return;
-                }
-                if (result.skippedReason === "dev_build") {
-                    stopOtaAutoChain();
-                    checkCompletedRef.current = true;
-                    ota.clearUpdateAvailable();
-                    setCheckState("dev_build");
-                    return;
-                }
-                if (!result.hasCheckCompleted) {
-                    stopOtaAutoChain();
-                    checkCompletedRef.current = true;
-                    setErrorKind(result.checkFailureReason === "pin_unavailable" ? "pin_unavailable" : "network");
-                    setCheckState("error");
-                    return;
-                }
-                if (result.updateAvailable && result.updateInfo) {
-                    setIsUpdateRequired(result.isRequired);
-                    setIsDowngradeUpdate(result.updateInfo.isDowngrade === true);
-                    const fingerprint = otaAutoChainFingerprint(result);
-                    setUpdateFingerprint(fingerprint);
-                    if (isOtaAutoChainActive()) {
-                        const snapshot = ota.snapshot();
-                        if (!snapshot.wifiStatusKnown)
-                            return;
-                        if (!snapshot.wifiConnected && snapshot.hotspotOtaVersion !== 1) {
-                            stopOtaAutoChain();
-                        }
-                        else {
-                            const admission = tryAdvanceOtaAutoChain(fingerprint, result.updateInfo.isDowngrade === true);
-                            if (admission.advance) {
-                                checkCompletedRef.current = true;
-                                ota.installSession.prepare(result);
-                                navigateToProgress();
-                                return;
-                            }
-                        }
-                    }
-                    checkCompletedRef.current = true;
-                    setCheckState("update_available");
-                    return;
-                }
-                stopOtaAutoChain();
-                checkCompletedRef.current = true;
-                ota.clearUpdateAvailable();
-                setCheckState("no_update");
-            }
-            catch (error) {
-                console.error("OTA check failed:", error);
-                await new Promise((resolve) => setTimeout(resolve, Math.max(0, MIN_DISPLAY_TIME_MS - (Date.now() - startTime))));
-                if (cancelled || myGeneration !== performCheckGenerationRef.current)
-                    return;
-                stopOtaAutoChain();
-                checkCompletedRef.current = true;
-                setCheckState("error");
-            }
-        };
-        void performCheck();
-        return () => {
-            cancelled = true;
-            if (reconnectTimeout)
-                clearTimeout(reconnectTimeout);
-        };
-    }, [
-        checkKey,
-        otaSnapshot.connected,
-        otaSnapshot.wifiStatusKnown,
-        navigateToProgress,
-    ]);
-    const retry = () => {
-        setCheckState("checking");
-        setRetryGeneration((value) => value + 1);
-    };
-    const updateNow = () => {
-        const result = selectedCheckResultRef.current;
-        if (!result) {
-            setCheckState("error");
-            return;
-        }
-        const snapshot = ota.snapshot();
-        if (!snapshot.wifiStatusKnown) {
-            retry();
-            return;
-        }
-        if (!snapshot.wifiConnected && snapshot.hotspotOtaVersion !== 1) {
-            onOpenWifiSetup();
-            return;
-        }
-        ota.installSession.prepare(result);
-        if (updateFingerprint)
-            beginOtaAutoChain(updateFingerprint, isDowngradeUpdate);
-        navigateToProgress();
-    };
-    if (checkState === "checking") {
+function OtaFlowContent({ allowDevSkip, colors, controller, deviceName, superMode, translate, }) {
+    const { state } = controller;
+    if (state.screen === "initializing") {
+        return (<FlowPage colors={colors} icon="download" title={translate("ota:checkingForUpdates")}>
+        <ActivityIndicator size="large" color={colors.foreground}/>
+      </FlowPage>);
+    }
+    if (state.screen === "checking") {
         return (<FlowPage colors={colors} icon="download" title={translate("ota:checkingForUpdates")}>
         <BodyText colors={colors}>{translate("ota:checkingForUpdatesMessage")}</BodyText>
         <ActivityIndicator size="large" color={colors.foreground}/>
       </FlowPage>);
     }
-    if (checkState === "update_available") {
-        return (<FlowPage colors={colors} icon="download" title={translate(isDowngradeUpdate ? "ota:downgradeAvailable" : "ota:updateAvailable", { deviceName })} actions={<>
-            <FlowButton colors={colors} disabled={!glassesWifiStatusKnown} label={translate(!glassesWifiStatusKnown || canInstallUpdate ? "ota:updateNow" : "ota:setupWifi")} onPress={updateNow}/>
-            {!isUpdateRequired ? (<FlowButton colors={colors} label={translate("ota:updateLater")} onPress={onFinished} secondary/>) : null}
-            {allowDevSkip && isUpdateRequired ? (<FlowButton colors={colors} label="Skip (dev only)" onPress={onFinished} secondary/>) : null}
+    if (state.screen === "update_available" || state.screen === "wifi_required") {
+        return (<FlowPage colors={colors} icon="download" title={translate(state.versionChange ? "ota:downgradeAvailable" : "ota:updateAvailable", { deviceName })} actions={<>
+            <FlowButton colors={colors} disabled={!state.wifiStatusKnown} label={translate(state.screen === "wifi_required" ? "ota:setupWifi" : "ota:updateNow")} onPress={state.screen === "wifi_required" ? controller.openWifiSetup : controller.install}/>
+            {state.canDismiss ? (<FlowButton colors={colors} label={translate("ota:updateLater")} onPress={controller.finish} secondary/>) : null}
+            {allowDevSkip && state.updateRequired ? (<FlowButton colors={colors} label="Skip (dev only)" onPress={controller.finish} secondary/>) : null}
           </>}>
         <BodyText colors={colors}>
-          {canInstallUpdate
-                ? translate(isDowngradeUpdate ? "ota:downgradeDescription" : "ota:updateDescription")
-                : translate("ota:updateConnectWifi", { deviceName })}
+          {state.screen === "wifi_required"
+                ? translate("ota:updateConnectWifi", { deviceName })
+                : translate(state.versionChange ? "ota:downgradeDescription" : "ota:updateDescription")}
         </BodyText>
       </FlowPage>);
     }
-    if (checkState === "dev_build") {
-        return (<FlowPage actions={<FlowButton colors={colors} label={translate("common:continue")} onPress={onFinished}/>} colors={colors} icon="settings" title={translate("ota:devBuild")}>
+    if (state.screen === "dev_build") {
+        return (<FlowPage actions={<FlowButton colors={colors} label={translate("common:continue")} onPress={controller.finish}/>} colors={colors} icon="settings" title={translate("ota:devBuild")}>
         <BodyText colors={colors}>{translate("ota:devBuildNoOta")}</BodyText>
       </FlowPage>);
     }
-    if (checkState === "no_update") {
-        return (<FlowPage actions={<FlowButton colors={colors} label={translate("common:continue")} onPress={onFinished}/>} colors={colors} icon="check" title={translate("ota:upToDate")}>
+    if (state.screen === "up_to_date") {
+        return (<FlowPage actions={<FlowButton colors={colors} label={translate("common:continue")} onPress={controller.finish}/>} colors={colors} icon="check" title={translate("ota:upToDate")}>
         <BodyText colors={colors}>{translate("ota:noUpdatesAvailable")}</BodyText>
       </FlowPage>);
     }
-    if (errorKind === "pin_unavailable") {
-        return (<FlowPage actions={<FlowButton colors={colors} label={translate("common:continue")} onPress={onFinished}/>} colors={colors} icon="alert" title={translate("ota:updateInfoUnavailable")}>
+    if (state.screen === "update_info_unavailable") {
+        return (<FlowPage actions={<FlowButton colors={colors} label={translate("common:continue")} onPress={controller.finish}/>} colors={colors} icon="alert" title={translate("ota:updateInfoUnavailable")}>
         <BodyText colors={colors}>{translate("ota:updateInfoUnavailableMessage")}</BodyText>
       </FlowPage>);
     }
-    return (<FlowPage actions={<>
-          <FlowButton colors={colors} label="Retry" onPress={retry}/>
-          {allowDevSkip ? <FlowButton colors={colors} label="Skip (dev only)" onPress={onFinished} secondary/> : null}
-        </>} colors={colors} icon="alert" title={translate("ota:checkFailed")}>
-      <BodyText colors={colors}>{translate("ota:checkFailedMessage")}</BodyText>
-    </FlowPage>);
-}
-function OtaProgressPage({ colors, onFirmwareRestartingChange, onOpenWifiSetup, onReturnToCheck, superMode, translate, }) {
-    const install = useEngineSnapshot(ota.installSession.snapshot, ota.installSession.onSnapshot);
-    const autoChainAdvancedRef = useRef(false);
-    const { connected, continueButtonDisabled, displayState, errorMsg, hotspotArtifactPercent, hotspotPhase, isVersionChange, mtkInstallStallSimulatedPercent, otaProgress, otaStatus, versionChangeConverged, versionChangePhase, } = install;
-    const firmwareRestarting = (!connected && displayState === "restarting") || versionChangePhase === "restarting";
-    useEffect(() => {
-        onFirmwareRestartingChange?.(firmwareRestarting, true);
-    }, [firmwareRestarting, onFirmwareRestartingChange]);
-    useEffect(() => () => {
-        onFirmwareRestartingChange?.(false, false);
-    }, [onFirmwareRestartingChange]);
-    useEffect(() => {
-        ota.installSession.attach();
-        return () => ota.installSession.detach();
-    }, []);
-    useEffect(() => {
-        if (displayState !== "complete" || !connected || !isOtaAutoChainActive() || autoChainAdvancedRef.current)
-            return;
-        const timeout = setTimeout(() => {
-            if (!isOtaAutoChainActive())
-                return;
-            autoChainAdvancedRef.current = true;
-            ota.installSession.finish();
-            onReturnToCheck();
-        }, AUTO_CHAIN_COMPLETE_DELAY_MS);
-        return () => clearTimeout(timeout);
-    }, [connected, displayState, onReturnToCheck]);
-    const finishAndCheck = () => {
-        ota.installSession.finish();
-        onReturnToCheck();
-    };
-    const stopAndCheck = () => {
-        stopOtaAutoChain();
-        finishAndCheck();
-    };
-    const retryInstall = () => {
-        onFirmwareRestartingChange?.(false, true);
-        ota.installSession.retry();
-    };
-    if (versionChangePhase === "restarting" || versionChangePhase === "verifying") {
-        return (<FlowPage colors={colors} icon="download" title={translate(versionChangePhase === "verifying" ? "ota:versionChangeVerifying" : "ota:versionChangeRestarting")}>
+    if (state.screen === "check_failed") {
+        return (<FlowPage actions={<>
+            <FlowButton colors={colors} label="Retry" onPress={controller.retryCheck}/>
+            {allowDevSkip ? (<FlowButton colors={colors} label="Skip (dev only)" onPress={controller.finish} secondary/>) : null}
+          </>} colors={colors} icon="alert" title={translate("ota:checkFailed")}>
+        <BodyText colors={colors}>{translate("ota:checkFailedMessage")}</BodyText>
+      </FlowPage>);
+    }
+    if (state.versionChangePhase === "restarting" || state.versionChangePhase === "verifying") {
+        return (<FlowPage colors={colors} icon="download" title={translate(state.versionChangePhase === "verifying" ? "ota:versionChangeVerifying" : "ota:versionChangeRestarting")}>
         <ActivityIndicator size="large" color={colors.foreground}/>
         <BodyText colors={colors}>{translate("ota:versionChangeKeepNearby")}</BodyText>
         <BodyText colors={colors}>{translate("ota:downgradeDuration")}</BodyText>
       </FlowPage>);
     }
-    if (displayState === "starting") {
-        const hotspotTitle = hotspotPhase === "downloading"
+    if (state.screen === "starting" || state.screen === "preparing_hotspot") {
+        const title = state.hotspotPhase === "downloading"
             ? "Downloading update to phone..."
-            : hotspotPhase === "starting_hotspot"
+            : state.hotspotPhase === "starting_hotspot"
                 ? "Starting glasses hotspot..."
-                : hotspotPhase === "joining_hotspot"
+                : state.hotspotPhase === "joining_hotspot"
                     ? "Connecting phone to glasses..."
                     : "Starting update...";
-        return (<FlowPage colors={colors} icon="download" title={hotspotTitle}>
-        {hotspotPhase === "downloading" && hotspotArtifactPercent !== null ? (<PercentText colors={colors} percent={hotspotArtifactPercent}/>) : null}
+        return (<FlowPage colors={colors} icon="download" title={title}>
+        {state.hotspotPhase === "downloading" && state.hotspotArtifactPercent !== null ? (<PercentText colors={colors} percent={state.hotspotArtifactPercent}/>) : null}
         <ActivityIndicator size="large" color={colors.foreground}/>
         <BodyText colors={colors}>Do not disconnect your glasses</BodyText>
       </FlowPage>);
     }
-    if (displayState === "updating") {
-        const isDownload = otaStatus?.phase === "download";
-        const totalSteps = otaStatus?.totalSteps ?? 1;
-        const isApkOnlyInstalling = otaStatus?.stepType === "apk" && otaStatus.phase === "install" && totalSteps === 1;
-        const rawPercent = isDownload
-            ? otaStatus?.stepPercent ?? 0
-            : totalSteps >= 2
-                ? otaStatus?.overallPercent ?? 0
-                : otaStatus?.stepPercent ?? 0;
-        const percent = Math.min(Math.max(rawPercent, mtkInstallStallSimulatedPercent ?? 0, 0), 100);
-        return (<FlowPage colors={colors} icon="download" title={isDownload ? "Downloading..." : "Installing..."}>
-        {isApkOnlyInstalling ? (<ActivityIndicator size="large" color={colors.foreground}/>) : (<>
-            <PercentText colors={colors} percent={percent}/>
+    if (state.screen === "updating") {
+        return (<FlowPage colors={colors} icon="download" title={state.phase === "download" ? "Downloading..." : "Installing..."}>
+        {state.installingApkOnly ? (<ActivityIndicator size="large" color={colors.foreground}/>) : (<>
+            <PercentText colors={colors} percent={state.progress ?? 0}/>
             <View style={[styles.progressTrack, { backgroundColor: colors.border }]}>
-              <View style={[styles.progressFill, { backgroundColor: colors.primary, width: `${percent}%` }]}/>
+              <View style={[styles.progressFill, { backgroundColor: colors.primary, width: `${state.progress ?? 0}%` }]}/>
             </View>
           </>)}
         <BodyText colors={colors}>Do not disconnect your glasses</BodyText>
-        {isVersionChange && otaStatus?.phase === "install" ? (<BodyText colors={colors}>{translate("ota:downgradeDuration")}</BodyText>) : null}
+        {state.versionChange && state.phase === "install" ? (<BodyText colors={colors}>{translate("ota:downgradeDuration")}</BodyText>) : null}
       </FlowPage>);
     }
-    if (displayState === "restarting") {
-        return (<FlowPage actions={<FlowButton colors={colors} disabled={continueButtonDisabled} label="Continue" onPress={stopAndCheck}/>} colors={colors} icon="check" title="Update Installed"/>);
+    if (state.screen === "restarting") {
+        return (<FlowPage actions={<FlowButton colors={colors} disabled={state.continueDisabled} label="Continue" onPress={controller.finish}/>} colors={colors} icon="check" title="Update Installed"/>);
     }
-    if (displayState === "complete") {
-        const title = versionChangeConverged
+    if (state.screen === "complete") {
+        const title = state.versionChangeConverged
             ? translate("ota:versionChangeComplete")
-            : isVersionChange
+            : state.versionChange
                 ? translate("ota:versionChangeFirmwarePassComplete")
                 : "Update complete!";
-        const message = versionChangeConverged
+        const message = state.versionChangeConverged
             ? translate("ota:versionChangeCompleteMessage")
-            : isVersionChange
+            : state.versionChange
                 ? translate("ota:versionChangeFirmwarePassCompleteMessage")
                 : "Your glasses are up to date.";
-        return (<FlowPage actions={<FlowButton colors={colors} label={isVersionChange && !versionChangeConverged ? "Continue" : "Done"} onPress={finishAndCheck}/>} colors={colors} icon="check" title={title}>
+        return (<FlowPage actions={<FlowButton colors={colors} label={state.versionChange && !state.versionChangeConverged ? "Continue" : "Done"} onPress={controller.finish}/>} colors={colors} icon="check" title={title}>
         <BodyText colors={colors}>{message}</BodyText>
       </FlowPage>);
     }
-    if (displayState === "failed") {
-        const requiresGlassesReboot = shouldRequireGlassesRebootForBesFailure(otaStatus, otaProgress, errorMsg);
-        const displayedError = requiresGlassesReboot
-            ? BES_INSTALL_RESTART_MESSAGE
-            : errorMsg || getOtaErrorMessage(otaStatus?.error);
-        const showChangeWifi = shouldShowChangeWifiForOtaDownloadFailure(otaStatus, otaProgress, errorMsg);
+    if (state.screen === "failed") {
         return (<FlowPage actions={<>
-            <FlowButton colors={colors} label={requiresGlassesReboot ? "Done" : "Retry"} onPress={requiresGlassesReboot ? stopAndCheck : retryInstall}/>
-            {showChangeWifi ? (<FlowButton colors={colors} label="Change WiFi" onPress={() => {
-                        stopOtaAutoChain();
-                        onOpenWifiSetup();
-                    }} secondary/>) : null}
+            <FlowButton colors={colors} label={state.canRetry ? "Retry" : "Done"} onPress={state.canRetry ? controller.retryInstall : controller.finish}/>
+            {state.canOpenWifiSetup ? (<FlowButton colors={colors} label="Change WiFi" onPress={controller.openWifiSetup} secondary/>) : null}
           </>} colors={colors} icon="alert" title="Update Failed">
-        <BodyText colors={colors}>{displayedError}</BodyText>
+        <BodyText colors={colors}>{state.error?.message}</BodyText>
       </FlowPage>);
     }
-    return (<FlowPage actions={superMode ? (<FlowButton colors={colors} label="Skip (super)" onPress={() => {
-                stopOtaAutoChain();
-                ota.installSession.discard();
-                onReturnToCheck();
-            }} secondary/>) : undefined} colors={colors} icon="bluetooth" title="Glasses disconnected">
+    return (<FlowPage actions={superMode ? (<FlowButton colors={colors} label="Skip (super)" onPress={controller.discard} secondary/>) : undefined} colors={colors} icon="bluetooth" title="Glasses disconnected">
       <BodyText colors={colors}>Reconnecting...</BodyText>
       <ActivityIndicator size="large" color={colors.foreground}/>
     </FlowPage>);