🚩 refactor(template): replace TEMPLATE_OVERRIDE env var with vercel/flags templateFlag

Use the flags SDK to control template selection (expo-testing vs react-native-expo)
instead of NEXT_PUBLIC_TEMPLATE environment variable.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: bidah

apps/web/app/(app)/p/[id]/page.tsx

@@ -1,8 +1,9 @@
-import { opencodeEnabled } from '@/flags'
+import { opencodeEnabled, templateFlag } from '@/flags'
 import { ProjectPageWrapper } from './project-page-wrapper'
 
 export default async function Page() {
   const showOpencode = await opencodeEnabled()
+  const template = await templateFlag()
 
-  return <ProjectPageWrapper opencodeEnabled={!!showOpencode} />
+  return <ProjectPageWrapper opencodeEnabled={!!showOpencode} template={template as 'expo-testing' | 'react-native-expo'} />
 }

apps/web/app/(app)/p/[id]/project-page-wrapper.tsx

@@ -8,6 +8,6 @@ const ProjectPage = dynamic(
   { ssr: false, loading: () => <Loading /> },
 )
 
-export function ProjectPageWrapper({ opencodeEnabled }: { opencodeEnabled: boolean }) {
-  return <ProjectPage opencodeEnabled={opencodeEnabled} />
+export function ProjectPageWrapper({ opencodeEnabled, template }: { opencodeEnabled: boolean; template: 'expo-testing' | 'react-native-expo' }) {
+  return <ProjectPage opencodeEnabled={opencodeEnabled} template={template} />
 }

apps/web/app/(app)/p/[id]/project-page.tsx

@@ -50,9 +50,7 @@ import { useIsMobile } from '@/hooks/use-mobile'
 import { AppSidebar } from '@/components/app-sidebar'
 import Loading from './loading'
 
-export function ProjectPageInternal({ opencodeEnabled = false }: { opencodeEnabled?: boolean }) {
-  // Toggle to true to force expo-testing template during development
-  const EXPO_TESTING = false
+export function ProjectPageInternal({ opencodeEnabled = false, template: templateOverride }: { opencodeEnabled?: boolean; template?: 'expo-testing' | 'react-native-expo' }) {
 
   const params = useParams()
   const projectID = params?.id as string
@@ -80,7 +78,7 @@ export function ProjectPageInternal({ opencodeEnabled = false }: { opencodeEnabl
     })
   }, [])
   const [selectedTemplate, setSelectedTemplate] = useState<'auto' | TemplateId>(
-    EXPO_TESTING ? 'expo-testing' : 'react-native-expo',
+    templateOverride || 'react-native-expo',
   )
   const [languageModel, setLanguageModel] = useCookieStorage<LLMModelConfig>(
     'languageModel',
@@ -1824,7 +1822,7 @@ export function ProjectPageInternal({ opencodeEnabled = false }: { opencodeEnabl
     console.log('Creating new project with:', {
       id: projectId,
       title: 'Generating project name...',
-      template: EXPO_TESTING ? 'expo-testing' : (templateFromUrl || selectedTemplate || 'react-native-expo'),
+      template: templateOverride || templateFromUrl || selectedTemplate || 'react-native-expo',
       userID: session?.user?.id,
     })
 
@@ -1837,7 +1835,7 @@ export function ProjectPageInternal({ opencodeEnabled = false }: { opencodeEnabl
         body: JSON.stringify({
           id: projectId,
           title: 'Generating project name...',
-          template: EXPO_TESTING ? 'expo-testing' : (templateFromUrl || selectedTemplate || 'react-native-expo'),
+          template: templateOverride || templateFromUrl || selectedTemplate || 'react-native-expo',
           userID: session?.user?.id,
         }),
       })
@@ -1969,7 +1967,7 @@ export function ProjectPageInternal({ opencodeEnabled = false }: { opencodeEnabl
           projectId: project.id,
           userID: session?.user?.id,
           teamID: userTeam?.id,
-          chooseTemplate: EXPO_TESTING ? 'expo-testing' : 'expo',
+          chooseTemplate: templateOverride || 'expo',
           firstMessage: firstMessage ? { role: 'user', content: firstMessage } : undefined, // Pass first message for title generation
         }),
       })
@@ -2055,7 +2053,7 @@ export function ProjectPageInternal({ opencodeEnabled = false }: { opencodeEnabl
           sbxId: result.sandboxId,
           projectId: result.projectId,
           projectTitle: result.projectTitle,
-          template: EXPO_TESTING ? 'expo-testing' : (project.template || 'react-native-expo'),
+          template: templateOverride || project.template || 'react-native-expo',
           recreated: result.recreated,
         })
 

apps/web/flags.ts

@@ -16,3 +16,11 @@ export const tunnelMode = flag<string>({
     ? { adapter: vercelAdapter() }
     : { decide: () => 'ngrok-patch' }),
 })
+
+export const templateFlag = flag<string>({
+  key: 'template',
+  defaultValue: 'react-native-expo',
+  ...(process.env.FLAGS
+    ? { adapter: vercelAdapter() }
+    : { decide: () => 'react-native-expo' }),
+})