Add the studio ui local web surface

.gitignore

@@ -112,7 +112,8 @@ cli/vendor/
 
 # Build output
 dist
-dist-web
+dist-hosted
+dist-local
 
 # Playwright traces
 test-results

apps/cli/commands/ui.ts

@@ -0,0 +1,72 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { __ } from '@wordpress/i18n';
+import { openBrowser } from 'cli/lib/browser';
+import { StudioArgv } from 'cli/types';
+
+export const registerCommand = ( yargs: StudioArgv ) => {
+	return yargs.command( {
+		command: 'ui',
+		describe: __( 'Start the local Studio web UI and open it in your browser' ),
+		builder: ( uiYargs: StudioArgv ) =>
+			uiYargs
+				.option( 'port', {
+					type: 'number',
+					description: __( 'Port to listen on' ),
+				} )
+				.option( 'open', {
+					type: 'boolean',
+					default: true,
+					description: __( 'Open the UI in your default browser' ),
+				} )
+				.option( 'path', { hidden: true } ),
+		handler: async ( argv ) => {
+			// `@studio/local` is bundled into the CLI from source (see the vite
+			// alias); the dynamic import keeps Express off the startup path of
+			// every other command.
+			const [ { startLocalServer }, { getAiSessionsRootDirectory }, { STUDIO_SITES_ROOT } ] =
+				await Promise.all( [
+					import( '@studio/local' ),
+					import( 'cli/ai/sessions/paths' ),
+					import( 'cli/lib/site-paths' ),
+				] );
+
+			// The server forks this same CLI for site + agent operations. When run
+			// from the packaged CLI, `process.argv[1]` is that binary;
+			// `STUDIO_CLI_BIN` overrides it for development.
+			const cliBinary = process.env.STUDIO_CLI_BIN ?? process.argv[ 1 ];
+
+			// The built browser UI (apps/ui `dist-local`) is copied next to the CLI
+			// bundle at build time. In dev it may be absent — the server then
+			// serves the API only and the UI is run via
+			// `npm run dev:local --workspace=apps/ui`.
+			const uiDist =
+				process.env.STUDIO_LOCAL_UI_DIST ??
+				path.join( path.dirname( fileURLToPath( import.meta.url ) ), 'ui' );
+
+			const server = await startLocalServer( {
+				cliBinary,
+				sessionsRoot: getAiSessionsRootDirectory(),
+				sitesRoot: STUDIO_SITES_ROOT,
+				port: argv.port as number | undefined,
+				uiDist,
+			} );
+
+			console.log( '' );
+			console.log( __( 'WordPress Studio is running at:' ) );
+			console.log( `  ${ server.url }` );
+			console.log( '' );
+			console.log( __( 'Press Ctrl+C to stop.' ) );
+
+			if ( argv.open ) {
+				await openBrowser( server.url ).catch( () => undefined );
+			}
+
+			const shutdown = () => {
+				void server.close().finally( () => process.exit( 0 ) );
+			};
+			process.on( 'SIGINT', shutdown );
+			process.on( 'SIGTERM', shutdown );
+		},
+	} );
+};

apps/cli/index.ts

@@ -15,6 +15,7 @@ import { registerCommand as registerSiteListCommand } from 'cli/commands/site/li
 import { registerCommand as registerSiteStartCommand } from 'cli/commands/site/start';
 import { registerCommand as registerSiteStatusCommand } from 'cli/commands/site/status';
 import { registerCommand as registerSiteStopCommand } from 'cli/commands/site/stop';
+import { registerCommand as registerUiCommand } from 'cli/commands/ui';
 import { registerCommand as registerUninstallCommand } from 'cli/commands/uninstall';
 import {
 	bumpAggregatedUniqueStat,
@@ -216,6 +217,7 @@ async function main() {
 	registerImportCommand( studioArgv );
 	registerExportCommand( studioArgv );
 
+	registerUiCommand( studioArgv );
 	registerUninstallCommand( studioArgv );
 
 	studioArgv.command( 'preview', __( 'Manage preview sites' ), async ( previewYargs ) => {

apps/cli/package.json

@@ -76,6 +76,7 @@
 	},
 	"devDependencies": {
 		"@studio/common": "file:../../packages/common",
+		"@studio/local": "file:../local",
 		"@types/archiver": "^8.0.0",
 		"@types/express": "^4.17.23",
 		"@types/http-proxy": "^1.17.17",

apps/cli/tsconfig.json

@@ -5,7 +5,8 @@
 		"moduleResolution": "bundler",
 		"paths": {
 			"cli/*": [ "./*" ],
-			"@studio/common/*": [ "../../packages/common/*" ]
+			"@studio/common/*": [ "../../packages/common/*" ],
+			"@studio/local": [ "../local/src/index.ts" ]
 		}
 	},
 	"include": [ "**/*" ],

apps/cli/vite.config.base.ts

@@ -31,6 +31,11 @@ const phpSourceCodePath = resolve( __dirname, 'php' );
 // The Skill tool loads skills from `<chunk dir>/skills` at runtime (see
 // `ai/skills.ts`), so they must sit directly next to the built chunks.
 const skillsSourcePath = resolve( __dirname, 'ai/skills' );
+// The `studio ui` command serves the built browser UI (apps/ui `dist-local`)
+// from `<chunk dir>/ui`, so it must sit next to the built chunks too. Built
+// separately (`npm run build:local --workspace=apps/ui`); absent in API-only
+// or dev-server setups, which is fine.
+const localUiDistPath = resolve( __dirname, '../ui/dist-local' );
 
 export const baseConfig = defineConfig( {
 	oxc: {
@@ -56,6 +61,9 @@ export const baseConfig = defineConfig( {
 				if ( existsSync( skillsSourcePath ) ) {
 					cpSync( skillsSourcePath, resolve( outDir, 'skills' ), { recursive: true } );
 				}
+				if ( existsSync( localUiDistPath ) ) {
+					cpSync( localUiDistPath, resolve( outDir, 'ui' ), { recursive: true } );
+				}
 			},
 		},
 	],
@@ -120,6 +128,9 @@ export const baseConfig = defineConfig( {
 		alias: {
 			cli: resolve( __dirname, '.' ),
 			'@studio/common': resolve( __dirname, '../../packages/common' ),
+			// The `studio ui` local server (apps/local) is bundled into the CLI
+			// from source, the same way `@studio/common` is.
+			'@studio/local': resolve( __dirname, '../local/src' ),
 			'@wp-playground/blueprints/blueprint-schema-validator': resolve(
 				__dirname,
 				'../../node_modules/@wp-playground/blueprints/blueprint-schema-validator.js'

apps/local/globals.d.ts

@@ -0,0 +1,4 @@
+// `wpcom-xhr-request` ships no types; `@studio/common`'s sync code imports it
+// (pulled in here via the syncable-sites fetch). Each app declares it for its
+// own compilation, mirroring apps/cli/globals.d.ts and apps/studio.
+declare module 'wpcom-xhr-request';

apps/local/package.json

@@ -0,0 +1,30 @@
+{
+	"name": "@studio/local",
+	"author": "Automattic Inc.",
+	"version": "0.0.0",
+	"productName": "Studio Local Server",
+	"description": "Local Studio web server (HTTP/SSE) bundled into the CLI and launched by `studio ui`",
+	"license": "GPL-2.0-or-later",
+	"private": true,
+	"type": "module",
+	"engines": {
+		"node": ">=22.0.0"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Automattic/studio.git",
+		"directory": "apps/local"
+	},
+	"scripts": {
+		"lint": "eslint .",
+		"typecheck": "tsc -p tsconfig.json --noEmit"
+	},
+	"dependencies": {
+		"express": "^4.22.0",
+		"express-rate-limit": "^8.5.2"
+	},
+	"devDependencies": {
+		"@studio/common": "file:../../packages/common",
+		"@types/express": "^4.17.23"
+	}
+}