show system status in status page

interface/src/app/status/Status.tsx

@@ -8,10 +8,10 @@ import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import DirectionsBusIcon from '@mui/icons-material/DirectionsBus';
 import LogoDevIcon from '@mui/icons-material/LogoDev';
 import MemoryIcon from '@mui/icons-material/Memory';
+import MonitorHeartIcon from '@mui/icons-material/MonitorHeart';
 import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
 import RouterIcon from '@mui/icons-material/Router';
 import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
-import TimerIcon from '@mui/icons-material/Timer';
 import WifiIcon from '@mui/icons-material/Wifi';
 import {
   Avatar,
@@ -37,7 +37,7 @@ import { FormLoader, SectionContent, useLayoutTitle } from 'components';
 import ListMenuItem from 'components/layout/ListMenuItem';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
-import { NTPSyncStatus, NetworkConnectionStatus } from 'types';
+import { NTPSyncStatus, NetworkConnectionStatus, SystemStatusCodes } from 'types';
 import { useInterval } from 'utils';
 import { formatDateTime } from 'utils/time';
 
@@ -113,6 +113,27 @@ const SystemStatus = () => {
     }
   }, [data?.bus_status, data?.bus_uptime, LL]);
 
+  // Memoize derived status values to avoid recalculation on every render
+  const systemStatus = useMemo(() => {
+    if (!data) return '??';
+
+    switch (data.status) {
+      case SystemStatusCodes.SYSTEM_STATUS_PENDING_UPLOAD:
+      case SystemStatusCodes.SYSTEM_STATUS_UPLOADING:
+        return LL.WAIT_FIRMWARE();
+      case SystemStatusCodes.SYSTEM_STATUS_ERROR_UPLOAD:
+        return LL.ERROR();
+      case SystemStatusCodes.SYSTEM_STATUS_PENDING_RESTART:
+      case SystemStatusCodes.SYSTEM_STATUS_RESTART_REQUESTED:
+        return LL.RESTARTING_PRE();
+      case SystemStatusCodes.SYSTEM_STATUS_INVALID_GPIO:
+        return LL.GPIO_OF(LL.FAILED(0));
+      default:
+        // SystemStatusCodes.SYSTEM_STATUS_NORMAL
+        return 'OK';
+    }
+  }, [data?.status, LL]);
+
   const busStatusHighlight = useMemo(() => {
     if (!data) return theme.palette.warning.main;
 
@@ -313,10 +334,13 @@ const SystemStatus = () => {
           <ListItem>
             <ListItemAvatar>
               <Avatar sx={{ bgcolor: '#c5572c', color: 'white' }}>
-                <TimerIcon />
+                <MonitorHeartIcon />
               </Avatar>
             </ListItemAvatar>
-            <ListItemText primary={LL.UPTIME()} secondary={uptimeText} />
+            <ListItemText
+              primary={LL.STATUS_OF(LL.SYSTEM(0))}
+              secondary={`${systemStatus} (${LL.UPTIME()}: ${uptimeText})`}
+            />
             {me.admin && (
               <Button
                 startIcon={<PowerSettingsNewIcon />}

interface/src/types/system.ts

@@ -2,13 +2,15 @@ import type { busConnectionStatus } from 'app/main/types';
 
 import type { NetworkConnectionStatus } from './network';
 
+// match SYSTEM_STATUS in System.h
 export enum SystemStatusCodes {
   SYSTEM_STATUS_NORMAL = 0,
   SYSTEM_STATUS_PENDING_UPLOAD = 1,
   SYSTEM_STATUS_UPLOADING = 100,
   SYSTEM_STATUS_ERROR_UPLOAD = 3,
   SYSTEM_STATUS_PENDING_RESTART = 4,
-  SYSTEM_STATUS_RESTART_REQUESTED = 5
+  SYSTEM_STATUS_RESTART_REQUESTED = 5,
+  SYSTEM_STATUS_INVALID_GPIO = 6
 }
 
 export interface SystemStatus {
@@ -50,7 +52,7 @@ export interface SystemStatus {
   model: string;
   has_loader: boolean;
   has_partition: boolean;
-  status: number; // SystemStatusCodes which matches SYSTEM_STATUS in System.h
+  status: number; // System Status Codes which matches SYSTEM_STATUS in System.h
   temperature?: number;
 }