fix(ui): render only the selected terminal command

[juninhokaponne]

🔗 Linked issue

Fixes#3016

🧭 Context

The terminal rendered all package manager commands and hid the inactive ones with CSS. Since they were still in the DOM, the layout wasn't consistent when the last package manager was selected.

📚 Description

This PR changes the terminal to render only the selected package manager command.

I also moved the package manager selection logic into a shared helper to avoid repeating the same code.

A regression test was added to make sure only the selected command is rendered.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Jul 23, 2026 12:14pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Jul 23, 2026 12:14pm
npmx-lunaria	Ignored		Jul 23, 2026 12:14pm

[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 Plus

Run ID: 02b25cf7-9002-4417-a745-20a8470d28dc

📥 Commits

Reviewing files that changed from the base of the PR and between d04c0de and 018d3b5.

📒 Files selected for processing (1)

• app/components/Terminal/Install.vue

🚧 Files skipped from review as they are similar to previous changes (1)

• app/components/Terminal/Install.vue

---

📝 Walkthrough

Summary by CodeRabbit

• Bug Fixes
  • Terminal command displays now show only the currently selected package manager’s commands.
  • Install-related command suggestions (including development, types, run, and create) are now consistent with the selected package manager.
  • Copyable installation commands now derive the selected package manager correctly, with a safe fallback when needed.
• Tests
  • Added Vitest coverage to confirm Terminal views render only the selected package manager’s command variants and content.

Walkthrough

Terminal Execute and Install now render only the currently selected package manager’s command. Shared configuration lookup is used by terminal components and install-command construction, replacing CSS-based variant visibility. Tests verify selected-manager output.

Changes

Selected package manager rendering

Layer / File(s)	Summary
Package manager config lookup and command construction app/utils/install-command.ts, app/composables/useInstallCommand.ts	Adds getPackageManagerConfig with npm fallback and uses it to construct @types command parts and the full install command.
Execute.vue single-variant rendering app/components/Terminal/Execute.vue	Resolves the selected package manager, renders one execute command, and removes CSS-based visibility handling.
Install.vue single-variant rendering app/components/Terminal/Install.vue	Renders selected-manager variants for install, development, types, run, and create commands.
Terminal component tests test/nuxt/components/Terminal.spec.ts	Verifies that TerminalExecute and TerminalInstall render only commands for the selected package manager, including expected counts and command text.

Possibly related PRs

• npmx-dev/npmx.dev#3014: Both changes touch terminal command rendering and package manager configuration used for nub commands.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: rendering only the selected terminal command.
Description check	✅ Passed	The description is directly related to the rendered-command fix and added regression test.
Linked Issues check	✅ Passed	The changes address #3016 by rendering only the active package manager in Install and Execute.
Out of Scope Changes check	✅ Passed	The helper refactor and test coverage support the stated 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 69.23077% 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!

[juninhokaponne]

@graphieros could you review my changes?

[graphieros]

@juninhokaponne

The fix seems to work.
I just have a question: did you write the PR description by yourself, or with AI assistance ?

[juninhokaponne]

@graphieros Yes, I used AI assistance to help organize and improve the PR description. The entire implementation were done by me. and I made sure the description reflects right the changes before submitting it.

[graphieros]

@graphieros Yes, I used AI assistance to help organize and improve the PR description. The entire implementation were done by me. and I made sure the description reflects right the changes before submitting it.

@juninhokaponne Ok, thank you for honest answer. As you may know, if you read the contribution guide, we do not mind if contributors use AI to assist with coding, as long as the result is thoroughly reviewed by the author before submitting the PR. However, we insist that PR descriptions be in your own words. Our vision of open-source is also about human connection.

[juninhokaponne]

Oh, I got it, and I completely agree with that. I'll update the PR description and rewrite it in my own words.

Thanks for taking the time to explain it. I'm really enjoying contributing to the npmx project, and I'd love to become a more active contributor over time. I really appreciate the guidance!

@graphieros Yes, I used AI assistance to help organize and improve the PR description. The entire implementation were done by me. and I made sure the description reflects right the changes before submitting it.

@juninhokaponne Ok, thank you for honest answer. As you may know, if you read the contribution guide, we do not mind if contributors use AI to assist with coding, as long as the result is thoroughly reviewed by the author before submitting the PR. However, we insist that PR descriptions be in your own words. Our vision of open-source is also about human connection.

[juninhokaponne]

@graphieros I've updated the PR description.

[graphieros]

LGTM 🌿

[trueberryless]

Looks good to me 🥳

Thanks for updating the PR description to a self-written text. Well done!
Very nice first contribution 🚀

[trueberryless]

Okay, let's maybe wait a bit with merging until the internet has recovered 😅