Add plugin development workbench

[f]

Related issues

• None yet. This is a draft Proof of Concept for discussion.

How AI was used in this PR

This prototype was built collaboratively with AI assistance across planning, implementation, refactoring, and test coverage. I reviewed the generated changes while iterating locally and used the running Studio app to check the main user-facing flows during development.

Proposed Changes

⚠️ Visual change: needs human review in light + dark mode.

• Explores bringing plugin development into Studio as a first-party workflow, so Studio can be used to inspect, validate, edit, test, and prepare WordPress.org plugins without switching to a separate Pressship app.
• Adds a Studio-native plugin development workbench with an explorer, Monaco-based file editor, Studio Code assistance, validation feedback, reviewable change chunks, release/version tooling, and Playground launch support.
• Makes Plugin Check and readme validation feel closer to an editor workflow: findings are surfaced against files and lines, with review/revert flows for AI and local changes.
• Adds WordPress.org/plugin project support that can discover local and remote plugin projects, clone/work on remote plugins, and keep development state per project.
• Extends the existing Studio Code composer enough for this workflow, including plugin-specific slash commands and reusable prompt handling.

This is intentionally a draft PoC. Before this could land, I expect the team will want to revisit product scope, architecture boundaries, naming, polish, and what belongs in core Studio versus later extension points.

Testing Instructions

• Run npm start and open a plugin project from the Plugins area.
• Confirm the Development/Plugin project view opens with the explorer, editor tabs, Studio Code sidebar, Releases sidebar, and Review sidebar.
• Open and edit text/code files, then save and confirm changed files can be reviewed/reverted from the sidebar without forcing a central Review tab.
• Run validation/Plugin Check and confirm findings appear in the editor, validation pane, and file explorer.
• Try Studio Code prompts, including /fix-plugin, and confirm proposed file changes can be reviewed by chunk/file.
• Launch the plugin Playground and verify the site starts from the project.
• Check common image preview behavior and binary-file handling.
• Verify the UI in both light and dark mode.

Validation I ran locally:

• npx eslint --fix ... on the modified files. CSS/package files produced expected “file ignored” warnings from the eslint config.
• npm test -- apps/studio/src/modules/plugin-development/lib/tests apps/studio/src/modules/plugin-development/components/project-workbench apps/studio/src/components/studio-code-session/composer apps/studio/src/tests/show-site-context-menu.test.ts tools/common/lib/tests/html-entities.test.ts
• npm run typecheck
• git diff --check

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?