@glassly/engine 0.1.0-dev.61 → 0.1.0-dev.62

package/build/utils/display/composer/ColumnComposer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnComposer.js","sourceRoot":"","sources":["../../../../src/utils/display/composer/ColumnComposer.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * ColumnComposer\n *\n * Handles composition of multi-column layouts like double_text_wall.\n * This is the single source of truth for column layout logic, replacing\n * the duplicate implementations in native iOS (G1Text.swift) and\n * Android (G1Text.kt, G1.java).\n *\n * The composer:\n * 1. Wraps each column's text to its allocated width\n * 2. Merges columns line-by-line with pixel-precise space padding\n * 3. Returns a single pre-composed string ready for native to chunk & send\n *\n * @see cloud/issues/026-mobile-display-processor for design docs\n */\n\nimport type {DisplayProfile} from \"../profiles/types\"\nimport {TextMeasurer} from \"../measurer/TextMeasurer\"\nimport {TextWrapper} from \"../wrapper/TextWrapper\"\nimport type {WrapOptions, BreakMode} from \"../wrapper/types\"\n\n// =============================================================================\n// Types\n// =============================================================================\n\n/**\n * Configuration for column layout\n */\nexport interface ColumnConfig {\n  /** Width of the left column in pixels */\n  leftColumnWidthPx: number\n  /** X position where the right column starts in pixels */\n  rightColumnStartPx: number\n  /** Width of the right column in pixels (calculated from start position) */\n  rightColumnWidthPx: number\n  /** Maximum number of lines to display */\n  maxLines: number\n  /** Left margin in spaces (for indentation) */\n  leftMarginSpaces?: number\n}\n\n/**\n * Options for composing double text wall\n */\nexport interface ComposeOptions {\n  /** Break mode for text wrapping */\n  breakMode?: BreakMode\n  /** Custom column configuration (overrides profile defaults) */\n  columnConfig?: Partial<ColumnConfig>\n}\n\n/**\n * Result of column composition\n */\nexport interface ComposeResult {\n  /** The fully composed text with both columns merged */\n  composedText: string\n  /** Lines from the left column (for debugging/preview) */\n  leftLines: string[]\n  /** Lines from the right column (for debugging/preview) */\n  rightLines: string[]\n  /** The column configuration that was used */\n  config: ColumnConfig\n}\n\n// =============================================================================\n// ColumnComposer Class\n// =============================================================================\n\n/**\n * Composes multi-column layouts for smart glasses displays.\n *\n * Usage:\n * ```typescript\n * const composer = new ColumnComposer(G1_PROFILE)\n * const result = composer.composeDoubleTextWall(\"Left content\", \"Right content\")\n * // result.composedText is ready to send to native SGC\n * ```\n */\nexport class ColumnComposer {\n  private profile: DisplayProfile\n  private measurer: TextMeasurer\n  private wrapper: TextWrapper\n  private spaceWidthPx: number\n\n  constructor(profile: DisplayProfile, breakMode: BreakMode = \"character-no-hyphen\") {\n    this.profile = profile\n    this.measurer = new TextMeasurer(profile)\n    this.wrapper = new TextWrapper(this.measurer, {\n      breakMode,\n    })\n\n    // Cache space width for alignment calculations\n    this.spaceWidthPx = this.measurer.measureText(\" \")\n  }\n\n  // ===========================================================================\n  // Public API\n  // ===========================================================================\n\n  /**\n   * Compose a double text wall layout.\n   *\n   * Takes left and right text, wraps each to their column width,\n   * and merges them with pixel-precise space alignment.\n   *\n   * @param leftText - Text for the left column\n   * @param rightText - Text for the right column\n   * @param options - Optional composition settings\n   * @returns Composed result with merged text and metadata\n   */\n  public composeDoubleTextWall(leftText: string, rightText: string, options: ComposeOptions = {}): ComposeResult {\n    const config = this.getColumnConfig(options.columnConfig)\n\n    // Wrap each column independently\n    const leftWrapOptions: WrapOptions = {\n      maxWidthPx: config.leftColumnWidthPx,\n      maxLines: config.maxLines,\n    }\n\n    const rightWrapOptions: WrapOptions = {\n      maxWidthPx: config.rightColumnWidthPx,\n      maxLines: config.maxLines,\n    }\n\n    const leftResult = this.wrapper.wrap(leftText || \"\", leftWrapOptions)\n    const rightResult = this.wrapper.wrap(rightText || \"\", rightWrapOptions)\n\n    // Pad arrays to have exactly maxLines entries\n    const leftLines = this.padLines(leftResult.lines, config.maxLines)\n    const rightLines = this.padLines(rightResult.lines, config.maxLines)\n\n    // Merge columns with space alignment\n    const composedText = this.mergeColumns(leftLines, rightLines, config)\n\n    return {\n      composedText,\n      leftLines,\n      rightLines,\n      config,\n    }\n  }\n\n  /**\n   * Get the default column configuration for the current profile.\n   */\n  public getDefaultColumnConfig(): ColumnConfig {\n    return this.getColumnConfig()\n  }\n\n  /**\n   * Update the break mode for text wrapping.\n   */\n  public setBreakMode(breakMode: BreakMode): void {\n    this.wrapper = new TextWrapper(this.measurer, {\n      breakMode,\n    })\n  }\n\n  // ===========================================================================\n  // Private Methods\n  // ===========================================================================\n\n  /**\n   * Get column configuration, merging defaults with overrides.\n   */\n  private getColumnConfig(overrides?: Partial<ColumnConfig>): ColumnConfig {\n    const displayWidth = this.profile.displayWidthPx\n\n    // Default layout: 50% for left column, right starts at 55%\n    // This matches the native G1Text implementations\n    const defaults: ColumnConfig = {\n      leftColumnWidthPx: Math.floor(displayWidth * 0.5),\n      rightColumnStartPx: Math.floor(displayWidth * 0.55),\n      rightColumnWidthPx: displayWidth - Math.floor(displayWidth * 0.55),\n      maxLines: this.profile.maxLines,\n      leftMarginSpaces: 0,\n    }\n\n    return {\n      ...defaults,\n      ...overrides,\n    }\n  }\n\n  /**\n   * Pad lines array to exactly `count` entries.\n   */\n  private padLines(lines: string[], count: number): string[] {\n    const result = [...lines]\n    while (result.length < count) {\n      result.push(\"\")\n    }\n    return result.slice(0, count)\n  }\n\n  /**\n   * Merge left and right columns with pixel-precise space alignment.\n   *\n   * For each line:\n   * 1. Take the left column text\n   * 2. Calculate its pixel width\n   * 3. Calculate how many spaces needed to reach rightColumnStartPx\n   * 4. Append spaces and right column text\n   */\n  private mergeColumns(leftLines: string[], rightLines: string[], config: ColumnConfig): string {\n    const lines: string[] = []\n\n    for (let i = 0; i < config.maxLines; i++) {\n      const leftText = this.cleanEnspaces(leftLines[i] || \"\")\n      const rightText = this.cleanEnspaces(rightLines[i] || \"\")\n\n      // Calculate pixel width of left text\n      const leftWidthPx = this.measurer.measureText(leftText)\n\n      // Calculate spaces needed to reach the right column start\n      const spacesNeeded = this.calculateSpacesForAlignment(leftWidthPx, config.rightColumnStartPx)\n\n      // Build the merged line\n      let line = \"\"\n\n      // Add left margin if configured\n      if (config.leftMarginSpaces && config.leftMarginSpaces > 0) {\n        line += \" \".repeat(config.leftMarginSpaces)\n      }\n\n      line += leftText\n      line += \" \".repeat(spacesNeeded)\n      line += rightText\n\n      lines.push(line)\n    }\n\n    return lines.join(\"\\n\")\n  }\n\n  /**\n   * Calculate the number of spaces needed to align to a target position.\n   *\n   * @param currentWidthPx - Current position in pixels\n   * @param targetPositionPx - Target position in pixels\n   * @returns Number of space characters needed\n   */\n  private calculateSpacesForAlignment(currentWidthPx: number, targetPositionPx: number): number {\n    const pixelsNeeded = targetPositionPx - currentWidthPx\n\n    // Ensure at least one space for separation\n    if (pixelsNeeded <= 0) {\n      return 1\n    }\n\n    // Calculate spaces needed. Use Math.floor (not Math.ceil) to ensure the\n    // right column never starts past rightColumnStartPx. Rounding up caused\n    // the right column to start 1–5px further right than planned, shrinking\n    // its usable width and causing the last character to wrap onto the next\n    // line's left position.\n    const spaces = Math.max(1, Math.floor(pixelsNeeded / this.spaceWidthPx))\n\n    // Cap at a reasonable maximum to prevent runaway spacing\n    return Math.min(spaces, 100)\n  }\n\n  /**\n   * Remove en-space characters (U+2002) that may have been added during wrapping.\n   * Native implementations do this cleanup before merging.\n   */\n  private cleanEnspaces(text: string): string {\n    return text.replace(/\\u2002/g, \"\")\n  }\n}\n\n// =============================================================================\n// Factory Function\n// =============================================================================\n\n/**\n * Create a ColumnComposer for a given profile.\n *\n * @param profile - Display profile to use\n * @param breakMode - Break mode for text wrapping (default: \"word\")\n * @returns Configured ColumnComposer instance\n */\nexport function createColumnComposer(profile: DisplayProfile, breakMode: BreakMode = \"word\"): ColumnComposer {\n  return new ColumnComposer(profile, breakMode)\n}\n"]}
+{"version":3,"file":"ColumnComposer.js","sourceRoot":"","sources":["../../../../src/utils/display/composer/ColumnComposer.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * ColumnComposer\n *\n * Handles composition of multi-column layouts like double_text_wall.\n * This is the single source of truth for column layout logic, replacing\n * the duplicate implementations in native iOS (G1Text.swift) and\n * Android (G1Text.kt, G1.java).\n *\n * The composer:\n * 1. Wraps each column's text to its allocated width\n * 2. Merges columns line-by-line with pixel-precise space padding\n * 3. Returns a single pre-composed string ready for native to chunk & send\n *\n * @see notes/miniapp-display-api-redesign.md for the current display design\n */\n\nimport type {DisplayProfile} from \"../profiles/types\"\nimport {TextMeasurer} from \"../measurer/TextMeasurer\"\nimport {TextWrapper} from \"../wrapper/TextWrapper\"\nimport type {WrapOptions, BreakMode} from \"../wrapper/types\"\n\n// =============================================================================\n// Types\n// =============================================================================\n\n/**\n * Configuration for column layout\n */\nexport interface ColumnConfig {\n  /** Width of the left column in pixels */\n  leftColumnWidthPx: number\n  /** X position where the right column starts in pixels */\n  rightColumnStartPx: number\n  /** Width of the right column in pixels (calculated from start position) */\n  rightColumnWidthPx: number\n  /** Maximum number of lines to display */\n  maxLines: number\n  /** Left margin in spaces (for indentation) */\n  leftMarginSpaces?: number\n}\n\n/**\n * Options for composing double text wall\n */\nexport interface ComposeOptions {\n  /** Break mode for text wrapping */\n  breakMode?: BreakMode\n  /** Custom column configuration (overrides profile defaults) */\n  columnConfig?: Partial<ColumnConfig>\n}\n\n/**\n * Result of column composition\n */\nexport interface ComposeResult {\n  /** The fully composed text with both columns merged */\n  composedText: string\n  /** Lines from the left column (for debugging/preview) */\n  leftLines: string[]\n  /** Lines from the right column (for debugging/preview) */\n  rightLines: string[]\n  /** The column configuration that was used */\n  config: ColumnConfig\n}\n\n// =============================================================================\n// ColumnComposer Class\n// =============================================================================\n\n/**\n * Composes multi-column layouts for smart glasses displays.\n *\n * Usage:\n * ```typescript\n * const composer = new ColumnComposer(G1_PROFILE)\n * const result = composer.composeDoubleTextWall(\"Left content\", \"Right content\")\n * // result.composedText is ready to send to native SGC\n * ```\n */\nexport class ColumnComposer {\n  private profile: DisplayProfile\n  private measurer: TextMeasurer\n  private wrapper: TextWrapper\n  private spaceWidthPx: number\n\n  constructor(profile: DisplayProfile, breakMode: BreakMode = \"character-no-hyphen\") {\n    this.profile = profile\n    this.measurer = new TextMeasurer(profile)\n    this.wrapper = new TextWrapper(this.measurer, {\n      breakMode,\n    })\n\n    // Cache space width for alignment calculations\n    this.spaceWidthPx = this.measurer.measureText(\" \")\n  }\n\n  // ===========================================================================\n  // Public API\n  // ===========================================================================\n\n  /**\n   * Compose a double text wall layout.\n   *\n   * Takes left and right text, wraps each to their column width,\n   * and merges them with pixel-precise space alignment.\n   *\n   * @param leftText - Text for the left column\n   * @param rightText - Text for the right column\n   * @param options - Optional composition settings\n   * @returns Composed result with merged text and metadata\n   */\n  public composeDoubleTextWall(leftText: string, rightText: string, options: ComposeOptions = {}): ComposeResult {\n    const config = this.getColumnConfig(options.columnConfig)\n\n    // Wrap each column independently\n    const leftWrapOptions: WrapOptions = {\n      maxWidthPx: config.leftColumnWidthPx,\n      maxLines: config.maxLines,\n    }\n\n    const rightWrapOptions: WrapOptions = {\n      maxWidthPx: config.rightColumnWidthPx,\n      maxLines: config.maxLines,\n    }\n\n    const leftResult = this.wrapper.wrap(leftText || \"\", leftWrapOptions)\n    const rightResult = this.wrapper.wrap(rightText || \"\", rightWrapOptions)\n\n    // Pad arrays to have exactly maxLines entries\n    const leftLines = this.padLines(leftResult.lines, config.maxLines)\n    const rightLines = this.padLines(rightResult.lines, config.maxLines)\n\n    // Merge columns with space alignment\n    const composedText = this.mergeColumns(leftLines, rightLines, config)\n\n    return {\n      composedText,\n      leftLines,\n      rightLines,\n      config,\n    }\n  }\n\n  /**\n   * Get the default column configuration for the current profile.\n   */\n  public getDefaultColumnConfig(): ColumnConfig {\n    return this.getColumnConfig()\n  }\n\n  /**\n   * Update the break mode for text wrapping.\n   */\n  public setBreakMode(breakMode: BreakMode): void {\n    this.wrapper = new TextWrapper(this.measurer, {\n      breakMode,\n    })\n  }\n\n  // ===========================================================================\n  // Private Methods\n  // ===========================================================================\n\n  /**\n   * Get column configuration, merging defaults with overrides.\n   */\n  private getColumnConfig(overrides?: Partial<ColumnConfig>): ColumnConfig {\n    const displayWidth = this.profile.displayWidthPx\n\n    // Default layout: 50% for left column, right starts at 55%\n    // This matches the native G1Text implementations\n    const defaults: ColumnConfig = {\n      leftColumnWidthPx: Math.floor(displayWidth * 0.5),\n      rightColumnStartPx: Math.floor(displayWidth * 0.55),\n      rightColumnWidthPx: displayWidth - Math.floor(displayWidth * 0.55),\n      maxLines: this.profile.maxLines,\n      leftMarginSpaces: 0,\n    }\n\n    return {\n      ...defaults,\n      ...overrides,\n    }\n  }\n\n  /**\n   * Pad lines array to exactly `count` entries.\n   */\n  private padLines(lines: string[], count: number): string[] {\n    const result = [...lines]\n    while (result.length < count) {\n      result.push(\"\")\n    }\n    return result.slice(0, count)\n  }\n\n  /**\n   * Merge left and right columns with pixel-precise space alignment.\n   *\n   * For each line:\n   * 1. Take the left column text\n   * 2. Calculate its pixel width\n   * 3. Calculate how many spaces needed to reach rightColumnStartPx\n   * 4. Append spaces and right column text\n   */\n  private mergeColumns(leftLines: string[], rightLines: string[], config: ColumnConfig): string {\n    const lines: string[] = []\n\n    for (let i = 0; i < config.maxLines; i++) {\n      const leftText = this.cleanEnspaces(leftLines[i] || \"\")\n      const rightText = this.cleanEnspaces(rightLines[i] || \"\")\n\n      // Calculate pixel width of left text\n      const leftWidthPx = this.measurer.measureText(leftText)\n\n      // Calculate spaces needed to reach the right column start\n      const spacesNeeded = this.calculateSpacesForAlignment(leftWidthPx, config.rightColumnStartPx)\n\n      // Build the merged line\n      let line = \"\"\n\n      // Add left margin if configured\n      if (config.leftMarginSpaces && config.leftMarginSpaces > 0) {\n        line += \" \".repeat(config.leftMarginSpaces)\n      }\n\n      line += leftText\n      line += \" \".repeat(spacesNeeded)\n      line += rightText\n\n      lines.push(line)\n    }\n\n    return lines.join(\"\\n\")\n  }\n\n  /**\n   * Calculate the number of spaces needed to align to a target position.\n   *\n   * @param currentWidthPx - Current position in pixels\n   * @param targetPositionPx - Target position in pixels\n   * @returns Number of space characters needed\n   */\n  private calculateSpacesForAlignment(currentWidthPx: number, targetPositionPx: number): number {\n    const pixelsNeeded = targetPositionPx - currentWidthPx\n\n    // Ensure at least one space for separation\n    if (pixelsNeeded <= 0) {\n      return 1\n    }\n\n    // Calculate spaces needed. Use Math.floor (not Math.ceil) to ensure the\n    // right column never starts past rightColumnStartPx. Rounding up caused\n    // the right column to start 1–5px further right than planned, shrinking\n    // its usable width and causing the last character to wrap onto the next\n    // line's left position.\n    const spaces = Math.max(1, Math.floor(pixelsNeeded / this.spaceWidthPx))\n\n    // Cap at a reasonable maximum to prevent runaway spacing\n    return Math.min(spaces, 100)\n  }\n\n  /**\n   * Remove en-space characters (U+2002) that may have been added during wrapping.\n   * Native implementations do this cleanup before merging.\n   */\n  private cleanEnspaces(text: string): string {\n    return text.replace(/\\u2002/g, \"\")\n  }\n}\n\n// =============================================================================\n// Factory Function\n// =============================================================================\n\n/**\n * Create a ColumnComposer for a given profile.\n *\n * @param profile - Display profile to use\n * @param breakMode - Break mode for text wrapping (default: \"word\")\n * @returns Configured ColumnComposer instance\n */\nexport function createColumnComposer(profile: DisplayProfile, breakMode: BreakMode = \"word\"): ColumnComposer {\n  return new ColumnComposer(profile, breakMode)\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glassly/engine",
-  "version": "0.1.0-dev.61",
+  "version": "0.1.0-dev.62",
   "description": "Glassly Engine — miniapp registry, WebView bridge, and miniapp store",
   "main": "build/index.js",
   "react-native": "src/index.ts",
@@ -97,16 +97,17 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@glassly/bluetooth-sdk": "0.1.0-dev.61",
-    "@glassly/cloud-client": "0.1.0-dev.61",
-    "@glassly/cloud-protocol": "0.1.0-dev.61",
-    "@glassly/crust": "0.1.0-dev.61",
-    "@glassly/miniapp": "0.1.0-dev.61",
+    "@glassly/bluetooth-sdk": "0.1.0-dev.62",
+    "@glassly/cloud-client": "0.1.0-dev.62",
+    "@glassly/cloud-protocol": "0.1.0-dev.62",
+    "@glassly/crust": "0.1.0-dev.62",
+    "@glassly/miniapp": "0.1.0-dev.62",
     "buffer": "^6.0.3",
     "events": "^3.3.0",
+    "react-native-marked": "8.1.1",
     "semver": "^7.7.4",
     "typesafe-ts": "^1.7.1",
-    "@glassly/llm-providers": "0.1.0-dev.61"
+    "@glassly/llm-providers": "0.1.0-dev.62"
   },
   "devDependencies": {
     "@glassly/llm-providers": "workspace:*",

package/src/facades/ota.ts

@@ -17,7 +17,7 @@ import type {
   OtaUpdateInfo,
   ReleaseChangelog,
 } from "@glassly/bluetooth-sdk"
-import {isGlassesConnected, useGlassesStore} from "../stores/glasses"
+import {isGlassesConnected, isGlassesReady, useGlassesStore} from "../stores/glasses"
 import {resolveOtaManifestUrl} from "../services/otaManifestUrl"
 import {otaInstallCoordinator, type OtaInstallSnapshot} from "../services/OtaInstallCoordinator"
 import {startGlassesStatusProjection} from "../services/GlassesStatusProjection"
@@ -32,10 +32,12 @@ function projectSnapshot() {
   const s = useGlassesStore.getState()
   return {
     connected: isGlassesConnected(s.connection),
+    ready: isGlassesReady(s.connection),
     buildNumber: s.buildNumber || null,
     appVersion: s.appVersion || null,
     mtkFirmwareVersion: s.mtkFirmwareVersion || null,
     besFirmwareVersion: s.besFirmwareVersion || null,
+    batteryLevel: s.batteryLevel >= 0 ? s.batteryLevel : null,
     hotspotOtaVersion: s.hotspotOtaVersion ?? 0,
     wifiConnected: s.wifi.state === "connected",
     wifiStatusKnown: s.wifiStatusKnown,
@@ -64,7 +66,7 @@ export const ota = {
   // --- actions ---
   /**
    * Start the device-status and OTA projections without starting the authenticated
-   * cloud/miniapp runtime. This is the explicit entry point for Bluetooth-only hosts.
+   * cloud connection or miniapp runtime. This is the explicit entry point for Bluetooth-only hosts.
    * Idempotent and safe when the full engine runtime is already running.
    */
   initialize: async () => {

package/src/generated/releaseMetadata.ts

@@ -12,9 +12,9 @@ export interface EngineReleaseMetadata {
 export const ENGINE_RELEASE_METADATA: Readonly<EngineReleaseMetadata> = Object.freeze({
   "schemaVersion": 1,
   "familyBaseVersion": "0.1.0",
-  "releaseIdentity": "0.1.0-dev.61",
-  "releaseSetId": "glassly-0.1.0-dev.61",
-  "sourceCommit": "a95e4c9e0146e47ed4e553613584abd265913759",
+  "releaseIdentity": "0.1.0-dev.62",
+  "releaseSetId": "glassly-0.1.0-dev.62",
+  "sourceCommit": "69eee438b882fca1c9b0ad466d71fc2c24053662",
   "otaManifestUrl": null,
   "otaManifestSha256": null
 })

package/src/index.ts

@@ -109,6 +109,7 @@ export {
   GLOBAL_OTA_TIMEOUT_MS,
   PING_INTERVAL_MS,
   QUERY_REPLY_TIMEOUT_MS,
+  BES_RESTART_TIMEOUT_MS,
   OtaProgressMessages,
 } from "./services/otaInstallPolicy"
 export {deriveDisplayState} from "./services/otaDisplayState"
@@ -216,9 +217,9 @@ export {
   evenRealitiesG1,
   evenRealitiesG2,
   mentraLive,
+  nimo,
   vuzixZ100,
   mentraDisplay,
-  nimo,
 } from "./types"
 export type {
   HardwareRequirement,

package/src/react/MentraLiveOtaFlow.tsx

@@ -10,10 +10,16 @@ import {
   type StyleProp,
   type ViewStyle,
 } from "react-native"
+import {useMarkdown, type MarkedStyles, type useMarkdownHookOptions} from "react-native-marked"
 import {SafeAreaView} from "react-native-safe-area-context"
 import Svg, {Path, Rect} from "react-native-svg"
 
-import {useMentraLiveOta, type MentraLiveOtaController, type MentraLiveOtaFlowPage} from "./useMentraLiveOta"
+import {
+  MINIMUM_OTA_BATTERY_LEVEL,
+  useMentraLiveOta,
+  type MentraLiveOtaController,
+  type MentraLiveOtaFlowPage,
+} from "./useMentraLiveOta"
 
 export type {MentraLiveOtaFlowPage} from "./useMentraLiveOta"
 
@@ -65,13 +71,23 @@ const DEFAULT_THEME: MentraLiveOtaFlowTheme = {
 
 const ENGLISH_COPY: Record<string, string> = {
   "common:continue": "Continue",
+  "common:done": "Done",
   "ota:checkingForUpdates": "Checking for updates",
   "ota:checkingForUpdatesMessage":
     "Connected devices will perform automatic updates. Automatic updates can be disabled in Device Settings",
+  "ota:finishingUpdate": "Finishing your update",
+  "ota:checkingAdditionalUpdates": "Checking whether your glasses need any additional updates.",
   "ota:updateAvailable": "{{deviceName}} Update Available",
+  "ota:batteryRequiredTitle": "Charge {{deviceName}} to Update",
+  "ota:batteryRequiredMessage":
+    "{{deviceName}} is currently at {{batteryLevel}}%. Charge it to at least {{minimumBatteryLevel}}% before updating.",
+  "ota:batteryRequiredLiveUpdate": "This screen will update automatically as the battery charges.",
   "ota:updateConnectWifi": "Connect your {{deviceName}} to WiFi to install the update.",
+  "ota:wifiRequiredTitle": "WiFi Needed for Update",
   "ota:updateDescription":
     "A new update is available for your glasses. We recommend updating now for the best experience.",
+  "ota:updateSequenceMessage":
+    "Your glasses may install more than one update and restart several times. Keep them nearby until finished.",
   "ota:releaseTransition": "{{fromVersion}} → {{toVersion}}",
   "ota:releaseTransitionUnknown": "Current version unknown → {{toVersion}}",
   "ota:updatedToVersion": "Updated to {{version}}",
@@ -81,6 +97,8 @@ const ENGLISH_COPY: Record<string, string> = {
   "ota:updateNow": "Update Now",
   "ota:setupWifi": "Setup WiFi",
   "ota:updateLater": "Later",
+  "ota:updateComplete": "Update complete",
+  "ota:whatsNew": "What's new",
   "ota:upToDate": "Up To Date",
   "ota:devBuild": "Development Build",
   "ota:devBuildNoOta":
@@ -95,6 +113,10 @@ const ENGLISH_COPY: Record<string, string> = {
   "ota:versionChangeRestarting": "Installing a different version…",
   "ota:versionChangeVerifying": "Verifying your glasses…",
   "ota:versionChangeKeepNearby": "Keep your glasses nearby and connected. They will restart on their own.",
+  "ota:restartingGlasses": "Restarting {{deviceName}}…",
+  "ota:restartingGlassesMessage":
+    "The update is installed. Keep your glasses nearby and leave this screen open while they finish starting.",
+  "ota:restartingGlassesAutomatic": "We'll continue automatically when they're ready.",
   "ota:versionChangeComplete": "Version Change Complete",
   "ota:versionChangeCompleteMessage":
     "Your glasses are now on the required version. Their settings were reset and are being restored automatically.",
@@ -185,12 +207,53 @@ function OtaFlowContent({
     )
   }
 
+  if (state.screen === "battery_required") {
+    return (
+      <FlowPage
+        actions={
+          <>
+            <FlowButton colors={colors} disabled label={translate("ota:updateNow")} onPress={controller.install} />
+            {state.canDismiss ? (
+              <FlowButton colors={colors} label={translate("ota:updateLater")} onPress={controller.finish} secondary />
+            ) : null}
+          </>
+        }
+        colors={colors}
+        icon="alert"
+        title={translate("ota:batteryRequiredTitle", {deviceName})}>
+        <BodyText colors={colors}>
+          {translate("ota:batteryRequiredMessage", {
+            batteryLevel: String(state.batteryLevel),
+            deviceName,
+            minimumBatteryLevel: String(MINIMUM_OTA_BATTERY_LEVEL),
+          })}
+        </BodyText>
+        <BodyText colors={colors}>{translate("ota:batteryRequiredLiveUpdate")}</BodyText>
+      </FlowPage>
+    )
+  }
+
+  if (state.screen === "finishing") {
+    return (
+      <FlowPage colors={colors} icon="download" title={translate("ota:finishingUpdate")}>
+        <BodyText colors={colors}>{translate("ota:checkingAdditionalUpdates")}</BodyText>
+        <ActivityIndicator size="large" color={colors.foreground} />
+      </FlowPage>
+    )
+  }
+
   if (state.screen === "update_available" || state.screen === "wifi_required") {
+    const titleKey =
+      state.screen === "wifi_required"
+        ? "ota:wifiRequiredTitle"
+        : state.versionChange
+          ? "ota:downgradeAvailable"
+          : "ota:updateAvailable"
     return (
       <FlowPage
         colors={colors}
         icon="download"
-        title={translate(state.versionChange ? "ota:downgradeAvailable" : "ota:updateAvailable", {deviceName})}
+        title={translate(titleKey, {deviceName})}
         actions={
           <>
             <FlowButton
@@ -222,6 +285,7 @@ function OtaFlowContent({
             ? translate("ota:updateConnectWifi", {deviceName})
             : translate(state.versionChange ? "ota:downgradeDescription" : "ota:updateDescription")}
         </BodyText>
+        <BodyText colors={colors}>{translate("ota:updateSequenceMessage")}</BodyText>
       </FlowPage>
     )
   }
@@ -241,17 +305,24 @@ function OtaFlowContent({
   if (state.screen === "up_to_date") {
     return (
       <FlowPage
-        actions={<FlowButton colors={colors} label={translate("common:continue")} onPress={controller.finish} />}
+        actions={
+          <FlowButton
+            colors={colors}
+            label={translate(state.completedUpdate ? "common:done" : "common:continue")}
+            onPress={controller.finish}
+          />
+        }
         colors={colors}
+        contentAlignment={state.changelogs.length > 0 ? "top" : "center"}
         icon="check"
-        title={translate("ota:upToDate")}>
+        title={translate(state.completedUpdate ? "ota:updateComplete" : "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} />
+        <ChangelogList changelogs={state.changelogs} colors={colors} title={translate("ota:whatsNew")} />
       </FlowPage>
     )
   }
@@ -307,10 +378,10 @@ function OtaFlowContent({
       state.hotspotPhase === "downloading"
         ? "Downloading update to phone..."
         : state.hotspotPhase === "starting_hotspot"
-        ? "Starting glasses hotspot..."
-        : state.hotspotPhase === "joining_hotspot"
-        ? "Connecting phone to glasses..."
-        : "Starting update..."
+          ? "Starting glasses hotspot..."
+          : state.hotspotPhase === "joining_hotspot"
+            ? "Connecting phone to glasses..."
+            : "Starting update..."
     return (
       <FlowPage colors={colors} icon="download" title={title}>
         {state.hotspotPhase === "downloading" && state.hotspotArtifactPercent !== null ? (
@@ -347,14 +418,11 @@ function OtaFlowContent({
 
   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"
-      />
+      <FlowPage colors={colors} icon="download" title={translate("ota:restartingGlasses", {deviceName})}>
+        <ActivityIndicator size="large" color={colors.foreground} />
+        <BodyText colors={colors}>{translate("ota:restartingGlassesMessage")}</BodyText>
+        <BodyText colors={colors}>{translate("ota:restartingGlassesAutomatic")}</BodyText>
+      </FlowPage>
     )
   }
 
@@ -362,13 +430,13 @@ function OtaFlowContent({
     const title = state.versionChangeConverged
       ? translate("ota:versionChangeComplete")
       : state.versionChange
-      ? translate("ota:versionChangeFirmwarePassComplete")
-      : "Update complete!"
+        ? translate("ota:versionChangeFirmwarePassComplete")
+        : "Update complete!"
     const message = state.versionChangeConverged
       ? translate("ota:versionChangeCompleteMessage")
       : state.versionChange
-      ? translate("ota:versionChangeFirmwarePassCompleteMessage")
-      : "Your glasses are up to date."
+        ? translate("ota:versionChangeFirmwarePassCompleteMessage")
+        : "Your glasses are up to date."
     return (
       <FlowPage
         actions={
@@ -379,6 +447,7 @@ function OtaFlowContent({
           />
         }
         colors={colors}
+        contentAlignment={state.changelogs.length > 0 ? "top" : "center"}
         icon="check"
         title={title}>
         <BodyText colors={colors}>{message}</BodyText>
@@ -387,7 +456,7 @@ function OtaFlowContent({
             {translate("ota:updatedToVersion", {version: state.releaseTransition.toVersion})}
           </BodyText>
         ) : null}
-        <ChangelogList changelogs={state.changelogs} colors={colors} />
+        <ChangelogList changelogs={state.changelogs} colors={colors} title={translate("ota:whatsNew")} />
       </FlowPage>
     )
   }
@@ -435,14 +504,15 @@ type FlowPageProps = {
   actions?: React.ReactNode
   children?: React.ReactNode
   colors: MentraLiveOtaFlowTheme
+  contentAlignment?: "center" | "top"
   icon: "alert" | "bluetooth" | "check" | "download" | "settings"
   title: string
 }
 
-function FlowPage({actions, children, colors, icon, title}: FlowPageProps) {
+function FlowPage({actions, children, colors, contentAlignment = "center", icon, title}: FlowPageProps) {
   return (
     <View style={styles.page} testID="mentra-live-ota-flow">
-      <View style={styles.centerContent}>
+      <View style={[styles.centerContent, contentAlignment === "top" && styles.topContent]}>
         <FlowIcon colors={colors} name={icon} />
         <Text style={[styles.title, {color: colors.foreground}]}>{title}</Text>
         {children}
@@ -460,27 +530,129 @@ function PercentText({colors, percent}: {colors: MentraLiveOtaFlowTheme; percent
   return <Text style={[styles.percent, {color: colors.primary}]}>{Math.round(percent)}%</Text>
 }
 
-function ChangelogList({
+function ChangelogMarkdown({colors, markdown}: {colors: MentraLiveOtaFlowTheme; markdown: string}) {
+  const markdownStyles = useMemo<MarkedStyles>(
+    () => ({
+      blockquote: {
+        borderLeftColor: colors.primary,
+        borderLeftWidth: 3,
+        marginVertical: 2,
+        opacity: 1,
+        paddingLeft: 12,
+      },
+      code: {
+        backgroundColor: colors.background,
+        borderColor: colors.border,
+        borderRadius: 8,
+        borderWidth: 1,
+        padding: 12,
+      },
+      codespan: {
+        backgroundColor: colors.border,
+        color: colors.foreground,
+        fontFamily: "monospace",
+        fontSize: 13,
+        fontStyle: "normal",
+        fontWeight: "400",
+      },
+      em: {color: colors.textDim, fontSize: 14, lineHeight: 20},
+      h1: {
+        borderBottomWidth: 0,
+        color: colors.foreground,
+        fontSize: 18,
+        fontWeight: "700",
+        lineHeight: 24,
+        marginVertical: 0,
+        paddingBottom: 0,
+      },
+      h2: {
+        borderBottomWidth: 0,
+        color: colors.foreground,
+        fontSize: 17,
+        fontWeight: "700",
+        lineHeight: 23,
+        marginVertical: 0,
+        paddingBottom: 0,
+      },
+      h3: {color: colors.foreground, fontSize: 16, fontWeight: "700", lineHeight: 22, marginVertical: 0},
+      h4: {color: colors.foreground, fontSize: 15, fontWeight: "700", lineHeight: 21, marginVertical: 0},
+      h5: {color: colors.foreground, fontSize: 14, fontWeight: "700", lineHeight: 20, marginVertical: 0},
+      h6: {color: colors.textDim, fontSize: 14, fontWeight: "600", lineHeight: 20, marginVertical: 0},
+      hr: {borderBottomColor: colors.border, marginVertical: 2},
+      image: {borderRadius: 8},
+      li: {color: colors.textDim, fontSize: 14, lineHeight: 20},
+      link: {
+        color: colors.primary,
+        fontSize: 14,
+        fontStyle: "normal",
+        lineHeight: 20,
+        textDecorationLine: "underline",
+      },
+      paragraph: {paddingVertical: 0},
+      strikethrough: {color: colors.textDim, fontSize: 14, lineHeight: 20},
+      strong: {color: colors.foreground, fontSize: 14, fontWeight: "700", lineHeight: 20},
+      table: {borderColor: colors.border, borderRadius: 8},
+      tableCell: {padding: 8},
+      text: {color: colors.textDim, fontSize: 14, lineHeight: 20},
+    }),
+    [colors],
+  )
+  const markdownTheme = useMemo<NonNullable<useMarkdownHookOptions["theme"]>>(
+    () => ({
+      colors: {
+        background: colors.background,
+        border: colors.border,
+        code: colors.border,
+        link: colors.primary,
+        text: colors.textDim,
+      },
+    }),
+    [colors],
+  )
+  const elements = useMarkdown(markdown, {colorScheme: "light", styles: markdownStyles, theme: markdownTheme})
+
+  return (
+    <View style={styles.changelogMarkdownContent} testID="ota-changelog-markdown">
+      {elements}
+    </View>
+  )
+}
+
+export function ChangelogList({
   changelogs,
   colors,
+  title,
 }: {
   changelogs: MentraLiveOtaController["state"]["changelogs"]
   colors: MentraLiveOtaFlowTheme
+  title: string
 }) {
   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>
+    <View style={[styles.changelogCard, {borderColor: colors.border}]} testID="ota-changelog-card">
+      <Text style={[styles.changelogTitle, {color: colors.foreground}]}>{title}</Text>
+      <ScrollView
+        contentContainerStyle={styles.changelogContent}
+        nestedScrollEnabled
+        showsVerticalScrollIndicator
+        style={styles.changelogList}
+        testID="ota-changelog-scroll">
+        {changelogs.map((entry, index) => (
+          <View
+            key={entry.version}
+            style={[
+              styles.changelogEntry,
+              index > 0 && styles.changelogEntryDivider,
+              index > 0 && {borderTopColor: colors.border},
+            ]}>
+            <Text selectable style={[styles.changelogVersion, {color: colors.foreground}]}>
+              {entry.version}
+            </Text>
+            <ChangelogMarkdown colors={colors} markdown={entry.markdown} />
+          </View>
+        ))}
+      </ScrollView>
+    </View>
   )
 }
 
@@ -544,6 +716,7 @@ const styles = StyleSheet.create({
   },
   page: {flex: 1, paddingBottom: 24, paddingHorizontal: 24},
   centerContent: {alignItems: "center", flex: 1, gap: 16, justifyContent: "center"},
+  topContent: {justifyContent: "flex-start", paddingTop: 12},
   actionSpacer: {height: 48},
   actions: {gap: 12},
   icon: {fontSize: 64, fontWeight: "500", lineHeight: 72, textAlign: "center"},
@@ -552,11 +725,23 @@ 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},
+  changelogCard: {
+    borderRadius: 16,
+    borderWidth: 1,
+    flexShrink: 1,
+    gap: 12,
+    maxHeight: 300,
+    maxWidth: 420,
+    padding: 16,
+    width: "100%",
+  },
+  changelogTitle: {fontSize: 16, fontWeight: "700"},
+  changelogList: {flexShrink: 1, maxHeight: 232, width: "100%"},
+  changelogContent: {gap: 20, paddingBottom: 2},
   changelogEntry: {gap: 8},
-  changelogVersion: {fontSize: 16, fontWeight: "600"},
-  changelogMarkdown: {fontSize: 14, lineHeight: 20},
+  changelogEntryDivider: {borderTopWidth: StyleSheet.hairlineWidth, paddingTop: 20},
+  changelogVersion: {fontSize: 14, fontWeight: "600"},
+  changelogMarkdownContent: {gap: 10},
   button: {
     alignItems: "center",
     borderRadius: 50,