11import { useState , useEffect , useMemo } from "react" ;
22import { useTranslation } from "react-i18next" ;
33import { getVersion } from "@tauri-apps/api/app" ;
4- import { ThemeProvider , createTheme , CssBaseline , Box , Tabs , Tab , Typography , Paper , Switch } from "@mui/material" ;
4+ import { ThemeProvider , createTheme , CssBaseline , Box , Tabs , Tab , Typography , Paper , Switch , Chip } from "@mui/material" ;
5+ import CheckCircleIcon from "@mui/icons-material/CheckCircle" ;
6+ import ErrorIcon from "@mui/icons-material/Error" ;
57import SpeedIcon from "@mui/icons-material/Speed" ;
68import SettingsIcon from "@mui/icons-material/Settings" ;
79import InfoIcon from "@mui/icons-material/Info" ;
@@ -28,6 +30,9 @@ function App() {
2830 const [ version , setVersion ] = useState ( "" ) ;
2931 const [ b64 , setB64 ] = useState < boolean | null > ( null ) ;
3032 const [ b32 , setB32 ] = useState < boolean | null > ( null ) ;
33+ const [ gpuName , setGpuName ] = useState ( "" ) ;
34+ const [ gpuUsedMb , setGpuUsedMb ] = useState ( 0 ) ;
35+ const [ gpuTotalMb , setGpuTotalMb ] = useState ( 0 ) ;
3136 const [ darkMode , setDarkMode ] = useState ( false ) ;
3237
3338 // Sync Blueprint dark mode class
@@ -65,10 +70,11 @@ function App() {
6570
6671 useInterval ( async ( ) => {
6772 try {
68- const s = await invoke < { memory_pct : number ; cpu_pct : number ; os_version : string } > ( "get_system_stats" ) ;
73+ const s = await invoke < { memory_pct : number ; cpu_pct : number ; os_version : string ; gpu : { name : string ; used_mb : number ; total_mb : number } | null } > ( "get_system_stats" ) ;
6974 setMemPct ( s . memory_pct ) ;
7075 setCpuPct ( s . cpu_pct ) ;
7176 setOsVer ( s . os_version ) ;
77+ if ( s . gpu ) { setGpuName ( s . gpu . name ) ; setGpuUsedMb ( s . gpu . used_mb ) ; setGpuTotalMb ( s . gpu . total_mb ) ; }
7278 } catch { }
7379 } , 5000 ) ;
7480
@@ -84,8 +90,8 @@ function App() {
8490
8591 // Initial fetch
8692 useEffect ( ( ) => {
87- invoke < { memory_pct : number ; cpu_pct : number ; os_version : string } > ( "get_system_stats" )
88- . then ( s => { setMemPct ( s . memory_pct ) ; setCpuPct ( s . cpu_pct ) ; setOsVer ( s . os_version ) ; } ) . catch ( ( ) => { } ) ;
93+ invoke < { memory_pct : number ; cpu_pct : number ; os_version : string ; gpu : { name : string ; used_mb : number ; total_mb : number } | null } > ( "get_system_stats" )
94+ . then ( s => { setMemPct ( s . memory_pct ) ; setCpuPct ( s . cpu_pct ) ; setOsVer ( s . os_version ) ; if ( s . gpu ) { setGpuName ( s . gpu . name ) ; setGpuUsedMb ( s . gpu . used_mb ) ; setGpuTotalMb ( s . gpu . total_mb ) ; } } ) . catch ( ( ) => { } ) ;
8995 getVersion ( ) . then ( setVersion ) . catch ( ( ) => { } ) ;
9096 invoke < boolean > ( "bridge64_health" ) . catch ( ( ) => false ) . then ( setB64 ) ;
9197 invoke < boolean > ( "bridge32_health" ) . catch ( ( ) => false ) . then ( setB32 ) ;
@@ -96,7 +102,7 @@ function App() {
96102 < CssBaseline />
97103 < SnackbarProvider >
98104 < Box sx = { { height : "100vh" , display : "flex" , flexDirection : "column" , bgcolor : "background.default" } } >
99- < TitleBar osVer = { osVer } cpuPct = { cpuPct } memPct = { memPct } b64 = { b64 } b32 = { b32 } />
105+ < TitleBar osVer = { osVer } cpuPct = { cpuPct } memPct = { memPct } gpuName = { gpuName } gpuUsedMb = { gpuUsedMb } gpuTotalMb = { gpuTotalMb } />
100106
101107 < Box sx = { { flex : 1 , display : "flex" } } >
102108 < Box sx = { { height : "calc(100vh - 48px)" , borderRight : 1 , borderColor : "divider" , bgcolor : "background.paper" , display : "flex" , flexDirection : "column" } } >
@@ -107,6 +113,12 @@ function App() {
107113 < Tab icon = { < InfoIcon /> } label = { t ( "app.tabs.about" ) } />
108114 </ Tabs >
109115 < Box sx = { { flex : 1 } } />
116+
117+ < Box sx = { { display : "flex" , flexDirection : "column" , gap : 0.5 , px : 1 , pb : 0.5 } } >
118+ < BridgeChip ok = { b64 } label = "B64" />
119+ < BridgeChip ok = { b32 } label = "B32" />
120+ </ Box >
121+
110122 < Box sx = { { display : "flex" , alignItems : "center" , justifyContent : "center" , pb : 1 } } >
111123 { darkMode ? < DarkModeIcon sx = { { fontSize : 14 , color : "text.secondary" } } /> : < LightModeIcon sx = { { fontSize : 14 , color : "text.secondary" } } /> }
112124 < Switch size = "small" checked = { darkMode } onChange = { ( _ , v ) => setDarkMode ( v ) } />
@@ -165,4 +177,17 @@ function App() {
165177 ) ;
166178}
167179
180+ function BridgeChip ( { ok, label } : { ok : boolean | null ; label : string } ) {
181+ return (
182+ < Chip
183+ icon = { ok === null ? undefined : ok ? < CheckCircleIcon /> : < ErrorIcon /> }
184+ label = { ok === null ? label : ok ? label : label }
185+ size = "small"
186+ color = { ok === null ? "default" : ok ? "success" : "error" }
187+ variant = "filled"
188+ sx = { { height : 22 , fontSize : "0.65rem" } }
189+ />
190+ ) ;
191+ }
192+
168193export default App ;
0 commit comments