Sync site list when CLI creates sites while app is running

src/hooks/use-site-details.tsx

@@ -186,6 +186,21 @@ export function SiteDetailsProvider( { children }: SiteDetailsProviderProps ) {
 		}
 	} );
 
+	/*
+	 * Site Update Listeners
+	 *
+	 * Two complementary watchers keep the UI in sync with external changes:
+	 *
+	 * 1. 'site-status-changed' (from Site Status Watcher - execute-site-watch-command.ts):
+	 *    - Source: PM2 process events via `studio site list --watch`
+	 *    - Detects: Site start/stop/crash events
+	 *
+	 * 2. 'user-data-updated' (from User Data Watcher - user-data-watcher.ts):
+	 *    - Source: fs.watch on the appdata file
+	 *    - Detects: ALL changes (new sites, edits, deletions)
+	 *    - Used for: CLI site creation, property changes, external modifications
+	 *
+	 */
 	useIpcListener( 'site-status-changed', ( _, { siteId, status, url } ) => {
 		setSites( ( prevSites ) =>
 			prevSites.map( ( site ) =>
@@ -194,6 +209,16 @@ export function SiteDetailsProvider( { children }: SiteDetailsProviderProps ) {
 		);
 	} );
 
+	useIpcListener( 'user-data-updated', async () => {
+		const updatedSites = await getIpcApi().getSiteDetails();
+		setSites( updatedSites );
+
+		// Handle case where selected site was deleted externally
+		if ( selectedSiteId && ! updatedSites.find( ( site ) => site.id === selectedSiteId ) ) {
+			setSelectedSiteId( updatedSites.length ? updatedSites[ 0 ].id : '' );
+		}
+	} );
+
 	const toggleLoadingServerForSite = useCallback( ( siteId: string ) => {
 		setLoadingServer( ( currentLoading ) => ( {
 			...currentLoading,

src/ipc-handlers.ts

@@ -173,7 +173,19 @@ function mergeSiteDetailsWithRunningDetails( sites: SiteDetails[] ): SiteDetails
 	return sites.map( ( site ) => {
 		const server = SiteServer.get( site.id );
 		if ( server ) {
-			return server.details;
+			// Merge fresh data from disk with running state from server
+			// This ensures external changes (e.g., from CLI) are reflected
+			if ( server.details.running ) {
+				return {
+					...site,
+					running: true as const,
+					url: server.details.url,
+				};
+			}
+			return {
+				...site,
+				running: false as const,
+			};
 		}
 		return site;
 	} );

src/modules/cli/lib/execute-site-watch-command.ts

@@ -1,3 +1,31 @@
+/**
+ * Site Status Watcher
+ *
+ * This module monitors site running/stopped status changes by subscribing to PM2 process events
+ * via `studio site list --watch`. It's primarily used to detect status changes that occur outside
+ * of Studio's direct control, such as:
+ * - Sites started/stopped via CLI commands
+ * - Site crashes or unexpected process terminations
+ *
+ * IMPORTANT: Architecture Notes
+ * -----------------------------
+ * There are currently TWO separate watchers that update the UI with site changes:
+ *
+ * 1. Site Status Watcher (this file):
+ *    - Monitors PM2 process events (start/stop/crash)
+ *    - Only detects running/stopped status changes
+ *    - Sends 'site-status-changed' IPC events to the renderer
+ *
+ * 2. User Data Watcher (src/lib/user-data-watcher.ts):
+ *    - Monitors the appdata file directly via fs.watch
+ *    - Detects ALL changes to site data (new sites, edits, deletions)
+ *    - Sends 'user-data-updated' IPC events to the renderer
+ *
+ * The renderer (use-site-details.tsx) listens to BOTH:
+ * - 'site-status-changed': Updates running/stopped status for existing sites
+ * - 'user-data-updated': Refreshes the entire site list (handles new sites, edits, deletions)
+ *
+ */
 import { z } from 'zod';
 import { sendIpcEventToRenderer } from 'src/ipc-utils';
 import { executeCliCommand } from 'src/modules/cli/lib/execute-command';

src/tests/ipc-handlers.test.ts

@@ -283,9 +283,11 @@ describe( 'getXdebugEnabledSite', () => {
 		const result = await getXdebugEnabledSite( mockIpcMainInvokeEvent );
 
 		expect( result ).toEqual( {
+			autoStart: false,
 			id: 'site-2',
 			name: 'Site 2',
 			path: '/path/to/site-2',
+			phpVersion: '8.0',
 			running: true,
 			enableXdebug: true,
 		} );
@@ -302,9 +304,11 @@ describe( 'getXdebugEnabledSite', () => {
 		( fs.existsSync as jest.Mock ).mockReturnValue( true );
 		( SiteServer.get as jest.Mock ).mockReturnValue( {
 			details: {
+				autoStart: false,
 				id: 'site-1',
 				name: 'Site 1',
 				path: '/path/to/site-1',
+				phpVersion: '8.0',
 				running: false,
 				enableXdebug: true,
 			},
@@ -313,9 +317,11 @@ describe( 'getXdebugEnabledSite', () => {
 		const result = await getXdebugEnabledSite( mockIpcMainInvokeEvent );
 
 		expect( result ).toEqual( {
+			autoStart: false,
 			id: 'site-1',
 			name: 'Site 1',
 			path: '/path/to/site-1',
+			phpVersion: '8.0',
 			running: false,
 			enableXdebug: true,
 		} );