feat(metrics): enhance metrics handling with reconnect logic and history caching

Author: I-am-PUID-0

app.vue

@@ -1,31 +1,11 @@
 <script setup>
-import { useLocalStorage } from '@vueuse/core'
 import { useProcessesStore } from "~/stores/processes.js";
 import { useLogsStore } from "~/stores/logs.js";
 import { useMetricsStore } from "~/stores/metrics.js";
 
 const processesStore = useProcessesStore()
 const logsStore = useLogsStore()
 const metricsStore = useMetricsStore()
-const cpuWarnThreshold = useLocalStorage('metrics.cpuWarnThreshold', 85)
-const memWarnThreshold = useLocalStorage('metrics.memWarnThreshold', 85)
-const diskWarnThreshold = useLocalStorage('metrics.diskWarnThreshold', 90)
-
-const globalAlerts = computed(() => {
-  const snapshot = metricsStore.latestSnapshot
-  if (!snapshot?.system) return []
-  const list = []
-  if (snapshot.system.cpu_percent != null && snapshot.system.cpu_percent >= cpuWarnThreshold.value) {
-    list.push(`CPU ${snapshot.system.cpu_percent.toFixed(1)}%`)
-  }
-  if (snapshot.system.mem?.percent != null && snapshot.system.mem.percent >= memWarnThreshold.value) {
-    list.push(`Memory ${snapshot.system.mem.percent.toFixed(1)}%`)
-  }
-  if (snapshot.system.disk?.percent != null && snapshot.system.disk.percent >= diskWarnThreshold.value) {
-    list.push(`Disk ${snapshot.system.disk.percent.toFixed(1)}%`)
-  }
-  return list
-})
 
 
 onMounted(async () => {
@@ -43,10 +23,6 @@ watchEffect(() => {
 
 <template>
   <NuxtLayout>
-    <div v-if="globalAlerts.length" class="mx-4 md:mx-8 mt-3 mb-2 rounded border border-amber-600/50 bg-amber-500/10 px-3 py-2 text-xs text-amber-200">
-      <span class="font-semibold">System alerts:</span>
-      <span class="ml-2">{{ globalAlerts.join(' · ') }}</span>
-    </div>
     <NuxtPage />
   </NuxtLayout>
 </template>

layouts/default.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { useRoute } from 'vue-router'
+import { useLocalStorage } from '@vueuse/core'
+import { useMetricsStore } from "~/stores/metrics.js"
 
 const sideBar = ref(true)
 const toggleSideBar = (value) => { sideBar.value = value ?? !sideBar.value }
@@ -10,6 +12,27 @@ const route = useRoute()
 
 // only show sidebar when *not* on the onboarding page
 const showSidebar = computed(() => !route.path.startsWith('/onboarding'))
+
+const metricsStore = useMetricsStore()
+const cpuWarnThreshold = useLocalStorage('metrics.cpuWarnThreshold', 85)
+const memWarnThreshold = useLocalStorage('metrics.memWarnThreshold', 85)
+const diskWarnThreshold = useLocalStorage('metrics.diskWarnThreshold', 90)
+
+const globalAlerts = computed(() => {
+  const snapshot = metricsStore.latestSnapshot
+  if (!snapshot?.system) return []
+  const list = []
+  if (snapshot.system.cpu_percent != null && snapshot.system.cpu_percent >= cpuWarnThreshold.value) {
+    list.push(`CPU ${snapshot.system.cpu_percent.toFixed(1)}%`)
+  }
+  if (snapshot.system.mem?.percent != null && snapshot.system.mem.percent >= memWarnThreshold.value) {
+    list.push(`Memory ${snapshot.system.mem.percent.toFixed(1)}%`)
+  }
+  if (snapshot.system.disk?.percent != null && snapshot.system.disk.percent >= diskWarnThreshold.value) {
+    list.push(`Disk ${snapshot.system.disk.percent.toFixed(1)}%`)
+  }
+  return list
+})
 </script>
 
 <template>
@@ -32,8 +55,16 @@ const showSidebar = computed(() => !route.path.startsWith('/onboarding'))
       </div>
 
       <!-- Main Content -->
-      <div class="flex-1 overflow-auto">
-        <slot />
+      <div class="flex-1 min-h-0 flex flex-col">
+        <div v-if="globalAlerts.length" class="px-4 md:px-8 pt-2">
+          <div class="rounded border border-amber-600/50 bg-amber-500/10 px-3 py-2 text-xs text-amber-200">
+            <span class="font-semibold">System alerts:</span>
+            <span class="ml-2">{{ globalAlerts.join(' · ') }}</span>
+          </div>
+        </div>
+        <div class="flex-1 min-h-0 overflow-y-auto overflow-x-hidden">
+          <slot />
+        </div>
       </div>
     </div>
   </div>

pages/index.vue

@@ -5,7 +5,7 @@ const enabledProcesses = computed(() => processesStore.enabledProcesses)
 </script>
 
 <template>
-  <div class="relative h-full text-white overflow-auto bg-gray-900 flex flex-col gap-8 px-4 py-4 md:px-8">
+  <div class="relative min-h-full text-white overflow-x-hidden bg-gray-900 flex flex-col gap-8 px-4 py-4 md:px-8">
     <InfoBar />
 
     <h1 class="text-4xl font-bold">Service Dashboard</h1>