Add VIP Local Development Environment support

src/components/app.tsx

@@ -4,9 +4,9 @@ import {
 } from '@wordpress/components';
 import { useEffect } from 'react';
 import MacTitlebar from 'src/components/mac-titlebar';
+import { MainContent } from 'src/components/main-content';
 import MainSidebar from 'src/components/main-sidebar';
 import { NoStudioSites } from 'src/components/no-studio-sites';
-import { SiteContentTabs } from 'src/components/site-content-tabs';
 import TopBar from 'src/components/top-bar';
 import WindowsTitlebar from 'src/components/windows-titlebar';
 import { useLocalizationSupport } from 'src/hooks/use-localization-support';
@@ -18,6 +18,7 @@ import { getIpcApi } from 'src/lib/get-ipc-api';
 import { Onboarding } from 'src/modules/onboarding';
 import { useOnboarding } from 'src/modules/onboarding/hooks/use-onboarding';
 import { UserSettings } from 'src/modules/user-settings';
+import { VipProvider } from 'src/modules/vip/context/vip-context';
 import { WhatsNewModal, useWhatsNew } from 'src/modules/whats-new';
 import { useRootSelector } from 'src/stores';
 import { selectOnboardingLoading } from 'src/stores/onboarding-slice';
@@ -42,7 +43,7 @@ export default function App() {
 	}
 
 	return (
-		<>
+		<VipProvider>
 			{ needsOnboarding || isEmpty ? (
 				<VStack
 					className={ cx( 'h-screen backdrop-blur-3xl app-drag-region select-none' ) }
@@ -81,13 +82,13 @@ export default function App() {
 							data-testid="site-content"
 							className="bg-white h-full flex-grow rounded-chrome overflow-hidden z-10"
 						>
-							<SiteContentTabs />
+							<MainContent />
 						</main>
 					</HStack>
 				</VStack>
 			) }
 			<UserSettings />
 			<WhatsNewModal showModal={ shouldShowWhatsNew } onClose={ closeWhatsNew } />
-		</>
+		</VipProvider>
 	);
 }

src/components/main-content.tsx

@@ -0,0 +1,30 @@
+import { useSiteDetails } from 'src/hooks/use-site-details';
+import { VipContentTabs } from 'src/modules/vip/components/vip-content-tabs';
+import { useVipContext } from 'src/modules/vip/context/vip-context';
+import { SiteContentTabs } from './site-content-tabs';
+
+/**
+ * Main content area that displays either regular site content or VIP environment content
+ * based on which is currently selected.
+ *
+ * VIP environment is checked first because the regular site selection has fallback behavior
+ * that always returns a site when sites exist. When a user actively clicks a VIP environment,
+ * that selection should take priority.
+ */
+export function MainContent() {
+	const { selectedSite } = useSiteDetails();
+	const { selectedEnvironment } = useVipContext();
+
+	// If a VIP environment is selected, show VIP content (check first due to regular site fallback behavior)
+	if ( selectedEnvironment ) {
+		return <VipContentTabs />;
+	}
+
+	// If a regular site is selected, show regular site content
+	if ( selectedSite ) {
+		return <SiteContentTabs />;
+	}
+
+	// Default to regular site content tabs (which handles the "no site selected" state)
+	return <SiteContentTabs />;
+}

src/components/main-sidebar.tsx

@@ -5,13 +5,15 @@ import { useSiteDetails } from 'src/hooks/use-site-details';
 import { isMac } from 'src/lib/app-globals';
 import { cx } from 'src/lib/cx';
 import AddSite from 'src/modules/add-site';
+import VipSiteMenu from 'src/modules/vip/components/vip-site-menu';
 
 interface MainSidebarProps {
 	className?: string;
 }
 
 export default function MainSidebar( { className }: MainSidebarProps ) {
 	const { sites: localSites } = useSiteDetails();
+	const hasLocalSites = localSites.length > 0;
 
 	return (
 		<div
@@ -23,28 +25,29 @@ export default function MainSidebar( { className }: MainSidebarProps ) {
 				className
 			) }
 		>
-			{ ! localSites.length ? (
-				<div className="flex h-full px-[20px] justify-center items-center app-no-drag-region text-center text-[12px] text-a8c-gray-50">
-					{ __( 'Your sites will show up here once you create them' ) }
-				</div>
-			) : (
-				<div className="flex flex-col h-full">
-					<div
-						className={ cx(
-							'flex-1 overflow-y-auto sites-scrollbar app-no-drag-region',
-							isMac() ? 'ms-4' : 'ms-3'
-						) }
-					>
+			<div className="flex flex-col h-full">
+				<div
+					className={ cx(
+						'flex-1 overflow-y-auto sites-scrollbar app-no-drag-region',
+						isMac() ? 'ms-4' : 'ms-3'
+					) }
+				>
+					{ hasLocalSites ? (
 						<SiteMenu />
-					</div>
-					<div className="flex flex-col gap-4 pt-5 border-white border-t border-opacity-10 app-no-drag-region">
-						<RunningSites />
-						<div className={ cx( isMac() ? 'mx-5' : 'mx-4' ) }>
-							<AddSite className="min-w-[168px] w-full mb-4" />
+					) : (
+						<div className="flex px-[20px] py-4 justify-center items-center text-center text-[12px] text-a8c-gray-50">
+							{ __( 'Your sites will show up here once you create them' ) }
 						</div>
+					) }
+					<VipSiteMenu />
+				</div>
+				<div className="flex flex-col gap-4 pt-5 border-white border-t border-opacity-10 app-no-drag-region">
+					<RunningSites />
+					<div className={ cx( isMac() ? 'mx-5' : 'mx-4' ) }>
+						<AddSite className="min-w-[168px] w-full mb-4" />
 					</div>
 				</div>
-			) }
+			</div>
 		</div>
 	);
 }

src/components/site-menu.tsx

@@ -15,6 +15,7 @@ import { cx } from 'src/lib/cx';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { supportedEditorConfig } from 'src/modules/user-settings/lib/editor';
 import { getTerminalName } from 'src/modules/user-settings/lib/terminal';
+import { useVipContext } from 'src/modules/vip/context/vip-context';
 import { useGetUserEditorQuery, useGetUserTerminalQuery } from 'src/stores/installed-apps-api';
 
 interface SiteMenuProps {
@@ -134,6 +135,7 @@ function ButtonToRun( {
 }
 function SiteItem( { site }: { site: SiteDetails } ) {
 	const { selectedSite, setSelectedSiteId, loadingServer, isSiteDeleting } = useSiteDetails();
+	const { selectEnvironment } = useVipContext();
 	const isSelected = site === selectedSite;
 	const { isSiteImporting, isSiteExporting } = useImportExport();
 	const { isSiteIdPulling, isSiteIdPushing } = useSyncSites();
@@ -193,6 +195,8 @@ function SiteItem( { site }: { site: SiteDetails } ) {
 			<button
 				className="p-2 text-xs rounded-tl rounded-bl whitespace-nowrap overflow-hidden text-ellipsis w-full text-left rtl:text-right focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-a8c-blue-50"
 				onClick={ () => {
+					// Deselect VIP environment when selecting a regular site
+					selectEnvironment( null );
 					setSelectedSiteId( site.id );
 				} }
 			>

src/ipc-handlers.ts

@@ -122,6 +122,20 @@ export {
 	showUserSettings,
 } from 'src/modules/user-settings/lib/ipc-handlers';
 
+export {
+	isVipCliAvailable,
+	getVipEnvironments,
+	getVipEnvironmentDetails,
+	startVipEnv,
+	stopVipEnv,
+	createVipEnv,
+	executeVipCliCommand,
+	openVipEnvironmentFolder,
+	openVipAppCodeFolder,
+	openVipEnvironmentInBrowser,
+	getVipDataPath,
+} from 'src/modules/vip/lib/ipc-handlers';
+
 function mergeSiteDetailsWithRunningDetails( sites: SiteDetails[] ): SiteDetails[] {
 	return sites.map( ( site ) => {
 		const server = SiteServer.get( site.id );