From 4f167cb6585f1b907d0056b1c1a958362f3ec4bc Mon Sep 17 00:00:00 2001
From: Markus Neusinger <2921697+MarkusNeusinger@users.noreply.github.com>
Date: Wed, 10 Jun 2026 00:21:33 +0200
Subject: [PATCH] chore(app): add typed global-config module

- src/global-config.ts: typed CONFIG (appName, appVersion from package.json,
  api.baseUrl/debugBaseUrl from VITE_* with fallbacks, isDev)
- constants/index.ts re-exports CONFIG and keeps API_URL/DEBUG_API_URL as
  compat aliases; new code should import CONFIG
- vite-env.d.ts: VITE_* env vars typed optional (they may be unset)
- Error boundaries use CONFIG.isDev instead of raw import.meta.env.DEV

Part 4 of the frontend modernization roadmap.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 app/src/components/ErrorBoundary.tsx      |  4 +++-
 app/src/components/RouteErrorBoundary.tsx |  3 ++-
 app/src/constants/index.ts                | 11 ++++-----
 app/src/global-config.ts                  | 27 +++++++++++++++++++++++
 app/src/vite-env.d.ts                     |  4 ++--
 5 files changed, 40 insertions(+), 9 deletions(-)
 create mode 100644 app/src/global-config.ts

diff --git a/app/src/components/ErrorBoundary.tsx b/app/src/components/ErrorBoundary.tsx
index b220fb158d..28fcda186a 100644
--- a/app/src/components/ErrorBoundary.tsx
+++ b/app/src/components/ErrorBoundary.tsx
@@ -9,6 +9,8 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 
+import { CONFIG } from 'src/global-config';
+
 interface Props {
   children: ReactNode;
   fallback?: ReactNode;
@@ -210,7 +212,7 @@ export class ErrorBoundary extends Component<Props, State> {
               </Typography>
             )}
 
-            {componentStack && import.meta.env.DEV && !showDetails && (
+            {componentStack && CONFIG.isDev && !showDetails && (
               <Typography
                 variant="caption"
                 sx={{ mt: 1, display: 'block', color: 'var(--ink-muted)' }}
diff --git a/app/src/components/RouteErrorBoundary.tsx b/app/src/components/RouteErrorBoundary.tsx
index e2206313c3..9e506f1cc7 100644
--- a/app/src/components/RouteErrorBoundary.tsx
+++ b/app/src/components/RouteErrorBoundary.tsx
@@ -10,6 +10,7 @@ import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import Typography from '@mui/material/Typography';
 
+import { CONFIG } from 'src/global-config';
 import { NotFoundPage } from 'src/pages/NotFoundPage';
 
 const RELOAD_ATTEMPT_KEY = 'anyplot:chunk-reload-attempt';
@@ -142,7 +143,7 @@ export function RouteErrorBoundary() {
         <Typography variant="body2" sx={{ color: 'var(--ink-muted)' }}>
           {body}
         </Typography>
-        {import.meta.env.DEV && (
+        {CONFIG.isDev && (
           <Typography
             variant="caption"
             component="pre"
diff --git a/app/src/constants/index.ts b/app/src/constants/index.ts
index 73ebcea7d7..9271adcdf1 100644
--- a/app/src/constants/index.ts
+++ b/app/src/constants/index.ts
@@ -1,10 +1,11 @@
 // Constants for anyplot.ai frontend
 
-export const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000';
-// DebugPage uses this — set to "/api" in prod (same-origin via the
-// Cloudflare Worker on anyplot.ai/api/*) so the CF Access cookie can be
-// sent with fetch. Falls back to API_URL locally where there's no Worker.
-export const DEBUG_API_URL = import.meta.env.VITE_DEBUG_API_URL || API_URL;
+import { CONFIG } from 'src/global-config';
+
+export { CONFIG };
+// Compat aliases — prefer CONFIG.api.* in new code.
+export const API_URL = CONFIG.api.baseUrl;
+export const DEBUG_API_URL = CONFIG.api.debugBaseUrl;
 export const GITHUB_URL = 'https://github.com/MarkusNeusinger/anyplot';
 export const LIBRARIES = [
   'altair',
diff --git a/app/src/global-config.ts b/app/src/global-config.ts
new file mode 100644
index 0000000000..0151279fc0
--- /dev/null
+++ b/app/src/global-config.ts
@@ -0,0 +1,27 @@
+import packageJson from '../package.json';
+
+interface GlobalConfig {
+  appName: string;
+  appVersion: string;
+  api: {
+    baseUrl: string;
+    debugBaseUrl: string;
+  };
+  isDev: boolean;
+}
+
+const apiBaseUrl = import.meta.env.VITE_API_URL || 'http://localhost:8000';
+
+export const CONFIG: GlobalConfig = {
+  appName: 'anyplot',
+  appVersion: packageJson.version,
+  api: {
+    baseUrl: apiBaseUrl,
+    // DebugPage uses this — set to "/api" in prod (same-origin via the
+    // Cloudflare Worker on anyplot.ai/api/*) so the CF Access cookie can be
+    // sent with fetch. Falls back to the API base locally where there's no
+    // Worker.
+    debugBaseUrl: import.meta.env.VITE_DEBUG_API_URL || apiBaseUrl,
+  },
+  isDev: import.meta.env.DEV,
+};
diff --git a/app/src/vite-env.d.ts b/app/src/vite-env.d.ts
index 0962af97d9..9e1e1857fb 100644
--- a/app/src/vite-env.d.ts
+++ b/app/src/vite-env.d.ts
@@ -1,8 +1,8 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly VITE_API_URL: string;
-  readonly VITE_DEBUG_API_URL: string;
+  readonly VITE_API_URL?: string;
+  readonly VITE_DEBUG_API_URL?: string;
 }
 
 interface ImportMeta {