From 79475b7c4cf9773c0e6aee03d47f951d78f13046 Mon Sep 17 00:00:00 2001
From: 0xfe <2953427626@qq.com>
Date: Sat, 31 Jan 2026 16:02:15 +0800
Subject: [PATCH 01/17] WIP: basic ui logic command bar

---
 app/app.vue                   |  1 +
 app/components/CommandBar.vue | 80 +++++++++++++++++++++++++++++++++++
 2 files changed, 81 insertions(+)
 create mode 100644 app/components/CommandBar.vue

diff --git a/app/app.vue b/app/app.vue
index 2e9d67ea2..92363bb4d 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -69,6 +69,7 @@ if (import.meta.client) {
 <template>
   <div class="min-h-screen flex flex-col bg-bg text-fg">
     <a href="#main-content" class="skip-link font-mono">{{ $t('common.skip_link') }}</a>
+    <CommandBar />
 
     <AppHeader :show-logo="!isHomepage" />
 
diff --git a/app/components/CommandBar.vue b/app/components/CommandBar.vue
new file mode 100644
index 000000000..5540eeebd
--- /dev/null
+++ b/app/components/CommandBar.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="fixed inset-0 z-[1000] flex items-center justify-center bg-black/50 backdrop-blur-sm">
+    <div
+      class="cmdbar-container flex items-center justify-center border border-border shadow-lg rounded-xl bg-bg p2 flex-col gap-2"
+    >
+      <label for="command-input" class="sr-only">command-input</label>
+
+      <input
+        type="text"
+        label="Enter command..."
+        v-model="inputVal"
+        id="command-input"
+        class="w-96 h-12 px-4 text-fg outline-none bg-bg-subtle border border-border rounded-md"
+        placeholder="Enter command..."
+      />
+
+      <div class="w-96 h-48 overflow-auto">
+        <div
+          v-for="item in filteredCmdList"
+          :key="item.id"
+          class="flex-col items-center justify-between px-4 py-2 not-first:mt-2 hover:bg-bg-subtle select-none cursor-pointer rounded-md"
+          :class="{ 'bg-bg-subtle': item.id === selected }"
+        >
+          <div class="text-fg">{{ item.name }}</div>
+          <div class="text-fg-subtle">{{ item.description }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const cmdList = [
+  {
+    id: 'npmx',
+    name: 'npmx',
+    description: 'Run npmx commands',
+  },
+  {
+    id: 'npmx-init',
+    name: 'npmx init',
+    description: 'Initialize a new npmx project',
+  },
+  {
+    id: 'npmx-install',
+    name: 'npmx install',
+    description: 'Install npmx dependencies',
+  },
+  {
+    id: 'npmx-run',
+    name: 'npmx run',
+    description: 'Run npmx scripts',
+  },
+]
+
+const selected = ref(cmdList[0]?.id || '')
+const inputVal = ref('')
+
+const filteredCmdList = computed(() => {
+  if (!inputVal.value) {
+    return cmdList
+  }
+  const filter = inputVal.value.trim().toLowerCase()
+  return cmdList.filter(
+    item =>
+      item.name.toLowerCase().includes(filter) ||
+      item.description.toLowerCase().includes(filter) ||
+      item.id.includes(filter),
+  )
+})
+
+watch(
+  () => filteredCmdList.value,
+  newVal => {
+    if (newVal.length) {
+      selected.value = newVal[0]?.id || ''
+    }
+  },
+)
+</script>

From 727cc82025db953abff148771257c95673e7c541 Mon Sep 17 00:00:00 2001
From: 0xfe <2953427626@qq.com>
Date: Sat, 31 Jan 2026 17:56:16 +0800
Subject: [PATCH 02/17] WIP(command-bar): trigger handlers

---
 app/app.vue                   |   9 +-
 app/components/CommandBar.vue | 162 ++++++++++++++++++++++++++--------
 2 files changed, 135 insertions(+), 36 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 92363bb4d..bad426540 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -19,6 +19,8 @@ const localeMap = locales.value.reduce(
   {} as Record<string, Directions>,
 )
 
+const commandBarRef = useTemplateRef('commandBarRef')
+
 useHead({
   htmlAttrs: {
     lang: () => locale.value,
@@ -37,6 +39,11 @@ if (import.meta.server) {
 function handleGlobalKeydown(e: KeyboardEvent) {
   const target = e.target as HTMLElement
 
+  if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+    e.preventDefault()
+    commandBarRef.value?.toggle()
+  }
+
   const isEditableTarget =
     target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable
 
@@ -69,7 +76,7 @@ if (import.meta.client) {
 <template>
   <div class="min-h-screen flex flex-col bg-bg text-fg">
     <a href="#main-content" class="skip-link font-mono">{{ $t('common.skip_link') }}</a>
-    <CommandBar />
+    <CommandBar ref="commandBarRef" />
 
     <AppHeader :show-logo="!isHomepage" />
 
diff --git a/app/components/CommandBar.vue b/app/components/CommandBar.vue
index 5540eeebd..530aab663 100644
--- a/app/components/CommandBar.vue
+++ b/app/components/CommandBar.vue
@@ -1,60 +1,76 @@
 <template>
-  <div class="fixed inset-0 z-[1000] flex items-center justify-center bg-black/50 backdrop-blur-sm">
+  <Transition name="fade">
     <div
-      class="cmdbar-container flex items-center justify-center border border-border shadow-lg rounded-xl bg-bg p2 flex-col gap-2"
+      class="fixed inset-0 z-[1000] flex items-center justify-center bg-black/50 backdrop-blur-sm"
+      v-show="show"
     >
-      <label for="command-input" class="sr-only">command-input</label>
-
-      <input
-        type="text"
-        label="Enter command..."
-        v-model="inputVal"
-        id="command-input"
-        class="w-96 h-12 px-4 text-fg outline-none bg-bg-subtle border border-border rounded-md"
-        placeholder="Enter command..."
-      />
-
-      <div class="w-96 h-48 overflow-auto">
-        <div
-          v-for="item in filteredCmdList"
-          :key="item.id"
-          class="flex-col items-center justify-between px-4 py-2 not-first:mt-2 hover:bg-bg-subtle select-none cursor-pointer rounded-md"
-          :class="{ 'bg-bg-subtle': item.id === selected }"
-        >
-          <div class="text-fg">{{ item.name }}</div>
-          <div class="text-fg-subtle">{{ item.description }}</div>
+      <div
+        class="cmdbar-container flex items-center justify-center border border-border shadow-lg rounded-xl bg-bg p2 flex-col gap-2"
+      >
+        <label for="command-input" class="sr-only">command-input</label>
+
+        <input
+          type="text"
+          label="Enter command..."
+          v-model="inputVal"
+          id="command-input"
+          ref="inputRef"
+          class="w-xl h-12 px-4 text-fg outline-none bg-bg-subtle border border-border rounded-md"
+          placeholder="Enter command..."
+          @keydown="handleKeydown"
+        />
+
+        <div class="w-xl h-lg overflow-auto">
+          <div
+            v-for="item in filteredCmdList"
+            :key="item.id"
+            class="flex-col items-center justify-between px-4 py-2 not-first:mt-2 hover:bg-bg-elevated select-none cursor-pointer rounded-md transition"
+            :class="{ 'bg-bg-subtle': item.id === selected }"
+            @click="triggerCommand(item.id)"
+          >
+            <div class="text-fg">{{ item.name }}</div>
+            <div class="text-fg-subtle text-sm">{{ item.description }}</div>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </Transition>
 </template>
 
 <script setup lang="ts">
 const cmdList = [
   {
-    id: 'npmx',
-    name: 'npmx',
-    description: 'Run npmx commands',
+    id: 'package:search',
+    name: 'Search packages',
+    description: 'Search for packages',
+    handler: () => {},
   },
   {
-    id: 'npmx-init',
-    name: 'npmx init',
-    description: 'Initialize a new npmx project',
+    id: 'org:search',
+    name: 'Search organizations',
+    description: 'Search for organizations',
+    handler: () => {},
   },
   {
-    id: 'npmx-install',
-    name: 'npmx install',
-    description: 'Install npmx dependencies',
+    id: 'package:like',
+    name: 'Like this',
+    description: 'Like this package',
+    handler: () => {},
   },
   {
-    id: 'npmx-run',
-    name: 'npmx run',
-    description: 'Run npmx scripts',
+    id: 'package:install',
+    name: 'Copy install command',
+    description: 'Copy install command to clipboard',
+    handler: () => {},
   },
 ]
 
 const selected = ref(cmdList[0]?.id || '')
 const inputVal = ref('')
+const show = ref(false)
+const inputRef = useTemplateRef('inputRef')
+
+const { focused: inputFocused } = useFocus(inputRef)
 
 const filteredCmdList = computed(() => {
   if (!inputVal.value) {
@@ -77,4 +93,80 @@ watch(
     }
   },
 )
+
+function focusInput() {
+  inputFocused.value = true
+}
+
+function open() {
+  inputVal.value = ''
+  selected.value = cmdList[0]?.id || ''
+  show.value = true
+  nextTick(focusInput)
+}
+
+function close() {
+  inputVal.value = ''
+  selected.value = cmdList[0]?.id || ''
+  show.value = false
+}
+
+function toggle() {
+  if (show.value) {
+    close()
+  } else {
+    open()
+  }
+}
+
+function triggerCommand(id: string) {
+  const selectedItem = filteredCmdList.value.find(item => item.id === id)
+  selectedItem?.handler?.()
+  close()
+}
+
+const handleKeydown = useThrottleFn((e: KeyboardEvent) => {
+  if (!filteredCmdList.value.length) return
+
+  const currentIndex = filteredCmdList.value.findIndex(item => item.id === selected.value)
+
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    const nextIndex = (currentIndex + 1) % filteredCmdList.value.length
+    selected.value = filteredCmdList.value[nextIndex]?.id || ''
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    const prevIndex =
+      (currentIndex - 1 + filteredCmdList.value.length) % filteredCmdList.value.length
+    selected.value = filteredCmdList.value[prevIndex]?.id || ''
+  } else if (e.key === 'Enter') {
+    e.preventDefault()
+    triggerCommand(selected.value)
+  } else if (e.key === 'Escape') {
+    e.preventDefault()
+    close()
+  }
+}, 50)
+
+defineExpose({
+  open,
+  close,
+  toggle,
+})
 </script>
+
+<style scoped>
+.fade-enter-active {
+  transition: all 0.05s ease-out;
+}
+
+.fade-leave-active {
+  transition: all 0.1s ease-in;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>

From 1fbab7e276cb80409ee102fabb0381ec4cb6e834 Mon Sep 17 00:00:00 2001
From: 0xfe <2953427626@qq.com>
Date: Sat, 31 Jan 2026 18:52:22 +0800
Subject: [PATCH 03/17] WIP(command-bar): trrigger feedback

---
 app/components/CommandBar.vue | 33 +++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/app/components/CommandBar.vue b/app/components/CommandBar.vue
index 530aab663..30639bb20 100644
--- a/app/components/CommandBar.vue
+++ b/app/components/CommandBar.vue
@@ -25,7 +25,10 @@
             v-for="item in filteredCmdList"
             :key="item.id"
             class="flex-col items-center justify-between px-4 py-2 not-first:mt-2 hover:bg-bg-elevated select-none cursor-pointer rounded-md transition"
-            :class="{ 'bg-bg-subtle': item.id === selected }"
+            :class="{
+              'bg-bg-subtle': item.id === selected,
+              'trigger-anim': item.id === triggeringId,
+            }"
             @click="triggerCommand(item.id)"
           >
             <div class="text-fg">{{ item.name }}</div>
@@ -68,6 +71,7 @@ const cmdList = [
 const selected = ref(cmdList[0]?.id || '')
 const inputVal = ref('')
 const show = ref(false)
+const triggeringId = ref('')
 const inputRef = useTemplateRef('inputRef')
 
 const { focused: inputFocused } = useFocus(inputRef)
@@ -122,7 +126,11 @@ function toggle() {
 function triggerCommand(id: string) {
   const selectedItem = filteredCmdList.value.find(item => item.id === id)
   selectedItem?.handler?.()
-  close()
+  triggeringId.value = id
+  setTimeout(() => {
+    triggeringId.value = ''
+    close()
+  }, 100)
 }
 
 const handleKeydown = useThrottleFn((e: KeyboardEvent) => {
@@ -169,4 +177,25 @@ defineExpose({
   opacity: 0;
   transform: translateY(-10px);
 }
+
+@keyframes trigger-pulse {
+  0% {
+    transform: scale(1);
+    background-color: var(--bg-subtle);
+  }
+
+  50% {
+    transform: scale(0.96);
+    background-color: var(--bg-elevated);
+  }
+
+  100% {
+    transform: scale(1);
+    background-color: var(--bg-subtle);
+  }
+}
+
+.trigger-anim {
+  animation: trigger-pulse 0.1s ease-in-out;
+}
 </style>

From 6d44e650a577c24be771689cea4def2494d409d7 Mon Sep 17 00:00:00 2001
From: 0xfe <2953427626@qq.com>
Date: Sat, 31 Jan 2026 19:13:25 +0800
Subject: [PATCH 04/17] WIP(command-bar): command prompt

---
 app/components/CommandBar.vue | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/app/components/CommandBar.vue b/app/components/CommandBar.vue
index 30639bb20..539ea0ea1 100644
--- a/app/components/CommandBar.vue
+++ b/app/components/CommandBar.vue
@@ -9,16 +9,19 @@
       >
         <label for="command-input" class="sr-only">command-input</label>
 
-        <input
-          type="text"
-          label="Enter command..."
-          v-model="inputVal"
-          id="command-input"
-          ref="inputRef"
-          class="w-xl h-12 px-4 text-fg outline-none bg-bg-subtle border border-border rounded-md"
-          placeholder="Enter command..."
-          @keydown="handleKeydown"
-        />
+        <search class="relative w-xl h-12 flex items-center">
+          <span class="absolute inset-is-4 text-fg-subtle font-mono pointer-events-none"> > </span>
+          <input
+            type="text"
+            label="Enter command..."
+            v-model="inputVal"
+            id="command-input"
+            ref="inputRef"
+            class="w-full h-full px-4 pl-8 text-fg outline-none bg-bg-subtle border border-border rounded-md"
+            placeholder="Enter command..."
+            @keydown="handleKeydown"
+          />
+        </search>
 
         <div class="w-xl h-lg overflow-auto">
           <div
@@ -128,8 +131,8 @@ function triggerCommand(id: string) {
   selectedItem?.handler?.()
   triggeringId.value = id
   setTimeout(() => {
-    triggeringId.value = ''
     close()
+    triggeringId.value = ''
   }, 100)
 }
 
@@ -181,7 +184,6 @@ defineExpose({
 @keyframes trigger-pulse {
   0% {
     transform: scale(1);
-    background-color: var(--bg-subtle);
   }
 
   50% {
@@ -191,7 +193,6 @@ defineExpose({
 
   100% {
     transform: scale(1);
-    background-color: var(--bg-subtle);
   }
 }
 

From 7ada4b162ebfac1fdafce4ed01efa2ca57190c4e Mon Sep 17 00:00:00 2001
From: Gianthard-cyh <45843411+Gianthard-cyh@users.noreply.github.com>
Date: Sat, 31 Jan 2026 20:03:44 +0800
Subject: [PATCH 05/17] Update app/components/CommandBar.vue

Co-authored-by: Robin <robin.kehl@singular-it.de>
---
 app/components/CommandBar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/CommandBar.vue b/app/components/CommandBar.vue
index 539ea0ea1..e42291c41 100644
--- a/app/components/CommandBar.vue
+++ b/app/components/CommandBar.vue
@@ -71,10 +71,10 @@ const cmdList = [
   },
 ]
 
-const selected = ref(cmdList[0]?.id || '')
-const inputVal = ref('')
-const show = ref(false)
-const triggeringId = ref('')
+const selected = shallowRef(cmdList[0]?.id || '')
+const inputVal = shallowRef('')
+const show = shallowRef(false)
+const triggeringId = shallowRef('')
 const inputRef = useTemplateRef('inputRef')
 
 const { focused: inputFocused } = useFocus(inputRef)

From cc119446a61cc669e9ece4a01757def32a5f57cc Mon Sep 17 00:00:00 2001
From: 0xfe <2953427626@qq.com>
Date: Sun, 1 Feb 2026 01:44:53 +0800
Subject: [PATCH 06/17] WIP(command-bar): basic api

---
 app/components/CommandBar.vue         | 41 +++-----------
 app/composables/useCommandRegistry.ts | 81 +++++++++++++++++++++++++++
 app/plugins/commands.ts               | 11 ++++
 3 files changed, 100 insertions(+), 33 deletions(-)
 create mode 100644 app/composables/useCommandRegistry.ts
 create mode 100644 app/plugins/commands.ts

diff --git a/app/components/CommandBar.vue b/app/components/CommandBar.vue
index e42291c41..866fa169b 100644
--- a/app/components/CommandBar.vue
+++ b/app/components/CommandBar.vue
@@ -44,34 +44,9 @@
 </template>
 
 <script setup lang="ts">
-const cmdList = [
-  {
-    id: 'package:search',
-    name: 'Search packages',
-    description: 'Search for packages',
-    handler: () => {},
-  },
-  {
-    id: 'org:search',
-    name: 'Search organizations',
-    description: 'Search for organizations',
-    handler: () => {},
-  },
-  {
-    id: 'package:like',
-    name: 'Like this',
-    description: 'Like this package',
-    handler: () => {},
-  },
-  {
-    id: 'package:install',
-    name: 'Copy install command',
-    description: 'Copy install command to clipboard',
-    handler: () => {},
-  },
-]
+const { commands } = useCommandRegistry()
 
-const selected = shallowRef(cmdList[0]?.id || '')
+const selected = shallowRef(commands.value[0]?.id || '')
 const inputVal = shallowRef('')
 const show = shallowRef(false)
 const triggeringId = shallowRef('')
@@ -81,13 +56,13 @@ const { focused: inputFocused } = useFocus(inputRef)
 
 const filteredCmdList = computed(() => {
   if (!inputVal.value) {
-    return cmdList
+    return commands.value
   }
   const filter = inputVal.value.trim().toLowerCase()
-  return cmdList.filter(
+  return commands.value.filter(
     item =>
       item.name.toLowerCase().includes(filter) ||
-      item.description.toLowerCase().includes(filter) ||
+      item.description?.toLowerCase().includes(filter) ||
       item.id.includes(filter),
   )
 })
@@ -107,14 +82,14 @@ function focusInput() {
 
 function open() {
   inputVal.value = ''
-  selected.value = cmdList[0]?.id || ''
+  selected.value = commands.value[0]?.id || ''
   show.value = true
   nextTick(focusInput)
 }
 
 function close() {
   inputVal.value = ''
-  selected.value = cmdList[0]?.id || ''
+  selected.value = commands.value[0]?.id || ''
   show.value = false
 }
 
@@ -128,7 +103,7 @@ function toggle() {
 
 function triggerCommand(id: string) {
   const selectedItem = filteredCmdList.value.find(item => item.id === id)
-  selectedItem?.handler?.()
+  selectedItem?.handler?.({} as CommandContext)
   triggeringId.value = id
   setTimeout(() => {
     close()
diff --git a/app/composables/useCommandRegistry.ts b/app/composables/useCommandRegistry.ts
new file mode 100644
index 000000000..37767d7b2
--- /dev/null
+++ b/app/composables/useCommandRegistry.ts
@@ -0,0 +1,81 @@
+import { computed } from 'vue'
+
+export interface Command {
+  id: string
+  name: string
+  description: string | undefined
+  handler?: (ctx: CommandContext) => Promise<void>
+}
+
+export interface CommandContext {
+  input: (options: CommandInputOptions) => Promise<string | undefined>
+  select: <T>(options: CommandSelectOptions<T>) => Promise<T | undefined>
+}
+
+export interface CommandInputOptions {
+  prompt: string
+}
+
+export interface CommandSelectOptions<T> {
+  prompt: string
+  items: T[]
+}
+
+/**
+ * Composable for global command registry.
+ * @public
+ */
+export const useCommandRegistry = () => {
+  const commands = useState<Map<string, Command>>('commands', () => new Map())
+
+  const register = (command: Command) => {
+    const serverCommand = {
+      ...command,
+      handler: undefined,
+    }
+    if (import.meta.server) {
+      commands.value.set(command.id, serverCommand)
+    } else {
+      commands.value.set(command.id, command)
+    }
+    return () => {
+      commands.value.delete(command.id)
+    }
+  }
+
+  return {
+    register,
+    commands: computed(() => Array.from(commands.value.values())),
+  }
+}
+
+/**
+ * Registers a global command.
+ * @public
+ */
+export const registerGlobalCommand = (command: Command) => {
+  const { register } = useCommandRegistry()
+  return register(command)
+}
+
+/**
+ * Registers a command bound to the current component's lifecycle.
+ *
+ * The command is automatically unregistered when the component unmounts.
+ * Use this to register commands that rely on local component state (context)
+ * via closure capture.
+ *
+ * @public
+ */
+export const registerScopedCommand = (command: Command) => {
+  const { register } = useCommandRegistry()
+  let unregister: () => void
+
+  onMounted(() => {
+    unregister = register(command)
+  })
+
+  onUnmounted(() => {
+    unregister()
+  })
+}
diff --git a/app/plugins/commands.ts b/app/plugins/commands.ts
new file mode 100644
index 000000000..aa5327e36
--- /dev/null
+++ b/app/plugins/commands.ts
@@ -0,0 +1,11 @@
+export default defineNuxtPlugin(() => {
+  const { register } = useCommandRegistry()
+  register({
+    id: 'npmx:hello',
+    name: 'Hello',
+    description: 'Say hello to npmx',
+    handler: async () => {
+      console.log('Hello npmx!')
+    },
+  })
+})

From 4d8e6aa26da5f9f04a6fdf78c9e7fae5b8961bfb Mon Sep 17 00:00:00 2001
From: 0xfe <2953427626@qq.com>
Date: Sun, 1 Feb 2026 01:47:49 +0800
Subject: [PATCH 07/17] WIP(command-bar): scoped command example

---
 app/pages/[...package].vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index 0be158403..7c479751f 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -11,6 +11,15 @@ definePageMeta({
   alias: ['/package/:package(.*)*'],
 })
 
+registerScopedCommand({
+  id: 'package hello',
+  name: 'Hello',
+  description: 'Say hello to the package',
+  handler: async () => {
+    console.log(`Hello ${packageName.value}!`)
+  },
+})
+
 const router = useRouter()
 
 const { packageName, requestedVersion, orgName } = usePackageRoute()
@@ -1071,18 +1080,22 @@ function handleClick(event: MouseEvent) {
   grid-area: header;
   overflow-x: hidden;
 }
+
 .area-install {
   grid-area: install;
   overflow-x: hidden;
 }
+
 .area-vulns {
   grid-area: vulns;
   overflow-x: hidden;
 }
+
 .area-readme {
   grid-area: readme;
   overflow-x: hidden;
 }
+
 .area-sidebar {
   grid-area: sidebar;
 }

From 95639eaa66d417088952d61560cbcdb0116358fd Mon Sep 17 00:00:00 2001
From: 0xfe <2953427626@qq.com>
Date: Sun, 1 Feb 2026 16:03:41 +0800
Subject: [PATCH 08/17] feat(command-bar): context api (input, select, etc.)

---
 app/components/CommandBar.vue             | 86 ++++++++++++++++++-----
 app/components/InstallCommandTerminal.vue | 33 +++++++++
 app/plugins/commands.ts                   | 19 +++--
 i18n/locales/en.json                      |  9 +++
 i18n/locales/zh-CN.json                   |  9 +++
 5 files changed, 134 insertions(+), 22 deletions(-)

diff --git a/app/components/CommandBar.vue b/app/components/CommandBar.vue
index 866fa169b..c96f46e20 100644
--- a/app/components/CommandBar.vue
+++ b/app/components/CommandBar.vue
@@ -1,11 +1,11 @@
 <template>
   <Transition name="fade">
     <div
-      class="fixed inset-0 z-[1000] flex items-center justify-center bg-black/50 backdrop-blur-sm"
+      class="fixed inset-0 z-[1000] flex items-start justify-center bg-black/50 backdrop-blur-sm"
       v-show="show"
     >
       <div
-        class="cmdbar-container flex items-center justify-center border border-border shadow-lg rounded-xl bg-bg p2 flex-col gap-2"
+        class="cmdbar-container flex items-center justify-center border border-border shadow-lg rounded-xl bg-bg p2 flex-col gap-2 mt-5rem"
       >
         <label for="command-input" class="sr-only">command-input</label>
 
@@ -13,17 +13,16 @@
           <span class="absolute inset-is-4 text-fg-subtle font-mono pointer-events-none"> > </span>
           <input
             type="text"
-            label="Enter command..."
             v-model="inputVal"
             id="command-input"
             ref="inputRef"
             class="w-full h-full px-4 pl-8 text-fg outline-none bg-bg-subtle border border-border rounded-md"
-            placeholder="Enter command..."
+            :placeholder="placeholderText"
             @keydown="handleKeydown"
           />
         </search>
 
-        <div class="w-xl h-lg overflow-auto">
+        <div class="w-xl max-h-lg overflow-auto" v-if="view.type != 'INPUT'">
           <div
             v-for="item in filteredCmdList"
             :key="item.id"
@@ -32,7 +31,7 @@
               'bg-bg-subtle': item.id === selected,
               'trigger-anim': item.id === triggeringId,
             }"
-            @click="triggerCommand(item.id)"
+            @click="onTrigger(item.id)"
           >
             <div class="text-fg">{{ item.name }}</div>
             <div class="text-fg-subtle text-sm">{{ item.description }}</div>
@@ -44,6 +43,27 @@
 </template>
 
 <script setup lang="ts">
+const { t } = useI18n()
+
+type ViewState =
+  | { type: 'ROOT' }
+  | { type: 'INPUT'; prompt: string; resolve: (val: string) => void }
+  | { type: 'SELECT'; prompt: string; items: any[]; resolve: (val: any) => void }
+const view = ref<ViewState>({ type: 'ROOT' })
+
+const cmdCtx: CommandContext = {
+  async input(options) {
+    return new Promise(resolve => {
+      view.value = { type: 'INPUT', prompt: options.prompt, resolve }
+    })
+  },
+  async select(options) {
+    return new Promise(resolve => {
+      view.value = { type: 'SELECT', prompt: options.prompt, items: options.items, resolve }
+    })
+  },
+}
+
 const { commands } = useCommandRegistry()
 
 const selected = shallowRef(commands.value[0]?.id || '')
@@ -54,13 +74,26 @@ const inputRef = useTemplateRef('inputRef')
 
 const { focused: inputFocused } = useFocus(inputRef)
 
+const placeholderText = computed(() => {
+  if (view.value.type === 'INPUT' || view.value.type === 'SELECT') {
+    return view.value.prompt
+  }
+  return t('command.placeholder')
+})
+
 const filteredCmdList = computed(() => {
+  if (view.value.type === 'INPUT') {
+    return []
+  }
+
+  const list = view.value.type === 'SELECT' ? view.value.items : commands.value
+
   if (!inputVal.value) {
-    return commands.value
+    return list
   }
   const filter = inputVal.value.trim().toLowerCase()
-  return commands.value.filter(
-    item =>
+  return list.filter(
+    (item: any) =>
       item.name.toLowerCase().includes(filter) ||
       item.description?.toLowerCase().includes(filter) ||
       item.id.includes(filter),
@@ -84,6 +117,7 @@ function open() {
   inputVal.value = ''
   selected.value = commands.value[0]?.id || ''
   show.value = true
+  view.value = { type: 'ROOT' }
   nextTick(focusInput)
 }
 
@@ -101,20 +135,36 @@ function toggle() {
   }
 }
 
-function triggerCommand(id: string) {
-  const selectedItem = filteredCmdList.value.find(item => item.id === id)
-  selectedItem?.handler?.({} as CommandContext)
+function onTrigger(id: string) {
   triggeringId.value = id
-  setTimeout(() => {
+
+  if (view.value.type === 'ROOT') {
+    const selectedItem = filteredCmdList.value.find((item: any) => item.id === id)
+    selectedItem?.handler?.(cmdCtx)
+    setTimeout(() => {
+      triggeringId.value = ''
+      if (view.value.type === 'ROOT') {
+        close()
+      }
+    }, 100)
+  } else if (view.value.type === 'INPUT') {
+    view.value.resolve(inputVal.value)
+    close()
+  } else if (view.value.type === 'SELECT') {
+    const selectedItem = filteredCmdList.value.find((item: any) => item.id === id)
+    view.value.resolve(selectedItem)
     close()
-    triggeringId.value = ''
-  }, 100)
+  }
 }
 
 const handleKeydown = useThrottleFn((e: KeyboardEvent) => {
-  if (!filteredCmdList.value.length) return
+  if (view.value.type === 'INPUT' && e.key === 'Enter') {
+    e.preventDefault()
+    onTrigger('') // Trigger for input doesn't need ID
+    return
+  }
 
-  const currentIndex = filteredCmdList.value.findIndex(item => item.id === selected.value)
+  const currentIndex = filteredCmdList.value.findIndex((item: any) => item.id === selected.value)
 
   if (e.key === 'ArrowDown') {
     e.preventDefault()
@@ -127,7 +177,7 @@ const handleKeydown = useThrottleFn((e: KeyboardEvent) => {
     selected.value = filteredCmdList.value[prevIndex]?.id || ''
   } else if (e.key === 'Enter') {
     e.preventDefault()
-    triggerCommand(selected.value)
+    onTrigger(selected.value)
   } else if (e.key === 'Escape') {
     e.preventDefault()
     close()
diff --git a/app/components/InstallCommandTerminal.vue b/app/components/InstallCommandTerminal.vue
index 37bd3441f..816c43a72 100644
--- a/app/components/InstallCommandTerminal.vue
+++ b/app/components/InstallCommandTerminal.vue
@@ -2,6 +2,8 @@
 import type { JsrPackageInfo } from '#shared/types/jsr'
 import type { PackageManagerId } from '~/utils/install-command'
 
+const { t } = useI18n()
+
 const props = defineProps<{
   packageName: string
   requestedVersion?: string | null
@@ -93,6 +95,37 @@ const copyRunCommand = (command?: string) => copyRun(getFullRunCommand(command))
 
 const { copied: createCopied, copy: copyCreate } = useClipboard({ copiedDuring: 2000 })
 const copyCreateCommand = () => copyCreate(getFullCreateCommand())
+
+registerScopedCommand({
+  id: 'package:install',
+  name: t('command.copy_install'),
+  description: t('command.copy_install_desc'),
+  handler: async () => {
+    copyInstallCommand()
+  },
+})
+
+if (props.executableInfo?.hasExecutable) {
+  registerScopedCommand({
+    id: 'packages:copy-run',
+    name: t('command.copy_run'),
+    description: t('command.copy_run_desc'),
+    handler: async () => {
+      copyRunCommand()
+    },
+  })
+}
+
+if (props.createPackageInfo) {
+  registerScopedCommand({
+    id: 'packages:copy-create',
+    name: t('command.copy_create'),
+    description: t('command.copy_create_desc'),
+    handler: async () => {
+      copyCreateCommand()
+    },
+  })
+}
 </script>
 
 <template>
diff --git a/app/plugins/commands.ts b/app/plugins/commands.ts
index aa5327e36..81b52a370 100644
--- a/app/plugins/commands.ts
+++ b/app/plugins/commands.ts
@@ -1,11 +1,22 @@
 export default defineNuxtPlugin(() => {
   const { register } = useCommandRegistry()
+  const router = useRouter()
+
   register({
-    id: 'npmx:hello',
-    name: 'Hello',
-    description: 'Say hello to npmx',
+    id: 'packages:search',
+    name: 'Search Packages',
+    description: 'Search for npm packages',
     handler: async () => {
-      console.log('Hello npmx!')
+      const searchInput = document.querySelector<HTMLInputElement>(
+        'input[type="search"], input[name="q"]',
+      )
+
+      if (searchInput) {
+        searchInput.focus()
+        return
+      }
+
+      router.push('/search')
     },
   })
 })
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 546e4c621..ee9beaebc 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -748,5 +748,14 @@
       "empty": "No organizations found",
       "view_all": "View all"
     }
+  },
+  "command": {
+    "placeholder": "Enter command...",
+    "copy_install": "Copy install command",
+    "copy_install_desc": "Copy install command to clipboard",
+    "copy_run": "Copy run command",
+    "copy_run_desc": "Copy run command to clipboard",
+    "copy_create": "Copy create command",
+    "copy_create_desc": "Copy create command to clipboard"
   }
 }
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index ad5b661bd..feb48c943 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -747,5 +747,14 @@
       "empty": "未找到组织",
       "view_all": "查看全部"
     }
+  },
+  "command": {
+    "placeholder": "输入命令...",
+    "copy_install": "复制安装命令",
+    "copy_install_desc": "复制安装命令到剪贴板",
+    "copy_run": "复制运行命令",
+    "copy_run_desc": "复制运行命令到剪贴板",
+    "copy_create": "复制创建命令",
+    "copy_create_desc": "复制创建命令到剪贴板"
   }
 }

From 270c386ea1ec4ae8e9f11600b7c2c05d7b745b9c Mon Sep 17 00:00:00 2001
From: 0xfe <2953427626@qq.com>
Date: Sun, 1 Feb 2026 16:08:04 +0800
Subject: [PATCH 09/17] chore: revert [...package].vue

---
 app/pages/[...package].vue | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index 7c479751f..0be158403 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -11,15 +11,6 @@ definePageMeta({
   alias: ['/package/:package(.*)*'],
 })
 
-registerScopedCommand({
-  id: 'package hello',
-  name: 'Hello',
-  description: 'Say hello to the package',
-  handler: async () => {
-    console.log(`Hello ${packageName.value}!`)
-  },
-})
-
 const router = useRouter()
 
 const { packageName, requestedVersion, orgName } = usePackageRoute()
@@ -1080,22 +1071,18 @@ function handleClick(event: MouseEvent) {
   grid-area: header;
   overflow-x: hidden;
 }
-
 .area-install {
   grid-area: install;
   overflow-x: hidden;
 }
-
 .area-vulns {
   grid-area: vulns;
   overflow-x: hidden;
 }
-
 .area-readme {
   grid-area: readme;
   overflow-x: hidden;
 }
-
 .area-sidebar {
   grid-area: sidebar;
 }

From e2b331eb2d07d4c5d1843f93857be227602a1891 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 1 Feb 2026 08:13:27 +0000
Subject: [PATCH 10/17] [autofix.ci] apply automated fixes

---
 lunaria/files/en-US.json | 9 +++++++++
 lunaria/files/zh-CN.json | 9 +++++++++
 2 files changed, 18 insertions(+)

diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 171309c19..b72759ea7 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -796,6 +796,15 @@
       "view_all": "View all"
     }
   },
+  "command": {
+    "placeholder": "Enter command...",
+    "copy_install": "Copy install command",
+    "copy_install_desc": "Copy install command to clipboard",
+    "copy_run": "Copy run command",
+    "copy_run_desc": "Copy run command to clipboard",
+    "copy_create": "Copy create command",
+    "copy_create_desc": "Copy create command to clipboard"
+  },
   "compare": {
     "packages": {
       "title": "compare packages",
diff --git a/lunaria/files/zh-CN.json b/lunaria/files/zh-CN.json
index f54d95335..c3b77a22e 100644
--- a/lunaria/files/zh-CN.json
+++ b/lunaria/files/zh-CN.json
@@ -779,5 +779,14 @@
       "empty": "未找到组织",
       "view_all": "查看全部"
     }
+  },
+  "command": {
+    "placeholder": "输入命令...",
+    "copy_install": "复制安装命令",
+    "copy_install_desc": "复制安装命令到剪贴板",
+    "copy_run": "复制运行命令",
+    "copy_run_desc": "复制运行命令到剪贴板",
+    "copy_create": "复制创建命令",
+    "copy_create_desc": "复制创建命令到剪贴板"
   }
 }

From af1a50a1eca26e8caa0ff5bb8cbafc0e26750a81 Mon Sep 17 00:00:00 2001
From: 0xfe <2953427626@qq.com>
Date: Sun, 1 Feb 2026 16:17:00 +0800
Subject: [PATCH 11/17] fix(test): remove unused variable

---
 app/app.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 03ce1e047..69b34c558 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -49,9 +49,6 @@ function handleGlobalKeydown(e: KeyboardEvent) {
     commandBarRef.value?.toggle()
   }
 
-  const isEditableTarget =
-    target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable
-
   if (isEditableElement(e.target)) return
 
   if (e.key === '/') {

From 6020a50cd35d4ce10d98cef0fa8cd9a8ceddf741 Mon Sep 17 00:00:00 2001
From: 0xfe <2953427626@qq.com>
Date: Sun, 1 Feb 2026 16:20:40 +0800
Subject: [PATCH 12/17] chore: remove unused variable

---
 app/app.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 69b34c558..f78abd344 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -42,8 +42,6 @@ if (import.meta.server) {
 // "/" focuses search or navigates to search page
 // "?" highlights all keyboard shortcut elements
 function handleGlobalKeydown(e: KeyboardEvent) {
-  const target = e.target as HTMLElement
-
   if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
     e.preventDefault()
     commandBarRef.value?.toggle()

From 516baeb7bb1e6b4697afb582d79daa5852785d5b Mon Sep 17 00:00:00 2001
From: 0xfe <2953427626@qq.com>
Date: Sun, 1 Feb 2026 16:44:31 +0800
Subject: [PATCH 13/17] chore: apply suggestions from copilot

---
 app/components/CommandBar.vue | 86 ++++++++++++++++++++---------------
 app/plugins/commands.ts       |  6 ++-
 i18n/locales/en.json          |  3 ++
 i18n/locales/zh-CN.json       |  3 ++
 4 files changed, 60 insertions(+), 38 deletions(-)

diff --git a/app/components/CommandBar.vue b/app/components/CommandBar.vue
index c96f46e20..993ffbf4d 100644
--- a/app/components/CommandBar.vue
+++ b/app/components/CommandBar.vue
@@ -1,45 +1,54 @@
 <template>
-  <Transition name="fade">
-    <div
-      class="fixed inset-0 z-[1000] flex items-start justify-center bg-black/50 backdrop-blur-sm"
-      v-show="show"
-    >
+  <Teleport to="body">
+    <Transition name="fade">
       <div
-        class="cmdbar-container flex items-center justify-center border border-border shadow-lg rounded-xl bg-bg p2 flex-col gap-2 mt-5rem"
+        class="fixed inset-0 z-[1000] flex items-start justify-center bg-black/50 backdrop-blur-sm"
+        v-show="show"
       >
-        <label for="command-input" class="sr-only">command-input</label>
-
-        <search class="relative w-xl h-12 flex items-center">
-          <span class="absolute inset-is-4 text-fg-subtle font-mono pointer-events-none"> > </span>
-          <input
-            type="text"
-            v-model="inputVal"
-            id="command-input"
-            ref="inputRef"
-            class="w-full h-full px-4 pl-8 text-fg outline-none bg-bg-subtle border border-border rounded-md"
-            :placeholder="placeholderText"
-            @keydown="handleKeydown"
-          />
-        </search>
-
-        <div class="w-xl max-h-lg overflow-auto" v-if="view.type != 'INPUT'">
-          <div
-            v-for="item in filteredCmdList"
-            :key="item.id"
-            class="flex-col items-center justify-between px-4 py-2 not-first:mt-2 hover:bg-bg-elevated select-none cursor-pointer rounded-md transition"
-            :class="{
-              'bg-bg-subtle': item.id === selected,
-              'trigger-anim': item.id === triggeringId,
-            }"
-            @click="onTrigger(item.id)"
-          >
-            <div class="text-fg">{{ item.name }}</div>
-            <div class="text-fg-subtle text-sm">{{ item.description }}</div>
+        <div
+          class="cmdbar-container flex items-center justify-center border border-border shadow-lg rounded-xl bg-bg p2 flex-col gap-2 mt-5rem"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="command-input-label"
+        >
+          <label for="command-input" id="command-input-label" class="sr-only">{{
+            t('command.label')
+          }}</label>
+
+          <search class="relative w-xl h-12 flex items-center">
+            <span class="absolute inset-is-4 text-fg-subtle font-mono pointer-events-none">
+              >
+            </span>
+            <input
+              type="text"
+              v-model="inputVal"
+              id="command-input"
+              ref="inputRef"
+              class="w-full h-full px-4 pl-8 text-fg outline-none bg-bg-subtle border border-border rounded-md"
+              :placeholder="placeholderText"
+              @keydown="handleKeydown"
+            />
+          </search>
+
+          <div class="w-xl max-h-lg overflow-auto" v-if="view.type != 'INPUT'">
+            <div
+              v-for="item in filteredCmdList"
+              :key="item.id"
+              class="px-4 py-2 not-first:mt-2 hover:bg-bg-elevated select-none cursor-pointer rounded-md transition"
+              :class="{
+                'bg-bg-subtle': item.id === selected,
+                'trigger-anim': item.id === triggeringId,
+              }"
+              @click="onTrigger(item.id)"
+            >
+              <div class="text-fg">{{ item.name }}</div>
+              <div class="text-fg-subtle text-sm">{{ item.description }}</div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </Transition>
+    </Transition>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
@@ -164,6 +173,11 @@ const handleKeydown = useThrottleFn((e: KeyboardEvent) => {
     return
   }
 
+  if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && !filteredCmdList.value.length) {
+    e.preventDefault()
+    return
+  }
+
   const currentIndex = filteredCmdList.value.findIndex((item: any) => item.id === selected.value)
 
   if (e.key === 'ArrowDown') {
diff --git a/app/plugins/commands.ts b/app/plugins/commands.ts
index 81b52a370..d204efac6 100644
--- a/app/plugins/commands.ts
+++ b/app/plugins/commands.ts
@@ -2,10 +2,12 @@ export default defineNuxtPlugin(() => {
   const { register } = useCommandRegistry()
   const router = useRouter()
 
+  const { t } = useI18n()
+
   register({
     id: 'packages:search',
-    name: 'Search Packages',
-    description: 'Search for npm packages',
+    name: t('command.package_search'),
+    description: t('command.package_search_desc'),
     handler: async () => {
       const searchInput = document.querySelector<HTMLInputElement>(
         'input[type="search"], input[name="q"]',
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index b72759ea7..f4e8cfd48 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -798,6 +798,9 @@
   },
   "command": {
     "placeholder": "Enter command...",
+    "label": "Command",
+    "package_search": "Search packages",
+    "package_search_desc": "Search for npm packages",
     "copy_install": "Copy install command",
     "copy_install_desc": "Copy install command to clipboard",
     "copy_run": "Copy run command",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index c3b77a22e..8318fd517 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -782,6 +782,9 @@
   },
   "command": {
     "placeholder": "输入命令...",
+    "label": "命令",
+    "package_search": "搜索包",
+    "package_search_desc": "搜索 npm 包",
     "copy_install": "复制安装命令",
     "copy_install_desc": "复制安装命令到剪贴板",
     "copy_run": "复制运行命令",

From 8f087d4f4bde7497ead5279555c2cdee2b3eee41 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 1 Feb 2026 08:47:06 +0000
Subject: [PATCH 14/17] [autofix.ci] apply automated fixes

---
 lunaria/files/en-US.json | 3 +++
 lunaria/files/zh-CN.json | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index b72759ea7..f4e8cfd48 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -798,6 +798,9 @@
   },
   "command": {
     "placeholder": "Enter command...",
+    "label": "Command",
+    "package_search": "Search packages",
+    "package_search_desc": "Search for npm packages",
     "copy_install": "Copy install command",
     "copy_install_desc": "Copy install command to clipboard",
     "copy_run": "Copy run command",
diff --git a/lunaria/files/zh-CN.json b/lunaria/files/zh-CN.json
index c3b77a22e..8318fd517 100644
--- a/lunaria/files/zh-CN.json
+++ b/lunaria/files/zh-CN.json
@@ -782,6 +782,9 @@
   },
   "command": {
     "placeholder": "输入命令...",
+    "label": "命令",
+    "package_search": "搜索包",
+    "package_search_desc": "搜索 npm 包",
     "copy_install": "复制安装命令",
     "copy_install_desc": "复制安装命令到剪贴板",
     "copy_run": "复制运行命令",

From efce157109b5e835e41b53d4ce1b6ea3385bd6fe Mon Sep 17 00:00:00 2001
From: 0xfe <2953427626@qq.com>
Date: Sun, 1 Feb 2026 16:53:07 +0800
Subject: [PATCH 15/17] fix: remove useI18n() to prevent error

---
 app/plugins/commands.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/plugins/commands.ts b/app/plugins/commands.ts
index d204efac6..573d7f142 100644
--- a/app/plugins/commands.ts
+++ b/app/plugins/commands.ts
@@ -1,8 +1,8 @@
 export default defineNuxtPlugin(() => {
-  const { register } = useCommandRegistry()
   const router = useRouter()
-
-  const { t } = useI18n()
+  const { $i18n } = useNuxtApp()
+  const t = $i18n.t
+  const { register } = useCommandRegistry()
 
   register({
     id: 'packages:search',

From 0c690976a9fbcb0305dee6b0e80aa0b86a8c094b Mon Sep 17 00:00:00 2001
From: 0xfe <2953427626@qq.com>
Date: Sun, 1 Feb 2026 20:31:56 +0800
Subject: [PATCH 16/17] fix(test): ignore a11y due to the need of full app
 context.

---
 test/unit/a11y-component-coverage.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/unit/a11y-component-coverage.spec.ts b/test/unit/a11y-component-coverage.spec.ts
index 81d89fdfb..0703100bd 100644
--- a/test/unit/a11y-component-coverage.spec.ts
+++ b/test/unit/a11y-component-coverage.spec.ts
@@ -41,6 +41,7 @@ const SKIPPED_COMPONENTS: Record<string, string> = {
   'Package/WeeklyDownloadStats.vue':
     'Uses vue-data-ui VueUiSparkline - has DOM measurement issues in test environment',
   'UserCombobox.vue': 'Unused component - intended for future admin features',
+  'CommandBar.vue': 'Requires full app context to collect and render commands',
 }
 
 /**

From 527cdd47bac3e10e83c0e43e572f190a0481be9d Mon Sep 17 00:00:00 2001
From: 0xfe <2953427626@qq.com>
Date: Sun, 1 Feb 2026 20:37:15 +0800
Subject: [PATCH 17/17] test: add a11y test to CommandBar.vue

---
 test/nuxt/a11y.spec.ts                    | 9 +++++++++
 test/unit/a11y-component-coverage.spec.ts | 1 -
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index c95f37764..8b1e49021 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -117,6 +117,7 @@ import {
   SearchSuggestionCard,
   VersionSelector,
   ViewModeToggle,
+  CommandBar,
 } from '#components'
 
 // Server variant components must be imported directly to test the server-side render
@@ -1806,4 +1807,12 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
   })
+
+  describe('CommandBar', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(CommandBar)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 })
diff --git a/test/unit/a11y-component-coverage.spec.ts b/test/unit/a11y-component-coverage.spec.ts
index 0703100bd..81d89fdfb 100644
--- a/test/unit/a11y-component-coverage.spec.ts
+++ b/test/unit/a11y-component-coverage.spec.ts
@@ -41,7 +41,6 @@ const SKIPPED_COMPONENTS: Record<string, string> = {
   'Package/WeeklyDownloadStats.vue':
     'Uses vue-data-ui VueUiSparkline - has DOM measurement issues in test environment',
   'UserCombobox.vue': 'Unused component - intended for future admin features',
-  'CommandBar.vue': 'Requires full app context to collect and render commands',
 }
 
 /**