feat: suggest installing dependency as devDependency when appropriate

[wojtekmaj]

Closes #530

Examples:

https://npmxdev-git-fork-wojtekmaj-dev-dependency-suggestion-npmx.vercel.app/package/@types/react

https://npmxdev-git-fork-wojtekmaj-dev-dependency-suggestion-npmx.vercel.app/package/vite-tsconfig-paths

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 12, 2026 2:59pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 12, 2026 2:59pm
npmx-lunaria	Ignored		Feb 12, 2026 2:59pm

[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
lunaria/files/en-GB.json	Localization changed, will be marked as complete. 🔄️
lunaria/files/en-US.json	Source changed, localizations will be marked as outdated.
lunaria/files/pl-PL.json	Localization changed, will be marked as complete. 🔄️

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]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

This pull request adds functionality to suggest development dependency installation commands. It introduces a new utility module that identifies packages likely to be installed as dev dependencies through a known package list or by scanning README content for dev-install hints. The feature integrates with the terminal install component to display an additional UI block with per-package manager dev installation commands when applicable. Supporting changes include new dev flag handling in install command generation, locale translations for English and Polish, cache versioning updates, and comprehensive test coverage for the new utilities and behaviours.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description references issue #530 and includes images demonstrating the devDependency suggestion feature with package-specific install commands.
Linked Issues check	✅ Passed	All objectives from issue #530 are met: detection of appropriate devDependencies via curated list [shared/utils/dev-dependency.ts] and README scanning [getDevDependencySuggestion], UI display of devDependency commands [Install.vue], and proper flag integration across package managers [install-command.ts].
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the devDependency suggestion feature: utility functions, UI components, translations, tests, and API integration with no extraneous modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

[Copilot]

Pull request overview

This pull request implements automatic detection and suggestion of dev dependency installation commands for packages that are typically installed as development dependencies. The feature addresses issue #530 by helping developers avoid mistakenly adding dev-only tools as regular dependencies.

Changes:

• Added dev dependency detection heuristics based on a curated list of known dev packages and README analysis
• Updated install command generation to support a dev flag that adds the appropriate flag (-D or -d for bun) to the install command
• Modified the Terminal/Install UI component to display a suggested dev install command when appropriate
• Added internationalization support for the new UI text in English and Polish locales

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
app/utils/install-command.ts	Core logic for dev dependency detection, including known package list, README parsing, and command generation with dev flags
app/components/Terminal/Install.vue	UI implementation showing suggested dev install command when recommended, with copy functionality
app/pages/package/[...package].vue	Integration to pass README HTML data to Terminal/Install component
test/unit/app/utils/install-command.spec.ts	Comprehensive tests for dev install commands, detection heuristics, and flag generation
i18n/locales/en.json, pl-PL.json, en-GB.json, en-US.json	Translation strings for new UI text
lunaria/files/*.json	Translation tracking files for localization workflow

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

app/components/Terminal/Install.vue (1)

161-194: Remove the per-button focus‑visible outline utility.

The new dev install copy button adds an inline focus-visible:outline-accent/70 class, but button focus outlines are handled globally. Please drop the outline utility and rely on the global rule.

Suggested change

-              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/devinstallcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70 select-none"
+              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/devinstallcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 select-none"

Based on learnings: focus-visible styling for button and select elements is implemented globally in app/assets/main.css; avoid per-element focus-visible utility classes like focus-visible:outline-accent/70.

[codecov]

Codecov Report

❌ Patch coverage is 50.00000% with 13 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	40.90%	13 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

Actionable comments posted: 1

[coderabbitai]

Actionable comments posted: 1