fix(ui): render only the selected terminal command

[juninhokaponne]

Linked issue

Fixes #3016

Context

The terminal command boxes rendered every package manager variant and hid the inactive ones with CSS. Because the hidden variants still affected space-y-1 sibling spacing, the last package manager in the list rendered a shorter box when selected.

Description

This change renders only the selected package manager command in Terminal/Install.vue and Terminal/Execute.vue instead of keeping every variant in the DOM. A small shared helper now resolves the selected package manager config for the UI paths that need a safe fallback.

A focused Nuxt regression test covers the terminal rendering so the selected package manager is the only command variant rendered.

Verification

• npm exec pnpm@11.10.0 -- exec vitest --project nuxt test/nuxt/components/Terminal.spec.ts
• npm exec pnpm@11.10.0 -- lint:fix
• npm exec pnpm@11.10.0 -- exec vitest --project nuxt test/nuxt/pages/ComparePage.spec.ts test/nuxt/pages/PackageVersionsPage.spec.ts test/nuxt/composables/use-command-palette-commands.spec.ts
• npm exec pnpm@11.10.0 -- exec nuxt prepare
• npm exec pnpm@11.10.0 -- exec vue-tsc -b --noEmit

Notes

• pnpm test:types could not complete in this Windows environment because the lex build step failed while creating its shared-memory IPC channel.
• The local failure in test/nuxt/composables/use-command-palette-commands.spec.ts reproduces on clean origin/main, so it is pre-existing and unrelated to this change.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Jul 8, 2026 6:47pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Jul 8, 2026 6:47pm
npmx-lunaria	Ignored		Jul 8, 2026 6:47pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 4095fc9e-12e0-4484-b52a-032a92246856

📥 Commits

Reviewing files that changed from the base of the PR and between daf3b86 and 17b3083.

📒 Files selected for processing (5)

• app/components/Terminal/Execute.vue
• app/components/Terminal/Install.vue
• app/composables/useInstallCommand.ts
• app/utils/install-command.ts
• test/nuxt/components/Terminal.spec.ts

---

📝 Walkthrough

Summary by CodeRabbit

• New Features

  • Terminal command examples now show only the currently selected package manager’s commands, rather than all variants at once.
  • Install-related command sections now consistently reflect the selected package manager across install, run, and create examples.

• Bug Fixes

  • Improved package manager lookup so command generation falls back safely when a matching configuration is unavailable.

• Tests

  • Added coverage for terminal command rendering to confirm only the selected package manager’s commands appear.

Walkthrough

Terminal Execute and Install components now render only the currently selected package manager's command instead of all variants toggled via CSS. A new getPackageManagerConfig helper resolves package manager configuration, used by both components and the useInstallCommand composable. Tests were added validating single-variant rendering.

Changes

Selected package manager rendering

Layer / File(s)	Summary
Package manager config lookup helper app/utils/install-command.ts, app/composables/useInstallCommand.ts	Adds getPackageManagerConfig(packageManager) which looks up config by id with npm fallback (throwing if npm is missing), and updates useInstallCommand to use it when building @types command parts and the full install command.
Execute.vue single-variant rendering app/components/Terminal/Execute.vue	Adds a selectedPackageManager computed value, replaces the v-for over all package managers with a single command block keyed to the selected id, removes the CSS visibility rules, and updates the documentation comment.
Install.vue single-variant rendering across sections app/components/Terminal/Install.vue	Adds selectedPackageManager and updates the install, dev-install suggestion, @types, run, and create command sections to render only the selected package manager's command, removing the corresponding CSS visibility rules.
Terminal component tests test/nuxt/components/Terminal.spec.ts	New Vitest suite verifying TerminalExecute renders exactly one command and TerminalInstall renders exactly five commands, all for the currently selected package manager, with rendered text assertions.

Possibly related PRs

• npmx-dev/npmx.dev#3014: Both PRs touch the terminal install/execute rendering logic and install-command wiring for the selected package manager, so the added nub support is exercised by the new single-PM rendering behaviour.

Suggested reviewers: ghostdevv

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarises the main UI fix to render only the selected terminal command.
Description check	✅ Passed	The description is directly related to the changes and explains the issue, fix, and verification.
Linked Issues check	✅ Passed	The changes address #3016 by rendering only the active command in both Terminal/Install.vue and Terminal/Execute.vue.
Out of Scope Changes check	✅ Passed	The helper and regression test are in scope for the terminal rendering fix and do not appear unrelated.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Hello! Thank you for opening your first PR to npmx, @juninhokaponne! 🚀

Here’s what will happen next:

1. Our GitHub bots will run to check your changes.
   If they spot any issues you will see some error messages on this PR.
   Don’t hesitate to ask any questions if you’re not sure what these mean!

2. In a few minutes, you’ll be able to see a preview of your changes on Vercel

3. One or more of our maintainers will take a look and may ask you to make changes.
   We try to be responsive, but don’t worry if this takes a few days.

[codecov]

Codecov Report

❌ Patch coverage is 63.63636% with 4 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/utils/install-command.ts	42.85%	3 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!