Automattic · shaunandrews · Aug 6, 2026
diff --git a/apps/ui/src/components/site-overview-view/cards.module.css b/apps/ui/src/components/site-overview-view/cards.module.css
@@ -16,6 +16,134 @@
 	min-width: 0;
 }
 
+.sectionDivider {
+	height: var(--wpds-border-width-xs);
+	background: var(--wpds-color-stroke-surface-neutral);
+}
+
+.cardHeader {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--wpds-dimension-padding-sm);
+	min-height: 24px;
+}
+
+.cardTitle {
+	margin: 0;
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: var(--wpds-typography-line-height-sm);
+	font-weight: var(--wpds-typography-font-weight-medium);
+	color: var(--wpds-color-fg-content-neutral);
+}
+
+.empty {
+	margin: 0;
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: var(--wpds-typography-line-height-sm);
+	color: var(--wpds-color-fg-content-neutral-weak);
+}
+
+.rowList {
+	display: flex;
+	flex-direction: column;
+	gap: var(--wpds-dimension-padding-md);
+	min-width: 0;
+}
+
+.row {
+	display: flex;
+	align-items: center;
+	gap: var(--wpds-dimension-padding-sm);
+	min-width: 0;
+}
+
+.rowText {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.rowMeta {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	font-size: var(--wpds-typography-font-size-xs);
+	line-height: var(--wpds-typography-line-height-xs);
+	color: var(--wpds-color-fg-content-neutral-weak);
+}
+
+.rowActions {
+	display: flex;
+	align-items: center;
+	gap: var(--wpds-dimension-padding-xs);
+	flex: 0 0 auto;
+}
+
+.rowDivider {
+	height: var(--wpds-border-width-xs);
+	background: var(--wpds-color-stroke-surface-neutral-weak);
+}
+
+.rowLink {
+	appearance: none;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	text-align: start;
+	font-family: inherit;
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: var(--wpds-typography-line-height-sm);
+	color: var(--wpds-color-fg-content-neutral);
+	cursor: var(--wpds-cursor-control);
+}
+
+.rowLink:hover,
+.rowLink:focus-visible {
+	color: var(--wpds-color-fg-interactive-brand);
+	text-decoration: underline;
+}
+
+.stale {
+	color: var(--wpds-color-fg-content-warning);
+}
+
+.itemIcon {
+	display: grid;
+	place-items: center;
+	flex: 0 0 18px;
+	width: 18px;
+	height: 18px;
+}
+
+.itemIcon svg {
+	fill: currentColor;
+}
+
+.connectionSkeleton {
+	height: 10px;
+	border-radius: var(--wpds-border-radius-sm);
+	background: var(--wpds-color-bg-surface-neutral-weak);
+	animation: connection-loading 1.4s ease-in-out infinite alternate;
+}
+
+@keyframes connection-loading {
+	to {
+		opacity: 0.55;
+	}
+}
+
+.pickerPopup {
+	width: 320px;
+	padding: 0;
+}
+
 .themeSummary {
 	display: flex;
 	align-items: center;
@@ -264,7 +392,8 @@
 
 @media (prefers-reduced-motion: reduce) {
 	.storageSkeleton,
-	.storageLegend {
+	.storageLegend,
+	.connectionSkeleton {
 		animation: none;
 		transition: none;
 	}

diff --git a/apps/ui/src/components/site-overview-view/connections-section.tsx b/apps/ui/src/components/site-overview-view/connections-section.tsx
@@ -0,0 +1,215 @@
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	arrowDown,
+	arrowUp,
+	copy,
+	external,
+	Icon,
+	moreVertical,
+	plus,
+	reusableBlock,
+} from '@wordpress/icons';
+import { Button, IconButton } from '@wordpress/ui';
+import { clsx } from 'clsx';
+import { Fragment, useState } from 'react';
+import * as Menu from '@/components/menu';
+import { PublishPickerView } from '@/components/site-dropdown/publish-picker-view';
+import { ensureProtocol, stripProtocol } from '@/components/site-dropdown/utils';
+import { useConnector } from '@/data/core';
+import { useAuthUser, useLogin } from '@/data/queries/use-auth-user';
+import { useConnectedWpcomSites } from '@/data/queries/use-connected-wpcom-sites';
+import { usePullSiteFromLive, usePushSiteToLive } from '@/data/queries/use-sync-site';
+import { useIsSiteSyncing } from '@/hooks/use-is-site-syncing';
+import { useOffline } from '@/hooks/use-offline';
+import { formatRelativeTime } from '@/lib/format-relative-time';
+import styles from './cards.module.css';
+import { CardEmptyState, CardRows, CardSection, RowDivider } from './overview-card';
+import { RowLink } from './row-link';
+import type { SiteDetails, SyncSite } from '@/data/core';
+
+const STALE_SYNC_MS = 14 * 24 * 60 * 60 * 1000;
+
+export function ConnectionsSection( { site, busy }: { site: SiteDetails; busy: boolean } ) {
+	const { data: authUser } = useAuthUser();
+	const login = useLogin();
+	const isOffline = useOffline();
+	const [ pickerOpen, setPickerOpen ] = useState( false );
+	const { data: connections, isLoading } = useConnectedWpcomSites( site.id );
+
+	const connectAction = authUser ? (
+		<Menu.Root open={ pickerOpen } onOpenChange={ setPickerOpen }>
+			<Menu.Trigger
+				render={
+					<IconButton
+						variant="minimal"
+						tone="neutral"
+						size="small"
+						icon={ plus }
+						label={ __( 'Connect a WordPress.com site' ) }
+					/>
+				}
+			/>
+			<Menu.Popup side="bottom" align="end" className={ styles.pickerPopup }>
+				<PublishPickerView site={ site } onClose={ () => setPickerOpen( false ) } />
+			</Menu.Popup>
+		</Menu.Root>
+	) : null;
+
+	return (
+		<CardSection title={ __( 'Connections' ) } action={ connectAction }>
+			{ ! authUser ? (
+				<>
+					<CardEmptyState>
+						{ __( 'Sign in to connect this site to WordPress.com and sync it.' ) }
+					</CardEmptyState>
+					<div>
+						<Button
+							variant="outline"
+							tone="neutral"
+							size="small"
+							disabled={ login.isPending || isOffline }
+							onClick={ () => login.mutate() }
+						>
+							{ __( 'Log in with WordPress.com' ) }
+						</Button>
+					</div>
+				</>
+			) : isLoading && ! connections ? (
+				<div className={ styles.connectionSkeleton } />
+			) : ! connections?.length ? (
+				<CardEmptyState>
+					{ __( 'Not connected to a live site yet. Connect one to pull or push changes.' ) }
+				</CardEmptyState>
+			) : (
+				<CardRows>
+					{ connections.map( ( connection, index ) => (
+						<Fragment key={ connection.id }>
+							{ index > 0 && <RowDivider /> }
+							<ConnectionRow site={ site } connection={ connection } busy={ busy } />
+						</Fragment>
+					) ) }
+				</CardRows>
+			) }
+		</CardSection>
+	);
+}
+
+function ConnectionRow( {
+	site,
+	connection,
+	busy,
+}: {
+	site: SiteDetails;
+	connection: SyncSite;
+	busy: boolean;
+} ) {
+	const connector = useConnector();
+	const isOffline = useOffline();
+	const pushSiteToLive = usePushSiteToLive();
+	const pullSiteFromLive = usePullSiteFromLive();
+	const { push: isPushing, pull: isPulling } = useIsSiteSyncing( site.id );
+	const syncing = isPushing || isPulling;
+	const disabled = syncing || busy || isOffline;
+	const sync = describeLastSync( connection );
+	const url = ensureProtocol( connection.url );
+
+	return (
+		<div className={ styles.row }>
+			<div className={ styles.rowText }>
+				<RowLink
+					label={ stripProtocol( connection.url ) }
+					tooltip={ connection.name }
+					url={ url }
+				/>
+				<span className={ clsx( styles.rowMeta, sync.stale && styles.stale ) }>{ sync.label }</span>
+			</div>
+			<div className={ styles.rowActions }>
+				<Menu.Root>
+					<Menu.Trigger
+						render={
+							<IconButton
+								variant="minimal"
+								tone="neutral"
+								size="small"
+								icon={ reusableBlock }
+								label={ isPulling ? __( 'Pulling…' ) : isPushing ? __( 'Pushing…' ) : __( 'Sync' ) }
+								disabled={ disabled }
+								loading={ syncing }
+							/>
+						}
+					/>
+					<Menu.Popup side="bottom" align="end">
+						<Menu.Item
+							onClick={ () =>
+								pullSiteFromLive.mutate( { siteId: site.id, remoteSiteId: connection.id } )
+							}
+						>
+							<span className={ styles.itemIcon } aria-hidden="true">
+								<Icon icon={ arrowDown } size={ 18 } />
+							</span>
+							{ __( 'Pull from live' ) }
+						</Menu.Item>
+						<Menu.Item
+							onClick={ () =>
+								pushSiteToLive.mutate( { siteId: site.id, remoteSiteId: connection.id } )
+							}
+						>
+							<span className={ styles.itemIcon } aria-hidden="true">
+								<Icon icon={ arrowUp } size={ 18 } />
+							</span>
+							{ __( 'Push to live' ) }
+						</Menu.Item>
+					</Menu.Popup>
+				</Menu.Root>
+				<Menu.Root>
+					<Menu.Trigger
+						render={
+							<IconButton
+								variant="minimal"
+								tone="neutral"
+								size="small"
+								icon={ moreVertical }
+								label={ __( 'More options' ) }
+							/>
+						}
+					/>
+					<Menu.Popup side="bottom" align="end">
+						<Menu.Item onClick={ () => void connector.openExternalUrl( url ) }>
+							<span className={ styles.itemIcon } aria-hidden="true">
+								<Icon icon={ external } size={ 18 } />
+							</span>
+							{ __( 'Open live site' ) }
+						</Menu.Item>
+						<Menu.Item onClick={ () => void connector.copyText( url ) }>
+							<span className={ styles.itemIcon } aria-hidden="true">
+								<Icon icon={ copy } size={ 18 } />
+							</span>
+							{ __( 'Copy URL' ) }
+						</Menu.Item>
+					</Menu.Popup>
+				</Menu.Root>
+			</div>
+		</div>
+	);
+}
+
+export function describeLastSync( connection: SyncSite ): { label: string; stale: boolean } {
+	const pulled = connection.lastPullTimestamp ? Date.parse( connection.lastPullTimestamp ) : NaN;
+	const pushed = connection.lastPushTimestamp ? Date.parse( connection.lastPushTimestamp ) : NaN;
+	const hasPulled = ! Number.isNaN( pulled );
+	const hasPushed = ! Number.isNaN( pushed );
+
+	if ( ! hasPulled && ! hasPushed ) {
+		return { label: __( 'Never synced' ), stale: true };
+	}
+
+	const pulledLast = hasPulled && ( ! hasPushed || pulled >= pushed );
+	const timestamp = ( pulledLast ? connection.lastPullTimestamp : connection.lastPushTimestamp )!;
+	const relative = formatRelativeTime( timestamp );
+	return {
+		label: pulledLast
+			? sprintf( __( 'Pulled %s ago' ), relative )
+			: sprintf( __( 'Pushed %s ago' ), relative ),
+		stale: Date.now() - Math.max( hasPulled ? pulled : 0, hasPushed ? pushed : 0 ) > STALE_SYNC_MS,
+	};
+}