From 06285548036f7a8b2cf446a1711b3f3e6b596509 Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Sun, 14 Jun 2026 23:07:26 +0530
Subject: [PATCH] feat: add keyboard shortcut hints to command palette

---
 app/components/CommandPalette.client.vue    | 37 ++++++++++++++++++++-
 i18n/locales/en.json                        |  5 +++
 i18n/schema.json                            | 15 +++++++++
 test/nuxt/components/CommandPalette.spec.ts | 11 ++++++
 4 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/app/components/CommandPalette.client.vue b/app/components/CommandPalette.client.vue
index 311b31ac54..d66c68db08 100644
--- a/app/components/CommandPalette.client.vue
+++ b/app/components/CommandPalette.client.vue
@@ -303,7 +303,7 @@ useEventListener(document, 'keydown', handleGlobalKeydown)
           {{ statusMessage }}
         </p>
 
-        <div class="border-b border-border/70 bg-bg-subtle/60 px-4 py-4 sm:px-5">
+        <div class="bg-bg-subtle/60 px-4 py-4 sm:px-5">
           <button
             v-if="viewMeta.canGoBack"
             type="button"
@@ -332,6 +332,41 @@ useEventListener(document, 'keydown', handleGlobalKeydown)
           />
         </div>
 
+        <div
+          class="flex flex-wrap items-center gap-x-4 gap-y-2 border-b border-border/70 bg-bg-subtle/60 px-4 py-3 text-xs text-fg-subtle sm:px-5"
+          data-command-palette-footer="true"
+        >
+          <span class="inline-flex items-center gap-1.5">
+            <kbd
+              class="inline-flex min-w-6 items-center justify-center rounded border border-border bg-bg px-1.5 py-0.5 font-mono text-[0.7rem] text-fg-muted"
+            >
+              ↑
+            </kbd>
+            <kbd
+              class="inline-flex min-w-6 items-center justify-center rounded border border-border bg-bg px-1.5 py-0.5 font-mono text-[0.7rem] text-fg-muted"
+            >
+              ↓
+            </kbd>
+            <span class="lowercase">{{ $t('command_palette.footer.navigate') }}</span>
+          </span>
+          <span class="inline-flex items-center gap-1.5">
+            <kbd
+              class="inline-flex min-w-6 items-center justify-center rounded border border-border bg-bg px-1.5 py-0.5 font-mono text-[0.7rem] text-fg-muted"
+            >
+              ↵
+            </kbd>
+            <span class="lowercase">{{ $t('command_palette.footer.select') }}</span>
+          </span>
+          <span class="inline-flex items-center gap-1.5">
+            <kbd
+              class="inline-flex min-w-6 items-center justify-center rounded border border-border bg-bg px-1.5 py-0.5 font-mono text-[0.7rem] text-fg-muted"
+            >
+              Esc
+            </kbd>
+            <span class="lowercase">{{ $t('command_palette.footer.close') }}</span>
+          </span>
+        </div>
+
         <div
           :id="RESULTS_ID"
           class="max-h-[60vh] overflow-y-auto bg-bg-muted/30 px-2 py-2 sm:px-3 sm:py-3"
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 01cb98d29c..897267241a 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -99,6 +99,11 @@
     "current": "current",
     "here": "you are here",
     "connected": "connected",
+    "footer": {
+      "navigate": "to navigate",
+      "select": "to select",
+      "close": "to close"
+    },
     "state": {
       "on": "on",
       "off": "off"
diff --git a/i18n/schema.json b/i18n/schema.json
index e6398e2e1f..0f145d203b 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -301,6 +301,21 @@
         "connected": {
           "type": "string"
         },
+        "footer": {
+          "type": "object",
+          "properties": {
+            "navigate": {
+              "type": "string"
+            },
+            "select": {
+              "type": "string"
+            },
+            "close": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
         "state": {
           "type": "object",
           "properties": {
diff --git a/test/nuxt/components/CommandPalette.spec.ts b/test/nuxt/components/CommandPalette.spec.ts
index 3570d63ab4..a43b90feed 100644
--- a/test/nuxt/components/CommandPalette.spec.ts
+++ b/test/nuxt/components/CommandPalette.spec.ts
@@ -98,6 +98,17 @@ describe('CommandPalette', () => {
     expect(input?.getAttribute('aria-controls')).toBe('command-palette-modal-results')
   })
 
+  it('shows keyboard shortcut hints in the palette footer', async () => {
+    await mountPalette()
+
+    const footer = document.querySelector('[data-command-palette-footer="true"]')
+
+    expect(footer).not.toBeNull()
+    expect(footer?.textContent).toContain('to navigate')
+    expect(footer?.textContent).toContain('to select')
+    expect(footer?.textContent).toContain('to close')
+  })
+
   it('updates the live region when the query changes', async () => {
     await mountPalette()