-
-
{ getSyncActivityLabel( activity ) }
-
- { activity.message ??
- ( activity.direction === 'import'
- ? __( 'Preparing the backup…' )
- : __( 'Preparing the live site…' ) ) }
-
- { blockedLabel ? (
- // Stating this inline rather than leaving it to the disabled
- // button's tooltip: nobody hovers a control that looks inert.
-
{ blockedLabel }
- ) : null }
-
- { cancel ? (
- // A plain Button, not an IconButton: IconButton always wraps itself in
- // a Tooltip, and tooltips never render inside this menu anyway.
-
onCancel?.() }
- >
-
- ) : null }
-
-
- { __( 'Publish this site' ) }
-
- { authUser ? (
-
- { pickableSites.isLoading ? (
-
{ __( 'Loading sites…' ) }
- ) : pickableSites.data && pickableSites.data.length > 0 ? (
-
- { pickableSites.data.map( ( candidate ) => (
-
- void handlePickSite( candidate ) }
- >
- { candidate.name || candidate.url }
- { stripProtocol( candidate.url ) }
-
-
- ) ) }
-
- ) : (
-
- { __( 'No WordPress.com sites available to publish to.' ) }
-
- ) }
-
- ) : null }
-
- { __( 'Create a new WordPress.com site' ) }
-
-
-
+
;
+ isStarting: boolean;
+ isStopping: boolean;
+} ): SiteRunStatus {
+ if ( isStarting || isStopping ) {
+ return 'transitioning';
+ }
+ return site.running ? 'running' : 'stopped';
+}
+
+interface SiteStatusButtonProps {
+ site: SiteDetails;
+ isStarting: boolean;
+ isStopping: boolean;
+ className?: string;
+}
+
+/**
+ * The site's running state and its start/stop control in one 24px target: a
+ * dot while idle, crossfading to the action it triggers on hover. When Xdebug
+ * is on, its bug replaces the dot entirely — a persistent per-site setting
+ * worth spotting at a glance — while keeping the same state colors.
+ *
+ * Shared by the sidebar rows and the site toolbar so the two never drift.
+ */
+export function SiteStatusButton( {
+ site,
+ isStarting,
+ isStopping,
+ className,
+}: SiteStatusButtonProps ) {
+ const startSite = useStartSite();
+ const stopSite = useStopSite();
+ const operation = useSiteOperation( site );
+ const busy = useIsSiteBusy( site );
+ const { status } = deriveSiteStatus( site, isStarting, isStopping, operation );
+ const statusName = getSiteStatusName( {
+ running: site.running,
+ starting: isStarting,
+ stopping: isStopping,
+ operation,
+ } );
+ const xdebug = Boolean( site.enableXdebug );
+ const tooltipLabel = xdebug
+ ? sprintf( __( 'Site status: %s. Xdebug enabled' ), statusName )
+ : sprintf( __( 'Site status: %s' ), statusName );
+ const actionLabel = site.running ? __( 'Stop site' ) : __( 'Start site' );
+ const label = busy ? tooltipLabel : sprintf( __( '%1$s. %2$s' ), tooltipLabel, actionLabel );
+
+ const handleClick = ( event: MouseEvent< HTMLButtonElement > ) => {
+ event.stopPropagation();
+ if ( busy ) {
+ return;
+ }
+ if ( site.running ) {
+ stopSite.mutate( site.id );
+ } else {
+ startSite.mutate( site.id );
+ }
+ };
+
+ return (
+
+
+ { xdebug ? (
+
+ { status === 'stopped' ? (
+
+ ) }
+ { ! busy ? (
+ site.running ? (
+
+
+ ) : (
+
+
+ )
+ ) : null }
+
+ }
+ />
+
+ );
+}
diff --git a/apps/ui/src/components/site-status-button/style.module.css b/apps/ui/src/components/site-status-button/style.module.css
new file mode 100644
index 0000000000..e80c10c43a
--- /dev/null
+++ b/apps/ui/src/components/site-status-button/style.module.css
@@ -0,0 +1,168 @@
+.status {
+ display: inline-grid;
+ place-items: center;
+ flex: 0 0 24px;
+ inline-size: 24px;
+ block-size: 24px;
+ padding: 0;
+ border: 0;
+ border-radius: 4px;
+ background: transparent;
+ color: inherit;
+ cursor: var(--wpds-cursor-control);
+ transition: background-color 100ms ease, opacity 100ms ease;
+}
+
+.status:not([aria-disabled='true']):is(:hover, :focus-visible) {
+ background-color: var(--wpds-color-bg-interactive-neutral-weak-active);
+}
+
+.status:focus-visible {
+ outline: 2px solid var(--wpds-color-stroke-interactive-brand, #3858e9);
+ outline-offset: -2px;
+}
+
+.status[aria-disabled='true'] {
+ cursor: default;
+}
+
+.status .glyph.glyph {
+ grid-row-start: 1;
+ grid-column-start: 1;
+ inline-size: 8px;
+ block-size: 8px;
+ width: 8px;
+ height: 8px;
+ flex-shrink: 0;
+ overflow: visible;
+ transition: opacity 100ms ease;
+}
+
+/* The Xdebug bug replaces the status dot; its color tracks the same state
+ palette the dot uses. */
+.status .xdebugGlyph.xdebugGlyph {
+ inline-size: 20px;
+ block-size: 20px;
+ width: 20px;
+ height: 20px;
+}
+
+.status[data-state='running'] .xdebugGlyph {
+ color: var(--studio-color-status-running);
+}
+
+.status[data-state='transitioning'] .xdebugGlyph {
+ color: var(--studio-color-status-transitioning);
+ animation: statusBlink 1s ease-in-out infinite;
+}
+
+.status[data-state='stopped'] .xdebugGlyph {
+ color: var(--wpds-color-fg-content-neutral-weak);
+}
+
+/* Hovering the button crossfades the status dot into the action it triggers:
+ play when stopped, stop when running. The transitioning state keeps the
+ blinking dot — there's no action to take. */
+.status .actionGlyph.actionGlyph {
+ grid-row-start: 1;
+ grid-column-start: 1;
+ display: inline-grid;
+ place-items: center;
+ inline-size: 10px;
+ block-size: 10px;
+ width: 10px;
+ height: 10px;
+ color: var(--wpds-color-fg-content-neutral);
+ opacity: 0;
+ transition: opacity 100ms ease;
+}
+
+.status:not([data-state='transitioning']):is(:hover, :focus-visible) .glyph {
+ opacity: 0;
+}
+
+.status:not([data-state='transitioning']):is(:hover, :focus-visible) .actionGlyph {
+ opacity: 1;
+}
+
+.pauseMark,
+.pauseMark::before,
+.pauseMark::after {
+ display: block;
+ height: 8px;
+ border-radius: 1px;
+ background: currentColor;
+}
+
+.pauseMark {
+ position: relative;
+ width: 8px;
+ background: transparent;
+}
+
+.pauseMark::before,
+.pauseMark::after {
+ position: absolute;
+ top: 0;
+ width: 2px;
+ content: '';
+}
+
+.pauseMark::before {
+ left: 1px;
+}
+
+.pauseMark::after {
+ right: 1px;
+}
+
+.shape {
+ x: 0;
+ y: 0;
+ width: 8px;
+ height: 8px;
+ rx: 4px;
+ fill: var(--studio-color-status-running);
+ transition: fill 160ms ease, rx 160ms ease;
+}
+
+.playShape {
+ fill: var(--wpds-color-fg-content-neutral);
+}
+
+.status[data-state='running'] .shape {
+ fill: var(--studio-color-status-running);
+ rx: 4px;
+}
+
+.status[data-state='transitioning'] .shape {
+ fill: var(--studio-color-status-transitioning);
+ rx: 4px;
+ animation: statusBlink 1s ease-in-out infinite;
+}
+
+@keyframes statusBlink {
+ 0%,
+ 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.25;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .shape {
+ transition: none;
+ animation: none;
+ }
+
+ .glyph,
+ .actionGlyph {
+ transition: none;
+ }
+
+ .xdebugGlyph {
+ animation: none;
+ }
+}
diff --git a/apps/ui/src/components/site-dropdown/disconnect-site-dialog.module.css b/apps/ui/src/components/site-toolbar/disconnect-site-dialog.module.css
similarity index 100%
rename from apps/ui/src/components/site-dropdown/disconnect-site-dialog.module.css
rename to apps/ui/src/components/site-toolbar/disconnect-site-dialog.module.css
diff --git a/apps/ui/src/components/site-dropdown/disconnect-site-dialog.tsx b/apps/ui/src/components/site-toolbar/disconnect-site-dialog.tsx
similarity index 100%
rename from apps/ui/src/components/site-dropdown/disconnect-site-dialog.tsx
rename to apps/ui/src/components/site-toolbar/disconnect-site-dialog.tsx
diff --git a/apps/ui/src/components/site-toolbar/index.tsx b/apps/ui/src/components/site-toolbar/index.tsx
new file mode 100644
index 0000000000..e97a2b5c23
--- /dev/null
+++ b/apps/ui/src/components/site-toolbar/index.tsx
@@ -0,0 +1,309 @@
+import { TRACKS_EVENTS } from '@studio/common/lib/record-tracks-event';
+import { useIsMutating } from '@tanstack/react-query';
+import { __ } from '@wordpress/i18n';
+import { external, Icon, moreVertical } from '@wordpress/icons';
+import { Button, IconButton, Tooltip } from '@wordpress/ui';
+import { clsx } from 'clsx';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import * as Menu from '@/components/menu';
+import { SiteIcon } from '@/components/site-icon';
+import { SiteStatusButton } from '@/components/site-status-button';
+import { useConnector } from '@/data/core';
+import { useAgenticFeatures } from '@/data/queries/use-agentic-features';
+import { useLogin } from '@/data/queries/use-auth-user';
+import { useConnectedWpcomSites } from '@/data/queries/use-connected-wpcom-sites';
+import { useIsSiteStarting, useIsSiteStopping } from '@/data/queries/use-sites';
+import {
+ PULL_FROM_LIVE_MUTATION_KEY,
+ PUSH_TO_LIVE_MUTATION_KEY,
+ usePullSiteFromLive,
+ usePushSiteToLive,
+} from '@/data/queries/use-sync-site';
+import { useSidebarCollapsed } from '@/hooks/use-sidebar-collapsed';
+import { getSiteDisplayUrl, getSiteUrl } from '@/lib/get-site-url';
+import { DisconnectSiteDialog } from './disconnect-site-dialog';
+import { PublishSiteDialog } from './publish-site-dialog';
+import { ShareDialog } from './share-dialog';
+import styles from './style.module.css';
+import { SyncDialog, type SyncDirection } from './sync-dialog';
+import { ensureProtocol, pickLiveSite, sortConnections } from './utils';
+import type { SiteDetails, SyncSite } from '@/data/core';
+import type { PullSyncOptions, PushSyncOptions } from '@studio/common/types/sync';
+
+interface SiteToolbarProps {
+ site: SiteDetails;
+ className?: string;
+ // Opens the Pull dialog once the connection loads. Set by the deep link
+ // onboarding follows after connecting a site, to nudge the first pull.
+ openPullOnLoad?: boolean;
+}
+
+// Counts in-flight push / pull mutations for this site across hook instances.
+// They mutate the same local runtime, so a push started elsewhere (the publish
+// flow) must still read as busy here and block a concurrent pull that would
+// wedge the site.
+function useIsSiteBusy( siteId: string ): boolean {
+ const forSite = ( mutation: { state: { variables?: unknown } } ) =>
+ ( mutation.state.variables as { siteId?: string } | undefined )?.siteId === siteId;
+ const push = useIsMutating( { mutationKey: PUSH_TO_LIVE_MUTATION_KEY, predicate: forSite } ) > 0;
+ const pull =
+ useIsMutating( { mutationKey: PULL_FROM_LIVE_MUTATION_KEY, predicate: forSite } ) > 0;
+ return push || pull;
+}
+
+/**
+ * The site's permanent header: who you're working on and what state it's in on
+ * the left, its actions on the right. Replaces the old site dropdown, whose
+ * actions were hidden behind a trigger that read as a status indicator.
+ *
+ * Sync opens the dialog that chooses direction, destination, and what to
+ * carry; Publish connects a WordPress.com site when none is. Preview sharing
+ * returns with the Share button in a follow-up.
+ */
+export function SiteToolbar( { site, className, openPullOnLoad = false }: SiteToolbarProps ) {
+ const connector = useConnector();
+ const { enabled: agenticEnabled, reason: agenticReason } = useAgenticFeatures();
+ // The sidebar's site rows already carry a run-state dot for every site,
+ // including this one. A second one in the header only earns its place once
+ // the sidebar is out of view.
+ const showRunState = useSidebarCollapsed();
+ const login = useLogin( { source: 'site_header' } );
+ const pushSiteToLive = usePushSiteToLive();
+ const pullSiteFromLive = usePullSiteFromLive();
+
+ const [ syncOpen, setSyncOpen ] = useState( false );
+ const [ publishOpen, setPublishOpen ] = useState( false );
+ const [ disconnectOpen, setDisconnectOpen ] = useState( false );
+ const [ shareOpen, setShareOpen ] = useState( false );
+
+ const isStarting = useIsSiteStarting( site.id );
+ const isStopping = useIsSiteStopping( site.id );
+ const isBusy = useIsSiteBusy( site.id );
+
+ const { data: connectedSites } = useConnectedWpcomSites( site.id );
+ // The dialog offers every connection; the header's connected/disconnect
+ // affordances key off whichever one is the primary (production) target.
+ const targets = useMemo( () => sortConnections( connectedSites ), [ connectedSites ] );
+ const liveSite = useMemo( () => pickLiveSite( connectedSites ), [ connectedSites ] );
+
+ // Honour the onboarding deep link once the connection is known: open the sync
+ // dialog (defaulting to Pull) so a freshly connected site can bring the live
+ // content down. Fires once.
+ const syncOpenedRef = useRef( false );
+ useEffect( () => {
+ if ( openPullOnLoad && targets.length > 0 && ! syncOpenedRef.current ) {
+ syncOpenedRef.current = true;
+ setSyncOpen( true );
+ }
+ }, [ openPullOnLoad, targets ] );
+
+ const isSignedOut = agenticReason === 'signed-out';
+ const isOffline = agenticReason === 'offline';
+ const syncDisabled = ! agenticEnabled || isBusy;
+
+ const openExternal = ( url: string ) => {
+ void connector.openExternalUrl( url );
+ };
+
+ const runSync = (
+ direction: SyncDirection,
+ target: SyncSite,
+ options: PushSyncOptions | PullSyncOptions | undefined
+ ) => {
+ if ( isBusy ) {
+ return;
+ }
+ if ( direction === 'pull' ) {
+ pullSiteFromLive.mutate( { siteId: site.id, remoteSiteId: target.id, options } );
+ return;
+ }
+ pushSiteToLive.mutate(
+ { siteId: site.id, remoteSiteId: target.id, options },
+ { onSuccess: () => openExternal( ensureProtocol( target.url ) ) }
+ );
+ };
+
+ const localSiteUrl = getSiteUrl( site );
+ const localSiteLabel = isStopping
+ ? __( 'Stopping…' )
+ : isStarting
+ ? __( 'Starting…' )
+ : getSiteDisplayUrl( site );
+ const canOpenLocalSite = site.running && ! isStopping;
+
+ return (
+
+
+
+
+ { site.name }
+
+ { showRunState ? (
+
+ {
+ void connector.trackEvent( TRACKS_EVENTS.SITE_OPEN_IN_BROWSER, {
+ browser: 'external',
+ } );
+ openExternal( localSiteUrl );
+ } }
+ >
+ { localSiteLabel }
+
+ ) : (
+ { localSiteLabel }
+ ) }
+
+
+
+
+
+ { /* Sharing a preview isn't a sync — it publishes a throwaway copy —
+ so it sits beside the primary action, not inside its dialog. */ }
+ { ! isSignedOut ? (
+
+ setShareOpen( true ) }
+ >
+ { __( 'Share' ) }
+
+ }
+ />
+
+ ) : null }
+ { isSignedOut ? (
+ login.mutate() }
+ >
+ { __( 'Log in' ) }
+
+ ) : liveSite ? (
+ <>
+ { /* One Sync action. Direction, destination, and selection are all
+ chosen inside the dialog. */ }
+ targets.length > 0 && setSyncOpen( true ) }
+ >
+ { __( 'Sync' ) }
+
+
+
+ setDisconnectOpen( true ) }>
+ { __( 'Disconnect' ) }
+
+
+
+
+ ) : (
+ setPublishOpen( true ) }
+ >
+ { __( 'Publish' ) }
+
+ ) }
+
+
+ { targets.length > 0 ? (
+
+ ) : null }
+
+ { liveSite ? (
+
+ ) : null }
+
+ { /* Mounted only while open: it loads the account's sites on mount. */ }
+ { publishOpen ? (
+
+ ) : null }
+
+ { shareOpen ?
: null }
+
+
+
+ { __( 'Publish this site' ) }
+
+
+
+ { __(
+ 'Choose the WordPress.com or Pressable site to publish to. Pushing sends this Studio site’s files and database there.'
+ ) }
+
+ { error ? (
+
+ { error }
+
+ ) : null }
+ void pickableSites.refetch() }
+ selectedId={ selectedId }
+ onSelect={ setSelectedId }
+ emptyTitle={ __( 'No sites available' ) }
+ emptyDescription={ __(
+ 'Every site on this account is already connected to a Studio site, or cannot be published to.'
+ ) }
+ />
+
+
+
+ { __( 'Create a new site' ) }
+
+
+ { __( 'Cancel' ) }
+
+ void handleConnect() }
+ >
+ { __( 'Connect site' ) }
+
+
+
+
+ );
+}
diff --git a/apps/ui/src/components/site-toolbar/share-dialog.module.css b/apps/ui/src/components/site-toolbar/share-dialog.module.css
new file mode 100644
index 0000000000..f19bd9b8d4
--- /dev/null
+++ b/apps/ui/src/components/site-toolbar/share-dialog.module.css
@@ -0,0 +1,149 @@
+/* 480px: wider than wpds `small` (400) and narrower than `medium` (560).
+ Unlayered, so it beats the size rule in wpds's `wp-ui-components` layer. */
+.popup {
+ max-width: 480px;
+}
+
+/* Block padding only — `Dialog.Content` supplies the inline gutter. */
+.section {
+ padding-block: var(--wpds-dimension-padding-md);
+}
+
+.section:first-child {
+ padding-block-start: 0;
+}
+
+.section:last-child {
+ padding-block-end: 0;
+}
+
+.section + .section {
+ border-block-start: 1px solid var(--wpds-color-stroke-surface-neutral);
+}
+
+.heading {
+ margin: 0;
+ font-size: var(--wpds-typography-font-size-sm);
+ line-height: var(--wpds-typography-line-height-sm);
+ font-weight: 600;
+ color: var(--wpds-color-fg-content-neutral);
+}
+
+.intro {
+ margin: 2px 0 0;
+ font-size: var(--wpds-typography-font-size-xs);
+ line-height: var(--wpds-typography-line-height-xs);
+ color: var(--wpds-color-fg-content-neutral-weak);
+}
+
+.empty {
+ margin: var(--wpds-dimension-gap-sm) 0 0;
+ font-size: var(--wpds-typography-font-size-sm);
+ color: var(--wpds-color-fg-content-neutral-weak);
+}
+
+.cards {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ margin: var(--wpds-dimension-gap-sm) 0 0;
+ padding: 0;
+ list-style: none;
+}
+
+/* Two lines: the hostname in full, then its expiry paired with the controls.
+ Flat rows flush with the section heading — no surface, no radius — divided by
+ a hairline so the list reads as a list, not a stack of boxes. */
+.card {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ padding-block: var(--wpds-dimension-padding-sm);
+}
+
+.card + .card {
+ border-block-start: 1px solid var(--wpds-color-stroke-surface-neutral);
+}
+
+.rowSecond {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--wpds-dimension-gap-sm);
+}
+
+/* Wraps rather than truncates: the tail of a preview hostname is what tells
+ two of them apart. */
+.rowLink {
+ padding: 0;
+ border: 0;
+ background: transparent;
+ font: inherit;
+ font-size: var(--wpds-typography-font-size-sm);
+ line-height: var(--wpds-typography-line-height-sm);
+ color: var(--wpds-color-fg-content-neutral);
+ text-decoration: underline;
+ text-underline-offset: 2px;
+ text-align: start;
+ overflow-wrap: anywhere;
+ cursor: var(--wpds-cursor-control);
+}
+
+.rowLink:hover {
+ color: var(--wpds-color-fg-content-neutral-weak);
+}
+
+.rowLink:focus-visible {
+ outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus-brand);
+ outline-offset: 2px;
+ border-radius: 2px;
+}
+
+.rowMeta {
+ font-size: var(--wpds-typography-font-size-xs);
+ line-height: var(--wpds-typography-line-height-xs);
+ color: var(--wpds-color-fg-content-neutral-weak);
+}
+
+.actions {
+ display: flex;
+ align-items: center;
+ gap: var(--wpds-dimension-gap-xs);
+ flex: 0 0 auto;
+}
+
+/* A plain Button standing in for an IconButton (which can't be a menu
+ trigger): square it off so it lines up with its icon-button neighbour. */
+.overflowButton {
+ --wp-ui-button-aspect-ratio: 1;
+ --wp-ui-button-padding-inline: 0;
+ --wp-ui-button-min-width: unset;
+}
+
+/* `Dialog.Footer` right-aligns its children; the quota reads as a status for
+ the panel, so it stays on the leading edge. */
+.footer {
+ justify-content: space-between;
+}
+
+.quotaLabel {
+ font-size: var(--wpds-typography-font-size-xs);
+ line-height: var(--wpds-typography-line-height-xs);
+ color: var(--wpds-color-fg-content-neutral-weak);
+}
+
+
+
+/* Icon SVGs carry no fill of their own; without this they paint black in both
+ colour schemes.
+
+ The 16px is not a style choice — it's what the rest of the app renders. The
+ compact-density rule in `index.css` is scoped
+ `[data-wpds-density='compact'] [data-ui-mode='classic'] svg`, and the popover
+ portals into `document.body`, outside both wrappers. @wordpress/icons then
+ draws at its native 24px. Restated here for the surfaces that escape. */
+.actions svg {
+ fill: currentColor;
+ width: 16px;
+ height: 16px;
+}
diff --git a/apps/ui/src/components/site-toolbar/share-dialog.test.tsx b/apps/ui/src/components/site-toolbar/share-dialog.test.tsx
new file mode 100644
index 0000000000..f41492f939
--- /dev/null
+++ b/apps/ui/src/components/site-toolbar/share-dialog.test.tsx
@@ -0,0 +1,160 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useConnector } from '@/data/core';
+import { useConnectedWpcomSites } from '@/data/queries/use-connected-wpcom-sites';
+import { useDeletePreviewSite, usePublishPreviewSite } from '@/data/queries/use-preview-site';
+import { useSnapshots, useSnapshotUsage } from '@/data/queries/use-snapshots';
+import { ShareDialog } from './share-dialog';
+import type { SiteDetails, Snapshot } from '@/data/core';
+
+vi.mock( '@/data/core', async ( importOriginal ) => ( {
+ ...( await importOriginal< object >() ),
+ useConnector: vi.fn(),
+} ) );
+vi.mock( '@/data/queries/use-connected-wpcom-sites', () => ( {
+ useConnectedWpcomSites: vi.fn(),
+} ) );
+vi.mock( '@/data/queries/use-preview-site', () => ( {
+ usePublishPreviewSite: vi.fn(),
+ useDeletePreviewSite: vi.fn(),
+} ) );
+vi.mock( '@/data/queries/use-snapshots', () => ( {
+ useSnapshots: vi.fn(),
+ useSnapshotUsage: vi.fn(),
+} ) );
+
+const SITE = { id: 'riff', name: 'Riff' } as unknown as SiteDetails;
+
+function snapshot( overrides: Partial< Snapshot > = {} ): Snapshot {
+ return {
+ url: 'https://riff-abcde-studio.wp.build',
+ localSiteId: 'riff',
+ atomicSiteId: 1,
+ date: Date.now(),
+ ...overrides,
+ } as Snapshot;
+}
+
+const publishMutate = vi.fn();
+const deleteMutate = vi.fn();
+const copyText = vi.fn().mockResolvedValue( undefined );
+
+function renderDialog( snapshots: Snapshot[] = [ snapshot() ], connections: unknown[] = [] ) {
+ vi.mocked( useSnapshots ).mockReturnValue( {
+ data: snapshots,
+ } as ReturnType< typeof useSnapshots > );
+ vi.mocked( useSnapshotUsage ).mockReturnValue( {
+ data: { siteCount: snapshots.length, siteLimit: 10, siteCreationBlocked: false },
+ } as ReturnType< typeof useSnapshotUsage > );
+ vi.mocked( useConnectedWpcomSites ).mockReturnValue( { data: connections } as never );
+ vi.mocked( useConnector ).mockReturnValue( {
+ copyText,
+ openExternalUrl: vi.fn(),
+ } as unknown as ReturnType< typeof useConnector > );
+ vi.mocked( usePublishPreviewSite ).mockReturnValue( {
+ mutate: publishMutate,
+ isPending: false,
+ } as unknown as ReturnType< typeof usePublishPreviewSite > );
+ vi.mocked( useDeletePreviewSite ).mockReturnValue( {
+ mutate: deleteMutate,
+ isPending: false,
+ variables: undefined,
+ } as unknown as ReturnType< typeof useDeletePreviewSite > );
+
+ return render( {
+ if ( ! next ) {
+ setConfirmingDelete( null );
+ }
+ onOpenChange( next );
+ } }
+ >
+
+
+ { __( 'Share this site' ) }
+
+
+ { connections.length > 0 ? (
+
+ { __( 'Live' ) }
+
+ { connections.map( ( connection ) => (
+
+ openExternal( connection.url ) }
+ >
+ { stripProtocol( connection.url ) }
+
+
+
{ getConnectionLabel( connection ) }
+
+ copyLink( connection.url ) }
+ />
+
+
+ ) ) }
+
+
+ ) : null }
+
+
+ { __( 'Preview links' ) }
+
+ { __( 'Temporary copies of this site, for sharing work before it goes live.' ) }
+
+
+ { previews.length === 0 ? (
+ { __( 'No preview links yet.' ) }
+ ) : (
+
+ { previews.map( ( snapshot ) => {
+ const hostname = getSnapshotHostname( snapshot );
+ const isDeleting =
+ deletePreviewSite.isPending &&
+ deletePreviewSite.variables?.hostname === hostname;
+ const isConfirming = confirmingDelete === snapshot.url;
+ return (
+
+ { /* The full hostname, unwrapped and unabbreviated: telling two
+ previews of the same site apart is the whole job of this
+ line. */ }
+ openExternal( snapshot.url ) }
+ >
+ { hostname }
+
+ { isConfirming ? (
+
+
+ { __( 'This link will stop working immediately.' ) }
+
+
+ setConfirmingDelete( null ) }
+ >
+ { __( 'Cancel' ) }
+
+
+ deletePreviewSite.mutate(
+ { hostname },
+ { onSuccess: () => setConfirmingDelete( null ) }
+ )
+ }
+ >
+ { __( 'Delete' ) }
+
+
+
+
{ expirySummary( snapshot ) }
+
+ copyLink( snapshot.url ) }
+ />
+
+ { /* `IconButton` renders a tooltip provider, not a button,
+ so it can't take the trigger's props — the menu would
+ never open. */ }
+
+ openExternal( snapshot.url ) }>
+ { __( 'Open preview' ) }
+
+ publish( snapshot ) }
+ >
+ { isSnapshotExpired( snapshot )
+ ? __( 'Republish' )
+ : __( 'Update with current contents' ) }
+
+ setConfirmingDelete( snapshot.url ) }>
+ { __( 'Delete preview link' ) }
+
+
+
+
+
+ );
+ } ) }
+
+ ) }
+
+
+
+ { usage ? (
+
+ { sprintf(
+ // translators: 1: preview links used, 2: total allowed.
+ __( '%1$d of %2$d preview links used' ),
+ usage.siteCount,
+ usage.siteLimit
+ ) }
+
+ ) : (
+ publish() }
+ >
+ { __( 'New preview' ) }
+
+
+
+
+ );
+}
diff --git a/apps/ui/src/components/site-toolbar/style.module.css b/apps/ui/src/components/site-toolbar/style.module.css
new file mode 100644
index 0000000000..09a8117755
--- /dev/null
+++ b/apps/ui/src/components/site-toolbar/style.module.css
@@ -0,0 +1,238 @@
+.toolbar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--wpds-dimension-gap-md);
+ padding-inline: var(--wpds-dimension-padding-lg);
+ /* Fills whatever header row hosts it, so the action stays pinned to the
+ panel's right edge, and takes the row's full height so the actions have a
+ top to align to. */
+ flex: 1;
+ align-self: stretch;
+ min-width: 0;
+ /* The window drags by the toolbar's empty space; its controls opt back out
+ below so clicks reach them. */
+ -webkit-app-region: drag;
+}
+
+.identity {
+ display: flex;
+ align-items: center;
+ gap: var(--wpds-dimension-gap-md);
+ min-width: 0;
+}
+
+.siteIcon {
+ flex: 0 0 auto;
+ inline-size: 32px;
+ block-size: 32px;
+ border-radius: var(--wpds-border-radius-sm);
+}
+
+.identityText {
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+}
+
+.siteName {
+ font-size: var(--wpds-typography-font-size-md);
+ font-weight: 600;
+ line-height: 1.25;
+ color: var(--wpds-color-fg-content-neutral);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.siteStatusRow {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ min-width: 0;
+ line-height: 1.25;
+}
+
+/* Pull the status target back so its dot optically aligns with the site name
+ above rather than with the button's padded edge. Only when the button is
+ there — without it the URL would hang past the name. */
+.siteStatusRowWithButton {
+ margin-inline-start: -4px;
+}
+
+/* Doubled for specificity over the shared button's own 24px sizing: the
+ toolbar sits the control inside a line of text, where a 24px hit area
+ would overlap the site icon on hover. */
+.siteStatusButton.siteStatusButton {
+ flex-basis: 16px;
+ inline-size: 16px;
+ block-size: 16px;
+ -webkit-app-region: no-drag;
+}
+
+.siteUrl,
+.siteUrlStatic {
+ display: inline-flex;
+ align-items: center;
+ gap: 2px;
+ min-width: 0;
+ padding: 0;
+ border: 0;
+ background: transparent;
+ font-size: var(--wpds-typography-font-size-xs);
+ color: var(--wpds-color-fg-content-neutral-weak);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.siteUrl {
+ -webkit-app-region: no-drag;
+ cursor: var(--wpds-cursor-control);
+ border-radius: 2px;
+ transition: color 100ms ease;
+}
+
+.siteUrl:hover {
+ color: var(--wpds-color-fg-content-neutral);
+}
+
+.siteUrl:focus-visible {
+ outline: 2px solid var(--wpds-color-stroke-interactive-brand);
+ outline-offset: 2px;
+}
+
+.siteUrlIcon {
+ opacity: 0;
+ transition: opacity 100ms ease;
+}
+
+/* The icon SVGs carry no fill of their own, so they paint black in both colour
+ schemes unless told to follow the text. */
+.siteUrlIcon {
+ fill: currentColor;
+}
+
+.siteUrl:is(:hover, :focus-visible) .siteUrlIcon {
+ opacity: 1;
+}
+
+.actions {
+ display: flex;
+ align-items: center;
+ gap: var(--wpds-dimension-gap-xs);
+ flex: 0 0 auto;
+ /* Pinned to the top of the header rather than centred against the site's
+ two-line identity block, and inset to line up with the preview pane's
+ toolbar buttons. Both panels start at the split frame's top edge; the
+ preview header pads 4px and then centres its controls in a 32px row. */
+ align-self: flex-start;
+ padding-block-start: var(--wpds-dimension-padding-md);
+ -webkit-app-region: no-drag;
+}
+
+/* --- Primary action ------------------------------------------------------ */
+
+.action {
+ position: relative;
+ /* A stable floor so the label can change without the toolbar reflowing
+ around it. */
+ min-width: 64px;
+ justify-content: center;
+ /* Keeps the progress fill inside the button's rounded edge. */
+ overflow: hidden;
+ transition: min-width 200ms ease;
+}
+
+/* Fills from the leading edge as the sync advances. Drawn from the button's
+ own foreground so it works on the solid and the outline button alike. */
+.actionProgress {
+ position: absolute;
+ inset-block: 0;
+ inset-inline-start: 0;
+ inline-size: var(--action-progress, 0%);
+ background: color-mix(in srgb, currentColor 22%, transparent);
+ transition: inline-size 400ms ease;
+ pointer-events: none;
+}
+
+.actionLabel {
+ display: inline-flex;
+ align-items: center;
+ animation: actionLabelIn 200ms ease both;
+}
+
+@keyframes actionLabelIn {
+ from {
+ opacity: 0;
+ transform: translateY(3px);
+ }
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+/* --- Details menu -------------------------------------------------------- */
+
+.menu {
+ min-width: 240px;
+ max-width: 320px;
+}
+
+.menuDetail {
+ padding: var(--wpds-dimension-padding-sm) var(--wpds-dimension-padding-md);
+ font-size: var(--wpds-typography-font-size-xs);
+ line-height: 1.5;
+ color: var(--wpds-color-fg-content-neutral-weak);
+}
+
+.menuDetailError {
+ color: var(--wpds-color-fg-content-error);
+}
+
+/* Names the list of connections a push or pull could run against. */
+.menuGroupLabel {
+ padding: var(--wpds-dimension-padding-sm) var(--wpds-dimension-padding-md)
+ var(--wpds-dimension-padding-xs);
+ font-size: var(--wpds-typography-font-size-xs);
+ color: var(--wpds-color-fg-content-neutral-weak);
+}
+
+.menuItemStack {
+ display: flex;
+ flex-direction: column;
+ gap: 1px;
+ min-width: 0;
+}
+
+.menuItemSub {
+ font-size: var(--wpds-typography-font-size-xs);
+ color: var(--wpds-color-fg-content-neutral-weak);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.menuItemMeta {
+ margin-inline-start: auto;
+ padding-inline-start: var(--wpds-dimension-padding-md);
+ color: var(--wpds-color-fg-content-neutral-weak);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .action,
+ .actionProgress,
+ .siteUrl,
+ .siteUrlIcon {
+ transition: none;
+ }
+
+ .actionLabel {
+ animation: none;
+ }
+}
+
diff --git a/apps/ui/src/components/site-toolbar/sync-dialog.module.css b/apps/ui/src/components/site-toolbar/sync-dialog.module.css
new file mode 100644
index 0000000000..f11fee1dd6
--- /dev/null
+++ b/apps/ui/src/components/site-toolbar/sync-dialog.module.css
@@ -0,0 +1,201 @@
+/* 480px: wider than wpds `small` (400) and narrower than `medium` (560).
+ Unlayered, so it beats the size rule in wpds's `wp-ui-components` layer. */
+.popup {
+ max-width: 480px;
+}
+
+/* Segmented control, matching Settings' appearance picker: a sliding
+ indicator behind two equal segments. */
+.directionPicker {
+ position: relative;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ align-items: center;
+ border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
+ border-radius: var(--wpds-border-radius-sm);
+ background: var(--wpds-color-bg-interactive-neutral-weak);
+ line-height: 1;
+}
+
+.directionPicker::before {
+ content: '';
+ position: absolute;
+ inset-block: calc(var(--wpds-border-width-xs) * -1);
+ inset-inline-start: 0;
+ box-sizing: border-box;
+ inline-size: 50%;
+ border: 1px solid var(--wpds-color-stroke-interactive-neutral);
+ border-radius: var(--wpds-border-radius-sm);
+ background: var(--wpds-color-bg-interactive-neutral-weak);
+ pointer-events: none;
+ transform: translateX(
+ calc(var(--direction-active-index, 0) * 100% + var(--direction-edge-shift, 0px))
+ );
+}
+
+/* Physical translateX against a logical inset — flip the sign in RTL. */
+.directionPicker:dir(rtl)::before {
+ transform: translateX(
+ calc(var(--direction-active-index, 0) * -100% - var(--direction-edge-shift, 0px))
+ );
+}
+
+/* At either end, slide the indicator one border-width outward so its border
+ overlays the container's rather than doubling it. */
+.directionPicker[data-active-index='0'] {
+ --direction-active-index: 0;
+ --direction-edge-shift: calc(var(--wpds-border-width-xs) * -1);
+}
+
+.directionPicker[data-active-index='1'] {
+ --direction-active-index: 1;
+ --direction-edge-shift: var(--wpds-border-width-xs);
+}
+
+@media not (prefers-reduced-motion) {
+ .directionPicker::before {
+ transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
+ }
+}
+
+.directionButton {
+ position: relative;
+ z-index: 1;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--wpds-dimension-gap-xs);
+ min-height: 32px;
+ padding: 0 var(--wpds-dimension-padding-md);
+ border: 0;
+ border-radius: var(--wpds-border-radius-sm);
+ background: transparent;
+ color: var(--wpds-color-fg-content-neutral-weak);
+ font: inherit;
+ font-size: var(--wpds-typography-font-size-sm);
+ line-height: var(--wpds-typography-line-height-sm);
+ cursor: var(--wpds-cursor-control);
+}
+
+.directionButton:hover,
+.directionButtonActive {
+ color: var(--wpds-color-fg-content-neutral);
+}
+
+.directionButton:focus-visible {
+ outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus-brand);
+ outline-offset: 2px;
+}
+
+.directionIcon {
+ flex: 0 0 auto;
+ fill: currentColor;
+ width: 16px;
+ height: 16px;
+}
+
+/* The URL identifies the connection; Production/Staging is a hint under it,
+ because that flag isn't always known when a connection is stored. */
+.destination {
+ min-width: 0;
+ margin-block-end: var(--wpds-dimension-padding-md);
+}
+
+.destinationTrigger {
+ display: flex;
+ align-items: center;
+ gap: var(--wpds-dimension-gap-sm);
+ inline-size: 100%;
+ min-width: 0;
+ padding: var(--wpds-dimension-padding-sm) var(--wpds-dimension-padding-md);
+ border: 1px solid var(--wpds-color-stroke-surface-neutral);
+ border-radius: var(--wpds-border-radius-md);
+ background: transparent;
+ text-align: start;
+ cursor: var(--wpds-cursor-control);
+}
+
+.destinationTrigger:hover {
+ background: var(--wpds-color-bg-surface-neutral);
+}
+
+.destinationTrigger:focus-visible {
+ outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus-brand);
+ outline-offset: 2px;
+}
+
+.destinationTriggerText {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ min-width: 0;
+ flex: 1;
+}
+
+.destinationChevron {
+ flex: 0 0 auto;
+ fill: var(--wpds-color-fg-content-neutral-weak);
+ width: 16px;
+ height: 16px;
+}
+
+.destinationStatic {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ min-width: 0;
+}
+
+/* Wide enough that a connection's URL isn't the thing that wraps. */
+.menu {
+ min-width: 280px;
+ max-width: 420px;
+}
+
+.menuItem {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ min-width: 0;
+}
+
+.destinationUrl {
+ font-size: var(--wpds-typography-font-size-sm);
+ line-height: var(--wpds-typography-line-height-sm);
+ color: var(--wpds-color-fg-content-neutral);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.destinationMeta {
+ font-size: var(--wpds-typography-font-size-xs);
+ line-height: var(--wpds-typography-line-height-xs);
+ color: var(--wpds-color-fg-content-neutral-weak);
+}
+
+.consequence {
+ margin: var(--wpds-dimension-gap-sm) 0 var(--wpds-dimension-padding-lg);
+ font-size: var(--wpds-typography-font-size-xs);
+ line-height: var(--wpds-typography-line-height-xs);
+ color: var(--wpds-color-fg-content-neutral-weak);
+}
+
+.whatToSync {
+ display: flex;
+ flex-direction: column;
+ gap: var(--wpds-dimension-gap-xs);
+}
+
+.legend {
+ font-size: var(--wpds-typography-font-size-xs);
+ line-height: var(--wpds-typography-line-height-xs);
+ color: var(--wpds-color-fg-content-neutral-weak);
+}
+
+/* A stable floor so Push and Pull are the same width and the footer doesn't
+ reflow when the direction changes. */
+.run {
+ min-width: 88px;
+ justify-content: center;
+}
diff --git a/apps/ui/src/components/site-toolbar/sync-dialog.tsx b/apps/ui/src/components/site-toolbar/sync-dialog.tsx
new file mode 100644
index 0000000000..08025636f4
--- /dev/null
+++ b/apps/ui/src/components/site-toolbar/sync-dialog.tsx
@@ -0,0 +1,259 @@
+import { __, sprintf } from '@wordpress/i18n';
+import { arrowDown, arrowUp, chevronDown, Icon } from '@wordpress/icons';
+import { Button, Dialog } from '@wordpress/ui';
+import { clsx } from 'clsx';
+import { useCallback, useEffect, useState } from 'react';
+import * as Menu from '@/components/menu';
+import { useConnector } from '@/data/core';
+import styles from './sync-dialog.module.css';
+import { createInitialTree, hasSelection, toPullOptions, toPushOptions } from './sync-selection';
+import { convertRawToTreeNodes, SyncTree, updateNodeById } from './sync-tree';
+import { formatSyncTimestamp, getConnectionLabel, stripProtocol } from './utils';
+import type { TreeNode } from './sync-tree';
+import type { SyncSite } from '@/data/core';
+import type { PullSyncOptions, PushSyncOptions } from '@studio/common/types/sync';
+
+export type SyncDirection = 'push' | 'pull';
+
+type Props = {
+ siteId: string;
+ connections: SyncSite[];
+ open: boolean;
+ onOpenChange: ( open: boolean ) => void;
+ // Which direction the dialog opens on. Defaults to push; onboarding opens it
+ // on pull to nudge a freshly connected site's first pull.
+ initialDirection?: SyncDirection;
+ onRun: (
+ direction: SyncDirection,
+ target: SyncSite,
+ options: PushSyncOptions | PullSyncOptions | undefined
+ ) => void;
+};
+
+// Just the age — "4h", "6d". The direction already says what happened then.
+function lastSyncAge( connection: SyncSite, direction: SyncDirection ): string | null {
+ return formatSyncTimestamp(
+ direction === 'push' ? connection.lastPushTimestamp : connection.lastPullTimestamp
+ );
+}
+
+/** The second line under a connection's URL: what kind it is, and how stale. */
+function describeConnection( connection: SyncSite, direction: SyncDirection ): string {
+ const age = lastSyncAge( connection, direction );
+ return [
+ getConnectionLabel( connection ),
+ age
+ ? sprintf(
+ // translators: %s: compact relative time, e.g. "6d".
+ direction === 'push' ? __( 'pushed %s ago' ) : __( 'pulled %s ago' ),
+ age
+ )
+ : null,
+ ]
+ .filter( Boolean )
+ .join( ' · ' );
+}
+
+/**
+ * One place to answer everything a sync needs: which way it goes, which
+ * connected site it touches, and what it carries.
+ *
+ * Connections are identified by URL rather than by their Production/Staging
+ * label: that label is derived from whether the site's id appears in some other
+ * site's `wpcom_staging_blog_ids`, which isn't always known at the time a
+ * connection is stored, so two connections can both read "Production". The URL
+ * is always right.
+ */
+export function SyncDialog( {
+ siteId,
+ connections,
+ open,
+ onOpenChange,
+ initialDirection = 'push',
+ onRun,
+}: Props ) {
+ const connector = useConnector();
+ const [ direction, setDirection ] = useState< SyncDirection >( initialDirection );
+ const [ targetId, setTargetId ] = useState< number | null >( null );
+ const [ tree, setTree ] = useState< TreeNode[] >( createInitialTree );
+
+ const target = connections.find( ( candidate ) => candidate.id === targetId ) ?? connections[ 0 ];
+
+ // Push browses the local site; pull browses the remote backup. Switching
+ // direction means the tree describes a different filesystem, so start over.
+ useEffect( () => {
+ setTree( createInitialTree() );
+ }, [ direction, targetId ] );
+
+ const expandNode = useCallback(
+ async ( node: TreeNode ) => {
+ const path = node.path ?? 'wp-content';
+ try {
+ if ( direction === 'push' ) {
+ const entries = await connector.listLocalFileTree( siteId, path, 1 );
+ setTree( ( prev ) =>
+ updateNodeById( prev, node.id, {
+ children: convertRawToTreeNodes( entries ),
+ checked: node.checked,
+ } )
+ );
+ return;
+ }
+ if ( ! target ) {
+ return;
+ }
+ const rewindId = await connector.getLatestRewindId( target.id );
+ if ( ! rewindId ) {
+ return;
+ }
+ const contents = await connector.listRemoteFileTree( target.id, rewindId, path );
+ const entries = Object.entries( contents ).map( ( [ name, raw ] ) => {
+ const item = raw as { type?: string; has_children?: boolean; id?: string };
+ const isDirectory = item.type === 'dir' || item.has_children === true;
+ return {
+ name,
+ isDirectory,
+ path: `${ path.replace( /\/$/, '' ) }/${ name }`,
+ };
+ } );
+ setTree( ( prev ) =>
+ updateNodeById( prev, node.id, {
+ children: convertRawToTreeNodes( entries ),
+ checked: node.checked,
+ } )
+ );
+ } catch ( error ) {
+ console.error( 'Failed to list sync tree:', error );
+ setTree( ( prev ) => updateNodeById( prev, node.id, { children: [] } ) );
+ }
+ },
+ [ connector, direction, siteId, target ]
+ );
+
+ const canRun = Boolean( target ) && hasSelection( tree );
+
+ // The label is a hint, not an identifier — see the note above. It sits with
+ // the age so the URL above it stands alone.
+ const destinationMeta = target ? describeConnection( target, direction ) : '';
+
+ return (
+
+
+
+ { __( 'Sync this site' ) }
+
+
+ { /* Which site first, then which way — the destination is the
+ thing most easily got wrong. */ }
+
+ { connections.length > 1 ? (
+
+
+
+
+ { target ? stripProtocol( target.url ) : __( 'Choose a site' ) }
+
+ { destinationMeta }
+
+
+ { connections.map( ( connection ) => (
+ setTargetId( connection.id ) }>
+
+
+ { stripProtocol( connection.url ) }
+
+
+ { describeConnection( connection, direction ) }
+
+
+
+ ) ) }
+
+
+ ) : target ? (
+
+ { stripProtocol( target.url ) }
+ { destinationMeta }
+
+ ) : null }
+
+ { ( [ 'push', 'pull' ] as const ).map( ( option ) => (
+ setDirection( option ) }
+ >
+
+ ) ) }
+
+
+
+ { direction === 'push'
+ ? __( 'Replaces the live site with this one.' )
+ : __( 'Replaces this site with the live one.' ) }
+
+
+
+ { __( 'What to sync' ) }
+
+
+
+
+ { __( 'Cancel' ) }
+
+ {
+ if ( target && canRun ) {
+ onRun(
+ direction,
+ target,
+ direction === 'push' ? toPushOptions( tree ) : toPullOptions( tree )
+ );
+ onOpenChange( false );
+ }
+ } }
+ >
+ { direction === 'push' ? __( 'Push' ) : __( 'Pull' ) }
+
+
+
+
+ );
+}
diff --git a/apps/ui/src/components/site-toolbar/sync-selection.ts b/apps/ui/src/components/site-toolbar/sync-selection.ts
new file mode 100644
index 0000000000..87a3c137df
--- /dev/null
+++ b/apps/ui/src/components/site-toolbar/sync-selection.ts
@@ -0,0 +1,155 @@
+import { categorizePath } from '@studio/common/lib/sync/tree-utils';
+import { __ } from '@wordpress/i18n';
+import type { TreeNode } from './sync-tree';
+import type { PullSyncOptions, PushSyncOptions, SyncOption } from '@studio/common/types/sync';
+
+// The tree's two roots. Everything a sync can carry is either the database or
+// something under wp-content.
+export const DATABASE_NODE_ID = 'sqls';
+export const FILES_NODE_ID = 'filesAndFolders';
+export const WP_CONTENT_NODE_ID = 'wp-content';
+
+/** The tree as it stands before any directory has been listed. */
+export function createInitialTree(): TreeNode[] {
+ return [
+ {
+ id: DATABASE_NODE_ID,
+ name: DATABASE_NODE_ID,
+ label: __( 'Database' ),
+ checked: true,
+ },
+ {
+ id: FILES_NODE_ID,
+ name: FILES_NODE_ID,
+ label: __( 'Files and folders' ),
+ checked: true,
+ expanded: true,
+ hideExpandButton: true,
+ children: [
+ {
+ id: WP_CONTENT_NODE_ID,
+ name: WP_CONTENT_NODE_ID,
+ label: 'wp-content',
+ checked: true,
+ type: 'folder',
+ expanded: false,
+ children: [],
+ },
+ ],
+ },
+ ];
+}
+
+/**
+ * The nodes a sync should carry: a checked node stands for its whole subtree,
+ * so recursion stops there. A mixed node contributes only its checked
+ * descendants.
+ */
+function collectChecked( nodes: TreeNode[] | undefined ): TreeNode[] {
+ if ( ! nodes?.length ) {
+ return [];
+ }
+ const result: TreeNode[] = [];
+ for ( const node of nodes ) {
+ if ( node.checked ) {
+ result.push( node );
+ } else if ( node.indeterminate && node.children?.length ) {
+ result.push( ...collectChecked( node.children ) );
+ }
+ }
+ return result;
+}
+
+function findNode( nodes: TreeNode[], id: string ): TreeNode | undefined {
+ for ( const node of nodes ) {
+ if ( node.id === id ) {
+ return node;
+ }
+ const found = node.children ? findNode( node.children, id ) : undefined;
+ if ( found ) {
+ return found;
+ }
+ }
+ return undefined;
+}
+
+function roots( tree: TreeNode[] ) {
+ return {
+ database: findNode( tree, DATABASE_NODE_ID ),
+ files: findNode( tree, FILES_NODE_ID ),
+ wpContent: findNode( tree, WP_CONTENT_NODE_ID ),
+ };
+}
+
+/** True when the whole site is selected, which both sides express as `all`. */
+export function isWholeSite( tree: TreeNode[] ): boolean {
+ const { database, files } = roots( tree );
+ return Boolean( database?.checked && files?.checked );
+}
+
+export function hasSelection( tree: TreeNode[] ): boolean {
+ const { database, files } = roots( tree );
+ return Boolean(
+ database?.checked || files?.checked || files?.indeterminate || database?.indeterminate
+ );
+}
+
+/**
+ * Push selects local paths. Each checked path also contributes the category it
+ * falls into, because the export layer decides what to archive from the
+ * categories and then narrows to the paths.
+ */
+export function toPushOptions( tree: TreeNode[] ): PushSyncOptions | undefined {
+ if ( isWholeSite( tree ) ) {
+ return undefined;
+ }
+
+ const { database, wpContent } = roots( tree );
+ const optionsToSync: SyncOption[] = [];
+ let specificSelectionPaths: string[] | undefined;
+
+ if ( database?.checked ) {
+ optionsToSync.push( 'sqls' );
+ }
+
+ const paths = new Set< string >();
+ const categories = new Set< SyncOption >();
+ for ( const node of collectChecked( wpContent?.children ) ) {
+ if ( ! node.path ) {
+ continue;
+ }
+ const relative = node.path.replace( /^\/?wp-content\//, '' );
+ paths.add( relative );
+ categories.add( categorizePath( relative ) );
+ }
+
+ if ( paths.size > 0 ) {
+ optionsToSync.push( ...categories );
+ specificSelectionPaths = [ ...paths ];
+ }
+
+ return { optionsToSync, ...( specificSelectionPaths ? { specificSelectionPaths } : {} ) };
+}
+
+/**
+ * Pull selects remote backup node ids rather than paths, and marks the run
+ * with `paths` so the CLI knows to read the include list.
+ */
+export function toPullOptions( tree: TreeNode[] ): PullSyncOptions | undefined {
+ if ( isWholeSite( tree ) ) {
+ return undefined;
+ }
+
+ const { database, wpContent } = roots( tree );
+ const optionsToSync: SyncOption[] = database?.checked ? [ 'sqls' ] : [];
+ const includePathList = collectChecked( wpContent?.children )
+ .map( ( node ) => node.pathId )
+ .filter( ( pathId ): pathId is string => Boolean( pathId ) );
+
+ if ( includePathList.length > 0 ) {
+ optionsToSync.unshift( 'paths' );
+ return { optionsToSync, includePathList };
+ }
+
+ return { optionsToSync };
+}
diff --git a/apps/ui/src/components/site-toolbar/sync-tree.module.css b/apps/ui/src/components/site-toolbar/sync-tree.module.css
new file mode 100644
index 0000000000..d288f994a7
--- /dev/null
+++ b/apps/ui/src/components/site-toolbar/sync-tree.module.css
@@ -0,0 +1,118 @@
+/* Tall enough to browse in, and it scrolls rather than pushing the dialog's
+ footer off screen once wp-content is opened. */
+.tree {
+ block-size: 260px;
+ overflow-y: auto;
+ overscroll-behavior: contain;
+ padding: var(--wpds-dimension-padding-xs);
+ border: 1px solid var(--wpds-color-stroke-surface-neutral);
+ border-radius: var(--wpds-border-radius-md);
+}
+
+.item {
+ display: flex;
+ align-items: center;
+ gap: var(--wpds-dimension-gap-xs);
+ min-block-size: 28px;
+}
+
+.twisty {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 auto;
+ inline-size: 20px;
+ block-size: 20px;
+ padding: 0;
+ border: 0;
+ border-radius: var(--wpds-border-radius-sm);
+ background: transparent;
+ color: var(--wpds-color-fg-content-neutral-weak);
+ cursor: var(--wpds-cursor-control);
+}
+
+.twisty:hover {
+ color: var(--wpds-color-fg-content-neutral);
+}
+
+.twisty:focus-visible {
+ outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus-brand);
+}
+
+/* Keeps the row's text aligned with its siblings when a node can't be opened,
+ rather than letting leaves slide back under their folder's checkbox. */
+.twistyHidden {
+ visibility: hidden;
+}
+
+.twistyIcon {
+ fill: currentColor;
+ width: 16px;
+ height: 16px;
+}
+
+@media not (prefers-reduced-motion) {
+ .twistyIcon {
+ transition: transform 120ms ease;
+ }
+}
+
+.twistyIconOpen {
+ transform: rotate(90deg);
+}
+
+.label {
+ display: flex;
+ align-items: center;
+ gap: var(--wpds-dimension-gap-xs);
+ min-width: 0;
+ flex: 1;
+ 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);
+}
+
+.labelDisabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+.checkbox {
+ flex: 0 0 auto;
+ margin: 0;
+}
+
+.nodeIcon {
+ flex: 0 0 auto;
+ fill: var(--wpds-color-fg-content-neutral-weak);
+ width: 16px;
+ height: 16px;
+}
+
+.labelText {
+ min-width: 0;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.spinner {
+ flex: 0 0 auto;
+ margin: 0;
+}
+
+/* Indent one level, with a rule marking the branch the children belong to. */
+.group {
+ margin-inline-start: 10px;
+ padding-inline-start: var(--wpds-dimension-padding-md);
+ border-inline-start: 1px solid var(--wpds-color-stroke-surface-neutral);
+}
+
+.empty {
+ margin: 0;
+ padding: var(--wpds-dimension-padding-xs) 0;
+ font-size: var(--wpds-typography-font-size-xs);
+ line-height: var(--wpds-typography-line-height-xs);
+ color: var(--wpds-color-fg-content-neutral-weak);
+}
diff --git a/apps/ui/src/components/site-toolbar/sync-tree.tsx b/apps/ui/src/components/site-toolbar/sync-tree.tsx
new file mode 100644
index 0000000000..2e8c836425
--- /dev/null
+++ b/apps/ui/src/components/site-toolbar/sync-tree.tsx
@@ -0,0 +1,303 @@
+import { shouldLimitDepth } from '@studio/common/lib/sync/tree-utils';
+import { Spinner } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { brush, chevronRight, Icon, page, plugins, file as folder } from '@wordpress/icons';
+import { clsx } from 'clsx';
+import { useEffect, useRef } from 'react';
+import styles from './sync-tree.module.css';
+import type { RawDirectoryEntry } from '@studio/common/types/sync-tree';
+import type { Dispatch, SetStateAction } from 'react';
+
+export type TreeNodeType = 'folder' | 'file' | 'plugin' | 'theme';
+
+export type TreeNode = {
+ id: string;
+ name: string;
+ label: string;
+ checked: boolean;
+ indeterminate?: boolean;
+ expanded?: boolean;
+ hideExpandButton?: boolean;
+ children?: TreeNode[];
+ type?: TreeNodeType;
+ loading?: boolean;
+ // Remote backup node id, used by pull's `includePathList`.
+ pathId?: string;
+ // Path relative to the site root, used by push's `specificSelectionPaths`.
+ path?: string;
+};
+
+const NODE_ICONS: Record< TreeNodeType, typeof folder > = {
+ folder,
+ file: page,
+ plugin: plugins,
+ theme: brush,
+};
+
+/**
+ * Applies a patch to a node and reconciles the tri-state of everything around
+ * it: checking a folder checks its whole subtree, and every ancestor becomes
+ * checked, indeterminate, or clear depending on what its children ended up as.
+ */
+function updateNode( node: TreeNode, patch: Partial< TreeNode > ): TreeNode {
+ const updated = { ...node, ...patch };
+
+ if ( updated.children && updated.children.length > 0 ) {
+ updated.children = updated.children.map( ( child ) =>
+ 'checked' in patch ? updateNode( child, { checked: patch.checked } ) : child
+ );
+ const checkedCount = updated.children.filter( ( child ) => child.checked ).length;
+ updated.checked = checkedCount === updated.children.length;
+ updated.indeterminate = checkedCount > 0 && checkedCount < updated.children.length;
+ }
+
+ return updated;
+}
+
+export function updateNodeById(
+ nodes: TreeNode[],
+ id: string,
+ patch: Partial< TreeNode >
+): TreeNode[] {
+ return nodes.map( ( node ) => {
+ if ( node.id === id ) {
+ return updateNode( node, patch );
+ }
+ if ( node.children && node.children.length > 0 ) {
+ const children = updateNodeById( node.children, id, patch );
+ const checkedCount = children.filter( ( child ) => child.checked ).length;
+ return {
+ ...node,
+ checked: checkedCount === children.length,
+ indeterminate:
+ ( checkedCount > 0 && checkedCount < children.length ) ||
+ children.some( ( child ) => child.indeterminate ),
+ children,
+ };
+ }
+ return node;
+ } );
+}
+
+/** Turns a directory listing into tree nodes, folders first then alphabetical. */
+export function convertRawToTreeNodes( rawNodes: RawDirectoryEntry[] ): TreeNode[] {
+ const pluginPath = /^plugins\/[^/]+$/;
+ const themePath = /^themes\/[^/]+$/;
+
+ return rawNodes
+ .map( ( raw ): TreeNode => {
+ let type: TreeNodeType = raw.isDirectory ? 'folder' : 'file';
+ if ( raw.isDirectory ) {
+ const relative = raw.path.replace( /^wp-content\//, '' );
+ if ( pluginPath.test( relative ) ) {
+ type = 'plugin';
+ } else if ( themePath.test( relative ) ) {
+ type = 'theme';
+ }
+ }
+
+ return {
+ id: `local-${ raw.path.replace( /[^a-zA-Z0-9/]/g, '-' ) }`,
+ name: raw.name,
+ label: raw.name,
+ checked: false,
+ type,
+ path: raw.path,
+ pathId: raw.path,
+ children: raw.children
+ ? convertRawToTreeNodes( raw.children )
+ : raw.isDirectory
+ ? []
+ : undefined,
+ expanded: false,
+ // A plugin or theme syncs whole; there's nothing useful to pick
+ // inside one, so don't offer to open it.
+ hideExpandButton: shouldLimitDepth( raw.path ),
+ };
+ } )
+ .sort( ( a, b ) => {
+ if ( a.type !== b.type ) {
+ const order = { folder: 0, plugin: 1, theme: 2, file: 3 };
+ return order[ a.type as TreeNodeType ] - order[ b.type as TreeNodeType ];
+ }
+ return a.name.toLowerCase().localeCompare( b.name.toLowerCase() );
+ } );
+}
+
+/** Native checkbox so the indeterminate state can be set on the DOM node. */
+function TriStateCheckbox( {
+ checked,
+ indeterminate,
+ disabled,
+ onChange,
+ label,
+}: {
+ checked: boolean;
+ indeterminate?: boolean;
+ disabled?: boolean;
+ onChange: ( checked: boolean ) => void;
+ label: string;
+} ) {
+ const ref = useRef< HTMLInputElement >( null );
+
+ useEffect( () => {
+ if ( ref.current ) {
+ ref.current.indeterminate = Boolean( indeterminate ) && ! checked;
+ }
+ }, [ checked, indeterminate ] );
+
+ return (
+
+
+ {
+ if ( ! canExpand ) {
+ return;
+ }
+ // Children are fetched the first time a folder opens, not
+ // up front: a site's wp-content is far too big to walk.
+ if ( ! expanded && onExpand && node.children?.length === 0 ) {
+ onPatch( node.id, { loading: true } );
+ try {
+ await onExpand( node );
+ } finally {
+ onPatch( node.id, { loading: false } );
+ }
+ }
+ onPatch( node.id, { expanded: ! expanded } );
+ } }
+ >
+
+
+
+ onPatch( node.id, { checked } ) }
+ />
+ { node.type ? (
+ { node.label }
+
+
+ { node.loading ?
+
+ { expanded && node.children ? (
+
+ { node.children.length === 0 ? (
+
{ node.loading ? __( 'Loading…' ) : __( 'Empty' ) }
+ ) : (
+ node.children.map( ( child, childIndex ) => (
+
+ ) )
+ ) }
+
+ ) : null }
+
+ { tree.map( ( node, index ) => (
+ setTree( ( prev ) => updateNodeById( prev, id, patch ) ) }
+ onExpand={ onExpand }
+ />
+ ) ) }
+
+ );
+}
diff --git a/apps/ui/src/components/site-dropdown/utils.test.ts b/apps/ui/src/components/site-toolbar/utils.test.ts
similarity index 94%
rename from apps/ui/src/components/site-dropdown/utils.test.ts
rename to apps/ui/src/components/site-toolbar/utils.test.ts
index ca71c84296..365e2eeb29 100644
--- a/apps/ui/src/components/site-dropdown/utils.test.ts
+++ b/apps/ui/src/components/site-toolbar/utils.test.ts
@@ -52,8 +52,8 @@ describe( 'deriveSiteStatus', () => {
} );
} );
-// Shared by the site dropdown's toggle and the sidebar's status button, so the
-// two can't drift on how a busy site is described.
+// Shared by the site toolbar and sidebar status controls so they cannot drift
+// on how a busy site is described.
describe( 'getSiteStatusName', () => {
const base = { running: false, starting: false, stopping: false, operation: null };
diff --git a/apps/ui/src/components/site-dropdown/utils.ts b/apps/ui/src/components/site-toolbar/utils.ts
similarity index 70%
rename from apps/ui/src/components/site-dropdown/utils.ts
rename to apps/ui/src/components/site-toolbar/utils.ts
index ad0bc046d9..b92b9e5af9 100644
--- a/apps/ui/src/components/site-dropdown/utils.ts
+++ b/apps/ui/src/components/site-toolbar/utils.ts
@@ -1,10 +1,37 @@
import { type SiteOperationKind } from '@studio/common/lib/site-operation';
import { getSiteOperationLabel } from '@studio/common/lib/site-operation-labels';
import { __, sprintf } from '@wordpress/i18n';
+import { formatRelativeTime } from '@/lib/format-relative-time';
import { getSiteDisplayUrl } from '@/lib/get-site-url';
-import type { SiteStatus } from './dropdown-trigger';
+import type { SiteRunStatus } from '@/components/site-status-button';
import type { SiteDetails, Snapshot, SyncSite } from '@/data/core';
+const MINUTE_MS = 60_000;
+
+/**
+ * The shortest readable age: "3s", "4m", "2h", "6d". Seconds matter here — a
+ * sync is often checked moments after it lands, and "just now" holds for a
+ * whole minute. Returns null for timestamps we can't read.
+ */
+export function formatSyncTimestamp( isoTimestamp: string | null | undefined ): string | null {
+ if ( ! isoTimestamp ) {
+ return null;
+ }
+ const timestampMs = Date.parse( isoTimestamp );
+ if ( ! Number.isFinite( timestampMs ) ) {
+ return null;
+ }
+ const elapsedMs = Math.max( 0, Date.now() - timestampMs );
+ if ( elapsedMs < MINUTE_MS ) {
+ return sprintf(
+ // translators: %d: number of seconds, compact relative time (e.g. "3s").
+ __( '%ds' ),
+ Math.max( 1, Math.floor( elapsedMs / 1000 ) )
+ );
+ }
+ return formatRelativeTime( new Date( timestampMs ).toISOString() ) || null;
+}
+
export function stripProtocol( url: string ): string {
return url.replace( /^https?:\/\//, '' ).replace( /\/$/, '' );
}
@@ -13,6 +40,26 @@ export function ensureProtocol( url: string ): string {
return /^https?:\/\//.test( url ) ? url : `https://${ url }`;
}
+/**
+ * Connections in the order a picker should list them: production first, then
+ * staging, each group alphabetical so the list doesn't reshuffle between
+ * fetches.
+ */
+export function sortConnections( connectedSites: SyncSite[] | undefined ): SyncSite[] {
+ return [ ...( connectedSites ?? [] ) ].sort( ( a, b ) => {
+ if ( a.isStaging !== b.isStaging ) {
+ return a.isStaging ? 1 : -1;
+ }
+ return a.name.localeCompare( b.name );
+ } );
+}
+
+/** What to call a connection in a list where its sibling is right beside it. */
+export function getConnectionLabel( connectedSite: SyncSite ): string {
+ return connectedSite.isStaging ? __( 'Staging' ) : __( 'Production' );
+}
+
+/** The single connection the header's sync and disconnect actions target. */
export function pickLiveSite( connectedSites: SyncSite[] | undefined ): SyncSite | undefined {
if ( ! connectedSites || connectedSites.length === 0 ) {
return undefined;
@@ -84,7 +131,7 @@ function getStatus(
isStarting: boolean,
isStopping: boolean,
operation: SiteOperationKind | null
-): SiteStatus {
+): SiteRunStatus {
if ( operation || isStarting || isStopping ) {
return 'transitioning';
}
@@ -93,7 +140,7 @@ function getStatus(
// Sentence form, read out by the status dot's aria-label.
function getStatusLabel(
- status: SiteStatus,
+ status: SiteRunStatus,
isStopping: boolean,
operation: SiteOperationKind | null
): string {
@@ -112,7 +159,7 @@ function getStatusLabel(
// The local-site row's second line: what's happening, or where the site lives.
function getLocalSublabel(
site: SiteDetails,
- status: SiteStatus,
+ status: SiteRunStatus,
isStopping: boolean,
operation: SiteOperationKind | null
): string {
@@ -127,7 +174,7 @@ function getLocalSublabel(
}
// Derives the running/transitioning/stopped status plus the user-visible
-// labels for the local-site row, so the dropdown consumes it in one line.
+// labels for local-site controls.
export function deriveSiteStatus(
site: SiteDetails,
isStarting: boolean,
@@ -136,7 +183,7 @@ export function deriveSiteStatus(
// replace the two flags above. Passed in rather than derived here because
// it's react-query state and this stays a pure function.
operation: SiteOperationKind | null
-): { status: SiteStatus; statusLabel: string; localSublabel: string } {
+): { status: SiteRunStatus; statusLabel: string; localSublabel: string } {
const status = getStatus( site, isStarting, isStopping, operation );
return {
diff --git a/apps/ui/src/data/core/connectors/hosted/index.ts b/apps/ui/src/data/core/connectors/hosted/index.ts
index b8e7390228..4da95778df 100644
--- a/apps/ui/src/data/core/connectors/hosted/index.ts
+++ b/apps/ui/src/data/core/connectors/hosted/index.ts
@@ -252,6 +252,9 @@ export function createHostedConnector( { apiBaseUrl }: HostedConnectorOptions ):
async deleteAllSnapshots() {
// No-op: hosted mode does not create WordPress.com preview sites.
},
+ async deletePreviewSite(): Promise< void > {
+ throw new UnsupportedError( 'deletePreviewSite' );
+ },
async publishPreviewSite(): Promise< { url: string } > {
throw new UnsupportedError( 'publishPreviewSite' );
},
diff --git a/apps/ui/src/data/core/connectors/ipc/index.ts b/apps/ui/src/data/core/connectors/ipc/index.ts
index c5f68d5161..4cfdbb078d 100644
--- a/apps/ui/src/data/core/connectors/ipc/index.ts
+++ b/apps/ui/src/data/core/connectors/ipc/index.ts
@@ -214,6 +214,44 @@ export function createIpcConnector(): Connector {
} );
}
+ // Like awaitSnapshotOperation, but for commands that report no URL (delete):
+ // resolves on the matching success event, rejects on a fatal error.
+ function awaitSnapshotCompletion( operationId: string ): Promise< void > {
+ return new Promise( ( resolve, reject ) => {
+ const unsubscribes: Array< () => void > = [];
+ const cleanup = () => {
+ for ( const unsubscribe of unsubscribes ) {
+ unsubscribe();
+ }
+ };
+
+ unsubscribes.push(
+ ipcListener.subscribe(
+ 'snapshot-success',
+ ( _event: unknown, payload: { operationId: string } ) => {
+ if ( payload.operationId !== operationId ) {
+ return;
+ }
+ cleanup();
+ resolve();
+ }
+ )
+ );
+ unsubscribes.push(
+ ipcListener.subscribe(
+ 'snapshot-fatal-error',
+ ( _event: unknown, payload: { operationId: string; data: { message: string } } ) => {
+ if ( payload.operationId !== operationId ) {
+ return;
+ }
+ cleanup();
+ reject( new Error( payload.data.message ) );
+ }
+ )
+ );
+ } );
+ }
+
return {
async init() {
// Install the application menu (View > Toggle DevTools, etc.).
@@ -536,6 +574,13 @@ export function createIpcConnector(): Connector {
await ipcApi.deleteAllSnapshots();
},
+ async deletePreviewSite( hostname ): Promise< void > {
+ const { operationId } = ( await ipcApi.deleteSnapshot( hostname ) ) as {
+ operationId: string;
+ };
+ await awaitSnapshotCompletion( operationId );
+ },
+
async publishPreviewSite( siteId, existingHostname ): Promise< { url: string } > {
const siteFolder = await resolveSiteFolder( siteId );
// Reuses the desktop app's `createSnapshot`/`updateSnapshot` IPC
diff --git a/apps/ui/src/data/core/connectors/local/index.ts b/apps/ui/src/data/core/connectors/local/index.ts
index c8d5f1dc10..d9f85c9b33 100644
--- a/apps/ui/src/data/core/connectors/local/index.ts
+++ b/apps/ui/src/data/core/connectors/local/index.ts
@@ -226,6 +226,26 @@ export function createLocalConnector( { apiBaseUrl }: LocalConnectorOptions ): C
} );
}
+ // Resolve when a snapshot command that reports no URL (delete) finishes,
+ // correlating the SSE stream by operationId.
+ function awaitSnapshotCompletion( operationId: string ): Promise< void > {
+ return new Promise( ( resolve, reject ) => {
+ const listener = ( output: SnapshotSseOutput ) => {
+ if ( output.operationId !== operationId ) {
+ return;
+ }
+ if ( output.kind === 'success' ) {
+ snapshotListeners.delete( listener );
+ resolve();
+ } else if ( output.kind === 'fatal-error' ) {
+ snapshotListeners.delete( listener );
+ reject( new Error( output.data.message ) );
+ }
+ };
+ snapshotListeners.add( listener );
+ } );
+ }
+
return {
async init() {
// The browser's EventSource reconnects automatically.
@@ -553,6 +573,13 @@ export function createLocalConnector( { apiBaseUrl }: LocalConnectorOptions ): C
async deleteAllSnapshots() {
// No-op: the local server has no delete-all route yet.
},
+ async deletePreviewSite( hostname ): Promise< void > {
+ const { operationId } = await api< { operationId: string } >(
+ `/snapshots/${ encodeURIComponent( hostname ) }`,
+ { method: 'DELETE' }
+ );
+ await awaitSnapshotCompletion( operationId );
+ },
async publishPreviewSite( siteId, existingHostname ): Promise< { url: string } > {
// A hostname means "refresh this preview"; otherwise create a new one.
// The server returns an operationId; progress + the final URL arrive on
diff --git a/apps/ui/src/data/core/types.ts b/apps/ui/src/data/core/types.ts
index 1e1634af81..bcbd1bc1b9 100644
--- a/apps/ui/src/data/core/types.ts
+++ b/apps/ui/src/data/core/types.ts
@@ -284,6 +284,8 @@ export interface Connector {
// quota source) so callers can fall back to static copy.
getStudioAssistantQuota(): Promise< StudioAssistantQuota | null >;
deleteAllSnapshots(): Promise< void >;
+ // Delete a single WordPress.com preview snapshot by its hostname.
+ deletePreviewSite( hostname: string ): Promise< void >;
// Asks the user to confirm deleting every preview site on their account.
// Resolves `true` only when they explicitly confirm.
confirmDeleteAllPreviewSites(): Promise< boolean >;
diff --git a/apps/ui/src/data/queries/use-preview-site.ts b/apps/ui/src/data/queries/use-preview-site.ts
index 523388efa0..efb5267638 100644
--- a/apps/ui/src/data/queries/use-preview-site.ts
+++ b/apps/ui/src/data/queries/use-preview-site.ts
@@ -11,8 +11,8 @@ type PublishPreviewVariables = {
};
// Creates or refreshes the WordPress.com-hosted preview snapshot for a
-// local site. Reports lifecycle into the shared sync-activity store so the
-// site-dropdown indicator can render the pending / success / error states.
+// local site. Reports lifecycle into the shared sync-activity store so
+// sync-activity consumers can render the pending / success / error states.
export function usePublishPreviewSite() {
const connector = useConnector();
const queryClient = useQueryClient();
@@ -34,3 +34,20 @@ export function usePublishPreviewSite() {
},
} );
}
+
+// Deletes a single WordPress.com-hosted preview by its hostname and refreshes
+// the snapshot list.
+export function useDeletePreviewSite() {
+ const connector = useConnector();
+ const queryClient = useQueryClient();
+ return useMutation( {
+ mutationFn: ( { hostname }: { hostname: string } ) => connector.deletePreviewSite( hostname ),
+ onSuccess: () => {
+ void queryClient.invalidateQueries( { queryKey: SNAPSHOTS_QUERY_KEY } );
+ },
+ onError: ( error ) => {
+ const message = error instanceof Error ? error.message : String( error );
+ toast.error( message || __( 'Failed to delete preview link' ) );
+ },
+ } );
+}
diff --git a/apps/ui/src/ui-classic/components/session-view/index.tsx b/apps/ui/src/ui-classic/components/session-view/index.tsx
index feb32dd72c..6a65ff0c91 100644
--- a/apps/ui/src/ui-classic/components/session-view/index.tsx
+++ b/apps/ui/src/ui-classic/components/session-view/index.tsx
@@ -18,9 +18,9 @@ import {
} from 'react';
import { PreviewToggleButton } from '@/components/preview-toggle-button';
import { ProgressiveBlur } from '@/components/progressive-blur';
-import { SiteDropdown } from '@/components/site-dropdown';
import { SiteIcon } from '@/components/site-icon';
import { type Annotation } from '@/components/site-preview/types';
+import { SiteToolbar } from '@/components/site-toolbar';
import { useAgentRun } from '@/data/queries/use-agent-run';
import { useStudioAssistantQuota } from '@/data/queries/use-assistant-quota';
import {
@@ -83,12 +83,7 @@ function SessionHeader( { summary }: SessionHeaderProps ) {
) }
>
{ site ? (
-
{ effectiveEnvironment === 'live' ? __( 'Live' ) : __( 'Local' ) }
+
);
}
diff --git a/apps/ui/src/ui-classic/components/session-view/style.module.css b/apps/ui/src/ui-classic/components/session-view/style.module.css
index 4e1b1a0a5e..2292fb4b77 100644
--- a/apps/ui/src/ui-classic/components/session-view/style.module.css
+++ b/apps/ui/src/ui-classic/components/session-view/style.module.css
@@ -42,7 +42,9 @@
align-items: center;
gap: var(--wpds-dimension-padding-sm);
padding-block: var(--wpds-dimension-padding-sm);
- padding-inline: var(--wpds-dimension-padding-sm) var(--wpds-dimension-padding-2xl);
+ /* The toolbar owns its own inline padding (it pins its actions to the panel
+ edge); the host only pads the left for the no-site fallback. */
+ padding-inline: var(--wpds-dimension-padding-sm) 0;
min-height: 46px;
font-size: var(--wpds-typography-font-size-sm);
color: var(--wpds-color-fg-content-neutral);
diff --git a/apps/ui/src/ui-classic/router/route-onboarding-connect/index.tsx b/apps/ui/src/ui-classic/router/route-onboarding-connect/index.tsx
index 303ff4b779..9413b7f1ee 100644
--- a/apps/ui/src/ui-classic/router/route-onboarding-connect/index.tsx
+++ b/apps/ui/src/ui-classic/router/route-onboarding-connect/index.tsx
@@ -6,6 +6,11 @@ import { Badge, Button, Icon } from '@wordpress/ui';
import { clsx } from 'clsx';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { AuthActions } from '@/components/auth-actions';
+import {
+ presentRemoteSites,
+ searchRemoteSites,
+ type ConnectSiteGroup,
+} from '@/components/connect-site-picker/site-presentation';
import { OnboardingFooter } from '@/components/onboarding-footer';
import { toast } from '@/data/app-messages';
import { useConnector } from '@/data/core';
@@ -19,7 +24,6 @@ import { getLocalizedLink } from '@/lib/docs-links';
import { onboardingLayoutRoute, useOnboardingProgress } from '../layout-onboarding';
import sharedStyles from '../layout-onboarding/style.module.css';
import { ConnectSiteLifecycleError, runConnectSiteLifecycle } from './connect-site';
-import { presentRemoteSites, searchRemoteSites, type ConnectSiteGroup } from './site-presentation';
import styles from './style.module.css';
import type { SyncSite } from '@/data/core';
diff --git a/apps/ui/src/ui-classic/router/route-site-overview/index.tsx b/apps/ui/src/ui-classic/router/route-site-overview/index.tsx
index 546c5b387f..c1aa1231af 100644
--- a/apps/ui/src/ui-classic/router/route-site-overview/index.tsx
+++ b/apps/ui/src/ui-classic/router/route-site-overview/index.tsx
@@ -39,7 +39,7 @@ function SiteOverviewPage() {
{
void connector.trackEvent( TRACKS_EVENTS.PANEL_OPENED, {
panel: siteSettingsTabToPanel( next ),