feat: continued post qa for servers in app (#5818)

* fix: intercom in app

* feat: Logs.vue dynamic console resizing with window + padding problem

* fix: search highlight with decorator + change to be better

* fix: qa

* fix: allow paper+purpur into app csp

* fix: lint

Author: IMB11

apps/app-frontend/src/App.vue

@@ -60,6 +60,7 @@ import { useQuery } from '@tanstack/vue-query'
 import { getVersion } from '@tauri-apps/api/app'
 import { invoke } from '@tauri-apps/api/core'
 import { getCurrentWindow } from '@tauri-apps/api/window'
+import { fetch as tauriFetch } from '@tauri-apps/plugin-http'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { type } from '@tauri-apps/plugin-os'
 import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
@@ -446,7 +447,7 @@ router.afterEach((to, from, failure) => {
 		failed: failure,
 	})
 	setTimeout(() => {
-		if (!suspensePending) {
+		if (!suspensePending && stateInitialized.value) {
 			loading.stopLoading()
 		}
 	}, 100)
@@ -504,9 +505,27 @@ setupAuthProvider(credentials, async (_redirectPath) => {
 	await signIn()
 })
 
+async function validateSession(sessionToken) {
+	try {
+		const response = await tauriFetch(`${config.labrinthBaseUrl}/v2/user`, {
+			method: 'GET',
+			headers: { Authorization: sessionToken },
+		})
+		if (response.status === 401) return false
+		return true
+	} catch {
+		return true
+	}
+}
+
 async function fetchCredentials() {
 	const creds = await getCreds().catch(handleError)
 	if (creds && creds.user_id) {
+		if (creds.session && !(await validateSession(creds.session))) {
+			await logout().catch(handleError)
+			credentials.value = null
+			return
+		}
 		creds.user = await get_user(creds.user_id, 'bypass').catch(handleError)
 	}
 	credentials.value = creds ?? null

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

@@ -100,24 +100,38 @@ const loadingProgress = ref(0)
 const hidden = ref(false)
 const message = ref()
 
+// const MIN_DISPLAY_MS = 1000
+// const mountedAt = Date.now()
+
 const loading = useLoading()
 
-watch(loading, (newValue) => {
-	if (!newValue.barEnabled) {
-		if (loading.loading) {
-			loadingProgress.value = 0
-			fakeLoadingIncrease()
-		} else {
-			loadingProgress.value = 100
-			doneLoading.value = true
-
-			setTimeout(() => {
-				hidden.value = true
-				loading.setEnabled(true)
-			}, 50)
+watch(
+	loading,
+	(newValue) => {
+		if (!newValue.barEnabled) {
+			if (loading.loading) {
+				loadingProgress.value = 0
+				fakeLoadingIncrease()
+			} else {
+				// const elapsed = Date.now() - mountedAt
+				// const delay = Math.max(0, MIN_DISPLAY_MS - elapsed)
+
+				// setTimeout(() => {
+				// 	if (loading.loading) return
+
+				loadingProgress.value = 100
+				doneLoading.value = true
+
+				setTimeout(() => {
+					hidden.value = true
+					loading.setEnabled(true)
+				}, 50)
+				// }, delay)
+			}
 		}
-	}
-})
+	},
+	{ immediate: true },
+)
 
 function fakeLoadingIncrease() {
 	if (loadingProgress.value < 95) {

apps/app-frontend/src/pages/hosting/manage/Index.vue

@@ -1,10 +1,12 @@
 <template>
-	<div class="h-full w-full py-6">
+	<div class="h-full w-full pt-6">
 		<ServersManageRootLayout
 			:server-id="serverId"
 			:reload-page="() => router.go(0)"
 			:resolve-viewer="resolveViewer"
 			:show-copy-id-action="themeStore.devMode"
+			:auth-user="authUser"
+			:fetch-intercom-token="fetchIntercomToken"
 			:navigate-to-billing="() => openUrl('https://modrinth.com/settings/billing')"
 			:navigate-to-servers="() => router.push('/hosting/manage')"
 			:browse-modpacks="
@@ -48,10 +50,12 @@
 import type { Archon, Labrinth } from '@modrinth/api-client'
 import { injectAuth, LoadingIndicator, ServersManageRootLayout } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
+import { fetch as tauriFetch } from '@tauri-apps/plugin-http'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+import { config } from '@/config'
 import { get_user } from '@/helpers/cache'
 import { get as getCreds } from '@/helpers/mr_auth'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
@@ -97,6 +101,37 @@ watch(
 	},
 )
 
+const authUser = computed(() => {
+	const user = auth.user.value
+	if (!user?.id) return undefined
+	return {
+		id: user.id,
+		username: user.username,
+		email: user.email ?? '',
+		created: user.created,
+	}
+})
+
+async function fetchIntercomToken(): Promise<{ token: string }> {
+	const credentials = await getCreds()
+	if (!credentials?.session) {
+		throw new Error('Not authenticated')
+	}
+	const response = await tauriFetch(
+		`${config.siteUrl}/api/intercom/messenger-jwt?server_id=${encodeURIComponent(serverId.value)}`,
+		{
+			method: 'GET',
+			headers: {
+				Authorization: `Bearer ${credentials.session}`,
+			},
+		},
+	)
+	if (!response.ok) {
+		throw new Error(`Failed to fetch Intercom token: ${response.status}`)
+	}
+	return (await response.json()) as { token: string }
+}
+
 async function resolveViewer(): Promise<{ userId: string | null; userRole: string | null }> {
 	const credentials = await getCreds().catch(() => null)
 	if (!credentials?.user_id) {

apps/app-frontend/src/pages/instance/Index.vue

@@ -1,6 +1,9 @@
 <template>
-	<div v-if="instance">
-		<div class="p-6 pr-2 pb-4" @contextmenu.prevent.stop="(event) => handleRightClick(event)">
+	<div v-if="instance" class="flex h-full flex-col">
+		<div
+			class="shrink-0 p-6 pr-2 pb-4"
+			@contextmenu.prevent.stop="(event) => handleRightClick(event)"
+		>
 			<ExportModal ref="exportModal" :instance="instance" />
 			<InstanceSettingsModal
 				:key="instance.path"
@@ -205,10 +208,10 @@
 				</template>
 			</ContentPageHeader>
 		</div>
-		<div class="px-6">
+		<div class="shrink-0 px-6">
 			<NavTabs :links="tabs" />
 		</div>
-		<div v-if="!!instance" class="p-6 pt-4">
+		<div v-if="!!instance" class="min-h-0 flex-1 overflow-y-auto p-6 pt-4">
 			<RouterView
 				v-if="route.path.startsWith('/instance')"
 				v-slot="{ Component }"

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://*.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 wss://*.ts.net '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 wss://*.ts.net https://fill.papermc.io https://api.purpurmc.org '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'",

apps/frontend/src/server/routes/api/intercom/messenger-jwt.get.ts

@@ -57,7 +57,11 @@ export default defineEventHandler(async (event): Promise<IntercomTokenResponse>
 		})
 	}
 
-	const authToken = getCookie(event, 'auth-token')
+	const authHeader = getRequestHeader(event, 'authorization')
+	const bearerToken = authHeader?.toLowerCase().startsWith('bearer ')
+		? authHeader.slice(7).trim()
+		: undefined
+	const authToken = bearerToken || getCookie(event, 'auth-token')
 	if (!authToken) {
 		throw createError({
 			statusCode: 401,

packages/ui/src/components/base/BaseTerminal.vue

@@ -1,8 +1,6 @@
 <template>
 	<div
-		class="flex w-full flex-col bg-surface-2 overflow-hidden rounded-[20px] border border-solid border-surface-4"
-		:style="!fullscreen && componentHeight ? { minHeight: componentHeight + 'px' } : {}"
-		:class="{ 'h-full': fullscreen }"
+		class="flex h-full w-full flex-col bg-surface-2 overflow-hidden rounded-[20px] border border-solid border-surface-4"
 	>
 		<div ref="wrapperRef" class="relative min-h-0 flex-1 overflow-hidden pb-2 pt-1">
 			<div ref="containerRef" class="size-full" />
@@ -93,7 +91,6 @@ const containerRef = ref<HTMLElement | null>(null)
 const wrapperRef = ref<HTMLElement | null>(null)
 const inputRef = ref<HTMLElement | null>(null)
 const commandInput = ref('')
-const componentHeight = ref(0)
 
 const snappedHeight = ref<number | null>(null)
 
@@ -114,14 +111,10 @@ const {
 	scrollback: props.scrollback,
 	onReady: (term) => {
 		nextTick(() => {
-			updateComponentHeight()
 			snapToRows()
 		})
 		emit('ready', term)
 	},
-	onResize: () => {
-		updateComponentHeight()
-	},
 })
 
 function writeEmptyState() {
@@ -175,12 +168,21 @@ function handleWindowResize() {
 	}, 50)
 }
 
+function handleDocumentPointerDown(event: PointerEvent) {
+	if (!terminal.value?.hasSelection()) return
+	const target = event.target as Node | null
+	if (target && containerRef.value?.contains(target)) return
+	terminal.value.clearSelection()
+}
+
 onMounted(() => {
 	window.addEventListener('resize', handleWindowResize)
+	document.addEventListener('pointerdown', handleDocumentPointerDown)
 })
 
 onBeforeUnmount(() => {
 	window.removeEventListener('resize', handleWindowResize)
+	document.removeEventListener('pointerdown', handleDocumentPointerDown)
 	if (resizeDebounce) clearTimeout(resizeDebounce)
 })
 
@@ -199,20 +201,10 @@ watch(
 			})
 		} else {
 			snappedHeight.value = null
-			componentHeight.value = 0
 		}
 	},
 )
 
-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 + getWrapperMargins() + inputH + borderW
-}
-
 const submitCommand = () => {
 	const cmd = commandInput.value.trim()
 	if (!cmd) return

packages/ui/src/composables/server-manage-core-runtime.ts

@@ -63,6 +63,9 @@ const appendGraphData = (dataArray: number[], newValue: number): number[] => {
 	return updated
 }
 
+const STALE_STATS_THRESHOLD_MS = 5000
+const STALE_STATS_PUSH_INTERVAL_MS = 1000
+
 const mapPowerStateFromStateEvent = (
 	data: Archon.Websocket.v0.WSStateEvent,
 ): Archon.Websocket.v0.PowerState => {
@@ -101,6 +104,8 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 	const ramData = ref<number[]>([])
 
 	let uptimeIntervalId: ReturnType<typeof setInterval> | null = null
+	let staleStatsTimeoutId: ReturnType<typeof setTimeout> | null = null
+	let staleStatsIntervalId: ReturnType<typeof setInterval> | null = null
 
 	const markBackupCancelled =
 		options.markBackupCancelled ??
@@ -183,6 +188,43 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 		}
 	}
 
+	const clearStaleStatsTimers = () => {
+		if (staleStatsTimeoutId) {
+			clearTimeout(staleStatsTimeoutId)
+			staleStatsTimeoutId = null
+		}
+		if (staleStatsIntervalId) {
+			clearInterval(staleStatsIntervalId)
+			staleStatsIntervalId = null
+		}
+	}
+
+	const pushZeroStats = () => {
+		if (!shouldProcessEvent()) return
+		cpuData.value = appendGraphData(cpuData.value, 0)
+		ramData.value = appendGraphData(ramData.value, 0)
+		stats.value = {
+			current: {
+				...stats.value.current,
+				cpu_percent: 0,
+				ram_usage_bytes: 0,
+			},
+			past: { ...stats.value.current },
+			graph: {
+				cpu: cpuData.value,
+				ram: ramData.value,
+			},
+		}
+	}
+
+	const armStaleStatsWatchdog = () => {
+		clearStaleStatsTimers()
+		staleStatsTimeoutId = setTimeout(() => {
+			pushZeroStats()
+			staleStatsIntervalId = setInterval(pushZeroStats, STALE_STATS_PUSH_INTERVAL_MS)
+		}, STALE_STATS_THRESHOLD_MS)
+	}
+
 	const updatePowerState = (
 		state: Archon.Websocket.v0.PowerState,
 		details?: { oom_killed?: boolean; exit_code?: number },
@@ -209,6 +251,7 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 	}
 
 	const handleStats = (data: Archon.Websocket.v0.WSStatsEvent) => {
+		armStaleStatsWatchdog()
 		updateStats({
 			cpu_percent: data.cpu_percent,
 			ram_usage_bytes: data.ram_usage_bytes,
@@ -280,6 +323,7 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 		}
 
 		stopUptimeTicker()
+		clearStaleStatsTimers()
 		connectedSocketServerId.value = null
 		isConnected.value = false
 		isWsAuthIncorrect.value = false

packages/ui/src/composables/terminal.ts

@@ -193,6 +193,17 @@ export function useTerminal(options: UseTerminalOptions): UseTerminalReturn {
 		term.options.disableStdin = true
 		term.write('\x1b[?25l')
 
+		// term.attachCustomKeyEventHandler((e) => {
+		// 	if (e.type !== 'keydown') return true
+		// 	const mod = e.ctrlKey || e.metaKey
+		// 	if (!mod) return true
+		// 	const key = e.key.toLowerCase()
+		// 	if (key === 'c' || key === 'insert' || key === 'a') {
+		// 		return false
+		// 	}
+		// 	return true
+		// })
+
 		wheelHandler = (e: WheelEvent) => {
 			e.preventDefault()
 		}