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

packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue

@@ -31,7 +31,12 @@
 					</span>
 				</div>
 				<span class="stat-drop-shadow text-4xl font-bold text-contrast">
-					{{ metric.value }}
+					{{ metric.value
+					}}<span
+						v-if="metric.secondary"
+						class="ml-1 text-sm font-normal stat-drop-shadow text-secondary"
+						>{{ metric.secondary }}</span
+					>
 				</span>
 				<!-- <div
 					class="absolute -left-8 -top-4 -z-10 h-28 w-56 rounded-full bg-surface-3 opacity-50 blur-lg"
@@ -88,6 +93,13 @@ const isRamAsBytesForcedByFeatureFlag = computed(
 	() => featureFlags?.serverRamAsBytesAlwaysOn?.value ?? false,
 )
 
+const showRamAsBytes = computed(
+	() =>
+		props.showMemoryAsBytes ||
+		isRamAsBytesForcedByFeatureFlag.value ||
+		userPreferences.value.ramAsNumber,
+)
+
 const stats = shallowRef(
 	props.data?.current || {
 		cpu_percent: 0,
@@ -174,6 +186,7 @@ const metrics = computed(() => {
 	const storageMetric = {
 		title: 'Storage',
 		value: props.loading ? '0 B' : formatBytes(stats.value.storage_usage_bytes ?? 0),
+		secondary: null as string | null,
 		icon: FolderOpenIcon,
 		showGraph: false,
 		chartOptions: null as ReturnType<typeof buildChartOptions> | null,
@@ -186,6 +199,7 @@ const metrics = computed(() => {
 			{
 				title: 'CPU',
 				value: '0.00%',
+				secondary: null as string | null,
 				icon: CpuIcon,
 				showGraph: true,
 				chartOptions: cpuChartOptions.value,
@@ -195,6 +209,7 @@ const metrics = computed(() => {
 			{
 				title: 'Memory',
 				value: '0.00%',
+				secondary: null as string | null,
 				icon: DatabaseIcon,
 				showGraph: true,
 				chartOptions: ramChartOptions.value,
@@ -209,6 +224,7 @@ const metrics = computed(() => {
 		{
 			title: 'CPU',
 			value: `${cpuPercent.value.toFixed(2)}%`,
+			secondary: null as string | null,
 			icon: CpuIcon,
 			showGraph: true,
 			chartOptions: cpuChartOptions.value,
@@ -217,12 +233,12 @@ const metrics = computed(() => {
 		},
 		{
 			title: 'Memory',
-			value:
-				props.showMemoryAsBytes ||
-				isRamAsBytesForcedByFeatureFlag.value ||
-				userPreferences.value.ramAsNumber
-					? formatBytes(stats.value.ram_usage_bytes ?? 0)
-					: `${ramPercent.value.toFixed(2)}%`,
+			value: showRamAsBytes.value
+				? formatBytes(stats.value.ram_usage_bytes ?? 0)
+				: `${ramPercent.value.toFixed(2)}%`,
+			secondary: showRamAsBytes.value
+				? `/ ${formatBytes(stats.value.ram_total_bytes ?? 0)}`
+				: (null as string | null),
 			icon: DatabaseIcon,
 			showGraph: true,
 			chartOptions: ramChartOptions.value,

packages/ui/src/layouts/wrapped/hosting/manage/root.vue

@@ -107,7 +107,7 @@
 	<div
 		v-else-if="serverData"
 		data-pyro-server-manager-root
-		class="experimental-styles-within relative mx-auto pb-12 box-border flex min-h-[calc(100svh-100px)] w-full min-w-0 flex-col gap-4 px-6 transition-all duration-300"
+		class="experimental-styles-within relative mx-auto pb-6 box-border flex min-h-[calc(100svh-100px)] w-full min-w-0 flex-col gap-4 px-6 transition-all duration-300"
 		:style="{
 			'--server-bg-image': serverImage
 				? `url(${serverImage})`
@@ -1493,7 +1493,11 @@ onMounted(() => {
 		})
 	}
 
-	if (props.authUser && props.fetchIntercomToken) {
+	let intercomInitialized = false
+	const tryInitIntercom = () => {
+		if (intercomInitialized) return
+		if (!props.authUser || !props.fetchIntercomToken) return
+		intercomInitialized = true
 		props
 			.fetchIntercomToken()
 			.then(({ token }) => {
@@ -1504,9 +1508,20 @@ onMounted(() => {
 				})
 			})
 			.catch((error) => {
+				intercomInitialized = false
 				console.warn('[PYROSERVERS][INTERCOM] failed to initialize secure support chat', error)
 			})
 	}
+	tryInitIntercom()
+	const stopIntercomWatch = watch(
+		() => props.authUser,
+		(user) => {
+			if (user) {
+				tryInitIntercom()
+				stopIntercomWatch()
+			}
+		},
+	)
 
 	DOMPurify.addHook(
 		'afterSanitizeAttributes',