Agentic UI: Add backup import to the site overview

apps/cli/commands/pull.ts

@@ -6,6 +6,7 @@ import {
 	addConnectedWpcomSite,
 	markConnectedWpcomSiteSynced,
 } from '@studio/common/lib/connected-sites';
+import { formatProgressLabel } from '@studio/common/lib/progress-label';
 import { readAuthToken } from '@studio/common/lib/shared-config';
 import {
 	SYNC_MAX_STALLED_ATTEMPTS,
@@ -104,7 +105,7 @@ export async function runCommand(
 		// Pull progress: Backup (0-50%) → Download (50-80%) → Import (80-100%)
 		logger.reportStart(
 			LoggerAction.INITIATE_BACKUP,
-			sprintf( __( 'Initializing remote backup… (%d%%)' ), 0 )
+			formatProgressLabel( __( 'Initializing remote backup…' ), 0 )
 		);
 		const backupId = await initiateBackup( token.accessToken, remoteSite.id, {
 			optionsToSync,
@@ -137,7 +138,9 @@ export async function runCommand(
 
 			// Backup phase: 0-50%
 			const backupProgress = Math.round( status.percent * 0.5 );
-			logger.reportProgress( sprintf( __( 'Creating remote backup… (%d%%)' ), backupProgress ) );
+			logger.reportProgress(
+				formatProgressLabel( __( 'Creating remote backup…' ), backupProgress )
+			);
 
 			await new Promise( ( resolve ) => setTimeout( resolve, SYNC_POLL_INTERVAL_MS ) );
 		}
@@ -165,7 +168,7 @@ export async function runCommand(
 		}
 
 		// Download phase: 50-80%
-		logger.reportProgress( sprintf( __( 'Downloading backup… (%d%%)' ), 50 ) );
+		logger.reportProgress( formatProgressLabel( __( 'Downloading backup…' ), 50 ) );
 		const tempDir = await fs.promises.mkdtemp( path.join( os.tmpdir(), 'studio-sync' ) );
 
 		try {

apps/cli/commands/push.ts

@@ -6,6 +6,7 @@ import {
 	markConnectedWpcomSiteSynced,
 } from '@studio/common/lib/connected-sites';
 import { createDeployIgnoreFilter } from '@studio/common/lib/deploy-ignore';
+import { formatProgressLabel } from '@studio/common/lib/progress-label';
 import { readAuthToken } from '@studio/common/lib/shared-config';
 import {
 	SYNC_IGNORE_DEFAULTS,
@@ -155,15 +156,18 @@ export async function runCommand(
 			return ( originalEmit as ( ...a: any[] ) => boolean )( event, ...args );
 		};
 
-		logger.reportStart( LoggerAction.UPLOAD, sprintf( __( 'Uploading archive… (%d%%)' ), 20 ) );
+		logger.reportStart(
+			LoggerAction.UPLOAD,
+			formatProgressLabel( __( 'Uploading archive…' ), 20 )
+		);
 		const { promise: uploadPromise, abort: abortUpload } = createTusUpload( {
 			token: token.accessToken,
 			remoteSiteId: remoteSite.id,
 			archivePath,
 			onProgress: ( percent ) => {
 				// Upload phase: 20-40%
 				const progress = Math.round( 20 + percent * 0.2 );
-				logger.reportProgress( sprintf( __( 'Uploading archive… (%d%%)' ), progress ) );
+				logger.reportProgress( formatProgressLabel( __( 'Uploading archive…' ), progress ) );
 			},
 		} );
 
@@ -190,7 +194,7 @@ export async function runCommand(
 		}
 
 		// Initiate import: 40%
-		logger.reportProgress( sprintf( __( 'Initiating import… (%d%%)' ), 40 ) );
+		logger.reportProgress( formatProgressLabel( __( 'Initiating import…' ), 40 ) );
 		await initiateImport( token.accessToken, remoteSite.id, attachmentId, {
 			optionsToSync,
 			specificSelectionPaths,
@@ -244,7 +248,7 @@ export async function runCommand(
 				stalledAttempts++;
 			}
 
-			logger.reportProgress( sprintf( '%s (%d%%)', statusMessage, roundedProgress ) );
+			logger.reportProgress( formatProgressLabel( statusMessage, roundedProgress ) );
 
 			await new Promise( ( resolve ) => setTimeout( resolve, SYNC_POLL_INTERVAL_MS ) );
 		}

apps/ui/src/components/app-toasts/style.module.css

@@ -57,6 +57,10 @@
 	width: 100%;
 	box-sizing: border-box;
 	text-wrap: pretty;
+	/* Toasts rewrite themselves in place — import progress ticks through a
+	   percentage — and this font's digits are not equal width, so a counter
+	   would shift the text by a few pixels on nearly every update. */
+	font-variant-numeric: tabular-nums;
 	--wp-ui-notice-background-color: var(--wpds-color-bg-surface-neutral-strong);
 	--wp-ui-notice-border-color: transparent;
 	--wp-ui-notice-text-color: var(--wpds-color-fg-content-neutral);

apps/ui/src/components/import-site-dialog/index.tsx

@@ -0,0 +1,162 @@
+import { ACCEPTED_IMPORT_FILE_TYPES } from '@studio/common/constants';
+import { isSupportedBackupFilename } from '@studio/common/lib/backup-files';
+import { getErrorMessage } from '@studio/common/lib/error-formatting';
+import { getImportStatusMessage } from '@studio/common/lib/import-progress';
+import { __, sprintf } from '@wordpress/i18n';
+import { AlertDialog } from '@wordpress/ui';
+import { useState } from 'react';
+import { toast } from '@/data/app-messages';
+import { useConnector } from '@/data/core';
+import { useImportSite } from '@/data/queries/use-import-site';
+import {
+	reportSyncError,
+	reportSyncPending,
+	reportSyncProgress,
+	reportSyncSuccess,
+	useSiteSyncActivity,
+} from '@/data/sync-activity';
+import styles from './style.module.css';
+import type { SiteDetails } from '@/data/core';
+
+export const IMPORT_FILE_ACCEPT = ACCEPTED_IMPORT_FILE_TYPES.join( ',' );
+
+// `confirming` is tracked alongside the file rather than derived from it because
+// the popup stays mounted through its closing animation — dropping the file to
+// close would shrink the dialog mid-fade.
+interface PendingImport {
+	siteId: string;
+	file: File;
+	confirming: boolean;
+}
+
+export function useSiteBackupImport( site: SiteDetails ) {
+	const connector = useConnector();
+	const importSite = useImportSite();
+	// Everything here is stamped with a site id: the overview stays mounted when
+	// the user switches sites (the route only swaps the `$siteId` param), so a
+	// plain boolean would follow them and light up the next site's Import button.
+	const [ pending, setPending ] = useState< PendingImport | null >( null );
+
+	// The activity store is keyed by site and lives outside React, so progress
+	// survives navigating away and shows on whichever surface renders this site.
+	const activity = useSiteSyncActivity( site.id );
+
+	const active = pending?.siteId === site.id ? pending : null;
+	const isImporting = activity?.kind === 'pending' && activity.direction === 'import';
+
+	const selectFile = ( picked?: File ) => {
+		if ( ! picked ) {
+			return;
+		}
+		// The input's `accept` filter is advisory — a drag or an "All files"
+		// pick can still hand us something unsupported.
+		if ( ! isSupportedBackupFilename( picked.name ) ) {
+			toast.error(
+				__(
+					'This file type is not supported. Please use a .zip, .gz, .gzip, .tar, .tar.gz, .wpress, .sql, or .xml file.'
+				)
+			);
+			return;
+		}
+		setPending( { siteId: site.id, file: picked, confirming: true } );
+	};
+
+	const closeDialog = () =>
+		setPending( ( current ) =>
+			current?.siteId === site.id ? { ...current, confirming: false } : current
+		);
+
+	const confirm = async () => {
+		const file = active?.file;
+		if ( ! file || isImporting ) {
+			return;
+		}
+		const { id: siteId } = site;
+		closeDialog();
+		reportSyncPending( siteId, 'import' );
+		// Extraction reports progress once per stream chunk, so a large backup
+		// fires thousands of events a second. Only report when the rendered text
+		// actually changes — otherwise the store notifies its subscribers that
+		// fast and the app stops responding to clicks.
+		let lastMessage = '';
+		try {
+			const backupPath = await connector.getFilePath( file );
+			if ( ! backupPath ) {
+				throw new Error( __( 'Unable to access the selected backup. Please try again.' ) );
+			}
+			await importSite.mutateAsync( {
+				siteId,
+				backupPath,
+				onProgress: ( event ) => {
+					const message = getImportStatusMessage( event );
+					if ( message && message !== lastMessage ) {
+						lastMessage = message;
+						reportSyncProgress( siteId, 'import', { message } );
+					}
+				},
+			} );
+			reportSyncSuccess( siteId, 'import' );
+		} catch ( error ) {
+			// Matches push/pull: the activity store carries the detail on the site
+			// itself, and a toast says so wherever the user has navigated to.
+			const message =
+				getErrorMessage( error ) ?? __( 'Failed to import the backup. Please try again.' );
+			reportSyncError( siteId, 'import', message );
+			toast.error( __( "Import didn't complete" ), { description: message } );
+		} finally {
+			// Drop the File so a large backup isn't held in memory for the session.
+			setPending( ( current ) => ( current?.siteId === siteId ? null : current ) );
+		}
+	};
+
+	return {
+		file: active?.file ?? null,
+		isConfirming: active?.confirming ?? false,
+		selectFile,
+		cancel: closeDialog,
+		confirm,
+		isImporting,
+	};
+}
+
+interface ImportSiteDialogProps {
+	site: SiteDetails;
+	file: File | null;
+	open: boolean;
+	onCancel: () => void;
+	onConfirm: () => void;
+}
+
+export function ImportSiteDialog( {
+	site,
+	file,
+	open,
+	onCancel,
+	onConfirm,
+}: ImportSiteDialogProps ) {
+	return (
+		<AlertDialog.Root
+			open={ open }
+			onOpenChange={ ( next ) => {
+				if ( ! next ) {
+					onCancel();
+				}
+			} }
+			// Returns synchronously so the dialog closes and the import runs in the
+			// background — an async handler would hold it open for the whole import.
+			onConfirm={ onConfirm }
+		>
+			{ /* Deliberately not `intent="irreversible"`: the importer moves the site's
+			     existing wp-content and database to the trash, not straight to deletion. */ }
+			<AlertDialog.Popup
+				title={ sprintf( __( 'Overwrite %s?' ), site.name ) }
+				description={ __(
+					'Importing a backup will replace the existing files and database for your site.'
+				) }
+				confirmButtonText={ __( 'Import' ) }
+			>
+				{ file ? <p className={ styles.fileName }>{ file.name }</p> : null }
+			</AlertDialog.Popup>
+		</AlertDialog.Root>
+	);
+}

apps/ui/src/components/import-site-dialog/style.module.css

@@ -0,0 +1,7 @@
+.fileName {
+	margin: var(--wpds-dimension-padding-sm) 0 0;
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: var(--wpds-typography-line-height-sm);
+	color: var(--wpds-color-fg-content-neutral);
+	overflow-wrap: anywhere;
+}

apps/ui/src/components/site-dropdown/main-view.module.css

@@ -45,6 +45,9 @@
 	color: var(--wpds-color-fg-content-neutral-weak);
 	white-space: pre-wrap;
 	word-break: break-word;
+	/* Rewritten in place as the percentage climbs, and this font's digits are
+	   not equal width — without this the text shifts on nearly every update. */
+	font-variant-numeric: tabular-nums;
 }
 
 .xdebugBadge {

apps/ui/src/components/site-dropdown/main-view.test.tsx

@@ -212,13 +212,32 @@ describe( 'MainView', () => {
 			activity: {
 				kind: 'pending',
 				direction: 'pull',
-				message: 'Creating remote backup… (24%)',
+				message: '24% · Creating remote backup…',
 				progress: 24,
 			},
 		} );
 
 		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'Pulling from live…' );
-		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'Creating remote backup… (24%)' );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '24% · Creating remote backup…' );
+	} );
+
+	it( 'shows detailed import progress in the open site status', () => {
+		renderMainView( {
+			activity: { kind: 'pending', direction: 'import', message: '24% · Media uploads…' },
+		} );
+
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'Importing backup…' );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '24% · Media uploads…' );
+	} );
+
+	// An import replaces the site's files and database, so letting a sync run
+	// alongside it would have them fighting over the same site.
+	it( 'blocks the live sync actions while an import is running', () => {
+		renderMainView( { activity: { kind: 'pending', direction: 'import' } } );
+
+		expect(
+			screen.getByRole( 'button', { name: 'Update preview site (sync in progress)' } )
+		).toHaveAttribute( 'aria-disabled', 'true' );
 	} );
 
 	it( 'updates the existing preview site while the snapshot is fresh', () => {

apps/ui/src/components/site-dropdown/main-view.tsx

@@ -141,8 +141,11 @@ export function MainView( {
 	const { push: isPushPending, pull: isPullPending } = useIsSiteSyncing( site.id );
 	const isPreviewPending = publishPreviewSite.isPending;
 	// Preview / push / pull all mutate the same local site; running them
-	// concurrently would wedge the site runtime.
-	const isSyncing = isPreviewPending || isPushPending || isPullPending;
+	// concurrently would wedge the site runtime. An import replaces that site's
+	// files and database outright, so it locks them out too — and the CLI won't
+	// refuse it, since import is deliberately not a tracked site operation.
+	const isImporting = activity?.kind === 'pending' && activity.direction === 'import';
+	const isSyncing = isPreviewPending || isPushPending || isPullPending || isImporting;
 	// …and none of them can run while the CLI holds the site either. Gate the
 	// controls on both, so an operation the agent took disables them visibly rather
 	// than leaving buttons that swallow the click.
@@ -485,7 +488,10 @@ function SyncActivityDetails( {
 		>
 			<div className={ styles.activityStatusTitle }>{ getSyncActivityLabel( activity ) }</div>
 			<div className={ styles.activityStatusMessage }>
-				{ activity.message ?? __( 'Preparing the live site…' ) }
+				{ activity.message ??
+					( activity.direction === 'import'
+						? __( 'Preparing the backup…' )
+						: __( 'Preparing the live site…' ) ) }
 			</div>
 		</div>
 	);

apps/ui/src/components/site-dropdown/trigger-secondary.ts

@@ -25,19 +25,28 @@ export function getSyncActivityLabel( activity: SyncActivity ): string {
 		if ( activity.direction === 'preview' ) {
 			return __( 'Publishing preview…' );
 		}
+		if ( activity.direction === 'import' ) {
+			return __( 'Importing backup…' );
+		}
 		return activity.direction === 'push' ? __( 'Pushing to live…' ) : __( 'Pulling from live…' );
 	}
 
 	if ( activity.kind === 'success' ) {
 		if ( activity.direction === 'preview' ) {
 			return __( 'Preview published' );
 		}
+		if ( activity.direction === 'import' ) {
+			return __( 'Backup imported' );
+		}
 		return activity.direction === 'push' ? __( 'Pushed to live' ) : __( 'Pulled from live' );
 	}
 
 	if ( activity.direction === 'preview' ) {
 		return __( 'Publishing preview failed' );
 	}
+	if ( activity.direction === 'import' ) {
+		return __( 'Importing backup failed' );
+	}
 	return activity.direction === 'push'
 		? __( 'Pushing to live failed' )
 		: __( 'Pulling from live failed' );

apps/ui/src/components/site-list/index.test.tsx

@@ -699,6 +699,25 @@ describe( 'SiteList', () => {
 		);
 	} );
 
+	// Without a per-row indicator there is nothing to tell two concurrent imports
+	// apart — the toast that used to carry this named no site.
+	it( 'shows activity on the importing row only', () => {
+		useSiteAgentActivityMock.mockReturnValue( 'idle' );
+		useSiteSyncActivityMock.mockImplementation( ( siteId ) =>
+			siteId === 'running-site' ? { kind: 'pending', direction: 'import' } : null
+		);
+
+		render( <SiteList /> );
+
+		const importingRow = screen.getByText( 'Running Site' ).closest( 'section' )!;
+		const otherRow = screen.getByText( 'Stopped Site' ).closest( 'section' )!;
+
+		expect(
+			within( importingRow ).getByRole( 'status', { name: 'Importing backup' } )
+		).toBeInTheDocument();
+		expect( within( otherRow ).queryByRole( 'status' ) ).not.toBeInTheDocument();
+	} );
+
 	it( 'shows live sync activity before the site name while a site is syncing', () => {
 		useSiteAgentActivityMock.mockReturnValue( 'working' );
 		useSiteSyncActivityMock.mockImplementation( ( siteId ) =>