From 85b6d52d6ea45100ff3b62842be504804e8753a6 Mon Sep 17 00:00:00 2001
From: Alex <49969959+alexzhang1030@users.noreply.github.com>
Date: Wed, 20 Dec 2023 21:47:01 +0800
Subject: [PATCH] feat: command palette (#93)

---
 .gitignore                                    |    3 +
 package.json                                  |    9 +-
 packages/client/data/vue-apis.json            | 1124 +++++++++++++++++
 packages/client/src/App.vue                   |    1 +
 .../client/src/components/CommandPalette.vue  |  161 +++
 .../client/src/composables/state-commands.ts  |   87 ++
 packages/client/src/composables/state-tab.ts  |   10 +-
 packages/client/src/pages/overview.vue        |   22 +
 packages/shared/src/general.ts                |    4 +
 pnpm-lock.yaml                                |   26 +
 scripts/vue-api-manifest.ts                   |   61 +
 11 files changed, 1505 insertions(+), 3 deletions(-)
 create mode 100644 packages/client/data/vue-apis.json
 create mode 100644 packages/client/src/components/CommandPalette.vue
 create mode 100644 packages/client/src/composables/state-commands.ts
 create mode 100644 scripts/vue-api-manifest.ts

diff --git a/.gitignore b/.gitignore
index 9632114f..e519a1a7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -94,3 +94,6 @@ packages/browser-extension/client/**/*
 packages/electron/client/**/*
 packages/vite/src/overlay/**/*
 docs/.vitepress/cache/
+
+# for scripts
+clones
diff --git a/package.json b/package.json
index ce41f647..268923f4 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "dev:ui-play": "nr -C packages/ui-playground dev",
     "prepare:type": "pnpm -r --filter='./packages/**' run prepare:type",
     "dev": "NODE_OPTIONS=\"--max-old-space-size=8192\" nr prepare:type && nr build:ui && pnpm -r --parallel --filter='./packages/**' run stub",
-    "build": "pnpm -r --filter='./packages/{schema,shared,core,ui,devtools-kit,vite}' run build && pnpm build:client && pnpm build:overlay && pnpm build:browser-extension & pnpm build:electron && pnpm build:devtools&& pnpm build:devtools-api",
+    "build": "pnpm -r --filter='./packages/{schema,shared,core,ui,devtools-kit,vite}' run build && pnpm build:client && pnpm build:overlay && pnpm build:browser-extension & pnpm build:electron && pnpm build:devtools && pnpm build:devtools-api",
     "build:browser-extension": "nr -C packages/browser-extension build",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
@@ -59,12 +59,14 @@
     "play": "nr -C packages/playground dev",
     "docs": "pnpm -C docs run docs:dev",
     "docs:build": "pnpm -C docs run docs:build",
-    "zip": "tsx ./scripts/extension-zip.ts"
+    "zip": "tsx ./scripts/extension-zip.ts",
+    "gen:vue-apis": "tsx ./scripts/vue-api-manifest.ts"
   },
   "devDependencies": {
     "@antfu/eslint-config": "2.4.2",
     "@antfu/ni": "^0.21.12",
     "@types/chrome": "^0.0.254",
+    "@types/degit": "^2.8.6",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^20.10.4",
     "@unocss/eslint-plugin": "^0.58.0",
@@ -73,15 +75,18 @@
     "archiver": "^6.0.1",
     "bumpp": "^9.2.1",
     "cross-env": "^7.0.3",
+    "degit": "^2.8.4",
     "eslint": "npm:eslint-ts-patch@8.55.0-1",
     "eslint-plugin-format": "^0.1.0",
     "eslint-ts-patch": "8.55.0-1",
+    "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
     "lint-staged": "^15.2.0",
     "npm-run-all": "^4.1.5",
     "pnpm": "^8.12.1",
     "progress": "^2.0.3",
     "readdir-glob": "^1.1.3",
+    "regex-extra": "^0.2.2",
     "simple-git-hooks": "^2.9.0",
     "taze": "^0.13.0",
     "tsup": "^8.0.1",
diff --git a/packages/client/data/vue-apis.json b/packages/client/data/vue-apis.json
new file mode 100644
index 00000000..407033db
--- /dev/null
+++ b/packages/client/data/vue-apis.json
@@ -0,0 +1,1124 @@
+[
+  {
+    "id": "doc:application:createApp()",
+    "title": "createApp()",
+    "description": "application",
+    "url": "https:/vuejs.org/api/application#createapp"
+  },
+  {
+    "id": "doc:application:createSSRApp()",
+    "title": "createSSRApp()",
+    "description": "application",
+    "url": "https:/vuejs.org/api/application#createssrapp"
+  },
+  {
+    "id": "doc:application:app.mount()",
+    "title": "app.mount()",
+    "description": "application",
+    "url": "https:/vuejs.org/api/application#app-mount"
+  },
+  {
+    "id": "doc:application:app.unmount()",
+    "title": "app.unmount()",
+    "description": "application",
+    "url": "https:/vuejs.org/api/application#app-unmount"
+  },
+  {
+    "id": "doc:application:app.component()",
+    "title": "app.component()",
+    "description": "application",
+    "url": "https:/vuejs.org/api/application#app-component"
+  },
+  {
+    "id": "doc:application:app.directive()",
+    "title": "app.directive()",
+    "description": "application",
+    "url": "https:/vuejs.org/api/application#app-directive"
+  },
+  {
+    "id": "doc:application:app.use()",
+    "title": "app.use()",
+    "description": "application",
+    "url": "https:/vuejs.org/api/application#app-use"
+  },
+  {
+    "id": "doc:application:app.mixin()",
+    "title": "app.mixin()",
+    "description": "application",
+    "url": "https:/vuejs.org/api/application#app-mixin"
+  },
+  {
+    "id": "doc:application:app.provide()",
+    "title": "app.provide()",
+    "description": "application",
+    "url": "https:/vuejs.org/api/application#app-provide"
+  },
+  {
+    "id": "doc:application:app.runWithContext()",
+    "title": "app.runWithContext()",
+    "description": "application",
+    "url": "https:/vuejs.org/api/application#app-runwithcontext"
+  },
+  {
+    "id": "doc:application:app.version",
+    "title": "app.version",
+    "description": "application",
+    "url": "https:/vuejs.org/api/application#app-version"
+  },
+  {
+    "id": "doc:application:app.config",
+    "title": "app.config",
+    "description": "application",
+    "url": "https:/vuejs.org/api/application#app-config"
+  },
+  {
+    "id": "doc:application:app.config.errorHandler",
+    "title": "app.config.errorHandler",
+    "description": "application",
+    "url": "https:/vuejs.org/api/application#app-config-errorhandler"
+  },
+  {
+    "id": "doc:application:app.config.warnHandler",
+    "title": "app.config.warnHandler",
+    "description": "application",
+    "url": "https:/vuejs.org/api/application#app-config-warnhandler"
+  },
+  {
+    "id": "doc:application:app.config.performance",
+    "title": "app.config.performance",
+    "description": "application",
+    "url": "https:/vuejs.org/api/application#app-config-performance"
+  },
+  {
+    "id": "doc:application:app.config.compilerOptions",
+    "title": "app.config.compilerOptions",
+    "description": "application",
+    "url": "https:/vuejs.org/api/application#app-config-compileroptions"
+  },
+  {
+    "id": "doc:application:app.config.globalProperties",
+    "title": "app.config.globalProperties",
+    "description": "application",
+    "url": "https:/vuejs.org/api/application#app-config-globalproperties"
+  },
+  {
+    "id": "doc:application:app.config.optionMergeStrategies",
+    "title": "app.config.optionMergeStrategies",
+    "description": "application",
+    "url": "https:/vuejs.org/api/application#app-config-optionmergestrategies"
+  },
+  {
+    "id": "doc:built-in-components:`<Transition>`",
+    "title": "`<Transition>`",
+    "description": "built-in-components",
+    "url": "https:/vuejs.org/api/built-in-components#transition"
+  },
+  {
+    "id": "doc:built-in-components:`<TransitionGroup>`",
+    "title": "`<TransitionGroup>`",
+    "description": "built-in-components",
+    "url": "https:/vuejs.org/api/built-in-components#transitiongroup"
+  },
+  {
+    "id": "doc:built-in-components:`<KeepAlive>`",
+    "title": "`<KeepAlive>`",
+    "description": "built-in-components",
+    "url": "https:/vuejs.org/api/built-in-components#keepalive"
+  },
+  {
+    "id": "doc:built-in-components:`<Teleport>`",
+    "title": "`<Teleport>`",
+    "description": "built-in-components",
+    "url": "https:/vuejs.org/api/built-in-components#teleport"
+  },
+  {
+    "id": "doc:built-in-components:`<Suspense>`",
+    "title": "`<Suspense>`",
+    "description": "built-in-components",
+    "url": "https:/vuejs.org/api/built-in-components#suspense"
+  },
+  {
+    "id": "doc:built-in-directives:v-text",
+    "title": "v-text",
+    "description": "built-in-directives",
+    "url": "https:/vuejs.org/api/built-in-directives#v-text"
+  },
+  {
+    "id": "doc:built-in-directives:v-html",
+    "title": "v-html",
+    "description": "built-in-directives",
+    "url": "https:/vuejs.org/api/built-in-directives#v-html"
+  },
+  {
+    "id": "doc:built-in-directives:v-show",
+    "title": "v-show",
+    "description": "built-in-directives",
+    "url": "https:/vuejs.org/api/built-in-directives#v-show"
+  },
+  {
+    "id": "doc:built-in-directives:v-if",
+    "title": "v-if",
+    "description": "built-in-directives",
+    "url": "https:/vuejs.org/api/built-in-directives#v-if"
+  },
+  {
+    "id": "doc:built-in-directives:v-else",
+    "title": "v-else",
+    "description": "built-in-directives",
+    "url": "https:/vuejs.org/api/built-in-directives#v-else"
+  },
+  {
+    "id": "doc:built-in-directives:v-else-if",
+    "title": "v-else-if",
+    "description": "built-in-directives",
+    "url": "https:/vuejs.org/api/built-in-directives#v-else-if"
+  },
+  {
+    "id": "doc:built-in-directives:v-for",
+    "title": "v-for",
+    "description": "built-in-directives",
+    "url": "https:/vuejs.org/api/built-in-directives#v-for"
+  },
+  {
+    "id": "doc:built-in-directives:v-on",
+    "title": "v-on",
+    "description": "built-in-directives",
+    "url": "https:/vuejs.org/api/built-in-directives#v-on"
+  },
+  {
+    "id": "doc:built-in-directives:v-bind",
+    "title": "v-bind",
+    "description": "built-in-directives",
+    "url": "https:/vuejs.org/api/built-in-directives#v-bind"
+  },
+  {
+    "id": "doc:built-in-directives:v-model",
+    "title": "v-model",
+    "description": "built-in-directives",
+    "url": "https:/vuejs.org/api/built-in-directives#v-model"
+  },
+  {
+    "id": "doc:built-in-directives:v-slot",
+    "title": "v-slot",
+    "description": "built-in-directives",
+    "url": "https:/vuejs.org/api/built-in-directives#v-slot"
+  },
+  {
+    "id": "doc:built-in-directives:v-pre",
+    "title": "v-pre",
+    "description": "built-in-directives",
+    "url": "https:/vuejs.org/api/built-in-directives#v-pre"
+  },
+  {
+    "id": "doc:built-in-directives:v-once",
+    "title": "v-once",
+    "description": "built-in-directives",
+    "url": "https:/vuejs.org/api/built-in-directives#v-once"
+  },
+  {
+    "id": "doc:built-in-directives:v-memo",
+    "title": "v-memo",
+    "description": "built-in-directives",
+    "url": "https:/vuejs.org/api/built-in-directives#v-memo"
+  },
+  {
+    "id": "doc:built-in-directives:v-cloak",
+    "title": "v-cloak",
+    "description": "built-in-directives",
+    "url": "https:/vuejs.org/api/built-in-directives#v-cloak"
+  },
+  {
+    "id": "doc:built-in-special-attributes:key",
+    "title": "key",
+    "description": "built-in-special-attributes",
+    "url": "https:/vuejs.org/api/built-in-special-attributes#key"
+  },
+  {
+    "id": "doc:built-in-special-attributes:ref",
+    "title": "ref",
+    "description": "built-in-special-attributes",
+    "url": "https:/vuejs.org/api/built-in-special-attributes#ref"
+  },
+  {
+    "id": "doc:built-in-special-attributes:is",
+    "title": "is",
+    "description": "built-in-special-attributes",
+    "url": "https:/vuejs.org/api/built-in-special-attributes#is"
+  },
+  {
+    "id": "doc:built-in-special-elements:`<component>`",
+    "title": "`<component>`",
+    "description": "built-in-special-elements",
+    "url": "https:/vuejs.org/api/built-in-special-elements#component"
+  },
+  {
+    "id": "doc:built-in-special-elements:`<slot>`",
+    "title": "`<slot>`",
+    "description": "built-in-special-elements",
+    "url": "https:/vuejs.org/api/built-in-special-elements#slot"
+  },
+  {
+    "id": "doc:built-in-special-elements:`<template>`",
+    "title": "`<template>`",
+    "description": "built-in-special-elements",
+    "url": "https:/vuejs.org/api/built-in-special-elements#template"
+  },
+  {
+    "id": "doc:component-instance:$data",
+    "title": "$data",
+    "description": "component-instance",
+    "url": "https:/vuejs.org/api/component-instance#data"
+  },
+  {
+    "id": "doc:component-instance:$props",
+    "title": "$props",
+    "description": "component-instance",
+    "url": "https:/vuejs.org/api/component-instance#props"
+  },
+  {
+    "id": "doc:component-instance:$el",
+    "title": "$el",
+    "description": "component-instance",
+    "url": "https:/vuejs.org/api/component-instance#el"
+  },
+  {
+    "id": "doc:component-instance:$options",
+    "title": "$options",
+    "description": "component-instance",
+    "url": "https:/vuejs.org/api/component-instance#options"
+  },
+  {
+    "id": "doc:component-instance:$parent",
+    "title": "$parent",
+    "description": "component-instance",
+    "url": "https:/vuejs.org/api/component-instance#parent"
+  },
+  {
+    "id": "doc:component-instance:$root",
+    "title": "$root",
+    "description": "component-instance",
+    "url": "https:/vuejs.org/api/component-instance#root"
+  },
+  {
+    "id": "doc:component-instance:$slots",
+    "title": "$slots",
+    "description": "component-instance",
+    "url": "https:/vuejs.org/api/component-instance#slots"
+  },
+  {
+    "id": "doc:component-instance:$refs",
+    "title": "$refs",
+    "description": "component-instance",
+    "url": "https:/vuejs.org/api/component-instance#refs"
+  },
+  {
+    "id": "doc:component-instance:$attrs",
+    "title": "$attrs",
+    "description": "component-instance",
+    "url": "https:/vuejs.org/api/component-instance#attrs"
+  },
+  {
+    "id": "doc:component-instance:$watch()",
+    "title": "$watch()",
+    "description": "component-instance",
+    "url": "https:/vuejs.org/api/component-instance#watch"
+  },
+  {
+    "id": "doc:component-instance:$emit()",
+    "title": "$emit()",
+    "description": "component-instance",
+    "url": "https:/vuejs.org/api/component-instance#emit"
+  },
+  {
+    "id": "doc:component-instance:$forceUpdate()",
+    "title": "$forceUpdate()",
+    "description": "component-instance",
+    "url": "https:/vuejs.org/api/component-instance#forceupdate"
+  },
+  {
+    "id": "doc:component-instance:$nextTick()",
+    "title": "$nextTick()",
+    "description": "component-instance",
+    "url": "https:/vuejs.org/api/component-instance#nexttick"
+  },
+  {
+    "id": "doc:composition-api-dependency-injection:provide()",
+    "title": "provide()",
+    "description": "composition-api-dependency-injection",
+    "url": "https:/vuejs.org/api/composition-api-dependency-injection#provide"
+  },
+  {
+    "id": "doc:composition-api-dependency-injection:inject()",
+    "title": "inject()",
+    "description": "composition-api-dependency-injection",
+    "url": "https:/vuejs.org/api/composition-api-dependency-injection#inject"
+  },
+  {
+    "id": "doc:composition-api-dependency-injection:hasInjectionContext()",
+    "title": "hasInjectionContext()",
+    "description": "composition-api-dependency-injection",
+    "url": "https:/vuejs.org/api/composition-api-dependency-injection#has-injection-context"
+  },
+  {
+    "id": "doc:composition-api-lifecycle:onMounted()",
+    "title": "onMounted()",
+    "description": "composition-api-lifecycle",
+    "url": "https:/vuejs.org/api/composition-api-lifecycle#onmounted"
+  },
+  {
+    "id": "doc:composition-api-lifecycle:onUpdated()",
+    "title": "onUpdated()",
+    "description": "composition-api-lifecycle",
+    "url": "https:/vuejs.org/api/composition-api-lifecycle#onupdated"
+  },
+  {
+    "id": "doc:composition-api-lifecycle:onUnmounted()",
+    "title": "onUnmounted()",
+    "description": "composition-api-lifecycle",
+    "url": "https:/vuejs.org/api/composition-api-lifecycle#onunmounted"
+  },
+  {
+    "id": "doc:composition-api-lifecycle:onBeforeMount()",
+    "title": "onBeforeMount()",
+    "description": "composition-api-lifecycle",
+    "url": "https:/vuejs.org/api/composition-api-lifecycle#onbeforemount"
+  },
+  {
+    "id": "doc:composition-api-lifecycle:onBeforeUpdate()",
+    "title": "onBeforeUpdate()",
+    "description": "composition-api-lifecycle",
+    "url": "https:/vuejs.org/api/composition-api-lifecycle#onbeforeupdate"
+  },
+  {
+    "id": "doc:composition-api-lifecycle:onBeforeUnmount()",
+    "title": "onBeforeUnmount()",
+    "description": "composition-api-lifecycle",
+    "url": "https:/vuejs.org/api/composition-api-lifecycle#onbeforeunmount"
+  },
+  {
+    "id": "doc:composition-api-lifecycle:onErrorCaptured()",
+    "title": "onErrorCaptured()",
+    "description": "composition-api-lifecycle",
+    "url": "https:/vuejs.org/api/composition-api-lifecycle#onerrorcaptured"
+  },
+  {
+    "id": "doc:composition-api-lifecycle:onRenderTracked()",
+    "title": "onRenderTracked()",
+    "description": "composition-api-lifecycle",
+    "url": "https:/vuejs.org/api/composition-api-lifecycle#onrendertracked"
+  },
+  {
+    "id": "doc:composition-api-lifecycle:onRenderTriggered()",
+    "title": "onRenderTriggered()",
+    "description": "composition-api-lifecycle",
+    "url": "https:/vuejs.org/api/composition-api-lifecycle#onrendertriggered"
+  },
+  {
+    "id": "doc:composition-api-lifecycle:onActivated()",
+    "title": "onActivated()",
+    "description": "composition-api-lifecycle",
+    "url": "https:/vuejs.org/api/composition-api-lifecycle#onactivated"
+  },
+  {
+    "id": "doc:composition-api-lifecycle:onDeactivated()",
+    "title": "onDeactivated()",
+    "description": "composition-api-lifecycle",
+    "url": "https:/vuejs.org/api/composition-api-lifecycle#ondeactivated"
+  },
+  {
+    "id": "doc:composition-api-lifecycle:onServerPrefetch()",
+    "title": "onServerPrefetch()",
+    "description": "composition-api-lifecycle",
+    "url": "https:/vuejs.org/api/composition-api-lifecycle#onserverprefetch"
+  },
+  {
+    "id": "doc:composition-api-setup:Basic Usage",
+    "title": "Basic Usage",
+    "description": "composition-api-setup",
+    "url": "https:/vuejs.org/api/composition-api-setup#basic-usage"
+  },
+  {
+    "id": "doc:composition-api-setup:Accessing Props",
+    "title": "Accessing Props",
+    "description": "composition-api-setup",
+    "url": "https:/vuejs.org/api/composition-api-setup#accessing-props"
+  },
+  {
+    "id": "doc:composition-api-setup:Setup Context",
+    "title": "Setup Context",
+    "description": "composition-api-setup",
+    "url": "https:/vuejs.org/api/composition-api-setup#setup-context"
+  },
+  {
+    "id": "doc:composition-api-setup:Usage with Render Functions",
+    "title": "Usage with Render Functions",
+    "description": "composition-api-setup",
+    "url": "https:/vuejs.org/api/composition-api-setup#usage-with-render-functions"
+  },
+  {
+    "id": "doc:custom-renderer:createRenderer()",
+    "title": "createRenderer()",
+    "description": "custom-renderer",
+    "url": "https:/vuejs.org/api/custom-renderer#createrenderer"
+  },
+  {
+    "id": "doc:general:version",
+    "title": "version",
+    "description": "general",
+    "url": "https:/vuejs.org/api/general#version"
+  },
+  {
+    "id": "doc:general:nextTick()",
+    "title": "nextTick()",
+    "description": "general",
+    "url": "https:/vuejs.org/api/general#nexttick"
+  },
+  {
+    "id": "doc:general:defineComponent()",
+    "title": "defineComponent()",
+    "description": "general",
+    "url": "https:/vuejs.org/api/general#definecomponent"
+  },
+  {
+    "id": "doc:general:defineAsyncComponent()",
+    "title": "defineAsyncComponent()",
+    "description": "general",
+    "url": "https:/vuejs.org/api/general#defineasynccomponent"
+  },
+  {
+    "id": "doc:general:defineCustomElement()",
+    "title": "defineCustomElement()",
+    "description": "general",
+    "url": "https:/vuejs.org/api/general#definecustomelement"
+  },
+  {
+    "id": "doc:options-composition:provide",
+    "title": "provide",
+    "description": "options-composition",
+    "url": "https:/vuejs.org/api/options-composition#provide"
+  },
+  {
+    "id": "doc:options-composition:inject",
+    "title": "inject",
+    "description": "options-composition",
+    "url": "https:/vuejs.org/api/options-composition#inject"
+  },
+  {
+    "id": "doc:options-composition:mixins",
+    "title": "mixins",
+    "description": "options-composition",
+    "url": "https:/vuejs.org/api/options-composition#mixins"
+  },
+  {
+    "id": "doc:options-composition:extends",
+    "title": "extends",
+    "description": "options-composition",
+    "url": "https:/vuejs.org/api/options-composition#extends"
+  },
+  {
+    "id": "doc:options-lifecycle:beforeCreate",
+    "title": "beforeCreate",
+    "description": "options-lifecycle",
+    "url": "https:/vuejs.org/api/options-lifecycle#beforecreate"
+  },
+  {
+    "id": "doc:options-lifecycle:created",
+    "title": "created",
+    "description": "options-lifecycle",
+    "url": "https:/vuejs.org/api/options-lifecycle#created"
+  },
+  {
+    "id": "doc:options-lifecycle:beforeMount",
+    "title": "beforeMount",
+    "description": "options-lifecycle",
+    "url": "https:/vuejs.org/api/options-lifecycle#beforemount"
+  },
+  {
+    "id": "doc:options-lifecycle:mounted",
+    "title": "mounted",
+    "description": "options-lifecycle",
+    "url": "https:/vuejs.org/api/options-lifecycle#mounted"
+  },
+  {
+    "id": "doc:options-lifecycle:beforeUpdate",
+    "title": "beforeUpdate",
+    "description": "options-lifecycle",
+    "url": "https:/vuejs.org/api/options-lifecycle#beforeupdate"
+  },
+  {
+    "id": "doc:options-lifecycle:updated",
+    "title": "updated",
+    "description": "options-lifecycle",
+    "url": "https:/vuejs.org/api/options-lifecycle#updated"
+  },
+  {
+    "id": "doc:options-lifecycle:beforeUnmount",
+    "title": "beforeUnmount",
+    "description": "options-lifecycle",
+    "url": "https:/vuejs.org/api/options-lifecycle#beforeunmount"
+  },
+  {
+    "id": "doc:options-lifecycle:unmounted",
+    "title": "unmounted",
+    "description": "options-lifecycle",
+    "url": "https:/vuejs.org/api/options-lifecycle#unmounted"
+  },
+  {
+    "id": "doc:options-lifecycle:errorCaptured",
+    "title": "errorCaptured",
+    "description": "options-lifecycle",
+    "url": "https:/vuejs.org/api/options-lifecycle#errorcaptured"
+  },
+  {
+    "id": "doc:options-lifecycle:renderTracked",
+    "title": "renderTracked",
+    "description": "options-lifecycle",
+    "url": "https:/vuejs.org/api/options-lifecycle#rendertracked"
+  },
+  {
+    "id": "doc:options-lifecycle:renderTriggered",
+    "title": "renderTriggered",
+    "description": "options-lifecycle",
+    "url": "https:/vuejs.org/api/options-lifecycle#rendertriggered"
+  },
+  {
+    "id": "doc:options-lifecycle:activated",
+    "title": "activated",
+    "description": "options-lifecycle",
+    "url": "https:/vuejs.org/api/options-lifecycle#activated"
+  },
+  {
+    "id": "doc:options-lifecycle:deactivated",
+    "title": "deactivated",
+    "description": "options-lifecycle",
+    "url": "https:/vuejs.org/api/options-lifecycle#deactivated"
+  },
+  {
+    "id": "doc:options-lifecycle:serverPrefetch",
+    "title": "serverPrefetch",
+    "description": "options-lifecycle",
+    "url": "https:/vuejs.org/api/options-lifecycle#serverprefetch"
+  },
+  {
+    "id": "doc:options-misc:name",
+    "title": "name",
+    "description": "options-misc",
+    "url": "https:/vuejs.org/api/options-misc#name"
+  },
+  {
+    "id": "doc:options-misc:inheritAttrs",
+    "title": "inheritAttrs",
+    "description": "options-misc",
+    "url": "https:/vuejs.org/api/options-misc#inheritattrs"
+  },
+  {
+    "id": "doc:options-misc:components",
+    "title": "components",
+    "description": "options-misc",
+    "url": "https:/vuejs.org/api/options-misc#components"
+  },
+  {
+    "id": "doc:options-misc:directives",
+    "title": "directives",
+    "description": "options-misc",
+    "url": "https:/vuejs.org/api/options-misc#directives"
+  },
+  {
+    "id": "doc:options-rendering:template",
+    "title": "template",
+    "description": "options-rendering",
+    "url": "https:/vuejs.org/api/options-rendering#template"
+  },
+  {
+    "id": "doc:options-rendering:render",
+    "title": "render",
+    "description": "options-rendering",
+    "url": "https:/vuejs.org/api/options-rendering#render"
+  },
+  {
+    "id": "doc:options-rendering:compilerOptions",
+    "title": "compilerOptions",
+    "description": "options-rendering",
+    "url": "https:/vuejs.org/api/options-rendering#compileroptions"
+  },
+  {
+    "id": "doc:options-rendering:slots",
+    "title": "slots",
+    "description": "options-rendering",
+    "url": "https:/vuejs.org/api/options-rendering#slots"
+  },
+  {
+    "id": "doc:options-state:data",
+    "title": "data",
+    "description": "options-state",
+    "url": "https:/vuejs.org/api/options-state#data"
+  },
+  {
+    "id": "doc:options-state:props",
+    "title": "props",
+    "description": "options-state",
+    "url": "https:/vuejs.org/api/options-state#props"
+  },
+  {
+    "id": "doc:options-state:computed",
+    "title": "computed",
+    "description": "options-state",
+    "url": "https:/vuejs.org/api/options-state#computed"
+  },
+  {
+    "id": "doc:options-state:methods",
+    "title": "methods",
+    "description": "options-state",
+    "url": "https:/vuejs.org/api/options-state#methods"
+  },
+  {
+    "id": "doc:options-state:watch",
+    "title": "watch",
+    "description": "options-state",
+    "url": "https:/vuejs.org/api/options-state#watch"
+  },
+  {
+    "id": "doc:options-state:emits",
+    "title": "emits",
+    "description": "options-state",
+    "url": "https:/vuejs.org/api/options-state#emits"
+  },
+  {
+    "id": "doc:options-state:expose",
+    "title": "expose",
+    "description": "options-state",
+    "url": "https:/vuejs.org/api/options-state#expose"
+  },
+  {
+    "id": "doc:reactivity-advanced:shallowRef()",
+    "title": "shallowRef()",
+    "description": "reactivity-advanced",
+    "url": "https:/vuejs.org/api/reactivity-advanced#shallowref"
+  },
+  {
+    "id": "doc:reactivity-advanced:triggerRef()",
+    "title": "triggerRef()",
+    "description": "reactivity-advanced",
+    "url": "https:/vuejs.org/api/reactivity-advanced#triggerref"
+  },
+  {
+    "id": "doc:reactivity-advanced:customRef()",
+    "title": "customRef()",
+    "description": "reactivity-advanced",
+    "url": "https:/vuejs.org/api/reactivity-advanced#customref"
+  },
+  {
+    "id": "doc:reactivity-advanced:shallowReactive()",
+    "title": "shallowReactive()",
+    "description": "reactivity-advanced",
+    "url": "https:/vuejs.org/api/reactivity-advanced#shallowreactive"
+  },
+  {
+    "id": "doc:reactivity-advanced:shallowReadonly()",
+    "title": "shallowReadonly()",
+    "description": "reactivity-advanced",
+    "url": "https:/vuejs.org/api/reactivity-advanced#shallowreadonly"
+  },
+  {
+    "id": "doc:reactivity-advanced:toRaw()",
+    "title": "toRaw()",
+    "description": "reactivity-advanced",
+    "url": "https:/vuejs.org/api/reactivity-advanced#toraw"
+  },
+  {
+    "id": "doc:reactivity-advanced:markRaw()",
+    "title": "markRaw()",
+    "description": "reactivity-advanced",
+    "url": "https:/vuejs.org/api/reactivity-advanced#markraw"
+  },
+  {
+    "id": "doc:reactivity-advanced:effectScope()",
+    "title": "effectScope()",
+    "description": "reactivity-advanced",
+    "url": "https:/vuejs.org/api/reactivity-advanced#effectscope"
+  },
+  {
+    "id": "doc:reactivity-advanced:getCurrentScope()",
+    "title": "getCurrentScope()",
+    "description": "reactivity-advanced",
+    "url": "https:/vuejs.org/api/reactivity-advanced#getcurrentscope"
+  },
+  {
+    "id": "doc:reactivity-advanced:onScopeDispose()",
+    "title": "onScopeDispose()",
+    "description": "reactivity-advanced",
+    "url": "https:/vuejs.org/api/reactivity-advanced#onscopedispose"
+  },
+  {
+    "id": "doc:reactivity-core:ref()",
+    "title": "ref()",
+    "description": "reactivity-core",
+    "url": "https:/vuejs.org/api/reactivity-core#ref"
+  },
+  {
+    "id": "doc:reactivity-core:computed()",
+    "title": "computed()",
+    "description": "reactivity-core",
+    "url": "https:/vuejs.org/api/reactivity-core#computed"
+  },
+  {
+    "id": "doc:reactivity-core:reactive()",
+    "title": "reactive()",
+    "description": "reactivity-core",
+    "url": "https:/vuejs.org/api/reactivity-core#reactive"
+  },
+  {
+    "id": "doc:reactivity-core:readonly()",
+    "title": "readonly()",
+    "description": "reactivity-core",
+    "url": "https:/vuejs.org/api/reactivity-core#readonly"
+  },
+  {
+    "id": "doc:reactivity-core:watchEffect()",
+    "title": "watchEffect()",
+    "description": "reactivity-core",
+    "url": "https:/vuejs.org/api/reactivity-core#watcheffect"
+  },
+  {
+    "id": "doc:reactivity-core:watchPostEffect()",
+    "title": "watchPostEffect()",
+    "description": "reactivity-core",
+    "url": "https:/vuejs.org/api/reactivity-core#watchposteffect"
+  },
+  {
+    "id": "doc:reactivity-core:watchSyncEffect()",
+    "title": "watchSyncEffect()",
+    "description": "reactivity-core",
+    "url": "https:/vuejs.org/api/reactivity-core#watchsynceffect"
+  },
+  {
+    "id": "doc:reactivity-core:watch()",
+    "title": "watch()",
+    "description": "reactivity-core",
+    "url": "https:/vuejs.org/api/reactivity-core#watch"
+  },
+  {
+    "id": "doc:reactivity-utilities:isRef()",
+    "title": "isRef()",
+    "description": "reactivity-utilities",
+    "url": "https:/vuejs.org/api/reactivity-utilities#isref"
+  },
+  {
+    "id": "doc:reactivity-utilities:unref()",
+    "title": "unref()",
+    "description": "reactivity-utilities",
+    "url": "https:/vuejs.org/api/reactivity-utilities#unref"
+  },
+  {
+    "id": "doc:reactivity-utilities:toRef()",
+    "title": "toRef()",
+    "description": "reactivity-utilities",
+    "url": "https:/vuejs.org/api/reactivity-utilities#toref"
+  },
+  {
+    "id": "doc:reactivity-utilities:toValue()",
+    "title": "toValue()",
+    "description": "reactivity-utilities",
+    "url": "https:/vuejs.org/api/reactivity-utilities#tovalue"
+  },
+  {
+    "id": "doc:reactivity-utilities:toRefs()",
+    "title": "toRefs()",
+    "description": "reactivity-utilities",
+    "url": "https:/vuejs.org/api/reactivity-utilities#torefs"
+  },
+  {
+    "id": "doc:reactivity-utilities:isProxy()",
+    "title": "isProxy()",
+    "description": "reactivity-utilities",
+    "url": "https:/vuejs.org/api/reactivity-utilities#isproxy"
+  },
+  {
+    "id": "doc:reactivity-utilities:isReactive()",
+    "title": "isReactive()",
+    "description": "reactivity-utilities",
+    "url": "https:/vuejs.org/api/reactivity-utilities#isreactive"
+  },
+  {
+    "id": "doc:reactivity-utilities:isReadonly()",
+    "title": "isReadonly()",
+    "description": "reactivity-utilities",
+    "url": "https:/vuejs.org/api/reactivity-utilities#isreadonly"
+  },
+  {
+    "id": "doc:render-function:h()",
+    "title": "h()",
+    "description": "render-function",
+    "url": "https:/vuejs.org/api/render-function#h"
+  },
+  {
+    "id": "doc:render-function:mergeProps()",
+    "title": "mergeProps()",
+    "description": "render-function",
+    "url": "https:/vuejs.org/api/render-function#mergeprops"
+  },
+  {
+    "id": "doc:render-function:cloneVNode()",
+    "title": "cloneVNode()",
+    "description": "render-function",
+    "url": "https:/vuejs.org/api/render-function#clonevnode"
+  },
+  {
+    "id": "doc:render-function:isVNode()",
+    "title": "isVNode()",
+    "description": "render-function",
+    "url": "https:/vuejs.org/api/render-function#isvnode"
+  },
+  {
+    "id": "doc:render-function:resolveComponent()",
+    "title": "resolveComponent()",
+    "description": "render-function",
+    "url": "https:/vuejs.org/api/render-function#resolvecomponent"
+  },
+  {
+    "id": "doc:render-function:resolveDirective()",
+    "title": "resolveDirective()",
+    "description": "render-function",
+    "url": "https:/vuejs.org/api/render-function#resolvedirective"
+  },
+  {
+    "id": "doc:render-function:withDirectives()",
+    "title": "withDirectives()",
+    "description": "render-function",
+    "url": "https:/vuejs.org/api/render-function#withdirectives"
+  },
+  {
+    "id": "doc:render-function:withModifiers()",
+    "title": "withModifiers()",
+    "description": "render-function",
+    "url": "https:/vuejs.org/api/render-function#withmodifiers"
+  },
+  {
+    "id": "doc:sfc-css-features:Scoped CSS",
+    "title": "Scoped CSS",
+    "description": "sfc-css-features",
+    "url": "https:/vuejs.org/api/sfc-css-features#scoped-css"
+  },
+  {
+    "id": "doc:sfc-css-features:CSS Modules",
+    "title": "CSS Modules",
+    "description": "sfc-css-features",
+    "url": "https:/vuejs.org/api/sfc-css-features#css-modules"
+  },
+  {
+    "id": "doc:sfc-css-features:`v-bind()` in CSS",
+    "title": "`v-bind()` in CSS",
+    "description": "sfc-css-features",
+    "url": "https:/vuejs.org/api/sfc-css-features#v-bind-in-css"
+  },
+  {
+    "id": "doc:sfc-script-setup:Basic Syntax",
+    "title": "Basic Syntax",
+    "description": "sfc-script-setup",
+    "url": "https:/vuejs.org/api/sfc-script-setup#basic-syntax"
+  },
+  {
+    "id": "doc:sfc-script-setup:Reactivity",
+    "title": "Reactivity",
+    "description": "sfc-script-setup",
+    "url": "https:/vuejs.org/api/sfc-script-setup#reactivity"
+  },
+  {
+    "id": "doc:sfc-script-setup:Using Components",
+    "title": "Using Components",
+    "description": "sfc-script-setup",
+    "url": "https:/vuejs.org/api/sfc-script-setup#using-components"
+  },
+  {
+    "id": "doc:sfc-script-setup:Using Custom Directives",
+    "title": "Using Custom Directives",
+    "description": "sfc-script-setup",
+    "url": "https:/vuejs.org/api/sfc-script-setup#using-custom-directives"
+  },
+  {
+    "id": "doc:sfc-script-setup:defineProps() & defineEmits()",
+    "title": "defineProps() & defineEmits()",
+    "description": "sfc-script-setup",
+    "url": "https:/vuejs.org/api/sfc-script-setup#defineprops-defineemits"
+  },
+  {
+    "id": "doc:sfc-script-setup:defineExpose()",
+    "title": "defineExpose()",
+    "description": "sfc-script-setup",
+    "url": "https:/vuejs.org/api/sfc-script-setup#defineexpose"
+  },
+  {
+    "id": "doc:sfc-script-setup:defineOptions()",
+    "title": "defineOptions()",
+    "description": "sfc-script-setup",
+    "url": "https:/vuejs.org/api/sfc-script-setup#defineoptions"
+  },
+  {
+    "id": "doc:sfc-script-setup:defineSlots()",
+    "title": "defineSlots()",
+    "description": "sfc-script-setup",
+    "url": "https:/vuejs.org/api/sfc-script-setup#defineslots"
+  },
+  {
+    "id": "doc:sfc-script-setup:`useSlots()` & `useAttrs()`",
+    "title": "`useSlots()` & `useAttrs()`",
+    "description": "sfc-script-setup",
+    "url": "https:/vuejs.org/api/sfc-script-setup#useslots-useattrs"
+  },
+  {
+    "id": "doc:sfc-script-setup:Usage alongside normal `<script>`",
+    "title": "Usage alongside normal `<script>`",
+    "description": "sfc-script-setup",
+    "url": "https:/vuejs.org/api/sfc-script-setup#usage-alongside-normal-script"
+  },
+  {
+    "id": "doc:sfc-script-setup:Top-level `await`",
+    "title": "Top-level `await`",
+    "description": "sfc-script-setup",
+    "url": "https:/vuejs.org/api/sfc-script-setup#top-level-await"
+  },
+  {
+    "id": "doc:sfc-script-setup:Generics",
+    "title": "Generics",
+    "description": "sfc-script-setup",
+    "url": "https:/vuejs.org/api/sfc-script-setup#generics"
+  },
+  {
+    "id": "doc:sfc-script-setup:Restrictions",
+    "title": "Restrictions",
+    "description": "sfc-script-setup",
+    "url": "https:/vuejs.org/api/sfc-script-setup#restrictions"
+  },
+  {
+    "id": "doc:sfc-spec:Overview",
+    "title": "Overview",
+    "description": "sfc-spec",
+    "url": "https:/vuejs.org/api/sfc-spec#overview"
+  },
+  {
+    "id": "doc:sfc-spec:Language Blocks",
+    "title": "Language Blocks",
+    "description": "sfc-spec",
+    "url": "https:/vuejs.org/api/sfc-spec#language-blocks"
+  },
+  {
+    "id": "doc:sfc-spec:Automatic Name Inference",
+    "title": "Automatic Name Inference",
+    "description": "sfc-spec",
+    "url": "https:/vuejs.org/api/sfc-spec#automatic-name-inference"
+  },
+  {
+    "id": "doc:sfc-spec:Pre-Processors",
+    "title": "Pre-Processors",
+    "description": "sfc-spec",
+    "url": "https:/vuejs.org/api/sfc-spec#pre-processors"
+  },
+  {
+    "id": "doc:sfc-spec:`src` Imports",
+    "title": "`src` Imports",
+    "description": "sfc-spec",
+    "url": "https:/vuejs.org/api/sfc-spec#src-imports"
+  },
+  {
+    "id": "doc:sfc-spec:Comments",
+    "title": "Comments",
+    "description": "sfc-spec",
+    "url": "https:/vuejs.org/api/sfc-spec#comments"
+  },
+  {
+    "id": "doc:ssr:renderToString()",
+    "title": "renderToString()",
+    "description": "ssr",
+    "url": "https:/vuejs.org/api/ssr#rendertostring"
+  },
+  {
+    "id": "doc:ssr:renderToNodeStream()",
+    "title": "renderToNodeStream()",
+    "description": "ssr",
+    "url": "https:/vuejs.org/api/ssr#rendertonodestream"
+  },
+  {
+    "id": "doc:ssr:pipeToNodeWritable()",
+    "title": "pipeToNodeWritable()",
+    "description": "ssr",
+    "url": "https:/vuejs.org/api/ssr#pipetonodewritable"
+  },
+  {
+    "id": "doc:ssr:renderToWebStream()",
+    "title": "renderToWebStream()",
+    "description": "ssr",
+    "url": "https:/vuejs.org/api/ssr#rendertowebstream"
+  },
+  {
+    "id": "doc:ssr:pipeToWebWritable()",
+    "title": "pipeToWebWritable()",
+    "description": "ssr",
+    "url": "https:/vuejs.org/api/ssr#pipetowebwritable"
+  },
+  {
+    "id": "doc:ssr:renderToSimpleStream()",
+    "title": "renderToSimpleStream()",
+    "description": "ssr",
+    "url": "https:/vuejs.org/api/ssr#rendertosimplestream"
+  },
+  {
+    "id": "doc:ssr:useSSRContext()",
+    "title": "useSSRContext()",
+    "description": "ssr",
+    "url": "https:/vuejs.org/api/ssr#usessrcontext"
+  },
+  {
+    "id": "doc:utility-types:PropType",
+    "title": "PropType",
+    "description": "utility-types",
+    "url": "https:/vuejs.org/api/utility-types#proptype-t"
+  },
+  {
+    "id": "doc:utility-types:MaybeRef",
+    "title": "MaybeRef",
+    "description": "utility-types",
+    "url": "https:/vuejs.org/api/utility-types#mayberef"
+  },
+  {
+    "id": "doc:utility-types:MaybeRefOrGetter",
+    "title": "MaybeRefOrGetter",
+    "description": "utility-types",
+    "url": "https:/vuejs.org/api/utility-types#maybereforgetter"
+  },
+  {
+    "id": "doc:utility-types:ExtractPropTypes",
+    "title": "ExtractPropTypes",
+    "description": "utility-types",
+    "url": "https:/vuejs.org/api/utility-types#extractproptypes"
+  },
+  {
+    "id": "doc:utility-types:ExtractPublicPropTypes",
+    "title": "ExtractPublicPropTypes",
+    "description": "utility-types",
+    "url": "https:/vuejs.org/api/utility-types#extractpublicproptypes"
+  },
+  {
+    "id": "doc:utility-types:ComponentCustomProperties",
+    "title": "ComponentCustomProperties",
+    "description": "utility-types",
+    "url": "https:/vuejs.org/api/utility-types#componentcustomproperties"
+  },
+  {
+    "id": "doc:utility-types:ComponentCustomOptions",
+    "title": "ComponentCustomOptions",
+    "description": "utility-types",
+    "url": "https:/vuejs.org/api/utility-types#componentcustomoptions"
+  },
+  {
+    "id": "doc:utility-types:ComponentCustomProps",
+    "title": "ComponentCustomProps",
+    "description": "utility-types",
+    "url": "https:/vuejs.org/api/utility-types#componentcustomprops"
+  },
+  {
+    "id": "doc:utility-types:CSSProperties",
+    "title": "CSSProperties",
+    "description": "utility-types",
+    "url": "https:/vuejs.org/api/utility-types#cssproperties"
+  }
+]
diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
index 6981e6d1..f40977bd 100644
--- a/packages/client/src/App.vue
+++ b/packages/client/src/App.vue
@@ -91,5 +91,6 @@ watchEffect(() => {
         </Pane>
       </Splitpanes>
     </div>
+    <CommandPalette />
   </main>
 </template>
diff --git a/packages/client/src/components/CommandPalette.vue b/packages/client/src/components/CommandPalette.vue
new file mode 100644
index 00000000..1cfd9467
--- /dev/null
+++ b/packages/client/src/components/CommandPalette.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { VueIcon, VueInput, VueOverlay } from '@vue-devtools-next/ui'
+import Fuse from 'fuse.js'
+import type { CommandItem } from '../composables/state-commands'
+
+const show = ref(false)
+const search = ref('')
+
+const rootItems = useCommands()
+const overrideItems = ref<CommandItem[] | undefined>()
+const items = computed(() => overrideItems.value || rootItems.value)
+
+const fuse = computed(() => new Fuse(items.value, {
+  keys: [
+    'id',
+    'title',
+  ],
+  distance: 50,
+}))
+
+const filtered = computed(() => search.value
+  ? fuse.value.search(search.value).map(i => i.item)
+  : (items.value || []))
+
+const selectedIndex = ref(0)
+
+watch(search, () => {
+  selectedIndex.value = 0
+  scrollToItem()
+})
+
+function moveSelected(delta: number) {
+  selectedIndex.value = ((selectedIndex.value + delta) + filtered.value.length) % filtered.value.length
+  scrollToItem()
+}
+
+function scrollToItem() {
+  const item = document.getElementById(filtered.value[selectedIndex.value]?.id)
+  item?.scrollIntoView({
+    block: 'center',
+  })
+}
+
+async function enterItem(item: CommandItem) {
+  const result = await item.action()
+  if (!result) {
+    overrideItems.value = undefined
+    search.value = ''
+    show.value = false
+  }
+  else {
+    overrideItems.value = result
+    search.value = ''
+  }
+}
+
+useEventListener('keydown', (e) => {
+  if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+    e.preventDefault()
+    overrideItems.value = undefined
+    search.value = ''
+    show.value = !show.value
+    return
+  }
+
+  if (!show.value)
+    return
+
+  switch (e.key) {
+    case 'ArrowDown':
+    case 'ArrowUp':
+      e.preventDefault()
+      moveSelected(e.key === 'ArrowDown' ? 1 : -1)
+      break
+
+    case 'Enter': {
+      const item = filtered.value[selectedIndex.value]
+      if (item) {
+        e.preventDefault()
+        enterItem(item)
+      }
+      break
+    }
+
+    case 'Escape': {
+      e.preventDefault()
+      if (overrideItems.value) {
+        overrideItems.value = undefined
+        search.value = ''
+      }
+      else {
+        show.value = false
+      }
+      break
+    }
+  }
+})
+</script>
+
+<template>
+  <VueOverlay v-if="show" dim class="backdrop-blur-2xl!">
+    <div flex="~ col" h-md w-xl of-hidden border-1 rounded-md text-3.75>
+      <header border="b base" flex-none>
+        <VueInput v-model="search" placeholder="Type to search..." flat auto-focus class="h12 border-none!" />
+      </header>
+      <div flex-auto of-auto p2 flex="~ col">
+        <button
+          v-for="item, idx of filtered"
+          :id="item.id"
+          :key="item.id"
+          @click="enterItem(item)"
+          @mouseover="selectedIndex = idx"
+        >
+          <div
+            flex="~ gap-2 items-center justify-between" rounded px3 py2
+            :class="selectedIndex === idx ? 'op100 bg-primary/10 text-primary saturate-100 bg-active' : 'op80'"
+          >
+            <TabIcon :icon="item.icon" :title="item.title" flex-none text-xl />
+            <span flex flex-auto items-center gap2 of-hidden>
+              <span ws-nowrap>{{ item.title }}</span>
+              <span of-hidden truncate ws-nowrap text-sm op50>{{ item.description }}</span>
+            </span>
+            <VueIcon v-if="selectedIndex === idx" icon="i-carbon-text-new-line scale-x--100" flex-none />
+          </div>
+        </button>
+        <div v-if="!filtered.length" h-full flex items-center justify-center gap-2 text-xl>
+          <VueIcon icon="carbon-search" op50 />
+          <div>
+            <span op50>No results for</span>
+            <strong text-primary>
+              "{{ search }}"
+            </strong>
+          </div>
+        </div>
+      </div>
+      <footer border="t base" flex="~ none justify-between items-center gap-4" pointer-events-none px4 py2>
+        <div text-xs flex="~ items-center gap2">
+          <button px1>
+            <VueIcon icon="carbon-arrow-down" />
+          </button>
+          <button px1>
+            <VueIcon icon="carbon-arrow-up" />
+          </button>
+          <span op75>to navigate</span>
+        </div>
+        <div text-xs flex="~ items-center gap2">
+          <button px1>
+            Esc
+          </button>
+          <span op75>to {{ overrideItems ? 'go back' : 'close' }}</span>
+        </div>
+        <div text-xs flex="~ items-center gap2">
+          <button px1>
+            <VueIcon icon="i-carbon-text-new-line scale-x--100" scale-x--100 />
+          </button>
+          <span op75>to select</span>
+        </div>
+      </footer>
+    </div>
+  </VueOverlay>
+</template>
diff --git a/packages/client/src/composables/state-commands.ts b/packages/client/src/composables/state-commands.ts
new file mode 100644
index 00000000..ef5ff789
--- /dev/null
+++ b/packages/client/src/composables/state-commands.ts
@@ -0,0 +1,87 @@
+import { randomStr } from '@vue-devtools-next/shared'
+import { MaybeRefOrGetter } from 'vue'
+
+export interface CommandItem {
+  id: string
+  title: string
+  description?: string
+  icon?: string
+  action: () => void | CommandItem[] | Promise<CommandItem[] | void>
+}
+
+const registeredCommands = reactive(new Map<string, MaybeRefOrGetter<CommandItem[]>>())
+
+// @unocss-include
+export function useCommands() {
+  const { enabledFlattenTabs } = useAllTabs()
+  const router = useRouter()
+
+  const fixedCommands: CommandItem[] = [
+    {
+      id: 'fixed:settings',
+      title: 'Settings',
+      icon: 'carbon-settings-adjust',
+      action: () => {
+        router.push('/settings')
+      },
+    },
+    {
+      id: 'fixed:docs',
+      title: 'Vue Documentations',
+      icon: 'i-vscode-icons-file-type-vue',
+      action: () => {
+        return getVueDocsCommands()
+      },
+    },
+  ]
+
+  const tabCommands = computed(() => enabledFlattenTabs.value
+    .map((i): CommandItem => {
+      return {
+        id: `tab:${i.name}`,
+        title: i.title || i.name,
+        icon: i.icon,
+        action: () => {
+          if ('onClick' in i && i.onClick)
+            i.onClick()
+          else
+            router.push(('path' in i && i.path) ? i.path : `/custom-tab-view/${i.name}`)
+        },
+      }
+    }))
+
+  return computed(() => {
+    return [
+      ...fixedCommands,
+      ...tabCommands.value,
+      ...Array.from(registeredCommands.values())
+        .flatMap(i => toValue(i)),
+    ]
+  })
+}
+
+export function registerCommands(getter: MaybeRefOrGetter<CommandItem[]>) {
+  const id = randomStr()
+
+  registeredCommands.set(id, getter)
+
+  onUnmounted(() => {
+    registeredCommands.delete(id)
+  })
+}
+
+let _vueDocsCommands: CommandItem[] | undefined
+
+export async function getVueDocsCommands() {
+  if (!_vueDocsCommands) {
+    const list = await import('../../data/vue-apis.json').then(i => i.default)
+    _vueDocsCommands = list.map(i => ({
+      ...i,
+      icon: 'carbon-api-1',
+      action: () => {
+        window.open(i.url, '_blank')
+      },
+    }))
+  }
+  return _vueDocsCommands
+}
diff --git a/packages/client/src/composables/state-tab.ts b/packages/client/src/composables/state-tab.ts
index 44248f5b..24c09b9d 100644
--- a/packages/client/src/composables/state-tab.ts
+++ b/packages/client/src/composables/state-tab.ts
@@ -92,6 +92,14 @@ export function useAllTabs() {
       return prev
     }, [])
   })
+  const enabledFlattenTabs = computed(() => {
+    return enabledTabs.value.reduce((prev, [_, tabs]) => {
+      tabs.forEach((tab) => {
+        prev.push(tab)
+      })
+      return prev
+    }, [] as Array<ModuleBuiltinTab | CustomTab>)
+  })
 
   const bridgeRpc = useDevToolsBridgeRpc()
   onDevToolsClientConnected(() => {
@@ -100,7 +108,7 @@ export function useAllTabs() {
     })
   })
 
-  return { categorizedTabs, flattenedTabs, enabledTabs }
+  return { categorizedTabs, flattenedTabs, enabledTabs, enabledFlattenTabs }
 }
 
 export function getCategorizedTabs(flattenTabs: MaybeRef<(CustomTab | ModuleBuiltinTab)[]>, enabledTabs: MaybeRef<CategorizedTabs>) {
diff --git a/packages/client/src/pages/overview.vue b/packages/client/src/pages/overview.vue
index a9e3c110..7c5353c6 100644
--- a/packages/client/src/pages/overview.vue
+++ b/packages/client/src/pages/overview.vue
@@ -101,6 +101,28 @@ onDevToolsClientConnected(() => {
         </RouterLink>
       </div>
       <div flex-auto />
+      <div flex="~ gap-1" cursor-default items-center justify-center pb-2 text-sm op40>
+        Press
+        <template v-if="isMacOS()">
+          <VueButton>
+            ⌘ Command
+          </VueButton>
+          <span>+</span>
+          <VueButton>
+            K
+          </VueButton>
+        </template>
+        <template v-else>
+          <VueButton>
+            Alt
+          </VueButton>
+          <span>+</span>
+          <VueButton>
+            K
+          </VueButton>
+        </template>
+        to toggle Command Palette
+      </div>
       <div flex="~ gap-1" cursor-default items-center justify-center pb-8 text-sm op40>
         Press
         <template v-if="isMacOS()">
diff --git a/packages/shared/src/general.ts b/packages/shared/src/general.ts
index 5367a529..49b1000f 100644
--- a/packages/shared/src/general.ts
+++ b/packages/shared/src/general.ts
@@ -54,3 +54,7 @@ export function sortByKey(state: unknown[]) {
  * @description A really fast deep clone alternative
  */
 export const deepClone = rfdc()
+
+export function randomStr() {
+  return Math.random().toString(36).slice(2)
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 56d8336e..b7b29186 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@types/chrome':
         specifier: ^0.0.254
         version: 0.0.254
+      '@types/degit':
+        specifier: ^2.8.6
+        version: 2.8.6
       '@types/fs-extra':
         specifier: ^11.0.4
         version: 11.0.4
@@ -41,6 +44,9 @@ importers:
       cross-env:
         specifier: ^7.0.3
         version: 7.0.3
+      degit:
+        specifier: ^2.8.4
+        version: 2.8.4
       eslint:
         specifier: npm:eslint-ts-patch@8.55.0-1
         version: /eslint-ts-patch@8.55.0-1
@@ -50,6 +56,9 @@ importers:
       eslint-ts-patch:
         specifier: 8.55.0-1
         version: 8.55.0-1
+      fast-glob:
+        specifier: ^3.3.2
+        version: 3.3.2
       fs-extra:
         specifier: ^11.2.0
         version: 11.2.0
@@ -68,6 +77,9 @@ importers:
       readdir-glob:
         specifier: ^1.1.3
         version: 1.1.3
+      regex-extra:
+        specifier: ^0.2.2
+        version: 0.2.2
       simple-git-hooks:
         specifier: ^2.9.0
         version: 2.9.0
@@ -3292,6 +3304,10 @@ packages:
       '@types/node': 20.10.4
     dev: false
 
+  /@types/degit@2.8.6:
+    resolution: {integrity: sha512-y0M7sqzsnHB6cvAeTCBPrCQNQiZe8U4qdzf8uBVmOWYap5MMTN/gB2iEqrIqFiYcsyvP74GnGD5tgsHttielFw==}
+    dev: true
+
   /@types/estree@1.0.4:
     resolution: {integrity: sha512-2JwWnHK9H+wUZNorf2Zr6ves96WHoWDJIftkcxPKsS7Djta6Zu519LarhRNljPXkpsZR2ZMwNCPeW7omW07BJw==}
     dev: true
@@ -5445,6 +5461,12 @@ packages:
   /defu@6.1.3:
     resolution: {integrity: sha512-Vy2wmG3NTkmHNg/kzpuvHhkqeIx3ODWqasgCRbKtbXEN0G+HpEEv9BtJLp7ZG1CZloFaC41Ah3ZFbq7aqCqMeQ==}
 
+  /degit@2.8.4:
+    resolution: {integrity: sha512-vqYuzmSA5I50J882jd+AbAhQtgK6bdKUJIex1JNfEUPENCgYsxugzKVZlFyMwV4i06MmnV47/Iqi5Io86zf3Ng==}
+    engines: {node: '>=8.0.0'}
+    hasBin: true
+    dev: true
+
   /delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -9106,6 +9128,10 @@ packages:
     dependencies:
       picomatch: 2.3.1
 
+  /regex-extra@0.2.2:
+    resolution: {integrity: sha512-RMyOx9SaL71YdRjz46uEAEig3ZUA+4uNzT2ebLputU7WqjPCrpPnYoLkcaG3t57dumIowek1VfoOtSai2LYguw==}
+    dev: true
+
   /regexp-tree@0.1.27:
     resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
     hasBin: true
diff --git a/scripts/vue-api-manifest.ts b/scripts/vue-api-manifest.ts
new file mode 100644
index 00000000..e0ca009c
--- /dev/null
+++ b/scripts/vue-api-manifest.ts
@@ -0,0 +1,61 @@
+import { fileURLToPath } from 'node:url'
+import { join } from 'node:path'
+import degit from 'degit'
+import fse from 'fs-extra'
+import fg from 'fast-glob'
+import { RegexExtra } from 'regex-extra'
+
+const dir = fileURLToPath(new URL('../clones/vue-docs', import.meta.url))
+
+if (!fse.existsSync(dir)) {
+  await degit('vuejs/docs', {
+    force: true,
+  }).clone(dir)
+}
+
+const APIReg = new RegexExtra(/^## (.*)\{#(.*)\}/gm)
+
+const files = await fg(['src/api/*.md'], {
+  ignore: ['!*index.md'],
+  cwd: dir,
+  onlyFiles: true,
+}).then(r => r.sort())
+
+const headerMatch = /^# (.*)/m
+
+export function getTitleMarkdown(text: string) {
+  const match = text.match(headerMatch)
+  if (match == null)
+    return
+
+  const title = match && match[1]
+  return title.trim()
+}
+
+const manifest = await Promise.all(files.map(async (file) => {
+  const filepath = join(dir, file)
+  const content = await fse.readFile(filepath, 'utf-8')
+  const parentPath = file.replace(/\/\d+\./g, '/').replace(/\.md$/, '').replace(/\/index$/, '').replace(/^src\/api/, '')
+  const parentId = `doc${parentPath.replace(/\//g, ':')}`
+  const title = (getTitleMarkdown(content) || '').trim().replace(/`/g, '').replace(/\s/g, ' ')
+
+  if (!title)
+    return
+  const result = APIReg.capturesAll(content) ?? []
+  return result.map((item) => {
+    const [title, path] = item.map(i => i.replaceAll(/(?<!`)<.*>(?!`)/g, '').replaceAll('\\', '').trim())
+    return {
+      id: `${parentId}:${title}`,
+      title,
+      description: parentPath.replace(/\//g, ''),
+      url: `https:/vuejs.org/api${parentPath}#${path}`,
+    }
+  })
+})).then(r => r.filter(Boolean))
+
+const targetDir = fileURLToPath(new URL('../packages/client/data', import.meta.url))
+
+if (!fse.existsSync(targetDir))
+  fse.mkdirSync(targetDir)
+
+await fse.writeFile(`${targetDir}/vue-apis.json`, JSON.stringify(manifest.flat(1), null, 2))