Agentic UI: Site-creation onboarding redesign — umbrella (do not merge)

apps/studio/src/constants.ts

@@ -17,7 +17,7 @@ export const AUTO_UPDATE_INTERVAL_MS = 60 * 60 * 1000;
 export const NIGHTLY_UPDATE_TTL_MS = 24 * 60 * 60 * 1000;
 export const MACOS_TRAFFIC_LIGHT_POSITION = { x: 20, y: 20 };
 export const WINDOWS_TITLEBAR_HEIGHT = 44;
-export const EMPTY_SITE_PLAYGROUND_URL = 'https://playground.wordpress.net/';
+export { EMPTY_SITE_PLAYGROUND_URL } from '@studio/common/constants';
 export const ABOUT_WINDOW_WIDTH = 300;
 export const ABOUT_WINDOW_HEIGHT = 350;
 export const BUG_REPORT_URL =

apps/studio/src/modules/add-site/components/new-site-options.tsx

@@ -1,3 +1,7 @@
+import {
+	curateBlueprintsForDisplay,
+	FEATURED_BLUEPRINT_SLUGS,
+} from '@studio/common/lib/blueprint-curation';
 import {
 	__experimentalVStack as VStack,
 	__experimentalHeading as Heading,
@@ -172,46 +176,6 @@ function BlueprintCard( {
 	);
 }
 
-const BLUEPRINT_DISPLAY_NAMES: Record< string, string > = {
-	'Quick Start': 'WordPress.com',
-	Development: 'WordPress Dev',
-	Commerce: 'WooCommerce',
-};
-
-function getBlueprintExcerptOverrides( __: ( text: string ) => string ): Record< string, string > {
-	return {
-		'Quick Start': __(
-			'A WordPress.com-like environment with Business plan plugins and themes pre-installed.'
-		),
-		Commerce: __(
-			'Create your next online store with WooCommerce and its companion plugins pre-installed.'
-		),
-		Development: __( 'A streamlined environment for building and testing themes or plugins.' ),
-	};
-}
-
-const BLUEPRINT_ORDER: Record< string, number > = {
-	'Quick Start': 1,
-	Commerce: 2,
-	Development: 3,
-};
-
-const FEATURED_BLUEPRINT_SLUGS = new Set( [ 'woo-shop', 'development', 'quick-start' ] );
-
-function renameBlueprintsForDisplay(
-	blueprints: Blueprint[],
-	__: ( text: string ) => string
-): Blueprint[] {
-	const excerptOverrides = getBlueprintExcerptOverrides( __ );
-	return [ ...blueprints ]
-		.sort( ( a, b ) => ( BLUEPRINT_ORDER[ a.title ] ?? 99 ) - ( BLUEPRINT_ORDER[ b.title ] ?? 99 ) )
-		.map( ( item ) => ( {
-			...item,
-			excerpt: excerptOverrides[ item.title ] || item.excerpt,
-			title: BLUEPRINT_DISPLAY_NAMES[ item.title ] || item.title,
-		} ) );
-}
-
 export function NewSiteOptions( {
 	enableBlueprints,
 	blueprints,
@@ -289,7 +253,7 @@ export function NewSiteOptions( {
 					</div>
 				) : (
 					enableBlueprints &&
-					renameBlueprintsForDisplay( featuredBlueprints, __ ).map( ( item ) => (
+					curateBlueprintsForDisplay( featuredBlueprints, __ ).map( ( item ) => (
 						<BlueprintCard
 							key={ item.slug }
 							blueprint={ item }

apps/studio/src/modules/sync/components/environment-badge.tsx

@@ -1,7 +1,7 @@
+import { getEnvironmentLabel, EnvironmentType } from '@studio/common/lib/sync/environment-utils';
 import { __ } from '@wordpress/i18n';
 import { Badge } from 'src/components/badge';
 import { cx } from 'src/lib/cx';
-import { getEnvironmentLabel, EnvironmentType } from 'src/modules/sync/lib/environment-utils';
 
 interface EnvironmentBadgeProps {
 	type: EnvironmentType;

apps/studio/src/modules/sync/components/site-name-box.tsx

@@ -1,5 +1,5 @@
 import { EnvironmentBadge, StudioBadge } from 'src/modules/sync/components/environment-badge';
-import type { EnvironmentType } from 'src/modules/sync/lib/environment-utils';
+import type { EnvironmentType } from '@studio/common/lib/sync/environment-utils';
 
 type SiteNameBoxProps = {
 	siteName: string;

apps/studio/src/modules/sync/components/sync-connected-sites.tsx

@@ -1,3 +1,4 @@
+import { getSiteEnvironment } from '@studio/common/lib/sync/environment-utils';
 import { Icon } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { sprintf } from '@wordpress/i18n';
@@ -34,7 +35,6 @@ import {
 	convertTreeToPullOptions,
 	convertTreeToPushOptions,
 } from 'src/modules/sync/lib/convert-tree-to-sync-options';
-import { getSiteEnvironment } from 'src/modules/sync/lib/environment-utils';
 import { useAppDispatch, useI18nLocale, useRootSelector } from 'src/stores';
 import {
 	syncOperationsSelectors,

apps/studio/src/modules/sync/components/sync-dialog.tsx

@@ -1,5 +1,6 @@
 import { PRESSABLE_PHP_VERSION } from '@studio/common/constants';
 import { SYNC_PUSH_SIZE_LIMIT_GB } from '@studio/common/lib/sync/constants';
+import { getSiteEnvironment } from '@studio/common/lib/sync/environment-utils';
 import {
 	Icon,
 	SelectControl,
@@ -29,7 +30,6 @@ import { SiteNameBox } from 'src/modules/sync/components/site-name-box';
 import { useSelectedItemsPushSize } from 'src/modules/sync/hooks/use-selected-items-push-size';
 import { useSyncDialogTexts } from 'src/modules/sync/hooks/use-sync-dialog-texts';
 import { useTopLevelSyncTree } from 'src/modules/sync/hooks/use-top-level-sync-tree';
-import { getSiteEnvironment } from 'src/modules/sync/lib/environment-utils';
 import { useI18nLocale } from 'src/stores';
 import {
 	useHostingPhpVersion,

apps/studio/src/modules/sync/components/sync-sites-modal-selector-classic.tsx

@@ -1,3 +1,4 @@
+import { getSiteEnvironment } from '@studio/common/lib/sync/environment-utils';
 import { Icon, SearchControl as SearchControlWp, Spinner } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
@@ -17,7 +18,6 @@ import { getLocalizedLink } from 'src/lib/get-localized-link';
 import { CreateButton } from 'src/modules/sync/components/create-button';
 import { EnvironmentBadge } from 'src/modules/sync/components/environment-badge';
 import { NoWpcomSitesModal } from 'src/modules/sync/components/no-wpcom-sites-modal';
-import { getSiteEnvironment } from 'src/modules/sync/lib/environment-utils';
 import { useI18nLocale, useRootSelector } from 'src/stores';
 import {
 	connectedSitesSelectors,

apps/studio/src/modules/sync/components/sync-sites-modal-selector.tsx

@@ -1,3 +1,5 @@
+import { getSiteEnvironment } from '@studio/common/lib/sync/environment-utils';
+import { getMshotUrl } from '@studio/common/lib/sync/mshots';
 import { Icon, SearchControl as SearchControlWp, Spinner } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
@@ -15,7 +17,6 @@ import { getLocalizedLink } from 'src/lib/get-localized-link';
 import { CreateButton } from 'src/modules/sync/components/create-button';
 import { EnvironmentBadge } from 'src/modules/sync/components/environment-badge';
 import { NoWpcomSitesModal } from 'src/modules/sync/components/no-wpcom-sites-modal';
-import { getSiteEnvironment } from 'src/modules/sync/lib/environment-utils';
 import { useI18nLocale, useRootSelector } from 'src/stores';
 import {
 	connectedSitesSelectors,
@@ -418,10 +419,6 @@ function ListSites( {
 	);
 }
 
-function getMshotUrl( siteUrl: string ): string {
-	return `https://s0.wp.com/mshots/v1/${ encodeURIComponent( siteUrl ) }?w=600&h=400`;
-}
-
 function SiteThumbnail( {
 	site,
 	isDisabled,

apps/studio/src/modules/sync/hooks/use-sync-dialog-texts.tsx

@@ -1,6 +1,6 @@
+import { EnvironmentType } from '@studio/common/lib/sync/environment-utils';
 import { useI18n } from '@wordpress/react-i18n';
 import { useMemo } from 'react';
-import { EnvironmentType } from 'src/modules/sync/lib/environment-utils';
 
 type TextByEnvironment = {
 	[ key in EnvironmentType ]: {

apps/studio/src/modules/sync/lib/ipc-handlers.ts

@@ -524,7 +524,11 @@ export async function fetchSyncableWpcomSites( _event: IpcMainInvokeEvent ): Pro
 	if ( ! token?.accessToken ) {
 		throw new Error( 'Authentication required to fetch WordPress.com sites.' );
 	}
-	return fetchSyncableSites( token.accessToken );
+	// Pass the already-connected remote IDs so the transform can mark those
+	// sites 'already-connected' instead of offering them as syncable again.
+	const connectedSites = await getAllConnectedWpcomSitesForCurrentUser();
+	const connectedSiteIds = connectedSites.map( ( site ) => site.id );
+	return fetchSyncableSites( token.accessToken, { connectedSiteIds } );
 }
 
 export async function getConnectedWpcomSites(

apps/ui/package.json

@@ -17,6 +17,7 @@
 		"@tanstack/react-query": "^5.75.5",
 		"@tanstack/react-query-persist-client": "^5.96.2",
 		"@tanstack/react-router": "^1.120.14",
+		"@wordpress/a11y": "^4.47.0",
 		"@wordpress/api-fetch": "^7.47.0",
 		"@wordpress/components": "^34.0.0",
 		"@wordpress/core-data": "^7.47.0",