Skip to content

Add Terminal to the Dock - #3808

Merged
akirk merged 17 commits into
trunkfrom
add-sidebar-terminal
Aug 22, 2026
Merged

akirk merged 17 commits into
trunkfrom
add-sidebar-terminal

Conversation

@akirk

@akirk akirk commented Jun 18, 2026 •

Copy link
Copy Markdown
Member

Summary

Adds a Terminal tool to the Playground Dock for working interactively with the currently active Playground.

This was reimplemented on top of the new Dock UI from trunk. Instead of adding a tab to the old site manager sidebar, Terminal is now a first-class Dock destination alongside Database, Files, and Logs.

The terminal provides separate PHP and WP-CLI sessions, persistent command history, execution timing, concise error reporting, and PHP syntax highlighting.

Screenshots

Screenshot 2026-08-12 at 18 20 22 Screenshot 2026-08-12 at 18 20 11

How It Works

PHP mode loads WordPress and evaluates each submitted snippet independently. Snippets may omit the opening <?php tag, and incomplete code remains in the editor so it can be completed and run again. The input reuses Playground's CodeMirror editor in plain-PHP mode for syntax highlighting.

WP-CLI mode downloads the WP-CLI executable on first use when needed, then runs each command directly against the connected Playground with the existing wpCLI() client helper. Commands may be entered with or without the leading wp; the input is normalized before execution.

The Blueprint WP-CLI launcher now uses a fail-fast STDIN stream. Commands that attempt to read interactive input abort before treating missing input as an empty value and mutating WordPress.

Developer Experience

  • PHP and WP-CLI have independent tabs, drafts, and command histories.
  • Command history persists across browser sessions in localStorage and can be cleared per mode.
  • Previous and next controls navigate results; edited input is protected by an inline discard/cancel confirmation.
  • Every completed command displays its wall-clock execution time.
  • Result actions remain visible in a sticky header while long output scrolls.
  • PHP parse/runtime errors and WP-CLI output are normalized for terminal display.
  • PHP input has syntax highlighting, line numbers, and Ctrl/Cmd+Enter execution.
  • The input and Run button remain disabled with an inline progress state while WordPress boots.
  • Non-terminating WP-CLI commands such as shell and server are rejected.

Compatibility

The wp-cli Blueprint step now rejects commands that read from STDIN. Blueprint WP-CLI commands must provide all required arguments explicitly. This changes the previous behavior where unavailable STDIN could be interpreted as an empty value and cause an unintended mutation.

Testing

  • npm run format:uncommitted
  • npm exec nx test playground-website (385 tests passed)
  • WP-CLI Blueprint step tests (6 tests passed, including verification that a failed STDIN read does not mutate the option)
  • npm exec nx run playground-website:typecheck
  • npm exec nx run playground-blueprints:typecheck
  • npm exec nx lint playground-website
  • npm exec nx lint playground-blueprints
  • npm exec nx -- run-many -t typecheck -p playground-components playground-website
  • npm exec nx -- run-many -t lint -p playground-components playground-website

The broader Blueprint test run also encountered six unrelated network-dependent translation fetch failures in set-site-language.spec.ts.

@akirk
akirk force-pushed the add-sidebar-terminal branch from cfe034e to 5f85c93 Compare August 11, 2026 12:43
@akirk akirk changed the title Add Playground sidebar terminal Add Playground Terminal to the Dock Aug 11, 2026
@akirk akirk changed the title Add Playground Terminal to the Dock Add Terminal to the Dock Aug 11, 2026
@akirk
akirk marked this pull request as ready for review August 11, 2026 20:03
Copilot AI lite review requested due to automatic review settings August 11, 2026 20:03

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Adds a new Terminal destination to the Playground Dock, enabling interactive PHP and WP-CLI sessions against the active Playground.

Changes:

  • Introduces a new Dock section (terminal) and mounts a new SiteTerminalPanel UI.
  • Adds command helpers for WP-CLI (prefix stripping, non-terminating command rejection), output/err normalization, and persistent per-mode history.
  • Updates the Blueprint wp-cli step to fail fast on STDIN reads and adds regression coverage.

Reviewed changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
packages/playground/website/src/lib/state/redux/slice-ui.ts Adds terminal as a Dock pane section.
packages/playground/website/src/components/site-manager/site-terminal-panel/index.tsx Implements the new Terminal panel (PHP + WP-CLI sessions, history, timing, output).
packages/playground/website/src/components/site-manager/site-terminal-panel/style.module.css Styles for terminal UI layout, prompt, output, errors.
packages/playground/website/src/components/site-manager/site-terminal-panel/wp-cli-command.ts Adds WP-CLI command normalization and rejection for non-terminating commands.
packages/playground/website/src/components/site-manager/site-terminal-panel/wp-cli-output.ts Normalizes WP-CLI output by removing PHAR header and ANSI color codes.
packages/playground/website/src/components/site-manager/site-terminal-panel/terminal-history.ts Adds localStorage-backed command history (per mode).
packages/playground/website/src/components/site-manager/site-terminal-panel/terminal-error.ts Normalizes/parses PHP/WP fatal errors into concise terminal messages.
packages/playground/website/src/components/site-manager/site-info-panel/site-tool-panels.tsx Lazy-loads and mounts the Terminal panel as a tool surface.
packages/playground/website/src/components/site-manager/site-info-panel/site-tool-panels.spec.tsx Updates tool panel mounting tests to include Terminal.
packages/playground/website/src/components/site-manager/index.tsx Allows terminal as an active tool section.
packages/playground/website/src/components/dock/dock.tsx Adds Terminal dock item, pane copy, and wide-pane behavior.
packages/playground/blueprints/src/lib/steps/wp-cli.ts Changes WP-CLI runner to fail-fast on STDIN reads; updates resource type.
packages/playground/blueprints/src/tests/steps/wp-cli.spec.ts Adds test ensuring STDIN reads are rejected without mutating state.
packages/playground/blueprints/src/lib/steps/handlers.ts Re-exports WP-CLI helpers/resources for broader use.
packages/playground/website/src/components/site-manager/site-terminal-panel/*.spec.ts Adds unit tests for new terminal helpers (output, command parsing, history, errors).

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread packages/playground/blueprints/src/lib/steps/wp-cli.ts Outdated
@akirk
akirk force-pushed the add-sidebar-terminal branch 2 times, most recently from f4be5f1 to 61ef0aa Compare August 22, 2026 07:32
akirk added 15 commits August 22, 2026 09:49
- Run the wp-cli step handler directly instead of through the Blueprint
  runner, whose finally block navigated the iframe to the landing page
  after every command.
- Install wp-cli.phar only when it is missing instead of re-downloading
  and rewriting it before each command.
- Recover structured output on the error path. PHPResponse.text is a
  prototype getter that does not survive the worker boundary, so decode
  the bytes instead, and format WP-CLI error output like its stdout.
- Only browse command history when the caret is on the outermost line so
  the arrow keys can move between lines of multi-line input.
- Strip a pasted `wp ` prefix before running, matching how stored history
  entries are normalized on load.
- Clear the saved draft after a command runs so ArrowDown at an empty
  prompt no longer refills the previous command.
- Surface a hint when PHP input is incomplete instead of silently
  appending a newline.
- Require the escape byte in the ANSI color regex so literal bracketed
  text is not deleted from output, and use a real escape byte in the test
  fixture.
- Extract the message from any uncaught PHP exception instead of matching
  the STDIN explanation string duplicated from the wp-cli step.
Terminal entries now track error text apart from stdout, and PHP parse
errors report line/character position using the CodeMirror PHP parser
instead of relying on a fragile stderr sentinel for incomplete input.
@akirk
akirk force-pushed the add-sidebar-terminal branch from 61ef0aa to fd5cb30 Compare August 22, 2026 07:50
@akirk
akirk merged commit 6bbc5b6 into trunk Aug 22, 2026
57 checks passed
@akirk
akirk deleted the add-sidebar-terminal branch August 22, 2026 09:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants