feat(ui): add easy way to copy package version

[WilhelmBerggren]

🔗 Linked issue

Resolves #2646 (but of course more could be done)

🧭 Context

The linked issue describes the desire to have a quick way to copy the version number. Right now there is a quick way to copy the package name or an install command, but not the version number alone.

📚 Description

This PR adds a version number in the Header with a copy button and an entry in the command palette when viewing the /package/<name>/v/<version> route

Base /package/nuxt (no change):

Show version in header on /package/nuxt/v/4.4.8 (new):

Screen.Recording.2026-07-15.at.15.40.53.mov

Copy package version visible in command palette while on /package/nuxt/v/4.4.8:

Disclosure: I did use Claude Code to help write part of the code in this PR

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Jul 15, 2026 1:51pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Jul 15, 2026 1:51pm
npmx-lunaria	Ignored		Jul 15, 2026 1:51pm

[github-actions]

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

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.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds package-version copying to the package header and terminal command palette, with separate clipboard state, a translation key and schema entry, plus tests for explicit versions, dist-tags, links and clipboard reset behaviour.

Changes

Package version copying

Layer / File(s)	Summary
Dedicated version clipboard state app/composables/useInstallCommand.ts, test/nuxt/composables/use-install-command.spec.ts	useInstallCommand exposes independent version-copy state and action, with tests covering successful copies, timer resets and missing versions.
Header version display and copying app/components/Package/Header.vue, i18n/locales/en.json, i18n/schema.json, test/nuxt/components/Package/Header.spec.ts	The header conditionally displays and links the resolved version, adds a copy action and translation key, and tests explicit, absent and dist-tag requests.
Terminal copy-version command app/components/Terminal/Install.vue, test/e2e/interactions.spec.ts	The command palette adds package-copy-version, invoking version copying and the clipboard announcement; the end-to-end hover target is updated for the revised button structure.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant TerminalInstall
  participant useInstallCommand
  participant Clipboard
  User->>TerminalInstall: Select copy version
  TerminalInstall->>useInstallCommand: Invoke copyPkgVersion
  useInstallCommand->>Clipboard: Copy requestedVersion
  Clipboard-->>useInstallCommand: Update copiedPkgVersion
  useInstallCommand-->>TerminalInstall: Announce clipboard copy

Loading

Possibly related PRs

• npmx-dev/npmx.dev#2760: Related end-to-end copy-button visibility and occlusion test changes.

Suggested reviewers: graphieros, ghostdevv

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The PR adds a visible version display plus copy actions, satisfying #2646's request for a quicker way to copy the package version.
Out of Scope Changes check	✅ Passed	The changes stay focused on package-version copying and related test updates, with no obvious unrelated scope creep.
Title check	✅ Passed	The title clearly and concisely summarises the main change: adding a way to copy the package version.
Description check	✅ Passed	The description is directly related to the changeset and explains the new version display and copy actions.

✨ 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]

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
i18n/locales/en.json	Source changed, localizations will be marked as outdated.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/components/Terminal/Install.vue`:
- Around line 142-152: Conditionally register the `package-copy-version` command
only when an explicitly requested package version exists. Update the command
array construction around the visible command definition, following the existing
pattern for conditional commands, so `copyPkgVersion()` and its clipboard
announcement are unavailable when no version was requested.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b4ea07ff-5ece-4d47-8c49-b0865523a985

📥 Commits

Reviewing files that changed from the base of the PR and between 5bbce3e and fbf13b2.

📒 Files selected for processing (7)

• app/components/Package/Header.vue
• app/components/Terminal/Install.vue
• app/composables/useInstallCommand.ts
• i18n/locales/en.json
• i18n/schema.json
• test/nuxt/components/Package/Header.spec.ts
• test/nuxt/composables/use-install-command.spec.ts

[codecov]

Codecov Report

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

Files with missing lines	Patch %	Lines
app/components/Terminal/Install.vue	30.00%	3 Missing and 4 partials ⚠️
app/components/Package/Header.vue	50.00%	0 Missing and 3 partials ⚠️
app/composables/useInstallCommand.ts	75.00%	0 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[gameroman]

Hi, thanks for the PR

Could you add a screenshot or a video to the PR description, please, so it's easier to see the change visually

[WilhelmBerggren]

Hi, thanks for the PR

Could you add a screenshot or a video to the PR description, please, so it's easier to see the change visually

Of course! Added to the description now.