fix(mini): address UI feedback and device status display

Correct battery colors, participant artwork, navigation icons, title layout, and map spacing.

Animate the binding countdown using the existing expiry, recover polling after transient failures, and show online and battery data on success. Keep current firmware messaging consistent with version availability.

Validation: WeChat mini-program build, 16 UI tests, and isolated developer-tool scenarios passed. Five pre-existing TypeScript errors remain; physical-device validation is pending.

banban-mini/tests/firmware-progress.test.cjs

@@ -11,7 +11,9 @@ function loadTypeScript(file, mocks = {}) {
   })
   const module = { exports: {} }
   new Function('require', 'module', 'exports', outputText)(
-    (id) => mocks[id] || require(id), module, module.exports,
+    (id) => mocks[id] || (id.startsWith('.')
+      ? loadTypeScript(path.join(path.dirname(file), `${id}.ts`), mocks)
+      : require(id)), module, module.exports,
   )
   return module.exports
 }
@@ -77,3 +79,65 @@ test('custom pages clear the capsule while native pages only add content spacing
   assert.equal(getPageStyle()['--bb-navigation-top'], '102px')
   assert.equal(getPageStyle(false)['--bb-navigation-top'], '12px')
 })
+
+const { firmwareSummaryView } = loadTypeScript('utils/firmware-status.ts')
+const currentFirmware = { device_id: 'test-device', current_version: '1.8.2', latest_version: '1.8.2', update_available: false, can_update: false, update_status: 'failed', progress: 40 }
+
+test('latest version takes precedence over a historical failed update in the summary', () => {
+  assert.deepEqual(firmwareSummaryView(currentFirmware), { action: '已最新', subtitle: '当前已是最新版本' })
+  const view = firmwareProgressView(currentFirmware)
+  assert.equal(view.current, true)
+  assert.equal(view.failed, false)
+  assert.equal(view.complete, false) // Current firmware does not rewrite the historical OTA outcome.
+  assert.equal(view.title, '当前已是最新版本')
+  assert.equal(view.version, '1.8.2')
+})
+
+test('a failed update with a newer version still offers a retry', () => {
+  const pending = { ...currentFirmware, current_version: '1.8.1', update_available: true, can_update: true }
+  assert.deepEqual(firmwareSummaryView(pending), { action: '更新', subtitle: '更新失败，可重试' })
+  assert.equal(firmwareProgressView(pending).failed, true)
+})
+
+test('missing or placeholder versions never claim the device is up to date', () => {
+  const cases = [null, ...['', 'unknown', '0.0.0', '--', 'updating'].flatMap(value => [
+    { ...currentFirmware, current_version: value }, { ...currentFirmware, latest_version: value },
+  ])]
+  for (const value of cases) {
+    assert.notEqual(firmwareSummaryView(value).action, '已最新')
+    assert.equal(firmwareProgressView(value).current, false)
+  }
+})
+
+test('an active update continues showing progress even after the version has changed', () => {
+  for (const update_status of ['sent', 'accepted', 'updating']) {
+    const updating = { ...currentFirmware, update_status }
+    assert.equal(firmwareSummaryView(updating).action, '查看进度')
+    assert.equal(firmwareProgressView(updating).current, false)
+  }
+})
+
+test('title rows align to the capsule and reserve its width on both sides', () => {
+  const { getPageStyle } = loadTypeScript('utils/page-style.ts', {
+    '@tarojs/taro': {
+      getSystemInfoSync: () => ({ statusBarHeight: 44, windowWidth: 375 }),
+      getMenuButtonBoundingClientRect: () => ({ top: 50, bottom: 82, height: 32, left: 278 }),
+    },
+  })
+  const style = getPageStyle()
+  assert.equal(style['--bb-navigation-bar-top'], '50px')
+  assert.equal(style['--bb-navigation-bar-height'], '32px')
+  assert.equal(style['--bb-navigation-side'], '105px')
+})
+
+test('navigation keeps usable dimensions when the capsule is unavailable', () => {
+  const { getPageStyle } = loadTypeScript('utils/page-style.ts', {
+    '@tarojs/taro': {
+      getSystemInfoSync: () => ({ statusBarHeight: 24 }),
+      getMenuButtonBoundingClientRect: () => { throw new Error('unavailable') },
+    },
+  })
+  const style = getPageStyle()
+  assert.equal(style['--bb-navigation-bar-top'], '30px')
+  assert.equal(style['--bb-navigation-bar-height'], '32px')
+})