Function GPUStat

src/components/TitleBar.tsx:67–82

({ name, usedMb, totalMb }: { name: string; usedMb: number; totalMb: number })

}

function GPUStat({ name, usedMb, totalMb }: { name: string; usedMb: number; totalMb: number }) {
  const pct = totalMb > 0 ? (usedMb / totalMb) * 100 : 0;
  return (
    <Box sx={{ display: "flex", alignItems: "center", gap: 0.8, mr: 0.5, flexShrink: 1, minWidth: 0 }}>
      <Box sx={{ position: "relative", display: "inline-flex", flexShrink: 0 }}>
        <CircularProgress variant="determinate" value={100} size={28} thickness={5} sx={{ color: "divider" }} />
        <CircularProgress variant="determinate" value={pct} size={28} thickness={5}
          sx={{ position: "absolute", left: 0, color: pct > 80 ? "error.main" : pct > 60 ? "warning.main" : "secondary.main" }} />
      </Box>
      <Box sx={{ minWidth: 0, overflow: "hidden" }}>
        <Typography variant="caption" sx={{ fontWeight: 600, fontSize: "0.7rem", lineHeight: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: 70 }}>{name}</Typography>
        <Typography variant="caption" sx={{ color: "text.disabled", fontSize: "0.6rem", display: "block", lineHeight: 1 }}>{fmtGpuMb(usedMb)} / {fmtGpuMb(totalMb)}</Typography>
      </Box>
    </Box>
  );
}

function StatBadge({ value, label }: { value: number; label: string }) {
  return (