feat(ui): add ⌘+K command palette for quick nav and actions by serhalp · Pull Request #2159 · npmx-dev/npmx.dev

serhalp · 2026-03-20T01:42:39Z

🔗 Linked issue

closes #81

supersedes stale #470

🧭 Context

npmx already exposes a ton of useful capabilities (with way more to come), but they require quite a bit of precise clicking around. We always imagined npmx as a power tool for power users. The command palette is a familiar solution to provide discoverable, fast, efficient, repeatable access to an app's capabilities.

📚 Description

This PR adds a command palette with access to every page, every action, and every capability of npmx.

It can be opened from anywhere in the app by pressing ⌘+K on macOS / Ctrl+K on Windows/Linux, or by clicking the new "quick actions" nav item in the header.

The palette includes a set of "global" commands and a composable allowing a page or component to register specific commands that should be made available when that page/component is visible.

The palette supports multi-step flows, such as "change language" → languages are listed.

I should've maybe kept this PR small and added more commands later, but... oops, I believe I covered every single page and capability:

All commands

Global commands (always available)

navigation
- search
- home
- compare
- settings
- my packages if npm is connected
- my orgs if npm is connected
- my profile if atproto is connected
connections
- connect to npm cli if npm not connected
- connect to atmosphere if atproto not connected
- disconnect npm if npm is connected
- disconnect atmosphere if atproto is connected
settings
- language → second step lists all languages + "Help translate" CTA
  - note: there's some magic here to match user input on languages directly on the first screen too!
- relative dates
- use system theme
- use light theme
- use dark theme
- accent colors → second step lists all accent colors
- background shade -> second step lists all bg shades
help
- keyboard shortcuts
- docs
- chat
npmx
- about
- blog
- privacy
- accessibility
- docs
- chat
- builders
- source
- social

Package context

All pages with a package context also include:

package ()
- copy package name
- package page
- docs
- code
- compare this package
- download tarball
- diff
versions of
- <... every version of this package ...>

Package page

package
- copy install command
- copy run command if available
- copy create command if available
- go to types package if available
- go to create package if available
- open skills modal if available
links
- fund if available
- repo (): <owner/repo>
- repo stars
- repo forks
- homepage
- issues
- npm
- jsr if available
- <... every playground ...>

Package code page

actions
- copy link
- copy file contents
- preview
- code

Package diff page

actions
- merge modified lines on/off
- word wrap on/off

Compare page

select all facets
deselect all facets
copy table
table
charts

Profile page

actions
- edit profile if viewing profile
- share invite
links
- profile-website if profile has a website

There are two behaviours worth calling out separately:

When the user's query is a valid semver range specifier, while in a package context, the package versions listed in the palette are filtered to those that match the semver range.
A fallback item always shows up last in the palette results: Search for "<query>". Selecting this submits a search for the user's query.

The palette has full keyboard navigation support and screen reader support.

Screenshots

New header nav item (desktop)

Screenshot 2026-03-22 at 14-41-06 npmx - Package Browser for the npm Registry

Global commands (desktop)

Global commands — logged in via atproto (desktop)

Global commands (mobile, light)

Languages (desktop)

Accent colors (desktop)

Background shades (desktop, light)

New header nav item (desktop, non-homepage)

Screenshot 2026-03-22 at 14-43-30 vite - npmx

Package page commands (desktop)

Package page - input is valid semver (desktop)

Package code page (desktop)

Package diff page (desktop)

Compare page (desktop)

Profile page (desktop)

"Search for" fallback command (desktop)

Future work

This PR was huge enough as is, so I punted on adding hotkeys for quickly triggering commands within the command palette (e.g. typing r and hitting Enter to open the package's repo right away). We should probably do this eventually.
I didn't add any palette commands for package/user/org management stuff that users can do when logged in via npm CLI. We should probably do this eventually.

vercel · 2026-03-20T01:42:46Z

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 6, 2026 11:56am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 6, 2026 11:56am
npmx-lunaria	Ignored		Apr 6, 2026 11:56am

github-actions · 2026-03-20T01:43:24Z

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.
i18n/locales/fr-FR.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.

codecov · 2026-03-20T01:43:41Z

Codecov Report

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

Files with missing lines	Patch %	Lines
app/composables/useCommandPaletteGlobalCommands.ts	77.84%	32 Missing and 5 partials ⚠️
[...[org]]/[packageName]/v/[version]/[...filePath].vue](https://app.codecov.io/gh/npmx-dev/npmx.dev/pull/2159?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=npmx-dev#diff-YXBwL3BhZ2VzL3BhY2thZ2UtY29kZS9bW29yZ11dL1twYWNrYWdlTmFtZV0vdi9bdmVyc2lvbl0vWy4uLmZpbGVQYXRoXS52dWU=)	0.00%	26 Missing and 9 partials ⚠️
app/components/CommandPalette.client.vue	85.18%	16 Missing and 4 partials ⚠️
app/pages/compare.vue	29.16%	14 Missing and 3 partials ⚠️
app/components/Terminal/Install.vue	55.55%	8 Missing ⚠️
app/pages/package/[[org]]/[name].vue	0.00%	6 Missing and 2 partials ⚠️
app/components/Diff/ViewerPanel.vue	50.00%	6 Missing ⚠️
app/components/Package/Header.vue	66.66%	6 Missing ⚠️
app/composables/useCommandPalette.ts	95.52%	5 Missing and 1 partial ⚠️
app/components/Package/DownloadButton.vue	0.00%	3 Missing and 1 partial ⚠️
... and 8 more

📢 Thoughts on this report? Let us know!

trueberryless · 2026-03-21T07:42:04Z

I love it, super clean and useful! 🥳

alexdln · 2026-03-30T12:20:01Z

Have you pushed all the changes or is it some specific case on mine side only? Let me know if you need more context about the [first point in previous comment](https://github.com//pull/2159#issuecomment-4148167952) - there are two scrolls and the second one scrolls to nowhere.

app/composables/useCommandPalettePackageVersions.ts

serhalp · 2026-03-31T23:47:26Z

Have you pushed all the changes or is it some specific case on mine side only? Let me know if you need more context about the first point in previous comment - there are two scrolls and the second one scrolls to nowhere.

I haven't pushed anything for this, no.

I wasn't able to reproduce it, but now I've just tried it on three browsers and I do see it on Safari 👍🏼. I'll go from there 👀.

We were ending up with both `overflow-y-auto` and `overflow-hidden` and for some reason Safari was resolving this "conflict" by showing two scrollbars.

serhalp · 2026-04-01T01:23:59Z

@alexdln I believe I've fixed it! 8e868d4

ghostdevv

there are a couple oxlint warnings too

ghostdevv · 2026-04-04T23:40:06Z

shared/utils/url.ts

+  try {
+    const parsed = new URL(url)
+    if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+      return null
+    }
+
+    return parsed.href
+  } catch {
+    return null
+  }


Suggested change

try {

const parsed = new URL(url)

if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {

return null

}

return parsed.href

} catch {

return null

}

const parsed = URL.parse(url)

if (!parsed || (parsed.protocol !== 'http:' && parsed.protocol !== 'https:')) {

return null

}

return parsed.href

I think that || is good, but if not we can just do another if above :p

ghostdevv · 2026-04-04T23:53:19Z

test/nuxt/pages/PackageVersionsPage.spec.ts

@@ -1,21 +1,10 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'


Can you review the changes to this test file as I'm not 100% on the merge result was correct

ghostdevv · 2026-04-05T01:13:57Z

test/nuxt/pages/PackageVersionsPage.spec.ts

+      new Response(JSON.stringify(body), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      }),


Suggested change

new Response(JSON.stringify(body), {

status: 200,

headers: { 'Content-Type': 'application/json' },

}),

Response.json(body),

ghostdevv · 2026-04-05T01:17:42Z

app/components/Header/MobileMenu.client.vue

+                {{ $t('command_palette.title') }}
+              </span>
+
+              <button


can we use button base?

derp
52679c0

ghostdevv · 2026-04-05T01:19:38Z

app/components/CommandPalette.client.vue

+const dialogId = 'command-palette-modal'
+const inputId = `${dialogId}-input`
+const descriptionId = `${dialogId}-description`
+const statusId = `${dialogId}-status`
+const announcementId = `${dialogId}-announcement`
+const resultsId = `${dialogId}-results`


screaming snake? :p

ghostdevv · 2026-04-05T01:21:18Z

app/composables/usePlatformModifierKey.ts

+  const platform = nav.userAgentData?.platform ?? nav.platform ?? ''
+  const userAgent = navigator.userAgent ?? ''
+
+  return /Mac|iPhone|iPad|iPod/i.test(platform) || /Mac|iPhone|iPad|iPod/i.test(userAgent)


can we define this regex as a constant

app/pages/compare.vue

serhalp force-pushed the serhalp/cmdk-palette branch from bed7157 to 9fb8bf3 Compare March 20, 2026 01:48

vercel bot deployed to Preview – npmx.dev March 20, 2026 01:51 View deployment

vercel bot deployed to Preview – npmx.dev March 20, 2026 20:35 View deployment

vercel bot deployed to Preview – npmx.dev March 20, 2026 20:38 View deployment

vercel bot deployed to Preview – npmx.dev March 20, 2026 21:43 View deployment

vercel bot deployed to Preview – docs.npmx.dev March 21, 2026 16:15 View deployment

vercel bot deployed to Preview – npmx.dev March 21, 2026 16:16 View deployment

serhalp force-pushed the serhalp/cmdk-palette branch from 3b1e01b to e280565 Compare March 21, 2026 22:25

vercel bot deployed to Preview – docs.npmx.dev March 21, 2026 22:27 View deployment

vercel bot deployed to Preview – npmx.dev March 21, 2026 22:28 View deployment

serhalp force-pushed the serhalp/cmdk-palette branch from e280565 to 10fbdc8 Compare March 22, 2026 01:08

vercel bot deployed to Preview – docs.npmx.dev March 22, 2026 01:10 View deployment

vercel bot deployed to Preview – npmx.dev March 22, 2026 01:10 View deployment

serhalp force-pushed the serhalp/cmdk-palette branch from 10fbdc8 to 15a4d07 Compare March 22, 2026 01:23

vercel bot deployed to Preview – docs.npmx.dev March 22, 2026 01:25 View deployment

vercel bot deployed to Preview – npmx.dev March 22, 2026 01:26 View deployment

serhalp force-pushed the serhalp/cmdk-palette branch from 15a4d07 to f2b53bf Compare March 22, 2026 01:33

vercel bot deployed to Preview – docs.npmx.dev March 22, 2026 01:35 View deployment

vercel bot deployed to Preview – npmx.dev March 22, 2026 01:35 View deployment

serhalp changed the title ~~feat(ui): add ⌘+K command palette for power user fast nav and actions~~ feat(ui): add ⌘+K command palette for quick nav and actions Mar 22, 2026

serhalp force-pushed the serhalp/cmdk-palette branch 2 times, most recently from 6777ee1 to 823c9cf Compare March 22, 2026 02:44

vercel bot deployed to Preview – npmx.dev March 22, 2026 02:46 View deployment

serhalp force-pushed the serhalp/cmdk-palette branch from 823c9cf to 2667fda Compare March 22, 2026 02:49

vercel bot deployed to Preview – npmx.dev March 22, 2026 02:51 View deployment

vercel bot deployed to Preview – npmx.dev March 22, 2026 03:15 View deployment

alexdln reviewed Mar 30, 2026

View reviewed changes

app/composables/useCommandPalettePackageVersions.ts Outdated Show resolved Hide resolved

serhalp and others added 3 commits March 31, 2026 19:37

fix: actually restore the default accent color

e86c3b2

test: update default accent color in tests

2072386

[autofix.ci] apply automated fixes

7fb4201

serhalp added 3 commits March 31, 2026 21:15

fix: simplify palette package versions loading a bit

112db46

fix: work around double scrollbar Safari bug 🙃

8e868d4

We were ending up with both `overflow-y-auto` and `overflow-hidden` and for some reason Safari was resolving this "conflict" by showing two scrollbars.

Merge remote-tracking branch 'origin/main' into serhalp/cmdk-palette

68956c0

ghostdevv and others added 2 commits April 4, 2026 19:53

Merge remote-tracking branch 'origin/main' into serhalp/cmdk-palette

e371b21

fix: fix indirect merge conflicts

05db2f4

ghostdevv previously requested changes Apr 5, 2026

View reviewed changes

serhalp added 6 commits April 4, 2026 21:27

fix: revert all changes to accent color modules

7881d2f

fix: use ButtonBase in mobile menu cmd palette item

52679c0

test: use Response.json() in mock

69ecd87

refactor: use conventional casing for consts

ab1e8ae

perf: extract Apple platform regex

da410ad

refactor: use URL.parse()

58dce1c

serhalp mentioned this pull request Apr 5, 2026

compare page "copy table as markdown" shown too eagerly #2390

Open

serhalp added 6 commits April 5, 2026 09:21

chore: update i18n schema.json

93b73fb

test: fix test assertions

abe97d8

Merge remote-tracking branch 'origin/main' into serhalp/cmdk-palette

1e7a71f

refactor: resolve oxlint warnings

02d0672

fix(i18n): fix bad merge that duplicated a key

d4afc5c

Merge branch 'main' into serhalp/cmdk-palette

7fe8390

alexdln approved these changes Apr 6, 2026

View reviewed changes

app/pages/compare.vue Outdated Show resolved Hide resolved

fix(a11y): wait to copy to clipboard before announcing it

ace5136

github-actions bot mentioned this pull request Apr 6, 2026

chore: release v0.8.0 #2354

Open

serhalp mentioned this pull request Apr 6, 2026

feat: command bar #470

Closed

		@@ -1,21 +1,10 @@
		import { beforeEach, describe, expect, it, vi } from 'vitest'

Uh oh!

Conversation

serhalp commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

🧭 Context

📚 Description

Global commands (always available)

Package context

Package page

Package code page

Package diff page

Compare page

Profile page

Screenshots

Future work

Uh oh!

vercel bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

codecov bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

trueberryless commented Mar 21, 2026

Uh oh!

alexdln commented Mar 30, 2026

Uh oh!

Uh oh!

serhalp commented Mar 31, 2026

Uh oh!

serhalp commented Apr 1, 2026

Uh oh!

ghostdevv left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

serhalp commented Mar 20, 2026 •

edited

Loading

vercel bot commented Mar 20, 2026 •

edited

Loading

github-actions bot commented Mar 20, 2026 •

edited

Loading

codecov bot commented Mar 20, 2026 •

edited

Loading