@mentra/engine 3.1.0-dev.4 → 3.1.0-dev.40

package/build/react/MentraLiveOtaFlow.js

@@ -1,13 +1,9 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ActivityIndicator, Pressable, StyleSheet, Text, View } from "react-native";
+/* eslint-disable react-native/no-raw-text -- BodyText and PercentText are local Text wrappers. */
+import React, { useMemo } from "react";
+import { ActivityIndicator, Pressable, ScrollView, 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",
@@ -24,6 +20,9 @@ const ENGLISH_COPY = {
     "ota:updateAvailable": "{{deviceName}} Update Available",
     "ota:updateConnectWifi": "Connect your {{deviceName}} to WiFi to install the update.",
     "ota:updateDescription": "A new update is available for your glasses. We recommend updating now for the best experience.",
+    "ota:releaseTransition": "{{fromVersion}} → {{toVersion}}",
+    "ota:releaseTransitionUnknown": "Current version unknown → {{toVersion}}",
+    "ota:updatedToVersion": "Updated to {{version}}",
     "ota:downgradeAvailable": "{{deviceName}} Version Change Required",
     "ota:downgradeDescription": "This app requires an earlier glasses software version. Your photos and videos will be preserved, but glasses settings will be reset and restored automatically after the change.",
     "ota:updateNow": "Update Now",
@@ -55,403 +54,146 @@ 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}
           </>}>
+        {state.releaseTransition ? (<BodyText colors={colors}>
+            {state.releaseTransition.fromVersion
+                    ? translate("ota:releaseTransition", {
+                        fromVersion: state.releaseTransition.fromVersion,
+                        toVersion: state.releaseTransition.toVersion,
+                    })
+                    : translate("ota:releaseTransitionUnknown", { toVersion: state.releaseTransition.toVersion })}
+          </BodyText>) : 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>
+        {state.releaseTransition ? (<BodyText colors={colors}>
+            {translate("ota:updatedToVersion", { version: state.releaseTransition.toVersion })}
+          </BodyText>) : null}
+        <ChangelogList changelogs={state.changelogs} colors={colors}/>
       </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>
+        {state.releaseTransition ? (<BodyText colors={colors}>
+            {translate("ota:updatedToVersion", { version: state.releaseTransition.toVersion })}
+          </BodyText>) : null}
+        <ChangelogList changelogs={state.changelogs} colors={colors}/>
       </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>);
@@ -472,16 +214,30 @@ function BodyText({ children, colors }) {
 function PercentText({ colors, percent }) {
     return <Text style={[styles.percent, { color: colors.primary }]}>{Math.round(percent)}%</Text>;
 }
+function ChangelogList({ changelogs, colors, }) {
+    if (changelogs.length === 0)
+        return null;
+    return (<ScrollView contentContainerStyle={styles.changelogContent} style={styles.changelogList}>
+      {changelogs.map((entry) => (<View key={entry.version} style={styles.changelogEntry}>
+          <Text selectable style={[styles.changelogVersion, { color: colors.foreground }]}>
+            {entry.version}
+          </Text>
+          <Text selectable style={[styles.changelogMarkdown, { color: colors.textDim }]}>
+            {entry.markdown}
+          </Text>
+        </View>))}
+    </ScrollView>);
+}
 function FlowButton({ colors, disabled = false, label, onPress, secondary = false, }) {
     return (<Pressable accessibilityRole="button" disabled={disabled} onPress={onPress} style={({ pressed }) => [
             styles.button,
             {
-                backgroundColor: secondary ? colors.background : colors.primary,
-                borderColor: secondary ? colors.border : colors.primary,
+                backgroundColor: secondary ? colors.background : colors.foreground,
+                borderColor: secondary ? colors.border : colors.foreground,
                 opacity: disabled ? 0.45 : pressed ? 0.75 : 1,
             },
         ]} testID={`button-${label}`}>
-      <Text style={[styles.buttonText, { color: secondary ? colors.foreground : colors.primaryText }]}>{label}</Text>
+      <Text style={[styles.buttonText, { color: secondary ? colors.foreground : colors.background }]}>{label}</Text>
     </Pressable>);
 }
 function MentraMark({ color }) {
@@ -515,14 +271,19 @@ const styles = StyleSheet.create({
     percent: { fontSize: 30, fontVariant: ["tabular-nums"], fontWeight: "700" },
     progressTrack: { borderRadius: 4, height: 8, maxWidth: 420, overflow: "hidden", width: "100%" },
     progressFill: { borderRadius: 4, height: 8 },
+    changelogList: { flexShrink: 1, maxHeight: 260, maxWidth: 420, width: "100%" },
+    changelogContent: { gap: 18, paddingVertical: 4 },
+    changelogEntry: { gap: 8 },
+    changelogVersion: { fontSize: 16, fontWeight: "600" },
+    changelogMarkdown: { fontSize: 14, lineHeight: 20 },
     button: {
         alignItems: "center",
-        borderRadius: 10,
+        borderRadius: 50,
         borderWidth: 1,
         justifyContent: "center",
-        minHeight: 48,
+        minHeight: 44,
         paddingHorizontal: 20,
     },
-    buttonText: { fontSize: 15, fontWeight: "700" },
+    buttonText: { fontSize: 14, fontWeight: "500" },
 });
 //# sourceMappingURL=MentraLiveOtaFlow.js.map