From aeb1c878b806be34d057b077926abadceff98aca Mon Sep 17 00:00:00 2001
From: Samuel Monroe <spat.monroe@gmail.com>
Date: Wed, 11 Mar 2026 14:28:10 +0100
Subject: [PATCH] Add Command Palette component with global shortcut and route
 integration

- Implemented `CommandPaletteComponent` with keyboard navigation, route filtering, and localization support.
- Integrated global `Cmd/Ctrl + K` shortcut for activation.
- Updated `LayoutContainer` to include the Command Palette.
- Extracted reusable route entry utilities and updated existing navigation logic for consistency.
- Added tests for route entry extraction, palette functionality, and shortcut behavior.
---
 .../CommandPaletteComponent.spec.ts           | 252 ++++++++++++++++
 .../CommandPaletteComponent.vue               | 274 ++++++++++++++++++
 .../CommandPaletteComponent/index.ts          |   1 +
 .../LayoutContainer/LayoutContainer.mdx       |   6 +-
 .../LayoutContainer/LayoutContainer.spec.ts   |  10 +
 .../LayoutContainer/LayoutContainer.vue       |   2 +
 .../MainComponent/MainComponent.vue           |  84 +-----
 .../LayoutContainer/routeEntries.spec.ts      | 178 ++++++++++++
 vue/src/containers/storybook/overview.mdx     |   1 +
 vue/src/demo/router.ts                        |   4 +
 vue/src/lib.ts                                |   1 +
 vue/src/locales/en/navigation.json            |   8 +-
 vue/src/router/index.ts                       |   1 +
 vue/src/router/routeEntries.ts                | 125 ++++++++
 vue/src/router/router.mdx                     |  23 +-
 vue/src/router/types.ts                       |   1 +
 16 files changed, 880 insertions(+), 91 deletions(-)
 create mode 100644 vue/src/components/CommandPaletteComponent/CommandPaletteComponent.spec.ts
 create mode 100644 vue/src/components/CommandPaletteComponent/CommandPaletteComponent.vue
 create mode 100644 vue/src/components/CommandPaletteComponent/index.ts
 create mode 100644 vue/src/containers/LayoutContainer/routeEntries.spec.ts
 create mode 100644 vue/src/router/routeEntries.ts

diff --git a/vue/src/components/CommandPaletteComponent/CommandPaletteComponent.spec.ts b/vue/src/components/CommandPaletteComponent/CommandPaletteComponent.spec.ts
new file mode 100644
index 00000000..ceaecda3
--- /dev/null
+++ b/vue/src/components/CommandPaletteComponent/CommandPaletteComponent.spec.ts
@@ -0,0 +1,252 @@
+/* eslint-disable vue/one-component-per-file */
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { createMemoryHistory, createRouter, type RouteRecordRaw } from 'vue-router'
+import { defineComponent } from 'vue'
+import CommandPaletteComponent from './CommandPaletteComponent.vue'
+import { createLibI18n } from '@/locales'
+
+const StubView = defineComponent({
+  template: '<div />',
+})
+
+const PrimeDialogStub = defineComponent({
+  name: 'PrimeDialogStub',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:visible'],
+  template: `
+    <section v-if="visible" data-test="dialog">
+      <header><slot name="header" /></header>
+      <div><slot /></div>
+    </section>
+  `,
+})
+
+const PrimeInputTextStub = defineComponent({
+  name: 'PrimeInputTextStub',
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['update:modelValue', 'keydown'],
+  template: `
+    <input
+      v-bind="$attrs"
+      :value="modelValue"
+      @input="$emit('update:modelValue', ($event.target && $event.target.value) || '')"
+      @keydown="$emit('keydown', $event)"
+    />
+  `,
+})
+
+const PrimeListboxStub = defineComponent({
+  name: 'PrimeListboxStub',
+  inheritAttrs: false,
+  props: {
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    modelValue: {
+      type: String,
+      default: null,
+    },
+    optionLabel: {
+      type: String,
+      default: 'label',
+    },
+    optionValue: {
+      type: String,
+      default: 'value',
+    },
+  },
+  emits: ['update:modelValue'],
+  template: `
+    <ul v-bind="$attrs">
+      <li
+        v-for="option in options"
+        :key="option[optionValue]"
+        :data-selected="String(option[optionValue] === modelValue)"
+      >
+        <button type="button" @click="$emit('update:modelValue', option[optionValue])">
+          <slot name="option" :option="option">
+            {{ option[optionLabel] }}
+          </slot>
+        </button>
+      </li>
+    </ul>
+  `,
+})
+
+function createTestRouter() {
+  const routes: RouteRecordRaw[] = [
+    {
+      path: '/',
+      redirect: '/home',
+    },
+    {
+      path: '/home',
+      name: 'home',
+      component: StubView,
+      meta: {
+        wefa: {
+          title: 'Home',
+          showInCommandPalette: true,
+        },
+      },
+    },
+    {
+      path: '/showcase',
+      name: 'showcase',
+      component: StubView,
+      meta: {
+        wefa: {
+          title: 'Showcase',
+          showInCommandPalette: true,
+        },
+      },
+    },
+    {
+      path: '/playground',
+      name: 'playground',
+      component: StubView,
+      meta: {
+        wefa: {
+          title: 'Playground',
+          showInCommandPalette: true,
+          section: 'Examples',
+        },
+      },
+    },
+    {
+      path: '/users/:id',
+      name: 'userDetails',
+      component: StubView,
+      meta: {
+        wefa: {
+          title: 'User Details',
+          showInCommandPalette: true,
+        },
+      },
+    },
+    {
+      path: '/hidden',
+      name: 'hidden',
+      component: StubView,
+      meta: {
+        wefa: {
+          title: 'Hidden',
+        },
+      },
+    },
+  ]
+
+  return createRouter({
+    history: createMemoryHistory(),
+    routes,
+  })
+}
+
+describe('CommandPaletteComponent', () => {
+  let router: ReturnType<typeof createTestRouter>
+
+  beforeEach(async () => {
+    router = createTestRouter()
+    await router.push('/home')
+    await router.isReady()
+  })
+
+  function mountComponent() {
+    return mount(CommandPaletteComponent, {
+      global: {
+        plugins: [router, createLibI18n({})],
+        stubs: {
+          Dialog: PrimeDialogStub,
+          InputText: PrimeInputTextStub,
+          Listbox: PrimeListboxStub,
+        },
+      },
+    })
+  }
+
+  it('opens with Cmd+K and Ctrl+K', async () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.find('[data-test="command-palette-search"]').exists()).toBe(false)
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }))
+    await flushPromises()
+
+    expect(wrapper.find('[data-test="command-palette-search"]').exists()).toBe(true)
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }))
+    await flushPromises()
+
+    expect(wrapper.find('[data-test="command-palette-search"]').exists()).toBe(false)
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', ctrlKey: true }))
+    await flushPromises()
+
+    expect(wrapper.find('[data-test="command-palette-search"]').exists()).toBe(true)
+  })
+
+  it('filters actions by search query', async () => {
+    const wrapper = mountComponent()
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', ctrlKey: true }))
+    await flushPromises()
+
+    await wrapper.get('[data-test="command-palette-search"]').setValue('play')
+
+    expect(wrapper.text()).toContain('Playground')
+    expect(wrapper.text()).not.toContain('Home')
+  })
+
+  it('navigates with arrow keys and executes selected action with Enter', async () => {
+    const wrapper = mountComponent()
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', ctrlKey: true }))
+    await flushPromises()
+
+    const searchInput = wrapper.get('[data-test="command-palette-search"]')
+    await searchInput.trigger('keydown', { key: 'ArrowDown' })
+    await searchInput.trigger('keydown', { key: 'Enter' })
+    await flushPromises()
+
+    expect(router.currentRoute.value.path).toBe('/showcase')
+    expect(wrapper.find('[data-test="command-palette-search"]').exists()).toBe(false)
+  })
+
+  it('closes on Escape', async () => {
+    const wrapper = mountComponent()
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', ctrlKey: true }))
+    await flushPromises()
+
+    await wrapper.get('[data-test="command-palette-search"]').trigger('keydown', { key: 'Escape' })
+    await flushPromises()
+
+    expect(wrapper.find('[data-test="command-palette-search"]').exists()).toBe(false)
+  })
+
+  it('only shows routes marked for command palette and skips dynamic routes', async () => {
+    const wrapper = mountComponent()
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', ctrlKey: true }))
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Home')
+    expect(wrapper.text()).toContain('Showcase')
+    expect(wrapper.text()).toContain('Playground')
+    expect(wrapper.text()).not.toContain('Hidden')
+    expect(wrapper.text()).not.toContain('User Details')
+  })
+})
diff --git a/vue/src/components/CommandPaletteComponent/CommandPaletteComponent.vue b/vue/src/components/CommandPaletteComponent/CommandPaletteComponent.vue
new file mode 100644
index 00000000..0a8a3e58
--- /dev/null
+++ b/vue/src/components/CommandPaletteComponent/CommandPaletteComponent.vue
@@ -0,0 +1,274 @@
+<template>
+  <Dialog
+    v-model:visible="isPaletteVisible"
+    modal
+    :dismissable-mask="true"
+    :draggable="false"
+    :closable="false"
+    :style="{ width: 'min(42rem, 92vw)' }"
+    :pt="{
+      content: { class: 'pt-0' },
+      root: { 'data-test': 'command-palette-dialog' },
+    }"
+  >
+    <template #header>
+      <div class="flex items-center justify-between gap-3 w-full">
+        <span class="text-base font-semibold text-zinc-950">
+          {{ t('navigation.command_palette_title') }}
+        </span>
+        <span class="text-xs text-zinc-500">{{ t('navigation.command_palette_shortcut') }}</span>
+      </div>
+    </template>
+
+    <div class="flex flex-col gap-3">
+      <InputText
+        id="wefa-command-palette-input"
+        v-model="query"
+        autocomplete="off"
+        class="w-full"
+        :placeholder="t('navigation.command_palette_search_placeholder')"
+        :aria-label="t('navigation.command_palette_search_aria_label')"
+        data-test="command-palette-search"
+        @keydown="onSearchKeydown"
+      />
+
+      <Listbox
+        v-if="filteredEntries.length > 0"
+        v-model="selectedPath"
+        :options="filteredEntries"
+        option-label="label"
+        option-value="path"
+        data-key="path"
+        list-style="max-height: 20rem"
+        :aria-label="t('navigation.command_palette_results_aria_label')"
+        data-test="command-palette-results"
+        @update:model-value="onListboxSelection"
+      >
+        <template #option="{ option }">
+          <div class="flex items-center justify-between gap-3 py-1 w-full">
+            <div class="flex min-w-0 items-center gap-2">
+              <i v-if="option.icon" class="pi text-zinc-500" :class="option.icon"></i>
+              <div class="flex min-w-0 flex-col">
+                <span class="truncate text-sm text-zinc-900">{{ option.label }}</span>
+                <span class="truncate text-xs text-zinc-500">{{ option.path }}</span>
+              </div>
+            </div>
+            <span v-if="option.section" class="text-xs text-zinc-500">
+              {{ option.section }}
+            </span>
+          </div>
+        </template>
+      </Listbox>
+
+      <div
+        v-else
+        class="rounded-md border border-dashed border-zinc-200 px-3 py-5 text-center text-sm text-zinc-500"
+        data-test="command-palette-empty"
+      >
+        {{ t('navigation.command_palette_no_results') }}
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { type RouteRecordRaw, useRouter } from 'vue-router'
+import Dialog from 'primevue/dialog'
+import InputText from 'primevue/inputtext'
+import Listbox from 'primevue/listbox'
+import { routeCommandPaletteEntries, type WeFaRouteEntry } from '@/router'
+import { useI18nLib } from '@/locales'
+
+const router = useRouter()
+const { t } = useI18nLib()
+
+const isPaletteVisible = ref(false)
+const query = ref('')
+const selectedPath = ref<string | null>(null)
+const selectedIndex = ref(0)
+
+const routeActions = computed<WeFaRouteEntry[]>(() => {
+  return routeCommandPaletteEntries(router.options.routes as RouteRecordRaw[])
+})
+
+const filteredEntries = computed<WeFaRouteEntry[]>(() => {
+  const normalizedQuery = query.value.trim().toLowerCase()
+
+  if (!normalizedQuery) {
+    return routeActions.value
+  }
+
+  return routeActions.value.filter((entry) => {
+    return `${entry.label} ${entry.path} ${entry.section ?? ''}`
+      .toLowerCase()
+      .includes(normalizedQuery)
+  })
+})
+
+watch(
+  filteredEntries,
+  (entries) => {
+    if (entries.length === 0) {
+      selectedIndex.value = -1
+      selectedPath.value = null
+      return
+    }
+
+    if (selectedIndex.value < 0 || selectedIndex.value >= entries.length) {
+      selectedIndex.value = 0
+    }
+
+    selectedPath.value = entries[selectedIndex.value]?.path ?? null
+  },
+  { immediate: true }
+)
+
+/**
+ * Focuses the search input when the palette is opened.
+ */
+function focusSearchInput() {
+  const input = document.getElementById('wefa-command-palette-input') as HTMLInputElement | null
+  input?.focus()
+}
+
+/**
+ * Opens the command palette and resets query/selection state.
+ */
+function openPalette() {
+  isPaletteVisible.value = true
+  query.value = ''
+  selectedIndex.value = 0
+  selectedPath.value = filteredEntries.value[0]?.path ?? null
+  nextTick(() => focusSearchInput())
+}
+
+/**
+ * Closes the command palette.
+ */
+function closePalette() {
+  isPaletteVisible.value = false
+}
+
+/**
+ * Toggles visibility of the command palette.
+ */
+function togglePalette() {
+  if (isPaletteVisible.value) {
+    closePalette()
+    return
+  }
+
+  openPalette()
+}
+
+/**
+ * Moves the active selection in the command list.
+ * @param delta +1 to move down, -1 to move up
+ */
+function moveSelection(delta: number) {
+  const entries = filteredEntries.value
+  if (entries.length === 0) {
+    return
+  }
+
+  const nextIndex = (selectedIndex.value + delta + entries.length) % entries.length
+  selectedIndex.value = nextIndex
+  selectedPath.value = entries[nextIndex]?.path ?? null
+}
+
+/**
+ * Navigates to the provided path and closes the command palette.
+ * @param path Router path to navigate to
+ */
+function executePath(path: string | null) {
+  if (!path) {
+    return
+  }
+
+  closePalette()
+  router.push(path).catch(() => {
+    // Ignore failed navigations (e.g. duplicate navigation to current route).
+  })
+}
+
+/**
+ * Executes the currently selected command entry.
+ */
+function executeSelectedEntry() {
+  const entry = filteredEntries.value[selectedIndex.value]
+  executePath(entry?.path ?? null)
+}
+
+/**
+ * Handles mouse/listbox selection updates.
+ * @param path Selected route path
+ */
+function onListboxSelection(path: string | null) {
+  if (!path) {
+    return
+  }
+
+  const index = filteredEntries.value.findIndex((entry) => entry.path === path)
+  if (index >= 0) {
+    selectedIndex.value = index
+  }
+  selectedPath.value = path
+  executePath(path)
+}
+
+/**
+ * Handles keyboard navigation while search input is focused.
+ * @param event KeyboardEvent emitted from the search field
+ */
+function onSearchKeydown(event: KeyboardEvent) {
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    moveSelection(1)
+    return
+  }
+
+  if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    moveSelection(-1)
+    return
+  }
+
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    executeSelectedEntry()
+    return
+  }
+
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    closePalette()
+  }
+}
+
+/**
+ * Handles global keyboard shortcuts to open/close the command palette.
+ * @param event KeyboardEvent emitted on window
+ */
+function onWindowKeydown(event: KeyboardEvent) {
+  const key = event.key.toLowerCase()
+  if ((event.metaKey || event.ctrlKey) && key === 'k') {
+    event.preventDefault()
+    togglePalette()
+    return
+  }
+
+  if (isPaletteVisible.value && event.key === 'Escape') {
+    event.preventDefault()
+    closePalette()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', onWindowKeydown)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onWindowKeydown)
+})
+</script>
diff --git a/vue/src/components/CommandPaletteComponent/index.ts b/vue/src/components/CommandPaletteComponent/index.ts
new file mode 100644
index 00000000..49289d30
--- /dev/null
+++ b/vue/src/components/CommandPaletteComponent/index.ts
@@ -0,0 +1 @@
+export { default as CommandPaletteComponent } from './CommandPaletteComponent.vue'
diff --git a/vue/src/containers/LayoutContainer/LayoutContainer.mdx b/vue/src/containers/LayoutContainer/LayoutContainer.mdx
index e7e787b9..9dd32105 100644
--- a/vue/src/containers/LayoutContainer/LayoutContainer.mdx
+++ b/vue/src/containers/LayoutContainer/LayoutContainer.mdx
@@ -12,6 +12,7 @@ import * as LayoutContainerStories from './LayoutContainer.stories'
 - desktop side navigation
 - mobile drawer navigation
 - route-aware breadcrumb
+- global command palette (`Cmd/Ctrl + K`)
 - child route content through `<router-view />`
 
 The stories below focus on router metadata setup, because navigation links are generated directly from the router tree.
@@ -20,7 +21,7 @@ The stories below focus on router metadata setup, because navigation links are g
 
 ### Wefa Route Metadata
 
-Uses `meta.wefa.showInNavigation` and `meta.wefa.section`.
+Uses `meta.wefa.showInNavigation`, `meta.wefa.section`, and `meta.wefa.showInCommandPalette`.
 
 <Canvas of={LayoutContainerStories.WefaNavigationMeta} />
 <Canvas of={LayoutContainerStories.WefaSectionedMeta} />
@@ -34,6 +35,7 @@ Uses `meta.wefa.showInNavigation` and `meta.wefa.section`.
       title: 'Dashboard',
       icon: 'pi pi-chart-line',
       showInNavigation: true,
+      showInCommandPalette: true,
       section: 'Insights',
     },
   },
@@ -109,6 +111,7 @@ const routes = [
         title: 'Home',
         icon: 'pi pi-home',
         showInNavigation: true,
+        showInCommandPalette: true,
       },
     },
   },
@@ -121,6 +124,7 @@ const routes = [
         title: 'Showcase',
         icon: 'pi pi-bars',
         showInNavigation: true,
+        showInCommandPalette: true,
       },
     },
   },
diff --git a/vue/src/containers/LayoutContainer/LayoutContainer.spec.ts b/vue/src/containers/LayoutContainer/LayoutContainer.spec.ts
index 016db972..f4595c83 100644
--- a/vue/src/containers/LayoutContainer/LayoutContainer.spec.ts
+++ b/vue/src/containers/LayoutContainer/LayoutContainer.spec.ts
@@ -59,6 +59,11 @@ const ConfirmDialogStub = defineComponent({
   template: '<div data-test="confirm-dialog"></div>',
 })
 
+const CommandPaletteStub = defineComponent({
+  name: 'CommandPaletteComponent',
+  template: '<div data-test="command-palette"></div>',
+})
+
 describe('LayoutContainer', () => {
   it('passes project title to side and mobile navigation components', () => {
     const wrapper = mount(LayoutContainer, {
@@ -73,6 +78,7 @@ describe('LayoutContainer', () => {
           RouterView: RouterViewStub,
           Toast: ToastStub,
           ConfirmDialog: ConfirmDialogStub,
+          CommandPaletteComponent: CommandPaletteStub,
         },
       },
     })
@@ -94,6 +100,7 @@ describe('LayoutContainer', () => {
           RouterView: RouterViewStub,
           Toast: ToastStub,
           ConfirmDialog: ConfirmDialogStub,
+          CommandPaletteComponent: CommandPaletteStub,
         },
       },
     })
@@ -114,11 +121,13 @@ describe('LayoutContainer', () => {
           RouterView: RouterViewStub,
           Toast: ToastStub,
           ConfirmDialog: ConfirmDialogStub,
+          CommandPaletteComponent: CommandPaletteStub,
         },
       },
     })
 
     expect(wrapper.find('[data-test="router-view"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="command-palette"]').exists()).toBe(true)
     expect(wrapper.find('[data-test="toast"]').exists()).toBe(true)
     expect(wrapper.find('[data-test="confirm-dialog"]').exists()).toBe(true)
   })
@@ -137,6 +146,7 @@ describe('LayoutContainer', () => {
           RouterView: RouterViewStub,
           Toast: ToastStub,
           ConfirmDialog: ConfirmDialogStub,
+          CommandPaletteComponent: CommandPaletteStub,
         },
       },
     })
diff --git a/vue/src/containers/LayoutContainer/LayoutContainer.vue b/vue/src/containers/LayoutContainer/LayoutContainer.vue
index a0b414c0..a3fd9f39 100644
--- a/vue/src/containers/LayoutContainer/LayoutContainer.vue
+++ b/vue/src/containers/LayoutContainer/LayoutContainer.vue
@@ -23,6 +23,7 @@
     </main>
 
     <!-- PrimeVue Dynamic Components Receptors -->
+    <CommandPaletteComponent />
     <Toast ref="toast" />
     <ConfirmDialog />
   </section>
@@ -32,6 +33,7 @@
 import SideNavigationComponent from '@/containers/LayoutContainer/SideNavigationComponent/SideNavigationComponent.vue'
 import { AutoroutedBreadcrumb } from '@/components/AutoroutedBreadcrumb'
 import MobileNavigationComponent from '@/containers/LayoutContainer/MobileNavigationComponent/MobileNavigationComponent.vue'
+import { CommandPaletteComponent } from '@/components/CommandPaletteComponent'
 import { setupDepthTracker } from '../helpers'
 import Toast from 'primevue/toast'
 import ConfirmDialog from 'primevue/confirmdialog'
diff --git a/vue/src/containers/LayoutContainer/SideNavigationComponent/MainComponent/MainComponent.vue b/vue/src/containers/LayoutContainer/SideNavigationComponent/MainComponent/MainComponent.vue
index 21d07bc9..29fd1a1e 100644
--- a/vue/src/containers/LayoutContainer/SideNavigationComponent/MainComponent/MainComponent.vue
+++ b/vue/src/containers/LayoutContainer/SideNavigationComponent/MainComponent/MainComponent.vue
@@ -30,15 +30,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { type RouteRecordRaw, useRouter } from 'vue-router'
-import type { WeFaRouteMeta } from '@/router'
+import { routeNavigationEntries, type WeFaRouteEntry } from '@/router'
 import NavigationLinkComponent from '@/containers/LayoutContainer/SideNavigationComponent/MainComponent/NavigationLinkComponent.vue'
 
-interface NavigationEntry {
-  path: string
-  label: string
-  icon?: string
-  section?: string
-}
+type NavigationEntry = WeFaRouteEntry
 
 interface SectionNavigationEntries {
   label: string
@@ -50,81 +45,6 @@ const emit = defineEmits<{
   (event: 'navigation-item-click'): void
 }>()
 
-/**
- * Normalizes route paths to avoid duplicate slashes and trailing slash noise.
- * @param path Raw route path
- * @returns Normalized absolute path
- */
-function normalizePath(path: string): string {
-  if (!path) {
-    return '/'
-  }
-
-  const normalizedPath = path.replace(/\/{2,}/g, '/')
-  if (normalizedPath === '/') {
-    return normalizedPath
-  }
-
-  return normalizedPath.replace(/\/$/, '')
-}
-
-/**
- * Resolves a route path against its parent route path.
- * @param parentPath Parent route path
- * @param routePath Child route path
- * @returns Resolved absolute path
- */
-function resolvePath(parentPath: string, routePath: string): string {
-  if (routePath.startsWith('/')) {
-    return normalizePath(routePath)
-  }
-
-  if (!routePath) {
-    return normalizePath(parentPath)
-  }
-
-  if (parentPath === '/') {
-    return normalizePath(`/${routePath}`)
-  }
-
-  return normalizePath(`${parentPath}/${routePath}`)
-}
-
-/**
- * Extracts navigation entries from the router tree based on showInNavigation metadata.
- * @param routes Router records to inspect
- * @param parentPath Parent path used to resolve relative child paths
- * @returns Flattened navigation entries in declaration order
- */
-function routeNavigationEntries(
-  routes: RouteRecordRaw[],
-  parentPath: string = '/'
-): NavigationEntry[] {
-  const entries: NavigationEntry[] = []
-
-  for (const route of routes) {
-    const fullPath = resolvePath(parentPath, route.path)
-    const routeMeta = route.meta?.wefa as WeFaRouteMeta | undefined
-    const showInNavigation = routeMeta?.showInNavigation ?? false
-    const section = routeMeta?.section
-
-    if (showInNavigation === true) {
-      entries.push({
-        path: fullPath,
-        label: routeMeta?.title ?? String(route.name ?? fullPath),
-        icon: routeMeta?.icon,
-        section: section?.trim() || undefined,
-      })
-    }
-
-    if (route.children?.length) {
-      entries.push(...routeNavigationEntries(route.children, fullPath))
-    }
-  }
-
-  return entries
-}
-
 const navigationEntries = computed(() => {
   return routeNavigationEntries(router.options.routes as RouteRecordRaw[])
 })
diff --git a/vue/src/containers/LayoutContainer/routeEntries.spec.ts b/vue/src/containers/LayoutContainer/routeEntries.spec.ts
new file mode 100644
index 00000000..319ae574
--- /dev/null
+++ b/vue/src/containers/LayoutContainer/routeEntries.spec.ts
@@ -0,0 +1,178 @@
+import { describe, it, expect } from 'vitest'
+import { defineComponent } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
+import { routeCommandPaletteEntries, routeNavigationEntries } from '@/router/routeEntries'
+
+const StubView = defineComponent({
+  template: '<div />',
+})
+
+describe('routeEntries', () => {
+  it('extracts navigation entries with normalized nested paths', () => {
+    const routes: RouteRecordRaw[] = [
+      {
+        path: '/reports/',
+        name: 'reports',
+        component: StubView,
+        meta: {
+          wefa: {
+            title: 'Reports',
+            icon: 'pi pi-chart-line',
+            showInNavigation: true,
+          },
+        },
+      },
+      {
+        path: '/settings',
+        name: 'settings',
+        component: StubView,
+        meta: {
+          wefa: {
+            title: 'Settings',
+            showInNavigation: true,
+            section: ' Admin ',
+          },
+        },
+        children: [
+          {
+            path: 'users/',
+            name: 'users',
+            component: StubView,
+            meta: {
+              wefa: {
+                title: 'Users',
+                showInNavigation: true,
+                section: 'Admin',
+              },
+            },
+          },
+        ],
+      },
+      {
+        path: '/hidden',
+        name: 'hidden',
+        component: StubView,
+        meta: {
+          wefa: {
+            title: 'Hidden',
+          },
+        },
+      },
+    ]
+
+    expect(routeNavigationEntries(routes)).toEqual([
+      {
+        path: '/reports',
+        label: 'Reports',
+        icon: 'pi pi-chart-line',
+        section: undefined,
+      },
+      {
+        path: '/settings',
+        label: 'Settings',
+        icon: undefined,
+        section: 'Admin',
+      },
+      {
+        path: '/settings/users',
+        label: 'Users',
+        icon: undefined,
+        section: 'Admin',
+      },
+    ])
+  })
+
+  it('extracts command palette entries and skips dynamic/wildcard routes', () => {
+    const routes: RouteRecordRaw[] = [
+      {
+        path: '/home',
+        name: 'home',
+        component: StubView,
+        meta: {
+          wefa: {
+            title: 'Home',
+            showInCommandPalette: true,
+          },
+        },
+      },
+      {
+        path: '/users/:id',
+        name: 'userDetails',
+        component: StubView,
+        meta: {
+          wefa: {
+            title: 'User Details',
+            showInCommandPalette: true,
+          },
+        },
+      },
+      {
+        path: '/products',
+        name: 'products',
+        component: StubView,
+        meta: {
+          wefa: {
+            title: 'Products',
+            showInCommandPalette: true,
+          },
+        },
+        children: [
+          {
+            path: ':productId',
+            name: 'productDetails',
+            component: StubView,
+            meta: {
+              wefa: {
+                title: 'Product Details',
+                showInCommandPalette: true,
+              },
+            },
+          },
+          {
+            path: 'overview',
+            name: 'productOverview',
+            component: StubView,
+            meta: {
+              wefa: {
+                title: 'Overview',
+                showInCommandPalette: true,
+              },
+            },
+          },
+        ],
+      },
+      {
+        path: '/:pathMatch(.*)*',
+        name: 'notFound',
+        component: StubView,
+        meta: {
+          wefa: {
+            title: 'Not Found',
+            showInCommandPalette: true,
+          },
+        },
+      },
+    ]
+
+    expect(routeCommandPaletteEntries(routes)).toEqual([
+      {
+        path: '/home',
+        label: 'Home',
+        icon: undefined,
+        section: undefined,
+      },
+      {
+        path: '/products',
+        label: 'Products',
+        icon: undefined,
+        section: undefined,
+      },
+      {
+        path: '/products/overview',
+        label: 'Overview',
+        icon: undefined,
+        section: undefined,
+      },
+    ])
+  })
+})
diff --git a/vue/src/containers/storybook/overview.mdx b/vue/src/containers/storybook/overview.mdx
index cd48591a..70f7accc 100644
--- a/vue/src/containers/storybook/overview.mdx
+++ b/vue/src/containers/storybook/overview.mdx
@@ -116,3 +116,4 @@ Navigation elements (e.g in the NavbarContainer or SideMenuContainer) rely on me
 - title
 - icon
 - showInNavigation
+- showInCommandPalette
diff --git a/vue/src/demo/router.ts b/vue/src/demo/router.ts
index 98f9c7a2..bee1872f 100644
--- a/vue/src/demo/router.ts
+++ b/vue/src/demo/router.ts
@@ -18,6 +18,7 @@ const routes: RouteRecordRaw[] = [
         title: 'Home',
         icon: 'pi pi-home',
         showInNavigation: true,
+        showInCommandPalette: true,
       },
     },
   },
@@ -30,6 +31,7 @@ const routes: RouteRecordRaw[] = [
         title: 'Showcase',
         icon: 'pi pi-bars',
         showInNavigation: true,
+        showInCommandPalette: true,
       },
     },
   },
@@ -41,6 +43,7 @@ const routes: RouteRecordRaw[] = [
       wefa: {
         title: 'Playground',
         showInNavigation: true,
+        showInCommandPalette: true,
         section: 'Others',
       },
     },
@@ -53,6 +56,7 @@ const routes: RouteRecordRaw[] = [
       wefa: {
         title: 'Demo',
         showInNavigation: true,
+        showInCommandPalette: true,
         section: 'Others',
       },
     },
diff --git a/vue/src/lib.ts b/vue/src/lib.ts
index b13482ea..64bcd2c1 100644
--- a/vue/src/lib.ts
+++ b/vue/src/lib.ts
@@ -8,6 +8,7 @@ export { PrimeVue as PrimeVueLibConfig }
 
 // Export your library components, functions and props in this file
 export * from '@/components/AutoroutedBreadcrumb'
+export * from '@/components/CommandPaletteComponent'
 export * from '@/components/ControlBarComponent'
 export * from '@/components/GanttChartComponent'
 export * from '@/components/DashboardComponent'
diff --git a/vue/src/locales/en/navigation.json b/vue/src/locales/en/navigation.json
index 541f89fd..ae45a913 100644
--- a/vue/src/locales/en/navigation.json
+++ b/vue/src/locales/en/navigation.json
@@ -7,5 +7,11 @@
   "profile": "Profile",
   "settings": "Settings",
   "open_navigation_menu": "Open navigation menu",
-  "open_user_menu_for": "Open user menu for {username}"
+  "open_user_menu_for": "Open user menu for {username}",
+  "command_palette_title": "Command Palette",
+  "command_palette_shortcut": "Cmd/Ctrl + K",
+  "command_palette_search_placeholder": "Search for a route or action",
+  "command_palette_search_aria_label": "Search command palette actions",
+  "command_palette_results_aria_label": "Command palette results",
+  "command_palette_no_results": "No matching actions"
 }
diff --git a/vue/src/router/index.ts b/vue/src/router/index.ts
index 386df09f..45d0dfdf 100644
--- a/vue/src/router/index.ts
+++ b/vue/src/router/index.ts
@@ -1,3 +1,4 @@
 export * from './types'
 export { libRouteRecords } from './libRoutes'
 export * from './guards'
+export * from './routeEntries'
diff --git a/vue/src/router/routeEntries.ts b/vue/src/router/routeEntries.ts
new file mode 100644
index 00000000..d0d3bcff
--- /dev/null
+++ b/vue/src/router/routeEntries.ts
@@ -0,0 +1,125 @@
+import type { RouteRecordRaw } from 'vue-router'
+import type { WeFaRouteMeta } from './types'
+
+export interface WeFaRouteEntry {
+  path: string
+  label: string
+  icon?: string
+  section?: string
+}
+
+interface WeFaRouteEntryOptions {
+  include: (meta: WeFaRouteMeta | undefined) => boolean
+  excludeParameterizedRoutes?: boolean
+}
+
+/**
+ * Normalizes route paths to avoid duplicate slashes and trailing slash noise.
+ * @param path Raw route path
+ * @returns Normalized absolute path
+ */
+function normalizePath(path: string): string {
+  if (!path) {
+    return '/'
+  }
+
+  const normalizedPath = path.replace(/\/{2,}/g, '/')
+  if (normalizedPath === '/') {
+    return normalizedPath
+  }
+
+  return normalizedPath.replace(/\/$/, '')
+}
+
+/**
+ * Resolves a route path against its parent route path.
+ * @param parentPath Parent route path
+ * @param routePath Child route path
+ * @returns Resolved absolute path
+ */
+function resolvePath(parentPath: string, routePath: string): string {
+  if (routePath.startsWith('/')) {
+    return normalizePath(routePath)
+  }
+
+  if (!routePath) {
+    return normalizePath(parentPath)
+  }
+
+  if (parentPath === '/') {
+    return normalizePath(`/${routePath}`)
+  }
+
+  return normalizePath(`${parentPath}/${routePath}`)
+}
+
+/**
+ * Checks whether a route path contains route params or wildcard segments.
+ * @param path Absolute route path
+ * @returns True when route path is not directly actionable
+ */
+function isParameterizedPath(path: string): boolean {
+  return path.includes(':') || path.includes('*')
+}
+
+/**
+ * Recursively traverses route records and collects entries matching the configured filter.
+ * @param routes Route list to inspect
+ * @param options Collection options
+ * @param parentPath Parent route path used to resolve children
+ * @returns Flattened entries in declaration order
+ */
+function collectRouteEntries(
+  routes: RouteRecordRaw[],
+  options: WeFaRouteEntryOptions,
+  parentPath: string = '/'
+): WeFaRouteEntry[] {
+  const entries: WeFaRouteEntry[] = []
+
+  for (const route of routes) {
+    const fullPath = resolvePath(parentPath, route.path)
+    const routeMeta = route.meta?.wefa as WeFaRouteMeta | undefined
+
+    if (
+      options.include(routeMeta) &&
+      (!options.excludeParameterizedRoutes || !isParameterizedPath(fullPath))
+    ) {
+      entries.push({
+        path: fullPath,
+        label: routeMeta?.title ?? String(route.name ?? fullPath),
+        icon: routeMeta?.icon,
+        section: routeMeta?.section?.trim() || undefined,
+      })
+    }
+
+    if (route.children?.length) {
+      entries.push(...collectRouteEntries(route.children, options, fullPath))
+    }
+  }
+
+  return entries
+}
+
+/**
+ * Extracts navigation entries from the router tree based on showInNavigation metadata.
+ * @param routes Router records to inspect
+ * @returns Flattened navigation entries in declaration order
+ */
+export function routeNavigationEntries(routes: RouteRecordRaw[]): WeFaRouteEntry[] {
+  return collectRouteEntries(routes, {
+    include: (meta) => meta?.showInNavigation === true,
+  })
+}
+
+/**
+ * Extracts command palette entries from the router tree based on showInCommandPalette metadata.
+ * Dynamic and wildcard routes are skipped because they are not directly actionable.
+ * @param routes Router records to inspect
+ * @returns Flattened command entries in declaration order
+ */
+export function routeCommandPaletteEntries(routes: RouteRecordRaw[]): WeFaRouteEntry[] {
+  return collectRouteEntries(routes, {
+    include: (meta) => meta?.showInCommandPalette === true,
+    excludeParameterizedRoutes: true,
+  })
+}
diff --git a/vue/src/router/router.mdx b/vue/src/router/router.mdx
index 7b9c3cd6..8193ec40 100644
--- a/vue/src/router/router.mdx
+++ b/vue/src/router/router.mdx
@@ -49,6 +49,7 @@ const appRoutes: RouteRecordRaw[] = [
         title: 'Home',
         icon: 'pi pi-home',
         showInNavigation: true,
+        showInCommandPalette: true,
       } satisfies WefaRouteMeta,
     },
     component: () => import('@/views/MyHomeView.vue'),
@@ -105,13 +106,14 @@ Once you've created a Vue Single File Component (SFC), add it to your router to
   path: '/',
   name: 'home',
   meta: {
-    wefa: {
-      title: 'Home',
-      icon: 'pi pi-home',
-      requiresAuth: true,
-      requiresUnauth: false,
-      showInNavigation: true,
-    },
+      wefa: {
+        title: 'Home',
+        icon: 'pi pi-home',
+        requiresAuth: true,
+        requiresUnauth: false,
+        showInNavigation: true,
+        showInCommandPalette: true,
+      },
   },
   component: () => import('@/views/MyHomeView.vue'),
   children: [
@@ -186,6 +188,13 @@ The following `WefaRouteMeta` fields are used by WeFa:
       <td>Optional</td>
       <td>Indicates whether the route should be shown in navigation containers.</td>
     </tr>
+    <tr>
+      <td class='font-mono'>wefa.showInCommandPalette</td>
+      <td>Optional</td>
+      <td>
+        Indicates whether the route should be shown as an actionable entry in the Command Palette.
+      </td>
+    </tr>
     <tr>
       <td class='font-mono'>wefa.section</td>
       <td>Optional</td>
diff --git a/vue/src/router/types.ts b/vue/src/router/types.ts
index 2215e5f7..0e81bbd7 100644
--- a/vue/src/router/types.ts
+++ b/vue/src/router/types.ts
@@ -7,6 +7,7 @@ export interface WeFaRouteMeta {
   requiresAuth?: boolean
   requiresUnauth?: boolean
   showInNavigation?: boolean
+  showInCommandPalette?: boolean
   section?: string
 }