feat: update button (download, verify, stage)

web/src/lib/__tests__/updateFormat.spec.ts

@@ -2,6 +2,8 @@ import { describe, expect, it } from 'vitest'
 import {
 	AUTO_CHECK_INTERVAL_MS,
 	displayVersion,
+	downloadAnnouncement,
+	formatDownloadProgress,
 	formatLastChecked,
 	formatReleased,
 	isCheckDue,
@@ -64,3 +66,29 @@ describe('formatReleased', () => {
 		expect(formatReleased('2026-09-24T08:00:00Z')).toBe('Released 24 Sep 2026')
 	})
 })
+
+describe('formatDownloadProgress', () => {
+	it('reads the board sample as 42% and 11 of 26 MB', () => {
+		expect(
+			formatDownloadProgress({
+				percent: 42,
+				downloaded_bytes: 11534336,
+				total_bytes: 27262976,
+			}),
+		).toBe('42% · 11 of 26 MB')
+	})
+})
+
+describe('downloadAnnouncement', () => {
+	it.each([
+		[0, 'Downloading version 2.3.0-beta'],
+		[24, 'Downloading version 2.3.0-beta'],
+		[25, 'Downloading version 2.3.0-beta, 25 percent'],
+		[49, 'Downloading version 2.3.0-beta, 25 percent'],
+		[50, 'Downloading version 2.3.0-beta, 50 percent'],
+		[75, 'Downloading version 2.3.0-beta, 75 percent'],
+		[100, 'Downloading version 2.3.0-beta, 75 percent'],
+	])('reads %i percent as %s', (percent, expected) => {
+		expect(downloadAnnouncement('2.3.0-beta', percent)).toBe(expected)
+	})
+})

web/src/lib/updateFormat.ts

@@ -44,3 +44,28 @@ export function isCheckDue(checkedAt: string | null, now: number = Date.now()) {
 export function formatReleased(iso: string) {
 	return `Released ${formatAbsoluteDateFromIso(iso)}`
 }
+
+const BYTES_PER_MB = 1024 * 1024
+const ANNOUNCEMENT_STEP_PERCENT = 25
+const LAST_ANNOUNCED_PERCENT = 75
+
+export function formatDownloadProgress(progress: {
+	percent: number
+	downloaded_bytes: number
+	total_bytes: number
+}) {
+	const done = Math.round(progress.downloaded_bytes / BYTES_PER_MB)
+	const total = Math.round(progress.total_bytes / BYTES_PER_MB)
+	return `${progress.percent}% · ${done} of ${total} MB`
+}
+
+export function downloadAnnouncement(version: string, percent: number) {
+	const step = Math.min(
+		Math.floor(percent / ANNOUNCEMENT_STEP_PERCENT) * ANNOUNCEMENT_STEP_PERCENT,
+		LAST_ANNOUNCED_PERCENT,
+	)
+	const base = `Downloading version ${version}`
+	return step > 0 ? `${base}, ${step} percent` : base
+}
+
+export const VERIFYING_ANNOUNCEMENT = 'Checking the download'