Studio: Add feature flag for the new Agents tab

apps/studio/src/components/content-tab-agents.tsx

@@ -0,0 +1,3 @@
+export function ContentTabAgents() {
+	return <div className="p-8" />;
+}

apps/studio/src/components/root.tsx

@@ -37,9 +37,9 @@ const Root = () => {
 					<I18nProvider i18n={ defaultI18n }>
 						<WordPressStyles />
 						<AuthProvider>
-							<ContentTabsProvider>
-								<SiteDetailsProvider>
-									<FeatureFlagsProvider>
+							<FeatureFlagsProvider>
+								<ContentTabsProvider>
+									<SiteDetailsProvider>
 										<ThemeDetailsProvider>
 											<OnboardingProvider>
 												<ImportExportProvider>
@@ -49,9 +49,9 @@ const Root = () => {
 												</ImportExportProvider>
 											</OnboardingProvider>
 										</ThemeDetailsProvider>
-									</FeatureFlagsProvider>
-								</SiteDetailsProvider>
-							</ContentTabsProvider>
+									</SiteDetailsProvider>
+								</ContentTabsProvider>
+							</FeatureFlagsProvider>
 						</AuthProvider>
 					</I18nProvider>
 				</ReduxProvider>

apps/studio/src/components/site-content-tabs.tsx

@@ -1,6 +1,7 @@
 import { TabPanel } from '@wordpress/components';
 import { useI18n } from '@wordpress/react-i18n';
 import { useEffect, useRef, useState } from 'react';
+import { ContentTabAgents } from 'src/components/content-tab-agents';
 import { ContentTabAssistant } from 'src/components/content-tab-assistant';
 import { ContentTabImportExport } from 'src/components/content-tab-import-export';
 import { ContentTabOverview } from 'src/components/content-tab-overview';
@@ -108,6 +109,7 @@ export function SiteContentTabs() {
 						{ name === 'sync' && <ContentTabSync selectedSite={ selectedSite } /> }
 						{ name === 'settings' && <ContentTabSettings selectedSite={ selectedSite } /> }
 						{ name === 'assistant' && <ContentTabAssistant selectedSite={ selectedSite } /> }
+						{ name === 'agents' && <ContentTabAgents /> }
 						{ name === 'import-export' && <ContentTabImportExport selectedSite={ selectedSite } /> }
 					</div>
 				) }

apps/studio/src/hooks/use-content-tabs.tsx

@@ -1,14 +1,23 @@
 import { TabPanel } from '@wordpress/components';
 import { useI18n } from '@wordpress/react-i18n';
 import { createContext, ReactNode, useContext, useMemo, useState } from 'react';
+import { useFeatureFlags } from 'src/hooks/use-feature-flags';
 
-export type TabName = 'overview' | 'sync' | 'settings' | 'assistant' | 'import-export' | 'previews';
+export type TabName =
+	| 'overview'
+	| 'sync'
+	| 'settings'
+	| 'assistant'
+	| 'agents'
+	| 'import-export'
+	| 'previews';
 type Tab = React.ComponentProps< typeof TabPanel >[ 'tabs' ][ number ] & {
 	name: TabName;
 };
 
 function useTabs() {
 	const { __ } = useI18n();
+	const { enableAgentSuite } = useFeatureFlags();
 
 	return useMemo( () => {
 		const tabs: Tab[] = [
@@ -42,15 +51,26 @@ function useTabs() {
 			}
 		);
 
-		tabs.push( {
-			order: 6,
-			name: 'assistant',
-			title: __( 'Assistant' ),
-			className: 'components-tab-panel__tabs--assistant ltr:pl-8 rtl:pr-8 ltr:ml-auto rtl:mr-auto',
-		} );
+		if ( enableAgentSuite ) {
+			tabs.push( {
+				order: 6,
+				name: 'agents',
+				title: __( 'Agents' ),
+				className:
+					'components-tab-panel__tabs--assistant ltr:pl-8 rtl:pr-8 ltr:ml-auto rtl:mr-auto',
+			} );
+		} else {
+			tabs.push( {
+				order: 6,
+				name: 'assistant',
+				title: __( 'Assistant' ),
+				className:
+					'components-tab-panel__tabs--assistant ltr:pl-8 rtl:pr-8 ltr:ml-auto rtl:mr-auto',
+			} );
+		}
 
 		return tabs.sort( ( a, b ) => a.order - b.order );
-	}, [ __ ] );
+	}, [ __, enableAgentSuite ] );
 }
 interface ContentTabsContextType {
 	selectedTab: TabName;

apps/studio/src/ipc-types.d.ts

@@ -86,6 +86,7 @@ type IpcApi = {
 
 interface FeatureFlags {
 	enableBlueprints: boolean;
+	enableAgentSuite: boolean;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type

apps/studio/src/lib/feature-flags.ts

@@ -12,6 +12,12 @@ export const FEATURE_FLAGS: Record< keyof FeatureFlags, FeatureFlagDefinition >
 		flag: 'enableBlueprints',
 		default: true,
 	},
+	enableAgentSuite: {
+		label: 'Enable Agent Suite',
+		env: 'ENABLE_AGENT_SUITE',
+		flag: 'enableAgentSuite',
+		default: false,
+	},
 } as const;
 
 export function getFeatureFlagFromEnv( flag: keyof FeatureFlags ): boolean {