feat: complete hosted mod sync and launcher interface updates

Add pack sync markers, tagged mod updates, parallel progress, JWT downloads and retry recovery. Include pending onboarding, about scene, compatibility data pack and download fixes.

apps/app-frontend/src/components/instance/HostedModpacks.vue

@@ -39,7 +39,7 @@
 					})
 				}}
 			</p>
-			<p v-if="syncing" role="status">{{ formatMessage(messages.syncing) }}</p>
+			<HostedPackProgress :instance-id="instanceId" :active="syncing" />
 			<div v-if="result" role="status" class="rounded-xl bg-bg-raised p-4">
 				<p>
 					{{
@@ -59,10 +59,9 @@
 					</ul>
 				</details>
 			</div>
-			<p v-if="!loading && ready && !catalog.length">{{ formatMessage(messages.empty) }}</p>
+
 			<article
-				v-for="pack in catalog"
-				:key="pack.packId"
+				v-if="pack"
 				class="flex flex-wrap items-center justify-between gap-4 rounded-xl bg-bg-raised p-4"
 			>
 				<div>
@@ -73,16 +72,7 @@
 					</p>
 				</div>
 				<ButtonStyled color="brand"
-					><button
-						type="button"
-						:disabled="
-							!ready ||
-							syncing ||
-							loading ||
-							(!!binding && binding.publication.packId !== pack.packId)
-						"
-						@click="sync(pack.packId)"
-					>
+					><button type="button" :disabled="!ready || syncing || loading" @click="sync">
 						{{ formatMessage(binding ? messages.update : messages.install) }}
 					</button></ButtonStyled
 				>
@@ -92,28 +82,29 @@
 </template>
 <script setup lang="ts">
 import { ButtonStyled, defineMessages, useVIntl } from '@modrinth/ui'
-import { inject, ref, watch } from 'vue'
+import { computed, inject, ref, watch } from 'vue'
+import { useHostedSync } from '@/composables/useHostedSync'
+import { injectDownloadManager } from '@/providers/download-manager'
 import { useRouter } from 'vue-router'
 
 import InstanceModeSettings from '@/components/instance/InstanceModeSettings.vue'
+import HostedPackProgress from '@/components/instance/HostedPackProgress.vue'
 import { useInstanceMode } from '@/composables/useInstanceMode'
 
 import {
 	type HostedBinding,
 	hostedBinding,
-	hostedCatalog,
+	hostedDefault,
 	type HostedPublication,
-	hostedSync,
-	type HostedSyncResult,
 } from '@/helpers/hosted-packs'
 const props = defineProps<{ instanceId: string }>()
 const modeQuery = useInstanceMode(() => props.instanceId)
 const router = useRouter()
-const showCreation = inject<
-	(options: { skipSetupType: boolean; initialMode: 'import'; instanceMode: 'local' }) => void
->('showCreationModalWithOptions')
+const showCreation = inject<(options: { skipSetupType: boolean; initialMode: 'import' }) => void>(
+	'showCreationModalWithOptions',
+)
 function importLocal() {
-	showCreation?.({ skipSetupType: true, initialMode: 'import', instanceMode: 'local' })
+	showCreation?.({ skipSetupType: true, initialMode: 'import' })
 }
 const { formatMessage } = useVIntl()
 const messages = defineMessages({
@@ -125,11 +116,11 @@ const messages = defineMessages({
 	},
 	browse: { id: 'app.instance-mode.browse', defaultMessage: 'Browse modpacks' },
 	importLocal: { id: 'app.instance-mode.import', defaultMessage: 'Import as a local instance' },
-	title: { id: 'app.hosted-packs.title', defaultMessage: 'Published modpacks' },
+	title: { id: 'app.hosted-packs.title', defaultMessage: 'Server-managed modpack' },
 	description: {
 		id: 'app.hosted-packs.description',
 		defaultMessage:
-			'Install an approved modpack into this instance. Future online launches automatically download changed files. Use a separate empty instance for each pack; saves and personal settings are preserved.',
+			'The administrator selects this modpack and its versions. Every launch checks for updates and downloads changes before starting. A valid StarLight login and network connection are required.',
 	},
 	refresh: { id: 'app.hosted-packs.refresh', defaultMessage: 'Refresh' },
 	loading: { id: 'app.hosted-packs.loading', defaultMessage: 'Loading published modpacks…' },
@@ -151,15 +142,27 @@ const messages = defineMessages({
 		defaultMessage: 'No modpacks have been approved for publication yet.',
 	},
 	update: { id: 'app.hosted-packs.update', defaultMessage: 'Synchronize now' },
-	install: { id: 'app.hosted-packs.install', defaultMessage: 'Install and enable automatic sync' },
+	install: { id: 'app.hosted-packs.install', defaultMessage: 'Retry automatic installation' },
 })
-const catalog = ref<HostedPublication[]>([])
+const pack = ref<HostedPublication | null>(null)
 const binding = ref<HostedBinding | null>(null)
-const result = ref<HostedSyncResult | null>(null)
+const task = useHostedSync(() => props.instanceId)
+const result = task.result
+const manager = injectDownloadManager()
 const loading = ref(false)
-const syncing = ref(false)
+const syncing = computed(
+	() =>
+		task.busy.value ||
+		manager.legacyDownloads.value.some(
+			(bar) =>
+				bar.bar_type?.type === 'hosted_pack_sync' &&
+				bar.bar_type.instance_id === props.instanceId &&
+				!bar.bar_type.error,
+		),
+)
 const ready = ref(false)
-const error = ref('')
+const loadError = ref('')
+const error = computed(() => loadError.value || task.error.value)
 let generation = 0
 async function load() {
 	if (modeQuery.data.value !== 'starlight') return
@@ -167,46 +170,36 @@ async function load() {
 	const instanceId = props.instanceId
 	loading.value = true
 	ready.value = false
-	error.value = ''
+	loadError.value = ''
 	try {
-		const [packs, installed] = await Promise.all([hostedCatalog(), hostedBinding(instanceId)])
+		const [official, installed] = await Promise.all([hostedDefault(), hostedBinding(instanceId)])
 		if (current !== generation) return
-		catalog.value = packs
+		pack.value = official
 		binding.value = installed
 		ready.value = true
 	} catch (cause) {
-		if (current === generation) error.value = String(cause)
+		if (current === generation) loadError.value = String(cause)
 	} finally {
 		if (current === generation) loading.value = false
 	}
 }
-async function sync(packId: string) {
+async function sync() {
 	if (syncing.value || !ready.value || modeQuery.data.value !== 'starlight') return
-	const instanceId = props.instanceId
-	syncing.value = true
-	error.value = ''
-	result.value = null
-	try {
-		const completed = await hostedSync(instanceId, packId)
-		if (props.instanceId !== instanceId) return
-		result.value = completed
-		await load()
-	} catch (cause) {
-		if (props.instanceId === instanceId) error.value = String(cause)
-	} finally {
-		syncing.value = false
-	}
+	loadError.value = ''
+	await task.sync()
 }
+watch(syncing, (busy, wasBusy) => {
+	if (!busy && wasBusy) void load()
+})
 watch(
 	() => [props.instanceId, modeQuery.data.value] as const,
 	() => {
 		generation++
 		loading.value = false
 		ready.value = false
-		error.value = ''
-		catalog.value = []
+		loadError.value = ''
+		pack.value = null
 		binding.value = null
-		result.value = null
 		void load()
 	},
 	{ immediate: true },

apps/app-frontend/src/components/instance/HostedPackProgress.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ProgressBar, defineMessages, useVIntl } from '@modrinth/ui'
+import { computed } from 'vue'
+import { injectDownloadManager } from '@/providers/download-manager'
+
+const props = defineProps<{ instanceId?: string; active?: boolean }>()
+const manager = injectDownloadManager()
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	preparing: {
+		id: 'app.hosted-packs.progress.preparing',
+		defaultMessage: 'Preparing modpack installation…',
+	},
+	downloads: { id: 'app.hosted-packs.progress.downloads', defaultMessage: 'View downloads' },
+})
+const bar = computed(() =>
+	manager.legacyDownloads.value.find(
+		(item) =>
+			props.instanceId &&
+			item.bar_type?.type === 'hosted_pack_sync' &&
+			!item.bar_type.error &&
+			item.bar_type.instance_id === props.instanceId,
+	),
+)
+const waiting = computed(() => !bar.value?.total)
+const current = computed(() =>
+	Math.max(0, Math.min(bar.value?.current ?? 0, bar.value?.total ?? 0)),
+)
+const message = computed(() => bar.value?.message || formatMessage(messages.preparing))
+</script>
+
+<template>
+	<div v-if="active || bar" class="flex min-w-0 flex-col gap-2" role="status">
+		<ProgressBar
+			:progress="current"
+			:max="bar?.total || 1"
+			:waiting="waiting"
+			:label="message"
+			label-class="min-w-0 break-all text-sm text-secondary"
+			:show-progress="!waiting"
+			full-width
+		>
+			<template #progress-icon />
+		</ProgressBar>
+		<RouterLink to="/downloads" class="self-start text-sm text-brand hover:underline">
+			{{ formatMessage(messages.downloads) }}
+		</RouterLink>
+	</div>
+</template>

apps/app-frontend/src/components/instance/InstanceModeOptions.vue

@@ -15,7 +15,7 @@ const messages = defineMessages({
 	starlightDescription: {
 		id: 'app.instance-mode.starlight-description',
 		defaultMessage:
-			'Automatically syncs changes published by the StarLight server. Required for playing on StarLight. Select and install the official modpack in Mod management before your first launch.',
+			'Required for playing on StarLight. Automatically installs the server-selected modpack, Minecraft version, and loader. Every launch requires a StarLight login and checks for updates before starting.',
 	},
 	localDescription: {
 		id: 'app.instance-mode.local-description',

apps/app-frontend/src/components/instance/InstanceModeSettings.vue

@@ -11,7 +11,10 @@ const query = useInstanceMode(() => props.instanceId)
 const save = useSetInstanceMode()
 const { formatMessage } = useVIntl()
 const messages = defineMessages({
-	saving: { id: 'app.instance-mode.saving', defaultMessage: 'Saving instance type…' },
+	saving: {
+		id: 'app.instance-mode.saving',
+		defaultMessage: 'Applying instance type and installing the server modpack when needed…',
+	},
 	loading: { id: 'app.instance-mode.loading', defaultMessage: 'Loading instance type…' },
 	retry: { id: 'app.instance-mode.retry', defaultMessage: 'Retry' },
 })

apps/app-frontend/src/components/instance/TaggedModDownloadsModal.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { NewModal, ProgressBar, ButtonStyled, defineMessages, useVIntl } from '@modrinth/ui'
+import { onMounted, onUnmounted, nextTick, ref, shallowRef } from 'vue'
+import { useRouter } from 'vue-router'
+import { loading_listener } from '@/helpers/events'
+import { progress_bars_list } from '@/helpers/state'
+import { onHostedPackAttemptStarted } from '@/helpers/hosted-packs'
+import {
+	createTaggedModProgress,
+	type TaggedProgressEvent,
+	type TaggedProgressGroup,
+} from '@/helpers/tagged-mod-progress'
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const router = useRouter()
+const { formatMessage } = useVIntl()
+const state = createTaggedModProgress()
+const groups = shallowRef<TaggedProgressGroup[]>([])
+const messages = defineMessages({
+	title: { id: 'app.hosted-mods.title', defaultMessage: 'Updating server Mods' },
+	description: {
+		id: 'app.hosted-mods.description',
+		defaultMessage: 'The game starts after all required updates have been installed.',
+	},
+	complete: { id: 'app.hosted-mods.complete', defaultMessage: 'Downloaded' },
+	downloads: { id: 'app.hosted-mods.downloads', defaultMessage: 'View downloads' },
+	close: { id: 'app.hosted-mods.close', defaultMessage: 'Close' },
+})
+const size = (value: number) => `${(value / 1048576).toFixed(1)} MiB`
+let disposed = false
+let unlisten: (() => void) | undefined
+let stopAttempts: (() => void) | undefined
+function refresh() {
+	groups.value = [...state.groups.values()]
+}
+function consume(payload: TaggedProgressEvent) {
+	const opened = state.update(payload)
+	refresh()
+	if (opened)
+		void nextTick(() => {
+			const group = state.groups.get(payload.event?.batch_id ?? '')
+			if (!disposed && group && (!group.done || group.error)) modal.value?.show()
+		})
+	if (groups.value.length > 0 && groups.value.every((group) => group.done && !group.error))
+		modal.value?.hide()
+}
+onMounted(async () => {
+	stopAttempts = onHostedPackAttemptStarted((id) => {
+		state.reset(id)
+		refresh()
+		if (!groups.value.length) modal.value?.hide()
+	})
+	let initializing = true
+	const buffered: TaggedProgressEvent[] = []
+	const stop = await loading_listener((payload: TaggedProgressEvent) => {
+		if (initializing) buffered.push(payload)
+		else consume(payload)
+	})
+	if (disposed) {
+		stop()
+		return
+	}
+	unlisten = stop
+	const bars = await progress_bars_list().catch(() => ({}))
+	if (disposed) return
+	const ordered = Object.values(bars).sort(
+		(a, b) =>
+			Number(b.bar_type?.type === 'hosted_pack_sync') -
+			Number(a.bar_type?.type === 'hosted_pack_sync'),
+	)
+	for (const bar of ordered)
+		consume({
+			loader_uuid: String(bar.loading_bar_uuid),
+			event: bar.bar_type,
+			fraction: bar.total ? (bar.current ?? 0) / bar.total : 0,
+			total: bar.total,
+			message: bar.message ?? '',
+		})
+	initializing = false
+	for (const payload of buffered) consume(payload)
+})
+onUnmounted(() => {
+	disposed = true
+	unlisten?.()
+	stopAttempts?.()
+})
+function openDownloads() {
+	modal.value?.hide()
+	void router.push('/downloads')
+}
+</script>
+
+<template>
+	<NewModal
+		ref="modal"
+		:header="formatMessage(messages.title)"
+		width="min(38rem, calc(100vw - 2rem))"
+		scrollable
+		max-content-height="60vh"
+		:close-on-click-outside="false"
+	>
+		<div class="flex flex-col gap-4">
+			<p class="m-0 text-secondary">{{ formatMessage(messages.description) }}</p>
+			<section v-for="group in groups" :key="group.id" class="flex min-w-0 flex-col gap-3">
+				<h3 class="m-0 text-contrast">{{ group.name }}</h3>
+				<p v-if="group.error" role="alert" class="m-0 break-words text-red">{{ group.error }}</p>
+				<p v-else-if="group.message" class="m-0 break-words text-sm text-secondary">
+					{{ group.message }}
+				</p>
+				<div
+					v-for="file in group.files.values()"
+					:key="file.id"
+					class="flex min-w-0 flex-col gap-1"
+				>
+					<div class="flex flex-wrap justify-between gap-2 text-sm">
+						<span class="min-w-0 break-all text-contrast">{{ file.name }}</span>
+						<span class="text-secondary tabular-nums"
+							>{{ size(file.current) }} / {{ size(file.total) }}</span
+						>
+					</div>
+					<p v-if="file.error" class="m-0 break-words text-sm text-red">{{ file.error }}</p>
+					<ProgressBar
+						v-else
+						:progress="file.current"
+						:max="file.total || 1"
+						:waiting="!file.total"
+						:show-progress="!file.done"
+						:label="file.done ? formatMessage(messages.complete) : file.message"
+						full-width
+						><template #progress-icon
+					/></ProgressBar>
+				</div>
+			</section>
+		</div>
+		<template #actions>
+			<ButtonStyled
+				><button @click="openDownloads">
+					{{ formatMessage(messages.downloads) }}
+				</button></ButtonStyled
+			>
+			<ButtonStyled
+				><button @click="modal?.hide()">{{ formatMessage(messages.close) }}</button></ButtonStyled
+			>
+		</template>
+	</NewModal>
+</template>