fix: support concurrent game windows and prepare beta12 GitHub releases

apps/app-frontend/src/components/RowDisplay.vue

@@ -42,6 +42,7 @@ const { offline } = useNetworkStatus()
 const handleMinecraftLaunchError = useMinecraftLaunchError()
 
 const messages = defineMessages({
+	stopAll: { id: 'app.instance.stop-all', defaultMessage: 'Stop all windows of this instance' },
 	addContent: { id: 'app.instances.add-content', defaultMessage: 'Add content' },
 	viewInstance: { id: 'app.instances.view-instance', defaultMessage: 'View instance' },
 	duplicateInstance: {
@@ -265,7 +266,12 @@ onUnmounted(() => {
 		@delete="deleteInstance"
 	/>
 	<div ref="rowContainer" class="flex flex-col gap-4">
-		<div v-for="row in actualInstances" ref="rows" :key="row.label" class="row flex flex-col items-start overflow-hidden w-full min-w-full">
+		<div
+			v-for="row in actualInstances"
+			ref="rows"
+			:key="row.label"
+			class="row flex flex-col items-start overflow-hidden w-full min-w-full"
+		>
 			<HeadingLink class="mt-1" :to="row.route">
 				{{ row.label }}
 			</HeadingLink>
@@ -307,7 +313,7 @@ onUnmounted(() => {
 	</div>
 	<ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
 		<template #play> <PlayIcon /> {{ formatMessage(commonMessages.playButton) }} </template>
-		<template #stop> <StopCircleIcon /> {{ formatMessage(commonMessages.stopButton) }} </template>
+		<template #stop> <StopCircleIcon /> {{ formatMessage(messages.stopAll) }} </template>
 		<template #add_content> <PlusIcon /> {{ formatMessage(messages.addContent) }} </template>
 		<template #edit> <EyeIcon /> {{ formatMessage(messages.viewInstance) }} </template>
 		<template #delete> <TrashIcon /> {{ formatMessage(commonMessages.deleteLabel) }} </template>

apps/app-frontend/src/components/home/HomeMinimal.vue

@@ -29,6 +29,7 @@ import { process_listener } from '@/helpers/events'
 import { install_existing_instance, install_pack_to_existing_instance } from '@/helpers/install'
 import { kill, run } from '@/helpers/instance'
 import { get_by_instance_id } from '@/helpers/process'
+import { isInstanceLaunching } from '@/helpers/instance-launch-state'
 import type { GameInstance } from '@/helpers/types'
 import { handleSevereError } from '@/store/error'
 
@@ -50,6 +51,8 @@ const handleMinecraftLaunchError = useMinecraftLaunchError()
 const { offline } = useNetworkStatus()
 
 const messages = defineMessages({
+	launchAnother: { id: 'app.instance.launch-another', defaultMessage: 'Launch another window' },
+	stopAll: { id: 'app.instance.stop-all', defaultMessage: 'Stop all windows of this instance' },
 	chooseInstance: {
 		id: 'app.home.minimal.choose-instance',
 		defaultMessage: 'Choose instance',
@@ -88,14 +91,17 @@ const selectedInstance = computed(() =>
 	props.instances.find((instance) => instance.id === props.selectedInstanceId),
 )
 const running = ref(false)
-const loading = ref(false)
-const currentEvent = ref<string | null>(null)
+const installingId = ref<string>()
 const installed = computed(() => selectedInstance.value?.install_stage === 'installed')
 const installing = computed(
 	() => selectedInstance.value?.install_stage.includes('installing') ?? false,
 )
 const busy = computed(
-	() => loading.value || installing.value || (currentEvent.value === 'launched' && !running.value),
+	() =>
+		!!selectedInstance.value &&
+		(isInstanceLaunching(selectedInstance.value.id) ||
+			installingId.value === selectedInstance.value.id ||
+			installing.value),
 )
 
 const lastPlayed = computed(() => {
@@ -111,18 +117,17 @@ async function refreshProcessState() {
 		return
 	}
 
-	const processes = await get_by_instance_id(selectedInstance.value.id).catch((error) => {
+	const id = selectedInstance.value.id
+	const processes = await get_by_instance_id(id).catch((error) => {
 		handleError(error)
 		return []
 	})
-	running.value = processes.length > 0
+	if (selectedInstance.value?.id === id) running.value = processes.length > 0
 }
 
 async function playInstance() {
 	const instance = selectedInstance.value
-	if (!instance) return
-
-	loading.value = true
+	if (!instance || busy.value) return
 	try {
 		await run(instance.id)
 	} catch (error) {
@@ -132,7 +137,6 @@ async function playInstance() {
 		})
 		if (!handled) handleSevereError(error, { instanceId: instance.id })
 	} finally {
-		loading.value = false
 		await refreshProcessState()
 	}
 }
@@ -142,14 +146,14 @@ async function stopInstance() {
 	if (!instance) return
 
 	await kill(instance.id).catch(handleError)
-	running.value = false
+	await refreshProcessState()
 }
 
 async function installInstance() {
 	const instance = selectedInstance.value
 	if (!instance) return
 
-	loading.value = true
+	installingId.value = instance.id
 	try {
 		if (
 			instance.install_stage !== 'pack_installed' &&
@@ -168,14 +172,14 @@ async function installInstance() {
 	} catch (error) {
 		handleError(error)
 	} finally {
-		loading.value = false
+		if (installingId.value === instance.id) installingId.value = undefined
 	}
 }
 
 watch(
 	() => props.selectedInstanceId,
 	() => {
-		currentEvent.value = null
+		running.value = false
 		void refreshProcessState()
 	},
 )
@@ -184,9 +188,7 @@ await refreshProcessState()
 
 const unlistenProcess = await process_listener((event: { instance_id: string; event: string }) => {
 	if (event.instance_id !== selectedInstance.value?.id) return
-	currentEvent.value = event.event
-	if (event.event === 'finished') running.value = false
-	else void refreshProcessState()
+	void refreshProcessState()
 })
 
 onUnmounted(() => {
@@ -237,13 +239,17 @@ onUnmounted(() => {
 						</router-link>
 
 						<div class="flex min-h-11 shrink-0 items-center justify-end gap-2">
-							<ButtonStyled v-if="running" color="red" size="large">
-								<button class="w-36 justify-center" @click="stopInstance">
+							<ButtonStyled v-if="running" color="red" size="large" circular>
+								<button
+									v-tooltip="formatMessage(messages.stopAll)"
+									:aria-label="formatMessage(messages.stopAll)"
+									:disabled="busy"
+									@click="stopInstance"
+								>
 									<StopCircleIcon aria-hidden="true" />
-									<span class="truncate">{{ formatMessage(commonMessages.stopButton) }}</span>
 								</button>
 							</ButtonStyled>
-							<ButtonStyled v-else-if="busy" size="large">
+							<ButtonStyled v-if="busy" size="large">
 								<button class="w-36 justify-center" disabled>
 									<SpinnerIcon class="animate-spin" aria-hidden="true" />
 									<span class="truncate">
@@ -256,7 +262,9 @@ onUnmounted(() => {
 							<ButtonStyled v-else-if="installed" color="brand" size="large">
 								<button class="w-36 justify-center" @click="playInstance">
 									<PlayIcon class="translate-x-px" aria-hidden="true" />
-									<span class="truncate">{{ formatMessage(commonMessages.playButton) }}</span>
+									<span class="truncate">{{
+										formatMessage(running ? messages.launchAnother : commonMessages.playButton)
+									}}</span>
 								</button>
 							</ButtonStyled>
 							<ButtonStyled v-else color="brand" size="large">

apps/app-frontend/src/components/ui/AppActionBar.vue

@@ -137,6 +137,11 @@
 										<OnlineIndicatorIcon />
 										<span class="mr-auto text-contrast flex items-center gap-2">
 											{{ process.instance.name }}
+											<span class="text-xs text-secondary">{{
+												formatMessage(messages.windowStarted, {
+													time: new Date(process.start_time),
+												})
+											}}</span>
 											<StarIcon v-if="process.uuid === selectedProcess.uuid" class="text-orange" />
 										</span>
 									</button>
@@ -307,6 +312,7 @@ const notificationCenterShown = ref(false)
 
 interface RunningProcess {
 	uuid: string
+	start_time: string
 	instance_id: string
 	instance: GameInstance
 }
@@ -320,6 +326,10 @@ interface LoadingEventPayload {
 }
 
 const messages = defineMessages({
+	windowStarted: {
+		id: 'app.action-bar.window-started',
+		defaultMessage: 'Started {time, time, medium}',
+	},
 	offline: {
 		id: 'app.action-bar.offline',
 		defaultMessage: 'Offline',
@@ -346,7 +356,7 @@ const messages = defineMessages({
 	},
 	stopInstance: {
 		id: 'app.action-bar.stop-instance',
-		defaultMessage: 'Stop instance',
+		defaultMessage: 'Stop window',
 	},
 	viewLogs: {
 		id: 'app.action-bar.view-logs',
@@ -401,8 +411,9 @@ const refresh = async () => {
 	const processes = ((await getRunningProcesses().catch((error) => {
 		handleError(error)
 		return []
-	})) ?? []) as Array<{ uuid: string; instance_id: string }>
-	const instanceIds = processes.map((process) => process.instance_id)
+	})) ?? []) as Array<{ uuid: string; instance_id: string; start_time: string }>
+	processes.sort((a, b) => a.start_time.localeCompare(b.start_time))
+	const instanceIds = [...new Set(processes.map((process) => process.instance_id))]
 	const instances: GameInstance[] = await getInstances(instanceIds).catch((error) => {
 		handleError(error)
 		return []
@@ -420,9 +431,9 @@ const refresh = async () => {
 			}
 		})
 		.filter((process): process is RunningProcess => process !== null)
-	if (!selectedProcess.value || !currentProcesses.value.includes(selectedProcess.value)) {
-		selectedProcess.value = currentProcesses.value[0]
-	}
+	selectedProcess.value =
+		currentProcesses.value.find((process) => process.uuid === selectedProcess.value?.uuid) ??
+		currentProcesses.value[0]
 }
 
 await refresh()

apps/app-frontend/src/components/ui/Instance.vue

@@ -1,12 +1,5 @@
 <script setup>
-import {
-	DownloadIcon,
-	GameIcon,
-	PlayIcon,
-	SpinnerIcon,
-	StopCircleIcon,
-	TimerIcon,
-} from '@modrinth/assets'
+import { DownloadIcon, GameIcon, PlayIcon, SpinnerIcon, TimerIcon } from '@modrinth/assets'
 import {
 	Avatar,
 	ButtonStyled,
@@ -28,6 +21,7 @@ import { install_existing_instance, install_pack_to_existing_instance } from '@/
 import { kill, run } from '@/helpers/instance'
 import { getDisplayInstanceIcon } from '@/helpers/instance-icons'
 import { get_by_instance_id } from '@/helpers/process'
+import { isInstanceLaunching } from '@/helpers/instance-launch-state'
 import { showInstanceInFolder } from '@/helpers/utils.js'
 import { handleSevereError } from '@/store/error.js'
 
@@ -36,6 +30,7 @@ const formatRelativeTime = useRelativeTime()
 const { formatMessage } = useVIntl()
 const handleMinecraftLaunchError = useMinecraftLaunchError()
 const messages = defineMessages({
+	launchAnother: { id: 'app.instance.launch-another', defaultMessage: 'Launch another window' },
 	loading: { id: 'app.instance.loading', defaultMessage: 'Instance is loading...' },
 	played: { id: 'app.instance.played', defaultMessage: 'Played {time}' },
 	neverPlayed: { id: 'app.instance.never-played', defaultMessage: 'Never played' },
@@ -85,13 +80,8 @@ const isPlaying = computed(() => props.playing ?? internalPlaying.value)
 const displayIcon = computed(() =>
 	getDisplayInstanceIcon(props.instance.icon_path, props.instance.loader),
 )
-const loading = ref(false)
-const modLoading = computed(
-	() =>
-		loading.value ||
-		currentEvent.value === 'installing' ||
-		(currentEvent.value === 'launched' && !isPlaying.value),
-)
+const loading = computed(() => isInstanceLaunching(props.instance.id))
+const modLoading = computed(() => loading.value || installing.value)
 const installing = computed(() => props.instance.install_stage.includes('installing'))
 const installed = computed(() => props.instance.install_stage === 'installed')
 
@@ -105,31 +95,26 @@ const checkProcess = async () => {
 	if (props.playing !== undefined) return
 	const runningProcesses = await get_by_instance_id(props.instance.id).catch(handleError)
 
-	internalPlaying.value = runningProcesses.length > 0
+	if (Array.isArray(runningProcesses)) internalPlaying.value = runningProcesses.length > 0
 }
 
 const play = async (e, context) => {
 	e?.stopPropagation()
-	loading.value = true
-	await run(props.instance.id)
-		.catch(async (err) => {
-			const handled = await handleMinecraftLaunchError(err, {
-				instance_id: props.instance.id,
-				instance_name: props.instance.name,
-			})
-			if (!handled) handleSevereError(err, { instanceId: props.instance.id })
+	if (loading.value) return
+	await run(props.instance.id).catch(async (err) => {
+		const handled = await handleMinecraftLaunchError(err, {
+			instance_id: props.instance.id,
+			instance_name: props.instance.name,
 		})
-		.finally(() => {
-		})
-	loading.value = false
+		if (!handled) handleSevereError(err, { instanceId: props.instance.id })
+	})
+	await checkProcess()
 }
 
 const stop = async (e, context) => {
 	e?.stopPropagation()
-	internalPlaying.value = false
-
 	await kill(props.instance.id).catch(handleError)
-
+	await checkProcess()
 }
 
 const repair = async (e) => {
@@ -171,16 +156,11 @@ defineExpose({
 	instance: props.instance,
 })
 
-const currentEvent = ref(null)
-
 const unlisten =
 	props.playing === undefined
 		? await process_listener((e) => {
 				if (e.instance_id === props.instance.id) {
-					currentEvent.value = e.event
-					if (e.event === 'finished') {
-						internalPlaying.value = false
-					}
+					void checkProcess()
 				}
 			})
 		: () => undefined
@@ -212,15 +192,7 @@ onUnmounted(() => unlisten())
 				<span class="line-clamp-2">{{ instance.name }}</span>
 			</div>
 			<div class="flex items-center">
-				<ButtonStyled v-if="isPlaying" color="red" circular @mousehover="checkProcess">
-					<button
-						v-tooltip="formatMessage(commonMessages.stopButton)"
-						@click="(e) => stop(e, 'InstanceCard')"
-					>
-						<StopCircleIcon />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else-if="modLoading" color="standard" circular>
+				<ButtonStyled v-if="modLoading" color="standard" circular>
 					<button v-tooltip="formatMessage(messages.loading)" disabled>
 						<SpinnerIcon class="animate-spin" />
 					</button>
@@ -230,7 +202,7 @@ onUnmounted(() => unlisten())
 						v-tooltip="
 							offline && !installed
 								? formatMessage(messages.offlineInstalledOnly)
-								: formatMessage(commonMessages.playButton)
+								: formatMessage(isPlaying ? messages.launchAnother : commonMessages.playButton)
 						"
 						:disabled="offline && !installed"
 						@click="(e) => play(e, 'InstanceCard')"
@@ -290,17 +262,8 @@ onUnmounted(() => unlisten())
 					/>
 				</div>
 				<div class="absolute bottom-1.5 right-1.5 flex size-12 items-center justify-center">
-					<ButtonStyled v-if="isPlaying" size="large" color="red" circular>
-						<button
-							v-tooltip="formatMessage(commonMessages.stopButton)"
-							@click="(e) => stop(e, 'InstanceCard')"
-							@mousehover="checkProcess"
-						>
-							<StopCircleIcon />
-						</button>
-					</ButtonStyled>
 					<ButtonStyled
-						v-else-if="!modLoading && !installing && !installed"
+						v-if="!modLoading && !installing && !installed"
 						size="large"
 						color="brand"
 						circular
@@ -324,7 +287,9 @@ onUnmounted(() => unlisten())
 					</ButtonStyled>
 					<ButtonStyled v-else-if="!modLoading && !installing" size="large" color="brand" circular>
 						<button
-							v-tooltip="formatMessage(commonMessages.playButton)"
+							v-tooltip="
+								formatMessage(isPlaying ? messages.launchAnother : commonMessages.playButton)
+							"
 							:class="{
 								'pointer-events-none scale-75 opacity-0': disabled,
 								'scale-75 opacity-0 transition-all group-hover:scale-100 group-hover:opacity-100':
@@ -369,19 +334,8 @@ onUnmounted(() => unlisten())
 					:class="`transition-all ${modLoading || installing ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
 				/>
 				<div class="absolute inset-0 flex items-center justify-center">
-					<ButtonStyled v-if="isPlaying" size="large" color="red" circular>
-						<button
-							v-tooltip="formatMessage(commonMessages.stopButton)"
-							:class="{ 'scale-100 opacity-100': isPlaying }"
-							class="transition-all origin-bottom opacity-0 card-shadow"
-							@click="(e) => stop(e, 'InstanceCard')"
-							@mousehover="checkProcess"
-						>
-							<StopCircleIcon />
-						</button>
-					</ButtonStyled>
 					<SpinnerIcon
-						v-else-if="modLoading || installing"
+						v-if="modLoading || installing"
 						v-tooltip="
 							modLoading
 								? formatMessage(messages.loading)
@@ -406,7 +360,9 @@ onUnmounted(() => unlisten())
 					</ButtonStyled>
 					<ButtonStyled v-else size="large" color="brand" circular>
 						<button
-							v-tooltip="formatMessage(commonMessages.playButton)"
+							v-tooltip="
+								formatMessage(isPlaying ? messages.launchAnother : commonMessages.playButton)
+							"
 							:class="`transition-all scale-75 origin-bottom card-shadow ${disabled ? 'opacity-0 scale-75' : 'opacity-0 group-hover:scale-100 group-hover:opacity-100 group-focus-within:scale-100 group-focus-within:opacity-100'}`"
 							@click="(e) => play(e, 'InstanceCard')"
 							@mousehover="checkProcess"

apps/app-frontend/src/components/ui/onboarding/onboardingConfig.ts

@@ -242,7 +242,7 @@ export const onboardingMessages = defineMessages({
 	instanceActionsDescription: {
 		id: 'app.onboarding.instance-actions.description',
 		defaultMessage:
-			'Launch or configure this instance here. Choose a player on first launch; the instance remembers your choice until you switch it in settings.',
+			'Launch or configure this instance here. You can launch another window while it is running; use the top bar to stop an individual window. Choose a player on first launch; the instance remembers your choice until you switch it in settings.',
 	},
 	instanceTabsTitle: {
 		id: 'app.onboarding.instance-tabs.title',

apps/app-frontend/src/components/ui/world/InstanceItem.vue

@@ -30,6 +30,7 @@ import { get_project } from '@/helpers/cache'
 import { process_listener } from '@/helpers/events'
 import { kill, run } from '@/helpers/instance'
 import { get_by_instance_id } from '@/helpers/process'
+import { isInstanceLaunching } from '@/helpers/instance-launch-state'
 import type { GameInstance } from '@/helpers/types'
 import { showInstanceInFolder } from '@/helpers/utils'
 import { handleSevereError } from '@/store/error'
@@ -46,10 +47,8 @@ const messages = defineMessages({
 		defaultMessage: 'Loading modpack...',
 	},
 	viewInstance: { id: 'app.instance-item.view-instance', defaultMessage: 'View instance' },
-	alreadyOpen: {
-		id: 'app.instance-item.already-open',
-		defaultMessage: 'Instance is already open',
-	},
+	launchAnother: { id: 'app.instance.launch-another', defaultMessage: 'Launch another window' },
+	stopAll: { id: 'app.instance.stop-all', defaultMessage: 'Stop all windows of this instance' },
 })
 const formatDateTime = useFormatDateTime({
 	timeStyle: 'short',
@@ -91,33 +90,32 @@ const loader = computed(() => {
 	}
 })
 
-const loading = ref(false)
+const stopping = ref(false)
+const loading = computed(() => stopping.value || isInstanceLaunching(props.instance.id))
 const internalPlaying = ref(false)
 const isPlaying = computed(() => props.playing ?? internalPlaying.value)
 
 const play = async (event: MouseEvent) => {
 	event?.stopPropagation()
-	loading.value = true
-	await run(props.instance.id)
-		.catch(async (err) => {
-			const handled = await handleMinecraftLaunchError(err, {
-				instance_id: props.instance.id,
-				instance_name: props.instance.name,
-			})
-			if (!handled) handleSevereError(err, { instanceId: props.instance.id })
-		})
-		.finally(() => {
+	if (loading.value) return
+	await run(props.instance.id).catch(async (err) => {
+		const handled = await handleMinecraftLaunchError(err, {
+			instance_id: props.instance.id,
+			instance_name: props.instance.name,
 		})
+		if (!handled) handleSevereError(err, { instanceId: props.instance.id })
+	})
 	emit('play')
-	loading.value = false
+	await checkProcess()
 }
 
 const stop = async (event: MouseEvent) => {
 	event?.stopPropagation()
-	loading.value = true
+	stopping.value = true
 	await kill(props.instance.id).catch(handleError)
 	emit('stop')
-	loading.value = false
+	stopping.value = false
+	await checkProcess()
 }
 
 const unlistenProcesses =
@@ -131,7 +129,7 @@ const checkProcess = async () => {
 	if (props.playing !== undefined) return
 	const runningProcesses = await get_by_instance_id(props.instance.id).catch(handleError)
 
-	internalPlaying.value = runningProcesses.length > 0
+	if (Array.isArray(runningProcesses)) internalPlaying.value = runningProcesses.length > 0
 }
 
 onMounted(() => {
@@ -155,7 +153,8 @@ onUnmounted(() => {
 			:class="[
 				flat ? 'px-2 py-2 hover:bg-button-bg' : 'card-shadow bg-bg-raised p-3',
 				{
-					'instance-item-dashboard-compact grid grid-cols-[auto_minmax(0,1fr)_auto] gap-2 p-1.5': dashboardDensity === 'compact',
+					'instance-item-dashboard-compact grid grid-cols-[auto_minmax(0,1fr)_auto] gap-2 p-1.5':
+						dashboardDensity === 'compact',
 					'instance-item-dashboard-comfortable p-2': dashboardDensity === 'comfortable',
 				},
 			]"
@@ -214,23 +213,25 @@ onUnmounted(() => {
 					color="red"
 					:circular="dashboardDensity === 'compact'"
 				>
-					<button @click="stop">
+					<button v-tooltip="formatMessage(messages.stopAll)" @click="stop">
 						<StopCircleIcon aria-hidden="true" />
 						<span v-if="dashboardDensity !== 'compact'">
-							{{ formatMessage(commonMessages.stopButton) }}
+							{{ formatMessage(messages.stopAll) }}
 						</span>
 					</button>
 				</ButtonStyled>
-				<ButtonStyled v-else :circular="dashboardDensity === 'compact'">
+				<ButtonStyled :circular="dashboardDensity === 'compact'">
 					<button
-						v-tooltip="isPlaying ? formatMessage(messages.alreadyOpen) : null"
-						:disabled="isPlaying || loading"
+						v-tooltip="
+							formatMessage(isPlaying ? messages.launchAnother : commonMessages.playButton)
+						"
+						:disabled="loading"
 						@click="play"
 					>
 						<SpinnerIcon v-if="loading" class="animate-spin" />
 						<PlayIcon v-else aria-hidden="true" />
 						<span v-if="dashboardDensity !== 'compact'">
-							{{ formatMessage(commonMessages.playButton) }}
+							{{ formatMessage(isPlaying ? messages.launchAnother : commonMessages.playButton) }}
 						</span>
 					</button>
 				</ButtonStyled>
@@ -280,5 +281,4 @@ onUnmounted(() => {
 .instance-item-dashboard-compact > :last-child {
 	gap: 0.125rem;
 }
-
 </style>