From 59861adecebcf351cb84b413cef625e5457b97c9 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 30 Mar 2026 14:27:41 +0100
Subject: [PATCH 01/50] feat: start on shared console implementation into logs
 and overview pages

---
 apps/app-frontend/src/pages/instance/Logs.vue | 434 +-------------
 .../src/pages/hosting/manage/[id]/index.vue   | 550 +-----------------
 packages/assets/generated-icons.ts            | 219 +++----
 packages/assets/icons/wrap-text.svg           |   7 +
 .../ui/src/components/base/FilterPills.vue    |  55 ++
 packages/ui/src/components/base/index.ts      |   2 +
 packages/ui/src/composables/terminal.ts       |   4 +-
 packages/ui/src/layouts/index.ts              |   1 +
 .../components/ConsoleActionButtons.vue       |  51 ++
 .../console/components/ConsoleFilterPills.vue |  51 ++
 .../console/composables/console-filtering.ts  |  57 ++
 .../shared/console/composables/index.ts       |   2 +
 .../shared/console/composables/log-level.ts   |  14 +
 .../ui/src/layouts/shared/console/index.ts    |   3 +
 .../ui/src/layouts/shared/console/layout.vue  | 189 ++++++
 .../console/providers/console-manager.ts      |  23 +
 .../layouts/shared/console/providers/index.ts |   1 +
 .../ui/src/layouts/shared/console/types.ts    |   7 +
 18 files changed, 634 insertions(+), 1036 deletions(-)
 create mode 100644 packages/assets/icons/wrap-text.svg
 create mode 100644 packages/ui/src/components/base/FilterPills.vue
 create mode 100644 packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
 create mode 100644 packages/ui/src/layouts/shared/console/components/ConsoleFilterPills.vue
 create mode 100644 packages/ui/src/layouts/shared/console/composables/console-filtering.ts
 create mode 100644 packages/ui/src/layouts/shared/console/composables/index.ts
 create mode 100644 packages/ui/src/layouts/shared/console/composables/log-level.ts
 create mode 100644 packages/ui/src/layouts/shared/console/index.ts
 create mode 100644 packages/ui/src/layouts/shared/console/layout.vue
 create mode 100644 packages/ui/src/layouts/shared/console/providers/console-manager.ts
 create mode 100644 packages/ui/src/layouts/shared/console/providers/index.ts
 create mode 100644 packages/ui/src/layouts/shared/console/types.ts

diff --git a/apps/app-frontend/src/pages/instance/Logs.vue b/apps/app-frontend/src/pages/instance/Logs.vue
index 38fba56b0a..b0dbf971b4 100644
--- a/apps/app-frontend/src/pages/instance/Logs.vue
+++ b/apps/app-frontend/src/pages/instance/Logs.vue
@@ -1,115 +1,18 @@
 <template>
-	<Card class="log-card">
-		<div class="button-row">
-			<DropdownSelect
-				v-model="selectedLogIndex"
-				:default-value="0"
-				name="Log date"
-				:options="logs.map((_, index) => index)"
-				:display-name="(option) => logs[option]?.name"
-				:disabled="logs.length === 0"
-			/>
-			<div class="button-group">
-				<Button :disabled="!logs[selectedLogIndex]" @click="copyLog()">
-					<ClipboardCopyIcon v-if="!copied" />
-					<CheckIcon v-else />
-					{{ copied ? 'Copied' : 'Copy' }}
-				</Button>
-				<Button color="primary" :disabled="offline || !logs[selectedLogIndex]" @click="share">
-					<ShareIcon aria-hidden="true" />
-					Share
-				</Button>
-				<Button
-					v-if="logs[selectedLogIndex] && logs[selectedLogIndex].live === true"
-					@click="clearLiveLog()"
-				>
-					<TrashIcon aria-hidden="true" />
-					Clear
-				</Button>
-
-				<Button
-					v-else
-					:disabled="!logs[selectedLogIndex] || logs[selectedLogIndex].live === true"
-					color="danger"
-					@click="deleteLog()"
-				>
-					<TrashIcon aria-hidden="true" />
-					Delete
-				</Button>
-			</div>
-		</div>
-		<div class="button-row">
-			<StyledInput
-				id="text-filter"
-				v-model="searchFilter"
-				autocomplete="off"
-				:icon="SearchIcon"
-				type="search"
-				input-class="text-filter"
-				placeholder="Type to filter logs..."
-			/>
-			<div class="filter-group">
-				<Checkbox
-					v-for="level in levels"
-					:key="level.toLowerCase()"
-					v-model="levelFilters[level.toLowerCase()]"
-					class="filter-checkbox"
-				>
-					{{ level }}
-				</Checkbox>
-			</div>
-		</div>
-		<div class="log-text">
-			<RecycleScroller
-				v-slot="{ item }"
-				ref="logContainer"
-				class="scroller"
-				:items="displayProcessedLogs"
-				direction="vertical"
-				:item-size="20"
-				key-field="id"
-				buffer="200"
-			>
-				<div class="user no-wrap">
-					<span :style="{ color: item.prefixColor, 'font-weight': item.weight }">{{
-						item.prefix
-					}}</span>
-					<span :style="{ color: item.textColor }">{{ item.text }}</span>
-				</div>
-			</RecycleScroller>
-		</div>
-		<ShareModalWrapper
-			ref="shareModal"
-			header="Share Log"
-			share-title="Instance Log"
-			share-text="Check out this log from an instance on the Modrinth App"
-			:open-in-new-tab="false"
-			link
-		/>
-	</Card>
+	<div class="flex flex-col gap-4 h-full">
+		<ConsolePageLayout />
+	</div>
 </template>
 
 <script setup>
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
-
-import { CheckIcon, ClipboardCopyIcon, SearchIcon, ShareIcon, TrashIcon } from '@modrinth/assets'
-import {
-	Button,
-	Card,
-	Checkbox,
-	DropdownSelect,
-	injectNotificationManager,
-	StyledInput,
-} from '@modrinth/ui'
+import { ConsolePageLayout, provideConsoleManager } from '@modrinth/ui'
 import dayjs from 'dayjs'
 import isToday from 'dayjs/plugin/isToday'
 import isYesterday from 'dayjs/plugin/isYesterday'
-import { ofetch } from 'ofetch'
-import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { RecycleScroller } from 'vue-virtual-scroller'
 
-import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
+import { injectNotificationManager } from '@modrinth/ui'
 import { process_listener } from '@/helpers/events.js'
 import {
 	delete_logs_by_filename,
@@ -165,77 +68,8 @@ const emptyText = ['No live game detected.', 'Start your game to proceed.']
 const logs = ref([])
 await setLogs()
 
-const logsColored = true
-
 const selectedLogIndex = ref(0)
-const copied = ref(false)
-const logContainer = ref(null)
 const interval = ref(null)
-const userScrolled = ref(false)
-const isAutoScrolling = ref(false)
-const shareModal = ref(null)
-
-const levels = ['Comment', 'Error', 'Warn', 'Info', 'Debug', 'Trace']
-const levelFilters = ref({})
-levels.forEach((level) => {
-	levelFilters.value[level.toLowerCase()] = true
-})
-const searchFilter = ref('')
-
-function shouldDisplay(processedLine) {
-	if (!processedLine.level) {
-		return true
-	}
-
-	if (!levelFilters.value[processedLine.level.toLowerCase()]) {
-		return false
-	}
-	if (searchFilter.value !== '') {
-		if (!processedLine.text.toLowerCase().includes(searchFilter.value.toLowerCase())) {
-			return false
-		}
-	}
-	return true
-}
-
-// Selects from the processed logs which ones should be displayed (shouldDisplay)
-// In addition, splits each line by \n. Each split line is given the same properties as the original line
-const displayProcessedLogs = computed(() => {
-	return processedLogs.value.filter((l) => shouldDisplay(l))
-})
-
-const processedLogs = computed(() => {
-	// split based on newline and timestamp lookahead
-	// (not just newline because of multiline messages)
-	const splitPattern = /\n(?=(?:#|\[\d\d:\d\d:\d\d\]))/
-
-	const lines = logs.value[selectedLogIndex.value]?.stdout.split(splitPattern) || []
-	const processed = []
-	let id = 0
-	for (let i = 0; i < lines.length; i++) {
-		// Then split off of \n.
-		// Lines that are not the first have prefix = null
-		const text = getLineText(lines[i])
-		const prefix = getLinePrefix(lines[i])
-		const prefixColor = getLineColor(lines[i], true)
-		const textColor = getLineColor(lines[i], false)
-		const weight = getLineWeight(lines[i])
-		const level = getLineLevel(lines[i])
-		text.split('\n').forEach((line, index) => {
-			processed.push({
-				id: id,
-				text: line,
-				prefix: index === 0 ? prefix : null,
-				prefixColor: prefixColor,
-				textColor: textColor,
-				weight: weight,
-				level: level,
-			})
-			id += 1
-		})
-	}
-	return processed
-})
 
 async function getLiveStdLog() {
 	if (route.params.id) {
@@ -263,7 +97,6 @@ async function getLiveStdLog() {
 async function getLogs() {
 	return (await get_logs(props.instance.path, true).catch(handleError))
 		.filter(
-			// filter out latest_stdout.log or anything without .log in it
 			(log) =>
 				log.filename !== 'latest_stdout.log' &&
 				log.filename !== 'latest_stdout' &&
@@ -282,31 +115,32 @@ async function setLogs() {
 	logs.value = [liveStd, ...allLogs]
 }
 
-const copyLog = () => {
-	if (logs.value.length > 0 && logs.value[selectedLogIndex.value]) {
-		navigator.clipboard.writeText(logs.value[selectedLogIndex.value].stdout)
-		copied.value = true
-	}
-}
-
-const share = async () => {
-	if (logs.value.length > 0 && logs.value[selectedLogIndex.value]) {
-		const url = await ofetch('https://api.mclo.gs/1/log', {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/x-www-form-urlencoded',
-			},
-			body: `content=${encodeURIComponent(logs.value[selectedLogIndex.value].stdout)}`,
-		}).catch(handleError)
+const logLines = computed(() => {
+	const log = logs.value[selectedLogIndex.value]
+	return log?.stdout?.split('\n').filter(Boolean) ?? []
+})
 
-		shareModal.value.show(url.url)
-	}
-}
+const logSources = computed(() =>
+	logs.value.map((l, i) => ({
+		id: String(i),
+		name: l?.name ?? `Log ${i}`,
+		live: l?.live ?? false,
+	})),
+)
+
+provideConsoleManager({
+	logLines,
+	logSources,
+	activeLogSourceIndex: selectedLogIndex,
+	showCommandInput: false,
+	loading: ref(false),
+	onClear: () => {
+		currentLiveLog.value = ''
+	},
+	shareDisabled: computed(() => props.offline),
+})
 
 watch(selectedLogIndex, async (newIndex) => {
-	copied.value = false
-	userScrolled.value = false
-
 	if (logs.value.length > 1 && newIndex !== 0) {
 		logs.value[newIndex].stdout = 'Loading...'
 		logs.value[newIndex].stdout = await get_output_by_filename(
@@ -336,124 +170,9 @@ const deleteLog = async () => {
 	}
 }
 
-const clearLiveLog = async () => {
-	currentLiveLog.value = ''
-	// does not reset cursor
-}
-
-const isLineLevel = (text, level) => {
-	if ((text.includes('/INFO') || text.includes('[System] [CHAT]')) && level === 'info') {
-		return true
-	}
-
-	if (text.includes('/WARN') && level === 'warn') {
-		return true
-	}
-
-	if (text.includes('/DEBUG') && level === 'debug') {
-		return true
-	}
-
-	if (text.includes('/TRACE') && level === 'trace') {
-		return true
-	}
-
-	const errorTriggers = ['/ERROR', 'Exception:', ':?]', 'Error', '[thread', '	at']
-	if (level === 'error') {
-		for (const trigger of errorTriggers) {
-			if (text.includes(trigger)) return true
-		}
-	}
-
-	if (text.trim()[0] === '#' && level === 'comment') {
-		return true
-	}
-	return false
-}
-
-const getLineWeight = (text) => {
-	if (
-		!logsColored ||
-		isLineLevel(text, 'info') ||
-		isLineLevel(text, 'debug') ||
-		isLineLevel(text, 'trace')
-	) {
-		return 'normal'
-	}
-
-	if (isLineLevel(text, 'error') || isLineLevel(text, 'warn')) {
-		return 'bold'
-	}
-}
-
-const getLineLevel = (text) => {
-	for (const level of levels) {
-		if (isLineLevel(text, level.toLowerCase())) {
-			return level
-		}
-	}
-}
-
-const getLineColor = (text, prefix) => {
-	if (isLineLevel(text, 'comment')) {
-		return 'var(--color-green)'
-	}
-
-	if (!logsColored || text.includes('[System] [CHAT]')) {
-		return 'var(--color-white)'
-	}
-	if (
-		(isLineLevel(text, 'info') || isLineLevel(text, 'debug') || isLineLevel(text, 'trace')) &&
-		prefix
-	) {
-		return 'var(--color-blue)'
-	}
-	if (isLineLevel(text, 'warn')) {
-		return 'var(--color-orange)'
-	}
-	if (isLineLevel(text, 'error')) {
-		return 'var(--color-red)'
-	}
-}
-
-const getLinePrefix = (text) => {
-	if (text.includes(']:')) {
-		return text.split(']:')[0] + ']:'
-	}
-}
-
-const getLineText = (text) => {
-	if (text.includes(']:')) {
-		if (text.split(']:').length > 2) {
-			return text.split(']:').slice(1).join(']:')
-		}
-		return text.split(']:')[1]
-	} else {
-		return text
-	}
-}
-
-function handleUserScroll() {
-	if (!isAutoScrolling.value) {
-		userScrolled.value = true
-	}
-}
-
 interval.value = setInterval(async () => {
-	if (logs.value.length > 0) {
+	if (logs.value.length > 0 && selectedLogIndex.value === 0) {
 		logs.value[0] = await getLiveStdLog()
-		const scroll = logContainer.value.getScroll()
-
-		// Allow resetting of userScrolled if the user scrolls to the bottom
-		if (selectedLogIndex.value === 0) {
-			if (scroll.end >= logContainer.value.$el.scrollHeight - 10) userScrolled.value = false
-			if (!userScrolled.value) {
-				await nextTick()
-				isAutoScrolling.value = true
-				logContainer.value.scrollToItem(displayProcessedLogs.value.length - 1)
-				setTimeout(() => (isAutoScrolling.value = false), 50)
-			}
-		}
 	}
 }, 250)
 
@@ -466,106 +185,13 @@ const unlistenProcesses = await process_listener(async (e) => {
 	if (e.event === 'finished') {
 		currentLiveLog.value = ''
 		currentLiveLogCursor.value = 0
-		userScrolled.value = false
 		await setLogs()
 		selectedLogIndex.value = 1
 	}
 })
 
-onMounted(() => {
-	logContainer.value.$el.addEventListener('scroll', handleUserScroll)
-})
-
-onBeforeUnmount(() => {
-	logContainer.value.$el.removeEventListener('scroll', handleUserScroll)
-})
 onUnmounted(() => {
 	clearInterval(interval.value)
 	unlistenProcesses()
 })
 </script>
-
-<style scoped lang="scss">
-.log-card {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	height: 100vh;
-}
-
-.button-row {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	gap: 0.5rem;
-}
-
-.button-group {
-	display: flex;
-	flex-direction: row;
-	gap: 0.5rem;
-}
-
-.log-text {
-	width: 100%;
-	height: 100%;
-	font-family: var(--mono-font);
-	background-color: var(--color-accent-contrast);
-	color: var(--color-contrast);
-	border-radius: var(--radius-lg);
-	padding-top: 1.5rem;
-	overflow-x: auto; /* Enables horizontal scrolling */
-	overflow-y: hidden; /* Disables vertical scrolling on this wrapper */
-	white-space: nowrap; /* Keeps content on a single line */
-	white-space: normal;
-	color-scheme: dark;
-}
-
-.filter-checkbox {
-	margin-bottom: 0.3rem;
-	font-size: 1rem;
-
-	svg {
-		display: flex;
-		align-self: center;
-		justify-self: center;
-	}
-}
-
-.filter-group {
-	display: flex;
-	padding: 0.6rem;
-	flex-direction: row;
-	overflow: auto;
-	gap: 0.5rem;
-
-	&::-webkit-scrollbar-track,
-	&::-webkit-scrollbar-thumb {
-		border-radius: 10px;
-	}
-}
-
-:deep(.vue-recycle-scroller__item-wrapper) {
-	overflow: visible; /* Enables horizontal scrolling */
-}
-
-:deep(.vue-recycle-scroller) {
-	&::-webkit-scrollbar-corner {
-		background-color: var(--color-bg);
-		border-radius: 0 0 10px 0;
-	}
-}
-
-.scroller {
-	height: 100%;
-}
-
-.user {
-	height: 32%;
-	padding: 0 1.5rem;
-	display: flex;
-
-	align-items: center;
-	user-select: text;
-}
-</style>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/index.vue b/apps/frontend/src/pages/hosting/manage/[id]/index.vue
index 46e19ea119..2c5831939d 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/index.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/index.vue
@@ -60,90 +60,13 @@
 				:loading="!isConnected || isWsAuthIncorrect"
 			/>
 
-			<div
-				class="relative flex h-[700px] w-full flex-col gap-3 overflow-hidden rounded-2xl border border-divider bg-bg-raised p-4 transition-all duration-300 ease-in-out md:p-8"
-				:class="{ 'border-0': !isConnected || isWsAuthIncorrect }"
-			>
-				<div class="flex items-center justify-between">
-					<div class="flex items-center gap-4">
-						<h2 class="m-0 text-3xl font-extrabold text-contrast">Console</h2>
-						<PanelServerStatus v-if="isConnected && !isWsAuthIncorrect" :state="serverPowerState" />
-					</div>
+			<div class="flex h-[720px] flex-col gap-3">
+				<div class="flex items-center gap-4">
+					<h2 class="m-0 text-3xl font-extrabold text-contrast">Console</h2>
+					<PanelServerStatus v-if="isConnected && !isWsAuthIncorrect" :state="serverPowerState" />
 				</div>
 
-				<PanelTerminal :full-screen="fullScreen" :loading="!isConnected || isWsAuthIncorrect">
-					<div class="relative w-full px-4 pt-4">
-						<ul
-							v-if="suggestions.length && isConnected && !isWsAuthIncorrect"
-							id="command-suggestions"
-							ref="suggestionsList"
-							class="mt-1 max-h-60 w-full list-none overflow-auto rounded-md border border-divider bg-bg-raised p-0 shadow-lg"
-							role="listbox"
-						>
-							<li
-								v-for="(suggestion, index) in suggestions"
-								:id="'suggestion-' + index"
-								:key="index"
-								role="option"
-								:aria-selected="index === selectedSuggestionIndex"
-								:class="[
-									'cursor-pointer px-4 py-2',
-									index === selectedSuggestionIndex ? 'bg-bg-raised' : 'bg-bg',
-								]"
-								@click="selectSuggestion(index)"
-								@mousemove="() => (selectedSuggestionIndex = index)"
-							>
-								{{ suggestion }}
-							</li>
-						</ul>
-						<div class="relative flex items-center">
-							<span
-								v-if="bestSuggestion && isConnected && !isWsAuthIncorrect"
-								class="pointer-events-none absolute left-[26px] transform select-none text-gray-400"
-							>
-								<span class="ml-[23.5px] whitespace-pre">{{
-									' '.repeat(commandInput.length - 1)
-								}}</span>
-								<span> {{ bestSuggestion }} </span>
-								<button
-									class="text pointer-events-auto ml-2 cursor-pointer rounded-md border-none bg-white text-sm focus:outline-none dark:bg-highlight"
-									aria-label="Accept suggestion"
-									style="transform: translateY(-1px)"
-									@click="acceptSuggestion"
-								>
-									TAB
-								</button>
-							</span>
-							<div
-								class="pointer-events-none absolute left-0 top-0 flex h-full w-full items-center"
-							>
-								<TerminalSquareIcon class="ml-3 h-5 w-5" />
-							</div>
-							<input
-								v-if="isServerRunning && isConnected && !isWsAuthIncorrect"
-								v-model="commandInput"
-								type="text"
-								placeholder="Send a command"
-								class="w-full rounded-md !pl-10 pt-4 focus:border-none [&&]:border-[1px] [&&]:border-solid [&&]:border-bg-raised [&&]:bg-bg"
-								aria-autocomplete="list"
-								aria-controls="command-suggestions"
-								spellcheck="false"
-								:aria-activedescendant="'suggestion-' + selectedSuggestionIndex"
-								@keydown.tab.prevent="acceptSuggestion"
-								@keydown.down.prevent="selectNextSuggestion"
-								@keydown.up.prevent="selectPrevSuggestion"
-								@keydown.enter.prevent="sendCommand"
-							/>
-							<input
-								v-else
-								disabled
-								type="text"
-								placeholder="Send a command"
-								class="w-full rounded-md !pl-10 focus:border-none [&&]:border-[1px] [&&]:border-solid [&&]:border-bg-raised [&&]:bg-bg"
-							/>
-						</div>
-					</div>
-				</PanelTerminal>
+				<ConsolePageLayout />
 			</div>
 		</div>
 
@@ -161,18 +84,19 @@
 </template>
 
 <script setup lang="ts">
-import { TerminalSquareIcon } from '@modrinth/assets'
 import {
 	Admonition,
+	ConsolePageLayout,
 	injectModrinthClient,
 	injectModrinthServerContext,
+	provideConsoleManager,
 	useVIntl,
 } from '@modrinth/ui'
 import type { ServerState, Stats } from '@modrinth/utils'
 
 import PanelServerStatus from '~/components/ui/servers/PanelServerStatus.vue'
-import PanelTerminal from '~/components/ui/servers/PanelTerminal.vue'
 import ServerStats from '~/components/ui/servers/ServerStats.vue'
+import { useModrinthServersConsole } from '~/store/console.ts'
 
 type ServerProps = {
 	isConnected: boolean
@@ -191,6 +115,26 @@ const props = defineProps<ServerProps>()
 const { formatMessage } = useVIntl()
 const client = injectModrinthClient()
 const { server: serverData, serverId, busyReasons } = injectModrinthServerContext()
+const modrinthServersConsole = useModrinthServersConsole()
+
+provideConsoleManager({
+	logLines: modrinthServersConsole.output,
+	sendCommand: (cmd: string) => {
+		try {
+			client.archon.sockets.send(serverId, { event: 'command', cmd })
+		} catch (error) {
+			console.error('Error sending command:', error)
+		}
+	},
+	showCommandInput: computed(
+		() => props.isServerRunning && props.isConnected && !props.isWsAuthIncorrect,
+	),
+	loading: computed(() => !props.isConnected || props.isWsAuthIncorrect),
+	onClear: () => {
+		modrinthServersConsole.clear()
+	},
+	shareDisabled: computed(() => !props.isConnected),
+})
 
 const backupBusyReason = computed(() => {
 	const reason = busyReasons.value.find(
@@ -284,445 +228,7 @@ if (props.serverPowerState === 'crashed' && !props.powerStateDetails?.oom_killed
 	inspectError()
 }
 
-const DYNAMIC_ARG = Symbol('DYNAMIC_ARG')
-
-const commandTree: any = {
-	advancement: {
-		grant: {
-			[DYNAMIC_ARG]: {
-				everything: null,
-				only: {
-					[DYNAMIC_ARG]: null,
-				},
-				from: {
-					[DYNAMIC_ARG]: null,
-				},
-				through: {
-					[DYNAMIC_ARG]: null,
-				},
-				until: {
-					[DYNAMIC_ARG]: null,
-				},
-			},
-		},
-		revoke: {
-			[DYNAMIC_ARG]: {
-				everything: null,
-				only: {
-					[DYNAMIC_ARG]: null,
-				},
-				from: {
-					[DYNAMIC_ARG]: null,
-				},
-				through: {
-					[DYNAMIC_ARG]: null,
-				},
-				until: {
-					[DYNAMIC_ARG]: null,
-				},
-			},
-		},
-	},
-	ban: {
-		[DYNAMIC_ARG]: {
-			[DYNAMIC_ARG]: null,
-			duration: {
-				[DYNAMIC_ARG]: null,
-			},
-		},
-	},
-	'ban-ip': null,
-	banlist: {
-		ips: null,
-		players: null,
-		all: null,
-	},
-	bossbar: {
-		add: null,
-		get: null,
-		list: null,
-		remove: null,
-		set: null,
-	},
-	clear: {
-		[DYNAMIC_ARG]: {
-			[DYNAMIC_ARG]: {
-				[DYNAMIC_ARG]: null,
-				reason: null,
-			},
-		},
-	},
-	clone: null,
-	data: {
-		get: null,
-		merge: null,
-		modify: null,
-		remove: null,
-	},
-	datapack: {
-		disable: null,
-		enable: null,
-		list: null,
-		reload: null,
-	},
-	debug: {
-		start: null,
-		stop: null,
-		function: null,
-		memory: null,
-	},
-	defaultgamemode: {
-		survival: null,
-		creative: null,
-		adventure: null,
-		spectator: null,
-	},
-	deop: null,
-	difficulty: {
-		peaceful: null,
-		easy: null,
-		normal: null,
-		hard: null,
-	},
-	effect: {
-		give: {
-			[DYNAMIC_ARG]: {
-				[DYNAMIC_ARG]: {
-					[DYNAMIC_ARG]: {
-						[DYNAMIC_ARG]: {
-							true: null,
-							false: null,
-						},
-					},
-				},
-			},
-		},
-		clear: {
-			[DYNAMIC_ARG]: {
-				[DYNAMIC_ARG]: null,
-			},
-		},
-	},
-	enchant: null,
-	execute: null,
-	experience: {
-		add: null,
-		set: null,
-		query: null,
-	},
-	fill: null,
-	forceload: {
-		add: null,
-		remove: null,
-		query: null,
-	},
-	function: null,
-	gamemode: {
-		survival: {
-			[DYNAMIC_ARG]: null,
-		},
-		creative: {
-			[DYNAMIC_ARG]: null,
-		},
-		adventure: {
-			[DYNAMIC_ARG]: null,
-		},
-		spectator: {
-			[DYNAMIC_ARG]: null,
-		},
-	},
-	gamerule: null,
-	give: {
-		[DYNAMIC_ARG]: {
-			[DYNAMIC_ARG]: {
-				[DYNAMIC_ARG]: null,
-			},
-		},
-	},
-	help: null,
-	kick: null,
-	kill: {
-		[DYNAMIC_ARG]: null,
-	},
-	list: null,
-	locate: {
-		biome: null,
-		poi: null,
-		structure: null,
-	},
-	loot: {
-		give: null,
-		insert: null,
-		replace: null,
-		spawn: null,
-	},
-	me: null,
-	msg: null,
-	op: null,
-	pardon: null,
-	'pardon-ip': null,
-	particle: null,
-	playsound: null,
-	recipe: {
-		give: null,
-		take: null,
-	},
-	reload: null,
-	say: null,
-	schedule: {
-		function: null,
-		clear: null,
-	},
-	scoreboard: {
-		objectives: {
-			add: null,
-			remove: null,
-			setdisplay: null,
-			list: null,
-			modify: null,
-		},
-		players: {
-			add: null,
-			remove: null,
-			set: null,
-			get: null,
-			list: null,
-			enable: null,
-			operation: null,
-			reset: null,
-		},
-	},
-	seed: null,
-	setblock: null,
-	setidletimeout: null,
-	setworldspawn: null,
-	spawnpoint: null,
-	spectate: null,
-	spreadplayers: null,
-	stop: null,
-	stopsound: null,
-	summon: null,
-	tag: {
-		add: null,
-		list: null,
-		remove: null,
-	},
-	team: {
-		add: null,
-		empty: null,
-		join: null,
-		leave: null,
-		list: null,
-		modify: null,
-		remove: null,
-	},
-	teleport: {
-		[DYNAMIC_ARG]: {
-			[DYNAMIC_ARG]: {
-				[DYNAMIC_ARG]: {
-					[DYNAMIC_ARG]: null,
-				},
-			},
-		},
-	},
-	tp: {
-		[DYNAMIC_ARG]: {
-			[DYNAMIC_ARG]: {
-				[DYNAMIC_ARG]: null,
-			},
-		},
-	},
-	trigger: null,
-	weather: {
-		clear: {
-			[DYNAMIC_ARG]: null,
-		},
-		rain: {
-			[DYNAMIC_ARG]: null,
-		},
-		thunder: {
-			[DYNAMIC_ARG]: null,
-		},
-	},
-	whitelist: {
-		add: null,
-		list: null,
-		off: null,
-		on: null,
-		reload: null,
-		remove: null,
-	},
-	worldborder: {
-		add: null,
-		center: null,
-		damage: {
-			amount: null,
-			buffer: null,
-		},
-		get: null,
-		set: null,
-		warning: {
-			distance: null,
-			time: null,
-		},
-	},
-	xp: null,
-}
-
-const fullScreen = ref(false)
-const commandInput = ref('')
-const suggestions = ref<string[]>([])
-const selectedSuggestionIndex = ref(0)
-
-// const serverIP = computed(() => serverData.value?.net.ip ?? "");
-// const serverPort = computed(() => serverData.value?.net.port ?? 0);
-// const serverDomain = computed(() => serverData.value?.net.domain ?? "");
-
-const suggestionsList = ref<HTMLUListElement | null>(null)
-
 useHead({
 	title: `Overview - ${serverData.value?.name ?? 'Server'} - Modrinth`,
 })
-
-const bestSuggestion = computed(() => {
-	if (!suggestions.value.length) return ''
-	const inputTokens = commandInput.value.trim().split(/\s+/)
-	let lastInputToken = inputTokens[inputTokens.length - 1] || ''
-	if (inputTokens.length - 1 === 0 && lastInputToken.startsWith('/')) {
-		lastInputToken = lastInputToken.slice(1)
-	}
-	const selectedSuggestion = suggestions.value[selectedSuggestionIndex.value]
-	const suggestionTokens = selectedSuggestion.split(/\s+/)
-	const lastSuggestionToken = suggestionTokens[suggestionTokens.length - 1] || ''
-	if (lastSuggestionToken.toLowerCase().startsWith(lastInputToken.toLowerCase())) {
-		return lastSuggestionToken.slice(lastInputToken.length)
-	}
-	return ''
-})
-
-const getSuggestions = (input: string): string[] => {
-	const trimmedInput = input.trim()
-	const inputWithoutSlash = trimmedInput.startsWith('/') ? trimmedInput.slice(1) : trimmedInput
-	const tokens = inputWithoutSlash.split(/\s+/)
-	let currentLevel: any = commandTree
-
-	for (let i = 0; i < tokens.length; i++) {
-		const token = tokens[i].toLowerCase()
-		if (currentLevel?.[token]) {
-			currentLevel = currentLevel[token] as any
-		} else if (currentLevel?.[DYNAMIC_ARG]) {
-			currentLevel = currentLevel[DYNAMIC_ARG] as any
-		} else {
-			if (i === tokens.length - 1) {
-				break
-			}
-			currentLevel = null
-			break
-		}
-	}
-
-	if (currentLevel) {
-		const lastToken = tokens[tokens.length - 1]?.toLowerCase() || ''
-		const possibleKeys = Object.keys(currentLevel)
-		if (currentLevel[DYNAMIC_ARG]) {
-			possibleKeys.push('<arg>')
-		}
-		return possibleKeys
-			.filter((key) => key === '<arg>' || key.toLowerCase().startsWith(lastToken))
-			.filter((k) => k !== lastToken.trim())
-			.map((key) => {
-				if (key === '<arg>') {
-					return [...tokens.slice(0, -1), '<arg>'].join(' ')
-				}
-				const newTokens = [...tokens.slice(0, -1), key]
-				return newTokens.join(' ')
-			})
-	}
-
-	return []
-}
-
-const sendCommand = () => {
-	const cmd = commandInput.value.trim()
-	if (!props.isConnected || !cmd) return
-	try {
-		sendConsoleCommand(cmd)
-		commandInput.value = ''
-		suggestions.value = []
-		selectedSuggestionIndex.value = 0
-	} catch (error) {
-		console.error('Error sending command:', error)
-	}
-}
-
-const sendConsoleCommand = (cmd: string) => {
-	try {
-		client.archon.sockets.send(serverId, { event: 'command', cmd })
-	} catch (error) {
-		console.error('Error sending command:', error)
-	}
-}
-
-watch(
-	() => selectedSuggestionIndex.value,
-	(newVal) => {
-		if (suggestionsList.value) {
-			const selectedSuggestion = suggestionsList.value.querySelector(`#suggestion-${newVal}`)
-			if (selectedSuggestion) {
-				selectedSuggestion.scrollIntoView({ block: 'nearest' })
-			}
-		}
-	},
-)
-
-watch(
-	() => commandInput.value,
-	(newVal) => {
-		const trimmed = newVal.trim()
-		if (!trimmed) {
-			suggestions.value = []
-			return
-		}
-		suggestions.value = getSuggestions(newVal)
-		selectedSuggestionIndex.value = 0
-	},
-)
-
-const selectNextSuggestion = () => {
-	if (suggestions.value.length === 0) return
-	selectedSuggestionIndex.value = (selectedSuggestionIndex.value + 1) % suggestions.value.length
-}
-
-const selectPrevSuggestion = () => {
-	if (suggestions.value.length === 0) return
-	selectedSuggestionIndex.value =
-		(selectedSuggestionIndex.value - 1 + suggestions.value.length) % suggestions.value.length
-}
-
-const acceptSuggestion = () => {
-	if (suggestions.value.filter((s) => s !== '<arg>').length === 0) return
-	const selected = suggestions.value[selectedSuggestionIndex.value]
-	const currentTokens = commandInput.value.trim().split(' ')
-	const suggestionTokens = selected.split(/\s+/).filter(Boolean)
-
-	// check if last current token is in command tree if so just add to the end
-	if (currentTokens[currentTokens.length - 1].toLowerCase() === suggestionTokens[0].toLowerCase()) {
-		/* empty */
-	} else {
-		const offset = currentTokens.length - 1 === 0 && currentTokens[0].trim().startsWith('/') ? 1 : 0
-		commandInput.value =
-			commandInput.value +
-			suggestionTokens[suggestionTokens.length - 1].substring(
-				currentTokens[currentTokens.length - 1].length - offset,
-			) +
-			' '
-		suggestions.value = getSuggestions(commandInput.value)
-		selectedSuggestionIndex.value = 0
-	}
-}
-
-const selectSuggestion = (index: number) => {
-	selectedSuggestionIndex.value = index
-	acceptSuggestion()
-}
 </script>
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index ff66853f3d..637e93aad3 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -386,6 +386,7 @@ import _VersionIcon from './icons/version.svg?component'
 import _WikiIcon from './icons/wiki.svg?component'
 import _WindowIcon from './icons/window.svg?component'
 import _WorldIcon from './icons/world.svg?component'
+import _WrapTextIcon from './icons/wrap-text.svg?component'
 import _WrenchIcon from './icons/wrench.svg?component'
 import _XIcon from './icons/x.svg?component'
 import _XCircleIcon from './icons/x-circle.svg?component'
@@ -773,146 +774,148 @@ export const VersionIcon = _VersionIcon
 export const WikiIcon = _WikiIcon
 export const WindowIcon = _WindowIcon
 export const WorldIcon = _WorldIcon
+export const WrapTextIcon = _WrapTextIcon
 export const WrenchIcon = _WrenchIcon
 export const XIcon = _XIcon
 export const XCircleIcon = _XCircleIcon
 export const ZoomInIcon = _ZoomInIcon
 export const ZoomOutIcon = _ZoomOutIcon
 
+
 export const categoryIconMap: Record<string, IconComponent> = {
-	adventure: TagCategoryAdventureIcon,
-	atmosphere: TagCategoryAtmosphereIcon,
-	audio: TagCategoryAudioIcon,
-	backpack: TagCategoryBackpackIcon,
-	badge: TagCategoryBadgeIcon,
+	'adventure': TagCategoryAdventureIcon,
+	'atmosphere': TagCategoryAtmosphereIcon,
+	'audio': TagCategoryAudioIcon,
+	'backpack': TagCategoryBackpackIcon,
+	'badge': TagCategoryBadgeIcon,
 	'badge-check': TagCategoryBadgeCheckIcon,
 	'bed-double': TagCategoryBedDoubleIcon,
-	blocks: TagCategoryBlocksIcon,
-	bloom: TagCategoryBloomIcon,
+	'blocks': TagCategoryBlocksIcon,
+	'bloom': TagCategoryBloomIcon,
 	'building-2': TagCategoryBuilding2Icon,
-	camera: TagCategoryCameraIcon,
-	cartoon: TagCategoryCartoonIcon,
-	castle: TagCategoryCastleIcon,
-	challenging: TagCategoryChallengingIcon,
-	clapperboard: TagCategoryClapperboardIcon,
-	cloud: TagCategoryCloudIcon,
+	'camera': TagCategoryCameraIcon,
+	'cartoon': TagCategoryCartoonIcon,
+	'castle': TagCategoryCastleIcon,
+	'challenging': TagCategoryChallengingIcon,
+	'clapperboard': TagCategoryClapperboardIcon,
+	'cloud': TagCategoryCloudIcon,
 	'colored-lighting': TagCategoryColoredLightingIcon,
-	combat: TagCategoryCombatIcon,
-	compass: TagCategoryCompassIcon,
+	'combat': TagCategoryCombatIcon,
+	'compass': TagCategoryCompassIcon,
 	'core-shaders': TagCategoryCoreShadersIcon,
-	crown: TagCategoryCrownIcon,
-	cursed: TagCategoryCursedIcon,
-	decoration: TagCategoryDecorationIcon,
-	dices: TagCategoryDicesIcon,
-	economy: TagCategoryEconomyIcon,
-	entities: TagCategoryEntitiesIcon,
-	environment: TagCategoryEnvironmentIcon,
-	equipment: TagCategoryEquipmentIcon,
-	fantasy: TagCategoryFantasyIcon,
-	film: TagCategoryFilmIcon,
-	flag: TagCategoryFlagIcon,
-	foliage: TagCategoryFoliageIcon,
-	fonts: TagCategoryFontsIcon,
-	food: TagCategoryFoodIcon,
-	footprints: TagCategoryFootprintsIcon,
+	'crown': TagCategoryCrownIcon,
+	'cursed': TagCategoryCursedIcon,
+	'decoration': TagCategoryDecorationIcon,
+	'dices': TagCategoryDicesIcon,
+	'economy': TagCategoryEconomyIcon,
+	'entities': TagCategoryEntitiesIcon,
+	'environment': TagCategoryEnvironmentIcon,
+	'equipment': TagCategoryEquipmentIcon,
+	'fantasy': TagCategoryFantasyIcon,
+	'film': TagCategoryFilmIcon,
+	'flag': TagCategoryFlagIcon,
+	'foliage': TagCategoryFoliageIcon,
+	'fonts': TagCategoryFontsIcon,
+	'food': TagCategoryFoodIcon,
+	'footprints': TagCategoryFootprintsIcon,
 	'game-mechanics': TagCategoryGameMechanicsIcon,
 	'gamepad-2': TagCategoryGamepad2Icon,
-	gauge: TagCategoryGaugeIcon,
-	globe: TagCategoryGlobeIcon,
+	'gauge': TagCategoryGaugeIcon,
+	'globe': TagCategoryGlobeIcon,
 	'grid-3x3': TagCategoryGrid3x3Icon,
-	gui: TagCategoryGuiIcon,
-	handshake: TagCategoryHandshakeIcon,
+	'gui': TagCategoryGuiIcon,
+	'handshake': TagCategoryHandshakeIcon,
 	'heart-crack': TagCategoryHeartCrackIcon,
 	'heart-pulse': TagCategoryHeartPulseIcon,
-	high: TagCategoryHighIcon,
-	house: TagCategoryHouseIcon,
-	items: TagCategoryItemsIcon,
+	'high': TagCategoryHighIcon,
+	'house': TagCategoryHouseIcon,
+	'items': TagCategoryItemsIcon,
 	'kitchen-sink': TagCategoryKitchenSinkIcon,
-	library: TagCategoryLibraryIcon,
-	lightweight: TagCategoryLightweightIcon,
-	locale: TagCategoryLocaleIcon,
-	lock: TagCategoryLockIcon,
-	low: TagCategoryLowIcon,
-	magic: TagCategoryMagicIcon,
-	management: TagCategoryManagementIcon,
+	'library': TagCategoryLibraryIcon,
+	'lightweight': TagCategoryLightweightIcon,
+	'locale': TagCategoryLocaleIcon,
+	'lock': TagCategoryLockIcon,
+	'low': TagCategoryLowIcon,
+	'magic': TagCategoryMagicIcon,
+	'management': TagCategoryManagementIcon,
 	'map-pinned': TagCategoryMapPinnedIcon,
-	medium: TagCategoryMediumIcon,
-	minigame: TagCategoryMinigameIcon,
-	mobs: TagCategoryMobsIcon,
-	modded: TagCategoryModdedIcon,
-	models: TagCategoryModelsIcon,
-	multiplayer: TagCategoryMultiplayerIcon,
-	network: TagCategoryNetworkIcon,
-	optimization: TagCategoryOptimizationIcon,
-	palette: TagCategoryPaletteIcon,
+	'medium': TagCategoryMediumIcon,
+	'minigame': TagCategoryMinigameIcon,
+	'mobs': TagCategoryMobsIcon,
+	'modded': TagCategoryModdedIcon,
+	'models': TagCategoryModelsIcon,
+	'multiplayer': TagCategoryMultiplayerIcon,
+	'network': TagCategoryNetworkIcon,
+	'optimization': TagCategoryOptimizationIcon,
+	'palette': TagCategoryPaletteIcon,
 	'path-tracing': TagCategoryPathTracingIcon,
 	'paw-print': TagCategoryPawPrintIcon,
-	pbr: TagCategoryPbrIcon,
-	pickaxe: TagCategoryPickaxeIcon,
-	potato: TagCategoryPotatoIcon,
-	quests: TagCategoryQuestsIcon,
-	realistic: TagCategoryRealisticIcon,
-	reflections: TagCategoryReflectionsIcon,
+	'pbr': TagCategoryPbrIcon,
+	'pickaxe': TagCategoryPickaxeIcon,
+	'potato': TagCategoryPotatoIcon,
+	'quests': TagCategoryQuestsIcon,
+	'realistic': TagCategoryRealisticIcon,
+	'reflections': TagCategoryReflectionsIcon,
 	'refresh-ccw': TagCategoryRefreshCcwIcon,
-	screenshot: TagCategoryScreenshotIcon,
+	'screenshot': TagCategoryScreenshotIcon,
 	'scroll-text': TagCategoryScrollTextIcon,
 	'semi-realistic': TagCategorySemiRealisticIcon,
-	shadows: TagCategoryShadowsIcon,
-	shield: TagCategoryShieldIcon,
-	simplistic: TagCategorySimplisticIcon,
-	skull: TagCategorySkullIcon,
-	social: TagCategorySocialIcon,
-	square: TagCategorySquareIcon,
-	storage: TagCategoryStorageIcon,
-	sword: TagCategorySwordIcon,
-	swords: TagCategorySwordsIcon,
-	target: TagCategoryTargetIcon,
-	technology: TagCategoryTechnologyIcon,
-	terminal: TagCategoryTerminalIcon,
-	theater: TagCategoryTheaterIcon,
-	themed: TagCategoryThemedIcon,
-	transportation: TagCategoryTransportationIcon,
+	'shadows': TagCategoryShadowsIcon,
+	'shield': TagCategoryShieldIcon,
+	'simplistic': TagCategorySimplisticIcon,
+	'skull': TagCategorySkullIcon,
+	'social': TagCategorySocialIcon,
+	'square': TagCategorySquareIcon,
+	'storage': TagCategoryStorageIcon,
+	'sword': TagCategorySwordIcon,
+	'swords': TagCategorySwordsIcon,
+	'target': TagCategoryTargetIcon,
+	'technology': TagCategoryTechnologyIcon,
+	'terminal': TagCategoryTerminalIcon,
+	'theater': TagCategoryTheaterIcon,
+	'themed': TagCategoryThemedIcon,
+	'transportation': TagCategoryTransportationIcon,
 	'tree-pine': TagCategoryTreePineIcon,
-	trophy: TagCategoryTrophyIcon,
-	tweaks: TagCategoryTweaksIcon,
-	users: TagCategoryUsersIcon,
-	utility: TagCategoryUtilityIcon,
+	'trophy': TagCategoryTrophyIcon,
+	'tweaks': TagCategoryTweaksIcon,
+	'users': TagCategoryUsersIcon,
+	'utility': TagCategoryUtilityIcon,
 	'vanilla-like': TagCategoryVanillaLikeIcon,
 	'wand-sparkles': TagCategoryWandSparklesIcon,
 	'wifi-off': TagCategoryWifiOffIcon,
-	worldgen: TagCategoryWorldgenIcon,
-	zap: TagCategoryZapIcon,
+	'worldgen': TagCategoryWorldgenIcon,
+	'zap': TagCategoryZapIcon,
 }
 
 export const loaderIconMap: Record<string, IconComponent> = {
-	babric: TagLoaderBabricIcon,
+	'babric': TagLoaderBabricIcon,
 	'bta-babric': TagLoaderBtaBabricIcon,
-	bukkit: TagLoaderBukkitIcon,
-	bungeecord: TagLoaderBungeecordIcon,
-	canvas: TagLoaderCanvasIcon,
-	datapack: TagLoaderDatapackIcon,
-	fabric: TagLoaderFabricIcon,
-	folia: TagLoaderFoliaIcon,
-	forge: TagLoaderForgeIcon,
-	geyser: TagLoaderGeyserIcon,
-	iris: TagLoaderIrisIcon,
+	'bukkit': TagLoaderBukkitIcon,
+	'bungeecord': TagLoaderBungeecordIcon,
+	'canvas': TagLoaderCanvasIcon,
+	'datapack': TagLoaderDatapackIcon,
+	'fabric': TagLoaderFabricIcon,
+	'folia': TagLoaderFoliaIcon,
+	'forge': TagLoaderForgeIcon,
+	'geyser': TagLoaderGeyserIcon,
+	'iris': TagLoaderIrisIcon,
 	'java-agent': TagLoaderJavaAgentIcon,
 	'legacy-fabric': TagLoaderLegacyFabricIcon,
-	liteloader: TagLoaderLiteloaderIcon,
-	minecraft: TagLoaderMinecraftIcon,
-	modloader: TagLoaderModloaderIcon,
-	mrpack: TagLoaderMrpackIcon,
-	neoforge: TagLoaderNeoforgeIcon,
-	nilloader: TagLoaderNilloaderIcon,
-	optifine: TagLoaderOptifineIcon,
-	ornithe: TagLoaderOrnitheIcon,
-	paper: TagLoaderPaperIcon,
-	purpur: TagLoaderPurpurIcon,
-	quilt: TagLoaderQuiltIcon,
-	rift: TagLoaderRiftIcon,
-	spigot: TagLoaderSpigotIcon,
-	sponge: TagLoaderSpongeIcon,
-	vanilla: TagLoaderVanillaIcon,
-	velocity: TagLoaderVelocityIcon,
-	waterfall: TagLoaderWaterfallIcon,
+	'liteloader': TagLoaderLiteloaderIcon,
+	'minecraft': TagLoaderMinecraftIcon,
+	'modloader': TagLoaderModloaderIcon,
+	'mrpack': TagLoaderMrpackIcon,
+	'neoforge': TagLoaderNeoforgeIcon,
+	'nilloader': TagLoaderNilloaderIcon,
+	'optifine': TagLoaderOptifineIcon,
+	'ornithe': TagLoaderOrnitheIcon,
+	'paper': TagLoaderPaperIcon,
+	'purpur': TagLoaderPurpurIcon,
+	'quilt': TagLoaderQuiltIcon,
+	'rift': TagLoaderRiftIcon,
+	'spigot': TagLoaderSpigotIcon,
+	'sponge': TagLoaderSpongeIcon,
+	'vanilla': TagLoaderVanillaIcon,
+	'velocity': TagLoaderVelocityIcon,
+	'waterfall': TagLoaderWaterfallIcon,
 }
diff --git a/packages/assets/icons/wrap-text.svg b/packages/assets/icons/wrap-text.svg
new file mode 100644
index 0000000000..ed9eb6b325
--- /dev/null
+++ b/packages/assets/icons/wrap-text.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+	stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-text-wrap-icon lucide-text-wrap">
+	<path d="m16 16-3 3 3 3" />
+	<path d="M3 12h14.5a1 1 0 0 1 0 7H13" />
+	<path d="M3 19h6" />
+	<path d="M3 5h18" />
+</svg>
diff --git a/packages/ui/src/components/base/FilterPills.vue b/packages/ui/src/components/base/FilterPills.vue
new file mode 100644
index 0000000000..921721d3ff
--- /dev/null
+++ b/packages/ui/src/components/base/FilterPills.vue
@@ -0,0 +1,55 @@
+<template>
+	<div class="flex flex-wrap items-center gap-1.5">
+		<FilterIcon class="size-5 text-secondary" />
+		<button
+			:class="pillClass(modelValue.length === 0)"
+			:aria-pressed="modelValue.length === 0"
+			@click="modelValue = []"
+		>
+			<slot name="all">
+				All
+			</slot>
+		</button>
+		<button
+			v-for="option in options"
+			:key="option.id"
+			:class="pillClass(modelValue.includes(option.id))"
+			:aria-pressed="modelValue.includes(option.id)"
+			@click="toggle(option.id)"
+		>
+			{{ option.label }}
+		</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { FilterIcon } from '@modrinth/assets'
+
+export interface FilterPillOption {
+	id: string
+	label: string
+}
+
+const modelValue = defineModel<string[]>({ required: true })
+
+defineProps<{
+	options: FilterPillOption[]
+}>()
+
+function pillClass(active: boolean) {
+	return [
+		'cursor-pointer rounded-full border border-solid px-3 py-1.5 text-base font-semibold leading-5 transition-all duration-100 active:scale-[0.97]',
+		active
+			? 'border-green bg-brand-highlight text-brand'
+			: 'border-surface-5 bg-surface-4 text-primary hover:bg-surface-5',
+	]
+}
+
+function toggle(id: string) {
+	if (modelValue.value.includes(id)) {
+		modelValue.value = modelValue.value.filter((f) => f !== id)
+	} else {
+		modelValue.value = [...modelValue.value, id]
+	}
+}
+</script>
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 4b72a2f5e7..0f9b4820a9 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -29,6 +29,8 @@ export { default as ErrorInformationCard } from './ErrorInformationCard.vue'
 export { default as FileInput } from './FileInput.vue'
 export type { FilterBarOption } from './FilterBar.vue'
 export { default as FilterBar } from './FilterBar.vue'
+export type { FilterPillOption } from './FilterPills.vue'
+export { default as FilterPills } from './FilterPills.vue'
 export { default as FloatingActionBar } from './FloatingActionBar.vue'
 export { default as FloatingPanel } from './FloatingPanel.vue'
 export { default as FormattedTag } from './FormattedTag.vue'
diff --git a/packages/ui/src/composables/terminal.ts b/packages/ui/src/composables/terminal.ts
index ddfd50240e..139ae66835 100644
--- a/packages/ui/src/composables/terminal.ts
+++ b/packages/ui/src/composables/terminal.ts
@@ -126,7 +126,7 @@ export function useTerminal(options: UseTerminalOptions): UseTerminalReturn {
 		if (!fa || !term) return
 		const dims = fa.proposeDimensions()
 		if (dims) {
-			term.resize(dims.cols, dims.rows + 1)
+			term.resize(dims.cols, dims.rows)
 		}
 	}
 
@@ -183,7 +183,7 @@ export function useTerminal(options: UseTerminalOptions): UseTerminalReturn {
 		await nextTick()
 		const dims = fit.proposeDimensions()
 		if (dims) {
-			term.resize(dims.cols, dims.rows + 1)
+			term.resize(dims.cols, dims.rows)
 		}
 
 		term.options.disableStdin = true
diff --git a/packages/ui/src/layouts/index.ts b/packages/ui/src/layouts/index.ts
index 084ab4a7c2..033f63c409 100644
--- a/packages/ui/src/layouts/index.ts
+++ b/packages/ui/src/layouts/index.ts
@@ -1,3 +1,4 @@
+export * from './shared/console'
 export * from './shared/content-tab'
 export * from './shared/files-tab'
 export * from './shared/installation-settings'
diff --git a/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue b/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
new file mode 100644
index 0000000000..33820be8d2
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
@@ -0,0 +1,51 @@
+<template>
+	<div class="flex items-center gap-0.5">
+		<ButtonStyled type="transparent" circular>
+			<button @click="emit('clear')">
+				<XIcon />
+				Clear
+			</button>
+		</ButtonStyled>
+		<ButtonStyled type="transparent" circular>
+			<button @click="handleCopy">
+				<CopyIcon />
+				{{ copyLabel }}
+			</button>
+		</ButtonStyled>
+		<ButtonStyled type="transparent" circular>
+			<button :disabled="shareDisabled" @click="emit('share')">
+				<ShareIcon />
+				Share
+			</button>
+		</ButtonStyled>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { CopyIcon, ShareIcon, XIcon } from '@modrinth/assets'
+import { ref } from 'vue'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+
+defineProps<{
+	shareDisabled?: boolean
+}>()
+
+const emit = defineEmits<{
+	clear: []
+	copy: []
+	share: []
+}>()
+
+const copyLabel = ref('Copy')
+let copyTimeout: ReturnType<typeof setTimeout> | null = null
+
+function handleCopy() {
+	emit('copy')
+	copyLabel.value = 'Copied!'
+	if (copyTimeout) clearTimeout(copyTimeout)
+	copyTimeout = setTimeout(() => {
+		copyLabel.value = 'Copy'
+	}, 2000)
+}
+</script>
diff --git a/packages/ui/src/layouts/shared/console/components/ConsoleFilterPills.vue b/packages/ui/src/layouts/shared/console/components/ConsoleFilterPills.vue
new file mode 100644
index 0000000000..a01c058e8b
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/components/ConsoleFilterPills.vue
@@ -0,0 +1,51 @@
+<template>
+	<FilterPills v-model="selectedFilters" :options="pillOptions">
+		<template #all>
+			All
+		</template>
+	</FilterPills>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import FilterPills from '#ui/components/base/FilterPills.vue'
+
+import type { LogLevel } from '../types'
+
+type FilterValue = LogLevel | 'all'
+
+const LOG_LEVEL_OPTIONS: Array<{ id: LogLevel; label: string }> = [
+	{ id: 'error', label: 'Error' },
+	{ id: 'warn', label: 'Warn' },
+	{ id: 'info', label: 'Info' },
+	{ id: 'debug', label: 'Debug' },
+	{ id: 'trace', label: 'Trace' },
+]
+
+const modelValue = defineModel<Set<FilterValue>>({ required: true })
+
+const emit = defineEmits<{
+	toggle: [value: FilterValue]
+}>()
+
+const pillOptions = LOG_LEVEL_OPTIONS
+
+const selectedFilters = computed({
+	get() {
+		if (modelValue.value.has('all')) return []
+		return [...modelValue.value] as string[]
+	},
+	set(ids: string[]) {
+		if (ids.length === 0) {
+			emit('toggle', 'all')
+		} else {
+			const current = selectedFilters.value
+			const added = ids.find((id) => !current.includes(id))
+			const removed = current.find((id) => !ids.includes(id))
+			if (added) emit('toggle', added as FilterValue)
+			if (removed) emit('toggle', removed as FilterValue)
+		}
+	},
+})
+</script>
diff --git a/packages/ui/src/layouts/shared/console/composables/console-filtering.ts b/packages/ui/src/layouts/shared/console/composables/console-filtering.ts
new file mode 100644
index 0000000000..94e52b0170
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/composables/console-filtering.ts
@@ -0,0 +1,57 @@
+import type { Terminal } from '@xterm/xterm'
+import { ref } from 'vue'
+import type { LogLevel } from '../types'
+import { detectLogLevel } from './log-level'
+
+export type FilterPredicate = (lineText: string) => boolean
+
+export function useConsoleFilters() {
+	const activeFilters = ref<Set<LogLevel | 'all'>>(new Set(['all']))
+
+	function toggleFilter(level: LogLevel | 'all') {
+		const next = new Set(activeFilters.value)
+		if (level === 'all') {
+			next.clear()
+			next.add('all')
+		} else {
+			next.delete('all')
+			if (next.has(level)) {
+				next.delete(level)
+			} else {
+				next.add(level)
+			}
+			if (next.size === 0) {
+				next.add('all')
+			}
+		}
+		activeFilters.value = next
+	}
+
+	function buildFilterPredicate(): FilterPredicate | null {
+		if (activeFilters.value.has('all')) return null
+		const allowed = activeFilters.value
+		return (line: string) => {
+			const level = detectLogLevel(line)
+			if (level === null) return true
+			return allowed.has(level)
+		}
+	}
+
+	return { activeFilters, toggleFilter, buildFilterPredicate }
+}
+
+export function rewriteTerminal(
+	terminal: Terminal,
+	allLines: string[],
+	predicate: FilterPredicate | null,
+) {
+	terminal.clear()
+	terminal.write('\x1b[?25l')
+
+	const filtered = predicate ? allLines.filter(predicate) : allLines
+	if (filtered.length === 0) return
+
+	terminal.write('\x1b[?2026h')
+	terminal.write(filtered.join('\r\n'))
+	terminal.write('\x1b[?2026l')
+}
diff --git a/packages/ui/src/layouts/shared/console/composables/index.ts b/packages/ui/src/layouts/shared/console/composables/index.ts
new file mode 100644
index 0000000000..da04005b36
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/composables/index.ts
@@ -0,0 +1,2 @@
+export { detectLogLevel } from './log-level'
+export { useConsoleFilters, rewriteTerminal, type FilterPredicate } from './console-filtering'
diff --git a/packages/ui/src/layouts/shared/console/composables/log-level.ts b/packages/ui/src/layouts/shared/console/composables/log-level.ts
new file mode 100644
index 0000000000..ef93a5ee64
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/composables/log-level.ts
@@ -0,0 +1,14 @@
+import type { LogLevel } from '../types'
+
+const ERROR_TRIGGERS = ['/ERROR', 'Exception:', ':?]', 'Error', '[thread', '\tat']
+
+export function detectLogLevel(lineText: string): LogLevel | null {
+	if (lineText.includes('/INFO') || lineText.includes('[System] [CHAT]')) return 'info'
+	if (lineText.includes('/WARN')) return 'warn'
+	if (lineText.includes('/DEBUG')) return 'debug'
+	if (lineText.includes('/TRACE')) return 'trace'
+	for (const trigger of ERROR_TRIGGERS) {
+		if (lineText.includes(trigger)) return 'error'
+	}
+	return null
+}
diff --git a/packages/ui/src/layouts/shared/console/index.ts b/packages/ui/src/layouts/shared/console/index.ts
new file mode 100644
index 0000000000..8739d8089b
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/index.ts
@@ -0,0 +1,3 @@
+export { default as ConsolePageLayout } from './layout.vue'
+export * from './providers'
+export * from './types'
diff --git a/packages/ui/src/layouts/shared/console/layout.vue b/packages/ui/src/layouts/shared/console/layout.vue
new file mode 100644
index 0000000000..8d34431e57
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/layout.vue
@@ -0,0 +1,189 @@
+<template>
+	<div class="flex min-h-0 flex-1 flex-col gap-4">
+		<div class="flex items-center gap-2">
+			<StyledInput
+				v-model="searchQuery"
+				:icon="SearchIcon"
+				placeholder="Search logs"
+				wrapper-class="flex-1"
+				input-class="!h-10"
+				clearable
+			/>
+			<DropdownSelect
+				v-if="ctx.logSources?.value && ctx.activeLogSourceIndex"
+				:model-value="ctx.logSources.value[ctx.activeLogSourceIndex.value]?.name"
+				:options="ctx.logSources.value.map((s) => s.name)"
+				name="log-source"
+				class="w-[220px]"
+				@update:model-value="handleLogSourceChange"
+			/>
+			<ButtonStyled circular :type="wrapEnabled ? 'highlight' : 'standard'" color="brand">
+				<button aria-label="Toggle word wrap" @click="wrapEnabled = !wrapEnabled">
+					<WrapTextIcon />
+				</button>
+			</ButtonStyled>
+		</div>
+
+		<div class="flex items-center justify-between">
+			<ConsoleFilterPills v-model="activeFilters" @toggle="handleFilterToggle" />
+			<ConsoleActionButtons
+				:share-disabled="resolvedShareDisabled"
+				@clear="handleClear"
+				@copy="handleCopy"
+				@share="handleShare"
+			/>
+		</div>
+
+		<BaseTerminal
+			ref="terminalRef"
+			class="min-h-0 flex-1"
+			:show-input="resolvedShowInput"
+			@command="handleCommand"
+			@ready="handleTerminalReady"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { SearchIcon, WrapTextIcon } from '@modrinth/assets'
+import type { Terminal } from '@xterm/xterm'
+import { computed, isRef, ref, watch } from 'vue'
+
+import BaseTerminal from '#ui/components/base/BaseTerminal.vue'
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import DropdownSelect from '#ui/components/base/DropdownSelect.vue'
+import StyledInput from '#ui/components/base/StyledInput.vue'
+
+import ConsoleActionButtons from './components/ConsoleActionButtons.vue'
+import ConsoleFilterPills from './components/ConsoleFilterPills.vue'
+import { useConsoleFilters, rewriteTerminal } from './composables'
+import { injectConsoleManager } from './providers'
+import type { LogLevel } from './types'
+
+const ctx = injectConsoleManager()
+
+const terminalRef = ref<InstanceType<typeof BaseTerminal> | null>(null)
+const searchQuery = ref('')
+const wrapEnabled = ref(false)
+const { activeFilters, toggleFilter, buildFilterPredicate } = useConsoleFilters()
+
+let lastWrittenIndex = 0
+let searchDebounce: ReturnType<typeof setTimeout> | null = null
+
+const resolvedShowInput = computed(() => {
+	const v = ctx.showCommandInput
+	if (v === undefined) return false
+	if (typeof v === 'boolean') return v
+	return isRef(v) ? v.value : v
+})
+
+const resolvedShareDisabled = computed(() => {
+	const v = ctx.shareDisabled
+	if (!v) return false
+	return isRef(v) ? v.value : v
+})
+
+function handleTerminalReady(_terminal: Terminal) {
+	writeAllLines()
+}
+
+function handleFilterToggle(value: LogLevel | 'all') {
+	toggleFilter(value)
+	rewriteFiltered()
+}
+
+function rewriteFiltered() {
+	const term = terminalRef.value?.terminal
+	if (!term) return
+	const predicate = buildFilterPredicate()
+	rewriteTerminal(term, ctx.logLines.value, predicate)
+	lastWrittenIndex = ctx.logLines.value.length
+}
+
+function writeAllLines() {
+	const term = terminalRef.value?.terminal
+	if (!term) return
+	const predicate = buildFilterPredicate()
+	rewriteTerminal(term, ctx.logLines.value, predicate)
+	lastWrittenIndex = ctx.logLines.value.length
+}
+
+watch(
+	() => ctx.logLines.value,
+	(lines, oldLines) => {
+		const term = terminalRef.value?.terminal
+		if (!term) return
+
+		if (lines !== oldLines || lines.length < lastWrittenIndex) {
+			rewriteFiltered()
+			return
+		}
+
+		const predicate = buildFilterPredicate()
+		for (let i = lastWrittenIndex; i < lines.length; i++) {
+			if (!predicate || predicate(lines[i])) {
+				terminalRef.value?.writeln(lines[i])
+			}
+		}
+		lastWrittenIndex = lines.length
+	},
+	{ deep: true },
+)
+
+watch(searchQuery, (query) => {
+	if (searchDebounce) clearTimeout(searchDebounce)
+	searchDebounce = setTimeout(() => {
+		const addon = terminalRef.value?.searchAddon
+		if (!addon) return
+		if (query) {
+			addon.findNext(query, { decorations: { activeMatchColorOverviewRuler: '#ffffff' } })
+		} else {
+			addon.clearDecorations()
+		}
+	}, 200)
+})
+
+function handleCommand(cmd: string) {
+	ctx.sendCommand?.(cmd)
+}
+
+function handleClear() {
+	terminalRef.value?.clear()
+	lastWrittenIndex = 0
+	ctx.onClear?.()
+}
+
+async function handleCopy() {
+	const predicate = buildFilterPredicate()
+	const lines = predicate ? ctx.logLines.value.filter(predicate) : ctx.logLines.value
+	await navigator.clipboard.writeText(lines.join('\n'))
+}
+
+async function handleShare() {
+	const predicate = buildFilterPredicate()
+	const lines = predicate ? ctx.logLines.value.filter(predicate) : ctx.logLines.value
+	const content = lines.join('\n')
+
+	try {
+		const res = await fetch('https://api.mclo.gs/1/log', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+			body: new URLSearchParams({ content }),
+		})
+		const data = await res.json()
+		if (data.url) {
+			window.open(data.url, '_blank')
+		}
+	} catch (err) {
+		console.error('Failed to share logs:', err)
+	}
+}
+
+function handleLogSourceChange(name: string) {
+	if (!ctx.logSources?.value || !ctx.activeLogSourceIndex) return
+	const idx = ctx.logSources.value.findIndex((s) => s.name === name)
+	if (idx >= 0) {
+		ctx.activeLogSourceIndex.value = idx
+	}
+}
+</script>
diff --git a/packages/ui/src/layouts/shared/console/providers/console-manager.ts b/packages/ui/src/layouts/shared/console/providers/console-manager.ts
new file mode 100644
index 0000000000..3bf93b5f66
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/providers/console-manager.ts
@@ -0,0 +1,23 @@
+import type { ComputedRef, Ref } from 'vue'
+import { createContext } from '#ui/providers/create-context'
+import type { LogSource } from '../types'
+
+export interface ConsoleManagerContext {
+	logLines: Ref<string[]>
+
+	logSources?: ComputedRef<LogSource[]>
+	activeLogSourceIndex?: Ref<number>
+
+	sendCommand?: (cmd: string) => void
+	showCommandInput?: boolean | Ref<boolean> | ComputedRef<boolean>
+
+	loading?: Ref<boolean> | ComputedRef<boolean>
+
+	onClear?: () => void
+	onDelete?: () => Promise<void>
+
+	shareDisabled?: Ref<boolean> | ComputedRef<boolean>
+}
+
+export const [injectConsoleManager, provideConsoleManager] =
+	createContext<ConsoleManagerContext>('ConsolePageLayout', 'consoleManagerContext')
diff --git a/packages/ui/src/layouts/shared/console/providers/index.ts b/packages/ui/src/layouts/shared/console/providers/index.ts
new file mode 100644
index 0000000000..b9e41b2fbe
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/providers/index.ts
@@ -0,0 +1 @@
+export * from './console-manager'
diff --git a/packages/ui/src/layouts/shared/console/types.ts b/packages/ui/src/layouts/shared/console/types.ts
new file mode 100644
index 0000000000..665e730972
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/types.ts
@@ -0,0 +1,7 @@
+export type LogLevel = 'error' | 'warn' | 'info' | 'debug' | 'trace'
+
+export interface LogSource {
+	id: string
+	name: string
+	live: boolean
+}

From 7eff1660289d7999911984a206743e3af22fdd5d Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 1 Apr 2026 14:52:56 +0200
Subject: [PATCH 02/50] fix: terminal gap issues

---
 .../src/pages/hosting/manage/[id]/index.vue   |  6 ++--
 .../ui/src/components/base/BaseTerminal.vue   | 31 +++++++++++++------
 packages/ui/src/composables/terminal.ts       |  2 +-
 .../ui/src/layouts/shared/console/layout.vue  |  4 +--
 4 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/apps/frontend/src/pages/hosting/manage/[id]/index.vue b/apps/frontend/src/pages/hosting/manage/[id]/index.vue
index 2c5831939d..261ac2a68a 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/index.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/index.vue
@@ -60,7 +60,7 @@
 				:loading="!isConnected || isWsAuthIncorrect"
 			/>
 
-			<div class="flex h-[720px] flex-col gap-3">
+			<div class="flex h-[700px] flex-col gap-3">
 				<div class="flex items-center gap-4">
 					<h2 class="m-0 text-3xl font-extrabold text-contrast">Console</h2>
 					<PanelServerStatus v-if="isConnected && !isWsAuthIncorrect" :state="serverPowerState" />
@@ -126,9 +126,7 @@ provideConsoleManager({
 			console.error('Error sending command:', error)
 		}
 	},
-	showCommandInput: computed(
-		() => props.isServerRunning && props.isConnected && !props.isWsAuthIncorrect,
-	),
+	showCommandInput: true,
 	loading: computed(() => !props.isConnected || props.isWsAuthIncorrect),
 	onClear: () => {
 		modrinthServersConsole.clear()
diff --git a/packages/ui/src/components/base/BaseTerminal.vue b/packages/ui/src/components/base/BaseTerminal.vue
index 2f30e0c8ef..91f475a47f 100644
--- a/packages/ui/src/components/base/BaseTerminal.vue
+++ b/packages/ui/src/components/base/BaseTerminal.vue
@@ -1,8 +1,9 @@
 <template>
 	<div
-		class="flex size-full flex-col bg-surface-2 overflow-hidden rounded-[20px] border border-solid border-surface-4"
+		class="flex w-full flex-col bg-surface-2 overflow-hidden rounded-[20px] border border-solid border-surface-4"
+		:style="componentHeight ? { height: componentHeight + 'px' } : {}"
 	>
-		<div class="relative min-h-0 pb-1 flex-1 overflow-hidden">
+		<div class="relative min-h-0 overflow-hidden">
 			<div ref="containerRef" class="size-full pl-2" />
 			<div v-if="!isAtBottom" class="absolute bottom-4 right-4">
 				<ButtonStyled circular type="highlight">
@@ -14,6 +15,7 @@
 		</div>
 		<div
 			v-if="showInput"
+			ref="inputRef"
 			class="border-t border-solid border-b-0 border-x-0 border-surface-5 bg-surface-3 p-4"
 		>
 			<StyledInput
@@ -31,7 +33,7 @@
 <script setup lang="ts">
 import { ChevronDownIcon, TerminalSquareIcon } from '@modrinth/assets'
 import type { Terminal } from '@xterm/xterm'
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import StyledInput from '#ui/components/base/StyledInput.vue'
@@ -54,15 +56,31 @@ const emit = defineEmits<{
 }>()
 
 const containerRef = ref<HTMLElement | null>(null)
+const inputRef = ref<HTMLElement | null>(null)
 const commandInput = ref('')
+const componentHeight = ref(0)
 
 const { terminal, searchAddon, isAtBottom, write, writeln, clear, reset, fit, scrollToBottom } =
 	useTerminal({
 		container: containerRef,
 		scrollback: props.scrollback,
-		onReady: (term) => emit('ready', term),
+		onReady: (term) => {
+			nextTick(() => {
+				updateComponentHeight()
+			})
+			emit('ready', term)
+		},
 	})
 
+function updateComponentHeight() {
+	const screen = containerRef.value?.querySelector('.xterm-screen') as HTMLElement | null
+	if (!screen) return
+	const screenH = screen.offsetHeight
+	const inputH = inputRef.value?.offsetHeight ?? 0
+	const borderW = 2
+	componentHeight.value = screenH + inputH + borderW
+}
+
 const submitCommand = () => {
 	const cmd = commandInput.value.trim()
 	if (!cmd) return
@@ -89,12 +107,7 @@ defineExpose({
 	height: 100% !important;
 }
 
-.xterm .xterm-scrollable-element {
-	height: 100% !important;
-}
-
 .xterm .xterm-screen {
-	min-height: 100% !important;
 	margin-left: auto !important;
 	margin-right: auto !important;
 }
diff --git a/packages/ui/src/composables/terminal.ts b/packages/ui/src/composables/terminal.ts
index 139ae66835..d02db49d53 100644
--- a/packages/ui/src/composables/terminal.ts
+++ b/packages/ui/src/composables/terminal.ts
@@ -212,7 +212,7 @@ export function useTerminal(options: UseTerminalOptions): UseTerminalReturn {
 		resizeObserver = new ResizeObserver(() => {
 			const d = fit.proposeDimensions()
 			if (d) {
-				term.resize(d.cols, d.rows + 1)
+				term.resize(d.cols, d.rows)
 			}
 		})
 		resizeObserver.observe(container)
diff --git a/packages/ui/src/layouts/shared/console/layout.vue b/packages/ui/src/layouts/shared/console/layout.vue
index 8d34431e57..a9825ce2a5 100644
--- a/packages/ui/src/layouts/shared/console/layout.vue
+++ b/packages/ui/src/layouts/shared/console/layout.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex min-h-0 flex-1 flex-col gap-4">
+	<div class="flex min-h-0 flex-col gap-4">
 		<div class="flex items-center gap-2">
 			<StyledInput
 				v-model="searchQuery"
@@ -36,7 +36,7 @@
 
 		<BaseTerminal
 			ref="terminalRef"
-			class="min-h-0 flex-1"
+			class="min-h-0"
 			:show-input="resolvedShowInput"
 			@command="handleCommand"
 			@ready="handleTerminalReady"

From 07eb3815dcba3bf6361733cb93476c7bc8156aee Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 1 Apr 2026 15:22:27 +0200
Subject: [PATCH 03/50] feat: swap word wrap for full screen

---
 .../ui/src/components/base/BaseTerminal.vue   |  18 ++-
 packages/ui/src/composables/terminal.ts       |  10 ++
 .../ui/src/layouts/shared/console/layout.vue  | 110 ++++++++++++------
 3 files changed, 97 insertions(+), 41 deletions(-)

diff --git a/packages/ui/src/components/base/BaseTerminal.vue b/packages/ui/src/components/base/BaseTerminal.vue
index 91f475a47f..78f0e69c35 100644
--- a/packages/ui/src/components/base/BaseTerminal.vue
+++ b/packages/ui/src/components/base/BaseTerminal.vue
@@ -1,10 +1,18 @@
 <template>
 	<div
 		class="flex w-full flex-col bg-surface-2 overflow-hidden rounded-[20px] border border-solid border-surface-4"
-		:style="componentHeight ? { height: componentHeight + 'px' } : {}"
+		:style="!fullscreen && componentHeight ? { height: componentHeight + 'px' } : {}"
+		:class="{ 'h-full': fullscreen }"
 	>
-		<div class="relative min-h-0 overflow-hidden">
+		<div class="relative min-h-0 flex-1 overflow-hidden">
 			<div ref="containerRef" class="size-full pl-2" />
+			<div v-if="fullscreen" class="absolute top-4 right-4 z-10">
+				<ButtonStyled circular type="highlight">
+					<button class="!shadow-none" aria-label="Exit fullscreen" @click="emit('exit-fullscreen')">
+						<XIcon />
+					</button>
+				</ButtonStyled>
+			</div>
 			<div v-if="!isAtBottom" class="absolute bottom-4 right-4">
 				<ButtonStyled circular type="highlight">
 					<button class="!shadow-none" aria-label="Scroll to bottom" @click="scrollToBottom">
@@ -31,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import { ChevronDownIcon, TerminalSquareIcon } from '@modrinth/assets'
+import { ChevronDownIcon, TerminalSquareIcon, XIcon } from '@modrinth/assets'
 import type { Terminal } from '@xterm/xterm'
 import { nextTick, ref } from 'vue'
 
@@ -43,16 +51,19 @@ const props = withDefaults(
 	defineProps<{
 		scrollback?: number
 		showInput?: boolean
+		fullscreen?: boolean
 	}>(),
 	{
 		scrollback: 10000,
 		showInput: false,
+		fullscreen: false,
 	},
 )
 
 const emit = defineEmits<{
 	command: [command: string]
 	ready: [terminal: Terminal]
+	'exit-fullscreen': []
 }>()
 
 const containerRef = ref<HTMLElement | null>(null)
@@ -107,6 +118,7 @@ defineExpose({
 	height: 100% !important;
 }
 
+
 .xterm .xterm-screen {
 	margin-left: auto !important;
 	margin-right: auto !important;
diff --git a/packages/ui/src/composables/terminal.ts b/packages/ui/src/composables/terminal.ts
index d02db49d53..e3917817a5 100644
--- a/packages/ui/src/composables/terminal.ts
+++ b/packages/ui/src/composables/terminal.ts
@@ -85,6 +85,7 @@ export function useTerminal(options: UseTerminalOptions): UseTerminalReturn {
 
 	let resizeObserver: ResizeObserver | null = null
 	let themeObserver: MutationObserver | null = null
+	let wheelHandler: ((e: WheelEvent) => void) | null = null
 	let hasWritten = false
 	const pendingWrites: Array<{ data: string; newline: boolean }> = []
 
@@ -189,6 +190,11 @@ export function useTerminal(options: UseTerminalOptions): UseTerminalReturn {
 		term.options.disableStdin = true
 		term.write('\x1b[?25l')
 
+		wheelHandler = (e: WheelEvent) => {
+			e.preventDefault()
+		}
+		container.addEventListener('wheel', wheelHandler, { passive: false })
+
 		term.onScroll(() => checkIfAtBottom())
 		term.onWriteParsed(() => {
 			if (isAtBottom.value) {
@@ -229,6 +235,10 @@ export function useTerminal(options: UseTerminalOptions): UseTerminalReturn {
 	})
 
 	onBeforeUnmount(() => {
+		if (wheelHandler && options.container.value) {
+			options.container.value.removeEventListener('wheel', wheelHandler)
+			wheelHandler = null
+		}
 		resizeObserver?.disconnect()
 		resizeObserver = null
 		themeObserver?.disconnect()
diff --git a/packages/ui/src/layouts/shared/console/layout.vue b/packages/ui/src/layouts/shared/console/layout.vue
index a9825ce2a5..02907ad15f 100644
--- a/packages/ui/src/layouts/shared/console/layout.vue
+++ b/packages/ui/src/layouts/shared/console/layout.vue
@@ -1,53 +1,65 @@
 <template>
-	<div class="flex min-h-0 flex-col gap-4">
-		<div class="flex items-center gap-2">
-			<StyledInput
-				v-model="searchQuery"
-				:icon="SearchIcon"
-				placeholder="Search logs"
-				wrapper-class="flex-1"
-				input-class="!h-10"
-				clearable
-			/>
-			<DropdownSelect
-				v-if="ctx.logSources?.value && ctx.activeLogSourceIndex"
-				:model-value="ctx.logSources.value[ctx.activeLogSourceIndex.value]?.name"
-				:options="ctx.logSources.value.map((s) => s.name)"
-				name="log-source"
-				class="w-[220px]"
-				@update:model-value="handleLogSourceChange"
-			/>
-			<ButtonStyled circular :type="wrapEnabled ? 'highlight' : 'standard'" color="brand">
-				<button aria-label="Toggle word wrap" @click="wrapEnabled = !wrapEnabled">
-					<WrapTextIcon />
-				</button>
-			</ButtonStyled>
-		</div>
-
-		<div class="flex items-center justify-between">
-			<ConsoleFilterPills v-model="activeFilters" @toggle="handleFilterToggle" />
-			<ConsoleActionButtons
-				:share-disabled="resolvedShareDisabled"
-				@clear="handleClear"
-				@copy="handleCopy"
-				@share="handleShare"
-			/>
-		</div>
+	<div
+		class="flex min-h-0 flex-col"
+		:class="isFullscreen ? 'fixed inset-0 z-50 bg-surface-1 p-6' : 'gap-4'"
+	>
+		<template v-if="!isFullscreen">
+			<div class="flex items-center gap-2">
+				<StyledInput
+					v-model="searchQuery"
+					:icon="SearchIcon"
+					placeholder="Search logs"
+					wrapper-class="flex-1"
+					input-class="!h-10"
+					clearable
+				/>
+				<DropdownSelect
+					v-if="ctx.logSources?.value && ctx.activeLogSourceIndex"
+					:model-value="ctx.logSources.value[ctx.activeLogSourceIndex.value]?.name"
+					:options="ctx.logSources.value.map((s) => s.name)"
+					name="log-source"
+					class="w-[220px]"
+					@update:model-value="handleLogSourceChange"
+				/>
+				<ButtonStyled circular>
+					<button
+						aria-label="Open fullscreen"
+						v-tooltip="'Open fullscreen'"
+						@click="enterFullscreen"
+					>
+						<ExpandIcon />
+					</button>
+				</ButtonStyled>
+			</div>
+
+			<div class="flex items-center justify-between">
+				<ConsoleFilterPills v-model="activeFilters" @toggle="handleFilterToggle" />
+				<ConsoleActionButtons
+					:share-disabled="resolvedShareDisabled"
+					@clear="handleClear"
+					@copy="handleCopy"
+					@share="handleShare"
+				/>
+			</div>
+		</template>
 
 		<BaseTerminal
 			ref="terminalRef"
 			class="min-h-0"
+			:class="{ 'flex-1': isFullscreen }"
 			:show-input="resolvedShowInput"
+			:fullscreen="isFullscreen"
 			@command="handleCommand"
 			@ready="handleTerminalReady"
+			@exit-fullscreen="exitFullscreen"
 		/>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { SearchIcon, WrapTextIcon } from '@modrinth/assets'
+import { ExpandIcon, SearchIcon } from '@modrinth/assets'
 import type { Terminal } from '@xterm/xterm'
-import { computed, isRef, ref, watch } from 'vue'
+import { computed, isRef, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 
 import BaseTerminal from '#ui/components/base/BaseTerminal.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
@@ -56,7 +68,7 @@ import StyledInput from '#ui/components/base/StyledInput.vue'
 
 import ConsoleActionButtons from './components/ConsoleActionButtons.vue'
 import ConsoleFilterPills from './components/ConsoleFilterPills.vue'
-import { useConsoleFilters, rewriteTerminal } from './composables'
+import { rewriteTerminal, useConsoleFilters } from './composables'
 import { injectConsoleManager } from './providers'
 import type { LogLevel } from './types'
 
@@ -64,9 +76,15 @@ const ctx = injectConsoleManager()
 
 const terminalRef = ref<InstanceType<typeof BaseTerminal> | null>(null)
 const searchQuery = ref('')
-const wrapEnabled = ref(false)
+const isFullscreen = ref(false)
 const { activeFilters, toggleFilter, buildFilterPredicate } = useConsoleFilters()
 
+onBeforeUnmount(() => {
+	if (isFullscreen.value) {
+		document.body.style.overflow = ''
+	}
+})
+
 let lastWrittenIndex = 0
 let searchDebounce: ReturnType<typeof setTimeout> | null = null
 
@@ -100,6 +118,22 @@ function rewriteFiltered() {
 	lastWrittenIndex = ctx.logLines.value.length
 }
 
+function enterFullscreen() {
+	isFullscreen.value = true
+	document.body.style.overflow = 'hidden'
+	nextTick(() => {
+		terminalRef.value?.fit()
+	})
+}
+
+function exitFullscreen() {
+	isFullscreen.value = false
+	document.body.style.overflow = ''
+	nextTick(() => {
+		terminalRef.value?.fit()
+	})
+}
+
 function writeAllLines() {
 	const term = terminalRef.value?.terminal
 	if (!term) return

From 9dab47e0194b8fca1c8c718d81bcc6d8ac5a0177 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 1 Apr 2026 15:42:26 +0200
Subject: [PATCH 04/50] fix: stats cards alignment

---
 .../src/components/ui/servers/ServerStats.vue | 97 +++++++++----------
 .../ui/src/layouts/shared/console/layout.vue  |  2 +-
 2 files changed, 47 insertions(+), 52 deletions(-)

diff --git a/apps/frontend/src/components/ui/servers/ServerStats.vue b/apps/frontend/src/components/ui/servers/ServerStats.vue
index a16aa63226..5c8948f64f 100644
--- a/apps/frontend/src/components/ui/servers/ServerStats.vue
+++ b/apps/frontend/src/components/ui/servers/ServerStats.vue
@@ -6,20 +6,21 @@
 		:class="{ 'pointer-events-none': loading }"
 		:aria-hidden="loading"
 	>
-		<div
+		<component
+			:is="metric.link ? NuxtLink : 'div'"
 			v-for="(metric, index) in metrics"
 			:key="index"
-			class="relative isolate min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8"
+			:to="metric.link && !loading ? metric.link : undefined"
+			class="relative isolate min-h-[145px] w-full overflow-hidden rounded-[20px] bg-bg-raised p-5"
+			:class="
+				metric.link && !loading
+					? 'cursor-pointer transition-transform duration-100 hover:scale-105 active:scale-100'
+					: ''
+			"
 		>
-			<div class="relative z-10 -ml-3 w-fit rounded-xl px-3 py-1">
-				<div class="relative z-10">
-					<div class="-mb-0.5 mt-0.5 flex flex-row items-center gap-2">
-						<h2 class="m-0 -ml-0.5 text-3xl font-extrabold text-contrast">
-							{{ metric.value }}
-						</h2>
-						<h3 class="text-sm font-normal text-secondary">/ {{ metric.max }}</h3>
-					</div>
-					<h3 class="flex items-center gap-2 text-base font-normal text-secondary">
+			<div class="relative z-10 flex flex-col gap-3">
+				<div class="flex items-center justify-between">
+					<span class="flex items-center gap-2 text-base font-medium text-primary">
 						{{ metric.title }}
 						<IssuesIcon
 							v-if="metric.warning && !loading"
@@ -27,21 +28,18 @@
 							class="size-5"
 							:style="{ color: 'var(--color-orange)' }"
 						/>
-					</h3>
+					</span>
+					<component :is="metric.icon" class="size-7" />
 				</div>
-				<div class="absolute -left-8 -top-4 h-28 w-56 rounded-full bg-bg-raised blur-lg" />
+				<span class="text-4xl font-semibold text-contrast">
+					{{ metric.value }}
+				</span>
 			</div>
 
-			<component
-				:is="metric.icon"
-				class="absolute right-10 top-10 z-10 size-8"
-				style="width: 2rem; height: 2rem"
-			/>
-
-			<div class="chart-space absolute bottom-0 left-0 right-0">
+			<div v-if="metric.showGraph" class="chart-space absolute bottom-0 left-0 right-0">
 				<ClientOnly>
 					<VueApexCharts
-						v-if="metric.showGraph && !loading"
+						v-if="!loading"
 						type="area"
 						height="142"
 						:options="getChartOptions(metric.warning, index)"
@@ -51,24 +49,12 @@
 					/>
 				</ClientOnly>
 			</div>
-		</div>
-		<nuxt-link
-			:to="loading ? undefined : `/hosting/manage/${serverId}/files`"
-			class="relative isolate min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8"
-			:class="loading ? '' : 'transition-transform duration-100 hover:scale-105 active:scale-100'"
-		>
-			<div class="flex flex-row items-center gap-2">
-				<h2 class="m-0 -ml-0.5 mt-1 text-3xl font-extrabold text-contrast">
-					{{ loading ? '0 B' : formatBytes(stats.storage_usage_bytes) }}
-				</h2>
-			</div>
-			<h3 class="text-base font-normal text-secondary">Storage usage</h3>
-			<FolderOpenIcon class="absolute right-10 top-10 size-8" />
-		</nuxt-link>
+		</component>
 	</div>
 </template>
 
 <script setup lang="ts">
+import { NuxtLink } from '#components'
 import { CpuIcon, DatabaseIcon, FolderOpenIcon, IssuesIcon } from '@modrinth/assets'
 import type { Stats } from '@modrinth/utils'
 import { useStorage } from '@vueuse/core'
@@ -122,26 +108,37 @@ const updateGraphData = (arr: number[], newValue: number) => {
 }
 
 const metrics = computed(() => {
+	const storageMetric = {
+		title: 'Storage',
+		value: props.loading ? '0 B' : formatBytes(stats.value.storage_usage_bytes),
+		icon: FolderOpenIcon,
+		data: [] as number[],
+		showGraph: false,
+		warning: null,
+		link: `/hosting/manage/${serverId}/files`,
+	}
+
 	if (props.loading) {
 		return [
 			{
-				title: 'CPU usage',
+				title: 'CPU',
 				value: '0.00%',
-				max: '100%',
 				icon: CpuIcon,
 				data: cpuData.value,
 				showGraph: false,
 				warning: null,
+				link: null,
 			},
 			{
-				title: 'Memory usage',
+				title: 'Memory',
 				value: '0.00%',
-				max: '100%',
 				icon: DatabaseIcon,
 				data: ramData.value,
 				showGraph: false,
 				warning: null,
+				link: null,
 			},
+			storageMetric,
 		]
 	}
 
@@ -156,35 +153,33 @@ const metrics = computed(() => {
 
 	return [
 		{
-			title: 'CPU usage',
+			title: 'CPU',
 			value: `${cpuPercent.toFixed(2)}%`,
-			max: '100%',
 			icon: CpuIcon,
 			data: cpuData.value,
 			showGraph: true,
 			warning: cpuPercent >= 90 ? 'CPU usage is very high' : null,
+			link: null,
 		},
 		{
-			title: 'Memory usage',
+			title: 'Memory',
 			value:
-				userPreferences.value.ramAsNumber || flags.developerMode
+				userPreferences.value.ramAsNumber || flags.value.developerMode
 					? formatBytes(stats.value.ram_usage_bytes)
 					: `${ramPercent.toFixed(2)}%`,
-			max:
-				userPreferences.value.ramAsNumber || flags.developerMode
-					? formatBytes(stats.value.ram_total_bytes)
-					: '100%',
 			icon: DatabaseIcon,
 			data: ramData.value,
 			showGraph: true,
 			warning: ramPercent >= 90 ? 'Memory usage is very high' : null,
+			link: null,
 		},
+		storageMetric,
 	]
 })
 
 const getChartOptions = (hasWarning: string | null, index: number) => ({
 	chart: {
-		type: 'area',
+		type: 'area' as const,
 		animations: { enabled: false },
 		sparkline: { enabled: true },
 		toolbar: { show: false },
@@ -243,9 +238,9 @@ watch(
 <style scoped>
 .chart-space {
 	height: 142px;
-	width: calc(100% + 48px);
-	margin-left: -24px;
-	margin-right: -24px;
+	width: calc(100% + 40px);
+	margin-left: -20px;
+	margin-right: -20px;
 }
 
 .chart {
diff --git a/packages/ui/src/layouts/shared/console/layout.vue b/packages/ui/src/layouts/shared/console/layout.vue
index 02907ad15f..2ac901f94d 100644
--- a/packages/ui/src/layouts/shared/console/layout.vue
+++ b/packages/ui/src/layouts/shared/console/layout.vue
@@ -170,7 +170,7 @@ watch(searchQuery, (query) => {
 		const addon = terminalRef.value?.searchAddon
 		if (!addon) return
 		if (query) {
-			addon.findNext(query, { decorations: { activeMatchColorOverviewRuler: '#ffffff' } })
+			addon.findNext(query, { decorations: { activeMatchColorOverviewRuler: '#ffffff', matchOverviewRuler: '#888888' } })
 		} else {
 			addon.clearDecorations()
 		}

From 75714e5a6db0baf1019328205890dd5bcfb34c3f Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 1 Apr 2026 16:52:14 +0200
Subject: [PATCH 05/50] fix: stats

---
 .../src/components/ui/servers/ServerStats.vue | 23 +++++++++++++------
 .../src/pages/hosting/manage/[id]/index.vue   |  8 ++-----
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/apps/frontend/src/components/ui/servers/ServerStats.vue b/apps/frontend/src/components/ui/servers/ServerStats.vue
index 5c8948f64f..d725daec81 100644
--- a/apps/frontend/src/components/ui/servers/ServerStats.vue
+++ b/apps/frontend/src/components/ui/servers/ServerStats.vue
@@ -11,16 +11,16 @@
 			v-for="(metric, index) in metrics"
 			:key="index"
 			:to="metric.link && !loading ? metric.link : undefined"
-			class="relative isolate min-h-[145px] w-full overflow-hidden rounded-[20px] bg-bg-raised p-5"
+			class="relative isolate min-h-[145px] w-full overflow-hidden rounded-[20px] bg-surface-3 p-5"
 			:class="
 				metric.link && !loading
 					? 'cursor-pointer transition-transform duration-100 hover:scale-105 active:scale-100'
 					: ''
 			"
 		>
-			<div class="relative z-10 flex flex-col gap-3">
+			<div class="relative z-10 flex flex-col gap-2">
 				<div class="flex items-center justify-between">
-					<span class="flex items-center gap-2 text-base font-medium text-primary">
+					<span class="flex items-center gap-2 font-medium text-primary">
 						{{ metric.title }}
 						<IssuesIcon
 							v-if="metric.warning && !loading"
@@ -29,11 +29,17 @@
 							:style="{ color: 'var(--color-orange)' }"
 						/>
 					</span>
-					<component :is="metric.icon" class="size-7" />
+					<span class="relative">
+						<component :is="metric.icon" class="relative z-10 size-7" />
+						<div class="absolute -right-4 -top-4 -z-10 size-14 rounded-full bg-surface-3 opacity-50 blur-lg" />
+					</span>
 				</div>
 				<span class="text-4xl font-semibold text-contrast">
 					{{ metric.value }}
 				</span>
+				<div
+					class="absolute -left-8 -top-4 -z-10 h-28 w-56 rounded-full bg-surface-3 opacity-50 blur-lg"
+				/>
 			</div>
 
 			<div v-if="metric.showGraph" class="chart-space absolute bottom-0 left-0 right-0">
@@ -194,9 +200,9 @@ const getChartOptions = (hasWarning: string | null, index: number) => ({
 			updated: () => onChartReady(index),
 		},
 	},
-	stroke: { curve: 'smooth', width: 3 },
+	stroke: { curve: 'smooth' as const, width: 3 },
 	fill: {
-		type: 'gradient',
+		type: 'gradient' as const,
 		gradient: {
 			shadeIntensity: 1,
 			opacityFrom: 0.25,
@@ -209,7 +215,7 @@ const getChartOptions = (hasWarning: string | null, index: number) => ({
 	xaxis: {
 		labels: { show: false },
 		axisBorder: { show: false },
-		type: 'numeric',
+		type: 'numeric' as const,
 		tickAmount: 20,
 		range: 20,
 	},
@@ -247,5 +253,8 @@ watch(
 	width: 100% !important;
 	height: 142px !important;
 	transition: opacity 0.3s ease-out;
+	box-shadow:
+		0 1px 2px 0 rgba(0, 0, 0, 0.3),
+		0 1px 3px 0 rgba(0, 0, 0, 0.15);
 }
 </style>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/index.vue b/apps/frontend/src/pages/hosting/manage/[id]/index.vue
index 261ac2a68a..3194157ed6 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/index.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/index.vue
@@ -60,11 +60,8 @@
 				:loading="!isConnected || isWsAuthIncorrect"
 			/>
 
-			<div class="flex h-[700px] flex-col gap-3">
-				<div class="flex items-center gap-4">
-					<h2 class="m-0 text-3xl font-extrabold text-contrast">Console</h2>
-					<PanelServerStatus v-if="isConnected && !isWsAuthIncorrect" :state="serverPowerState" />
-				</div>
+			<div class="flex h-[700px] flex-col gap-4">
+				<span class="text-2xl font-semibold text-contrast">Console</span>
 
 				<ConsolePageLayout />
 			</div>
@@ -94,7 +91,6 @@ import {
 } from '@modrinth/ui'
 import type { ServerState, Stats } from '@modrinth/utils'
 
-import PanelServerStatus from '~/components/ui/servers/PanelServerStatus.vue'
 import ServerStats from '~/components/ui/servers/ServerStats.vue'
 import { useModrinthServersConsole } from '~/store/console.ts'
 

From 38a4408fa555e6b72548049eedffdc4108a8bc87 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 1 Apr 2026 17:56:30 +0200
Subject: [PATCH 06/50] feat: fix console clear + remove copy

---
 .../components/ConsoleActionButtons.vue       | 22 +------------------
 .../ui/src/layouts/shared/console/layout.vue  |  7 +++---
 2 files changed, 5 insertions(+), 24 deletions(-)

diff --git a/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue b/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
index 33820be8d2..e409a97763 100644
--- a/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
+++ b/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
@@ -6,12 +6,6 @@
 				Clear
 			</button>
 		</ButtonStyled>
-		<ButtonStyled type="transparent" circular>
-			<button @click="handleCopy">
-				<CopyIcon />
-				{{ copyLabel }}
-			</button>
-		</ButtonStyled>
 		<ButtonStyled type="transparent" circular>
 			<button :disabled="shareDisabled" @click="emit('share')">
 				<ShareIcon />
@@ -22,8 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { CopyIcon, ShareIcon, XIcon } from '@modrinth/assets'
-import { ref } from 'vue'
+import { ShareIcon, XIcon } from '@modrinth/assets'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 
@@ -33,19 +26,6 @@ defineProps<{
 
 const emit = defineEmits<{
 	clear: []
-	copy: []
 	share: []
 }>()
-
-const copyLabel = ref('Copy')
-let copyTimeout: ReturnType<typeof setTimeout> | null = null
-
-function handleCopy() {
-	emit('copy')
-	copyLabel.value = 'Copied!'
-	if (copyTimeout) clearTimeout(copyTimeout)
-	copyTimeout = setTimeout(() => {
-		copyLabel.value = 'Copy'
-	}, 2000)
-}
 </script>
diff --git a/packages/ui/src/layouts/shared/console/layout.vue b/packages/ui/src/layouts/shared/console/layout.vue
index 2ac901f94d..2ad62a6b17 100644
--- a/packages/ui/src/layouts/shared/console/layout.vue
+++ b/packages/ui/src/layouts/shared/console/layout.vue
@@ -37,7 +37,6 @@
 				<ConsoleActionButtons
 					:share-disabled="resolvedShareDisabled"
 					@clear="handleClear"
-					@copy="handleCopy"
 					@share="handleShare"
 				/>
 			</div>
@@ -170,7 +169,9 @@ watch(searchQuery, (query) => {
 		const addon = terminalRef.value?.searchAddon
 		if (!addon) return
 		if (query) {
-			addon.findNext(query, { decorations: { activeMatchColorOverviewRuler: '#ffffff', matchOverviewRuler: '#888888' } })
+			addon.findNext(query, {
+				decorations: { activeMatchColorOverviewRuler: '#ffffff', matchOverviewRuler: '#888888' },
+			})
 		} else {
 			addon.clearDecorations()
 		}
@@ -182,7 +183,7 @@ function handleCommand(cmd: string) {
 }
 
 function handleClear() {
-	terminalRef.value?.clear()
+	terminalRef.value?.reset()
 	lastWrittenIndex = 0
 	ctx.onClear?.()
 }

From 9e5ae59db53055b8ca6332c2206ddb0dd39aab6a Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 1 Apr 2026 17:57:54 +0200
Subject: [PATCH 07/50] fix: lint

---
 .../src/pages/hosting/manage/Index.vue        |   2 -
 apps/app-frontend/src/pages/instance/Logs.vue |  23 +-
 .../src/components/ui/servers/ServerStats.vue |   7 +-
 packages/assets/generated-icons.ts            | 221 +++++++++---------
 .../ui/src/components/base/BaseTerminal.vue   |   7 +-
 .../ui/src/components/base/FilterPills.vue    |   4 +-
 .../console/components/ConsoleFilterPills.vue |   4 +-
 .../console/composables/console-filtering.ts  |   1 +
 .../shared/console/composables/index.ts       |   2 +-
 .../ui/src/layouts/shared/console/layout.vue  |   8 +-
 .../console/providers/console-manager.ts      |   8 +-
 11 files changed, 133 insertions(+), 154 deletions(-)

diff --git a/apps/app-frontend/src/pages/hosting/manage/Index.vue b/apps/app-frontend/src/pages/hosting/manage/Index.vue
index 3fa9a8b674..fc1015e7a0 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Index.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Index.vue
@@ -249,8 +249,6 @@ const { data: serverImage } = useQuery({
 	queryFn: async (): Promise<string | null> => {
 		if (!serverId.value || server.value.status !== 'available') return null
 
-		const auth = await client.archon.servers_v0.getFilesystemAuth(serverId.value)
-
 		try {
 			const blob = await client.kyros.files_v0.downloadFile('/server-icon-original.png')
 			return await processImageBlob(blob, 512)
diff --git a/apps/app-frontend/src/pages/instance/Logs.vue b/apps/app-frontend/src/pages/instance/Logs.vue
index b0dbf971b4..682f3596f2 100644
--- a/apps/app-frontend/src/pages/instance/Logs.vue
+++ b/apps/app-frontend/src/pages/instance/Logs.vue
@@ -5,21 +5,15 @@
 </template>
 
 <script setup>
-import { ConsolePageLayout, provideConsoleManager } from '@modrinth/ui'
+import { ConsolePageLayout, injectNotificationManager, provideConsoleManager } from '@modrinth/ui'
 import dayjs from 'dayjs'
 import isToday from 'dayjs/plugin/isToday'
 import isYesterday from 'dayjs/plugin/isYesterday'
 import { computed, onUnmounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
-import { injectNotificationManager } from '@modrinth/ui'
 import { process_listener } from '@/helpers/events.js'
-import {
-	delete_logs_by_filename,
-	get_latest_log_cursor,
-	get_logs,
-	get_output_by_filename,
-} from '@/helpers/logs.js'
+import { get_latest_log_cursor, get_logs, get_output_by_filename } from '@/helpers/logs.js'
 import { get_by_profile_path } from '@/helpers/process.js'
 
 dayjs.extend(isToday)
@@ -157,19 +151,6 @@ if (logs.value.length > 1 && !props.playing) {
 	selectedLogIndex.value = 0
 }
 
-const deleteLog = async () => {
-	if (logs.value[selectedLogIndex.value] && selectedLogIndex.value !== 0) {
-		const deleteIndex = selectedLogIndex.value
-		selectedLogIndex.value = deleteIndex - 1
-		await delete_logs_by_filename(
-			props.instance.path,
-			logs.value[deleteIndex].log_type,
-			logs.value[deleteIndex].filename,
-		).catch(handleError)
-		await setLogs()
-	}
-}
-
 interval.value = setInterval(async () => {
 	if (logs.value.length > 0 && selectedLogIndex.value === 0) {
 		logs.value[0] = await getLiveStdLog()
diff --git a/apps/frontend/src/components/ui/servers/ServerStats.vue b/apps/frontend/src/components/ui/servers/ServerStats.vue
index d725daec81..fdd0899679 100644
--- a/apps/frontend/src/components/ui/servers/ServerStats.vue
+++ b/apps/frontend/src/components/ui/servers/ServerStats.vue
@@ -31,7 +31,9 @@
 					</span>
 					<span class="relative">
 						<component :is="metric.icon" class="relative z-10 size-7" />
-						<div class="absolute -right-4 -top-4 -z-10 size-14 rounded-full bg-surface-3 opacity-50 blur-lg" />
+						<div
+							class="absolute -right-4 -top-4 -z-10 size-14 rounded-full bg-surface-3 opacity-50 blur-lg"
+						/>
 					</span>
 				</div>
 				<span class="text-4xl font-semibold text-contrast">
@@ -60,12 +62,13 @@
 </template>
 
 <script setup lang="ts">
-import { NuxtLink } from '#components'
 import { CpuIcon, DatabaseIcon, FolderOpenIcon, IssuesIcon } from '@modrinth/assets'
 import type { Stats } from '@modrinth/utils'
 import { useStorage } from '@vueuse/core'
 import { computed, ref, shallowRef } from 'vue'
 
+import { NuxtLink } from '#components'
+
 const flags = useFeatureFlags()
 const route = useNativeRoute()
 const serverId = route.params.id
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index 637e93aad3..c63ce31a8f 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -3,8 +3,6 @@
 
 import type { FunctionalComponent, SVGAttributes } from 'vue'
 
-export type IconComponent = FunctionalComponent<SVGAttributes>
-
 import _AffiliateIcon from './icons/affiliate.svg?component'
 import _AlignLeftIcon from './icons/align-left.svg?component'
 import _ArchiveIcon from './icons/archive.svg?component'
@@ -393,6 +391,8 @@ import _XCircleIcon from './icons/x-circle.svg?component'
 import _ZoomInIcon from './icons/zoom-in.svg?component'
 import _ZoomOutIcon from './icons/zoom-out.svg?component'
 
+export type IconComponent = FunctionalComponent<SVGAttributes>
+
 export const AffiliateIcon = _AffiliateIcon
 export const AlignLeftIcon = _AlignLeftIcon
 export const ArchiveIcon = _ArchiveIcon
@@ -781,141 +781,140 @@ export const XCircleIcon = _XCircleIcon
 export const ZoomInIcon = _ZoomInIcon
 export const ZoomOutIcon = _ZoomOutIcon
 
-
 export const categoryIconMap: Record<string, IconComponent> = {
-	'adventure': TagCategoryAdventureIcon,
-	'atmosphere': TagCategoryAtmosphereIcon,
-	'audio': TagCategoryAudioIcon,
-	'backpack': TagCategoryBackpackIcon,
-	'badge': TagCategoryBadgeIcon,
+	adventure: TagCategoryAdventureIcon,
+	atmosphere: TagCategoryAtmosphereIcon,
+	audio: TagCategoryAudioIcon,
+	backpack: TagCategoryBackpackIcon,
+	badge: TagCategoryBadgeIcon,
 	'badge-check': TagCategoryBadgeCheckIcon,
 	'bed-double': TagCategoryBedDoubleIcon,
-	'blocks': TagCategoryBlocksIcon,
-	'bloom': TagCategoryBloomIcon,
+	blocks: TagCategoryBlocksIcon,
+	bloom: TagCategoryBloomIcon,
 	'building-2': TagCategoryBuilding2Icon,
-	'camera': TagCategoryCameraIcon,
-	'cartoon': TagCategoryCartoonIcon,
-	'castle': TagCategoryCastleIcon,
-	'challenging': TagCategoryChallengingIcon,
-	'clapperboard': TagCategoryClapperboardIcon,
-	'cloud': TagCategoryCloudIcon,
+	camera: TagCategoryCameraIcon,
+	cartoon: TagCategoryCartoonIcon,
+	castle: TagCategoryCastleIcon,
+	challenging: TagCategoryChallengingIcon,
+	clapperboard: TagCategoryClapperboardIcon,
+	cloud: TagCategoryCloudIcon,
 	'colored-lighting': TagCategoryColoredLightingIcon,
-	'combat': TagCategoryCombatIcon,
-	'compass': TagCategoryCompassIcon,
+	combat: TagCategoryCombatIcon,
+	compass: TagCategoryCompassIcon,
 	'core-shaders': TagCategoryCoreShadersIcon,
-	'crown': TagCategoryCrownIcon,
-	'cursed': TagCategoryCursedIcon,
-	'decoration': TagCategoryDecorationIcon,
-	'dices': TagCategoryDicesIcon,
-	'economy': TagCategoryEconomyIcon,
-	'entities': TagCategoryEntitiesIcon,
-	'environment': TagCategoryEnvironmentIcon,
-	'equipment': TagCategoryEquipmentIcon,
-	'fantasy': TagCategoryFantasyIcon,
-	'film': TagCategoryFilmIcon,
-	'flag': TagCategoryFlagIcon,
-	'foliage': TagCategoryFoliageIcon,
-	'fonts': TagCategoryFontsIcon,
-	'food': TagCategoryFoodIcon,
-	'footprints': TagCategoryFootprintsIcon,
+	crown: TagCategoryCrownIcon,
+	cursed: TagCategoryCursedIcon,
+	decoration: TagCategoryDecorationIcon,
+	dices: TagCategoryDicesIcon,
+	economy: TagCategoryEconomyIcon,
+	entities: TagCategoryEntitiesIcon,
+	environment: TagCategoryEnvironmentIcon,
+	equipment: TagCategoryEquipmentIcon,
+	fantasy: TagCategoryFantasyIcon,
+	film: TagCategoryFilmIcon,
+	flag: TagCategoryFlagIcon,
+	foliage: TagCategoryFoliageIcon,
+	fonts: TagCategoryFontsIcon,
+	food: TagCategoryFoodIcon,
+	footprints: TagCategoryFootprintsIcon,
 	'game-mechanics': TagCategoryGameMechanicsIcon,
 	'gamepad-2': TagCategoryGamepad2Icon,
-	'gauge': TagCategoryGaugeIcon,
-	'globe': TagCategoryGlobeIcon,
+	gauge: TagCategoryGaugeIcon,
+	globe: TagCategoryGlobeIcon,
 	'grid-3x3': TagCategoryGrid3x3Icon,
-	'gui': TagCategoryGuiIcon,
-	'handshake': TagCategoryHandshakeIcon,
+	gui: TagCategoryGuiIcon,
+	handshake: TagCategoryHandshakeIcon,
 	'heart-crack': TagCategoryHeartCrackIcon,
 	'heart-pulse': TagCategoryHeartPulseIcon,
-	'high': TagCategoryHighIcon,
-	'house': TagCategoryHouseIcon,
-	'items': TagCategoryItemsIcon,
+	high: TagCategoryHighIcon,
+	house: TagCategoryHouseIcon,
+	items: TagCategoryItemsIcon,
 	'kitchen-sink': TagCategoryKitchenSinkIcon,
-	'library': TagCategoryLibraryIcon,
-	'lightweight': TagCategoryLightweightIcon,
-	'locale': TagCategoryLocaleIcon,
-	'lock': TagCategoryLockIcon,
-	'low': TagCategoryLowIcon,
-	'magic': TagCategoryMagicIcon,
-	'management': TagCategoryManagementIcon,
+	library: TagCategoryLibraryIcon,
+	lightweight: TagCategoryLightweightIcon,
+	locale: TagCategoryLocaleIcon,
+	lock: TagCategoryLockIcon,
+	low: TagCategoryLowIcon,
+	magic: TagCategoryMagicIcon,
+	management: TagCategoryManagementIcon,
 	'map-pinned': TagCategoryMapPinnedIcon,
-	'medium': TagCategoryMediumIcon,
-	'minigame': TagCategoryMinigameIcon,
-	'mobs': TagCategoryMobsIcon,
-	'modded': TagCategoryModdedIcon,
-	'models': TagCategoryModelsIcon,
-	'multiplayer': TagCategoryMultiplayerIcon,
-	'network': TagCategoryNetworkIcon,
-	'optimization': TagCategoryOptimizationIcon,
-	'palette': TagCategoryPaletteIcon,
+	medium: TagCategoryMediumIcon,
+	minigame: TagCategoryMinigameIcon,
+	mobs: TagCategoryMobsIcon,
+	modded: TagCategoryModdedIcon,
+	models: TagCategoryModelsIcon,
+	multiplayer: TagCategoryMultiplayerIcon,
+	network: TagCategoryNetworkIcon,
+	optimization: TagCategoryOptimizationIcon,
+	palette: TagCategoryPaletteIcon,
 	'path-tracing': TagCategoryPathTracingIcon,
 	'paw-print': TagCategoryPawPrintIcon,
-	'pbr': TagCategoryPbrIcon,
-	'pickaxe': TagCategoryPickaxeIcon,
-	'potato': TagCategoryPotatoIcon,
-	'quests': TagCategoryQuestsIcon,
-	'realistic': TagCategoryRealisticIcon,
-	'reflections': TagCategoryReflectionsIcon,
+	pbr: TagCategoryPbrIcon,
+	pickaxe: TagCategoryPickaxeIcon,
+	potato: TagCategoryPotatoIcon,
+	quests: TagCategoryQuestsIcon,
+	realistic: TagCategoryRealisticIcon,
+	reflections: TagCategoryReflectionsIcon,
 	'refresh-ccw': TagCategoryRefreshCcwIcon,
-	'screenshot': TagCategoryScreenshotIcon,
+	screenshot: TagCategoryScreenshotIcon,
 	'scroll-text': TagCategoryScrollTextIcon,
 	'semi-realistic': TagCategorySemiRealisticIcon,
-	'shadows': TagCategoryShadowsIcon,
-	'shield': TagCategoryShieldIcon,
-	'simplistic': TagCategorySimplisticIcon,
-	'skull': TagCategorySkullIcon,
-	'social': TagCategorySocialIcon,
-	'square': TagCategorySquareIcon,
-	'storage': TagCategoryStorageIcon,
-	'sword': TagCategorySwordIcon,
-	'swords': TagCategorySwordsIcon,
-	'target': TagCategoryTargetIcon,
-	'technology': TagCategoryTechnologyIcon,
-	'terminal': TagCategoryTerminalIcon,
-	'theater': TagCategoryTheaterIcon,
-	'themed': TagCategoryThemedIcon,
-	'transportation': TagCategoryTransportationIcon,
+	shadows: TagCategoryShadowsIcon,
+	shield: TagCategoryShieldIcon,
+	simplistic: TagCategorySimplisticIcon,
+	skull: TagCategorySkullIcon,
+	social: TagCategorySocialIcon,
+	square: TagCategorySquareIcon,
+	storage: TagCategoryStorageIcon,
+	sword: TagCategorySwordIcon,
+	swords: TagCategorySwordsIcon,
+	target: TagCategoryTargetIcon,
+	technology: TagCategoryTechnologyIcon,
+	terminal: TagCategoryTerminalIcon,
+	theater: TagCategoryTheaterIcon,
+	themed: TagCategoryThemedIcon,
+	transportation: TagCategoryTransportationIcon,
 	'tree-pine': TagCategoryTreePineIcon,
-	'trophy': TagCategoryTrophyIcon,
-	'tweaks': TagCategoryTweaksIcon,
-	'users': TagCategoryUsersIcon,
-	'utility': TagCategoryUtilityIcon,
+	trophy: TagCategoryTrophyIcon,
+	tweaks: TagCategoryTweaksIcon,
+	users: TagCategoryUsersIcon,
+	utility: TagCategoryUtilityIcon,
 	'vanilla-like': TagCategoryVanillaLikeIcon,
 	'wand-sparkles': TagCategoryWandSparklesIcon,
 	'wifi-off': TagCategoryWifiOffIcon,
-	'worldgen': TagCategoryWorldgenIcon,
-	'zap': TagCategoryZapIcon,
+	worldgen: TagCategoryWorldgenIcon,
+	zap: TagCategoryZapIcon,
 }
 
 export const loaderIconMap: Record<string, IconComponent> = {
-	'babric': TagLoaderBabricIcon,
+	babric: TagLoaderBabricIcon,
 	'bta-babric': TagLoaderBtaBabricIcon,
-	'bukkit': TagLoaderBukkitIcon,
-	'bungeecord': TagLoaderBungeecordIcon,
-	'canvas': TagLoaderCanvasIcon,
-	'datapack': TagLoaderDatapackIcon,
-	'fabric': TagLoaderFabricIcon,
-	'folia': TagLoaderFoliaIcon,
-	'forge': TagLoaderForgeIcon,
-	'geyser': TagLoaderGeyserIcon,
-	'iris': TagLoaderIrisIcon,
+	bukkit: TagLoaderBukkitIcon,
+	bungeecord: TagLoaderBungeecordIcon,
+	canvas: TagLoaderCanvasIcon,
+	datapack: TagLoaderDatapackIcon,
+	fabric: TagLoaderFabricIcon,
+	folia: TagLoaderFoliaIcon,
+	forge: TagLoaderForgeIcon,
+	geyser: TagLoaderGeyserIcon,
+	iris: TagLoaderIrisIcon,
 	'java-agent': TagLoaderJavaAgentIcon,
 	'legacy-fabric': TagLoaderLegacyFabricIcon,
-	'liteloader': TagLoaderLiteloaderIcon,
-	'minecraft': TagLoaderMinecraftIcon,
-	'modloader': TagLoaderModloaderIcon,
-	'mrpack': TagLoaderMrpackIcon,
-	'neoforge': TagLoaderNeoforgeIcon,
-	'nilloader': TagLoaderNilloaderIcon,
-	'optifine': TagLoaderOptifineIcon,
-	'ornithe': TagLoaderOrnitheIcon,
-	'paper': TagLoaderPaperIcon,
-	'purpur': TagLoaderPurpurIcon,
-	'quilt': TagLoaderQuiltIcon,
-	'rift': TagLoaderRiftIcon,
-	'spigot': TagLoaderSpigotIcon,
-	'sponge': TagLoaderSpongeIcon,
-	'vanilla': TagLoaderVanillaIcon,
-	'velocity': TagLoaderVelocityIcon,
-	'waterfall': TagLoaderWaterfallIcon,
+	liteloader: TagLoaderLiteloaderIcon,
+	minecraft: TagLoaderMinecraftIcon,
+	modloader: TagLoaderModloaderIcon,
+	mrpack: TagLoaderMrpackIcon,
+	neoforge: TagLoaderNeoforgeIcon,
+	nilloader: TagLoaderNilloaderIcon,
+	optifine: TagLoaderOptifineIcon,
+	ornithe: TagLoaderOrnitheIcon,
+	paper: TagLoaderPaperIcon,
+	purpur: TagLoaderPurpurIcon,
+	quilt: TagLoaderQuiltIcon,
+	rift: TagLoaderRiftIcon,
+	spigot: TagLoaderSpigotIcon,
+	sponge: TagLoaderSpongeIcon,
+	vanilla: TagLoaderVanillaIcon,
+	velocity: TagLoaderVelocityIcon,
+	waterfall: TagLoaderWaterfallIcon,
 }
diff --git a/packages/ui/src/components/base/BaseTerminal.vue b/packages/ui/src/components/base/BaseTerminal.vue
index 78f0e69c35..c501d7292f 100644
--- a/packages/ui/src/components/base/BaseTerminal.vue
+++ b/packages/ui/src/components/base/BaseTerminal.vue
@@ -8,7 +8,11 @@
 			<div ref="containerRef" class="size-full pl-2" />
 			<div v-if="fullscreen" class="absolute top-4 right-4 z-10">
 				<ButtonStyled circular type="highlight">
-					<button class="!shadow-none" aria-label="Exit fullscreen" @click="emit('exit-fullscreen')">
+					<button
+						class="!shadow-none"
+						aria-label="Exit fullscreen"
+						@click="emit('exit-fullscreen')"
+					>
 						<XIcon />
 					</button>
 				</ButtonStyled>
@@ -118,7 +122,6 @@ defineExpose({
 	height: 100% !important;
 }
 
-
 .xterm .xterm-screen {
 	margin-left: auto !important;
 	margin-right: auto !important;
diff --git a/packages/ui/src/components/base/FilterPills.vue b/packages/ui/src/components/base/FilterPills.vue
index 921721d3ff..fc0b0da539 100644
--- a/packages/ui/src/components/base/FilterPills.vue
+++ b/packages/ui/src/components/base/FilterPills.vue
@@ -6,9 +6,7 @@
 			:aria-pressed="modelValue.length === 0"
 			@click="modelValue = []"
 		>
-			<slot name="all">
-				All
-			</slot>
+			<slot name="all"> All </slot>
 		</button>
 		<button
 			v-for="option in options"
diff --git a/packages/ui/src/layouts/shared/console/components/ConsoleFilterPills.vue b/packages/ui/src/layouts/shared/console/components/ConsoleFilterPills.vue
index a01c058e8b..9af350b094 100644
--- a/packages/ui/src/layouts/shared/console/components/ConsoleFilterPills.vue
+++ b/packages/ui/src/layouts/shared/console/components/ConsoleFilterPills.vue
@@ -1,8 +1,6 @@
 <template>
 	<FilterPills v-model="selectedFilters" :options="pillOptions">
-		<template #all>
-			All
-		</template>
+		<template #all> All </template>
 	</FilterPills>
 </template>
 
diff --git a/packages/ui/src/layouts/shared/console/composables/console-filtering.ts b/packages/ui/src/layouts/shared/console/composables/console-filtering.ts
index 94e52b0170..0855d33fb3 100644
--- a/packages/ui/src/layouts/shared/console/composables/console-filtering.ts
+++ b/packages/ui/src/layouts/shared/console/composables/console-filtering.ts
@@ -1,5 +1,6 @@
 import type { Terminal } from '@xterm/xterm'
 import { ref } from 'vue'
+
 import type { LogLevel } from '../types'
 import { detectLogLevel } from './log-level'
 
diff --git a/packages/ui/src/layouts/shared/console/composables/index.ts b/packages/ui/src/layouts/shared/console/composables/index.ts
index da04005b36..af242b3171 100644
--- a/packages/ui/src/layouts/shared/console/composables/index.ts
+++ b/packages/ui/src/layouts/shared/console/composables/index.ts
@@ -1,2 +1,2 @@
+export { type FilterPredicate, rewriteTerminal, useConsoleFilters } from './console-filtering'
 export { detectLogLevel } from './log-level'
-export { useConsoleFilters, rewriteTerminal, type FilterPredicate } from './console-filtering'
diff --git a/packages/ui/src/layouts/shared/console/layout.vue b/packages/ui/src/layouts/shared/console/layout.vue
index 2ad62a6b17..dec5ec4959 100644
--- a/packages/ui/src/layouts/shared/console/layout.vue
+++ b/packages/ui/src/layouts/shared/console/layout.vue
@@ -23,8 +23,8 @@
 				/>
 				<ButtonStyled circular>
 					<button
-						aria-label="Open fullscreen"
 						v-tooltip="'Open fullscreen'"
+						aria-label="Open fullscreen"
 						@click="enterFullscreen"
 					>
 						<ExpandIcon />
@@ -188,12 +188,6 @@ function handleClear() {
 	ctx.onClear?.()
 }
 
-async function handleCopy() {
-	const predicate = buildFilterPredicate()
-	const lines = predicate ? ctx.logLines.value.filter(predicate) : ctx.logLines.value
-	await navigator.clipboard.writeText(lines.join('\n'))
-}
-
 async function handleShare() {
 	const predicate = buildFilterPredicate()
 	const lines = predicate ? ctx.logLines.value.filter(predicate) : ctx.logLines.value
diff --git a/packages/ui/src/layouts/shared/console/providers/console-manager.ts b/packages/ui/src/layouts/shared/console/providers/console-manager.ts
index 3bf93b5f66..804cce1dfc 100644
--- a/packages/ui/src/layouts/shared/console/providers/console-manager.ts
+++ b/packages/ui/src/layouts/shared/console/providers/console-manager.ts
@@ -1,5 +1,7 @@
 import type { ComputedRef, Ref } from 'vue'
+
 import { createContext } from '#ui/providers/create-context'
+
 import type { LogSource } from '../types'
 
 export interface ConsoleManagerContext {
@@ -19,5 +21,7 @@ export interface ConsoleManagerContext {
 	shareDisabled?: Ref<boolean> | ComputedRef<boolean>
 }
 
-export const [injectConsoleManager, provideConsoleManager] =
-	createContext<ConsoleManagerContext>('ConsolePageLayout', 'consoleManagerContext')
+export const [injectConsoleManager, provideConsoleManager] = createContext<ConsoleManagerContext>(
+	'ConsolePageLayout',
+	'consoleManagerContext',
+)

From 3ee021ccd0a02408c163071db6bbb6a343b2d1e0 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 1 Apr 2026 18:00:01 +0200
Subject: [PATCH 08/50] fix: use reset not clear

---
 .../src/layouts/shared/console/composables/console-filtering.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/layouts/shared/console/composables/console-filtering.ts b/packages/ui/src/layouts/shared/console/composables/console-filtering.ts
index 0855d33fb3..b0b1e7064b 100644
--- a/packages/ui/src/layouts/shared/console/composables/console-filtering.ts
+++ b/packages/ui/src/layouts/shared/console/composables/console-filtering.ts
@@ -46,7 +46,7 @@ export function rewriteTerminal(
 	allLines: string[],
 	predicate: FilterPredicate | null,
 ) {
-	terminal.clear()
+	terminal.reset()
 	terminal.write('\x1b[?25l')
 
 	const filtered = predicate ? allLines.filter(predicate) : allLines

From 277d7dfdd4b56b5f45cf7c6f299361e16ef4ce58 Mon Sep 17 00:00:00 2001
From: Truman Gao <106889354+tdgao@users.noreply.github.com>
Date: Thu, 2 Apr 2026 12:05:37 -0700
Subject: [PATCH 09/50] feat: shared server header & overview page for app and
 website (#5736)

* feat: implement shared server header for app and website

* feat: implement wrapped overview page with shared composable and hook it up

* pnpm prepr

* fix: bugs

* qa: cleanup

* feat: root.vue shared layout

* feat: delete old options pages + fix discovery frontend

* fix: discovery

* fix: misc style/layout issues

* fix page padding

* fix: modal height jankiness

* feat: implement server install content in app and server setup modal with DI

* fix: spacing

* remove servers in app feature flag

* Revert "remove servers in app feature flag"

This reverts commit 86e284c4bdd6fa42c3c8fbaf1efbec41f4d1c6d2.

* fix: qa

* feat: remove legacy components from apps/frontend/src/components/ui/servers

---------

Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>
---
 apps/app-frontend/src/App.vue                 |    7 +-
 .../src/components/ui/NavButton.vue           |    1 +
 .../src/components/ui/SearchCard.vue          |   42 +-
 .../app-frontend/src/locales/en-US/index.json |    9 -
 apps/app-frontend/src/pages/Browse.vue        |  140 +-
 .../src/pages/hosting/manage/Index.vue        |  370 +---
 .../src/pages/hosting/manage/Overview.vue     |    7 +
 .../src/pages/hosting/manage/index.js         |    3 +-
 .../providers/setup/server-install-content.ts |  393 ++++
 apps/app-frontend/src/routes.js               |    7 +-
 apps/app-frontend/tsconfig.app.json           |    2 +-
 .../servers => brand}/ModrinthServersIcon.vue |    0
 .../notice => admin}/AssignNoticeModal.vue    |    0
 .../components/ui/servers/LoaderSelector.vue  |   96 -
 .../ui/servers/LoaderSelectorCard.vue         |   68 -
 .../src/components/ui/servers/LogLine.vue     |   91 -
 .../ui/servers/PanelServerActionButton.vue    |  276 ---
 .../ui/servers/PanelServerStatus.vue          |   75 -
 .../components/ui/servers/PanelSpinner.vue    |   22 -
 .../components/ui/servers/PanelTerminal.vue   | 1414 ---------------
 .../PlatformChangeModpackVersionModal.vue     |  163 --
 .../ui/servers/PlatformVersionSelectModal.vue |  538 ------
 .../src/components/ui/servers/SaveBanner.vue  |   17 -
 .../components/ui/servers/ServerSidebar.vue   |   52 -
 .../ui/servers/TeleportOverflowMenu.vue       |  438 -----
 .../ui/servers/icons/ChevronDownIcon.vue      |   16 -
 .../ui/servers/icons/ChevronUpIcon.vue        |   16 -
 .../ui/servers/icons/CodeFileIcon.vue         |   18 -
 .../ui/servers/icons/CogFolderIcon.vue        |   26 -
 .../components/ui/servers/icons/EarthIcon.vue |   20 -
 .../ui/servers/icons/FullscreenIcon.vue       |   19 -
 .../ui/servers/icons/ImageFileIcon.vue        |   18 -
 .../ui/servers/icons/LoaderIcon.vue           |   15 -
 .../ui/servers/icons/LoadingIcon.vue          |    9 -
 .../ui/servers/icons/MinimizeIcon.vue.vue     |   19 -
 .../ui/servers/icons/PanelErrorIcon.vue       |   16 -
 .../components/ui/servers/icons/SlashIcon.vue |   10 -
 .../ui/servers/icons/TextFileIcon.vue         |   20 -
 .../src/components/ui/servers/icons/Timer.vue |   17 -
 .../ui/servers/notice/NoticeDashboardItem.vue |  127 --
 .../src/components/ui/thread/ThreadView.vue   |    2 +-
 apps/frontend/src/layouts/default.vue         |    2 +-
 apps/frontend/src/locales/en-US/index.json    |   12 -
 .../frontend/src/pages/admin/billing/[id].vue |    2 +-
 .../src/pages/admin/servers/notices.vue       |    2 +-
 .../src/pages/discover/[type]/index.vue       |    4 +-
 apps/frontend/src/pages/hosting/index.vue     |    2 +-
 .../src/pages/hosting/manage/[id].vue         | 1608 +----------------
 .../src/pages/hosting/manage/[id]/index.vue   |  229 +--
 .../src/pages/hosting/manage/[id]/options.vue |   56 -
 .../hosting/manage/[id]/options/advanced.vue  |    7 -
 .../hosting/manage/[id]/options/billing.vue   |    7 -
 .../hosting/manage/[id]/options/index.vue     |    7 -
 .../hosting/manage/[id]/options/loader.vue    |   16 -
 .../hosting/manage/[id]/options/network.vue   |    7 -
 .../manage/[id]/options/properties.vue        |    7 -
 .../src/pages/settings/billing/index.vue      |    2 +-
 apps/frontend/src/store/console.ts            |  165 +-
 packages/ui/package.json                      |    3 +
 .../billing/ServersPurchase1Region.vue        |    2 +-
 .../ui/src/components/modal/TabbedModal.vue   |    2 +-
 .../servers}/ServerSettingsModal.vue          |  181 +-
 packages/ui/src/components/servers/index.ts   |    4 +-
 .../servers/labels/ServerGameLabel.vue        |   17 +-
 .../servers/labels/ServerLoaderLabel.vue      |   17 +-
 .../marketing/MedalServerCountdown.vue        |   34 +-
 .../src/components/servers/marketing/index.ts |    1 +
 .../server-header/PanelActionConfirmModal.vue |   71 +
 .../server-header/PanelServerActionButton.vue |   84 +
 .../server-header/PanelServerOverflowMenu.vue |  145 ++
 .../server-header/ServerManageHeader.vue      |  162 ++
 .../components/servers/server-header/index.ts |    3 +
 .../server-header/use-server-power-action.ts  |  136 ++
 packages/ui/src/composables/index.ts          |    4 +
 packages/ui/src/composables/server-console.ts |  120 ++
 .../composables/server-manage-core-runtime.ts |  391 ++++
 .../ui/src/composables}/use-server-image.ts   |   46 +-
 .../ui/src/composables}/use-server-project.ts |    9 +-
 .../server-settings/pages/installation.vue    |   18 +-
 .../server-settings/pages/properties.vue      |    5 +-
 .../layouts/shared/server-settings/tabs.ts    |   18 +-
 .../hosting/manage/[id]/onboarding.vue        |   22 +
 .../manage/components/ServerManageStats.vue   |   75 +-
 .../wrapped/hosting/manage/content.vue        |   14 +-
 .../layouts/wrapped/hosting/manage/index.vue  |   18 +-
 .../wrapped/hosting/manage/overview.vue       |  219 +++
 .../layouts/wrapped/hosting/manage/root.vue   | 1292 +++++++++++++
 packages/ui/src/layouts/wrapped/index.ts      |    2 +
 packages/ui/src/locales/en-US/index.json      |   15 +
 packages/ui/src/providers/index.ts            |    1 +
 packages/ui/src/providers/server-context.ts   |    5 +
 .../ui/src/providers/server-settings-modal.ts |   17 +
 pnpm-lock.yaml                                |  170 +-
 93 files changed, 3775 insertions(+), 6282 deletions(-)
 create mode 100644 apps/app-frontend/src/pages/hosting/manage/Overview.vue
 create mode 100644 apps/app-frontend/src/providers/setup/server-install-content.ts
 rename apps/frontend/src/components/{ui/servers => brand}/ModrinthServersIcon.vue (100%)
 rename apps/frontend/src/components/ui/{servers/notice => admin}/AssignNoticeModal.vue (100%)
 delete mode 100644 apps/frontend/src/components/ui/servers/LoaderSelector.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/LoaderSelectorCard.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/LogLine.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/PanelServerStatus.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/PanelSpinner.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/PanelTerminal.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/SaveBanner.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/ServerSidebar.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/TeleportOverflowMenu.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/icons/ChevronDownIcon.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/icons/ChevronUpIcon.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/icons/CodeFileIcon.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/icons/CogFolderIcon.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/icons/EarthIcon.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/icons/FullscreenIcon.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/icons/ImageFileIcon.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/icons/LoadingIcon.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/icons/MinimizeIcon.vue.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/icons/PanelErrorIcon.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/icons/SlashIcon.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/icons/TextFileIcon.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/icons/Timer.vue
 delete mode 100644 apps/frontend/src/components/ui/servers/notice/NoticeDashboardItem.vue
 delete mode 100644 apps/frontend/src/pages/hosting/manage/[id]/options.vue
 delete mode 100644 apps/frontend/src/pages/hosting/manage/[id]/options/advanced.vue
 delete mode 100644 apps/frontend/src/pages/hosting/manage/[id]/options/billing.vue
 delete mode 100644 apps/frontend/src/pages/hosting/manage/[id]/options/index.vue
 delete mode 100644 apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue
 delete mode 100644 apps/frontend/src/pages/hosting/manage/[id]/options/network.vue
 delete mode 100644 apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
 rename {apps/app-frontend/src/components/ui/modal => packages/ui/src/components/servers}/ServerSettingsModal.vue (55%)
 rename {apps/frontend/src/components/ui => packages/ui/src/components}/servers/marketing/MedalServerCountdown.vue (80%)
 create mode 100644 packages/ui/src/components/servers/server-header/PanelActionConfirmModal.vue
 create mode 100644 packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
 create mode 100644 packages/ui/src/components/servers/server-header/PanelServerOverflowMenu.vue
 create mode 100644 packages/ui/src/components/servers/server-header/ServerManageHeader.vue
 create mode 100644 packages/ui/src/components/servers/server-header/index.ts
 create mode 100644 packages/ui/src/components/servers/server-header/use-server-power-action.ts
 create mode 100644 packages/ui/src/composables/server-console.ts
 create mode 100644 packages/ui/src/composables/server-manage-core-runtime.ts
 rename {apps/frontend/src/composables/servers => packages/ui/src/composables}/use-server-image.ts (75%)
 rename {apps/frontend/src/composables/servers => packages/ui/src/composables}/use-server-project.ts (70%)
 rename apps/frontend/src/components/ui/servers/ServerStats.vue => packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue (78%)
 create mode 100644 packages/ui/src/layouts/wrapped/hosting/manage/overview.vue
 create mode 100644 packages/ui/src/layouts/wrapped/hosting/manage/root.vue
 create mode 100644 packages/ui/src/providers/server-settings-modal.ts

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 041209b551..54d9320c26 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -5,6 +5,7 @@ import {
 	nodeAuthState,
 	PanelVersionFeature,
 	TauriModrinthClient,
+	VerboseLoggingFeature,
 } from '@modrinth/api-client'
 import {
 	ArrowBigUpDashIcon,
@@ -146,6 +147,7 @@ const tauriApiClient = new TauriModrinthClient({
 			token: async () => (await getCreds())?.session,
 		}),
 		new PanelVersionFeature(),
+		new VerboseLoggingFeature(),
 	],
 })
 provideModrinthClient(tauriApiClient)
@@ -420,6 +422,7 @@ const route = useRoute()
 
 const loading = useLoading()
 loading.setEnabled(false)
+loading.startLoading()
 
 const error = useError()
 const errorModal = ref()
@@ -1023,6 +1026,8 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				v-if="themeStore.featureFlags.servers_in_app"
 				v-tooltip.right="'Servers'"
 				to="/hosting/manage"
+				:is-primary="(r) => r.path === '/hosting/manage' || r.path === '/hosting/manage/'"
+				:is-subpage="(r) => r.path.startsWith('/hosting/manage/') && r.path !== '/hosting/manage/'"
 			>
 				<ServerIcon />
 			</NavButton>
@@ -1195,7 +1200,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				</div>
 			</transition>
 			<div
-				class="loading-indicator-container h-8 fixed z-50"
+				class="loading-indicator-container h-8 fixed z-50 pointer-events-none"
 				:style="{
 					top: 'calc(var(--top-bar-height))',
 					left: 'calc(var(--left-bar-width))',
diff --git a/apps/app-frontend/src/components/ui/NavButton.vue b/apps/app-frontend/src/components/ui/NavButton.vue
index e65f5b3ecd..7790d14bcf 100644
--- a/apps/app-frontend/src/components/ui/NavButton.vue
+++ b/apps/app-frontend/src/components/ui/NavButton.vue
@@ -3,6 +3,7 @@
 		v-if="typeof to === 'string'"
 		:to="to"
 		v-bind="$attrs"
+		:active-class="isSubpage ? '' : undefined"
 		:class="{
 			'router-link-active': isPrimary && isPrimary(route),
 			'subpage-active': isSubpage && isSubpage(route),
diff --git a/apps/app-frontend/src/components/ui/SearchCard.vue b/apps/app-frontend/src/components/ui/SearchCard.vue
index 51d44f9069..9bfc7f5bdc 100644
--- a/apps/app-frontend/src/components/ui/SearchCard.vue
+++ b/apps/app-frontend/src/components/ui/SearchCard.vue
@@ -39,19 +39,11 @@
 				>
 					<SpinnerIcon v-if="installing" class="animate-spin" />
 					<template v-else-if="!installed">
-						<DownloadIcon v-if="modpack || instance" />
+						<DownloadIcon v-if="shouldUseInstallIcon" />
 						<PlusIcon v-else />
 					</template>
 					<CheckIcon v-else />
-					{{
-						installing
-							? 'Installing'
-							: installed
-								? 'Installed'
-								: modpack || instance
-									? 'Install'
-									: 'Add to an instance'
-					}}
+					{{ installActionLabel }}
 				</button>
 			</ButtonStyled>
 		</template>
@@ -109,14 +101,44 @@ const props = defineProps({
 		type: String,
 		default: null,
 	},
+	customInstall: {
+		type: Function,
+		default: null,
+	},
 })
 
 const emit = defineEmits(['open', 'install'])
 
 const installing = ref(false)
+const installActionLabel = computed(() =>
+	installing.value
+		? 'Installing'
+		: props.installed
+			? 'Installed'
+			: props.customInstall || modpack.value || props.instance
+				? 'Install'
+				: 'Add to an instance',
+)
+const shouldUseInstallIcon = computed(
+	() => !!props.customInstall || !!modpack.value || !!props.instance,
+)
 
 async function install() {
 	installing.value = true
+	if (props.customInstall) {
+		try {
+			const didInstall = await props.customInstall(props.project)
+			if (didInstall !== false) {
+				emit('install', props.project.project_id ?? props.project.id)
+			}
+		} catch (err) {
+			handleError(err)
+		} finally {
+			installing.value = false
+		}
+		return
+	}
+
 	await installVersion(
 		props.project.project_id ?? props.project.id,
 		null,
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index d93726e438..f7f558ae65 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -185,9 +185,6 @@
   "app.modal.update-to-play.update-required-description": {
     "message": "An update is required to play {name}. Please update to the latest version to launch the game."
   },
-  "app.server-settings.failed-to-load-server": {
-    "message": "Failed to load server settings"
-  },
   "app.settings.developer-mode-enabled": {
     "message": "Developer mode enabled."
   },
@@ -601,11 +598,5 @@
   },
   "search.filter.locked.server-loader.title": {
     "message": "Loader is provided by the server"
-  },
-  "servers.busy.installing": {
-    "message": "Server is installing"
-  },
-  "servers.busy.syncing-content": {
-    "message": "Content sync in progress"
   }
 }
diff --git a/apps/app-frontend/src/pages/Browse.vue b/apps/app-frontend/src/pages/Browse.vue
index f7ec4dcef4..cac5cbff29 100644
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -5,6 +5,7 @@ import {
 	ClipboardCopyIcon,
 	ExternalIcon,
 	GlobeIcon,
+	LeftArrowIcon,
 	PlayIcon,
 	PlusIcon,
 	SearchIcon,
@@ -16,6 +17,7 @@ import {
 	ButtonStyled,
 	Checkbox,
 	commonMessages,
+	CreationFlowModal,
 	defineMessages,
 	DropdownSelect,
 	injectNotificationManager,
@@ -39,15 +41,14 @@ import type { LocationQuery } from 'vue-router'
 import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
-import type Instance from '@/components/ui/Instance.vue'
 import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
 import SearchCard from '@/components/ui/SearchCard.vue'
 import { get_project_v3, get_search_results_v3 } from '@/helpers/cache.js'
 import { process_listener } from '@/helpers/events'
 import { get_by_profile_path } from '@/helpers/process'
 import {
-	get as getInstance,
 	get_installed_project_ids as getInstalledProjectIds,
+	get as getInstance,
 	kill,
 	list as listInstances,
 } from '@/helpers/profile.js'
@@ -55,6 +56,10 @@ import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
 import type { GameInstance } from '@/helpers/types'
 import { add_server_to_profile, get_profile_worlds, getServerLatency } from '@/helpers/worlds'
 import { injectServerInstall } from '@/providers/server-install'
+import {
+	createServerInstallContent,
+	provideServerInstallContent,
+} from '@/providers/setup/server-install-content'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { getServerAddress } from '@/store/install.js'
 
@@ -66,6 +71,31 @@ const debugLog = useDebugLogger('Browse')
 
 const router = useRouter()
 const route = useRoute()
+const serverSetupModalRef = ref<InstanceType<typeof CreationFlowModal> | null>(null)
+const serverInstallContent = createServerInstallContent({ serverSetupModalRef })
+provideServerInstallContent(serverInstallContent)
+const {
+	serverIdQuery,
+	serverFlowFrom,
+	isFromWorlds,
+	isServerContext,
+	isSetupServerContext,
+	effectiveServerWorldId,
+	serverContextServerData,
+	serverContentProjectIds,
+	serverBackUrl,
+	serverBackLabel,
+	serverBrowseHeading,
+	initServerContext,
+	watchServerContextChanges,
+	searchServerModpacks,
+	getServerProjectVersions,
+	enforceSetupModpackRoute,
+	installProjectToServer,
+	onServerFlowBack,
+	handleServerModpackFlowCreate,
+	markServerProjectInstalled,
+} = serverInstallContent
 
 const projectTypes = computed(() => {
 	debugLog('projectTypes computed', route.params.projectType)
@@ -110,7 +140,6 @@ const installedProjectIds: Ref<string[] | null> = ref(null)
 const instanceHideInstalled = ref(false)
 const newlyInstalled = ref<string[]>([])
 const isServerInstance = ref(false)
-const isFromWorlds = computed(() => route.query.from === 'worlds')
 
 if (isFromWorlds.value && route.params.projectType !== 'server') {
 	router.replace({
@@ -119,16 +148,28 @@ if (isFromWorlds.value && route.params.projectType !== 'server') {
 	})
 }
 
+enforceSetupModpackRoute(route.params.projectType as string | undefined)
+
 const allInstalledIds = computed(
 	() => new Set([...newlyInstalled.value, ...(installedProjectIds.value ?? [])]),
 )
 
-const PERSISTENT_QUERY_PARAMS = ['i', 'ai', 'from']
+const PERSISTENT_QUERY_PARAMS = ['i', 'ai', 'sid', 'wid', 'from']
+
+watchServerContextChanges()
 
 await initInstanceContext()
 
 async function initInstanceContext() {
-	debugLog('initInstanceContext', { queryI: route.query.i, queryAi: route.query.ai })
+	debugLog('initInstanceContext', {
+		queryI: route.query.i,
+		queryAi: route.query.ai,
+		querySid: route.query.sid,
+		queryWid: route.query.wid,
+		queryFrom: route.query.from,
+	})
+	await initServerContext()
+
 	if (route.query.i) {
 		instance.value = (await getInstance(route.query.i as string).catch(handleError)) ?? null
 		debugLog('instance loaded', {
@@ -267,6 +308,14 @@ const activeGameVersion = computed(() => {
 	return instance.value?.game_version ?? null
 })
 
+function onSearchResultInstalled(id: string) {
+	if (isServerContext.value) {
+		markServerProjectInstalled(id)
+		return
+	}
+	newlyInstalled.value.push(id)
+}
+
 const serverHits = shallowRef<Labrinth.Search.v3.ResultSearchProject[]>([])
 const filteredServerHits = computed(() => {
 	if (!instanceHideInstalled.value || allInstalledIds.value.size === 0) return serverHits.value
@@ -581,11 +630,10 @@ async function refreshSearch() {
 				page: 1,
 			}
 		} else {
-			if (instance.value) {
-				const allInstalledIds = new Set([
-					...newlyInstalled.value,
-					...(installedProjectIds.value ?? []),
-				])
+			if (instance.value || isServerContext.value) {
+				const allInstalledIds = instance.value
+					? new Set([...newlyInstalled.value, ...(installedProjectIds.value ?? [])])
+					: serverContentProjectIds.value
 
 				rawResults.result.hits = rawResults.result.hits.map((val) => ({
 					...val,
@@ -625,6 +673,13 @@ async function refreshSearch() {
 			}
 		}
 
+		if (serverIdQuery.value) {
+			persistentParams.sid = serverIdQuery.value
+			if (effectiveServerWorldId.value) {
+				persistentParams.wid = effectiveServerWorldId.value
+			}
+		}
+
 		if (instanceHideInstalled.value) {
 			persistentParams.ai = 'true'
 		} else {
@@ -673,6 +728,11 @@ function clearSearch() {
 watch(
 	() => route.params.projectType as ProjectType,
 	async (newType) => {
+		if (isSetupServerContext.value) {
+			enforceSetupModpackRoute(newType)
+			if (newType !== 'modpack') return
+		}
+
 		// Check if the newType is not the same as the current value
 		if (!newType || newType === projectType.value) return
 
@@ -731,10 +791,20 @@ const selectableProjectTypes = computed(() => {
 	if (route.query.from) {
 		params.from = route.query.from
 	}
+	if (route.query.sid) {
+		params.sid = route.query.sid
+	}
+	if (effectiveServerWorldId.value) {
+		params.wid = effectiveServerWorldId.value
+	}
 
 	const queryString = new URLSearchParams(params as Record<string, string>).toString()
 	const suffix = queryString ? `?${queryString}` : ''
 
+	if (isSetupServerContext.value) {
+		return [{ label: 'Modpacks', href: `/browse/modpack${suffix}` }]
+	}
+
 	if (isFromWorlds.value) {
 		return [{ label: 'Servers', href: `/browse/server${suffix}` }]
 	}
@@ -897,7 +967,24 @@ previousFilterState.value = JSON.stringify({
 		</template>
 	</Teleport>
 	<div ref="searchWrapper" class="flex flex-col gap-3 p-6">
-		<template v-if="instance">
+		<template v-if="isServerContext && serverContextServerData">
+			<div class="mb-1 flex flex-wrap items-center justify-between gap-3">
+				<div class="flex min-w-0 flex-col gap-1">
+					<span class="text-lg font-bold text-contrast">{{ serverContextServerData.name }}</span>
+					<span class="text-sm font-medium text-secondary">
+						{{ serverContextServerData.loader }} {{ serverContextServerData.mc_version }}
+					</span>
+				</div>
+				<ButtonStyled>
+					<button @click="router.push(serverBackUrl)">
+						<LeftArrowIcon />
+						{{ serverBackLabel }}
+					</button>
+				</ButtonStyled>
+			</div>
+			<h1 class="m-0 mb-1 text-xl font-extrabold">{{ serverBrowseHeading }}</h1>
+		</template>
+		<template v-else-if="instance">
 			<InstanceIndicator :instance="instance" :back-tab="isFromWorlds ? 'worlds' : undefined" />
 			<h1 class="m-0 mb-1 text-xl">
 				{{
@@ -911,7 +998,7 @@ previousFilterState.value = JSON.stringify({
 				be lost when you update the server instance content.
 			</Admonition>
 		</template>
-		<NavTabs :links="selectableProjectTypes" />
+		<NavTabs v-if="!isServerContext" :links="selectableProjectTypes" />
 		<StyledInput
 			v-model="query"
 			:icon="SearchIcon"
@@ -1104,12 +1191,17 @@ previousFilterState.value = JSON.stringify({
 									loader.supported_project_types?.includes(projectType),
 							),
 						]"
-						:installed="result.installed || allInstalledIds.has(result.project_id || '')"
-						@install="
-							(id) => {
-								newlyInstalled.push(id)
-							}
+						:installed="
+							result.installed ||
+							allInstalledIds.has(result.project_id || '') ||
+							serverContentProjectIds.has(result.project_id || '')
 						"
+						:custom-install="
+							isServerContext && ['modpack', 'mod', 'plugin', 'datapack'].includes(projectType)
+								? installProjectToServer
+								: undefined
+						"
+						@install="onSearchResultInstalled"
 						@contextmenu.prevent.stop="(event: any) => handleRightClick(event, result)"
 					/>
 				</template>
@@ -1128,5 +1220,19 @@ previousFilterState.value = JSON.stringify({
 				/>
 			</div>
 		</div>
+
+		<CreationFlowModal
+			v-if="isServerContext && projectType === 'modpack'"
+			ref="serverSetupModalRef"
+			:type="serverFlowFrom === 'reset-server' ? 'reset-server' : 'server-onboarding'"
+			:available-loaders="['vanilla', 'fabric', 'neoforge', 'forge', 'quilt', 'paper', 'purpur']"
+			:show-snapshot-toggle="true"
+			:on-back="onServerFlowBack"
+			:search-modpacks="searchServerModpacks"
+			:get-project-versions="getServerProjectVersions"
+			@hide="() => {}"
+			@browse-modpacks="() => {}"
+			@create="handleServerModpackFlowCreate"
+		/>
 	</div>
 </template>
diff --git a/apps/app-frontend/src/pages/hosting/manage/Index.vue b/apps/app-frontend/src/pages/hosting/manage/Index.vue
index fc1015e7a0..1b9eb37ab7 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Index.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Index.vue
@@ -1,346 +1,80 @@
 <template>
-	<div class="mx-auto w-full max-w-[1280px] px-6 pb-6">
-		<div v-if="isLoading" class="py-8">
-			<LoadingIndicator />
-		</div>
-		<div v-else-if="hasError" class="py-8 text-secondary">Failed to load server.</div>
-		<template v-else>
-			<!-- TODO-SERVERS: make a shared server header component for website and app to share -->
-			<RouterLink
-				to="/hosting/manage"
-				class="breadcrumb goto-link mt-6 mb-4 flex w-fit items-center"
-			>
-				<LeftArrowIcon />
-				All servers
-			</RouterLink>
-			<ContentPageHeader class="mb-4">
-				<template #icon>
-					<ServerIcon
-						:image="
-							server.is_medal
-								? 'https://cdn-raw.modrinth.com/medal_icon.webp'
-								: (serverImage ?? undefined)
-						"
-					/>
-				</template>
-				<template #title>
-					{{ server.name || 'Server' }}
-				</template>
-				<template #stats>
-					<div
-						v-if="server.flows?.intro"
-						class="flex items-center gap-2 font-semibold text-secondary"
-					>
-						<SettingsIcon />
-						Configuring server...
-					</div>
-					<div v-else class="flex flex-wrap items-center gap-2">
-						<div v-if="server.loader" class="flex items-center gap-2 font-medium capitalize">
-							<LoaderIcon :loader="server.loader" class="flex shrink-0 [&&]:size-5" />
-							{{ server.loader }} {{ server.mc_version }}
-						</div>
-
-						<div
-							v-if="server.loader && server.net?.domain"
-							class="h-1.5 w-1.5 rounded-full bg-surface-5"
-						/>
-
-						<div
-							v-if="server.net?.domain"
-							v-tooltip="'Copy server address'"
-							class="flex cursor-pointer items-center gap-2 font-medium hover:underline"
-							@click="copyServerAddress"
-						>
-							<LinkIcon class="flex size-5 shrink-0" />
-							{{ server.net.domain }}.modrinth.gg
-						</div>
-
-						<div
-							v-if="serverProject && (server.loader || server.net?.domain)"
-							class="h-1.5 w-1.5 rounded-full bg-surface-5"
-						/>
-
-						<div v-if="serverProject" class="flex items-center gap-1.5 font-medium text-primary">
-							Linked to
-							<Avatar :src="serverProject.icon_url" :alt="serverProject.title" size="24px" />
-							<RouterLink :to="serverProjectLink" class="truncate text-primary hover:underline">
-								{{ serverProject.title }}
-							</RouterLink>
-						</div>
-					</div>
-				</template>
-				<template #actions>
-					<ButtonStyled circular size="large">
-						<button v-tooltip="'Server settings'" @click="openServerSettingsModal">
-							<SettingsIcon />
-						</button>
-					</ButtonStyled>
-				</template>
-			</ContentPageHeader>
-
-			<div class="mb-4">
-				<NavTabs :links="tabs" />
-			</div>
-
-			<div class="pt-2">
-				<Suspense>
-					<ServerSettingsModal ref="serverSettingsModal" />
-				</Suspense>
+	<div class="h-full w-full py-6">
+		<ServersManageRootLayout
+			:server-id="serverId"
+			:reload-page="() => router.go(0)"
+			:resolve-viewer="resolveViewer"
+			:show-uptime="false"
+			:show-copy-id-action="themeStore.devMode"
+			:navigate-to-billing="() => router.push('/settings/billing')"
+			:navigate-to-servers="() => router.push('/hosting/manage')"
+			:browse-modpacks="
+				({ serverId: sid, worldId: wid, from }) => {
+					router.push({
+						path: '/browse/modpack',
+						query: { sid, wid: wid ?? undefined, from },
+					})
+				}
+			"
+			:browse-content="
+				({ serverId: sid, worldId: wid, type }) => {
+					router.push({
+						path: `/browse/${type}`,
+						query: { sid, wid: wid ?? undefined },
+					})
+				}
+			"
+		>
+			<template #default="{ onReinstall, onReinstallFailed }">
 				<RouterView v-slot="{ Component }">
 					<template v-if="Component">
 						<Suspense>
-							<component :is="Component" />
+							<component
+								:is="Component"
+								@reinstall="onReinstall"
+								@reinstall-failed="onReinstallFailed"
+							/>
 							<template #fallback>
 								<LoadingIndicator />
 							</template>
 						</Suspense>
 					</template>
 				</RouterView>
-			</div>
-		</template>
+			</template>
+		</ServersManageRootLayout>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { type Archon, clearNodeAuthState, setNodeAuthState } from '@modrinth/api-client'
-import {
-	BoxesIcon,
-	DatabaseBackupIcon,
-	FolderOpenIcon,
-	LeftArrowIcon,
-	LinkIcon,
-	SettingsIcon,
-} from '@modrinth/assets'
-import {
-	Avatar,
-	type BusyReason,
-	ButtonStyled,
-	ContentPageHeader,
-	defineMessage,
-	injectModrinthClient,
-	injectNotificationManager,
-	LoaderIcon,
-	LoadingIndicator,
-	NavTabs,
-	provideModrinthServerContext,
-	ServerIcon,
-} from '@modrinth/ui'
-import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, onUnmounted, reactive, ref, watch } from 'vue'
-import { RouterLink, useRoute } from 'vue-router'
+import type { Labrinth } from '@modrinth/api-client'
+import { LoadingIndicator, ServersManageRootLayout } from '@modrinth/ui'
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
-import ServerSettingsModal from '@/components/ui/modal/ServerSettingsModal.vue'
+import { get_user } from '@/helpers/cache'
+import { get as getCreds } from '@/helpers/mr_auth'
+import { useTheming } from '@/store/theme'
 
 const route = useRoute()
-const client = injectModrinthClient()
-const queryClient = useQueryClient()
-const { addNotification } = injectNotificationManager()
+const router = useRouter()
+const themeStore = useTheming()
 
 const serverId = computed(() => {
 	const rawId = route.params.id
 	return Array.isArray(rawId) ? rawId[0] : (rawId ?? '')
 })
 
-const basePath = computed(() => `/hosting/manage/${encodeURIComponent(serverId.value)}`)
-
-const server = ref<Archon.Servers.v0.Server>({} as Archon.Servers.v0.Server)
-const worldId = ref<string | null>(null)
-const serverSettingsModal = ref<InstanceType<typeof ServerSettingsModal> | null>(null)
-
-const serverQuery = useQuery({
-	queryKey: computed(() => ['servers', 'detail', serverId.value]),
-	queryFn: () => client.archon.servers_v0.get(serverId.value),
-	enabled: computed(() => !!serverId.value),
-})
-
-const serverV1Query = useQuery({
-	queryKey: computed(() => ['servers', 'v1', 'detail', serverId.value]),
-	queryFn: () => client.archon.servers_v1.get(serverId.value),
-	enabled: computed(() => !!serverId.value),
-})
-
-watch(
-	() => serverQuery.data.value,
-	(serverData) => {
-		if (serverData) {
-			server.value = serverData
-		}
-	},
-	{ immediate: true },
-)
-
-watch(
-	() => serverV1Query.data.value,
-	(serverData) => {
-		if (!serverData) return
-		const activeWorld = serverData.worlds.find((world) => world.is_active)
-		worldId.value = activeWorld?.id ?? serverData.worlds[0]?.id ?? null
-	},
-	{ immediate: true },
-)
-
-const isLoading = computed(() => serverQuery.isPending.value || serverV1Query.isPending.value)
-const hasError = computed(() => !!serverQuery.error.value || !!serverV1Query.error.value)
-
-const { data: serverProject } = useQuery({
-	queryKey: computed(() => ['server-project', server.value.upstream?.project_id]),
-	queryFn: async () => {
-		if (!server.value.upstream?.project_id) return null
-		return await client.labrinth.projects_v2.get(server.value.upstream.project_id)
-	},
-	enabled: computed(() => !!server.value.upstream?.project_id),
-})
-
-const serverProjectLink = computed(() => {
-	if (!serverProject.value) return ''
-	return `/project/${serverProject.value.slug ?? serverProject.value.id}`
-})
-
-const isConnected = ref(true)
-const powerState = ref<Archon.Websocket.v0.PowerState>('stopped')
-const isServerRunning = computed(() => powerState.value === 'running')
-const backupsState = reactive(new Map())
-const isSyncingContent = ref(false)
-
-const busyReasons = computed<BusyReason[]>(() => {
-	const reasons: BusyReason[] = []
-	if (server.value?.status === 'installing') {
-		reasons.push({
-			reason: defineMessage({
-				id: 'servers.busy.installing',
-				defaultMessage: 'Server is installing',
-			}),
-		})
-	}
-	if (isSyncingContent.value) {
-		reasons.push({
-			reason: defineMessage({
-				id: 'servers.busy.syncing-content',
-				defaultMessage: 'Content sync in progress',
-			}),
-		})
+async function resolveViewer(): Promise<{ userId: string | null; userRole: string | null }> {
+	const credentials = await getCreds().catch(() => null)
+	if (!credentials?.user_id) {
+		return { userId: null, userRole: null }
 	}
-	return reasons
-})
-
-const fsAuth = ref<{ url: string; token: string } | null>(null)
-const fsOps = ref<Archon.Websocket.v0.FilesystemOperation[]>([])
-const fsQueuedOps = ref<Archon.Websocket.v0.QueuedFilesystemOp[]>([])
-
-async function processImageBlob(blob: Blob, size: number): Promise<string> {
-	return new Promise((resolve) => {
-		const canvas = document.createElement('canvas')
-		const ctx = canvas.getContext('2d')!
-		const img = new Image()
-		img.onload = () => {
-			canvas.width = size
-			canvas.height = size
-			ctx.drawImage(img, 0, 0, size, size)
-			const dataURL = canvas.toDataURL('image/png')
-			URL.revokeObjectURL(img.src)
-			resolve(dataURL)
-		}
-		img.src = URL.createObjectURL(blob)
-	})
-}
-
-const { data: serverImage } = useQuery({
-	queryKey: computed(() => ['server-icon', serverId.value, serverProject.value?.icon_url ?? null]),
-	queryFn: async (): Promise<string | null> => {
-		if (!serverId.value || server.value.status !== 'available') return null
 
-		try {
-			const blob = await client.kyros.files_v0.downloadFile('/server-icon-original.png')
-			return await processImageBlob(blob, 512)
-		} catch {
-			if (serverProject.value?.icon_url) {
-				return serverProject.value.icon_url
-			}
-			return null
-		}
-	},
-	enabled: computed(() => !!serverId.value && server.value.status === 'available'),
-})
-
-async function refreshFsAuth() {
-	if (!serverId.value) {
-		fsAuth.value = null
-		return
+	const user = await get_user(credentials.user_id, 'bypass').catch(() => null)
+	const typedUser = user as Labrinth.Users.v2.User | null
+	return {
+		userId: credentials.user_id,
+		userRole: typedUser?.role ?? null,
 	}
-	fsAuth.value = await queryClient.fetchQuery({
-		queryKey: ['servers', 'filesystem-auth', serverId.value],
-		queryFn: () => client.archon.servers_v0.getFilesystemAuth(serverId.value),
-	})
-}
-
-function markBackupCancelled(backupId: string) {
-	backupsState.delete(backupId)
-}
-
-function copyServerAddress() {
-	if (!server.value?.net?.domain) return
-	navigator.clipboard.writeText(server.value.net.domain + '.modrinth.gg')
-	addNotification({
-		title: 'Server address copied',
-		text: "Your server's address has been copied to your clipboard.",
-		type: 'success',
-	})
-}
-
-function openServerSettingsModal() {
-	if (!serverId.value) return
-	serverSettingsModal.value?.show({ serverId: serverId.value })
 }
-
-watch(
-	() => serverId.value,
-	() => {
-		fsAuth.value = null
-		void refreshFsAuth().catch(() => {})
-	},
-	{ immediate: true },
-)
-
-provideModrinthServerContext({
-	get serverId() {
-		return serverId.value
-	},
-	worldId,
-	server,
-	isConnected,
-	powerState,
-	isServerRunning,
-	backupsState,
-	markBackupCancelled,
-	isSyncingContent,
-	busyReasons,
-	fsAuth,
-	fsOps,
-	fsQueuedOps,
-	refreshFsAuth,
-})
-
-setNodeAuthState(() => fsAuth.value, refreshFsAuth)
-
-onUnmounted(() => {
-	clearNodeAuthState()
-})
-
-const tabs = computed(() => [
-	{
-		label: 'Content',
-		href: `${basePath.value}/content`,
-		icon: BoxesIcon,
-	},
-	{
-		label: 'Files',
-		href: `${basePath.value}/files`,
-		icon: FolderOpenIcon,
-	},
-	{
-		label: 'Backups',
-		href: `${basePath.value}/backups`,
-		icon: DatabaseBackupIcon,
-	},
-])
 </script>
diff --git a/apps/app-frontend/src/pages/hosting/manage/Overview.vue b/apps/app-frontend/src/pages/hosting/manage/Overview.vue
new file mode 100644
index 0000000000..7b29977bb4
--- /dev/null
+++ b/apps/app-frontend/src/pages/hosting/manage/Overview.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ServersManageOverviewPage } from '@modrinth/ui'
+</script>
+
+<template>
+	<ServersManageOverviewPage />
+</template>
diff --git a/apps/app-frontend/src/pages/hosting/manage/index.js b/apps/app-frontend/src/pages/hosting/manage/index.js
index 127c22afce..50052e3f9e 100644
--- a/apps/app-frontend/src/pages/hosting/manage/index.js
+++ b/apps/app-frontend/src/pages/hosting/manage/index.js
@@ -2,5 +2,6 @@ import Backups from './Backups.vue'
 import Content from './Content.vue'
 import Files from './Files.vue'
 import Index from './Index.vue'
+import Overview from './Overview.vue'
 
-export { Backups, Content, Files, Index }
+export { Backups, Content, Files, Index, Overview }
diff --git a/apps/app-frontend/src/providers/setup/server-install-content.ts b/apps/app-frontend/src/providers/setup/server-install-content.ts
new file mode 100644
index 0000000000..35919d9d73
--- /dev/null
+++ b/apps/app-frontend/src/providers/setup/server-install-content.ts
@@ -0,0 +1,393 @@
+import type { Archon, Labrinth } from '@modrinth/api-client'
+import {
+	createContext,
+	type CreationFlowContextValue,
+	injectModrinthClient,
+	injectNotificationManager,
+} from '@modrinth/ui'
+import { computed, type ComputedRef, nextTick, type Ref, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+type ServerFlowFrom = 'onboarding' | 'reset-server'
+type ServerInstallableType = 'modpack' | 'mod' | 'plugin' | 'datapack'
+
+type InstallableSearchResult = Labrinth.Search.v3.ResultSearchProject & {
+	installing?: boolean
+	installed?: boolean
+}
+
+interface ServerModpackSelectionRequest {
+	projectId: string
+	versionId: string
+	name: string
+	iconUrl?: string
+}
+
+interface ServerSetupModalHandle {
+	show: () => void | Promise<void>
+	hide: () => void
+	ctx?: CreationFlowContextValue | null
+}
+
+export interface ServerInstallContentContext {
+	serverIdQuery: ComputedRef<string | null>
+	worldIdQuery: ComputedRef<string | null>
+	browseFrom: ComputedRef<string | null>
+	serverFlowFrom: ComputedRef<ServerFlowFrom | null>
+	isFromWorlds: ComputedRef<boolean>
+	isServerContext: ComputedRef<boolean>
+	isSetupServerContext: ComputedRef<boolean>
+	effectiveServerWorldId: ComputedRef<string | null>
+	serverContextServerData: Ref<Archon.Servers.v0.Server | null>
+	serverContentProjectIds: Ref<Set<string>>
+	serverBackUrl: ComputedRef<string>
+	serverBackLabel: ComputedRef<string>
+	serverBrowseHeading: ComputedRef<string>
+	initServerContext: () => Promise<void>
+	watchServerContextChanges: () => void
+	searchServerModpacks: (
+		query: string,
+		limit?: number,
+	) => Promise<Labrinth.Projects.v2.SearchResult>
+	getServerProjectVersions: (projectId: string) => Promise<{ id: string }[]>
+	enforceSetupModpackRoute: (currentProjectType: string | undefined) => void
+	installProjectToServer: (project: InstallableSearchResult) => Promise<boolean>
+	onServerFlowBack: () => void
+	handleServerModpackFlowCreate: (config: CreationFlowContextValue) => Promise<void>
+	markServerProjectInstalled: (id: string) => void
+}
+
+export const [injectServerInstallContent, provideServerInstallContent] =
+	createContext<ServerInstallContentContext>('Browse', 'serverInstallContent')
+
+function readQueryString(value: unknown): string | null {
+	if (Array.isArray(value)) return value[0] ?? null
+	return typeof value === 'string' && value.length > 0 ? value : null
+}
+
+export function createServerInstallContent(opts: {
+	serverSetupModalRef: Ref<ServerSetupModalHandle | null>
+}) {
+	const { serverSetupModalRef } = opts
+	const route = useRoute()
+	const router = useRouter()
+	const client = injectModrinthClient()
+	const { handleError } = injectNotificationManager()
+
+	const serverIdQuery = computed(() => readQueryString(route.query.sid))
+	const worldIdQuery = computed(() => readQueryString(route.query.wid))
+	const browseFrom = computed(() => readQueryString(route.query.from))
+	const serverFlowFrom = computed<ServerFlowFrom | null>(() =>
+		browseFrom.value === 'onboarding' || browseFrom.value === 'reset-server'
+			? browseFrom.value
+			: null,
+	)
+
+	const isFromWorlds = computed(() => browseFrom.value === 'worlds')
+	const isServerContext = computed(() => !!serverIdQuery.value)
+	const isSetupServerContext = computed(() => !!serverIdQuery.value && !!serverFlowFrom.value)
+
+	const serverContextWorldId = ref<string | null>(worldIdQuery.value)
+	const serverContextServerData = ref<Archon.Servers.v0.Server | null>(null)
+	const serverContentProjectIds = ref<Set<string>>(new Set())
+	const effectiveServerWorldId = computed(() => worldIdQuery.value ?? serverContextWorldId.value)
+
+	const serverBackUrl = computed(() => {
+		const sid = serverIdQuery.value
+		if (!sid) return '/hosting/manage'
+		if (serverFlowFrom.value === 'onboarding') {
+			return `/hosting/manage/${sid}?resumeModal=setup-type`
+		}
+		if (serverFlowFrom.value === 'reset-server') {
+			return `/hosting/manage/${sid}?openSettings=installation`
+		}
+		return `/hosting/manage/${sid}/content`
+	})
+	const serverBackLabel = computed(() => {
+		if (serverFlowFrom.value === 'onboarding') return 'Back to setup'
+		if (serverFlowFrom.value === 'reset-server') return 'Cancel reset'
+		return 'Back to server'
+	})
+	const serverBrowseHeading = computed(() => {
+		if (serverFlowFrom.value === 'reset-server') {
+			return 'Select modpack to install after reset'
+		}
+		return 'Install content to server'
+	})
+
+	async function resolveServerContextWorldId(serverId: string) {
+		try {
+			const server = await client.archon.servers_v1.get(serverId)
+			const activeWorld = server.worlds.find((world) => world.is_active)
+			return activeWorld?.id ?? server.worlds[0]?.id ?? null
+		} catch (err) {
+			handleError(err as Error)
+			return null
+		}
+	}
+
+	async function refreshServerInstalledContent(serverId: string, worldId: string) {
+		try {
+			const content = await client.archon.content_v1.getAddons(serverId, worldId)
+			const ids = new Set(
+				(content.addons ?? [])
+					.map((addon) => addon.project_id)
+					.filter((projectId): projectId is string => !!projectId),
+			)
+			serverContentProjectIds.value = ids
+		} catch (err) {
+			handleError(err as Error)
+		}
+	}
+
+	async function initServerContext() {
+		const sid = serverIdQuery.value
+		if (!sid) return
+
+		try {
+			serverContextServerData.value = await client.archon.servers_v0.get(sid)
+		} catch (err) {
+			handleError(err as Error)
+		}
+
+		let resolvedWorldId = effectiveServerWorldId.value
+		if (!resolvedWorldId) {
+			resolvedWorldId = await resolveServerContextWorldId(sid)
+			if (resolvedWorldId) {
+				serverContextWorldId.value = resolvedWorldId
+			}
+		}
+
+		if (resolvedWorldId) {
+			await refreshServerInstalledContent(sid, resolvedWorldId)
+		}
+	}
+
+	function watchServerContextChanges() {
+		watch([serverIdQuery, effectiveServerWorldId], async ([sid, wid], [prevSid, prevWid]) => {
+			if (!sid) {
+				serverContextServerData.value = null
+				serverContentProjectIds.value = new Set()
+				return
+			}
+
+			if (sid !== prevSid) {
+				serverContentProjectIds.value = new Set()
+				try {
+					serverContextServerData.value = await client.archon.servers_v0.get(sid)
+				} catch (err) {
+					handleError(err as Error)
+				}
+			}
+
+			if (wid && (sid !== prevSid || wid !== prevWid)) {
+				await refreshServerInstalledContent(sid, wid)
+			}
+		})
+	}
+
+	function normalizeLoader(loader: string) {
+		return loader.toLowerCase().replaceAll('_', '').replaceAll('-', '').replaceAll(' ', '')
+	}
+
+	function getCompatibleLoaders(loader: string) {
+		const normalized = normalizeLoader(loader)
+		if (!normalized) return new Set<string>()
+		if (normalized === 'paper' || normalized === 'purpur' || normalized === 'spigot') {
+			return new Set(['paper', 'purpur', 'spigot', 'bukkit'])
+		}
+		if (normalized === 'neoforge' || normalized === 'neo') {
+			return new Set(['neoforge', 'neo'])
+		}
+		return new Set([normalized])
+	}
+
+	function enforceSetupModpackRoute(currentProjectType: string | undefined) {
+		if (!isSetupServerContext.value || currentProjectType === 'modpack') return
+		router.replace({
+			path: '/browse/modpack',
+			query: route.query,
+		})
+	}
+
+	async function searchServerModpacks(query: string, limit: number = 10) {
+		return client.labrinth.projects_v2.search({
+			query: query || undefined,
+			new_filters:
+				'project_types = "modpack" AND (client_side = "optional" OR client_side = "required") AND server_side = "required"',
+			limit,
+		})
+	}
+
+	async function getServerProjectVersions(projectId: string) {
+		const versions = await client.labrinth.versions_v3.getProjectVersions(projectId)
+		return versions.map((version) => ({ id: version.id }))
+	}
+
+	async function openServerModpackInstallFlow(request: ServerModpackSelectionRequest) {
+		if (!serverIdQuery.value || !effectiveServerWorldId.value) {
+			throw new Error('Missing server context')
+		}
+
+		const modalInstance = serverSetupModalRef.value
+		if (!modalInstance) return
+
+		modalInstance.show()
+		await nextTick()
+
+		const ctx = modalInstance.ctx
+		if (!ctx) return
+
+		ctx.setupType.value = 'modpack'
+		ctx.modpackSelection.value = {
+			projectId: request.projectId,
+			versionId: request.versionId,
+			name: request.name,
+			iconUrl: request.iconUrl,
+		}
+		ctx.modal.value?.setStage('final-config')
+	}
+
+	function getCurrentServerInstallType(): ServerInstallableType {
+		const raw = Array.isArray(route.params.projectType)
+			? route.params.projectType[0]
+			: route.params.projectType
+		if (raw === 'modpack' || raw === 'mod' || raw === 'plugin' || raw === 'datapack') {
+			return raw
+		}
+		throw new Error('This content type cannot be installed to a server from browse.')
+	}
+
+	async function installProjectToServer(project: InstallableSearchResult) {
+		const contentType = getCurrentServerInstallType()
+		const sid = serverIdQuery.value
+		const wid = effectiveServerWorldId.value
+		if (!sid || !wid) {
+			throw new Error('No server world is available for install.')
+		}
+
+		if (contentType === 'modpack') {
+			const versions = await client.labrinth.versions_v2.getProjectVersions(project.project_id, {
+				include_changelog: false,
+			})
+			const versionId = versions[0]?.id ?? project.version_id
+			if (!versionId) {
+				throw new Error('No version found for this modpack')
+			}
+
+			await openServerModpackInstallFlow({
+				projectId: project.project_id,
+				versionId,
+				name: project.name,
+				iconUrl: project.icon_url ?? undefined,
+			})
+			return false
+		}
+
+		const versions = await client.labrinth.versions_v2.getProjectVersions(project.project_id, {
+			include_changelog: false,
+		})
+		const serverLoader = (serverContextServerData.value?.loader ?? '').toLowerCase()
+		const serverGameVersion = (serverContextServerData.value?.mc_version ?? '').trim()
+		const compatibleLoaders = getCompatibleLoaders(serverLoader)
+
+		const hasGameVersionMatch = (version: Labrinth.Versions.v2.Version) =>
+			!serverGameVersion || version.game_versions.includes(serverGameVersion)
+		const hasLoaderMatch = (version: Labrinth.Versions.v2.Version) => {
+			if (contentType === 'datapack') return true
+			if (compatibleLoaders.size === 0) return true
+			return version.loaders.some((loader) => compatibleLoaders.has(normalizeLoader(loader)))
+		}
+
+		let matchingVersion = versions.find(
+			(version) => hasGameVersionMatch(version) && hasLoaderMatch(version),
+		)
+		if (!matchingVersion) {
+			matchingVersion = versions.find((version) => hasLoaderMatch(version))
+		}
+		if (!matchingVersion) {
+			matchingVersion = versions.find((version) => hasGameVersionMatch(version))
+		}
+		if (!matchingVersion) {
+			matchingVersion = versions[0]
+		}
+		if (!matchingVersion) {
+			throw new Error('No installable version was found for this project.')
+		}
+
+		await client.archon.content_v1.addAddon(sid, wid, {
+			project_id: matchingVersion.project_id,
+			version_id: matchingVersion.id,
+		})
+
+		serverContentProjectIds.value = new Set([...serverContentProjectIds.value, project.project_id])
+		return true
+	}
+
+	function onServerFlowBack() {
+		serverSetupModalRef.value?.hide()
+	}
+
+	async function handleServerModpackFlowCreate(config: CreationFlowContextValue) {
+		const sid = serverIdQuery.value
+		const wid = effectiveServerWorldId.value
+		if (!sid || !wid || !config.modpackSelection.value) {
+			config.loading.value = false
+			return
+		}
+
+		try {
+			await client.archon.content_v1.installContent(sid, wid, {
+				content_variant: 'modpack',
+				spec: {
+					platform: 'modrinth',
+					project_id: config.modpackSelection.value.projectId,
+					version_id: config.modpackSelection.value.versionId,
+				},
+				soft_override: false,
+				properties: config.buildProperties(),
+			} satisfies Archon.Content.v1.InstallWorldContent)
+			serverSetupModalRef.value?.hide()
+
+			if (serverFlowFrom.value === 'onboarding') {
+				await client.archon.servers_v1.endIntro(sid)
+				await router.push(`/hosting/manage/${sid}/content`)
+				return
+			}
+
+			await router.push(`/hosting/manage/${sid}?openSettings=installation`)
+		} catch (err) {
+			handleError(err as Error)
+			config.loading.value = false
+		}
+	}
+
+	function markServerProjectInstalled(id: string) {
+		serverContentProjectIds.value = new Set([...serverContentProjectIds.value, id])
+	}
+
+	return {
+		serverIdQuery,
+		worldIdQuery,
+		browseFrom,
+		serverFlowFrom,
+		isFromWorlds,
+		isServerContext,
+		isSetupServerContext,
+		effectiveServerWorldId,
+		serverContextServerData,
+		serverContentProjectIds,
+		serverBackUrl,
+		serverBackLabel,
+		serverBrowseHeading,
+		initServerContext,
+		watchServerContextChanges,
+		searchServerModpacks,
+		getServerProjectVersions,
+		enforceSetupModpackRoute,
+		installProjectToServer,
+		onServerFlowBack,
+		handleServerModpackFlowCreate,
+		markServerProjectInstalled,
+	}
+}
diff --git a/apps/app-frontend/src/routes.js b/apps/app-frontend/src/routes.js
index 2748853d58..841d4a97fc 100644
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -43,11 +43,8 @@ export default new createRouter({
 			children: [
 				{
 					path: '',
-					redirect: (to) => {
-						const rawId = Array.isArray(to.params.id) ? to.params.id[0] : to.params.id
-						if (!rawId) return '/hosting/manage'
-						return `/hosting/manage/${encodeURIComponent(rawId)}/content`
-					},
+					name: 'ServerManageOverview',
+					component: Hosting.Overview,
 				},
 				{
 					path: 'content',
diff --git a/apps/app-frontend/tsconfig.app.json b/apps/app-frontend/tsconfig.app.json
index f723e2026f..504558d95f 100644
--- a/apps/app-frontend/tsconfig.app.json
+++ b/apps/app-frontend/tsconfig.app.json
@@ -3,7 +3,7 @@
 		"target": "ES2020",
 		"useDefineForClassFields": true,
 		"module": "ESNext",
-		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"lib": ["ES2021", "DOM", "DOM.Iterable"],
 		"skipLibCheck": true,
 
 		"moduleResolution": "bundler",
diff --git a/apps/frontend/src/components/ui/servers/ModrinthServersIcon.vue b/apps/frontend/src/components/brand/ModrinthServersIcon.vue
similarity index 100%
rename from apps/frontend/src/components/ui/servers/ModrinthServersIcon.vue
rename to apps/frontend/src/components/brand/ModrinthServersIcon.vue
diff --git a/apps/frontend/src/components/ui/servers/notice/AssignNoticeModal.vue b/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue
similarity index 100%
rename from apps/frontend/src/components/ui/servers/notice/AssignNoticeModal.vue
rename to apps/frontend/src/components/ui/admin/AssignNoticeModal.vue
diff --git a/apps/frontend/src/components/ui/servers/LoaderSelector.vue b/apps/frontend/src/components/ui/servers/LoaderSelector.vue
deleted file mode 100644
index 0998a9ced1..0000000000
--- a/apps/frontend/src/components/ui/servers/LoaderSelector.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-	<div class="flex w-full flex-col gap-1 rounded-2xl bg-table-alternateRow p-2">
-		<div
-			v-for="loader in vanillaLoaders"
-			:key="loader.name"
-			class="group relative flex items-center justify-between rounded-2xl p-2 pr-2.5 hover:bg-bg"
-		>
-			<LoaderSelectorCard
-				:loader="loader"
-				:is-current="isCurrentLoader(loader.name)"
-				:loader-version="data.loader_version"
-				:current-loader="data.loader"
-				:is-installing="isInstalling"
-				@select="selectLoader"
-			/>
-		</div>
-	</div>
-
-	<div class="mt-4">
-		<h2 class="mb-2 px-2 text-lg font-bold text-contrast">Mod loaders</h2>
-		<div class="flex w-full flex-col gap-1 rounded-2xl bg-table-alternateRow p-2">
-			<div
-				v-for="loader in modLoaders"
-				:key="loader.name"
-				class="group relative flex items-center justify-between rounded-2xl p-2 pr-2.5 hover:bg-bg"
-			>
-				<LoaderSelectorCard
-					:loader="loader"
-					:is-current="isCurrentLoader(loader.name)"
-					:loader-version="data.loader_version"
-					:current-loader="data.loader"
-					:is-installing="isInstalling"
-					@select="selectLoader"
-				/>
-			</div>
-		</div>
-	</div>
-
-	<div class="mt-4">
-		<h2 class="mb-2 px-2 text-lg font-bold text-contrast">Plugin loaders</h2>
-		<div class="flex w-full flex-col gap-1 rounded-2xl bg-table-alternateRow p-2">
-			<div
-				v-for="loader in pluginLoaders"
-				:key="loader.name"
-				class="group relative flex items-center justify-between rounded-2xl p-2 pr-2.5 hover:bg-bg"
-			>
-				<LoaderSelectorCard
-					:loader="loader"
-					:is-current="isCurrentLoader(loader.name)"
-					:loader-version="data.loader_version"
-					:current-loader="data.loader"
-					:is-installing="isInstalling"
-					@select="selectLoader"
-				/>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import LoaderSelectorCard from './LoaderSelectorCard.vue'
-const props = defineProps<{
-	data: {
-		loader: string | null
-		loader_version: string | null
-	}
-	ignoreCurrentInstallation?: boolean
-	isInstalling?: boolean
-}>()
-
-const emit = defineEmits<{
-	(e: 'selectLoader', loader: string): void
-}>()
-
-const vanillaLoaders = [{ name: 'Vanilla' as const, displayName: 'Vanilla' }]
-
-const modLoaders = [
-	{ name: 'Fabric' as const, displayName: 'Fabric' },
-	{ name: 'Quilt' as const, displayName: 'Quilt' },
-	{ name: 'Forge' as const, displayName: 'Forge' },
-	{ name: 'NeoForge' as const, displayName: 'NeoForge' },
-]
-
-const pluginLoaders = [
-	{ name: 'Paper' as const, displayName: 'Paper' },
-	{ name: 'Purpur' as const, displayName: 'Purpur' },
-]
-
-const isCurrentLoader = (loaderName: string) => {
-	return props.data.loader?.toLowerCase() === loaderName.toLowerCase()
-}
-
-const selectLoader = (loader: string) => {
-	emit('selectLoader', loader)
-}
-</script>
diff --git a/apps/frontend/src/components/ui/servers/LoaderSelectorCard.vue b/apps/frontend/src/components/ui/servers/LoaderSelectorCard.vue
deleted file mode 100644
index 0017f1076e..0000000000
--- a/apps/frontend/src/components/ui/servers/LoaderSelectorCard.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-	<div class="flex w-full items-center justify-between">
-		<div class="flex items-center gap-4">
-			<div
-				class="grid size-10 place-content-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
-				:class="isCurrentLoader ? '[&&]:bg-bg-green' : ''"
-			>
-				<LoaderIcon
-					:loader="loader.name"
-					class="size-6"
-					:class="isCurrentLoader ? 'text-brand' : ''"
-				/>
-			</div>
-
-			<div class="flex flex-col gap-0.5">
-				<div class="flex flex-row items-center gap-2">
-					<h1 class="m-0 text-xl font-bold leading-none text-contrast">
-						{{ loader.displayName }}
-					</h1>
-					<span
-						v-if="isCurrentLoader"
-						class="hidden items-center gap-1 rounded-full bg-bg-green p-1 px-1.5 text-xs font-semibold text-brand sm:flex"
-					>
-						<CheckIcon class="h-4 w-4" /> Current
-					</span>
-				</div>
-
-				<p v-if="isCurrentLoader" class="m-0 text-xs text-secondary">{{ loaderVersion }}</p>
-			</div>
-		</div>
-		<ButtonStyled>
-			<button :disabled="isInstalling" @click="onSelect">
-				<DownloadIcon class="h-5 w-5" /> {{ isCurrentLoader ? 'Reinstall' : 'Install' }}
-			</button>
-		</ButtonStyled>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { CheckIcon, DownloadIcon } from '@modrinth/assets'
-import { ButtonStyled, LoaderIcon } from '@modrinth/ui'
-
-interface LoaderInfo {
-	name: 'Vanilla' | 'Fabric' | 'Forge' | 'Quilt' | 'Paper' | 'NeoForge' | 'Purpur'
-	displayName: string
-}
-
-interface Props {
-	loader: LoaderInfo
-	currentLoader: string | null
-	loaderVersion: string | null
-	isInstalling?: boolean
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<{
-	(e: 'select', loader: string): void
-}>()
-
-const isCurrentLoader = computed(() => {
-	return props.currentLoader?.toLowerCase() === props.loader.name.toLowerCase()
-})
-
-const onSelect = () => {
-	emit('select', props.loader.name)
-}
-</script>
diff --git a/apps/frontend/src/components/ui/servers/LogLine.vue b/apps/frontend/src/components/ui/servers/LogLine.vue
deleted file mode 100644
index 07df871a33..0000000000
--- a/apps/frontend/src/components/ui/servers/LogLine.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-	<div
-		class="parsed-log relative flex h-8 w-full items-center overflow-hidden rounded-lg px-6"
-		@mouseenter="checkOverflow"
-		@touchstart="checkOverflow"
-	>
-		<div ref="logContent" class="log-content flex-1 truncate whitespace-pre">
-			<span v-html="sanitizedLog"></span>
-		</div>
-		<button
-			v-if="isOverflowing"
-			class="ml-2 flex h-6 items-center rounded-md bg-bg px-2 text-xs text-contrast opacity-50 transition-opacity hover:opacity-100"
-			type="button"
-			@click.stop="$emit('show-full-log', props.log)"
-		>
-			...
-		</button>
-	</div>
-</template>
-
-<script setup lang="ts">
-import Convert from 'ansi-to-html'
-import DOMPurify from 'dompurify'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-
-const props = defineProps<{
-	log: string
-}>()
-
-defineEmits<{
-	'show-full-log': [log: string]
-}>()
-
-const logContent = ref<HTMLElement | null>(null)
-const isOverflowing = ref(false)
-
-const checkOverflow = () => {
-	if (logContent.value && !isOverflowing.value) {
-		isOverflowing.value = logContent.value.scrollWidth > logContent.value.clientWidth
-	}
-}
-
-const convert = new Convert({
-	fg: '#FFF',
-	bg: '#000',
-	newline: false,
-	escapeXML: true,
-	stream: false,
-})
-
-const sanitizedLog = computed(() =>
-	DOMPurify.sanitize(convert.toHtml(props.log), {
-		ALLOWED_TAGS: ['span'],
-		ALLOWED_ATTR: ['style'],
-		USE_PROFILES: { html: true },
-	}),
-)
-
-const preventSelection = (e: MouseEvent) => {
-	e.preventDefault()
-}
-
-onMounted(() => {
-	logContent.value?.addEventListener('mousedown', preventSelection)
-})
-
-onUnmounted(() => {
-	logContent.value?.removeEventListener('mousedown', preventSelection)
-})
-</script>
-
-<style scoped>
-.parsed-log {
-	background: transparent;
-	transition: background-color 0.1s;
-}
-
-.parsed-log:hover {
-	background: rgba(128, 128, 128, 0.25);
-	transition: 0s;
-}
-
-.log-content > span {
-	user-select: none;
-	white-space: pre;
-}
-
-.log-content {
-	white-space: pre;
-}
-</style>
diff --git a/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue b/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
deleted file mode 100644
index 3022a7b06a..0000000000
--- a/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
-	<div class="contents">
-		<NewModal ref="confirmActionModal" header="Confirming power action" @close="resetPowerAction">
-			<div class="flex flex-col gap-4 md:w-[400px]">
-				<p class="m-0">
-					Are you sure you want to
-					<span class="lowercase">{{ pendingAction }}</span> the server?
-				</p>
-				<Checkbox
-					v-model="dontAskAgain"
-					label="Don't ask me again"
-					class="text-sm"
-					:disabled="!pendingAction"
-				/>
-				<div class="flex flex-row gap-4">
-					<ButtonStyled type="standard" color="brand" @click="executePowerAction">
-						<button>
-							<CheckIcon class="h-5 w-5" />
-							{{ pendingAction }} server
-						</button>
-					</ButtonStyled>
-					<ButtonStyled @click="resetPowerAction">
-						<button>
-							<XIcon class="h-5 w-5" />
-							Cancel
-						</button>
-					</ButtonStyled>
-				</div>
-			</div>
-		</NewModal>
-
-		<NewModal
-			ref="detailsModal"
-			:header="`All of ${server.name || 'Server'} info`"
-			@close="detailsModal?.hide()"
-		>
-			<ServerInfoLabels
-				:server-data="server"
-				:show-game-label="true"
-				:show-loader-label="true"
-				:uptime-seconds="uptimeSeconds"
-				:column="true"
-				class="mb-6 flex flex-col gap-2"
-			/>
-			<div v-if="flags.advancedDebugInfo" class="markdown-body">
-				<pre>{{ server }}</pre>
-			</div>
-			<ButtonStyled type="standard" color="brand" @click="detailsModal?.hide()">
-				<button class="w-full">Close</button>
-			</ButtonStyled>
-		</NewModal>
-
-		<div class="flex flex-row items-center gap-2 rounded-lg">
-			<ButtonStyled v-if="isInstalling" type="standard" color="brand" size="large">
-				<button disabled class="flex-shrink-0">
-					<PanelSpinner class="size-5" /> Installing...
-				</button>
-			</ButtonStyled>
-
-			<template v-else>
-				<ButtonStyled v-if="showStopButton" type="transparent" size="large">
-					<button :disabled="!canTakeAction" @click="initiateAction('Stop')">
-						<div class="flex gap-1">
-							<StopCircleIcon class="h-5 w-5" />
-							<span>{{ isStopping ? 'Stopping...' : 'Stop' }}</span>
-						</div>
-					</button>
-				</ButtonStyled>
-
-				<ButtonStyled type="standard" color="brand" size="large">
-					<button v-tooltip="busyTooltip" :disabled="!canTakeAction" @click="handlePrimaryAction">
-						<div v-if="isTransitioning" class="grid place-content-center">
-							<LoadingIcon />
-						</div>
-						<component :is="isRunning ? UpdatedIcon : PlayIcon" v-else />
-						<span>{{ primaryActionText }}</span>
-					</button>
-				</ButtonStyled>
-
-				<ButtonStyled circular type="transparent" size="large">
-					<TeleportOverflowMenu :options="[...menuOptions]">
-						<MoreVerticalIcon aria-hidden="true" />
-						<template #kill>
-							<SlashIcon class="h-5 w-5" />
-							<span>Kill server</span>
-						</template>
-						<template #allServers>
-							<ServerIcon class="h-5 w-5" />
-							<span>All servers</span>
-						</template>
-						<template #details>
-							<InfoIcon class="h-5 w-5" />
-							<span>Details</span>
-						</template>
-						<template #copy-id>
-							<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
-							<span>Copy ID</span>
-						</template>
-					</TeleportOverflowMenu>
-				</ButtonStyled>
-			</template>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import {
-	CheckIcon,
-	ClipboardCopyIcon,
-	InfoIcon,
-	MoreVerticalIcon,
-	PlayIcon,
-	ServerIcon,
-	SlashIcon,
-	StopCircleIcon,
-	UpdatedIcon,
-	XIcon,
-} from '@modrinth/assets'
-import {
-	ButtonStyled,
-	Checkbox,
-	injectModrinthClient,
-	injectModrinthServerContext,
-	injectNotificationManager,
-	NewModal,
-	ServerInfoLabels,
-	useVIntl,
-} from '@modrinth/ui'
-import { useStorage } from '@vueuse/core'
-import { computed, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-import LoadingIcon from './icons/LoadingIcon.vue'
-import PanelSpinner from './PanelSpinner.vue'
-import TeleportOverflowMenu from './TeleportOverflowMenu.vue'
-
-type PowerAction = 'Start' | 'Stop' | 'Restart' | 'Kill'
-
-const props = defineProps<{
-	disabled?: boolean
-	uptimeSeconds: number
-}>()
-
-const { formatMessage } = useVIntl()
-const flags = useFeatureFlags()
-const router = useRouter()
-const client = injectModrinthClient()
-const { serverId, server, powerState, busyReasons } = injectModrinthServerContext()
-const { addNotification } = injectNotificationManager()
-
-const confirmActionModal = ref<InstanceType<typeof NewModal> | null>(null)
-const detailsModal = ref<InstanceType<typeof NewModal> | null>(null)
-const pendingAction = ref<PowerAction | null>(null)
-const dontAskAgain = ref(false)
-
-const userPreferences = useStorage(`pyro-server-${serverId}-preferences`, {
-	powerDontAskAgain: false,
-})
-
-const isInstalling = computed(() => server.value.status === 'installing')
-const isRunning = computed(() => powerState.value === 'running')
-const isStopping = computed(() => powerState.value === 'stopping')
-const isTransitioning = computed(
-	() => powerState.value === 'starting' || powerState.value === 'stopping',
-)
-const showStopButton = computed(() => isRunning.value || isStopping.value)
-
-const busyTooltip = computed(() =>
-	busyReasons.value.length > 0 ? formatMessage(busyReasons.value[0].reason) : undefined,
-)
-
-const canTakeAction = computed(
-	() => !isTransitioning.value && !props.disabled && busyReasons.value.length === 0,
-)
-
-const primaryActionText = computed(() => {
-	switch (powerState.value) {
-		case 'starting':
-			return 'Starting...'
-		case 'stopping':
-			return 'Stopping...'
-		case 'running':
-			return 'Restart'
-		default:
-			return 'Start'
-	}
-})
-
-const menuOptions = computed(() => [
-	...(isInstalling.value
-		? []
-		: [
-				{
-					id: 'kill',
-					label: 'Kill server',
-					icon: SlashIcon,
-					action: () => initiateAction('Kill'),
-				},
-			]),
-	{
-		id: 'allServers',
-		label: 'All servers',
-		icon: ServerIcon,
-		action: () => router.push('/hosting/manage'),
-	},
-	{
-		id: 'details',
-		label: 'Details',
-		icon: InfoIcon,
-		action: () => detailsModal.value?.show(),
-	},
-	{
-		id: 'copy-id',
-		label: 'Copy ID',
-		icon: ClipboardCopyIcon,
-		action: () => copyId(),
-		shown: flags.value.developerMode,
-	},
-])
-
-async function copyId() {
-	await navigator.clipboard.writeText(serverId)
-}
-
-async function sendPowerAction(action: PowerAction) {
-	try {
-		await client.archon.servers_v0.power(serverId, action)
-	} catch (error) {
-		console.error(`Error performing ${action} on server:`, error)
-		addNotification({
-			type: 'error',
-			title: `Failed to ${action.toLowerCase()} server`,
-			text: 'An error occurred while performing this action.',
-		})
-	}
-}
-
-function initiateAction(action: PowerAction) {
-	if (!canTakeAction.value) return
-
-	if (action === 'Start') {
-		sendPowerAction(action)
-		return
-	}
-
-	pendingAction.value = action
-
-	if (userPreferences.value.powerDontAskAgain) {
-		executePowerAction()
-	} else {
-		confirmActionModal.value?.show()
-	}
-}
-
-function handlePrimaryAction() {
-	initiateAction(isRunning.value ? 'Restart' : 'Start')
-}
-
-function executePowerAction() {
-	if (!pendingAction.value) return
-
-	sendPowerAction(pendingAction.value)
-
-	if (dontAskAgain.value) {
-		userPreferences.value.powerDontAskAgain = true
-	}
-
-	resetPowerAction()
-}
-
-function resetPowerAction() {
-	confirmActionModal.value?.hide()
-	pendingAction.value = null
-	dontAskAgain.value = false
-}
-</script>
diff --git a/apps/frontend/src/components/ui/servers/PanelServerStatus.vue b/apps/frontend/src/components/ui/servers/PanelServerStatus.vue
deleted file mode 100644
index f5b42fa0e1..0000000000
--- a/apps/frontend/src/components/ui/servers/PanelServerStatus.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-	<div
-		:aria-label="`Server is ${getStatusText(state)}`"
-		class="relative inline-flex select-none items-center"
-		@mouseenter="isExpanded = true"
-		@mouseleave="isExpanded = false"
-	>
-		<div
-			:class="[
-				'h-4 w-4 rounded-full transition-all duration-300 ease-in-out',
-				getStatusClass(state).main,
-			]"
-		>
-			<div
-				:class="[
-					'absolute inline-flex h-4 w-4 animate-ping rounded-full',
-					getStatusClass(state).bg,
-				]"
-			></div>
-		</div>
-		<div
-			:class="[
-				'absolute -left-4 flex w-auto items-center gap-2 rounded-full px-2 py-1 transition-all duration-150 ease-in-out',
-				getStatusClass(state).bg,
-				isExpanded ? 'translate-x-2 scale-100 opacity-100' : 'translate-x-0 scale-90 opacity-0',
-			]"
-		>
-			<div class="h-3 w-3 rounded-full"></div>
-			<span
-				:class="[
-					'origin-left whitespace-nowrap text-sm font-semibold text-contrast transition-all duration-[200ms] ease-in-out',
-					isExpanded ? 'translate-x-0 scale-100' : '-translate-x-1 scale-x-75',
-				]"
-			>
-				{{ getStatusText(state) }}
-			</span>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import type { ServerState } from '@modrinth/utils'
-import { ref } from 'vue'
-
-const STATUS_CLASSES = {
-	running: { main: 'bg-brand', bg: 'bg-bg-green' },
-	stopped: { main: '', bg: '' },
-	crashed: { main: 'bg-brand-red', bg: 'bg-bg-red' },
-	unknown: { main: '', bg: '' },
-} as const
-
-const STATUS_TEXTS: Partial<Record<ServerState, string>> = {
-	running: 'Running',
-	stopped: '',
-	crashed: 'Crashed',
-	unknown: 'Unknown',
-} as const
-
-defineProps<{
-	state: ServerState
-}>()
-
-const isExpanded = ref(false)
-
-function getStatusClass(state: ServerState) {
-	if (state in STATUS_CLASSES) {
-		return STATUS_CLASSES[state as keyof typeof STATUS_CLASSES]
-	}
-	return STATUS_CLASSES.unknown
-}
-
-function getStatusText(state: ServerState) {
-	return STATUS_TEXTS[state] ?? STATUS_TEXTS.unknown
-}
-</script>
diff --git a/apps/frontend/src/components/ui/servers/PanelSpinner.vue b/apps/frontend/src/components/ui/servers/PanelSpinner.vue
deleted file mode 100644
index c2c7f55eab..0000000000
--- a/apps/frontend/src/components/ui/servers/PanelSpinner.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-	<svg
-		class="h-5 w-5 animate-spin"
-		xmlns="http://www.w3.org/2000/svg"
-		fill="none"
-		viewBox="0 0 24 24"
-	>
-		<circle
-			class="opacity-25"
-			cx="12"
-			cy="12"
-			r="10"
-			stroke="currentColor"
-			stroke-width="4"
-		></circle>
-		<path
-			class="opacity-75"
-			fill="currentColor"
-			d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-		></path>
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/PanelTerminal.vue b/apps/frontend/src/components/ui/servers/PanelTerminal.vue
deleted file mode 100644
index 950a2dc9ea..0000000000
--- a/apps/frontend/src/components/ui/servers/PanelTerminal.vue
+++ /dev/null
@@ -1,1414 +0,0 @@
-<template>
-	<div class="contents">
-		<div class="flex items-center gap-4">
-			<div class="relative w-full">
-				<StyledInput
-					v-model="searchInput"
-					type="search"
-					:icon="SearchIcon"
-					placeholder="Search logs"
-					wrapper-class="h-12 !w-full"
-					input-class="!pr-48"
-					:disabled="loading"
-					@keydown.escape="clearSearch"
-				/>
-				<ButtonStyled v-if="searchInput && !loading" @click="clearSearch">
-					<button class="absolute right-2 top-1/2 -translate-y-1/2">
-						<XIcon class="h-5 w-5" />
-					</button>
-				</ButtonStyled>
-				<span
-					v-if="pyroConsole.filteredOutput.value.length && searchInput && !loading"
-					class="pointer-events-none absolute right-12 top-1/2 -translate-y-1/2 select-none whitespace-pre text-sm"
-				>
-					{{ pyroConsole.filteredOutput.value.length }}
-					{{ pyroConsole.filteredOutput.value.length === 1 ? 'result' : 'results' }}
-				</span>
-			</div>
-		</div>
-		<div
-			data-pyro-terminal
-			:class="[
-				'terminal-font console relative z-[1] flex h-full w-full flex-col items-center justify-between overflow-hidden rounded-t-xl px-1 text-sm transition-transform duration-300',
-				{ 'scale-fullscreen screen-fixed inset-0 z-50 !rounded-none': isFullScreen },
-				{ 'pointer-events-none': loading },
-			]"
-			:aria-hidden="loading"
-			tabindex="-1"
-		>
-			<div
-				v-if="cosmetics.advancedRendering && !loading"
-				class="progressive-gradient pointer-events-none absolute -bottom-6 left-0 z-[2] h-[10rem] w-full overflow-hidden rounded-xl"
-				:style="`--transparency: ${Math.max(0, lerp(100, 0, bottomThreshold * 8))}%`"
-				aria-hidden="true"
-			>
-				<div
-					v-for="i in progressiveBlurIterations"
-					:key="i"
-					aria-hidden="true"
-					class="absolute left-0 top-0 h-full w-full"
-					:style="getBlurStyle(i)"
-				/>
-			</div>
-			<div
-				v-else-if="!loading"
-				class="pointer-events-none absolute bottom-0 left-0 right-0 z-[2] h-[196px] w-full"
-				:style="
-					bottomThreshold > 0
-						? { background: 'linear-gradient(transparent 30%, var(--console-bg) 70%)' }
-						: {}
-				"
-			></div>
-			<div
-				aria-hidden="true"
-				class="pointer-events-none absolute left-0 top-0 z-[60] h-full w-full"
-				:style="{
-					visibility: isFullScreen ? 'hidden' : 'visible',
-				}"
-			>
-				<div
-					aria-hidden="true"
-					class="absolute -bottom-2 -right-2 h-7 w-7"
-					:style="{
-						background: `radial-gradient(circle at 0% 0%, transparent 50%, var(--color-raised-bg) 52%)`,
-					}"
-				></div>
-				<div
-					aria-hidden="true"
-					class="absolute -bottom-2 -left-2 h-7 w-7"
-					:style="{
-						background: `radial-gradient(circle at 100% 0%, transparent 50%, var(--color-raised-bg) 52%)`,
-					}"
-				></div>
-			</div>
-			<div data-pyro-terminal-scroll-root class="relative h-full w-full">
-				<div
-					v-if="!loading"
-					ref="scrollbarTrack"
-					data-pyro-terminal-scrollbar-track
-					class="absolute -right-1 bottom-16 top-4 z-[4] w-4 overflow-hidden"
-					@mousedown="handleTrackClick"
-				>
-					<div
-						v-if="hasSelection"
-						class="absolute h-full w-full opacity-20"
-						:style="{
-							background: `linear-gradient(to bottom,
-                transparent ${getSelectionPosition().start}%,
-                var(--color-blue) ${getSelectionPosition().start}%,
-                var(--color-blue) ${getSelectionPosition().end}%,
-                transparent ${getSelectionPosition().end}%)`,
-						}"
-					/>
-					<div
-						data-pyro-terminal-scrollbar
-						class="relative flex h-full justify-center rounded-full transition-all"
-						:style="{ opacity: bottomThreshold > 0 ? '0.7' : '0.3' }"
-					>
-						<div
-							ref="scrollbarThumb"
-							data-pyro-terminal-scrollbar-thumb
-							class="absolute w-1.5 cursor-default rounded-full bg-button-bg"
-							:style="{
-								height: `${getThumbHeight()}px`,
-								transform: `translateY(${getThumbPosition()}px)`,
-							}"
-							@mousedown="startDragging"
-						></div>
-					</div>
-				</div>
-				<div
-					ref="scrollContainer"
-					data-pyro-terminal-root
-					class="scrollbar-none absolute left-0 top-0 h-full w-full select-text overflow-x-auto overflow-y-auto py-6 pb-[72px]"
-					@scroll.passive="() => handleListScroll()"
-				>
-					<div v-if="loading" class="h-full w-full" />
-					<div
-						v-else
-						data-pyro-terminal-virtual-height-watcher
-						:style="{ height: `${totalHeight}px` }"
-					>
-						<ul
-							class="m-0 list-none p-0"
-							data-pyro-terminal-virtual-list
-							:class="{ 'scrolling-active': isScrolling && !isSelecting }"
-							:style="virtualListStyle"
-							aria-live="polite"
-							role="listbox"
-							@mousedown.prevent="handleMouseDown"
-							@mousemove="updateLineSelection"
-							@mouseup="endLineSelection"
-						>
-							<template
-								v-for="(item, index) in visibleItems"
-								:key="`${visibleStartIndex + index}-${item}`"
-							>
-								<li
-									data-pyro-terminal-line
-									:class="{
-										'selected-line': isLineSelected(visibleStartIndex + index),
-									}"
-									class="group"
-								>
-									<div class="flex items-center gap-2">
-										<LogLine :log="item" @show-full-log="showFullLogMessage" />
-										<div @mousedown.stop @click.stop>
-											<button
-												v-if="searchInput"
-												class="jump-button mr-4 flex items-center gap-1 rounded-md bg-bg-blue px-2 py-1 text-xs text-blue transition-all hover:scale-105 active:scale-95"
-												@mousedown.stop
-												@click.stop="() => jumpToLine(item)"
-											>
-												<RightArrowIcon class="h-3 w-3" />
-												Jump
-											</button>
-										</div>
-									</div>
-								</li>
-								<li
-									v-if="
-										searchInput &&
-										shouldShowSeparator(visibleStartIndex + index, visibleStartIndex + index + 1)
-									"
-									data-pyro-terminal-separator
-									class="flex h-8 select-none items-center justify-center opacity-50"
-									aria-hidden="true"
-								>
-									<div class="h-[1px] w-full bg-contrast opacity-50"></div>
-									<div class="mx-4 flex flex-row items-center gap-4">
-										<div class="flex flex-row items-center gap-1">
-											<div class="size-1 rounded-full bg-contrast opacity-70"></div>
-											<div class="size-1 rounded-full bg-contrast opacity-70"></div>
-											<div class="size-1 rounded-full bg-contrast opacity-70"></div>
-										</div>
-										<span class="select-none whitespace-pre text-xs text-contrast">
-											{{
-												shouldShowSeparator(
-													visibleStartIndex + index,
-													visibleStartIndex + index + 1,
-												)
-											}}
-											line{{
-												shouldShowSeparator(
-													visibleStartIndex + index,
-													visibleStartIndex + index + 1,
-												) === 1
-													? ''
-													: 's'
-											}}
-											between
-										</span>
-									</div>
-									<div class="h-[1px] w-full bg-contrast opacity-50"></div>
-								</li>
-							</template>
-						</ul>
-					</div>
-				</div>
-			</div>
-
-			<div
-				class="absolute bottom-4 z-[3] w-full"
-				:style="{
-					filter: `drop-shadow(0 8px 12px rgba(0, 0, 0, ${lerp(0.1, 0.5, bottomThreshold)}))`,
-				}"
-			>
-				<slot />
-			</div>
-			<button
-				v-if="!loading"
-				data-pyro-fullscreen
-				:label="isFullScreen ? 'Exit full screen' : 'Enter full screen'"
-				class="experimental-styles-within absolute right-4 top-4 z-[3] grid h-12 w-12 place-content-center rounded-full border-[1px] border-solid border-button-border bg-bg-raised text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
-				:class="{ hidden: searchInput || hasSelection || isSingleLineSelected }"
-				@click="toggleFullscreen"
-			>
-				<MinimizeIconVue v-if="isFullScreen" />
-				<FullscreenIcon v-else />
-			</button>
-
-			<Transition name="fade">
-				<div
-					v-if="(hasSelection || isSingleLineSelected) && !loading"
-					class="absolute right-20 top-4 z-[3] flex flex-row items-center"
-					:class="{ '!right-4': searchInput || hasSelection || isSingleLineSelected }"
-				>
-					<button
-						data-pyro-copy
-						label="Copy selected lines"
-						class="experimental-styles-within flex h-12 flex-row items-center justify-center gap-2 rounded-full border-[1px] border-solid border-button-border bg-bg-raised px-4 text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
-						@click="copySelectedLines"
-					>
-						<CopyIcon class="h-5 w-5" />
-						<span class="">Copy</span>
-					</button>
-					<Transition name="view-button">
-						<button
-							v-if="hasSelection"
-							data-pyro-view
-							label="View selected lines"
-							class="experimental-styles-within ml-2 flex h-12 w-[100px] flex-row items-center justify-center gap-2 rounded-full border-[1px] border-solid border-button-border bg-bg-raised px-4 text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
-							@click="showSelectedLines"
-						>
-							<EyeIcon class="h-5 w-5" />
-							<span class="">View</span>
-						</button>
-					</Transition>
-				</div>
-			</Transition>
-
-			<Transition name="scroll-to-bottom">
-				<button
-					v-if="bottomThreshold > 0 && !isScrolledToBottom && !loading"
-					data-pyro-scrolltobottom
-					label="Scroll to bottom"
-					class="scroll-to-bottom-btn experimental-styles-within absolute bottom-[4.5rem] right-4 z-[3] grid h-12 w-12 place-content-center rounded-full border-[1px] border-solid border-button-border bg-bg-raised text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
-					@click="scrollToBottom"
-				>
-					<RightArrowIcon class="rotate-90" />
-					<span class="sr-only">Scroll to bottom</span>
-				</button>
-			</Transition>
-		</div>
-		<NewModal ref="viewLogModal" class="z-[9999]" header="Viewing selected logs">
-			<div class="text-contrast">
-				<pre
-					class="select-text overflow-x-auto whitespace-pre rounded-lg bg-bg font-mono"
-					v-html="processedLogWithLinks"
-				></pre>
-				<div v-if="detectedLinks.length" class="border-contrast/20 mt-4 border-t pt-4">
-					<h2>Detected Links</h2>
-					<ul class="flex flex-col gap-2">
-						<li v-for="(link, index) in detectedLinks" :key="index">
-							<a
-								:href="link"
-								target="_blank"
-								rel="noopener noreferrer"
-								class="text-sm text-blue hover:underline"
-							>
-								{{ link }}
-							</a>
-						</li>
-					</ul>
-				</div>
-			</div>
-		</NewModal>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { CopyIcon, EyeIcon, RightArrowIcon, SearchIcon, XIcon } from '@modrinth/assets'
-import { NewModal, StyledInput } from '@modrinth/ui'
-import ButtonStyled from '@modrinth/ui/src/components/base/ButtonStyled.vue'
-import { useDebounceFn } from '@vueuse/core'
-import DOMPurify from 'dompurify'
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-
-import { useModrinthServersConsole } from '~/store/console.ts'
-
-import FullscreenIcon from './icons/FullscreenIcon.vue'
-import MinimizeIconVue from './icons/MinimizeIcon.vue.vue'
-import LogLine from './LogLine.vue'
-
-const { $cosmetics } = useNuxtApp()
-const cosmetics = $cosmetics
-
-const props = defineProps<{
-	fullScreen: boolean
-	loading?: boolean
-}>()
-
-const BUFFER_SIZE = 5
-const BATCH_SIZE = 50
-const LINE_HEIGHT = 32
-const SEPARATOR_HEIGHT = 32
-const SCROLL_END_DELAY = 150
-const progressiveBlurIterations = ref(8)
-
-const pyroConsole = useModrinthServersConsole()
-const consoleOutput = computed(() => (props.loading ? [] : pyroConsole.output.value))
-
-const scrollContainer = ref<HTMLElement | null>(null)
-
-const isFullScreen = ref(props.fullScreen)
-
-const initialBatch = ref(false)
-const isInitialLoad = ref(true)
-
-const startY = ref(0)
-const scrollTop = ref(0)
-const clientHeight = ref(0)
-const startScrollTop = ref(0)
-const bottomThreshold = ref(0)
-const isAutoScrolling = ref(false)
-const userHasScrolled = ref(false)
-const isScrolledToBottom = ref(true)
-const scrollEndTimeout = ref<NodeJS.Timeout | null>(null)
-const isScrolling = ref(false)
-
-const scrollbarTrack = ref<HTMLElement | null>(null)
-const scrollbarThumb = ref<HTMLElement | null>(null)
-const isDragging = ref(false)
-
-const searchInput = ref('')
-
-const viewLogModal = ref<InstanceType<typeof NewModal>>()
-const selectedLog = ref('')
-const selectionStart = ref<number | null>(null)
-const selectionEnd = ref<number | null>(null)
-const isSelecting = ref(false)
-const autoScrollSpeed = ref(0)
-const autoScrollInterval = ref<NodeJS.Timeout | null>(null)
-const lastClickIndex = ref<number | null>(null)
-const lastMouseEvent = ref<MouseEvent | null>(null)
-
-const lerp = (start: number, end: number, t: number) => start * (1 - t) + end * t
-
-const getBlurStyle = (i: number) => {
-	const properBlurIteration = i + 1
-	const blur = lerp(0, 2 ** (properBlurIteration - 3), bottomThreshold.value)
-	const singular = 100 / progressiveBlurIterations.value
-	let mask = 'linear-gradient('
-
-	switch (i) {
-		case 0:
-			mask += `rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) ${singular}%`
-			break
-		case 1:
-			mask += `rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) ${singular}%, rgb(0, 0, 0) ${singular * 2}%`
-			break
-		case 2:
-			mask += `rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) ${singular}%, rgba(0, 0, 0, 0) ${singular * 2}%, rgb(0, 0, 0) ${singular * 3}%`
-			break
-		default:
-			mask += `rgba(0, 0, 0, 0) ${singular * (i - 3)}%, rgb(0, 0, 0) ${singular * (i + 1 - 3)}%, rgb(0, 0, 0) ${singular * (i + 2 - 3)}%, rgba(0, 0, 0, 0) ${singular * (i + 3 - 3)}%`
-			break
-	}
-
-	mask += `)`
-
-	return {
-		backdropFilter: `blur(${blur}px)`,
-		mask,
-		position: 'absolute' as any,
-		zIndex: progressiveBlurIterations.value - i,
-	}
-}
-
-const updateSearch = useDebounceFn((value: string) => {
-	pyroConsole.setSearchQuery(value)
-
-	selectionStart.value = null
-	selectionEnd.value = null
-	lastClickIndex.value = null
-
-	nextTick(() => {
-		if (!scrollContainer.value) return
-
-		if (!value) {
-			handleListScroll()
-			return
-		}
-
-		if (pyroConsole.filteredOutput.value.length > 0) {
-			scrollContainer.value.scrollTop = 0
-			handleListScroll()
-		}
-	})
-}, 300)
-
-const clearSearch = () => {
-	searchInput.value = ''
-	pyroConsole.setSearchQuery('')
-}
-
-const activeOutput = computed(() => {
-	return searchInput.value ? pyroConsole.filteredOutput.value : consoleOutput.value
-})
-
-const shouldShowSeparator = (currentIndex: number, nextIndex: number) => {
-	if (!searchInput.value || nextIndex >= activeOutput.value.length) return 0
-
-	const currentLine = activeOutput.value[currentIndex]
-	const nextLine = activeOutput.value[nextIndex]
-
-	const currentOriginalIndex = consoleOutput.value.indexOf(currentLine)
-	const nextOriginalIndex = consoleOutput.value.indexOf(nextLine)
-
-	const linesBetween = nextOriginalIndex - currentOriginalIndex - 1
-	return linesBetween > 0 ? linesBetween : 0
-}
-
-const totalHeight = computed(() => {
-	const baseHeight = activeOutput.value.length * LINE_HEIGHT
-	if (!searchInput.value) return baseHeight
-
-	let separatorCount = 0
-	for (let i = 0; i < activeOutput.value.length - 1; i++) {
-		if (shouldShowSeparator(i, i + 1)) {
-			separatorCount++
-		}
-	}
-
-	return baseHeight + separatorCount * SEPARATOR_HEIGHT
-})
-
-const getLineIndexForPosition = (position: number) => {
-	if (!searchInput.value) {
-		return Math.floor(position / LINE_HEIGHT)
-	}
-
-	let accHeight = 0
-	let index = 0
-
-	while (index < activeOutput.value.length) {
-		if (accHeight >= position) {
-			break
-		}
-		accHeight += LINE_HEIGHT
-		if (shouldShowSeparator(index, index + 1)) {
-			accHeight += SEPARATOR_HEIGHT
-		}
-		index++
-	}
-
-	return index
-}
-
-const getPositionForLineIndex = (index: number) => {
-	if (!searchInput.value) {
-		return index * LINE_HEIGHT
-	}
-
-	let position = 0
-	for (let i = 0; i < index; i++) {
-		position += LINE_HEIGHT
-		if (shouldShowSeparator(i, i + 1)) {
-			position += SEPARATOR_HEIGHT
-		}
-	}
-
-	return position
-}
-
-const visibleStartIndex = computed(() => {
-	const rawPosition = Math.max(0, scrollTop.value - LINE_HEIGHT * BUFFER_SIZE)
-	return getLineIndexForPosition(rawPosition)
-})
-
-const visibleEndIndex = computed(() => {
-	const rawPosition = scrollTop.value + clientHeight.value + LINE_HEIGHT * BUFFER_SIZE
-	return Math.min(activeOutput.value.length - 1, getLineIndexForPosition(rawPosition))
-})
-
-const offsetY = computed(() => {
-	return getPositionForLineIndex(visibleStartIndex.value)
-})
-
-const visibleItems = computed(() => {
-	const start = visibleStartIndex.value
-	const end = visibleEndIndex.value
-	const items = []
-
-	for (let i = start; i <= end; i += BATCH_SIZE) {
-		const chunk = activeOutput.value.slice(i, Math.min(i + BATCH_SIZE, end + 1))
-		items.push(...chunk)
-	}
-
-	return items
-})
-
-const handleListScroll = () => {
-	if (!scrollContainer.value) return
-
-	const container = scrollContainer.value
-	scrollTop.value = container.scrollTop
-	clientHeight.value = container.clientHeight
-
-	const scrollHeight = container.scrollHeight
-	const threshold = 32
-
-	isScrolling.value = true
-
-	if (scrollEndTimeout.value) {
-		clearTimeout(scrollEndTimeout.value)
-	}
-
-	scrollEndTimeout.value = setTimeout(() => {
-		if (!isSelecting.value) {
-			isScrolling.value = false
-		}
-		const finalPosition = scrollHeight - container.scrollTop - clientHeight.value
-		isScrolledToBottom.value = finalPosition <= threshold
-		bottomThreshold.value = Math.min(1, finalPosition / 256)
-	}, SCROLL_END_DELAY)
-
-	isScrolledToBottom.value = scrollHeight - scrollTop.value - clientHeight.value <= threshold
-
-	if (!isScrolledToBottom.value && !isAutoScrolling.value) {
-		userHasScrolled.value = true
-	}
-
-	bottomThreshold.value = Math.min(1, (scrollHeight - scrollTop.value - clientHeight.value) / 256)
-
-	if (searchInput.value) {
-		nextTick(() => {
-			container.style.transform = 'translateZ(0)'
-			requestAnimationFrame(() => {
-				container.style.transform = ''
-			})
-		})
-	}
-}
-
-const updateClientHeight = () => {
-	if (scrollContainer.value) {
-		clientHeight.value = scrollContainer.value.clientHeight
-	}
-}
-
-const scrollToBottom = () => {
-	if (!scrollContainer.value) return
-
-	isAutoScrolling.value = true
-	const container = scrollContainer.value
-
-	nextTick(() => {
-		const maxScroll = container.scrollHeight - container.clientHeight
-		container.scrollTop = maxScroll
-
-		setTimeout(() => {
-			if (container.scrollTop < maxScroll) {
-				container.scrollTop = maxScroll
-			}
-			isAutoScrolling.value = false
-			userHasScrolled.value = false
-			isScrolledToBottom.value = true
-			handleListScroll()
-		}, 50)
-	})
-}
-
-const getThumbHeight = () => {
-	if (!scrollContainer.value || !scrollbarTrack.value) return 30
-
-	const contentHeight = scrollContainer.value.scrollHeight
-	const viewportHeight = scrollContainer.value.clientHeight
-	const trackHeight = scrollbarTrack.value.clientHeight
-
-	const heightRatio = viewportHeight / contentHeight
-
-	const minThumbHeight = Math.min(40, trackHeight / 2)
-
-	const proposedHeight = Math.max(heightRatio * trackHeight, minThumbHeight)
-
-	return Math.min(proposedHeight, trackHeight)
-}
-
-const getThumbPosition = () => {
-	if (!scrollContainer.value || !scrollbarTrack.value) return 0
-
-	const contentHeight = scrollContainer.value.scrollHeight
-	const viewportHeight = scrollContainer.value.clientHeight
-	const trackHeight = scrollbarTrack.value.clientHeight
-	const scrollProgress = scrollTop.value / (contentHeight - viewportHeight)
-
-	const thumbHeight = getThumbHeight()
-	const availableTrackSpace = trackHeight - thumbHeight
-
-	return Math.max(0, Math.min(scrollProgress * availableTrackSpace, availableTrackSpace))
-}
-
-const startDragging = (event: MouseEvent) => {
-	event.preventDefault()
-	event.stopPropagation()
-
-	if (!scrollContainer.value || !scrollbarTrack.value) return
-
-	isDragging.value = true
-	startY.value = event.clientY
-	startScrollTop.value = scrollContainer.value.scrollTop
-
-	window.addEventListener('mousemove', handleDragging)
-	window.addEventListener('mouseup', stopDragging)
-
-	document.body.style.userSelect = 'none'
-	document.body.style.pointerEvents = 'none'
-}
-
-const handleDragging = (event: MouseEvent) => {
-	if (!isDragging.value || !scrollContainer.value || !scrollbarTrack.value) return
-
-	const trackRect = scrollbarTrack.value.getBoundingClientRect()
-	const deltaY = event.clientY - startY.value
-
-	const trackHeight = trackRect.height
-	const contentHeight = scrollContainer.value.scrollHeight
-	const viewportHeight = scrollContainer.value.clientHeight
-	const maxScroll = contentHeight - viewportHeight
-
-	const moveRatio = deltaY / trackHeight
-	const scrollDelta = moveRatio * maxScroll
-
-	const newScrollTop = Math.max(0, Math.min(startScrollTop.value + scrollDelta, maxScroll))
-	scrollContainer.value.scrollTop = newScrollTop
-}
-
-const stopDragging = () => {
-	isDragging.value = false
-
-	window.removeEventListener('mousemove', handleDragging)
-	window.removeEventListener('mouseup', stopDragging)
-
-	document.body.style.userSelect = ''
-	document.body.style.pointerEvents = ''
-}
-
-const handleTrackClick = (event: MouseEvent) => {
-	if (!scrollContainer.value || !scrollbarTrack.value || event.target === scrollbarThumb.value)
-		return
-
-	const trackRect = scrollbarTrack.value.getBoundingClientRect()
-	const trackHeight = trackRect.height
-	const clickRatio = (event.clientY - trackRect.top) / trackHeight
-
-	const maxScroll = scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight
-	const newScrollTop = clickRatio * maxScroll
-
-	scrollContainer.value.scrollTop = Math.max(0, Math.min(newScrollTop, maxScroll))
-}
-
-const setBodyScroll = (enabled: boolean) => {
-	if (enabled) {
-		document.body.style.overflow = ''
-		document.body.style.position = ''
-		document.body.style.width = ''
-	} else {
-		document.body.style.overflow = 'hidden'
-		document.body.style.position = 'fixed'
-		document.body.style.width = '100%'
-	}
-}
-
-const enterFullScreen = () => {
-	isFullScreen.value = true
-	setBodyScroll(false)
-	nextTick(() => {
-		updateClientHeight()
-	})
-}
-
-const exitFullScreen = () => {
-	isFullScreen.value = false
-	setBodyScroll(true)
-	nextTick(() => {
-		updateClientHeight()
-	})
-}
-
-const toggleFullscreen = () => {
-	if (isFullScreen.value) {
-		exitFullScreen()
-	} else {
-		enterFullScreen()
-	}
-}
-
-const handleKeydown = (event: KeyboardEvent) => {
-	if (event.key === 'Escape') {
-		if (selectionStart.value !== null || selectionEnd.value !== null) {
-			selectionStart.value = null
-			selectionEnd.value = null
-			lastClickIndex.value = null
-			return
-		}
-
-		if (searchInput.value) {
-			clearSearch()
-			return
-		}
-
-		if (isFullScreen.value) {
-			exitFullScreen()
-		}
-	}
-}
-
-const handleGlobalMouseUp = () => {
-	if (isSelecting.value) {
-		endLineSelection()
-	}
-}
-
-const handleClickOutside = (event: MouseEvent) => {
-	if (!event.target || !(event.target instanceof Node)) return
-	const terminalElement = document.querySelector('[data-pyro-terminal]')
-	if (!terminalElement || !terminalElement.contains(event.target)) {
-		selectionStart.value = null
-		selectionEnd.value = null
-		lastClickIndex.value = null
-	}
-}
-
-const initializeTerminal = () => {
-	if (!scrollContainer.value) return
-
-	updateClientHeight()
-
-	nextTick(() => {
-		nextTick(() => {
-			const container = scrollContainer.value
-			if (container) {
-				container.scrollTop = container.scrollHeight
-				handleListScroll()
-				initialBatch.value = true
-			}
-		})
-	})
-}
-
-const showFullLogMessage = (log: string) => {
-	selectedLog.value = log
-	viewLogModal.value?.show()
-}
-
-const showSelectedLines = () => {
-	if (!hasSelection.value) return
-
-	const start = Math.min(selectionStart.value!, selectionEnd.value!)
-	const end = Math.max(selectionStart.value!, selectionEnd.value!)
-	const selectedLines = activeOutput.value.slice(start, end + 1)
-
-	selectedLog.value = selectedLines.join('\n')
-	viewLogModal.value?.show()
-}
-
-const virtualListStyle = computed(() => ({
-	transform: `translateY(${offsetY.value}px)`,
-}))
-
-const isLineSelected = (index: number) => {
-	if (selectionStart.value === null || selectionEnd.value === null) return false
-	const start = Math.min(selectionStart.value, selectionEnd.value)
-	const end = Math.max(selectionStart.value, selectionEnd.value)
-	return index >= start && index <= end
-}
-
-const handleContextMenu = () => {
-	if (isSelecting.value) {
-		endLineSelection()
-	}
-}
-
-const handleMouseDown = (event: MouseEvent) => {
-	if (event.button === 2) {
-		if (isSelecting.value) {
-			endLineSelection()
-		}
-		return
-	}
-
-	const lineIndex = getLineIndexFromEvent(event)
-	if (lineIndex === null) return
-
-	if (event.shiftKey && lastClickIndex.value !== null) {
-		selectionStart.value = lastClickIndex.value
-		selectionEnd.value = lineIndex
-		isSelecting.value = false
-	} else {
-		isSelecting.value = true
-		selectionStart.value = lineIndex
-		selectionEnd.value = lineIndex
-		lastClickIndex.value = lineIndex
-		startAutoScroll()
-	}
-}
-
-const updateLineSelection = (event: MouseEvent) => {
-	if (!isSelecting.value) return
-
-	const lineIndex = getLineIndexFromEvent(event)
-	if (lineIndex === null) return
-
-	selectionEnd.value = lineIndex
-	lastMouseEvent.value = event
-
-	const rect = scrollContainer.value?.getBoundingClientRect()
-	if (!rect) return
-
-	const threshold = 80
-	const y = event.clientY
-
-	const distanceFromTop = Math.max(0, threshold - (y - rect.top))
-	const distanceFromBottom = Math.max(0, threshold - (rect.bottom - y))
-
-	if (distanceFromTop > 0) {
-		autoScrollSpeed.value = -Math.min(20, distanceFromTop / 2)
-	} else if (distanceFromBottom > 0) {
-		autoScrollSpeed.value = Math.min(20, distanceFromBottom / 2)
-	} else {
-		autoScrollSpeed.value = 0
-	}
-}
-
-const endLineSelection = () => {
-	if (!isSelecting.value) return
-	isSelecting.value = false
-	stopAutoScroll()
-}
-
-const getLineIndexFromEvent = (event: MouseEvent): number | null => {
-	if (!scrollContainer.value) return null
-
-	const rect = scrollContainer.value.getBoundingClientRect()
-	const rawY = event.clientY - rect.top + scrollContainer.value.scrollTop
-
-	if (searchInput.value) {
-		const adjustedY = Math.max(0, rawY - 48)
-		return Math.max(0, Math.min(getLineIndexForPosition(adjustedY), activeOutput.value.length - 1))
-	}
-
-	const adjustedY = Math.max(0, rawY - 24)
-	return Math.floor(adjustedY / LINE_HEIGHT)
-}
-
-const startAutoScroll = () => {
-	if (autoScrollInterval.value) return
-	autoScrollInterval.value = setInterval(() => {
-		if (!scrollContainer.value || autoScrollSpeed.value === 0) return
-		scrollContainer.value.scrollTop += autoScrollSpeed.value
-		if (lastMouseEvent.value) {
-			updateLineSelection(lastMouseEvent.value)
-		}
-	}, 16)
-}
-
-const stopAutoScroll = () => {
-	if (autoScrollInterval.value) {
-		clearInterval(autoScrollInterval.value)
-		autoScrollInterval.value = null
-	}
-	autoScrollSpeed.value = 0
-}
-
-const handleCopy = (event: KeyboardEvent) => {
-	if (!event.metaKey && !event.ctrlKey) return
-	if (event.key !== 'c') return
-	if (selectionStart.value === null || selectionEnd.value === null) return
-
-	event.preventDefault()
-
-	const start = Math.min(selectionStart.value, selectionEnd.value)
-	const end = Math.max(selectionStart.value, selectionEnd.value)
-	const selectedLines = activeOutput.value.slice(start, end + 1)
-
-	navigator.clipboard.writeText(selectedLines.join('\n'))
-
-	selectionStart.value = null
-	selectionEnd.value = null
-	lastClickIndex.value = null
-}
-
-const hasSelection = computed(
-	() =>
-		selectionStart.value !== null &&
-		selectionEnd.value !== null &&
-		selectionStart.value !== selectionEnd.value,
-)
-
-const isSingleLineSelected = computed(
-	() =>
-		selectionStart.value !== null &&
-		selectionEnd.value !== null &&
-		selectionStart.value === selectionEnd.value,
-)
-
-const copySelectedLines = () => {
-	if (!hasSelection.value && !isSingleLineSelected.value) return
-
-	let selectedLines
-	if (isSingleLineSelected.value) {
-		const index = selectionStart.value!
-		selectedLines = [activeOutput.value[index]]
-	} else {
-		const start = Math.min(selectionStart.value!, selectionEnd.value!)
-		const end = Math.max(selectionStart.value!, selectionEnd.value!)
-		selectedLines = activeOutput.value.slice(start, end + 1)
-	}
-
-	navigator.clipboard.writeText(selectedLines.join('\n'))
-
-	selectionStart.value = null
-	selectionEnd.value = null
-	lastClickIndex.value = null
-}
-
-const getSelectionPosition = () => {
-	if (!hasSelection.value || !scrollContainer.value) return { start: 0, end: 0 }
-
-	const start = Math.min(selectionStart.value!, selectionEnd.value!)
-	const end = Math.max(selectionStart.value!, selectionEnd.value!)
-
-	const totalLines = activeOutput.value.length
-
-	return {
-		start: (start / totalLines) * 100,
-		end: ((end + 1) / totalLines) * 100,
-	}
-}
-
-const jumpToLine = (line: string, event?: MouseEvent) => {
-	event?.preventDefault()
-	event?.stopPropagation()
-
-	const index = pyroConsole.findLineIndex(line)
-	if (index === -1) return
-
-	const filteredLineIndex = pyroConsole.filteredOutput.value.indexOf(line)
-	if (filteredLineIndex === -1) return
-
-	let filteredTargetPosition = 0
-	for (let i = 0; i < filteredLineIndex; i++) {
-		filteredTargetPosition += LINE_HEIGHT
-		if (shouldShowSeparator(i, i + 1)) {
-			filteredTargetPosition += SEPARATOR_HEIGHT
-		}
-	}
-
-	const viewportHeight = scrollContainer.value?.clientHeight ?? 0
-	const currentScrollPosition = scrollContainer.value?.scrollTop ?? 0
-	const relativePosition = (filteredTargetPosition - currentScrollPosition) / viewportHeight
-
-	const targetLineRelativeOffset = relativePosition
-	const targetLine = line
-
-	clearSearch()
-
-	nextTick(() => {
-		if (!scrollContainer.value) return
-
-		const targetPosition = index * LINE_HEIGHT
-		const containerHeight = scrollContainer.value.clientHeight
-		const targetScrollTop = Math.max(0, targetPosition - containerHeight * targetLineRelativeOffset)
-
-		scrollContainer.value.scrollTop = targetScrollTop
-
-		requestAnimationFrame(() => {
-			handleListScroll()
-
-			const elements = scrollContainer.value?.getElementsByTagName('li')
-			if (!elements) return
-
-			const targetElement = Array.from(elements).find(
-				(el) =>
-					el.textContent?.includes(targetLine) && !el.hasAttribute('data-pyro-terminal-separator'),
-			)
-
-			if (targetElement) {
-				targetElement.classList.add('jumped-line')
-				requestAnimationFrame(() => {
-					targetElement.classList.add('jumped-line-active')
-					setTimeout(() => {
-						targetElement.classList.remove('jumped-line-active')
-						targetElement.classList.remove('jumped-line')
-					}, 4000)
-				})
-			}
-		})
-	})
-}
-
-const sanitizeUrl = (url: string): string => {
-	try {
-		const parsed = new URL(url)
-		if (!['http:', 'https:'].includes(parsed.protocol)) {
-			return '#'
-		}
-		return parsed.toString()
-	} catch {
-		return '#'
-	}
-}
-
-const detectedLinks = computed(() => {
-	const urlRegex = /(https?:\/\/[^\s,<]+(?=[,\s<]|$))/g
-	const matches = [...selectedLog.value.matchAll(urlRegex)].map((match) => match[0])
-	return matches.filter((url) => sanitizeUrl(url) !== '#')
-})
-
-const processedLogWithLinks = computed(() => {
-	const urlRegex = /(https?:\/\/[^\s,<]+(?=[,\s<]|$))/g
-	const sanitizedLog = DOMPurify.sanitize(selectedLog.value, {
-		ALLOWED_TAGS: [],
-		ALLOWED_ATTR: [],
-	})
-
-	return sanitizedLog.replace(urlRegex, (url) => {
-		const safeUrl = sanitizeUrl(url)
-		if (safeUrl === '#') return url
-		return `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer nofollow" class="text-blue hover:underline">${url}</a>`
-	})
-})
-
-watch(
-	() => pyroConsole.filteredOutput.value,
-	() => {
-		nextTick(() => {
-			handleListScroll()
-		})
-	},
-)
-
-watch(searchInput, (value) => {
-	updateSearch(value)
-})
-
-watch(
-	() => consoleOutput.value,
-	(newOutput, oldOutput) => {
-		if (!oldOutput || newOutput.length <= oldOutput.length) return
-
-		const shouldScroll = isScrolledToBottom.value || !userHasScrolled.value || isInitialLoad.value
-
-		if (shouldScroll) {
-			if (isInitialLoad.value) {
-				setTimeout(() => {
-					scrollToBottom()
-					isInitialLoad.value = false
-				}, 100)
-			} else {
-				nextTick(scrollToBottom)
-			}
-		}
-	},
-	{ flush: 'post' },
-)
-
-watch(
-	() => pyroConsole.filteredOutput.value,
-	() => {
-		if (searchInput.value && scrollContainer.value) {
-			nextTick(() => {
-				handleListScroll()
-			})
-		}
-	},
-)
-
-watch(
-	() => props.fullScreen,
-	(newValue) => {
-		isFullScreen.value = newValue
-		nextTick(() => {
-			updateClientHeight()
-		})
-	},
-)
-
-watch(isFullScreen, () => {
-	nextTick(() => {
-		updateClientHeight()
-	})
-})
-
-onMounted(() => {
-	initializeTerminal()
-
-	window.addEventListener('resize', updateClientHeight)
-	window.addEventListener('keydown', handleKeydown)
-	window.addEventListener('mouseup', handleGlobalMouseUp)
-	window.addEventListener('contextmenu', handleContextMenu)
-	window.addEventListener('click', handleClickOutside)
-})
-
-onUnmounted(() => {
-	window.removeEventListener('resize', updateClientHeight)
-	window.removeEventListener('keydown', handleKeydown)
-	window.removeEventListener('mouseup', handleGlobalMouseUp)
-	window.removeEventListener('contextmenu', handleContextMenu)
-	window.removeEventListener('click', handleClickOutside)
-	stopDragging()
-	setBodyScroll(true)
-	if (scrollEndTimeout.value) {
-		clearTimeout(scrollEndTimeout.value)
-	}
-})
-
-onMounted(() => {
-	window.addEventListener('keydown', handleCopy)
-})
-
-onUnmounted(() => {
-	window.removeEventListener('keydown', handleCopy)
-	stopAutoScroll()
-})
-</script>
-
-<style scoped>
-:root {
-	--console-bg: var(--color-bg);
-}
-
-.terminal-font {
-	font-family: var(--mono-font);
-	font-size: 1rem;
-	line-height: 1.5em;
-}
-
-html.light-mode .console {
-	--console-bg: var(--color-bg);
-}
-
-html.dark-mode .console {
-	--console-bg: black;
-}
-
-html.oled-mode .console {
-	--console-bg: black;
-}
-
-.console {
-	background: var(--console-bg);
-}
-
-.scrollbar-none {
-	-ms-overflow-style: none;
-	scrollbar-width: none;
-}
-
-.scrollbar-none::-webkit-scrollbar {
-	display: none;
-}
-
-[data-pyro-terminal-root]::-webkit-scrollbar,
-[data-pyro-terminal-root]::-webkit-scrollbar-thumb,
-[data-pyro-terminal-root]::-webkit-scrollbar-track-piece,
-[data-pyro-terminal-root]::-webkit-scrollbar-corner {
-	display: none;
-}
-
-.screen-fixed {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100vw;
-	height: 100vh;
-	z-index: 50;
-	background: var(--color-bg);
-}
-
-@keyframes scaleUp {
-	from {
-		opacity: 0;
-		transform: scale(0.98);
-	}
-	to {
-		opacity: 1;
-		transform: scale(1);
-	}
-}
-
-.scale-fullscreen {
-	animation: scaleUp 190ms forwards;
-}
-
-.progressive-gradient {
-	background: linear-gradient(
-		to top,
-		color-mix(in srgb, var(--color-bg), transparent var(--transparency)) 0%,
-		rgba(0, 0, 0, 0) 100%
-	);
-}
-
-html.dark-mode .progressive-gradient {
-	background: linear-gradient(
-		to top,
-		color-mix(in srgb, black, transparent var(--transparency)) 0%,
-		rgba(0, 0, 0, 0) 100%
-	);
-}
-
-.scroll-to-bottom-enter-active,
-.scroll-to-bottom-leave-active {
-	transition:
-		opacity 300ms ease,
-		transform 300ms ease;
-}
-
-.scroll-to-bottom-enter-from,
-.scroll-to-bottom-leave-to {
-	opacity: 0;
-	transform: scale(0.4) translateY(2rem);
-}
-
-[data-pyro-terminal-selected='true'] {
-	border-radius: 0;
-}
-
-[data-pyro-terminal-selected='true'].first-selected {
-	border-top-left-radius: 0.5rem;
-	border-top-right-radius: 0.5rem;
-	overflow: hidden !important;
-}
-
-[data-pyro-terminal-selected='true'].last-selected {
-	border-bottom-left-radius: 0.5rem;
-	border-bottom-right-radius: 0.5rem;
-	overflow: hidden !important;
-}
-
-[data-pyro-terminal-root] {
-	will-change: transform;
-	backface-visibility: hidden;
-	transform: translateZ(0);
-	-webkit-font-smoothing: subpixel-antialiased;
-}
-
-[data-pyro-terminal-root] {
-	user-select: none;
-}
-
-[data-pyro-terminal-root] * {
-	user-select: text;
-}
-
-.selection-in-progress {
-	pointer-events: none;
-}
-
-[data-pyro-terminal-virtual-list] {
-	will-change: transform;
-	transform: translateZ(0);
-}
-
-[data-pyro-terminal-scrollbar-thumb] {
-	will-change: transform;
-	transform: translateZ(0);
-}
-
-[data-pyro-terminal-virtual-list] li {
-	height: 32px;
-	transition: background-color 0.1s ease;
-}
-
-.selected-line {
-	background: color-mix(in srgb, var(--color-blue) 20%, transparent) !important;
-	position: relative;
-}
-
-.selected-line::before {
-	content: '';
-	position: absolute;
-	left: 0;
-	top: -2px;
-	bottom: -2px;
-	width: 3px;
-	border-radius: 0.5rem;
-	background: var(--color-blue);
-}
-
-.selected-line:hover {
-	background: color-mix(in srgb, var(--color-blue) 24%, transparent) !important;
-}
-
-[data-pyro-terminal-virtual-list] li {
-	height: 32px;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-	transition: opacity 200ms ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-}
-
-.scrolling-active {
-	pointer-events: none;
-}
-
-.scrolling-active li {
-	pointer-events: none;
-}
-
-[data-pyro-terminal-scrollbar-track] {
-	border-radius: 24px;
-}
-
-[data-pyro-terminal-scrollbar-thumb] {
-	background: color-mix(in srgb, var(--color-contrast) 40%, transparent);
-}
-
-.view-button-enter-active {
-	transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
-	width: 100px;
-	margin-left: 0.5rem;
-	overflow: hidden;
-}
-
-.view-button-leave-active {
-	transition: all 200ms cubic-bezier(0.4, 0, 1, 1);
-	overflow: hidden;
-}
-
-.view-button-enter-from,
-.view-button-leave-to {
-	opacity: 0;
-	width: 0;
-	margin-left: 0;
-	padding-left: 0;
-	padding-right: 0;
-}
-
-.view-button-enter-active,
-.view-button-leave-active {
-	transition: all 200ms ease;
-	width: 100px;
-	margin-left: 0.5rem;
-}
-
-.view-button-enter-from,
-.view-button-leave-to {
-	opacity: 0;
-	width: 0;
-	margin-left: 0;
-}
-
-.jumped-line {
-	position: relative;
-	z-index: 1;
-}
-
-.jumped-line-active {
-	animation: highlight-jump 2s ease;
-}
-
-@keyframes highlight-jump {
-	0% {
-		background: transparent;
-	}
-	15%,
-	85% {
-		background: color-mix(in srgb, var(--color-blue) 15%, transparent);
-	}
-	100% {
-		background: transparent;
-	}
-}
-
-.jump-button {
-	opacity: 0.4;
-	transition: all 0.2s ease;
-}
-
-.group:hover .jump-button {
-	opacity: 0.8;
-}
-
-.group:hover .jump-button:hover {
-	opacity: 1;
-}
-</style>
diff --git a/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue b/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
deleted file mode 100644
index e7b0c74ed7..0000000000
--- a/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
+++ /dev/null
@@ -1,163 +0,0 @@
-<template>
-	<NewModal
-		ref="modal"
-		:header="'Changing ' + props.project?.title + ' version'"
-		@hide="onHide"
-		@show="onShow"
-	>
-		<div class="flex flex-col gap-4 md:w-[600px]">
-			<div class="flex flex-col gap-2">
-				<p class="m-0">
-					Select the version of {{ props.project?.title || 'the modpack' }} you want to install on
-					your server.
-				</p>
-				<p v-if="props.currentVersion" class="m-0 text-sm text-secondary">
-					Currently installed: {{ props.currentVersion.version_number }}
-				</p>
-			</div>
-
-			<div class="flex w-full flex-col gap-4">
-				<Combobox
-					v-if="props.versions?.length"
-					v-model="selectedVersion"
-					:options="versionOptions.map((v) => ({ value: v, label: v }))"
-					:display-value="selectedVersion || 'Select version...'"
-					placeholder="Select version..."
-					name="version"
-					class="w-full max-w-full"
-				/>
-
-				<div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
-					<div class="flex w-full flex-row items-center justify-between">
-						<label class="w-full text-lg font-bold text-contrast" for="modpack-hard-reset">
-							Erase all data
-						</label>
-						<Toggle id="modpack-hard-reset" v-model="hardReset" class="shrink-0" />
-					</div>
-					<div>
-						If enabled, existing mods, worlds, and configurations, will be deleted before installing
-						the new modpack version.
-					</div>
-				</div>
-
-				<div class="mt-4 flex justify-start gap-4">
-					<ButtonStyled :color="hardReset ? 'red' : 'brand'">
-						<button
-							:disabled="isLoading || !selectedVersion || props.serverStatus === 'installing'"
-							@click="handleReinstall"
-						>
-							<DownloadIcon class="size-4" />
-							{{ isLoading ? 'Installing...' : hardReset ? 'Erase and install' : 'Install' }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button :disabled="isLoading" @click="hide">
-							<XIcon />
-							Cancel
-						</button>
-					</ButtonStyled>
-				</div>
-			</div>
-		</div>
-	</NewModal>
-</template>
-
-<script setup lang="ts">
-import { DownloadIcon, XIcon } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	Combobox,
-	injectModrinthClient,
-	injectModrinthServerContext,
-	injectNotificationManager,
-	NewModal,
-	Toggle,
-} from '@modrinth/ui'
-import { ModrinthServersFetchError } from '@modrinth/utils'
-
-const { serverId } = injectModrinthServerContext()
-const client = injectModrinthClient()
-const { addNotification } = injectNotificationManager()
-
-const props = defineProps<{
-	project: any
-	versions: any[]
-	currentVersion?: any
-	currentVersionId?: string
-	serverStatus?: string
-}>()
-
-const emit = defineEmits<{
-	reinstall: [any?]
-}>()
-
-const modal = ref()
-const hardReset = ref(false)
-const isLoading = ref(false)
-const selectedVersion = ref(props.currentVersion?.version_number || '')
-
-const versionOptions = computed(() => props.versions?.map((v) => v.version_number) || [])
-
-const handleReinstall = async () => {
-	if (!selectedVersion.value || !props.project?.id) return
-
-	isLoading.value = true
-	try {
-		const versionId = props.versions.find((v) => v.version_number === selectedVersion.value)?.id
-
-		await client.archon.servers_v0.reinstall(
-			serverId,
-			{
-				project_id: props.project.id,
-				version_id: versionId,
-			},
-			hardReset.value,
-		)
-
-		emit('reinstall')
-		hide()
-	} catch (error) {
-		if (error instanceof ModrinthServersFetchError && error.statusCode === 429) {
-			addNotification({
-				title: 'Cannot reinstall server',
-				text: 'You are being rate limited. Please try again later.',
-				type: 'error',
-			})
-		} else {
-			addNotification({
-				title: 'Reinstall Failed',
-				text: 'An unexpected error occurred while reinstalling. Please try again later.',
-				type: 'error',
-			})
-		}
-	} finally {
-		isLoading.value = false
-	}
-}
-
-watch(
-	() => props.serverStatus,
-	(newStatus) => {
-		if (newStatus === 'installing') {
-			hide()
-		}
-	},
-)
-
-const onShow = () => {
-	hardReset.value = false
-	selectedVersion.value =
-		props.currentVersion?.version_number ?? props.versions?.[0]?.version_number ?? ''
-}
-
-const onHide = () => {
-	hardReset.value = false
-	selectedVersion.value = ''
-	isLoading.value = false
-}
-
-const show = () => modal.value?.show()
-const hide = () => modal.value?.hide()
-
-defineExpose({ show, hide })
-</script>
diff --git a/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue b/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
deleted file mode 100644
index f4ca68f7c0..0000000000
--- a/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
+++ /dev/null
@@ -1,538 +0,0 @@
-<template>
-	<NewModal
-		ref="versionSelectModal"
-		:header="
-			isSecondPhase
-				? 'Confirming reinstallation'
-				: `${props.currentLoader === selectedLoader ? 'Reinstalling' : 'Installing'}
-      ${selectedLoader.toLowerCase() === 'vanilla' ? 'Vanilla Minecraft' : selectedLoader}`
-		"
-		@hide="onHide"
-		@show="onShow"
-	>
-		<div class="flex flex-col gap-4 md:w-[600px]">
-			<p
-				v-if="isSecondPhase"
-				:style="{
-					lineHeight: isSecondPhase ? '1.5' : undefined,
-					marginBottom: isSecondPhase ? '-12px' : '0',
-					marginTop: isSecondPhase ? '-4px' : '-2px',
-				}"
-			>
-				{{
-					'This will reinstall your server and erase all data. Are you sure you want to continue?'
-				}}
-			</p>
-			<div v-if="!isSecondPhase" class="flex flex-col gap-4">
-				<div class="mx-auto flex flex-row items-center gap-4">
-					<div
-						class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-button-bg shadow-sm"
-					>
-						<LoaderIcon class="size-10" :loader="selectedLoader" />
-					</div>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						width="24"
-						height="24"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						class="size-10"
-					>
-						<path d="M5 9v6" />
-						<path d="M9 9h3V5l7 7-7 7v-4H9V9z" />
-					</svg>
-					<div
-						class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-table-alternateRow shadow-sm"
-					>
-						<ServerIcon class="size-10" />
-					</div>
-				</div>
-
-				<div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
-					<div class="text-lg font-bold text-contrast">Minecraft version</div>
-					<Combobox
-						v-model="selectedMCVersion"
-						name="mcVersion"
-						:options="mcVersions.map((v) => ({ value: v, label: v }))"
-						:display-value="selectedMCVersion || 'Select Minecraft version...'"
-						class="!w-full"
-						placeholder="Select Minecraft version..."
-					/>
-					<div class="mt-2 flex items-center justify-between gap-2">
-						<label for="toggle-snapshots" class="font-semibold"> Show snapshot versions </label>
-						<div
-							v-tooltip="
-								isSnapshotSelected ? 'A snapshot version is currently selected.' : undefined
-							"
-						>
-							<Toggle
-								id="toggle-snapshots"
-								v-model="showSnapshots"
-								:disabled="isSnapshotSelected"
-							/>
-						</div>
-					</div>
-				</div>
-
-				<div
-					v-if="selectedLoader.toLowerCase() !== 'vanilla'"
-					class="flex w-full flex-col gap-2 rounded-2xl p-4"
-					:class="{
-						'bg-table-alternateRow':
-							!selectedMCVersion || isLoading || selectedLoaderVersions.length > 0,
-						'bg-highlight-red':
-							selectedMCVersion && !isLoading && selectedLoaderVersions.length === 0,
-					}"
-				>
-					<div class="flex flex-col gap-2">
-						<div class="text-lg font-bold text-contrast">{{ selectedLoader }} version</div>
-
-						<template v-if="!selectedMCVersion">
-							<div
-								class="relative flex h-9 w-full select-none items-center rounded-xl bg-button-bg px-4 opacity-50"
-							>
-								Select a Minecraft version to see available versions
-								<DropdownIcon class="absolute right-4" />
-							</div>
-						</template>
-						<template v-else-if="isLoading">
-							<div
-								class="relative flex h-9 w-full items-center rounded-xl bg-button-bg px-4 opacity-50"
-							>
-								<LoadingIcon class="mr-2 animate-spin" />
-								Loading versions...
-								<DropdownIcon class="absolute right-4" />
-							</div>
-						</template>
-						<template v-else-if="selectedLoaderVersions.length > 0">
-							<Combobox
-								v-model="selectedLoaderVersion"
-								name="loaderVersion"
-								:options="selectedLoaderVersions.map((v) => ({ value: v, label: v }))"
-								:display-value="
-									selectedLoaderVersion ||
-									(selectedLoader.toLowerCase() === 'paper' ||
-									selectedLoader.toLowerCase() === 'purpur'
-										? 'Select build number...'
-										: 'Select loader version...')
-								"
-								class="w-full max-w-[100%]"
-								:placeholder="
-									selectedLoader.toLowerCase() === 'paper' ||
-									selectedLoader.toLowerCase() === 'purpur'
-										? `Select build number...`
-										: `Select loader version...`
-								"
-							/>
-						</template>
-						<template v-else>
-							<div>No versions available for Minecraft {{ selectedMCVersion }}.</div>
-						</template>
-					</div>
-				</div>
-
-				<div
-					v-if="!initialSetup"
-					class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4"
-				>
-					<div class="flex w-full flex-row items-center justify-between">
-						<label class="w-full text-lg font-bold text-contrast" for="hard-reset">
-							Erase all data
-						</label>
-						<Toggle id="hard-reset" v-model="hardReset" class="shrink-0" />
-					</div>
-					<div>
-						Removes all data on your server, including your worlds, mods, and configuration files,
-						then reinstalls it with the selected version.
-					</div>
-					<div class="font-bold">This does not affect your backups, which are stored off-site.</div>
-				</div>
-
-				<BackupWarning v-if="!initialSetup" :backup-link="`/hosting/manage/${serverId}/backups`" />
-			</div>
-
-			<div class="mt-4 flex justify-start gap-4">
-				<ButtonStyled :color="isDangerous ? 'red' : 'brand'">
-					<button
-						v-tooltip="busyReasons.length > 0 ? formatMessage(busyReasons[0].reason) : undefined"
-						:disabled="canInstall || busyReasons.length > 0"
-						@click="handleReinstall"
-					>
-						<RightArrowIcon />
-						{{
-							isLoading
-								? 'Installing...'
-								: isSecondPhase
-									? 'Erase and install'
-									: hardReset
-										? 'Continue'
-										: 'Install'
-						}}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button
-						:disabled="isLoading"
-						@click="
-							() => {
-								if (isSecondPhase) {
-									isSecondPhase = false
-								} else {
-									hide()
-								}
-							}
-						"
-					>
-						<XIcon />
-						{{ isSecondPhase ? 'Go back' : 'Cancel' }}
-					</button>
-				</ButtonStyled>
-			</div>
-		</div>
-	</NewModal>
-</template>
-
-<script setup lang="ts">
-import { DropdownIcon, RightArrowIcon, ServerIcon, XIcon } from '@modrinth/assets'
-import {
-	BackupWarning,
-	ButtonStyled,
-	Combobox,
-	injectModrinthClient,
-	injectModrinthServerContext,
-	injectNotificationManager,
-	NewModal,
-	Toggle,
-	useVIntl,
-} from '@modrinth/ui'
-import { type Loaders, ModrinthServersFetchError } from '@modrinth/utils'
-import { $fetch } from 'ofetch'
-
-import LoaderIcon from './icons/LoaderIcon.vue'
-import LoadingIcon from './icons/LoadingIcon.vue'
-
-const { server, serverId, busyReasons } = injectModrinthServerContext()
-const client = injectModrinthClient()
-const { addNotification } = injectNotificationManager()
-const { formatMessage } = useVIntl()
-
-interface LoaderVersion {
-	id: string
-	stable: boolean
-	loaders: {
-		id: string
-		url: string
-		stable: boolean
-	}[]
-}
-
-type VersionMap = Record<string, LoaderVersion[]>
-type VersionCache = Record<string, any>
-
-const props = defineProps<{
-	currentLoader: Loaders | undefined
-	initialSetup?: boolean
-}>()
-
-const emit = defineEmits<{
-	reinstall: [any?]
-}>()
-
-const versionSelectModal = ref()
-const isSecondPhase = ref(false)
-const hardReset = ref(false)
-const isLoading = ref(false)
-const loadingServerCheck = ref(false)
-const serverCheckError = ref('')
-const showSnapshots = ref(false)
-
-const selectedLoader = ref<Loaders>('Vanilla')
-const selectedMCVersion = ref('')
-const selectedLoaderVersion = ref('')
-
-const paperVersions = ref<Record<string, number[]>>({})
-const purpurVersions = ref<Record<string, string[]>>({})
-const loaderVersions = ref<VersionMap>({})
-const cachedVersions = ref<VersionCache>({})
-
-const versionStrings = ['forge', 'fabric', 'quilt', 'neo'] as const
-
-const isSnapshotSelected = computed(() => {
-	if (selectedMCVersion.value) {
-		const selected = tags.value.gameVersions.find((x) => x.version === selectedMCVersion.value)
-		if (selected?.version_type !== 'release') {
-			return true
-		}
-	}
-	return false
-})
-
-const getLoaderVersions = async (loader: string) => {
-	return await $fetch(
-		`https://launcher-meta.modrinth.com/${loader?.toLowerCase()}/v0/manifest.json`,
-	)
-}
-
-const fetchLoaderVersions = async () => {
-	const versions = await Promise.all(
-		versionStrings.map(async (loader) => {
-			const runFetch = async (iterations: number) => {
-				if (iterations > 5) {
-					throw new Error('Failed to fetch loader versions')
-				}
-				try {
-					const res = await getLoaderVersions(loader)
-					return { [loader]: (res as any).gameVersions }
-					// eslint-disable-next-line @typescript-eslint/no-unused-vars
-				} catch (_) {
-					return await runFetch(iterations + 1)
-				}
-			}
-			try {
-				return await runFetch(0)
-			} catch (e) {
-				console.error(e)
-				return { [loader]: [] }
-			}
-		}),
-	)
-
-	loaderVersions.value = versions.reduce((acc, val) => ({ ...acc, ...val }), {})
-}
-
-const fetchPaperVersions = async (mcVersion: string) => {
-	try {
-		const res = await $fetch(`https://fill.papermc.io/v3/projects/paper/versions/${mcVersion}`)
-		paperVersions.value[mcVersion] = (res as any).builds.sort((a: number, b: number) => b - a)
-		return res
-	} catch (e) {
-		console.error(e)
-		return null
-	}
-}
-
-const fetchPurpurVersions = async (mcVersion: string) => {
-	try {
-		const res = await $fetch(`https://api.purpurmc.org/v2/purpur/${mcVersion}`)
-		purpurVersions.value[mcVersion] = (res as any).builds.all.sort(
-			(a: string, b: string) => parseInt(b) - parseInt(a),
-		)
-		return res
-	} catch (e) {
-		console.error(e)
-		return null
-	}
-}
-
-const selectedLoaderVersions = computed<string[]>(() => {
-	const loader = selectedLoader.value.toLowerCase()
-
-	if (loader === 'paper') {
-		return paperVersions.value[selectedMCVersion.value]?.map((x) => `${x}`) || []
-	}
-
-	if (loader === 'purpur') {
-		return purpurVersions.value[selectedMCVersion.value] || []
-	}
-
-	if (loader === 'vanilla') {
-		return []
-	}
-
-	let apiLoader = loader
-	if (loader === 'neoforge') {
-		apiLoader = 'neo'
-	}
-
-	const backwardsCompatibleVersion = loaderVersions.value[apiLoader]?.find(
-		(x) => x.id === '${modrinth.gameVersion}',
-	)
-
-	if (backwardsCompatibleVersion) {
-		return backwardsCompatibleVersion.loaders.map((x) => x.id)
-	}
-
-	return (
-		loaderVersions.value[apiLoader]
-			?.find((x) => x.id === selectedMCVersion.value)
-			?.loaders.map((x) => x.id) || []
-	)
-})
-
-watch(selectedLoader, async () => {
-	if (selectedMCVersion.value) {
-		selectedLoaderVersion.value = ''
-		serverCheckError.value = ''
-
-		await checkVersionAvailability(selectedMCVersion.value)
-	}
-})
-
-watch(
-	selectedLoaderVersions,
-	(newVersions) => {
-		if (
-			newVersions.length > 0 &&
-			(!selectedLoaderVersion.value || !newVersions.includes(selectedLoaderVersion.value))
-		) {
-			selectedLoaderVersion.value = String(newVersions[0])
-		}
-	},
-	{ immediate: true },
-)
-
-const getLoaderVersion = async (loader: string, version: string) => {
-	return await $fetch(
-		`https://launcher-meta.modrinth.com/${loader?.toLowerCase()}/v0/versions/${version}.json`,
-	)
-}
-
-const checkVersionAvailability = async (version: string) => {
-	if (!version || version.trim().length < 3) return
-
-	isLoading.value = true
-	loadingServerCheck.value = true
-
-	try {
-		const mcRes = cachedVersions.value[version] || (await getLoaderVersion('minecraft', version))
-
-		cachedVersions.value[version] = mcRes
-
-		if (!mcRes.downloads?.server) {
-			serverCheckError.value = "We couldn't find a server.jar for this version."
-			return
-		}
-
-		const loader = selectedLoader.value.toLowerCase()
-		if (loader === 'paper' || loader === 'purpur') {
-			const fetchFn = loader === 'paper' ? fetchPaperVersions : fetchPurpurVersions
-			const result = await fetchFn(version)
-			if (!result) {
-				serverCheckError.value = `This Minecraft version is not supported by ${loader}.`
-				return
-			}
-		}
-
-		serverCheckError.value = ''
-	} catch (error) {
-		console.error(error)
-		serverCheckError.value = 'Failed to fetch versions.'
-	} finally {
-		loadingServerCheck.value = false
-		isLoading.value = false
-	}
-}
-
-watch(selectedMCVersion, checkVersionAvailability)
-
-onMounted(() => {
-	fetchLoaderVersions()
-})
-
-const tags = useGeneratedState()
-const mcVersions = computed(() =>
-	tags.value.gameVersions
-		.filter((x) =>
-			showSnapshots.value
-				? x.version_type === 'snapshot' || x.version_type === 'release'
-				: x.version_type === 'release',
-		)
-		.map((x) => x.version),
-)
-
-const isDangerous = computed(() => hardReset.value)
-const canInstall = computed(() => {
-	const conds =
-		!selectedMCVersion.value ||
-		isLoading.value ||
-		loadingServerCheck.value ||
-		serverCheckError.value.trim().length > 0
-
-	if (selectedLoader.value.toLowerCase() === 'vanilla') {
-		return conds
-	}
-
-	return conds || !selectedLoaderVersion.value
-})
-
-const handleReinstall = async () => {
-	if (hardReset.value && !isSecondPhase.value) {
-		isSecondPhase.value = true
-		return
-	}
-
-	isLoading.value = true
-
-	try {
-		await client.archon.servers_v0.reinstall(
-			serverId,
-			{
-				loader: selectedLoader.value,
-				loader_version:
-					selectedLoader.value === 'Vanilla' ? undefined : selectedLoaderVersion.value || undefined,
-				game_version: selectedMCVersion.value,
-			},
-			props.initialSetup ? true : hardReset.value,
-		)
-
-		emit('reinstall', {
-			loader: selectedLoader.value,
-			lVersion: selectedLoaderVersion.value,
-			mVersion: selectedMCVersion.value,
-		})
-
-		hide()
-	} catch (error) {
-		if (error instanceof ModrinthServersFetchError && (error as any)?.statusCode === 429) {
-			addNotification({
-				title: 'Cannot reinstall server',
-				text: 'You are being rate limited. Please try again later.',
-				type: 'error',
-			})
-		} else {
-			addNotification({
-				title: 'Reinstall Failed',
-				text: 'An unexpected error occurred while reinstalling. Please try again later.',
-				type: 'error',
-			})
-		}
-	} finally {
-		isLoading.value = false
-	}
-}
-
-const onShow = () => {
-	selectedMCVersion.value = server.value?.mc_version || ''
-	if (isSnapshotSelected.value) {
-		showSnapshots.value = true
-	}
-}
-
-const onHide = () => {
-	hardReset.value = false
-	isSecondPhase.value = false
-	serverCheckError.value = ''
-	loadingServerCheck.value = false
-	isLoading.value = false
-	selectedMCVersion.value = ''
-	serverCheckError.value = ''
-	paperVersions.value = {}
-	purpurVersions.value = {}
-}
-
-const show = (loader: Loaders) => {
-	if (selectedLoader.value !== loader) {
-		selectedLoaderVersion.value = ''
-	}
-	selectedLoader.value = loader
-	selectedMCVersion.value = server.value?.mc_version || ''
-	versionSelectModal.value?.show()
-}
-const hide = () => versionSelectModal.value?.hide()
-
-defineExpose({ show, hide })
-</script>
diff --git a/apps/frontend/src/components/ui/servers/SaveBanner.vue b/apps/frontend/src/components/ui/servers/SaveBanner.vue
deleted file mode 100644
index a43e4dd1f1..0000000000
--- a/apps/frontend/src/components/ui/servers/SaveBanner.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { SaveBanner as SharedSaveBanner } from '@modrinth/ui'
-
-const props = defineProps<{
-	isUpdating: boolean
-	restart?: boolean
-	save: () => void
-	reset: () => void
-	isVisible: boolean
-	serverId: string
-}>()
-</script>
-
-<template>
-	<!-- TODO, delete this wrapper and update imports in /frontend accordingly to use from /ui-->
-	<SharedSaveBanner v-bind="props" />
-</template>
diff --git a/apps/frontend/src/components/ui/servers/ServerSidebar.vue b/apps/frontend/src/components/ui/servers/ServerSidebar.vue
deleted file mode 100644
index 1b455df0c1..0000000000
--- a/apps/frontend/src/components/ui/servers/ServerSidebar.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-	<div class="static w-full grid-cols-1 md:relative md:flex">
-		<div class="static h-full flex-col pb-4 md:flex md:pb-0 md:pr-4">
-			<div class="z-10 flex select-none flex-col gap-2 rounded-2xl bg-bg-raised p-4 md:w-[16rem]">
-				<div
-					v-for="link in navLinks.filter((x) => x.shown === undefined || x.shown)"
-					:key="link.label"
-				>
-					<NuxtLink
-						:to="link.href"
-						class="flex items-center gap-2 rounded-xl p-2 hover:bg-button-bg"
-						:class="{ 'bg-button-bg text-contrast': route.path === link.href }"
-					>
-						<div class="flex items-center gap-2 font-bold">
-							<component :is="link.icon" class="size-6" />
-							{{ link.label }}
-						</div>
-
-						<div class="flex-grow" />
-						<RightArrowIcon v-if="link.external" class="size-4" />
-					</NuxtLink>
-				</div>
-			</div>
-		</div>
-
-		<div class="h-full w-full">
-			<NuxtPage :route="route" @reinstall="onReinstall" />
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { RightArrowIcon } from '@modrinth/assets'
-import type { RouteLocationNormalized } from 'vue-router'
-
-const emit = defineEmits(['reinstall'])
-
-defineProps<{
-	navLinks: {
-		label: string
-		href: string
-		icon: Component
-		external?: boolean
-		shown?: boolean
-	}[]
-	route: RouteLocationNormalized
-}>()
-
-const onReinstall = (...args: any[]) => {
-	emit('reinstall', ...args)
-}
-</script>
diff --git a/apps/frontend/src/components/ui/servers/TeleportOverflowMenu.vue b/apps/frontend/src/components/ui/servers/TeleportOverflowMenu.vue
deleted file mode 100644
index 4a8f774134..0000000000
--- a/apps/frontend/src/components/ui/servers/TeleportOverflowMenu.vue
+++ /dev/null
@@ -1,438 +0,0 @@
-<template>
-	<div data-pyro-telepopover-wrapper class="relative">
-		<button
-			ref="triggerRef"
-			class="teleport-overflow-menu-trigger"
-			:aria-expanded="isOpen"
-			:aria-haspopup="true"
-			@mousedown="handleMouseDown"
-			@mouseenter="handleMouseEnter"
-			@mouseleave="handleMouseLeave"
-			@click="toggleMenu"
-		>
-			<slot></slot>
-		</button>
-		<Teleport to="#teleports">
-			<Transition
-				enter-active-class="transition duration-125 ease-out"
-				enter-from-class="transform scale-75 opacity-0"
-				enter-to-class="transform scale-100 opacity-100"
-				leave-active-class="transition duration-125 ease-in"
-				leave-from-class="transform scale-100 opacity-100"
-				leave-to-class="transform scale-75 opacity-0"
-			>
-				<div
-					v-if="isOpen"
-					ref="menuRef"
-					data-pyro-telepopover-root
-					class="experimental-styles-within fixed isolate z-[9999] flex w-fit flex-col gap-2 overflow-hidden rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
-					:style="menuStyle"
-					role="menu"
-					tabindex="-1"
-					@mousedown.stop
-					@mouseleave="handleMouseLeave"
-				>
-					<template
-						v-for="(option, index) in filteredOptions"
-						:key="isDivider(option) ? `divider-${index}` : option.id"
-					>
-						<div v-if="isDivider(option)" class="h-px w-full bg-surface-5"></div>
-						<ButtonStyled v-else type="transparent" role="menuitem" :color="option.color">
-							<button
-								v-if="typeof option.action === 'function'"
-								:ref="
-									(el) => {
-										if (el) menuItemsRef[index] = el as HTMLElement
-									}
-								"
-								class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
-								:aria-selected="index === selectedIndex"
-								:style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
-								@click="handleItemClick(option, index)"
-								@focus="selectedIndex = index"
-								@mouseover="handleMouseOver(index)"
-							>
-								<slot :name="option.id">{{ option.id }}</slot>
-							</button>
-							<nuxt-link
-								v-else-if="typeof option.action === 'string' && option.action.startsWith('/')"
-								:ref="
-									(el) => {
-										if (el) menuItemsRef[index] = el as HTMLElement
-									}
-								"
-								:to="option.action"
-								class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
-								:aria-selected="index === selectedIndex"
-								:style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
-								@click="handleItemClick(option, index)"
-								@focus="selectedIndex = index"
-								@mouseover="handleMouseOver(index)"
-							>
-								<slot :name="option.id">{{ option.id }}</slot>
-							</nuxt-link>
-							<a
-								v-else-if="typeof option.action === 'string' && !option.action.startsWith('http')"
-								:ref="
-									(el) => {
-										if (el) menuItemsRef[index] = el as HTMLElement
-									}
-								"
-								:href="option.action"
-								target="_blank"
-								class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
-								:aria-selected="index === selectedIndex"
-								:style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
-								@click="handleItemClick(option, index)"
-								@focus="selectedIndex = index"
-								@mouseover="handleMouseOver(index)"
-							>
-								<slot :name="option.id">{{ option.id }}</slot>
-							</a>
-							<span v-else>
-								<slot :name="option.id">{{ option.id }}</slot>
-							</span>
-						</ButtonStyled>
-					</template>
-				</div>
-			</Transition>
-		</Teleport>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { ButtonStyled } from '@modrinth/ui'
-import { onClickOutside, useElementHover } from '@vueuse/core'
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-
-interface Option {
-	id: string
-	action?: (() => void) | string
-	shown?: boolean
-	color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
-}
-
-type Divider = {
-	divider: true
-	shown?: boolean
-}
-
-type Item = Option | Divider
-
-function isDivider(item: Item): item is Divider {
-	return (item as Divider).divider
-}
-
-const props = withDefaults(
-	defineProps<{
-		options: Item[]
-		hoverable?: boolean
-	}>(),
-	{
-		hoverable: false,
-	},
-)
-
-const emit = defineEmits<{
-	(e: 'select', option: Option): void
-}>()
-
-const isOpen = ref(false)
-const selectedIndex = ref(-1)
-const menuRef = ref<HTMLElement | null>(null)
-const triggerRef = ref<HTMLElement | null>(null)
-const isMouseDown = ref(false)
-const typeAheadBuffer = ref('')
-const typeAheadTimeout = ref<number | null>(null)
-const menuItemsRef = ref<HTMLElement[]>([])
-
-const hoveringTrigger = useElementHover(triggerRef)
-const hoveringMenu = useElementHover(menuRef)
-
-const hovering = computed(() => hoveringTrigger.value || hoveringMenu.value)
-
-const menuStyle = ref({
-	top: '0px',
-	left: '0px',
-})
-
-const filteredOptions = computed(() => props.options.filter((option) => option.shown !== false))
-
-const calculateMenuPosition = () => {
-	if (!triggerRef.value || !menuRef.value) return { top: '0px', left: '0px' }
-
-	const triggerRect = triggerRef.value.getBoundingClientRect()
-	const menuRect = menuRef.value.getBoundingClientRect()
-	const menuWidth = menuRect.width
-	const menuHeight = menuRect.height
-	const margin = 8
-
-	let top: number
-	let left: number
-
-	// okay gang lets calculate this shit
-	// from the top now yall
-	// y
-	if (triggerRect.bottom + menuHeight + margin <= window.innerHeight) {
-		top = triggerRect.bottom + margin
-	} else if (triggerRect.top - menuHeight - margin >= 0) {
-		top = triggerRect.top - menuHeight - margin
-	} else {
-		top = Math.max(margin, window.innerHeight - menuHeight - margin)
-	}
-
-	// x
-	if (triggerRect.left + menuWidth + margin <= window.innerWidth) {
-		left = triggerRect.left
-	} else if (triggerRect.right - menuWidth - margin >= 0) {
-		left = triggerRect.right - menuWidth
-	} else {
-		left = Math.max(margin, window.innerWidth - menuWidth - margin)
-	}
-
-	return {
-		top: `${top}px`,
-		left: `${left}px`,
-	}
-}
-
-const toggleMenu = (event: MouseEvent) => {
-	event.stopPropagation()
-	if (!props.hoverable) {
-		if (isOpen.value) {
-			closeMenu()
-		} else {
-			openMenu()
-		}
-	}
-}
-
-const openMenu = () => {
-	isOpen.value = true
-	disableBodyScroll()
-	nextTick(() => {
-		menuStyle.value = calculateMenuPosition()
-		document.addEventListener('mousemove', handleMouseMove)
-		focusFirstMenuItem()
-	})
-}
-
-const closeMenu = () => {
-	isOpen.value = false
-	selectedIndex.value = -1
-	enableBodyScroll()
-	document.removeEventListener('mousemove', handleMouseMove)
-}
-
-const selectOption = (option: Option) => {
-	emit('select', option)
-	if (typeof option.action === 'function') {
-		option.action()
-	}
-	closeMenu()
-}
-
-const handleMouseDown = (event: MouseEvent) => {
-	event.preventDefault()
-	isMouseDown.value = true
-}
-
-const handleMouseEnter = () => {
-	if (props.hoverable) {
-		openMenu()
-	}
-}
-
-const handleMouseLeave = () => {
-	if (props.hoverable) {
-		setTimeout(() => {
-			if (!hovering.value) {
-				closeMenu()
-			}
-		}, 250)
-	}
-}
-
-const handleMouseMove = (event: MouseEvent) => {
-	if (!isOpen.value || !isMouseDown.value) return
-
-	const menuRect = menuRef.value?.getBoundingClientRect()
-	if (!menuRect) return
-
-	const menuItems = menuRef.value?.querySelectorAll('[role="menuitem"]')
-	if (!menuItems) return
-
-	for (let i = 0; i < menuItems.length; i++) {
-		const itemRect = (menuItems[i] as HTMLElement).getBoundingClientRect()
-		if (
-			event.clientX >= itemRect.left &&
-			event.clientX <= itemRect.right &&
-			event.clientY >= itemRect.top &&
-			event.clientY <= itemRect.bottom
-		) {
-			selectedIndex.value = i
-			break
-		}
-	}
-}
-
-const handleItemClick = (option: Option, index: number) => {
-	selectedIndex.value = index
-	selectOption(option)
-}
-
-const handleMouseOver = (index: number) => {
-	selectedIndex.value = index
-	menuItemsRef.value[selectedIndex.value].focus?.()
-}
-
-// Scrolling is disabled for keyboard navigation
-const disableBodyScroll = () => {
-	document.body.style.overflow = 'hidden'
-}
-
-const enableBodyScroll = () => {
-	document.body.style.overflow = ''
-}
-
-const focusFirstMenuItem = () => {
-	if (menuItemsRef.value.length > 0) {
-		menuItemsRef.value[0].focus?.()
-	}
-}
-
-const handleKeydown = (event: KeyboardEvent) => {
-	if (!isOpen.value) {
-		if (event.key === 'Enter' || event.key === ' ') {
-			event.preventDefault()
-			openMenu()
-		}
-		return
-	}
-
-	switch (event.key) {
-		case 'ArrowDown':
-			event.preventDefault()
-			selectedIndex.value = (selectedIndex.value + 1) % filteredOptions.value.length
-			menuItemsRef.value[selectedIndex.value].focus?.()
-			break
-		case 'ArrowUp':
-			event.preventDefault()
-			selectedIndex.value =
-				(selectedIndex.value - 1 + filteredOptions.value.length) % filteredOptions.value.length
-			menuItemsRef.value[selectedIndex.value].focus?.()
-			break
-		case 'Home':
-			event.preventDefault()
-			if (menuItemsRef.value.length > 0) {
-				selectedIndex.value = 0
-				menuItemsRef.value[selectedIndex.value].focus?.()
-			}
-			break
-		case 'End':
-			event.preventDefault()
-			if (menuItemsRef.value.length > 0) {
-				selectedIndex.value = filteredOptions.value.length - 1
-				menuItemsRef.value[selectedIndex.value].focus?.()
-			}
-			break
-		case 'Enter':
-		case ' ':
-			event.preventDefault()
-			if (selectedIndex.value >= 0) {
-				const option = filteredOptions.value[selectedIndex.value]
-				if (isDivider(option)) break
-				selectOption(option)
-			}
-			break
-		case 'Escape':
-			event.preventDefault()
-			closeMenu()
-			triggerRef.value?.focus?.()
-			break
-		case 'Tab':
-			event.preventDefault()
-			if (menuItemsRef.value.length > 0) {
-				if (event.shiftKey) {
-					selectedIndex.value =
-						(selectedIndex.value - 1 + filteredOptions.value.length) % filteredOptions.value.length
-				} else {
-					selectedIndex.value = (selectedIndex.value + 1) % filteredOptions.value.length
-				}
-				menuItemsRef.value[selectedIndex.value].focus?.()
-			}
-			break
-		default:
-			if (event.key.length === 1) {
-				typeAheadBuffer.value += event.key.toLowerCase()
-				const matchIndex = filteredOptions.value.findIndex(
-					(option) =>
-						!isDivider(option) && option.id.toLowerCase().startsWith(typeAheadBuffer.value),
-				)
-				if (matchIndex !== -1) {
-					selectedIndex.value = matchIndex
-					menuItemsRef.value[selectedIndex.value].focus?.()
-				}
-				if (typeAheadTimeout.value) {
-					clearTimeout(typeAheadTimeout.value)
-				}
-				typeAheadTimeout.value = setTimeout(() => {
-					typeAheadBuffer.value = ''
-				}, 1000) as unknown as number
-			}
-			break
-	}
-}
-
-const handleResizeOrScroll = () => {
-	if (isOpen.value) {
-		menuStyle.value = calculateMenuPosition()
-	}
-}
-
-const throttle = (func: (...args: any[]) => void, limit: number): ((...args: any[]) => void) => {
-	let inThrottle: boolean
-	return function (...args: any[]) {
-		if (!inThrottle) {
-			func(...args)
-			inThrottle = true
-			setTimeout(() => (inThrottle = false), limit)
-		}
-	}
-}
-
-const throttledHandleResizeOrScroll = throttle(handleResizeOrScroll, 100)
-
-onMounted(() => {
-	triggerRef.value?.addEventListener('keydown', handleKeydown)
-	window.addEventListener('resize', throttledHandleResizeOrScroll)
-	window.addEventListener('scroll', throttledHandleResizeOrScroll)
-})
-
-onUnmounted(() => {
-	triggerRef.value?.removeEventListener('keydown', handleKeydown)
-	window.removeEventListener('resize', throttledHandleResizeOrScroll)
-	window.removeEventListener('scroll', throttledHandleResizeOrScroll)
-	document.removeEventListener('mousemove', handleMouseMove)
-	if (typeAheadTimeout.value) {
-		clearTimeout(typeAheadTimeout.value)
-	}
-	enableBodyScroll()
-})
-
-watch(isOpen, (newValue) => {
-	if (newValue) {
-		nextTick(() => {
-			menuRef.value?.addEventListener('keydown', handleKeydown)
-		})
-	} else {
-		menuRef.value?.removeEventListener('keydown', handleKeydown)
-	}
-})
-
-onClickOutside(menuRef, (event) => {
-	if (!triggerRef.value?.contains(event.target as Node)) {
-		closeMenu()
-	}
-})
-</script>
diff --git a/apps/frontend/src/components/ui/servers/icons/ChevronDownIcon.vue b/apps/frontend/src/components/ui/servers/icons/ChevronDownIcon.vue
deleted file mode 100644
index 783d18a402..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/ChevronDownIcon.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		class="lucide lucide-chevron-down"
-	>
-		<path d="m6 9 6 6 6-6" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/ChevronUpIcon.vue b/apps/frontend/src/components/ui/servers/icons/ChevronUpIcon.vue
deleted file mode 100644
index da6cf408ab..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/ChevronUpIcon.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		class="lucide lucide-chevron-up"
-	>
-		<path d="m18 15-6-6-6 6" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/CodeFileIcon.vue b/apps/frontend/src/components/ui/servers/icons/CodeFileIcon.vue
deleted file mode 100644
index 42022a33ce..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/CodeFileIcon.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<path d="M10 12.5 8 15l2 2.5" />
-		<path d="m14 12.5 2 2.5-2 2.5" />
-		<path d="M14 2v4a2 2 0 0 0 2 2h4" />
-		<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/CogFolderIcon.vue b/apps/frontend/src/components/ui/servers/icons/CogFolderIcon.vue
deleted file mode 100644
index cc8fc1bc66..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/CogFolderIcon.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<circle cx="18" cy="18" r="3" />
-		<path
-			d="M10.3 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v3.3"
-		/>
-		<path d="m21.7 19.4-.9-.3" />
-		<path d="m15.2 16.9-.9-.3" />
-		<path d="m16.6 21.7.3-.9" />
-		<path d="m19.1 15.2.3-.9" />
-		<path d="m19.6 21.7-.4-1" />
-		<path d="m16.8 15.3-.4-1" />
-		<path d="m14.3 19.6 1-.4" />
-		<path d="m20.7 16.8 1-.4" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/EarthIcon.vue b/apps/frontend/src/components/ui/servers/icons/EarthIcon.vue
deleted file mode 100644
index e96f944bcc..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/EarthIcon.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<path d="M21.54 15H17a2 2 0 0 0-2 2v4.54" />
-		<path
-			d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17"
-		/>
-		<path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05" />
-		<circle cx="12" cy="12" r="10" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/FullscreenIcon.vue b/apps/frontend/src/components/ui/servers/icons/FullscreenIcon.vue
deleted file mode 100644
index 383912d2b8..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/FullscreenIcon.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		class="size-5"
-	>
-		<path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8" />
-		<path d="M3 16.2V21m0 0h4.8M3 21l6-6" />
-		<path d="M21 7.8V3m0 0h-4.8M21 3l-6 6" />
-		<path d="M3 7.8V3m0 0h4.8M3 3l6 6" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/ImageFileIcon.vue b/apps/frontend/src/components/ui/servers/icons/ImageFileIcon.vue
deleted file mode 100644
index 6aa81c2779..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/ImageFileIcon.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
-		<path d="M14 2v4a2 2 0 0 0 2 2h4" />
-		<circle cx="10" cy="12" r="2" />
-		<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue b/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue
deleted file mode 100644
index 090bb945bd..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-	<component :is="icon" v-if="icon" />
-	<LoaderIcon v-else />
-</template>
-
-<script setup lang="ts">
-import { getLoaderIcon, LoaderIcon } from '@modrinth/assets'
-import { computed } from 'vue'
-
-const props = defineProps<{
-	loader: string
-}>()
-
-const icon = computed(() => getLoaderIcon(props.loader))
-</script>
diff --git a/apps/frontend/src/components/ui/servers/icons/LoadingIcon.vue b/apps/frontend/src/components/ui/servers/icons/LoadingIcon.vue
deleted file mode 100644
index 9e9a8ad3fa..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/LoadingIcon.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-		<path
-			fill-rule="evenodd"
-			d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z"
-			clip-rule="evenodd"
-		/>
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/MinimizeIcon.vue.vue b/apps/frontend/src/components/ui/servers/icons/MinimizeIcon.vue.vue
deleted file mode 100644
index 27b0fcad21..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/MinimizeIcon.vue.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		class="size-5"
-	>
-		<path d="m15 15 6 6m-6-6v4.8m0-4.8h4.8" />
-		<path d="M9 19.8V15m0 0H4.2M9 15l-6 6" />
-		<path d="M15 4.2V9m0 0h4.8M15 9l6-6" />
-		<path d="M9 4.2V9m0 0H4.2M9 9 3 3" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/PanelErrorIcon.vue b/apps/frontend/src/components/ui/servers/icons/PanelErrorIcon.vue
deleted file mode 100644
index 2ecad74dce..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/PanelErrorIcon.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		fill="none"
-		viewBox="0 0 24 24"
-		stroke-width="1.5"
-		stroke="currentColor"
-		class="size-8 text-[#FF496E]"
-	>
-		<path
-			stroke-linecap="round"
-			stroke-linejoin="round"
-			d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
-		/>
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/SlashIcon.vue b/apps/frontend/src/components/ui/servers/icons/SlashIcon.vue
deleted file mode 100644
index 7f6e62fca2..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/SlashIcon.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-	<svg height="32" viewBox="0 0 32 32" width="32">
-		<path
-			d="M22 5L9 28"
-			stroke="currentColor"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		></path>
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/TextFileIcon.vue b/apps/frontend/src/components/ui/servers/icons/TextFileIcon.vue
deleted file mode 100644
index 99bcee1ac1..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/TextFileIcon.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		class="lucide lucide-file-text"
-	>
-		<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
-		<path d="M14 2v4a2 2 0 0 0 2 2h4" />
-		<path d="M10 9H8" />
-		<path d="M16 13H8" />
-		<path d="M16 17H8" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/Timer.vue b/apps/frontend/src/components/ui/servers/icons/Timer.vue
deleted file mode 100644
index e1ead004b1..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/Timer.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<line x1="10" x2="14" y1="2" y2="2" />
-		<line x1="12" x2="15" y1="14" y2="11" />
-		<circle cx="12" cy="14" r="8" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/notice/NoticeDashboardItem.vue b/apps/frontend/src/components/ui/servers/notice/NoticeDashboardItem.vue
deleted file mode 100644
index 2208808456..0000000000
--- a/apps/frontend/src/components/ui/servers/notice/NoticeDashboardItem.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<script setup lang="ts">
-import { SettingsIcon } from '@modrinth/assets'
-import {
-	CopyCode,
-	getDismissableMetadata,
-	NOTICE_LEVELS,
-	ServerNotice,
-	TagItem,
-	useFormatDateTime,
-	useRelativeTime,
-	useVIntl,
-} from '@modrinth/ui'
-import type { ServerNotice as ServerNoticeType } from '@modrinth/utils'
-
-const { formatMessage } = useVIntl()
-const formatRelativeTime = useRelativeTime()
-const formatDateTime = useFormatDateTime({
-	timeStyle: 'short',
-	dateStyle: 'long',
-})
-const formatDateTimeShortMonth = useFormatDateTime({
-	timeStyle: 'short',
-	dateStyle: 'medium',
-})
-
-defineProps<{
-	notice: ServerNoticeType
-}>()
-</script>
-<template>
-	<div class="col-span-full grid grid-cols-subgrid gap-4 rounded-2xl bg-bg-raised p-4">
-		<div class="col-span-full grid grid-cols-subgrid items-center gap-4">
-			<div>
-				<CopyCode :text="`${notice.id}`" />
-			</div>
-			<div class="text-sm">
-				<span v-if="notice.announce_at">
-					{{ formatDateTimeShortMonth(notice.announce_at) }} ({{
-						formatRelativeTime(notice.announce_at)
-					}})
-				</span>
-				<template v-else> Never begins </template>
-			</div>
-			<div class="text-sm">
-				<span v-if="notice.expires" v-tooltip="formatDateTime(notice.expires)">
-					{{ formatRelativeTime(notice.expires) }}
-				</span>
-				<template v-else> Never expires </template>
-			</div>
-			<div
-				:style="
-					NOTICE_LEVELS[notice.level]
-						? {
-								'--_color': NOTICE_LEVELS[notice.level].colors.text,
-								'--_bg-color': NOTICE_LEVELS[notice.level].colors.bg,
-							}
-						: undefined
-				"
-			>
-				<TagItem>
-					{{
-						NOTICE_LEVELS[notice.level]
-							? formatMessage(NOTICE_LEVELS[notice.level].name)
-							: notice.level
-					}}
-				</TagItem>
-			</div>
-			<div
-				:style="{
-					'--_color': getDismissableMetadata(notice.dismissable).colors.text,
-					'--_bg-color': getDismissableMetadata(notice.dismissable).colors.bg,
-				}"
-			>
-				<TagItem>
-					{{ formatMessage(getDismissableMetadata(notice.dismissable).name) }}
-				</TagItem>
-			</div>
-			<div class="col-span-2 flex gap-2 md:col-span-1">
-				<!-- <ButtonStyled>
-					<button @click="() => startEditing(notice)">
-						<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button @click="() => deleteNotice(notice)">
-						<TrashIcon /> {{ formatMessage(commonMessages.deleteLabel) }}
-					</button>
-				</ButtonStyled> -->
-			</div>
-		</div>
-		<div class="col-span-full grid">
-			<ServerNotice
-				:level="notice.level"
-				:message="notice.message"
-				:dismissable="notice.dismissable"
-				:title="notice.title"
-				preview
-			/>
-			<div class="mt-4 flex items-center gap-2">
-				<span v-if="!notice.assigned || notice.assigned.length === 0"
-					>Not assigned to any servers</span
-				>
-				<span v-else-if="!notice.assigned.some((n) => n.kind === 'server')">
-					Assigned to
-					{{ notice.assigned.filter((n) => n.kind === 'node').length }} nodes
-				</span>
-				<span v-else-if="!notice.assigned.some((n) => n.kind === 'node')">
-					Assigned to
-					{{ notice.assigned.filter((n) => n.kind === 'server').length }} servers
-				</span>
-				<span v-else>
-					Assigned to
-					{{ notice.assigned.filter((n) => n.kind === 'server').length }} servers and
-					{{ notice.assigned.filter((n) => n.kind === 'node').length }} nodes
-				</span>
-				•
-				<button
-					class="m-0 flex items-center gap-1 border-none bg-transparent p-0 text-blue hover:underline hover:brightness-125 active:scale-95 active:brightness-150"
-					@click="() => startEditing(notice, true)"
-				>
-					<SettingsIcon />
-					Edit assignments
-				</button>
-			</div>
-		</div>
-	</div>
-</template>
diff --git a/apps/frontend/src/components/ui/thread/ThreadView.vue b/apps/frontend/src/components/ui/thread/ThreadView.vue
index 608f0f1f10..aca57b1961 100644
--- a/apps/frontend/src/components/ui/thread/ThreadView.vue
+++ b/apps/frontend/src/components/ui/thread/ThreadView.vue
@@ -90,7 +90,7 @@ import dayjs from 'dayjs'
 import { useImageUpload } from '~/composables/image-upload.ts'
 import { isStaff } from '~/helpers/users.js'
 
-import ChevronDownIcon from '../servers/icons/ChevronDownIcon.vue'
+import { ChevronDownIcon } from '@modrinth/assets'
 import ThreadMessage from './ThreadMessage.vue'
 
 const { addNotification } = injectNotificationManager()
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 6ef59f08c5..5e0be1ecec 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -760,7 +760,7 @@ import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.
 import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
 import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
 import ModrinthFooter from '~/components/ui/ModrinthFooter.vue'
-import TeleportOverflowMenu from '~/components/ui/servers/TeleportOverflowMenu.vue'
+import TeleportOverflowMenu from '@modrinth/ui/src/components/base/TeleportOverflowMenu.vue'
 import { errors as generatedStateErrors } from '~/generated/state.json'
 import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'
 
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 3e1ca2bb57..b2b238d30c 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -2777,18 +2777,6 @@
   "search.filter.locked.server.sync": {
     "message": "Sync with server"
   },
-  "servers.busy.backup-creating": {
-    "message": "Backup creation in progress"
-  },
-  "servers.busy.backup-restoring": {
-    "message": "Backup restore in progress"
-  },
-  "servers.busy.installing": {
-    "message": "Server is installing"
-  },
-  "servers.busy.syncing-content": {
-    "message": "Content sync in progress"
-  },
   "servers.notice.actions": {
     "message": "Actions"
   },
diff --git a/apps/frontend/src/pages/admin/billing/[id].vue b/apps/frontend/src/pages/admin/billing/[id].vue
index 7549d7a004..8b00a8feae 100644
--- a/apps/frontend/src/pages/admin/billing/[id].vue
+++ b/apps/frontend/src/pages/admin/billing/[id].vue
@@ -343,7 +343,7 @@ import { DEFAULT_CREDIT_EMAIL_MESSAGE } from '@modrinth/utils/utils.ts'
 import { useQuery } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 
-import ModrinthServersIcon from '~/components/ui/servers/ModrinthServersIcon.vue'
+import ModrinthServersIcon from '~/components/brand/ModrinthServersIcon.vue'
 
 const { addNotification } = injectNotificationManager()
 const { labrinth } = injectModrinthClient()
diff --git a/apps/frontend/src/pages/admin/servers/notices.vue b/apps/frontend/src/pages/admin/servers/notices.vue
index 1ad5b0712a..9e5536a256 100644
--- a/apps/frontend/src/pages/admin/servers/notices.vue
+++ b/apps/frontend/src/pages/admin/servers/notices.vue
@@ -282,7 +282,7 @@ import type { ServerNotice as ServerNoticeType } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed } from 'vue'
 
-import AssignNoticeModal from '~/components/ui/servers/notice/AssignNoticeModal.vue'
+import AssignNoticeModal from '~/components/ui/admin/AssignNoticeModal.vue'
 import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
 
 const { addNotification } = injectNotificationManager()
diff --git a/apps/frontend/src/pages/discover/[type]/index.vue b/apps/frontend/src/pages/discover/[type]/index.vue
index 25fee7a0a3..f28b0ed87d 100644
--- a/apps/frontend/src/pages/discover/[type]/index.vue
+++ b/apps/frontend/src/pages/discover/[type]/index.vue
@@ -653,7 +653,7 @@ const serverBackUrl = computed(() => {
 	if (!serverData.value) return ''
 	const id = serverData.value.server_id
 	if (fromContext.value === 'onboarding') return `/hosting/manage/${id}?resumeModal=setup-type`
-	if (fromContext.value === 'reset-server') return `/hosting/manage/${id}/options/loader`
+	if (fromContext.value === 'reset-server') return `/hosting/manage/${id}?openSettings=installation`
 	return `/hosting/manage/${id}/content`
 })
 
@@ -692,7 +692,7 @@ async function onModpackFlowCreate(config: CreationFlowContextValue) {
 			queryClient.invalidateQueries({ queryKey: ['servers', 'detail', currentServerId.value] })
 			navigateTo(`/hosting/manage/${currentServerId.value}/content`)
 		} else {
-			navigateTo(`/hosting/manage/${currentServerId.value}/options/loader`)
+			navigateTo(`/hosting/manage/${currentServerId.value}?openSettings=installation`)
 		}
 	} catch (e) {
 		handleError(new Error(`Error installing modpack: ${e}`))
diff --git a/apps/frontend/src/pages/hosting/index.vue b/apps/frontend/src/pages/hosting/index.vue
index 2f055d3dbe..b2743a985c 100644
--- a/apps/frontend/src/pages/hosting/index.vue
+++ b/apps/frontend/src/pages/hosting/index.vue
@@ -652,7 +652,7 @@ import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 
 import OptionGroup from '~/components/ui/OptionGroup.vue'
-import LoaderIcon from '~/components/ui/servers/icons/LoaderIcon.vue'
+import { LoaderIcon } from '@modrinth/ui/src/components/servers/icons'
 import MedalPlanPromotion from '~/components/ui/servers/marketing/MedalPlanPromotion.vue'
 import ServerPlanSelector from '~/components/ui/servers/marketing/ServerPlanSelector.vue'
 import { products } from '~/generated/state.json'
diff --git a/apps/frontend/src/pages/hosting/manage/[id].vue b/apps/frontend/src/pages/hosting/manage/[id].vue
index abc00180c8..55d6eb7a4b 100644
--- a/apps/frontend/src/pages/hosting/manage/[id].vue
+++ b/apps/frontend/src/pages/hosting/manage/[id].vue
@@ -1,1539 +1,72 @@
 <template>
-	<div
-		v-if="filteredNotices.length > 0"
-		class="experimental-styles-within relative mx-auto mb-4 flex w-full min-w-0 max-w-[1280px] flex-col gap-3 px-6"
-	>
-		<ServerNotice
-			v-for="notice in filteredNotices"
-			:key="`notice-${notice.id}`"
-			:level="notice.level"
-			:message="notice.message"
-			:dismissable="notice.dismissable"
-			:title="notice.title"
-			class="w-full"
-			@dismiss="() => dismissNotice(notice.id)"
-		/>
-	</div>
-	<div
-		v-if="serverData && serverData.node === null && serverData.status !== 'suspended'"
-		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
-	>
-		<ErrorInformationCard
-			title="We're getting your server ready"
-			description="Your server's hardware is being prepared and will be available shortly!"
-			:icon="TransferIcon"
-			icon-color="blue"
-			:action="generalErrorAction"
-		/>
-	</div>
-	<div
-		v-else-if="serverData?.status === 'suspended' && serverData.suspension_reason === 'upgrading'"
-		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
-	>
-		<ErrorInformationCard
-			title="Server upgrading"
-			description="Your server's hardware is currently being upgraded and will be back online shortly!"
-			:icon="TransferIcon"
-			icon-color="blue"
-			:action="generalErrorAction"
-		/>
-	</div>
-	<div
-		v-else-if="serverData?.status === 'suspended'"
-		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
-	>
-		<ErrorInformationCard
-			title="Server suspended"
-			:description="suspendedDescription"
-			:icon="LockIcon"
-			icon-color="orange"
-			:action="suspendedAction"
-		/>
-	</div>
-	<div
-		v-else-if="serverError?.statusCode === 403 || serverError?.statusCode === 404"
-		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
-	>
-		<ErrorInformationCard
-			title="An error occured."
-			description="Please contact Modrinth Support."
-			:icon="TransferIcon"
-			icon-color="orange"
-			:error-details="generalErrorDetails"
-			:action="generalErrorAction"
-		/>
-	</div>
-	<div
-		v-else-if="serverError || !nodeAccessible"
-		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
-	>
-		<ErrorInformationCard
-			title="Server Node Unavailable"
-			:icon="PanelErrorIcon"
-			icon-color="red"
-			:action="nodeUnavailableAction"
-			:error-details="nodeUnavailableDetails"
-		>
-			<template #description>
-				<div class="text-md space-y-4">
-					<p class="leading-[170%] text-secondary">
-						Your server's node, where your Modrinth Server is physically hosted, is not accessible
-						at the moment. We are working to resolve the issue as quickly as possible.
-					</p>
-					<p class="leading-[170%] text-secondary">
-						Your data is safe and will not be lost, and your server will be back online as soon as
-						the issue is resolved.
-					</p>
-					<p class="leading-[170%] text-secondary">
-						If reloading does not work initially, please contact Modrinth Support via the chat
-						bubble in the bottom right corner and we'll be happy to help.
-					</p>
-				</div>
-			</template>
-		</ErrorInformationCard>
-	</div>
-	<!-- SERVER START -->
-	<div
-		v-else-if="serverData"
-		data-pyro-server-manager-root
-		class="experimental-styles-within mobile-blurred-servericon relative mx-auto mb-12 box-border flex min-h-screen w-full min-w-0 max-w-[1280px] flex-col gap-6 px-6 transition-all duration-300"
-		:style="{
-			'--server-bg-image': serverImage
-				? `url(${serverImage})`
-				: `linear-gradient(180deg, rgba(153,153,153,1) 0%, rgba(87,87,87,1) 100%)`,
-		}"
+	<ServersManageRootLayout
+		:server-id="serverId"
+		:reload-page="() => reloadNuxtApp({ path: route.path })"
+		:resolve-viewer="resolveViewer"
+		:show-copy-id-action="flags.developerMode"
+		:show-advanced-debug-info="flags.advancedDebugInfo"
+		:show-uptime="true"
+		:stripe-publishable-key="config.public.stripePublishableKey as string"
+		:site-url="config.public.siteUrl as string"
+		:products="products"
+		:auth-user="authUser"
+		:navigate-to-billing="() => router.push('/settings/billing')"
+		:navigate-to-servers="() => router.push('/hosting/manage')"
+		:browse-modpacks="
+			({ serverId: sid, worldId: wid, from }) => {
+				navigateTo({
+					path: '/discover/modpacks',
+					query: { sid, from, wid: wid ?? undefined },
+				})
+			}
+		"
+		:browse-content="
+			({ serverId: sid, worldId: wid, type }) => {
+				navigateTo({
+					path: `/discover/${type}s`,
+					query: { sid, wid: wid ?? undefined },
+				})
+			}
+		"
 	>
-		<NuxtLink to="/hosting/manage" class="breadcrumb goto-link flex w-fit items-center">
-			<LeftArrowIcon />
-			All servers
-		</NuxtLink>
-		<ContentPageHeader>
-			<template #icon>
-				<ServerIcon
-					:image="
-						serverData.is_medal ? 'https://cdn-raw.modrinth.com/medal_icon.webp' : serverImage
-					"
-				/>
-			</template>
-			<template #title>
-				{{ serverData.name }}
-			</template>
-			<template #stats>
-				<div
-					v-if="serverData.flows?.intro"
-					class="flex items-center gap-2 font-semibold text-secondary"
-				>
-					<SettingsIcon /> Configuring server...
-				</div>
-				<div v-else class="flex flex-wrap items-center gap-2">
-					<div v-if="serverData.loader" class="flex items-center gap-2 font-medium capitalize">
-						<LoaderIcon :loader="serverData.loader" class="flex shrink-0 [&&]:size-5" />
-						{{ serverData.loader }} {{ serverData.mc_version }}
-					</div>
-
-					<div
-						v-if="serverData.loader && serverData.net?.domain"
-						class="h-1.5 w-1.5 rounded-full bg-surface-5"
-					></div>
-
-					<div
-						v-if="serverData.net?.domain"
-						v-tooltip="'Copy server address'"
-						class="flex cursor-pointer items-center gap-2 font-medium hover:underline"
-						@click="copyServerAddress"
-					>
-						<LinkIcon class="flex size-5 shrink-0" />
-						{{ serverData.net.domain }}.modrinth.gg
-					</div>
-
-					<div v-if="uptimeSeconds" class="h-1.5 w-1.5 rounded-full bg-surface-5"></div>
-
-					<div v-if="uptimeSeconds" class="flex items-center gap-2 font-medium">
-						<TimerIcon class="flex size-5 shrink-0" />
-						{{ formattedUptime }}
-					</div>
-
-					<div
-						v-if="serverProject && (serverData.loader || serverData.net?.domain || uptimeSeconds)"
-						class="h-1.5 w-1.5 rounded-full bg-surface-5"
-					></div>
-
-					<div v-if="serverProject" class="flex items-center gap-1.5 font-medium text-primary">
-						Linked to
-						<Avatar :src="serverProject.icon_url" :alt="serverProject.title" size="24px" />
-						<NuxtLink
-							:to="`/project/${serverProject.slug ?? serverProject.id}`"
-							class="truncate text-primary hover:underline"
-						>
-							{{ serverProject.title }}
-						</NuxtLink>
-					</div>
-				</div>
-			</template>
-			<template #actions>
-				<div v-if="isConnected && !serverData.flows?.intro" class="flex gap-2">
-					<PanelServerActionButton :disabled="!!error" :uptime-seconds="uptimeSeconds" />
-				</div>
-			</template>
-		</ContentPageHeader>
-
-		<ServerOnboardingPanelPage v-if="serverData.flows?.intro" />
-
-		<template v-else>
-			<div
-				data-pyro-navigation
-				class="isolate flex w-full select-none flex-col justify-between gap-4 overflow-auto md:flex-row md:items-center"
-			>
-				<NavTabs :links="navLinks" replace />
-			</div>
-
-			<div data-pyro-mount class="h-full w-full flex-1">
-				<div
-					v-if="error"
-					class="mx-auto mb-4 flex justify-between gap-2 rounded-2xl border-2 border-solid border-red bg-bg-red p-4 font-semibold text-contrast"
-				>
-					<div class="flex flex-row gap-4">
-						<IssuesIcon class="hidden h-8 w-8 shrink-0 text-red sm:block" />
-						<div class="flex flex-col gap-2 leading-[150%]">
-							<div class="flex items-center gap-3">
-								<IssuesIcon class="flex h-8 w-8 shrink-0 text-red sm:hidden" />
-								<div class="flex gap-2 text-2xl font-bold">{{ errorTitle }}</div>
-							</div>
-
-							<div
-								v-if="errorTitle.toLocaleLowerCase() === 'installation error'"
-								class="font-normal"
-							>
-								<div
-									v-if="
-										errorMessage.toLocaleLowerCase() === 'the specified version may be incorrect'
-									"
-								>
-									An invalid loader or Minecraft version was specified and could not be installed.
-									<ul class="m-0 mt-4 p-0 pl-4">
-										<li>
-											If this version of Minecraft was released recently, please check if Modrinth
-											Hosting supports it.
-										</li>
-										<li>
-											If you've installed a modpack, it may have been packaged incorrectly or may
-											not be compatible with the loader.
-										</li>
-										<li>
-											Your server may need to be reinstalled with a valid mod loader and version.
-											You can change the loader by clicking the "Change Loader" button.
-										</li>
-										<li>
-											If you're stuck, please contact Modrinth Support with the information below:
-										</li>
-									</ul>
-									<ButtonStyled>
-										<button class="mt-2" @click="copyServerDebugInfo">
-											<CopyIcon v-if="!copied" />
-											<CheckIcon v-else />
-											Copy Debug Info
-										</button>
-									</ButtonStyled>
-								</div>
-								<div v-if="errorMessage.toLocaleLowerCase() === 'internal error'">
-									An internal error occurred while installing your server. Don't fret — try
-									reinstalling your server, and if the problem persists, please contact Modrinth
-									support with your server's debug information.
-								</div>
-								<div
-									v-if="errorMessage.toLocaleLowerCase() === 'this version is not yet supported'"
-								>
-									An error occurred while installing your server because Modrinth Hosting does not
-									support the version of Minecraft or the loader you specified. Try reinstalling
-									your server with a different version or loader, and if the problem persists,
-									please contact Modrinth Support with your server's debug information.
-								</div>
-
-								<div
-									v-if="errorTitle === 'Installation error'"
-									class="mt-2 flex flex-col gap-4 sm:flex-row"
-								>
-									<ButtonStyled v-if="errorLog">
-										<button @click="openInstallLog"><FileIcon />Open Installation Log</button>
-									</ButtonStyled>
-									<ButtonStyled>
-										<button @click="copyServerDebugInfo">
-											<CopyIcon v-if="!copied" />
-											<CheckIcon v-else />
-											Copy Debug Info
-										</button>
-									</ButtonStyled>
-									<ButtonStyled color="red" type="standard">
-										<NuxtLink
-											class="whitespace-pre"
-											:to="`/hosting/manage/${serverId}/options/loader`"
-										>
-											<RightArrowIcon />
-											Change Loader
-										</NuxtLink>
-									</ButtonStyled>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div v-if="serverData.is_medal" class="mb-4">
-					<MedalServerCountdown :server-id="serverId" />
-				</div>
-
-				<div
-					v-if="!isConnected && !isReconnecting && !isLoading"
-					data-pyro-server-ws-error
-					class="mb-4 flex w-full flex-row items-center gap-4 rounded-2xl bg-bg-red p-4 text-contrast"
-				>
-					<IssuesIcon class="size-5 text-red" />
-					Something went wrong...
-				</div>
-
-				<div
-					v-if="isReconnecting"
-					data-pyro-server-ws-reconnecting
-					class="mb-4 flex w-full flex-row items-center gap-4 rounded-2xl bg-bg-orange p-4 text-sm text-contrast"
-				>
-					<PanelSpinner />
-					Hang on, we're reconnecting to your server.
-				</div>
-
-				<Transition
-					enter-active-class="transition-all duration-300 ease-out overflow-hidden"
-					enter-from-class="opacity-0 max-h-0"
-					enter-to-class="opacity-100 max-h-40"
-					leave-active-class="transition-all duration-200 ease-in overflow-hidden"
-					leave-from-class="opacity-100 max-h-40"
-					leave-to-class="opacity-0 max-h-0"
-				>
-					<InstallingBanner
-						v-if="
-							(serverData.status === 'installing' || isSyncingContent || contentError) &&
-							syncProgress?.phase !== 'Analyzing'
-						"
-						data-pyro-server-installing
-						class="mb-4"
-						:progress="syncProgress"
-						:content-error="contentError"
-						@retry="handleContentRetry"
-					>
-						<template #icon>
-							<ServerIcon :image="serverImage" class="!h-6 !w-6" />
-						</template>
-					</InstallingBanner>
-				</Transition>
-				<BackupProgressAdmonitions class="mb-4" />
-				<NuxtPage
-					:route="route"
-					:is-connected="isConnected"
-					:is-ws-auth-incorrect="isWSAuthIncorrect"
-					:is-server-running="isServerRunning"
-					:stats="stats"
-					:server-power-state="serverPowerState"
-					:power-state-details="powerStateDetails"
-					@reinstall="onReinstall"
-					@reinstall-failed="onReinstallFailed"
-				/>
-			</div>
+		<template #default="{ onReinstall, onReinstallFailed }">
+			<NuxtPage :route="route" @reinstall="onReinstall" @reinstall-failed="onReinstallFailed" />
 		</template>
-	</div>
-	<div
-		v-if="flags.advancedDebugInfo"
-		class="experimental-styles-within relative mx-auto mt-6 box-border w-full min-w-0 max-w-[1280px] px-6"
-	>
-		<h2 class="m-0 text-lg font-extrabold text-contrast">Server data</h2>
-		<pre class="markdown-body w-full overflow-auto rounded-2xl bg-bg-raised p-4 text-sm">{{
-			safeStringify(serverData)
-		}}</pre>
-	</div>
+	</ServersManageRootLayout>
 </template>
 
 <script setup lang="ts">
-import { Intercom, shutdown } from '@intercom/messenger-js-sdk'
-import type { Archon } from '@modrinth/api-client'
-import { clearNodeAuthState, ModrinthApiError, setNodeAuthState } from '@modrinth/api-client'
-import {
-	BoxesIcon,
-	CheckIcon,
-	CopyIcon,
-	DatabaseBackupIcon,
-	FileIcon,
-	FolderOpenIcon,
-	IssuesIcon,
-	LayoutTemplateIcon,
-	LeftArrowIcon,
-	LinkIcon,
-	LockIcon,
-	RightArrowIcon,
-	SettingsIcon,
-	TimerIcon,
-	TransferIcon,
-} from '@modrinth/assets'
-import type { BusyReason } from '@modrinth/ui'
-import {
-	Avatar,
-	BackupProgressAdmonitions,
-	ButtonStyled,
-	ContentPageHeader,
-	defineMessage,
-	ErrorInformationCard,
-	formatLoaderLabel,
-	injectModrinthClient,
-	injectNotificationManager,
-	InstallingBanner,
-	LoaderIcon,
-	NavTabs,
-	provideModrinthServerContext,
-	ServerIcon,
-	ServerNotice,
-	ServerOnboardingPanelPage,
-	useDebugLogger,
-} from '@modrinth/ui'
-import type { Stats } from '@modrinth/utils'
-import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { useTimeoutFn } from '@vueuse/core'
-import DOMPurify from 'dompurify'
-import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { ServersManageRootLayout } from '@modrinth/ui'
 
 import { reloadNuxtApp } from '#app'
-import PanelErrorIcon from '~/components/ui/servers/icons/PanelErrorIcon.vue'
-import MedalServerCountdown from '~/components/ui/servers/marketing/MedalServerCountdown.vue'
-import PanelServerActionButton from '~/components/ui/servers/PanelServerActionButton.vue'
-import PanelSpinner from '~/components/ui/servers/PanelSpinner.vue'
-import { useServerImage } from '~/composables/servers/use-server-image.ts'
-import { useServerProject } from '~/composables/servers/use-server-project.ts'
-import { useModrinthServersConsole } from '~/store/console.ts'
-
-const { addNotification } = injectNotificationManager()
-const client = injectModrinthClient()
+import { products } from '~/generated/state.json'
 
-const isReconnecting = ref(false)
-const isLoading = ref(true)
-const isMounted = ref(true)
-const unsubscribers = ref<(() => void)[]>([])
 const flags = useFeatureFlags()
-
-const INTERCOM_APP_ID = ref('ykeritl9')
-const auth = (await useAuth()) as unknown as {
-	value: { user: { id: string; username: string; email: string; created: string } }
-}
-const userId = ref(auth.value?.user?.id ?? null)
-const username = ref(auth.value?.user?.username ?? null)
-const email = ref(auth.value?.user?.email ?? null)
-const createdAt = ref(
-	auth.value?.user?.created ? Math.floor(new Date(auth.value.user.created).getTime() / 1000) : null,
-)
-
-const debug = useDebugLogger('ServerManage')
 const route = useNativeRoute()
 const router = useRouter()
+const config = useRuntimeConfig()
 const serverId = route.params.id as string
 
-const { data: serverData, error: serverQueryError } = useQuery({
-	queryKey: ['servers', 'detail', serverId],
-	queryFn: () => client.archon.servers_v0.get(serverId)!,
-})
-
-function updateServerData(patch: Partial<Archon.Servers.v0.Server>) {
-	if (!serverData.value) return
-	queryClient.setQueryData(['servers', 'detail', serverId], {
-		...serverData.value,
-		...patch,
-	})
-}
-
-const serverError = computed(() => {
-	const err = serverQueryError.value
-	if (err instanceof ModrinthApiError) return err
-	return err ? ModrinthApiError.fromUnknown(err) : null
-})
-
-const { data: serverFull } = useQuery({
-	queryKey: ['servers', 'v1', 'detail', serverId],
-	queryFn: () => client.archon.servers_v1.get(serverId),
-})
-
-const worldId = computed(() => {
-	if (!serverFull.value) return null
-	const activeWorld = serverFull.value.worlds.find((w) => w.is_active)
-	return activeWorld?.id ?? serverFull.value.worlds[0]?.id ?? null
-})
-
-const serverImage = useServerImage(
-	serverId,
-	computed(() => serverData.value?.upstream ?? null),
-)
-const { data: serverProject } = useServerProject(computed(() => serverData.value?.upstream ?? null))
-
-const errorTitle = ref('Error')
-const errorMessage = ref('An unexpected error occurred.')
-const errorLog = ref('')
-const errorLogFile = ref('')
-
-function safeStringify(obj: unknown, indent = ' '): string {
-	const seen = new WeakSet()
-	return JSON.stringify(
-		obj,
-		(_key, value) => {
-			if (typeof value === 'object' && value !== null) {
-				if (seen.has(value)) {
-					return '[Circular]'
-				}
-				seen.add(value)
-			}
-			return value
-		},
-		indent,
-	)
-}
-
-const isConnected = ref(false)
-const isWSAuthIncorrect = ref(false)
-const modrinthServersConsole = useModrinthServersConsole()
-const queryClient = useQueryClient()
-const cpuData = ref<number[]>([])
-const ramData = ref<number[]>([])
-const isServerRunning = computed(() => serverPowerState.value === 'running')
-const serverPowerState = ref<Archon.Websocket.v0.PowerState>('stopped')
-const powerStateDetails = ref<{ oom_killed?: boolean; exit_code?: number }>()
-const backupsState = reactive(new Map())
-const cancelledBackups = new Set<string>()
-
-const markBackupCancelled = (backupId: string) => {
-	cancelledBackups.add(backupId)
-}
-
-// Parthenon state event
-const syncProgress = ref<Archon.Websocket.v0.SyncContentProgress | null>(null)
-const contentError = ref<Archon.Websocket.v0.SyncContentError | null>(null)
-const syncProgressActive = ref(false)
-const isAwaitingPostInstallRefresh = ref(false)
-const { start: startSyncHide, stop: cancelSyncHide } = useTimeoutFn(
-	() => (syncProgressActive.value = false),
-	1000,
-	{ immediate: false },
-)
-
-watch(syncProgress, (progress) => {
-	if (progress != null) {
-		cancelSyncHide()
-		syncProgressActive.value = true
-	} else if (syncProgressActive.value) {
-		startSyncHide()
-	}
-})
-
-const isSyncingContent = computed(
-	() => syncProgressActive.value || isAwaitingPostInstallRefresh.value,
-)
-
-const busyReasons = computed(() => {
-	const reasons: BusyReason[] = []
-	if (serverData.value?.status === 'installing') {
-		reasons.push({
-			reason: defineMessage({
-				id: 'servers.busy.installing',
-				defaultMessage: 'Server is installing',
-			}),
-		})
-	}
-	if (isSyncingContent.value) {
-		reasons.push({
-			reason: defineMessage({
-				id: 'servers.busy.syncing-content',
-				defaultMessage: 'Content sync in progress',
-			}),
-		})
-	}
-	for (const entry of backupsState.values()) {
-		if (entry.create?.state === 'ongoing') {
-			reasons.push({
-				reason: defineMessage({
-					id: 'servers.busy.backup-creating',
-					defaultMessage: 'Backup creation in progress',
-				}),
-			})
-			break
-		}
-		if (entry.restore?.state === 'ongoing') {
-			reasons.push({
-				reason: defineMessage({
-					id: 'servers.busy.backup-restoring',
-					defaultMessage: 'Backup restore in progress',
-				}),
-			})
-			break
-		}
-	}
-	return reasons
-})
-
-const fsAuth = ref<{ url: string; token: string } | null>(null)
-const fsOps = ref<Archon.Websocket.v0.FilesystemOperation[]>([])
-const fsQueuedOps = ref<Archon.Websocket.v0.QueuedFilesystemOp[]>([])
-
-const refreshFsAuth = async () => {
-	try {
-		const auth = await client.archon.servers_v0.getFilesystemAuth(serverId)
-		fsAuth.value = auth
-	} catch (error) {
-		console.error('Failed to refresh filesystem auth:', error)
-		throw error
-	}
-}
-
-setNodeAuthState(() => fsAuth.value, refreshFsAuth)
-
-provideModrinthServerContext({
-	serverId,
-	worldId,
-	server: serverData as Ref<Archon.Servers.v0.Server>,
-	isConnected,
-	powerState: serverPowerState,
-	isServerRunning,
-	backupsState,
-	markBackupCancelled,
-	isSyncingContent,
-	busyReasons,
-	fsAuth,
-	fsOps,
-	fsQueuedOps,
-	refreshFsAuth,
-})
-
-const uptimeSeconds = ref(0)
-
-const formattedUptime = computed(() => {
-	const days = Math.floor(uptimeSeconds.value / (24 * 3600))
-	const hours = Math.floor((uptimeSeconds.value % (24 * 3600)) / 3600)
-	const minutes = Math.floor((uptimeSeconds.value % 3600) / 60)
-	const seconds = uptimeSeconds.value % 60
-
-	let formatted = ''
-	if (days > 0) formatted += `${days}d `
-	if (hours > 0 || days > 0) formatted += `${hours}h `
-	formatted += `${minutes}m ${seconds}s`
-	return formatted.trim()
-})
-
-function copyServerAddress() {
-	if (!serverData.value?.net?.domain) return
-	navigator.clipboard.writeText(serverData.value.net.domain + '.modrinth.gg')
-	addNotification({
-		title: 'Server address copied',
-		text: "Your server's address has been copied to your clipboard.",
-		type: 'success',
-	})
-}
-
-const copied = ref(false)
-const error = ref<Error | null>(null)
-
-const initialConsoleMessage = [
-	'   __________________________________________________',
-	' /  Welcome to your \x1B[32mModrinth Server\x1B[37m!                  \\',
-	'|   Press the green start button to start your server! |',
-	' \\____________________________________________________/',
-	'\x1B[32m     _    _ \x1B[37m',
-	'\x1B[32m    (o)--(o)      \x1B[37m',
-	'\x1B[32m   /.______.\\\x1B[37m',
-	'\x1B[32m   \\________/     \x1B[37m',
-	'\x1B[32m  ./        \\.    \x1B[37m',
-	'\x1B[32m ( .        , )\x1B[37m',
-	'\x1B[32m  \\ \\_\\\\ //_/ /\x1B[37m',
-	'\x1B[32m   ~~  ~~  ~~\x1B[37m',
-]
-
-const stats = ref<Stats>({
-	current: {
-		cpu_percent: 0,
-		ram_usage_bytes: 0,
-		ram_total_bytes: 1,
-		storage_usage_bytes: 0,
-		storage_total_bytes: 0,
-	},
-	past: {
-		cpu_percent: 0,
-		ram_usage_bytes: 0,
-		ram_total_bytes: 1,
-		storage_usage_bytes: 0,
-		storage_total_bytes: 0,
-	},
-	graph: {
-		cpu: [],
-		ram: [],
-	},
-})
-
-const navLinks = [
-	{
-		label: 'Overview',
-		href: `/hosting/manage/${serverId}`,
-		icon: LayoutTemplateIcon,
-		subpages: [],
-	},
-	{
-		label: 'Content',
-		href: `/hosting/manage/${serverId}/content`,
-		icon: BoxesIcon,
-		subpages: ['mods', 'datapacks'],
-	},
-	{ label: 'Files', href: `/hosting/manage/${serverId}/files`, icon: FolderOpenIcon, subpages: [] },
-	{
-		label: 'Backups',
-		href: `/hosting/manage/${serverId}/backups`,
-		icon: DatabaseBackupIcon,
-		subpages: [],
-	},
-	{
-		label: 'Options',
-		href: `/hosting/manage/${serverId}/options`,
-		icon: SettingsIcon,
-		subpages: ['startup', 'network', 'properties', 'info'],
-	},
-]
-
-const filteredNotices = computed(
-	() => serverData.value?.notices?.filter((n) => n.level !== 'survey') ?? [],
-)
-const surveyNotice = computed(() => serverData.value?.notices?.find((n) => n.level === 'survey'))
-
-async function dismissSurvey() {
-	const noticeId = surveyNotice.value?.id
-	if (noticeId === undefined) {
-		console.warn('No survey notice to dismiss')
-		return
-	}
-	await dismissNotice(noticeId)
-	console.log(`Dismissed survey notice ${noticeId}`)
-}
-
-type TallyPopupOptions = {
-	key?: string
-	layout?: 'default' | 'modal'
-	width?: number
-	alignLeft?: boolean
-	hideTitle?: boolean
-	overlay?: boolean
-	emoji?: {
-		text: string
-		animation:
-			| 'none'
-			| 'wave'
-			| 'tada'
-			| 'heart-beat'
-			| 'spin'
-			| 'flash'
-			| 'bounce'
-			| 'rubber-band'
-			| 'head-shake'
-	}
-	autoClose?: number
-	showOnce?: boolean
-	doNotShowAfterSubmit?: boolean
-	customFormUrl?: string
-	hiddenFields?: {
-		[key: string]: unknown
-	}
-	onOpen?: () => void
-	onClose?: () => void
-	onPageView?: (page: number) => void
-	onSubmit?: (payload: unknown) => void
-}
-
-const popupOptions = computed(
-	() =>
-		({
-			layout: 'default',
-			width: 400,
-			autoClose: 2000,
-			hideTitle: true,
-			hiddenFields: {
-				username: auth.value?.user?.username,
-				user_id: auth.value?.user?.id,
-				user_email: auth.value?.user?.email,
-				server_id: serverData.value?.server_id,
-				loader: serverData.value?.loader,
-				game_version: serverData.value?.mc_version,
-				modpack_id: serverProject.value?.id,
-				modpack_name: serverProject.value?.title,
-			},
-			onOpen: () => console.log(`Opened survey notice: ${surveyNotice.value?.id}`),
-			onClose: async () => await dismissSurvey(),
-			onSubmit: (payload: any) => {
-				console.log('Form submitted:', payload)
-			},
-		}) satisfies TallyPopupOptions,
-)
-
-function showSurvey() {
-	if (!surveyNotice.value) {
-		console.warn('No survey notice to open')
-		return
-	}
-
-	try {
-		if ((window as any).Tally?.openPopup) {
-			console.log(
-				`Opening Tally popup for survey notice ${surveyNotice.value?.id} (form ID: ${surveyNotice.value?.message})`,
-			)
-			;(window as any).Tally.openPopup(surveyNotice.value?.message, popupOptions.value)
-		} else {
-			console.warn('Tally script not yet loaded')
-		}
-	} catch (e) {
-		console.error('Error opening Tally popup:', e)
-	}
-}
-
-let uptimeIntervalId: ReturnType<typeof setInterval> | null = null
-
-const startUptimeUpdates = () => {
-	uptimeIntervalId = setInterval(() => {
-		uptimeSeconds.value += 1
-	}, 1000)
-}
-
-const stopUptimeUpdates = () => {
-	if (uptimeIntervalId) {
-		clearInterval(uptimeIntervalId)
-	}
-}
-
-const handleLog = (data: Archon.Websocket.v0.WSLogEvent) => {
-	const log = data.message.split('\n').filter((l) => l.trim())
-	modrinthServersConsole.addLines(log)
-}
-
-const handleStats = (data: Archon.Websocket.v0.WSStatsEvent) => {
-	updateStats({
-		cpu_percent: data.cpu_percent,
-		ram_usage_bytes: data.ram_usage_bytes,
-		ram_total_bytes: data.ram_total_bytes,
-		storage_usage_bytes: data.storage_usage_bytes,
-		storage_total_bytes: data.storage_total_bytes,
-	})
-}
-
-const handlePowerState = (data: Archon.Websocket.v0.WSPowerStateEvent) => {
-	if (data.state === 'crashed') {
-		updatePowerState(data.state, {
-			oom_killed: data.oom_killed,
-			exit_code: data.exit_code,
-		})
-	} else {
-		updatePowerState(data.state)
-	}
-}
-
-const handleState = (data: Archon.Websocket.v0.WSStateEvent) => {
-	debug('[id.vue] handleState received:', {
-		power_variant: data.power_variant,
-		progress: data.progress,
-		serverStatus: serverData.value?.status,
-	})
-	syncProgress.value = data.progress
-	contentError.value = data.content_error
-
-	// Sync power state from the state event
-	const powerMap: Record<Archon.Websocket.v0.FlattenedPowerState, Archon.Websocket.v0.PowerState> =
-		{
-			not_ready: 'stopped',
-			starting: 'starting',
-			running: 'running',
-			stopping: 'stopping',
-			idle:
-				data.was_oom || (data.exit_code != null && data.exit_code !== 0) ? 'crashed' : 'stopped',
-		}
-	updatePowerState(powerMap[data.power_variant], {
-		exit_code: data.exit_code ?? undefined,
-		oom_killed: data.was_oom,
-	})
-
-	// Sync uptime
-	if (data.uptime > 0) {
-		stopUptimeUpdates()
-		uptimeSeconds.value = data.uptime
-		startUptimeUpdates()
-	}
-
-	// Update installing status from progress presence
-	if (serverData.value) {
-		if (data.progress != null && serverData.value.status !== 'installing') {
-			debug('[id.vue] handleState: progress != null, setting status to installing')
-			hasSeenInstallProgress = true
-			updateServerData({ status: 'installing' })
-		} else if (data.progress != null) {
-			hasSeenInstallProgress = true
-		} else if (
-			data.progress == null &&
-			data.content_error == null &&
-			serverData.value.status === 'installing' &&
-			hasSeenInstallProgress
-		) {
-			debug('[id.vue] handleState: progress null + was installing, applying optimistic update')
-			hasSeenInstallProgress = false
-			applyOptimisticCompletion()
-			invalidateAfterInstall()
-		}
-	}
-}
-
-async function handleContentRetry() {
-	if (!worldId.value) return
-	try {
-		await client.archon.content_v1.repair(serverId, worldId.value)
-	} catch (err) {
-		addNotification({
-			type: 'error',
-			text: err instanceof Error ? err.message : 'Failed to retry installation',
-		})
-	}
-}
-
-const handleUptime = (data: Archon.Websocket.v0.WSUptimeEvent) => {
-	stopUptimeUpdates()
-	uptimeSeconds.value = data.uptime
-	startUptimeUpdates()
-}
-
-const handleAuthIncorrect = () => {
-	isWSAuthIncorrect.value = true
-}
-
-const handleBackupProgress = (data: Archon.Websocket.v0.WSBackupProgressEvent) => {
-	if (data.task === 'file') return
-
-	const backupId = data.id
-
-	if (cancelledBackups.has(backupId)) return
-
-	const current = backupsState.get(backupId) ?? {}
-	const currentTaskState = current[data.task]?.state
-	const isIncomingTerminal =
-		data.state === 'done' || data.state === 'failed' || data.state === 'cancelled'
-
-	// Skip duplicate terminal events, but allow retries (terminal → ongoing)
-	if (currentTaskState === data.state && isIncomingTerminal) return
-
-	const previousProgress = current[data.task]?.progress
-	if (currentTaskState !== data.state || previousProgress !== data.progress) {
-		backupsState.set(backupId, {
-			...current,
-			[data.task]: {
-				progress: data.progress,
-				state: data.state,
-			},
-		})
-	}
-
-	if (isIncomingTerminal) {
-		const attemptCleanup = (attempt: number = 1) => {
-			queryClient.invalidateQueries({ queryKey: ['backups', 'list', serverId] }).then(() => {
-				const backupData = queryClient.getQueryData<Archon.Backups.v1.Backup[]>([
-					'backups',
-					'list',
-					serverId,
-				])
-				const backup = backupData?.find((b) => b.id === backupId)
-				const isStillActive =
-					backup && (backup.status === 'in_progress' || backup.status === 'pending')
-
-				if (isStillActive && attempt < 6) {
-					setTimeout(() => attemptCleanup(attempt + 1), 1000 * Math.pow(2, attempt - 1))
-					return
-				}
-
-				if (isStillActive) {
-					queryClient.setQueryData<Archon.Backups.v1.Backup[]>(
-						['backups', 'list', serverId],
-						(old) =>
-							old?.map((b) => {
-								if (b.id !== backupId) return b
-								return {
-									...b,
-									status: data.state === 'done' ? ('done' as const) : ('error' as const),
-									ongoing: false,
-									interrupted: data.state === 'failed',
-								}
-							}),
-					)
-				}
-
-				backupsState.delete(backupId)
-			})
-		}
-
-		attemptCleanup()
-	}
-}
-
-const opsQueuedForModification = ref<string[]>([])
-
-const handleFilesystemOps = (data: Archon.Websocket.v0.WSFilesystemOpsEvent) => {
-	const allOps = data.all
-
-	if (JSON.stringify(fsOps.value) !== JSON.stringify(allOps)) {
-		fsOps.value = allOps
-	}
-
-	fsQueuedOps.value = fsQueuedOps.value.filter(
-		(queuedOp) => !allOps.some((x) => x.src === queuedOp.src),
-	)
-
-	const dismissOp = async (opId: string) => {
-		try {
-			await client.kyros.files_v0.modifyOperation(opId, 'dismiss')
-		} catch (error) {
-			console.error('Failed to dismiss operation:', error)
-		}
-	}
-
-	const cancelled = allOps.filter((x) => x.state === 'cancelled')
-	Promise.all(cancelled.map((x) => dismissOp(x.id)))
-
-	const completed = allOps.filter((x) => x.state === 'done')
-	if (completed.length > 0) {
-		setTimeout(
-			async () =>
-				await Promise.all(
-					completed.map((x) => {
-						if (!opsQueuedForModification.value.includes(x.id)) {
-							opsQueuedForModification.value.push(x.id)
-							return dismissOp(x.id)
-						}
-						return Promise.resolve()
-					}),
-				),
-			3000,
-		)
-	}
-}
-
-const handleNewMod = () => {
-	queryClient.invalidateQueries({ queryKey: ['content', 'list'] })
-}
-
-const newLoader = ref<string | null>(null)
-const newLoaderVersion = ref<string | null>(null)
-const newMCVersion = ref<string | null>(null)
-let hasSeenInstallProgress = false
-
-const onReinstall = async (potentialArgs: any) => {
-	debug('[id.vue] onReinstall called with:', potentialArgs)
-
-	if (serverData.value?.flows?.intro) {
-		await client.archon.servers_v1.endIntro(serverId)
-		queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
-	}
-
-	if (!serverData.value) return
-
-	debug('[id.vue] onReinstall: setting serverData.status to installing')
-	hasSeenInstallProgress = false
-	updateServerData({ status: 'installing' })
-
-	if (potentialArgs?.loader) {
-		newLoader.value = potentialArgs.loader
-	}
-	if (potentialArgs?.lVersion) {
-		newLoaderVersion.value = potentialArgs.lVersion
-	}
-	if (potentialArgs?.mVersion) {
-		newMCVersion.value = potentialArgs.mVersion
-	}
-
-	debug('[id.vue] onReinstall: stored refs:', {
-		newLoader: newLoader.value,
-		newLoaderVersion: newLoaderVersion.value,
-		newMCVersion: newMCVersion.value,
-	})
-
-	error.value = null
-	errorTitle.value = 'Error'
-	errorMessage.value = 'An unexpected error occurred.'
-
-	// Immediately refetch so loader.vue has fresh data (buttons stay locked via isSyncingContent)
-	debug('[id.vue] onReinstall: triggering immediate invalidation for loader.vue')
-	queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
-	queryClient.invalidateQueries({ queryKey: ['content', 'list'] })
-}
-
-const onReinstallFailed = () => {
-	debug('[id.vue] onReinstallFailed: reverting status to available')
-	updateServerData({ status: 'available' })
-	newLoader.value = null
-	newLoaderVersion.value = null
-	newMCVersion.value = null
-}
-
-function applyOptimisticCompletion() {
-	const patch: Partial<Archon.Servers.v0.Server> = { status: 'available' }
-	if (newLoader.value) patch.loader = formatLoaderLabel(newLoader.value) as Archon.Servers.v0.Loader
-	if (newLoaderVersion.value) patch.loader_version = newLoaderVersion.value
-	if (newMCVersion.value) patch.mc_version = newMCVersion.value
-
-	debug('[id.vue] applyOptimisticCompletion: patch:', patch)
-	updateServerData(patch)
-
-	const addonsQueries = queryClient.getQueriesData<Archon.Content.v1.Addons>({
-		queryKey: ['content', 'list', 'v1', serverId],
-	})
-	debug(
-		'[id.vue] applyOptimisticCompletion: found',
-		addonsQueries.length,
-		'addons queries to patch',
-	)
-	for (const [key, data] of addonsQueries) {
-		if (!data) continue
-		const addonsPatch: Record<string, string> = {}
-		if (newLoader.value) addonsPatch.modloader = newLoader.value
-		if (newLoaderVersion.value) addonsPatch.modloader_version = newLoaderVersion.value
-		if (newMCVersion.value) addonsPatch.game_version = newMCVersion.value
-		if (Object.keys(addonsPatch).length > 0) {
-			debug('[id.vue] applyOptimisticCompletion: patching addons cache:', addonsPatch)
-			queryClient.setQueryData(key, { ...data, ...addonsPatch })
-		}
-	}
-
-	newLoader.value = null
-	newLoaderVersion.value = null
-	newMCVersion.value = null
-}
-
-async function invalidateAfterInstall() {
-	debug(
-		'[id.vue] invalidateAfterInstall: setting isAwaitingPostInstallRefresh=true, scheduling 2s delayed invalidation',
-	)
-	isAwaitingPostInstallRefresh.value = true
-	setTimeout(async () => {
-		debug('[id.vue] invalidateAfterInstall: delayed invalidation firing now')
-		try {
-			await Promise.all([
-				queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] }),
-				queryClient.invalidateQueries({ queryKey: ['servers', 'startup', 'v1', serverId] }),
-				queryClient.invalidateQueries({ queryKey: ['content', 'list'] }),
-			])
-			debug('[id.vue] invalidateAfterInstall: delayed invalidation complete')
-		} catch (err: unknown) {
-			console.error('Error refreshing data after installation:', err)
-		} finally {
-			debug('[id.vue] invalidateAfterInstall: setting isAwaitingPostInstallRefresh=false')
-			isAwaitingPostInstallRefresh.value = false
-		}
-	}, 2000)
+const auth = (await useAuth()) as unknown as {
+	value: { user: { id: string; username: string; email: string; created: string } }
 }
 
-const handleInstallationResult = async (data: Archon.Websocket.v0.WSInstallationResultEvent) => {
-	debug('[id.vue] handleInstallationResult received:', data)
-	switch (data.result) {
-		case 'ok': {
-			debug('[id.vue] handleInstallationResult: ok received')
-			if (!serverData.value) break
-
-			debug('[id.vue] handleInstallationResult: stored refs:', {
-				newLoader: newLoader.value,
-				newLoaderVersion: newLoaderVersion.value,
-				newMCVersion: newMCVersion.value,
-			})
-			debug('[id.vue] handleInstallationResult: current serverData:', {
-				status: serverData.value.status,
-				loader: serverData.value.loader,
-				loader_version: serverData.value.loader_version,
-				mc_version: serverData.value.mc_version,
-			})
-
-			applyOptimisticCompletion()
-			error.value = null
-			invalidateAfterInstall()
-
-			break
+const authUser = auth.value?.user
+	? {
+			id: auth.value.user.id,
+			username: auth.value.user.username,
+			email: auth.value.user.email,
+			created: auth.value.user.created,
 		}
-		case 'err': {
-			console.log('failed to install')
-			console.log(data)
-			errorTitle.value = 'Installation error'
-			errorMessage.value = data.reason ?? 'Unknown error'
-			error.value = new Error(data.reason ?? 'Unknown error')
-
-			// Fetch installation log if available
-			try {
-				let files = await client.kyros.files_v0.listDirectory('/', 1, 100)
-				if (files && files.total > 1) {
-					for (let i = 2; i <= files.total; i++) {
-						const nextFiles = await client.kyros.files_v0.listDirectory('/', i, 100)
-						if (nextFiles?.items?.length === 0) break
-						if (nextFiles) files = nextFiles
-					}
-				}
-				const fileName = files?.items?.find((file) =>
-					file.name.startsWith('modrinth-installation'),
-				)?.name
-				errorLogFile.value = fileName ?? ''
-				if (fileName) {
-					const content = await client.kyros.files_v0.downloadFile(fileName)
-					errorLog.value = await content.text()
-				}
-			} catch (err) {
-				console.error('Failed to fetch installation log:', err)
-			}
-			break
-		}
-	}
-}
-
-const updateStats = (currentStats: Stats['current']) => {
-	if (!isMounted.value) return
-	if (!isConnected.value) isConnected.value = true
-	stats.value = {
-		current: currentStats,
-		past: { ...stats.value.current },
-		graph: {
-			cpu: updateGraphData(cpuData.value, currentStats.cpu_percent),
-			ram: updateGraphData(
-				ramData.value,
-				Math.floor((currentStats.ram_usage_bytes / currentStats.ram_total_bytes) * 100),
-			),
-		},
-	}
-}
-
-const updatePowerState = (
-	state: Archon.Websocket.v0.PowerState,
-	details?: { oom_killed?: boolean; exit_code?: number },
-) => {
-	serverPowerState.value = state
+	: undefined
 
-	if (state === 'crashed') {
-		powerStateDetails.value = details
-	} else {
-		powerStateDetails.value = undefined
+async function resolveViewer(): Promise<{ userId: string | null; userRole: string | null }> {
+	return {
+		userId: auth.value?.user?.id ?? null,
+		userRole: (auth.value?.user as any)?.role ?? null,
 	}
-
-	if (state === 'stopped' || state === 'crashed') {
-		stopUptimeUpdates()
-		uptimeSeconds.value = 0
-	}
-}
-
-const updateGraphData = (dataArray: number[], newValue: number): number[] => {
-	const updated = [...dataArray, newValue]
-	if (updated.length > 10) updated.shift()
-	return updated
-}
-
-const nodeUnavailableDetails = computed(() => [
-	{
-		label: 'Server ID',
-		value: serverId,
-		type: 'inline' as const,
-	},
-	{
-		label: 'Node',
-		value:
-			(serverError.value?.responseData as any)?.hostname ??
-			serverData.value?.datacenter ??
-			'Unknown',
-		type: 'inline' as const,
-	},
-	{
-		label: 'Error message',
-		value: nodeAccessible.value
-			? (serverError.value?.message ?? 'Unknown')
-			: 'Unable to reach node. Ping test failed.',
-		type: 'block' as const,
-	},
-])
-
-const suspendedDescription = computed(() => {
-	if (serverData.value?.suspension_reason === 'cancelled') {
-		return 'Your subscription has been cancelled.\nContact Modrinth Support if you believe this is an error.'
-	}
-	if (serverData.value?.suspension_reason) {
-		return `Your server has been suspended: ${serverData.value.suspension_reason}\nContact Modrinth Support if you believe this is an error.`
-	}
-	return 'Your server has been suspended.\nContact Modrinth Support if you believe this is an error.'
-})
-
-const generalErrorDetails = computed(() => [
-	{
-		label: 'Server ID',
-		value: serverId,
-		type: 'inline' as const,
-	},
-	{
-		label: 'Timestamp',
-		value: String(new Date().toISOString()),
-		type: 'inline' as const,
-	},
-	{
-		label: 'Error Name',
-		value: serverError.value?.name,
-		type: 'inline' as const,
-	},
-	{
-		label: 'Error Message',
-		value: serverError.value?.message,
-		type: 'block' as const,
-	},
-	...(serverError.value?.originalError
-		? [
-				{
-					label: 'Original Error',
-					value: String(serverError.value.originalError),
-					type: 'hidden' as const,
-				},
-			]
-		: []),
-	...(serverError.value?.stack
-		? [
-				{
-					label: 'Stack Trace',
-					value: serverError.value.stack,
-					type: 'hidden' as const,
-				},
-			]
-		: []),
-])
-
-const suspendedAction = computed(() => ({
-	label: 'Go to billing settings',
-	onClick: () => router.push('/settings/billing'),
-	color: 'brand' as const,
-}))
-
-const generalErrorAction = computed(() => ({
-	label: 'Go back to all servers',
-	onClick: () => router.push('/hosting/manage'),
-	color: 'brand' as const,
-}))
-
-const nodeUnavailableAction = computed(() => ({
-	label: 'Reload',
-	onClick: () => reloadNuxtApp(),
-	color: 'brand' as const,
-	disabled: false,
-}))
-
-const copyServerDebugInfo = () => {
-	const debugInfo = `Server ID: ${serverData.value?.server_id}\nError: ${errorMessage.value}\nKind: ${serverData.value?.upstream?.kind}\nProject ID: ${serverData.value?.upstream?.project_id}\nVersion ID: ${serverData.value?.upstream?.version_id}\nLog: ${errorLog.value}`
-	navigator.clipboard.writeText(debugInfo)
-	copied.value = true
-	setTimeout(() => {
-		copied.value = false
-	}, 5000)
 }
 
-const openInstallLog = () => {
-	router.replace({
-		path: `/hosting/manage/${serverId}/files`,
-		query: { ...route.query, editing: errorLogFile.value },
-	})
-}
-
-const cleanup = () => {
-	isMounted.value = false
-
-	shutdown()
-
-	stopUptimeUpdates()
-
-	unsubscribers.value.forEach((unsub) => unsub())
-	unsubscribers.value = []
-
-	client.archon.sockets.disconnect(serverId)
-
-	isConnected.value = false
-	isReconnecting.value = false
-	isLoading.value = true
-
-	cancelledBackups.clear()
-
-	clearNodeAuthState()
-
-	DOMPurify.removeHook('afterSanitizeAttributes')
-}
-
-async function dismissNotice(noticeId: number) {
-	await client.archon.servers_v0.dismissNotice(serverId, noticeId).catch((err) => {
-		addNotification({
-			title: 'Error dismissing notice',
-			text: err,
-			type: 'error',
-		})
-	})
-	await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
-}
-
-const nodeAccessible = ref(true)
-
-async function testNodeReachability(): Promise<boolean> {
-	const nodeInstance = serverData.value?.node?.instance
-	if (!nodeInstance) {
-		console.warn('No node instance available for ping test')
-		return false
-	}
-
-	const wsUrl = `wss://${nodeInstance}/pingtest`
-
-	try {
-		return await new Promise((resolve) => {
-			const socket = new WebSocket(wsUrl)
-			const timeout = setTimeout(() => {
-				socket.close()
-				resolve(false)
-			}, 5000)
-
-			socket.onopen = () => {
-				clearTimeout(timeout)
-				socket.send(performance.now().toString())
-			}
-
-			socket.onmessage = () => {
-				clearTimeout(timeout)
-				socket.close()
-				resolve(true)
-			}
-
-			socket.onerror = () => {
-				clearTimeout(timeout)
-				resolve(false)
-			}
-		})
-	} catch (error) {
-		console.error(`Failed to ping node ${wsUrl}:`, error)
-		return false
-	}
-}
-
-function initializeServer() {
-	if (serverData.value?.status === 'suspended') {
-		isLoading.value = false
-		return
-	}
-
-	// Skip node test if node is null (upgrading/provisioning)
-	if (serverData.value?.node === null) {
-		isLoading.value = false
-		return
-	}
-
-	testNodeReachability()
-		.then((result) => {
-			nodeAccessible.value = result
-			if (!nodeAccessible.value) {
-				isLoading.value = false
-			}
-		})
-		.catch((err) => {
-			console.error('Error testing node reachability:', err)
-			nodeAccessible.value = false
-			isLoading.value = false
-		})
-
-	if (serverError.value) {
-		isLoading.value = false
-	} else {
-		client.archon.sockets
-			.safeConnect(serverId)
-			.then(() => {
-				modrinthServersConsole.clear()
-				isConnected.value = true
-				isLoading.value = false
-
-				for (const line of initialConsoleMessage) {
-					modrinthServersConsole.addLine(line)
-				}
-
-				unsubscribers.value = [
-					client.archon.sockets.on(serverId, 'log', handleLog),
-					client.archon.sockets.on(serverId, 'stats', handleStats),
-					client.archon.sockets.on(serverId, 'state', handleState),
-					client.archon.sockets.on(serverId, 'power-state', handlePowerState),
-					client.archon.sockets.on(serverId, 'uptime', handleUptime),
-					client.archon.sockets.on(serverId, 'auth-incorrect', handleAuthIncorrect),
-					client.archon.sockets.on(serverId, 'auth-ok', () => {}),
-					client.archon.sockets.on(serverId, 'installation-result', handleInstallationResult),
-					client.archon.sockets.on(serverId, 'backup-progress', handleBackupProgress),
-					client.archon.sockets.on(serverId, 'filesystem-ops', handleFilesystemOps),
-					client.archon.sockets.on(serverId, 'new-mod', handleNewMod),
-				]
-			})
-			.catch((error) => {
-				debug('[id.vue] Failed to connect WebSocket:', error)
-				isConnected.value = false
-				isLoading.value = false
-			})
-	}
-
-	if (serverData.value?.flows?.intro && serverProject.value) {
-		client.archon.servers_v1.endIntro(serverId).then(() => {
-			queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
-		})
-	}
-}
-
-onMounted(() => {
-	isMounted.value = true
-
-	// serverData comes from useQuery and may not be available yet at mount time.
-	// Wait for it before initializing WebSocket, node reachability, etc.
-	if (serverData.value) {
-		initializeServer()
-	} else {
-		const stopWatch = watch(serverData, (data) => {
-			if (data) {
-				stopWatch()
-				initializeServer()
-			}
-		})
-	}
-
-	if (username.value && email.value && userId.value && createdAt.value) {
-		const currentUser = auth.value?.user as any
-		const matches =
-			username.value === currentUser?.username &&
-			email.value === currentUser?.email &&
-			userId.value === currentUser?.id &&
-			createdAt.value === Math.floor(new Date(currentUser?.created).getTime() / 1000)
-
-		if (matches) {
-			Intercom({
-				app_id: INTERCOM_APP_ID.value,
-				userId: userId.value,
-				name: username.value,
-				email: email.value,
-				created_at: createdAt.value,
-			})
-		} else {
-			console.warn('[PYROSERVERS][INTERCOM] mismatch')
-		}
-	}
-
-	DOMPurify.addHook(
-		'afterSanitizeAttributes',
-		(node: {
-			tagName: string
-			getAttribute: (arg0: string) => any
-			setAttribute: (arg0: string, arg1: string) => void
-		}) => {
-			if (node.tagName === 'A' && node.getAttribute('target')) {
-				node.setAttribute('rel', 'noopener noreferrer')
-			}
-		},
-	)
-
-	if (surveyNotice.value) {
-		showSurvey()
-	}
-})
-
-onUnmounted(() => {
-	cleanup()
-})
-
 definePageMeta({
 	middleware: 'auth',
 })
@@ -1547,48 +80,3 @@ useHead({
 	],
 })
 </script>
-
-<style>
-@keyframes server-action-buttons-anim {
-	0% {
-		opacity: 0;
-		transform: translateX(1rem);
-	}
-
-	100% {
-		opacity: 1;
-		transform: none;
-	}
-}
-
-.server-action-buttons-anim {
-	animation: server-action-buttons-anim 0.2s ease-out;
-}
-
-.mobile-blurred-servericon::before {
-	position: absolute;
-	left: 0;
-	top: 0;
-	display: block;
-	height: 9rem;
-	width: 100%;
-	background-size: cover;
-	background-position: center;
-	background-repeat: no-repeat;
-	filter: blur(1rem);
-	content: '';
-	background-image:
-		linear-gradient(
-			to bottom,
-			rgba(from var(--color-raised-bg) r g b / 0.2),
-			rgb(from var(--color-raised-bg) r g b / 0.8)
-		),
-		var(--server-bg-image);
-}
-
-@media screen and (min-width: 640px) {
-	.mobile-blurred-servericon::before {
-		display: none;
-	}
-}
-</style>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/index.vue b/apps/frontend/src/pages/hosting/manage/[id]/index.vue
index 3194157ed6..9b4ae555cc 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/index.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/index.vue
@@ -1,228 +1,13 @@
-<template>
-	<div class="relative flex select-none flex-col gap-6" data-pyro-server-manager-root>
-		<Admonition v-if="backupBusyReason" type="warning" :header="backupBusyReason">
-			Your server is still accessible during this time.
-		</Admonition>
-		<Admonition
-			v-if="inspectingError && isConnected && !isWsAuthIncorrect"
-			data-pyro-servers-inspecting-error
-			type="critical"
-			:header="`${serverData?.name} shut down unexpectedly.`"
-			dismissible
-			@dismiss="clearError"
-		>
-			<template v-if="inspectingError.analysis.problems.length">
-				<p class="m-0 text-sm opacity-80">
-					We automatically analyzed the logs and found the following:
-				</p>
-				<div class="mt-2 flex flex-col gap-2">
-					<div
-						v-for="problem in inspectingError.analysis.problems"
-						:key="problem.message"
-						class="bg-raised-bg/30 rounded-xl px-3 py-2"
-					>
-						<p class="m-0 text-sm font-semibold">{{ problem.message }}</p>
-						<ul v-if="problem.solutions.length" class="m-0 ml-4 mt-1.5 flex flex-col gap-1">
-							<li
-								v-for="solution in problem.solutions"
-								:key="solution.message"
-								class="text-sm opacity-80"
-							>
-								{{ solution.message }}
-							</li>
-						</ul>
-					</div>
-				</div>
-			</template>
-			<template v-else-if="props.serverPowerState === 'crashed'">
-				<template v-if="props.powerStateDetails?.oom_killed">
-					The server stopped because it ran out of memory. There may be a memory leak caused by a
-					mod or plugin, or you may need to upgrade your Modrinth Server.
-				</template>
-				<template v-else-if="props.powerStateDetails?.exit_code !== undefined">
-					Your server exited with code {{ props.powerStateDetails.exit_code }}.
-					<template v-if="props.powerStateDetails.exit_code === 1">
-						There may be a mod or plugin causing the issue, or an issue with your server
-						configuration.
-					</template>
-				</template>
-				<template v-else> We could not determine the specific cause of the crash. </template>
-				<p class="m-0 mt-2">You can try restarting the server.</p>
-			</template>
-			<template v-else>
-				We could not find any specific problems, but you can try restarting the server.
-			</template>
-		</Admonition>
-
-		<div class="flex flex-col-reverse gap-6 md:flex-col">
-			<ServerStats
-				:data="isConnected && !isWsAuthIncorrect ? stats : undefined"
-				:loading="!isConnected || isWsAuthIncorrect"
-			/>
-
-			<div class="flex h-[700px] flex-col gap-4">
-				<span class="text-2xl font-semibold text-contrast">Console</span>
-
-				<ConsolePageLayout />
-			</div>
-		</div>
-
-		<div
-			v-if="isWsAuthIncorrect"
-			class="absolute inset-0 flex flex-col items-center justify-center bg-bg"
-		>
-			<h2>Could not connect to the server.</h2>
-			<p>
-				An error occurred while attempting to connect to your server. Please try refreshing the
-				page. (WebSocket Authentication Failed)
-			</p>
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
-import {
-	Admonition,
-	ConsolePageLayout,
-	injectModrinthClient,
-	injectModrinthServerContext,
-	provideConsoleManager,
-	useVIntl,
-} from '@modrinth/ui'
-import type { ServerState, Stats } from '@modrinth/utils'
+import { injectModrinthServerContext, ServersManageOverviewPage } from '@modrinth/ui'
 
-import ServerStats from '~/components/ui/servers/ServerStats.vue'
-import { useModrinthServersConsole } from '~/store/console.ts'
-
-type ServerProps = {
-	isConnected: boolean
-	isWsAuthIncorrect: boolean
-	stats: Stats
-	serverPowerState: ServerState
-	powerStateDetails?: {
-		oom_killed?: boolean
-		exit_code?: number
-	}
-	isServerRunning: boolean
-}
-
-const props = defineProps<ServerProps>()
-
-const { formatMessage } = useVIntl()
-const client = injectModrinthClient()
-const { server: serverData, serverId, busyReasons } = injectModrinthServerContext()
-const modrinthServersConsole = useModrinthServersConsole()
-
-provideConsoleManager({
-	logLines: modrinthServersConsole.output,
-	sendCommand: (cmd: string) => {
-		try {
-			client.archon.sockets.send(serverId, { event: 'command', cmd })
-		} catch (error) {
-			console.error('Error sending command:', error)
-		}
-	},
-	showCommandInput: true,
-	loading: computed(() => !props.isConnected || props.isWsAuthIncorrect),
-	onClear: () => {
-		modrinthServersConsole.clear()
-	},
-	shareDisabled: computed(() => !props.isConnected),
-})
-
-const backupBusyReason = computed(() => {
-	const reason = busyReasons.value.find(
-		(r) =>
-			r.reason.id === 'servers.busy.backup-creating' ||
-			r.reason.id === 'servers.busy.backup-restoring',
-	)
-	return reason ? formatMessage(reason.reason) : null
-})
-
-interface ErrorData {
-	id: string
-	name: string
-	type: string
-	version: string
-	title: string
-	analysis: {
-		problems: Array<{
-			message: string
-			counter: number
-			entry: {
-				level: number
-				time: string | null
-				prefix: string
-				lines: Array<{ number: number; content: string }>
-			}
-			solutions: Array<{ message: string }>
-		}>
-		information: Array<{
-			message: string
-			counter: number
-			label: string
-			value: string
-			entry: {
-				level: number
-				time: string | null
-				prefix: string
-				lines: Array<{ number: number; content: string }>
-			}
-		}>
-	}
-}
-
-const inspectingError = ref<ErrorData | null>(null)
-
-const inspectError = async () => {
-	try {
-		const blob = await client.kyros.files_v0.downloadFile('/logs/latest.log')
-		const log = await blob.text()
-		if (!log) return
-
-		// @ts-ignore
-		const response = await $fetch(`https://api.mclo.gs/1/analyse`, {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/x-www-form-urlencoded',
-			},
-			body: new URLSearchParams({
-				content: log,
-			}),
-		})
-
-		// @ts-ignore
-		if (response && response.analysis && Array.isArray(response.analysis.problems)) {
-			inspectingError.value = response as ErrorData
-		} else {
-			inspectingError.value = null
-		}
-	} catch (error) {
-		console.error('Failed to analyze logs:', error)
-		inspectingError.value = null
-	}
-}
-
-const clearError = () => {
-	inspectingError.value = null
-}
-
-watch(
-	() => props.serverPowerState,
-	(newVal) => {
-		if (newVal === 'crashed' && !props.powerStateDetails?.oom_killed) {
-			inspectError()
-		} else {
-			clearError()
-		}
-	},
-)
-
-if (props.serverPowerState === 'crashed' && !props.powerStateDetails?.oom_killed) {
-	inspectError()
-}
+const { server } = injectModrinthServerContext()
 
 useHead({
-	title: `Overview - ${serverData.value?.name ?? 'Server'} - Modrinth`,
+	title: computed(() => `Overview - ${server.value?.name ?? 'Server'} - Modrinth`),
 })
 </script>
+
+<template>
+	<ServersManageOverviewPage />
+</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options.vue b/apps/frontend/src/pages/hosting/manage/[id]/options.vue
deleted file mode 100644
index 6fa28b857f..0000000000
--- a/apps/frontend/src/pages/hosting/manage/[id]/options.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-	<div class="flex flex-col gap-4">
-		<ServerSidebar :route="route" :nav-links="navLinks" />
-	</div>
-</template>
-<script setup lang="ts">
-import {
-	getServerSettingsNavLinks,
-	injectModrinthServerContext,
-	provideServerSettings,
-	type ServerSettingsBrowseModpacksArgs,
-} from '@modrinth/ui'
-import { isAdmin as isUserAdmin, type User } from '@modrinth/utils'
-import { computed, ref } from 'vue'
-
-import ServerSidebar from '~/components/ui/servers/ServerSidebar.vue'
-
-const route = useRoute()
-const serverId = route.params.id as string
-const auth = await useAuth()
-
-const { server } = injectModrinthServerContext()
-
-useHead({
-	title: `Options - ${server.value?.name ?? 'Server'} - Modrinth`,
-})
-
-const ownerId = computed(() => server.value?.owner_id ?? 'Ghost')
-const isOwner = computed(() => (auth.value?.user as User | null)?.id === ownerId.value)
-const isAdmin = computed(() => isUserAdmin(auth.value?.user))
-
-const currentUserId = computed(() => (auth.value?.user as User | null)?.id ?? null)
-const currentUserRole = computed(() => auth.value?.user?.role ?? null)
-
-provideServerSettings({
-	isApp: ref(false),
-	currentUserId,
-	currentUserRole,
-	browseModpacks: ({ serverId, worldId, from }: ServerSettingsBrowseModpacksArgs) => {
-		navigateTo({
-			path: '/discover/modpacks',
-			query: { sid: serverId, from, wid: worldId ?? undefined },
-		})
-	},
-})
-
-const navLinks = computed(() =>
-	getServerSettingsNavLinks({
-		serverId,
-		ownerId: ownerId.value,
-		serverStatus: server.value?.status,
-		isOwner: isOwner.value,
-		isAdmin: isAdmin.value,
-	}),
-)
-</script>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/advanced.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/advanced.vue
deleted file mode 100644
index b730006fff..0000000000
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/advanced.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import { ServerSettingsAdvancedPage } from '@modrinth/ui'
-</script>
-
-<template>
-	<ServerSettingsAdvancedPage class="card" />
-</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/billing.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/billing.vue
deleted file mode 100644
index 6e470aaafc..0000000000
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/billing.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import { ServerSettingsBillingPage } from '@modrinth/ui'
-</script>
-
-<template>
-	<ServerSettingsBillingPage class="card" />
-</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/index.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/index.vue
deleted file mode 100644
index 311bee0a9c..0000000000
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import { ServerSettingsGeneralPage } from '@modrinth/ui'
-</script>
-
-<template>
-	<ServerSettingsGeneralPage class="card" />
-</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue
deleted file mode 100644
index e3a54224ea..0000000000
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import { ServerSettingsInstallationPage } from '@modrinth/ui'
-
-const emit = defineEmits<{
-	reinstall: [unknown?]
-	'reinstall-failed': []
-}>()
-</script>
-
-<template>
-	<ServerSettingsInstallationPage
-		@reinstall="(event: unknown) => emit('reinstall', event)"
-		@reinstall-failed="emit('reinstall-failed')"
-		class="card"
-	/>
-</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/network.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/network.vue
deleted file mode 100644
index a63867e288..0000000000
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/network.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import { ServerSettingsNetworkPage } from '@modrinth/ui'
-</script>
-
-<template>
-	<ServerSettingsNetworkPage class="card" />
-</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
deleted file mode 100644
index 48c1fb8a6d..0000000000
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import { ServerSettingsPropertiesPage } from '@modrinth/ui'
-</script>
-
-<template>
-	<ServerSettingsPropertiesPage class="card" />
-</template>
diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index 0c6df65c7c..e2db08495c 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -718,7 +718,7 @@ import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useIntervalFn } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 
-import ModrinthServersIcon from '~/components/ui/servers/ModrinthServersIcon.vue'
+import ModrinthServersIcon from '~/components/brand/ModrinthServersIcon.vue'
 import ServersUpgradeModalWrapper from '~/components/ui/servers/ServersUpgradeModalWrapper.vue'
 import { products } from '~/generated/state.json'
 
diff --git a/apps/frontend/src/store/console.ts b/apps/frontend/src/store/console.ts
index 5e9d0169ad..fb72b37c86 100644
--- a/apps/frontend/src/store/console.ts
+++ b/apps/frontend/src/store/console.ts
@@ -1,164 +1 @@
-import { createGlobalState } from '@vueuse/core'
-import { type Ref, shallowRef } from 'vue'
-
-/**
- * Maximum number of console output lines to store
- * @type {number}
- */
-const maxLines = 10000
-const batchTimeout = 300 // ms
-const initialBatchSize = 256
-
-/**
- * Provides a global console output state management system
- * Allows adding, storing, and clearing console output with a maximum line limit
- *
- * @returns {Object} Console state management methods and reactive state
- * @property {Ref<string[]>} consoleOutput - Reactive array of console output lines
- * @property {function(string): void} addConsoleOutput - Method to add a new console output line
- * @property {function(): void} clear - Method to clear all console output
- */
-export const useModrinthServersConsole = createGlobalState(() => {
-	/**
-	 * Reactive array storing console output lines
-	 * @type {Ref<string[]>}
-	 */
-	const output: Ref<string[]> = shallowRef<string[]>([])
-	const searchQuery: Ref<string> = shallowRef('')
-	const filteredOutput: Ref<string[]> = shallowRef([])
-	let searchRegex: RegExp | null = null
-
-	let lineBuffer: string[] = []
-	let batchTimer: NodeJS.Timeout | null = null
-	let isProcessingInitialBatch = false
-
-	let refilterTimer: NodeJS.Timeout | null = null
-	const refilterTimeout = 100 // ms
-
-	const updateFilter = () => {
-		if (!searchQuery.value) {
-			filteredOutput.value = []
-			return
-		}
-
-		if (!searchRegex) {
-			searchRegex = new RegExp(searchQuery.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i')
-		}
-
-		filteredOutput.value = output.value.filter((line) => searchRegex?.test(line) ?? false)
-	}
-
-	const scheduleRefilter = () => {
-		if (refilterTimer) clearTimeout(refilterTimer)
-		refilterTimer = setTimeout(updateFilter, refilterTimeout)
-	}
-
-	const flushBuffer = () => {
-		if (lineBuffer.length === 0) return
-
-		const processedLines = lineBuffer.flatMap((line) => line.split('\n').filter(Boolean))
-
-		if (isProcessingInitialBatch && processedLines.length >= initialBatchSize) {
-			isProcessingInitialBatch = false
-			output.value = processedLines.slice(-maxLines)
-		} else {
-			const newOutput = [...output.value, ...processedLines]
-			output.value = newOutput.slice(-maxLines)
-		}
-
-		lineBuffer = []
-		batchTimer = null
-
-		if (searchQuery.value) {
-			scheduleRefilter()
-		}
-	}
-
-	/**
-	 * Adds a new output line to the console output
-	 * Automatically removes the oldest line if max output is exceeded
-	 *
-	 * @param {string} line - The console output line to add
-	 */
-	const addLine = (line: string): void => {
-		lineBuffer.push(line)
-
-		if (!batchTimer) {
-			batchTimer = setTimeout(flushBuffer, batchTimeout)
-		}
-	}
-
-	/**
-	 * Adds multiple output lines to the console output
-	 * Automatically removes the oldest lines if max output is exceeded
-	 *
-	 * @param {string[]} lines - The console output lines to add
-	 * @returns {void}
-	 */
-	const addLines = (lines: string[]): void => {
-		if (output.value.length === 0 && lines.length >= initialBatchSize) {
-			isProcessingInitialBatch = true
-			lineBuffer = lines
-			flushBuffer()
-			return
-		}
-
-		lineBuffer.push(...lines)
-
-		if (!batchTimer) {
-			batchTimer = setTimeout(flushBuffer, batchTimeout)
-		}
-	}
-
-	/**
-	 * Sets the search query and filters the output based on the query
-	 *
-	 * @param {string} query - The search query
-	 */
-	const setSearchQuery = (query: string): void => {
-		searchQuery.value = query
-		searchRegex = null
-		updateFilter()
-	}
-
-	/**
-	 * Clears all console output lines
-	 */
-	const clear = (): void => {
-		output.value = []
-		filteredOutput.value = []
-		searchQuery.value = ''
-		lineBuffer = []
-		isProcessingInitialBatch = false
-		if (batchTimer) {
-			clearTimeout(batchTimer)
-			batchTimer = null
-		}
-		if (refilterTimer) {
-			clearTimeout(refilterTimer)
-			refilterTimer = null
-		}
-		searchRegex = null
-	}
-
-	/**
-	 * Finds the index of a line in the main output
-	 *
-	 * @param {string} line - The line to find
-	 * @returns {number} The index of the line, or -1 if not found
-	 */
-	const findLineIndex = (line: string): number => {
-		return output.value.findIndex((l) => l === line)
-	}
-
-	return {
-		output,
-		searchQuery,
-		filteredOutput,
-		addLine,
-		addLines,
-		setSearchQuery,
-		clear,
-		findLineIndex,
-	}
-})
+export { useModrinthServersConsole } from '@modrinth/ui'
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2132684af4..974aaafc2c 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -54,6 +54,7 @@
 		"@codemirror/language": "^6.9.3",
 		"@codemirror/state": "^6.3.2",
 		"@codemirror/view": "^6.22.1",
+		"@intercom/messenger-js-sdk": "^0.0.14",
 		"@modrinth/api-client": "workspace:*",
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/blog": "workspace:*",
@@ -62,6 +63,7 @@
 		"@tresjs/cientos": "^4.3.0",
 		"@tresjs/core": "^4.3.4",
 		"@tresjs/post-processing": "^2.4.0",
+		"@types/dompurify": "^3.0.5",
 		"@types/markdown-it": "^14.1.1",
 		"@types/three": "^0.172.0",
 		"@vintl/how-ago": "^3.0.1",
@@ -72,6 +74,7 @@
 		"ace-builds": "^1.43.5",
 		"apexcharts": "^4.0.0",
 		"dayjs": "^1.11.10",
+		"dompurify": "^3.1.7",
 		"es-toolkit": "^1.44.0",
 		"floating-vue": "^5.2.2",
 		"fuse.js": "^6.6.2",
diff --git a/packages/ui/src/components/billing/ServersPurchase1Region.vue b/packages/ui/src/components/billing/ServersPurchase1Region.vue
index 3e72a22d40..009a39b8b2 100644
--- a/packages/ui/src/components/billing/ServersPurchase1Region.vue
+++ b/packages/ui/src/components/billing/ServersPurchase1Region.vue
@@ -214,7 +214,7 @@ async function updateStock() {
 onMounted(() => {
 	// auto select region with lowest ping
 	loading.value = true
-	bestPing.value = props.pings.sort((a, b) => {
+	bestPing.value = [...props.pings].sort((a, b) => {
 		if (a.ping <= 0) return 1
 		if (b.ping <= 0) return -1
 		return a.ping - b.ping
diff --git a/packages/ui/src/components/modal/TabbedModal.vue b/packages/ui/src/components/modal/TabbedModal.vue
index eb2b63f038..fc727ce7ba 100644
--- a/packages/ui/src/components/modal/TabbedModal.vue
+++ b/packages/ui/src/components/modal/TabbedModal.vue
@@ -121,7 +121,7 @@ defineExpose({ show, hide, selectedTab, setTab })
 
 				<div
 					ref="scrollContainer"
-					class="min-w-[400px] h-[500px] overflow-y-auto px-6"
+					class="min-w-[500px] overflow-y-auto px-6 h-screen max-h-[min(70vh,750px)]"
 					@scroll="checkScrollState"
 				>
 					<Suspense>
diff --git a/apps/app-frontend/src/components/ui/modal/ServerSettingsModal.vue b/packages/ui/src/components/servers/ServerSettingsModal.vue
similarity index 55%
rename from apps/app-frontend/src/components/ui/modal/ServerSettingsModal.vue
rename to packages/ui/src/components/servers/ServerSettingsModal.vue
index b20277476f..83ba648be5 100644
--- a/apps/app-frontend/src/components/ui/modal/ServerSettingsModal.vue
+++ b/packages/ui/src/components/servers/ServerSettingsModal.vue
@@ -1,41 +1,37 @@
 <script setup lang="ts">
-import {
-	type Archon,
-	clearNodeAuthState,
-	type Labrinth,
-	setNodeAuthState,
-} from '@modrinth/api-client'
+import { type Archon, clearNodeAuthState, setNodeAuthState } from '@modrinth/api-client'
 import { ChevronRightIcon } from '@modrinth/assets'
+import { useQueryClient } from '@tanstack/vue-query'
+import { computed, nextTick, onUnmounted, reactive, ref } from 'vue'
+
+import type { TabbedModalTab } from '#ui/components'
+import { TabbedModal } from '#ui/components'
+import { defineMessage, defineMessages, useVIntl } from '#ui/composables/i18n'
 import {
-	type BusyReason,
-	commonMessages,
-	defineMessage,
-	defineMessages,
-	injectModrinthClient,
-	injectNotificationManager,
-	provideModrinthServerContext,
-	provideServerSettings,
 	ServerSettingsAdvancedPage,
 	ServerSettingsGeneralPage,
 	ServerSettingsInstallationPage,
 	ServerSettingsNetworkPage,
 	ServerSettingsPropertiesPage,
 	serverSettingsTabDefinitions,
-	TabbedModal,
-	type TabbedModalTab,
-	useVIntl,
-} from '@modrinth/ui'
-import { useQueryClient } from '@tanstack/vue-query'
-import { computed, nextTick, onUnmounted, reactive, ref } from 'vue'
-
-import { get_user } from '@/helpers/cache'
-import { get as getCreds } from '@/helpers/mr_auth'
+	type ServerSettingsTabId,
+} from '#ui/layouts/shared/server-settings'
+import { provideServerSettings } from '#ui/layouts/shared/server-settings/providers/server-settings'
+import { injectModrinthClient, injectNotificationManager } from '#ui/providers'
+import { type BusyReason, provideModrinthServerContext } from '#ui/providers/server-context'
+import { commonMessages } from '#ui/utils/common-messages'
 
 type ShowOptions = {
 	serverId: string
 	tabIndex?: number
+	tabId?: ServerSettingsTabId
 }
 
+const props = defineProps<{
+	resolveViewer: () => Promise<{ userId: string | null; userRole: string | null }>
+	browseModpacks?: (args: { serverId: string; worldId: string | null; from: 'reset-server' }) => void | Promise<void>
+}>()
+
 const { formatMessage } = useVIntl()
 const queryClient = useQueryClient()
 const client = injectModrinthClient()
@@ -59,8 +55,8 @@ const currentUserRole = ref<string | null>(null)
 
 const isApp = ref(true)
 
-function browseModpacks() {
-	// Stub for app browse-modpacks flow. Intentionally no-op for now.
+function browseModpacks(args: { serverId: string; worldId: string | null; from: 'reset-server' }) {
+	props.browseModpacks?.(args)
 }
 
 const isConnected = ref(true)
@@ -139,6 +135,26 @@ provideModrinthServerContext({
 	fsOps,
 	fsQueuedOps,
 	refreshFsAuth,
+	stats: ref({
+		current: {
+			cpu_percent: 0,
+			ram_usage_bytes: 0,
+			ram_total_bytes: 1,
+			storage_usage_bytes: 0,
+			storage_total_bytes: 0,
+		},
+		past: {
+			cpu_percent: 0,
+			ram_usage_bytes: 0,
+			ram_total_bytes: 1,
+			storage_usage_bytes: 0,
+			storage_total_bytes: 0,
+		},
+		graph: { cpu: [], ram: [] },
+	}),
+	isWsAuthIncorrect: ref(false),
+	powerStateDetails: ref(undefined),
+	uptimeSeconds: ref(0),
 })
 
 const ownerId = computed(() => server.value?.owner_id ?? 'Ghost')
@@ -164,7 +180,7 @@ const tabs = computed<TabbedModalTab[]>(() =>
 			return {
 				name,
 				icon: tab.icon,
-				href: `https://modrinth.com${tab.href(ctx)}`,
+				href: tab.href ? `https://modrinth.com${tab.href(ctx)}` : undefined,
 				shown,
 			}
 		}
@@ -178,49 +194,98 @@ const tabs = computed<TabbedModalTab[]>(() =>
 	}),
 )
 
-async function resolveViewer() {
+async function fetchViewer() {
 	currentUserId.value = null
 	currentUserRole.value = null
 
-	const credentials = await getCreds().catch(() => null)
-	if (!credentials?.user_id) {
-		return
-	}
-
-	currentUserId.value = credentials.user_id
-
-	const user = await get_user(credentials.user_id, 'bypass').catch(() => null)
-	const typedUser = user as Labrinth.Users.v2.User | null
-	currentUserRole.value = typedUser?.role ?? null
+	const result = await props.resolveViewer()
+	currentUserId.value = result.userId
+	currentUserRole.value = result.userRole
 }
 
-async function show({ serverId, tabIndex }: ShowOptions) {
+async function show({ serverId, tabIndex, tabId }: ShowOptions) {
 	try {
-		const [serverData, serverFull] = await Promise.all([
-			queryClient.fetchQuery({
-				queryKey: ['servers', 'detail', serverId],
-				queryFn: () => client.archon.servers_v0.get(serverId),
-			}),
-			queryClient.fetchQuery({
-				queryKey: ['servers', 'v1', 'detail', serverId],
-				queryFn: () => client.archon.servers_v1.get(serverId),
-			}),
-			resolveViewer(),
-		])
-
 		currentServerId.value = serverId
-		server.value = serverData
-		const activeWorld = serverFull.worlds.find((world) => world.is_active)
-		worldId.value = activeWorld?.id ?? serverFull.worlds[0]?.id ?? null
 
-		setNodeAuthState(() => fsAuth.value, refreshFsAuth)
-		await refreshFsAuth().catch(() => {})
+		const cachedServer = queryClient.getQueryData<Archon.Servers.v0.Server>([
+			'servers',
+			'detail',
+			serverId,
+		])
+		const cachedFull = queryClient.getQueryData<Archon.Servers.v1.Server>([
+			'servers',
+			'v1',
+			'detail',
+			serverId,
+		])
+
+		if (cachedServer) server.value = cachedServer
+		if (cachedFull) {
+			const activeWorld = cachedFull.worlds.find((world) => world.is_active)
+			worldId.value = activeWorld?.id ?? cachedFull.worlds[0]?.id ?? null
+		}
 
 		modal.value?.show()
-		const visibleTabsCount = tabs.value.filter((tab) => tab.shown !== false).length
-		const requestedTab = tabIndex ?? 0
-		const clampedTab = Math.min(Math.max(requestedTab, 0), Math.max(visibleTabsCount - 1, 0))
+		const visibleTabs = tabs.value.filter((tab) => tab.shown !== false)
+		let requestedTab = tabIndex ?? 0
+		if (tabId) {
+			const defIndex = serverSettingsTabDefinitions.findIndex((d) => d.id === tabId)
+			if (defIndex >= 0) {
+				const visibleIndex = visibleTabs.findIndex(
+					(_, i) => tabs.value.indexOf(visibleTabs[i]) === defIndex,
+				)
+				if (visibleIndex >= 0) requestedTab = visibleIndex
+			}
+		}
+		const clampedTab = Math.min(Math.max(requestedTab, 0), Math.max(visibleTabs.length - 1, 0))
 		nextTick(() => modal.value?.setTab(clampedTab))
+
+		const fetchPromises: Promise<unknown>[] = [fetchViewer()]
+
+		if (!cachedServer || !cachedFull) {
+			fetchPromises.push(
+				queryClient
+					.fetchQuery({
+						queryKey: ['servers', 'detail', serverId],
+						queryFn: () => client.archon.servers_v0.get(serverId),
+					})
+					.then((data) => {
+						server.value = data
+					}),
+				queryClient
+					.fetchQuery({
+						queryKey: ['servers', 'v1', 'detail', serverId],
+						queryFn: () => client.archon.servers_v1.get(serverId),
+					})
+					.then((data) => {
+						const activeWorld = data.worlds.find((world) => world.is_active)
+						worldId.value = activeWorld?.id ?? data.worlds[0]?.id ?? null
+					}),
+			)
+		}
+
+		await Promise.all(fetchPromises)
+
+		setNodeAuthState(() => fsAuth.value, refreshFsAuth)
+		refreshFsAuth().catch(() => {})
+
+		if (worldId.value) {
+			queryClient.prefetchQuery({
+				queryKey: ['servers', 'properties', 'v1', serverId, worldId.value],
+				queryFn: () => client.archon.properties_v1.getProperties(serverId, worldId.value!),
+			})
+			queryClient.prefetchQuery({
+				queryKey: ['content', 'list', 'v1', serverId],
+				queryFn: () =>
+					client.archon.content_v1.getAddons(serverId, worldId.value!, {
+						from_modpack: false,
+					}),
+			})
+			queryClient.prefetchQuery({
+				queryKey: ['servers', 'startup', 'v1', serverId, worldId.value],
+				queryFn: () => client.archon.options_v1.getStartup(serverId, worldId.value!),
+			})
+		}
 	} catch (error) {
 		console.error(error)
 		addNotification({
diff --git a/packages/ui/src/components/servers/index.ts b/packages/ui/src/components/servers/index.ts
index 14f0c74d1e..0a3228aade 100644
--- a/packages/ui/src/components/servers/index.ts
+++ b/packages/ui/src/components/servers/index.ts
@@ -5,7 +5,9 @@ export { default as InstallingBanner } from './InstallingBanner.vue'
 export * from './labels'
 export * from './marketing'
 export { default as SaveBanner } from './SaveBanner.vue'
+export * from './server-header'
 export { default as ServerListEmpty } from './server-list-empty/ServerListEmpty.vue'
-export { type PendingChange,default as ServerListing } from './ServerListing.vue'
+export { type PendingChange, default as ServerListing } from './ServerListing.vue'
+export { default as ServerSettingsModal } from './ServerSettingsModal.vue'
 export { default as ServerSetupModal } from './ServerSetupModal.vue'
 export { default as ServersPromo } from './ServersPromo.vue'
diff --git a/packages/ui/src/components/servers/labels/ServerGameLabel.vue b/packages/ui/src/components/servers/labels/ServerGameLabel.vue
index 5f64f66381..d12a165a75 100644
--- a/packages/ui/src/components/servers/labels/ServerGameLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerGameLabel.vue
@@ -9,9 +9,9 @@
 		<GameIcon aria-hidden="true" />
 		<AutoLink
 			v-if="isLink"
-			:to="serverId ? `/hosting/manage/${serverId}/options/loader` : ''"
+			:to="settingsLinkTarget"
 			class="flex min-w-0 items-center truncate text-sm font-semibold"
-			:class="serverId ? 'hover:underline' : ''"
+			:class="settingsLinkTarget ? 'hover:underline' : ''"
 		>
 			<div class="flex flex-row items-center gap-1">
 				{{ game[0].toUpperCase() + game.slice(1) }}
@@ -29,7 +29,9 @@
 
 <script setup lang="ts">
 import { GameIcon } from '@modrinth/assets'
-import { useRoute } from 'vue-router'
+import { computed } from 'vue'
+
+import { injectServerSettingsModal } from '#ui/providers/server-settings-modal'
 
 import AutoLink from '../../base/AutoLink.vue'
 import Separator from './Separator.vue'
@@ -41,6 +43,11 @@ defineProps<{
 	noSeparator?: boolean
 }>()
 
-const route = useRoute()
-const serverId = route.params.id as string
+const settingsModal = injectServerSettingsModal(null)
+const settingsLinkTarget = computed(() => {
+	if (settingsModal) {
+		return () => settingsModal.openServerSettings({ tabId: 'installation' })
+	}
+	return ''
+})
 </script>
diff --git a/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue b/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
index e4d45d633f..5dbdacedfb 100644
--- a/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
@@ -6,9 +6,9 @@
 			<div v-else class="size-5 shrink-0 animate-pulse rounded-full bg-button-border"></div>
 			<AutoLink
 				v-if="isLink"
-				:to="serverId ? `/hosting/manage/${serverId}/options/loader` : ''"
+				:to="settingsLinkTarget"
 				class="flex min-w-0 items-center text-sm font-semibold"
-				:class="serverId ? 'hover:underline' : ''"
+				:class="settingsLinkTarget ? 'hover:underline' : ''"
 			>
 				<span v-if="loader">
 					{{ loader }}
@@ -34,7 +34,9 @@
 </template>
 
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
+import { computed } from 'vue'
+
+import { injectServerSettingsModal } from '#ui/providers/server-settings-modal'
 
 import AutoLink from '../../base/AutoLink.vue'
 import LoaderIcon from '../icons/LoaderIcon.vue'
@@ -47,6 +49,11 @@ defineProps<{
 	isLink?: boolean
 }>()
 
-const route = useRoute()
-const serverId = route.params.id as string
+const settingsModal = injectServerSettingsModal(null)
+const settingsLinkTarget = computed(() => {
+	if (settingsModal) {
+		return () => settingsModal.openServerSettings({ tabId: 'installation' })
+	}
+	return ''
+})
 </script>
diff --git a/apps/frontend/src/components/ui/servers/marketing/MedalServerCountdown.vue b/packages/ui/src/components/servers/marketing/MedalServerCountdown.vue
similarity index 80%
rename from apps/frontend/src/components/ui/servers/marketing/MedalServerCountdown.vue
rename to packages/ui/src/components/servers/marketing/MedalServerCountdown.vue
index 906a7a3d94..e219c20ea2 100644
--- a/apps/frontend/src/components/ui/servers/marketing/MedalServerCountdown.vue
+++ b/packages/ui/src/components/servers/marketing/MedalServerCountdown.vue
@@ -34,18 +34,27 @@
 			<button class="z-10 my-auto" @click="openUpgradeModal"><RocketIcon /> Upgrade</button>
 		</ButtonStyled>
 	</div>
-	<ServersUpgradeModalWrapper ref="upgradeModal" />
+	<ServersUpgradeModalWrapper
+		ref="upgradeModal"
+		:stripe-publishable-key="props.stripePublishableKey ?? ''"
+		:site-url="props.siteUrl ?? ''"
+		:products="props.products ?? []"
+	/>
 </template>
 
 <script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
 import { ClockIcon, RocketIcon } from '@modrinth/assets'
-import { ButtonStyled, MedalBackgroundImage } from '@modrinth/ui'
-import type { UserSubscription } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 import dayjsDuration from 'dayjs/plugin/duration'
-import type { ComponentPublicInstance } from 'vue'
+import { type ComponentPublicInstance, computed, onMounted, onUnmounted, ref } from 'vue'
 
-import ServersUpgradeModalWrapper from '../ServersUpgradeModalWrapper.vue'
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import ServersUpgradeModalWrapper from '#ui/components/billing/ServersUpgradeModalWrapper.vue'
+import { injectModrinthClient } from '#ui/providers'
+
+import MedalBackgroundImage from './MedalBackgroundImage.vue'
 
 dayjs.extend(dayjsDuration)
 
@@ -54,15 +63,16 @@ const upgradeModal = ref<UpgradeWrapperRef | null>(null)
 
 const props = defineProps<{
 	serverId?: string
+	stripePublishableKey?: string
+	siteUrl?: string
+	products?: Labrinth.Billing.Internal.Product[]
 }>()
 
-const { data: subscriptions } = await useLazyAsyncData(
-	'countdown-subscriptions',
-	() =>
-		useBaseFetch(`billing/subscriptions`, {
-			internal: true,
-		}) as Promise<UserSubscription[]>,
-)
+const client = injectModrinthClient()
+const { data: subscriptions } = useQuery({
+	queryKey: ['billing', 'subscriptions'],
+	queryFn: () => client.labrinth.billing_internal.getSubscriptions(),
+})
 
 const expiryDate = computed(() => {
 	for (const subscription of subscriptions.value || []) {
diff --git a/packages/ui/src/components/servers/marketing/index.ts b/packages/ui/src/components/servers/marketing/index.ts
index 58f353604f..dd2c8ca3bc 100644
--- a/packages/ui/src/components/servers/marketing/index.ts
+++ b/packages/ui/src/components/servers/marketing/index.ts
@@ -1,2 +1,3 @@
 export { default as MedalBackgroundImage } from './MedalBackgroundImage.vue'
+export { default as MedalServerCountdown } from './MedalServerCountdown.vue'
 export { default as MedalServerListing } from './MedalServerListing.vue'
diff --git a/packages/ui/src/components/servers/server-header/PanelActionConfirmModal.vue b/packages/ui/src/components/servers/server-header/PanelActionConfirmModal.vue
new file mode 100644
index 0000000000..327195cd33
--- /dev/null
+++ b/packages/ui/src/components/servers/server-header/PanelActionConfirmModal.vue
@@ -0,0 +1,71 @@
+<template>
+	<NewModal ref="modal" header="Confirming power action" @close="emit('cancel')">
+		<div class="flex flex-col gap-4 md:w-[400px]">
+			<p class="m-0">
+				Are you sure you want to
+				<span class="lowercase">{{ pendingAction }}</span>
+				the server?
+			</p>
+			<Checkbox
+				v-model="dontAskAgainModel"
+				label="Don't ask me again"
+				class="text-sm"
+				:disabled="!pendingAction"
+			/>
+			<div class="flex flex-row gap-4">
+				<ButtonStyled type="standard" color="brand" @click="emit('confirm')">
+					<button :disabled="!pendingAction">
+						<CheckIcon class="h-5 w-5" />
+						{{ pendingAction }} server
+					</button>
+				</ButtonStyled>
+				<ButtonStyled @click="emit('cancel')">
+					<button>
+						<XIcon class="h-5 w-5" />
+						Cancel
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { CheckIcon, XIcon } from '@modrinth/assets'
+import { computed, ref } from 'vue'
+
+import { ButtonStyled, Checkbox, NewModal } from '#ui/components'
+
+import type { PowerAction } from './use-server-power-action'
+
+const props = defineProps<{
+	pendingAction: PowerAction | null
+	dontAskAgain: boolean
+}>()
+
+const emit = defineEmits<{
+	confirm: []
+	cancel: []
+	'update:dontAskAgain': [value: boolean]
+}>()
+
+const modal = ref<InstanceType<typeof NewModal> | null>(null)
+
+const dontAskAgainModel = computed({
+	get: () => props.dontAskAgain,
+	set: (value: boolean) => emit('update:dontAskAgain', value),
+})
+
+function show() {
+	modal.value?.show()
+}
+
+function hide() {
+	modal.value?.hide()
+}
+
+defineExpose({
+	show,
+	hide,
+})
+</script>
diff --git a/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue b/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
new file mode 100644
index 0000000000..fe6d61f121
--- /dev/null
+++ b/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
@@ -0,0 +1,84 @@
+<template>
+	<div class="contents">
+		<PanelActionConfirmModal
+			ref="confirmActionModal"
+			v-model:dont-ask-again="dontAskAgain"
+			:pending-action="pendingAction"
+			@confirm="executePendingAction"
+			@cancel="resetPendingAction"
+		/>
+
+		<div class="flex flex-row items-center gap-2 rounded-lg">
+			<ButtonStyled v-if="isInstalling" type="standard" color="brand" size="large">
+				<button disabled class="flex-shrink-0">
+					<LoaderCircleIcon class="size-5 animate-spin" /> Installing...
+				</button>
+			</ButtonStyled>
+
+			<template v-else>
+				<ButtonStyled v-if="showStopButton" type="transparent" size="large">
+					<button :disabled="!canTakeAction" @click="initiateAction('Stop')">
+						<div class="flex gap-1">
+							<StopCircleIcon class="h-5 w-5" />
+							<span>{{ isStopping ? 'Stopping...' : 'Stop' }}</span>
+						</div>
+					</button>
+				</ButtonStyled>
+
+				<ButtonStyled type="standard" color="brand" size="large">
+					<button v-tooltip="busyTooltip" :disabled="!canTakeAction" @click="handlePrimaryAction">
+						<div v-if="isTransitioning" class="grid place-content-center">
+							<LoaderCircleIcon class="size-5 animate-spin" />
+						</div>
+						<component :is="isRunning ? UpdatedIcon : PlayIcon" v-else />
+						<span>{{ primaryActionText }}</span>
+					</button>
+				</ButtonStyled>
+			</template>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { LoaderCircleIcon, PlayIcon, StopCircleIcon, UpdatedIcon } from '@modrinth/assets'
+import { computed, ref } from 'vue'
+
+import { ButtonStyled } from '#ui/components'
+
+import PanelActionConfirmModal from './PanelActionConfirmModal.vue'
+import {
+	type PanelActionConfirmModalController,
+	useServerPowerAction,
+} from './use-server-power-action'
+
+const props = withDefaults(
+	defineProps<{
+		disabled?: boolean
+	}>(),
+	{
+		disabled: false,
+	},
+)
+
+const confirmActionModal = ref<PanelActionConfirmModalController | null>(null)
+
+const {
+	isInstalling,
+	isRunning,
+	isStopping,
+	isTransitioning,
+	showStopButton,
+	busyTooltip,
+	canTakeAction,
+	primaryActionText,
+	pendingAction,
+	dontAskAgain,
+	initiateAction,
+	handlePrimaryAction,
+	executePendingAction,
+	resetPendingAction,
+} = useServerPowerAction({
+	disabled: computed(() => props.disabled),
+	confirmModalRef: confirmActionModal,
+})
+</script>
diff --git a/packages/ui/src/components/servers/server-header/PanelServerOverflowMenu.vue b/packages/ui/src/components/servers/server-header/PanelServerOverflowMenu.vue
new file mode 100644
index 0000000000..e8a4f8d1ee
--- /dev/null
+++ b/packages/ui/src/components/servers/server-header/PanelServerOverflowMenu.vue
@@ -0,0 +1,145 @@
+<template>
+	<div class="contents">
+		<PanelActionConfirmModal
+			ref="confirmActionModal"
+			v-model:dont-ask-again="dontAskAgain"
+			:pending-action="pendingAction"
+			@confirm="executePendingAction"
+			@cancel="resetPendingAction"
+		/>
+
+		<NewModal
+			ref="detailsModal"
+			:header="`All of ${server.name || 'Server'} info`"
+			@close="detailsModal?.hide()"
+		>
+			<ServerInfoLabels
+				:server-data="server"
+				:show-game-label="true"
+				:show-loader-label="true"
+				:uptime-seconds="props.uptimeSeconds"
+				:column="true"
+				class="mb-6 flex flex-col gap-2"
+			/>
+			<div v-if="props.showDebugInfo" class="markdown-body">
+				<pre>{{ server }}</pre>
+			</div>
+			<ButtonStyled type="standard" color="brand" @click="detailsModal?.hide()">
+				<button class="w-full">Close</button>
+			</ButtonStyled>
+		</NewModal>
+
+		<ButtonStyled circular type="transparent" size="large">
+			<TeleportOverflowMenu :options="menuOptions">
+				<MoreVerticalIcon aria-hidden="true" />
+				<template #kill>
+					<SlashIcon class="h-5 w-5" />
+					<span>Kill server</span>
+				</template>
+				<template #allServers>
+					<ServerIcon class="h-5 w-5" />
+					<span>All servers</span>
+				</template>
+				<template #details>
+					<InfoIcon class="h-5 w-5" />
+					<span>Details</span>
+				</template>
+				<template #copy-id>
+					<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
+					<span>Copy ID</span>
+				</template>
+			</TeleportOverflowMenu>
+		</ButtonStyled>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	ClipboardCopyIcon,
+	InfoIcon,
+	MoreVerticalIcon,
+	ServerIcon,
+	SlashIcon,
+} from '@modrinth/assets'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { ButtonStyled, NewModal, ServerInfoLabels } from '#ui/components'
+import TeleportOverflowMenu from '#ui/components/base/TeleportOverflowMenu.vue'
+import { injectModrinthServerContext } from '#ui/providers'
+
+import PanelActionConfirmModal from './PanelActionConfirmModal.vue'
+import {
+	type PanelActionConfirmModalController,
+	useServerPowerAction,
+} from './use-server-power-action'
+
+const props = withDefaults(
+	defineProps<{
+		disabled?: boolean
+		showCopyIdAction?: boolean
+		showDebugInfo?: boolean
+		uptimeSeconds?: number
+	}>(),
+	{
+		disabled: false,
+		showCopyIdAction: false,
+		showDebugInfo: false,
+		uptimeSeconds: 0,
+	},
+)
+
+const router = useRouter()
+const { serverId, server } = injectModrinthServerContext()
+
+const confirmActionModal = ref<PanelActionConfirmModalController | null>(null)
+const detailsModal = ref<InstanceType<typeof NewModal> | null>(null)
+
+const {
+	isInstalling,
+	pendingAction,
+	dontAskAgain,
+	initiateAction,
+	executePendingAction,
+	resetPendingAction,
+} = useServerPowerAction({
+	disabled: computed(() => props.disabled),
+	confirmModalRef: confirmActionModal,
+})
+
+const menuOptions = computed(() => [
+	...(isInstalling.value
+		? []
+		: [
+				{
+					id: 'kill',
+					label: 'Kill server',
+					icon: SlashIcon,
+					action: () => initiateAction('Kill'),
+				},
+			]),
+	{
+		id: 'allServers',
+		label: 'All servers',
+		icon: ServerIcon,
+		action: () => router.push('/hosting/manage'),
+	},
+	{
+		id: 'details',
+		label: 'Details',
+		icon: InfoIcon,
+		action: () => detailsModal.value?.show(),
+	},
+	{
+		id: 'copy-id',
+		label: 'Copy ID',
+		icon: ClipboardCopyIcon,
+		action: () => copyId(),
+		shown: props.showCopyIdAction,
+	},
+])
+
+async function copyId() {
+	await navigator.clipboard.writeText(serverId)
+}
+</script>
diff --git a/packages/ui/src/components/servers/server-header/ServerManageHeader.vue b/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
new file mode 100644
index 0000000000..40dbea6081
--- /dev/null
+++ b/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
@@ -0,0 +1,162 @@
+<template>
+	<div class="w-full flex flex-col gap-4">
+		<AutoLink :to="props.backHref" :class="props.breadcrumbClass">
+			<LeftArrowIcon />
+			{{ props.backLabel }}
+		</AutoLink>
+		<ContentPageHeader :class="props.headerClass">
+			<template #icon>
+				<ServerIcon :image="headerImage" class="size-20 !rounded-2xl" />
+			</template>
+			<template #title>
+				{{ props.server?.name || 'Server' }}
+			</template>
+			<template #stats>
+				<div
+					v-if="props.server?.flows?.intro"
+					class="flex items-center gap-2 font-semibold text-secondary"
+				>
+					<SettingsIcon />
+					Configuring server...
+				</div>
+				<div v-else class="flex flex-wrap items-center gap-2">
+					<div v-if="props.server?.loader" class="flex items-center gap-2 font-medium capitalize">
+						<LoaderIcon :loader="props.server.loader" class="flex shrink-0 [&&]:size-5" />
+						{{ props.server.loader }} {{ props.server.mc_version }}
+					</div>
+
+					<div
+						v-if="props.server?.loader && props.server?.net?.domain"
+						class="h-1.5 w-1.5 rounded-full bg-surface-5"
+					/>
+
+					<div
+						v-if="props.server?.net?.domain"
+						v-tooltip="'Copy server address'"
+						class="flex cursor-pointer items-center gap-2 font-medium hover:underline"
+						@click="copyServerAddress"
+					>
+						<LinkIcon class="flex size-5 shrink-0" />
+						{{ props.server.net.domain }}.modrinth.gg
+					</div>
+
+					<div v-if="showUptime" class="h-1.5 w-1.5 rounded-full bg-surface-5" />
+
+					<div v-if="showUptime" class="flex items-center gap-2 font-medium">
+						<TimerIcon class="flex size-5 shrink-0" />
+						{{ formattedUptime }}
+					</div>
+
+					<div
+						v-if="showProject && (props.server?.loader || props.server?.net?.domain || showUptime)"
+						class="h-1.5 w-1.5 rounded-full bg-surface-5"
+					/>
+
+					<div v-if="showProject" class="flex items-center gap-1.5 font-medium text-primary">
+						Linked to
+						<Avatar
+							:src="props.serverProject?.icon_url ?? undefined"
+							:alt="props.serverProject?.title ?? ''"
+							size="24px"
+						/>
+						<AutoLink :to="serverProjectLink" class="truncate text-primary hover:underline">
+							{{ props.serverProject?.title }}
+						</AutoLink>
+					</div>
+				</div>
+			</template>
+			<template #actions>
+				<slot name="actions" />
+			</template>
+		</ContentPageHeader>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
+import { LeftArrowIcon, LinkIcon, SettingsIcon, TimerIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+import { AutoLink, Avatar, ContentPageHeader, LoaderIcon, ServerIcon } from '#ui/components'
+import { injectNotificationManager } from '#ui/providers'
+
+type ServerProjectSummary = {
+	id: string
+	slug?: string | null
+	title: string
+	icon_url?: string | null
+}
+
+const props = withDefaults(
+	defineProps<{
+		server: Archon.Servers.v0.Server | null | undefined
+		serverImage?: string | null
+		serverProject?: ServerProjectSummary | null
+		serverProjectLink?: string
+		uptimeSeconds?: number
+		showUptime?: boolean
+		backHref?: string
+		backLabel?: string
+		breadcrumbClass?: string
+		headerClass?: string
+	}>(),
+	{
+		serverImage: null,
+		serverProject: null,
+		serverProjectLink: '',
+		uptimeSeconds: 0,
+		showUptime: true,
+		backHref: '/hosting/manage',
+		backLabel: 'All servers',
+		breadcrumbClass: 'breadcrumb goto-link flex w-fit items-center',
+		headerClass: '',
+	},
+)
+
+const { addNotification } = injectNotificationManager()
+
+const headerImage = computed(() => {
+	if (props.server?.is_medal) {
+		return 'https://cdn-raw.modrinth.com/medal_icon.webp'
+	}
+	return props.serverImage ?? undefined
+})
+
+const showUptime = computed(() => props.showUptime && (props.uptimeSeconds ?? 0) > 0)
+
+const formattedUptime = computed(() => {
+	const uptime = props.uptimeSeconds ?? 0
+	const days = Math.floor(uptime / (24 * 3600))
+	const hours = Math.floor((uptime % (24 * 3600)) / 3600)
+	const minutes = Math.floor((uptime % 3600) / 60)
+	const seconds = uptime % 60
+
+	let formatted = ''
+	if (days > 0) formatted += `${days}d `
+	if (hours > 0 || days > 0) formatted += `${hours}h `
+	formatted += `${minutes}m ${seconds}s`
+	return formatted.trim()
+})
+
+const showProject = computed(() => !!props.serverProject)
+
+const serverProjectLink = computed(() => {
+	if (props.serverProjectLink) {
+		return props.serverProjectLink
+	}
+	if (!props.serverProject) {
+		return ''
+	}
+	return `/project/${props.serverProject.slug ?? props.serverProject.id}`
+})
+
+function copyServerAddress() {
+	if (!props.server?.net?.domain) return
+	navigator.clipboard.writeText(`${props.server.net.domain}.modrinth.gg`)
+	addNotification({
+		title: 'Server address copied',
+		text: "Your server's address has been copied to your clipboard.",
+		type: 'success',
+	})
+}
+</script>
diff --git a/packages/ui/src/components/servers/server-header/index.ts b/packages/ui/src/components/servers/server-header/index.ts
new file mode 100644
index 0000000000..97bcdcc7f2
--- /dev/null
+++ b/packages/ui/src/components/servers/server-header/index.ts
@@ -0,0 +1,3 @@
+export { default as PanelServerActionButton } from './PanelServerActionButton.vue'
+export { default as PanelServerOverflowMenu } from './PanelServerOverflowMenu.vue'
+export { default as ServerManageHeader } from './ServerManageHeader.vue'
diff --git a/packages/ui/src/components/servers/server-header/use-server-power-action.ts b/packages/ui/src/components/servers/server-header/use-server-power-action.ts
new file mode 100644
index 0000000000..f66e5da61d
--- /dev/null
+++ b/packages/ui/src/components/servers/server-header/use-server-power-action.ts
@@ -0,0 +1,136 @@
+import { useStorage } from '@vueuse/core'
+import { computed, type Ref, ref } from 'vue'
+
+import { useVIntl } from '#ui/composables/i18n'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+} from '#ui/providers'
+
+export type PowerAction = 'Start' | 'Stop' | 'Restart' | 'Kill'
+
+export type PanelActionConfirmModalController = {
+	show: () => void
+	hide: () => void
+}
+
+export function useServerPowerAction(options?: {
+	disabled?: Ref<boolean>
+	confirmModalRef?: Ref<PanelActionConfirmModalController | null>
+}) {
+	const { formatMessage } = useVIntl()
+	const client = injectModrinthClient()
+	const { serverId, server, powerState, busyReasons } = injectModrinthServerContext()
+	const { addNotification } = injectNotificationManager()
+	const pendingAction = ref<PowerAction | null>(null)
+	const dontAskAgain = ref(false)
+
+	const userPreferences = useStorage(`pyro-server-${serverId}-preferences`, {
+		powerDontAskAgain: false,
+	})
+
+	const isInstalling = computed(() => server.value.status === 'installing')
+	const isRunning = computed(() => powerState.value === 'running')
+	const isStopping = computed(() => powerState.value === 'stopping')
+	const isTransitioning = computed(
+		() => powerState.value === 'starting' || powerState.value === 'stopping',
+	)
+	const showStopButton = computed(() => isRunning.value || isStopping.value)
+
+	const busyTooltip = computed(() =>
+		busyReasons.value.length > 0 ? formatMessage(busyReasons.value[0].reason) : undefined,
+	)
+
+	const canTakeAction = computed(
+		() => !isTransitioning.value && !options?.disabled?.value && busyReasons.value.length === 0,
+	)
+
+	const primaryActionText = computed(() => {
+		switch (powerState.value) {
+			case 'starting':
+				return 'Starting...'
+			case 'stopping':
+				return 'Stopping...'
+			case 'running':
+				return 'Restart'
+			default:
+				return 'Start'
+		}
+	})
+
+	async function sendPowerAction(action: PowerAction) {
+		try {
+			await client.archon.servers_v0.power(serverId, action)
+		} catch (error) {
+			console.error(`Error performing ${action} on server:`, error)
+			addNotification({
+				type: 'error',
+				title: `Failed to ${action.toLowerCase()} server`,
+				text: 'An error occurred while performing this action.',
+			})
+		}
+	}
+
+	function initiateAction(action: PowerAction) {
+		if (!canTakeAction.value) return
+
+		if (action === 'Start') {
+			void sendPowerAction(action)
+			return
+		}
+
+		pendingAction.value = action
+
+		if (userPreferences.value.powerDontAskAgain) {
+			executePendingAction()
+		} else {
+			options?.confirmModalRef?.value?.show()
+		}
+	}
+
+	function handlePrimaryAction() {
+		initiateAction(isRunning.value ? 'Restart' : 'Start')
+	}
+
+	function executePendingAction() {
+		if (!pendingAction.value) return
+
+		if (!canTakeAction.value) {
+			resetPendingAction()
+			return
+		}
+
+		void sendPowerAction(pendingAction.value)
+
+		if (dontAskAgain.value) {
+			userPreferences.value.powerDontAskAgain = true
+		}
+
+		resetPendingAction()
+	}
+
+	function resetPendingAction() {
+		options?.confirmModalRef?.value?.hide()
+		pendingAction.value = null
+		dontAskAgain.value = false
+	}
+
+	return {
+		isInstalling,
+		isRunning,
+		isStopping,
+		isTransitioning,
+		showStopButton,
+		busyTooltip,
+		canTakeAction,
+		primaryActionText,
+		pendingAction,
+		dontAskAgain,
+		sendPowerAction,
+		initiateAction,
+		handlePrimaryAction,
+		executePendingAction,
+		resetPendingAction,
+	}
+}
diff --git a/packages/ui/src/composables/index.ts b/packages/ui/src/composables/index.ts
index eda671a137..c5afc1d095 100644
--- a/packages/ui/src/composables/index.ts
+++ b/packages/ui/src/composables/index.ts
@@ -9,6 +9,10 @@ export * from './i18n-debug'
 export * from './page-leave-safety'
 export * from './scroll-indicator'
 export * from './server-backup'
+export * from './server-console'
+export * from './server-manage-core-runtime'
 export * from './sticky-observer'
 export * from './terminal'
+export * from './use-server-image'
+export * from './use-server-project'
 export * from './virtual-scroll'
diff --git a/packages/ui/src/composables/server-console.ts b/packages/ui/src/composables/server-console.ts
new file mode 100644
index 0000000000..a58d926823
--- /dev/null
+++ b/packages/ui/src/composables/server-console.ts
@@ -0,0 +1,120 @@
+import { createGlobalState } from '@vueuse/core'
+import { type Ref, shallowRef } from 'vue'
+
+const maxLines = 10000
+const batchTimeout = 300
+const initialBatchSize = 256
+
+export const useModrinthServersConsole = createGlobalState(() => {
+	const output: Ref<string[]> = shallowRef<string[]>([])
+	const searchQuery: Ref<string> = shallowRef('')
+	const filteredOutput: Ref<string[]> = shallowRef([])
+	let searchRegex: RegExp | null = null
+
+	let lineBuffer: string[] = []
+	let batchTimer: NodeJS.Timeout | null = null
+	let isProcessingInitialBatch = false
+
+	let refilterTimer: NodeJS.Timeout | null = null
+	const refilterTimeout = 100
+
+	const updateFilter = () => {
+		if (!searchQuery.value) {
+			filteredOutput.value = []
+			return
+		}
+
+		if (!searchRegex) {
+			searchRegex = new RegExp(searchQuery.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i')
+		}
+
+		filteredOutput.value = output.value.filter((line) => searchRegex?.test(line) ?? false)
+	}
+
+	const scheduleRefilter = () => {
+		if (refilterTimer) clearTimeout(refilterTimer)
+		refilterTimer = setTimeout(updateFilter, refilterTimeout)
+	}
+
+	const flushBuffer = () => {
+		if (lineBuffer.length === 0) return
+
+		const processedLines = lineBuffer.flatMap((line) => line.split('\n').filter(Boolean))
+
+		if (isProcessingInitialBatch && processedLines.length >= initialBatchSize) {
+			isProcessingInitialBatch = false
+			output.value = processedLines.slice(-maxLines)
+		} else {
+			const newOutput = [...output.value, ...processedLines]
+			output.value = newOutput.slice(-maxLines)
+		}
+
+		lineBuffer = []
+		batchTimer = null
+
+		if (searchQuery.value) {
+			scheduleRefilter()
+		}
+	}
+
+	const addLine = (line: string): void => {
+		lineBuffer.push(line)
+
+		if (!batchTimer) {
+			batchTimer = setTimeout(flushBuffer, batchTimeout)
+		}
+	}
+
+	const addLines = (lines: string[]): void => {
+		if (output.value.length === 0 && lines.length >= initialBatchSize) {
+			isProcessingInitialBatch = true
+			lineBuffer = lines
+			flushBuffer()
+			return
+		}
+
+		lineBuffer.push(...lines)
+
+		if (!batchTimer) {
+			batchTimer = setTimeout(flushBuffer, batchTimeout)
+		}
+	}
+
+	const setSearchQuery = (query: string): void => {
+		searchQuery.value = query
+		searchRegex = null
+		updateFilter()
+	}
+
+	const clear = (): void => {
+		output.value = []
+		filteredOutput.value = []
+		searchQuery.value = ''
+		lineBuffer = []
+		isProcessingInitialBatch = false
+		if (batchTimer) {
+			clearTimeout(batchTimer)
+			batchTimer = null
+		}
+		if (refilterTimer) {
+			clearTimeout(refilterTimer)
+			refilterTimer = null
+		}
+		searchRegex = null
+	}
+
+	const findLineIndex = (line: string): number => {
+		return output.value.findIndex((l) => l === line)
+	}
+
+	return {
+		output,
+		searchQuery,
+		filteredOutput,
+		addLine,
+		addLines,
+		setSearchQuery,
+		clear,
+		findLineIndex,
+	}
+})
diff --git a/packages/ui/src/composables/server-manage-core-runtime.ts b/packages/ui/src/composables/server-manage-core-runtime.ts
new file mode 100644
index 0000000000..46a0545030
--- /dev/null
+++ b/packages/ui/src/composables/server-manage-core-runtime.ts
@@ -0,0 +1,391 @@
+import { type Archon, clearNodeAuthState, setNodeAuthState } from '@modrinth/api-client'
+import type { Stats } from '@modrinth/utils'
+import type { ComputedRef, Ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
+
+import { injectModrinthClient, provideModrinthServerContext } from '../providers'
+import type { BusyReason } from '../providers/server-context'
+import { defineMessage } from './i18n'
+import { useModrinthServersConsole } from './server-console'
+
+type ReadableRef<T> = Ref<T> | ComputedRef<T>
+type SocketUnsubscriber = () => void
+
+type ConnectSocketOptions = {
+	force?: boolean
+	extraSubscriptions?: (targetServerId: string) => SocketUnsubscriber[]
+}
+
+type UseServerManageCoreRuntimeOptions = {
+	serverId: ReadableRef<string>
+	worldId: ReadableRef<string | null>
+	server: ReadableRef<Archon.Servers.v0.Server | null | undefined>
+	isSyncingContent: ReadableRef<boolean>
+	markBackupCancelled?: (backupId: string) => void
+	includeBackupBusyReasons?: boolean
+	setDisconnectedOnAuthIncorrect?: boolean
+	syncUptimeFromState?: boolean
+	incrementUptimeLocally?: boolean
+	eventGuard?: () => boolean
+	onStateEvent?: (data: Archon.Websocket.v0.WSStateEvent) => void
+}
+
+const initialConsoleMessage = [
+	'   __________________________________________________',
+	' /  Welcome to your \x1B[32mModrinth Server\x1B[37m!                  \\',
+	'|   Press the green start button to start your server! |',
+	' \\____________________________________________________/',
+	'\x1B[32m     _    _ \x1B[37m',
+	'\x1B[32m    (o)--(o)      \x1B[37m',
+	'\x1B[32m   /.______.\\\x1B[37m',
+	'\x1B[32m   \\________/     \x1B[37m',
+	'\x1B[32m  ./        \\.    \x1B[37m',
+	'\x1B[32m ( .        , )\x1B[37m',
+	'\x1B[32m  \\ \\_\\\\ //_/ /\x1B[37m',
+	'\x1B[32m   ~~  ~~  ~~\x1B[37m',
+]
+
+const createInitialStats = (): Stats => ({
+	current: {
+		cpu_percent: 0,
+		ram_usage_bytes: 0,
+		ram_total_bytes: 1,
+		storage_usage_bytes: 0,
+		storage_total_bytes: 0,
+	},
+	past: {
+		cpu_percent: 0,
+		ram_usage_bytes: 0,
+		ram_total_bytes: 1,
+		storage_usage_bytes: 0,
+		storage_total_bytes: 0,
+	},
+	graph: {
+		cpu: [],
+		ram: [],
+	},
+})
+
+const appendGraphData = (dataArray: number[], newValue: number): number[] => {
+	const updated = [...dataArray, newValue]
+	if (updated.length > 10) updated.shift()
+	return updated
+}
+
+const mapPowerStateFromStateEvent = (
+	data: Archon.Websocket.v0.WSStateEvent,
+): Archon.Websocket.v0.PowerState => {
+	const powerMap: Record<Archon.Websocket.v0.FlattenedPowerState, Archon.Websocket.v0.PowerState> =
+		{
+			not_ready: 'stopped',
+			starting: 'starting',
+			running: 'running',
+			stopping: 'stopping',
+			idle:
+				data.was_oom || (data.exit_code != null && data.exit_code !== 0) ? 'crashed' : 'stopped',
+		}
+	return powerMap[data.power_variant]
+}
+
+export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOptions) {
+	const client = injectModrinthClient()
+	const modrinthServersConsole = useModrinthServersConsole()
+
+	const shouldProcessEvent = () => (options.eventGuard ? options.eventGuard() : true)
+
+	const isConnected = ref(false)
+	const isWsAuthIncorrect = ref(false)
+	const serverPowerState = ref<Archon.Websocket.v0.PowerState>('stopped')
+	const powerStateDetails = ref<{ oom_killed?: boolean; exit_code?: number }>()
+	const isServerRunning = computed(() => serverPowerState.value === 'running')
+	const stats = ref<Stats>(createInitialStats())
+	const uptimeSeconds = ref(0)
+	const backupsState = reactive(new Map())
+	const fsAuth = ref<{ url: string; token: string } | null>(null)
+	const fsOps = ref<Archon.Websocket.v0.FilesystemOperation[]>([])
+	const fsQueuedOps = ref<Archon.Websocket.v0.QueuedFilesystemOp[]>([])
+	const connectedSocketServerId = ref<string | null>(null)
+	const socketUnsubscribers = ref<SocketUnsubscriber[]>([])
+	const cpuData = ref<number[]>([])
+	const ramData = ref<number[]>([])
+
+	let uptimeIntervalId: ReturnType<typeof setInterval> | null = null
+
+	const markBackupCancelled =
+		options.markBackupCancelled ??
+		((backupId: string) => {
+			backupsState.delete(backupId)
+		})
+
+	const busyReasons = computed<BusyReason[]>(() => {
+		const reasons: BusyReason[] = []
+		if (options.server.value?.status === 'installing') {
+			reasons.push({
+				reason: defineMessage({
+					id: 'servers.busy.installing',
+					defaultMessage: 'Server is installing',
+				}),
+			})
+		}
+		if (options.isSyncingContent.value) {
+			reasons.push({
+				reason: defineMessage({
+					id: 'servers.busy.syncing-content',
+					defaultMessage: 'Content sync in progress',
+				}),
+			})
+		}
+		if (options.includeBackupBusyReasons) {
+			for (const entry of backupsState.values()) {
+				if (entry.create?.state === 'ongoing') {
+					reasons.push({
+						reason: defineMessage({
+							id: 'servers.busy.backup-creating',
+							defaultMessage: 'Backup creation in progress',
+						}),
+					})
+					break
+				}
+				if (entry.restore?.state === 'ongoing') {
+					reasons.push({
+						reason: defineMessage({
+							id: 'servers.busy.backup-restoring',
+							defaultMessage: 'Backup restore in progress',
+						}),
+					})
+					break
+				}
+			}
+		}
+		return reasons
+	})
+
+	const stopUptimeTicker = () => {
+		if (uptimeIntervalId) {
+			clearInterval(uptimeIntervalId)
+			uptimeIntervalId = null
+		}
+	}
+
+	const startUptimeTicker = () => {
+		if (!options.incrementUptimeLocally || uptimeIntervalId) return
+		uptimeIntervalId = setInterval(() => {
+			uptimeSeconds.value += 1
+		}, 1000)
+	}
+
+	const updateStats = (currentStats: Stats['current']) => {
+		if (!shouldProcessEvent()) return
+		if (!isConnected.value) isConnected.value = true
+		stats.value = {
+			current: currentStats,
+			past: { ...stats.value.current },
+			graph: {
+				cpu: appendGraphData(cpuData.value, currentStats.cpu_percent),
+				ram: appendGraphData(
+					ramData.value,
+					Math.floor((currentStats.ram_usage_bytes / currentStats.ram_total_bytes) * 100),
+				),
+			},
+		}
+	}
+
+	const updatePowerState = (
+		state: Archon.Websocket.v0.PowerState,
+		details?: { oom_killed?: boolean; exit_code?: number },
+	) => {
+		if (!shouldProcessEvent()) return
+		serverPowerState.value = state
+		powerStateDetails.value = state === 'crashed' ? details : undefined
+		if (state === 'stopped' || state === 'crashed') {
+			stopUptimeTicker()
+			uptimeSeconds.value = 0
+		}
+	}
+
+	const handleLog = (data: Archon.Websocket.v0.WSLogEvent) => {
+		if (!shouldProcessEvent()) return
+		const log = data.message.split('\n').filter((line) => line.trim())
+		modrinthServersConsole.addLines(log)
+	}
+
+	const handleStats = (data: Archon.Websocket.v0.WSStatsEvent) => {
+		updateStats({
+			cpu_percent: data.cpu_percent,
+			ram_usage_bytes: data.ram_usage_bytes,
+			ram_total_bytes: data.ram_total_bytes,
+			storage_usage_bytes: data.storage_usage_bytes,
+			storage_total_bytes: data.storage_total_bytes,
+		})
+	}
+
+	const handlePowerState = (data: Archon.Websocket.v0.WSPowerStateEvent) => {
+		if (data.state === 'crashed') {
+			updatePowerState(data.state, {
+				oom_killed: data.oom_killed,
+				exit_code: data.exit_code,
+			})
+		} else {
+			updatePowerState(data.state)
+		}
+	}
+
+	const handleState = (data: Archon.Websocket.v0.WSStateEvent) => {
+		if (!shouldProcessEvent()) return
+		options.onStateEvent?.(data)
+		updatePowerState(mapPowerStateFromStateEvent(data), {
+			exit_code: data.exit_code ?? undefined,
+			oom_killed: data.was_oom,
+		})
+
+		if (options.syncUptimeFromState && data.uptime > 0) {
+			stopUptimeTicker()
+			uptimeSeconds.value = data.uptime
+			startUptimeTicker()
+		}
+	}
+
+	const handleUptime = (data: Archon.Websocket.v0.WSUptimeEvent) => {
+		if (!shouldProcessEvent()) return
+		stopUptimeTicker()
+		uptimeSeconds.value = data.uptime
+		startUptimeTicker()
+	}
+
+	const handleAuthIncorrect = () => {
+		if (!shouldProcessEvent()) return
+		isWsAuthIncorrect.value = true
+		if (options.setDisconnectedOnAuthIncorrect) {
+			isConnected.value = false
+		}
+	}
+
+	const handleAuthOk = () => {
+		if (!shouldProcessEvent()) return
+		isWsAuthIncorrect.value = false
+		isConnected.value = true
+	}
+
+	const clearSocketListeners = () => {
+		for (const unsub of socketUnsubscribers.value) unsub()
+		socketUnsubscribers.value = []
+	}
+
+	const disconnectSocket = (targetServerId?: string) => {
+		clearSocketListeners()
+
+		if (targetServerId) {
+			client.archon.sockets.disconnect(targetServerId)
+		}
+
+		stopUptimeTicker()
+		connectedSocketServerId.value = null
+		isConnected.value = false
+		isWsAuthIncorrect.value = false
+		serverPowerState.value = 'stopped'
+		powerStateDetails.value = undefined
+		uptimeSeconds.value = 0
+	}
+
+	const connectSocket = async (
+		targetServerId: string,
+		connectOptions: ConnectSocketOptions = {},
+	): Promise<boolean> => {
+		if (
+			connectedSocketServerId.value === targetServerId &&
+			(isConnected.value || isWsAuthIncorrect.value)
+		) {
+			return true
+		}
+
+		disconnectSocket(connectedSocketServerId.value ?? undefined)
+
+		try {
+			const safeConnectOptions = connectOptions.force ? { force: true } : undefined
+			await client.archon.sockets.safeConnect(targetServerId, safeConnectOptions)
+			connectedSocketServerId.value = targetServerId
+			isConnected.value = true
+			isWsAuthIncorrect.value = false
+
+			modrinthServersConsole.clear()
+			for (const line of initialConsoleMessage) {
+				modrinthServersConsole.addLine(line)
+			}
+
+			const baseSubscriptions: SocketUnsubscriber[] = [
+				client.archon.sockets.on(targetServerId, 'log', handleLog),
+				client.archon.sockets.on(targetServerId, 'stats', handleStats),
+				client.archon.sockets.on(targetServerId, 'state', handleState),
+				client.archon.sockets.on(targetServerId, 'power-state', handlePowerState),
+				client.archon.sockets.on(targetServerId, 'uptime', handleUptime),
+				client.archon.sockets.on(targetServerId, 'auth-incorrect', handleAuthIncorrect),
+				client.archon.sockets.on(targetServerId, 'auth-ok', handleAuthOk),
+			]
+			const extraSubscriptions = connectOptions.extraSubscriptions?.(targetServerId) ?? []
+			socketUnsubscribers.value = [...baseSubscriptions, ...extraSubscriptions]
+			return true
+		} catch (error) {
+			console.error('[hosting/manage] Failed to connect server socket:', error)
+			isConnected.value = false
+			return false
+		}
+	}
+
+	const refreshFsAuth = async () => {
+		if (!options.serverId.value) {
+			fsAuth.value = null
+			return
+		}
+		fsAuth.value = await client.archon.servers_v0.getFilesystemAuth(options.serverId.value)
+	}
+
+	provideModrinthServerContext({
+		get serverId() {
+			return options.serverId.value
+		},
+		worldId: options.worldId as Ref<string | null>,
+		server: options.server as Ref<Archon.Servers.v0.Server>,
+		isConnected,
+		isWsAuthIncorrect,
+		powerState: serverPowerState,
+		powerStateDetails,
+		isServerRunning,
+		stats,
+		uptimeSeconds,
+		backupsState,
+		markBackupCancelled,
+		isSyncingContent: options.isSyncingContent as Ref<boolean>,
+		busyReasons,
+		fsAuth,
+		fsOps,
+		fsQueuedOps,
+		refreshFsAuth,
+	})
+
+	setNodeAuthState(() => fsAuth.value, refreshFsAuth)
+
+	const cleanupCoreRuntime = (targetServerId?: string) => {
+		disconnectSocket(targetServerId ?? connectedSocketServerId.value ?? undefined)
+		clearNodeAuthState()
+	}
+
+	return {
+		backupsState,
+		busyReasons,
+		cleanupCoreRuntime,
+		connectSocket,
+		connectedSocketServerId,
+		disconnectSocket,
+		fsAuth,
+		fsOps,
+		fsQueuedOps,
+		isConnected,
+		isServerRunning,
+		isWsAuthIncorrect,
+		powerStateDetails,
+		refreshFsAuth,
+		serverPowerState,
+		stats,
+		uptimeSeconds,
+	}
+}
diff --git a/apps/frontend/src/composables/servers/use-server-image.ts b/packages/ui/src/composables/use-server-image.ts
similarity index 75%
rename from apps/frontend/src/composables/servers/use-server-image.ts
rename to packages/ui/src/composables/use-server-image.ts
index c613a79ae5..6e87e6b5e2 100644
--- a/apps/frontend/src/composables/servers/use-server-image.ts
+++ b/packages/ui/src/composables/use-server-image.ts
@@ -1,7 +1,10 @@
 import type { Archon } from '@modrinth/api-client'
-import { injectModrinthClient } from '@modrinth/ui'
 import { type ComputedRef, ref, watch } from 'vue'
 
+import { injectModrinthClient } from '#ui/providers'
+
+const imageCache = new Map<string, string>()
+
 // TODO: Remove and use V1 when available
 export function useServerImage(
 	serverId: string,
@@ -10,23 +13,23 @@ export function useServerImage(
 	const client = injectModrinthClient()
 	const image = ref<string | undefined>()
 
-	const sharedImage = useState<string | undefined>(`server-icon-${serverId}`)
-	if (sharedImage.value) {
-		image.value = sharedImage.value
+	const cached = imageCache.get(serverId)
+	if (cached) {
+		image.value = cached
 	}
 
 	async function loadImage() {
-		if (sharedImage.value) {
-			image.value = sharedImage.value
+		if (typeof window === 'undefined') return
+
+		if (imageCache.has(serverId)) {
+			image.value = imageCache.get(serverId)
 			return
 		}
 
-		if (import.meta.server) return
-
-		const cached = localStorage.getItem(`server-icon-${serverId}`)
-		if (cached) {
-			sharedImage.value = cached
-			image.value = cached
+		const localCached = localStorage.getItem(`server-icon-${serverId}`)
+		if (localCached) {
+			imageCache.set(serverId, localCached)
+			image.value = localCached
 			return
 		}
 
@@ -34,9 +37,7 @@ export function useServerImage(
 		const upstreamVal = upstream.value
 		if (upstreamVal?.project_id) {
 			try {
-				const project = await $fetch<{ icon_url?: string }>(
-					`https://api.modrinth.com/v2/project/${upstreamVal.project_id}`,
-				)
+				const project = await client.labrinth.projects_v2.get(upstreamVal.project_id)
 				projectIconUrl = project.icon_url
 			} catch {
 				// project fetch failed, continue without icon url
@@ -48,18 +49,19 @@ export function useServerImage(
 
 			if (fileData instanceof Blob) {
 				const dataURL = await resizeImage(fileData, 512)
-				sharedImage.value = dataURL
+				imageCache.set(serverId, dataURL)
 				localStorage.setItem(`server-icon-${serverId}`, dataURL)
 				image.value = dataURL
 				return
 			}
-		} catch (error: any) {
-			if (error?.statusCode >= 500) {
+		} catch (error: unknown) {
+			const statusCode = (error as { statusCode?: number })?.statusCode
+			if (statusCode != null && statusCode >= 500) {
 				image.value = undefined
 				return
 			}
 
-			if (error?.statusCode === 404 && projectIconUrl) {
+			if (statusCode === 404 && projectIconUrl) {
 				try {
 					const response = await fetch(projectIconUrl)
 					if (!response.ok) throw new Error('Failed to fetch icon')
@@ -90,7 +92,7 @@ export function useServerImage(
 								}
 							}, 'image/png')
 							const result = canvas.toDataURL('image/png')
-							sharedImage.value = result
+							imageCache.set(serverId, result)
 							localStorage.setItem(`server-icon-${serverId}`, result)
 							resolve(result)
 							URL.revokeObjectURL(img.src)
@@ -99,8 +101,8 @@ export function useServerImage(
 					})
 					image.value = dataURL
 					return
-				} catch (externalError: any) {
-					console.debug('Could not process external icon:', externalError.message)
+				} catch (externalError: unknown) {
+					console.debug('Could not process external icon:', (externalError as Error).message)
 				}
 			}
 		}
diff --git a/apps/frontend/src/composables/servers/use-server-project.ts b/packages/ui/src/composables/use-server-project.ts
similarity index 70%
rename from apps/frontend/src/composables/servers/use-server-project.ts
rename to packages/ui/src/composables/use-server-project.ts
index eeb22a8b52..524bf45265 100644
--- a/apps/frontend/src/composables/servers/use-server-project.ts
+++ b/packages/ui/src/composables/use-server-project.ts
@@ -1,17 +1,18 @@
 import type { Archon } from '@modrinth/api-client'
-import type { Project } from '@modrinth/utils'
 import { useQuery } from '@tanstack/vue-query'
-import { $fetch } from 'ofetch'
 import { computed, type ComputedRef } from 'vue'
 
+import { injectModrinthClient } from '#ui/providers'
+
 // TODO: Remove and use v1
 export function useServerProject(
 	upstream: ComputedRef<Archon.Servers.v0.Server['upstream'] | null>,
 ) {
+	const client = injectModrinthClient()
+
 	return useQuery({
 		queryKey: computed(() => ['servers', 'project', upstream.value?.project_id ?? null]),
-		queryFn: () =>
-			$fetch<Project>(`https://api.modrinth.com/v2/project/${upstream.value!.project_id}`),
+		queryFn: () => client.labrinth.projects_v2.get(upstream.value!.project_id!),
 		enabled: computed(() => !!upstream.value?.project_id),
 	})
 }
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/installation.vue b/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
index ea8ac8b096..c235d73a3e 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
@@ -29,11 +29,15 @@
 			</template>
 
 			<template #extra-modals>
-				<ServerSetupModal
-					ref="setupModal"
-					@reinstall="onReinstall"
-					@browse-modpacks="onBrowseModpacks"
-				/>
+				<Teleport to="body">
+					<div class="relative z-[100]">
+						<ServerSetupModal
+							ref="setupModal"
+							@reinstall="onReinstall"
+							@browse-modpacks="onBrowseModpacks"
+						/>
+					</div>
+				</Teleport>
 			</template>
 		</InstallationSettingsLayout>
 
@@ -167,7 +171,7 @@ const messages = defineMessages({
 })
 
 const emit = defineEmits<{
-	reinstall: [any?]
+	reinstall: [unknown?]
 	'reinstall-failed': []
 }>()
 
@@ -766,7 +770,7 @@ watch(
 	},
 )
 
-function onReinstall(event?: any) {
+function onReinstall(event?: unknown) {
 	installationSettingsLayout.value?.cancelEditing()
 	emit('reinstall', event)
 }
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
index 1e77179214..bf0077498d 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="relative h-full w-full select-none">
+	<div class="relative h-screen w-full select-none max-h-[min(70vh,750px)]">
 		<div v-if="propsData" class="flex h-full w-full flex-col justify-between gap-4">
 			<Admonition
 				v-if="hasNoProperties"
@@ -346,6 +346,7 @@ function flattenProperties(data: Archon.Content.v1.PropertiesFields): Record<str
 
 const liveProperties = ref<Record<string, string>>({})
 const originalProperties = ref<Record<string, string>>({})
+let previousSpawnProtection = '16'
 
 function syncFormFromData() {
 	if (!propsData.value) return
@@ -380,8 +381,6 @@ watch(powerState, () => {
 	queryClient.invalidateQueries({ queryKey: queryKey.value })
 })
 
-let previousSpawnProtection = '16'
-
 const combinedGamemode = computed<CombinedGamemode>({
 	get() {
 		if (liveProperties.value.hardcore === 'true') return 'hardcore'
diff --git a/packages/ui/src/layouts/shared/server-settings/tabs.ts b/packages/ui/src/layouts/shared/server-settings/tabs.ts
index 82427d4288..7dcb580245 100644
--- a/packages/ui/src/layouts/shared/server-settings/tabs.ts
+++ b/packages/ui/src/layouts/shared/server-settings/tabs.ts
@@ -31,7 +31,7 @@ export interface ServerSettingsTabDefinition {
 	id: ServerSettingsTabId
 	label: string
 	icon: Component
-	href: (ctx: ServerSettingsTabContext) => string
+	href?: (ctx: ServerSettingsTabContext) => string
 	external?: boolean
 	shown?: (ctx: ServerSettingsTabContext) => boolean
 }
@@ -41,32 +41,27 @@ export const serverSettingsTabDefinitions: ServerSettingsTabDefinition[] = [
 		id: 'general',
 		label: 'General',
 		icon: SettingsIcon,
-		href: ({ serverId }) => `/hosting/manage/${serverId}/options`,
 	},
 	{
 		id: 'installation',
 		label: 'Installation',
 		icon: WrenchIcon,
-		href: ({ serverId }) => `/hosting/manage/${serverId}/options/loader`,
 	},
 	{
 		id: 'network',
 		label: 'Network',
 		icon: VersionIcon,
-		href: ({ serverId }) => `/hosting/manage/${serverId}/options/network`,
 	},
 	{
 		id: 'properties',
 		label: 'Properties',
 		icon: ListIcon,
-		href: ({ serverId }) => `/hosting/manage/${serverId}/options/properties`,
 		shown: ({ serverStatus }) => serverStatus !== 'installing',
 	},
 	{
 		id: 'advanced',
 		label: 'Advanced',
 		icon: TextQuoteIcon,
-		href: ({ serverId }) => `/hosting/manage/${serverId}/options/advanced`,
 	},
 	{
 		id: 'billing',
@@ -85,14 +80,3 @@ export const serverSettingsTabDefinitions: ServerSettingsTabDefinition[] = [
 		shown: ({ isAdmin }) => isAdmin,
 	},
 ]
-
-export function getServerSettingsNavLinks(ctx: ServerSettingsTabContext) {
-	return serverSettingsTabDefinitions.map((tab) => ({
-		id: tab.id,
-		icon: tab.icon,
-		label: tab.label,
-		href: tab.href(ctx),
-		external: tab.external,
-		shown: tab.shown ? tab.shown(ctx) : true,
-	}))
-}
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/onboarding.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/onboarding.vue
index 1845d070b6..d797fbd119 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/onboarding.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/onboarding.vue
@@ -95,6 +95,19 @@ const route = useRoute()
 const router = useRouter()
 const queryClient = useQueryClient()
 
+const props = withDefaults(
+	defineProps<{
+		browseModpacks?: (args: {
+			serverId: string
+			worldId: string | null
+			from: 'onboarding'
+		}) => void | Promise<void>
+	}>(),
+	{
+		browseModpacks: undefined,
+	},
+)
+
 const modalRef = ref<InstanceType<typeof CreationFlowModal> | null>(null)
 
 const uploading = ref(false)
@@ -109,6 +122,15 @@ const openModal = () => modalRef.value?.show()
 onBeforeUnmount(() => modalRef.value?.hide())
 
 function onBrowseModpacks() {
+	if (props.browseModpacks) {
+		props.browseModpacks({
+			serverId,
+			worldId: worldId.value,
+			from: 'onboarding',
+		})
+		return
+	}
+
 	router.push({
 		path: '/discover/modpacks',
 		query: { sid: serverId, from: 'onboarding', wid: worldId.value },
diff --git a/apps/frontend/src/components/ui/servers/ServerStats.vue b/packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue
similarity index 78%
rename from apps/frontend/src/components/ui/servers/ServerStats.vue
rename to packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue
index fdd0899679..b309775748 100644
--- a/apps/frontend/src/components/ui/servers/ServerStats.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue
@@ -2,19 +2,19 @@
 	<div
 		data-pyro-server-stats
 		style="font-variant-numeric: tabular-nums"
-		class="flex select-none flex-col items-center gap-6 md:flex-row"
+		class="flex select-none flex-col items-center gap-4 md:flex-row"
 		:class="{ 'pointer-events-none': loading }"
 		:aria-hidden="loading"
 	>
 		<component
-			:is="metric.link ? NuxtLink : 'div'"
+			:is="metric.link ? RouterLink : 'div'"
 			v-for="(metric, index) in metrics"
 			:key="index"
 			:to="metric.link && !loading ? metric.link : undefined"
 			class="relative isolate min-h-[145px] w-full overflow-hidden rounded-[20px] bg-surface-3 p-5"
 			:class="
 				metric.link && !loading
-					? 'cursor-pointer transition-transform duration-100 hover:scale-105 active:scale-100'
+					? 'cursor-pointer transition-transform duration-100 hover:brightness-125 active:scale-95'
 					: ''
 			"
 		>
@@ -45,17 +45,16 @@
 			</div>
 
 			<div v-if="metric.showGraph" class="chart-space absolute bottom-0 left-0 right-0">
-				<ClientOnly>
-					<VueApexCharts
-						v-if="!loading"
-						type="area"
-						height="142"
-						:options="getChartOptions(metric.warning, index)"
-						:series="[{ name: metric.title, data: metric.data }]"
-						class="chart"
-						:class="chartsReady.has(index) ? 'opacity-100' : 'opacity-0'"
-					/>
-				</ClientOnly>
+				<component
+					:is="apexChartComponent"
+					v-if="!loading && apexChartComponent"
+					type="area"
+					height="142"
+					:options="getChartOptions(metric.warning, index)"
+					:series="[{ name: metric.title, data: metric.data }]"
+					class="chart"
+					:class="chartsReady.has(index) ? 'opacity-100' : 'opacity-0'"
+				/>
 			</div>
 		</component>
 	</div>
@@ -65,34 +64,49 @@
 import { CpuIcon, DatabaseIcon, FolderOpenIcon, IssuesIcon } from '@modrinth/assets'
 import type { Stats } from '@modrinth/utils'
 import { useStorage } from '@vueuse/core'
-import { computed, ref, shallowRef } from 'vue'
+import { type Component, computed, onMounted, ref, shallowRef, watch } from 'vue'
+import { RouterLink } from 'vue-router'
 
-import { NuxtLink } from '#components'
+import { injectModrinthServerContext } from '#ui/providers'
 
-const flags = useFeatureFlags()
-const route = useNativeRoute()
-const serverId = route.params.id
-const VueApexCharts = defineAsyncComponent(() => import('vue3-apexcharts'))
+const { serverId } = injectModrinthServerContext()
 
-const chartsReady = ref(new Set<number>())
+const props = withDefaults(
+	defineProps<{
+		data?: Stats
+		loading?: boolean
+		showMemoryAsBytes?: boolean
+	}>(),
+	{
+		data: undefined,
+		loading: false,
+		showMemoryAsBytes: false,
+	},
+)
 
-const userPreferences = useStorage(`pyro-server-${serverId}-preferences`, {
+const apexChartComponent = shallowRef<Component | null>(null)
+const chartsReady = ref(new Set<number>())
+const storageKey = computed(() => `pyro-server-${serverId || 'unknown'}-preferences`)
+const userPreferences = useStorage(storageKey, {
 	ramAsNumber: false,
 })
 
-const props = withDefaults(defineProps<{ data?: Stats; loading?: boolean }>(), {
-	loading: false,
-})
-
 const stats = shallowRef(
 	props.data?.current || {
 		cpu_percent: 0,
 		ram_usage_bytes: 0,
-		ram_total_bytes: 1, // Avoid division by zero
+		ram_total_bytes: 1,
 		storage_usage_bytes: 0,
 	},
 )
 
+const cpuData = ref<number[]>(Array(20).fill(0))
+const ramData = ref<number[]>(Array(20).fill(0))
+
+onMounted(async () => {
+	apexChartComponent.value = (await import('vue3-apexcharts')).default
+})
+
 const onChartReady = (index: number) => {
 	chartsReady.value.add(index)
 }
@@ -108,9 +122,6 @@ const formatBytes = (bytes: number) => {
 	return `${Math.round(value * 10) / 10} ${units[unit]}`
 }
 
-const cpuData = ref<number[]>(Array(20).fill(0))
-const ramData = ref<number[]>(Array(20).fill(0))
-
 const updateGraphData = (arr: number[], newValue: number) => {
 	arr.push(newValue)
 	arr.shift()
@@ -124,7 +135,7 @@ const metrics = computed(() => {
 		data: [] as number[],
 		showGraph: false,
 		warning: null,
-		link: `/hosting/manage/${serverId}/files`,
+		link: `/hosting/manage/${encodeURIComponent(serverId)}/files`,
 	}
 
 	if (props.loading) {
@@ -173,7 +184,7 @@ const metrics = computed(() => {
 		{
 			title: 'Memory',
 			value:
-				userPreferences.value.ramAsNumber || flags.value.developerMode
+				props.showMemoryAsBytes || userPreferences.value.ramAsNumber
 					? formatBytes(stats.value.ram_usage_bytes)
 					: `${ramPercent.toFixed(2)}%`,
 			icon: DatabaseIcon,
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/content.vue b/packages/ui/src/layouts/wrapped/hosting/manage/content.vue
index 30776a944a..47e9fd9198 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/content.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/content.vue
@@ -11,6 +11,7 @@ import {
 	injectModrinthClient,
 	injectModrinthServerContext,
 	injectNotificationManager,
+	injectServerSettingsModal,
 } from '#ui/providers'
 import { commonMessages } from '#ui/utils/common-messages'
 
@@ -95,6 +96,7 @@ const leaveMessages = defineMessages({
 const client = injectModrinthClient()
 const { server, worldId, busyReasons, isSyncingContent } = injectModrinthServerContext()
 const { addNotification } = injectNotificationManager()
+const { openServerSettings, browseServerContent } = injectServerSettingsModal()
 const route = useRoute()
 const router = useRouter()
 const queryClient = useQueryClient()
@@ -409,6 +411,16 @@ const currentGameVersion = computed(() => contentQuery.data.value?.game_version
 const currentLoader = computed(() => contentQuery.data.value?.modloader ?? '')
 
 function handleBrowseContent() {
+	const contentType = type.value
+	if (browseServerContent && ['mod', 'plugin', 'datapack'].includes(contentType)) {
+		browseServerContent({
+			serverId,
+			worldId: worldId.value,
+			type: contentType as 'mod' | 'plugin' | 'datapack',
+		})
+		return
+	}
+
 	router.push({
 		path: `/discover/${type.value}s`,
 		query: { sid: serverId, wid: worldId.value },
@@ -894,7 +906,7 @@ provideContentManager({
 	updateModpack: handleModpackUpdate,
 	viewModpackContent: handleViewModpackContent,
 	unlinkModpack: handleModpackUnlink,
-	openSettings: () => router.push(`/hosting/manage/${serverId}/options/loader`),
+	openSettings: () => openServerSettings({ tabId: 'installation' }),
 	switchVersion: handleSwitchVersion,
 	getOverflowOptions,
 	mapToTableItem: (item) => {
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
index 0752d7df29..993fa43568 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
@@ -51,9 +51,7 @@
 						<li>
 							<IntlFormatted :message-id="messages.errorQueueNotice">
 								<template #warning="{ children }">
-									<span class="font-medium text-contrast"
-										><component :is="() => children"
-									/></span>
+									<span class="font-medium text-contrast"><component :is="() => children" /></span>
 								</template>
 							</IntlFormatted>
 						</li>
@@ -71,9 +69,9 @@
 					</ul>
 				</div>
 				<ButtonStyled size="large" type="standard" color="brand">
-					<AutoLink class="mt-6 !w-full" to="https://support.modrinth.com"
-						>{{ formatMessage(messages.contactSupportButton) }}</AutoLink
-					>
+					<AutoLink class="mt-6 !w-full" to="https://support.modrinth.com">{{
+						formatMessage(messages.contactSupportButton)
+					}}</AutoLink>
 				</ButtonStyled>
 				<ButtonStyled size="large" @click="() => router.go(0)">
 					<button class="mt-3 !w-full">{{ formatMessage(messages.reloadButton) }}</button>
@@ -116,7 +114,9 @@
 				<div
 					class="relative flex h-fit w-full flex-col mb-4 items-center justify-between md:flex-row"
 				>
-					<h1 class="w-full text-2xl m-0 font-extrabold text-contrast">{{ formatMessage(messages.serversTitle) }}</h1>
+					<h1 class="w-full text-2xl m-0 font-extrabold text-contrast">
+						{{ formatMessage(messages.serversTitle) }}
+					</h1>
 					<div class="flex w-full flex-row items-center justify-end gap-2 md:mb-0">
 						<StyledInput
 							id="search"
@@ -125,7 +125,9 @@
 							type="search"
 							name="search"
 							autocomplete="off"
-							:placeholder="formatMessage(messages.searchPlaceholder, { count: filteredData.length })"
+							:placeholder="
+								formatMessage(messages.searchPlaceholder, { count: filteredData.length })
+							"
 							wrapper-class="w-full md:w-72"
 						/>
 						<ButtonStyled type="standard" color="brand">
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue b/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue
new file mode 100644
index 0000000000..2437001bc1
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue
@@ -0,0 +1,219 @@
+<template>
+	<div class="relative flex select-none flex-col gap-6" data-pyro-server-manager-root>
+		<Admonition v-if="backupBusyReason" type="warning" :header="backupBusyReason">
+			Your server is still accessible during this time.
+		</Admonition>
+		<Admonition
+			v-if="inspectingError && isConnected && !isWsAuthIncorrect"
+			data-pyro-servers-inspecting-error
+			type="critical"
+			:header="`${serverData?.name} shut down unexpectedly.`"
+			dismissible
+			@dismiss="clearError"
+		>
+			<template v-if="inspectingError.analysis.problems.length">
+				<p class="m-0 text-sm opacity-80">
+					We automatically analyzed the logs and found the following:
+				</p>
+				<div class="mt-2 flex flex-col gap-2">
+					<div
+						v-for="problem in inspectingError.analysis.problems"
+						:key="problem.message"
+						class="bg-raised-bg/30 rounded-xl px-3 py-2"
+					>
+						<p class="m-0 text-sm font-semibold">{{ problem.message }}</p>
+						<ul v-if="problem.solutions.length" class="m-0 ml-4 mt-1.5 flex flex-col gap-1">
+							<li
+								v-for="solution in problem.solutions"
+								:key="solution.message"
+								class="text-sm opacity-80"
+							>
+								{{ solution.message }}
+							</li>
+						</ul>
+					</div>
+				</div>
+			</template>
+			<template v-else-if="serverPowerState === 'crashed'">
+				<template v-if="powerStateDetails?.oom_killed">
+					The server stopped because it ran out of memory. There may be a memory leak caused by a
+					mod or plugin, or you may need to upgrade your Modrinth Server.
+				</template>
+				<template v-else-if="powerStateDetails?.exit_code !== undefined">
+					Your server exited with code {{ powerStateDetails.exit_code }}.
+					<template v-if="powerStateDetails.exit_code === 1">
+						There may be a mod or plugin causing the issue, or an issue with your server
+						configuration.
+					</template>
+				</template>
+				<template v-else> We could not determine the specific cause of the crash. </template>
+				<p class="m-0 mt-2">You can try restarting the server.</p>
+			</template>
+			<template v-else>
+				We could not find any specific problems, but you can try restarting the server.
+			</template>
+		</Admonition>
+
+		<div class="flex flex-col-reverse gap-6 md:flex-col">
+			<ServerManageStats
+				:data="isConnected && !isWsAuthIncorrect ? stats : undefined"
+				:loading="!isConnected || isWsAuthIncorrect"
+			/>
+
+			<div class="flex h-[700px] flex-col gap-4">
+				<span class="text-2xl font-semibold text-contrast">Console</span>
+
+				<ConsolePageLayout />
+			</div>
+		</div>
+
+		<div
+			v-if="isWsAuthIncorrect"
+			class="absolute inset-0 flex flex-col items-center justify-center bg-bg"
+		>
+			<h2>Could not connect to the server.</h2>
+			<p>
+				An error occurred while attempting to connect to your server. Please try refreshing the
+				page. (WebSocket Authentication Failed)
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+import Admonition from '#ui/components/base/Admonition.vue'
+import { useModrinthServersConsole, useVIntl } from '#ui/composables'
+import { ConsolePageLayout, provideConsoleManager } from '#ui/layouts/shared/console'
+import { injectModrinthClient, injectModrinthServerContext } from '#ui/providers'
+
+import ServerManageStats from './components/ServerManageStats.vue'
+
+const { formatMessage } = useVIntl()
+const client = injectModrinthClient()
+const {
+	server: serverData,
+	serverId,
+	busyReasons,
+	isConnected,
+	isWsAuthIncorrect,
+	stats,
+	powerState: serverPowerState,
+	powerStateDetails,
+} = injectModrinthServerContext()
+const modrinthServersConsole = useModrinthServersConsole()
+
+provideConsoleManager({
+	logLines: modrinthServersConsole.output,
+	sendCommand: (cmd: string) => {
+		try {
+			client.archon.sockets.send(serverId, { event: 'command', cmd })
+		} catch (error) {
+			console.error('Error sending command:', error)
+		}
+	},
+	showCommandInput: true,
+	loading: computed(() => !isConnected.value || isWsAuthIncorrect.value),
+	onClear: () => {
+		modrinthServersConsole.clear()
+	},
+	shareDisabled: computed(() => !isConnected.value),
+})
+
+const backupBusyReason = computed(() => {
+	const reason = busyReasons.value.find(
+		(r) =>
+			r.reason.id === 'servers.busy.backup-creating' ||
+			r.reason.id === 'servers.busy.backup-restoring',
+	)
+	return reason ? formatMessage(reason.reason) : null
+})
+
+interface ErrorData {
+	id: string
+	name: string
+	type: string
+	version: string
+	title: string
+	analysis: {
+		problems: Array<{
+			message: string
+			counter: number
+			entry: {
+				level: number
+				time: string | null
+				prefix: string
+				lines: Array<{ number: number; content: string }>
+			}
+			solutions: Array<{ message: string }>
+		}>
+		information: Array<{
+			message: string
+			counter: number
+			label: string
+			value: string
+			entry: {
+				level: number
+				time: string | null
+				prefix: string
+				lines: Array<{ number: number; content: string }>
+			}
+		}>
+	}
+}
+
+const inspectingError = ref<ErrorData | null>(null)
+
+const inspectError = async () => {
+	try {
+		const blob = await client.kyros.files_v0.downloadFile('/logs/latest.log')
+		const log = await blob.text()
+		if (!log) return
+
+		const response = await fetch('https://api.mclo.gs/1/analyse', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/x-www-form-urlencoded',
+			},
+			body: new URLSearchParams({
+				content: log,
+			}),
+		})
+
+		if (!response.ok) {
+			inspectingError.value = null
+			return
+		}
+
+		const data = (await response.json()) as Partial<ErrorData>
+		if (data.analysis && Array.isArray(data.analysis.problems)) {
+			inspectingError.value = data as ErrorData
+		} else {
+			inspectingError.value = null
+		}
+	} catch (error) {
+		console.error('Failed to analyze logs:', error)
+		inspectingError.value = null
+	}
+}
+
+const clearError = () => {
+	inspectingError.value = null
+}
+
+watch(
+	() => serverPowerState.value,
+	(newVal) => {
+		if (newVal === 'crashed' && !powerStateDetails.value?.oom_killed) {
+			void inspectError()
+		} else {
+			clearError()
+		}
+	},
+)
+
+if (serverPowerState.value === 'crashed' && !powerStateDetails.value?.oom_killed) {
+	void inspectError()
+}
+</script>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
new file mode 100644
index 0000000000..6e78758082
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -0,0 +1,1292 @@
+<template>
+	<div
+		v-if="filteredNotices.length > 0"
+		class="experimental-styles-within relative mx-auto mb-4 flex w-full min-w-0 max-w-[1280px] flex-col gap-3 px-6"
+	>
+		<ServerNotice
+			v-for="notice in filteredNotices"
+			:key="`notice-${notice.id}`"
+			:level="notice.level"
+			:message="notice.message"
+			:dismissable="notice.dismissable"
+			:title="notice.title"
+			class="w-full"
+			@dismiss="() => dismissNotice(notice.id)"
+		/>
+	</div>
+	<div
+		v-if="serverData && serverData.node === null && serverData.status !== 'suspended'"
+		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
+	>
+		<ErrorInformationCard
+			title="We're getting your server ready"
+			description="Your server's hardware is being prepared and will be available shortly!"
+			:icon="TransferIcon"
+			icon-color="blue"
+			:action="generalErrorAction"
+		/>
+	</div>
+	<div
+		v-else-if="serverData?.status === 'suspended' && serverData.suspension_reason === 'upgrading'"
+		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
+	>
+		<ErrorInformationCard
+			title="Server upgrading"
+			description="Your server's hardware is currently being upgraded and will be back online shortly!"
+			:icon="TransferIcon"
+			icon-color="blue"
+			:action="generalErrorAction"
+		/>
+	</div>
+	<div
+		v-else-if="serverData?.status === 'suspended'"
+		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
+	>
+		<ErrorInformationCard
+			title="Server suspended"
+			:description="suspendedDescription"
+			:icon="LockIcon"
+			icon-color="orange"
+			:action="suspendedAction"
+		/>
+	</div>
+	<div
+		v-else-if="serverError?.statusCode === 403 || serverError?.statusCode === 404"
+		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
+	>
+		<ErrorInformationCard
+			title="An error occured."
+			description="Please contact Modrinth Support."
+			:icon="TransferIcon"
+			icon-color="orange"
+			:error-details="generalErrorDetails"
+			:action="generalErrorAction"
+		/>
+	</div>
+	<div
+		v-else-if="serverError || !nodeAccessible"
+		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
+	>
+		<ErrorInformationCard
+			title="Server Node Unavailable"
+			:icon="TriangleAlertIcon"
+			icon-color="red"
+			:action="nodeUnavailableAction"
+			:error-details="nodeUnavailableDetails"
+		>
+			<template #description>
+				<div class="text-md space-y-4">
+					<p class="leading-[170%] text-secondary">
+						Your server's node, where your Modrinth Server is physically hosted, is not accessible
+						at the moment. We are working to resolve the issue as quickly as possible.
+					</p>
+					<p class="leading-[170%] text-secondary">
+						Your data is safe and will not be lost, and your server will be back online as soon as
+						the issue is resolved.
+					</p>
+					<p class="leading-[170%] text-secondary">
+						If reloading does not work initially, please contact Modrinth Support via the chat
+						bubble in the bottom right corner and we'll be happy to help.
+					</p>
+				</div>
+			</template>
+		</ErrorInformationCard>
+	</div>
+	<!-- SERVER START -->
+	<div
+		v-else-if="serverData"
+		data-pyro-server-manager-root
+		class="experimental-styles-within mobile-blurred-servericon relative mx-auto mb-12 box-border flex min-h-screen w-full min-w-0 max-w-[1280px] flex-col gap-6 px-6 transition-all duration-300"
+		:style="{
+			'--server-bg-image': serverImage
+				? `url(${serverImage})`
+				: `linear-gradient(180deg, rgba(153,153,153,1) 0%, rgba(87,87,87,1) 100%)`,
+		}"
+	>
+		<ServerManageHeader
+			:server="serverData"
+			:server-image="serverImage"
+			:server-project="serverProject"
+			:uptime-seconds="showUptime ? uptimeSeconds : undefined"
+		>
+			<template #actions>
+				<div v-if="isConnected && !serverData.flows?.intro" class="flex gap-2">
+					<PanelServerActionButton :disabled="!!installError" />
+					<ButtonStyled circular size="large">
+						<button v-tooltip="'Server settings'" @click="() => openServerSettingsModal()">
+							<SettingsIcon />
+						</button>
+					</ButtonStyled>
+					<PanelServerOverflowMenu
+						:disabled="!!installError"
+						:uptime-seconds="uptimeSeconds"
+						:show-copy-id-action="showCopyIdAction"
+						:show-debug-info="showAdvancedDebugInfo"
+					/>
+				</div>
+			</template>
+		</ServerManageHeader>
+
+		<ServerOnboardingPanelPage
+			v-if="serverData.flows?.intro"
+			:browse-modpacks="handleBrowseModpacks"
+		/>
+
+		<template v-else>
+			<div
+				data-pyro-navigation
+				class="isolate flex w-full select-none flex-col justify-between gap-4 overflow-auto md:flex-row md:items-center"
+			>
+				<NavTabs :links="navLinks" replace />
+			</div>
+
+			<div data-pyro-mount class="h-full w-full flex-1">
+				<div
+					v-if="installError"
+					class="mx-auto mb-4 flex justify-between gap-2 rounded-2xl border-2 border-solid border-red bg-bg-red p-4 font-semibold text-contrast"
+				>
+					<div class="flex flex-row gap-4">
+						<IssuesIcon class="hidden h-8 w-8 shrink-0 text-red sm:block" />
+						<div class="flex flex-col gap-2 leading-[150%]">
+							<div class="flex items-center gap-3">
+								<IssuesIcon class="flex h-8 w-8 shrink-0 text-red sm:hidden" />
+								<div class="flex gap-2 text-2xl font-bold">{{ errorTitle }}</div>
+							</div>
+
+							<div
+								v-if="errorTitle.toLocaleLowerCase() === 'installation error'"
+								class="font-normal"
+							>
+								<div
+									v-if="
+										errorMessage.toLocaleLowerCase() === 'the specified version may be incorrect'
+									"
+								>
+									An invalid loader or Minecraft version was specified and could not be installed.
+									<ul class="m-0 mt-4 p-0 pl-4">
+										<li>
+											If this version of Minecraft was released recently, please check if Modrinth
+											Hosting supports it.
+										</li>
+										<li>
+											If you've installed a modpack, it may have been packaged incorrectly or may
+											not be compatible with the loader.
+										</li>
+										<li>
+											Your server may need to be reinstalled with a valid mod loader and version.
+											You can change the loader by clicking the "Change Loader" button.
+										</li>
+										<li>
+											If you're stuck, please contact Modrinth Support with the information below:
+										</li>
+									</ul>
+									<ButtonStyled>
+										<button class="mt-2" @click="copyServerDebugInfo">
+											<CopyIcon v-if="!copied" />
+											<CheckIcon v-else />
+											Copy Debug Info
+										</button>
+									</ButtonStyled>
+								</div>
+								<div v-if="errorMessage.toLocaleLowerCase() === 'internal error'">
+									An internal error occurred while installing your server. Don't fret — try
+									reinstalling your server, and if the problem persists, please contact Modrinth
+									support with your server's debug information.
+								</div>
+								<div
+									v-if="errorMessage.toLocaleLowerCase() === 'this version is not yet supported'"
+								>
+									An error occurred while installing your server because Modrinth Hosting does not
+									support the version of Minecraft or the loader you specified. Try reinstalling
+									your server with a different version or loader, and if the problem persists,
+									please contact Modrinth Support with your server's debug information.
+								</div>
+
+								<div
+									v-if="errorTitle === 'Installation error'"
+									class="mt-2 flex flex-col gap-4 sm:flex-row"
+								>
+									<ButtonStyled v-if="errorLog">
+										<button @click="openInstallLog"><FileIcon />Open Installation Log</button>
+									</ButtonStyled>
+									<ButtonStyled>
+										<button @click="copyServerDebugInfo">
+											<CopyIcon v-if="!copied" />
+											<CheckIcon v-else />
+											Copy Debug Info
+										</button>
+									</ButtonStyled>
+									<ButtonStyled color="red" type="standard">
+										<button class="whitespace-pre" @click="openServerSettingsModal('installation')">
+											<RightArrowIcon />
+											Change Loader
+										</button>
+									</ButtonStyled>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div v-if="serverData.is_medal" class="mb-4">
+					<MedalServerCountdown
+						:server-id="serverId"
+						:stripe-publishable-key="stripePublishableKey"
+						:site-url="siteUrl"
+						:products="products"
+					/>
+				</div>
+
+				<div
+					v-if="!isConnected && !isReconnecting && !isLoading"
+					data-pyro-server-ws-error
+					class="mb-4 flex w-full flex-row items-center gap-4 rounded-2xl bg-bg-red p-4 text-contrast"
+				>
+					<IssuesIcon class="size-5 text-red" />
+					Something went wrong...
+				</div>
+
+				<div
+					v-if="isReconnecting"
+					data-pyro-server-ws-reconnecting
+					class="mb-4 flex w-full flex-row items-center gap-4 rounded-2xl bg-bg-orange p-4 text-sm text-contrast"
+				>
+					<LoaderCircleIcon class="h-5 w-5 animate-spin" />
+					Hang on, we're reconnecting to your server.
+				</div>
+
+				<Transition
+					enter-active-class="transition-all duration-300 ease-out overflow-hidden"
+					enter-from-class="opacity-0 max-h-0"
+					enter-to-class="opacity-100 max-h-40"
+					leave-active-class="transition-all duration-200 ease-in overflow-hidden"
+					leave-from-class="opacity-100 max-h-40"
+					leave-to-class="opacity-0 max-h-0"
+				>
+					<InstallingBanner
+						v-if="
+							(serverData.status === 'installing' || isSyncingContent || contentError) &&
+							syncProgress?.phase !== 'Analyzing'
+						"
+						data-pyro-server-installing
+						class="mb-4"
+						:progress="syncProgress"
+						:content-error="contentError"
+						@retry="handleContentRetry"
+					>
+						<template #icon>
+							<ServerIcon :image="serverImage" class="!h-6 !w-6" />
+						</template>
+					</InstallingBanner>
+				</Transition>
+				<BackupProgressAdmonitions class="mb-4" />
+				<slot :on-reinstall="onReinstall" :on-reinstall-failed="onReinstallFailed" />
+			</div>
+		</template>
+	</div>
+	<div
+		v-if="showAdvancedDebugInfo"
+		class="experimental-styles-within relative mx-auto mt-6 box-border w-full min-w-0 max-w-[1280px] px-6"
+	>
+		<h2 class="m-0 text-lg font-extrabold text-contrast">Server data</h2>
+		<pre class="markdown-body w-full overflow-auto rounded-2xl bg-bg-raised p-4 text-sm">{{
+			safeStringify(serverData)
+		}}</pre>
+	</div>
+	<Suspense>
+		<ServerSettingsModal
+			ref="serverSettingsModal"
+			:resolve-viewer="resolveViewer"
+			:browse-modpacks="handleBrowseModpacks"
+		/>
+	</Suspense>
+</template>
+
+<script setup lang="ts">
+import { Intercom, shutdown } from '@intercom/messenger-js-sdk'
+import type { Archon, Labrinth } from '@modrinth/api-client'
+import { ModrinthApiError } from '@modrinth/api-client'
+import {
+	BoxesIcon,
+	CheckIcon,
+	CopyIcon,
+	DatabaseBackupIcon,
+	FileIcon,
+	FolderOpenIcon,
+	IssuesIcon,
+	LayoutTemplateIcon,
+	LoaderCircleIcon,
+	LockIcon,
+	RightArrowIcon,
+	SettingsIcon,
+	TransferIcon,
+	TriangleAlertIcon,
+} from '@modrinth/assets'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { useTimeoutFn } from '@vueuse/core'
+import DOMPurify from 'dompurify'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import ErrorInformationCard from '#ui/components/base/ErrorInformationCard.vue'
+import NavTabs from '#ui/components/base/NavTabs.vue'
+import ServerNotice from '#ui/components/base/ServerNotice.vue'
+import BackupProgressAdmonitions from '#ui/components/servers/backups/BackupProgressAdmonitions.vue'
+import { ServerIcon } from '#ui/components/servers/icons'
+import InstallingBanner from '#ui/components/servers/InstallingBanner.vue'
+import MedalServerCountdown from '#ui/components/servers/marketing/MedalServerCountdown.vue'
+import {
+	PanelServerActionButton,
+	PanelServerOverflowMenu,
+	ServerManageHeader,
+} from '#ui/components/servers/server-header'
+import ServerSettingsModal from '#ui/components/servers/ServerSettingsModal.vue'
+import { useDebugLogger, useServerImage, useServerProject } from '#ui/composables'
+import { useServerManageCoreRuntime } from '#ui/composables/server-manage-core-runtime'
+import type { ServerSettingsTabId } from '#ui/layouts/shared/server-settings'
+import {
+	injectModrinthClient,
+	injectNotificationManager,
+	provideServerSettingsModal,
+} from '#ui/providers'
+import { formatLoaderLabel } from '#ui/utils/loaders'
+
+import ServerOnboardingPanelPage from './[id]/onboarding.vue'
+
+interface Tab {
+	label: string
+	href: string
+	icon?: object
+	subpages?: string[]
+}
+
+const props = withDefaults(
+	defineProps<{
+		serverId: string
+		reloadPage: () => void
+		resolveViewer: () => Promise<{ userId: string | null; userRole: string | null }>
+		showCopyIdAction?: boolean
+		showAdvancedDebugInfo?: boolean
+		showUptime?: boolean
+		additionalTabs?: Tab[]
+		stripePublishableKey?: string
+		siteUrl?: string
+		products?: Labrinth.Billing.Internal.Product[]
+		authUser?: { id: string; username: string; email: string; created: string }
+		navigateToBilling?: () => void
+		navigateToServers?: () => void
+		browseModpacks?: (args: {
+			serverId: string
+			worldId: string | null
+			from: 'reset-server' | 'onboarding'
+		}) => void | Promise<void>
+		browseContent?: (args: {
+			serverId: string
+			worldId: string | null
+			type: 'mod' | 'plugin' | 'datapack'
+		}) => void | Promise<void>
+	}>(),
+	{
+		showCopyIdAction: false,
+		showAdvancedDebugInfo: false,
+		showUptime: true,
+		additionalTabs: () => [],
+		stripePublishableKey: undefined,
+		siteUrl: undefined,
+		products: () => [],
+		authUser: undefined,
+		navigateToBilling: undefined,
+		navigateToServers: undefined,
+		browseModpacks: undefined,
+		browseContent: undefined,
+	},
+)
+
+const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
+const route = useRoute()
+const router = useRouter()
+const debug = useDebugLogger('ServerManage')
+
+const isReconnecting = ref(false)
+const isLoading = ref(true)
+const isMounted = ref(true)
+const copied = ref(false)
+const installError = ref<Error | null>(null)
+const errorTitle = ref('Error')
+const errorMessage = ref('An unexpected error occurred.')
+const errorLog = ref('')
+const errorLogFile = ref('')
+
+const serverSettingsModal = ref<InstanceType<typeof ServerSettingsModal> | null>(null)
+
+const INTERCOM_APP_ID = 'ykeritl9'
+
+const { data: serverData, error: serverQueryError } = useQuery({
+	queryKey: ['servers', 'detail', props.serverId],
+	queryFn: () => client.archon.servers_v0.get(props.serverId)!,
+})
+
+function updateServerData(patch: Partial<Archon.Servers.v0.Server>) {
+	if (!serverData.value) return
+	queryClient.setQueryData(['servers', 'detail', props.serverId], {
+		...serverData.value,
+		...patch,
+	})
+}
+
+const serverError = computed(() => {
+	const err = serverQueryError.value
+	if (err instanceof ModrinthApiError) return err
+	return err ? ModrinthApiError.fromUnknown(err) : null
+})
+
+const { data: serverFull } = useQuery({
+	queryKey: ['servers', 'v1', 'detail', props.serverId],
+	queryFn: () => client.archon.servers_v1.get(props.serverId),
+})
+
+const worldId = computed(() => {
+	if (!serverFull.value) return null
+	const activeWorld = serverFull.value.worlds.find((w) => w.is_active)
+	return activeWorld?.id ?? serverFull.value.worlds[0]?.id ?? null
+})
+
+const serverImage = useServerImage(
+	props.serverId,
+	computed(() => serverData.value?.upstream ?? null),
+)
+const { data: serverProject } = useServerProject(computed(() => serverData.value?.upstream ?? null))
+
+const cancelledBackups = new Set<string>()
+const markBackupCancelled = (backupId: string) => {
+	cancelledBackups.add(backupId)
+}
+
+const syncProgress = ref<Archon.Websocket.v0.SyncContentProgress | null>(null)
+const contentError = ref<Archon.Websocket.v0.SyncContentError | null>(null)
+const syncProgressActive = ref(false)
+const isAwaitingPostInstallRefresh = ref(false)
+const { start: startSyncHide, stop: cancelSyncHide } = useTimeoutFn(
+	() => (syncProgressActive.value = false),
+	1000,
+	{ immediate: false },
+)
+
+watch(syncProgress, (progress) => {
+	if (progress != null) {
+		cancelSyncHide()
+		syncProgressActive.value = true
+	} else if (syncProgressActive.value) {
+		startSyncHide()
+	}
+})
+
+const isSyncingContent = computed(
+	() => syncProgressActive.value || isAwaitingPostInstallRefresh.value,
+)
+
+let hasSeenInstallProgress = false
+
+const onStateEvent = (data: Archon.Websocket.v0.WSStateEvent) => {
+	debug('[root.vue] handleState received:', {
+		power_variant: data.power_variant,
+		progress: data.progress,
+		serverStatus: serverData.value?.status,
+	})
+	syncProgress.value = data.progress
+	contentError.value = data.content_error
+
+	if (serverData.value) {
+		if (data.progress != null && serverData.value.status !== 'installing') {
+			debug('[root.vue] handleState: progress != null, setting status to installing')
+			hasSeenInstallProgress = true
+			updateServerData({ status: 'installing' })
+		} else if (data.progress != null) {
+			hasSeenInstallProgress = true
+		} else if (
+			data.progress == null &&
+			data.content_error == null &&
+			serverData.value.status === 'installing' &&
+			hasSeenInstallProgress
+		) {
+			debug('[root.vue] handleState: progress null + was installing, applying optimistic update')
+			hasSeenInstallProgress = false
+			applyOptimisticCompletion()
+			invalidateAfterInstall()
+		}
+	}
+}
+
+const {
+	backupsState,
+	cleanupCoreRuntime,
+	connectSocket,
+	fsOps,
+	fsQueuedOps,
+	isConnected,
+	uptimeSeconds,
+} = useServerManageCoreRuntime({
+	serverId: computed(() => props.serverId),
+	worldId,
+	server: serverData,
+	isSyncingContent,
+	markBackupCancelled,
+	includeBackupBusyReasons: true,
+	setDisconnectedOnAuthIncorrect: false,
+	syncUptimeFromState: true,
+	incrementUptimeLocally: true,
+	eventGuard: () => isMounted.value,
+	onStateEvent,
+})
+
+const navLinks = computed<Tab[]>(() => [
+	{
+		label: 'Overview',
+		href: `/hosting/manage/${props.serverId}`,
+		icon: LayoutTemplateIcon,
+		subpages: [],
+	},
+	{
+		label: 'Content',
+		href: `/hosting/manage/${props.serverId}/content`,
+		icon: BoxesIcon,
+		subpages: ['mods', 'datapacks'],
+	},
+	{
+		label: 'Files',
+		href: `/hosting/manage/${props.serverId}/files`,
+		icon: FolderOpenIcon,
+		subpages: [],
+	},
+	{
+		label: 'Backups',
+		href: `/hosting/manage/${props.serverId}/backups`,
+		icon: DatabaseBackupIcon,
+		subpages: [],
+	},
+	...props.additionalTabs,
+])
+
+const filteredNotices = computed(
+	() => serverData.value?.notices?.filter((n) => n.level !== 'survey') ?? [],
+)
+const surveyNotice = computed(() => serverData.value?.notices?.find((n) => n.level === 'survey'))
+
+async function dismissNotice(noticeId: number) {
+	await client.archon.servers_v0.dismissNotice(props.serverId, noticeId).catch((err) => {
+		addNotification({
+			title: 'Error dismissing notice',
+			text: err,
+			type: 'error',
+		})
+	})
+	await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', props.serverId] })
+}
+
+async function dismissSurvey() {
+	const noticeId = surveyNotice.value?.id
+	if (noticeId === undefined) return
+	await dismissNotice(noticeId)
+}
+
+type TallyPopupOptions = {
+	key?: string
+	layout?: 'default' | 'modal'
+	width?: number
+	alignLeft?: boolean
+	hideTitle?: boolean
+	overlay?: boolean
+	emoji?: {
+		text: string
+		animation:
+			| 'none'
+			| 'wave'
+			| 'tada'
+			| 'heart-beat'
+			| 'spin'
+			| 'flash'
+			| 'bounce'
+			| 'rubber-band'
+			| 'head-shake'
+	}
+	autoClose?: number
+	showOnce?: boolean
+	doNotShowAfterSubmit?: boolean
+	customFormUrl?: string
+	hiddenFields?: { [key: string]: unknown }
+	onOpen?: () => void
+	onClose?: () => void
+	onPageView?: (page: number) => void
+	onSubmit?: (payload: unknown) => void
+}
+
+const popupOptions = computed(
+	() =>
+		({
+			layout: 'default',
+			width: 400,
+			autoClose: 2000,
+			hideTitle: true,
+			hiddenFields: {
+				username: props.authUser?.username,
+				user_id: props.authUser?.id,
+				user_email: props.authUser?.email,
+				server_id: serverData.value?.server_id,
+				loader: serverData.value?.loader,
+				game_version: serverData.value?.mc_version,
+				modpack_id: serverProject.value?.id,
+				modpack_name: serverProject.value?.title,
+			},
+			onOpen: () => console.log(`Opened survey notice: ${surveyNotice.value?.id}`),
+			onClose: async () => await dismissSurvey(),
+			onSubmit: (payload: unknown) => {
+				console.log('Form submitted:', payload)
+			},
+		}) satisfies TallyPopupOptions,
+)
+
+function getTally(): { openPopup?: (id: string, opts: TallyPopupOptions) => void } | undefined {
+	return (
+		window as Window & { Tally?: { openPopup?: (id: string, opts: TallyPopupOptions) => void } }
+	).Tally
+}
+
+function showSurvey() {
+	if (!surveyNotice.value) return
+
+	try {
+		const tally = getTally()
+		if (tally?.openPopup) {
+			tally.openPopup(surveyNotice.value.message, popupOptions.value)
+		}
+	} catch (e) {
+		console.error('Error opening Tally popup:', e)
+	}
+}
+
+function loadTallyScript() {
+	if (document.querySelector('script[src*="tally.so"]')) return
+	const script = document.createElement('script')
+	script.src = 'https://tally.so/widgets/embed.js'
+	script.defer = true
+	document.head.appendChild(script)
+}
+
+async function handleContentRetry() {
+	if (!worldId.value) return
+	try {
+		await client.archon.content_v1.repair(props.serverId, worldId.value)
+	} catch (err) {
+		addNotification({
+			type: 'error',
+			text: err instanceof Error ? err.message : 'Failed to retry installation',
+		})
+	}
+}
+
+const handleBackupProgress = (data: Archon.Websocket.v0.WSBackupProgressEvent) => {
+	if (data.task === 'file') return
+
+	const backupId = data.id
+
+	if (cancelledBackups.has(backupId)) return
+
+	const current = backupsState.get(backupId) ?? {}
+	const currentTaskState = current[data.task]?.state
+	const isIncomingTerminal =
+		data.state === 'done' || data.state === 'failed' || data.state === 'cancelled'
+
+	if (currentTaskState === data.state && isIncomingTerminal) return
+
+	const previousProgress = current[data.task]?.progress
+	if (currentTaskState !== data.state || previousProgress !== data.progress) {
+		backupsState.set(backupId, {
+			...current,
+			[data.task]: {
+				progress: data.progress,
+				state: data.state,
+			},
+		})
+	}
+
+	if (isIncomingTerminal) {
+		const attemptCleanup = (attempt: number = 1) => {
+			queryClient.invalidateQueries({ queryKey: ['backups', 'list', props.serverId] }).then(() => {
+				const backupData = queryClient.getQueryData<Archon.Backups.v1.Backup[]>([
+					'backups',
+					'list',
+					props.serverId,
+				])
+				const backup = backupData?.find((b) => b.id === backupId)
+				const isStillActive =
+					backup && (backup.status === 'in_progress' || backup.status === 'pending')
+
+				if (isStillActive && attempt < 6) {
+					setTimeout(() => attemptCleanup(attempt + 1), 1000 * Math.pow(2, attempt - 1))
+					return
+				}
+
+				if (isStillActive) {
+					queryClient.setQueryData<Archon.Backups.v1.Backup[]>(
+						['backups', 'list', props.serverId],
+						(old) =>
+							old?.map((b) => {
+								if (b.id !== backupId) return b
+								return {
+									...b,
+									status: data.state === 'done' ? ('done' as const) : ('error' as const),
+									ongoing: false,
+									interrupted: data.state === 'failed',
+								}
+							}),
+					)
+				}
+
+				backupsState.delete(backupId)
+			})
+		}
+
+		attemptCleanup()
+	}
+}
+
+const opsQueuedForModification = ref<string[]>([])
+
+const handleFilesystemOps = (data: Archon.Websocket.v0.WSFilesystemOpsEvent) => {
+	const allOps = data.all
+
+	if (JSON.stringify(fsOps.value) !== JSON.stringify(allOps)) {
+		fsOps.value = allOps
+	}
+
+	fsQueuedOps.value = fsQueuedOps.value.filter(
+		(queuedOp) => !allOps.some((x) => x.src === queuedOp.src),
+	)
+
+	const dismissOp = async (opId: string) => {
+		try {
+			await client.kyros.files_v0.modifyOperation(opId, 'dismiss')
+		} catch (error) {
+			console.error('Failed to dismiss operation:', error)
+		}
+	}
+
+	const cancelled = allOps.filter((x) => x.state === 'cancelled')
+	Promise.all(cancelled.map((x) => dismissOp(x.id)))
+
+	const completed = allOps.filter((x) => x.state === 'done')
+	if (completed.length > 0) {
+		setTimeout(
+			async () =>
+				await Promise.all(
+					completed.map((x) => {
+						if (!opsQueuedForModification.value.includes(x.id)) {
+							opsQueuedForModification.value.push(x.id)
+							return dismissOp(x.id)
+						}
+						return Promise.resolve()
+					}),
+				),
+			3000,
+		)
+	}
+}
+
+const handleNewMod = () => {
+	queryClient.invalidateQueries({ queryKey: ['content', 'list'] })
+}
+
+const handleInstallationResult = async (data: Archon.Websocket.v0.WSInstallationResultEvent) => {
+	debug('[root.vue] handleInstallationResult received:', data)
+	switch (data.result) {
+		case 'ok': {
+			debug('[root.vue] handleInstallationResult: ok received')
+			if (!serverData.value) break
+
+			applyOptimisticCompletion()
+			installError.value = null
+			invalidateAfterInstall()
+
+			break
+		}
+		case 'err': {
+			console.log('failed to install')
+			console.log(data)
+			errorTitle.value = 'Installation error'
+			errorMessage.value = data.reason ?? 'Unknown error'
+			installError.value = new Error(data.reason ?? 'Unknown error')
+
+			try {
+				let files = await client.kyros.files_v0.listDirectory('/', 1, 100)
+				if (files && files.total > 1) {
+					for (let i = 2; i <= files.total; i++) {
+						const nextFiles = await client.kyros.files_v0.listDirectory('/', i, 100)
+						if (nextFiles?.items?.length === 0) break
+						if (nextFiles) files = nextFiles
+					}
+				}
+				const fileName = files?.items?.find((file) =>
+					file.name.startsWith('modrinth-installation'),
+				)?.name
+				errorLogFile.value = fileName ?? ''
+				if (fileName) {
+					const content = await client.kyros.files_v0.downloadFile(fileName)
+					errorLog.value = await content.text()
+				}
+			} catch (err) {
+				console.error('Failed to fetch installation log:', err)
+			}
+			break
+		}
+	}
+}
+
+const newLoader = ref<string | null>(null)
+const newLoaderVersion = ref<string | null>(null)
+const newMCVersion = ref<string | null>(null)
+
+const onReinstall = async (
+	potentialArgs: { loader?: string; lVersion?: string; mVersion?: string } | undefined,
+) => {
+	debug('[root.vue] onReinstall called with:', potentialArgs)
+
+	if (serverData.value?.flows?.intro) {
+		await client.archon.servers_v1.endIntro(props.serverId)
+		queryClient.invalidateQueries({ queryKey: ['servers', 'detail', props.serverId] })
+	}
+
+	if (!serverData.value) return
+
+	debug('[root.vue] onReinstall: setting serverData.status to installing')
+	hasSeenInstallProgress = false
+	updateServerData({ status: 'installing' })
+
+	if (potentialArgs?.loader) {
+		newLoader.value = potentialArgs.loader
+	}
+	if (potentialArgs?.lVersion) {
+		newLoaderVersion.value = potentialArgs.lVersion
+	}
+	if (potentialArgs?.mVersion) {
+		newMCVersion.value = potentialArgs.mVersion
+	}
+
+	installError.value = null
+	errorTitle.value = 'Error'
+	errorMessage.value = 'An unexpected error occurred.'
+
+	debug('[root.vue] onReinstall: triggering immediate invalidation')
+	queryClient.invalidateQueries({ queryKey: ['servers', 'detail', props.serverId] })
+	queryClient.invalidateQueries({ queryKey: ['content', 'list'] })
+}
+
+const onReinstallFailed = () => {
+	debug('[root.vue] onReinstallFailed: reverting status to available')
+	updateServerData({ status: 'available' })
+	newLoader.value = null
+	newLoaderVersion.value = null
+	newMCVersion.value = null
+}
+
+function applyOptimisticCompletion() {
+	const patch: Partial<Archon.Servers.v0.Server> = { status: 'available' }
+	if (newLoader.value) patch.loader = formatLoaderLabel(newLoader.value) as Archon.Servers.v0.Loader
+	if (newLoaderVersion.value) patch.loader_version = newLoaderVersion.value
+	if (newMCVersion.value) patch.mc_version = newMCVersion.value
+
+	debug('[root.vue] applyOptimisticCompletion: patch:', patch)
+	updateServerData(patch)
+
+	const addonsQueries = queryClient.getQueriesData<Archon.Content.v1.Addons>({
+		queryKey: ['content', 'list', 'v1', props.serverId],
+	})
+	for (const [key, data] of addonsQueries) {
+		if (!data) continue
+		const addonsPatch: Record<string, string> = {}
+		if (newLoader.value) addonsPatch.modloader = newLoader.value
+		if (newLoaderVersion.value) addonsPatch.modloader_version = newLoaderVersion.value
+		if (newMCVersion.value) addonsPatch.game_version = newMCVersion.value
+		if (Object.keys(addonsPatch).length > 0) {
+			queryClient.setQueryData(key, { ...data, ...addonsPatch })
+		}
+	}
+
+	newLoader.value = null
+	newLoaderVersion.value = null
+	newMCVersion.value = null
+}
+
+async function invalidateAfterInstall() {
+	debug('[root.vue] invalidateAfterInstall: scheduling 2s delayed invalidation')
+	isAwaitingPostInstallRefresh.value = true
+	setTimeout(async () => {
+		try {
+			await Promise.all([
+				queryClient.invalidateQueries({ queryKey: ['servers', 'detail', props.serverId] }),
+				queryClient.invalidateQueries({
+					queryKey: ['servers', 'startup', 'v1', props.serverId],
+				}),
+				queryClient.invalidateQueries({ queryKey: ['content', 'list'] }),
+			])
+		} catch (err: unknown) {
+			console.error('Error refreshing data after installation:', err)
+		} finally {
+			isAwaitingPostInstallRefresh.value = false
+		}
+	}, 2000)
+}
+
+const nodeAccessible = ref(true)
+
+const nodeUnavailableDetails = computed(() => [
+	{
+		label: 'Server ID',
+		value: props.serverId,
+		type: 'inline' as const,
+	},
+	{
+		label: 'Node',
+		value:
+			(serverError.value?.responseData as { hostname?: string } | undefined)?.hostname ??
+			serverData.value?.datacenter ??
+			'Unknown',
+		type: 'inline' as const,
+	},
+	{
+		label: 'Error message',
+		value: nodeAccessible.value
+			? (serverError.value?.message ?? 'Unknown')
+			: 'Unable to reach node. Ping test failed.',
+		type: 'block' as const,
+	},
+])
+
+const suspendedDescription = computed(() => {
+	if (serverData.value?.suspension_reason === 'cancelled') {
+		return 'Your subscription has been cancelled.\nContact Modrinth Support if you believe this is an error.'
+	}
+	if (serverData.value?.suspension_reason) {
+		return `Your server has been suspended: ${serverData.value.suspension_reason}\nContact Modrinth Support if you believe this is an error.`
+	}
+	return 'Your server has been suspended.\nContact Modrinth Support if you believe this is an error.'
+})
+
+const generalErrorDetails = computed(() => [
+	{
+		label: 'Server ID',
+		value: props.serverId,
+		type: 'inline' as const,
+	},
+	{
+		label: 'Timestamp',
+		value: String(new Date().toISOString()),
+		type: 'inline' as const,
+	},
+	{
+		label: 'Error Name',
+		value: serverError.value?.name,
+		type: 'inline' as const,
+	},
+	{
+		label: 'Error Message',
+		value: serverError.value?.message,
+		type: 'block' as const,
+	},
+	...(serverError.value?.originalError
+		? [
+				{
+					label: 'Original Error',
+					value: String(serverError.value.originalError),
+					type: 'hidden' as const,
+				},
+			]
+		: []),
+	...(serverError.value?.stack
+		? [
+				{
+					label: 'Stack Trace',
+					value: serverError.value.stack,
+					type: 'hidden' as const,
+				},
+			]
+		: []),
+])
+
+const suspendedAction = computed(() => ({
+	label: 'Go to billing settings',
+	onClick: () => props.navigateToBilling?.(),
+	color: 'brand' as const,
+}))
+
+const generalErrorAction = computed(() => ({
+	label: 'Go back to all servers',
+	onClick: () => props.navigateToServers?.(),
+	color: 'brand' as const,
+}))
+
+const nodeUnavailableAction = computed(() => ({
+	label: 'Reload',
+	onClick: () => props.reloadPage(),
+	color: 'brand' as const,
+	disabled: false,
+}))
+
+const copyServerDebugInfo = () => {
+	const debugInfo = `Server ID: ${serverData.value?.server_id}\nError: ${errorMessage.value}\nKind: ${serverData.value?.upstream?.kind}\nProject ID: ${serverData.value?.upstream?.project_id}\nVersion ID: ${serverData.value?.upstream?.version_id}\nLog: ${errorLog.value}`
+	navigator.clipboard.writeText(debugInfo)
+	copied.value = true
+	setTimeout(() => {
+		copied.value = false
+	}, 5000)
+}
+
+const openInstallLog = () => {
+	const url = `/hosting/manage/${props.serverId}/files?editing=${encodeURIComponent(errorLogFile.value)}`
+	window.history.pushState({}, '', url)
+	window.dispatchEvent(new PopStateEvent('popstate'))
+}
+
+function openServerSettingsModal(tabId?: ServerSettingsTabId) {
+	if (!props.serverId) return
+	serverSettingsModal.value?.show({ serverId: props.serverId, tabId })
+}
+
+function handleBrowseModpacks(args: {
+	serverId: string
+	worldId: string | null
+	from: 'reset-server' | 'onboarding'
+}) {
+	props.browseModpacks?.(args)
+}
+
+function handleBrowseContent(args: {
+	serverId: string
+	worldId: string | null
+	type: 'mod' | 'plugin' | 'datapack'
+}) {
+	props.browseContent?.(args)
+}
+
+provideServerSettingsModal({
+	openServerSettings: (options) => openServerSettingsModal(options?.tabId),
+	browseServerContent: (args) => handleBrowseContent(args),
+})
+
+function safeStringify(obj: unknown, indent = ' '): string {
+	const seen = new WeakSet()
+	return JSON.stringify(
+		obj,
+		(_key, value) => {
+			if (typeof value === 'object' && value !== null) {
+				if (seen.has(value)) {
+					return '[Circular]'
+				}
+				seen.add(value)
+			}
+			return value
+		},
+		indent,
+	)
+}
+
+async function testNodeReachability(): Promise<boolean> {
+	const nodeInstance = serverData.value?.node?.instance
+	if (!nodeInstance) return false
+
+	const wsUrl = `wss://${nodeInstance}/pingtest`
+
+	try {
+		return await new Promise((resolve) => {
+			const socket = new WebSocket(wsUrl)
+			const timeout = setTimeout(() => {
+				socket.close()
+				resolve(false)
+			}, 5000)
+
+			socket.onopen = () => {
+				clearTimeout(timeout)
+				socket.send(performance.now().toString())
+			}
+
+			socket.onmessage = () => {
+				clearTimeout(timeout)
+				socket.close()
+				resolve(true)
+			}
+
+			socket.onerror = () => {
+				clearTimeout(timeout)
+				resolve(false)
+			}
+		})
+	} catch (error) {
+		console.error(`Failed to ping node ${wsUrl}:`, error)
+		return false
+	}
+}
+
+function initializeServer() {
+	if (serverData.value?.status === 'suspended') {
+		isLoading.value = false
+		return
+	}
+
+	if (serverData.value?.node === null) {
+		isLoading.value = false
+		return
+	}
+
+	testNodeReachability()
+		.then((result) => {
+			nodeAccessible.value = result
+			if (!nodeAccessible.value) {
+				isLoading.value = false
+			}
+		})
+		.catch((err) => {
+			console.error('Error testing node reachability:', err)
+			nodeAccessible.value = false
+			isLoading.value = false
+		})
+
+	if (serverError.value) {
+		isLoading.value = false
+	} else {
+		void connectSocket(props.serverId, {
+			extraSubscriptions: (targetServerId) => [
+				client.archon.sockets.on(targetServerId, 'installation-result', handleInstallationResult),
+				client.archon.sockets.on(targetServerId, 'backup-progress', handleBackupProgress),
+				client.archon.sockets.on(targetServerId, 'filesystem-ops', handleFilesystemOps),
+				client.archon.sockets.on(targetServerId, 'new-mod', handleNewMod),
+			],
+		}).finally(() => {
+			isLoading.value = false
+		})
+	}
+
+	if (serverData.value?.flows?.intro && serverProject.value) {
+		client.archon.servers_v1.endIntro(props.serverId).then(() => {
+			queryClient.invalidateQueries({ queryKey: ['servers', 'detail', props.serverId] })
+		})
+	}
+}
+
+const cleanup = () => {
+	isMounted.value = false
+
+	shutdown()
+
+	cleanupCoreRuntime(props.serverId)
+
+	isReconnecting.value = false
+	isLoading.value = true
+
+	cancelledBackups.clear()
+
+	DOMPurify.removeHook('afterSanitizeAttributes')
+}
+
+onMounted(() => {
+	isMounted.value = true
+
+	if (serverData.value) {
+		initializeServer()
+	} else {
+		const stopWatch = watch(serverData, (data) => {
+			if (data) {
+				stopWatch()
+				initializeServer()
+			}
+		})
+	}
+
+	if (props.authUser) {
+		Intercom({
+			app_id: INTERCOM_APP_ID,
+			userId: props.authUser.id,
+			name: props.authUser.username,
+			email: props.authUser.email,
+			created_at: Math.floor(new Date(props.authUser.created).getTime() / 1000),
+		})
+	}
+
+	DOMPurify.addHook(
+		'afterSanitizeAttributes',
+		(node: {
+			tagName: string
+			getAttribute: (arg0: string) => string | null
+			setAttribute: (arg0: string, arg1: string) => void
+		}) => {
+			if (node.tagName === 'A' && node.getAttribute('target')) {
+				node.setAttribute('rel', 'noopener noreferrer')
+			}
+		},
+	)
+
+	loadTallyScript()
+	if (surveyNotice.value) {
+		showSurvey()
+	}
+
+	if (route.query.openSettings) {
+		const tabId = route.query.openSettings as ServerSettingsTabId
+		router.replace({ query: { ...route.query, openSettings: undefined } })
+		queryClient.invalidateQueries({ queryKey: ['servers', 'detail', props.serverId] })
+		queryClient.invalidateQueries({ queryKey: ['content', 'list', 'v1', props.serverId] })
+		queryClient.invalidateQueries({ queryKey: ['servers', 'startup', 'v1', props.serverId] })
+		nextTick(() => openServerSettingsModal(tabId))
+	}
+})
+
+onUnmounted(() => {
+	cleanup()
+})
+</script>
+
+<style>
+@keyframes server-action-buttons-anim {
+	0% {
+		opacity: 0;
+		transform: translateX(1rem);
+	}
+
+	100% {
+		opacity: 1;
+		transform: none;
+	}
+}
+
+.server-action-buttons-anim {
+	animation: server-action-buttons-anim 0.2s ease-out;
+}
+
+.mobile-blurred-servericon::before {
+	position: absolute;
+	left: 0;
+	top: 0;
+	display: block;
+	height: 9rem;
+	width: 100%;
+	background-size: cover;
+	background-position: center;
+	background-repeat: no-repeat;
+	filter: blur(1rem);
+	content: '';
+	background-image:
+		linear-gradient(
+			to bottom,
+			rgba(from var(--color-raised-bg) r g b / 0.2),
+			rgb(from var(--color-raised-bg) r g b / 0.8)
+		),
+		var(--server-bg-image);
+}
+
+@media screen and (min-width: 640px) {
+	.mobile-blurred-servericon::before {
+		display: none;
+	}
+}
+</style>
diff --git a/packages/ui/src/layouts/wrapped/index.ts b/packages/ui/src/layouts/wrapped/index.ts
index 96eb189947..d91f53ee78 100644
--- a/packages/ui/src/layouts/wrapped/index.ts
+++ b/packages/ui/src/layouts/wrapped/index.ts
@@ -3,3 +3,5 @@ export { default as ServersManageBackupsPage } from './hosting/manage/backups.vu
 export { default as ServersManageContentPage } from './hosting/manage/content.vue'
 export { default as ServersManageFilesPage } from './hosting/manage/files.vue'
 export { default as ServersManagePageIndex } from './hosting/manage/index.vue'
+export { default as ServersManageOverviewPage } from './hosting/manage/overview.vue'
+export { default as ServersManageRootLayout } from './hosting/manage/root.vue'
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 7294c933e8..20d8a7e718 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -32,6 +32,9 @@
   "affiliate.viewAnalytics": {
     "defaultMessage": "View analytics"
   },
+  "app.server-settings.failed-to-load-server": {
+    "defaultMessage": "Failed to load server settings"
+  },
   "badge.beta": {
     "defaultMessage": "Beta"
   },
@@ -2693,6 +2696,18 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Restore"
   },
+  "servers.busy.backup-creating": {
+    "defaultMessage": "Backup creation in progress"
+  },
+  "servers.busy.backup-restoring": {
+    "defaultMessage": "Backup restore in progress"
+  },
+  "servers.busy.installing": {
+    "defaultMessage": "Server is installing"
+  },
+  "servers.busy.syncing-content": {
+    "defaultMessage": "Content sync in progress"
+  },
   "servers.list-empty.already-have-server-label": {
     "defaultMessage": "Already have a server?"
   },
diff --git a/packages/ui/src/providers/index.ts b/packages/ui/src/providers/index.ts
index e6d7c9726e..9c5fcf8740 100644
--- a/packages/ui/src/providers/index.ts
+++ b/packages/ui/src/providers/index.ts
@@ -13,5 +13,6 @@ export * from './popup-notifications'
 export * from './project-page'
 export * from './project-page-new'
 export * from './server-context'
+export * from './server-settings-modal'
 export * from './tags'
 export * from './web-notifications'
diff --git a/packages/ui/src/providers/server-context.ts b/packages/ui/src/providers/server-context.ts
index a98b0075b0..b9e8d7ff0c 100644
--- a/packages/ui/src/providers/server-context.ts
+++ b/packages/ui/src/providers/server-context.ts
@@ -1,4 +1,5 @@
 import type { Archon } from '@modrinth/api-client'
+import type { Stats } from '@modrinth/utils'
 import type { ComputedRef, Reactive, Ref } from 'vue'
 
 import type { MessageDescriptor } from '#ui/composables/i18n'
@@ -34,8 +35,12 @@ export interface ModrinthServerContext {
 
 	// Websocket state
 	readonly isConnected: Ref<boolean>
+	readonly isWsAuthIncorrect: Ref<boolean>
 	readonly powerState: Ref<Archon.Websocket.v0.PowerState>
+	readonly powerStateDetails: Ref<{ oom_killed?: boolean; exit_code?: number } | undefined>
 	readonly isServerRunning: ComputedRef<boolean>
+	readonly stats: Ref<Stats>
+	readonly uptimeSeconds: Ref<number>
 	readonly backupsState: Reactive<BackupsState>
 	markBackupCancelled: (backupId: string) => void
 
diff --git a/packages/ui/src/providers/server-settings-modal.ts b/packages/ui/src/providers/server-settings-modal.ts
new file mode 100644
index 0000000000..71eeac14f5
--- /dev/null
+++ b/packages/ui/src/providers/server-settings-modal.ts
@@ -0,0 +1,17 @@
+import type { ServerSettingsTabId } from '#ui/layouts/shared/server-settings'
+
+import { createContext } from './create-context'
+
+export interface BrowseServerContentArgs {
+	serverId: string
+	worldId: string | null
+	type: 'mod' | 'plugin' | 'datapack'
+}
+
+export interface ServerSettingsModalContext {
+	openServerSettings: (options?: { tabId?: ServerSettingsTabId }) => void
+	browseServerContent?: (args: BrowseServerContentArgs) => void | Promise<void>
+}
+
+export const [injectServerSettingsModal, provideServerSettingsModal] =
+	createContext<ServerSettingsModalContext>('root.vue', 'serverSettingsModalContext')
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index acb12e2cc8..5f8fa49059 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -164,7 +164,7 @@ importers:
     devDependencies:
       '@eslint/compat':
         specifier: ^1.1.1
-        version: 1.4.1(eslint@9.39.2(jiti@2.6.1))
+        version: 1.4.1(eslint@9.39.2(jiti@1.21.7))
       '@formatjs/cli':
         specifier: ^6.2.12
         version: 6.12.2(@vue/compiler-core@3.5.27)(vue@3.5.27(typescript@5.9.3))
@@ -173,22 +173,22 @@ importers:
         version: link:../../packages/tooling-config
       '@nuxt/eslint-config':
         specifier: ^0.5.6
-        version: 0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        version: 0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
       '@taijased/vue-render-tracker':
         specifier: ^1.0.7
         version: 1.0.7(vue@3.5.27(typescript@5.9.3))
       '@vitejs/plugin-vue':
         specifier: ^6.0.3
-        version: 6.0.4(vite@8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
+        version: 6.0.4(vite@8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.24(postcss@8.5.6)
       eslint:
         specifier: ^9.9.1
-        version: 9.39.2(jiti@2.6.1)
+        version: 9.39.2(jiti@1.21.7)
       eslint-plugin-turbo:
         specifier: ^2.5.4
-        version: 2.8.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.2)
+        version: 2.8.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.8.2)
       postcss:
         specifier: ^8.4.39
         version: 8.5.6
@@ -206,7 +206,7 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^8.0.0
-        version: 8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+        version: 8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue-component-type-helpers:
         specifier: ^3.1.8
         version: 3.2.4
@@ -610,6 +610,9 @@ importers:
       '@codemirror/view':
         specifier: ^6.22.1
         version: 6.39.12
+      '@intercom/messenger-js-sdk':
+        specifier: ^0.0.14
+        version: 0.0.14
       '@modrinth/api-client':
         specifier: workspace:*
         version: link:../api-client
@@ -634,6 +637,9 @@ importers:
       '@tresjs/post-processing':
         specifier: ^2.4.0
         version: 2.4.0(@tresjs/core@4.3.6(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))
+      '@types/dompurify':
+        specifier: ^3.0.5
+        version: 3.2.0
       '@types/markdown-it':
         specifier: ^14.1.1
         version: 14.1.2
@@ -664,6 +670,9 @@ importers:
       dayjs:
         specifier: ^1.11.10
         version: 1.11.19
+      dompurify:
+        specifier: ^3.1.7
+        version: 3.3.1
       es-toolkit:
         specifier: ^1.44.0
         version: 1.44.0
@@ -745,7 +754,7 @@ importers:
         version: 5.2.4(vite@5.4.21(@types/node@20.19.31)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))(vue@3.5.27(typescript@5.9.3))
       eslint-plugin-storybook:
         specifier: ^10.1.10
-        version: 10.2.4(eslint@9.39.2(jiti@1.21.7))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+        version: 10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
       storybook:
         specifier: ^10.1.10
         version: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -10974,11 +10983,11 @@ snapshots:
 
   '@eslint-community/regexpp@4.12.2': {}
 
-  '@eslint/compat@1.4.1(eslint@9.39.2(jiti@2.6.1))':
+  '@eslint/compat@1.4.1(eslint@9.39.2(jiti@1.21.7))':
     dependencies:
       '@eslint/core': 0.17.0
     optionalDependencies:
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
 
   '@eslint/config-array@0.21.1':
     dependencies:
@@ -11599,36 +11608,36 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
       '@eslint/js': 9.39.2
-      '@nuxt/eslint-plugin': 0.5.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/eslint-plugin': 8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@2.6.1)
-      eslint-config-flat-gitignore: 0.3.0(eslint@9.39.2(jiti@2.6.1))
+      '@nuxt/eslint-plugin': 0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-config-flat-gitignore: 0.3.0(eslint@9.39.2(jiti@1.21.7))
       eslint-flat-config-utils: 0.4.0
-      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-jsdoc: 50.8.0(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-regexp: 2.10.0(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-unicorn: 55.0.0(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-vue: 9.33.0(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-jsdoc: 50.8.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-regexp: 2.10.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-unicorn: 55.0.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-vue: 9.33.0(eslint@9.39.2(jiti@1.21.7))
       globals: 15.15.0
       local-pkg: 0.5.1
       pathe: 1.1.2
-      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@2.6.1))
+      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
     transitivePeerDependencies:
       - '@typescript-eslint/utils'
       - eslint-import-resolver-node
       - supports-color
       - typescript
 
-  '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@2.6.1)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -13105,6 +13114,18 @@ snapshots:
 
   '@stripe/stripe-js@7.9.0': {}
 
+  '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      estraverse: 5.3.0
+      picomatch: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
@@ -13116,6 +13137,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
       - typescript
+    optional: true
 
   '@svgdotjs/svg.draggable.js@3.0.6(@svgdotjs/svg.js@3.2.5)':
     dependencies:
@@ -13517,6 +13539,22 @@ snapshots:
     dependencies:
       '@types/node': 20.19.31
 
+  '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.54.0
+      '@typescript-eslint/type-utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.54.0
+      eslint: 9.39.2(jiti@1.21.7)
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -13533,6 +13571,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.54.0
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.54.0
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.54.0
@@ -13563,6 +13613,18 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
+  '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -13733,10 +13795,10 @@ snapshots:
       vite: 7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue: 3.5.27(typescript@5.9.3)
 
-  '@vitejs/plugin-vue@6.0.4(vite@8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
+  '@vitejs/plugin-vue@6.0.4(vite@8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-rc.2
-      vite: 8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue: 3.5.27(typescript@5.9.3)
 
   '@vitest/expect@3.2.4':
@@ -15262,10 +15324,10 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@2.6.1)):
+  eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@1.21.7)):
     dependencies:
-      '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@2.6.1))
-      eslint: 9.39.2(jiti@2.6.1)
+      '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@1.21.7))
+      eslint: 9.39.2(jiti@1.21.7)
       find-up-simple: 1.0.1
 
   eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)):
@@ -15283,12 +15345,12 @@ snapshots:
     optionalDependencies:
       unrs-resolver: 1.11.1
 
-  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)):
     dependencies:
       '@typescript-eslint/types': 8.54.0
       comment-parser: 1.4.5
       debug: 4.4.3
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
       eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
       is-glob: 4.0.3
       minimatch: 10.1.2
@@ -15296,18 +15358,18 @@ snapshots:
       stable-hash-x: 0.2.0
       unrs-resolver: 1.11.1
     optionalDependencies:
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@1.21.7)):
     dependencies:
       '@es-joy/jsdoccomment': 0.50.2
       are-docs-informative: 0.0.2
       comment-parser: 1.4.1
       debug: 4.4.3
       escape-string-regexp: 4.0.0
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
       espree: 10.4.0
       esquery: 1.7.0
       parse-imports-exports: 0.2.4
@@ -15325,12 +15387,12 @@ snapshots:
     optionalDependencies:
       eslint-config-prettier: 10.1.8(eslint@9.39.2(jiti@2.6.1))
 
-  eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@1.21.7)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
       '@eslint-community/regexpp': 4.12.2
       comment-parser: 1.4.5
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
       jsdoc-type-pratt-parser: 4.8.0
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
@@ -15340,29 +15402,29 @@ snapshots:
     dependencies:
       eslint: 9.39.2(jiti@2.6.1)
 
-  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@1.21.7))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3):
+  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@2.6.1)
       storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-turbo@2.8.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.2):
+  eslint-plugin-turbo@2.8.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.8.2):
     dependencies:
       dotenv: 16.0.3
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
       turbo: 2.8.2
 
-  eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@1.21.7)):
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
       ci-info: 4.4.0
       clean-regexp: 1.0.0
       core-js-compat: 3.48.0
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
       esquery: 1.7.0
       globals: 15.15.0
       indent-string: 4.0.0
@@ -15389,16 +15451,16 @@ snapshots:
       '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
 
-  eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@1.21.7)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
-      eslint: 9.39.2(jiti@2.6.1)
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      eslint: 9.39.2(jiti@1.21.7)
       globals: 13.24.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.2
       semver: 7.7.3
-      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@2.6.1))
+      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -19782,7 +19844,7 @@ snapshots:
       terser: 5.46.0
       yaml: 2.8.2
 
-  vite@8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
+  vite@8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
     dependencies:
       lightningcss: 1.32.0
       picomatch: 4.0.4
@@ -19793,7 +19855,7 @@ snapshots:
       '@types/node': 20.19.31
       esbuild: 0.27.3
       fsevents: 2.3.3
-      jiti: 2.6.1
+      jiti: 1.21.7
       sass: 1.97.3
       terser: 5.46.0
       yaml: 2.8.2
@@ -19958,10 +20020,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@2.6.1)):
+  vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@1.21.7)):
     dependencies:
       debug: 4.4.3
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1

From e713ada7c57916cf893b527d561ba5cdcc3f534a Mon Sep 17 00:00:00 2001
From: Truman Gao <106889354+tdgao@users.noreply.github.com>
Date: Fri, 3 Apr 2026 05:01:37 -0700
Subject: [PATCH 10/50] qa pass (#5738)

---
 apps/frontend/src/pages/hosting/index.vue                 | 2 +-
 .../servers/server-list-empty/ServerListEmpty.vue         | 8 ++++----
 packages/ui/src/stories/servers/ServerListing.stories.ts  | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/pages/hosting/index.vue b/apps/frontend/src/pages/hosting/index.vue
index b2743a985c..84734ba18a 100644
--- a/apps/frontend/src/pages/hosting/index.vue
+++ b/apps/frontend/src/pages/hosting/index.vue
@@ -643,6 +643,7 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	IntlFormatted,
+	LoaderIcon,
 	ModrinthServersPurchaseModal,
 	useFormatPrice,
 	useVIntl,
@@ -652,7 +653,6 @@ import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 
 import OptionGroup from '~/components/ui/OptionGroup.vue'
-import { LoaderIcon } from '@modrinth/ui/src/components/servers/icons'
 import MedalPlanPromotion from '~/components/ui/servers/marketing/MedalPlanPromotion.vue'
 import ServerPlanSelector from '~/components/ui/servers/marketing/ServerPlanSelector.vue'
 import { products } from '~/generated/state.json'
diff --git a/packages/ui/src/components/servers/server-list-empty/ServerListEmpty.vue b/packages/ui/src/components/servers/server-list-empty/ServerListEmpty.vue
index 51dd4825c6..bf4114d432 100644
--- a/packages/ui/src/components/servers/server-list-empty/ServerListEmpty.vue
+++ b/packages/ui/src/components/servers/server-list-empty/ServerListEmpty.vue
@@ -1,7 +1,7 @@
 <template>
-	<div class="flex gap-8 items-center justify-center py-10">
+	<div class="grid grid-cols-2 gap-8 items-center justify-center py-10 max-w-[760px]">
 		<!-- Left column -->
-		<div class="flex flex-col gap-8 items-start pr-8 shrink-0 w-[380px]">
+		<div class="flex flex-col gap-8 items-start pr-8 shrink-0">
 			<!-- Heading -->
 			<div class="flex flex-col gap-2 items-start w-[300px]">
 				<p class="text-sm text-secondary">{{ formatMessage(messages.modrinthHostingLabel) }}</p>
@@ -65,7 +65,7 @@
 			</div>
 
 			<!-- CTA section -->
-			<div class="flex flex-col gap-6 items-start w-[300px]">
+			<div class="flex flex-col gap-6 items-start">
 				<div class="flex flex-col gap-3 items-start">
 					<ButtonStyled color="brand">
 						<button @click="onClickNewServer?.()">
@@ -104,7 +104,7 @@
 
 		<!-- Right column - mod icon grid -->
 		<div
-			class="relative flex h-[617px] w-[380px] shrink-0 items-center justify-center overflow-hidden rounded-[40px] pointer-events-none select-none [mask-image:linear-gradient(to_bottom,black_0%,black_35%,transparent_100%)] [-webkit-mask-image:linear-gradient(to_bottom,black_0%,black_35%,transparent_100%)]"
+			class="relative flex h-[617px] shrink-0 items-center justify-center overflow-hidden rounded-[40px] pointer-events-none select-none [mask-image:linear-gradient(to_bottom,black_0%,black_35%,transparent_100%)] [-webkit-mask-image:linear-gradient(to_bottom,black_0%,black_35%,transparent_100%)]"
 		>
 			<div class="rotate-[15deg]">
 				<div class="flex flex-col gap-4">
diff --git a/packages/ui/src/stories/servers/ServerListing.stories.ts b/packages/ui/src/stories/servers/ServerListing.stories.ts
index 45a1c5ba5e..d1fff61904 100644
--- a/packages/ui/src/stories/servers/ServerListing.stories.ts
+++ b/packages/ui/src/stories/servers/ServerListing.stories.ts
@@ -89,7 +89,7 @@ export const Provisioning: Story = {
 	args: {
 		...baseServer,
 		name: 'My New Server',
-		status: 'installing',
+		isProvisioning: true,
 	},
 }
 

From 7eb7b5f27aa6ec04d82c8c25d106848aec40544f Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Fri, 3 Apr 2026 14:53:48 +0200
Subject: [PATCH 11/50] fix: qa

---
 .../ui/src/components/base/BaseTerminal.vue   | 64 ++++++++++++++++++-
 .../ui/src/components/base/ButtonStyled.vue   |  3 +
 packages/ui/src/composables/terminal.ts       |  2 +
 .../components/ConsoleActionButtons.vue       |  4 +-
 .../ui/src/layouts/shared/console/layout.vue  |  9 ++-
 5 files changed, 75 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/base/BaseTerminal.vue b/packages/ui/src/components/base/BaseTerminal.vue
index c501d7292f..d08b3e2b28 100644
--- a/packages/ui/src/components/base/BaseTerminal.vue
+++ b/packages/ui/src/components/base/BaseTerminal.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		class="flex w-full flex-col bg-surface-2 overflow-hidden rounded-[20px] border border-solid border-surface-4"
-		:style="!fullscreen && componentHeight ? { height: componentHeight + 'px' } : {}"
+		:style="fullscreen && snappedHeight ? { maxHeight: snappedHeight + 'px' } : (!fullscreen && componentHeight ? { height: componentHeight + 'px' } : {})"
 		:class="{ 'h-full': fullscreen }"
 	>
 		<div class="relative min-h-0 flex-1 overflow-hidden">
@@ -45,7 +45,7 @@
 <script setup lang="ts">
 import { ChevronDownIcon, TerminalSquareIcon, XIcon } from '@modrinth/assets'
 import type { Terminal } from '@xterm/xterm'
-import { nextTick, ref } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import StyledInput from '#ui/components/base/StyledInput.vue'
@@ -75,18 +75,76 @@ const inputRef = ref<HTMLElement | null>(null)
 const commandInput = ref('')
 const componentHeight = ref(0)
 
-const { terminal, searchAddon, isAtBottom, write, writeln, clear, reset, fit, scrollToBottom } =
+const snappedHeight = ref<number | null>(null)
+
+const { terminal, searchAddon, isAtBottom, write, writeln, clear, reset, fit: rawFit, scrollToBottom } =
 	useTerminal({
 		container: containerRef,
 		scrollback: props.scrollback,
 		onReady: (term) => {
 			nextTick(() => {
 				updateComponentHeight()
+				snapToRows()
 			})
 			emit('ready', term)
 		},
+		onResize: () => {
+			updateComponentHeight()
+		},
 	})
 
+function snapToRows() {
+	if (!props.fullscreen) {
+		snappedHeight.value = null
+		return
+	}
+	const screen = containerRef.value?.querySelector('.xterm-screen') as HTMLElement | null
+	if (!screen) {
+		snappedHeight.value = null
+		return
+	}
+	const inputH = inputRef.value?.offsetHeight ?? 0
+	const borderW = 2
+	snappedHeight.value = screen.offsetHeight + inputH + borderW
+}
+
+let resizeDebounce: ReturnType<typeof setTimeout> | null = null
+
+function handleWindowResize() {
+	if (!props.fullscreen) return
+	if (resizeDebounce) clearTimeout(resizeDebounce)
+	snappedHeight.value = null
+	resizeDebounce = setTimeout(() => {
+		rawFit()
+		nextTick(() => snapToRows())
+	}, 50)
+}
+
+onMounted(() => {
+	window.addEventListener('resize', handleWindowResize)
+})
+
+onBeforeUnmount(() => {
+	window.removeEventListener('resize', handleWindowResize)
+	if (resizeDebounce) clearTimeout(resizeDebounce)
+})
+
+function fit() {
+	rawFit()
+	snapToRows()
+}
+
+watch(() => props.fullscreen, () => {
+	if (props.fullscreen) {
+		nextTick(() => {
+			rawFit()
+			nextTick(() => snapToRows())
+		})
+	} else {
+		snappedHeight.value = null
+	}
+})
+
 function updateComponentHeight() {
 	const screen = containerRef.value?.querySelector('.xterm-screen') as HTMLElement | null
 	if (!screen) return
diff --git a/packages/ui/src/components/base/ButtonStyled.vue b/packages/ui/src/components/base/ButtonStyled.vue
index 8efe520a4d..f83d789535 100644
--- a/packages/ui/src/components/base/ButtonStyled.vue
+++ b/packages/ui/src/components/base/ButtonStyled.vue
@@ -204,6 +204,9 @@ const colorVariables = computed(() => {
 
 	if (props.type === 'outlined' || props.type === 'transparent') {
 		colors.bg = 'transparent'
+		if (props.hoverColorFill === 'none') {
+			hoverColors.bg = 'transparent'
+		}
 		colors = setColorFill(colors, props.colorFill === 'auto' ? 'text' : props.colorFill)
 		hoverColors = setColorFill(
 			hoverColors,
diff --git a/packages/ui/src/composables/terminal.ts b/packages/ui/src/composables/terminal.ts
index e3917817a5..01ac168dd1 100644
--- a/packages/ui/src/composables/terminal.ts
+++ b/packages/ui/src/composables/terminal.ts
@@ -62,6 +62,7 @@ export interface UseTerminalOptions {
 	options?: ITerminalOptions
 	scrollback?: number
 	onReady?: (terminal: Terminal) => void
+	onResize?: () => void
 }
 
 export interface UseTerminalReturn {
@@ -220,6 +221,7 @@ export function useTerminal(options: UseTerminalOptions): UseTerminalReturn {
 			if (d) {
 				term.resize(d.cols, d.rows)
 			}
+			options.onResize?.()
 		})
 		resizeObserver.observe(container)
 
diff --git a/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue b/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
index e409a97763..741b8fc261 100644
--- a/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
+++ b/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="flex items-center gap-0.5">
-		<ButtonStyled type="transparent" circular>
+		<ButtonStyled type="transparent" circular hover-color-fill="none">
 			<button @click="emit('clear')">
 				<XIcon />
 				Clear
 			</button>
 		</ButtonStyled>
-		<ButtonStyled type="transparent" circular>
+		<ButtonStyled type="transparent" circular hover-color-fill="none">
 			<button :disabled="shareDisabled" @click="emit('share')">
 				<ShareIcon />
 				Share
diff --git a/packages/ui/src/layouts/shared/console/layout.vue b/packages/ui/src/layouts/shared/console/layout.vue
index dec5ec4959..b1d91190ca 100644
--- a/packages/ui/src/layouts/shared/console/layout.vue
+++ b/packages/ui/src/layouts/shared/console/layout.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		class="flex min-h-0 flex-col"
-		:class="isFullscreen ? 'fixed inset-0 z-50 bg-surface-1 p-6' : 'gap-4'"
+		:class="isFullscreen ? 'fixed inset-0 z-50 bg-surface-1 p-6 pt-12' : 'gap-4'"
 	>
 		<template v-if="!isFullscreen">
 			<div class="flex items-center gap-2">
@@ -45,7 +45,7 @@
 		<BaseTerminal
 			ref="terminalRef"
 			class="min-h-0"
-			:class="{ 'flex-1': isFullscreen }"
+			:class="{ 'flex-1 my-auto': isFullscreen }"
 			:show-input="resolvedShowInput"
 			:fullscreen="isFullscreen"
 			@command="handleCommand"
@@ -64,6 +64,7 @@ import BaseTerminal from '#ui/components/base/BaseTerminal.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import DropdownSelect from '#ui/components/base/DropdownSelect.vue'
 import StyledInput from '#ui/components/base/StyledInput.vue'
+import { injectModalBehavior } from '#ui/providers/modal-behavior'
 
 import ConsoleActionButtons from './components/ConsoleActionButtons.vue'
 import ConsoleFilterPills from './components/ConsoleFilterPills.vue'
@@ -72,6 +73,7 @@ import { injectConsoleManager } from './providers'
 import type { LogLevel } from './types'
 
 const ctx = injectConsoleManager()
+const modalBehavior = injectModalBehavior()
 
 const terminalRef = ref<InstanceType<typeof BaseTerminal> | null>(null)
 const searchQuery = ref('')
@@ -81,6 +83,7 @@ const { activeFilters, toggleFilter, buildFilterPredicate } = useConsoleFilters(
 onBeforeUnmount(() => {
 	if (isFullscreen.value) {
 		document.body.style.overflow = ''
+		modalBehavior?.onHide?.()
 	}
 })
 
@@ -120,6 +123,7 @@ function rewriteFiltered() {
 function enterFullscreen() {
 	isFullscreen.value = true
 	document.body.style.overflow = 'hidden'
+	modalBehavior?.onShow?.()
 	nextTick(() => {
 		terminalRef.value?.fit()
 	})
@@ -128,6 +132,7 @@ function enterFullscreen() {
 function exitFullscreen() {
 	isFullscreen.value = false
 	document.body.style.overflow = ''
+	modalBehavior?.onHide?.()
 	nextTick(() => {
 		terminalRef.value?.fit()
 	})

From 18218d6e58a42efedc4675ea011e513b3d654e3b Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Fri, 3 Apr 2026 15:51:42 +0200
Subject: [PATCH 12/50] feat: qa

---
 .../ui/src/components/base/BaseTerminal.vue   | 84 ++++++++++++-------
 .../composables/server-manage-core-runtime.ts | 12 +--
 packages/ui/src/composables/terminal.ts       |  1 +
 .../components/ConsoleActionButtons.vue       |  9 +-
 .../ui/src/layouts/shared/console/layout.vue  | 13 +--
 .../manage/components/ServerManageStats.vue   | 39 +++++----
 6 files changed, 95 insertions(+), 63 deletions(-)

diff --git a/packages/ui/src/components/base/BaseTerminal.vue b/packages/ui/src/components/base/BaseTerminal.vue
index d08b3e2b28..88ac95d520 100644
--- a/packages/ui/src/components/base/BaseTerminal.vue
+++ b/packages/ui/src/components/base/BaseTerminal.vue
@@ -1,11 +1,17 @@
 <template>
 	<div
 		class="flex w-full flex-col bg-surface-2 overflow-hidden rounded-[20px] border border-solid border-surface-4"
-		:style="fullscreen && snappedHeight ? { maxHeight: snappedHeight + 'px' } : (!fullscreen && componentHeight ? { height: componentHeight + 'px' } : {})"
+		:style="
+			fullscreen && snappedHeight
+				? { maxHeight: snappedHeight + 'px' }
+				: !fullscreen && componentHeight
+					? { height: componentHeight + 'px' }
+					: {}
+		"
 		:class="{ 'h-full': fullscreen }"
 	>
 		<div class="relative min-h-0 flex-1 overflow-hidden">
-			<div ref="containerRef" class="size-full pl-2" />
+			<div ref="containerRef" class="size-full pl-2 mt-0.5" />
 			<div v-if="fullscreen" class="absolute top-4 right-4 z-10">
 				<ButtonStyled circular type="highlight">
 					<button
@@ -18,8 +24,8 @@
 				</ButtonStyled>
 			</div>
 			<div v-if="!isAtBottom" class="absolute bottom-4 right-4">
-				<ButtonStyled circular type="highlight">
-					<button class="!shadow-none" aria-label="Scroll to bottom" @click="scrollToBottom">
+				<ButtonStyled circular type="highlight" size="large">
+					<button class="!shadow-2xl" aria-label="Scroll to bottom" @click="scrollToBottom">
 						<ChevronDownIcon />
 					</button>
 				</ButtonStyled>
@@ -77,21 +83,30 @@ const componentHeight = ref(0)
 
 const snappedHeight = ref<number | null>(null)
 
-const { terminal, searchAddon, isAtBottom, write, writeln, clear, reset, fit: rawFit, scrollToBottom } =
-	useTerminal({
-		container: containerRef,
-		scrollback: props.scrollback,
-		onReady: (term) => {
-			nextTick(() => {
-				updateComponentHeight()
-				snapToRows()
-			})
-			emit('ready', term)
-		},
-		onResize: () => {
+const {
+	terminal,
+	searchAddon,
+	isAtBottom,
+	write,
+	writeln,
+	clear,
+	reset,
+	fit: rawFit,
+	scrollToBottom,
+} = useTerminal({
+	container: containerRef,
+	scrollback: props.scrollback,
+	onReady: (term) => {
+		nextTick(() => {
 			updateComponentHeight()
-		},
-	})
+			snapToRows()
+		})
+		emit('ready', term)
+	},
+	onResize: () => {
+		updateComponentHeight()
+	},
+})
 
 function snapToRows() {
 	if (!props.fullscreen) {
@@ -134,16 +149,19 @@ function fit() {
 	snapToRows()
 }
 
-watch(() => props.fullscreen, () => {
-	if (props.fullscreen) {
-		nextTick(() => {
-			rawFit()
-			nextTick(() => snapToRows())
-		})
-	} else {
-		snappedHeight.value = null
-	}
-})
+watch(
+	() => props.fullscreen,
+	() => {
+		if (props.fullscreen) {
+			nextTick(() => {
+				rawFit()
+				nextTick(() => snapToRows())
+			})
+		} else {
+			snappedHeight.value = null
+		}
+	},
+)
 
 function updateComponentHeight() {
 	const screen = containerRef.value?.querySelector('.xterm-screen') as HTMLElement | null
@@ -184,4 +202,14 @@ defineExpose({
 	margin-left: auto !important;
 	margin-right: auto !important;
 }
+
+.xterm-scrollable-element > .scrollbar.vertical {
+	width: 8px !important;
+}
+
+.xterm-scrollable-element > .scrollbar.vertical > div {
+	width: 6px !important;
+	border-radius: 8px !important;
+	contain: layout style !important;
+}
 </style>
diff --git a/packages/ui/src/composables/server-manage-core-runtime.ts b/packages/ui/src/composables/server-manage-core-runtime.ts
index 46a0545030..5b5d89f0d3 100644
--- a/packages/ui/src/composables/server-manage-core-runtime.ts
+++ b/packages/ui/src/composables/server-manage-core-runtime.ts
@@ -177,15 +177,17 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 	const updateStats = (currentStats: Stats['current']) => {
 		if (!shouldProcessEvent()) return
 		if (!isConnected.value) isConnected.value = true
+		cpuData.value = appendGraphData(cpuData.value, currentStats.cpu_percent)
+		ramData.value = appendGraphData(
+			ramData.value,
+			Math.floor((currentStats.ram_usage_bytes / currentStats.ram_total_bytes) * 100),
+		)
 		stats.value = {
 			current: currentStats,
 			past: { ...stats.value.current },
 			graph: {
-				cpu: appendGraphData(cpuData.value, currentStats.cpu_percent),
-				ram: appendGraphData(
-					ramData.value,
-					Math.floor((currentStats.ram_usage_bytes / currentStats.ram_total_bytes) * 100),
-				),
+				cpu: cpuData.value,
+				ram: ramData.value,
 			},
 		}
 	}
diff --git a/packages/ui/src/composables/terminal.ts b/packages/ui/src/composables/terminal.ts
index 01ac168dd1..ffed411957 100644
--- a/packages/ui/src/composables/terminal.ts
+++ b/packages/ui/src/composables/terminal.ts
@@ -54,6 +54,7 @@ function buildTerminalTheme() {
 		scrollbarSliderBackground: surface5,
 		scrollbarSliderHoverBackground: surface5,
 		scrollbarSliderActiveBackground: surface5,
+		overviewRulerBorder: 'transparent',
 	}
 }
 
diff --git a/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue b/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
index 741b8fc261..de055664a7 100644
--- a/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
+++ b/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
@@ -12,11 +12,17 @@
 				Share
 			</button>
 		</ButtonStyled>
+		<ButtonStyled type="transparent" circular hover-color-fill="none">
+			<button @click="emit('expand')">
+				<ExpandIcon />
+				Expand
+			</button>
+		</ButtonStyled>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { ShareIcon, XIcon } from '@modrinth/assets'
+import { ExpandIcon, ShareIcon, XIcon } from '@modrinth/assets'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 
@@ -27,5 +33,6 @@ defineProps<{
 const emit = defineEmits<{
 	clear: []
 	share: []
+	expand: []
 }>()
 </script>
diff --git a/packages/ui/src/layouts/shared/console/layout.vue b/packages/ui/src/layouts/shared/console/layout.vue
index b1d91190ca..5222c9463e 100644
--- a/packages/ui/src/layouts/shared/console/layout.vue
+++ b/packages/ui/src/layouts/shared/console/layout.vue
@@ -21,15 +21,6 @@
 					class="w-[220px]"
 					@update:model-value="handleLogSourceChange"
 				/>
-				<ButtonStyled circular>
-					<button
-						v-tooltip="'Open fullscreen'"
-						aria-label="Open fullscreen"
-						@click="enterFullscreen"
-					>
-						<ExpandIcon />
-					</button>
-				</ButtonStyled>
 			</div>
 
 			<div class="flex items-center justify-between">
@@ -38,6 +29,7 @@
 					:share-disabled="resolvedShareDisabled"
 					@clear="handleClear"
 					@share="handleShare"
+					@expand="enterFullscreen"
 				/>
 			</div>
 		</template>
@@ -56,12 +48,11 @@
 </template>
 
 <script setup lang="ts">
-import { ExpandIcon, SearchIcon } from '@modrinth/assets'
+import { SearchIcon } from '@modrinth/assets'
 import type { Terminal } from '@xterm/xterm'
 import { computed, isRef, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 
 import BaseTerminal from '#ui/components/base/BaseTerminal.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import DropdownSelect from '#ui/components/base/DropdownSelect.vue'
 import StyledInput from '#ui/components/base/StyledInput.vue'
 import { injectModalBehavior } from '#ui/providers/modal-behavior'
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue b/packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue
index b309775748..81413b507e 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue
@@ -20,7 +20,7 @@
 		>
 			<div class="relative z-10 flex flex-col gap-2">
 				<div class="flex items-center justify-between">
-					<span class="flex items-center gap-2 font-medium text-primary">
+					<span class="stat-drop-shadow flex items-center gap-2 font-medium text-lg text-primary">
 						{{ metric.title }}
 						<IssuesIcon
 							v-if="metric.warning && !loading"
@@ -30,18 +30,18 @@
 						/>
 					</span>
 					<span class="relative">
-						<component :is="metric.icon" class="relative z-10 size-7" />
-						<div
+						<component :is="metric.icon" class="stat-drop-shadow relative z-10 size-8" />
+						<!-- <div
 							class="absolute -right-4 -top-4 -z-10 size-14 rounded-full bg-surface-3 opacity-50 blur-lg"
-						/>
+						/> -->
 					</span>
 				</div>
-				<span class="text-4xl font-semibold text-contrast">
+				<span class="stat-drop-shadow text-4xl font-semibold text-contrast">
 					{{ metric.value }}
 				</span>
-				<div
+				<!-- <div
 					class="absolute -left-8 -top-4 -z-10 h-28 w-56 rounded-full bg-surface-3 opacity-50 blur-lg"
-				/>
+				/> -->
 			</div>
 
 			<div v-if="metric.showGraph" class="chart-space absolute bottom-0 left-0 right-0">
@@ -64,7 +64,7 @@
 import { CpuIcon, DatabaseIcon, FolderOpenIcon, IssuesIcon } from '@modrinth/assets'
 import type { Stats } from '@modrinth/utils'
 import { useStorage } from '@vueuse/core'
-import { type Component, computed, onMounted, ref, shallowRef, watch } from 'vue'
+import { type Component, computed, onMounted, shallowRef, ref, watch } from 'vue'
 import { RouterLink } from 'vue-router'
 
 import { injectModrinthServerContext } from '#ui/providers'
@@ -100,8 +100,15 @@ const stats = shallowRef(
 	},
 )
 
-const cpuData = ref<number[]>(Array(20).fill(0))
-const ramData = ref<number[]>(Array(20).fill(0))
+const GRAPH_SIZE = 20
+
+const padGraph = (data: number[]) => {
+	if (data.length >= GRAPH_SIZE) return data.slice(-GRAPH_SIZE)
+	return [...Array(GRAPH_SIZE - data.length).fill(0), ...data]
+}
+
+const cpuData = computed(() => padGraph(props.data?.graph.cpu ?? []))
+const ramData = computed(() => padGraph(props.data?.graph.ram ?? []))
 
 onMounted(async () => {
 	apexChartComponent.value = (await import('vue3-apexcharts')).default
@@ -122,11 +129,6 @@ const formatBytes = (bytes: number) => {
 	return `${Math.round(value * 10) / 10} ${units[unit]}`
 }
 
-const updateGraphData = (arr: number[], newValue: number) => {
-	arr.push(newValue)
-	arr.shift()
-}
-
 const metrics = computed(() => {
 	const storageMetric = {
 		title: 'Storage',
@@ -168,9 +170,6 @@ const metrics = computed(() => {
 	)
 	const cpuPercent = Math.min(stats.value.cpu_percent, 100)
 
-	updateGraphData(cpuData.value, cpuPercent)
-	updateGraphData(ramData.value, ramPercent)
-
 	return [
 		{
 			title: 'CPU',
@@ -256,6 +255,10 @@ watch(
 </script>
 
 <style scoped>
+.stat-drop-shadow {
+	filter: drop-shadow(0 4px 6px var(--surface-3));
+}
+
 .chart-space {
 	height: 142px;
 	width: calc(100% + 40px);

From aab0c3cb876f18c8207db3e7cc901d1dfa89a928 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 3 Apr 2026 13:48:43 -0600
Subject: [PATCH 13/50] fix: server icon fetch fails due to global node auth
 race condition overriding each other

---
 .../api-client/src/modules/kyros/files/v0.ts  | 55 +++++++++++++++++++
 packages/api-client/src/platform/tauri.ts     | 29 +++++++++-
 .../src/components/servers/ServerListing.vue  | 37 ++++++++++---
 3 files changed, 112 insertions(+), 9 deletions(-)

diff --git a/packages/api-client/src/modules/kyros/files/v0.ts b/packages/api-client/src/modules/kyros/files/v0.ts
index 4712c08379..535a4dbc37 100644
--- a/packages/api-client/src/modules/kyros/files/v0.ts
+++ b/packages/api-client/src/modules/kyros/files/v0.ts
@@ -1,12 +1,19 @@
 import { AbstractModule } from '../../../core/abstract-module'
 import type { UploadHandle, UploadProgress } from '../../../types/upload'
+import type { Archon } from '../../archon/types'
 import type { Kyros } from '../types'
 
+type NodeFsAuth = Pick<Archon.Servers.v0.JWTAuth, 'url' | 'token'>
+
 export class KyrosFilesV0Module extends AbstractModule {
 	public getModuleID(): string {
 		return 'kyros_files_v0'
 	}
 
+	private getNodeBaseUrl(auth: NodeFsAuth): string {
+		return `https://${auth.url.replace(/\/modrinth\/v\d+\/fs\/?$/, '')}`
+	}
+
 	/**
 	 * List directory contents with pagination
 	 *
@@ -62,6 +69,24 @@ export class KyrosFilesV0Module extends AbstractModule {
 		})
 	}
 
+	/**
+	 * Download a file using explicit filesystem auth credentials.
+	 *
+	 * @param auth - Filesystem auth (url + token) from Archon
+	 * @param path - File path (e.g., "/server-icon.png")
+	 * @returns Promise resolving to file Blob
+	 */
+	public async downloadFileWithAuth(auth: NodeFsAuth, path: string): Promise<Blob> {
+		return this.client.request<Blob>('/fs/download', {
+			api: this.getNodeBaseUrl(auth),
+			version: 'modrinth/v0',
+			method: 'GET',
+			params: { path },
+			headers: { Authorization: `Bearer ${auth.token}` },
+			skipAuth: true,
+		})
+	}
+
 	/**
 	 * Upload a file to a server's filesystem with progress tracking
 	 *
@@ -89,6 +114,36 @@ export class KyrosFilesV0Module extends AbstractModule {
 		})
 	}
 
+	/**
+	 * Upload a file using explicit filesystem auth credentials.
+	 *
+	 * @param auth - Filesystem auth (url + token) from Archon
+	 * @param path - Destination path (e.g., "/server-icon.png")
+	 * @param file - File to upload
+	 * @param options - Optional progress callback and feature overrides
+	 * @returns UploadHandle with promise, onProgress, and cancel
+	 */
+	public uploadFileWithAuth(
+		auth: NodeFsAuth,
+		path: string,
+		file: File | Blob,
+		options?: {
+			onProgress?: (progress: UploadProgress) => void
+			retry?: boolean | number
+		},
+	): UploadHandle<void> {
+		return this.client.upload<void>('/fs/create', {
+			api: this.getNodeBaseUrl(auth),
+			version: 'modrinth/v0',
+			file,
+			params: { path, type: 'file' },
+			headers: { Authorization: `Bearer ${auth.token}` },
+			onProgress: options?.onProgress,
+			retry: options?.retry,
+			skipAuth: true,
+		})
+	}
+
 	/**
 	 * Update file contents
 	 *
diff --git a/packages/api-client/src/platform/tauri.ts b/packages/api-client/src/platform/tauri.ts
index 7e57fc2a53..6b3c2ed616 100644
--- a/packages/api-client/src/platform/tauri.ts
+++ b/packages/api-client/src/platform/tauri.ts
@@ -103,11 +103,38 @@ export class TauriModrinthClient extends XHRUploadClient {
 				throw error
 			}
 
+			// Handle binary downloads (e.g. kyros fs files) before JSON parsing.
+			const contentType = response.headers.get('content-type')?.toLowerCase() ?? ''
+			if (fullUrl.includes('/fs/download')) {
+				return (await response.blob()) as T
+			}
+			if (
+				contentType.startsWith('image/') ||
+				contentType.startsWith('audio/') ||
+				contentType.startsWith('video/') ||
+				contentType.includes('application/octet-stream')
+			) {
+				return (await response.blob()) as T
+			}
+
+			if (response.status === 204 || response.status === 205) {
+				return undefined as T
+			}
+
+			if (contentType.includes('application/json') || contentType.includes('+json')) {
+				return (await response.json()) as T
+			}
+
 			const text = await response.text()
 			if (!text) {
 				return undefined as T
 			}
-			return JSON.parse(text) as T
+
+			try {
+				return JSON.parse(text) as T
+			} catch {
+				return text as T
+			}
 		} catch (error) {
 			throw this.normalizeError(error)
 		}
diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index c52e8af693..1cd3c5bfab 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -396,7 +396,7 @@ type ServerListingProps = {
 
 const props = defineProps<ServerListingProps>()
 
-const { kyros, labrinth } = injectModrinthClient()
+const { archon, kyros, labrinth } = injectModrinthClient()
 
 const isConfiguring = computed(() => props.flows?.intro)
 const isUpgrading = computed(
@@ -514,11 +514,30 @@ const { data: image } = useQuery({
 		if (!props.server_id || props.status !== 'available') return null
 
 		try {
+			const fsAuth = await archon.servers_v0.getFilesystemAuth(props.server_id)
+
 			try {
-				const blob = await kyros.files_v0.downloadFile('/server-icon-original.png')
+				const blob = await kyros.files_v0.downloadFileWithAuth(fsAuth, '/server-icon.png')
+				return await processImageBlob(blob, 64)
+			} catch (error) {
+				const statusCode = (error as { statusCode?: number })?.statusCode
+				if (statusCode != null && statusCode !== 404) {
+					throw error
+				}
+
+				try {
+					const originalBlob = await kyros.files_v0.downloadFileWithAuth(
+						fsAuth,
+						'/server-icon-original.png',
+					)
+					return await processImageBlob(originalBlob, 64)
+				} catch (originalError) {
+					const originalStatusCode = (originalError as { statusCode?: number })?.statusCode
+					if (originalStatusCode != null && originalStatusCode !== 404) {
+						throw originalError
+					}
+				}
 
-				return await processImageBlob(blob, 512)
-			} catch {
 				const projectIcon = iconUrl.value
 				if (projectIcon) {
 					const response = await fetch(projectIcon)
@@ -528,22 +547,24 @@ const { data: image } = useQuery({
 					const scaledBlob = await dataURLToBlob(scaledDataUrl)
 					const scaledFile = new File([scaledBlob], 'server-icon.png', { type: 'image/png' })
 
-					kyros.files_v0.uploadFile('/server-icon.png', scaledFile)
+					await kyros.files_v0.uploadFileWithAuth(fsAuth, '/server-icon.png', scaledFile).promise
 
 					const originalFile = new File([blob], 'server-icon-original.png', {
 						type: 'image/png',
 					})
-					kyros.files_v0.uploadFile('/server-icon-original.png', originalFile)
+					await kyros.files_v0
+						.uploadFileWithAuth(fsAuth, '/server-icon-original.png', originalFile)
+						.promise
 
 					return scaledDataUrl
 				}
 			}
+
+			return null
 		} catch (error) {
 			console.debug('Icon processing failed:', error)
 			return null
 		}
-
-		return null
 	},
 	enabled: computed(() => !!props.server_id && props.status === 'available'),
 })

From c9547c12bd4665f76f44173bd70a4060238f2b58 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 3 Apr 2026 13:56:34 -0600
Subject: [PATCH 14/50] fix: lint

---
 apps/app-frontend/src/pages/Browse.vue             |  2 +-
 .../src/components/ui/thread/ThreadView.vue        |  3 +--
 apps/frontend/src/layouts/default.vue              |  2 +-
 .../ui/src/components/servers/ServerListing.vue    |  3 +--
 .../src/components/servers/ServerSettingsModal.vue | 14 +++++++-------
 .../manage/components/ServerManageStats.vue        |  2 +-
 6 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/apps/app-frontend/src/pages/Browse.vue b/apps/app-frontend/src/pages/Browse.vue
index cac5cbff29..386bac5159 100644
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -47,8 +47,8 @@ import { get_project_v3, get_search_results_v3 } from '@/helpers/cache.js'
 import { process_listener } from '@/helpers/events'
 import { get_by_profile_path } from '@/helpers/process'
 import {
-	get_installed_project_ids as getInstalledProjectIds,
 	get as getInstance,
+	get_installed_project_ids as getInstalledProjectIds,
 	kill,
 	list as listInstances,
 } from '@/helpers/profile.js'
diff --git a/apps/frontend/src/components/ui/thread/ThreadView.vue b/apps/frontend/src/components/ui/thread/ThreadView.vue
index aca57b1961..dc9bcaa6c4 100644
--- a/apps/frontend/src/components/ui/thread/ThreadView.vue
+++ b/apps/frontend/src/components/ui/thread/ThreadView.vue
@@ -74,7 +74,7 @@
 </template>
 
 <script setup lang="ts" generic="T">
-import { MessageIcon, ReplyIcon, SendIcon } from '@modrinth/assets'
+import { ChevronDownIcon, MessageIcon, ReplyIcon, SendIcon } from '@modrinth/assets'
 import type { QuickReply } from '@modrinth/moderation'
 import {
 	ButtonStyled,
@@ -90,7 +90,6 @@ import dayjs from 'dayjs'
 import { useImageUpload } from '~/composables/image-upload.ts'
 import { isStaff } from '~/helpers/users.js'
 
-import { ChevronDownIcon } from '@modrinth/assets'
 import ThreadMessage from './ThreadMessage.vue'
 
 const { addNotification } = injectNotificationManager()
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 5e0be1ecec..2618d7221b 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -742,6 +742,7 @@ import {
 	OverflowMenu,
 	useVIntl,
 } from '@modrinth/ui'
+import TeleportOverflowMenu from '@modrinth/ui/src/components/base/TeleportOverflowMenu.vue'
 import { isAdmin, isStaff, UserBadge } from '@modrinth/utils'
 import { useQuery } from '@tanstack/vue-query'
 
@@ -760,7 +761,6 @@ import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.
 import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
 import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
 import ModrinthFooter from '~/components/ui/ModrinthFooter.vue'
-import TeleportOverflowMenu from '@modrinth/ui/src/components/base/TeleportOverflowMenu.vue'
 import { errors as generatedStateErrors } from '~/generated/state.json'
 import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'
 
diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index 1cd3c5bfab..802e0d6ad1 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -552,8 +552,7 @@ const { data: image } = useQuery({
 					const originalFile = new File([blob], 'server-icon-original.png', {
 						type: 'image/png',
 					})
-					await kyros.files_v0
-						.uploadFileWithAuth(fsAuth, '/server-icon-original.png', originalFile)
+					await kyros.files_v0.uploadFileWithAuth(fsAuth, '/server-icon-original.png', originalFile)
 						.promise
 
 					return scaledDataUrl
diff --git a/packages/ui/src/components/servers/ServerSettingsModal.vue b/packages/ui/src/components/servers/ServerSettingsModal.vue
index 83ba648be5..a661080810 100644
--- a/packages/ui/src/components/servers/ServerSettingsModal.vue
+++ b/packages/ui/src/components/servers/ServerSettingsModal.vue
@@ -29,7 +29,11 @@ type ShowOptions = {
 
 const props = defineProps<{
 	resolveViewer: () => Promise<{ userId: string | null; userRole: string | null }>
-	browseModpacks?: (args: { serverId: string; worldId: string | null; from: 'reset-server' }) => void | Promise<void>
+	browseModpacks?: (args: {
+		serverId: string
+		worldId: string | null
+		from: 'reset-server'
+	}) => void | Promise<void>
 }>()
 
 const { formatMessage } = useVIntl()
@@ -55,10 +59,6 @@ const currentUserRole = ref<string | null>(null)
 
 const isApp = ref(true)
 
-function browseModpacks(args: { serverId: string; worldId: string | null; from: 'reset-server' }) {
-	props.browseModpacks?.(args)
-}
-
 const isConnected = ref(true)
 const powerState = ref<Archon.Websocket.v0.PowerState>('stopped')
 const isServerRunning = computed(() => powerState.value === 'running')
@@ -115,7 +115,7 @@ provideServerSettings({
 	isApp,
 	currentUserId,
 	currentUserRole,
-	browseModpacks,
+	browseModpacks: props.browseModpacks ?? (() => {}),
 })
 
 provideModrinthServerContext({
@@ -212,7 +212,7 @@ async function show({ serverId, tabIndex, tabId }: ShowOptions) {
 			'detail',
 			serverId,
 		])
-		const cachedFull = queryClient.getQueryData<Archon.Servers.v1.Server>([
+		const cachedFull = queryClient.getQueryData<Archon.Servers.v1.ServerFull>([
 			'servers',
 			'v1',
 			'detail',
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue b/packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue
index 81413b507e..5fa04f816a 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue
@@ -64,7 +64,7 @@
 import { CpuIcon, DatabaseIcon, FolderOpenIcon, IssuesIcon } from '@modrinth/assets'
 import type { Stats } from '@modrinth/utils'
 import { useStorage } from '@vueuse/core'
-import { type Component, computed, onMounted, shallowRef, ref, watch } from 'vue'
+import { type Component, computed, onMounted, ref, shallowRef, watch } from 'vue'
 import { RouterLink } from 'vue-router'
 
 import { injectModrinthServerContext } from '#ui/providers'

From 7301cc7d2b0e4cb8cb793b94603ebd25bb3d11a6 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 3 Apr 2026 16:14:08 -0600
Subject: [PATCH 15/50] fix: server icon upload/sync and centralize logic

---
 apps/app/capabilities/plugins.json            |   6 +-
 apps/app/tauri.conf.json                      |   2 +-
 .../api-client/src/modules/kyros/files/v0.ts  |  22 ++
 .../edit-server-icon/EditServerIcon.vue       | 230 ++++++++++++++++++
 .../ui/src/composables/use-server-image.ts    | 219 ++++++++---------
 .../shared/server-settings/pages/general.vue  | 145 +----------
 .../layouts/wrapped/hosting/manage/root.vue   |   2 +-
 7 files changed, 372 insertions(+), 254 deletions(-)
 create mode 100644 packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue

diff --git a/apps/app/capabilities/plugins.json b/apps/app/capabilities/plugins.json
index f1a45bf27d..4813b88730 100644
--- a/apps/app/capabilities/plugins.json
+++ b/apps/app/capabilities/plugins.json
@@ -22,7 +22,11 @@
 
 		{
 			"identifier": "http:default",
-			"allow": [{ "url": "https://modrinth.com/*" }, { "url": "https://*.modrinth.com/*" }]
+			"allow": [
+				{ "url": "https://modrinth.com/*" },
+				{ "url": "https://*.modrinth.com/*" },
+				{ "url": "https://*.nodes.modrinth.com/*" }
+			]
 		},
 
 		"dialog:allow-save",
diff --git a/apps/app/tauri.conf.json b/apps/app/tauri.conf.json
index bc06fa6405..e5c46f4f3b 100644
--- a/apps/app/tauri.conf.json
+++ b/apps/app/tauri.conf.json
@@ -87,7 +87,7 @@
 			"capabilities": ["ads", "core", "plugins"],
 			"csp": {
 				"default-src": "'self' customprotocol: asset:",
-				"connect-src": "ipc: http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.posthog.com https://posthog.modrinth.com https://*.sentry.io https://api.mclo.gs http://textures.minecraft.net https://textures.minecraft.net https://js.stripe.com https://*.stripe.com wss://*.stripe.com wss://*.nodes.modrinth.com 'self' data: blob:",
+				"connect-src": "ipc: http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.nodes.modrinth.com https://*.posthog.com https://posthog.modrinth.com https://*.sentry.io https://api.mclo.gs http://textures.minecraft.net https://textures.minecraft.net https://js.stripe.com https://*.stripe.com wss://*.stripe.com wss://*.nodes.modrinth.com 'self' data: blob:",
 				"font-src": ["https://cdn-raw.modrinth.com/fonts/"],
 				"img-src": "https: 'unsafe-inline' 'self' asset: http://asset.localhost http://textures.minecraft.net blob: data:",
 				"style-src": "'unsafe-inline' 'self'",
diff --git a/packages/api-client/src/modules/kyros/files/v0.ts b/packages/api-client/src/modules/kyros/files/v0.ts
index 535a4dbc37..fb8f4d19b7 100644
--- a/packages/api-client/src/modules/kyros/files/v0.ts
+++ b/packages/api-client/src/modules/kyros/files/v0.ts
@@ -207,6 +207,28 @@ export class KyrosFilesV0Module extends AbstractModule {
 		})
 	}
 
+	/**
+	 * Delete a file or folder using explicit filesystem auth credentials.
+	 *
+	 * @param auth - Filesystem auth (url + token) from Archon
+	 * @param path - Path to delete
+	 * @param recursive - If true, delete directory contents recursively
+	 */
+	public async deleteFileOrFolderWithAuth(
+		auth: NodeFsAuth,
+		path: string,
+		recursive: boolean,
+	): Promise<void> {
+		return this.client.request<void>('/fs/delete', {
+			api: this.getNodeBaseUrl(auth),
+			version: 'modrinth/v0',
+			method: 'DELETE',
+			params: { path, recursive },
+			headers: { Authorization: `Bearer ${auth.token}` },
+			skipAuth: true,
+		})
+	}
+
 	/**
 	 * Extract an archive file (zip, tar, etc.)
 	 *
diff --git a/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue b/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue
new file mode 100644
index 0000000000..474923fd27
--- /dev/null
+++ b/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue
@@ -0,0 +1,230 @@
+<template>
+	<div class="flex flex-col gap-2.5">
+		<span class="text-lg font-semibold text-contrast">Icon</span>
+		<div class="group relative w-fit">
+			<OverflowMenu
+				v-tooltip="'Edit icon'"
+				class="m-0 cursor-pointer appearance-none border-none bg-transparent p-0 transition-transform group-active:scale-95"
+				:options="[
+					{
+						id: 'upload',
+						action: () => triggerFileInput(),
+					},
+					{
+						id: 'sync',
+						action: () => resetIcon(),
+					},
+				]"
+			>
+				<ServerIcon class="size-24 transition-[filter] group-hover:brightness-75" :image="displayIcon" />
+				<div class="absolute right-0 top-0 m-1">
+					<div class="flex items-center justify-center rounded-full bg-button-bg p-1.5">
+						<EditIcon aria-hidden="true" class="h-4 w-4 text-contrast" />
+					</div>
+				</div>
+				<template #upload> <UploadIcon /> Upload icon </template>
+				<template #sync> <TransferIcon /> Sync icon </template>
+			</OverflowMenu>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { EditIcon, TransferIcon, UploadIcon } from '@modrinth/assets'
+import { useQueryClient } from '@tanstack/vue-query'
+import { computed } from 'vue'
+
+import { OverflowMenu, ServerIcon } from '#ui/components'
+import { processImageBlob, useServerImage } from '#ui/composables'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+} from '#ui/providers'
+
+const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
+const { serverId, server } = injectModrinthServerContext()
+const queryClient = useQueryClient()
+
+const {
+	image: displayIcon,
+	refetch: refetchRemoteIcon,
+	setImage,
+	clearImage,
+} = useServerImage(serverId, computed(() => server.value?.upstream ?? null), {
+	includeProjectFallback: false,
+})
+
+function getStatusCode(error: unknown): number | undefined {
+	const err = error as { statusCode?: number; response?: { status?: number } }
+	return err.statusCode ?? err.response?.status
+}
+
+function isNotFound(error: unknown): boolean {
+	return getStatusCode(error) === 404
+}
+
+const uploadFile = async (e: Event) => {
+	const file = (e.target as HTMLInputElement).files?.[0]
+	if (!file) {
+		addNotification({
+			type: 'error',
+			title: 'No file selected',
+			text: 'Please select a file to upload.',
+		})
+		return
+	}
+
+	const scaledFile = await new Promise<File>((resolve, reject) => {
+		const canvas = document.createElement('canvas')
+		const ctx = canvas.getContext('2d')
+		const img = new Image()
+		img.onload = () => {
+			canvas.width = 64
+			canvas.height = 64
+			ctx?.drawImage(img, 0, 0, 64, 64)
+			canvas.toBlob((blob) => {
+				if (blob) {
+					resolve(new File([blob], 'server-icon.png', { type: 'image/png' }))
+				} else {
+					reject(new Error('Canvas toBlob failed'))
+				}
+			}, 'image/png')
+			URL.revokeObjectURL(img.src)
+		}
+		img.onerror = reject
+		img.src = URL.createObjectURL(file)
+	})
+
+	try {
+		const fsAuth = await client.archon.servers_v0.getFilesystemAuth(serverId)
+
+		try {
+			await client.kyros.files_v0.uploadFileWithAuth(fsAuth, '/server-icon.png', scaledFile).promise
+		} catch (scaledUploadError) {
+			// Node FS may reject create when file already exists. Delete and retry once.
+			try {
+				await client.kyros.files_v0.deleteFileOrFolderWithAuth(fsAuth, '/server-icon.png', false)
+			} catch (deleteError) {
+				if (!isNotFound(deleteError)) {
+					throw scaledUploadError
+				}
+			}
+
+			await client.kyros.files_v0.uploadFileWithAuth(fsAuth, '/server-icon.png', scaledFile).promise
+		}
+
+		// Keep original file in sync when possible, but don't block icon updates on failures here.
+		try {
+			await client.kyros.files_v0.deleteFileOrFolderWithAuth(fsAuth, '/server-icon-original.png', false)
+		} catch (deleteOriginalError) {
+			if (!isNotFound(deleteOriginalError)) {
+				// best effort
+			}
+		}
+
+		try {
+			await client.kyros.files_v0
+				.uploadFileWithAuth(fsAuth, '/server-icon-original.png', file)
+				.promise
+		} catch (originalUploadError) {
+			if (!isNotFound(originalUploadError)) {
+				// best effort
+			}
+		}
+
+		const canvas = document.createElement('canvas')
+		const ctx = canvas.getContext('2d')
+		const img = new Image()
+		await new Promise<void>((resolve) => {
+			img.onload = () => {
+				canvas.width = 512
+				canvas.height = 512
+				ctx?.drawImage(img, 0, 0, 512, 512)
+				const dataURL = canvas.toDataURL('image/png')
+				setImage(dataURL)
+				queryClient.setQueriesData({ queryKey: ['servers', 'detail', serverId, 'icon'] }, dataURL)
+				resolve()
+				URL.revokeObjectURL(img.src)
+			}
+			img.src = URL.createObjectURL(file)
+		})
+		await refetchRemoteIcon()
+
+		addNotification({
+			type: 'success',
+			title: 'Server icon updated',
+			text: 'Your server icon was successfully changed.',
+		})
+	} catch {
+		addNotification({
+			type: 'error',
+			title: 'Upload failed',
+			text: 'Failed to upload server icon.',
+		})
+	}
+}
+
+const resetIcon = async () => {
+	try {
+		const fsAuth = await client.archon.servers_v0.getFilesystemAuth(serverId)
+		const deleteResults = await Promise.allSettled([
+			client.kyros.files_v0.deleteFileOrFolderWithAuth(fsAuth, '/server-icon.png', false),
+			client.kyros.files_v0.deleteFileOrFolderWithAuth(fsAuth, '/server-icon-original.png', false),
+		])
+
+		for (const result of deleteResults) {
+			if (result.status === 'rejected' && !isNotFound(result.reason)) {
+				throw result.reason
+			}
+		}
+
+		// Force default icon state across all useServerImage instances via the shared query cache.
+		// Use `null` (not `undefined`) because TanStack Query v5 treats setQueriesData(undefined)
+		// as a no-op. The `null` sentinel is handled by useServerImage's image computed.
+		clearImage()
+		await queryClient.cancelQueries({ queryKey: ['servers', 'detail', serverId, 'icon'] })
+		queryClient.setQueriesData({ queryKey: ['servers', 'detail', serverId, 'icon'] }, null)
+
+		addNotification({
+			type: 'success',
+			title: 'Server icon reset',
+			text: 'Your server icon was successfully reset.',
+		})
+	} catch {
+		addNotification({
+			type: 'error',
+			title: 'Reset failed',
+			text: 'Failed to reset server icon.',
+		})
+	}
+}
+
+const triggerFileInput = () => {
+	const input = document.createElement('input')
+	input.type = 'file'
+	input.id = 'server-icon-field'
+	input.accept = 'image/png,image/jpeg,image/gif,image/webp'
+	const cleanup = () => {
+		input.remove()
+		window.removeEventListener('focus', handleWindowFocus)
+	}
+	const handleWindowFocus = () => {
+		// If picker was cancelled there is no change event; clean up on focus return.
+		setTimeout(() => {
+			if (!input.value) cleanup()
+		}, 0)
+	}
+	input.onchange = async (event) => {
+		try {
+			await uploadFile(event)
+		} finally {
+			cleanup()
+		}
+	}
+	document.body.appendChild(input)
+	window.addEventListener('focus', handleWindowFocus, { once: true })
+	input.click()
+}
+</script>
diff --git a/packages/ui/src/composables/use-server-image.ts b/packages/ui/src/composables/use-server-image.ts
index 6e87e6b5e2..fc4fccc67e 100644
--- a/packages/ui/src/composables/use-server-image.ts
+++ b/packages/ui/src/composables/use-server-image.ts
@@ -1,133 +1,134 @@
 import type { Archon } from '@modrinth/api-client'
-import { type ComputedRef, ref, watch } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
+import { computed, type ComputedRef, ref } from 'vue'
 
 import { injectModrinthClient } from '#ui/providers'
 
-const imageCache = new Map<string, string>()
+type UpstreamRef = ComputedRef<Archon.Servers.v0.Server['upstream'] | null | undefined>
+
+type UseServerImageOptions = {
+	enabled?: ComputedRef<boolean> | boolean
+	size?: number
+	includeProjectFallback?: boolean
+}
+
+export async function processImageBlob(blob: Blob, size: number): Promise<string> {
+	return new Promise((resolve) => {
+		const canvas = document.createElement('canvas')
+		const ctx = canvas.getContext('2d')!
+		const img = new Image()
+		img.onload = () => {
+			canvas.width = size
+			canvas.height = size
+			ctx.drawImage(img, 0, 0, size, size)
+			const dataURL = canvas.toDataURL('image/png')
+			URL.revokeObjectURL(img.src)
+			resolve(dataURL)
+		}
+		img.src = URL.createObjectURL(blob)
+	})
+}
+
+function getStatusCode(error: unknown): number | undefined {
+	const err = error as { statusCode?: number; response?: { status?: number } }
+	return err.statusCode ?? err.response?.status
+}
+
+function isNotFound(error: unknown): boolean {
+	return getStatusCode(error) === 404
+}
 
-// TODO: Remove and use V1 when available
 export function useServerImage(
 	serverId: string,
-	upstream: ComputedRef<Archon.Servers.v0.Server['upstream'] | null>,
+	upstream: UpstreamRef,
+	options: UseServerImageOptions = {},
 ) {
 	const client = injectModrinthClient()
-	const image = ref<string | undefined>()
-
-	const cached = imageCache.get(serverId)
-	if (cached) {
-		image.value = cached
-	}
+	const localImage = ref<string | null | undefined>(undefined)
+	const iconSize = options.size ?? 512
+	const includeProjectFallback = options.includeProjectFallback ?? false
+
+	const queryKey = computed(
+		() => ['servers', 'detail', serverId, 'icon', upstream.value?.project_id ?? null] as const,
+	)
+
+	const isEnabled = computed(() => {
+		const explicitEnabled =
+			typeof options.enabled === 'boolean' ? options.enabled : options.enabled?.value
+		return !!serverId && (explicitEnabled ?? true)
+	})
 
-	async function loadImage() {
-		if (typeof window === 'undefined') return
+	const { data: remoteImage, refetch } = useQuery({
+		queryKey,
+		queryFn: async (): Promise<string | null | undefined> => {
+			if (!serverId) return undefined
 
-		if (imageCache.has(serverId)) {
-			image.value = imageCache.get(serverId)
-			return
-		}
+			try {
+				const fsAuth = await client.archon.servers_v0.getFilesystemAuth(serverId)
 
-		const localCached = localStorage.getItem(`server-icon-${serverId}`)
-		if (localCached) {
-			imageCache.set(serverId, localCached)
-			image.value = localCached
-			return
-		}
+				try {
+					const blob = await client.kyros.files_v0.downloadFileWithAuth(fsAuth, '/server-icon.png')
+					return await processImageBlob(blob, iconSize)
+				} catch (error) {
+					if (!isNotFound(error)) throw error
+				}
 
-		let projectIconUrl: string | undefined
-		const upstreamVal = upstream.value
-		if (upstreamVal?.project_id) {
-			try {
-				const project = await client.labrinth.projects_v2.get(upstreamVal.project_id)
-				projectIconUrl = project.icon_url
-			} catch {
-				// project fetch failed, continue without icon url
+				try {
+					const blob = await client.kyros.files_v0.downloadFileWithAuth(
+						fsAuth,
+						'/server-icon-original.png',
+					)
+					return await processImageBlob(blob, iconSize)
+				} catch (error) {
+					if (!isNotFound(error)) throw error
+				}
+			} catch (error) {
+				console.debug('Server image fetch failed:', error)
+				return undefined
 			}
-		}
 
-		try {
-			const fileData = await client.kyros.files_v0.downloadFile('/server-icon-original.png')
+			if (!includeProjectFallback || !upstream.value?.project_id) return undefined
 
-			if (fileData instanceof Blob) {
-				const dataURL = await resizeImage(fileData, 512)
-				imageCache.set(serverId, dataURL)
-				localStorage.setItem(`server-icon-${serverId}`, dataURL)
-				image.value = dataURL
-				return
-			}
-		} catch (error: unknown) {
-			const statusCode = (error as { statusCode?: number })?.statusCode
-			if (statusCode != null && statusCode >= 500) {
-				image.value = undefined
-				return
+			try {
+				const project = await client.labrinth.projects_v2.get(upstream.value.project_id)
+				if (!project.icon_url) return undefined
+				const response = await fetch(project.icon_url)
+				if (!response.ok) return undefined
+				const blob = await response.blob()
+				return await processImageBlob(blob, iconSize)
+			} catch (error) {
+				console.debug('Project icon fallback failed:', error)
+				return undefined
 			}
+		},
+		enabled: isEnabled,
+	})
 
-			if (statusCode === 404 && projectIconUrl) {
-				try {
-					const response = await fetch(projectIconUrl)
-					if (!response.ok) throw new Error('Failed to fetch icon')
-					const file = await response.blob()
-					const originalFile = new File([file], 'server-icon-original.png', {
-						type: 'image/png',
-					})
-
-					const dataURL = await new Promise<string>((resolve) => {
-						const canvas = document.createElement('canvas')
-						const ctx = canvas.getContext('2d')
-						const img = new Image()
-						img.onload = () => {
-							canvas.width = 64
-							canvas.height = 64
-							ctx?.drawImage(img, 0, 0, 64, 64)
-							canvas.toBlob(async (blob) => {
-								if (blob) {
-									const scaledFile = new File([blob], 'server-icon.png', {
-										type: 'image/png',
-									})
-									client.kyros.files_v0
-										.uploadFile('/server-icon.png', scaledFile)
-										.promise.catch(() => {})
-									client.kyros.files_v0
-										.uploadFile('/server-icon-original.png', originalFile)
-										.promise.catch(() => {})
-								}
-							}, 'image/png')
-							const result = canvas.toDataURL('image/png')
-							imageCache.set(serverId, result)
-							localStorage.setItem(`server-icon-${serverId}`, result)
-							resolve(result)
-							URL.revokeObjectURL(img.src)
-						}
-						img.src = URL.createObjectURL(file)
-					})
-					image.value = dataURL
-					return
-				} catch (externalError: unknown) {
-					console.debug('Could not process external icon:', (externalError as Error).message)
-				}
-			}
-		}
+	const image = computed(() => {
+		if (localImage.value === null) return undefined
+		const remote = remoteImage.value
+		if (remote === null) return undefined
+		return localImage.value ?? remote
+	})
 
-		image.value = undefined
+	function setImage(nextImage: string | null | undefined) {
+		localImage.value = nextImage
 	}
 
-	watch(upstream, () => loadImage(), { immediate: true })
+	function clearImage() {
+		localImage.value = null
+	}
 
-	return image
-}
+	function resetLocalOverride() {
+		localImage.value = undefined
+	}
 
-function resizeImage(blob: Blob, size: number): Promise<string> {
-	return new Promise<string>((resolve) => {
-		const canvas = document.createElement('canvas')
-		const ctx = canvas.getContext('2d')
-		const img = new Image()
-		img.onload = () => {
-			canvas.width = size
-			canvas.height = size
-			ctx?.drawImage(img, 0, 0, size, size)
-			const dataURL = canvas.toDataURL('image/png')
-			resolve(dataURL)
-			URL.revokeObjectURL(img.src)
-		}
-		img.src = URL.createObjectURL(blob)
-	})
+	return {
+		image,
+		queryKey,
+		refetch,
+		setImage,
+		clearImage,
+		resetLocalOverride,
+	}
 }
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/general.vue b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
index c3a86842a4..2903a0ccc5 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/general.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
@@ -68,38 +68,7 @@
 						</div>
 					</div>
 
-					<!-- Server icon -->
-					<div v-if="!data.is_medal" class="flex flex-col gap-2.5">
-						<span class="text-lg font-semibold text-contrast">Icon</span>
-						<div class="group relative w-fit">
-							<OverflowMenu
-								v-tooltip="'Edit icon'"
-								class="m-0 cursor-pointer appearance-none border-none bg-transparent p-0 transition-transform group-active:scale-95"
-								:options="[
-									{
-										id: 'upload',
-										action: () => triggerFileInput(),
-									},
-									{
-										id: 'sync',
-										action: () => resetIcon(),
-									},
-								]"
-							>
-								<ServerIcon
-									class="size-24 transition-[filter] group-hover:brightness-75"
-									:image="icon"
-								/>
-								<div class="absolute right-0 top-0 m-1">
-									<div class="flex items-center justify-center rounded-full bg-button-bg p-1.5">
-										<EditIcon aria-hidden="true" class="h-4 w-4 text-contrast" />
-									</div>
-								</div>
-								<template #upload> <UploadIcon /> Upload icon </template>
-								<template #sync> <TransferIcon /> Sync icon </template>
-							</OverflowMenu>
-						</div>
-					</div>
+					<EditServerIcon v-if="!data.is_medal" />
 				</div>
 
 				<!-- preferences -->
@@ -158,12 +127,12 @@
 </template>
 
 <script setup lang="ts">
-import { EditIcon, TransferIcon, UploadIcon } from '@modrinth/assets'
 import { useQueryClient } from '@tanstack/vue-query'
 import { useStorage } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 
-import { CopyCode, OverflowMenu, ServerIcon, StyledInput, Toggle } from '#ui/components'
+import { CopyCode, StyledInput, Toggle } from '#ui/components'
+import EditServerIcon from '#ui/components/servers/edit-server-icon/EditServerIcon.vue'
 import SaveBanner from '#ui/components/servers/SaveBanner.vue'
 import {
 	injectModrinthClient,
@@ -184,7 +153,6 @@ const isValidCharsSubdomain = computed(
 	() => !serverSubdomain.value || /^[a-zA-Z0-9-]+$/.test(serverSubdomain.value),
 )
 const isValidSubdomain = computed(() => isValidLengthSubdomain.value && isValidCharsSubdomain.value)
-const icon = ref<string | undefined>(undefined)
 
 const isUpdating = ref(false)
 const isValidServerName = computed(() => (serverName.value?.length ?? 0) > 0)
@@ -316,111 +284,4 @@ const resetGeneral = () => {
 	serverSubdomain.value = data.value?.net?.domain ?? ''
 	newUserPreferences.value = { ...userPreferences.value }
 }
-
-const uploadFile = async (e: Event) => {
-	const file = (e.target as HTMLInputElement).files?.[0]
-	if (!file) {
-		addNotification({
-			type: 'error',
-			title: 'No file selected',
-			text: 'Please select a file to upload.',
-		})
-		return
-	}
-
-	const scaledFile = await new Promise<File>((resolve, reject) => {
-		const canvas = document.createElement('canvas')
-		const ctx = canvas.getContext('2d')
-		const img = new Image()
-		img.onload = () => {
-			canvas.width = 64
-			canvas.height = 64
-			ctx?.drawImage(img, 0, 0, 64, 64)
-			canvas.toBlob((blob) => {
-				if (blob) {
-					resolve(new File([blob], 'server-icon.png', { type: 'image/png' }))
-				} else {
-					reject(new Error('Canvas toBlob failed'))
-				}
-			}, 'image/png')
-			URL.revokeObjectURL(img.src)
-		}
-		img.onerror = reject
-		img.src = URL.createObjectURL(file)
-	})
-
-	try {
-		if (icon.value) {
-			await client.kyros.files_v0.deleteFileOrFolder('/server-icon.png', false)
-			await client.kyros.files_v0.deleteFileOrFolder('/server-icon-original.png', false)
-		}
-
-		await client.kyros.files_v0.uploadFile('/server-icon.png', scaledFile).promise
-		await client.kyros.files_v0.uploadFile('/server-icon-original.png', file).promise
-
-		const canvas = document.createElement('canvas')
-		const ctx = canvas.getContext('2d')
-		const img = new Image()
-		await new Promise<void>((resolve) => {
-			img.onload = () => {
-				canvas.width = 512
-				canvas.height = 512
-				ctx?.drawImage(img, 0, 0, 512, 512)
-				const dataURL = canvas.toDataURL('image/png')
-				icon.value = dataURL
-				resolve()
-				URL.revokeObjectURL(img.src)
-			}
-			img.src = URL.createObjectURL(file)
-		})
-
-		addNotification({
-			type: 'success',
-			title: 'Server icon updated',
-			text: 'Your server icon was successfully changed.',
-		})
-	} catch (error) {
-		console.error('Error uploading icon:', error)
-		addNotification({
-			type: 'error',
-			title: 'Upload failed',
-			text: 'Failed to upload server icon.',
-		})
-	}
-}
-
-const resetIcon = async () => {
-	if (icon.value) {
-		try {
-			await client.kyros.files_v0.deleteFileOrFolder('/server-icon.png', false)
-			await client.kyros.files_v0.deleteFileOrFolder('/server-icon-original.png', false)
-
-			icon.value = undefined
-
-			await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
-
-			addNotification({
-				type: 'success',
-				title: 'Server icon reset',
-				text: 'Your server icon was successfully reset.',
-			})
-		} catch (error) {
-			console.error('Error resetting icon:', error)
-			addNotification({
-				type: 'error',
-				title: 'Reset failed',
-				text: 'Failed to reset server icon.',
-			})
-		}
-	}
-}
-
-const triggerFileInput = () => {
-	const input = document.createElement('input')
-	input.type = 'file'
-	input.id = 'server-icon-field'
-	input.accept = 'image/png,image/jpeg,image/gif,image/webp'
-	input.onchange = uploadFile
-	input.click()
-}
 </script>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index 6e78758082..ea35213579 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -454,7 +454,7 @@ const worldId = computed(() => {
 	return activeWorld?.id ?? serverFull.value.worlds[0]?.id ?? null
 })
 
-const serverImage = useServerImage(
+const { image: serverImage } = useServerImage(
 	props.serverId,
 	computed(() => serverData.value?.upstream ?? null),
 )

From 073061d729bd7eb79060846a4b83d200cda76fee Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 3 Apr 2026 17:15:03 -0600
Subject: [PATCH 16/50] fix: server settings modal not closing for server reset

---
 packages/ui/src/components/modal/ConfirmModal.vue               | 2 +-
 packages/ui/src/components/servers/ServerSettingsModal.vue      | 1 +
 .../src/layouts/shared/server-settings/pages/installation.vue   | 2 ++
 .../layouts/shared/server-settings/providers/server-settings.ts | 1 +
 4 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/modal/ConfirmModal.vue b/packages/ui/src/components/modal/ConfirmModal.vue
index 2bbcc913a0..9f17ad46f1 100644
--- a/packages/ui/src/components/modal/ConfirmModal.vue
+++ b/packages/ui/src/components/modal/ConfirmModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :noblur="noblur" :danger="danger" :on-hide="onHide">
+	<NewModal ref="modal" :noblur="noblur" :danger="danger" :on-hide="onHide" max-width="550px">
 		<template #title>
 			<slot name="title">
 				<span class="font-extrabold text-contrast text-lg">{{ title }}</span>
diff --git a/packages/ui/src/components/servers/ServerSettingsModal.vue b/packages/ui/src/components/servers/ServerSettingsModal.vue
index a661080810..5e4a8c76c9 100644
--- a/packages/ui/src/components/servers/ServerSettingsModal.vue
+++ b/packages/ui/src/components/servers/ServerSettingsModal.vue
@@ -116,6 +116,7 @@ provideServerSettings({
 	currentUserId,
 	currentUserRole,
 	browseModpacks: props.browseModpacks ?? (() => {}),
+	closeModal: () => hide(),
 })
 
 provideModrinthServerContext({
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/installation.vue b/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
index c235d73a3e..ef45e09fe4 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
@@ -773,6 +773,7 @@ watch(
 function onReinstall(event?: unknown) {
 	installationSettingsLayout.value?.cancelEditing()
 	emit('reinstall', event)
+	serverSettings.closeModal?.()
 }
 
 function onBrowseModpacks() {
@@ -800,6 +801,7 @@ async function confirmResetToOnboarding() {
 			title: formatMessage(messages.resetToOnboardingSuccessTitle),
 			text: formatMessage(messages.resetToOnboardingSuccessDescription),
 		})
+		serverSettings.closeModal?.()
 	} catch (err) {
 		addNotification({
 			type: 'error',
diff --git a/packages/ui/src/layouts/shared/server-settings/providers/server-settings.ts b/packages/ui/src/layouts/shared/server-settings/providers/server-settings.ts
index e5bb553ada..8aa29fb8bc 100644
--- a/packages/ui/src/layouts/shared/server-settings/providers/server-settings.ts
+++ b/packages/ui/src/layouts/shared/server-settings/providers/server-settings.ts
@@ -13,6 +13,7 @@ export interface ServerSettingsContext {
 	currentUserId: Ref<string | null>
 	currentUserRole: Ref<string | null>
 	browseModpacks: (args: ServerSettingsBrowseModpacksArgs) => void | Promise<void>
+	closeModal?: () => void
 }
 
 export const [injectServerSettings, provideServerSettings] = createContext<ServerSettingsContext>(

From 2647077680be9738330cb73ee5b91550e97b11a4 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 3 Apr 2026 17:28:48 -0600
Subject: [PATCH 17/50] fix: better server sorting

---
 .../src/layouts/wrapped/hosting/manage/index.vue  | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
index 993fa43568..ba70a62fd2 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
@@ -544,9 +544,16 @@ const fuse = computed(() => {
 	})
 })
 
-function introToTop(array: Archon.Servers.v0.Server[]): Archon.Servers.v0.Server[] {
+function sortServers(array: Archon.Servers.v0.Server[]): Archon.Servers.v0.Server[] {
 	return array.slice().sort((a, b) => {
-		return Number(b.flows?.intro) - Number(a.flows?.intro)
+		const aSuspended = a.status === 'suspended' ? 1 : 0
+		const bSuspended = b.status === 'suspended' ? 1 : 0
+		if (aSuspended !== bSuspended) return aSuspended - bSuspended
+
+		const introDiff = Number(b.flows?.intro) - Number(a.flows?.intro)
+		if (introDiff !== 0) return introDiff
+
+		return (a.name || '').localeCompare(b.name || '')
 	})
 }
 
@@ -562,9 +569,9 @@ function filesExpired(server: Archon.Servers.v0.Server): boolean {
 
 const filteredData = computed<Archon.Servers.v0.Server[]>(() => {
 	const base = !searchInput.value.trim()
-		? introToTop(serverList.value)
+		? sortServers(serverList.value)
 		: fuse.value
-			? introToTop(fuse.value.search(searchInput.value).map((result) => result.item))
+			? sortServers(fuse.value.search(searchInput.value).map((result) => result.item))
 			: []
 	return base.filter((server) => !filesExpired(server))
 })

From 0822f6b6a2a122c994fcea0e947808cec426649d Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 3 Apr 2026 17:38:42 -0600
Subject: [PATCH 18/50] feat: copy address in server listing card

---
 packages/ui/src/components/servers/ServerListing.vue |  8 ++++++--
 .../components/servers/labels/ServerGameLabel.vue    | 12 ++++++------
 .../components/servers/labels/ServerLoaderLabel.vue  |  5 +++--
 .../servers/labels/ServerSubdomainLabel.vue          |  4 +++-
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index 802e0d6ad1..353c830f61 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -7,7 +7,7 @@
 					'!rounded-b-none border-b-0': hasNotice,
 					'bg-surface-2': isDisabled,
 					'active:scale-95': !isDisabled && !hasNotice,
-					'hover:brightness-125': !isDisabled,
+					'hoverable': !isDisabled,
 				}"
 				data-pyro-server-listing
 				:data-pyro-server-listing-id="server_id"
@@ -74,7 +74,7 @@
 						:show-player-count="showPlayerCount"
 						:class="{ 'opacity-50': isDisabled }"
 						:linked="false"
-						class="pointer-events-none flex w-full flex-row flex-wrap items-center gap-2 text-primary *:hidden sm:flex-row sm:*:flex"
+						class="flex w-full flex-row flex-wrap items-center gap-2 text-primary *:hidden sm:flex-row sm:*:flex"
 					/>
 				</div>
 			</div>
@@ -583,4 +583,8 @@ async function copyToClipboard(text: string) {
 .server-listing-notice {
 	@apply relative flex w-full rounded-b-2xl border-[1px] border-solid p-4 flex-col gap-4 border-surface-5 bg-bg-raised text-primary;
 }
+
+.hoverable:hover:not(:has([data-subdomain-label]:hover)) {
+	filter: brightness(1.25);
+}
 </style>
diff --git a/packages/ui/src/components/servers/labels/ServerGameLabel.vue b/packages/ui/src/components/servers/labels/ServerGameLabel.vue
index d12a165a75..edf28cebdf 100644
--- a/packages/ui/src/components/servers/labels/ServerGameLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerGameLabel.vue
@@ -1,9 +1,5 @@
 <template>
-	<div
-		v-if="game"
-		v-tooltip="'Change server version'"
-		class="min-w-0 flex-none flex-row items-center gap-1.5 first:!flex"
-	>
+	<div v-if="game" class="min-w-0 flex-none flex-row items-center gap-1.5 first:!flex">
 		<Separator v-if="!noSeparator" />
 
 		<GameIcon aria-hidden="true" />
@@ -19,7 +15,11 @@
 				<span v-else class="inline-block h-3 w-12 animate-pulse rounded bg-button-border"></span>
 			</div>
 		</AutoLink>
-		<div v-else class="flex min-w-0 flex-row items-center gap-1 truncate text-sm font-semibold">
+		<div
+			v-else
+			v-tooltip="'Change server version'"
+			class="pointer-events-none flex min-w-0 flex-row items-center gap-1 truncate text-sm font-semibold"
+		>
 			{{ game[0].toUpperCase() + game.slice(1) }}
 			<span v-if="mcVersion">{{ mcVersion }}</span>
 			<span v-else class="inline-block h-3 w-16 animate-pulse rounded bg-button-border"></span>
diff --git a/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue b/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
index 5dbdacedfb..be78c34d39 100644
--- a/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
@@ -1,11 +1,12 @@
 <template>
-	<div v-tooltip="'Change server loader'" class="flex min-w-0 flex-row items-center gap-2 truncate">
+	<div class="flex min-w-0 flex-row items-center gap-2 truncate">
 		<Separator v-if="!noSeparator" />
 		<div class="flex flex-row items-center gap-1.5">
 			<LoaderIcon v-if="loader" :loader="loader" />
 			<div v-else class="size-5 shrink-0 animate-pulse rounded-full bg-button-border"></div>
 			<AutoLink
 				v-if="isLink"
+				v-tooltip="'Change server loader'"
 				:to="settingsLinkTarget"
 				class="flex min-w-0 items-center text-sm font-semibold"
 				:class="settingsLinkTarget ? 'hover:underline' : ''"
@@ -19,7 +20,7 @@
 					<span class="inline-block h-4 w-12 animate-pulse rounded bg-button-border"></span>
 				</span>
 			</AutoLink>
-			<div v-else class="min-w-0 text-sm font-semibold">
+			<div v-else class="pointer-events-none min-w-0 text-sm font-semibold">
 				<span v-if="loader">
 					{{ loader }}
 					<span v-if="loaderVersion">{{ loaderVersion }}</span>
diff --git a/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue b/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
index 5105cf855a..eda6182063 100644
--- a/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
@@ -2,7 +2,9 @@
 	<div
 		v-if="subdomain && !isHidden"
 		v-tooltip="'Copy custom URL'"
-		class="flex min-w-0 flex-row items-center gap-2 truncate hover:cursor-pointer"
+		class="flex min-w-0 flex-row items-center gap-2 truncate hover:cursor-pointer hover:underline"
+		data-subdomain-label
+		@click.stop.prevent
 	>
 		<Separator v-if="!noSeparator" />
 

From 7aa5333c22f8611b177aeaa0ead3a1de0e52a4b0 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 3 Apr 2026 18:14:50 -0600
Subject: [PATCH 19/50] fix: notification panel in modal and when overlapping
 with action bar

---
 .../ui/src/components/nav/NotificationPanel.vue | 11 ++++++++++-
 packages/ui/src/composables/modal-stack.ts      | 17 ++++++++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/nav/NotificationPanel.vue b/packages/ui/src/components/nav/NotificationPanel.vue
index f5a8e318c5..195eb34a02 100644
--- a/packages/ui/src/components/nav/NotificationPanel.vue
+++ b/packages/ui/src/components/nav/NotificationPanel.vue
@@ -5,7 +5,7 @@
 			'intercom-present': isIntercomPresent,
 			'location-left': notificationLocation === 'left',
 			'location-right': notificationLocation === 'right',
-			'has-sidebar': hasSidebar,
+			'has-sidebar': hasSidebar && !hasModalActive,
 		}"
 	>
 		<transition-group name="notifs">
@@ -92,6 +92,7 @@ import {
 } from '@modrinth/assets'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
+import { useModalStack } from '#ui/composables/modal-stack.ts'
 import { injectNotificationManager, type WebNotification } from '../../providers'
 import ButtonStyled from '../base/ButtonStyled.vue'
 
@@ -151,6 +152,8 @@ onMounted(() => {
 	})
 })
 
+const { hasModal: hasModalActive } = useModalStack()
+
 withDefaults(
 	defineProps<{
 		hasSidebar?: boolean
@@ -167,9 +170,11 @@ withDefaults(
 	bottom: 1.5rem;
 	z-index: 200;
 	width: 450px;
+	transition: bottom 0.25s ease-in-out;
 
 	&.location-right {
 		right: 1.5rem;
+		transition: right 0.25s ease-in-out;
 
 		&.has-sidebar {
 			right: 325px;
@@ -242,4 +247,8 @@ withDefaults(
 		transform: translateX(-100%) scale(0.8);
 	}
 }
+
+body.floating-action-bar-shown .vue-notification-group {
+	bottom: calc(90px);
+}
 </style>
diff --git a/packages/ui/src/composables/modal-stack.ts b/packages/ui/src/composables/modal-stack.ts
index 0db4c377eb..7664b490ed 100644
--- a/packages/ui/src/composables/modal-stack.ts
+++ b/packages/ui/src/composables/modal-stack.ts
@@ -1,17 +1,26 @@
+import { computed, ref } from 'vue'
+
 const isClient = typeof window !== 'undefined'
 const stack: symbol[] = []
+const stackSizeRef = ref(0)
 
 export function useModalStack() {
 	const id = Symbol()
 
 	function push() {
-		if (isClient && !stack.includes(id)) stack.push(id)
+		if (isClient && !stack.includes(id)) {
+			stack.push(id)
+			stackSizeRef.value = stack.length
+		}
 	}
 
 	function pop() {
 		if (!isClient) return
 		const idx = stack.indexOf(id)
-		if (idx !== -1) stack.splice(idx, 1)
+		if (idx !== -1) {
+			stack.splice(idx, 1)
+			stackSizeRef.value = stack.length
+		}
 	}
 
 	function isTopmost() {
@@ -23,5 +32,7 @@ export function useModalStack() {
 		return isClient ? stack.length : 0
 	}
 
-	return { push, pop, isTopmost, stackSize }
+	const hasModal = computed(() => stackSizeRef.value > 0)
+
+	return { push, pop, isTopmost, stackSize, hasModal }
 }

From a0dc49d29f6f9b376c9e4788f1a3e5636b1ac65a Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 3 Apr 2026 19:04:30 -0600
Subject: [PATCH 20/50] fix: empty server list empty state flashing when
 refresh, fixed by adding isReady auth flag

---
 apps/app-frontend/src/providers/setup/auth.ts            | 4 +++-
 apps/frontend/src/providers/setup/auth.ts                | 1 +
 packages/ui/src/layouts/wrapped/hosting/manage/index.vue | 3 ++-
 packages/ui/src/providers/auth.ts                        | 2 ++
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/app-frontend/src/providers/setup/auth.ts b/apps/app-frontend/src/providers/setup/auth.ts
index bf522c59a3..2de8c0acfa 100644
--- a/apps/app-frontend/src/providers/setup/auth.ts
+++ b/apps/app-frontend/src/providers/setup/auth.ts
@@ -1,6 +1,6 @@
 import type { Labrinth } from '@modrinth/api-client'
 import { type AuthProvider, provideAuth } from '@modrinth/ui'
-import { type Ref, ref, watchEffect } from 'vue'
+import { computed, type Ref, ref, watchEffect } from 'vue'
 
 type AppCredentials = {
 	session?: string | null
@@ -13,10 +13,12 @@ export function setupAuthProvider(
 ) {
 	const sessionToken = ref<string | null>(null)
 	const user = ref<Labrinth.Users.v2.User | null>(null)
+	const isReady = computed(() => credentials.value !== undefined)
 
 	const authProvider: AuthProvider = {
 		session_token: sessionToken,
 		user,
+		isReady,
 		requestSignIn,
 	}
 
diff --git a/apps/frontend/src/providers/setup/auth.ts b/apps/frontend/src/providers/setup/auth.ts
index ae717324b0..02ce738f6b 100644
--- a/apps/frontend/src/providers/setup/auth.ts
+++ b/apps/frontend/src/providers/setup/auth.ts
@@ -10,6 +10,7 @@ export function setupAuthProvider(auth: Awaited<ReturnType<typeof useAuth>>) {
 	const authProvider: AuthProvider = {
 		session_token: sessionToken,
 		user,
+		isReady: ref(true),
 		requestSignIn: async (redirectPath: string) => {
 			await router.push({
 				path: '/auth/sign-in',
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
index ba70a62fd2..2d7a812024 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
@@ -80,7 +80,7 @@
 		</div>
 
 		<Transition v-else name="fade" mode="out-in">
-			<div v-if="isLoading && !serverResponse" key="loading" class="flex flex-col gap-4 py-8">
+			<div v-if="isLoading || !authReady" key="loading" class="flex flex-col gap-4 py-8">
 				<div class="mb-4 text-center">
 					<LoaderCircleIcon class="mx-auto size-8 animate-spin text-contrast" />
 					<p class="m-0 mt-2 text-secondary">{{ formatMessage(messages.loadingServers) }}</p>
@@ -235,6 +235,7 @@ const route = useRoute()
 const auth = injectAuth()
 const client = injectModrinthClient()
 const loggedIn = computed(() => !!auth.user.value)
+const authReady = computed(() => auth.isReady?.value ?? true)
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
diff --git a/packages/ui/src/providers/auth.ts b/packages/ui/src/providers/auth.ts
index b5f68437ab..4baac3c7fd 100644
--- a/packages/ui/src/providers/auth.ts
+++ b/packages/ui/src/providers/auth.ts
@@ -6,6 +6,8 @@ import { createContext } from './create-context'
 export interface AuthProvider {
 	session_token: Ref<string | null>
 	user: Ref<Labrinth.Users.v2.User | null>
+	/** True once the initial auth check has completed (regardless of result). */
+	isReady?: Ref<boolean>
 	requestSignIn: (redirectPath: string) => void | Promise<void>
 }
 

From 3bb807969559adc831cc82d129f4193a4b6939ad Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 3 Apr 2026 19:23:21 -0600
Subject: [PATCH 21/50] feat: use floating action bar for save banner

---
 .../ui/src/components/servers/SaveBanner.vue  | 85 +++++++------------
 .../server-settings/pages/properties.vue      |  4 +-
 2 files changed, 31 insertions(+), 58 deletions(-)

diff --git a/packages/ui/src/components/servers/SaveBanner.vue b/packages/ui/src/components/servers/SaveBanner.vue
index 9145ac56d5..afc753fe51 100644
--- a/packages/ui/src/components/servers/SaveBanner.vue
+++ b/packages/ui/src/components/servers/SaveBanner.vue
@@ -1,46 +1,41 @@
 <template>
 	<Teleport to="body">
-		<Transition name="save-banner">
-			<div
-				v-if="props.isVisible"
-				data-pyro-save-banner
-				class="fixed bottom-16 left-0 right-0 z-[22] mx-auto h-fit w-full max-w-4xl transition-all duration-300 sm:bottom-8"
-			>
-				<div class="mx-2 rounded-2xl border-2 border-solid border-button-border bg-bg-raised p-4">
-					<div class="flex flex-col items-center justify-between gap-2 md:flex-row">
-						<span class="font-bold text-contrast">Careful, you have unsaved changes!</span>
-						<div class="flex gap-2">
-							<ButtonStyled type="transparent" color="standard">
-								<button :disabled="props.isUpdating" @click="props.reset">Reset</button>
-							</ButtonStyled>
-							<ButtonStyled type="standard" :color="props.restart ? 'standard' : 'brand'">
-								<button :disabled="props.isUpdating" @click="props.save">
-									{{ props.isUpdating ? 'Saving...' : 'Save' }}
-								</button>
-							</ButtonStyled>
-							<ButtonStyled v-if="props.restart" type="standard" color="brand">
-								<button :disabled="props.isUpdating || isTransitioning" @click="saveAndPower">
-									{{ powerButtonLabel }}
-								</button>
-							</ButtonStyled>
-						</div>
-					</div>
-				</div>
+		<FloatingActionBar :shown="props.isVisible">
+			<p class="m-0 font-semibold text-sm md:text-base">You have unsaved changes.</p>
+			<div class="ml-auto flex gap-2">
+				<ButtonStyled type="transparent">
+					<button :disabled="props.isUpdating" @click="props.reset"><HistoryIcon /> Reset</button>
+				</ButtonStyled>
+				<ButtonStyled :color="props.restart ? 'standard' : 'brand'">
+					<button :disabled="props.isUpdating" @click="props.save">
+						<SpinnerIcon v-if="props.isUpdating" class="animate-spin" />
+						<SaveIcon v-else />
+						{{ props.isUpdating ? 'Saving...' : 'Save' }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-if="props.restart" color="brand">
+					<button :disabled="props.isUpdating || isTransitioning" @click="saveAndPower">
+						<SpinnerIcon v-if="props.isUpdating || isTransitioning" class="animate-spin" />
+						{{ powerButtonLabel }}
+					</button>
+				</ButtonStyled>
 			</div>
-		</Transition>
+		</FloatingActionBar>
 	</Teleport>
 </template>
 
 <script setup lang="ts">
+import { HistoryIcon, SaveIcon, SpinnerIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
 import { injectModrinthClient, injectModrinthServerContext } from '#ui/providers'
 
 const props = defineProps<{
 	isUpdating: boolean
 	restart?: boolean
-	save: () => void
+	save: () => void | Promise<void>
 	reset: () => void
 	isVisible: boolean
 	serverId: string
@@ -58,38 +53,16 @@ const isTransitioning = computed(
 
 const powerButtonLabel = computed(() => {
 	if (props.isUpdating) return 'Saving...'
-	if (isTransitioning.value) return isStopped.value ? 'Save & start' : 'Save & restart'
+	if (isTransitioning.value) return isStopped.value ? 'Starting...' : 'Restarting...'
 	return isStopped.value ? 'Save & start' : 'Save & restart'
 })
 
 const saveAndPower = async () => {
-	props.save()
+	try {
+		await props.save()
+	} catch {
+		return
+	}
 	await client.archon.servers_v0.power(props.serverId, isStopped.value ? 'Start' : 'Restart')
 }
 </script>
-
-<style scoped>
-.save-banner-enter-active {
-	transition:
-		opacity 300ms,
-		transform 300ms;
-}
-
-.save-banner-leave-active {
-	transition:
-		opacity 200ms,
-		transform 200ms;
-}
-
-.save-banner-enter-from,
-.save-banner-leave-to {
-	opacity: 0;
-	transform: translateY(100%) scale(0.98);
-}
-
-.save-banner-enter-to,
-.save-banner-leave-from {
-	opacity: 1;
-	transform: none;
-}
-</style>
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
index bf0077498d..44b69bb8c5 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
@@ -233,7 +233,7 @@
 			:server-id="serverId"
 			:is-updating="isUpdating || busyReasons.length > 0"
 			restart
-			:save="() => saveProperties()"
+			:save="async () => { await saveProperties() }"
 			:reset="resetProperties"
 		/>
 	</div>
@@ -452,7 +452,7 @@ function buildPatch(): Archon.Content.v1.PatchPropertiesFields {
 	return patch
 }
 
-const { mutate: saveProperties, isPending: isUpdating } = useMutation({
+const { mutateAsync: saveProperties, isPending: isUpdating } = useMutation({
 	mutationFn: () =>
 		client.archon.properties_v1.patchProperties(serverId, worldId.value!, buildPatch()),
 	onSuccess: async () => {

From 961c65d328c2a90b33aa68f14fc04d54544cd8fa Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 3 Apr 2026 19:26:33 -0600
Subject: [PATCH 22/50] fix: saving state in save bar

---
 .../ui/src/layouts/shared/server-settings/pages/advanced.vue    | 2 +-
 .../ui/src/layouts/shared/server-settings/pages/general.vue     | 2 +-
 .../ui/src/layouts/shared/server-settings/pages/properties.vue  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue b/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
index 2f44f8f30b..d28cd9650a 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
@@ -186,7 +186,7 @@
 			</div>
 		</div>
 		<SaveBanner
-			:is-visible="!!hasUnsavedChanges"
+			:is-visible="!!hasUnsavedChanges || isPending"
 			:server-id="serverId"
 			:is-updating="isPending"
 			:save="() => saveStartup()"
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/general.vue b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
index 2903a0ccc5..ef9078d915 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/general.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
@@ -117,7 +117,7 @@
 		</div>
 		<div v-else />
 		<SaveBanner
-			:is-visible="!!hasUnsavedChanges && !!isValidServerName"
+			:is-visible="(!!hasUnsavedChanges && !!isValidServerName) || isUpdating"
 			:server-id="serverId"
 			:is-updating="isUpdating || busyReasons.length > 0"
 			:save="saveGeneral"
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
index 44b69bb8c5..d5dd93ea78 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
@@ -229,7 +229,7 @@
 		</div>
 
 		<SaveBanner
-			:is-visible="hasUnsavedChanges"
+			:is-visible="hasUnsavedChanges || isUpdating"
 			:server-id="serverId"
 			:is-updating="isUpdating || busyReasons.length > 0"
 			restart

From adc9e99df518a4ef225f15ad3076f9892007f07c Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 3 Apr 2026 19:32:04 -0600
Subject: [PATCH 23/50] fix: edit server icon styling

---
 .../edit-server-icon/EditServerIcon.vue       | 34 ++++++++++++-------
 .../components/servers/icons/ServerIcon.vue   |  2 +-
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue b/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue
index 474923fd27..2df9554383 100644
--- a/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue
+++ b/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue
@@ -16,11 +16,14 @@
 					},
 				]"
 			>
-				<ServerIcon class="size-24 transition-[filter] group-hover:brightness-75" :image="displayIcon" />
-				<div class="absolute right-0 top-0 m-1">
-					<div class="flex items-center justify-center rounded-full bg-button-bg p-1.5">
-						<EditIcon aria-hidden="true" class="h-4 w-4 text-contrast" />
-					</div>
+				<ServerIcon
+					class="size-24 transition-[filter] group-hover:brightness-75"
+					:image="displayIcon"
+				/>
+				<div
+					class="absolute top-0 w-full h-full flex justify-center items-center opacity-0 transition-all group-hover:opacity-100"
+				>
+					<EditIcon aria-hidden="true" class="h-10 w-10" />
 				</div>
 				<template #upload> <UploadIcon /> Upload icon </template>
 				<template #sync> <TransferIcon /> Sync icon </template>
@@ -35,7 +38,7 @@ import { useQueryClient } from '@tanstack/vue-query'
 import { computed } from 'vue'
 
 import { OverflowMenu, ServerIcon } from '#ui/components'
-import { processImageBlob, useServerImage } from '#ui/composables'
+import { useServerImage } from '#ui/composables'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
@@ -52,9 +55,13 @@ const {
 	refetch: refetchRemoteIcon,
 	setImage,
 	clearImage,
-} = useServerImage(serverId, computed(() => server.value?.upstream ?? null), {
-	includeProjectFallback: false,
-})
+} = useServerImage(
+	serverId,
+	computed(() => server.value?.upstream ?? null),
+	{
+		includeProjectFallback: false,
+	},
+)
 
 function getStatusCode(error: unknown): number | undefined {
 	const err = error as { statusCode?: number; response?: { status?: number } }
@@ -117,7 +124,11 @@ const uploadFile = async (e: Event) => {
 
 		// Keep original file in sync when possible, but don't block icon updates on failures here.
 		try {
-			await client.kyros.files_v0.deleteFileOrFolderWithAuth(fsAuth, '/server-icon-original.png', false)
+			await client.kyros.files_v0.deleteFileOrFolderWithAuth(
+				fsAuth,
+				'/server-icon-original.png',
+				false,
+			)
 		} catch (deleteOriginalError) {
 			if (!isNotFound(deleteOriginalError)) {
 				// best effort
@@ -125,8 +136,7 @@ const uploadFile = async (e: Event) => {
 		}
 
 		try {
-			await client.kyros.files_v0
-				.uploadFileWithAuth(fsAuth, '/server-icon-original.png', file)
+			await client.kyros.files_v0.uploadFileWithAuth(fsAuth, '/server-icon-original.png', file)
 				.promise
 		} catch (originalUploadError) {
 			if (!isNotFound(originalUploadError)) {
diff --git a/packages/ui/src/components/servers/icons/ServerIcon.vue b/packages/ui/src/components/servers/icons/ServerIcon.vue
index ec0fe3cf1f..1cbaae5ead 100644
--- a/packages/ui/src/components/servers/icons/ServerIcon.vue
+++ b/packages/ui/src/components/servers/icons/ServerIcon.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="experimental-styles-within relative flex size-16 shrink-0 overflow-hidden rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+		class="experimental-styles-within relative flex size-16 shrink-0 overflow-hidden rounded-2xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
 	>
 		<template v-if="hasMounted">
 			<img

From 24f02c6f7b2cbd47a1605f6ca529c40c2102062f Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 3 Apr 2026 19:45:29 -0600
Subject: [PATCH 24/50] fix: confirm modal to have consistent buttons

---
 packages/ui/src/components/modal/ConfirmModal.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/modal/ConfirmModal.vue b/packages/ui/src/components/modal/ConfirmModal.vue
index 9f17ad46f1..785ad7f7b5 100644
--- a/packages/ui/src/components/modal/ConfirmModal.vue
+++ b/packages/ui/src/components/modal/ConfirmModal.vue
@@ -30,19 +30,19 @@
 				placeholder="Type here..."
 				wrapper-class="max-w-[20rem]"
 			/>
-			<div class="flex gap-2">
+			<div class="flex gap-2 justify-end">
+				<ButtonStyled>
+					<button @click="hide()" class="!shadow-none">
+						<XIcon />
+						Cancel
+					</button>
+				</ButtonStyled>
 				<ButtonStyled :color="danger ? 'red' : 'brand'">
 					<button :disabled="action_disabled" @click="proceed">
 						<component :is="proceedIcon" />
 						{{ proceedLabel }}
 					</button>
 				</ButtonStyled>
-				<ButtonStyled>
-					<button @click="hide()">
-						<XIcon />
-						Cancel
-					</button>
-				</ButtonStyled>
 			</div>
 		</div>
 	</NewModal>

From c75f790317cdedaef1a11d25cb4543cd293b1b25 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Sat, 4 Apr 2026 15:46:24 +0200
Subject: [PATCH 25/50] feat: loading animation for server panel + caching
 improvements for app

---
 .../composables/server-manage-core-runtime.ts |   4 +
 .../manage/components/ServerManageStats.vue   | 102 +++++++-------
 .../layouts/wrapped/hosting/manage/index.vue  |   2 +-
 .../wrapped/hosting/manage/overview.vue       |   4 +-
 .../layouts/wrapped/hosting/manage/root.vue   | 124 +++++++++++++++++-
 5 files changed, 183 insertions(+), 53 deletions(-)

diff --git a/packages/ui/src/composables/server-manage-core-runtime.ts b/packages/ui/src/composables/server-manage-core-runtime.ts
index 5b5d89f0d3..b3cd27b7ff 100644
--- a/packages/ui/src/composables/server-manage-core-runtime.ts
+++ b/packages/ui/src/composables/server-manage-core-runtime.ts
@@ -274,6 +274,8 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 	}
 
 	const disconnectSocket = (targetServerId?: string) => {
+		if (!targetServerId && !connectedSocketServerId.value) return
+
 		clearSocketListeners()
 
 		if (targetServerId) {
@@ -377,6 +379,7 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 		cleanupCoreRuntime,
 		connectSocket,
 		connectedSocketServerId,
+		cpuData,
 		disconnectSocket,
 		fsAuth,
 		fsOps,
@@ -385,6 +388,7 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 		isServerRunning,
 		isWsAuthIncorrect,
 		powerStateDetails,
+		ramData,
 		refreshFsAuth,
 		serverPowerState,
 		stats,
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue b/packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue
index 5fa04f816a..e5f544f02d 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue
@@ -147,7 +147,7 @@ const metrics = computed(() => {
 				value: '0.00%',
 				icon: CpuIcon,
 				data: cpuData.value,
-				showGraph: false,
+				showGraph: true,
 				warning: null,
 				link: null,
 			},
@@ -156,7 +156,7 @@ const metrics = computed(() => {
 				value: '0.00%',
 				icon: DatabaseIcon,
 				data: ramData.value,
-				showGraph: false,
+				showGraph: true,
 				warning: null,
 				link: null,
 			},
@@ -196,53 +196,63 @@ const metrics = computed(() => {
 	]
 })
 
-const getChartOptions = (hasWarning: string | null, index: number) => ({
-	chart: {
-		type: 'area' as const,
-		animations: { enabled: false },
-		sparkline: { enabled: true },
-		toolbar: { show: false },
-		padding: {
-			left: -10,
-			right: -10,
-			top: 0,
-			bottom: 0,
+const chartOptionsCache = new Map<string, object>()
+
+const getChartOptions = (hasWarning: string | null, index: number) => {
+	const cacheKey = `${index}-${hasWarning ? '1' : '0'}`
+	const cached = chartOptionsCache.get(cacheKey)
+	if (cached) return cached
+
+	const options = {
+		chart: {
+			type: 'area' as const,
+			animations: { enabled: false },
+			sparkline: { enabled: true },
+			toolbar: { show: false },
+			padding: {
+				left: -10,
+				right: -10,
+				top: 0,
+				bottom: 0,
+			},
+			events: {
+				mounted: () => onChartReady(index),
+				updated: () => onChartReady(index),
+			},
 		},
-		events: {
-			mounted: () => onChartReady(index),
-			updated: () => onChartReady(index),
+		stroke: { curve: 'smooth' as const, width: 3 },
+		fill: {
+			type: 'gradient' as const,
+			gradient: {
+				shadeIntensity: 1,
+				opacityFrom: 0.25,
+				opacityTo: 0.05,
+				stops: [0, 100],
+			},
 		},
-	},
-	stroke: { curve: 'smooth' as const, width: 3 },
-	fill: {
-		type: 'gradient' as const,
-		gradient: {
-			shadeIntensity: 1,
-			opacityFrom: 0.25,
-			opacityTo: 0.05,
-			stops: [0, 100],
+		tooltip: { enabled: false },
+		grid: { show: false },
+		xaxis: {
+			labels: { show: false },
+			axisBorder: { show: false },
+			type: 'numeric' as const,
+			tickAmount: 20,
+			range: 20,
 		},
-	},
-	tooltip: { enabled: false },
-	grid: { show: false },
-	xaxis: {
-		labels: { show: false },
-		axisBorder: { show: false },
-		type: 'numeric' as const,
-		tickAmount: 20,
-		range: 20,
-	},
-	yaxis: {
-		show: false,
-		min: 0,
-		max: 100,
-		forceNiceScale: false,
-	},
-	colors: [hasWarning ? 'var(--color-orange)' : 'var(--color-brand)'],
-	dataLabels: {
-		enabled: false,
-	},
-})
+		yaxis: {
+			show: false,
+			min: 0,
+			max: 100,
+			forceNiceScale: false,
+		},
+		colors: [hasWarning ? 'var(--color-orange)' : 'var(--color-brand)'],
+		dataLabels: {
+			enabled: false,
+		},
+	}
+	chartOptionsCache.set(cacheKey, options)
+	return options
+}
 
 watch(
 	() => props.data?.current,
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
index 2d7a812024..8e68c385b9 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
@@ -80,7 +80,7 @@
 		</div>
 
 		<Transition v-else name="fade" mode="out-in">
-			<div v-if="isLoading || !authReady" key="loading" class="flex flex-col gap-4 py-8">
+			<div v-if="(isLoading || !authReady) && !serverResponse" key="loading" class="flex flex-col gap-4 py-8">
 				<div class="mb-4 text-center">
 					<LoaderCircleIcon class="mx-auto size-8 animate-spin text-contrast" />
 					<p class="m-0 mt-2 text-secondary">{{ formatMessage(messages.loadingServers) }}</p>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue b/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue
index 2437001bc1..03cef00de0 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue
@@ -56,8 +56,8 @@
 
 		<div class="flex flex-col-reverse gap-6 md:flex-col">
 			<ServerManageStats
-				:data="isConnected && !isWsAuthIncorrect ? stats : undefined"
-				:loading="!isConnected || isWsAuthIncorrect"
+				:data="!isWsAuthIncorrect ? stats : undefined"
+				:loading="isWsAuthIncorrect"
 			/>
 
 			<div class="flex h-[700px] flex-col gap-4">
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index ea35213579..11c72f4287 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -92,25 +92,44 @@
 			</template>
 		</ErrorInformationCard>
 	</div>
+	<!-- Loading state (before serverData arrives) -->
+	<div
+		v-else-if="!serverData && !serverError"
+		class="flex min-h-[calc(100vh-4rem)] flex-col items-center justify-center gap-4"
+	>
+		<LoaderCircleIcon class="size-16 animate-spin" />
+		<span class="text-secondary">{{ formatMessage(loadingMessages.loadingServerPanel) }}</span>
+	</div>
 	<!-- SERVER START -->
 	<div
 		v-else-if="serverData"
 		data-pyro-server-manager-root
 		class="experimental-styles-within mobile-blurred-servericon relative mx-auto mb-12 box-border flex min-h-screen w-full min-w-0 max-w-[1280px] flex-col gap-6 px-6 transition-all duration-300"
+		:class="'server-panel-' + revealState"
 		:style="{
 			'--server-bg-image': serverImage
 				? `url(${serverImage})`
 				: `linear-gradient(180deg, rgba(153,153,153,1) 0%, rgba(87,87,87,1) 100%)`,
 		}"
 	>
+		<div
+			v-if="revealState === 'pending'"
+			class="flex min-h-[calc(100vh-4rem)] flex-col items-center justify-center gap-4"
+		>
+			<LoaderCircleIcon class="size-16 animate-spin" />
+			<span class="text-secondary">{{ formatMessage(loadingMessages.loadingServerPanel) }}</span>
+		</div>
+
 		<ServerManageHeader
+			class="server-stagger-item"
+			:style="{ '--si': 0 }"
 			:server="serverData"
 			:server-image="serverImage"
 			:server-project="serverProject"
 			:uptime-seconds="showUptime ? uptimeSeconds : undefined"
 		>
 			<template #actions>
-				<div v-if="isConnected && !serverData.flows?.intro" class="flex gap-2">
+				<div v-if="!serverData.flows?.intro" class="flex gap-2">
 					<PanelServerActionButton :disabled="!!installError" />
 					<ButtonStyled circular size="large">
 						<button v-tooltip="'Server settings'" @click="() => openServerSettingsModal()">
@@ -135,12 +154,13 @@
 		<template v-else>
 			<div
 				data-pyro-navigation
-				class="isolate flex w-full select-none flex-col justify-between gap-4 overflow-auto md:flex-row md:items-center"
+				class="server-stagger-item isolate flex w-full select-none flex-col justify-between gap-4 overflow-auto md:flex-row md:items-center"
+				:style="{ '--si': 1 }"
 			>
 				<NavTabs :links="navLinks" replace />
 			</div>
 
-			<div data-pyro-mount class="h-full w-full flex-1">
+			<div data-pyro-mount class="server-stagger-item h-full w-full flex-1" :style="{ '--si': 2 }">
 				<div
 					v-if="installError"
 					class="mx-auto mb-4 flex justify-between gap-2 rounded-2xl border-2 border-solid border-red bg-bg-red p-4 font-semibold text-contrast"
@@ -306,6 +326,7 @@
 import { Intercom, shutdown } from '@intercom/messenger-js-sdk'
 import type { Archon, Labrinth } from '@modrinth/api-client'
 import { ModrinthApiError } from '@modrinth/api-client'
+import type { Stats } from '@modrinth/utils'
 import {
 	BoxesIcon,
 	CheckIcon,
@@ -342,7 +363,8 @@ import {
 	ServerManageHeader,
 } from '#ui/components/servers/server-header'
 import ServerSettingsModal from '#ui/components/servers/ServerSettingsModal.vue'
-import { useDebugLogger, useServerImage, useServerProject } from '#ui/composables'
+import { useDebugLogger, useModrinthServersConsole, useServerImage, useServerProject } from '#ui/composables'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useServerManageCoreRuntime } from '#ui/composables/server-manage-core-runtime'
 import type { ServerSettingsTabId } from '#ui/layouts/shared/server-settings'
 import {
@@ -403,6 +425,15 @@ const props = withDefaults(
 	},
 )
 
+const { formatMessage } = useVIntl()
+
+const loadingMessages = defineMessages({
+	loadingServerPanel: {
+		id: 'servers.manage.loading.serverPanel',
+		defaultMessage: 'Loading your server panel...',
+	},
+})
+
 const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
@@ -524,9 +555,13 @@ const {
 	backupsState,
 	cleanupCoreRuntime,
 	connectSocket,
+	cpuData,
 	fsOps,
 	fsQueuedOps,
 	isConnected,
+	ramData,
+	serverPowerState,
+	stats,
 	uptimeSeconds,
 } = useServerManageCoreRuntime({
 	serverId: computed(() => props.serverId),
@@ -542,6 +577,60 @@ const {
 	onStateEvent,
 })
 
+type CachedWsState = {
+	stats: Stats
+	cpuData: number[]
+	ramData: number[]
+	powerState: Archon.Websocket.v0.PowerState
+	uptimeSeconds: number
+	consoleLines: string[]
+}
+
+const modrinthServersConsole = useModrinthServersConsole()
+const wsStateCacheKey = ['servers', 'ws-state', props.serverId] as const
+const cachedWsState = queryClient.getQueryData<CachedWsState>(wsStateCacheKey)
+if (cachedWsState) {
+	stats.value = cachedWsState.stats
+	cpuData.value = cachedWsState.cpuData
+	ramData.value = cachedWsState.ramData
+	serverPowerState.value = cachedWsState.powerState
+	uptimeSeconds.value = cachedWsState.uptimeSeconds
+}
+
+let hasReceivedWsData = false
+
+const saveWsStateToCache = () => {
+	if (!hasReceivedWsData) return
+	queryClient.setQueryData(wsStateCacheKey, {
+		stats: stats.value,
+		cpuData: cpuData.value,
+		ramData: ramData.value,
+		powerState: serverPowerState.value,
+		uptimeSeconds: uptimeSeconds.value,
+		consoleLines: modrinthServersConsole.output.value,
+	} satisfies CachedWsState)
+}
+
+watch([stats, serverPowerState], () => {
+	if (!isConnected.value) return
+	hasReceivedWsData = true
+})
+
+const revealState = ref<'pending' | 'revealing' | 'visible'>(
+	isConnected.value || serverData.value ? 'visible' : 'pending',
+)
+
+const REVEAL_TOTAL_MS = 2 * 80 + 400
+
+watch(isConnected, (connected) => {
+	if (connected && revealState.value === 'pending') {
+		revealState.value = 'revealing'
+		setTimeout(() => {
+			revealState.value = 'visible'
+		}, REVEAL_TOTAL_MS)
+	}
+})
+
 const navLinks = computed<Tab[]>(() => [
 	{
 		label: 'Overview',
@@ -1162,6 +1251,11 @@ function initializeServer() {
 				client.archon.sockets.on(targetServerId, 'filesystem-ops', handleFilesystemOps),
 				client.archon.sockets.on(targetServerId, 'new-mod', handleNewMod),
 			],
+		}).then((connected) => {
+			if (connected && cachedWsState?.consoleLines?.length) {
+				modrinthServersConsole.clear()
+				modrinthServersConsole.addLines(cachedWsState.consoleLines)
+			}
 		}).finally(() => {
 			isLoading.value = false
 		})
@@ -1177,6 +1271,8 @@ function initializeServer() {
 const cleanup = () => {
 	isMounted.value = false
 
+	saveWsStateToCache()
+
 	shutdown()
 
 	cleanupCoreRuntime(props.serverId)
@@ -1289,4 +1385,24 @@ onUnmounted(() => {
 		display: none;
 	}
 }
+
+.server-panel-pending .server-stagger-item {
+	opacity: 0;
+}
+
+.server-panel-revealing .server-stagger-item {
+	animation: serverReveal 0.4s ease-out both;
+	animation-delay: calc(var(--si) * 80ms);
+}
+
+@keyframes serverReveal {
+	from {
+		opacity: 0;
+		transform: translateY(12px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
 </style>

From 45ce65d99d8c40fada28ebc380264505444df8df Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Sat, 4 Apr 2026 09:06:42 -0600
Subject: [PATCH 26/50] pnpm prepr

---
 .../ui/src/components/modal/ConfirmModal.vue  |  2 +-
 .../src/components/nav/NotificationPanel.vue  |  1 +
 .../src/components/servers/ServerListing.vue  |  2 +-
 .../server-settings/pages/properties.vue      |  6 ++++-
 .../layouts/wrapped/hosting/manage/index.vue  |  6 ++++-
 .../layouts/wrapped/hosting/manage/root.vue   | 25 ++++++++++++-------
 packages/ui/src/locales/en-US/index.json      |  3 +++
 7 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/components/modal/ConfirmModal.vue b/packages/ui/src/components/modal/ConfirmModal.vue
index 785ad7f7b5..87a091324e 100644
--- a/packages/ui/src/components/modal/ConfirmModal.vue
+++ b/packages/ui/src/components/modal/ConfirmModal.vue
@@ -32,7 +32,7 @@
 			/>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled>
-					<button @click="hide()" class="!shadow-none">
+					<button class="!shadow-none" @click="hide()">
 						<XIcon />
 						Cancel
 					</button>
diff --git a/packages/ui/src/components/nav/NotificationPanel.vue b/packages/ui/src/components/nav/NotificationPanel.vue
index 195eb34a02..5c5de11a8a 100644
--- a/packages/ui/src/components/nav/NotificationPanel.vue
+++ b/packages/ui/src/components/nav/NotificationPanel.vue
@@ -93,6 +93,7 @@ import {
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
 import { useModalStack } from '#ui/composables/modal-stack.ts'
+
 import { injectNotificationManager, type WebNotification } from '../../providers'
 import ButtonStyled from '../base/ButtonStyled.vue'
 
diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index 353c830f61..e17a898af4 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -7,7 +7,7 @@
 					'!rounded-b-none border-b-0': hasNotice,
 					'bg-surface-2': isDisabled,
 					'active:scale-95': !isDisabled && !hasNotice,
-					'hoverable': !isDisabled,
+					hoverable: !isDisabled,
 				}"
 				data-pyro-server-listing
 				:data-pyro-server-listing-id="server_id"
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
index d5dd93ea78..e56e2f880e 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
@@ -233,7 +233,11 @@
 			:server-id="serverId"
 			:is-updating="isUpdating || busyReasons.length > 0"
 			restart
-			:save="async () => { await saveProperties() }"
+			:save="
+				async () => {
+					await saveProperties()
+				}
+			"
 			:reset="resetProperties"
 		/>
 	</div>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
index 8e68c385b9..9f4def1ff4 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
@@ -80,7 +80,11 @@
 		</div>
 
 		<Transition v-else name="fade" mode="out-in">
-			<div v-if="(isLoading || !authReady) && !serverResponse" key="loading" class="flex flex-col gap-4 py-8">
+			<div
+				v-if="(isLoading || !authReady) && !serverResponse"
+				key="loading"
+				class="flex flex-col gap-4 py-8"
+			>
 				<div class="mb-4 text-center">
 					<LoaderCircleIcon class="mx-auto size-8 animate-spin text-contrast" />
 					<p class="m-0 mt-2 text-secondary">{{ formatMessage(messages.loadingServers) }}</p>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index 11c72f4287..da736c5d46 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -326,7 +326,6 @@
 import { Intercom, shutdown } from '@intercom/messenger-js-sdk'
 import type { Archon, Labrinth } from '@modrinth/api-client'
 import { ModrinthApiError } from '@modrinth/api-client'
-import type { Stats } from '@modrinth/utils'
 import {
 	BoxesIcon,
 	CheckIcon,
@@ -343,6 +342,7 @@ import {
 	TransferIcon,
 	TriangleAlertIcon,
 } from '@modrinth/assets'
+import type { Stats } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useTimeoutFn } from '@vueuse/core'
 import DOMPurify from 'dompurify'
@@ -363,7 +363,12 @@ import {
 	ServerManageHeader,
 } from '#ui/components/servers/server-header'
 import ServerSettingsModal from '#ui/components/servers/ServerSettingsModal.vue'
-import { useDebugLogger, useModrinthServersConsole, useServerImage, useServerProject } from '#ui/composables'
+import {
+	useDebugLogger,
+	useModrinthServersConsole,
+	useServerImage,
+	useServerProject,
+} from '#ui/composables'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useServerManageCoreRuntime } from '#ui/composables/server-manage-core-runtime'
 import type { ServerSettingsTabId } from '#ui/layouts/shared/server-settings'
@@ -1251,14 +1256,16 @@ function initializeServer() {
 				client.archon.sockets.on(targetServerId, 'filesystem-ops', handleFilesystemOps),
 				client.archon.sockets.on(targetServerId, 'new-mod', handleNewMod),
 			],
-		}).then((connected) => {
-			if (connected && cachedWsState?.consoleLines?.length) {
-				modrinthServersConsole.clear()
-				modrinthServersConsole.addLines(cachedWsState.consoleLines)
-			}
-		}).finally(() => {
-			isLoading.value = false
 		})
+			.then((connected) => {
+				if (connected && cachedWsState?.consoleLines?.length) {
+					modrinthServersConsole.clear()
+					modrinthServersConsole.addLines(cachedWsState.consoleLines)
+				}
+			})
+			.finally(() => {
+				isLoading.value = false
+			})
 	}
 
 	if (serverData.value?.flows?.intro && serverProject.value) {
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 20d8a7e718..a916030387 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -2846,6 +2846,9 @@
   "servers.manage.loading-servers": {
     "defaultMessage": "Loading your servers..."
   },
+  "servers.manage.loading.serverPanel": {
+    "defaultMessage": "Loading your server panel..."
+  },
   "servers.manage.new-server-button": {
     "defaultMessage": "New server"
   },

From fce9d5956e93c81d9b3c6b64607e032bcf618cfa Mon Sep 17 00:00:00 2001
From: "Calum H." <calum@modrinth.com>
Date: Mon, 6 Apr 2026 19:04:03 +0200
Subject: [PATCH 27/50] feat: search page deduplication (#5754)

---
 .../src/components/ui/SearchCard.vue          |  164 ---
 .../src/components/ui/URLConfirmModal.vue     |   33 +-
 apps/app-frontend/src/pages/Browse.vue        | 1123 +++++++---------
 .../src/pages/instance/Worlds.vue             |   33 +-
 apps/frontend/src/pages/discover.vue          |    1 -
 .../src/pages/discover/[type]/index.vue       | 1145 ++++-------------
 packages/ui/src/components/base/NavTabs.vue   |    2 +-
 .../components/project/card/ProjectCard.vue   |    3 +-
 .../components/search/SearchFilterControl.vue |    8 +-
 packages/ui/src/layouts/index.ts              |    1 +
 .../shared/browse-tab/composables/index.ts    |    1 +
 .../composables/use-browse-search.ts          |  311 +++++
 .../src/layouts/shared/browse-tab/header.vue  |   63 +
 .../ui/src/layouts/shared/browse-tab/index.ts |    6 +
 .../src/layouts/shared/browse-tab/layout.vue  |  262 ++++
 .../browse-tab/providers/browse-manager.ts    |  106 ++
 .../shared/browse-tab/providers/index.ts      |    1 +
 .../src/layouts/shared/browse-tab/sidebar.vue |  177 +++
 .../ui/src/layouts/shared/browse-tab/types.ts |   46 +
 19 files changed, 1733 insertions(+), 1753 deletions(-)
 delete mode 100644 apps/app-frontend/src/components/ui/SearchCard.vue
 create mode 100644 packages/ui/src/layouts/shared/browse-tab/composables/index.ts
 create mode 100644 packages/ui/src/layouts/shared/browse-tab/composables/use-browse-search.ts
 create mode 100644 packages/ui/src/layouts/shared/browse-tab/header.vue
 create mode 100644 packages/ui/src/layouts/shared/browse-tab/index.ts
 create mode 100644 packages/ui/src/layouts/shared/browse-tab/layout.vue
 create mode 100644 packages/ui/src/layouts/shared/browse-tab/providers/browse-manager.ts
 create mode 100644 packages/ui/src/layouts/shared/browse-tab/providers/index.ts
 create mode 100644 packages/ui/src/layouts/shared/browse-tab/sidebar.vue
 create mode 100644 packages/ui/src/layouts/shared/browse-tab/types.ts

diff --git a/apps/app-frontend/src/components/ui/SearchCard.vue b/apps/app-frontend/src/components/ui/SearchCard.vue
deleted file mode 100644
index 9bfc7f5bdc..0000000000
--- a/apps/app-frontend/src/components/ui/SearchCard.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<template>
-	<ProjectCard
-		:title="project.name"
-		:link="
-			() => {
-				emit('open')
-				$router.push({
-					path: `/project/${project.project_id ?? project.id}`,
-					query: { i: props.instance ? props.instance.path : undefined },
-				})
-			}
-		"
-		:author="{ name: project.author, link: `https://modrinth.com/user/${project.author}` }"
-		:icon-url="project.icon_url"
-		:summary="project.summary"
-		:tags="project.display_categories"
-		:all-tags="project.categories"
-		:downloads="project.downloads"
-		:followers="project.follows"
-		:date-updated="project.date_modified"
-		:banner="project.featured_gallery ?? undefined"
-		:color="project.color ?? undefined"
-		:environment="
-			['mod', 'modpack'].includes(projectType)
-				? {
-						clientSide: project.client_side?.[0],
-						serverSide: project.server_side?.[0],
-					}
-				: undefined
-		"
-		layout="list"
-	>
-		<template #actions>
-			<ButtonStyled color="brand" type="outlined">
-				<button
-					:disabled="installed || installing"
-					class="shrink-0 no-wrap"
-					@click.stop="install()"
-				>
-					<SpinnerIcon v-if="installing" class="animate-spin" />
-					<template v-else-if="!installed">
-						<DownloadIcon v-if="shouldUseInstallIcon" />
-						<PlusIcon v-else />
-					</template>
-					<CheckIcon v-else />
-					{{ installActionLabel }}
-				</button>
-			</ButtonStyled>
-		</template>
-	</ProjectCard>
-</template>
-
-<script setup>
-import { CheckIcon, DownloadIcon, PlusIcon, SpinnerIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, ProjectCard } from '@modrinth/ui'
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import { computed, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-import { injectContentInstall } from '@/providers/content-install'
-
-const { install: installVersion } = injectContentInstall()
-
-dayjs.extend(relativeTime)
-
-const { handleError } = injectNotificationManager()
-
-const router = useRouter()
-
-const props = defineProps({
-	backgroundImage: {
-		type: String,
-		default: null,
-	},
-	project: {
-		type: Object,
-		required: true,
-	},
-	instance: {
-		type: Object,
-		default: null,
-	},
-	featured: {
-		type: Boolean,
-		default: false,
-	},
-	installed: {
-		type: Boolean,
-		default: false,
-	},
-	projectType: {
-		type: String,
-		default: undefined,
-	},
-	activeLoader: {
-		type: String,
-		default: null,
-	},
-	activeGameVersion: {
-		type: String,
-		default: null,
-	},
-	customInstall: {
-		type: Function,
-		default: null,
-	},
-})
-
-const emit = defineEmits(['open', 'install'])
-
-const installing = ref(false)
-const installActionLabel = computed(() =>
-	installing.value
-		? 'Installing'
-		: props.installed
-			? 'Installed'
-			: props.customInstall || modpack.value || props.instance
-				? 'Install'
-				: 'Add to an instance',
-)
-const shouldUseInstallIcon = computed(
-	() => !!props.customInstall || !!modpack.value || !!props.instance,
-)
-
-async function install() {
-	installing.value = true
-	if (props.customInstall) {
-		try {
-			const didInstall = await props.customInstall(props.project)
-			if (didInstall !== false) {
-				emit('install', props.project.project_id ?? props.project.id)
-			}
-		} catch (err) {
-			handleError(err)
-		} finally {
-			installing.value = false
-		}
-		return
-	}
-
-	await installVersion(
-		props.project.project_id ?? props.project.id,
-		null,
-		props.instance ? props.instance.path : null,
-		'SearchCard',
-		(versionId) => {
-			installing.value = false
-			if (versionId) {
-				emit('install', props.project.project_id ?? props.project.id)
-			}
-		},
-		(profile) => {
-			router.push(`/instance/${profile}`)
-		},
-		{
-			preferredLoader: props.activeLoader ?? undefined,
-			preferredGameVersion: props.activeGameVersion ?? undefined,
-		},
-	).catch(handleError)
-}
-
-const modpack = computed(() => props.project.project_types?.includes('modpack'))
-</script>
diff --git a/apps/app-frontend/src/components/ui/URLConfirmModal.vue b/apps/app-frontend/src/components/ui/URLConfirmModal.vue
index aa7917a5df..0ec7cd0bce 100644
--- a/apps/app-frontend/src/components/ui/URLConfirmModal.vue
+++ b/apps/app-frontend/src/components/ui/URLConfirmModal.vue
@@ -1,11 +1,9 @@
 <script setup>
-import { Button, injectNotificationManager } from '@modrinth/ui'
+import { Button, injectNotificationManager, ProjectCard } from '@modrinth/ui'
 import { ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import SearchCard from '@/components/ui/SearchCard.vue'
-import { get_project, get_version } from '@/helpers/cache.js'
-import { get_categories } from '@/helpers/tags.js'
+import { get_project_v3, get_version } from '@/helpers/cache.js'
 import { injectContentInstall } from '@/providers/content-install'
 
 const { handleError } = injectNotificationManager()
@@ -14,26 +12,22 @@ const { install: installVersion } = injectContentInstall()
 const confirmModal = ref(null)
 const project = ref(null)
 const version = ref(null)
-const categories = ref(null)
 const installing = ref(false)
 
 defineExpose({
 	async show(event) {
 		if (event.event === 'InstallVersion') {
 			version.value = await get_version(event.id, 'must_revalidate').catch(handleError)
-			project.value = await get_project(version.value.project_id, 'must_revalidate').catch(
+			project.value = await get_project_v3(version.value.project_id, 'must_revalidate').catch(
 				handleError,
 			)
 		} else {
-			project.value = await get_project(event.id, 'must_revalidate').catch(handleError)
+			project.value = await get_project_v3(event.id, 'must_revalidate').catch(handleError)
 			version.value = await get_version(
 				project.value.versions[project.value.versions.length - 1],
 				'must_revalidate',
 			).catch(handleError)
 		}
-		categories.value = (await get_categories().catch(handleError)).filter(
-			(cat) => project.value.categories.includes(cat.name) && cat.project_type === 'mod',
-		)
 		confirmModal.value.show()
 	},
 })
@@ -52,13 +46,22 @@ async function install() {
 </script>
 
 <template>
-	<ModalWrapper ref="confirmModal" :header="`Install ${project?.title}`">
+	<ModalWrapper ref="confirmModal" :header="`Install ${project?.name}`">
 		<div class="modal-body">
-			<SearchCard
-				:project="project"
+			<ProjectCard
+				:title="project.name"
+				:link="() => confirmModal.hide()"
+				:icon-url="project.icon_url"
+				:summary="project.summary"
+				:tags="project.display_categories"
+				:all-tags="project.categories"
+				:downloads="project.downloads"
+				:followers="project.follows"
+				:date-updated="project.date_modified"
+				:banner="project.featured_gallery ?? undefined"
+				:color="project.color ?? undefined"
+				layout="list"
 				class="project-card"
-				:categories="categories"
-				@open="confirmModal.hide()"
 			/>
 			<div class="button-row">
 				<div class="markdown-body">
diff --git a/apps/app-frontend/src/pages/Browse.vue b/apps/app-frontend/src/pages/Browse.vue
index 386bac5159..dcbe484463 100644
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -5,44 +5,33 @@ import {
 	ClipboardCopyIcon,
 	ExternalIcon,
 	GlobeIcon,
-	LeftArrowIcon,
 	PlayIcon,
 	PlusIcon,
-	SearchIcon,
+	SpinnerIcon,
 	StopCircleIcon,
 } from '@modrinth/assets'
-import type { ProjectType, SortType, Tags } from '@modrinth/ui'
+import type { CardAction, ProjectType, Tags } from '@modrinth/ui'
 import {
-	Admonition,
-	ButtonStyled,
-	Checkbox,
+	BrowsePageLayout,
+	BrowseSidebar,
 	commonMessages,
 	CreationFlowModal,
 	defineMessages,
-	DropdownSelect,
 	injectNotificationManager,
-	LoadingIndicator,
-	NavTabs,
-	Pagination,
-	ProjectCard,
-	ProjectCardList,
-	SearchFilterControl,
-	SearchSidebarFilter,
-	StyledInput,
+	provideBrowseManager,
+	useBrowseSearch,
 	useDebugLogger,
-	useSearch,
-	useServerSearch,
 	useVIntl,
 } from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
+import { convertFileSrc } from '@tauri-apps/api/core'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import type { Ref } from 'vue'
-import { computed, nextTick, onUnmounted, ref, shallowRef, toRaw, watch } from 'vue'
+import { computed, onUnmounted, ref, shallowRef, watch } from 'vue'
 import type { LocationQuery } from 'vue-router'
 import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
-import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
-import SearchCard from '@/components/ui/SearchCard.vue'
 import { get_project_v3, get_search_results_v3 } from '@/helpers/cache.js'
 import { process_listener } from '@/helpers/events'
 import { get_by_profile_path } from '@/helpers/process'
@@ -55,6 +44,7 @@ import {
 import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
 import type { GameInstance } from '@/helpers/types'
 import { add_server_to_profile, get_profile_worlds, getServerLatency } from '@/helpers/worlds'
+import { injectContentInstall } from '@/providers/content-install'
 import { injectServerInstall } from '@/providers/server-install'
 import {
 	createServerInstallContent,
@@ -67,6 +57,8 @@ const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const { installingServerProjects, playServerProject, showAddServerToInstanceModal } =
 	injectServerInstall()
+const { install: installVersion } = injectContentInstall()
+const queryClient = useQueryClient()
 const debugLog = useDebugLogger('Browse')
 
 const router = useRouter()
@@ -97,11 +89,6 @@ const {
 	markServerProjectInstalled,
 } = serverInstallContent
 
-const projectTypes = computed(() => {
-	debugLog('projectTypes computed', route.params.projectType)
-	return [route.params.projectType as ProjectType]
-})
-
 debugLog('fetching tags (categories, loaders, gameVersions)')
 const [categories, loaders, availableGameVersions] = await Promise.all([
 	get_categories()
@@ -154,8 +141,6 @@ const allInstalledIds = computed(
 	() => new Set([...newlyInstalled.value, ...(installedProjectIds.value ?? [])]),
 )
 
-const PERSISTENT_QUERY_PARAMS = ['i', 'ai', 'sid', 'wid', 'from']
-
 watchServerContextChanges()
 
 await initInstanceContext()
@@ -178,9 +163,6 @@ async function initInstanceContext() {
 			gameVersion: instance.value?.game_version,
 		})
 
-		// Load installed project IDs in background — the page and initial search render immediately.
-		// When this resolves, instanceFilters recomputes and triggers a search refresh
-		// that applies the "hide installed" negative filters and marks installed badges.
 		if (route.query.from === 'worlds') {
 			get_profile_worlds(route.query.i as string)
 				.then((worlds) => {
@@ -213,7 +195,7 @@ async function initInstanceContext() {
 		}
 	}
 
-	if (route.query.ai && !(projectTypes.value.length === 1 && projectTypes.value[0] === 'modpack')) {
+	if (route.query.ai && !(route.params.projectType === 'modpack')) {
 		debugLog('setting instanceHideInstalled from query', route.query.ai)
 		instanceHideInstalled.value = route.query.ai === 'true'
 	}
@@ -221,37 +203,22 @@ async function initInstanceContext() {
 
 const instanceFilters = computed(() => {
 	const filters = []
-	debugLog('instanceFilters recomputing', {
-		hasInstance: !!instance.value,
-		isServer: isServerInstance.value,
-		hideInstalled: instanceHideInstalled.value,
-	})
 
 	if (instance.value) {
 		const gameVersion = instance.value.game_version
 		if (gameVersion) {
-			filters.push({
-				type: 'game_version',
-				option: gameVersion,
-			})
+			filters.push({ type: 'game_version', option: gameVersion })
 		}
 
 		const platform = instance.value.loader
-
 		const supportedModLoaders = ['fabric', 'forge', 'quilt', 'neoforge']
 
-		if (platform && projectTypes.value.includes('mod') && supportedModLoaders.includes(platform)) {
-			filters.push({
-				type: 'mod_loader',
-				option: platform,
-			})
+		if (platform && projectType.value === 'mod' && supportedModLoaders.includes(platform)) {
+			filters.push({ type: 'mod_loader', option: platform })
 		}
 
 		if (isServerInstance.value) {
-			filters.push({
-				type: 'environment',
-				option: 'client',
-			})
+			filters.push({ type: 'environment', option: 'client' })
 		}
 
 		if (
@@ -259,68 +226,58 @@ const instanceFilters = computed(() => {
 			(installedProjectIds.value || newlyInstalled.value.length > 0)
 		) {
 			const allInstalled = [...(installedProjectIds.value ?? []), ...newlyInstalled.value]
-
 			allInstalled
-				.map((x) => ({
-					type: 'project_id',
-					option: `project_id:${x}`,
-					negative: true,
-				}))
+				.map((x) => ({ type: 'project_id', option: `project_id:${x}`, negative: true }))
 				.forEach((x) => filters.push(x))
 		}
 	}
 
-	debugLog('instanceFilters result', filters)
 	return filters
 })
 
-const {
-	// Selections
-	query,
-	currentSortType,
-	currentFilters,
-	toggledGroups,
-	maxResults,
-	currentPage,
-	overriddenProvidedFilterTypes,
-
-	// Lists
-	filters,
-	sortTypes,
-
-	// Computed
-	requestParams,
-
-	// Functions
-	createPageParams,
-} = useSearch(projectTypes, tags, instanceFilters)
-
-const activeLoader = computed(() => {
-	const filter = currentFilters.value.find((f) => f.type === 'mod_loader')
-	if (filter) return filter.option
-	if (projectType.value === 'datapack' || projectType.value === 'resourcepack') return 'vanilla'
-	return instance.value?.loader ?? null
-})
+const serverHideInstalled = ref(false)
+if (route.query.shi) {
+	serverHideInstalled.value = route.query.shi === 'true'
+}
 
-const activeGameVersion = computed(() => {
-	const filter = currentFilters.value.find((f) => f.type === 'game_version')
-	if (filter) return filter.option
-	return instance.value?.game_version ?? null
-})
+const serverContextFilters = computed(() => {
+	const filters: { type: string; option: string; negative?: boolean }[] = []
+	if (!serverContextServerData.value) return filters
+	const pt = projectType.value
 
-function onSearchResultInstalled(id: string) {
-	if (isServerContext.value) {
-		markServerProjectInstalled(id)
-		return
+	if (pt !== 'modpack') {
+		const gameVersion = serverContextServerData.value.mc_version
+		if (gameVersion) filters.push({ type: 'game_version', option: gameVersion })
+
+		const platform = serverContextServerData.value.loader?.toLowerCase()
+		if (platform && ['fabric', 'forge', 'quilt', 'neoforge'].includes(platform))
+			filters.push({ type: 'mod_loader', option: platform })
+		if (platform && ['paper', 'purpur'].includes(platform))
+			filters.push({ type: 'plugin_loader', option: platform })
+
+		if (pt === 'mod') filters.push({ type: 'environment', option: 'server' })
+	}
+
+	if (pt === 'modpack') {
+		filters.push(
+			{ type: 'environment', option: 'client' },
+			{ type: 'environment', option: 'server' },
+		)
+	}
+
+	if (serverHideInstalled.value && serverContentProjectIds.value.size > 0) {
+		for (const id of serverContentProjectIds.value) {
+			filters.push({ type: 'project_id', option: `project_id:${id}`, negative: true })
+		}
 	}
-	newlyInstalled.value.push(id)
-}
 
-const serverHits = shallowRef<Labrinth.Search.v3.ResultSearchProject[]>([])
-const filteredServerHits = computed(() => {
-	if (!instanceHideInstalled.value || allInstalledIds.value.size === 0) return serverHits.value
-	return serverHits.value.filter((hit) => !allInstalledIds.value.has(hit.project_id))
+	return filters
 })
+
+const combinedProvidedFilters = computed(() =>
+	isServerContext.value ? serverContextFilters.value : instanceFilters.value,
+)
+
 const serverPings = shallowRef<Record<string, number | undefined>>({})
 const runningServerProjects = ref<Record<string, string>>({})
 
@@ -353,9 +310,11 @@ async function handleStopServerProject(projectId: string) {
 async function handlePlayServerProject(projectId: string) {
 	debugLog('handlePlayServerProject', projectId)
 	await playServerProject(projectId)
-	checkServerRunningStates(serverHits.value)
+	checkServerRunningStates(lastServerHits.value)
 }
 
+const lastServerHits = shallowRef<Labrinth.Search.v3.ResultSearchProject[]>([])
+
 async function handleAddServerToInstance(project: Labrinth.Search.v3.ResultSearchProject) {
 	debugLog('handleAddServerToInstance', { projectId: project.project_id, name: project.name })
 	const address = getServerAddress(project.minecraft_java_server)
@@ -380,6 +339,22 @@ async function handleAddServerToInstance(project: Labrinth.Search.v3.ResultSearc
 	}
 }
 
+async function pingServerHits(hits: Labrinth.Search.v3.ResultSearchProject[]) {
+	debugLog('pingServerHits', { hitCount: hits.length })
+	const pingsToFetch = hits.filter((hit) => hit.minecraft_java_server?.address)
+	await Promise.all(
+		pingsToFetch.map(async (hit) => {
+			const address = hit.minecraft_java_server!.address!
+			try {
+				const latency = await getServerLatency(address)
+				serverPings.value = { ...serverPings.value, [hit.project_id]: latency }
+			} catch (err) {
+				console.error(`Failed to ping server ${address}:`, err)
+			}
+		}),
+	)
+}
+
 const unlistenProcesses = await process_listener(
 	(e: { event: string; profile_path_id: string }) => {
 		debugLog('process event', e)
@@ -399,45 +374,6 @@ onUnmounted(() => {
 	unlistenProcesses()
 })
 
-const {
-	serverCurrentSortType,
-	serverCurrentFilters,
-	serverToggledGroups,
-	serverSortTypes,
-	serverFilterTypes,
-	serverRequestParams,
-	createServerPageParams,
-} = useServerSearch({ tags, query, maxResults, currentPage })
-
-if (instance.value?.game_version) {
-	const gv = instance.value.game_version
-	const alreadyHasGv = serverCurrentFilters.value.some(
-		(f) => f.type === 'server_game_version' && f.option === gv,
-	)
-	if (!alreadyHasGv) {
-		serverCurrentFilters.value.push({ type: 'server_game_version', option: gv })
-	}
-}
-
-async function pingServerHits(hits: Labrinth.Search.v3.ResultSearchProject[]) {
-	debugLog('pingServerHits', { hitCount: hits.length })
-	const pingsToFetch = hits.filter((hit) => hit.minecraft_java_server?.address)
-	await Promise.all(
-		pingsToFetch.map(async (hit) => {
-			const address = hit.minecraft_java_server!.address!
-			try {
-				const latency = await getServerLatency(address)
-				serverPings.value = { ...serverPings.value, [hit.project_id]: latency }
-			} catch (err) {
-				console.error(`Failed to ping server ${address}:`, err)
-			}
-		}),
-	)
-}
-
-const previousFilterState = ref('')
-let searchVersion = 0
-
 const offline = ref(!navigator.onLine)
 window.addEventListener('offline', () => {
 	debugLog('went offline')
@@ -550,181 +486,8 @@ onBeforeRouteLeave(() => {
 	})
 })
 
-const loading = ref(true)
-
 const projectType = ref<ProjectType>(route.params.projectType as ProjectType)
 
-watch(projectType, () => {
-	loading.value = true
-})
-
-interface SearchResults extends Labrinth.Search.v3.SearchResults {
-	hits: (Labrinth.Search.v3.ResultSearchProject & { installed?: boolean })[]
-}
-
-const results: Ref<SearchResults | null> = shallowRef(null)
-const pageCount = computed(() =>
-	results.value ? Math.ceil(results.value.total_hits / results.value.hits_per_page) : 1,
-)
-
-const effectiveRequestParams = computed(() => {
-	const isServer = projectType.value === 'server'
-	debugLog('effectiveRequestParams computed', { isServer })
-	return isServer ? serverRequestParams.value : requestParams.value
-})
-
-let searchDebounceTimer: ReturnType<typeof setTimeout> | null = null
-
-watch(effectiveRequestParams, () => {
-	if (!route.params.projectType) return
-	debugLog('effectiveRequestParams changed, debouncing search')
-	if (searchDebounceTimer) clearTimeout(searchDebounceTimer)
-	searchDebounceTimer = setTimeout(() => {
-		refreshSearch()
-	}, 200)
-})
-
-async function refreshSearch() {
-	const version = ++searchVersion
-	debugLog('refreshSearch start', { version, projectType: projectType.value })
-
-	try {
-		const isServer = projectType.value === 'server'
-		const searchParams = isServer ? serverRequestParams.value : requestParams.value
-
-		debugLog('searching v3', searchParams)
-		let rawResults = (await get_search_results_v3(searchParams)) as {
-			result: SearchResults
-		} | null
-
-		if (version !== searchVersion) {
-			debugLog('search version stale, discarding', { version, current: searchVersion })
-			return
-		}
-
-		if (!rawResults) {
-			rawResults = {
-				result: {
-					hits: [],
-					total_hits: 0,
-					hits_per_page: maxResults.value,
-					page: 1,
-				},
-			}
-		}
-
-		if (isServer) {
-			const hits = rawResults.result.hits ?? []
-			debugLog('server search results', {
-				hitCount: hits.length,
-				totalHits: rawResults.result.total_hits,
-			})
-			serverHits.value = hits
-			serverPings.value = {}
-			pingServerHits(hits)
-			checkServerRunningStates(hits)
-			results.value = {
-				hits: [],
-				total_hits: rawResults.result.total_hits ?? 0,
-				hits_per_page: maxResults.value,
-				page: 1,
-			}
-		} else {
-			if (instance.value || isServerContext.value) {
-				const allInstalledIds = instance.value
-					? new Set([...newlyInstalled.value, ...(installedProjectIds.value ?? [])])
-					: serverContentProjectIds.value
-
-				rawResults.result.hits = rawResults.result.hits.map((val) => ({
-					...val,
-					installed: allInstalledIds.has(val.project_id),
-				}))
-			}
-			debugLog('v3 search results', {
-				hitCount: rawResults.result.hits.length,
-				totalHits: rawResults.result.total_hits,
-			})
-			results.value = {
-				...rawResults.result,
-				hits_per_page: maxResults.value,
-			}
-		}
-
-		const currentFilterState = JSON.stringify({
-			query: query.value,
-			filters: toRaw(currentFilters.value),
-			sort: toRaw(currentSortType.value),
-			maxResults: maxResults.value,
-			projectTypes: toRaw(projectTypes.value),
-		})
-
-		if (previousFilterState.value && previousFilterState.value !== currentFilterState) {
-			debugLog('filters changed, resetting to page 1')
-			currentPage.value = 1
-		}
-
-		previousFilterState.value = currentFilterState
-
-		const persistentParams: LocationQuery = {}
-
-		for (const [key, value] of Object.entries(route.query)) {
-			if (PERSISTENT_QUERY_PARAMS.includes(key)) {
-				persistentParams[key] = value
-			}
-		}
-
-		if (serverIdQuery.value) {
-			persistentParams.sid = serverIdQuery.value
-			if (effectiveServerWorldId.value) {
-				persistentParams.wid = effectiveServerWorldId.value
-			}
-		}
-
-		if (instanceHideInstalled.value) {
-			persistentParams.ai = 'true'
-		} else {
-			delete persistentParams.ai
-		}
-
-		const params = {
-			...persistentParams,
-			...(isServer ? createServerPageParams() : createPageParams()),
-		}
-
-		debugLog('updating URL', params)
-		router.replace({ path: route.path, query: params })
-
-		loading.value = false
-		debugLog('refreshSearch complete', { version })
-	} catch (err) {
-		debugLog('refreshSearch error', err)
-		if (version === searchVersion) {
-			loading.value = false
-		}
-	}
-}
-
-async function setPage(newPageNumber: number) {
-	debugLog('setPage', newPageNumber)
-	currentPage.value = newPageNumber
-
-	await onSearchChangeToTop()
-}
-
-const searchWrapper: Ref<HTMLElement | null> = ref(null)
-
-async function onSearchChangeToTop() {
-	await nextTick()
-
-	window.scrollTo({ top: 0, behavior: 'smooth' })
-}
-
-function clearSearch() {
-	debugLog('clearSearch')
-	query.value = ''
-	currentPage.value = 1
-}
-
 watch(
 	() => route.params.projectType as ProjectType,
 	async (newType) => {
@@ -733,13 +496,11 @@ watch(
 			if (newType !== 'modpack') return
 		}
 
-		// Check if the newType is not the same as the current value
 		if (!newType || newType === projectType.value) return
 
 		debugLog('projectType route param changed', { from: projectType.value, to: newType })
 		projectType.value = newType
 
-		// If instance context was removed (e.g. sidebar browse navigation), reset state
 		if (!route.query.i && instance.value) {
 			debugLog('instance context removed, resetting')
 			instance.value = null
@@ -750,9 +511,6 @@ watch(
 			breadcrumbs.setName('BrowseTitle', formatMessage(messages.discoverContent))
 			breadcrumbs.setContext(null)
 		}
-
-		currentSortType.value = { display: 'Relevance', name: 'relevance' }
-		query.value = ''
 	},
 )
 
@@ -782,21 +540,11 @@ const selectableProjectTypes = computed(() => {
 
 	const params: LocationQuery = {}
 
-	if (route.query.i) {
-		params.i = route.query.i
-	}
-	if (route.query.ai) {
-		params.ai = route.query.ai
-	}
-	if (route.query.from) {
-		params.from = route.query.from
-	}
-	if (route.query.sid) {
-		params.sid = route.query.sid
-	}
-	if (effectiveServerWorldId.value) {
-		params.wid = effectiveServerWorldId.value
-	}
+	if (route.query.i) params.i = route.query.i
+	if (route.query.ai) params.ai = route.query.ai
+	if (route.query.from) params.from = route.query.from
+	if (route.query.sid) params.sid = route.query.sid
+	if (effectiveServerWorldId.value) params.wid = effectiveServerWorldId.value
 
 	const queryString = new URLSearchParams(params as Record<string, string>).toString()
 	const suffix = queryString ? `?${queryString}` : ''
@@ -826,7 +574,7 @@ const getServerModpackContent = (project: Labrinth.Search.v3.ResultSearchProject
 		if (!project_name) return undefined
 		return {
 			name: project_name,
-			icon: project_icon,
+			icon: project_icon ?? undefined,
 			onclick:
 				project_id !== project.project_id
 					? () => {
@@ -839,18 +587,11 @@ const getServerModpackContent = (project: Labrinth.Search.v3.ResultSearchProject
 	return undefined
 }
 
-const options = ref(null)
+const contextMenuRef = ref(null)
 // @ts-expect-error - no event types
 const handleRightClick = (event, result) => {
 	// @ts-ignore
-	options.value?.showMenu(event, result, [
-		{
-			name: 'open_link',
-		},
-		{
-			name: 'copy_link',
-		},
-	])
+	contextMenuRef.value?.showMenu(event, result, [{ name: 'open_link' }, { name: 'copy_link' }])
 }
 // @ts-expect-error - no event types
 const handleOptionsClick = (args) => {
@@ -866,361 +607,362 @@ const handleOptionsClick = (args) => {
 	}
 }
 
-debugLog('performing initial search')
-await refreshSearch()
+const installContext = computed(() => {
+	if (isServerContext.value && serverContextServerData.value) {
+		return {
+			name: serverContextServerData.value.name,
+			loader: serverContextServerData.value.loader ?? '',
+			gameVersion: serverContextServerData.value.mc_version ?? '',
+			serverId: serverIdQuery.value,
+			upstream: serverContextServerData.value.upstream,
+			iconSrc: null as string | null,
+			isMedal: serverContextServerData.value.is_medal,
+			backUrl: serverBackUrl.value,
+			backLabel: serverBackLabel.value,
+			heading: serverBrowseHeading.value,
+		}
+	}
+	if (instance.value) {
+		return {
+			name: instance.value.name,
+			loader: instance.value.loader,
+			gameVersion: instance.value.game_version,
+			iconSrc: instance.value.icon_path ? convertFileSrc(instance.value.icon_path) : null,
+			backUrl: `/instance/${encodeURIComponent(instance.value.path)}${isFromWorlds.value ? '/worlds' : ''}`,
+			backLabel: 'Back to instance',
+			heading: formatMessage(
+				isFromWorlds.value ? messages.addServersToInstance : messages.installContentToInstance,
+			),
+			warning:
+				isServerInstance.value && !isFromWorlds.value
+					? 'Adding content can break compatibility when joining the server. Any added content will also be lost when you update the server instance content.'
+					: undefined,
+		}
+	}
+	return null
+})
+
+const installingProjectIds = ref<Set<string>>(new Set())
+
+function getCardActions(
+	result: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
+	currentProjectType: string,
+): CardAction[] {
+	if (currentProjectType === 'server') {
+		const serverResult = result as Labrinth.Search.v3.ResultSearchProject
+		const isInstalled = allInstalledIds.value.has(serverResult.project_id)
+
+		if (isFromWorlds.value && instance.value) {
+			return [
+				{
+					key: 'add-to-instance',
+					label: formatMessage(isInstalled ? messages.added : messages.addToInstance),
+					icon: isInstalled ? CheckIcon : PlusIcon,
+					disabled: isInstalled,
+					color: 'brand',
+					type: 'outlined',
+					onClick: () => handleAddServerToInstance(serverResult),
+				},
+			]
+		}
+
+		const actions: CardAction[] = []
+
+		actions.push({
+			key: 'add',
+			label: '',
+			icon: isInstalled ? CheckIcon : PlusIcon,
+			disabled: isInstalled,
+			circular: true,
+			tooltip: isInstalled
+				? formatMessage(messages.alreadyAdded)
+				: instance.value
+					? formatMessage(messages.addToInstanceName, { instanceName: instance.value.name })
+					: formatMessage(messages.addServerToInstance),
+			onClick: () => handleAddServerToInstance(serverResult),
+		})
+
+		if (runningServerProjects.value[serverResult.project_id]) {
+			actions.push({
+				key: 'stop',
+				label: formatMessage(commonMessages.stopButton),
+				icon: StopCircleIcon,
+				color: 'red',
+				type: 'outlined',
+				onClick: () => handleStopServerProject(serverResult.project_id),
+			})
+		} else {
+			const isInstalling = (installingServerProjects.value as string[]).includes(
+				serverResult.project_id,
+			)
+			actions.push({
+				key: 'play',
+				label: formatMessage(
+					isInstalling ? commonMessages.installingLabel : commonMessages.playButton,
+				),
+				icon: PlayIcon,
+				disabled: isInstalling,
+				color: 'brand',
+				type: 'outlined',
+				onClick: () => handlePlayServerProject(serverResult.project_id),
+			})
+		}
+
+		return actions
+	}
+
+	// Non-server project actions
+	const projectResult = result as (Labrinth.Search.v2.ResultSearchProject &
+		Labrinth.Search.v3.ResultSearchProject) & {
+		installed?: boolean
+		installing?: boolean
+	}
+	const isInstalled =
+		projectResult.installed ||
+		allInstalledIds.value.has(projectResult.project_id || '') ||
+		serverContentProjectIds.value.has(projectResult.project_id || '')
+	const isInstalling = installingProjectIds.value.has(projectResult.project_id)
+
+	if (
+		isServerContext.value &&
+		['modpack', 'mod', 'plugin', 'datapack'].includes(currentProjectType)
+	) {
+		return [
+			{
+				key: 'install',
+				label: isInstalling ? 'Installing' : isInstalled ? 'Installed' : 'Install',
+				icon: isInstalled ? CheckIcon : PlusIcon,
+				disabled: isInstalled || isInstalling,
+				color: 'brand',
+				type: 'outlined',
+				onClick: async () => {
+					installingProjectIds.value.add(projectResult.project_id)
+					try {
+						const didInstall = await installProjectToServer(projectResult)
+						if (didInstall !== false) {
+							onSearchResultInstalled(projectResult.project_id)
+						}
+					} catch (err) {
+						handleError(err as Error)
+					} finally {
+						installingProjectIds.value.delete(projectResult.project_id)
+					}
+				},
+			},
+		]
+	}
+
+	const isModpack = projectResult.project_types?.includes('modpack')
+	const shouldUseInstallIcon = !!instance.value || isModpack
+
+	return [
+		{
+			key: 'install',
+			label: isInstalling
+				? 'Installing'
+				: isInstalled
+					? 'Installed'
+					: shouldUseInstallIcon
+						? 'Install'
+						: 'Add to an instance',
+			icon: isInstalling ? SpinnerIcon : isInstalled ? CheckIcon : PlusIcon,
+			disabled: isInstalled || isInstalling,
+			color: 'brand',
+			type: 'outlined',
+			onClick: async () => {
+				installingProjectIds.value.add(projectResult.project_id)
+				await installVersion(
+					projectResult.project_id,
+					null,
+					instance.value ? instance.value.path : null,
+					'SearchCard',
+					(versionId) => {
+						installingProjectIds.value.delete(projectResult.project_id)
+						if (versionId) {
+							onSearchResultInstalled(projectResult.project_id)
+						}
+					},
+					(profile) => {
+						router.push(`/instance/${profile}`)
+					},
+					{
+						preferredLoader: instance.value?.loader ?? undefined,
+						preferredGameVersion: instance.value?.game_version ?? undefined,
+					},
+				).catch((err) => {
+					installingProjectIds.value.delete(projectResult.project_id)
+					handleError(err)
+				})
+			},
+		},
+	]
+}
+
+function onSearchResultInstalled(id: string) {
+	if (isServerContext.value) {
+		markServerProjectInstalled(id)
+		return
+	}
+	newlyInstalled.value.push(id)
+}
+
+async function search(requestParams: string) {
+	debugLog('searching v3', requestParams)
+	const isServer = projectType.value === 'server'
 
-// Initialize previousFilterState after first search
-previousFilterState.value = JSON.stringify({
-	query: query.value,
-	filters: currentFilters.value,
-	sort: currentSortType.value,
-	maxResults: maxResults.value,
-	projectTypes: projectTypes.value,
+	const rawResults = await queryClient.fetchQuery({
+		queryKey: ['search', 'v3', requestParams],
+		queryFn: () =>
+			get_search_results_v3(requestParams) as Promise<{
+				result: Labrinth.Search.v3.SearchResults & {
+					hits: (Labrinth.Search.v3.ResultSearchProject & { installed?: boolean })[]
+				}
+			} | null>,
+		staleTime: 30_000,
+	})
+
+	if (!rawResults) {
+		return {
+			projectHits: [],
+			serverHits: [],
+			total_hits: 0,
+			per_page: 20,
+		}
+	}
+
+	if (isServer) {
+		const hits = rawResults.result.hits ?? []
+		lastServerHits.value = hits
+		serverPings.value = {}
+		pingServerHits(hits)
+		checkServerRunningStates(hits)
+		return {
+			projectHits: [],
+			serverHits: hits,
+			total_hits: rawResults.result.total_hits ?? 0,
+			per_page: rawResults.result.hits_per_page,
+		}
+	}
+
+	const hits = rawResults.result.hits.map((hit) => {
+		const mapped = {
+			...hit,
+			title: hit.name,
+			description: hit.summary,
+		} as unknown as Labrinth.Search.v2.ResultSearchProject & { installed?: boolean }
+
+		if (instance.value || isServerContext.value) {
+			const installedIds = instance.value
+				? new Set([...newlyInstalled.value, ...(installedProjectIds.value ?? [])])
+				: serverContentProjectIds.value
+			mapped.installed = installedIds.has(hit.project_id)
+		}
+
+		return mapped
+	})
+
+	return {
+		projectHits: hits,
+		serverHits: [],
+		total_hits: rawResults.result.total_hits,
+		per_page: rawResults.result.hits_per_page,
+	}
+}
+
+const isServerFilterContext = computed(() => isServerContext.value || isServerInstance.value)
+
+const lockedFilterMessages = computed(() => ({
+	gameVersion: formatMessage(
+		isServerFilterContext.value
+			? messages.gameVersionProvidedByServer
+			: messages.gameVersionProvidedByInstance,
+	),
+	modLoader: formatMessage(
+		isServerFilterContext.value
+			? messages.modLoaderProvidedByServer
+			: messages.modLoaderProvidedByInstance,
+	),
+	environment: formatMessage(messages.environmentProvidedByServer),
+	syncButton: formatMessage(messages.syncFilterButton),
+	providedBy: formatMessage(
+		isServerFilterContext.value ? messages.providedByServer : messages.providedByInstance,
+	),
+}))
+
+const searchState = useBrowseSearch({
+	projectType,
+	tags,
+	providedFilters: combinedProvidedFilters,
+	search,
+	persistentQueryParams: ['i', 'ai', 'shi', 'sid', 'wid', 'from'],
+	getExtraQueryParams: () => ({
+		sid: serverIdQuery.value || undefined,
+		wid: effectiveServerWorldId.value || undefined,
+		ai: instanceHideInstalled.value ? 'true' : undefined,
+		shi: serverHideInstalled.value ? 'true' : undefined,
+	}),
+})
+
+if (instance.value?.game_version) {
+	const gv = instance.value.game_version
+	const alreadyHasGv = searchState.serverCurrentFilters.value.some(
+		(f) => f.type === 'server_game_version' && f.option === gv,
+	)
+	if (!alreadyHasGv) {
+		searchState.serverCurrentFilters.value.push({ type: 'server_game_version', option: gv })
+	}
+}
+
+await searchState.refreshSearch()
+
+provideBrowseManager({
+	tags,
+	projectType,
+	...searchState,
+	getProjectLink: (result: Labrinth.Search.v2.ResultSearchProject) => ({
+		path: `/project/${result.project_id ?? result.slug}`,
+		query: instance.value ? { i: instance.value.path } : undefined,
+	}),
+	getServerProjectLink: (result: Labrinth.Search.v3.ResultSearchProject) =>
+		`/project/${result.slug ?? result.project_id}`,
+	selectableProjectTypes,
+	showProjectTypeTabs: computed(() => !isServerContext.value),
+	variant: 'app',
+	getCardActions,
+	installContext,
+	providedFilters: combinedProvidedFilters,
+	hideInstalled: computed({
+		get: () => (isServerContext.value ? serverHideInstalled.value : instanceHideInstalled.value),
+		set: (val: boolean) => {
+			if (isServerContext.value) serverHideInstalled.value = val
+			else instanceHideInstalled.value = val
+		},
+	}),
+	showHideInstalled: computed(
+		() => (isServerContext.value && projectType.value !== 'modpack') || !!instance.value,
+	),
+	hideInstalledLabel: computed(() =>
+		formatMessage(isFromWorlds.value ? messages.hideAddedServers : messages.hideInstalledContent),
+	),
+	onInstalled: onSearchResultInstalled,
+	serverPings,
+	getServerModpackContent,
+	onContextMenu: handleRightClick,
+	offline,
+	lockedFilterMessages,
 })
 </script>
 
 <template>
-	<Teleport v-if="filters" to="#sidebar-teleport-target">
-		<div
-			v-if="instance"
-			class="border-0 border-b-[1px] p-4 last:border-b-0 border-[--brand-gradient-border] border-solid"
-		>
-			<Checkbox
-				v-model="instanceHideInstalled"
-				:label="
-					formatMessage(isFromWorlds ? messages.hideAddedServers : messages.hideInstalledContent)
-				"
-				class="filter-checkbox"
-				@update:model-value="onSearchChangeToTop()"
-				@click.prevent.stop
-			/>
-		</div>
-		<template v-if="projectType === 'server'">
-			<SearchSidebarFilter
-				v-for="filterType in serverFilterTypes.filter((f) => f.options.length > 0)"
-				:key="`server-filter-${filterType.id}`"
-				v-model:selected-filters="serverCurrentFilters"
-				v-model:toggled-groups="serverToggledGroups"
-				:provided-filters="[]"
-				:filter-type="filterType"
-				class="border-0 border-b-[1px] [&:first-child>button]:pt-4 last:border-b-0 border-[--brand-gradient-border] border-solid"
-				button-class="button-animation flex flex-col gap-1 px-4 py-3 w-full bg-transparent cursor-pointer border-none hover:bg-button-bg"
-				content-class="mb-3"
-				inner-panel-class="ml-2 mr-3"
-				:open-by-default="
-					![
-						'server_category_minecraft_server_meta',
-						'server_category_minecraft_server_community',
-						'server_game_version',
-						'server_status',
-					].includes(filterType.id)
-				"
-			>
-				<template #header>
-					<h3 class="text-base m-0">{{ filterType.formatted_name }}</h3>
-				</template>
-			</SearchSidebarFilter>
-		</template>
-		<template v-else>
-			<SearchSidebarFilter
-				v-for="filter in filters.filter((f) => f.display !== 'none')"
-				:key="`filter-${filter.id}`"
-				v-model:selected-filters="currentFilters"
-				v-model:toggled-groups="toggledGroups"
-				v-model:overridden-provided-filter-types="overriddenProvidedFilterTypes"
-				:provided-filters="instanceFilters"
-				:filter-type="filter"
-				class="border-0 border-b-[1px] [&:first-child>button]:pt-4 last:border-b-0 border-[--brand-gradient-border] border-solid"
-				button-class="button-animation flex flex-col gap-1 px-4 py-3 w-full bg-transparent cursor-pointer border-none hover:bg-button-bg"
-				content-class="mb-3"
-				inner-panel-class="ml-2 mr-3"
-				:open-by-default="
-					filter.id.startsWith('category') || filter.id === 'environment' || filter.id === 'license'
-				"
-			>
-				<template #header>
-					<h3 class="text-base m-0">{{ filter.formatted_name }}</h3>
-				</template>
-				<template #locked-game_version>
-					{{
-						formatMessage(
-							isServerInstance
-								? messages.gameVersionProvidedByServer
-								: messages.gameVersionProvidedByInstance,
-						)
-					}}
-				</template>
-				<template #locked-mod_loader>
-					{{
-						formatMessage(
-							isServerInstance
-								? messages.modLoaderProvidedByServer
-								: messages.modLoaderProvidedByInstance,
-						)
-					}}
-				</template>
-				<template #locked-environment>
-					{{ formatMessage(messages.environmentProvidedByServer) }}
-				</template>
-				<template #sync-button> {{ formatMessage(messages.syncFilterButton) }} </template>
-			</SearchSidebarFilter>
-		</template>
-	</Teleport>
-	<div ref="searchWrapper" class="flex flex-col gap-3 p-6">
-		<template v-if="isServerContext && serverContextServerData">
-			<div class="mb-1 flex flex-wrap items-center justify-between gap-3">
-				<div class="flex min-w-0 flex-col gap-1">
-					<span class="text-lg font-bold text-contrast">{{ serverContextServerData.name }}</span>
-					<span class="text-sm font-medium text-secondary">
-						{{ serverContextServerData.loader }} {{ serverContextServerData.mc_version }}
-					</span>
-				</div>
-				<ButtonStyled>
-					<button @click="router.push(serverBackUrl)">
-						<LeftArrowIcon />
-						{{ serverBackLabel }}
-					</button>
-				</ButtonStyled>
-			</div>
-			<h1 class="m-0 mb-1 text-xl font-extrabold">{{ serverBrowseHeading }}</h1>
-		</template>
-		<template v-else-if="instance">
-			<InstanceIndicator :instance="instance" :back-tab="isFromWorlds ? 'worlds' : undefined" />
-			<h1 class="m-0 mb-1 text-xl">
-				{{
-					formatMessage(
-						isFromWorlds ? messages.addServersToInstance : messages.installContentToInstance,
-					)
-				}}
-			</h1>
-			<Admonition v-if="isServerInstance && !isFromWorlds" type="warning" class="mb-1">
-				Adding content can break compatibility when joining the server. Any added content will also
-				be lost when you update the server instance content.
-			</Admonition>
-		</template>
-		<NavTabs v-if="!isServerContext" :links="selectableProjectTypes" />
-		<StyledInput
-			v-model="query"
-			:icon="SearchIcon"
-			type="text"
-			autocomplete="off"
-			:placeholder="`Search ${projectType}s...`"
-			clearable
-			wrapper-class="w-full"
-			input-class="h-12"
-			@clear="clearSearch()"
-		/>
-		<div class="flex gap-2">
-			<DropdownSelect
-				v-slot="{ selected }"
-				:model-value="projectType === 'server' ? serverCurrentSortType : currentSortType"
-				class="max-w-[16rem]"
-				name="Sort by"
-				:options="(projectType === 'server' ? serverSortTypes : sortTypes) as any"
-				:display-name="(option: SortType | undefined) => option?.display"
-				@update:model-value="
-					(v: SortType) => {
-						if (projectType === 'server') serverCurrentSortType = v
-						else currentSortType = v
-					}
-				"
-			>
-				<span class="font-semibold text-primary">Sort by: </span>
-				<span class="font-semibold text-secondary">{{ selected }}</span>
-			</DropdownSelect>
-			<DropdownSelect
-				v-slot="{ selected }"
-				v-model="maxResults"
-				name="Max results"
-				:options="[5, 10, 15, 20, 50, 100]"
-				class="max-w-[9rem]"
-			>
-				<span class="font-semibold text-primary">View: </span>
-				<span class="font-semibold text-secondary">{{ selected }}</span>
-			</DropdownSelect>
-			<Pagination :page="currentPage" :count="pageCount" class="ml-auto" @switch-page="setPage" />
-		</div>
-		<SearchFilterControl
-			v-if="projectType === 'server'"
-			v-model:selected-filters="serverCurrentFilters"
-			:filters="serverFilterTypes"
-			:provided-filters="[]"
-			:overridden-provided-filter-types="[]"
-		/>
-		<SearchFilterControl
-			v-else
-			v-model:selected-filters="currentFilters"
-			:filters="filters.filter((f) => f.display !== 'none')"
-			:provided-filters="instanceFilters"
-			:overridden-provided-filter-types="overriddenProvidedFilterTypes"
-			:provided-message="isServerInstance ? messages.providedByServer : messages.providedByInstance"
-		/>
-		<div class="search">
-			<section v-if="loading" class="offline">
-				<LoadingIndicator />
-			</section>
-			<section v-else-if="offline && results?.total_hits === 0" class="offline">
-				You are currently offline. Connect to the internet to browse Modrinth!
-			</section>
-			<section
-				v-else-if="
-					projectType === 'server'
-						? filteredServerHits.length === 0
-						: results && results.hits && results.hits.length === 0
-				"
-				class="offline"
-			>
-				No results found for your query!
-			</section>
-
-			<ProjectCardList v-else :layout="'list'">
-				<template v-if="projectType === 'server'">
-					<ProjectCard
-						v-for="project in filteredServerHits"
-						:key="`server-card-${project.project_id}`"
-						:title="project.name"
-						:icon-url="project.icon_url || undefined"
-						:summary="project.summary"
-						:tags="project.categories"
-						:link="`/project/${project.slug ?? project.project_id}`"
-						:server-online-players="project.minecraft_java_server?.ping?.data?.players_online ?? 0"
-						:server-region="project.minecraft_server?.region"
-						:server-recent-plays="project.minecraft_java_server?.verified_plays_2w ?? 0"
-						:server-modpack-content="getServerModpackContent(project)"
-						:server-ping="serverPings[project.project_id]"
-						:server-status-online="!!project.minecraft_java_server?.ping?.data"
-						:hide-online-players-label="true"
-						:hide-recent-plays-label="true"
-						layout="list"
-						:max-tags="2"
-						is-server-project
-						exclude-loaders
-						@contextmenu.prevent.stop="
-							(event: any) =>
-								handleRightClick(event, { project_types: ['server'], slug: project.slug })
-						"
-					>
-						<template #actions>
-							<div class="flex gap-2">
-								<template v-if="isFromWorlds && instance">
-									<ButtonStyled color="brand" type="outlined">
-										<button
-											:disabled="allInstalledIds.has(project.project_id)"
-											@click.stop="() => handleAddServerToInstance(project)"
-										>
-											<CheckIcon v-if="allInstalledIds.has(project.project_id)" />
-											<PlusIcon v-else />
-											{{
-												formatMessage(
-													allInstalledIds.has(project.project_id)
-														? messages.added
-														: messages.addToInstance,
-												)
-											}}
-										</button>
-									</ButtonStyled>
-								</template>
-								<template v-else>
-									<ButtonStyled circular>
-										<button
-											v-tooltip="
-												allInstalledIds.has(project.project_id)
-													? formatMessage(messages.alreadyAdded)
-													: instance
-														? formatMessage(messages.addToInstanceName, {
-																instanceName: instance.name,
-															})
-														: formatMessage(messages.addServerToInstance)
-											"
-											:disabled="allInstalledIds.has(project.project_id)"
-											@click.stop="() => handleAddServerToInstance(project)"
-										>
-											<CheckIcon v-if="allInstalledIds.has(project.project_id)" />
-											<PlusIcon v-else />
-										</button>
-									</ButtonStyled>
-									<ButtonStyled
-										v-if="runningServerProjects[project.project_id]"
-										color="red"
-										type="outlined"
-									>
-										<button @click="() => handleStopServerProject(project.project_id)">
-											<StopCircleIcon />
-											{{ formatMessage(commonMessages.stopButton) }}
-										</button>
-									</ButtonStyled>
-									<ButtonStyled v-else color="brand" type="outlined">
-										<button
-											:disabled="
-												(installingServerProjects as string[]).includes(project.project_id)
-											"
-											@click="() => handlePlayServerProject(project.project_id)"
-										>
-											<PlayIcon />
-											{{
-												formatMessage(
-													(installingServerProjects as string[]).includes(project.project_id)
-														? commonMessages.installingLabel
-														: commonMessages.playButton,
-												)
-											}}
-										</button>
-									</ButtonStyled>
-								</template>
-							</div>
-						</template>
-					</ProjectCard>
-				</template>
-				<template v-else>
-					<SearchCard
-						v-for="result in results?.hits ?? []"
-						:key="result?.project_id"
-						:project-type="projectType"
-						:project="result"
-						:instance="instance ?? undefined"
-						:active-loader="activeLoader ?? undefined"
-						:active-game-version="activeGameVersion ?? undefined"
-						:categories="[
-							...(categories ?? []).filter(
-								(cat) =>
-									result?.display_categories.includes(cat.name) && cat.project_type === projectType,
-							),
-							...(loaders ?? []).filter(
-								(loader) =>
-									result?.display_categories.includes(loader.name) &&
-									loader.supported_project_types?.includes(projectType),
-							),
-						]"
-						:installed="
-							result.installed ||
-							allInstalledIds.has(result.project_id || '') ||
-							serverContentProjectIds.has(result.project_id || '')
-						"
-						:custom-install="
-							isServerContext && ['modpack', 'mod', 'plugin', 'datapack'].includes(projectType)
-								? installProjectToServer
-								: undefined
-						"
-						@install="onSearchResultInstalled"
-						@contextmenu.prevent.stop="(event: any) => handleRightClick(event, result)"
-					/>
-				</template>
-
-				<ContextMenu ref="options" @option-clicked="handleOptionsClick">
+	<div class="flex flex-col gap-3 p-6">
+		<BrowsePageLayout>
+			<template #after>
+				<ContextMenu ref="contextMenuRef" @option-clicked="handleOptionsClick">
 					<template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
 					<template #copy_link> <ClipboardCopyIcon /> Copy link </template>
 				</ContextMenu>
-			</ProjectCardList>
-			<div class="flex justify-end">
-				<pagination
-					:page="currentPage"
-					:count="pageCount"
-					class="pagination-after"
-					@switch-page="setPage"
-				/>
-			</div>
-		</div>
-
+			</template>
+		</BrowsePageLayout>
 		<CreationFlowModal
 			v-if="isServerContext && projectType === 'modpack'"
 			ref="serverSetupModalRef"
@@ -1234,5 +976,8 @@ previousFilterState.value = JSON.stringify({
 			@browse-modpacks="() => {}"
 			@create="handleServerModpackFlowCreate"
 		/>
+		<Teleport to="#sidebar-teleport-target">
+			<BrowseSidebar />
+		</Teleport>
 	</div>
 </template>
diff --git a/apps/app-frontend/src/pages/instance/Worlds.vue b/apps/app-frontend/src/pages/instance/Worlds.vue
index e8b79f4380..861eba0188 100644
--- a/apps/app-frontend/src/pages/instance/Worlds.vue
+++ b/apps/app-frontend/src/pages/instance/Worlds.vue
@@ -357,9 +357,7 @@ const MAX_LINUX_REFRESHES = 3
 const isLinux = platform() === 'linux'
 const linuxRefreshCount = ref(0)
 
-const protocolVersion = ref<ProtocolVersion | null>(
-	await get_profile_protocol_version(instance.value.path),
-)
+const protocolVersion = ref<ProtocolVersion | null>(null)
 const managedServerName = ref<string | null>(null)
 const managedServerAddress = ref<string | null>(null)
 
@@ -424,22 +422,27 @@ watch(
 	{ immediate: true },
 )
 
-const unlistenProfile = await profile_listener(async (e: ProfileEvent) => {
-	if (e.profile_path_id !== instance.value.path) return
+const [unlistenProfile, , resolvedProtocolVersion, resolvedGameVersions] = await Promise.all([
+	profile_listener(async (e: ProfileEvent) => {
+		if (e.profile_path_id !== instance.value.path) return
 
-	console.info(`Handling profile event '${e.event}' for profile: ${e.profile_path_id}`)
+		console.info(`Handling profile event '${e.event}' for profile: ${e.profile_path_id}`)
 
-	if (e.event === 'servers_updated') {
-		if (isLinux && linuxRefreshCount.value >= MAX_LINUX_REFRESHES) return
-		if (isLinux) linuxRefreshCount.value++
+		if (e.event === 'servers_updated') {
+			if (isLinux && linuxRefreshCount.value >= MAX_LINUX_REFRESHES) return
+			if (isLinux) linuxRefreshCount.value++
 
-		await refreshAllWorlds()
-	}
+			await refreshAllWorlds()
+		}
 
-	await handleDefaultProfileUpdateEvent(worlds.value, instance.value.path, e)
-})
+		await handleDefaultProfileUpdateEvent(worlds.value, instance.value.path, e)
+	}),
+	refreshAllWorlds(),
+	get_profile_protocol_version(instance.value.path).catch(() => null),
+	get_game_versions().catch(() => [] as GameVersion[]),
+])
 
-await refreshAllWorlds()
+protocolVersion.value = resolvedProtocolVersion
 
 async function refreshServer(address: string) {
 	if (!serverData.value[address]) {
@@ -589,7 +592,7 @@ function worldsMatch(world: World, other: World | undefined) {
 	return false
 }
 
-const gameVersions = ref<GameVersion[]>(await get_game_versions().catch(() => []))
+const gameVersions = ref<GameVersion[]>(resolvedGameVersions)
 const supportsServerQuickPlay = computed(() =>
 	hasServerQuickPlaySupport(gameVersions.value, instance.value.game_version),
 )
diff --git a/apps/frontend/src/pages/discover.vue b/apps/frontend/src/pages/discover.vue
index bd046074fb..52c17c4638 100644
--- a/apps/frontend/src/pages/discover.vue
+++ b/apps/frontend/src/pages/discover.vue
@@ -50,7 +50,6 @@ const selectableProjectTypes = [
 <template>
 	<div class="new-page sidebar" :class="{ 'alt-layout': !cosmetics.rightSearchLayout }">
 		<section class="normal-page__header mb-4 flex flex-col gap-4">
-			<div id="discover-header-prefix" class="empty:hidden"></div>
 			<NavTabs
 				v-if="!flags.projectTypesPrimaryNav && allowTabChanging"
 				:links="selectableProjectTypes"
diff --git a/apps/frontend/src/pages/discover/[type]/index.vue b/apps/frontend/src/pages/discover/[type]/index.vue
index f28b0ed87d..3fdd1a72a0 100644
--- a/apps/frontend/src/pages/discover/[type]/index.vue
+++ b/apps/frontend/src/pages/discover/[type]/index.vue
@@ -4,44 +4,29 @@ import {
 	BookmarkIcon,
 	CheckIcon,
 	DownloadIcon,
-	FilterIcon,
-	GameIcon,
 	GridIcon,
 	HeartIcon,
 	ImageIcon,
-	InfoIcon,
-	LeftArrowIcon,
 	ListIcon,
-	MinecraftServerIcon,
 	MoreVerticalIcon,
-	SearchIcon,
-	XIcon,
 } from '@modrinth/assets'
+import type { CardAction, CreationFlowContextValue } from '@modrinth/ui'
 import {
-	Avatar,
-	ButtonStyled,
-	Checkbox,
-	type CreationFlowContextValue,
+	BrowseInstallHeader,
+	BrowsePageLayout,
+	BrowseSidebar,
 	CreationFlowModal,
 	defineMessages,
-	DropdownSelect,
 	injectModrinthClient,
 	injectNotificationManager,
-	Pagination,
-	ProjectCard,
-	ProjectCardList,
-	SearchFilterControl,
-	SearchSidebarFilter,
-	type SortType,
-	StyledInput,
+	provideBrowseManager,
+	useBrowseSearch,
 	useDebugLogger,
-	useSearch,
-	useServerSearch,
 	useVIntl,
 } from '@modrinth/ui'
-import { capitalizeString, cycleValue } from '@modrinth/utils'
+import { cycleValue } from '@modrinth/utils'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
-import { useThrottleFn, useTimeoutFn } from '@vueuse/core'
+import { useTimeoutFn } from '@vueuse/core'
 import { computed, nextTick, ref, watch } from 'vue'
 
 import LogoAnimated from '~/components/brand/LogoAnimated.vue'
@@ -60,7 +45,6 @@ const queryClient = useQueryClient()
 const filtersMenuOpen = ref(false)
 
 const route = useRoute()
-const router = useRouter()
 
 const cosmetics = useCosmetics()
 const tags = useGeneratedState()
@@ -115,10 +99,16 @@ const currentType = computed(() =>
 	queryAsStringOrEmpty(route.params.type).replaceAll(/^\/|s\/?$/g, ''),
 )
 
+debug('initial route.params.type:', route.params.type, '→ currentType:', currentType.value)
+
 const isServerType = computed(() => currentType.value === 'server')
 
 const projectType = computed(() => tags.value.projectTypes.find((x) => x.id === currentType.value))
-const projectTypes = computed(() => (projectType.value ? [projectType.value.id] : []))
+
+watch(
+	() => projectType.value?.id,
+	(val) => debug('projectType.id changed:', val),
+)
 
 const resultsDisplayLocation = computed<DisplayLocation | undefined>(
 	() => projectType.value?.id as DisplayLocation,
@@ -129,10 +119,27 @@ const resultsDisplayMode = computed<DisplayMode>(() =>
 		: 'list',
 )
 
+const maxResultsForView = ref<Record<DisplayMode, number[]>>({
+	list: [5, 10, 15, 20, 50, 100],
+	grid: [6, 12, 18, 24, 48, 96],
+	gallery: [6, 10, 16, 20, 50, 100],
+})
+
+const currentMaxResultsOptions = computed(
+	() => maxResultsForView.value[resultsDisplayMode.value] ?? [20],
+)
+
+function cycleSearchDisplayMode() {
+	if (!resultsDisplayLocation.value) return
+	cosmetics.value.searchDisplayMode[resultsDisplayLocation.value] = cycleValue(
+		cosmetics.value.searchDisplayMode[resultsDisplayLocation.value],
+		tags.value.projectViewModes.filter((x) => x !== 'grid'),
+	)
+}
+
 const currentServerId = computed(() => queryAsString(route.query.sid) || null)
 const fromContext = computed(() => queryAsString(route.query.from) || null)
 const currentWorldId = computed(() => queryAsString(route.query.wid) || undefined)
-debug('currentServerId:', currentServerId.value)
 
 const {
 	data: serverData,
@@ -166,7 +173,6 @@ const serverIcon = computed(() => {
 
 const serverHideInstalled = ref(false)
 
-// TanStack Query for server content list
 const contentQueryKey = computed(() => ['content', 'list', currentServerId.value ?? ''] as const)
 const { data: serverContentData, error: serverContentError } = useQuery({
 	queryKey: contentQueryKey,
@@ -174,7 +180,6 @@ const { data: serverContentData, error: serverContentError } = useQuery({
 	enabled: computed(() => !!currentServerId.value && !!currentWorldId.value),
 })
 
-// Watch for errors and notify user
 watch(serverContentError, (error) => {
 	if (error) {
 		console.error('Failed to load server content:', error)
@@ -182,14 +187,6 @@ watch(serverContentError, (error) => {
 	}
 })
 
-// Re-run search when server content loads so "Hide installed" filter applies
-watch(serverContentData, () => {
-	if (serverHideInstalled.value) {
-		updateSearchResults(1, false)
-	}
-})
-
-// Install content mutation
 const installContentMutation = useMutation({
 	mutationFn: ({
 		serverId,
@@ -211,8 +208,6 @@ const installContentMutation = useMutation({
 	},
 })
 
-const PERSISTENT_QUERY_PARAMS = ['sid', 'wid', 'shi', 'from']
-
 if (route.query.shi && projectType.value?.id !== 'modpack') {
 	serverHideInstalled.value = route.query.shi === 'true'
 }
@@ -228,37 +223,23 @@ const serverFilters = computed(() => {
 	if (serverData.value && projectType.value?.id !== 'modpack') {
 		const gameVersion = serverData.value.mc_version
 		if (gameVersion) {
-			filters.push({
-				type: 'game_version',
-				option: gameVersion,
-			})
+			filters.push({ type: 'game_version', option: gameVersion })
 		}
 
 		const platform = serverData.value.loader?.toLowerCase()
 
 		const modLoaders = ['fabric', 'forge', 'quilt', 'neoforge']
-
 		if (platform && modLoaders.includes(platform)) {
-			filters.push({
-				type: 'mod_loader',
-				option: platform,
-			})
+			filters.push({ type: 'mod_loader', option: platform })
 		}
 
 		const pluginLoaders = ['paper', 'purpur']
-
 		if (platform && pluginLoaders.includes(platform)) {
-			filters.push({
-				type: 'plugin_loader',
-				option: platform,
-			})
+			filters.push({ type: 'plugin_loader', option: platform })
 		}
 
 		if (projectType.value?.id === 'mod') {
-			filters.push({
-				type: 'environment',
-				option: 'server',
-			})
+			filters.push({ type: 'environment', option: 'server' })
 		}
 
 		if (serverHideInstalled.value && serverContentData.value) {
@@ -279,142 +260,14 @@ const serverFilters = computed(() => {
 
 	if (currentServerId.value && projectType.value?.id === 'modpack') {
 		filters.push(
-			{
-				type: 'environment',
-				option: 'client',
-			},
-			{
-				type: 'environment',
-				option: 'server',
-			},
+			{ type: 'environment', option: 'client' },
+			{ type: 'environment', option: 'server' },
 		)
 	}
 	debug('serverFilters result:', filters)
 	return filters
 })
 
-const maxResultsForView = ref<Record<DisplayMode, number[]>>({
-	list: [5, 10, 15, 20, 50, 100],
-	grid: [6, 12, 18, 24, 48, 96],
-	gallery: [6, 10, 16, 20, 50, 100],
-})
-
-const currentMaxResultsOptions = computed(
-	() => maxResultsForView.value[resultsDisplayMode.value] ?? [20],
-)
-
-const LOADER_FILTER_TYPES = [
-	'mod_loader',
-	'plugin_loader',
-	'modpack_loader',
-	'shader_loader',
-	'plugin_platform',
-] as const
-
-const {
-	// Selections
-	query,
-	currentSortType,
-	currentFilters,
-	toggledGroups,
-	maxResults,
-	currentPage,
-	overriddenProvidedFilterTypes,
-
-	// Lists
-	filters,
-	sortTypes,
-
-	// Computed
-	requestParams,
-
-	// Functions
-	createPageParams,
-} = useSearch(projectTypes, tags, serverFilters)
-debug('useSearch initialized, requestParams:', requestParams.value)
-
-const {
-	serverCurrentSortType,
-	serverCurrentFilters,
-	serverToggledGroups,
-	serverSortTypes,
-	serverFilterTypes,
-	serverRequestParams,
-	createServerPageParams,
-} = useServerSearch({ tags, query, maxResults, currentPage })
-
-const effectiveRequestParams = computed(() =>
-	isServerType.value ? serverRequestParams.value : requestParams.value,
-)
-const effectiveSortTypes = computed(() =>
-	isServerType.value ? (serverSortTypes as readonly SortType[]) : sortTypes,
-)
-const effectiveCurrentSortType = computed({
-	get: () => (isServerType.value ? serverCurrentSortType.value : currentSortType.value),
-	set: (v: SortType) => {
-		if (isServerType.value) serverCurrentSortType.value = v
-		else currentSortType.value = v
-	},
-})
-const effectiveCurrentFilters = computed({
-	get: () => (isServerType.value ? serverCurrentFilters.value : currentFilters.value),
-	set: (v) => {
-		if (isServerType.value) serverCurrentFilters.value = v
-		else currentFilters.value = v
-	},
-})
-const selectedFilterTags = computed(() =>
-	currentFilters.value
-		.filter(
-			(f) =>
-				f.type.startsWith('category_') ||
-				LOADER_FILTER_TYPES.includes(f.type as (typeof LOADER_FILTER_TYPES)[number]),
-		)
-		.map((f) => f.option),
-)
-const excludeLoaders = computed(
-	() =>
-		currentFilters.value.some((f) =>
-			LOADER_FILTER_TYPES.includes(f.type as (typeof LOADER_FILTER_TYPES)[number]),
-		) || ['resourcepack', 'datapack'].includes(currentType.value),
-)
-
-const loadersNotForThisType = computed(() => {
-	return (
-		tags.value?.loaders
-			?.filter((loader) => !loader.supported_project_types.includes(currentType.value))
-			?.map((loader) => loader.name) ?? []
-	)
-})
-
-const deprioritizedTags = computed(() => {
-	return [...selectedFilterTags.value, ...loadersNotForThisType.value]
-})
-
-const messages = defineMessages({
-	gameVersionProvidedByServer: {
-		id: 'search.filter.locked.server-game-version.title',
-		defaultMessage: 'Game version is provided by the server',
-	},
-	modLoaderProvidedByServer: {
-		id: 'search.filter.locked.server-loader.title',
-		defaultMessage: 'Loader is provided by the server',
-	},
-	providedByServer: {
-		id: 'search.filter.locked.server',
-		defaultMessage: 'Provided by the server',
-	},
-	syncFilterButton: {
-		id: 'search.filter.locked.server.sync',
-		defaultMessage: 'Sync with server',
-	},
-	gameVersionShaderMessage: {
-		id: 'search.filter.game-version-shader-message',
-		defaultMessage:
-			'Shader packs for older versions most likely work on newer versions with only minor issues.',
-	},
-})
-
 interface InstallableSearchResult extends Labrinth.Search.v2.ResultSearchProject {
 	installing?: boolean
 	installed?: boolean
@@ -428,7 +281,6 @@ async function serverInstall(project: InstallableSearchResult) {
 	project.installing = true
 	try {
 		if (projectType.value?.id === 'modpack') {
-			// TODO: restore limit=1 once the backend fix for version ordering is deployed (limit is applied before sorting)
 			const versions = await client.labrinth.versions_v2.getProjectVersions(project.project_id, {
 				include_changelog: false,
 			})
@@ -498,7 +350,7 @@ function getServerModpackContent(project: Labrinth.Search.v3.ResultSearchProject
 		if (!project_name) return undefined
 		return {
 			name: project_name,
-			icon: project_icon,
+			icon: project_icon ?? undefined,
 			onclick:
 				project_id !== project.project_id ? () => navigateTo(`/project/${project_id}`) : undefined,
 			showCustomModpackTooltip: project_id === project.project_id,
@@ -507,157 +359,114 @@ function getServerModpackContent(project: Labrinth.Search.v3.ResultSearchProject
 	return undefined
 }
 
-const noLoad = ref(false)
-const {
-	data: rawResults,
-	refresh: refreshSearch,
-	pending: searchLoading,
-} = useLazyFetch(
-	() => {
-		const config = useRuntimeConfig()
-		let base = import.meta.server ? config.apiBaseUrl : config.public.apiBaseUrl
-
-		if (currentType.value === 'server') {
-			base = base.replace(/\/v\d\//, '/v3/').replace(/\/v\d$/, '/v3')
-		}
-
-		return `${base}search${effectiveRequestParams.value}`
-	},
-	{
-		headers: computed(() => withLabrinthCanaryHeader()),
-
-		watch: false,
-		transform: (
-			hits: Labrinth.Search.v2.SearchResults | Labrinth.Search.v3.SearchResults,
-		): Labrinth.Search.v2.SearchResults => {
-			noLoad.value = false
-			if ('hits_per_page' in hits) {
-				return {
-					hits: hits.hits as unknown as Labrinth.Search.v2.ResultSearchProject[],
-					total_hits: hits.total_hits,
-					limit: hits.hits_per_page,
-					offset: (hits.page - 1) * hits.hits_per_page,
-				}
-			}
-			return hits
-		},
-	},
-)
-
-watch(searchLoading, (val) => debug('searchLoading:', val))
-watch(rawResults, (val) => debug('rawResults changed, total_hits:', val?.total_hits))
-
-const results = computed(() => rawResults.value)
-const serverResults = computed(() =>
-	isServerType.value ? (results.value as Labrinth.Search.v3.SearchResults | null) : null,
-)
-const projectResults = computed(() =>
-	isServerType.value ? null : (results.value as Labrinth.Search.v2.SearchResults | null),
-)
-const pageCount = computed(() => {
-	if (!results.value) return 1
-	// @ts-expect-error
-	const perPage = 'limit' in results.value ? results.value.limit : results.value.hits_per_page
-	return Math.ceil(results.value.total_hits / perPage)
-})
+async function search(requestParams: string) {
+	debug('search() called', {
+		requestParams: requestParams.substring(0, 100),
+		isServer: isServerType.value,
+		projectTypeId: projectTypeId.value,
+	})
+	const config = useRuntimeConfig()
+	let base = import.meta.server ? config.apiBaseUrl : config.public.apiBaseUrl
 
-function scrollToTop(behavior: ScrollBehavior = 'smooth') {
-	window.scrollTo({ top: 0, behavior })
-}
-
-function updateSearchResults(pageNumber: number = 1, resetScroll = true) {
-	debug(
-		'updateSearchResults called, page:',
-		pageNumber,
-		'query:',
-		query.value,
-		'requestParams:',
-		requestParams.value,
-	)
-	currentPage.value = pageNumber
-	if (resetScroll) {
-		scrollToTop()
+	if (isServerType.value) {
+		base = base.replace(/\/v\d\//, '/v3/').replace(/\/v\d$/, '/v3')
 	}
-	noLoad.value = true
 
-	if (query.value === null) {
-		debug('updateSearchResults: query is null, returning early')
-		return
-	}
-
-	debug('updateSearchResults: calling refreshSearch')
-	refreshSearch()
+	const url = `${base}search${requestParams}`
+	debug('search() fetching:', url.substring(0, 120))
 
-	if (import.meta.client) {
-		const persistentParams: Record<string, any> = {}
-
-		for (const [key, value] of Object.entries(route.query)) {
-			if (PERSISTENT_QUERY_PARAMS.includes(key)) {
-				persistentParams[key] = value
-			}
-		}
+	const raw = await $fetch<Labrinth.Search.v2.SearchResults | Labrinth.Search.v3.SearchResults>(
+		url,
+		{
+			headers: withLabrinthCanaryHeader(),
+		},
+	)
 
-		if (serverHideInstalled.value) {
-			persistentParams.shi = 'true'
-		} else {
-			delete persistentParams.shi
-		}
+	debug('search() response', { total_hits: raw.total_hits, hitCount: raw.hits?.length })
 
-		const params = {
-			...persistentParams,
-			...(isServerType.value ? createServerPageParams() : createPageParams()),
+	if ('hits_per_page' in raw) {
+		// v3 response (servers)
+		return {
+			projectHits: [],
+			serverHits: raw.hits as Labrinth.Search.v3.ResultSearchProject[],
+			total_hits: raw.total_hits,
+			per_page: raw.hits_per_page,
 		}
+	}
 
-		router.replace({ path: route.path, query: params })
+	return {
+		projectHits: raw.hits as Labrinth.Search.v2.ResultSearchProject[],
+		serverHits: [],
+		total_hits: raw.total_hits,
+		per_page: raw.limit,
 	}
 }
 
-watch([effectiveCurrentFilters], () => {
-	updateSearchResults(1, false)
-})
+function getCardActions(
+	result: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
+	currentProjectType: string,
+): CardAction[] {
+	if (currentProjectType === 'server') return []
 
-const throttledSearch = useThrottleFn(() => updateSearchResults(), 500, true)
+	const projectResult = result as InstallableSearchResult
 
-function cycleSearchDisplayMode() {
-	if (!resultsDisplayLocation.value) {
-		// if no display location, abort
-		return
+	if (flags.value.showDiscoverProjectButtons) {
+		return [
+			{
+				key: 'download',
+				label: 'Download',
+				icon: DownloadIcon,
+				color: 'brand',
+				onClick: () => {},
+			},
+			{
+				key: 'heart',
+				label: '',
+				icon: HeartIcon,
+				circular: true,
+				onClick: () => {},
+			},
+			{
+				key: 'bookmark',
+				label: '',
+				icon: BookmarkIcon,
+				circular: true,
+				onClick: () => {},
+			},
+			{
+				key: 'more',
+				label: '',
+				icon: MoreVerticalIcon,
+				circular: true,
+				type: 'transparent',
+				onClick: () => {},
+			},
+		]
 	}
-	cosmetics.value.searchDisplayMode[resultsDisplayLocation.value] = cycleValue(
-		cosmetics.value.searchDisplayMode[resultsDisplayLocation.value],
-		tags.value.projectViewModes.filter((x) => x !== 'grid'),
-	)
-	setClosestMaxResults()
-}
 
-function setClosestMaxResults() {
-	const maxResultsOptions = maxResultsForView.value[resultsDisplayMode.value] ?? [20]
-	const currentMax = maxResults.value
-	if (!maxResultsOptions.includes(currentMax)) {
-		maxResults.value = maxResultsOptions.reduce((prev: number, curr: number) => {
-			return Math.abs(curr - currentMax) <= Math.abs(prev - currentMax) ? curr : prev
-		})
-	}
-}
+	if (serverData.value) {
+		const isInstalled =
+			projectResult.installed ||
+			(serverContentData.value &&
+				(serverContentData.value.addons ?? []).find((x) => x.project_id === result.project_id)) ||
+			serverData.value.upstream?.project_id === result.project_id
 
-const ogTitle = computed(
-	() =>
-		`Search ${projectType.value?.display ?? 'project'}s${query.value ? ' | ' + query.value : ''}`,
-)
-const description = computed(
-	() =>
-		`Search and browse thousands of Minecraft ${projectType.value?.display ?? 'project'}s on Modrinth with instant, accurate search results. Our filters help you quickly find the best Minecraft ${projectType.value?.display ?? 'project'}s.`,
-)
+		return [
+			{
+				key: 'install',
+				label: projectResult.installing ? 'Installing...' : isInstalled ? 'Installed' : 'Install',
+				icon: isInstalled ? CheckIcon : DownloadIcon,
+				disabled: !!isInstalled || !!projectResult.installing,
+				color: 'brand',
+				type: 'outlined',
+				onClick: () => serverInstall(projectResult),
+			},
+		]
+	}
 
-const serverBackUrl = computed(() => {
-	if (!serverData.value) return ''
-	const id = serverData.value.server_id
-	if (fromContext.value === 'onboarding') return `/hosting/manage/${id}?resumeModal=setup-type`
-	if (fromContext.value === 'reset-server') return `/hosting/manage/${id}?openSettings=installation`
-	return `/hosting/manage/${id}/content`
-})
+	return []
+}
 
-// Onboarding modpack flow: show creation flow modal overlay on discovery page
 const onboardingModalRef = ref<InstanceType<typeof CreationFlowModal> | null>(null)
 const onboardingInstallingProject = ref<InstallableSearchResult | null>(null)
 
@@ -700,410 +509,174 @@ async function onModpackFlowCreate(config: CreationFlowContextValue) {
 	}
 }
 
+const serverBackUrl = computed(() => {
+	if (!serverData.value) return ''
+	const id = serverData.value.server_id
+	if (fromContext.value === 'onboarding') return `/hosting/manage/${id}?resumeModal=setup-type`
+	if (fromContext.value === 'reset-server') return `/hosting/manage/${id}?openSettings=installation`
+	return `/hosting/manage/${id}/content`
+})
+
+const serverBackLabel = computed(() => {
+	if (fromContext.value === 'onboarding') return 'Back to setup'
+	if (fromContext.value === 'reset-server') return 'Cancel reset'
+	return 'Back to server'
+})
+
+const serverBrowseHeading = computed(() =>
+	fromContext.value === 'reset-server'
+		? 'Select modpack to install after reset'
+		: 'Install content to server',
+)
+
+const installContext = computed(() => {
+	if (!serverData.value) return null
+	return {
+		name: serverData.value.name,
+		loader: serverData.value.loader ?? '',
+		gameVersion: serverData.value.mc_version ?? '',
+		serverId: currentServerId.value,
+		upstream: serverData.value.upstream,
+		iconSrc: serverIcon.value,
+		isMedal: serverData.value.is_medal,
+		backUrl: serverBackUrl.value,
+		backLabel: serverBackLabel.value,
+		heading: serverBrowseHeading.value,
+	}
+})
+
+const messages = defineMessages({
+	gameVersionProvidedByServer: {
+		id: 'search.filter.locked.server-game-version.title',
+		defaultMessage: 'Game version is provided by the server',
+	},
+	modLoaderProvidedByServer: {
+		id: 'search.filter.locked.server-loader.title',
+		defaultMessage: 'Loader is provided by the server',
+	},
+	providedByServer: {
+		id: 'search.filter.locked.server',
+		defaultMessage: 'Provided by the server',
+	},
+	syncFilterButton: {
+		id: 'search.filter.locked.server.sync',
+		defaultMessage: 'Sync with server',
+	},
+	gameVersionShaderMessage: {
+		id: 'search.filter.game-version-shader-message',
+		defaultMessage:
+			'Shader packs for older versions most likely work on newer versions with only minor issues.',
+	},
+})
+
+const projectTypeId = computed(() => projectType.value?.id ?? 'mod')
+
+debug('projectTypeId:', projectTypeId.value)
+watch(projectTypeId, (val) => debug('projectTypeId changed:', val))
+
+const searchState = useBrowseSearch({
+	projectType: projectTypeId,
+	tags,
+	providedFilters: serverFilters,
+	search,
+	persistentQueryParams: ['sid', 'wid', 'shi', 'from'],
+	getExtraQueryParams: () => ({
+		shi: serverHideInstalled.value ? 'true' : undefined,
+	}),
+	maxResultsOptions: currentMaxResultsOptions,
+	displayMode: resultsDisplayMode,
+})
+
+debug('calling initial refreshSearch')
+searchState.refreshSearch()
+
+const ogTitle = computed(
+	() =>
+		`Search ${projectType.value?.display ?? 'project'}s${searchState.query.value ? ' | ' + searchState.query.value : ''}`,
+)
+const description = computed(
+	() =>
+		`Search and browse thousands of Minecraft ${projectType.value?.display ?? 'project'}s on Modrinth with instant, accurate search results. Our filters help you quickly find the best Minecraft ${projectType.value?.display ?? 'project'}s.`,
+)
+
 useSeoMeta({
 	description,
 	ogTitle,
 	ogDescription: description,
 })
+
+debug('calling provideBrowseManager')
+provideBrowseManager({
+	tags,
+	projectType: projectTypeId,
+	...searchState,
+	getProjectLink: (result: Labrinth.Search.v2.ResultSearchProject) =>
+		`/${projectType.value?.id ?? 'project'}/${result.slug ? result.slug : result.project_id}`,
+	getServerProjectLink: (result: Labrinth.Search.v3.ResultSearchProject) =>
+		`/server/${result.slug ?? result.project_id}`,
+	selectableProjectTypes: computed(() => []),
+	showProjectTypeTabs: computed(() => false),
+	variant: 'web',
+	getCardActions,
+	installContext,
+	providedFilters: serverFilters,
+	hideInstalled: serverHideInstalled,
+	showHideInstalled: computed(() => !!serverData.value && projectType.value?.id !== 'modpack'),
+	hideInstalledLabel: computed(() => 'Hide installed content'),
+	displayMode: resultsDisplayMode,
+	cycleDisplayMode: cycleSearchDisplayMode,
+	maxResultsOptions: currentMaxResultsOptions,
+	getServerModpackContent,
+	onProjectHover: handleProjectMouseEnter,
+	onServerProjectHover: handleServerProjectMouseEnter,
+	onProjectHoverEnd: handleProjectHoverEnd,
+	filtersMenuOpen,
+	lockedFilterMessages: {
+		gameVersion: formatMessage(messages.gameVersionProvidedByServer),
+		modLoader: formatMessage(messages.modLoaderProvidedByServer),
+		syncButton: formatMessage(messages.syncFilterButton),
+		providedBy: formatMessage(messages.providedByServer),
+		gameVersionShaderMessage: formatMessage(messages.gameVersionShaderMessage),
+	},
+	loadingComponent: LogoAnimated,
+})
 </script>
 <template>
 	<Teleport v-if="flags.searchBackground" to="#absolute-background-teleport">
 		<div class="search-background"></div>
 	</Teleport>
-	<Teleport v-if="serverData" to="#discover-header-prefix" defer>
-		<div
-			class="mb-4 flex flex-wrap items-center justify-between gap-3 border-0 border-b border-solid border-divider pb-4"
-		>
-			<button
-				tabindex="-1"
-				class="flex cursor-pointer flex-col gap-4 bg-transparent text-primary"
-				@click="navigateTo(serverBackUrl)"
-			>
-				<span class="flex items-center gap-2">
-					<Avatar
-						:src="
-							serverData.is_medal
-								? 'https://cdn-raw.modrinth.com/medal_icon.webp'
-								: (serverIcon ?? MinecraftServerIcon)
-						"
-						size="48px"
-					/>
-					<span class="flex flex-col gap-2">
-						<span class="bold font-extrabold text-contrast">
-							{{ serverData.name }}
-						</span>
-						<span class="flex items-center gap-2 font-semibold text-secondary">
-							<GameIcon class="h-5 w-5 text-secondary" />
-							{{ serverData.loader }} {{ serverData.mc_version }}
-						</span>
-					</span>
-				</span>
-			</button>
-			<ButtonStyled>
-				<button @click="navigateTo(serverBackUrl)">
-					<LeftArrowIcon />
-					{{
-						fromContext === 'onboarding'
-							? 'Back to setup'
-							: fromContext === 'reset-server'
-								? 'Cancel reset'
-								: 'Back to server'
-					}}
-				</button>
-			</ButtonStyled>
-		</div>
-		<h1 class="m-0 text-xl font-extrabold leading-none text-contrast">
-			{{
-				fromContext === 'reset-server'
-					? 'Select modpack to install after reset'
-					: 'Install content to server'
-			}}
-		</h1>
-	</Teleport>
-
-	<aside
-		:class="{
-			'normal-page__sidebar': true,
-		}"
-		aria-label="Filters"
-	>
+	<div v-if="installContext" class="normal-page__header mb-4 flex flex-col gap-2">
+		<BrowseInstallHeader />
+	</div>
+	<aside class="normal-page__sidebar" aria-label="Filters">
 		<AdPlaceholder v-if="!auth.user && !serverData" />
-		<div v-if="filtersMenuOpen" class="fixed inset-0 z-40 bg-bg"></div>
-		<div
-			class="flex flex-col gap-3"
-			:class="{
-				'fixed inset-0 z-50 m-4 mb-0 overflow-auto rounded-t-3xl bg-bg-raised': filtersMenuOpen,
-			}"
-		>
-			<div
-				v-if="filtersMenuOpen"
-				class="sticky top-0 z-10 mx-1 flex items-center justify-between gap-3 border-0 border-b-[1px] border-solid border-divider bg-bg-raised px-6 py-4"
-			>
-				<h3 class="m-0 text-lg text-contrast">Filters</h3>
-				<ButtonStyled circular>
-					<button
-						@click="
-							() => {
-								filtersMenuOpen = false
-								scrollToTop('instant')
-							}
-						"
-					>
-						<XIcon />
-					</button>
-				</ButtonStyled>
-			</div>
-			<div
-				v-if="serverData && projectType?.id !== 'modpack'"
-				class="card-shadow rounded-2xl bg-bg-raised p-4"
-			>
-				<Checkbox
-					v-model="serverHideInstalled"
-					label="Hide installed content"
-					class="filter-checkbox"
-					@update:model-value="updateSearchResults()"
-				/>
-			</div>
-			<template v-if="isServerType">
-				<SearchSidebarFilter
-					v-for="filterType in serverFilterTypes.filter((f) => f.options.length > 0)"
-					:key="`server-filter-${filterType.id}`"
-					v-model:selected-filters="serverCurrentFilters"
-					v-model:toggled-groups="serverToggledGroups"
-					:provided-filters="[]"
-					:filter-type="filterType"
-					:class="
-						filtersMenuOpen
-							? 'border-0 border-b-[1px] border-solid border-divider last:border-b-0'
-							: 'card-shadow rounded-2xl bg-bg-raised'
-					"
-					button-class="button-animation flex flex-col gap-1 px-6 py-4 w-full bg-transparent cursor-pointer border-none"
-					content-class="mb-4 mx-3"
-					inner-panel-class="p-1"
-					:open-by-default="
-						![
-							'server_category_minecraft_server_meta',
-							'server_category_minecraft_server_community',
-							'server_game_version',
-							'server_status',
-						].includes(filterType.id)
-					"
-				>
-					<template #header>
-						<h3 class="m-0 text-lg">{{ filterType.formatted_name }}</h3>
-					</template>
-				</SearchSidebarFilter>
-			</template>
-			<template v-else>
-				<SearchSidebarFilter
-					v-for="filter in filters.filter((f) => f.display !== 'none')"
-					:key="`filter-${filter.id}`"
-					v-model:selected-filters="currentFilters"
-					v-model:toggled-groups="toggledGroups"
-					v-model:overridden-provided-filter-types="overriddenProvidedFilterTypes"
-					:provided-filters="serverFilters"
-					:filter-type="filter"
-					:class="
-						filtersMenuOpen
-							? 'border-0 border-b-[1px] border-solid border-divider last:border-b-0'
-							: 'card-shadow rounded-2xl bg-bg-raised'
-					"
-					button-class="button-animation flex flex-col gap-1 px-6 py-4 w-full bg-transparent cursor-pointer border-none"
-					content-class="mb-4 mx-3"
-					inner-panel-class="p-1"
-					:open-by-default="!(currentType === 'shader' && filter.id === 'game_version')"
-				>
-					<template #header>
-						<h3 class="m-0 text-lg">{{ filter.formatted_name }}</h3>
-					</template>
-					<template v-if="currentType === 'shader' && filter.id === 'game_version'" #prefix>
-						<div class="mb-4 grid grid-cols-[auto_1fr] gap-2 px-3 text-sm font-medium text-blue">
-							<InfoIcon class="mt-1 size-4" />
-							<span> {{ formatMessage(messages.gameVersionShaderMessage) }}</span>
-						</div>
-					</template>
-					<template #locked-game_version>
-						{{ formatMessage(messages.gameVersionProvidedByServer) }}
-					</template>
-					<template #locked-mod_loader>
-						{{ formatMessage(messages.modLoaderProvidedByServer) }}
-					</template>
-					<template #sync-button> {{ formatMessage(messages.syncFilterButton) }}</template>
-				</SearchSidebarFilter>
-			</template>
-		</div>
+		<BrowseSidebar />
 	</aside>
 	<section class="normal-page__content">
 		<div class="flex flex-col gap-3">
-			<StyledInput
-				v-model="query"
-				:icon="SearchIcon"
-				type="text"
-				autocomplete="off"
-				:placeholder="`Search ${projectType?.display ?? 'project'}s...`"
-				clearable
-				wrapper-class="w-full"
-				input-class="!h-12"
-				@input="throttledSearch()"
-				@clear="updateSearchResults()"
-			/>
-			<div class="flex flex-wrap items-center gap-2">
-				<DropdownSelect
-					v-slot="{ selected }"
-					v-model="effectiveCurrentSortType"
-					class="!w-auto flex-grow md:flex-grow-0"
-					name="Sort by"
-					:options="[...effectiveSortTypes]"
-					:display-name="(option?: SortType) => option?.display"
-					@change="updateSearchResults()"
-				>
-					<span class="font-semibold text-primary">Sort by: </span>
-					<span class="font-semibold text-secondary">{{ selected }}</span>
-				</DropdownSelect>
-				<DropdownSelect
-					v-slot="{ selected }"
-					v-model="maxResults"
-					name="Max results"
-					:options="currentMaxResultsOptions"
-					:default-value="maxResults"
-					class="!w-auto flex-grow md:flex-grow-0"
-					@change="updateSearchResults()"
-				>
-					<span class="font-semibold text-primary">View: </span>
-					<span class="font-semibold text-secondary">{{ selected }}</span>
-				</DropdownSelect>
-				<div class="lg:hidden">
-					<ButtonStyled>
-						<button @click="filtersMenuOpen = true">
-							<FilterIcon />
-							Filter results...
-						</button>
-					</ButtonStyled>
-				</div>
-				<ButtonStyled circular>
-					<button
-						:v-tooltip="capitalizeString(resultsDisplayMode + ' view')"
-						:aria-label="capitalizeString(resultsDisplayMode + ' view')"
-						@click="cycleSearchDisplayMode()"
-					>
-						<GridIcon v-if="resultsDisplayMode === 'grid'" />
-						<ImageIcon v-else-if="resultsDisplayMode === 'gallery'" />
-						<ListIcon v-else />
-					</button>
-				</ButtonStyled>
-				<Pagination
-					:page="currentPage"
-					:count="pageCount"
-					class="mx-auto sm:ml-auto sm:mr-0"
-					@switch-page="updateSearchResults"
-				/>
-			</div>
-			<SearchFilterControl
-				v-if="isServerType"
-				v-model:selected-filters="serverCurrentFilters"
-				:filters="serverFilterTypes"
-				:provided-filters="[]"
-				:overridden-provided-filter-types="[]"
-			/>
-			<SearchFilterControl
-				v-else
-				v-model:selected-filters="currentFilters"
-				:filters="filters.filter((f) => f.display !== 'none')"
-				:provided-filters="serverFilters"
-				:overridden-provided-filter-types="overriddenProvidedFilterTypes"
-				:provided-message="messages.providedByServer"
+			<BrowsePageLayout>
+				<template #display-mode-icon>
+					<GridIcon v-if="resultsDisplayMode === 'grid'" />
+					<ImageIcon v-else-if="resultsDisplayMode === 'gallery'" />
+					<ListIcon v-else />
+				</template>
+			</BrowsePageLayout>
+			<CreationFlowModal
+				v-if="currentServerId && projectType?.id === 'modpack'"
+				ref="onboardingModalRef"
+				:type="fromContext === 'reset-server' ? 'reset-server' : 'server-onboarding'"
+				:available-loaders="['vanilla', 'fabric', 'neoforge', 'forge', 'quilt', 'paper', 'purpur']"
+				:show-snapshot-toggle="true"
+				:on-back="onOnboardingBack"
+				@hide="onOnboardingHide"
+				@browse-modpacks="() => {}"
+				@create="onModpackFlowCreate"
 			/>
-			<LogoAnimated v-if="searchLoading && !noLoad" />
-			<div v-else-if="results && results.hits && results.hits.length === 0" class="no-results">
-				<p>No results found for your query!</p>
-			</div>
-			<div v-else class="search-results-container">
-				<ProjectCardList
-					aria-label="Search results"
-					:layout="
-						resultsDisplayMode === 'grid' || resultsDisplayMode === 'gallery' ? 'grid' : 'list'
-					"
-				>
-					<template v-if="isServerType">
-						<ProjectCard
-							v-for="result in serverResults?.hits"
-							:key="`server-${result.project_id}`"
-							:link="`/server/${result.slug ?? result.project_id}`"
-							:title="result.name"
-							:icon-url="result.icon_url || undefined"
-							:summary="result.summary"
-							:tags="result.categories"
-							:server-online-players="result.minecraft_java_server?.ping?.data?.players_online ?? 0"
-							:server-region="result.minecraft_server?.region"
-							:server-recent-plays="result.minecraft_java_server?.verified_plays_2w ?? 0"
-							:server-status-online="!!result.minecraft_java_server?.ping?.data"
-							:server-modpack-content="getServerModpackContent(result)"
-							is-server-project
-							exclude-loaders
-							:color="result.color ?? undefined"
-							:banner="result.featured_gallery ?? undefined"
-							:layout="
-								resultsDisplayMode === 'grid' || resultsDisplayMode === 'gallery' ? 'grid' : 'list'
-							"
-							:max-tags="2"
-							@mouseenter="handleServerProjectMouseEnter(result)"
-							@mouseleave="handleProjectHoverEnd"
-						/>
-					</template>
-					<template v-else>
-						<ProjectCard
-							v-for="result in projectResults?.hits"
-							:key="result.project_id"
-							:link="`/${projectType?.id ?? 'project'}/${result.slug ? result.slug : result.project_id}`"
-							:title="result.title"
-							:icon-url="result.icon_url"
-							:author="{ name: result.author, link: `/user/${result.author}` }"
-							:date-updated="result.date_modified"
-							:date-published="result.date_created"
-							:displayed-date="effectiveCurrentSortType.name === 'newest' ? 'published' : 'updated'"
-							:downloads="result.downloads"
-							:summary="result.description"
-							:tags="result.display_categories"
-							:all-tags="result.categories"
-							:deprioritized-tags="deprioritizedTags"
-							:exclude-loaders="excludeLoaders"
-							:followers="result.follows"
-							:banner="result.featured_gallery ?? undefined"
-							:color="result.color ?? undefined"
-							:environment="
-								['mod', 'modpack'].includes(currentType)
-									? {
-											clientSide: result.client_side as Labrinth.Projects.v2.Environment,
-											serverSide: result.server_side as Labrinth.Projects.v2.Environment,
-										}
-									: undefined
-							"
-							:layout="
-								resultsDisplayMode === 'grid' || resultsDisplayMode === 'gallery' ? 'grid' : 'list'
-							"
-							@mouseenter="handleProjectMouseEnter(result)"
-							@mouseleave="handleProjectHoverEnd"
-						>
-							<template v-if="flags.showDiscoverProjectButtons || serverData" #actions>
-								<template v-if="flags.showDiscoverProjectButtons">
-									<ButtonStyled color="brand">
-										<button>
-											<DownloadIcon />
-											Download
-										</button>
-									</ButtonStyled>
-									<ButtonStyled circular>
-										<button>
-											<HeartIcon />
-										</button>
-									</ButtonStyled>
-									<ButtonStyled circular>
-										<button>
-											<BookmarkIcon />
-										</button>
-									</ButtonStyled>
-									<ButtonStyled circular type="transparent">
-										<button>
-											<MoreVerticalIcon />
-										</button>
-									</ButtonStyled>
-								</template>
-								<template v-else-if="serverData">
-									<ButtonStyled color="brand" type="outlined">
-										<button
-											v-if="
-												(result as InstallableSearchResult).installed ||
-												(serverContentData &&
-													(serverContentData.addons ?? []).find(
-														(x) => x.project_id === result.project_id,
-													)) ||
-												serverData.upstream?.project_id === result.project_id
-											"
-											disabled
-										>
-											<CheckIcon />
-											Installed
-										</button>
-										<button v-else-if="(result as InstallableSearchResult).installing" disabled>
-											Installing...
-										</button>
-										<button v-else @click="serverInstall(result as InstallableSearchResult)">
-											<DownloadIcon />
-											Install
-										</button>
-									</ButtonStyled>
-								</template>
-							</template>
-						</ProjectCard>
-					</template>
-				</ProjectCardList>
-			</div>
-			<div class="pagination-after">
-				<pagination
-					:page="currentPage"
-					:count="pageCount"
-					class="justify-end"
-					@switch-page="updateSearchResults"
-				/>
-			</div>
 		</div>
 	</section>
-
-	<CreationFlowModal
-		v-if="currentServerId && projectType?.id === 'modpack'"
-		ref="onboardingModalRef"
-		:type="fromContext === 'reset-server' ? 'reset-server' : 'server-onboarding'"
-		:available-loaders="['vanilla', 'fabric', 'neoforge', 'forge', 'quilt', 'paper', 'purpur']"
-		:show-snapshot-toggle="true"
-		:on-back="onOnboardingBack"
-		@hide="onOnboardingHide"
-		@browse-modpacks="() => {}"
-		@create="onModpackFlowCreate"
-	/>
 </template>
 <style lang="scss" scoped>
 .normal-page__content {
-	// Passthrough children as grid items on mobile
 	display: contents;
 
 	@media screen and (min-width: 1024px) {
@@ -1111,11 +684,9 @@ useSeoMeta({
 	}
 }
 
-// Move the filters "sidebar" on mobile underneath the search card
 .normal-page__sidebar {
 	grid-row: 3;
 
-	// Always show on desktop
 	@media screen and (min-width: 1024px) {
 		display: block;
 	}
@@ -1129,109 +700,10 @@ useSeoMeta({
 	}
 }
 
-.sidebar-menu {
-	display: none;
-}
-
-.sidebar-menu_open {
-	display: block;
-}
-
-.sidebar-menu-heading {
-	margin: 1.5rem 0 0.5rem 0;
-}
-
-// EthicalAds
 .content-wrapper {
 	grid-row: 1;
 }
 
-.search-controls {
-	display: flex;
-	flex-direction: row;
-	gap: var(--spacing-card-md);
-	flex-wrap: wrap;
-	padding: var(--spacing-card-md);
-	grid-row: 2;
-
-	.search-filter-container {
-		display: flex;
-		width: 100%;
-		align-items: center;
-
-		.sidebar-menu-close-button {
-			max-height: none;
-			// match height of the search field
-			height: 40px;
-			transition: box-shadow 0.1s ease-in-out;
-			margin-right: var(--spacing-card-md);
-
-			&.open {
-				color: var(--color-button-text-active);
-				background-color: var(--color-brand-highlight);
-				box-shadow:
-					inset 0 0 0 transparent,
-					0 0 0 2px var(--color-brand);
-			}
-		}
-
-		.iconified-input {
-			flex: 1;
-
-			input {
-				width: 100%;
-				margin: 0;
-			}
-		}
-	}
-
-	.sort-controls {
-		width: 100%;
-		display: flex;
-		flex-direction: row;
-		gap: var(--spacing-card-md);
-		flex-wrap: wrap;
-		align-items: center;
-
-		.labeled-control {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			flex-wrap: wrap;
-			gap: 0.5rem;
-
-			.labeled-control__label {
-				white-space: nowrap;
-			}
-		}
-
-		.square-button {
-			margin-top: auto;
-			// match height of search dropdowns
-			height: 40px;
-			width: 40px; // make it square!
-		}
-	}
-}
-
-.search-controls__sorting {
-	min-width: 14rem;
-}
-
-.labeled-control__label,
-.labeled-control__control {
-	display: block;
-}
-
-.pagination-before {
-	grid-row: 4;
-}
-
-.search-results-container {
-	grid-row: 5;
-}
-
 .pagination-after {
 	grid-row: 6;
 }
@@ -1245,69 +717,12 @@ useSeoMeta({
 	margin: 2rem;
 }
 
-@media screen and (min-width: 750px) {
-	.search-controls {
-		flex-wrap: nowrap;
-		flex-direction: row;
-	}
-
-	.sort-controls {
-		min-width: fit-content;
-		max-width: fit-content;
-		flex-wrap: nowrap;
-	}
-
-	.labeled-control {
-		align-items: center;
-		display: flex;
-		flex-direction: column !important;
-		flex-wrap: wrap;
-		gap: 0.5rem;
-		max-width: fit-content;
-	}
-
-	.labeled-control__label {
-		flex-shrink: 0;
-		margin-bottom: 0 !important;
-	}
-}
-
-@media screen and (min-width: 860px) {
-	.labeled-control {
-		flex-wrap: nowrap !important;
-		flex-direction: row !important;
-	}
-}
-
-@media screen and (min-width: 1024px) {
-	.sidebar-menu {
-		display: block;
-		margin-top: 0;
-	}
-
-	.sidebar-menu-close-button {
-		display: none;
-	}
-
-	.labeled-control {
-		flex-wrap: wrap !important;
-		flex-direction: column !important;
-	}
-}
-
-@media screen and (min-width: 1100px) {
-	.labeled-control {
-		flex-wrap: nowrap !important;
-		flex-direction: row !important;
-	}
-}
-
 .search-background {
 	width: 100%;
 	height: 20rem;
-	background-image: url('https://minecraft.wiki/images/The_Garden_Awakens_Key_Art_No_Creaking.jpg?9968c');
+	background-image: url('https://minecraft.wiki/images/Tiny_Takeover_Key_Art.png?025dc');
 	background-size: cover;
-	background-position: center;
+	background-position: 50% 25%;
 	pointer-events: none;
 	mask-image: linear-gradient(to bottom, black, transparent);
 	opacity: 0.25;
diff --git a/packages/ui/src/components/base/NavTabs.vue b/packages/ui/src/components/base/NavTabs.vue
index 119a26af09..611cdaa3f9 100644
--- a/packages/ui/src/components/base/NavTabs.vue
+++ b/packages/ui/src/components/base/NavTabs.vue
@@ -2,7 +2,7 @@
 	<nav
 		v-if="filteredLinks.length > 1"
 		ref="scrollContainer"
-		class="relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
+		class="relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold drop-shadow-xl"
 		:class="{ 'shadow-sm': mode === 'navigation' }"
 	>
 		<template v-if="mode === 'navigation'">
diff --git a/packages/ui/src/components/project/card/ProjectCard.vue b/packages/ui/src/components/project/card/ProjectCard.vue
index 28c141d7c5..35663c407b 100644
--- a/packages/ui/src/components/project/card/ProjectCard.vue
+++ b/packages/ui/src/components/project/card/ProjectCard.vue
@@ -192,6 +192,7 @@
 import type { ProjectStatus } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
 
 import { AutoLink, Avatar } from '../../base'
 import { SmartClickable } from '../../base/index.ts'
@@ -217,7 +218,7 @@ defineEmits<{
 
 const props = defineProps<{
 	layout: 'list' | 'grid'
-	link?: string | (() => void)
+	link?: string | RouteLocationRaw | (() => void)
 	iconUrl?: string
 	title: string
 	author?: {
diff --git a/packages/ui/src/components/search/SearchFilterControl.vue b/packages/ui/src/components/search/SearchFilterControl.vue
index 188be2fecd..c87e6c15b4 100644
--- a/packages/ui/src/components/search/SearchFilterControl.vue
+++ b/packages/ui/src/components/search/SearchFilterControl.vue
@@ -22,7 +22,11 @@
 				(x) => x.provided && !overriddenProvidedFilterTypes.includes(x.type),
 			)"
 			:key="`provided-filter-${providedItem.type}-${providedItem.option}`"
-			v-tooltip="formatMessage(providedMessage ?? defaultProvidedMessage)"
+			v-tooltip="
+				typeof providedMessage === 'string'
+					? providedMessage
+					: formatMessage(providedMessage ?? defaultProvidedMessage)
+			"
 			:style="{ '--_bg-color': `var(--color-raised-bg)` }"
 		>
 			<LockIcon />
@@ -47,7 +51,7 @@ const props = defineProps<{
 	filters: FilterType[]
 	providedFilters: FilterValue[]
 	overriddenProvidedFilterTypes: string[]
-	providedMessage?: MessageDescriptor
+	providedMessage?: MessageDescriptor | string
 }>()
 
 const defaultProvidedMessage = defineMessage({
diff --git a/packages/ui/src/layouts/index.ts b/packages/ui/src/layouts/index.ts
index 033f63c409..7731b14940 100644
--- a/packages/ui/src/layouts/index.ts
+++ b/packages/ui/src/layouts/index.ts
@@ -1,3 +1,4 @@
+export * from './shared/browse-tab'
 export * from './shared/console'
 export * from './shared/content-tab'
 export * from './shared/files-tab'
diff --git a/packages/ui/src/layouts/shared/browse-tab/composables/index.ts b/packages/ui/src/layouts/shared/browse-tab/composables/index.ts
new file mode 100644
index 0000000000..debbed72b3
--- /dev/null
+++ b/packages/ui/src/layouts/shared/browse-tab/composables/index.ts
@@ -0,0 +1 @@
+export * from './use-browse-search'
diff --git a/packages/ui/src/layouts/shared/browse-tab/composables/use-browse-search.ts b/packages/ui/src/layouts/shared/browse-tab/composables/use-browse-search.ts
new file mode 100644
index 0000000000..70ea3e5ff8
--- /dev/null
+++ b/packages/ui/src/layouts/shared/browse-tab/composables/use-browse-search.ts
@@ -0,0 +1,311 @@
+import type { Labrinth } from '@modrinth/api-client'
+import type { ComputedRef, Ref, ShallowRef } from 'vue'
+import { computed, nextTick, ref, shallowRef, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { useDebugLogger } from '#ui/composables/debug-logger'
+import type { FilterType, FilterValue, ProjectType, SortType } from '#ui/utils/search'
+import { useSearch } from '#ui/utils/search'
+import { useServerSearch } from '#ui/utils/server-search'
+
+import type { BrowseSearchResponse } from '../types'
+
+export interface UseBrowseSearchOptions {
+	projectType: Ref<string>
+	tags: Ref<{
+		gameVersions: Labrinth.Tags.v2.GameVersion[]
+		loaders: Labrinth.Tags.v2.Loader[]
+		categories: Labrinth.Tags.v2.Category[]
+	}>
+	providedFilters?: ComputedRef<FilterValue[]>
+	search: (params: string) => Promise<BrowseSearchResponse>
+	persistentQueryParams: string[]
+	getExtraQueryParams?: () => Record<string, string | undefined>
+	maxResultsOptions?: ComputedRef<number[]>
+	displayMode?: Ref<'list' | 'grid' | 'gallery'> | ComputedRef<'list' | 'grid' | 'gallery'>
+}
+
+export interface BrowseSearchState {
+	query: Ref<string>
+
+	filters: ComputedRef<FilterType[]>
+	currentFilters: Ref<FilterValue[]>
+	toggledGroups: Ref<string[]>
+	overriddenProvidedFilterTypes: Ref<string[]>
+
+	serverFilterTypes: ComputedRef<FilterType[]>
+	serverCurrentFilters: Ref<FilterValue[]>
+	serverToggledGroups: Ref<string[]>
+
+	effectiveSortTypes: ComputedRef<readonly SortType[]>
+	effectiveCurrentSortType: Ref<SortType>
+
+	loading: Ref<boolean>
+	projectHits: ShallowRef<BrowseSearchResponse['projectHits']>
+	serverHits: ShallowRef<BrowseSearchResponse['serverHits']>
+	totalHits: Ref<number>
+	pageCount: ComputedRef<number>
+
+	maxResults: Ref<number>
+	currentPage: Ref<number>
+
+	isServerType: ComputedRef<boolean>
+	effectiveLayout: ComputedRef<'list' | 'grid'>
+	deprioritizedTags: ComputedRef<string[]>
+	excludeLoaders: ComputedRef<boolean>
+
+	refreshSearch: () => Promise<void>
+	setPage: (page: number) => Promise<void>
+	clearSearch: () => void
+	onFilterChange: () => void
+}
+
+const LOADER_FILTER_TYPES = [
+	'mod_loader',
+	'plugin_loader',
+	'modpack_loader',
+	'shader_loader',
+	'plugin_platform',
+] as const
+
+export function useBrowseSearch(options: UseBrowseSearchOptions): BrowseSearchState {
+	const debug = useDebugLogger('BrowseSearch')
+	const route = useRoute()
+	const router = useRouter()
+
+	debug('init, projectType:', options.projectType.value)
+
+	const projectTypes = computed(() => [options.projectType.value] as ProjectType[])
+	const isServerType = computed(() => options.projectType.value === 'server')
+
+	const {
+		query,
+		currentSortType,
+		currentFilters,
+		toggledGroups,
+		maxResults,
+		currentPage,
+		overriddenProvidedFilterTypes,
+		filters,
+		sortTypes,
+		requestParams,
+		createPageParams,
+	} = useSearch(projectTypes, options.tags, options.providedFilters ?? computed(() => []))
+
+	const {
+		serverCurrentSortType,
+		serverCurrentFilters,
+		serverToggledGroups,
+		serverSortTypes,
+		serverFilterTypes,
+		serverRequestParams,
+		createServerPageParams,
+	} = useServerSearch({ tags: options.tags, query, maxResults, currentPage })
+
+	const effectiveRequestParams = computed(() =>
+		isServerType.value ? serverRequestParams.value : requestParams.value,
+	)
+	const effectiveSortTypes = computed(() =>
+		isServerType.value ? (serverSortTypes as readonly SortType[]) : sortTypes,
+	)
+	const effectiveCurrentSortType = computed({
+		get: () => (isServerType.value ? serverCurrentSortType.value : currentSortType.value),
+		set: (v: SortType) => {
+			if (isServerType.value) serverCurrentSortType.value = v
+			else currentSortType.value = v
+		},
+	})
+
+	const effectiveMaxResultsOptions = computed(
+		() => options.maxResultsOptions?.value ?? [5, 10, 15, 20, 50, 100],
+	)
+
+	watch(effectiveMaxResultsOptions, (opts) => {
+		if (!opts.includes(maxResults.value)) {
+			maxResults.value = opts.reduce((prev, curr) =>
+				Math.abs(curr - maxResults.value) <= Math.abs(prev - maxResults.value) ? curr : prev,
+			)
+		}
+	})
+
+	const effectiveDisplayMode = computed(() => options.displayMode?.value ?? 'list')
+	const effectiveLayout = computed<'list' | 'grid'>(() =>
+		effectiveDisplayMode.value === 'grid' || effectiveDisplayMode.value === 'gallery'
+			? 'grid'
+			: 'list',
+	)
+
+	const selectedFilterTags = computed(() =>
+		currentFilters.value
+			.filter(
+				(f) =>
+					f.type.startsWith('category_') ||
+					LOADER_FILTER_TYPES.includes(f.type as (typeof LOADER_FILTER_TYPES)[number]),
+			)
+			.map((f) => f.option),
+	)
+	const excludeLoaders = computed(
+		() =>
+			currentFilters.value.some((f) =>
+				LOADER_FILTER_TYPES.includes(f.type as (typeof LOADER_FILTER_TYPES)[number]),
+			) || ['resourcepack', 'datapack'].includes(options.projectType.value),
+	)
+	const loadersNotForThisType = computed(
+		() =>
+			options.tags.value?.loaders
+				?.filter((loader) => !loader.supported_project_types.includes(options.projectType.value))
+				?.map((loader) => loader.name) ?? [],
+	)
+	const deprioritizedTags = computed(() => [
+		...selectedFilterTags.value,
+		...loadersNotForThisType.value,
+	])
+
+	const loading = ref(true)
+	const projectHits = shallowRef<BrowseSearchResponse['projectHits']>([])
+	const serverHits = shallowRef<BrowseSearchResponse['serverHits']>([])
+	const totalHits = ref(0)
+
+	const pageCount = computed(() => {
+		if (totalHits.value === 0) return 1
+		return Math.ceil(totalHits.value / maxResults.value)
+	})
+
+	let searchVersion = 0
+	let searchDebounceTimer: ReturnType<typeof setTimeout> | null = null
+
+	watch(effectiveRequestParams, (newVal, oldVal) => {
+		debug('effectiveRequestParams changed', {
+			from: oldVal?.substring(0, 80),
+			to: newVal?.substring(0, 80),
+		})
+		if (searchDebounceTimer) clearTimeout(searchDebounceTimer)
+		searchDebounceTimer = setTimeout(() => {
+			refreshSearch()
+		}, 200)
+	})
+
+	async function refreshSearch() {
+		const version = ++searchVersion
+		debug('refreshSearch start', {
+			version,
+			projectType: options.projectType.value,
+			params: effectiveRequestParams.value.substring(0, 100),
+		})
+
+		const currentHitsEmpty = isServerType.value
+			? serverHits.value.length === 0
+			: projectHits.value.length === 0
+		if (currentHitsEmpty) {
+			loading.value = true
+		}
+
+		try {
+			const response = await options.search(effectiveRequestParams.value)
+
+			if (version !== searchVersion) {
+				debug('refreshSearch stale, discarding', { version, current: searchVersion })
+				return
+			}
+
+			if (isServerType.value) {
+				serverHits.value = response.serverHits
+			} else {
+				projectHits.value = response.projectHits
+			}
+			totalHits.value = response.total_hits
+			debug('refreshSearch complete', {
+				version,
+				hits: response.total_hits,
+				projectHits: response.projectHits.length,
+				serverHits: response.serverHits.length,
+			})
+
+			updateUrlParams()
+			loading.value = false
+		} catch (err) {
+			debug('refreshSearch error', err)
+			console.error('Browse search error:', err)
+			if (version === searchVersion) {
+				loading.value = false
+			}
+		}
+	}
+
+	function updateUrlParams() {
+		debug('updateUrlParams', { path: route.path })
+		const persistentParams: Record<string, string | (string | null)[] | null | undefined> = {}
+
+		for (const [key, value] of Object.entries(route.query)) {
+			if (options.persistentQueryParams.includes(key)) {
+				persistentParams[key] = value
+			}
+		}
+
+		const extraParams = options.getExtraQueryParams?.() ?? {}
+		for (const [key, value] of Object.entries(extraParams)) {
+			if (value !== undefined) {
+				persistentParams[key] = value
+			}
+		}
+
+		const params = {
+			...persistentParams,
+			...(isServerType.value ? createServerPageParams() : createPageParams()),
+		}
+
+		router.replace({ path: route.path, query: params })
+	}
+
+	async function setPage(newPageNumber: number) {
+		currentPage.value = newPageNumber
+		await nextTick()
+		window.scrollTo({ top: 0, behavior: 'smooth' })
+	}
+
+	function clearSearch() {
+		query.value = ''
+		currentPage.value = 1
+	}
+
+	function onFilterChange() {
+		nextTick(() => window.scrollTo({ top: 0, behavior: 'smooth' }))
+	}
+
+	watch(
+		() => options.projectType.value,
+		(newType, oldType) => {
+			debug('projectType changed', { from: oldType, to: newType })
+			currentSortType.value = { display: 'Relevance', name: 'relevance' }
+			query.value = ''
+		},
+	)
+
+	return {
+		query,
+		filters,
+		currentFilters,
+		toggledGroups,
+		overriddenProvidedFilterTypes,
+		serverFilterTypes,
+		serverCurrentFilters,
+		serverToggledGroups,
+		effectiveSortTypes,
+		effectiveCurrentSortType,
+		loading,
+		projectHits,
+		serverHits,
+		totalHits,
+		pageCount,
+		maxResults,
+		currentPage,
+		isServerType,
+		effectiveLayout,
+		deprioritizedTags,
+		excludeLoaders,
+		refreshSearch,
+		setPage,
+		clearSearch,
+		onFilterChange,
+	}
+}
diff --git a/packages/ui/src/layouts/shared/browse-tab/header.vue b/packages/ui/src/layouts/shared/browse-tab/header.vue
new file mode 100644
index 0000000000..0ac04ea3c0
--- /dev/null
+++ b/packages/ui/src/layouts/shared/browse-tab/header.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { GameIcon, LeftArrowIcon, MinecraftServerIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+import Admonition from '#ui/components/base/Admonition.vue'
+import Avatar from '#ui/components/base/Avatar.vue'
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import ContentPageHeader from '#ui/components/base/ContentPageHeader.vue'
+import { useServerImage } from '#ui/composables/use-server-image'
+import { formatLoaderLabel } from '#ui/utils/loaders'
+
+import { injectBrowseManager } from './providers/browse-manager'
+
+const MEDAL_ICON_URL = 'https://cdn-raw.modrinth.com/medal_icon.webp'
+
+const ctx = injectBrowseManager()
+const router = useRouter()
+const installContext = computed(() => ctx.installContext?.value ?? null)
+
+const serverId = computed(() => installContext.value?.serverId ?? '')
+const upstream = computed(() => installContext.value?.upstream ?? null)
+
+const { image: fetchedIcon } = useServerImage(serverId, upstream, {
+	enabled: computed(() => !!installContext.value?.serverId),
+})
+
+const iconSrc = computed(() => {
+	if (installContext.value?.isMedal) return MEDAL_ICON_URL
+	return fetchedIcon.value ?? installContext.value?.iconSrc ?? MinecraftServerIcon
+})
+</script>
+
+<template>
+	<template v-if="installContext">
+		<ContentPageHeader class="mb-2">
+			<template #icon>
+				<Avatar :src="iconSrc" size="64px" />
+			</template>
+			<template #title>
+				{{ installContext.name }}
+			</template>
+			<template #summary>
+				<span class="flex items-center gap-2 text-sm font-semibold text-secondary">
+					<GameIcon class="h-5 w-5 text-secondary" />
+					{{ formatLoaderLabel(installContext.loader) }} {{ installContext.gameVersion }}
+				</span>
+			</template>
+			<template #actions>
+				<ButtonStyled>
+					<button @click="router.push(installContext.backUrl)">
+						<LeftArrowIcon />
+						{{ installContext.backLabel }}
+					</button>
+				</ButtonStyled>
+			</template>
+		</ContentPageHeader>
+		<h1 class="m-0 mb-1 text-xl font-extrabold">{{ installContext.heading }}</h1>
+		<Admonition v-if="installContext.warning" type="warning" class="mb-1">
+			{{ installContext.warning }}
+		</Admonition>
+	</template>
+</template>
diff --git a/packages/ui/src/layouts/shared/browse-tab/index.ts b/packages/ui/src/layouts/shared/browse-tab/index.ts
new file mode 100644
index 0000000000..5789a3af66
--- /dev/null
+++ b/packages/ui/src/layouts/shared/browse-tab/index.ts
@@ -0,0 +1,6 @@
+export * from './composables'
+export { default as BrowseInstallHeader } from './header.vue'
+export { default as BrowsePageLayout } from './layout.vue'
+export * from './providers'
+export { default as BrowseSidebar } from './sidebar.vue'
+export * from './types'
diff --git a/packages/ui/src/layouts/shared/browse-tab/layout.vue b/packages/ui/src/layouts/shared/browse-tab/layout.vue
new file mode 100644
index 0000000000..1f28ed6353
--- /dev/null
+++ b/packages/ui/src/layouts/shared/browse-tab/layout.vue
@@ -0,0 +1,262 @@
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { SearchIcon } from '@modrinth/assets'
+import { computed, toValue } from 'vue'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
+import LoadingIndicator from '#ui/components/base/LoadingIndicator.vue'
+import NavTabs from '#ui/components/base/NavTabs.vue'
+import Pagination from '#ui/components/base/Pagination.vue'
+import StyledInput from '#ui/components/base/StyledInput.vue'
+import ProjectCard from '#ui/components/project/card/ProjectCard.vue'
+import ProjectCardList from '#ui/components/project/ProjectCardList.vue'
+import SearchFilterControl from '#ui/components/search/SearchFilterControl.vue'
+import type { SortType } from '#ui/utils/search'
+
+import BrowseInstallHeader from './header.vue'
+import { injectBrowseManager } from './providers/browse-manager'
+
+const ctx = injectBrowseManager()
+const lockedMessages = computed(() => toValue(ctx.lockedFilterMessages))
+
+const sortOptions = computed<ComboboxOption<SortType>[]>(() =>
+	ctx.effectiveSortTypes.value.map((st) => ({
+		value: st,
+		label: st.display,
+	})),
+)
+
+const maxResultsOptions = computed<ComboboxOption<number>[]>(() =>
+	(ctx.maxResultsOptions?.value ?? [5, 10, 15, 20, 50, 100]).map((n) => ({
+		value: n,
+		label: String(n),
+	})),
+)
+</script>
+
+<template>
+	<template v-if="ctx.installContext?.value && ctx.variant !== 'web'">
+		<BrowseInstallHeader />
+	</template>
+
+	<NavTabs v-if="ctx.showProjectTypeTabs.value" :links="ctx.selectableProjectTypes.value" />
+
+	<StyledInput
+		v-model="ctx.query.value"
+		:icon="SearchIcon"
+		type="text"
+		autocomplete="off"
+		:placeholder="`Search ${ctx.projectType.value}s...`"
+		clearable
+		wrapper-class="w-full"
+		:input-class="ctx.variant === 'web' ? '!h-12' : 'h-12'"
+		@clear="ctx.clearSearch()"
+	/>
+
+	<div class="flex flex-wrap items-center gap-2">
+		<Combobox
+			:model-value="ctx.effectiveCurrentSortType.value"
+			:options="sortOptions"
+			:class="ctx.variant === 'web' ? '!w-auto flex-grow md:flex-grow-0' : 'max-w-[16rem]'"
+			placeholder="Sort by"
+			@update:model-value="(val: SortType) => (ctx.effectiveCurrentSortType.value = val)"
+		>
+			<template #prefix>
+				<span class="font-semibold text-primary">Sort by:</span>
+			</template>
+		</Combobox>
+
+		<Combobox
+			:model-value="ctx.maxResults.value"
+			:options="maxResultsOptions"
+			:class="ctx.variant === 'web' ? '!w-auto flex-grow md:flex-grow-0' : 'max-w-[9rem]'"
+			placeholder="View"
+			@update:model-value="(val: number) => (ctx.maxResults.value = val)"
+		>
+			<template #prefix>
+				<span class="font-semibold text-primary">View:</span>
+			</template>
+		</Combobox>
+
+		<div v-if="ctx.filtersMenuOpen && !ctx.filtersMenuOpen.value" class="lg:hidden">
+			<ButtonStyled>
+				<button @click="ctx.filtersMenuOpen.value = true">Filter results...</button>
+			</ButtonStyled>
+		</div>
+
+		<ButtonStyled v-if="ctx.cycleDisplayMode" circular>
+			<button @click="ctx.cycleDisplayMode!()">
+				<slot name="display-mode-icon" />
+			</button>
+		</ButtonStyled>
+
+		<Pagination
+			:page="ctx.currentPage.value"
+			:count="ctx.pageCount.value"
+			:class="ctx.variant === 'web' ? 'mx-auto sm:ml-auto sm:mr-0' : 'ml-auto'"
+			@switch-page="ctx.setPage"
+		/>
+	</div>
+
+	<SearchFilterControl
+		v-if="ctx.isServerType.value"
+		v-model:selected-filters="ctx.serverCurrentFilters.value"
+		:filters="ctx.serverFilterTypes.value"
+		:provided-filters="[]"
+		:overridden-provided-filter-types="[]"
+	/>
+	<SearchFilterControl
+		v-else
+		v-model:selected-filters="ctx.currentFilters.value"
+		:filters="ctx.filters.value.filter((f) => f.display !== 'none')"
+		:provided-filters="ctx.providedFilters?.value ?? []"
+		:overridden-provided-filter-types="ctx.overriddenProvidedFilterTypes.value"
+		:provided-message="lockedMessages?.providedBy"
+	/>
+
+	<div class="search">
+		<section v-if="ctx.loading.value" class="offline">
+			<component :is="ctx.loadingComponent ?? LoadingIndicator" />
+		</section>
+		<section v-else-if="ctx.offline?.value && ctx.totalHits.value === 0" class="offline">
+			You are currently offline. Connect to the internet to browse Modrinth!
+		</section>
+		<section
+			v-else-if="
+				ctx.isServerType.value
+					? ctx.serverHits.value.length === 0
+					: ctx.projectHits.value.length === 0
+			"
+			class="offline"
+		>
+			<p>No results found for your query!</p>
+		</section>
+
+		<ProjectCardList v-else :layout="ctx.effectiveLayout.value">
+			<template v-if="ctx.isServerType.value">
+				<ProjectCard
+					v-for="result in ctx.serverHits.value"
+					:key="`server-card-${result.project_id}`"
+					:title="result.name"
+					:icon-url="result.icon_url || undefined"
+					:summary="result.summary"
+					:tags="result.categories"
+					:link="ctx.getServerProjectLink(result)"
+					:server-online-players="result.minecraft_java_server?.ping?.data?.players_online ?? 0"
+					:server-region="result.minecraft_server?.region"
+					:server-recent-plays="result.minecraft_java_server?.verified_plays_2w ?? 0"
+					:server-modpack-content="ctx.getServerModpackContent?.(result)"
+					:server-ping="ctx.serverPings?.value?.[result.project_id]"
+					:server-status-online="!!result.minecraft_java_server?.ping?.data"
+					:hide-online-players-label="ctx.variant === 'app'"
+					:hide-recent-plays-label="ctx.variant === 'app'"
+					:layout="ctx.effectiveLayout.value"
+					:max-tags="2"
+					is-server-project
+					exclude-loaders
+					:color="result.color ?? undefined"
+					:banner="result.featured_gallery ?? undefined"
+					@contextmenu.prevent.stop="(event: MouseEvent) => ctx.onContextMenu?.(event, result)"
+					@mouseenter="ctx.onServerProjectHover?.(result)"
+					@mouseleave="ctx.onProjectHoverEnd?.()"
+				>
+					<template v-if="ctx.getCardActions" #actions>
+						<div class="flex gap-2">
+							<ButtonStyled
+								v-for="action in ctx.getCardActions(result, ctx.projectType.value)"
+								:key="action.key"
+								:color="action.color"
+								:type="action.type"
+								:circular="action.circular"
+							>
+								<button
+									v-tooltip="action.tooltip"
+									:disabled="action.disabled"
+									@click.stop="action.onClick"
+								>
+									<component :is="action.icon" />
+									<template v-if="!action.circular">{{ action.label }}</template>
+								</button>
+							</ButtonStyled>
+						</div>
+					</template>
+				</ProjectCard>
+			</template>
+			<template v-else>
+				<ProjectCard
+					v-for="result in ctx.projectHits.value"
+					:key="result.project_id"
+					:link="ctx.getProjectLink(result)"
+					:title="result.title"
+					:icon-url="result.icon_url"
+					:author="{
+						name: result.author,
+						link:
+							ctx.variant === 'web'
+								? `/user/${result.author}`
+								: `https://modrinth.com/user/${result.author}`,
+					}"
+					:date-updated="result.date_modified"
+					:date-published="result.date_created"
+					:displayed-date="
+						ctx.effectiveCurrentSortType.value.name === 'newest' ? 'published' : 'updated'
+					"
+					:downloads="result.downloads"
+					:summary="result.description"
+					:tags="result.display_categories"
+					:all-tags="result.categories"
+					:deprioritized-tags="ctx.deprioritizedTags.value"
+					:exclude-loaders="ctx.excludeLoaders.value"
+					:followers="result.follows"
+					:banner="result.featured_gallery ?? undefined"
+					:color="result.color ?? undefined"
+					:environment="
+						['mod', 'modpack'].includes(ctx.projectType.value)
+							? {
+									clientSide: result.client_side as Labrinth.Projects.v2.Environment,
+									serverSide: result.server_side as Labrinth.Projects.v2.Environment,
+								}
+							: undefined
+					"
+					:layout="ctx.effectiveLayout.value"
+					@contextmenu.prevent.stop="(event: MouseEvent) => ctx.onContextMenu?.(event, result)"
+					@mouseenter="ctx.onProjectHover?.(result)"
+					@mouseleave="ctx.onProjectHoverEnd?.()"
+				>
+					<template v-if="ctx.getCardActions" #actions>
+						<div class="flex gap-2">
+							<ButtonStyled
+								v-for="action in ctx.getCardActions(result, ctx.projectType.value)"
+								:key="action.key"
+								:color="action.color"
+								:type="action.type"
+								:circular="action.circular"
+							>
+								<button
+									v-tooltip="action.tooltip"
+									:disabled="action.disabled"
+									@click.stop="action.onClick"
+								>
+									<component :is="action.icon" />
+									<template v-if="!action.circular">{{ action.label }}</template>
+								</button>
+							</ButtonStyled>
+						</div>
+					</template>
+				</ProjectCard>
+			</template>
+		</ProjectCardList>
+
+		<div :class="ctx.variant === 'web' ? 'pagination-after' : 'flex justify-end'">
+			<Pagination
+				:page="ctx.currentPage.value"
+				:count="ctx.pageCount.value"
+				:class="ctx.variant === 'web' ? 'justify-end' : 'pagination-after'"
+				@switch-page="ctx.setPage"
+			/>
+		</div>
+	</div>
+
+	<slot name="after" />
+</template>
diff --git a/packages/ui/src/layouts/shared/browse-tab/providers/browse-manager.ts b/packages/ui/src/layouts/shared/browse-tab/providers/browse-manager.ts
new file mode 100644
index 0000000000..75ff3712f9
--- /dev/null
+++ b/packages/ui/src/layouts/shared/browse-tab/providers/browse-manager.ts
@@ -0,0 +1,106 @@
+import type { Labrinth } from '@modrinth/api-client'
+import type { Component, ComputedRef, MaybeRef, Ref, ShallowRef } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+import { createContext } from '#ui/providers/create-context'
+import type { FilterType, FilterValue, SortType } from '#ui/utils/search'
+
+import type {
+	BrowseInstallContext,
+	BrowseSearchResponse,
+	CardAction,
+	ServerModpackContent,
+} from '../types'
+
+export interface BrowseManagerContext {
+	tags: Ref<{
+		gameVersions: Labrinth.Tags.v2.GameVersion[]
+		loaders: Labrinth.Tags.v2.Loader[]
+		categories: Labrinth.Tags.v2.Category[]
+	}>
+	projectType: Ref<string>
+
+	query: Ref<string>
+	filters: ComputedRef<FilterType[]>
+	currentFilters: Ref<FilterValue[]>
+	toggledGroups: Ref<string[]>
+	overriddenProvidedFilterTypes: Ref<string[]>
+	serverFilterTypes: ComputedRef<FilterType[]>
+	serverCurrentFilters: Ref<FilterValue[]>
+	serverToggledGroups: Ref<string[]>
+	effectiveSortTypes: ComputedRef<readonly SortType[]>
+	effectiveCurrentSortType: Ref<SortType>
+	loading: Ref<boolean>
+	projectHits: ShallowRef<BrowseSearchResponse['projectHits']>
+	serverHits: ShallowRef<BrowseSearchResponse['serverHits']>
+	totalHits: Ref<number>
+	pageCount: ComputedRef<number>
+	maxResults: Ref<number>
+	currentPage: Ref<number>
+	isServerType: ComputedRef<boolean>
+	effectiveLayout: ComputedRef<'list' | 'grid'>
+	deprioritizedTags: ComputedRef<string[]>
+	excludeLoaders: ComputedRef<boolean>
+	refreshSearch: () => Promise<void>
+	setPage: (page: number) => Promise<void>
+	clearSearch: () => void
+	onFilterChange: () => void
+
+	getProjectLink: (result: Labrinth.Search.v2.ResultSearchProject) => string | RouteLocationRaw
+	getServerProjectLink: (
+		result: Labrinth.Search.v3.ResultSearchProject,
+	) => string | RouteLocationRaw
+
+	selectableProjectTypes: ComputedRef<{ label: string; href: string; shown?: boolean }[]>
+	showProjectTypeTabs: ComputedRef<boolean>
+
+	variant: 'app' | 'web'
+
+	getCardActions?: (
+		result: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
+		projectType: string,
+	) => CardAction[]
+
+	installContext?: ComputedRef<BrowseInstallContext | null>
+	providedFilters?: ComputedRef<FilterValue[]>
+	hideInstalled?: Ref<boolean>
+	showHideInstalled?: ComputedRef<boolean>
+	hideInstalledLabel?: ComputedRef<string>
+	onInstalled?: (projectId: string) => void
+
+	displayMode?: Ref<'list' | 'grid' | 'gallery'> | ComputedRef<'list' | 'grid' | 'gallery'>
+	cycleDisplayMode?: () => void
+	maxResultsOptions?: ComputedRef<number[]>
+
+	serverPings?: Ref<Record<string, number | undefined>>
+	getServerModpackContent?: (
+		result: Labrinth.Search.v3.ResultSearchProject,
+	) => ServerModpackContent | undefined
+
+	onProjectHover?: (result: Labrinth.Search.v2.ResultSearchProject) => void
+	onServerProjectHover?: (result: Labrinth.Search.v3.ResultSearchProject) => void
+	onProjectHoverEnd?: () => void
+	onContextMenu?: (
+		event: MouseEvent,
+		result: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
+	) => void
+	offline?: Ref<boolean>
+
+	filtersMenuOpen?: Ref<boolean>
+
+	lockedFilterMessages?: MaybeRef<{
+		gameVersion?: string
+		modLoader?: string
+		environment?: string
+		syncButton?: string
+		providedBy?: string
+		gameVersionShaderMessage?: string
+	}>
+
+	loadingComponent?: Component
+}
+
+export const [injectBrowseManager, provideBrowseManager] = createContext<BrowseManagerContext>(
+	'BrowsePageLayout',
+	'browseManagerContext',
+)
diff --git a/packages/ui/src/layouts/shared/browse-tab/providers/index.ts b/packages/ui/src/layouts/shared/browse-tab/providers/index.ts
new file mode 100644
index 0000000000..4aa2aea602
--- /dev/null
+++ b/packages/ui/src/layouts/shared/browse-tab/providers/index.ts
@@ -0,0 +1 @@
+export * from './browse-manager'
diff --git a/packages/ui/src/layouts/shared/browse-tab/sidebar.vue b/packages/ui/src/layouts/shared/browse-tab/sidebar.vue
new file mode 100644
index 0000000000..68c59be1da
--- /dev/null
+++ b/packages/ui/src/layouts/shared/browse-tab/sidebar.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { InfoIcon, XIcon } from '@modrinth/assets'
+import { computed, toValue } from 'vue'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import Checkbox from '#ui/components/base/Checkbox.vue'
+import SearchSidebarFilter from '#ui/components/search/SearchSidebarFilter.vue'
+
+import { injectBrowseManager } from './providers/browse-manager'
+
+const ctx = injectBrowseManager()
+
+const isApp = computed(() => ctx.variant === 'app')
+const lockedMessages = computed(() => toValue(ctx.lockedFilterMessages))
+
+function closeFiltersMenu() {
+	if (ctx.filtersMenuOpen) {
+		ctx.filtersMenuOpen.value = false
+	}
+	window.scrollTo({ top: 0, behavior: 'instant' as ScrollBehavior })
+}
+
+const filterClass = computed(() => {
+	if (isApp.value) {
+		return 'border-0 border-b-[1px] [&:first-child>button]:pt-4 last:border-b-0 border-[--brand-gradient-border] border-solid'
+	}
+	if (ctx.filtersMenuOpen?.value) {
+		return 'border-0 border-b-[1px] border-solid border-divider last:border-b-0'
+	}
+	return 'card-shadow rounded-2xl bg-bg-raised'
+})
+
+const buttonClass = computed(() => {
+	if (isApp.value) {
+		return 'button-animation flex flex-col gap-1 px-4 py-3 w-full bg-transparent cursor-pointer border-none hover:bg-button-bg'
+	}
+	return 'button-animation flex flex-col gap-1 px-6 py-4 w-full bg-transparent cursor-pointer border-none'
+})
+
+const contentClass = computed(() => (isApp.value ? 'mt-2 mb-3' : 'mb-4 mx-3'))
+const innerPanelClass = computed(() => (isApp.value ? 'ml-2 mr-3' : 'p-1'))
+
+function getFilterOpenByDefault(filterId: string): boolean {
+	if (ctx.isServerType.value) {
+		return ![
+			'server_category_minecraft_server_meta',
+			'server_category_minecraft_server_community',
+			'server_game_version',
+			'server_status',
+		].includes(filterId)
+	}
+	if (isApp.value) {
+		return filterId.startsWith('category') || filterId === 'environment' || filterId === 'license'
+	}
+	if (
+		lockedMessages.value?.gameVersionShaderMessage &&
+		ctx.projectType.value === 'shader' &&
+		filterId === 'game_version'
+	) {
+		return false
+	}
+	return true
+}
+</script>
+
+<template>
+	<slot name="prepend" />
+
+	<div v-if="ctx.filtersMenuOpen?.value" class="fixed inset-0 z-40 bg-bg" />
+
+	<div
+		class="flex flex-col"
+		:class="{
+			'gap-3': !isApp,
+			'fixed inset-0 z-50 m-4 mb-0 overflow-auto rounded-t-3xl bg-bg-raised':
+				ctx.filtersMenuOpen?.value,
+		}"
+	>
+		<div
+			v-if="ctx.filtersMenuOpen?.value"
+			class="sticky top-0 z-10 mx-1 flex items-center justify-between gap-3 border-0 border-b-[1px] border-solid border-divider bg-bg-raised px-6 py-4"
+		>
+			<h3 class="m-0 text-lg text-contrast">Filters</h3>
+			<ButtonStyled circular>
+				<button @click="closeFiltersMenu">
+					<XIcon />
+				</button>
+			</ButtonStyled>
+		</div>
+
+		<div
+			v-if="ctx.showHideInstalled?.value"
+			:class="
+				isApp
+					? 'border-0 border-b-[1px] p-4 last:border-b-0 border-[--brand-gradient-border] border-solid'
+					: 'card-shadow rounded-2xl bg-bg-raised p-4'
+			"
+		>
+			<Checkbox
+				v-model="ctx.hideInstalled!.value"
+				:label="ctx.hideInstalledLabel?.value ?? 'Hide installed content'"
+				class="filter-checkbox"
+				@update:model-value="ctx.onFilterChange()"
+				@click.prevent.stop
+			/>
+		</div>
+
+		<template v-if="ctx.isServerType.value">
+			<SearchSidebarFilter
+				v-for="filterType in ctx.serverFilterTypes.value.filter((f) => f.options.length > 0)"
+				:key="`server-filter-${filterType.id}`"
+				v-model:selected-filters="ctx.serverCurrentFilters.value"
+				v-model:toggled-groups="ctx.serverToggledGroups.value"
+				:provided-filters="[]"
+				:filter-type="filterType"
+				:class="filterClass"
+				:button-class="buttonClass"
+				:content-class="contentClass"
+				:inner-panel-class="innerPanelClass"
+				:open-by-default="getFilterOpenByDefault(filterType.id)"
+			>
+				<template #header>
+					<h3 :class="isApp ? 'text-base m-0' : 'm-0 text-lg'">
+						{{ filterType.formatted_name }}
+					</h3>
+				</template>
+			</SearchSidebarFilter>
+		</template>
+		<template v-else>
+			<SearchSidebarFilter
+				v-for="filter in ctx.filters.value.filter((f) => f.display !== 'none')"
+				:key="`filter-${filter.id}`"
+				v-model:selected-filters="ctx.currentFilters.value"
+				v-model:toggled-groups="ctx.toggledGroups.value"
+				v-model:overridden-provided-filter-types="ctx.overriddenProvidedFilterTypes.value"
+				:provided-filters="ctx.providedFilters?.value ?? []"
+				:filter-type="filter"
+				:class="filterClass"
+				:button-class="buttonClass"
+				:content-class="contentClass"
+				:inner-panel-class="innerPanelClass"
+				:open-by-default="getFilterOpenByDefault(filter.id)"
+			>
+				<template #header>
+					<h3 :class="isApp ? 'text-base m-0' : 'm-0 text-lg'">
+						{{ filter.formatted_name }}
+					</h3>
+				</template>
+				<template
+					v-if="
+						lockedMessages?.gameVersionShaderMessage &&
+						ctx.projectType.value === 'shader' &&
+						filter.id === 'game_version'
+					"
+					#prefix
+				>
+					<div class="mb-4 grid grid-cols-[auto_1fr] gap-2 px-3 text-sm font-medium text-blue">
+						<InfoIcon class="mt-1 size-4" />
+						<span>{{ lockedMessages.gameVersionShaderMessage }}</span>
+					</div>
+				</template>
+				<template v-if="lockedMessages?.gameVersion" #locked-game_version>
+					{{ lockedMessages.gameVersion }}
+				</template>
+				<template v-if="lockedMessages?.modLoader" #locked-mod_loader>
+					{{ lockedMessages.modLoader }}
+				</template>
+				<template v-if="lockedMessages?.environment" #locked-environment>
+					{{ lockedMessages.environment }}
+				</template>
+				<template v-if="lockedMessages?.syncButton" #sync-button>
+					{{ lockedMessages.syncButton }}
+				</template>
+			</SearchSidebarFilter>
+		</template>
+	</div>
+</template>
diff --git a/packages/ui/src/layouts/shared/browse-tab/types.ts b/packages/ui/src/layouts/shared/browse-tab/types.ts
new file mode 100644
index 0000000000..2ab81f8206
--- /dev/null
+++ b/packages/ui/src/layouts/shared/browse-tab/types.ts
@@ -0,0 +1,46 @@
+import type { Labrinth } from '@modrinth/api-client'
+import type { Component } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+export interface BrowseSearchResponse {
+	projectHits: (Labrinth.Search.v2.ResultSearchProject & {
+		installed?: boolean
+		installing?: boolean
+	})[]
+	serverHits: Labrinth.Search.v3.ResultSearchProject[]
+	total_hits: number
+	per_page: number
+}
+
+export interface BrowseInstallContext {
+	name: string
+	loader: string
+	gameVersion: string
+	serverId?: string | null
+	upstream?: { project_id?: string | null } | null
+	iconSrc?: string | null
+	isMedal?: boolean
+	backUrl: string | RouteLocationRaw
+	backLabel: string
+	heading: string
+	warning?: string
+}
+
+export interface CardAction {
+	key: string
+	label: string
+	icon: Component
+	disabled?: boolean
+	color?: 'brand' | 'red'
+	type?: 'standard' | 'outlined' | 'transparent'
+	circular?: boolean
+	tooltip?: string
+	onClick: () => void | Promise<void>
+}
+
+export interface ServerModpackContent {
+	name: string
+	icon?: string
+	onclick?: () => void
+	showCustomModpackTooltip: boolean
+}

From c1272bd0c62e29973eda309ca64e835481c3969c Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 11:11:46 -0600
Subject: [PATCH 28/50] fix: action bar behind modal

---
 packages/ui/src/components/base/FloatingActionBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/base/FloatingActionBar.vue b/packages/ui/src/components/base/FloatingActionBar.vue
index 0fb04c271b..201f0f8d55 100644
--- a/packages/ui/src/components/base/FloatingActionBar.vue
+++ b/packages/ui/src/components/base/FloatingActionBar.vue
@@ -61,7 +61,7 @@ onUnmounted(() => {
 	<Transition name="floating-action-bar" appear>
 		<div
 			v-if="shown"
-			class="floating-action-bar drop-shadow-2xl fixed z-10 p-4 bottom-0"
+			class="floating-action-bar drop-shadow-2xl fixed z-[21] p-4 bottom-0"
 			aria-live="polite"
 		>
 			<div

From 21a36d93e1e8cb0182cc1c24a2b8c2b1d087a109 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 6 Apr 2026 19:13:11 +0200
Subject: [PATCH 29/50] fix: remove warning modal for stopping

---
 .../server-header/PanelActionConfirmModal.vue | 71 -------------------
 .../server-header/PanelServerActionButton.vue | 23 +-----
 .../server-header/PanelServerOverflowMenu.vue | 25 +------
 .../server-header/use-server-power-action.ts  | 60 +---------------
 4 files changed, 7 insertions(+), 172 deletions(-)
 delete mode 100644 packages/ui/src/components/servers/server-header/PanelActionConfirmModal.vue

diff --git a/packages/ui/src/components/servers/server-header/PanelActionConfirmModal.vue b/packages/ui/src/components/servers/server-header/PanelActionConfirmModal.vue
deleted file mode 100644
index 327195cd33..0000000000
--- a/packages/ui/src/components/servers/server-header/PanelActionConfirmModal.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-	<NewModal ref="modal" header="Confirming power action" @close="emit('cancel')">
-		<div class="flex flex-col gap-4 md:w-[400px]">
-			<p class="m-0">
-				Are you sure you want to
-				<span class="lowercase">{{ pendingAction }}</span>
-				the server?
-			</p>
-			<Checkbox
-				v-model="dontAskAgainModel"
-				label="Don't ask me again"
-				class="text-sm"
-				:disabled="!pendingAction"
-			/>
-			<div class="flex flex-row gap-4">
-				<ButtonStyled type="standard" color="brand" @click="emit('confirm')">
-					<button :disabled="!pendingAction">
-						<CheckIcon class="h-5 w-5" />
-						{{ pendingAction }} server
-					</button>
-				</ButtonStyled>
-				<ButtonStyled @click="emit('cancel')">
-					<button>
-						<XIcon class="h-5 w-5" />
-						Cancel
-					</button>
-				</ButtonStyled>
-			</div>
-		</div>
-	</NewModal>
-</template>
-
-<script setup lang="ts">
-import { CheckIcon, XIcon } from '@modrinth/assets'
-import { computed, ref } from 'vue'
-
-import { ButtonStyled, Checkbox, NewModal } from '#ui/components'
-
-import type { PowerAction } from './use-server-power-action'
-
-const props = defineProps<{
-	pendingAction: PowerAction | null
-	dontAskAgain: boolean
-}>()
-
-const emit = defineEmits<{
-	confirm: []
-	cancel: []
-	'update:dontAskAgain': [value: boolean]
-}>()
-
-const modal = ref<InstanceType<typeof NewModal> | null>(null)
-
-const dontAskAgainModel = computed({
-	get: () => props.dontAskAgain,
-	set: (value: boolean) => emit('update:dontAskAgain', value),
-})
-
-function show() {
-	modal.value?.show()
-}
-
-function hide() {
-	modal.value?.hide()
-}
-
-defineExpose({
-	show,
-	hide,
-})
-</script>
diff --git a/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue b/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
index fe6d61f121..4edba7ea9f 100644
--- a/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
+++ b/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
@@ -1,13 +1,5 @@
 <template>
 	<div class="contents">
-		<PanelActionConfirmModal
-			ref="confirmActionModal"
-			v-model:dont-ask-again="dontAskAgain"
-			:pending-action="pendingAction"
-			@confirm="executePendingAction"
-			@cancel="resetPendingAction"
-		/>
-
 		<div class="flex flex-row items-center gap-2 rounded-lg">
 			<ButtonStyled v-if="isInstalling" type="standard" color="brand" size="large">
 				<button disabled class="flex-shrink-0">
@@ -41,15 +33,11 @@
 
 <script setup lang="ts">
 import { LoaderCircleIcon, PlayIcon, StopCircleIcon, UpdatedIcon } from '@modrinth/assets'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 
 import { ButtonStyled } from '#ui/components'
 
-import PanelActionConfirmModal from './PanelActionConfirmModal.vue'
-import {
-	type PanelActionConfirmModalController,
-	useServerPowerAction,
-} from './use-server-power-action'
+import { useServerPowerAction } from './use-server-power-action'
 
 const props = withDefaults(
 	defineProps<{
@@ -60,8 +48,6 @@ const props = withDefaults(
 	},
 )
 
-const confirmActionModal = ref<PanelActionConfirmModalController | null>(null)
-
 const {
 	isInstalling,
 	isRunning,
@@ -71,14 +57,9 @@ const {
 	busyTooltip,
 	canTakeAction,
 	primaryActionText,
-	pendingAction,
-	dontAskAgain,
 	initiateAction,
 	handlePrimaryAction,
-	executePendingAction,
-	resetPendingAction,
 } = useServerPowerAction({
 	disabled: computed(() => props.disabled),
-	confirmModalRef: confirmActionModal,
 })
 </script>
diff --git a/packages/ui/src/components/servers/server-header/PanelServerOverflowMenu.vue b/packages/ui/src/components/servers/server-header/PanelServerOverflowMenu.vue
index e8a4f8d1ee..e1139916fd 100644
--- a/packages/ui/src/components/servers/server-header/PanelServerOverflowMenu.vue
+++ b/packages/ui/src/components/servers/server-header/PanelServerOverflowMenu.vue
@@ -1,13 +1,5 @@
 <template>
 	<div class="contents">
-		<PanelActionConfirmModal
-			ref="confirmActionModal"
-			v-model:dont-ask-again="dontAskAgain"
-			:pending-action="pendingAction"
-			@confirm="executePendingAction"
-			@cancel="resetPendingAction"
-		/>
-
 		<NewModal
 			ref="detailsModal"
 			:header="`All of ${server.name || 'Server'} info`"
@@ -68,11 +60,7 @@ import { ButtonStyled, NewModal, ServerInfoLabels } from '#ui/components'
 import TeleportOverflowMenu from '#ui/components/base/TeleportOverflowMenu.vue'
 import { injectModrinthServerContext } from '#ui/providers'
 
-import PanelActionConfirmModal from './PanelActionConfirmModal.vue'
-import {
-	type PanelActionConfirmModalController,
-	useServerPowerAction,
-} from './use-server-power-action'
+import { useServerPowerAction } from './use-server-power-action'
 
 const props = withDefaults(
 	defineProps<{
@@ -92,19 +80,10 @@ const props = withDefaults(
 const router = useRouter()
 const { serverId, server } = injectModrinthServerContext()
 
-const confirmActionModal = ref<PanelActionConfirmModalController | null>(null)
 const detailsModal = ref<InstanceType<typeof NewModal> | null>(null)
 
-const {
-	isInstalling,
-	pendingAction,
-	dontAskAgain,
-	initiateAction,
-	executePendingAction,
-	resetPendingAction,
-} = useServerPowerAction({
+const { isInstalling, initiateAction } = useServerPowerAction({
 	disabled: computed(() => props.disabled),
-	confirmModalRef: confirmActionModal,
 })
 
 const menuOptions = computed(() => [
diff --git a/packages/ui/src/components/servers/server-header/use-server-power-action.ts b/packages/ui/src/components/servers/server-header/use-server-power-action.ts
index f66e5da61d..f5a5e3f2ab 100644
--- a/packages/ui/src/components/servers/server-header/use-server-power-action.ts
+++ b/packages/ui/src/components/servers/server-header/use-server-power-action.ts
@@ -1,5 +1,4 @@
-import { useStorage } from '@vueuse/core'
-import { computed, type Ref, ref } from 'vue'
+import { computed, type Ref } from 'vue'
 
 import { useVIntl } from '#ui/composables/i18n'
 import {
@@ -10,25 +9,11 @@ import {
 
 export type PowerAction = 'Start' | 'Stop' | 'Restart' | 'Kill'
 
-export type PanelActionConfirmModalController = {
-	show: () => void
-	hide: () => void
-}
-
-export function useServerPowerAction(options?: {
-	disabled?: Ref<boolean>
-	confirmModalRef?: Ref<PanelActionConfirmModalController | null>
-}) {
+export function useServerPowerAction(options?: { disabled?: Ref<boolean> }) {
 	const { formatMessage } = useVIntl()
 	const client = injectModrinthClient()
 	const { serverId, server, powerState, busyReasons } = injectModrinthServerContext()
 	const { addNotification } = injectNotificationManager()
-	const pendingAction = ref<PowerAction | null>(null)
-	const dontAskAgain = ref(false)
-
-	const userPreferences = useStorage(`pyro-server-${serverId}-preferences`, {
-		powerDontAskAgain: false,
-	})
 
 	const isInstalling = computed(() => server.value.status === 'installing')
 	const isRunning = computed(() => powerState.value === 'running')
@@ -74,48 +59,13 @@ export function useServerPowerAction(options?: {
 
 	function initiateAction(action: PowerAction) {
 		if (!canTakeAction.value) return
-
-		if (action === 'Start') {
-			void sendPowerAction(action)
-			return
-		}
-
-		pendingAction.value = action
-
-		if (userPreferences.value.powerDontAskAgain) {
-			executePendingAction()
-		} else {
-			options?.confirmModalRef?.value?.show()
-		}
+		void sendPowerAction(action)
 	}
 
 	function handlePrimaryAction() {
 		initiateAction(isRunning.value ? 'Restart' : 'Start')
 	}
 
-	function executePendingAction() {
-		if (!pendingAction.value) return
-
-		if (!canTakeAction.value) {
-			resetPendingAction()
-			return
-		}
-
-		void sendPowerAction(pendingAction.value)
-
-		if (dontAskAgain.value) {
-			userPreferences.value.powerDontAskAgain = true
-		}
-
-		resetPendingAction()
-	}
-
-	function resetPendingAction() {
-		options?.confirmModalRef?.value?.hide()
-		pendingAction.value = null
-		dontAskAgain.value = false
-	}
-
 	return {
 		isInstalling,
 		isRunning,
@@ -125,12 +75,8 @@ export function useServerPowerAction(options?: {
 		busyTooltip,
 		canTakeAction,
 		primaryActionText,
-		pendingAction,
-		dontAskAgain,
 		sendPowerAction,
 		initiateAction,
 		handlePrimaryAction,
-		executePendingAction,
-		resetPendingAction,
 	}
 }

From 4f401ef0300d8a70b0ae238b380c85af372cc390 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 11:18:08 -0600
Subject: [PATCH 30/50] fix: server cards states

---
 .../ui/src/components/servers/ServerListing.vue     | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index e17a898af4..d8bc6d3da4 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -1,6 +1,10 @@
 <template>
 	<div>
-		<RouterLink :to="isDisabled ? '' : `/hosting/manage/${server_id}`">
+		<component
+			:is="isDisabled ? 'div' : 'RouterLink'"
+			v-bind="!isDisabled ? { to: `/hosting/manage/${server_id}` } : {}"
+			:class="{ 'cursor-default': isDisabled }"
+		>
 			<div
 				class="flex flex-row items-center overflow-x-hidden rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-4 transition-all duration-150"
 				:class="{
@@ -31,7 +35,7 @@
 							{{ name }}
 						</h2>
 						<div
-							v-if="isConfiguring"
+							v-if="isConfiguring && noticeType !== 'cancelled' && noticeType !== 'setToCancel'"
 							class="flex min-w-0 items-center gap-2 truncate text-sm font-medium text-brand rounded-full bg-brand-highlight border border-solid border-brand px-2.5 h-[28px]"
 						>
 							<SparklesIcon class="size-5 shrink-0 font-semibold" />
@@ -78,7 +82,7 @@
 					/>
 				</div>
 			</div>
-		</RouterLink>
+		</component>
 
 		<div v-if="noticeType" class="server-listing-notice">
 			<div v-if="noticeType === 'provisioning'" class="flex gap-2">
@@ -159,7 +163,7 @@
 
 			<div v-if="noticeButtons" class="flex gap-2">
 				<ButtonStyled
-					v-if="noticeButtons.downloadBackup && onDownloadBackup"
+					v-if="noticeButtons.downloadBackup && onDownloadBackup && isBackupDownloadEnabled"
 					type="outlined"
 					circular
 				>
@@ -398,6 +402,7 @@ const props = defineProps<ServerListingProps>()
 
 const { archon, kyros, labrinth } = injectModrinthClient()
 
+const isBackupDownloadEnabled = false
 const isConfiguring = computed(() => props.flows?.intro)
 const isUpgrading = computed(
 	() => props.status === 'suspended' && props.suspension_reason === 'upgrading',

From da27e5d4c79951561d53ffbdd89aa99dfa1ddce0 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 6 Apr 2026 19:19:32 +0200
Subject: [PATCH 31/50] we hate webkit we hate webkit

---
 packages/ui/src/components/base/ButtonStyled.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/ui/src/components/base/ButtonStyled.vue b/packages/ui/src/components/base/ButtonStyled.vue
index f83d789535..1547e61208 100644
--- a/packages/ui/src/components/base/ButtonStyled.vue
+++ b/packages/ui/src/components/base/ButtonStyled.vue
@@ -268,6 +268,8 @@ const fontSize = computed(() => {
 	> :is(button, a, .button-like):first-child {
 	@apply flex cursor-pointer flex-row items-center justify-center border-solid border border-transparent bg-[--_bg] text-[--_text] h-[--_height] min-w-[--_width] rounded-[--_radius] px-[--_padding-x] py-[--_padding-y] gap-[--_gap] font-[--_font-weight] whitespace-nowrap;
 	box-shadow: var(--_box-shadow, inset 0 0 0 transparent);
+	-webkit-font-smoothing: antialiased;
+	will-change: filter;
 	transition:
 		scale 0.125s ease-in-out,
 		background-color 0.25s ease-in-out,

From d0bdf2e8d80c856c2ddda2c8582b55a3d1d9d7b6 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 11:33:36 -0600
Subject: [PATCH 32/50] fix: update allocation creation to not use modal

---
 .../shared/server-settings/pages/general.vue  |  2 +-
 .../shared/server-settings/pages/network.vue  | 89 ++++++-------------
 2 files changed, 30 insertions(+), 61 deletions(-)

diff --git a/packages/ui/src/layouts/shared/server-settings/pages/general.vue b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
index ef9078d915..c0eb8e9112 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/general.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
@@ -99,7 +99,7 @@
 
 				<!-- Info -->
 				<div class="flex flex-col gap-2.5">
-					<div class="text-md m-0 font-semibold text-contrast">Info</div>
+					<div class="text-lg m-0 font-semibold text-contrast">Info</div>
 					<div class="flex flex-col gap-2.5 rounded-xl bg-surface-2 p-4">
 						<div
 							v-for="property in infoProperties"
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/network.vue b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
index 27a49f2ed6..d137033723 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/network.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
@@ -1,36 +1,12 @@
 <template>
 	<div>
-		<NewModal ref="newAllocationModal" header="New allocation" width="550px">
-			<form class="flex w-full flex-col gap-2" @submit.prevent="addNewAllocation">
-				<label for="new-allocation-name" class="font-semibold text-contrast"> Name </label>
-				<StyledInput
-					id="new-allocation-name"
-					ref="newAllocationInput"
-					v-model="newAllocationName"
-					wrapper-class="w-full"
-					:maxlength="32"
-					placeholder="e.g. Secondary allocation"
-				/>
-				<div class="mb-1 mt-4 flex justify-end gap-2.5">
-					<ButtonStyled>
-						<button @click="newAllocationModal?.hide()">Cancel</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button :disabled="!newAllocationName" type="submit">
-							<PlusIcon /> Create allocation
-						</button>
-					</ButtonStyled>
-				</div>
-			</form>
-		</NewModal>
-
 		<NewModal ref="editAllocationModal" header="Edit allocation" width="550px">
 			<form class="flex w-full flex-col gap-2" @submit.prevent="editAllocation">
 				<label for="edit-allocation-name" class="font-semibold text-contrast"> Name </label>
 				<StyledInput
 					id="edit-allocation-name"
 					ref="editAllocationInput"
-					v-model="newAllocationName"
+					v-model="editAllocationName"
 					wrapper-class="w-full"
 					:maxlength="32"
 					placeholder="e.g. Secondary allocation"
@@ -40,7 +16,7 @@
 						<button @click="editAllocationModal?.hide()">Cancel</button>
 					</ButtonStyled>
 					<ButtonStyled color="brand">
-						<button :disabled="!newAllocationName" type="submit">
+						<button :disabled="!editAllocationName || creatingAllocation" type="submit">
 							<SaveIcon /> Update allocation
 						</button>
 					</ButtonStyled>
@@ -89,16 +65,20 @@
 
 						<div class="flex w-full flex-col items-center justify-start gap-2 sm:flex-row">
 							<StyledInput
-								v-model="allocationSearch"
+								v-model="createAllocationName"
 								wrapper-class="grow max-w-[400px]"
-								:maxlength="64"
-								placeholder="Port name (e.g., Dynmap)"
+								:maxlength="32"
+								placeholder="e.g. Secondary allocation"
 							/>
 
-							<ButtonStyled color="brand" @click="showNewAllocationModal">
-								<button class="!w-full max-w-20">
+							<ButtonStyled color="brand">
+								<button
+									:disabled="!createAllocationName || creatingAllocation"
+									v-tooltip="!createAllocationName ? 'Enter a name to create an allocation' : ''"
+									@click="addNewAllocation"
+								>
 									<PlusIcon />
-									<span>Add</span>
+									<span>Create allocation</span>
 								</button>
 							</ButtonStyled>
 						</div>
@@ -259,8 +239,6 @@ const allocationColumns: TableColumn[] = [
 	{ key: 'actions', label: 'Actions', width: '33%', align: 'right' },
 ]
 
-const allocationSearch = ref('')
-
 const allocationRows = computed(() => {
 	const primary = {
 		name: 'Primary allocation',
@@ -272,12 +250,7 @@ const allocationRows = computed(() => {
 		port: a.port,
 		primary: false,
 	}))
-	const all = [primary, ...extra]
-	const query = allocationSearch.value.toLowerCase().trim()
-	if (!query) return all
-	return all.filter(
-		(row) => row.name.toLowerCase().includes(query) || String(row.port).includes(query),
-	)
+	return [primary, ...extra]
 })
 
 const dnsColumns: TableColumn[] = [
@@ -286,24 +259,24 @@ const dnsColumns: TableColumn[] = [
 	{ key: 'content', label: 'Content' },
 ]
 
-const newAllocationModal = ref<typeof NewModal>()
 const editAllocationModal = ref<typeof NewModal>()
 const confirmDeleteModal = ref<typeof ConfirmModal>()
-const newAllocationInput = ref<HTMLInputElement | null>(null)
 const editAllocationInput = ref<HTMLInputElement | null>(null)
-const newAllocationName = ref('')
+const createAllocationName = ref('')
+const editAllocationName = ref('')
 const newAllocationPort = ref(0)
 const allocationToDelete = ref<number | null>(null)
+const creatingAllocation = ref(false)
 
 const addNewAllocation = async () => {
-	if (!newAllocationName.value) return
+	if (!createAllocationName.value) return
+	creatingAllocation.value = true
 
 	try {
-		await client.archon.servers_v0.reserveAllocation(serverId, newAllocationName.value)
+		await client.archon.servers_v0.reserveAllocation(serverId, createAllocationName.value)
 		await queryClient.invalidateQueries({ queryKey: ['servers', 'allocations', serverId] })
 
-		newAllocationModal.value?.hide()
-		newAllocationName.value = ''
+		createAllocationName.value = ''
 
 		addNotification({
 			type: 'success',
@@ -312,21 +285,14 @@ const addNewAllocation = async () => {
 		})
 	} catch (error) {
 		console.error('Failed to reserve new allocation:', error)
+	} finally {
+		creatingAllocation.value = false
 	}
 }
 
-const showNewAllocationModal = () => {
-	newAllocationName.value = ''
-	newAllocationModal.value?.show()
-	nextTick(() => {
-		setTimeout(() => {
-			newAllocationInput.value?.focus()
-		}, 100)
-	})
-}
-
 const showEditAllocationModal = (port: number) => {
 	newAllocationPort.value = port
+	editAllocationName.value = allocations.value?.find((a) => a.port === port)?.name ?? ''
 	editAllocationModal.value?.show()
 	nextTick(() => {
 		setTimeout(() => {
@@ -356,18 +322,19 @@ const confirmDeleteAllocation = async () => {
 }
 
 const editAllocation = async () => {
-	if (!newAllocationName.value) return
+	if (!editAllocationName.value) return
+	creatingAllocation.value = true
 
 	try {
 		await client.archon.servers_v0.updateAllocation(
 			serverId,
 			newAllocationPort.value,
-			newAllocationName.value,
+			editAllocationName.value,
 		)
 		await queryClient.invalidateQueries({ queryKey: ['servers', 'allocations', serverId] })
 
 		editAllocationModal.value?.hide()
-		newAllocationName.value = ''
+		editAllocationName.value = ''
 
 		addNotification({
 			type: 'success',
@@ -376,6 +343,8 @@ const editAllocation = async () => {
 		})
 	} catch (error) {
 		console.error('Failed to reserve new allocation:', error)
+	} finally {
+		creatingAllocation.value = false
 	}
 }
 

From 24a9c972bf7649dc26ec7396b5b9ee91389728d8 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 12:05:54 -0600
Subject: [PATCH 33/50] fix: properties tab spacing and styles

---
 .../server-settings/pages/properties.vue      | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
index e56e2f880e..7beb5fe1fa 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
@@ -43,8 +43,8 @@
 					<div
 						class="rounded-2xl border border-solid border-surface-5 p-4 [&:not(:has(*:not(:empty)))]:hidden"
 					>
-						<div class="flex w-full flex-col gap-4 min-[1100px]:max-w-[600px]">
-							<div v-if="isPropertyVisible('gamemode')" class="flex flex-col gap-2">
+						<div class="flex w-full flex-col gap-1.5">
+							<div v-if="isPropertyVisible('gamemode')" class="flex flex-col gap-2 my-1">
 								<span class="font-semibold text-contrast">Gamemode</span>
 								<Chips
 									v-model="combinedGamemode"
@@ -55,7 +55,7 @@
 
 							<div
 								v-if="combinedGamemode !== 'hardcore' && isPropertyVisible('difficulty')"
-								class="flex flex-col gap-2"
+								class="flex flex-col gap-2 my-1"
 							>
 								<span class="font-semibold text-contrast">Difficulty</span>
 								<Chips
@@ -65,31 +65,31 @@
 								/>
 							</div>
 
-							<div v-if="isPropertyVisible('max_players')" class="flex flex-col gap-2">
+							<div v-if="isPropertyVisible('max_players')" class="flex flex-col gap-2 my-1">
 								<span class="font-semibold text-contrast">Max players</span>
 								<StyledInput
 									id="server-property-max-players"
 									:model-value="liveProperties.max_players"
 									type="number"
 									placeholder="20"
-									wrapper-class="w-full"
+									wrapper-class="w-full max-w-[450px]"
 									@update:model-value="liveProperties.max_players = String($event)"
 								/>
 							</div>
 
-							<div v-if="isPropertyVisible('motd')" class="flex flex-col gap-2">
+							<div v-if="isPropertyVisible('motd')" class="flex flex-col gap-2 my-1">
 								<span class="font-semibold text-contrast">MOTD</span>
 								<StyledInput
 									id="server-property-motd"
 									v-model="liveProperties.motd"
 									placeholder="A Minecraft Server"
-									wrapper-class="w-full"
+									wrapper-class="w-full max-w-[450px]"
 								/>
 							</div>
 
 							<div
 								v-if="isPropertyVisible('allow_flight')"
-								class="flex flex-row items-center justify-between gap-4"
+								class="flex flex-row items-center justify-between gap-4 h-10"
 							>
 								<span class="font-semibold text-contrast">Allow flight</span>
 								<Toggle
@@ -101,7 +101,7 @@
 
 							<div
 								v-if="isPropertyVisible('allow_cheats')"
-								class="flex flex-row items-center justify-between gap-4"
+								class="flex flex-row items-center justify-between gap-4 h-10"
 							>
 								<span class="font-semibold text-contrast">Allow cheats</span>
 								<Toggle
@@ -113,7 +113,7 @@
 
 							<div
 								v-if="isPropertyVisible('white_list')"
-								class="flex flex-row items-center justify-between gap-4"
+								class="flex flex-row items-center justify-between gap-4 h-10"
 							>
 								<span class="font-semibold text-contrast">Enable whitelist</span>
 								<Toggle id="server-property-whitelist" v-model="whitelistEnabled" />
@@ -121,7 +121,7 @@
 
 							<div
 								v-if="isPropertyVisible('spawn_protection')"
-								class="flex flex-row items-center justify-between gap-4"
+								class="flex flex-row items-center justify-between gap-4 h-10"
 							>
 								<span class="font-semibold text-contrast">Enable spawn protection</span>
 								<Toggle
@@ -132,7 +132,7 @@
 
 							<div
 								v-if="spawnProtectionEnabled && isPropertyVisible('spawn_protection')"
-								class="flex items-center justify-between"
+								class="flex items-center justify-between h-10"
 							>
 								<span class="font-semibold text-contrast">Protection radius</span>
 								<StyledInput
@@ -163,18 +163,21 @@
 										{{ group.label }}
 									</h3>
 									<div
-										class="flex flex-col gap-4 rounded-2xl border border-solid border-surface-5 p-4"
+										class="flex flex-col gap-2 rounded-2xl border border-solid border-surface-5 p-4"
 									>
 										<template v-for="key in group.properties" :key="key">
 											<div
 												v-if="isPropertyVisible(key)"
 												class="flex flex-row flex-wrap items-center justify-between h-10"
 											>
-												<span :id="`property-label-${key}`" class="font-semibold">
+												<span :id="`property-label-${key}`" class="font-semibold text-contrast">
 													{{ formatPropertyName(key) }}
 												</span>
 
-												<div v-if="getPropertyDef(key).type === 'toggle'" class="flex justify-end">
+												<div
+													v-if="getPropertyDef(key).type === 'toggle'"
+													class="flex w-full justify-end sm:w-[320px]"
+												>
 													<Toggle
 														:id="`server-property-${key}`"
 														:model-value="liveProperties[key] === 'true'"
@@ -196,7 +199,7 @@
 														@update:model-value="liveProperties[key] = String($event)"
 													/>
 												</div>
-												<div v-else class="mt-2 flex w-full justify-end sm:w-[320px]">
+												<div v-else class="flex w-full justify-end sm:w-[320px]">
 													<StyledInput
 														:id="`server-property-${key}`"
 														v-model="liveProperties[key]"

From 7dfad232f0312fa9dc3623ae4112c94c47f0014c Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 12:12:13 -0600
Subject: [PATCH 34/50] feat: add files tab copy

---
 .../ui/src/layouts/shared/server-settings/pages/properties.vue   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
index 7beb5fe1fa..ef7c2eaacb 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
@@ -213,6 +213,7 @@
 									</div>
 								</div>
 							</template>
+							<div>All other properties can be edited in server.properties via the Files tab.</div>
 						</div>
 					</Accordion>
 

From 7d4a16996643adc1b976dcd1c02072a70bbf6f90 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 12:16:40 -0600
Subject: [PATCH 35/50] fix: advanced properties icon

---
 .../ui/src/layouts/shared/server-settings/pages/properties.vue   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
index ef7c2eaacb..bcca0f77ce 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
@@ -151,6 +151,7 @@
 						v-if="hasVisibleAdvancedProperties"
 						overflow-visible
 						:force-open="isSearchActive"
+						button-class="flex w-full flex-col gap-2 bg-transparent m-0 p-0 border-none"
 					>
 						<template #title>
 							<span class="text-lg font-semibold text-contrast">Advanced properties</span>

From cf63ffb9082522ee6139a482f39c02a65cfbf248 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 12:20:41 -0600
Subject: [PATCH 36/50] fix: remove back to all servers link

---
 .../servers/server-header/ServerManageHeader.vue          | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/ui/src/components/servers/server-header/ServerManageHeader.vue b/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
index 40dbea6081..3801ab53ac 100644
--- a/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
+++ b/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
@@ -1,9 +1,5 @@
 <template>
 	<div class="w-full flex flex-col gap-4">
-		<AutoLink :to="props.backHref" :class="props.breadcrumbClass">
-			<LeftArrowIcon />
-			{{ props.backLabel }}
-		</AutoLink>
 		<ContentPageHeader :class="props.headerClass">
 			<template #icon>
 				<ServerIcon :image="headerImage" class="size-20 !rounded-2xl" />
@@ -74,7 +70,7 @@
 
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
-import { LeftArrowIcon, LinkIcon, SettingsIcon, TimerIcon } from '@modrinth/assets'
+import { LinkIcon, SettingsIcon, TimerIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
 import { AutoLink, Avatar, ContentPageHeader, LoaderIcon, ServerIcon } from '#ui/components'
@@ -96,7 +92,6 @@ const props = withDefaults(
 		uptimeSeconds?: number
 		showUptime?: boolean
 		backHref?: string
-		backLabel?: string
 		breadcrumbClass?: string
 		headerClass?: string
 	}>(),
@@ -107,7 +102,6 @@ const props = withDefaults(
 		uptimeSeconds: 0,
 		showUptime: true,
 		backHref: '/hosting/manage',
-		backLabel: 'All servers',
 		breadcrumbClass: 'breadcrumb goto-link flex w-fit items-center',
 		headerClass: '',
 	},

From fce19136e27f6e8ce7cd2d2b46dffc1014abc2a0 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 12:52:23 -0600
Subject: [PATCH 37/50] feat: add files tab link in copy

---
 .../server-settings/pages/properties.vue      | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
index bcca0f77ce..631515c74d 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
@@ -10,8 +10,15 @@
 			<div class="flex flex-col gap-4">
 				<div class="flex flex-col gap-2">
 					<div class="m-0">
-						Edit the Minecraft server properties file here, or use the Files tab to edit the full
-						file. If you're unsure about a setting, the
+						Edit the Minecraft server properties file here, or use the
+						<AutoLink
+							class="goto-link !inline-block"
+							:to="filesTabLink"
+							@click="onFilesTabLinkClick"
+						>
+							Files tab
+						</AutoLink>
+						to edit the full file. If you're unsure about a setting, the
 						<AutoLink
 							class="goto-link !inline-block"
 							to="https://minecraft.wiki/w/Server.properties"
@@ -214,7 +221,16 @@
 									</div>
 								</div>
 							</template>
-							<div>All other properties can be edited in server.properties via the Files tab.</div>
+							<div>
+								All other properties can be edited in server.properties via the
+								<AutoLink
+									class="goto-link !inline-block"
+									:to="filesTabLink"
+									@click="onFilesTabLinkClick"
+								>
+									Files tab </AutoLink
+								>.
+							</div>
 						</div>
 					</Accordion>
 
@@ -257,6 +273,7 @@ import { computed, ref, watch } from 'vue'
 
 import { Accordion, Admonition, AutoLink, Chips, StyledInput, Toggle } from '#ui/components'
 import SaveBanner from '#ui/components/servers/SaveBanner.vue'
+import { injectServerSettings } from '#ui/layouts/shared/server-settings'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
@@ -267,9 +284,17 @@ const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
 const { serverId, worldId, powerState, busyReasons } = injectModrinthServerContext()
 const queryClient = useQueryClient()
+const filesTabLink = computed(
+	() => `/hosting/manage/${encodeURIComponent(serverId)}/files?path=/&editing=server.properties`,
+)
+const serverSettings = injectServerSettings(null)
 
 const searchInput = ref('')
 
+function onFilesTabLinkClick() {
+	serverSettings?.closeModal?.()
+}
+
 type PropertyDef = { type: 'toggle' } | { type: 'number' } | { type: 'text' }
 
 const KNOWN_PROPERTIES: Record<string, PropertyDef> = {

From 37f37ba38f7e17dda22229c2033ac2ccea38bad0 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 13:13:57 -0600
Subject: [PATCH 38/50] fix: server header styles to be consistent with
 instance

---
 packages/ui/src/components/servers/ServerListing.vue     | 2 +-
 .../ui/src/components/servers/labels/ServerGameLabel.vue | 4 ++--
 .../src/components/servers/labels/ServerLoaderLabel.vue  | 4 ++--
 .../src/components/servers/labels/ServerPlayerCount.vue  | 2 +-
 .../components/servers/labels/ServerSubdomainLabel.vue   | 2 +-
 .../src/components/servers/labels/ServerUptimeLabel.vue  | 4 +---
 .../servers/server-header/ServerManageHeader.vue         | 9 +++------
 7 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index d8bc6d3da4..819f43ed38 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -29,7 +29,7 @@
 					<LockIcon v-else class="size-8 absolute" :class="{ 'opacity-50': isDisabled }" />
 				</div>
 				<ServerIcon v-else :image="image ?? undefined" :disabled="isDisabled" />
-				<div class="ml-4 flex flex-col gap-2.5">
+				<div class="ml-4 flex flex-col gap-1.5">
 					<div class="flex flex-row items-center gap-2">
 						<h2 class="m-0 text-xl font-bold text-contrast" :class="{ 'opacity-50': isDisabled }">
 							{{ name }}
diff --git a/packages/ui/src/components/servers/labels/ServerGameLabel.vue b/packages/ui/src/components/servers/labels/ServerGameLabel.vue
index edf28cebdf..84134a1e57 100644
--- a/packages/ui/src/components/servers/labels/ServerGameLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerGameLabel.vue
@@ -6,7 +6,7 @@
 		<AutoLink
 			v-if="isLink"
 			:to="settingsLinkTarget"
-			class="flex min-w-0 items-center truncate text-sm font-semibold"
+			class="flex min-w-0 items-center truncate text-sm font-medium"
 			:class="settingsLinkTarget ? 'hover:underline' : ''"
 		>
 			<div class="flex flex-row items-center gap-1">
@@ -18,7 +18,7 @@
 		<div
 			v-else
 			v-tooltip="'Change server version'"
-			class="pointer-events-none flex min-w-0 flex-row items-center gap-1 truncate text-sm font-semibold"
+			class="pointer-events-none flex min-w-0 flex-row items-center gap-1 truncate text-sm font-medium"
 		>
 			{{ game[0].toUpperCase() + game.slice(1) }}
 			<span v-if="mcVersion">{{ mcVersion }}</span>
diff --git a/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue b/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
index be78c34d39..d3e5ee06e6 100644
--- a/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
@@ -8,7 +8,7 @@
 				v-if="isLink"
 				v-tooltip="'Change server loader'"
 				:to="settingsLinkTarget"
-				class="flex min-w-0 items-center text-sm font-semibold"
+				class="flex min-w-0 items-center font-medium text-sm"
 				:class="settingsLinkTarget ? 'hover:underline' : ''"
 			>
 				<span v-if="loader">
@@ -20,7 +20,7 @@
 					<span class="inline-block h-4 w-12 animate-pulse rounded bg-button-border"></span>
 				</span>
 			</AutoLink>
-			<div v-else class="pointer-events-none min-w-0 text-sm font-semibold">
+			<div v-else class="pointer-events-none min-w-0 font-medium text-sm">
 				<span v-if="loader">
 					{{ loader }}
 					<span v-if="loaderVersion">{{ loaderVersion }}</span>
diff --git a/packages/ui/src/components/servers/labels/ServerPlayerCount.vue b/packages/ui/src/components/servers/labels/ServerPlayerCount.vue
index 6511429091..2ca184e3a0 100644
--- a/packages/ui/src/components/servers/labels/ServerPlayerCount.vue
+++ b/packages/ui/src/components/servers/labels/ServerPlayerCount.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex gap-1">
+	<div class="flex gap-1 text-sm font-medium">
 		<!-- indicator icon -->
 
 		{{ currentPlayers }} / {{ maxPlayers }} Players
diff --git a/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue b/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
index eda6182063..1f9a932977 100644
--- a/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
@@ -11,7 +11,7 @@
 		<div class="flex flex-row items-center gap-1.5">
 			<LinkIcon />
 			<div
-				class="flex min-w-0 text-sm font-semibold"
+				class="flex min-w-0 font-medium text-sm"
 				:class="serverId ? 'hover:underline' : ''"
 				@click="copySubdomain"
 			>
diff --git a/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue b/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
index 6c49678588..199addfb80 100644
--- a/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
@@ -8,8 +8,7 @@
 		<Separator v-if="!noSeparator" />
 
 		<div class="flex gap-1.5">
-			<TimerIcon />
-			<time class="truncate text-sm font-semibold" :aria-label="verboseUptime">
+			<time class="truncate text-sm font-medium" :aria-label="verboseUptime">
 				{{ formattedUptime }}
 			</time>
 		</div>
@@ -17,7 +16,6 @@
 </template>
 
 <script setup lang="ts">
-import { TimerIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
 import Separator from './Separator.vue'
diff --git a/packages/ui/src/components/servers/server-header/ServerManageHeader.vue b/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
index 3801ab53ac..25e0e58117 100644
--- a/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
+++ b/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
@@ -2,7 +2,7 @@
 	<div class="w-full flex flex-col gap-4">
 		<ContentPageHeader :class="props.headerClass">
 			<template #icon>
-				<ServerIcon :image="headerImage" class="size-20 !rounded-2xl" />
+				<ServerIcon :image="headerImage" class="size-16 !rounded-xl" />
 			</template>
 			<template #title>
 				{{ props.server?.name || 'Server' }}
@@ -17,7 +17,6 @@
 				</div>
 				<div v-else class="flex flex-wrap items-center gap-2">
 					<div v-if="props.server?.loader" class="flex items-center gap-2 font-medium capitalize">
-						<LoaderIcon :loader="props.server.loader" class="flex shrink-0 [&&]:size-5" />
 						{{ props.server.loader }} {{ props.server.mc_version }}
 					</div>
 
@@ -32,14 +31,12 @@
 						class="flex cursor-pointer items-center gap-2 font-medium hover:underline"
 						@click="copyServerAddress"
 					>
-						<LinkIcon class="flex size-5 shrink-0" />
 						{{ props.server.net.domain }}.modrinth.gg
 					</div>
 
 					<div v-if="showUptime" class="h-1.5 w-1.5 rounded-full bg-surface-5" />
 
 					<div v-if="showUptime" class="flex items-center gap-2 font-medium">
-						<TimerIcon class="flex size-5 shrink-0" />
 						{{ formattedUptime }}
 					</div>
 
@@ -70,10 +67,10 @@
 
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
-import { LinkIcon, SettingsIcon, TimerIcon } from '@modrinth/assets'
+import { SettingsIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
-import { AutoLink, Avatar, ContentPageHeader, LoaderIcon, ServerIcon } from '#ui/components'
+import { AutoLink, Avatar, ContentPageHeader, ServerIcon } from '#ui/components'
 import { injectNotificationManager } from '#ui/providers'
 
 type ServerProjectSummary = {

From ea40e2da84fb7eda175d63f09d218c54acd88f5b Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 13:17:12 -0600
Subject: [PATCH 39/50] fix: add header icons back

---
 .../components/servers/server-header/ServerManageHeader.vue  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/servers/server-header/ServerManageHeader.vue b/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
index 25e0e58117..7030a5833c 100644
--- a/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
+++ b/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
@@ -17,6 +17,7 @@
 				</div>
 				<div v-else class="flex flex-wrap items-center gap-2">
 					<div v-if="props.server?.loader" class="flex items-center gap-2 font-medium capitalize">
+						<LoaderIcon :loader="props.server.loader" class="flex shrink-0 [&&]:size-5" />
 						{{ props.server.loader }} {{ props.server.mc_version }}
 					</div>
 
@@ -31,12 +32,14 @@
 						class="flex cursor-pointer items-center gap-2 font-medium hover:underline"
 						@click="copyServerAddress"
 					>
+						<LinkIcon class="flex size-5 shrink-0" />
 						{{ props.server.net.domain }}.modrinth.gg
 					</div>
 
 					<div v-if="showUptime" class="h-1.5 w-1.5 rounded-full bg-surface-5" />
 
 					<div v-if="showUptime" class="flex items-center gap-2 font-medium">
+						<TimerIcon class="flex size-5 shrink-0" />
 						{{ formattedUptime }}
 					</div>
 
@@ -67,7 +70,7 @@
 
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
-import { SettingsIcon } from '@modrinth/assets'
+import { LinkIcon, LoaderIcon, SettingsIcon, TimerIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
 import { AutoLink, Avatar, ContentPageHeader, ServerIcon } from '#ui/components'

From 8514a0cb4934ab3ed4dd368c70f6442f00ca26cd Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 13:33:19 -0600
Subject: [PATCH 40/50] feat: update instance settings icon to be consistent

---
 .../ui/instance_settings/GeneralSettings.vue  | 69 ++++++++++---------
 .../edit-server-icon/EditServerIcon.vue       |  4 +-
 2 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
index bcac05a6a7..712d724e97 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
@@ -198,43 +198,44 @@ const messages = defineMessages({
 <template>
 	<ConfirmDeleteInstanceModal ref="deleteConfirmModal" @delete="removeProfile" />
 	<div class="block">
-		<div class="float-end ml-4 relative group">
-			<OverflowMenu
-				v-tooltip="formatMessage(messages.editIcon)"
-				class="bg-transparent border-none appearance-none p-0 m-0 cursor-pointer group-active:scale-95 transition-transform"
-				:options="[
-					{
-						id: 'select',
-						action: () => setIcon(),
-					},
-					{
-						id: 'remove',
-						color: 'danger',
-						action: () => resetIcon(),
-						shown: !!icon,
-					},
-				]"
-			>
-				<Avatar
-					:src="icon ? convertFileSrc(icon) : icon"
-					size="108px"
-					class="!border-4 group-hover:brightness-75"
-					:tint-by="instance.path"
-					no-shadow
-				/>
-				<div class="absolute top-0 right-0 m-2">
+		<div class="float-end ml-10 relative group w-fit">
+			<div class="flex flex-col gap-1">
+				<span class="text-lg font-semibold text-contrast">Icon</span>
+				<OverflowMenu
+					v-tooltip="formatMessage(messages.editIcon)"
+					class="bg-transparent border-none appearance-none p-0 m-0 cursor-pointer group-active:scale-95 transition-transform"
+					:options="[
+						{
+							id: 'select',
+							action: () => setIcon(),
+						},
+						{
+							id: 'remove',
+							color: 'danger',
+							action: () => resetIcon(),
+							shown: !!icon,
+						},
+					]"
+				>
+					<Avatar
+						:src="icon ? convertFileSrc(icon) : icon"
+						size="108px"
+						class="transition-[filter] group-hover:brightness-75"
+						:tint-by="instance.path"
+						no-shadow
+					/>
 					<div
-						class="p-2 m-0 text-primary flex items-center justify-center aspect-square bg-button-bg rounded-full border-button-border border-solid border-[1px] hovering-icon-shadow"
+						class="absolute top-0 h-full w-full flex items-center justify-center opacity-0 transition-all group-hover:opacity-100"
 					>
-						<EditIcon aria-hidden="true" class="h-4 w-4 text-primary" />
+						<EditIcon aria-hidden="true" class="h-10 w-10 text-primary" />
 					</div>
-				</div>
-				<template #select>
-					<UploadIcon />
-					{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
-				</template>
-				<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
-			</OverflowMenu>
+					<template #select>
+						<UploadIcon />
+						{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
+					</template>
+					<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
+				</OverflowMenu>
+			</div>
 		</div>
 		<label for="instance-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
 			{{ formatMessage(messages.name) }}
diff --git a/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue b/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue
index 2df9554383..a973739cbe 100644
--- a/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue
+++ b/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue
@@ -17,13 +17,13 @@
 				]"
 			>
 				<ServerIcon
-					class="size-24 transition-[filter] group-hover:brightness-75"
+					class="size-28 transition-[filter] group-hover:brightness-75"
 					:image="displayIcon"
 				/>
 				<div
 					class="absolute top-0 w-full h-full flex justify-center items-center opacity-0 transition-all group-hover:opacity-100"
 				>
-					<EditIcon aria-hidden="true" class="h-10 w-10" />
+					<EditIcon aria-hidden="true" class="h-10 w-10 text-primary" />
 				</div>
 				<template #upload> <UploadIcon /> Upload icon </template>
 				<template #sync> <TransferIcon /> Sync icon </template>

From 9c9da69ea4b67c56af01f3d0173ce3c8a5b4e2a6 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 13:36:14 -0600
Subject: [PATCH 41/50] fix: icon container

---
 .../ui/instance_settings/GeneralSettings.vue  | 68 ++++++++++---------
 1 file changed, 35 insertions(+), 33 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
index 712d724e97..e06f8019f0 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
@@ -201,40 +201,42 @@ const messages = defineMessages({
 		<div class="float-end ml-10 relative group w-fit">
 			<div class="flex flex-col gap-1">
 				<span class="text-lg font-semibold text-contrast">Icon</span>
-				<OverflowMenu
-					v-tooltip="formatMessage(messages.editIcon)"
-					class="bg-transparent border-none appearance-none p-0 m-0 cursor-pointer group-active:scale-95 transition-transform"
-					:options="[
-						{
-							id: 'select',
-							action: () => setIcon(),
-						},
-						{
-							id: 'remove',
-							color: 'danger',
-							action: () => resetIcon(),
-							shown: !!icon,
-						},
-					]"
-				>
-					<Avatar
-						:src="icon ? convertFileSrc(icon) : icon"
-						size="108px"
-						class="transition-[filter] group-hover:brightness-75"
-						:tint-by="instance.path"
-						no-shadow
-					/>
-					<div
-						class="absolute top-0 h-full w-full flex items-center justify-center opacity-0 transition-all group-hover:opacity-100"
+				<div class="group relative w-fit">
+					<OverflowMenu
+						v-tooltip="formatMessage(messages.editIcon)"
+						class="bg-transparent border-none appearance-none p-0 m-0 cursor-pointer group-active:scale-95 transition-transform"
+						:options="[
+							{
+								id: 'select',
+								action: () => setIcon(),
+							},
+							{
+								id: 'remove',
+								color: 'danger',
+								action: () => resetIcon(),
+								shown: !!icon,
+							},
+						]"
 					>
-						<EditIcon aria-hidden="true" class="h-10 w-10 text-primary" />
-					</div>
-					<template #select>
-						<UploadIcon />
-						{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
-					</template>
-					<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
-				</OverflowMenu>
+						<Avatar
+							:src="icon ? convertFileSrc(icon) : icon"
+							size="108px"
+							class="transition-[filter] group-hover:brightness-75"
+							:tint-by="instance.path"
+							no-shadow
+						/>
+						<div
+							class="absolute top-0 h-full w-full flex items-center justify-center opacity-0 transition-all group-hover:opacity-100"
+						>
+							<EditIcon aria-hidden="true" class="h-10 w-10 text-primary" />
+						</div>
+						<template #select>
+							<UploadIcon />
+							{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
+						</template>
+						<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
+					</OverflowMenu>
+				</div>
 			</div>
 		</div>
 		<label for="instance-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">

From dca24cbb8ceae215c9af7d43dbb5a050c03991e4 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 6 Apr 2026 21:44:12 +0200
Subject: [PATCH 42/50] feat: upload state persistence across tabs

---
 .../composables/server-manage-core-runtime.ts |  59 +++++++-
 .../components/FileOperationAdmonitions.vue   |  79 +---------
 .../src/layouts/shared/files-tab/layout.vue   |   2 -
 .../layouts/wrapped/hosting/manage/files.vue  |  60 +-------
 .../layouts/wrapped/hosting/manage/root.vue   | 138 ++++++++++++++----
 packages/ui/src/providers/server-context.ts   |  11 +-
 packages/ui/src/utils/common-messages.ts      |   2 +-
 7 files changed, 188 insertions(+), 163 deletions(-)

diff --git a/packages/ui/src/composables/server-manage-core-runtime.ts b/packages/ui/src/composables/server-manage-core-runtime.ts
index b3cd27b7ff..9e7c19f6b3 100644
--- a/packages/ui/src/composables/server-manage-core-runtime.ts
+++ b/packages/ui/src/composables/server-manage-core-runtime.ts
@@ -1,7 +1,9 @@
-import { type Archon, clearNodeAuthState, setNodeAuthState } from '@modrinth/api-client'
+import { type Archon, type UploadState, clearNodeAuthState, setNodeAuthState } from '@modrinth/api-client'
 import type { Stats } from '@modrinth/utils'
 import type { ComputedRef, Ref } from 'vue'
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
+
+import type { FileOperation } from '../layouts/shared/files-tab/types'
 
 import { injectModrinthClient, provideModrinthServerContext } from '../providers'
 import type { BusyReason } from '../providers/server-context'
@@ -335,6 +337,51 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 		}
 	}
 
+	const uploadState = ref<UploadState>({
+		isUploading: false,
+		currentFileName: null,
+		currentFileProgress: 0,
+		uploadedBytes: 0,
+		totalBytes: 0,
+		completedFiles: 0,
+		totalFiles: 0,
+	})
+	const cancelUpload = ref<(() => void) | null>(null)
+
+	type QueuedOpWithState = Archon.Websocket.v0.QueuedFilesystemOp & { state: 'queued' }
+	const dismissedOpIds = ref<Set<string>>(new Set())
+
+	const activeOperations = computed<FileOperation[]>(() => [
+		...fsQueuedOps.value.map((x) => ({ ...x, state: 'queued' }) satisfies QueuedOpWithState),
+		...(fsOps.value.filter((op) => !op.id || !dismissedOpIds.value.has(op.id)) as FileOperation[]),
+	])
+
+	async function dismissOperation(opId: string, action: 'dismiss' | 'cancel') {
+		if (action === 'dismiss') {
+			dismissedOpIds.value = new Set([...dismissedOpIds.value, opId])
+		}
+		try {
+			await client.kyros.files_v0.modifyOperation(opId, action)
+		} catch (error) {
+			if (action === 'dismiss') return
+			console.error(`Failed to ${action} operation:`, error)
+		}
+	}
+
+	watch(
+		() => fsOps.value,
+		(newOps) => {
+			for (const op of newOps) {
+				if (op.state === 'done' && op.id && !dismissedOpIds.value.has(op.id)) {
+					setTimeout(() => {
+						dismissOperation(op.id!, 'dismiss')
+					}, 3000)
+				}
+			}
+		},
+		{ deep: true },
+	)
+
 	const refreshFsAuth = async () => {
 		if (!options.serverId.value) {
 			fsAuth.value = null
@@ -364,6 +411,10 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 		fsOps,
 		fsQueuedOps,
 		refreshFsAuth,
+		uploadState,
+		cancelUpload,
+		activeOperations,
+		dismissOperation,
 	})
 
 	setNodeAuthState(() => fsAuth.value, refreshFsAuth)
@@ -374,13 +425,16 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 	}
 
 	return {
+		activeOperations,
 		backupsState,
 		busyReasons,
+		cancelUpload,
 		cleanupCoreRuntime,
 		connectSocket,
 		connectedSocketServerId,
 		cpuData,
 		disconnectSocket,
+		dismissOperation,
 		fsAuth,
 		fsOps,
 		fsQueuedOps,
@@ -393,5 +447,6 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 		serverPowerState,
 		stats,
 		uptimeSeconds,
+		uploadState,
 	}
 }
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileOperationAdmonitions.vue b/packages/ui/src/layouts/shared/files-tab/components/FileOperationAdmonitions.vue
index 8a9c666ef0..c34a7465c4 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileOperationAdmonitions.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileOperationAdmonitions.vue
@@ -1,53 +1,4 @@
 <template>
-	<Transition
-		enter-active-class="transition-all duration-300 ease-out overflow-hidden"
-		enter-from-class="opacity-0 max-h-0"
-		enter-to-class="opacity-100 max-h-40"
-		leave-active-class="transition-all duration-200 ease-in overflow-hidden"
-		leave-from-class="opacity-100 max-h-40"
-		leave-to-class="opacity-0 max-h-0"
-	>
-		<Admonition v-if="ctx.uploadState?.value?.isUploading" type="info" class="mb-4">
-			<template #icon>
-				<UploadIcon class="h-6 w-6 flex-none text-brand-blue" />
-			</template>
-			<template #header>
-				{{
-					ctx.uploadingLabel
-						? ctx.uploadingLabel(
-								ctx.uploadState.value.completedFiles,
-								ctx.uploadState.value.totalFiles,
-							)
-						: formatMessage(messages.uploadingFiles, {
-								completed: ctx.uploadState.value.completedFiles,
-								total: ctx.uploadState.value.totalFiles,
-							})
-				}}
-				<span v-if="ctx.uploadState.value.currentFileName" class="font-normal text-secondary">
-					— {{ ctx.uploadState.value.currentFileName }}
-				</span>
-			</template>
-			<span class="text-secondary">
-				{{
-					formatMessage(messages.uploadProgress, {
-						uploaded: formatBytes(ctx.uploadState.value.uploadedBytes),
-						total: formatBytes(ctx.uploadState.value.totalBytes),
-						percent: Math.round(uploadOverallProgress * 100),
-					})
-				}}
-			</span>
-			<template v-if="ctx.cancelUpload" #top-right-actions>
-				<ButtonStyled type="outlined" color="blue">
-					<button class="!border" @click="ctx.cancelUpload?.()">
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-			</template>
-			<template #progress>
-				<ProgressBar :progress="uploadOverallProgress" :max="1" color="blue" full-width />
-			</template>
-		</Admonition>
-	</Transition>
 	<TransitionGroup
 		name="fs-op"
 		enter-active-class="transition-all duration-300 ease-out overflow-hidden"
@@ -89,13 +40,13 @@
 					— {{ op.current_file?.split('/')?.pop() }}
 				</template>
 			</span>
-			<template v-if="op.id && ctx.dismissOperation" #top-right-actions>
+			<template v-if="op.id" #top-right-actions>
 				<ButtonStyled
 					v-if="op.state !== 'done' && !op.state?.startsWith('fail')"
 					type="outlined"
 					color="blue"
 				>
-					<button class="!border" @click="ctx.dismissOperation?.(op.id!, 'cancel')">
+					<button class="!border" @click="ctx.dismissOperation(op.id!, 'cancel')">
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
 				</ButtonStyled>
@@ -106,7 +57,7 @@
 					hover-color-fill="background"
 					:color="op.state === 'done' ? 'green' : 'red'"
 				>
-					<button @click="ctx.dismissOperation?.(op.id!, 'dismiss')">
+					<button @click="ctx.dismissOperation(op.id!, 'dismiss')">
 						<XIcon />
 					</button>
 				</ButtonStyled>
@@ -125,29 +76,19 @@
 </template>
 
 <script setup lang="ts">
-import { PackageOpenIcon, UploadIcon, XIcon } from '@modrinth/assets'
+import { PackageOpenIcon, XIcon } from '@modrinth/assets'
 import { formatBytes } from '@modrinth/utils'
-import { computed } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import ProgressBar from '#ui/components/base/ProgressBar.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { injectModrinthServerContext } from '#ui/providers'
 import { commonMessages } from '#ui/utils/common-messages'
 
-import { injectFileManager } from '../providers/file-manager'
-
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
-	uploadingFiles: {
-		id: 'files.operations.uploading-files',
-		defaultMessage: 'Uploading files ({completed}/{total})',
-	},
-	uploadProgress: {
-		id: 'files.operations.upload-progress',
-		defaultMessage: '{uploaded} / {total} ({percent}%)',
-	},
 	extracting: {
 		id: 'files.operations.extracting',
 		defaultMessage: 'Extracting {source}',
@@ -166,13 +107,7 @@ const messages = defineMessages({
 	},
 })
 
-const ctx = injectFileManager()
-
-const activeOperations = computed(() => ctx.activeOperations?.value ?? [])
+const ctx = injectModrinthServerContext()
 
-const uploadOverallProgress = computed(() => {
-	const state = ctx.uploadState?.value
-	if (!state || !state.isUploading || state.totalFiles === 0) return 0
-	return Math.min((state.completedFiles + state.currentFileProgress) / state.totalFiles, 1)
-})
+const activeOperations = ctx.activeOperations
 </script>
diff --git a/packages/ui/src/layouts/shared/files-tab/layout.vue b/packages/ui/src/layouts/shared/files-tab/layout.vue
index 99f418204f..7a5f97feed 100644
--- a/packages/ui/src/layouts/shared/files-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/files-tab/layout.vue
@@ -46,7 +46,6 @@
 				<template #header>{{ ctx.busyWarning.value }}</template>
 				{{ formatMessage(messages.busyWarning) }}
 			</Admonition>
-			<FileOperationAdmonitions />
 			<div class="relative flex w-full flex-col">
 				<div class="relative isolate flex w-full flex-col gap-4">
 					<FileNavbar
@@ -235,7 +234,6 @@ import FileEditor from './components/editor/FileEditor.vue'
 import FileContextMenu from './components/FileContextMenu.vue'
 import FileManagerError from './components/FileManagerError.vue'
 import FileNavbar from './components/FileNavbar.vue'
-import FileOperationAdmonitions from './components/FileOperationAdmonitions.vue'
 import FileTableHeader from './components/FileTableHeader.vue'
 import FileTableRow from './components/FileTableRow.vue'
 import FileCreateItemModal from './components/modals/FileCreateItemModal.vue'
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
index eb76a8bba6..b567af4c77 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Archon, Kyros } from '@modrinth/api-client'
+import type { Kyros } from '@modrinth/api-client'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -17,8 +17,6 @@ import { provideFileManager } from '../../../shared/files-tab/providers/file-man
 import type {
 	EditingFile,
 	FileItem,
-	FileOperation,
-	UploadState,
 } from '../../../shared/files-tab/types'
 
 const props = defineProps<{
@@ -28,7 +26,8 @@ const props = defineProps<{
 
 const client = injectModrinthClient()
 const serverContext = injectModrinthServerContext()
-const { serverId, fsOps, fsQueuedOps, busyReasons } = serverContext
+const { serverId, fsOps, fsQueuedOps, busyReasons, uploadState, cancelUpload: cancelUploadRef } =
+	serverContext
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
@@ -350,43 +349,6 @@ async function downloadFile(path: string, fileName: string): Promise<void> {
 	}
 }
 
-// Operations tracking
-type QueuedOpWithState = Archon.Websocket.v0.QueuedFilesystemOp & { state: 'queued' }
-const localQueuedOps = ref<Archon.Websocket.v0.QueuedFilesystemOp[]>([])
-const dismissedOpIds = ref<Set<string>>(new Set())
-
-const activeOps = computed<FileOperation[]>(() => [
-	...localQueuedOps.value.map((x) => ({ ...x, state: 'queued' }) satisfies QueuedOpWithState),
-	...fsQueuedOps.value.map((x) => ({ ...x, state: 'queued' }) satisfies QueuedOpWithState),
-	...(fsOps.value.filter((op) => !op.id || !dismissedOpIds.value.has(op.id)) as FileOperation[]),
-])
-
-async function dismissOperation(opId: string, action: 'dismiss' | 'cancel') {
-	if (action === 'dismiss') {
-		dismissedOpIds.value = new Set([...dismissedOpIds.value, opId])
-	}
-	try {
-		await client.kyros.files_v0.modifyOperation(opId, action)
-	} catch (error) {
-		if (action === 'dismiss') return
-		console.error(`Failed to ${action} operation:`, error)
-	}
-}
-
-watch(
-	() => fsOps.value,
-	(newOps) => {
-		for (const op of newOps) {
-			if (op.state === 'done' && op.id && !dismissedOpIds.value.has(op.id)) {
-				setTimeout(() => {
-					dismissOperation(op.id, 'dismiss')
-				}, 3000)
-			}
-		}
-	},
-	{ deep: true },
-)
-
 watch(
 	() => fsOps.value,
 	() => {
@@ -396,7 +358,6 @@ watch(
 
 onMounted(async () => {
 	initializeFileEdit()
-	localQueuedOps.value = []
 })
 
 // Restart
@@ -404,17 +365,6 @@ async function restartServer() {
 	await client.archon.servers_v0.power(serverId, 'Restart')
 }
 
-// Upload state
-const uploadState = ref<UploadState>({
-	isUploading: false,
-	currentFileName: null,
-	currentFileProgress: 0,
-	uploadedBytes: 0,
-	totalBytes: 0,
-	completedFiles: 0,
-	totalFiles: 0,
-})
-
 let activeUploadCancel: (() => void) | null = null
 
 async function uploadFiles(files: File[]) {
@@ -430,6 +380,7 @@ async function uploadFiles(files: File[]) {
 		completedFiles: 0,
 		totalFiles: files.length,
 	}
+	cancelUploadRef.value = () => activeUploadCancel?.()
 
 	let completedBytes = 0
 
@@ -464,6 +415,7 @@ async function uploadFiles(files: File[]) {
 	}
 
 	activeUploadCancel = null
+	cancelUploadRef.value = null
 	refreshList()
 	uploadState.value = {
 		isUploading: false,
@@ -515,8 +467,6 @@ provideFileManager({
 	busyTooltip,
 	busyWarning,
 	extractFile,
-	activeOperations: activeOps,
-	dismissOperation,
 	prefetchDirectory,
 	prefetchFile,
 	showInstallFromUrl: true,
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index da736c5d46..b57547816e 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -299,6 +299,41 @@
 						</template>
 					</InstallingBanner>
 				</Transition>
+				<Transition
+					enter-active-class="transition-all duration-300 ease-out overflow-hidden"
+					enter-from-class="opacity-0 max-h-0"
+					enter-to-class="opacity-100 max-h-40"
+					leave-active-class="transition-all duration-200 ease-in overflow-hidden"
+					leave-from-class="opacity-100 max-h-40"
+					leave-to-class="opacity-0 max-h-0"
+				>
+					<Admonition v-if="uploadState.isUploading" type="info" class="mb-4">
+						<template #icon>
+							<UploadIcon class="h-6 w-6 flex-none text-brand-blue" />
+						</template>
+						<template #header>
+							Uploading files ({{ uploadState.completedFiles }}/{{ uploadState.totalFiles }})
+							<span v-if="uploadState.currentFileName" class="font-normal text-secondary">
+								— {{ uploadState.currentFileName }}
+							</span>
+						</template>
+						<span class="text-secondary">
+							{{ formatBytes(uploadState.uploadedBytes) }} /
+							{{ formatBytes(uploadState.totalBytes) }} ({{
+								Math.round(uploadOverallProgress * 100)
+							}}%)
+						</span>
+						<template v-if="cancelUpload" #top-right-actions>
+							<ButtonStyled type="outlined" color="blue">
+								<button class="!border" @click="cancelUpload?.()">Cancel</button>
+							</ButtonStyled>
+						</template>
+						<template #progress>
+							<ProgressBar :progress="uploadOverallProgress" :max="1" color="blue" full-width />
+						</template>
+					</Admonition>
+				</Transition>
+				<FileOperationAdmonitions class="mb-4" />
 				<BackupProgressAdmonitions class="mb-4" />
 				<slot :on-reinstall="onReinstall" :on-reinstall-failed="onReinstallFailed" />
 			</div>
@@ -320,6 +355,12 @@
 			:browse-modpacks="handleBrowseModpacks"
 		/>
 	</Suspense>
+	<ConfirmLeaveModal
+		ref="confirmLeaveModal"
+		:header="formatMessage(leaveMessages.uploadInProgress)"
+		:body="formatMessage(leaveMessages.leavePageBody)"
+		admonition-type="critical"
+	/>
 </template>
 
 <script setup lang="ts">
@@ -341,19 +382,25 @@ import {
 	SettingsIcon,
 	TransferIcon,
 	TriangleAlertIcon,
+	UploadIcon,
 } from '@modrinth/assets'
+import { formatBytes } from '@modrinth/utils'
 import type { Stats } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useTimeoutFn } from '@vueuse/core'
 import DOMPurify from 'dompurify'
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
+import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import ErrorInformationCard from '#ui/components/base/ErrorInformationCard.vue'
 import NavTabs from '#ui/components/base/NavTabs.vue'
 import ServerNotice from '#ui/components/base/ServerNotice.vue'
+import Admonition from '#ui/components/base/Admonition.vue'
+import ProgressBar from '#ui/components/base/ProgressBar.vue'
 import BackupProgressAdmonitions from '#ui/components/servers/backups/BackupProgressAdmonitions.vue'
+import ConfirmLeaveModal from '#ui/components/modal/ConfirmLeaveModal.vue'
+import FileOperationAdmonitions from '../../../shared/files-tab/components/FileOperationAdmonitions.vue'
 import { ServerIcon } from '#ui/components/servers/icons'
 import InstallingBanner from '#ui/components/servers/InstallingBanner.vue'
 import MedalServerCountdown from '#ui/components/servers/marketing/MedalServerCountdown.vue'
@@ -439,6 +486,17 @@ const loadingMessages = defineMessages({
 	},
 })
 
+const leaveMessages = defineMessages({
+	uploadInProgress: {
+		id: 'servers.manage.confirm-leave.upload-in-progress',
+		defaultMessage: 'Upload in progress',
+	},
+	leavePageBody: {
+		id: 'servers.manage.confirm-leave.body',
+		defaultMessage: 'A file upload is in progress. Leaving this page will cancel the upload.',
+	},
+})
+
 const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
@@ -457,6 +515,7 @@ const errorLog = ref('')
 const errorLogFile = ref('')
 
 const serverSettingsModal = ref<InstanceType<typeof ServerSettingsModal> | null>(null)
+const confirmLeaveModal = ref<InstanceType<typeof ConfirmLeaveModal>>()
 
 const INTERCOM_APP_ID = 'ykeritl9'
 
@@ -558,6 +617,7 @@ const onStateEvent = (data: Archon.Websocket.v0.WSStateEvent) => {
 
 const {
 	backupsState,
+	cancelUpload,
 	cleanupCoreRuntime,
 	connectSocket,
 	cpuData,
@@ -568,6 +628,7 @@ const {
 	serverPowerState,
 	stats,
 	uptimeSeconds,
+	uploadState,
 } = useServerManageCoreRuntime({
 	serverId: computed(() => props.serverId),
 	worldId,
@@ -582,6 +643,44 @@ const {
 	onStateEvent,
 })
 
+const uploadOverallProgress = computed(() => {
+	const state = uploadState.value
+	if (!state.isUploading || state.totalFiles === 0) return 0
+	return Math.min((state.completedFiles + state.currentFileProgress) / state.totalFiles, 1)
+})
+
+const isUploading = computed(() => uploadState.value.isUploading)
+
+function handleBeforeUnload(e: BeforeUnloadEvent) {
+	if (isUploading.value) {
+		e.preventDefault()
+		return ''
+	}
+}
+
+if (typeof window !== 'undefined') {
+	watch(isUploading, (uploading) => {
+		if (uploading) {
+			window.addEventListener('beforeunload', handleBeforeUnload)
+		} else {
+			window.removeEventListener('beforeunload', handleBeforeUnload)
+		}
+	})
+
+	onBeforeUnmount(() => {
+		window.removeEventListener('beforeunload', handleBeforeUnload)
+	})
+
+	onBeforeRouteLeave(async () => {
+		if (isUploading.value) {
+			const shouldLeave = (await confirmLeaveModal.value?.prompt()) ?? false
+			if (shouldLeave) cancelUpload.value?.()
+			return shouldLeave
+		}
+		return true
+	})
+}
+
 type CachedWsState = {
 	stats: Stats
 	cpuData: number[]
@@ -847,8 +946,6 @@ const handleBackupProgress = (data: Archon.Websocket.v0.WSBackupProgressEvent) =
 	}
 }
 
-const opsQueuedForModification = ref<string[]>([])
-
 const handleFilesystemOps = (data: Archon.Websocket.v0.WSFilesystemOpsEvent) => {
 	const allOps = data.all
 
@@ -860,33 +957,14 @@ const handleFilesystemOps = (data: Archon.Websocket.v0.WSFilesystemOpsEvent) =>
 		(queuedOp) => !allOps.some((x) => x.src === queuedOp.src),
 	)
 
-	const dismissOp = async (opId: string) => {
-		try {
-			await client.kyros.files_v0.modifyOperation(opId, 'dismiss')
-		} catch (error) {
-			console.error('Failed to dismiss operation:', error)
-		}
-	}
-
 	const cancelled = allOps.filter((x) => x.state === 'cancelled')
-	Promise.all(cancelled.map((x) => dismissOp(x.id)))
-
-	const completed = allOps.filter((x) => x.state === 'done')
-	if (completed.length > 0) {
-		setTimeout(
-			async () =>
-				await Promise.all(
-					completed.map((x) => {
-						if (!opsQueuedForModification.value.includes(x.id)) {
-							opsQueuedForModification.value.push(x.id)
-							return dismissOp(x.id)
-						}
-						return Promise.resolve()
-					}),
-				),
-			3000,
-		)
-	}
+	Promise.all(
+		cancelled.map((x) =>
+			client.kyros.files_v0.modifyOperation(x.id, 'dismiss').catch((error) => {
+				console.error('Failed to dismiss cancelled operation:', error)
+			}),
+		),
+	)
 }
 
 const handleNewMod = () => {
diff --git a/packages/ui/src/providers/server-context.ts b/packages/ui/src/providers/server-context.ts
index b9e8d7ff0c..2c6cd84e5e 100644
--- a/packages/ui/src/providers/server-context.ts
+++ b/packages/ui/src/providers/server-context.ts
@@ -1,8 +1,9 @@
-import type { Archon } from '@modrinth/api-client'
+import type { Archon, UploadState } from '@modrinth/api-client'
 import type { Stats } from '@modrinth/utils'
 import type { ComputedRef, Reactive, Ref } from 'vue'
 
 import type { MessageDescriptor } from '#ui/composables/i18n'
+import type { FileOperation } from '#ui/layouts/shared/files-tab/types'
 
 import { createContext } from '.'
 
@@ -55,6 +56,14 @@ export interface ModrinthServerContext {
 	readonly fsOps: Ref<Archon.Websocket.v0.FilesystemOperation[]>
 	readonly fsQueuedOps: Ref<Archon.Websocket.v0.QueuedFilesystemOp[]>
 	refreshFsAuth: () => Promise<void>
+
+	// File upload state
+	readonly uploadState: Ref<UploadState>
+	readonly cancelUpload: Ref<(() => void) | null>
+
+	// File operations (extract, move, etc.)
+	readonly activeOperations: ComputedRef<FileOperation[]>
+	dismissOperation: (opId: string, action: 'dismiss' | 'cancel') => Promise<void>
 }
 
 export const [injectModrinthServerContext, provideModrinthServerContext] =
diff --git a/packages/ui/src/utils/common-messages.ts b/packages/ui/src/utils/common-messages.ts
index fe61d1e783..2d9a0e36e1 100644
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -404,7 +404,7 @@ export const commonMessages = defineMessages({
 	clientOnlyWarning: {
 		id: 'label.client-only-warning',
 		defaultMessage:
-			"This is a client-side mod and may cause issues. We've kept it enabled because some authors mislabel environments, and the loader should resolve the conflict.",
+			'This is a client-side mod and may cause issues when starting your server',
 	},
 	clientRetainedWarning: {
 		id: 'label.client-retained-warning',

From 509b782dae2ab3eae9385f45d75b9a497142272e Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 15:21:08 -0600
Subject: [PATCH 43/50] fix: server labels text wrapping

---
 .../src/components/servers/labels/ServerSubdomainLabel.vue | 2 +-
 .../servers/server-header/ServerManageHeader.vue           | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue b/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
index 1f9a932977..726c9681e1 100644
--- a/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
@@ -11,7 +11,7 @@
 		<div class="flex flex-row items-center gap-1.5">
 			<LinkIcon />
 			<div
-				class="flex min-w-0 font-medium text-sm"
+				class="flex min-w-0 font-medium text-sm text-nowrap"
 				:class="serverId ? 'hover:underline' : ''"
 				@click="copySubdomain"
 			>
diff --git a/packages/ui/src/components/servers/server-header/ServerManageHeader.vue b/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
index 7030a5833c..b543d973e6 100644
--- a/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
+++ b/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
@@ -29,7 +29,7 @@
 					<div
 						v-if="props.server?.net?.domain"
 						v-tooltip="'Copy server address'"
-						class="flex cursor-pointer items-center gap-2 font-medium hover:underline"
+						class="flex cursor-pointer items-center gap-2 font-medium hover:underline text-nowrap"
 						@click="copyServerAddress"
 					>
 						<LinkIcon class="flex size-5 shrink-0" />
@@ -48,7 +48,10 @@
 						class="h-1.5 w-1.5 rounded-full bg-surface-5"
 					/>
 
-					<div v-if="showProject" class="flex items-center gap-1.5 font-medium text-primary">
+					<div
+						v-if="showProject"
+						class="flex items-center gap-1.5 font-medium text-primary text-nowrap"
+					>
 						Linked to
 						<Avatar
 							:src="props.serverProject?.icon_url ?? undefined"

From 88a38dfb5847f172ae3d3da092c28c8e792e31c2 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 15:24:57 -0600
Subject: [PATCH 44/50] fix: use surface-5 border

---
 packages/ui/src/components/servers/ServerListing.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index 819f43ed38..fd49e4ba17 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -6,7 +6,7 @@
 			:class="{ 'cursor-default': isDisabled }"
 		>
 			<div
-				class="flex flex-row items-center overflow-x-hidden rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-4 transition-all duration-150"
+				class="flex flex-row items-center overflow-x-hidden rounded-2xl border-[1px] border-solid border-surface-4 bg-bg-raised p-4 transition-all duration-150"
 				:class="{
 					'!rounded-b-none border-b-0': hasNotice,
 					'bg-surface-2': isDisabled,
@@ -169,7 +169,7 @@
 				>
 					<button
 						v-tooltip="formatMessage(messages.downloadLatestBackupTooltip)"
-						class="!border-surface-5"
+						class="!border-surface-4"
 						@click="onDownloadBackup"
 					>
 						<DownloadIcon />
@@ -178,7 +178,7 @@
 				<ButtonStyled v-if="noticeButtons.copyId" type="outlined">
 					<button
 						v-tooltip="formatMessage(messages.copyCodeToClipboardTooltip)"
-						class="!border-surface-5"
+						class="!border-surface-4"
 						@click="copyToClipboard(server_id)"
 					>
 						<template v-if="copied">
@@ -586,7 +586,7 @@ async function copyToClipboard(text: string) {
 
 <style scoped>
 .server-listing-notice {
-	@apply relative flex w-full rounded-b-2xl border-[1px] border-solid p-4 flex-col gap-4 border-surface-5 bg-bg-raised text-primary;
+	@apply relative flex w-full rounded-b-2xl border-[1px] border-solid p-4 flex-col gap-4 border-surface-4 bg-bg-raised text-primary;
 }
 
 .hoverable:hover:not(:has([data-subdomain-label]:hover)) {

From d4029c1da6fdb38b519ffd061d94e4d8181317eb Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 15:50:57 -0600
Subject: [PATCH 45/50] fix: loading spinner showing with onboarding below

---
 .../ui/src/layouts/wrapped/hosting/manage/root.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index b57547816e..78bdb6e4b5 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -384,23 +384,22 @@ import {
 	TriangleAlertIcon,
 	UploadIcon,
 } from '@modrinth/assets'
-import { formatBytes } from '@modrinth/utils'
 import type { Stats } from '@modrinth/utils'
+import { formatBytes } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useTimeoutFn } from '@vueuse/core'
 import DOMPurify from 'dompurify'
 import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
 import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
 
+import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import ErrorInformationCard from '#ui/components/base/ErrorInformationCard.vue'
 import NavTabs from '#ui/components/base/NavTabs.vue'
-import ServerNotice from '#ui/components/base/ServerNotice.vue'
-import Admonition from '#ui/components/base/Admonition.vue'
 import ProgressBar from '#ui/components/base/ProgressBar.vue'
-import BackupProgressAdmonitions from '#ui/components/servers/backups/BackupProgressAdmonitions.vue'
+import ServerNotice from '#ui/components/base/ServerNotice.vue'
 import ConfirmLeaveModal from '#ui/components/modal/ConfirmLeaveModal.vue'
-import FileOperationAdmonitions from '../../../shared/files-tab/components/FileOperationAdmonitions.vue'
+import BackupProgressAdmonitions from '#ui/components/servers/backups/BackupProgressAdmonitions.vue'
 import { ServerIcon } from '#ui/components/servers/icons'
 import InstallingBanner from '#ui/components/servers/InstallingBanner.vue'
 import MedalServerCountdown from '#ui/components/servers/marketing/MedalServerCountdown.vue'
@@ -425,6 +424,7 @@ import {
 	provideServerSettingsModal,
 } from '#ui/providers'
 import { formatLoaderLabel } from '#ui/utils/loaders'
+import FileOperationAdmonitions from '../../../shared/files-tab/components/FileOperationAdmonitions.vue'
 
 import ServerOnboardingPanelPage from './[id]/onboarding.vue'
 
@@ -726,8 +726,8 @@ const revealState = ref<'pending' | 'revealing' | 'visible'>(
 
 const REVEAL_TOTAL_MS = 2 * 80 + 400
 
-watch(isConnected, (connected) => {
-	if (connected && revealState.value === 'pending') {
+watch([isConnected, serverData], ([connected, data]) => {
+	if ((connected || data) && revealState.value === 'pending') {
 		revealState.value = 'revealing'
 		setTimeout(() => {
 			revealState.value = 'visible'

From c4c8162d53e4d2d380dd2acd3ec4f8ed0195fd9b Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 16:07:19 -0600
Subject: [PATCH 46/50] feat: new server button shows purchase modal in website

---
 packages/ui/src/layouts/wrapped/hosting/manage/index.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
index 9f4def1ff4..ed73bda413 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
@@ -135,11 +135,7 @@
 							wrapper-class="w-full md:w-72"
 						/>
 						<ButtonStyled type="standard" color="brand">
-							<AutoLink v-if="isNuxt" :to="{ path: '/servers', hash: '#plan' }">
-								<PlusIcon />
-								{{ formatMessage(messages.newServerButton) }}
-							</AutoLink>
-							<button v-else @click="openPurchaseModal">
+							<button @click="openPurchaseModal">
 								<PlusIcon />
 								{{ formatMessage(messages.newServerButton) }}
 							</button>

From 53b878b7de46b4d729fb3d28b3f45aa1ab799d40 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 17:13:58 -0600
Subject: [PATCH 47/50] fix: billing page not showing quarterly interval

---
 .../src/pages/settings/billing/index.vue        | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index e2db08495c..5a9cdd8dbc 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -836,6 +836,14 @@ const messages = defineMessages({
 		id: 'settings.billing.interval.year',
 		defaultMessage: 'year',
 	},
+	intervalQuarter: {
+		id: 'settings.billing.interval.quarter',
+		defaultMessage: 'quarter',
+	},
+	intervalQuarterly: {
+		id: 'settings.billing.interval.quarterly.adjective',
+		defaultMessage: 'quarterly',
+	},
 	intervalMonthly: {
 		id: 'settings.billing.interval.monthly',
 		defaultMessage: 'monthly',
@@ -1016,15 +1024,20 @@ const messages = defineMessages({
 })
 
 function getIntervalNounLabel(interval) {
+	console.log(interval)
 	return interval === 'yearly'
 		? formatMessage(messages.intervalYear)
-		: formatMessage(messages.intervalMonth)
+		: interval === 'quarterly'
+			? formatMessage(messages.intervalQuarter)
+			: formatMessage(messages.intervalMonth)
 }
 
 function getIntervalAdjectiveLabel(interval) {
 	return interval === 'yearly'
 		? formatMessage(messages.intervalYearly)
-		: formatMessage(messages.intervalMonthly)
+		: interval === 'quarterly'
+			? formatMessage(messages.intervalQuarterly)
+			: formatMessage(messages.intervalMonthly)
 }
 
 const queryClient = useQueryClient()

From b19a52ff681609c173b5c2990a01505be204b96b Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 17:18:24 -0600
Subject: [PATCH 48/50] fix: server downgrade not showing updated subscription
 notification

---
 .../billing/ServersUpgradeModalWrapper.vue    | 32 +++++++------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue b/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue
index c83ec152b3..1e9522c53e 100644
--- a/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue
+++ b/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue
@@ -185,11 +185,6 @@ function runPingTest(region: Archon.Servers.v1.Region, index = 1) {
 }
 
 const subscription = ref<Labrinth.Billing.Internal.UserSubscription | null>(null)
-// Dry run state
-const dryRunResponse = ref<{
-	requires_payment: boolean
-	required_payment_is_proration: boolean
-} | null>(null)
 const pendingDowngradeBody = ref<Labrinth.Billing.Internal.EditSubscriptionRequest | null>(null)
 const currentPlanFromSubscription = computed<Labrinth.Billing.Internal.Product | undefined>(() => {
 	return subscription.value
@@ -246,20 +241,16 @@ async function initiatePayment(
 				dry: true,
 			})
 
-			if (dry && typeof dry === 'object' && 'payment_intent_id' in dry) {
-				dryRunResponse.value = {
-					requires_payment: !!dry.payment_intent_id,
-					required_payment_is_proration: true,
-				}
-				pendingDowngradeBody.value = transformedBody
-				if (dry.payment_intent_id) {
-					return await finalizeImmediate(transformedBody)
-				} else {
-					return null
-				}
-			} else {
-				// Fallback if dry run not supported
+			const requiresPayment =
+				dry && typeof dry === 'object' && 'requires_payment' in dry && dry.requires_payment
+
+			if (requiresPayment) {
+				// Upgrade: requires payment — finalize to create the payment intent
 				return await finalizeImmediate(transformedBody)
+			} else {
+				// Downgrade or no payment change — defer until user confirms
+				pendingDowngradeBody.value = transformedBody
+				return null
 			}
 		} catch (e) {
 			debug('Dry run failed, attempting immediate patch', e)
@@ -291,8 +282,10 @@ async function finalizeImmediate(body: Labrinth.Billing.Internal.EditSubscriptio
 }
 
 async function finalizeDowngrade() {
-	if (!subscription.value || !pendingDowngradeBody.value) return
 	try {
+		if (!subscription.value || !pendingDowngradeBody.value)
+			throw new Error('Missing subscription or pending downgrade body')
+
 		await finalizeImmediate(pendingDowngradeBody.value)
 		addNotification({
 			title: 'Subscription updated',
@@ -307,7 +300,6 @@ async function finalizeDowngrade() {
 		})
 		throw e
 	} finally {
-		dryRunResponse.value = null
 		pendingDowngradeBody.value = null
 	}
 }

From 79b6c063203f3df315feaa6ab004c7a9eba6e2ce Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 17:33:38 -0600
Subject: [PATCH 49/50] fix: server settings invalidate saved state and remove
 server context provider since its already provided in the page

---
 .../servers/ServerSettingsModal.vue           | 170 ++++--------------
 .../composables/server-manage-core-runtime.ts |   8 +-
 .../shared/server-settings/pages/general.vue  |  19 +-
 3 files changed, 53 insertions(+), 144 deletions(-)

diff --git a/packages/ui/src/components/servers/ServerSettingsModal.vue b/packages/ui/src/components/servers/ServerSettingsModal.vue
index 5e4a8c76c9..326db6e28d 100644
--- a/packages/ui/src/components/servers/ServerSettingsModal.vue
+++ b/packages/ui/src/components/servers/ServerSettingsModal.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type Archon, clearNodeAuthState, setNodeAuthState } from '@modrinth/api-client'
+import type { Archon } from '@modrinth/api-client'
 import { ChevronRightIcon } from '@modrinth/assets'
 import { useQueryClient } from '@tanstack/vue-query'
-import { computed, nextTick, onUnmounted, reactive, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 
 import type { TabbedModalTab } from '#ui/components'
 import { TabbedModal } from '#ui/components'
@@ -17,8 +17,7 @@ import {
 	type ServerSettingsTabId,
 } from '#ui/layouts/shared/server-settings'
 import { provideServerSettings } from '#ui/layouts/shared/server-settings/providers/server-settings'
-import { injectModrinthClient, injectNotificationManager } from '#ui/providers'
-import { type BusyReason, provideModrinthServerContext } from '#ui/providers/server-context'
+import { injectModrinthClient, injectModrinthServerContext, injectNotificationManager } from '#ui/providers'
 import { commonMessages } from '#ui/utils/common-messages'
 
 type ShowOptions = {
@@ -50,59 +49,13 @@ const messages = defineMessages({
 
 const modal = ref<InstanceType<typeof TabbedModal> | null>(null)
 
-const currentServerId = ref('')
-const worldId = ref<string | null>(null)
-const server = ref<Archon.Servers.v0.Server>({} as Archon.Servers.v0.Server)
+const { serverId: currentServerId, worldId, server } = injectModrinthServerContext()
 
 const currentUserId = ref<string | null>(null)
 const currentUserRole = ref<string | null>(null)
 
 const isApp = ref(true)
 
-const isConnected = ref(true)
-const powerState = ref<Archon.Websocket.v0.PowerState>('stopped')
-const isServerRunning = computed(() => powerState.value === 'running')
-const backupsState = reactive(new Map())
-const isSyncingContent = ref(false)
-
-const busyReasons = computed<BusyReason[]>(() => {
-	const reasons: BusyReason[] = []
-	if (server.value?.status === 'installing') {
-		reasons.push({
-			reason: defineMessage({
-				id: 'servers.busy.installing',
-				defaultMessage: 'Server is installing',
-			}),
-		})
-	}
-	if (isSyncingContent.value) {
-		reasons.push({
-			reason: defineMessage({
-				id: 'servers.busy.syncing-content',
-				defaultMessage: 'Content sync in progress',
-			}),
-		})
-	}
-	return reasons
-})
-
-const fsAuth = ref<{ url: string; token: string } | null>(null)
-const fsOps = ref<Archon.Websocket.v0.FilesystemOperation[]>([])
-const fsQueuedOps = ref<Archon.Websocket.v0.QueuedFilesystemOp[]>([])
-
-async function refreshFsAuth() {
-	if (!currentServerId.value) {
-		fsAuth.value = null
-		return
-	}
-	fsAuth.value = await queryClient.fetchQuery({
-		queryKey: ['servers', 'filesystem-auth', currentServerId.value],
-		queryFn: () => client.archon.servers_v0.getFilesystemAuth(currentServerId.value),
-	})
-}
-
-function markBackupCancelled(_backupId: string) {}
-
 const serverSettingsTabComponentMap = {
 	general: ServerSettingsGeneralPage,
 	installation: ServerSettingsInstallationPage,
@@ -119,45 +72,6 @@ provideServerSettings({
 	closeModal: () => hide(),
 })
 
-provideModrinthServerContext({
-	get serverId() {
-		return currentServerId.value
-	},
-	worldId,
-	server,
-	isConnected,
-	powerState,
-	isServerRunning,
-	backupsState,
-	markBackupCancelled,
-	isSyncingContent,
-	busyReasons,
-	fsAuth,
-	fsOps,
-	fsQueuedOps,
-	refreshFsAuth,
-	stats: ref({
-		current: {
-			cpu_percent: 0,
-			ram_usage_bytes: 0,
-			ram_total_bytes: 1,
-			storage_usage_bytes: 0,
-			storage_total_bytes: 0,
-		},
-		past: {
-			cpu_percent: 0,
-			ram_usage_bytes: 0,
-			ram_total_bytes: 1,
-			storage_usage_bytes: 0,
-			storage_total_bytes: 0,
-		},
-		graph: { cpu: [], ram: [] },
-	}),
-	isWsAuthIncorrect: ref(false),
-	powerStateDetails: ref(undefined),
-	uptimeSeconds: ref(0),
-})
-
 const ownerId = computed(() => server.value?.owner_id ?? 'Ghost')
 const isOwner = computed(() => currentUserId.value != null && currentUserId.value === ownerId.value)
 const isAdmin = computed(() => currentUserRole.value === 'admin')
@@ -165,7 +79,7 @@ const isAdmin = computed(() => currentUserRole.value === 'admin')
 const tabs = computed<TabbedModalTab[]>(() =>
 	serverSettingsTabDefinitions.map((tab) => {
 		const ctx = {
-			serverId: currentServerId.value,
+			serverId: currentServerId,
 			ownerId: ownerId.value,
 			serverStatus: server.value?.status,
 			isOwner: isOwner.value,
@@ -206,26 +120,25 @@ async function fetchViewer() {
 
 async function show({ serverId, tabIndex, tabId }: ShowOptions) {
 	try {
-		currentServerId.value = serverId
+		const targetServerId = currentServerId
+		if (serverId !== targetServerId) {
+			console.warn(
+				`[ServerSettingsModal] Ignoring mismatched serverId "${serverId}" in favor of context "${targetServerId}"`,
+			)
+		}
 
 		const cachedServer = queryClient.getQueryData<Archon.Servers.v0.Server>([
 			'servers',
 			'detail',
-			serverId,
+			targetServerId,
 		])
 		const cachedFull = queryClient.getQueryData<Archon.Servers.v1.ServerFull>([
 			'servers',
 			'v1',
 			'detail',
-			serverId,
+			targetServerId,
 		])
 
-		if (cachedServer) server.value = cachedServer
-		if (cachedFull) {
-			const activeWorld = cachedFull.worlds.find((world) => world.is_active)
-			worldId.value = activeWorld?.id ?? cachedFull.worlds[0]?.id ?? null
-		}
-
 		modal.value?.show()
 		const visibleTabs = tabs.value.filter((tab) => tab.shown !== false)
 		let requestedTab = tabIndex ?? 0
@@ -243,48 +156,42 @@ async function show({ serverId, tabIndex, tabId }: ShowOptions) {
 
 		const fetchPromises: Promise<unknown>[] = [fetchViewer()]
 
-		if (!cachedServer || !cachedFull) {
+		if (!cachedServer) {
 			fetchPromises.push(
-				queryClient
-					.fetchQuery({
-						queryKey: ['servers', 'detail', serverId],
-						queryFn: () => client.archon.servers_v0.get(serverId),
-					})
-					.then((data) => {
-						server.value = data
-					}),
-				queryClient
-					.fetchQuery({
-						queryKey: ['servers', 'v1', 'detail', serverId],
-						queryFn: () => client.archon.servers_v1.get(serverId),
-					})
-					.then((data) => {
-						const activeWorld = data.worlds.find((world) => world.is_active)
-						worldId.value = activeWorld?.id ?? data.worlds[0]?.id ?? null
-					}),
+				queryClient.fetchQuery({
+					queryKey: ['servers', 'detail', targetServerId],
+					queryFn: () => client.archon.servers_v0.get(targetServerId),
+				}),
 			)
 		}
 
-		await Promise.all(fetchPromises)
+		if (!cachedFull) {
+			fetchPromises.push(
+				queryClient.fetchQuery({
+					queryKey: ['servers', 'v1', 'detail', targetServerId],
+					queryFn: () => client.archon.servers_v1.get(targetServerId),
+				}),
+			)
+		}
 
-		setNodeAuthState(() => fsAuth.value, refreshFsAuth)
-		refreshFsAuth().catch(() => {})
+		await Promise.all(fetchPromises)
 
 		if (worldId.value) {
 			queryClient.prefetchQuery({
-				queryKey: ['servers', 'properties', 'v1', serverId, worldId.value],
-				queryFn: () => client.archon.properties_v1.getProperties(serverId, worldId.value!),
+				queryKey: ['servers', 'properties', 'v1', targetServerId, worldId.value],
+				queryFn: () =>
+					client.archon.properties_v1.getProperties(targetServerId, worldId.value!),
 			})
 			queryClient.prefetchQuery({
-				queryKey: ['content', 'list', 'v1', serverId],
+				queryKey: ['content', 'list', 'v1', targetServerId],
 				queryFn: () =>
-					client.archon.content_v1.getAddons(serverId, worldId.value!, {
+					client.archon.content_v1.getAddons(targetServerId, worldId.value!, {
 						from_modpack: false,
 					}),
 			})
 			queryClient.prefetchQuery({
-				queryKey: ['servers', 'startup', 'v1', serverId, worldId.value],
-				queryFn: () => client.archon.options_v1.getStartup(serverId, worldId.value!),
+				queryKey: ['servers', 'startup', 'v1', targetServerId, worldId.value],
+				queryFn: () => client.archon.options_v1.getStartup(targetServerId, worldId.value!),
 			})
 		}
 	} catch (error) {
@@ -300,14 +207,6 @@ function hide() {
 	modal.value?.hide()
 }
 
-function onHide() {
-	clearNodeAuthState()
-}
-
-onUnmounted(() => {
-	clearNodeAuthState()
-})
-
 defineExpose({ show, hide })
 </script>
 
@@ -315,7 +214,6 @@ defineExpose({ show, hide })
 	<TabbedModal
 		ref="modal"
 		:tabs="tabs"
-		:on-hide="onHide"
 		:max-width="'min(980px, calc(95vw - 10rem))'"
 		:width="'min(980px, calc(95vw - 10rem))'"
 	>
diff --git a/packages/ui/src/composables/server-manage-core-runtime.ts b/packages/ui/src/composables/server-manage-core-runtime.ts
index 9e7c19f6b3..c6b5a04257 100644
--- a/packages/ui/src/composables/server-manage-core-runtime.ts
+++ b/packages/ui/src/composables/server-manage-core-runtime.ts
@@ -1,10 +1,14 @@
-import { type Archon, type UploadState, clearNodeAuthState, setNodeAuthState } from '@modrinth/api-client'
+import {
+	type Archon,
+	clearNodeAuthState,
+	setNodeAuthState,
+	type UploadState,
+} from '@modrinth/api-client'
 import type { Stats } from '@modrinth/utils'
 import type { ComputedRef, Ref } from 'vue'
 import { computed, reactive, ref, watch } from 'vue'
 
 import type { FileOperation } from '../layouts/shared/files-tab/types'
-
 import { injectModrinthClient, provideModrinthServerContext } from '../providers'
 import type { BusyReason } from '../providers/server-context'
 import { defineMessage } from './i18n'
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/general.vue b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
index c0eb8e9112..d79f65f627 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/general.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
@@ -142,12 +142,18 @@ import {
 
 const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
-const { server, serverId, busyReasons } = injectModrinthServerContext()
+const { server: data, serverId, busyReasons } = injectModrinthServerContext()
 const queryClient = useQueryClient()
 
-const data = server
 const serverName = ref(data.value?.name)
 const serverSubdomain = ref(data.value?.net?.domain ?? '')
+
+watch(data, (newData) => {
+	if (newData) {
+		serverName.value = newData.name
+		serverSubdomain.value = newData.net?.domain ?? ''
+	}
+})
 const isValidLengthSubdomain = computed(() => serverSubdomain.value.length >= 5)
 const isValidCharsSubdomain = computed(
 	() => !serverSubdomain.value || /^[a-zA-Z0-9-]+$/.test(serverSubdomain.value),
@@ -157,8 +163,8 @@ const isValidSubdomain = computed(() => isValidLengthSubdomain.value && isValidC
 const isUpdating = ref(false)
 const isValidServerName = computed(() => (serverName.value?.length ?? 0) > 0)
 
-watch(serverName, (oldValue) => {
-	if (!isValidServerName.value) {
+watch(serverName, (newValue, oldValue) => {
+	if (!(newValue?.length ?? 0)) {
 		serverName.value = oldValue
 	}
 })
@@ -260,8 +266,9 @@ const saveGeneral = async () => {
 		// Save preferences to localStorage
 		userPreferences.value = { ...newUserPreferences.value }
 
-		await new Promise((resolve) => setTimeout(resolve, 500))
-		await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
+		await queryClient.invalidateQueries({
+			queryKey: ['servers', 'detail', serverId],
+		})
 		addNotification({
 			type: 'success',
 			title: 'Server settings updated',

From 68a7eb4a52cfb69406b89dc064b0fc076ca47031 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 6 Apr 2026 17:36:34 -0600
Subject: [PATCH 50/50] pnpm prepr

---
 apps/frontend/src/locales/en-US/index.json         |  6 ++++++
 .../src/components/servers/ServerSettingsModal.vue |  9 ++++++---
 .../shared/server-settings/pages/network.vue       |  2 +-
 .../src/layouts/wrapped/hosting/manage/files.vue   |  8 ++------
 .../src/layouts/wrapped/hosting/manage/index.vue   |  4 +---
 .../ui/src/layouts/wrapped/hosting/manage/root.vue |  2 +-
 packages/ui/src/locales/en-US/index.json           | 14 +++++++-------
 packages/ui/src/utils/common-messages.ts           |  3 +--
 8 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index b2b238d30c..e9053abac1 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -3155,6 +3155,12 @@
   "settings.billing.interval.monthly": {
     "message": "monthly"
   },
+  "settings.billing.interval.quarter": {
+    "message": "quarter"
+  },
+  "settings.billing.interval.quarterly.adjective": {
+    "message": "quarterly"
+  },
   "settings.billing.interval.year": {
     "message": "year"
   },
diff --git a/packages/ui/src/components/servers/ServerSettingsModal.vue b/packages/ui/src/components/servers/ServerSettingsModal.vue
index 326db6e28d..cda9222a09 100644
--- a/packages/ui/src/components/servers/ServerSettingsModal.vue
+++ b/packages/ui/src/components/servers/ServerSettingsModal.vue
@@ -17,7 +17,11 @@ import {
 	type ServerSettingsTabId,
 } from '#ui/layouts/shared/server-settings'
 import { provideServerSettings } from '#ui/layouts/shared/server-settings/providers/server-settings'
-import { injectModrinthClient, injectModrinthServerContext, injectNotificationManager } from '#ui/providers'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+} from '#ui/providers'
 import { commonMessages } from '#ui/utils/common-messages'
 
 type ShowOptions = {
@@ -179,8 +183,7 @@ async function show({ serverId, tabIndex, tabId }: ShowOptions) {
 		if (worldId.value) {
 			queryClient.prefetchQuery({
 				queryKey: ['servers', 'properties', 'v1', targetServerId, worldId.value],
-				queryFn: () =>
-					client.archon.properties_v1.getProperties(targetServerId, worldId.value!),
+				queryFn: () => client.archon.properties_v1.getProperties(targetServerId, worldId.value!),
 			})
 			queryClient.prefetchQuery({
 				queryKey: ['content', 'list', 'v1', targetServerId],
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/network.vue b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
index d137033723..664c46af71 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/network.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
@@ -73,8 +73,8 @@
 
 							<ButtonStyled color="brand">
 								<button
-									:disabled="!createAllocationName || creatingAllocation"
 									v-tooltip="!createAllocationName ? 'Enter a name to create an allocation' : ''"
+									:disabled="!createAllocationName || creatingAllocation"
 									@click="addNewAllocation"
 								>
 									<PlusIcon />
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
index b567af4c77..7079bad10a 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
@@ -14,10 +14,7 @@ import { commonMessages } from '#ui/utils/common-messages'
 
 import FilePageLayout from '../../../shared/files-tab/layout.vue'
 import { provideFileManager } from '../../../shared/files-tab/providers/file-manager'
-import type {
-	EditingFile,
-	FileItem,
-} from '../../../shared/files-tab/types'
+import type { EditingFile, FileItem } from '../../../shared/files-tab/types'
 
 const props = defineProps<{
 	showDebugInfo?: boolean
@@ -26,8 +23,7 @@ const props = defineProps<{
 
 const client = injectModrinthClient()
 const serverContext = injectModrinthServerContext()
-const { serverId, fsOps, fsQueuedOps, busyReasons, uploadState, cancelUpload: cancelUploadRef } =
-	serverContext
+const { serverId, fsOps, busyReasons, uploadState, cancelUpload: cancelUploadRef } = serverContext
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
index ed73bda413..eb23d58842 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
@@ -192,7 +192,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Archon, type Labrinth, NuxtModrinthClient } from '@modrinth/api-client'
+import type { Archon, Labrinth } from '@modrinth/api-client'
 import { HammerIcon, LoaderCircleIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
 import {
 	AutoLink,
@@ -320,8 +320,6 @@ const messages = defineMessages({
 	},
 })
 
-const isNuxt = computed(() => client instanceof NuxtModrinthClient)
-
 const isPollingForNewServers = ref(false)
 const pollingState = ref({
 	enabled: false,
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index 78bdb6e4b5..950c30fbe0 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -424,8 +424,8 @@ import {
 	provideServerSettingsModal,
 } from '#ui/providers'
 import { formatLoaderLabel } from '#ui/utils/loaders'
-import FileOperationAdmonitions from '../../../shared/files-tab/components/FileOperationAdmonitions.vue'
 
+import FileOperationAdmonitions from '../../../shared/files-tab/components/FileOperationAdmonitions.vue'
 import ServerOnboardingPanelPage from './[id]/onboarding.vue'
 
 interface Tab {
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index a916030387..8e4d1b967e 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -686,12 +686,6 @@
   "files.operations.modpack-from-url": {
     "defaultMessage": "modpack from URL"
   },
-  "files.operations.upload-progress": {
-    "defaultMessage": "{uploaded} / {total} ({percent}%)"
-  },
-  "files.operations.uploading-files": {
-    "defaultMessage": "Uploading files ({completed}/{total})"
-  },
   "files.rename-modal.header": {
     "defaultMessage": "Rename {name}"
   },
@@ -1332,7 +1326,7 @@
     "defaultMessage": "This mod depends on a client-side mod and may cause issues when starting your server"
   },
   "label.client-only-warning": {
-    "defaultMessage": "This is a client-side mod and may cause issues. We've kept it enabled because some authors mislabel environments, and the loader should resolve the conflict."
+    "defaultMessage": "This is a client-side mod and may cause issues when starting your server"
   },
   "label.client-retained-warning": {
     "defaultMessage": "This is a client-side mod that was installed as a dependency and may cause issues when starting your server"
@@ -2819,6 +2813,12 @@
   "servers.manage.checking-for-new-servers": {
     "defaultMessage": "Checking for new servers..."
   },
+  "servers.manage.confirm-leave.body": {
+    "defaultMessage": "A file upload is in progress. Leaving this page will cancel the upload."
+  },
+  "servers.manage.confirm-leave.upload-in-progress": {
+    "defaultMessage": "Upload in progress"
+  },
   "servers.manage.contact-support-button": {
     "defaultMessage": "Contact Modrinth Support"
   },
diff --git a/packages/ui/src/utils/common-messages.ts b/packages/ui/src/utils/common-messages.ts
index 2d9a0e36e1..ee476c3a48 100644
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -403,8 +403,7 @@ export const commonMessages = defineMessages({
 	},
 	clientOnlyWarning: {
 		id: 'label.client-only-warning',
-		defaultMessage:
-			'This is a client-side mod and may cause issues when starting your server',
+		defaultMessage: 'This is a client-side mod and may cause issues when starting your server',
 	},
 	clientRetainedWarning: {
 		id: 'label.client-retained-warning',