fix(frontend): update system metrics parsing and display in satellite components

Author: Lasim

services/frontend/src/components/admin/satellites/HeartbeatDetailSheet.vue

@@ -31,9 +31,10 @@ const parsedMetrics = computed<SystemMetrics | null>(() => {
   try {
     const parsed = JSON.parse(props.heartbeat.system_metrics)
     return {
-      cpu: parsed.cpu ?? 0,
-      memory: parsed.memory ?? 0,
-      disk: parsed.disk ?? 0,
+      cpu: parsed.cpu_usage_percent ?? 0,
+      memory: parsed.memory_usage_mb ?? 0,
+      disk: parsed.disk_usage_percent ?? 0,
+      uptime_seconds: parsed.uptime_seconds ?? 0,
       network: parsed.network
     }
   } catch {
@@ -181,18 +182,7 @@ function formatBytes(bytes: number): string {
                   <HardDrive class="h-3 w-3" />
                   Memory
                 </span>
-                <span class="text-sm font-medium">{{ (parsedMetrics.memory ?? 0).toFixed(1) }}%</span>
-              </div>
-              <div class="w-full bg-muted rounded-full h-2">
-                <div
-                  class="h-2 rounded-full transition-all"
-                  :class="{
-                    'bg-green-600': (parsedMetrics.memory ?? 0) < 70,
-                    'bg-yellow-600': (parsedMetrics.memory ?? 0) >= 70 && (parsedMetrics.memory ?? 0) < 90,
-                    'bg-red-600': (parsedMetrics.memory ?? 0) >= 90
-                  }"
-                  :style="{ width: `${Math.min(parsedMetrics.memory ?? 0, 100)}%` }"
-                ></div>
+                <span class="text-sm font-medium">{{ parsedMetrics.memory }} MB</span>
               </div>
             </div>
 

services/frontend/src/components/admin/satellites/HeartbeatsTab.vue

@@ -64,13 +64,14 @@ function parseMetrics(metricsJson: string): SystemMetrics {
   try {
     const parsed = JSON.parse(metricsJson)
     return {
-      cpu: parsed.cpu ?? 0,
-      memory: parsed.memory ?? 0,
-      disk: parsed.disk ?? 0,
+      cpu: parsed.cpu_usage_percent ?? 0,
+      memory: parsed.memory_usage_mb ?? 0,
+      disk: parsed.disk_usage_percent ?? 0,
+      uptime_seconds: parsed.uptime_seconds ?? 0,
       network: parsed.network
     }
   } catch {
-    return { cpu: 0, memory: 0, disk: 0 }
+    return { cpu: 0, memory: 0, disk: 0, uptime_seconds: 0 }
   }
 }
 
@@ -263,7 +264,7 @@ onMounted(() => {
                 {{ (parseMetrics(heartbeat.system_metrics).cpu ?? 0).toFixed(1) }}%
               </TableCell>
               <TableCell class="text-sm text-right tabular-nums">
-                {{ (parseMetrics(heartbeat.system_metrics).memory ?? 0).toFixed(1) }}%
+                {{ parseMetrics(heartbeat.system_metrics).memory }} MB
               </TableCell>
               <TableCell class="text-sm text-right tabular-nums">
                 <span v-if="heartbeat.response_time_ms">{{ heartbeat.response_time_ms }}ms</span>

services/frontend/src/components/admin/satellites/SatelliteInfo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
@@ -19,6 +19,7 @@ import {
 import { Hash, Server, Cpu, HardDrive } from 'lucide-vue-next'
 import { SatelliteService, type Satellite } from '@/services/satelliteService'
 import { DsCard } from '@/components/ui/ds-card'
+import { Progress } from '@/components/ui/progress'
 import { toast } from 'vue-sonner'
 
 const { t } = useI18n()
@@ -32,6 +33,26 @@ const emit = defineEmits<{
   'satellite-updated': [satellite: Satellite]
 }>()
 
+// Memory usage from latest heartbeat
+const memoryUsageMb = ref<number | null>(null)
+const memoryUsagePercent = computed(() => {
+  if (memoryUsageMb.value === null || !props.satellite.system_info?.memory_mb) return null
+  return Math.round((memoryUsageMb.value / props.satellite.system_info.memory_mb) * 100)
+})
+
+async function loadLatestHeartbeat() {
+  try {
+    const response = await SatelliteService.listHeartbeats(props.satellite.id, { limit: 1, offset: 0 })
+    const heartbeat = response.data.heartbeats[0]
+    if (heartbeat) {
+      const metrics = JSON.parse(heartbeat.system_metrics)
+      memoryUsageMb.value = metrics.memory_usage_mb ?? null
+    }
+  } catch {
+    // Silent fail — progress bar just won't show
+  }
+}
+
 // Available capabilities (MCP server types)
 const availableCapabilities = [
   'stdio',
@@ -170,6 +191,10 @@ const hasCapabilities = computed(() => {
 const hasTeam = computed(() => {
   return props.satellite.team !== null && props.satellite.team !== undefined
 })
+
+onMounted(() => {
+  loadLatestHeartbeat()
+})
 </script>
 
 <template>
@@ -309,8 +334,13 @@ const hasTeam = computed(() => {
             <HardDrive class="h-4 w-4 text-muted-foreground" />
             {{ t('satellites.manage.info.memory') }}
           </dt>
-          <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
-            {{ satellite.system_info.memory_mb }} MB
+          <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 space-y-2">
+            <div class="flex items-center justify-between">
+              <span v-if="memoryUsageMb !== null">{{ memoryUsageMb }} MB / {{ satellite.system_info.memory_mb }} MB</span>
+              <span v-else>{{ satellite.system_info.memory_mb }} MB</span>
+              <span v-if="memoryUsagePercent !== null" class="text-sm text-muted-foreground">{{ memoryUsagePercent }}%</span>
+            </div>
+            <Progress v-if="memoryUsagePercent !== null" :model-value="memoryUsagePercent" class="w-full" />
           </dd>
         </div>
       </dl>

services/frontend/src/services/satelliteService.ts

@@ -129,9 +129,10 @@ export interface SatelliteHeartbeat {
 }
 
 export interface SystemMetrics {
-  cpu: number
-  memory: number
-  disk: number
+  cpu: number              // cpu_usage_percent (0-100)
+  memory: number           // memory_usage_mb (absolute MB)
+  disk: number             // disk_usage_percent (0-100)
+  uptime_seconds: number   // process uptime
   network?: {
     rx: number
     tx: number