feat: create named feature flag for settings v2 (#1976)

ui/desktop/src/App.tsx

@@ -11,6 +11,7 @@ import ErrorScreen from './components/ErrorScreen';
 import { ConfirmationModal } from './components/ui/ConfirmationModal';
 import { ToastContainer } from 'react-toastify';
 import { toastService } from './toasts';
+import { settingsV2Enabled } from './flags';
 import { extractExtensionName } from './components/settings/extensions/utils';
 import { GoosehintsModal } from './components/GoosehintsModal';
 import { SessionDetails } from './sessions';
@@ -75,7 +76,7 @@ export default function App() {
   }
 
   useEffect(() => {
-    if (!process.env.ALPHA) {
+    if (!settingsV2Enabled) {
       return;
     }
 
@@ -86,7 +87,7 @@ export default function App() {
     }
     initAttemptedRef.current = true;
 
-    console.log(`Initializing app in alpha mode...`);
+    console.log(`Initializing app with settings v2`);
 
     const initializeApp = async () => {
       try {
@@ -265,7 +266,7 @@ export default function App() {
       console.log(`Confirming installation of extension from: ${pendingLink}`);
       setModalVisible(false); // Dismiss modal immediately
       try {
-        if (process.env.ALPHA) {
+        if (settingsV2Enabled) {
           await addExtensionFromDeepLinkV2(pendingLink, addExtension, setView);
         } else {
           await addExtensionFromDeepLink(pendingLink, setView);
@@ -292,11 +293,11 @@ export default function App() {
   const { addRecentModel } = useRecentModels(); // TODO: remove
 
   useEffect(() => {
-    if (process.env.ALPHA) {
+    if (settingsV2Enabled) {
       return;
     }
 
-    console.log(`Initializing app in non-alpha mode...`);
+    console.log(`Initializing app with settings v1`);
 
     // Attempt to detect config for a stored provider
     const detectStoredProvider = () => {
@@ -405,7 +406,7 @@ export default function App() {
         <div className="titlebar-drag-region" />
         <div>
           {view === 'welcome' &&
-            (process.env.ALPHA ? (
+            (settingsV2Enabled ? (
               <ProviderSettings onClose={() => setView('chat')} isOnboarding={true} />
             ) : (
               <WelcomeView
@@ -415,7 +416,7 @@ export default function App() {
               />
             ))}
           {view === 'settings' &&
-            (process.env.ALPHA ? (
+            (settingsV2Enabled ? (
               <SettingsViewV2
                 onClose={() => {
                   setView('chat');

ui/desktop/src/components/BottomMenu.tsx

@@ -5,6 +5,7 @@ import { Sliders } from 'lucide-react';
 import { ModelRadioList } from './settings/models/ModelRadioList';
 import { Document, ChevronUp, ChevronDown } from './icons';
 import type { View } from '../App';
+import { settingsV2Enabled } from '../flags';
 import { BottomMenuModeSelection } from './BottomMenuModeSelection';
 import ModelsBottomBar from './settings_v2/models/bottom_bar/ModelsBottomBar';
 
@@ -78,7 +79,7 @@ export default function BottomMenu({
       <BottomMenuModeSelection />
 
       {/* Model Selector Dropdown */}
-      {process.env.ALPHA ? (
+      {settingsV2Enabled ? (
         <ModelsBottomBar dropdownRef={dropdownRef} setView={setView} />
       ) : (
         <div className="relative flex items-center ml-auto mr-4" ref={dropdownRef}>

ui/desktop/src/components/BottomMenuModeSelection.tsx

@@ -7,6 +7,7 @@ import {
   ModeSelectionItem,
 } from './settings/basic/ModeSelectionItem';
 import { useConfig } from './ConfigContext';
+import { settingsV2Enabled } from '../flags';
 
 export const BottomMenuModeSelection = () => {
   const [isGooseModeMenuOpen, setIsGooseModeMenuOpen] = useState(false);
@@ -18,7 +19,7 @@ export const BottomMenuModeSelection = () => {
   useEffect(() => {
     const fetchCurrentMode = async () => {
       try {
-        if (!process.env.ALPHA) {
+        if (!settingsV2Enabled) {
           const response = await fetch(getApiUrl('/configs/get?key=GOOSE_MODE'), {
             method: 'GET',
             headers: {
@@ -85,7 +86,7 @@ export const BottomMenuModeSelection = () => {
       return;
     }
 
-    if (!process.env.ALPHA) {
+    if (!settingsV2Enabled) {
       const storeResponse = await fetch(getApiUrl('/configs/store'), {
         method: 'POST',
         headers: {

ui/desktop/src/components/more_menu/MoreMenu.tsx

@@ -9,7 +9,7 @@ import { ChatSmart, Idea, More, Refresh, Time, Send } from '../icons';
 import { FolderOpen, Moon, Sliders, Sun } from 'lucide-react';
 import { View } from '../../App';
 import { useConfig } from '../ConfigContext';
-import { toastService } from '../../toasts';
+import { settingsV2Enabled } from '../../flags';
 
 interface VersionInfo {
   current_version: string;
@@ -257,7 +257,7 @@ export default function MoreMenu({
                 <span className="text-textSubtle ml-1">⌘,</span>
               </MenuButton>
 
-              {process.env.ALPHA && (
+              {settingsV2Enabled && (
                 <MenuButton
                   onClick={async () => {
                     await remove('GOOSE_PROVIDER', false);
@@ -274,7 +274,7 @@ export default function MoreMenu({
                 </MenuButton>
               )}
 
-              {!process.env.ALPHA && (
+              {!settingsV2Enabled && (
                 <MenuButton
                   onClick={() => {
                     localStorage.removeItem('GOOSE_PROVIDER');

ui/desktop/src/flags.ts

@@ -0,0 +1 @@
+export const settingsV2Enabled = process.env.ALPHA;

ui/desktop/src/utils/providerUtils.ts

@@ -4,6 +4,7 @@ import { GOOSE_PROVIDER, GOOSE_MODEL } from '../env_vars';
 import { Model } from '../components/settings/models/ModelContext';
 import { gooseModels } from '../components/settings/models/GooseModels';
 import { initializeAgent } from '../agent';
+import { settingsV2Enabled } from '../flags';
 import {
   initializeBundledExtensions,
   syncBundledExtensions,
@@ -85,7 +86,7 @@ export const initializeSystem = async (
     await initializeAgent({ provider, model });
 
     // This will go away after the release of settings v2 as this is now handled in config.yaml
-    if (!process.env.ALPHA) {
+    if (!settingsV2Enabled) {
       // Sync the model state with React
       const syncedModel = syncModelWithAgent(provider, model);
       console.log('Model synced with React state:', syncedModel);
@@ -118,7 +119,7 @@ export const initializeSystem = async (
       }
     }
 
-    if (process.env.ALPHA) {
+    if (settingsV2Enabled) {
       if (!options?.getExtensions || !options?.addExtension) {
         console.warn('Extension helpers not provided in alpha mode');
         return;