diff --git a/src/components/dialog/header/SettingDialogHeader.vue b/src/components/dialog/header/SettingDialogHeader.vue
index 66765846f..959cfa14d 100644
--- a/src/components/dialog/header/SettingDialogHeader.vue
+++ b/src/components/dialog/header/SettingDialogHeader.vue
@@ -15,9 +15,7 @@
 <script setup lang="ts">
 import Tag from 'primevue/tag'
 
-// Global variable from vite build defined in global.d.ts
-// eslint-disable-next-line no-undef
-const isStaging = !__USE_PROD_CONFIG__
+import { isStaging } from '@/config/staging'
 </script>
 
 <style scoped>
diff --git a/src/config/staging.ts b/src/config/staging.ts
new file mode 100644
index 000000000..df525f0b2
--- /dev/null
+++ b/src/config/staging.ts
@@ -0,0 +1,20 @@
+import { computed } from 'vue'
+
+import { isCloud } from '@/platform/distribution/types'
+import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
+
+const BUILD_TIME_IS_STAGING = !__USE_PROD_CONFIG__
+
+/**
+ * Returns whether the current environment is staging.
+ * - Cloud builds use runtime configuration (firebase_config.projectId containing '-dev')
+ * - OSS / localhost builds fall back to the build-time config determined by __USE_PROD_CONFIG__
+ */
+export const isStaging = computed(() => {
+  if (!isCloud) {
+    return BUILD_TIME_IS_STAGING
+  }
+
+  const projectId = remoteConfig.value.firebase_config?.projectId
+  return projectId?.includes('-dev') ?? BUILD_TIME_IS_STAGING
+})