refactor(frontend): replace sed/placeholder hack with runtime config API

- Add /api/config route that reads env vars at runtime
- Add ConfigProvider React context for app-wide config access
- Auto-detect API/WS URLs from window.location in K3S deployments
- Build production image with basePath=/llm-admin (Next.js requirement)
- Remove all placeholder strings and sed replacements

Docker images:
- Production (Dockerfile): basePath=/llm-admin baked in, for K3S
- Development (Dockerfile.dev): no basePath, runs at root

Environment variables:
- NEXT_PUBLIC_API_URL: Required when API is on different origin (dev)
- NEXT_PUBLIC_WS_URL: Required when WS is on different origin (dev)
- In K3S: URLs auto-detected from window.location (no env vars needed)

Author: damienlaine

docker-compose.dev.yml

@@ -61,17 +61,18 @@ services:
       replicas: ${CELERY_WORKERS:-1}
 
   frontend:
+    # Development mode with hot-reload, no basePath (runs at root)
+    # Access at: http://localhost:8001
     build:
       context: ./frontend
       dockerfile: Dockerfile.dev
       args:
         USER_ID: ${UID:-1000}
         GROUP_ID: ${GID:-1000}
     environment:
+      # API/WS URLs required when frontend and backend are on different ports
       - NEXT_PUBLIC_API_URL=http://localhost:8000
       - NEXT_PUBLIC_WS_URL=ws://localhost:8000
-      - NEXT_PUBLIC_APP_NAME=LLM Gateway
-      - NEXT_PUBLIC_DEFAULT_LOCALE=en
     networks:
       - llm-network
     ports:

docker-compose.local.yml

@@ -68,17 +68,18 @@ services:
       replicas: ${CELERY_WORKERS:-1}
 
   frontend:
+    # Development mode with hot-reload, no basePath (runs at root)
+    # Access at: http://localhost:8011
     build:
       context: ./frontend
       dockerfile: Dockerfile.dev
       args:
         USER_ID: ${UID:-1000}
         GROUP_ID: ${GID:-1000}
     environment:
+      # API/WS URLs required when frontend and backend are on different ports
       - NEXT_PUBLIC_API_URL=http://localhost:8010
       - NEXT_PUBLIC_WS_URL=ws://localhost:8010
-      - NEXT_PUBLIC_APP_NAME=LLM Gateway
-      - NEXT_PUBLIC_DEFAULT_LOCALE=en
     networks:
       - llm-network
     ports:

docker-compose.yml

@@ -58,14 +58,14 @@ services:
       replicas: ${CELERY_WORKERS:-1}
 
   frontend:
+    # This image is built with basePath=/llm-admin (for K3S/reverse proxy deployments)
+    # Access at: http://localhost:8001/llm-admin
+    # For development without basePath, use docker-compose.dev.yml instead
     image: lintoai/llm-gateway-frontend:latest-unstable
     environment:
+      # API/WS URLs required when frontend and backend are on different origins
       - NEXT_PUBLIC_API_URL=http://localhost:8000
       - NEXT_PUBLIC_WS_URL=ws://localhost:8000
-      - NEXT_PUBLIC_APP_NAME=LLM Gateway
-      - NEXT_PUBLIC_DEFAULT_LOCALE=en
-      # Subpath deployment (optional): set BASE_PATH to deploy behind reverse proxy
-      # - BASE_PATH=/llm-admin
     networks:
       - llm-network
     ports:

frontend/Dockerfile

@@ -19,13 +19,10 @@ COPY . .
 # Disable telemetry during build
 ENV NEXT_TELEMETRY_DISABLED=1
 
-# Build without basePath (root deployment)
-# For subpath deployment, rebuild with NEXT_PUBLIC_BASE_PATH set
-ENV NEXT_PUBLIC_BASE_PATH=""
-ENV NEXT_PUBLIC_API_URL="__NEXT_API_URL_PLACEHOLDER__"
-ENV NEXT_PUBLIC_WS_URL="__NEXT_WS_URL_PLACEHOLDER__"
-
-# Build the application
+# Build with /llm-admin basePath (hardcoded for K3S/production deployments)
+# This image is meant for deployment behind a reverse proxy at /llm-admin
+# For local development without basePath, use docker-compose.dev.yml
+ENV BASE_PATH=/llm-admin
 RUN npm run build
 
 # Stage 3: Runner
@@ -44,11 +41,11 @@ COPY --from=builder /app/public ./public
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 
-# Copy entrypoint script (from builder to ensure it's available regardless of build context)
+# Copy entrypoint script
 COPY --from=builder --chown=nextjs:nodejs /app/docker-entrypoint.sh /app/
 RUN chmod +x /app/docker-entrypoint.sh
 
-# Ensure nextjs user can write to /app for sed -i operations at runtime
+# Set ownership for nextjs user
 RUN chown -R nextjs:nodejs /app
 
 USER nextjs
@@ -58,9 +55,10 @@ EXPOSE 3000
 ENV PORT=3000
 ENV HOSTNAME="0.0.0.0"
 
-# Runtime basePath configuration (optional)
-# Set BASE_PATH=/your-subpath to deploy under a subpath
-ENV BASE_PATH=""
+# Runtime configuration (set via docker-compose or K8S ConfigMap):
+# - NEXT_PUBLIC_API_URL: API endpoint (required for cross-origin, e.g., http://localhost:8000)
+# - NEXT_PUBLIC_WS_URL: WebSocket endpoint (required for cross-origin, e.g., ws://localhost:8000)
+# If not set, URLs are auto-detected from window.location (for same-origin K3S deployments)
 
 ENTRYPOINT ["/app/docker-entrypoint.sh"]
 CMD ["node", "server.js"]

frontend/app/[locale]/layout.tsx

@@ -3,6 +3,7 @@ import { getMessages } from 'next-intl/server';
 import { notFound } from 'next/navigation';
 import { routing } from '@/i18n/routing';
 import { QueryProvider } from '@/components/providers/QueryProvider';
+import { ConfigProvider } from '@/components/providers/ConfigProvider';
 import { Header } from '@/components/layout/Header';
 import { Sidebar } from '@/components/layout/Sidebar';
 import { Footer } from '@/components/layout/Footer';
@@ -34,15 +35,17 @@ export default async function LocaleLayout({
       <body className="antialiased" suppressHydrationWarning>
         <QueryProvider>
           <NextIntlClientProvider messages={messages}>
-            <div className="flex h-screen flex-col">
-              <Header />
-              <div className="flex flex-1 overflow-hidden">
-                <Sidebar locale={locale} />
-                <main className="flex-1 overflow-auto p-6">{children}</main>
+            <ConfigProvider>
+              <div className="flex h-screen flex-col">
+                <Header />
+                <div className="flex flex-1 overflow-hidden">
+                  <Sidebar locale={locale} />
+                  <main className="flex-1 overflow-auto p-6">{children}</main>
+                </div>
+                <Footer />
               </div>
-              <Footer />
-            </div>
-            <Toaster />
+              <Toaster />
+            </ConfigProvider>
           </NextIntlClientProvider>
         </QueryProvider>
       </body>

frontend/app/api/config/route.ts

@@ -0,0 +1,12 @@
+import { NextResponse } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  return NextResponse.json({
+    apiUrl: process.env.NEXT_PUBLIC_API_URL || '',
+    wsUrl: process.env.NEXT_PUBLIC_WS_URL || '',
+    basePath: process.env.BASE_PATH || '',
+    appName: process.env.NEXT_PUBLIC_APP_NAME || 'LLM Gateway',
+  });
+}

frontend/components/layout/Footer.tsx

@@ -4,15 +4,21 @@ import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
-import { api } from '@/lib/api';
+import { useConfig } from '@/components/providers/ConfigProvider';
+import { getApi } from '@/lib/api';
 
 export function Footer() {
   const t = useTranslations('app');
+  const config = useConfig();
   const [isConnected, setIsConnected] = useState(true);
 
   useEffect(() => {
+    // Wait for config to load before checking connection
+    if (config.isLoading) return;
+
     const checkConnection = async () => {
       try {
+        const api = getApi();
         await api.get('/healthcheck');
         setIsConnected(true);
       } catch (error) {
@@ -24,7 +30,7 @@ export function Footer() {
     const interval = setInterval(checkConnection, 30000); // Check every 30s
 
     return () => clearInterval(interval);
-  }, []);
+  }, [config.isLoading]);
 
   return (
     <footer className="border-t bg-background">

frontend/components/providers/ConfigProvider.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import type { RuntimeConfig, ConfigContextValue } from '@/lib/config';
+import { setConfigCache } from '@/lib/config';
+
+const defaultConfig: ConfigContextValue = {
+  apiUrl: '',
+  wsUrl: '',
+  basePath: '',
+  appName: 'LLM Gateway',
+  isLoading: true,
+};
+
+const ConfigContext = createContext<ConfigContextValue>(defaultConfig);
+
+export function ConfigProvider({ children }: { children: ReactNode }) {
+  const [config, setConfig] = useState<ConfigContextValue>(defaultConfig);
+
+  useEffect(() => {
+    async function loadConfig() {
+      try {
+        const response = await fetch('/api/config');
+        if (!response.ok) {
+          throw new Error(`Config fetch failed: ${response.status}`);
+        }
+        const data: RuntimeConfig = await response.json();
+
+        // Update the module-level cache for synchronous access
+        setConfigCache(data);
+
+        setConfig({
+          ...data,
+          isLoading: false,
+        });
+      } catch (error) {
+        console.error('Failed to load runtime config:', error);
+        // Set loading to false even on error to allow app to render
+        setConfig((prev) => ({ ...prev, isLoading: false }));
+      }
+    }
+
+    loadConfig();
+  }, []);
+
+  return (
+    <ConfigContext.Provider value={config}>
+      {children}
+    </ConfigContext.Provider>
+  );
+}
+
+/**
+ * Hook to access runtime configuration.
+ * Must be used within a ConfigProvider.
+ */
+export function useConfig(): ConfigContextValue {
+  const context = useContext(ConfigContext);
+  if (context === undefined) {
+    throw new Error('useConfig must be used within a ConfigProvider');
+  }
+  return context;
+}

frontend/docker-entrypoint.sh

@@ -1,43 +1,9 @@
 #!/bin/sh
 set -e
 
-BASEPATH_PLACEHOLDER="/__NEXT_BASEPATH_PLACEHOLDER__"
-BASEPATH_PLACEHOLDER_ESCAPED="\\\\\\\\/__NEXT_BASEPATH_PLACEHOLDER__"
-API_URL_PLACEHOLDER="__NEXT_API_URL_PLACEHOLDER__"
-WS_URL_PLACEHOLDER="__NEXT_WS_URL_PLACEHOLDER__"
+echo "Starting LLM Gateway Frontend"
+echo "  basePath: /llm-admin (built-in)"
+echo "  API_URL: ${NEXT_PUBLIC_API_URL:-auto-detect from window.location}"
+echo "  WS_URL: ${NEXT_PUBLIC_WS_URL:-auto-detect from window.location}"
 
-if [ -n "$BASE_PATH" ]; then
-    echo "Configuring basePath: $BASE_PATH"
-    ESCAPED_BASE_PATH=$(echo "$BASE_PATH" | sed 's|/|\\/|g')
-    sed -i "s|${BASEPATH_PLACEHOLDER}|${BASE_PATH}|g" /app/server.js 2>/dev/null || true
-    sed -i "s|${BASEPATH_PLACEHOLDER}|${BASE_PATH}|g" /app/.next/routes-manifest.json 2>/dev/null || true
-    # Escaped version first (for regex patterns in JSON)
-    find /app/.next/static -type f -name "*.json" -exec sed -i "s|${BASEPATH_PLACEHOLDER_ESCAPED}|${ESCAPED_BASE_PATH}|g" {} + 2>/dev/null || true
-    find /app/.next/static -type f \( -name "*.js" -o -name "*.json" \) -exec sed -i "s|${BASEPATH_PLACEHOLDER}|${BASE_PATH}|g" {} + 2>/dev/null || true
-    find /app/.next/server -type f \( -name "*.html" -o -name "*.rsc" -o -name "*.meta" -o -name "*.body" \) -exec sed -i "s|${BASEPATH_PLACEHOLDER}|${BASE_PATH}|g" {} + 2>/dev/null || true
-    find /app/.next/server -type f -name "*client-reference-manifest.js" -exec sed -i "s|${BASEPATH_PLACEHOLDER}|${BASE_PATH}|g" {} + 2>/dev/null || true
-    # Also handle prerender manifests and action manifests
-    find /app/.next -type f -name "*.json" -exec sed -i "s|${BASEPATH_PLACEHOLDER}|${BASE_PATH}|g" {} + 2>/dev/null || true
-else
-    echo "No BASE_PATH set, running at root path"
-    sed -i "s|${BASEPATH_PLACEHOLDER}||g" /app/server.js 2>/dev/null || true
-    sed -i "s|${BASEPATH_PLACEHOLDER}||g" /app/.next/routes-manifest.json 2>/dev/null || true
-    # Escaped version first (for regex patterns in JSON)
-    find /app/.next/static -type f -name "*.json" -exec sed -i "s|${BASEPATH_PLACEHOLDER_ESCAPED}||g" {} + 2>/dev/null || true
-    find /app/.next/static -type f \( -name "*.js" -o -name "*.json" \) -exec sed -i "s|${BASEPATH_PLACEHOLDER}||g" {} + 2>/dev/null || true
-    find /app/.next/server -type f \( -name "*.html" -o -name "*.rsc" -o -name "*.meta" -o -name "*.body" \) -exec sed -i "s|${BASEPATH_PLACEHOLDER}||g" {} + 2>/dev/null || true
-    find /app/.next/server -type f -name "*client-reference-manifest.js" -exec sed -i "s|${BASEPATH_PLACEHOLDER}||g" {} + 2>/dev/null || true
-    # Also handle prerender manifests and action manifests
-    find /app/.next -type f -name "*.json" -exec sed -i "s|${BASEPATH_PLACEHOLDER}||g" {} + 2>/dev/null || true
-fi
-
-API_URL="${NEXT_PUBLIC_API_URL:-http://localhost:8000}"
-echo "Configuring API URL: $API_URL"
-find /app/.next/static -type f -name "*.js" -exec sed -i "s|${API_URL_PLACEHOLDER}|${API_URL}|g" {} + 2>/dev/null || true
-
-WS_URL="${NEXT_PUBLIC_WS_URL:-ws://localhost:8000}"
-echo "Configuring WebSocket URL: $WS_URL"
-find /app/.next/static -type f -name "*.js" -exec sed -i "s|${WS_URL_PLACEHOLDER}|${WS_URL}|g" {} + 2>/dev/null || true
-
-echo "Configuration complete"
 exec "$@"

frontend/hooks/use-job-websocket.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState, useRef, useCallback } from 'react';
-import { WS_BASE_URL } from '@/lib/constants';
+import { useConfig } from '@/components/providers/ConfigProvider';
+import { buildWsUrl } from '@/lib/config';
 import type {
   JobStatus,
   JobProgress,
@@ -34,6 +35,7 @@ export function useJobWebSocket(
   options?: UseJobWebSocketOptions
 ): UseJobWebSocketReturn {
   const { onStatusChange, enabled = true } = options || {};
+  const config = useConfig();
 
   const [status, setStatus] = useState<JobStatus | null>(null);
   const [progress, setProgress] = useState<JobProgress | null>(null);
@@ -96,10 +98,11 @@ export function useJobWebSocket(
   );
 
   const connect = useCallback(() => {
-    if (!jobId || !enabled) return;
+    if (!jobId || !enabled || config.isLoading) return;
 
     try {
-      const wsUrl = `${WS_BASE_URL}/ws/jobs/${jobId}`;
+      const wsBaseUrl = buildWsUrl(config);
+      const wsUrl = `${wsBaseUrl}/ws/jobs/${jobId}`;
       const ws = new WebSocket(wsUrl);
       wsRef.current = ws;
 
@@ -136,11 +139,11 @@ export function useJobWebSocket(
     } catch {
       // WebSocket connection failed
     }
-  }, [jobId, enabled, handleMessage]);
+  }, [jobId, enabled, config, handleMessage]);
 
-  // Connect on mount or when jobId changes
+  // Connect on mount or when jobId changes (wait for config to load)
   useEffect(() => {
-    if (!jobId || !enabled) return;
+    if (!jobId || !enabled || config.isLoading) return;
 
     // Reset state for new job
     setStatus(null);
@@ -164,7 +167,7 @@ export function useJobWebSocket(
         wsRef.current = null;
       }
     };
-  }, [jobId, enabled, connect]);
+  }, [jobId, enabled, config.isLoading, connect]);
 
   return {
     status,