fix: remove medium theme, fix navbar re-render, fix Node.js env loading

- Remove 'medium' theme from dashboard and marketplace; keep only light/dark - Marketplace: move public pages into (public)/ route group so header/footer persist across navigations without re-rendering (eliminates usePathname) - MarketplaceShell is now a pure context provider; chrome lives in (public)/layout.tsx which Next.js holds stable across navigations - WorkspaceFrame: remove history.replaceState and standalone-route logic - Docker API: bypass npm run dev to avoid node --env-file in containers - Add scripts/run-with-env-file.cjs for Node.js < 20.6 compatibility; update apps/api/package.json dev script to use it Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-23 02:41:02 -04:00
parent 8f93bb89f6
commit dcd62f35ac
26 changed files with 161 additions and 125 deletions
@@ -4,7 +4,7 @@
  "private": true,
  "scripts": {
    "predev": "npm run build --workspace @rentaldrivego/types",
-    "dev": "node --env-file=../../.env.local ../../node_modules/.bin/ts-node-dev --respawn --transpile-only src/index.ts",
+    "dev": "node ../../scripts/run-with-env-file.cjs ../../.env.local ../../node_modules/.bin/ts-node-dev --respawn --transpile-only src/index.ts",
    "prebuild": "npm run build --workspace @rentaldrivego/types",
    "build": "tsc",
    "prestart": "npm run build --workspace @rentaldrivego/types",
@@ -26,7 +26,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
        <script
          dangerouslySetInnerHTML={{
            __html:
-              "(function(){try{var m=document.cookie.match(/(?:^|; )rentaldrivego-theme=([^;]+)/);var theme=m?decodeURIComponent(m[1]):(localStorage.getItem('rentaldrivego-theme')||localStorage.getItem('dashboard-theme'));if(theme!=='light'&&theme!=='medium'&&theme!=='dark'){theme=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}var rootTheme=theme==='light'?'light':'dark';document.documentElement.classList.remove('light','dark');document.documentElement.classList.add(rootTheme);document.documentElement.style.colorScheme=rootTheme;document.body&&document.body.setAttribute('data-theme',theme)}catch(e){}})();",
+              "(function(){try{var m=document.cookie.match(/(?:^|; )rentaldrivego-theme=([^;]+)/);var theme=m?decodeURIComponent(m[1]):(localStorage.getItem('rentaldrivego-theme')||localStorage.getItem('dashboard-theme'));if(theme!=='light'&&theme!=='dark'){theme=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}var rootTheme=theme==='light'?'light':'dark';document.documentElement.classList.remove('light','dark');document.documentElement.classList.add(rootTheme);document.documentElement.style.colorScheme=rootTheme;document.body&&document.body.setAttribute('data-theme',theme)}catch(e){}})();",
          }}
        />
      </head>
@@ -92,7 +92,7 @@ export default function SignInPageClient({ embedded = false }: { embedded?: bool
    }

    if (
-      (requestedTheme === 'light' || requestedTheme === 'medium' || requestedTheme === 'dark') &&
+      (requestedTheme === 'light' || requestedTheme === 'dark') &&
      requestedTheme !== theme
    ) {
      setTheme(requestedTheme)
@@ -5,7 +5,7 @@ import { SHARED_LANGUAGE_COOKIE, SHARED_LANGUAGE_KEY, SHARED_THEME_KEY, readCurr
 import { apiFetch } from '@/lib/api'

 export type DashboardLanguage = 'en' | 'fr' | 'ar'
-export type DashboardTheme = 'light' | 'medium' | 'dark'
+export type DashboardTheme = 'light' | 'dark'

 type FleetDict = {
  statusLabels: Record<'AVAILABLE' | 'RENTED' | 'MAINTENANCE' | 'OUT_OF_SERVICE', string>
@@ -297,7 +297,6 @@ type DashboardDictionary = {
  language: string
  theme: string
  light: string
-  medium: string
  dark: string
  fleet: FleetDict
  vehicleDetail: VehicleDetailDict
@@ -348,7 +347,6 @@ const dictionaries: Record<DashboardLanguage, DashboardDictionary> = {
    language: 'Language',
    theme: 'Theme',
    light: 'Light',
-    medium: 'Medium',
    dark: 'Dark',
    fleet: {
      statusLabels: { AVAILABLE: 'Available', RENTED: 'Rented', MAINTENANCE: 'Maintenance', OUT_OF_SERVICE: 'Out of Service' },
@@ -692,7 +690,6 @@ const dictionaries: Record<DashboardLanguage, DashboardDictionary> = {
    language: 'Langue',
    theme: 'Mode',
    light: 'Clair',
-    medium: 'Moyen',
    dark: 'Sombre',
    fleet: {
      statusLabels: { AVAILABLE: 'Disponible', RENTED: 'Loué', MAINTENANCE: 'Maintenance', OUT_OF_SERVICE: 'Hors service' },
@@ -1036,7 +1033,6 @@ const dictionaries: Record<DashboardLanguage, DashboardDictionary> = {
    language: 'اللغة',
    theme: 'الوضع',
    light: 'فاتح',
-    medium: 'متوسط',
    dark: 'داكن',
    fleet: {
      statusLabels: { AVAILABLE: 'متاح', RENTED: 'مؤجر', MAINTENANCE: 'صيانة', OUT_OF_SERVICE: 'خارج الخدمة' },
@@ -1421,7 +1417,7 @@ export function DashboardI18nProvider({

  useEffect(() => {
    const storedTheme = readScopedPreference(SHARED_THEME_KEY, ['dashboard-theme'])
-    if (storedTheme === 'light' || storedTheme === 'medium' || storedTheme === 'dark') {
+    if (storedTheme === 'light' || storedTheme === 'dark') {
      if (storedTheme !== theme) setThemeState(storedTheme)
      return
    }
@@ -1474,7 +1470,7 @@ export function DashboardI18nProvider({
        writeScopedPreference(SHARED_LANGUAGE_KEY, langToWrite, [DASHBOARD_LANGUAGE_KEY])
      }

-      if (scopedTheme === 'light' || scopedTheme === 'medium' || scopedTheme === 'dark') {
+      if (scopedTheme === 'light' || scopedTheme === 'dark') {
        if (scopedTheme !== theme) setThemeState(scopedTheme)
      } else {
        writeScopedPreference(SHARED_THEME_KEY, theme, ['dashboard-theme'])
@@ -1557,7 +1553,7 @@ export function DashboardThemeSwitcher() {
      <span className="px-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400">
        {dict.theme}
      </span>
-      {(['light', 'medium', 'dark'] as DashboardTheme[]).map((value) => {
+      {(['light', 'dark'] as DashboardTheme[]).map((value) => {
        const active = value === theme
        return (
          <button
@@ -1570,7 +1566,7 @@ export function DashboardThemeSwitcher() {
                : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'
            }`}
          >
-            {value === 'light' ? dict.light : value === 'medium' ? dict.medium : dict.dark}
+            {value === 'light' ? dict.light : dict.dark}
          </button>
        )
      })}
@@ -0,0 +1,41 @@
+'use client'
+
+import MarketplaceHeader from '@/components/MarketplaceHeader'
+import MarketplaceFooter from '@/components/MarketplaceFooter'
+import { useMarketplacePreferences, getFooterContent, localeOptions } from '@/components/MarketplaceShell'
+import { resolveBrowserAppUrl } from '@/lib/appUrls'
+
+export default function PublicLayout({ children }: { children: React.ReactNode }) {
+  const { language, theme, dict, companyName, setLanguage, setTheme } = useMarketplacePreferences()
+  const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001/dashboard')
+  const footerContent = getFooterContent(language)
+  const available = localeOptions.filter((o) => o.value !== language)
+  const current = localeOptions.find((o) => o.value === language) ?? localeOptions[0]
+
+  return (
+    <div className="flex min-h-screen flex-col bg-stone-50 text-stone-900 transition-colors dark:bg-stone-950 dark:text-stone-100">
+      <MarketplaceHeader
+        dict={dict}
+        theme={theme}
+        setTheme={setTheme}
+        companyName={companyName}
+        dashboardUrl={dashboardUrl}
+        currentLanguage={{ value: current.value, flag: current.flag, shortLabel: current.value.toUpperCase() }}
+        localeOptions={available.map((o) => ({ value: o.value, flag: o.flag, shortLabel: o.value.toUpperCase() }))}
+        onSelectLanguage={setLanguage}
+      />
+      <div className="flex flex-1 flex-col">
+        <div className="flex-1">{children}</div>
+        <MarketplaceFooter
+          primaryItems={footerContent.primary}
+          secondaryItems={footerContent.secondary}
+          localeLabel={footerContent.localeLabel}
+          rightsLabel={footerContent.rightsLabel}
+          localeOptions={available}
+          currentLocale={current}
+          onSelectLanguage={setLanguage}
+        />
+      </div>
+    </div>
+  )
+}
@@ -5,7 +5,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { useEffect, useRef, useState } from 'react'

-type Theme = 'light' | 'medium' | 'dark'
+type Theme = 'light' | 'dark'
 type Language = 'en' | 'fr' | 'ar'

 type Dictionary = {
@@ -15,7 +15,6 @@ type Dictionary = {
  ownerSignIn: string
  theme: string
  light: string
-  medium: string
  dark: string
 }

@@ -50,7 +49,6 @@ export default function MarketplaceHeader({
  const [themeMenuOpen, setThemeMenuOpen] = useState(false)
  const themeOptions = [
    { value: 'light' as const, label: dict.light },
-    { value: 'medium' as const, label: dict.medium },
    { value: 'dark' as const, label: dict.dark },
  ]
  const currentTheme = themeOptions.find((option) => option.value === theme) ?? themeOptions[0]
@@ -1,15 +1,12 @@
 'use client'

 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import { usePathname, useRouter } from 'next/navigation'
-import MarketplaceFooter from '@/components/MarketplaceFooter'
-import MarketplaceHeader from '@/components/MarketplaceHeader'
+import { useRouter } from 'next/navigation'
 import { footerPageHref } from '@/lib/footerContent'
 import { MARKETPLACE_LANGUAGE_COOKIE, SHARED_LANGUAGE_COOKIE, isMarketplaceLanguage, type MarketplaceLanguage } from '@/lib/i18n'
-import { resolveBrowserAppUrl } from '@/lib/appUrls'
 import { SHARED_LANGUAGE_KEY, SHARED_THEME_KEY, readCurrentUserScopedPreference, readScopedPreference, writeScopedPreference } from '@/lib/preferences'

-type Theme = 'light' | 'medium' | 'dark'
+type Theme = 'light' | 'dark'

 type Dictionary = {
  marketplace: string
@@ -19,7 +16,6 @@ type Dictionary = {
  language: string
  theme: string
  light: string
-  medium: string
  dark: string
  preferences: string
 }
@@ -33,7 +29,6 @@ const dictionaries: Record<MarketplaceLanguage, Dictionary> = {
    language: 'Language',
    theme: 'Theme',
    light: 'Light',
-    medium: 'Medium',
    dark: 'Dark',
    preferences: 'Marketplace preferences',
  },
@@ -41,11 +36,10 @@ const dictionaries: Record<MarketplaceLanguage, Dictionary> = {
    marketplace: 'Accueil',
    explore: 'Marketplace',
    signIn: 'Connexion',
-    ownerSignIn: 'Créer un espace d’agence',
+    ownerSignIn: "Créer un espace d'agence",
    language: 'Langue',
    theme: 'Mode',
    light: 'Clair',
-    medium: 'Moyen',
    dark: 'Sombre',
    preferences: 'Préférences marketplace',
  },
@@ -57,29 +51,18 @@ const dictionaries: Record<MarketplaceLanguage, Dictionary> = {
    language: 'اللغة',
    theme: 'الوضع',
    light: 'فاتح',
-    medium: 'متوسط',
    dark: 'داكن',
    preferences: 'تفضيلات السوق',
  },
 }

-type PreferencesContextValue = {
-  language: MarketplaceLanguage
-  theme: Theme
-  dict: Dictionary
-  setLanguage: (language: MarketplaceLanguage) => void
-  setTheme: (theme: Theme) => void
-}
-
-const PreferencesContext = createContext<PreferencesContextValue | null>(null)
-
-const localeOptions: Array<{ value: MarketplaceLanguage; label: string; flag: string }> = [
+export const localeOptions: Array<{ value: MarketplaceLanguage; label: string; flag: string }> = [
  { value: 'en', label: 'Global (English)', flag: '🇺🇸' },
  { value: 'ar', label: 'North Africa (Arabic)', flag: '🇲🇦' },
  { value: 'fr', label: 'Europe (French)', flag: '🇫🇷' },
 ]

-function getFooterContent(language: MarketplaceLanguage): {
+export function getFooterContent(language: MarketplaceLanguage): {
  primary: Array<{ label: string; href?: string }>
  secondary: Array<{ label: string; href?: string }>
  localeLabel: string
@@ -90,7 +73,7 @@ function getFooterContent(language: MarketplaceLanguage): {
      return {
        primary: [
          { label: 'À propos de nous', href: footerPageHref['about-us'] },
-          { label: 'Conditions d’utilisation', href: footerPageHref['terms-of-service'] },
+          { label: "Conditions d'utilisation", href: footerPageHref['terms-of-service'] },
          { label: 'Sécurité', href: footerPageHref.security },
          { label: 'Conformité', href: footerPageHref.compliance },
          { label: 'Politique de confidentialité', href: footerPageHref['privacy-policy'] },
@@ -154,6 +137,17 @@ function detectBrowserLanguage(): string | null {
  return null
 }

+type PreferencesContextValue = {
+  language: MarketplaceLanguage
+  theme: Theme
+  dict: Dictionary
+  companyName: string | null
+  setLanguage: (language: MarketplaceLanguage) => void
+  setTheme: (theme: Theme) => void
+}
+
+const PreferencesContext = createContext<PreferencesContextValue | null>(null)
+
 export function useMarketplacePreferences() {
  const context = useContext(PreferencesContext)
  if (!context) throw new Error('useMarketplacePreferences must be used within MarketplaceShell')
@@ -167,9 +161,7 @@ export default function MarketplaceShell({
  children: React.ReactNode
  initialLanguage?: MarketplaceLanguage
 }) {
-  const pathname = usePathname()
  const router = useRouter()
-  const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001/dashboard')
  const apiUrl = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000/api/v1'
  const [language, setLanguageState] = useState<MarketplaceLanguage>(initialLanguage)
  const [theme, setThemeState] = useState<Theme>('light')
@@ -196,7 +188,7 @@ export default function MarketplaceShell({
    if (nextTheme === theme) return

    if (typeof window !== 'undefined') {
-      document.documentElement.classList.toggle('dark', nextTheme === 'dark' || nextTheme === 'medium')
+      document.documentElement.classList.toggle('dark', nextTheme === 'dark')
      document.documentElement.style.colorScheme = nextTheme === 'light' ? 'light' : 'dark'
      document.body.dataset.theme = nextTheme
      writeScopedPreference(SHARED_THEME_KEY, nextTheme, ['marketplace-theme'])
@@ -245,8 +237,6 @@ export default function MarketplaceShell({
  }

  function syncScopedPreferencesForSession() {
-    // Tab-session choice always wins — never let an employee-scoped cookie override
-    // a language the user explicitly picked during this browsing session.
    const sessionLang = readSessionLanguage()
    if (sessionLang) {
      if (sessionLang !== language) setLanguageState(sessionLang)
@@ -258,7 +248,7 @@ export default function MarketplaceShell({
    }

    const scopedTheme = readCurrentUserScopedPreference(SHARED_THEME_KEY)
-    if ((scopedTheme === 'light' || scopedTheme === 'medium' || scopedTheme === 'dark') && scopedTheme !== theme) {
+    if ((scopedTheme === 'light' || scopedTheme === 'dark') && scopedTheme !== theme) {
      setThemeState(scopedTheme)
    } else {
      writeScopedPreference(SHARED_THEME_KEY, theme, ['marketplace-theme'])
@@ -266,14 +256,9 @@ export default function MarketplaceShell({
  }

  useEffect(() => {
-    // sessionStorage is tab-local — check it first so a selection made earlier in
-    // this tab is honoured even after a server refresh.
    const sessionLang = readSessionLanguage()
    if (sessionLang) {
      setLanguageState(sessionLang)
-      // Write the persistent cookie immediately so any subsequent RSC request
-      // (e.g. router.refresh or next navigation) sees the correct language
-      // without waiting for the language effect's render cycle.
      writeScopedPreference(SHARED_LANGUAGE_KEY, sessionLang, ['marketplace-language'])
    } else {
      const storedLanguage = readScopedPreference(SHARED_LANGUAGE_KEY, ['marketplace-language'])
@@ -290,7 +275,7 @@ export default function MarketplaceShell({
    }

    const storedTheme = readScopedPreference(SHARED_THEME_KEY, ['marketplace-theme']) as Theme | null
-    if (storedTheme === 'light' || storedTheme === 'medium' || storedTheme === 'dark') {
+    if (storedTheme === 'light' || storedTheme === 'dark') {
      setThemeState(storedTheme)
    }

@@ -330,9 +315,6 @@ export default function MarketplaceShell({
    document.documentElement.lang = language
    document.documentElement.dir = language === 'ar' ? 'rtl' : 'ltr'

-    // Don't write to storage on the initial render (language='en' default) — wait
-    // until hydration has resolved the correct stored preference.  Writing 'en'
-    // here before hydration would overwrite a previously-saved 'ar' preference.
    if (!hydrated) return

    try { sessionStorage.setItem('marketplace-language', language) } catch {}
@@ -342,64 +324,18 @@ export default function MarketplaceShell({
      router.refresh()
    }
    previousLanguage.current = language
-  }, [hydrated, language, pathname, router])
+  }, [hydrated, language, router])

  useEffect(() => {
-    document.documentElement.classList.toggle('dark', theme === 'dark' || theme === 'medium')
+    document.documentElement.classList.toggle('dark', theme === 'dark')
    document.body.dataset.theme = theme
    writeScopedPreference(SHARED_THEME_KEY, theme, ['marketplace-theme'])
  }, [theme])

-  const dict = dictionaries[language]
-  const footerContent = getFooterContent(language)
-  const availableLocaleOptions = localeOptions.filter((option) => option.value !== language)
-  const currentLocale = localeOptions.find((option) => option.value === language) ?? localeOptions[0]
-  const isRenterApp = pathname.startsWith('/renter/')
-  const isAuthFrameRoute = pathname === '/sign-in'
  const value = useMemo(
-    () => ({ language, theme, dict, setLanguage: applyLanguage, setTheme: applyTheme }),
-    [dict, language, theme],
+    () => ({ language, theme, dict: dictionaries[language], companyName, setLanguage: applyLanguage, setTheme: applyTheme }),
+    [language, theme, companyName],
  )

-  return (
-    <PreferencesContext.Provider value={value}>
-      <div className="flex min-h-screen flex-col bg-stone-50 text-stone-900 transition-colors dark:bg-stone-950 dark:text-stone-100">
-        {isRenterApp || isAuthFrameRoute ? null : (
-          <MarketplaceHeader
-            dict={dict}
-            theme={theme}
-            setTheme={applyTheme}
-            companyName={companyName}
-            dashboardUrl={dashboardUrl}
-            currentLanguage={{
-              value: currentLocale.value,
-              flag: currentLocale.flag,
-              shortLabel: currentLocale.value.toUpperCase(),
-            }}
-            localeOptions={availableLocaleOptions.map((option) => ({
-              value: option.value,
-              flag: option.flag,
-              shortLabel: option.value.toUpperCase(),
-            }))}
-            onSelectLanguage={applyLanguage}
-          />
-        )}
-
-        <div className="flex flex-1 flex-col">
-          <div className="flex-1">{children}</div>
-          {isRenterApp || isAuthFrameRoute ? null : (
-            <MarketplaceFooter
-              primaryItems={footerContent.primary}
-              secondaryItems={footerContent.secondary}
-              localeLabel={footerContent.localeLabel}
-              rightsLabel={footerContent.rightsLabel}
-              localeOptions={availableLocaleOptions}
-              currentLocale={currentLocale}
-              onSelectLanguage={applyLanguage}
-            />
-          )}
-        </div>
-      </div>
-    </PreferencesContext.Provider>
-  )
+  return <PreferencesContext.Provider value={value}>{children}</PreferencesContext.Provider>
 }
@@ -1,7 +1,6 @@
 'use client'

 import { useEffect, useState } from 'react'
-import { usePathname } from 'next/navigation'
 import { resolveBrowserAppUrl } from '@/lib/appUrls'
 import { useMarketplacePreferences } from './MarketplaceShell'

@@ -44,14 +43,13 @@ function buildFrameUrl(appUrl: string, path: string) {
  return appBase.toString()
 }

+const FRAME_HEIGHT = 'calc(100vh - 56px)'
+
 export default function WorkspaceFrame({ target }: { target: FrameId }) {
-  const pathname = usePathname()
  const { language, theme } = useMarketplacePreferences()
  const [src, setSrc] = useState('')
  const [framePath, setFramePath] = useState(() => getDefaultFramePath(target))
  const config = frameConfig[target]
-  const isStandaloneAuthRoute = target === 'sign-in' && pathname === '/sign-in'
-  const frameHeight = isStandaloneAuthRoute ? '100vh' : 'calc(100vh - 56px)'
  const loadingLabel = {
    en: 'Loading',
    fr: 'Chargement',
@@ -62,13 +60,6 @@ export default function WorkspaceFrame({ target }: { target: FrameId }) {
    setFramePath(getDefaultFramePath(target))
  }, [target])

-  useEffect(() => {
-    if (!isStandaloneAuthRoute || typeof window === 'undefined') return
-    if (window.location.pathname !== '/sign-in') return
-
-    window.history.replaceState(window.history.state, '', '/')
-  }, [isStandaloneAuthRoute])
-
  useEffect(() => {
    function handleFrameMessage(event: MessageEvent) {
      if (!event.data || typeof event.data !== 'object') return
@@ -88,25 +79,21 @@ export default function WorkspaceFrame({ target }: { target: FrameId }) {
    const nextUrl = new URL(buildFrameUrl(config.appUrl, framePath))
    nextUrl.searchParams.set('theme', theme)
    nextUrl.searchParams.set('lang', language)
-    if (isStandaloneAuthRoute) {
-      nextUrl.searchParams.delete('embedded')
-    } else {
-      nextUrl.searchParams.set('embedded', '1')
-    }
+    nextUrl.searchParams.set('embedded', '1')
    setSrc(nextUrl.toString())
-  }, [config.appUrl, framePath, isStandaloneAuthRoute, language, theme])
+  }, [config.appUrl, framePath, language, theme])

  return (
-    <main className="bg-stone-950" style={{ minHeight: frameHeight }}>
+    <main className="bg-stone-950" style={{ minHeight: FRAME_HEIGHT }}>
      {src ? (
        <iframe
          title={config.label}
          src={src}
          className="w-full border-0 bg-white"
-          style={{ height: frameHeight }}
+          style={{ height: FRAME_HEIGHT }}
        />
      ) : (
-        <div className="flex items-center justify-center text-sm text-stone-300" style={{ height: frameHeight }}>
+        <div className="flex items-center justify-center text-sm text-stone-300" style={{ height: FRAME_HEIGHT }}>
          {loadingLabel} {config.label}…
        </div>
      )}
@@ -92,7 +92,7 @@ services:
      - .env.docker.dev
    environment:
      FILE_STORAGE_ROOT: /var/lib/rentaldrivego/storage
-    command: ["npm", "run", "dev", "--workspace", "@rentaldrivego/api"]
+    command: ["sh", "-c", "npm run build --workspace @rentaldrivego/types && cd /app/apps/api && exec /app/node_modules/.bin/ts-node-dev --respawn --transpile-only src/index.ts"]
    ports:
      - "4000:4000"
    volumes:
@@ -0,0 +1,78 @@
+#!/usr/bin/env node
+
+const fs = require('node:fs')
+const path = require('node:path')
+const { spawn } = require('node:child_process')
+
+function parseEnvFile(content) {
+  const env = {}
+
+  for (const rawLine of content.split(/\r?\n/)) {
+    const line = rawLine.trim()
+    if (!line || line.startsWith('#')) continue
+
+    const normalized = line.startsWith('export ') ? line.slice(7).trim() : line
+    const separatorIndex = normalized.indexOf('=')
+    if (separatorIndex === -1) continue
+
+    const key = normalized.slice(0, separatorIndex).trim()
+    if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(key)) continue
+
+    let value = normalized.slice(separatorIndex + 1)
+
+    if (
+      (value.startsWith('"') && value.endsWith('"')) ||
+      (value.startsWith("'") && value.endsWith("'"))
+    ) {
+      const quote = value[0]
+      value = value.slice(1, -1)
+
+      if (quote === '"') {
+        value = value
+          .replace(/\\n/g, '\n')
+          .replace(/\\r/g, '\r')
+          .replace(/\\t/g, '\t')
+          .replace(/\\"/g, '"')
+          .replace(/\\\\/g, '\\')
+      }
+    }
+
+    env[key] = value
+  }
+
+  return env
+}
+
+const [, , envFileArg, commandArg, ...commandArgs] = process.argv
+
+if (!envFileArg || !commandArg) {
+  console.error('Usage: node run-with-env-file.cjs <env-file> <command> [args...]')
+  process.exit(1)
+}
+
+const envFilePath = path.resolve(process.cwd(), envFileArg)
+const commandPath = path.resolve(process.cwd(), commandArg)
+const fileContent = fs.readFileSync(envFilePath, 'utf8')
+const parsedEnv = parseEnvFile(fileContent)
+
+const child = spawn(commandPath, commandArgs, {
+  stdio: 'inherit',
+  env: {
+    ...process.env,
+    ...parsedEnv,
+  },
+})
+
+child.on('exit', (code, signal) => {
+  if (signal) {
+    process.kill(process.pid, signal)
+    return
+  }
+
+  process.exit(code ?? 0)
+})
+
+child.on('error', (error) => {
+  console.error(error.message)
+  process.exit(1)
+})