Automattic · dereksmart · May 15, 2026 · May 15, 2026 · May 15, 2026 · May 15, 2026
diff --git a/apps/studio/index.html b/apps/studio/index.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval'; worker-src 'self' blob:; style-src 'self' 'unsafe-inline'; connect-src 'self' https://public-api.wordpress.com https://api.wordpress.org https://*.gravatar.com https://*.wp.com https://blueprintlibrary.wordpress.com https://blueprintslibraryv2.wpcomstaging.com https://unpkg.com https://cdn.jsdelivr.net https://wordpress.github.io https://raw.githubusercontent.com ws://localhost:*; img-src 'self' https://*.gravatar.com https://*.wp.com https://blueprintlibrary.wordpress.com https://blueprintslibraryv2.wpcomstaging.com https://wordpress.github.io https://raw.githubusercontent.com data:;">
+		<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval'; worker-src 'self' blob:; style-src 'self' 'unsafe-inline'; connect-src 'self' https://public-api.wordpress.com https://api.wordpress.org https://*.gravatar.com https://*.wp.com https://blueprintlibrary.wordpress.com https://blueprintslibraryv2.wpcomstaging.com https://unpkg.com https://cdn.jsdelivr.net https://wordpress.github.io https://raw.githubusercontent.com ws://localhost:*; img-src 'self' https: data: blob:; frame-src http: https:;">
 		<title>WordPress Studio</title>
 	</head>
 	<body class="a8c-body">

diff --git a/apps/studio/package.json b/apps/studio/package.json
@@ -30,6 +30,8 @@
 		"typecheck": "tsc -p tsconfig.json --noEmit"
 	},
 	"dependencies": {
+		"@automattic/agenttic-client": "0.1.63",
+		"@automattic/agenttic-ui": "0.1.63",
 		"@automattic/generate-password": "^0.1.0",
 		"@automattic/interpolate-components": "^1.2.1",
 		"@formatjs/intl-locale": "^3.4.5",

diff --git a/apps/studio/postcss.config.js b/apps/studio/postcss.config.js
@@ -1,9 +1,31 @@
 const path = require( 'path' );
+const tailwindcss = require( 'tailwindcss' );
+
+const preserveAgentticBaseLayer = {
+	postcssPlugin: 'preserve-agenttic-base-layer',
+	Once( root ) {
+		const inputPath = root.source?.input.file ?? '';
+		const isAgentticCss = inputPath.includes(
+			`${ path.sep }@automattic${ path.sep }agenttic-ui${ path.sep }`
+		);
+
+		if ( ! isAgentticCss ) {
+			return;
+		}
+
+		root.walkAtRules( 'layer', ( rule ) => {
+			if ( rule.params === 'base' && rule.nodes ) {
+				rule.params = 'agenttic-base';
+			}
+		} );
+	},
+};
 
 module.exports = {
-	plugins: {
-		tailwindcss: {
+	plugins: [
+		preserveAgentticBaseLayer,
+		tailwindcss( {
 			config: path.join( __dirname, 'tailwind.config.js' ),
-		},
-	},
+		} ),
+	],
 };
diff --git a/apps/studio/src/components/app.tsx b/apps/studio/src/components/app.tsx
@@ -24,6 +24,7 @@ import { UserSettings } from 'src/modules/user-settings';
 import { useKonamiCode } from 'src/modules/wapuu-world/use-konami-code';
 import { WapuuWorldGame } from 'src/modules/wapuu-world/wapuu-world-game';
 import { WhatsNewModal, useWhatsNew } from 'src/modules/whats-new';
+import { useWorkspaceSelection } from 'src/modules/workspaces';
 import { useAppDispatch, useRootSelector } from 'src/stores';
 import { selectOnboardingLoading } from 'src/stores/onboarding-slice';
 import { syncOperationsThunks } from 'src/stores/sync';
@@ -41,7 +42,10 @@ export default function App() {
 	);
 	const { showWhatsNew, closeWhatsNew } = useWhatsNew();
 	const { sites: localSites, loadingSites } = useSiteDetails();
-	const isEmpty = ! loadingSites && ! localSites.length;
+	const { enableWorkspaces, workspaces, isLoading: isLoadingWorkspaces } = useWorkspaceSelection();
+	const isEmpty = enableWorkspaces
+		? ! loadingSites && ! isLoadingWorkspaces && ! workspaces.length
+		: ! loadingSites && ! localSites.length;
 	const shouldShowWhatsNew = showWhatsNew && ! isEmpty;
 	const { client } = useAuth();
 	const dispatch = useAppDispatch();

diff --git a/apps/studio/src/components/main-sidebar.tsx b/apps/studio/src/components/main-sidebar.tsx
@@ -1,6 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import { RunningSites } from 'src/components/running-sites';
 import SiteMenu from 'src/components/site-menu';
+import { useFeatureFlags } from 'src/hooks/use-feature-flags';
 import { useSiteDetails } from 'src/hooks/use-site-details';
 import { isMac } from 'src/lib/app-globals';
 import { cx } from 'src/lib/cx';
@@ -13,14 +14,15 @@ interface MainSidebarProps {
 
 export default function MainSidebar( { className, style }: MainSidebarProps ) {
 	const { sites: localSites } = useSiteDetails();
+	const { enableWorkspaces } = useFeatureFlags();
 
 	return (
 		<div
 			data-testid="main-sidebar"
 			className={ cx( 'text-chrome-inverted relative pt-[10px]', className ) }
 			style={ style }
 		>
-			{ ! localSites.length ? (
+			{ ! localSites.length && ! enableWorkspaces ? (
 				<div className="flex h-full px-[20px] justify-center items-center app-no-drag-region text-center text-[12px] text-a8c-gray-50">
 					{ __( 'Your sites will show up here once you create them' ) }
 				</div>

diff --git a/apps/studio/src/components/root.tsx b/apps/studio/src/components/root.tsx
@@ -15,6 +15,7 @@ import { ImportExportProvider } from 'src/hooks/use-import-export';
 import { SiteDetailsProvider } from 'src/hooks/use-site-details';
 import { ThemeDetailsProvider } from 'src/hooks/use-theme-details';
 import { OnboardingProvider } from 'src/modules/onboarding/hooks/use-onboarding';
+import { WorkspaceSelectionProvider } from 'src/modules/workspaces';
 import { store } from 'src/stores';
 import { initializeUserLocale } from 'src/stores/i18n-slice';
 
@@ -39,13 +40,15 @@ const Root = () => {
 							<FeatureFlagsProvider>
 								<ContentTabsProvider>
 									<SiteDetailsProvider>
-										<ThemeDetailsProvider>
-											<OnboardingProvider>
-												<ImportExportProvider>
-													<App />
-												</ImportExportProvider>
-											</OnboardingProvider>
-										</ThemeDetailsProvider>
+										<WorkspaceSelectionProvider>
+											<ThemeDetailsProvider>
+												<OnboardingProvider>
+													<ImportExportProvider>
+														<App />
+													</ImportExportProvider>
+												</OnboardingProvider>
+											</ThemeDetailsProvider>
+										</WorkspaceSelectionProvider>
 									</SiteDetailsProvider>
 								</ContentTabsProvider>
 							</FeatureFlagsProvider>

diff --git a/apps/studio/src/components/site-content-tabs.tsx b/apps/studio/src/components/site-content-tabs.tsx
@@ -11,15 +11,18 @@ import { SiteIsBeingCreated } from 'src/components/site-is-being-created';
 import { MIN_WIDTH_CLASS_TO_MEASURE } from 'src/constants';
 import { TabName } from 'src/hooks/use-content-tabs';
 import { useEffectiveTab } from 'src/hooks/use-effective-tab';
+import { useFeatureFlags } from 'src/hooks/use-feature-flags';
 import { useImportExport } from 'src/hooks/use-import-export';
 import { useSiteDetails } from 'src/hooks/use-site-details';
 import { cx } from 'src/lib/cx';
 import { ContentTabSync } from 'src/modules/sync';
+import { WorkspaceContentShell } from 'src/modules/workspaces/components/workspace-content-shell';
 
 export function SiteContentTabs() {
 	const { selectedSite, siteCreationMessages } = useSiteDetails();
 	const { importState } = useImportExport();
 	const { effectiveTab, selectedTab, setSelectedTab, tabs } = useEffectiveTab();
+	const { enableWorkspaces } = useFeatureFlags();
 	const { __ } = useI18n();
 
 	// Remount: Avoid focus loss on user tab changes (no remount),
@@ -55,6 +58,10 @@ export function SiteContentTabs() {
 		prevSelectedTab.current = selectedTab;
 	}, [ selectedTab ] );
 
+	if ( enableWorkspaces ) {
+		return <WorkspaceContentShell />;
+	}
+
 	if ( ! selectedSite ) {
 		return (
 			<div className="w-full h-full flex items-center justify-center app-no-drag-region">

diff --git a/apps/studio/src/components/site-menu.tsx b/apps/studio/src/components/site-menu.tsx
@@ -14,6 +14,12 @@ import { cx } from 'src/lib/cx';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { supportedEditorConfig } from 'src/modules/user-settings/lib/editor';
 import { getTerminalName } from 'src/modules/user-settings/lib/terminal';
+import { useWorkspaceSelection } from 'src/modules/workspaces';
+import { WorkspaceSidebarRow } from 'src/modules/workspaces/components/workspace-sidebar-row';
+import {
+	createWorkspaceDollyWorkspaceDescriptor,
+	setSelectedWorkspaceDollyConversationId,
+} from 'src/modules/workspaces/lib/dolly/session';
 import { useRootSelector } from 'src/stores';
 import { useGetUserEditorQuery, useGetUserTerminalQuery } from 'src/stores/installed-apps-api';
 import { syncOperationsSelectors } from 'src/stores/sync';
@@ -257,6 +263,14 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 	const { setSelectedTab } = useContentTabs();
 	const { handleDeleteSite } = useDeleteSite();
 	const { data: editor } = useGetUserEditorQuery();
+	const {
+		enableWorkspaces,
+		workspaces: sidebarWorkspaces,
+		isLoading: isLoadingWorkspaces,
+		selectedWorkspaceId,
+		selectWorkspace,
+		selectWorkspaceTab,
+	} = useWorkspaceSelection();
 	const [ draggedIndex, setDraggedIndex ] = useState< number | null >( null );
 	const [ dragOverIndex, setDragOverIndex ] = useState< number | null >( null );
 
@@ -294,6 +308,18 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 		setDragOverIndex( null );
 	};
 
+	const selectWorkspaceChat = (
+		workspace: ( typeof sidebarWorkspaces )[ number ],
+		conversationId: string
+	) => {
+		selectWorkspace( workspace.id );
+		selectWorkspaceTab( workspace.id, 'assistant' );
+		setSelectedWorkspaceDollyConversationId(
+			createWorkspaceDollyWorkspaceDescriptor( workspace ),
+			conversationId
+		);
+	};
+
 	useEffect( () => {
 		const unsubscribe = window.ipcListener.subscribe(
 			'site-context-menu-action',
@@ -392,24 +418,57 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 			) }
 		>
 			<ul className="pt-px">
-				{ sites.map( ( site, index ) => (
-					<SiteItem
-						key={ site.id }
-						site={ site }
-						index={ index }
-						onDragStart={ handleDragStart }
-						onDragOver={ handleDragOver }
-						onDrop={ handleDrop }
-						onDragEnd={ handleDragEnd }
-						isDragOver={ dragOverIndex === index }
-					/>
-				) ) }
-				{ /* Drop zone for dragging to bottom of list */ }
-				<li
-					className="h-8"
-					onDragOver={ ( e ) => handleDragOver( e, sites.length ) }
-					onDrop={ ( e ) => handleDrop( e, sites.length ) }
-				/>
+				{ enableWorkspaces ? (
+					<>
+						{ sidebarWorkspaces.map( ( workspace ) => (
+							<WorkspaceSidebarRow
+								key={ workspace.id }
+								workspace={ workspace }
+								isSelected={ selectedWorkspaceId === workspace.id }
+								localRunControl={
+									workspace.targets.local ? (
+										<ButtonToRun { ...workspace.targets.local.site } />
+									) : undefined
+								}
+								onSelect={ () => selectWorkspace( workspace.id ) }
+								onSelectChat={ ( conversationId ) =>
+									selectWorkspaceChat( workspace, conversationId )
+								}
+							/>
+						) ) }
+						{ isLoadingWorkspaces && (
+							<li
+								className={ cx(
+									'flex h-8 min-w-[168px] items-center px-2 text-xs text-a8c-gray-600',
+									isMac() ? 'me-5 ms-1' : 'me-4 ms-1'
+								) }
+							>
+								{ __( 'Loading...' ) }
+							</li>
+						) }
+					</>
+				) : (
+					<>
+						{ sites.map( ( site, index ) => (
+							<SiteItem
+								key={ site.id }
+								site={ site }
+								index={ index }
+								onDragStart={ handleDragStart }
+								onDragOver={ handleDragOver }
+								onDrop={ handleDrop }
+								onDragEnd={ handleDragEnd }
+								isDragOver={ dragOverIndex === index }
+							/>
+						) ) }
+						{ /* Drop zone for dragging to bottom of list */ }
+						<li
+							className="h-8"
+							onDragOver={ ( e ) => handleDragOver( e, sites.length ) }
+							onDrop={ ( e ) => handleDrop( e, sites.length ) }
+						/>
+					</>
+				) }
 			</ul>
 		</nav>
 	);