From 3feec4653979d15e273432b3011c92b229f0df36 Mon Sep 17 00:00:00 2001
From: Arlo <webfansplz@gmail.com>
Date: Wed, 5 Jun 2024 23:01:53 +0800
Subject: [PATCH] feat: compatible with v6 plugin API, refactor messaging
 system (#421)

Co-authored-by: Alex <alexzhang1030@foxmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .vscode/settings.json                         |   5 +-
 .../src/components/basic/AppConnecting.vue    |  41 ++
 .../src/components/basic/DevToolsHeader.vue   |   4 +-
 .../src/components/basic/SelectiveList.vue    |   4 +-
 .../src/components/state/ChildStateViewer.vue |   4 +-
 .../src/components/state/RootStateViewer.vue  |   4 +-
 .../src/components/state/StateFieldEditor.vue |  14 +-
 .../src/components/state/StateFieldViewer.vue |  22 +-
 .../src/components/timeline/EventList.vue     |   6 +-
 .../applet/src/components/timeline/index.vue  |  28 +-
 .../applet/src/composables/connect-state.ts   |  47 ---
 .../src/composables/custom-inspector-state.ts |  28 ++
 .../src/composables/custom-inspector.ts       |  51 +++
 .../applet/src/composables/devtools-state.ts  |  44 --
 .../applet/src/composables/virtual-router.ts  |  22 +-
 packages/applet/src/index.ts                  |   5 +-
 .../applet/src/modules/components/index.vue   |  76 ++--
 .../components/DevToolsLogo.vue               |   5 +
 .../components/Home.vue                       |  32 +-
 .../components/state/Index.vue                | 102 +++--
 .../components/timeline/Index.vue             |  10 +
 .../src/modules/custom-inspector/index.ts     |   5 +
 .../src/modules/custom-inspector/index.vue    |  81 ++++
 .../modules/pinia/components/store/Index.vue  |  62 ++-
 packages/applet/src/modules/pinia/index.vue   |   3 -
 .../router/components/routes/Index.vue        |  69 ++--
 .../router/components/timeline/Index.vue      |   5 +-
 packages/applet/src/modules/router/index.vue  |  42 +-
 .../vee-validate/components/DevToolsLogo.vue  |   8 -
 .../modules/vee-validate/components/Home.vue  |  52 ---
 .../vee-validate/components/state/Index.vue   | 154 -------
 .../components/timeline/Index.vue             |   9 -
 .../applet/src/modules/vee-validate/index.ts  |   5 -
 .../applet/src/modules/vee-validate/index.vue |  35 --
 .../vue-query/components/DevToolsLogo.vue     |   8 -
 .../vue-query/components/timeline/Index.vue   |   9 -
 .../applet/src/modules/vue-query/index.ts     |   5 -
 .../applet/src/modules/vue-query/index.vue    |  36 --
 .../modules/vuex/components/DevToolsLogo.vue  |   6 -
 .../src/modules/vuex/components/Home.vue      |  52 ---
 .../modules/vuex/components/store/Index.vue   | 104 -----
 .../vuex/components/timeline/Index.vue        |   9 -
 packages/applet/src/modules/vuex/index.ts     |   5 -
 packages/applet/src/modules/vuex/index.vue    |  36 --
 packages/browser-extension/manifest.json      |   4 +-
 packages/browser-extension/package.json       |   1 +
 packages/browser-extension/src/background.ts  |  24 +-
 packages/browser-extension/src/detector.ts    |  18 +-
 .../src/devtools-background.ts                |  43 +-
 .../browser-extension/src/devtools-overlay.ts | 137 +++----
 .../browser-extension/src/devtools-panel.ts   | 241 ++++++-----
 packages/browser-extension/src/proxy.ts       |  52 +--
 packages/browser-extension/src/user-app.ts    |  57 +--
 packages/client/src/App.vue                   | 107 ++---
 .../client/src/components/AppConnecting.vue   |   2 +-
 .../src/components/CustomTabComponent.vue     |   2 +-
 .../src/components/assets/AssetDetails.vue    |  20 +-
 .../src/components/common/DockingPanel.vue    |  26 +-
 .../inspector/InspectorDataField/Actions.vue  | 163 --------
 .../InspectorDataField/EditInput.vue          |  90 -----
 .../components/inspector/InspectorNodeTag.vue |  24 --
 .../components/inspector/InspectorState.vue   |  35 --
 .../inspector/InspectorStateField.vue         | 267 -------------
 .../inspector/InspectorStateType.vue          |  20 -
 .../components/inspector/InspectorTree.vue    |  39 --
 packages/client/src/composables/app.ts        |   4 +-
 packages/client/src/composables/client.ts     |  32 --
 .../src/composables/custom-inspector-tabs.ts  |  24 ++
 packages/client/src/composables/host.ts       |  18 +
 .../client/src/composables/open-in-editor.ts  |   4 +-
 .../client/src/composables/state-commands.ts  |  10 +-
 packages/client/src/composables/state-tab.ts  |  25 +-
 packages/client/src/composables/view-mode.ts  |  40 +-
 packages/client/src/constants/tab.ts          |  70 +---
 packages/client/src/index.ts                  |  19 +-
 packages/client/src/main.ts                   | 156 +++-----
 packages/client/src/pages/assets.vue          |  20 +-
 packages/client/src/pages/components.vue      |   7 +-
 .../src/pages/custom-inspector-tab-view.vue   |  31 ++
 packages/client/src/pages/custom-tab-view.vue |   6 +-
 packages/client/src/pages/graph.vue           |  24 +-
 packages/client/src/pages/i18n.vue            |  97 -----
 packages/client/src/pages/overview.vue        | 110 ++---
 packages/client/src/pages/pages.vue           |  22 +-
 packages/client/src/pages/router.vue          |  10 +-
 packages/client/src/pages/settings.vue        |  12 +-
 packages/client/src/pages/vee-validate.vue    |   8 -
 packages/client/src/pages/vue-query.vue       |   8 -
 packages/client/src/pages/vuex.vue            |   8 -
 .../src/bridge-events/devtools-actions.ts     | 128 ------
 .../src/bridge-events/devtools-listeners.ts   |  89 -----
 packages/core/src/bridge-events/index.ts      |  11 -
 packages/core/src/bridge/api.ts               |  57 ---
 packages/core/src/bridge/app.ts               |  29 --
 packages/core/src/bridge/core.ts              |  66 ---
 packages/core/src/bridge/devtools.ts          |   7 -
 packages/core/src/bridge/index.ts             |   4 -
 packages/core/src/bridge/shared.ts            |  30 --
 packages/core/src/handshake.ts                |  58 ---
 packages/core/src/index.ts                    |  10 +-
 packages/core/src/injection.ts                |  17 -
 packages/core/src/rpc/global.ts               | 245 ++++++++++++
 packages/core/src/rpc/index.ts                |   3 +
 .../module-types.ts => rpc/types.ts}          |   0
 packages/core/src/rpc/vite.ts                 |  79 ++++
 packages/core/src/separate-window/index.ts    |  91 -----
 packages/core/src/vite-bridge/client.ts       |  55 ---
 packages/core/src/vite-bridge/server.ts       |  26 --
 packages/core/src/vite-bridge/shared.ts       |  22 -
 packages/core/src/vue-plugin.ts               | 120 ------
 .../core/src/vue-plugin/devtools-state.ts     | 118 ++++++
 .../devtools-kit/__tests__/api/api.test.ts    | 154 -------
 .../devtools-kit/__tests__/api/plugin.test.ts |  46 ---
 packages/devtools-kit/__tests__/hook.test.ts  |  40 --
 packages/devtools-kit/__tests__/state.test.ts |  27 --
 packages/devtools-kit/global.d.ts             |   9 +-
 packages/devtools-kit/package.json            |   4 +-
 packages/devtools-kit/src/api/api.ts          | 278 -------------
 packages/devtools-kit/src/api/hook.ts         |  78 ----
 packages/devtools-kit/src/api/index.ts        |   6 +-
 packages/devtools-kit/src/api/off.ts          |   5 -
 packages/devtools-kit/src/api/on.ts           |  60 ---
 packages/devtools-kit/src/api/plugin.ts       |  78 ----
 packages/devtools-kit/src/api/v6/index.ts     | 142 +++++++
 packages/devtools-kit/src/api/v7/index.ts     |   6 +
 .../src/core/{app-record => app}/index.ts     |  38 +-
 .../src/core/component-highlighter/index.ts   |   8 +-
 .../src/core/component/state/editor.ts        |   8 +-
 .../src/core/component/state/index.ts         |   4 +-
 .../src/core/component/state/process.ts       |   4 +-
 .../src/core/component/state/reviver.ts       |   4 +-
 .../src/core/component/tree/index.ts          |   4 +-
 .../src/core/component/tree/walker.ts         |  22 +-
 .../src/core/component/types/tree.ts          |  23 +-
 .../src/core/component/utils/index.ts         |  10 +-
 .../devtools-kit/src/core/custom-tab/index.ts |  11 -
 .../src/core/high-perf-mode/index.ts          |   2 +-
 packages/devtools-kit/src/core/index.ts       | 111 +++---
 .../devtools-kit/src/core/inspector/index.ts  |  48 ---
 .../src/core/open-in-editor/index.ts          |   2 +-
 .../plugin/components.ts}                     |  79 ++--
 .../devtools-kit/src/core/plugin/index.ts     |  39 ++
 .../devtools-kit/src/core/router/index.ts     |  14 +-
 .../devtools-kit/src/core/timeline/index.ts   |  27 --
 packages/devtools-kit/src/ctx/api.ts          | 105 +++++
 .../devtools-kit/src/{state => ctx}/env.ts    |   3 +-
 packages/devtools-kit/src/ctx/hook.ts         | 376 ++++++++++++++++++
 packages/devtools-kit/src/ctx/index.ts        |  43 ++
 packages/devtools-kit/src/ctx/inspector.ts    |  91 +++++
 packages/devtools-kit/src/ctx/plugin.ts       |  14 +
 .../devtools-kit/src/{state => ctx}/router.ts |  14 +-
 packages/devtools-kit/src/ctx/state.ts        | 199 +++++++++
 packages/devtools-kit/src/ctx/timeline.ts     |  24 ++
 packages/devtools-kit/src/index.ts            |  43 +-
 packages/devtools-kit/src/messaging/index.ts  | 163 ++++++++
 .../presets/broadcast-channel/context.ts      |   1 +
 .../presets/broadcast-channel/index.ts        |  26 ++
 .../src/messaging/presets/electron/client.ts  |  17 +
 .../src/messaging/presets/electron/context.ts |  51 +++
 .../src/messaging/presets/electron/index.ts   |   4 +
 .../src/messaging/presets/electron/proxy.ts   |  21 +
 .../src/messaging/presets/electron/server.ts  |  17 +
 .../src/messaging/presets/extension/client.ts |  54 +++
 .../messaging/presets/extension/context.ts    |  52 +++
 .../src/messaging/presets/extension/index.ts  |   4 +
 .../src/messaging/presets/extension/proxy.ts  |  48 +++
 .../src/messaging/presets/extension/server.ts |  25 ++
 .../src/messaging/presets/iframe/client.ts    |  31 ++
 .../src/messaging/presets/iframe/context.ts   |  12 +
 .../src/messaging/presets/iframe}/index.ts    |   2 +-
 .../src/messaging/presets/iframe/server.ts    |  60 +++
 .../src/messaging/presets/index.ts            |   6 +
 .../src/messaging/presets/vite/client.ts      |  17 +
 .../src/messaging/presets/vite/context.ts     |  33 ++
 .../src/messaging/presets/vite/index.ts       |   3 +
 .../src/messaging/presets/vite/server.ts      |  16 +
 .../src/messaging/presets/ws/client.ts        |  25 ++
 .../src/messaging/presets/ws/context.ts       |  28 ++
 .../src/messaging/presets/ws/index.ts         |   3 +
 .../src/messaging/presets/ws/server.ts        |  14 +
 .../src/messaging/types/channel.ts            |   0
 .../devtools-kit/src/messaging/types/index.ts |   7 +
 packages/devtools-kit/src/plugins/index.ts    |   1 -
 packages/devtools-kit/src/state/app-record.ts |  58 ---
 packages/devtools-kit/src/state/context.ts    |  40 --
 packages/devtools-kit/src/state/index.ts      |   5 -
 packages/devtools-kit/src/state/state.ts      |  83 ----
 packages/devtools-kit/src/types/app.ts        |  57 +--
 .../index.ts => types/command.ts}             |  17 -
 packages/devtools-kit/src/types/component.ts  |  91 +++++
 packages/devtools-kit/src/types/context.ts    |  17 -
 packages/devtools-kit/src/types/env.ts        |   3 -
 packages/devtools-kit/src/types/hook.ts       |   5 +-
 packages/devtools-kit/src/types/index.ts      |   9 +-
 packages/devtools-kit/src/types/inspector.ts  |  50 +++
 packages/devtools-kit/src/types/plugin.ts     |  46 +++
 packages/devtools-kit/src/types/state.ts      |  17 -
 .../custom-tab/types.ts => types/tab.ts}      |   0
 packages/devtools-kit/src/types/timeline.ts   |  41 ++
 packages/devtools-kit/tsup.config.ts          |   2 +-
 packages/electron/package.json                |   1 +
 packages/electron/src/cli.ts                  |   2 +-
 packages/electron/src/devtools.ts             |  30 +-
 packages/electron/src/server.ts               |  10 +-
 packages/electron/src/user-app.core.ts        |  30 +-
 packages/overlay/src/App.vue                  |  40 +-
 packages/overlay/src/components/FrameBox.vue  |  22 +-
 packages/overlay/src/composables/bridge.ts    |  21 -
 packages/overlay/src/composables/index.ts     |   1 -
 packages/playground/applet/src/App.vue        |  32 +-
 packages/playground/basic/src/main.ts         |  41 +-
 packages/playground/basic/vite.config.ts      |   2 +-
 packages/shared/src/env.ts                    |   1 +
 packages/vite/src/modules/get-config.ts       |   8 -
 packages/vite/src/modules/graph.ts            |  26 --
 packages/vite/src/modules/index.ts            |   3 -
 packages/vite/src/overlay.js                  |  12 +-
 packages/vite/src/{modules => rpc}/assets.ts  |  82 ++--
 packages/vite/src/rpc/get-config.ts           |   9 +
 packages/vite/src/rpc/graph.ts                |  24 ++
 packages/vite/src/rpc/index.ts                |  15 +
 packages/vite/src/rpc/types.ts                |   8 +
 packages/vite/src/vite.ts                     |  18 +-
 pnpm-lock.yaml                                |  39 ++
 scripts/extension-zip.ts                      |   5 +-
 225 files changed, 4129 insertions(+), 4694 deletions(-)
 create mode 100644 packages/applet/src/components/basic/AppConnecting.vue
 delete mode 100644 packages/applet/src/composables/connect-state.ts
 create mode 100644 packages/applet/src/composables/custom-inspector-state.ts
 create mode 100644 packages/applet/src/composables/custom-inspector.ts
 delete mode 100644 packages/applet/src/composables/devtools-state.ts
 create mode 100644 packages/applet/src/modules/custom-inspector/components/DevToolsLogo.vue
 rename packages/applet/src/modules/{vue-query => custom-inspector}/components/Home.vue (50%)
 rename packages/applet/src/modules/{vue-query => custom-inspector}/components/state/Index.vue (52%)
 create mode 100644 packages/applet/src/modules/custom-inspector/components/timeline/Index.vue
 create mode 100644 packages/applet/src/modules/custom-inspector/index.ts
 create mode 100644 packages/applet/src/modules/custom-inspector/index.vue
 delete mode 100644 packages/applet/src/modules/vee-validate/components/DevToolsLogo.vue
 delete mode 100644 packages/applet/src/modules/vee-validate/components/Home.vue
 delete mode 100644 packages/applet/src/modules/vee-validate/components/state/Index.vue
 delete mode 100644 packages/applet/src/modules/vee-validate/components/timeline/Index.vue
 delete mode 100644 packages/applet/src/modules/vee-validate/index.ts
 delete mode 100644 packages/applet/src/modules/vee-validate/index.vue
 delete mode 100644 packages/applet/src/modules/vue-query/components/DevToolsLogo.vue
 delete mode 100644 packages/applet/src/modules/vue-query/components/timeline/Index.vue
 delete mode 100644 packages/applet/src/modules/vue-query/index.ts
 delete mode 100644 packages/applet/src/modules/vue-query/index.vue
 delete mode 100644 packages/applet/src/modules/vuex/components/DevToolsLogo.vue
 delete mode 100644 packages/applet/src/modules/vuex/components/Home.vue
 delete mode 100644 packages/applet/src/modules/vuex/components/store/Index.vue
 delete mode 100644 packages/applet/src/modules/vuex/components/timeline/Index.vue
 delete mode 100644 packages/applet/src/modules/vuex/index.ts
 delete mode 100644 packages/applet/src/modules/vuex/index.vue
 delete mode 100644 packages/client/src/components/inspector/InspectorDataField/Actions.vue
 delete mode 100644 packages/client/src/components/inspector/InspectorDataField/EditInput.vue
 delete mode 100644 packages/client/src/components/inspector/InspectorNodeTag.vue
 delete mode 100644 packages/client/src/components/inspector/InspectorState.vue
 delete mode 100644 packages/client/src/components/inspector/InspectorStateField.vue
 delete mode 100644 packages/client/src/components/inspector/InspectorStateType.vue
 delete mode 100644 packages/client/src/components/inspector/InspectorTree.vue
 delete mode 100644 packages/client/src/composables/client.ts
 create mode 100644 packages/client/src/composables/custom-inspector-tabs.ts
 create mode 100644 packages/client/src/composables/host.ts
 create mode 100644 packages/client/src/pages/custom-inspector-tab-view.vue
 delete mode 100644 packages/client/src/pages/i18n.vue
 delete mode 100644 packages/client/src/pages/vee-validate.vue
 delete mode 100644 packages/client/src/pages/vue-query.vue
 delete mode 100644 packages/client/src/pages/vuex.vue
 delete mode 100644 packages/core/src/bridge-events/devtools-actions.ts
 delete mode 100644 packages/core/src/bridge-events/devtools-listeners.ts
 delete mode 100644 packages/core/src/bridge-events/index.ts
 delete mode 100644 packages/core/src/bridge/api.ts
 delete mode 100644 packages/core/src/bridge/app.ts
 delete mode 100644 packages/core/src/bridge/core.ts
 delete mode 100644 packages/core/src/bridge/devtools.ts
 delete mode 100644 packages/core/src/bridge/index.ts
 delete mode 100644 packages/core/src/bridge/shared.ts
 delete mode 100644 packages/core/src/handshake.ts
 delete mode 100644 packages/core/src/injection.ts
 create mode 100644 packages/core/src/rpc/global.ts
 create mode 100644 packages/core/src/rpc/index.ts
 rename packages/core/src/{vite-bridge/module-types.ts => rpc/types.ts} (100%)
 create mode 100644 packages/core/src/rpc/vite.ts
 delete mode 100644 packages/core/src/separate-window/index.ts
 delete mode 100644 packages/core/src/vite-bridge/client.ts
 delete mode 100644 packages/core/src/vite-bridge/server.ts
 delete mode 100644 packages/core/src/vite-bridge/shared.ts
 delete mode 100644 packages/core/src/vue-plugin.ts
 create mode 100644 packages/core/src/vue-plugin/devtools-state.ts
 delete mode 100644 packages/devtools-kit/__tests__/api/api.test.ts
 delete mode 100644 packages/devtools-kit/__tests__/api/plugin.test.ts
 delete mode 100644 packages/devtools-kit/__tests__/hook.test.ts
 delete mode 100644 packages/devtools-kit/__tests__/state.test.ts
 delete mode 100644 packages/devtools-kit/src/api/api.ts
 delete mode 100644 packages/devtools-kit/src/api/hook.ts
 delete mode 100644 packages/devtools-kit/src/api/off.ts
 delete mode 100644 packages/devtools-kit/src/api/on.ts
 delete mode 100644 packages/devtools-kit/src/api/plugin.ts
 create mode 100644 packages/devtools-kit/src/api/v6/index.ts
 create mode 100644 packages/devtools-kit/src/api/v7/index.ts
 rename packages/devtools-kit/src/core/{app-record => app}/index.ts (61%)
 delete mode 100644 packages/devtools-kit/src/core/custom-tab/index.ts
 delete mode 100644 packages/devtools-kit/src/core/inspector/index.ts
 rename packages/devtools-kit/src/{plugins/component.ts => core/plugin/components.ts} (66%)
 create mode 100644 packages/devtools-kit/src/core/plugin/index.ts
 delete mode 100644 packages/devtools-kit/src/core/timeline/index.ts
 create mode 100644 packages/devtools-kit/src/ctx/api.ts
 rename packages/devtools-kit/src/{state => ctx}/env.ts (73%)
 create mode 100644 packages/devtools-kit/src/ctx/hook.ts
 create mode 100644 packages/devtools-kit/src/ctx/index.ts
 create mode 100644 packages/devtools-kit/src/ctx/inspector.ts
 create mode 100644 packages/devtools-kit/src/ctx/plugin.ts
 rename packages/devtools-kit/src/{state => ctx}/router.ts (51%)
 create mode 100644 packages/devtools-kit/src/ctx/state.ts
 create mode 100644 packages/devtools-kit/src/ctx/timeline.ts
 create mode 100644 packages/devtools-kit/src/messaging/index.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/broadcast-channel/context.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/broadcast-channel/index.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/electron/client.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/electron/context.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/electron/index.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/electron/proxy.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/electron/server.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/extension/client.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/extension/context.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/extension/index.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/extension/proxy.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/extension/server.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/iframe/client.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/iframe/context.ts
 rename packages/{core/src/vite-bridge => devtools-kit/src/messaging/presets/iframe}/index.ts (61%)
 create mode 100644 packages/devtools-kit/src/messaging/presets/iframe/server.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/index.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/vite/client.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/vite/context.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/vite/index.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/vite/server.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/ws/client.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/ws/context.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/ws/index.ts
 create mode 100644 packages/devtools-kit/src/messaging/presets/ws/server.ts
 create mode 100644 packages/devtools-kit/src/messaging/types/channel.ts
 create mode 100644 packages/devtools-kit/src/messaging/types/index.ts
 delete mode 100644 packages/devtools-kit/src/plugins/index.ts
 delete mode 100644 packages/devtools-kit/src/state/app-record.ts
 delete mode 100644 packages/devtools-kit/src/state/context.ts
 delete mode 100644 packages/devtools-kit/src/state/index.ts
 delete mode 100644 packages/devtools-kit/src/state/state.ts
 rename packages/devtools-kit/src/{core/custom-command/index.ts => types/command.ts} (64%)
 create mode 100644 packages/devtools-kit/src/types/component.ts
 delete mode 100644 packages/devtools-kit/src/types/context.ts
 delete mode 100644 packages/devtools-kit/src/types/env.ts
 create mode 100644 packages/devtools-kit/src/types/inspector.ts
 create mode 100644 packages/devtools-kit/src/types/plugin.ts
 delete mode 100644 packages/devtools-kit/src/types/state.ts
 rename packages/devtools-kit/src/{core/custom-tab/types.ts => types/tab.ts} (100%)
 create mode 100644 packages/devtools-kit/src/types/timeline.ts
 delete mode 100644 packages/overlay/src/composables/bridge.ts
 delete mode 100644 packages/vite/src/modules/get-config.ts
 delete mode 100644 packages/vite/src/modules/graph.ts
 delete mode 100644 packages/vite/src/modules/index.ts
 rename packages/vite/src/{modules => rpc}/assets.ts (68%)
 create mode 100644 packages/vite/src/rpc/get-config.ts
 create mode 100644 packages/vite/src/rpc/graph.ts
 create mode 100644 packages/vite/src/rpc/index.ts
 create mode 100644 packages/vite/src/rpc/types.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 02c83895..0823b7b2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -31,5 +31,8 @@
     "yaml"
   ],
   "scss.lint.unknownAtRules": "ignore",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "cSpell.words": [
+    "Mergeable"
+  ]
 }
diff --git a/packages/applet/src/components/basic/AppConnecting.vue b/packages/applet/src/components/basic/AppConnecting.vue
new file mode 100644
index 00000000..d26c06ea
--- /dev/null
+++ b/packages/applet/src/components/basic/AppConnecting.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="h-screen w-screen $ui-fcc flex-col">
+    <div class="outer">
+      <div class="inner">
+        <i class="i-logos-vue inline-block h8! w8!" alt="Vue logo" />
+      </div>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+@keyframes connecting {
+  0% {
+    --at-apply: opacity-60 scale-60;
+  }
+  50% {
+    --at-apply: opacity-80 scale-80;
+  }
+  100% {
+    --at-apply: opacity-100 scale-100;
+  }
+}
+
+.outer,
+.inner {
+  --at-apply: transform rounded-[50%] bg-primary-500 bg-opacity-10;
+}
+.outer {
+  --at-apply: p-6;
+  animation: connecting 1.2s linear infinite;
+}
+
+.inner {
+  --at-apply: pt-6 pr-5 pb-4 pl-5;
+  animation: connecting 1.2s 0.1s backwards linear infinite;
+}
+</style>
diff --git a/packages/applet/src/components/basic/DevToolsHeader.vue b/packages/applet/src/components/basic/DevToolsHeader.vue
index 01a660c7..a734d3d1 100644
--- a/packages/applet/src/components/basic/DevToolsHeader.vue
+++ b/packages/applet/src/components/basic/DevToolsHeader.vue
@@ -3,7 +3,7 @@ import { defineProps } from 'vue'
 import { useVirtualRouter } from '~/composables/virtual-router'
 
 defineProps<{
-  githubRepoLink: string
+  githubRepoLink?: string
   docLink: string
 }>()
 const router = useVirtualRouter()
@@ -20,7 +20,7 @@ const router = useVirtualRouter()
       <a class="pr2" :href="docLink" target="_blank">
         <i class="i-clarity:document-line cursor-pointer op70 text-base hover:op100" />
       </a>
-      <a :href="githubRepoLink" target="_blank">
+      <a v-if="githubRepoLink" :href="githubRepoLink" target="_blank">
         <i class="i-mdi:github cursor-pointer op70 text-base hover:op100" />
       </a>
     </div>
diff --git a/packages/applet/src/components/basic/SelectiveList.vue b/packages/applet/src/components/basic/SelectiveList.vue
index 5709105a..06565be2 100644
--- a/packages/applet/src/components/basic/SelectiveList.vue
+++ b/packages/applet/src/components/basic/SelectiveList.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { defineModel } from 'vue'
-import type { InspectorNodeTag } from '@vue/devtools-kit'
+import type { CustomInspectorNode } from '@vue/devtools-kit'
 import NodeTag from '~/components/basic/NodeTag.vue'
 
-defineProps<{ data: { id: string, label: string, tags: InspectorNodeTag[] }[] }>()
+defineProps<{ data: CustomInspectorNode[] }>()
 
 const selected = defineModel()
 
diff --git a/packages/applet/src/components/state/ChildStateViewer.vue b/packages/applet/src/components/state/ChildStateViewer.vue
index 983b4979..db983d47 100644
--- a/packages/applet/src/components/state/ChildStateViewer.vue
+++ b/packages/applet/src/components/state/ChildStateViewer.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { InspectorState } from '@vue/devtools-kit'
+import type { CustomInspectorState } from '@vue/devtools-kit'
 import StateFieldViewer from './StateFieldViewer.vue'
 
 withDefaults(defineProps<{
-  data: InspectorState[]
+  data: CustomInspectorState[]
   depth: number
   index: string
 }>(), {
diff --git a/packages/applet/src/components/state/RootStateViewer.vue b/packages/applet/src/components/state/RootStateViewer.vue
index 8f0ee236..456e9dd3 100644
--- a/packages/applet/src/components/state/RootStateViewer.vue
+++ b/packages/applet/src/components/state/RootStateViewer.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { watchEffect } from 'vue'
-import type { InspectorState } from '@vue/devtools-kit'
+import type { CustomInspectorState } from '@vue/devtools-kit'
 import ChildStateViewer from './ChildStateViewer.vue'
 import ToggleExpanded from '~/components/basic/ToggleExpanded.vue'
 import { useToggleExpanded } from '~/composables/toggle-expanded'
 import { createStateEditorContext } from '~/composables/state-editor'
 
 const props = withDefaults(defineProps<{
-  data: Record<string, InspectorState[]>
+  data: Record<string, CustomInspectorState[]>
   nodeId: string
   inspectorId: string
   disableEdit?: boolean
diff --git a/packages/applet/src/components/state/StateFieldEditor.vue b/packages/applet/src/components/state/StateFieldEditor.vue
index cb631b41..47cf85dd 100644
--- a/packages/applet/src/components/state/StateFieldEditor.vue
+++ b/packages/applet/src/components/state/StateFieldEditor.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { computed, ref, toRaw } from 'vue'
 import { VueButton, VueDropdown, VueDropdownButton, VueIcon, vTooltip } from '@vue/devtools-ui'
-import { getRaw } from '@vue/devtools-kit'
-import type { InspectorState, InspectorStateEditorPayload } from '@vue/devtools-kit'
+import { DevToolsV6PluginAPIHookKeys, getRaw } from '@vue/devtools-kit'
+import type { CustomInspectorState, DevToolsV6PluginAPIHookPayloads } from '@vue/devtools-kit'
 import type { ButtonProps } from '@vue/devtools-ui/dist/types/src/components/Button'
-import { editInspectorState } from '@vue/devtools-core'
+import { rpc } from '@vue/devtools-core'
 import { useClipboard } from '@vueuse/core'
 import { useStateEditorContext } from '~/composables/state-editor'
 import type { EditorAddNewPropType, EditorInputValidType } from '~/composables/state-editor'
 
 const props = withDefaults(defineProps<{
-  data: InspectorState
+  data: CustomInspectorState & { key?: string }
   hovering: boolean
   depth: number
   showAddIfNeeded?: boolean
@@ -45,7 +45,7 @@ const buttonClass = computed(() => ({
 }))
 
 function quickEdit(v: unknown, remove: boolean = false) {
-  editInspectorState({
+  rpc.value.editInspectorState({
     path: props.data.path || [props.data.key],
     inspectorId: state.value.inspectorId,
     type: props.data.stateType!,
@@ -56,7 +56,7 @@ function quickEdit(v: unknown, remove: boolean = false) {
       type: dataType.value,
       remove,
     },
-  } satisfies InspectorStateEditorPayload)
+  } as unknown as DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE])
 }
 
 function quickEditNum(v: number | string, offset: 1 | -1) {
@@ -147,7 +147,7 @@ function quickEditNum(v: number | string, offset: 1 | -1) {
           </VueDropdownButton>
           <VueDropdownButton
             @click="() => {
-              copy(data.key)
+              copy(data.key!)
             }"
           >
             <template #icon>
diff --git a/packages/applet/src/components/state/StateFieldViewer.vue b/packages/applet/src/components/state/StateFieldViewer.vue
index 5cf88d62..b44618ff 100644
--- a/packages/applet/src/components/state/StateFieldViewer.vue
+++ b/packages/applet/src/components/state/StateFieldViewer.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { InspectorCustomState, InspectorState, InspectorStateEditorPayload } from '@vue/devtools-kit'
-import { formatInspectorStateValue, getInspectorStateValueType, getRaw, toEdit, toSubmit } from '@vue/devtools-kit'
+import type { CustomInspectorState, InspectorCustomState } from '@vue/devtools-kit'
+import { DevToolsV6PluginAPIHookKeys, DevToolsV6PluginAPIHookPayloads, formatInspectorStateValue, getInspectorStateValueType, getRaw, toEdit, toSubmit } from '@vue/devtools-kit'
 import { computed, ref, watch } from 'vue'
-import { editInspectorState } from '@vue/devtools-core'
+import { rpc } from '@vue/devtools-core'
 import { isArray, isObject, sortByKey } from '@vue/devtools-shared'
 import { VueButton, VueIcon, vTooltip } from '@vue/devtools-ui'
 import ChildStateViewer from './ChildStateViewer.vue'
@@ -15,7 +15,7 @@ import type { EditorAddNewPropType } from '~/composables/state-editor'
 import { useHover } from '~/composables/hover'
 
 const props = defineProps<{
-  data: InspectorState
+  data: CustomInspectorState
   depth: number
   index: string
 }>()
@@ -57,7 +57,7 @@ const normalizedDisplayedKey = computed(() => normalizedPath.value[normalizedPat
 const normalizedDisplayedValue = computed(() => {
   const directlyDisplayedValueMap = ['Reactive']
   const extraDisplayedValue = (props.data as InspectorCustomState)?._custom?.stateTypeName || props.data?.stateTypeName
-  if (directlyDisplayedValueMap.includes(extraDisplayedValue!)) {
+  if (directlyDisplayedValueMap.includes(extraDisplayedValue as string)) {
     return extraDisplayedValue
   }
 
@@ -95,7 +95,7 @@ const normalizedDisplayedChildren = computed(() => {
       ...inherit,
       editable: props.data.editable && !isUneditableType,
       creating: false,
-    })) as unknown as InspectorState[]
+    })) as unknown as CustomInspectorState[]
   }
   else if (isObject(value)) {
     displayedChildren = Object.keys(value).slice(0, limit.value).map(key => ({
@@ -110,7 +110,7 @@ const normalizedDisplayedChildren = computed(() => {
       displayedChildren = sortByKey(displayedChildren)
   }
 
-  return (displayedChildren === props.data.value ? [] : displayedChildren) as InspectorState[]
+  return (displayedChildren === props.data.value ? [] : displayedChildren) as CustomInspectorState[]
 })
 
 // has children
@@ -137,7 +137,7 @@ watch(() => editing.value, (v) => {
 
 function submit() {
   const data = props.data
-  editInspectorState({
+  rpc.value.editInspectorState({
     path: normalizedPath.value,
     inspectorId: state.value.inspectorId,
     type: data.stateType!,
@@ -147,7 +147,7 @@ function submit() {
       type: editingType.value,
       value: toSubmit(editingText.value, raw.value.customType),
     },
-  } satisfies InspectorStateEditorPayload)
+  } as unknown as DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE])
   toggleEditing()
 }
 
@@ -164,7 +164,7 @@ function addNewProp(type: EditorAddNewPropType) {
 
 function submitDrafting() {
   const data = props.data
-  editInspectorState({
+  rpc.value.editInspectorState({
     path: [...normalizedPath.value, draftingNewProp.value.key],
     inspectorId: state.value.inspectorId,
     type: data.stateType!,
@@ -174,7 +174,7 @@ function submitDrafting() {
       type: typeof toSubmit(draftingNewProp.value.value),
       value: toSubmit(draftingNewProp.value.value),
     },
-  } satisfies InspectorStateEditorPayload)
+  } as unknown as DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE])
   resetDrafting()
 }
 
diff --git a/packages/applet/src/components/timeline/EventList.vue b/packages/applet/src/components/timeline/EventList.vue
index 2e6204ad..ada63249 100644
--- a/packages/applet/src/components/timeline/EventList.vue
+++ b/packages/applet/src/components/timeline/EventList.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { TimelineEvent } from '@vue/devtools-kit'
+import type { TimelineEventOptions } from '@vue/devtools-kit'
 import { computed } from 'vue'
 import { RecycleScroller } from 'vue-virtual-scroller'
 import { formatTime } from '~/utils'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 const props = defineProps<{
-  data: Array<TimelineEvent['event'] & { color?: string, id?: number }>
+  data: Array<TimelineEventOptions['event'] & { color?: string, id?: number }>
 }>()
 
 const selected = defineModel()
@@ -19,7 +19,7 @@ const normalizedData = computed(() => {
     if (item.groupId !== currentGroupId || currentColorIndex === -1)
       currentColorIndex = (currentColorIndex + 1) % colors.length
 
-    currentGroupId = item.groupId ?? currentGroupId
+    currentGroupId = item.groupId as number ?? currentGroupId
 
     item.id = index
     item.color = colors[currentColorIndex]
diff --git a/packages/applet/src/components/timeline/index.vue b/packages/applet/src/components/timeline/index.vue
index ca418019..33e8b7a4 100644
--- a/packages/applet/src/components/timeline/index.vue
+++ b/packages/applet/src/components/timeline/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { Pane, Splitpanes } from 'splitpanes'
-import { onAddTimelineEvent } from '@vue/devtools-core'
-import { computed, ref } from 'vue'
+import { DevToolsMessagingEvents, rpc } from '@vue/devtools-core'
+import { computed, onUnmounted, ref } from 'vue'
 
-import type { InspectorState, TimelineEvent } from '@vue/devtools-kit'
+import type { CustomInspectorState, TimelineEventOptions } from '@vue/devtools-kit'
 import EventList from './EventList.vue'
 import Navbar from '~/components/basic/Navbar.vue'
 import Empty from '~/components/basic/Empty.vue'
@@ -14,7 +14,7 @@ import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
 const props = defineProps<{
   layerIds: string[]
   docLink: string
-  githubRepoLink: string
+  githubRepoLink?: string
 }>()
 
 const { expanded: expandedStateNodes } = createExpandedContext('timeline-state')
@@ -22,20 +22,20 @@ const { expanded: expandedStateNodes } = createExpandedContext('timeline-state')
 // event info + group info = [0, 1]
 expandedStateNodes.value = ['0', '1']
 
-const eventList = ref<TimelineEvent['event'][]>([])
-const groupList = ref<Map<number, TimelineEvent['event'][]>>(new Map())
+const eventList = ref<TimelineEventOptions['event'][]>([])
+const groupList = ref<Map<string | number | undefined, TimelineEventOptions['event'][]>>(new Map())
 const selectedEventIndex = ref(0)
 const selectedEventInfo = computed(() => eventList.value[selectedEventIndex.value] ?? null)
 // event info
 const normalizedEventInfo = computed(() => {
-  const info: InspectorState[] = []
+  const info: CustomInspectorState[] = []
   for (const key in selectedEventInfo.value?.data) {
     info.push({
       key,
       type: key,
       editable: false,
       value: selectedEventInfo.value.data[key]!,
-    })
+    } as unknown as CustomInspectorState)
   }
   return info
 })
@@ -62,10 +62,10 @@ const normalizedGroupInfo = computed(() => {
 
 // normalize display info
 const displayedInfo = computed(() => {
-  return { 'Event Info': normalizedEventInfo.value, ...(normalizedGroupInfo.value && { 'Group Info': normalizedGroupInfo.value }) } as unknown as Record<string, InspectorState[]>
+  return { 'Event Info': normalizedEventInfo.value, ...(normalizedGroupInfo.value && { 'Group Info': normalizedGroupInfo.value }) } as unknown as Record<string, CustomInspectorState[]>
 })
 
-function normalizeGroupList(event: TimelineEvent['event']) {
+function normalizeGroupList(event: TimelineEventOptions['event']) {
   const groupId = event.groupId
   if (groupId !== undefined) {
     groupList.value.set(groupId, groupList.value.get(groupId) ?? [])
@@ -73,7 +73,7 @@ function normalizeGroupList(event: TimelineEvent['event']) {
   }
 }
 
-onAddTimelineEvent((payload) => {
+function onTimelineEventUpdated(payload) {
   if (!payload)
     return
 
@@ -83,6 +83,12 @@ onAddTimelineEvent((payload) => {
 
   eventList.value.push(event)
   normalizeGroupList(event)
+}
+
+rpc.functions.on(DevToolsMessagingEvents.TIMELINE_EVENT_UPDATED, onTimelineEventUpdated)
+
+onUnmounted(() => {
+  rpc.functions.off(DevToolsMessagingEvents.TIMELINE_EVENT_UPDATED, onTimelineEventUpdated)
 })
 </script>
 
diff --git a/packages/applet/src/composables/connect-state.ts b/packages/applet/src/composables/connect-state.ts
deleted file mode 100644
index 3d0a43c1..00000000
--- a/packages/applet/src/composables/connect-state.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { getDevToolsState, onDevToolsStateUpdated } from '@vue/devtools-core'
-import type { ComputedRef, InjectionKey } from 'vue'
-import { computed, inject, provide, ref, watch } from 'vue'
-
-const VueDevToolsConnectStateSymbol: InjectionKey<ComputedRef<boolean>> = Symbol('VueDevToolsConnectStateSymbol')
-
-export function createDevToolsConnectStateContext() {
-  const appConnected = ref(false)
-  const clientConnected = ref(false)
-  const connected = computed(() => appConnected.value && clientConnected.value)
-
-  getDevToolsState().then((data) => {
-    appConnected.value = data!.connected
-    clientConnected.value = data!.clientConnected
-  })
-
-  onDevToolsStateUpdated((data) => {
-    appConnected.value = data.connected
-    clientConnected.value = data.clientConnected
-  })
-
-  provide(VueDevToolsConnectStateSymbol, connected)
-
-  return {
-    connected,
-  }
-}
-
-export function useDevToolsConnectState() {
-  return inject(VueDevToolsConnectStateSymbol, ref(false))
-}
-
-export function onDevToolsClientConnected(callback: () => void) {
-  const connected = useDevToolsConnectState()
-
-  if (connected.value) {
-    callback()
-  }
-  else {
-    const stop = watch(connected, (value) => {
-      if (value) {
-        stop()
-        callback()
-      }
-    })
-  }
-}
diff --git a/packages/applet/src/composables/custom-inspector-state.ts b/packages/applet/src/composables/custom-inspector-state.ts
new file mode 100644
index 00000000..9226ce10
--- /dev/null
+++ b/packages/applet/src/composables/custom-inspector-state.ts
@@ -0,0 +1,28 @@
+import { inject, provide, ref } from 'vue'
+import type { InjectionKey, Ref } from 'vue'
+
+type CustomInspectorState = Partial<{
+  homepage: string
+  id: string
+  label: string
+  logo: string
+  timelineLayerIds: string[]
+}>
+
+const VueDevToolsStateSymbol: InjectionKey<Ref<CustomInspectorState>> = Symbol('VueDevToolsCustomInspectorStateSymbol')
+
+export function useCustomInspectorState() {
+  return inject(VueDevToolsStateSymbol)!
+}
+
+export function createCustomInspectorStateContext() {
+  const state = ref({
+    homepage: '',
+    id: '',
+    label: '',
+    logo: '',
+    timelineLayerIds: [],
+  }) as Ref<CustomInspectorState>
+  provide(VueDevToolsStateSymbol, state)
+  return state
+}
diff --git a/packages/applet/src/composables/custom-inspector.ts b/packages/applet/src/composables/custom-inspector.ts
new file mode 100644
index 00000000..a94e3ee7
--- /dev/null
+++ b/packages/applet/src/composables/custom-inspector.ts
@@ -0,0 +1,51 @@
+import { onUnmounted, ref } from 'vue'
+import { DevToolsMessagingEvents, onRpcConnected, rpc } from '@vue/devtools-core'
+
+export interface CustomInspectorType {
+  id: string
+  label: string
+  logo: string
+  packageName: string | undefined
+  homepage: string | undefined
+}
+
+export function useCustomInspector() {
+  const registeredInspector = ref<CustomInspectorType[]>([])
+  const inspectors = ref<CustomInspectorType[]>([])
+
+  function onUpdate(inspector: CustomInspectorType[]) {
+    inspectors.value = inspector
+    if (inspector.length < registeredInspector.value.length) {
+      registeredInspector.value = []
+    }
+    inspectors.value.forEach((inspector) => {
+      register(inspector)
+    })
+  }
+  onRpcConnected(() => {
+    rpc.value.getCustomInspector().then((inspector) => {
+      inspectors.value = inspector
+      inspectors.value.forEach((inspector) => {
+        register(inspector)
+      })
+    })
+    rpc.functions.on(DevToolsMessagingEvents.INSPECTOR_UPDATED, onUpdate)
+  })
+
+  function register(inspector: CustomInspectorType) {
+    if (registeredInspector.value.some(i => i.id === inspector.id)) {
+      return
+    }
+
+    registeredInspector.value.push(inspector)
+  }
+
+  onUnmounted(() => {
+    rpc.functions.off(DevToolsMessagingEvents.INSPECTOR_UPDATED, onUpdate)
+  })
+
+  return {
+    registeredInspector,
+    register,
+  }
+}
diff --git a/packages/applet/src/composables/devtools-state.ts b/packages/applet/src/composables/devtools-state.ts
deleted file mode 100644
index a0ec7a6f..00000000
--- a/packages/applet/src/composables/devtools-state.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { getDevToolsState, onDevToolsStateUpdated } from '@vue/devtools-core'
-import type { InjectionKey, Ref } from 'vue'
-import { inject, provide, ref } from 'vue'
-
-import type { AppRecord } from '@vue/devtools-kit'
-
-export type DevtoolsBridgeAppRecord = Pick<AppRecord, 'name' | 'id' | 'version' | 'routerId' | 'moduleDetectives'>
-
-const VueDevToolsStateSymbol: InjectionKey<{
-  appRecords: Ref<Array<DevtoolsBridgeAppRecord>>
-  activeAppRecordId: Ref<string>
-}> = Symbol('VueDevToolsStateSymbol')
-
-export function createDevToolsStateContext() {
-  const appRecords = ref<Array<DevtoolsBridgeAppRecord>>([])
-  const activeAppRecordId = ref('')
-
-  getDevToolsState().then((data) => {
-    appRecords.value = data!.appRecords
-    activeAppRecordId.value = data!.activeAppRecordId!
-  })
-
-  onDevToolsStateUpdated((data) => {
-    appRecords.value = data.appRecords
-    activeAppRecordId.value = data.activeAppRecordId!
-  })
-
-  provide(VueDevToolsStateSymbol, {
-    appRecords,
-    activeAppRecordId,
-  })
-
-  return {
-    appRecords,
-    activeAppRecordId,
-  }
-}
-
-export function useDevToolsState() {
-  return inject(VueDevToolsStateSymbol, {
-    appRecords: ref([]),
-    activeAppRecordId: ref(''),
-  })
-}
diff --git a/packages/applet/src/composables/virtual-router.ts b/packages/applet/src/composables/virtual-router.ts
index a82c398a..6103fc69 100644
--- a/packages/applet/src/composables/virtual-router.ts
+++ b/packages/applet/src/composables/virtual-router.ts
@@ -1,19 +1,23 @@
-import type { Component, InjectionKey, Ref } from 'vue'
-import { computed, defineComponent, h, inject, provide, ref } from 'vue'
+import type { Component, ComputedRef, InjectionKey, Ref } from 'vue'
+import { computed, defineComponent, h, inject, provide, ref, toValue } from 'vue'
+import type { MaybeRef } from '@vueuse/core'
 
+export interface VirtualRoute { path: string, component: Component, icon?: string, name?: string }
 const VirtualRouteKey: InjectionKey<Ref<{ path: string }>> = Symbol('VirtualRouteKey')
-const VirtualRoutesKey: InjectionKey<{ path: string, component: Component, icon?: string, name?: string }[]> = Symbol('VirtualRoutesKey')
+const VirtualRoutesKey: InjectionKey<ComputedRef<VirtualRoute[]>> = Symbol('VirtualRoutesKey')
 
-export function registerVirtualRouter(routes: { path: string, component: Component, icon?: string, name?: string }[]) {
+export function registerVirtualRouter(routes: MaybeRef<VirtualRoute[]>) {
   const route = ref<{ path: string, icon?: string }>({
     path: '/',
   })
+
+  const _routes = computed(() => toValue(routes))
   const routePath = computed(() => route.value.path)
 
   const VirtualRouterView = defineComponent({
     setup() {
       return () => {
-        const route = routes.find(route => route.path === routePath.value)
+        const route = _routes.value.find(route => route.path === routePath.value)
         if (route)
           return h(route.component)
 
@@ -22,9 +26,13 @@ export function registerVirtualRouter(routes: { path: string, component: Compone
     },
   })
 
+  function restoreRouter() {
+    route.value.path = '/'
+  }
+
   provide(VirtualRouteKey, route)
-  provide(VirtualRoutesKey, routes)
-  return { VirtualRouterView }
+  provide(VirtualRoutesKey, _routes)
+  return { VirtualRouterView, restoreRouter }
 }
 
 export function useVirtualRouter() {
diff --git a/packages/applet/src/index.ts b/packages/applet/src/index.ts
index fc7ccdfc..61cb2755 100644
--- a/packages/applet/src/index.ts
+++ b/packages/applet/src/index.ts
@@ -6,6 +6,5 @@ import 'floating-vue/dist/style.css'
 export * from './modules/pinia'
 export * from './modules/components'
 export * from './modules/router'
-export * from './modules/vue-query'
-export * from './modules/vuex'
-export * from './modules/vee-validate'
+export * from './modules/custom-inspector'
+export * from './composables/custom-inspector'
diff --git a/packages/applet/src/modules/components/index.vue b/packages/applet/src/modules/components/index.vue
index cf5a1e25..0fe0cd31 100644
--- a/packages/applet/src/modules/components/index.vue
+++ b/packages/applet/src/modules/components/index.vue
@@ -1,16 +1,10 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { Pane, Splitpanes } from 'splitpanes'
-import type { ComponentTreeNode, InspectorState } from '@vue/devtools-kit'
+import type { CustomInspectorNode, CustomInspectorState } from '@vue/devtools-kit'
 import {
-  cancelInspectComponentInspector as cancelInspectComponentInspectorAction,
-  getComponentRenderCode as getComponentRenderCodeAction,
-  getInspectorState,
-  getInspectorTree,
-  inspectComponentInspector as inspectComponentInspectorAction,
-  onInspectorStateUpdated,
-  onInspectorTreeUpdated,
-  scrollToComponent as scrollToComponentAction,
+  DevToolsMessagingEvents,
+  rpc,
 } from '@vue/devtools-core'
 import { parse } from '@vue/devtools-kit'
 import { useElementSize, useToggle, watchDebounced } from '@vueuse/core'
@@ -71,13 +65,13 @@ function getTargetLinkedNodes(list: string[][], target: string) {
 }
 
 const inspectorId = 'components'
-const tree = ref<ComponentTreeNode[]>([])
+const tree = ref<Array<CustomInspectorNode>>([])
 const treeNodeLinkedList = computed(() => tree.value?.length ? dfs(tree.value?.[0]) : [])
-const activeComponentState = ref<Record<string, InspectorState[]>>({})
+const activeComponentState = ref<Record<string, any[]>>({})
 const activeComponentId = ref('')
 const activeTreeNode = computed(() => {
-  const res: ComponentTreeNode[] = []
-  const find = (treeNode: ComponentTreeNode[]) => {
+  const res: CustomInspectorNode[] = []
+  const find = (treeNode: CustomInspectorNode[]) => {
     treeNode.forEach((item) => {
       if (item.id === activeComponentId.value)
         res.push(item)
@@ -118,16 +112,16 @@ const { expanded: expandedStateNodes } = createExpandedContext('component-state'
 createSelectedContext()
 
 function getComponentsInspectorTree(filter = '') {
-  return getInspectorTree({ inspectorId, filter }).then((_data) => {
-    const data = parse(_data!)
-    tree.value = data
+  return rpc.value.getInspectorTree({ inspectorId, filter }).then((data) => {
+    const res = parse(data)
+    tree.value = res
     activeComponentId.value = tree.value?.[0]?.id
     expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
     componentTreeLoaded.value = true
   })
 }
 
-function normalizeComponentState(data: { state?: InspectorState[] }) {
+function normalizeComponentState(data: { state?: any[] }) {
   if (!data || !data?.state)
     return {}
   const res = {}
@@ -140,7 +134,7 @@ function normalizeComponentState(data: { state?: InspectorState[] }) {
 }
 
 function getComponentState(id: string) {
-  getInspectorState({ inspectorId, nodeId: id }).then((data) => {
+  rpc.value.getInspectorState({ inspectorId, nodeId: id }).then((data) => {
     activeComponentState.value = normalizeComponentState(parse(data!))
     expandedStateNodes.value = Array.from({ length: Object.keys(activeComponentState.value).length }, (_, i) => `${i}`)
   })
@@ -153,22 +147,38 @@ watch(activeComponentId, (id) => {
   }
 })
 
-onInspectorStateUpdated((data) => {
-  if (data.inspectorId !== inspectorId)
+function onInspectorStateUpdated(_data: string) {
+  const data = parse(_data) as {
+    inspectorId: string
+    state: CustomInspectorState
+    nodeId: string
+  }
+  if (data.inspectorId !== inspectorId || data.nodeId !== activeComponentId.value)
     return
 
-  activeComponentState.value = normalizeComponentState({ state: data.state })
-})
+  activeComponentState.value = normalizeComponentState({ state: data.state.state })
+}
+
+rpc.functions.on(DevToolsMessagingEvents.INSPECTOR_STATE_UPDATED, onInspectorStateUpdated)
 
 getComponentsInspectorTree()
 
-onInspectorTreeUpdated((data) => {
-  if (!data?.data.length || data.inspectorId !== inspectorId)
+function onInspectorTreeUpdated(_data: string) {
+  const data = parse(_data) as {
+    inspectorId: string
+    rootNodes: CustomInspectorNode[]
+  }
+  if (data.inspectorId !== inspectorId)
     return
+  tree.value = data.rootNodes
+  expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
+}
 
-  tree.value = data.data
+rpc.functions.on(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, onInspectorTreeUpdated)
 
-  // expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
+onUnmounted(() => {
+  rpc.functions.off(DevToolsMessagingEvents.INSPECTOR_STATE_UPDATED, onInspectorStateUpdated)
+  rpc.functions.off(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, onInspectorTreeUpdated)
 })
 
 watchDebounced(filterComponentName, (v) => {
@@ -182,8 +192,8 @@ watchDebounced(filterComponentName, (v) => {
 function inspectComponentInspector() {
   inspectComponentTipVisible.value = true
   emit('onInspectComponentStart')
-  inspectComponentInspectorAction().then((_data) => {
-    const data = JSON.parse(_data!)
+  rpc.value.inspectComponentInspector().then((_data) => {
+    const data = JSON.parse(_data! as unknown as string)
     activeComponentId.value = data.id
     if (!expandedTreeNodes.value.includes(data.id))
       expandedTreeNodes.value.push(data.id)
@@ -198,17 +208,15 @@ function inspectComponentInspector() {
 
 function cancelInspectComponentInspector() {
   inspectComponentTipVisible.value = false
-  cancelInspectComponentInspectorAction()
+  rpc.value.cancelInspectComponentInspector()
 }
 
 function scrollToComponent() {
-  scrollToComponentAction({
-    id: activeComponentId.value,
-  })
+  rpc.value.scrollToComponent(activeComponentId.value)
 }
 
 function getComponentRenderCode() {
-  getComponentRenderCodeAction(activeComponentId.value).then((data) => {
+  rpc.value.getComponentRenderCode(activeComponentId.value).then((data) => {
     componentRenderCode.value = data!
     componentRenderCodeVisible.value = true
   })
diff --git a/packages/applet/src/modules/custom-inspector/components/DevToolsLogo.vue b/packages/applet/src/modules/custom-inspector/components/DevToolsLogo.vue
new file mode 100644
index 00000000..089ada18
--- /dev/null
+++ b/packages/applet/src/modules/custom-inspector/components/DevToolsLogo.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg width="175" height="34" viewBox="0 0 175 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor" d="M0.570999 33.3121V1.80715H10.8288C13.6975 1.80715 16.3198 2.39225 18.6962 3.56242C21.0721 4.73263 22.9701 6.5029 24.3901 8.87327C25.81 11.2136 26.52 14.1091 26.52 17.5596C26.52 20.9801 25.81 23.8756 24.3901 26.2458C22.9701 28.6162 21.0721 30.3868 18.6962 31.5568C16.3198 32.7269 13.6975 33.3121 10.8288 33.3121H0.570999ZM10.1332 27.461C12.9439 27.461 15.2767 26.6812 17.1314 25.1208C18.9858 23.5306 19.913 21.0102 19.913 17.5596C19.913 14.1091 18.9858 11.5887 17.1314 9.99846C15.2767 8.40819 12.9439 7.61306 10.1332 7.61306H7.09085V27.461H10.1332ZM50.3628 25.6159C49.928 28.0463 48.7544 29.9966 46.8421 31.4669C44.9297 32.9368 42.6257 33.672 39.931 33.672C37.5551 33.672 35.5119 33.117 33.8024 32.007C32.1216 30.8668 30.8468 29.3965 29.9772 27.5961C29.1081 25.7961 28.6733 23.9056 28.6733 21.9253C28.6733 19.915 29.0645 18.0247 29.8468 16.2544C30.6584 14.4841 31.8756 13.0439 33.498 11.9337C35.1499 10.8236 37.1491 10.2685 39.4962 10.2685C41.9306 10.2685 43.9589 10.8086 45.5817 11.8888C47.2045 12.9689 48.3924 14.3491 49.1456 16.0294C49.928 17.7097 50.3192 19.4799 50.3192 21.3402C50.3192 22.0303 50.2904 22.7054 50.2324 23.3656H34.4979C34.7295 24.9858 35.3091 26.2612 36.2363 27.191C37.1927 28.0914 38.4243 28.5412 39.931 28.5412C41.1482 28.5412 42.1478 28.3014 42.9301 27.8214C43.7125 27.3111 44.2197 26.5759 44.4513 25.6159H50.3628ZM39.4962 14.8592C38.1055 14.8592 37.0043 15.2343 36.1931 15.9844C35.3815 16.7045 34.8455 17.8447 34.5847 19.4049H44.2777C44.1905 18.0847 43.7269 17.0045 42.8865 16.1644C42.0466 15.2943 40.9162 14.8592 39.4962 14.8592ZM64.1603 33.3121H58.5969L50.599 10.6285H56.7713L61.3788 25.3008L65.9427 10.6285H72.1582L64.1603 33.3121ZM88.2757 33.3121H81.7559V7.61306H72.7585V1.80715H97.2731V7.61306H88.2757V33.3121ZM106.325 33.672C104.123 33.672 102.138 33.1771 100.37 32.1868C98.6029 31.1667 97.2266 29.7717 96.2414 28.0011C95.2562 26.2011 94.7634 24.1907 94.7634 21.9703C94.7634 19.75 95.2562 17.7547 96.2414 15.9844C97.2266 14.1841 98.6029 12.7889 100.37 11.7987C102.138 10.7786 104.123 10.2685 106.325 10.2685C108.528 10.2685 110.513 10.7786 112.28 11.7987C114.048 12.7889 115.424 14.1841 116.409 15.9844C117.395 17.7547 117.887 19.75 117.887 21.9703C117.887 24.1907 117.395 26.2011 116.409 28.0011C115.424 29.7717 114.048 31.1667 112.28 32.1868C110.513 33.1771 108.528 33.672 106.325 33.672ZM106.325 28.2712C107.948 28.2712 109.266 27.6864 110.281 26.5159C111.295 25.3458 111.802 23.8306 111.802 21.9703C111.802 20.08 111.295 18.5498 110.281 17.3796C109.266 16.2094 107.948 15.6243 106.325 15.6243C104.702 15.6243 103.384 16.2094 102.37 17.3796C101.356 18.5498 100.848 20.08 100.848 21.9703C100.848 23.8306 101.356 25.3458 102.37 26.5159C103.384 27.6864 104.702 28.2712 106.325 28.2712ZM131.624 33.672C129.422 33.672 127.436 33.1771 125.669 32.1868C123.901 31.1667 122.525 29.7717 121.54 28.0011C120.555 26.2011 120.062 24.1907 120.062 21.9703C120.062 19.75 120.555 17.7547 121.54 15.9844C122.525 14.1841 123.901 12.7889 125.669 11.7987C127.436 10.7786 129.422 10.2685 131.624 10.2685C133.826 10.2685 135.811 10.7786 137.579 11.7987C139.346 12.7889 140.722 14.1841 141.708 15.9844C142.693 17.7547 143.186 19.75 143.186 21.9703C143.186 24.1907 142.693 26.2011 141.708 28.0011C140.722 29.7717 139.346 31.1667 137.579 32.1868C135.811 33.1771 133.826 33.672 131.624 33.672ZM131.624 28.2712C133.246 28.2712 134.565 27.6864 135.579 26.5159C136.593 25.3458 137.101 23.8306 137.101 21.9703C137.101 20.08 136.593 18.5498 135.579 17.3796C134.565 16.2094 133.246 15.6243 131.624 15.6243C130.001 15.6243 128.682 16.2094 127.668 17.3796C126.654 18.5498 126.147 20.08 126.147 21.9703C126.147 23.8306 126.654 25.3458 127.668 26.5159C128.682 27.6864 130.001 28.2712 131.624 28.2712ZM152.88 33.3121H146.838V0.771999H152.88V33.3121ZM165.652 33.672C162.957 33.672 160.769 32.9522 159.088 31.5117C157.437 30.0418 156.553 28.0914 156.437 25.661H161.653C161.768 26.6812 162.174 27.4913 162.87 28.0914C163.594 28.6613 164.522 28.9463 165.652 28.9463C166.579 28.9463 167.332 28.7363 167.912 28.3163C168.52 27.8963 168.825 27.3712 168.825 26.7412C168.825 25.9008 168.477 25.3159 167.782 24.9858C167.086 24.6557 165.985 24.3557 164.478 24.0856C162.913 23.7856 161.638 23.4556 160.653 23.0955C159.668 22.7354 158.813 22.0903 158.089 21.1602C157.393 20.2 157.045 18.8498 157.045 17.1096C157.045 15.7893 157.379 14.6192 158.045 13.599C158.741 12.5488 159.682 11.7387 160.871 11.1686C162.058 10.5685 163.391 10.2685 164.869 10.2685C167.506 10.2685 169.636 10.9436 171.259 12.2938C172.91 13.644 173.794 15.4293 173.91 17.6496H168.651C168.535 16.7195 168.115 15.9994 167.39 15.4893C166.695 14.9492 165.912 14.6792 165.043 14.6792C164.174 14.6792 163.478 14.8742 162.957 15.2643C162.435 15.6543 162.174 16.1944 162.174 16.8845C162.174 17.7246 162.508 18.2948 163.174 18.5948C163.87 18.8648 164.956 19.1049 166.434 19.3149C168.028 19.5549 169.331 19.855 170.346 20.215C171.389 20.5451 172.287 21.2052 173.041 22.1953C173.794 23.1855 174.171 24.6257 174.171 26.5159C174.171 28.6762 173.389 30.4166 171.824 31.737C170.288 33.0271 168.23 33.672 165.652 33.672Z" />
+  </svg>
+</template>
diff --git a/packages/applet/src/modules/vue-query/components/Home.vue b/packages/applet/src/modules/custom-inspector/components/Home.vue
similarity index 50%
rename from packages/applet/src/modules/vue-query/components/Home.vue
rename to packages/applet/src/modules/custom-inspector/components/Home.vue
index 6812b84d..9b8cab8e 100644
--- a/packages/applet/src/modules/vue-query/components/Home.vue
+++ b/packages/applet/src/modules/custom-inspector/components/Home.vue
@@ -1,23 +1,41 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import DevToolsLogo from './DevToolsLogo.vue'
 import { useVirtualRouter } from '~/composables/virtual-router'
+import { useCustomInspectorState } from '~/composables/custom-inspector-state'
 
 const virtualRouter = useVirtualRouter()
+const state = useCustomInspectorState()
+const imageLoaded = ref(false)
+const imageLoadedError = ref(false)
+function onImageLoad() {
+  imageLoaded.value = true
+}
+function onImageLoadError() {
+  imageLoaded.value = true
+  imageLoadedError.value = true
+}
 </script>
 
 <template>
   <div h-full w-full flex items-center>
     <div flex="~ col gap2" ma px-5>
       <div flex-auto />
-
       <!-- Banner -->
       <div flex="~ col" mt-20 items-center>
         <div flex="~" mt--10 items-center justify-center>
-          <DevToolsLogo h-18 />
+          <span>
+            <span v-if="!imageLoaded" class="inline-block w20" />
+            <img v-show="imageLoaded && !imageLoadedError" :src="state.logo" :alt="`${state.label} Logo`" class="inline-block w20" @error="onImageLoadError" @load="onImageLoad">
+            <span v-if="imageLoadedError" class="mr2 inline-block min-w-20 text-center text-10 font-600">{{ state.label }}</span>
+          </span>
+          <span>
+            <DevToolsLogo h-18 />
+          </span>
         </div>
         <div mb6 mt--1 text-center text-sm flex="~ gap-1">
           <span op40>
-            Vue Query DevTools
+            {{ state.label }} DevTools
           </span>
         </div>
       </div>
@@ -29,18 +47,14 @@ const virtualRouter = useVirtualRouter()
           <div i-carbon-tree-view-alt text-3xl />
           <code>State</code>
         </div>
-        <div flex="~ col auto" min-w-40 p4 theme-card-lime @click="virtualRouter.push('/timeline')">
+        <div v-if="state.timelineLayerIds?.length" flex="~ col auto" min-w-40 p4 theme-card-lime @click="virtualRouter.push('/timeline')">
           <div i-mdi:timeline-clock-outline text-3xl />
           <div>Timeline</div>
         </div>
       </div>
 
       <div flex="~ gap-6 wrap" mt-5 items-center justify-center>
-        <a href="https://github.com/TanStack/query/tree/main/packages/vue-query/" target="_blank" flex="~ gap1" items-center op50 hover="op100 text-blue" transition>
-          <div i-carbon-star />
-          Star on GitHub
-        </a>
-        <a href="https://tanstack.com/query/latest/docs/framework/vue/overview/" target="_blank" flex="~ gap1" items-center op50 hover="op100 text-yellow" transition>
+        <a :href="state.homepage" target="_blank" flex="~ gap1" items-center op50 hover="op100 text-yellow" transition>
           <div i-carbon-document />
           View Documentation
         </a>
diff --git a/packages/applet/src/modules/vue-query/components/state/Index.vue b/packages/applet/src/modules/custom-inspector/components/state/Index.vue
similarity index 52%
rename from packages/applet/src/modules/vue-query/components/state/Index.vue
rename to packages/applet/src/modules/custom-inspector/components/state/Index.vue
index faa8a292..6955b8d5 100644
--- a/packages/applet/src/modules/vue-query/components/state/Index.vue
+++ b/packages/applet/src/modules/custom-inspector/components/state/Index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { Pane, Splitpanes } from 'splitpanes'
-import { callInspectorAction, callInspectorNodeAction, getInspectorActions, getInspectorNodeActions, getInspectorState, getInspectorTree, onInspectorStateUpdated, onInspectorTreeUpdated } from '@vue/devtools-core'
+import { DevToolsMessagingEvents, rpc } from '@vue/devtools-core'
 import { parse } from '@vue/devtools-kit'
-import type { InspectorNodeTag, InspectorState } from '@vue/devtools-kit'
+import type { CustomInspectorNode, CustomInspectorOptions, CustomInspectorState } from '@vue/devtools-kit'
 import { vTooltip } from '@vue/devtools-ui'
 import Navbar from '~/components/basic/Navbar.vue'
 import SelectiveList from '~/components/basic/SelectiveList.vue'
@@ -11,32 +11,30 @@ import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
 import Empty from '~/components/basic/Empty.vue'
 import RootStateViewer from '~/components/state/RootStateViewer.vue'
 import { createExpandedContext } from '~/composables/toggle-expanded'
+import { useCustomInspectorState } from '~/composables/custom-inspector-state'
 
 const { expanded: expandedStateNodes } = createExpandedContext('vue-query-state')
 
-interface NodeAction {
-  icon: string
-  tooltip: string
-  actions?: (payload: unknown) => void
-}
-const inspectorId = 'vue-query'
-const nodeActions = ref<NodeAction[]>([])
-const actions = ref<NodeAction[]>([])
+const customInspectState = useCustomInspectorState()
+
+const inspectorId = computed(() => customInspectState.value.id!)
+const nodeActions = ref<CustomInspectorOptions['nodeActions']>([])
+const actions = ref<CustomInspectorOptions['nodeActions']>([])
 
 const selected = ref('')
-const tree = ref<{ id: string, label: string, tags: InspectorNodeTag[] }[]>([])
-const state = ref<Record<string, InspectorState[]>>({})
+const tree = ref<CustomInspectorNode[]>([])
+const state = ref<Record<string, CustomInspectorState[]>>({})
 const emptyState = computed(() => !Object.keys(state.value).length)
 
 function getNodeActions() {
-  getInspectorNodeActions(inspectorId).then((actions) => {
-    nodeActions.value = actions as NodeAction[]
+  rpc.value.getInspectorNodeActions(inspectorId.value).then((actions) => {
+    nodeActions.value = actions
   })
 }
 
 function getActions() {
-  getInspectorActions(inspectorId).then((_actions) => {
-    actions.value = _actions as NodeAction[]
+  rpc.value.getInspectorActions(inspectorId.value).then((_actions) => {
+    actions.value = _actions
   })
 }
 
@@ -45,14 +43,14 @@ getNodeActions()
 getActions()
 
 function callNodeAction(index: number) {
-  callInspectorNodeAction(inspectorId, index, selected.value)
+  rpc.value.callInspectorNodeAction(inspectorId.value, index, selected.value)
 }
 
 function callAction(index: number) {
-  callInspectorAction(inspectorId, index, selected.value)
+  rpc.value.callInspectorAction(inspectorId.value, index)
 }
 
-function filterEmptyState(data: Record<string, InspectorState[]>) {
+function filterEmptyState(data: Record<string, CustomInspectorState[]>) {
   for (const key in data) {
     if (!data[key]?.length)
       delete data[key]
@@ -60,64 +58,82 @@ function filterEmptyState(data: Record<string, InspectorState[]>) {
   return data
 }
 
-function getVueQueryState(nodeId: string) {
-  getInspectorState({ inspectorId, nodeId }).then((data) => {
+function getInspectorState(nodeId: string) {
+  rpc.value.getInspectorState({ inspectorId: inspectorId.value, nodeId }).then((data) => {
     state.value = filterEmptyState(parse(data!))
     expandedStateNodes.value = Array.from({ length: Object.keys(state.value).length }, (_, i) => `${i}`)
   })
 }
 
-function clearVueQueryState() {
+function clearInspectorState() {
   state.value = {}
 }
 
 watch(selected, () => {
-  clearVueQueryState()
-  getVueQueryState(selected.value)
+  clearInspectorState()
+  getInspectorState(selected.value)
 })
 
-const getVueQueryInspectorTree = () => {
-  getInspectorTree({ inspectorId, filter: '' }).then((_data) => {
+const getInspectorTree = () => {
+  rpc.value.getInspectorTree({ inspectorId: inspectorId.value, filter: '' }).then((_data) => {
     const data = parse(_data!)
     tree.value = data
     if (!selected.value && data.length) {
       selected.value = data[0].id
-      getVueQueryState(data[0].id)
+      getInspectorState(data[0].id)
     }
   })
 }
-getVueQueryInspectorTree()
+getInspectorTree()
 
-onInspectorTreeUpdated((data) => {
-  if (!data?.data.length || data.inspectorId !== inspectorId)
+function onInspectorTreeUpdated(_data: string) {
+  const data = parse(_data) as {
+    inspectorId: string
+    rootNodes: CustomInspectorNode[]
+  }
+  if (!data.rootNodes.length || data.inspectorId !== inspectorId.value)
     return
-  tree.value = data.data as unknown as { id: string, label: string, tags: InspectorNodeTag[] }[]
-  if ((!selected.value && data.data.length) || (selected.value && !data.data.find(node => node.id === selected.value))) {
-    selected.value = data.data[0].id
-    getVueQueryState(data.data[0].id)
+  tree.value = data.rootNodes
+  if ((!selected.value && data.rootNodes.length) || (selected.value && !data.rootNodes.find(node => node.id === selected.value))) {
+    selected.value = data.rootNodes[0].id
+    getInspectorState(data.rootNodes[0].id)
   }
-})
+}
 
-onInspectorStateUpdated((data) => {
-  if (!data || data.inspectorId !== inspectorId)
+function onInspectorStateUpdated(_data: string) {
+  const data = parse(_data) as {
+    inspectorId: string
+    state: CustomInspectorState
+    nodeId: string
+  }
+  if (data.inspectorId !== inspectorId.value || !data.state)
     return
-  const { inspectorId: _inspectorId, ...filtered } = data
 
-  state.value = filterEmptyState(filtered)
+  const { inspectorId: _inspectorId, ...filtered } = data.state
+
+  state.value = filterEmptyState(filtered as any)
   expandedStateNodes.value = Array.from({ length: Object.keys(state.value).length }, (_, i) => `${i}`)
+}
+
+rpc.functions.on(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, onInspectorTreeUpdated)
+rpc.functions.on(DevToolsMessagingEvents.INSPECTOR_STATE_UPDATED, onInspectorStateUpdated)
+
+onUnmounted(() => {
+  rpc.functions.off(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, onInspectorTreeUpdated)
+  rpc.functions.off(DevToolsMessagingEvents.INSPECTOR_STATE_UPDATED, onInspectorStateUpdated)
 })
 </script>
 
 <template>
   <div class="h-full flex flex-col">
-    <DevToolsHeader doc-link="https://tanstack.com/query/latest/docs/framework/vue/overview/" github-repo-link="https://github.com/TanStack/query/tree/main/packages/vue-query/">
+    <DevToolsHeader :doc-link="customInspectState.homepage!">
       <Navbar />
     </DevToolsHeader>
     <template v-if="tree.length">
       <Splitpanes class="flex-1 overflow-auto">
         <Pane border="r base" size="40" h-full>
           <div h-full select-none overflow-scroll class="no-scrollbar">
-            <div v-if="actions.length" class="flex justify-end pb-1" border="b dashed base">
+            <div v-if="actions?.length" class="flex justify-end pb-1" border="b dashed base">
               <div class="flex items-center gap-2 px-1">
                 <div v-for="(action, index) in actions" :key="index" v-tooltip.bottom-end="{ content: action.tooltip }" class="flex items-center gap1" @click="callAction(index)">
                   <i :class="`i-ic-baseline-${action.icon.replace(/\_/g, '-')}`" cursor-pointer op70 text-base hover:op100 />
@@ -129,7 +145,7 @@ onInspectorStateUpdated((data) => {
         </Pane>
         <Pane size="60">
           <div class="h-full flex flex-col p2">
-            <div v-if="nodeActions.length" class="flex justify-end pb-1" border="b dashed base">
+            <div v-if="nodeActions?.length" class="flex justify-end pb-1" border="b dashed base">
               <div class="flex items-center gap-2 px-1">
                 <div v-for="(action, index) in nodeActions" :key="index" v-tooltip.bottom-end="{ content: action.tooltip }" class="flex items-center gap1" @click="callNodeAction(index)">
                   <i :class="`i-ic-baseline-${action.icon.replace(/\_/g, '-')}`" cursor-pointer op70 text-base hover:op100 />
diff --git a/packages/applet/src/modules/custom-inspector/components/timeline/Index.vue b/packages/applet/src/modules/custom-inspector/components/timeline/Index.vue
new file mode 100644
index 00000000..457e256a
--- /dev/null
+++ b/packages/applet/src/modules/custom-inspector/components/timeline/Index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Timeline from '~/components/timeline/index.vue'
+import { useCustomInspectorState } from '~/composables/custom-inspector-state'
+
+const state = useCustomInspectorState()
+</script>
+
+<template>
+  <Timeline :layer-ids="state.timelineLayerIds!" :doc-link="state.homepage!" />
+</template>
diff --git a/packages/applet/src/modules/custom-inspector/index.ts b/packages/applet/src/modules/custom-inspector/index.ts
new file mode 100644
index 00000000..68c92b3c
--- /dev/null
+++ b/packages/applet/src/modules/custom-inspector/index.ts
@@ -0,0 +1,5 @@
+import CustomInspector from './index.vue'
+
+export {
+  CustomInspector,
+}
diff --git a/packages/applet/src/modules/custom-inspector/index.vue b/packages/applet/src/modules/custom-inspector/index.vue
new file mode 100644
index 00000000..d2aae25f
--- /dev/null
+++ b/packages/applet/src/modules/custom-inspector/index.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { onRpcConnected, rpc } from '@vue/devtools-core'
+
+import Home from './components/Home.vue'
+import State from './components/state/Index.vue'
+import Timeline from './components/timeline/Index.vue'
+import AppConnecting from '~/components/basic/AppConnecting.vue'
+import { VirtualRoute, registerVirtualRouter } from '~/composables/virtual-router'
+import { createCustomInspectorStateContext } from '~/composables/custom-inspector-state'
+
+const props = defineProps<{
+  id: string
+}>()
+
+const emit = defineEmits(['loadError'])
+const inspectorState = createCustomInspectorStateContext()
+const loading = ref(false)
+
+const routes = computed(() => {
+  return [
+    {
+      path: '/',
+      name: 'Home',
+      component: Home,
+      icon: 'https://raw.githubusercontent.com/TanStack/query/main/packages/vue-query/media/vue-query.svg',
+    },
+    {
+      path: '/state',
+      name: 'State',
+      component: State,
+      icon: 'i-carbon-tree-view-alt',
+    },
+    inspectorState.value.timelineLayerIds?.length && ({
+      path: '/timeline',
+      name: 'Timeline',
+      component: Timeline,
+      icon: 'i-mdi:timeline-clock-outline',
+    }),
+  ].filter(Boolean) as VirtualRoute[]
+})
+
+const { VirtualRouterView, restoreRouter } = registerVirtualRouter(routes)
+
+function getInspectorInfo() {
+  loading.value = true
+  onRpcConnected(() => {
+    rpc.value.getInspectorInfo(props.id).then((payload) => {
+      if (!payload) {
+        emit('loadError')
+        return
+      }
+      const state = {
+        homepage: payload?.homepage,
+        id: payload?.id,
+        label: payload?.label,
+        logo: payload?.logo,
+        timelineLayerIds: payload?.timelineLayers.map(item => item.id),
+      }
+      inspectorState.value = state
+      restoreRouter()
+      loading.value = false
+    })
+  })
+}
+
+watch(() => props.id, () => {
+  getInspectorInfo()
+}, {
+  immediate: true,
+})
+</script>
+
+<template>
+  <div h-full w-full>
+    <div v-if="loading">
+      <AppConnecting />
+    </div>
+    <VirtualRouterView v-else />
+  </div>
+</template>
diff --git a/packages/applet/src/modules/pinia/components/store/Index.vue b/packages/applet/src/modules/pinia/components/store/Index.vue
index 9f6746ca..5b71f42f 100644
--- a/packages/applet/src/modules/pinia/components/store/Index.vue
+++ b/packages/applet/src/modules/pinia/components/store/Index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { Pane, Splitpanes } from 'splitpanes'
-import { getInspectorState, getInspectorTree, onInspectorStateUpdated, onInspectorTreeUpdated } from '@vue/devtools-core'
+import { DevToolsMessagingEvents, rpc } from '@vue/devtools-core'
 import { parse } from '@vue/devtools-kit'
-import type { InspectorNodeTag, InspectorState } from '@vue/devtools-kit'
+import type { CustomInspectorNode, CustomInspectorState } from '@vue/devtools-kit'
 import Navbar from '~/components/basic/Navbar.vue'
 import SelectiveList from '~/components/basic/SelectiveList.vue'
 import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
@@ -16,11 +16,8 @@ const { expanded: expandedStateNodes } = createExpandedContext('pinia-store-stat
 const inspectorId = 'pinia'
 
 const selected = ref('')
-const tree = ref<{ id: string, label: string, tags: InspectorNodeTag[] }[]>([])
-const state = ref<{
-  state?: InspectorState[]
-  getters?: InspectorState[]
-}>({})
+const tree = ref<CustomInspectorNode[]>([])
+const state = ref<Record<string, CustomInspectorState[]>>({})
 
 const emptyState = computed(() => !state.value.state?.length && !state.value.getters?.length)
 
@@ -33,7 +30,8 @@ function filterEmptyState(data: Record<string, unknown[] | undefined>) {
 }
 
 function getPiniaState(nodeId: string) {
-  getInspectorState({ inspectorId, nodeId }).then((data) => {
+  rpc.value.getInspectorState({ inspectorId, nodeId }).then((data) => {
+    // @ts-expect-error skip type check
     state.value = filterEmptyState(parse(data!))
     expandedStateNodes.value = Array.from({ length: Object.keys(state.value).length }, (_, i) => `${i}`)
   })
@@ -49,7 +47,7 @@ watch(selected, () => {
 })
 
 const getPiniaInspectorTree = () => {
-  getInspectorTree({ inspectorId, filter: '' }).then((_data) => {
+  rpc.value.getInspectorTree({ inspectorId, filter: '' }).then((_data) => {
     const data = parse(_data!)
     tree.value = data
     if (!selected.value && data.length)
@@ -59,25 +57,47 @@ const getPiniaInspectorTree = () => {
 }
 getPiniaInspectorTree()
 
-onInspectorTreeUpdated((data) => {
-  if (!data?.data.length || data.inspectorId !== inspectorId)
+function onInspectorTreeUpdated(_data: string) {
+  const data = parse(_data) as {
+    inspectorId: string
+    rootNodes: CustomInspectorNode[]
+  }
+  if (data.inspectorId !== inspectorId || !data.rootNodes.length)
     return
-  tree.value = data.data as unknown as { id: string, label: string, tags: InspectorNodeTag[] }[]
-  if (!selected.value && data.data.length) {
-    selected.value = data.data[0].id
-    getPiniaState(data.data[0].id)
+  tree.value = data.rootNodes as unknown as CustomInspectorNode[]
+  if (!selected.value && data.rootNodes.length) {
+    selected.value = data.rootNodes[0].id
+    getPiniaState(data.rootNodes[0].id)
+  }
+}
+
+function onInspectorStateUpdated(_data: string) {
+  const data = parse(_data) as {
+    inspectorId: string
+    state: CustomInspectorState
+    nodeId: string
   }
-})
 
-onInspectorStateUpdated((data) => {
-  if (!data || !data?.state?.length || data.inspectorId !== inspectorId)
+  if (data.inspectorId !== inspectorId)
     return
 
+  const _state = data.state
+
+  // @ts-expect-error skip type check
   state.value = filterEmptyState({
-    state: data.state,
-    getters: data.getters,
+    state: _state.state,
+    getters: _state.getters,
   })
   expandedStateNodes.value = Array.from({ length: Object.keys(state.value).length }, (_, i) => `${i}`)
+}
+
+rpc.functions.on(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, onInspectorTreeUpdated)
+
+rpc.functions.on(DevToolsMessagingEvents.INSPECTOR_STATE_UPDATED, onInspectorStateUpdated)
+
+onUnmounted(() => {
+  rpc.functions.off(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, onInspectorTreeUpdated)
+  rpc.functions.off(DevToolsMessagingEvents.INSPECTOR_STATE_UPDATED, onInspectorStateUpdated)
 })
 </script>
 
diff --git a/packages/applet/src/modules/pinia/index.vue b/packages/applet/src/modules/pinia/index.vue
index d2a447b6..b8f4ea9b 100644
--- a/packages/applet/src/modules/pinia/index.vue
+++ b/packages/applet/src/modules/pinia/index.vue
@@ -5,9 +5,6 @@ import Home from './components/Home.vue'
 import Store from './components/store/Index.vue'
 import Timeline from './components/timeline/Index.vue'
 import { registerVirtualRouter } from '~/composables/virtual-router'
-import { createDevToolsConnectStateContext } from '~/composables/connect-state'
-
-createDevToolsConnectStateContext()
 
 const { VirtualRouterView } = registerVirtualRouter([
   {
diff --git a/packages/applet/src/modules/router/components/routes/Index.vue b/packages/applet/src/modules/router/components/routes/Index.vue
index d0a01b3d..d7b95c88 100644
--- a/packages/applet/src/modules/router/components/routes/Index.vue
+++ b/packages/applet/src/modules/router/components/routes/Index.vue
@@ -1,32 +1,26 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { Pane, Splitpanes } from 'splitpanes'
-import { getInspectorState, getInspectorTree, onInspectorStateUpdated, onInspectorTreeUpdated } from '@vue/devtools-core'
+import { DevToolsMessagingEvents, rpc } from '@vue/devtools-core'
 import { parse } from '@vue/devtools-kit'
-import type { InspectorNodeTag, InspectorState } from '@vue/devtools-kit'
+import type { CustomInspectorNode, CustomInspectorState } from '@vue/devtools-kit'
 import Navbar from '~/components/basic/Navbar.vue'
 import SelectiveList from '~/components/basic/SelectiveList.vue'
 import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
 import Empty from '~/components/basic/Empty.vue'
 import RootStateViewer from '~/components/state/RootStateViewer.vue'
 import { createExpandedContext } from '~/composables/toggle-expanded'
-import { useDevToolsState } from '~/composables/devtools-state'
+import { useCustomInspectorState } from '~/composables/custom-inspector-state'
 
 const { expanded: expandedStateNodes } = createExpandedContext('routes-state')
 
-const devtoolsState = useDevToolsState()
+const customInspectState = useCustomInspectorState()
 
-const inspectorId = computed(() => {
-  const item = devtoolsState.appRecords.value.find(app => app.id === devtoolsState.activeAppRecordId.value)
-  return `router-inspector:${item?.routerId ?? 0}`
-})
+const inspectorId = computed(() => customInspectState.value.id!)
 
 const selected = ref('')
-const tree = ref<{ id: string, label: string, tags: InspectorNodeTag[] }[]>([])
-const state = ref<{
-  state?: InspectorState[]
-  getters?: InspectorState[]
-}>({})
+const tree = ref<CustomInspectorNode[]>([])
+const state = ref<Record<string, CustomInspectorState[]>>({})
 
 function filterEmptyState(data: Record<string, unknown[] | string | undefined>) {
   for (const key in data) {
@@ -37,7 +31,8 @@ function filterEmptyState(data: Record<string, unknown[] | string | undefined>)
 }
 
 function getRoutesState(nodeId: string) {
-  getInspectorState({ inspectorId: inspectorId.value, nodeId }).then((data) => {
+  rpc.value.getInspectorState({ inspectorId: inspectorId.value, nodeId }).then((data) => {
+    // @ts-expect-error skip type check
     state.value = filterEmptyState(parse(data!))
     expandedStateNodes.value = Array.from({ length: Object.keys(state.value).length }, (_, i) => `${i}`)
   })
@@ -53,7 +48,7 @@ watch(selected, () => {
 })
 
 const getRoutesInspectorTree = () => {
-  getInspectorTree({ inspectorId: inspectorId.value, filter: '' }).then((_data) => {
+  rpc.value.getInspectorTree({ inspectorId: inspectorId.value, filter: '' }).then((_data) => {
     const data = parse(_data!)
     tree.value = data
     if (!selected.value && data.length)
@@ -63,22 +58,44 @@ const getRoutesInspectorTree = () => {
 }
 getRoutesInspectorTree()
 
-onInspectorTreeUpdated((data) => {
-  if (!data?.data.length || data.inspectorId !== inspectorId.value)
+function onInspectorTreeUpdated(_data: string) {
+  const data = parse(_data) as {
+    inspectorId: string
+    rootNodes: CustomInspectorNode[]
+  }
+  if (data.inspectorId !== inspectorId.value || !data.rootNodes.length)
     return
-  tree.value = data.data as unknown as { id: string, label: string, tags: InspectorNodeTag[] }[]
-  if (!selected.value && data.data.length) {
-    selected.value = data.data[0].id
-    getRoutesState(data.data[0].id)
+  tree.value = data.rootNodes as unknown as CustomInspectorNode[]
+  if (!selected.value && data.rootNodes.length) {
+    selected.value = data.rootNodes[0].id
+    getRoutesState(data.rootNodes[0].id)
+  }
+}
+
+function onInspectorStateUpdated(_data: string) {
+  const data = parse(_data) as {
+    inspectorId: string
+    state: CustomInspectorState
+    nodeId: string
   }
-})
 
-onInspectorStateUpdated((data) => {
-  if (!data || !data?.state?.length || data.inspectorId !== inspectorId.value)
+  if (data.inspectorId !== inspectorId.value)
     return
 
-  state.value = filterEmptyState(data!)
+  const _state = data.state
+
+  // @ts-expect-error skip type check
+  state.value = filterEmptyState(_state!)
   expandedStateNodes.value = Array.from({ length: Object.keys(state.value).length }, (_, i) => `${i}`)
+}
+
+rpc.functions.on(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, onInspectorTreeUpdated)
+
+rpc.functions.on(DevToolsMessagingEvents.INSPECTOR_STATE_UPDATED, onInspectorStateUpdated)
+
+onUnmounted(() => {
+  rpc.functions.off(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, onInspectorTreeUpdated)
+  rpc.functions.off(DevToolsMessagingEvents.INSPECTOR_STATE_UPDATED, onInspectorStateUpdated)
 })
 </script>
 
diff --git a/packages/applet/src/modules/router/components/timeline/Index.vue b/packages/applet/src/modules/router/components/timeline/Index.vue
index d0703ebc..f87579f3 100644
--- a/packages/applet/src/modules/router/components/timeline/Index.vue
+++ b/packages/applet/src/modules/router/components/timeline/Index.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import Timeline from '~/components/timeline/index.vue'
+import { useCustomInspectorState } from '~/composables/custom-inspector-state'
 
-const LAYER_IDS = ['router:navigations:0']
+const state = useCustomInspectorState()
 </script>
 
 <template>
-  <Timeline :layer-ids="LAYER_IDS" doc-link="https://router.vuejs.org/" github-repo-link="https://github.com/vuejs/router" />
+  <Timeline :layer-ids="state.timelineLayerIds!" doc-link="https://router.vuejs.org/" github-repo-link="https://github.com/vuejs/router" />
 </template>
diff --git a/packages/applet/src/modules/router/index.vue b/packages/applet/src/modules/router/index.vue
index f1d60f04..f924cbd6 100644
--- a/packages/applet/src/modules/router/index.vue
+++ b/packages/applet/src/modules/router/index.vue
@@ -1,15 +1,18 @@
 <script setup lang="ts">
+import { ref, watch } from 'vue'
+import { onRpcConnected, rpc } from '@vue/devtools-core'
 import Home from './components/Home.vue'
 import Routes from './components/routes/Index.vue'
 import Timeline from './components/timeline/Index.vue'
 import { registerVirtualRouter } from '~/composables/virtual-router'
-import { createDevToolsConnectStateContext } from '~/composables/connect-state'
-import { createDevToolsStateContext } from '~/composables/devtools-state'
+import { createCustomInspectorStateContext } from '~/composables/custom-inspector-state'
 
-createDevToolsConnectStateContext()
-createDevToolsStateContext()
-
-const { VirtualRouterView } = registerVirtualRouter([
+const props = defineProps<{
+  id: string
+}>()
+const inspectorState = createCustomInspectorStateContext()
+const loading = ref(false)
+const { VirtualRouterView, restoreRouter } = registerVirtualRouter([
   {
     path: '/',
     name: 'Home',
@@ -29,6 +32,33 @@ const { VirtualRouterView } = registerVirtualRouter([
     icon: 'i-mdi:timeline-clock-outline',
   },
 ])
+
+function getInspectorInfo() {
+  loading.value = true
+  onRpcConnected(() => {
+    rpc.value.getInspectorInfo(props.id).then((payload) => {
+      if (!payload) {
+        return
+      }
+      const state = {
+        homepage: payload?.homepage,
+        id: payload?.id,
+        label: payload?.label,
+        logo: payload?.logo,
+        timelineLayerIds: payload?.timelineLayers.map(item => item.id),
+      }
+      inspectorState.value = state
+      restoreRouter()
+      loading.value = false
+    })
+  })
+}
+
+watch(() => props.id, (v) => {
+  if (v) {
+    getInspectorInfo()
+  }
+})
 </script>
 
 <template>
diff --git a/packages/applet/src/modules/vee-validate/components/DevToolsLogo.vue b/packages/applet/src/modules/vee-validate/components/DevToolsLogo.vue
deleted file mode 100644
index 8b25ad33..00000000
--- a/packages/applet/src/modules/vee-validate/components/DevToolsLogo.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <svg viewBox="0 0 566 154" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384.9216 333.356828" width="10em">
-      <path fill="#06d77b" d="m320.544 0-32.1944 55.7536-95.8888 166.0904L96.572 55.7536h66.0912l29.7976 51.5984 29.7976-51.5984L254.4416 0H0l192.4608 333.3568L384.9216 0Z" />
-    </svg>
-    <path d="M152.571 118V46.1333H176.8C183.576 46.1333 189.77 47.468 195.383 50.1373C200.995 52.8067 205.478 56.8449 208.832 62.252C212.186 67.5907 213.863 74.1956 213.863 82.0667C213.863 89.8693 212.186 96.4742 208.832 101.881C205.478 107.288 200.995 111.327 195.383 113.996C189.77 116.665 183.576 118 176.8 118H152.571ZM175.157 104.653C181.796 104.653 187.306 102.874 191.687 99.3147C196.067 95.6871 198.257 89.9378 198.257 82.0667C198.257 74.1956 196.067 68.4462 191.687 64.8187C187.306 61.1911 181.796 59.3773 175.157 59.3773H167.971V104.653H175.157ZM270.18 100.444C269.153 105.988 266.381 110.437 261.864 113.791C257.347 117.144 251.905 118.821 245.54 118.821C239.928 118.821 235.102 117.555 231.064 115.023C227.094 112.422 224.083 109.068 222.029 104.961C219.976 100.855 218.949 96.5427 218.949 92.0253C218.949 87.4396 219.873 83.1276 221.721 79.0893C223.638 75.0511 226.513 71.7658 230.345 69.2333C234.247 66.7009 238.969 65.4347 244.513 65.4347C250.263 65.4347 255.054 66.6667 258.887 69.1307C262.72 71.5947 265.526 74.7431 267.305 78.576C269.153 82.4089 270.077 86.4471 270.077 90.6907C270.077 92.2649 270.009 93.8049 269.872 95.3107H232.707C233.254 99.0067 234.623 101.916 236.813 104.037C239.072 106.091 241.981 107.117 245.54 107.117C248.415 107.117 250.776 106.57 252.624 105.475C254.472 104.311 255.67 102.634 256.217 100.444H270.18ZM244.513 75.9067C241.228 75.9067 238.627 76.7622 236.711 78.4733C234.794 80.116 233.528 82.7169 232.912 86.276H255.807C255.601 83.2644 254.506 80.8004 252.521 78.884C250.537 76.8991 247.867 75.9067 244.513 75.9067ZM302.77 118H289.629L270.738 66.256H285.317L296.2 99.7253L306.98 66.256H321.661L302.77 118ZM359.731 118H344.331V59.3773H323.079V46.1333H380.983V59.3773H359.731V118ZM402.364 118.821C397.163 118.821 392.474 117.692 388.299 115.433C384.124 113.106 380.873 109.924 378.546 105.885C376.219 101.779 375.055 97.1929 375.055 92.128C375.055 87.0631 376.219 82.5116 378.546 78.4733C380.873 74.3667 384.124 71.184 388.299 68.9253C392.474 66.5982 397.163 65.4347 402.364 65.4347C407.566 65.4347 412.255 66.5982 416.43 68.9253C420.605 71.184 423.856 74.3667 426.183 78.4733C428.51 82.5116 429.674 87.0631 429.674 92.128C429.674 97.1929 428.51 101.779 426.183 105.885C423.856 109.924 420.605 113.106 416.43 115.433C412.255 117.692 407.566 118.821 402.364 118.821ZM402.364 106.501C406.197 106.501 409.311 105.167 411.707 102.497C414.103 99.828 415.3 96.3716 415.3 92.128C415.3 87.816 414.103 84.3253 411.707 81.656C409.311 78.9867 406.197 77.652 402.364 77.652C398.531 77.652 395.417 78.9867 393.022 81.656C390.626 84.3253 389.428 87.816 389.428 92.128C389.428 96.3716 390.626 99.828 393.022 102.497C395.417 105.167 398.531 106.501 402.364 106.501ZM462.12 118.821C456.918 118.821 452.229 117.692 448.054 115.433C443.879 113.106 440.628 109.924 438.301 105.885C435.974 101.779 434.81 97.1929 434.81 92.128C434.81 87.0631 435.974 82.5116 438.301 78.4733C440.628 74.3667 443.879 71.184 448.054 68.9253C452.229 66.5982 456.918 65.4347 462.12 65.4347C467.321 65.4347 472.01 66.5982 476.185 68.9253C480.36 71.184 483.611 74.3667 485.938 78.4733C488.265 82.5116 489.429 87.0631 489.429 92.128C489.429 97.1929 488.265 101.779 485.938 105.885C483.611 109.924 480.36 113.106 476.185 115.433C472.01 117.692 467.321 118.821 462.12 118.821ZM462.12 106.501C465.952 106.501 469.067 105.167 471.462 102.497C473.858 99.828 475.056 96.3716 475.056 92.128C475.056 87.816 473.858 84.3253 471.462 81.656C469.067 78.9867 465.952 77.652 462.12 77.652C458.287 77.652 455.172 78.9867 452.777 81.656C450.381 84.3253 449.184 87.816 449.184 92.128C449.184 96.3716 450.381 99.828 452.777 102.497C455.172 105.167 458.287 106.501 462.12 106.501ZM512.327 118H498.056V43.772H512.327V118ZM542.494 118.821C536.129 118.821 530.961 117.179 526.991 113.893C523.09 110.54 521.002 106.091 520.729 100.547H533.049C533.322 102.874 534.281 104.722 535.923 106.091C537.634 107.391 539.825 108.041 542.494 108.041C544.684 108.041 546.464 107.562 547.833 106.604C549.27 105.646 549.989 104.448 549.989 103.011C549.989 101.094 549.167 99.7596 547.525 99.0067C545.882 98.2538 543.281 97.5693 539.722 96.9533C536.026 96.2689 533.014 95.516 530.687 94.6947C528.36 93.8733 526.341 92.4018 524.63 90.28C522.987 88.0898 522.166 85.0098 522.166 81.04C522.166 78.0284 522.953 75.3591 524.527 73.032C526.17 70.6364 528.394 68.7884 531.201 67.488C534.007 66.1191 537.155 65.4347 540.646 65.4347C546.874 65.4347 551.905 66.9747 555.738 70.0547C559.639 73.1347 561.727 77.2071 562.001 82.272H549.578C549.304 80.1502 548.312 78.5076 546.601 77.344C544.958 76.112 543.11 75.496 541.057 75.496C539.003 75.496 537.361 75.9409 536.129 76.8307C534.897 77.7204 534.281 78.9524 534.281 80.5267C534.281 82.4431 535.068 83.7436 536.642 84.428C538.285 85.044 540.851 85.5916 544.342 86.0707C548.106 86.6182 551.186 87.3027 553.582 88.124C556.046 88.8769 558.168 90.3827 559.947 92.6413C561.727 94.9 562.617 98.1853 562.617 102.497C562.617 107.425 560.769 111.395 557.073 114.407C553.445 117.35 548.585 118.821 542.494 118.821Z" fill="currentColor" />
-  </svg>
-</template>
diff --git a/packages/applet/src/modules/vee-validate/components/Home.vue b/packages/applet/src/modules/vee-validate/components/Home.vue
deleted file mode 100644
index 6f21ff4a..00000000
--- a/packages/applet/src/modules/vee-validate/components/Home.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import DevToolsLogo from './DevToolsLogo.vue'
-import { useVirtualRouter } from '~/composables/virtual-router'
-
-const virtualRouter = useVirtualRouter()
-</script>
-
-<template>
-  <div h-full w-full flex items-center>
-    <div flex="~ col gap2" ma px-5>
-      <div flex-auto />
-
-      <!-- Banner -->
-      <div flex="~ col" mt-20 items-center>
-        <div flex="~" mt--10 items-center justify-center>
-          <DevToolsLogo h-18 />
-        </div>
-        <div mb6 mt--1 text-center text-sm flex="~ gap-1">
-          <span op40>
-            Vee Validate DevTools
-          </span>
-        </div>
-      </div>
-
-      <div flex-auto />
-
-      <div flex="~ gap2 wrap">
-        <div flex="~ col auto" min-w-40 p4 theme-card-lime @click="virtualRouter.push('/state')">
-          <div i-carbon-tree-view-alt text-3xl />
-          <code>State</code>
-        </div>
-        <!-- <div flex="~ col auto" min-w-40 p4 theme-card-lime @click="virtualRouter.push('/timeline')">
-          <div i-mdi:timeline-clock-outline text-3xl />
-          <div>Timeline</div>
-        </div> -->
-      </div>
-
-      <div flex="~ gap-6 wrap" mt-5 items-center justify-center>
-        <a href="https://github.com/logaretm/vee-validate/" target="_blank" flex="~ gap1" items-center op50 hover="op100 text-blue" transition>
-          <div i-carbon-star />
-          Star on GitHub
-        </a>
-        <a href="https://vee-validate.logaretm.com/v4/" target="_blank" flex="~ gap1" items-center op50 hover="op100 text-yellow" transition>
-          <div i-carbon-document />
-          View Documentation
-        </a>
-      </div>
-
-      <div flex-auto />
-    </div>
-  </div>
-</template>
diff --git a/packages/applet/src/modules/vee-validate/components/state/Index.vue b/packages/applet/src/modules/vee-validate/components/state/Index.vue
deleted file mode 100644
index 710ff758..00000000
--- a/packages/applet/src/modules/vee-validate/components/state/Index.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { Pane, Splitpanes } from 'splitpanes'
-import { callInspectorAction, callInspectorNodeAction, getInspectorActions, getInspectorNodeActions, getInspectorState, getInspectorTree, onInspectorStateUpdated, onInspectorTreeUpdated } from '@vue/devtools-core'
-import { parse } from '@vue/devtools-kit'
-import type { InspectorNodeTag, InspectorState } from '@vue/devtools-kit'
-import { vTooltip } from '@vue/devtools-ui'
-import Navbar from '~/components/basic/Navbar.vue'
-import SelectiveList from '~/components/basic/SelectiveList.vue'
-import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
-import Empty from '~/components/basic/Empty.vue'
-import RootStateViewer from '~/components/state/RootStateViewer.vue'
-import { createExpandedContext } from '~/composables/toggle-expanded'
-
-const { expanded: expandedStateNodes } = createExpandedContext('vee-validate-state')
-
-interface NodeAction {
-  icon: string
-  tooltip: string
-  actions?: (payload: unknown) => void
-}
-const inspectorId = 'vee-validate-inspector'
-const nodeActions = ref<NodeAction[]>([])
-const actions = ref<NodeAction[]>([])
-
-const selected = ref('')
-const tree = ref<{ id: string, label: string, tags: InspectorNodeTag[] }[]>([])
-const state = ref<Record<string, InspectorState[]>>({})
-const emptyState = computed(() => !Object.keys(state.value).length)
-
-function getNodeActions() {
-  getInspectorNodeActions(inspectorId).then((actions) => {
-    nodeActions.value = actions as NodeAction[]
-  })
-}
-
-function getActions() {
-  getInspectorActions(inspectorId).then((_actions) => {
-    actions.value = _actions as NodeAction[]
-  })
-}
-
-getNodeActions()
-
-getActions()
-
-function callNodeAction(index: number) {
-  callInspectorNodeAction(inspectorId, index, selected.value)
-}
-
-function callAction(index: number) {
-  callInspectorAction(inspectorId, index, selected.value)
-}
-
-function filterEmptyState(data: Record<string, InspectorState[]>) {
-  for (const key in data) {
-    if (!data[key]?.length)
-      delete data[key]
-  }
-  return data
-}
-
-function getVeeValidateState(nodeId: string) {
-  getInspectorState({ inspectorId, nodeId }).then((data) => {
-    state.value = filterEmptyState(parse(data!))
-    expandedStateNodes.value = Array.from({ length: Object.keys(state.value).length }, (_, i) => `${i}`)
-  })
-}
-
-function clearVeeValidateState() {
-  state.value = {}
-}
-
-watch(selected, () => {
-  clearVeeValidateState()
-  getVeeValidateState(selected.value)
-})
-
-const getVeeValidateInspectorTree = () => {
-  getInspectorTree({ inspectorId, filter: '' }).then((_data) => {
-    const data = parse(_data!)
-    tree.value = data
-    if (!selected.value && data.length) {
-      selected.value = data[0].id
-      getVeeValidateState(data[0].id)
-    }
-  })
-}
-getVeeValidateInspectorTree()
-
-onInspectorTreeUpdated((data) => {
-  if (!data?.data.length || data.inspectorId !== inspectorId)
-    return
-  tree.value = data.data as unknown as { id: string, label: string, tags: InspectorNodeTag[] }[]
-  if ((!selected.value && data.data.length) || (selected.value && !data.data.find(node => node.id === selected.value))) {
-    selected.value = data.data[0].id
-    getVeeValidateState(data.data[0].id)
-  }
-})
-
-onInspectorStateUpdated((data) => {
-  if (!data || data.inspectorId !== inspectorId)
-    return
-
-  const { inspectorId: _inspectorId, ...filtered } = data
-
-  state.value = filterEmptyState(filtered)
-  expandedStateNodes.value = Array.from({ length: Object.keys(state.value).length }, (_, i) => `${i}`)
-})
-</script>
-
-<template>
-  <div class="h-full flex flex-col">
-    <DevToolsHeader doc-link="https://vee-validate.logaretm.com/v4/" github-repo-link="https://github.com/logaretm/vee-validate/">
-      <Navbar />
-    </DevToolsHeader>
-    <template v-if="tree.length">
-      <Splitpanes class="flex-1 overflow-auto">
-        <Pane border="r base" size="40" h-full>
-          <div h-full select-none overflow-scroll class="no-scrollbar">
-            <div v-if="actions.length" class="w-full px2 pt2">
-              <div class="w-full flex justify-end pb1" border="b dashed base">
-                <div class="flex items-center gap-2 px-1">
-                  <div v-for="(action, index) in actions" :key="index" v-tooltip.bottom-end="{ content: action.tooltip }" class="flex items-center gap1" @click="callAction(index)">
-                    <i :class="`i-ic-baseline-${action.icon.replace(/\_/g, '-')}`" cursor-pointer op70 text-base hover:op100 />
-                  </div>
-                </div>
-              </div>
-            </div>
-            <SelectiveList v-model="selected" :data="tree" />
-          </div>
-        </Pane>
-        <Pane size="60">
-          <div class="h-full flex flex-col p2">
-            <div v-if="nodeActions.length" class="flex justify-end pb-1" border="b dashed base">
-              <div class="flex items-center gap-2 px-1">
-                <div v-for="(action, index) in nodeActions" :key="index" v-tooltip.bottom-end="{ content: action.tooltip }" class="flex items-center gap1" @click="callNodeAction(index)">
-                  <i :class="`i-ic-baseline-${action.icon.replace(/\_/g, '-')}`" cursor-pointer op70 text-base hover:op100 />
-                </div>
-              </div>
-            </div>
-            <RootStateViewer v-if="selected && !emptyState" :data="state" :node-id="selected" :inspector-id="inspectorId" expanded-state-id="vee-validate-state" class="no-scrollbar flex-1 select-none overflow-scroll" />
-            <Empty v-else>
-              No Data
-            </Empty>
-          </div>
-        </Pane>
-      </Splitpanes>
-    </template>
-    <Empty v-else>
-      No Data
-    </Empty>
-  </div>
-</template>
diff --git a/packages/applet/src/modules/vee-validate/components/timeline/Index.vue b/packages/applet/src/modules/vee-validate/components/timeline/Index.vue
deleted file mode 100644
index ed919a02..00000000
--- a/packages/applet/src/modules/vee-validate/components/timeline/Index.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import Timeline from '~/components/timeline/index.vue'
-
-const LAYER_IDS = ['vee-validate-inspector']
-</script>
-
-<template>
-  <Timeline :layer-ids="LAYER_IDS" doc-link="https://vee-validate.logaretm.com/v4/" github-repo-link="https://github.com/logaretm/vee-validate/" />
-</template>
diff --git a/packages/applet/src/modules/vee-validate/index.ts b/packages/applet/src/modules/vee-validate/index.ts
deleted file mode 100644
index 81a695ae..00000000
--- a/packages/applet/src/modules/vee-validate/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import VeeValidate from './index.vue'
-
-export {
-  VeeValidate,
-}
diff --git a/packages/applet/src/modules/vee-validate/index.vue b/packages/applet/src/modules/vee-validate/index.vue
deleted file mode 100644
index 2e6b7302..00000000
--- a/packages/applet/src/modules/vee-validate/index.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import Home from './components/Home.vue'
-import State from './components/state/Index.vue'
-import { registerVirtualRouter } from '~/composables/virtual-router'
-import { createDevToolsConnectStateContext } from '~/composables/connect-state'
-
-createDevToolsConnectStateContext()
-
-const { VirtualRouterView } = registerVirtualRouter([
-  {
-    path: '/',
-    name: 'Home',
-    component: Home,
-    icon: 'https://vee-validate.logaretm.com/v4/logo.png',
-  },
-  {
-    path: '/state',
-    name: 'State',
-    component: State,
-    icon: 'i-carbon-tree-view-alt',
-  },
-  // {
-  //   path: '/timeline',
-  //   name: 'Timeline',
-  //   component: Timeline,
-  //   icon: 'i-mdi:timeline-clock-outline',
-  // },
-])
-</script>
-
-<template>
-  <div h-full w-full>
-    <VirtualRouterView />
-  </div>
-</template>
diff --git a/packages/applet/src/modules/vue-query/components/DevToolsLogo.vue b/packages/applet/src/modules/vue-query/components/DevToolsLogo.vue
deleted file mode 100644
index e5455e6b..00000000
--- a/packages/applet/src/modules/vue-query/components/DevToolsLogo.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <svg viewBox="0 0 566 154" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="300 0 261.76 226.69">
-      <path fill="#ffd94c" stroke="#002c4b" stroke-width="32.63" d="M156.77 42.75L126.55 95.1 96.32 42.75h-48.3l78.53 136 78.53-136z" />
-    </svg>
-    <path d="M152.571 118V46.1333H176.8C183.576 46.1333 189.77 47.468 195.383 50.1373C200.995 52.8067 205.478 56.8449 208.832 62.252C212.186 67.5907 213.863 74.1956 213.863 82.0667C213.863 89.8693 212.186 96.4742 208.832 101.881C205.478 107.288 200.995 111.327 195.383 113.996C189.77 116.665 183.576 118 176.8 118H152.571ZM175.157 104.653C181.796 104.653 187.306 102.874 191.687 99.3147C196.067 95.6871 198.257 89.9378 198.257 82.0667C198.257 74.1956 196.067 68.4462 191.687 64.8187C187.306 61.1911 181.796 59.3773 175.157 59.3773H167.971V104.653H175.157ZM270.18 100.444C269.153 105.988 266.381 110.437 261.864 113.791C257.347 117.144 251.905 118.821 245.54 118.821C239.928 118.821 235.102 117.555 231.064 115.023C227.094 112.422 224.083 109.068 222.029 104.961C219.976 100.855 218.949 96.5427 218.949 92.0253C218.949 87.4396 219.873 83.1276 221.721 79.0893C223.638 75.0511 226.513 71.7658 230.345 69.2333C234.247 66.7009 238.969 65.4347 244.513 65.4347C250.263 65.4347 255.054 66.6667 258.887 69.1307C262.72 71.5947 265.526 74.7431 267.305 78.576C269.153 82.4089 270.077 86.4471 270.077 90.6907C270.077 92.2649 270.009 93.8049 269.872 95.3107H232.707C233.254 99.0067 234.623 101.916 236.813 104.037C239.072 106.091 241.981 107.117 245.54 107.117C248.415 107.117 250.776 106.57 252.624 105.475C254.472 104.311 255.67 102.634 256.217 100.444H270.18ZM244.513 75.9067C241.228 75.9067 238.627 76.7622 236.711 78.4733C234.794 80.116 233.528 82.7169 232.912 86.276H255.807C255.601 83.2644 254.506 80.8004 252.521 78.884C250.537 76.8991 247.867 75.9067 244.513 75.9067ZM302.77 118H289.629L270.738 66.256H285.317L296.2 99.7253L306.98 66.256H321.661L302.77 118ZM359.731 118H344.331V59.3773H323.079V46.1333H380.983V59.3773H359.731V118ZM402.364 118.821C397.163 118.821 392.474 117.692 388.299 115.433C384.124 113.106 380.873 109.924 378.546 105.885C376.219 101.779 375.055 97.1929 375.055 92.128C375.055 87.0631 376.219 82.5116 378.546 78.4733C380.873 74.3667 384.124 71.184 388.299 68.9253C392.474 66.5982 397.163 65.4347 402.364 65.4347C407.566 65.4347 412.255 66.5982 416.43 68.9253C420.605 71.184 423.856 74.3667 426.183 78.4733C428.51 82.5116 429.674 87.0631 429.674 92.128C429.674 97.1929 428.51 101.779 426.183 105.885C423.856 109.924 420.605 113.106 416.43 115.433C412.255 117.692 407.566 118.821 402.364 118.821ZM402.364 106.501C406.197 106.501 409.311 105.167 411.707 102.497C414.103 99.828 415.3 96.3716 415.3 92.128C415.3 87.816 414.103 84.3253 411.707 81.656C409.311 78.9867 406.197 77.652 402.364 77.652C398.531 77.652 395.417 78.9867 393.022 81.656C390.626 84.3253 389.428 87.816 389.428 92.128C389.428 96.3716 390.626 99.828 393.022 102.497C395.417 105.167 398.531 106.501 402.364 106.501ZM462.12 118.821C456.918 118.821 452.229 117.692 448.054 115.433C443.879 113.106 440.628 109.924 438.301 105.885C435.974 101.779 434.81 97.1929 434.81 92.128C434.81 87.0631 435.974 82.5116 438.301 78.4733C440.628 74.3667 443.879 71.184 448.054 68.9253C452.229 66.5982 456.918 65.4347 462.12 65.4347C467.321 65.4347 472.01 66.5982 476.185 68.9253C480.36 71.184 483.611 74.3667 485.938 78.4733C488.265 82.5116 489.429 87.0631 489.429 92.128C489.429 97.1929 488.265 101.779 485.938 105.885C483.611 109.924 480.36 113.106 476.185 115.433C472.01 117.692 467.321 118.821 462.12 118.821ZM462.12 106.501C465.952 106.501 469.067 105.167 471.462 102.497C473.858 99.828 475.056 96.3716 475.056 92.128C475.056 87.816 473.858 84.3253 471.462 81.656C469.067 78.9867 465.952 77.652 462.12 77.652C458.287 77.652 455.172 78.9867 452.777 81.656C450.381 84.3253 449.184 87.816 449.184 92.128C449.184 96.3716 450.381 99.828 452.777 102.497C455.172 105.167 458.287 106.501 462.12 106.501ZM512.327 118H498.056V43.772H512.327V118ZM542.494 118.821C536.129 118.821 530.961 117.179 526.991 113.893C523.09 110.54 521.002 106.091 520.729 100.547H533.049C533.322 102.874 534.281 104.722 535.923 106.091C537.634 107.391 539.825 108.041 542.494 108.041C544.684 108.041 546.464 107.562 547.833 106.604C549.27 105.646 549.989 104.448 549.989 103.011C549.989 101.094 549.167 99.7596 547.525 99.0067C545.882 98.2538 543.281 97.5693 539.722 96.9533C536.026 96.2689 533.014 95.516 530.687 94.6947C528.36 93.8733 526.341 92.4018 524.63 90.28C522.987 88.0898 522.166 85.0098 522.166 81.04C522.166 78.0284 522.953 75.3591 524.527 73.032C526.17 70.6364 528.394 68.7884 531.201 67.488C534.007 66.1191 537.155 65.4347 540.646 65.4347C546.874 65.4347 551.905 66.9747 555.738 70.0547C559.639 73.1347 561.727 77.2071 562.001 82.272H549.578C549.304 80.1502 548.312 78.5076 546.601 77.344C544.958 76.112 543.11 75.496 541.057 75.496C539.003 75.496 537.361 75.9409 536.129 76.8307C534.897 77.7204 534.281 78.9524 534.281 80.5267C534.281 82.4431 535.068 83.7436 536.642 84.428C538.285 85.044 540.851 85.5916 544.342 86.0707C548.106 86.6182 551.186 87.3027 553.582 88.124C556.046 88.8769 558.168 90.3827 559.947 92.6413C561.727 94.9 562.617 98.1853 562.617 102.497C562.617 107.425 560.769 111.395 557.073 114.407C553.445 117.35 548.585 118.821 542.494 118.821Z" fill="currentColor" />
-  </svg>
-</template>
diff --git a/packages/applet/src/modules/vue-query/components/timeline/Index.vue b/packages/applet/src/modules/vue-query/components/timeline/Index.vue
deleted file mode 100644
index 06332fc7..00000000
--- a/packages/applet/src/modules/vue-query/components/timeline/Index.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import Timeline from '~/components/timeline/index.vue'
-
-const LAYER_IDS = ['vue-query']
-</script>
-
-<template>
-  <Timeline :layer-ids="LAYER_IDS" doc-link="https://tanstack.com/query/latest/docs/framework/vue/overview/" github-repo-link="https://github.com/TanStack/query/tree/main/packages/vue-query/" />
-</template>
diff --git a/packages/applet/src/modules/vue-query/index.ts b/packages/applet/src/modules/vue-query/index.ts
deleted file mode 100644
index 8cdce2f7..00000000
--- a/packages/applet/src/modules/vue-query/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import VueQuery from './index.vue'
-
-export {
-  VueQuery,
-}
diff --git a/packages/applet/src/modules/vue-query/index.vue b/packages/applet/src/modules/vue-query/index.vue
deleted file mode 100644
index 3ff482aa..00000000
--- a/packages/applet/src/modules/vue-query/index.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import Home from './components/Home.vue'
-import State from './components/state/Index.vue'
-import Timeline from './components/timeline/Index.vue'
-import { registerVirtualRouter } from '~/composables/virtual-router'
-import { createDevToolsConnectStateContext } from '~/composables/connect-state'
-
-createDevToolsConnectStateContext()
-
-const { VirtualRouterView } = registerVirtualRouter([
-  {
-    path: '/',
-    name: 'Home',
-    component: Home,
-    icon: 'https://raw.githubusercontent.com/TanStack/query/main/packages/vue-query/media/vue-query.svg',
-  },
-  {
-    path: '/state',
-    name: 'State',
-    component: State,
-    icon: 'i-carbon-tree-view-alt',
-  },
-  {
-    path: '/timeline',
-    name: 'Timeline',
-    component: Timeline,
-    icon: 'i-mdi:timeline-clock-outline',
-  },
-])
-</script>
-
-<template>
-  <div h-full w-full>
-    <VirtualRouterView />
-  </div>
-</template>
diff --git a/packages/applet/src/modules/vuex/components/DevToolsLogo.vue b/packages/applet/src/modules/vuex/components/DevToolsLogo.vue
deleted file mode 100644
index 56d61926..00000000
--- a/packages/applet/src/modules/vuex/components/DevToolsLogo.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <svg viewBox="0 0 566 154" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <svg xmlns="http://www.w3.org/2000/svg" width="8em" height="8em" viewBox="0 -3 24 24"><path fill="#3dd68c" d="M2 20h20v-4H2zm2-3h2v2H4zM2 4v4h20V4zm4 3H4V5h2zm-4 7h20v-4H2zm2-3h2v2H4z" /></svg>
-    <path d="M152.571 118V46.1333H176.8C183.576 46.1333 189.77 47.468 195.383 50.1373C200.995 52.8067 205.478 56.8449 208.832 62.252C212.186 67.5907 213.863 74.1956 213.863 82.0667C213.863 89.8693 212.186 96.4742 208.832 101.881C205.478 107.288 200.995 111.327 195.383 113.996C189.77 116.665 183.576 118 176.8 118H152.571ZM175.157 104.653C181.796 104.653 187.306 102.874 191.687 99.3147C196.067 95.6871 198.257 89.9378 198.257 82.0667C198.257 74.1956 196.067 68.4462 191.687 64.8187C187.306 61.1911 181.796 59.3773 175.157 59.3773H167.971V104.653H175.157ZM270.18 100.444C269.153 105.988 266.381 110.437 261.864 113.791C257.347 117.144 251.905 118.821 245.54 118.821C239.928 118.821 235.102 117.555 231.064 115.023C227.094 112.422 224.083 109.068 222.029 104.961C219.976 100.855 218.949 96.5427 218.949 92.0253C218.949 87.4396 219.873 83.1276 221.721 79.0893C223.638 75.0511 226.513 71.7658 230.345 69.2333C234.247 66.7009 238.969 65.4347 244.513 65.4347C250.263 65.4347 255.054 66.6667 258.887 69.1307C262.72 71.5947 265.526 74.7431 267.305 78.576C269.153 82.4089 270.077 86.4471 270.077 90.6907C270.077 92.2649 270.009 93.8049 269.872 95.3107H232.707C233.254 99.0067 234.623 101.916 236.813 104.037C239.072 106.091 241.981 107.117 245.54 107.117C248.415 107.117 250.776 106.57 252.624 105.475C254.472 104.311 255.67 102.634 256.217 100.444H270.18ZM244.513 75.9067C241.228 75.9067 238.627 76.7622 236.711 78.4733C234.794 80.116 233.528 82.7169 232.912 86.276H255.807C255.601 83.2644 254.506 80.8004 252.521 78.884C250.537 76.8991 247.867 75.9067 244.513 75.9067ZM302.77 118H289.629L270.738 66.256H285.317L296.2 99.7253L306.98 66.256H321.661L302.77 118ZM359.731 118H344.331V59.3773H323.079V46.1333H380.983V59.3773H359.731V118ZM402.364 118.821C397.163 118.821 392.474 117.692 388.299 115.433C384.124 113.106 380.873 109.924 378.546 105.885C376.219 101.779 375.055 97.1929 375.055 92.128C375.055 87.0631 376.219 82.5116 378.546 78.4733C380.873 74.3667 384.124 71.184 388.299 68.9253C392.474 66.5982 397.163 65.4347 402.364 65.4347C407.566 65.4347 412.255 66.5982 416.43 68.9253C420.605 71.184 423.856 74.3667 426.183 78.4733C428.51 82.5116 429.674 87.0631 429.674 92.128C429.674 97.1929 428.51 101.779 426.183 105.885C423.856 109.924 420.605 113.106 416.43 115.433C412.255 117.692 407.566 118.821 402.364 118.821ZM402.364 106.501C406.197 106.501 409.311 105.167 411.707 102.497C414.103 99.828 415.3 96.3716 415.3 92.128C415.3 87.816 414.103 84.3253 411.707 81.656C409.311 78.9867 406.197 77.652 402.364 77.652C398.531 77.652 395.417 78.9867 393.022 81.656C390.626 84.3253 389.428 87.816 389.428 92.128C389.428 96.3716 390.626 99.828 393.022 102.497C395.417 105.167 398.531 106.501 402.364 106.501ZM462.12 118.821C456.918 118.821 452.229 117.692 448.054 115.433C443.879 113.106 440.628 109.924 438.301 105.885C435.974 101.779 434.81 97.1929 434.81 92.128C434.81 87.0631 435.974 82.5116 438.301 78.4733C440.628 74.3667 443.879 71.184 448.054 68.9253C452.229 66.5982 456.918 65.4347 462.12 65.4347C467.321 65.4347 472.01 66.5982 476.185 68.9253C480.36 71.184 483.611 74.3667 485.938 78.4733C488.265 82.5116 489.429 87.0631 489.429 92.128C489.429 97.1929 488.265 101.779 485.938 105.885C483.611 109.924 480.36 113.106 476.185 115.433C472.01 117.692 467.321 118.821 462.12 118.821ZM462.12 106.501C465.952 106.501 469.067 105.167 471.462 102.497C473.858 99.828 475.056 96.3716 475.056 92.128C475.056 87.816 473.858 84.3253 471.462 81.656C469.067 78.9867 465.952 77.652 462.12 77.652C458.287 77.652 455.172 78.9867 452.777 81.656C450.381 84.3253 449.184 87.816 449.184 92.128C449.184 96.3716 450.381 99.828 452.777 102.497C455.172 105.167 458.287 106.501 462.12 106.501ZM512.327 118H498.056V43.772H512.327V118ZM542.494 118.821C536.129 118.821 530.961 117.179 526.991 113.893C523.09 110.54 521.002 106.091 520.729 100.547H533.049C533.322 102.874 534.281 104.722 535.923 106.091C537.634 107.391 539.825 108.041 542.494 108.041C544.684 108.041 546.464 107.562 547.833 106.604C549.27 105.646 549.989 104.448 549.989 103.011C549.989 101.094 549.167 99.7596 547.525 99.0067C545.882 98.2538 543.281 97.5693 539.722 96.9533C536.026 96.2689 533.014 95.516 530.687 94.6947C528.36 93.8733 526.341 92.4018 524.63 90.28C522.987 88.0898 522.166 85.0098 522.166 81.04C522.166 78.0284 522.953 75.3591 524.527 73.032C526.17 70.6364 528.394 68.7884 531.201 67.488C534.007 66.1191 537.155 65.4347 540.646 65.4347C546.874 65.4347 551.905 66.9747 555.738 70.0547C559.639 73.1347 561.727 77.2071 562.001 82.272H549.578C549.304 80.1502 548.312 78.5076 546.601 77.344C544.958 76.112 543.11 75.496 541.057 75.496C539.003 75.496 537.361 75.9409 536.129 76.8307C534.897 77.7204 534.281 78.9524 534.281 80.5267C534.281 82.4431 535.068 83.7436 536.642 84.428C538.285 85.044 540.851 85.5916 544.342 86.0707C548.106 86.6182 551.186 87.3027 553.582 88.124C556.046 88.8769 558.168 90.3827 559.947 92.6413C561.727 94.9 562.617 98.1853 562.617 102.497C562.617 107.425 560.769 111.395 557.073 114.407C553.445 117.35 548.585 118.821 542.494 118.821Z" fill="currentColor" />
-  </svg>
-</template>
diff --git a/packages/applet/src/modules/vuex/components/Home.vue b/packages/applet/src/modules/vuex/components/Home.vue
deleted file mode 100644
index 485d12aa..00000000
--- a/packages/applet/src/modules/vuex/components/Home.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import DevToolsLogo from './DevToolsLogo.vue'
-import { useVirtualRouter } from '~/composables/virtual-router'
-
-const virtualRouter = useVirtualRouter()
-</script>
-
-<template>
-  <div h-full w-full flex items-center>
-    <div flex="~ col gap2" ma px-5>
-      <div flex-auto />
-
-      <!-- Banner -->
-      <div flex="~ col" mt-20 items-center>
-        <div flex="~" mt--10 items-center justify-center>
-          <DevToolsLogo h-18 />
-        </div>
-        <div mb6 mt--1 text-center text-sm flex="~ gap-1">
-          <span op40>
-            Vuex DevTools
-          </span>
-        </div>
-      </div>
-
-      <div flex-auto />
-
-      <div flex="~ gap2 wrap">
-        <div flex="~ col auto" min-w-40 p4 theme-card-lime @click="virtualRouter.push('/store')">
-          <div i-carbon-tree-view-alt text-3xl />
-          <code>Store</code>
-        </div>
-        <div flex="~ col auto" min-w-40 p4 theme-card-lime @click="virtualRouter.push('/timeline')">
-          <div i-mdi:timeline-clock-outline text-3xl />
-          <div>Timeline</div>
-        </div>
-      </div>
-
-      <div flex="~ gap-6 wrap" mt-5 items-center justify-center>
-        <a href="https://github.com/vuejs/vuex" target="_blank" flex="~ gap1" items-center op50 hover="op100 text-blue" transition>
-          <div i-carbon-star />
-          Star on GitHub
-        </a>
-        <a href="https://vuex.vuejs.org/" target="_blank" flex="~ gap1" items-center op50 hover="op100 text-yellow" transition>
-          <div i-carbon-document />
-          View Documentation
-        </a>
-      </div>
-
-      <div flex-auto />
-    </div>
-  </div>
-</template>
diff --git a/packages/applet/src/modules/vuex/components/store/Index.vue b/packages/applet/src/modules/vuex/components/store/Index.vue
deleted file mode 100644
index 9c8a8871..00000000
--- a/packages/applet/src/modules/vuex/components/store/Index.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-import { getInspectorState, getInspectorTree, onEditInspectorState, onInspectorStateUpdated, onInspectorTreeUpdated } from '@vue/devtools-core'
-import { parse } from '@vue/devtools-kit'
-import type { InspectorState, InspectorTree } from '@vue/devtools-kit'
-import { Pane, Splitpanes } from 'splitpanes'
-import Navbar from '~/components/basic/Navbar.vue'
-import TreeViewer from '~/components/tree/TreeViewer.vue'
-import RootStateViewer from '~/components/state/RootStateViewer.vue'
-import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
-import { createExpandedContext } from '~/composables/toggle-expanded'
-
-const inspectorId = 'vuex'
-
-const { expanded: expandedStateNodes } = createExpandedContext('vuex-store-state')
-const selected = ref('')
-const tree = ref<Required<InspectorTree>[]>([])
-const state = ref<{
-  state: InspectorState[]
-  getters: InspectorState[]
-}>({
-  state: [],
-  getters: [],
-})
-
-function getVuexState(nodeId: string) {
-  getInspectorState({ inspectorId, nodeId }).then((data) => {
-    state.value = parse(data!)
-    expandedStateNodes.value = Array.from({ length: Object.keys(state.value).length }, (_, i) => `${i}`)
-  })
-}
-
-function clearVuexState() {
-  state.value = {
-    state: [],
-    getters: [],
-  }
-}
-
-watch(selected, () => {
-  clearVuexState()
-  getVuexState(selected.value)
-})
-
-const selectVuexTree = (id: string) => {
-  console.log(id)
-  selected.value = id
-}
-
-getInspectorTree({ inspectorId, filter: '' }).then((_data) => {
-  const data = parse(_data!)
-  tree.value = data
-
-  if (!selected.value && data.length) {
-    selected.value = data[0].id
-    getVuexState(data[0].id)
-  }
-})
-
-onInspectorTreeUpdated((data) => {
-  if (!data?.data.length || data.inspectorId !== inspectorId)
-    return
-  tree.value = data.data as unknown as Required<InspectorTree>[]
-  if (!selected.value && data.data.length) {
-    selected.value = data.data[0].id
-    getVuexState(data.data[0].id)
-  }
-})
-
-onEditInspectorState((payload) => {
-  if (payload.inspectorId !== inspectorId)
-    return
-  getVuexState(selected.value)
-})
-
-onInspectorStateUpdated((data) => {
-  if (!data || !data?.state?.length || data.inspectorId !== inspectorId)
-    return
-  state.value = {
-    state: data.state,
-    getters: data.getters || [],
-  }
-})
-</script>
-
-<template>
-  <div class="h-full flex flex-col">
-    <DevToolsHeader doc-link="https://vuex.vuejs.org/" github-repo-link="https://github.com/vuejs/vuex">
-      <Navbar />
-    </DevToolsHeader>
-    <Splitpanes class="flex-1 overflow-auto">
-      <Pane flex flex-col border="r base">
-        <div h-screen select-none overflow-scroll p-2 class="no-scrollbar">
-          <TreeViewer v-model="selected" :data="tree" />
-        </div>
-      </Pane>
-      <Pane size="60">
-        <div h-full select-none overflow-scroll class="no-scrollbar">
-          <RootStateViewer class="p3" :data="state" :node-id="selected" :inspector-id="inspectorId" expanded-state-id="vuex-store-state" />
-        </div>
-      </Pane>
-    </Splitpanes>
-  </div>
-</template>
diff --git a/packages/applet/src/modules/vuex/components/timeline/Index.vue b/packages/applet/src/modules/vuex/components/timeline/Index.vue
deleted file mode 100644
index 9eef0d56..00000000
--- a/packages/applet/src/modules/vuex/components/timeline/Index.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import Timeline from '~/components/timeline/index.vue'
-
-const LAYER_IDS = ['vuex:mutations', 'vuex:actions']
-</script>
-
-<template>
-  <Timeline :layer-ids="LAYER_IDS" doc-link="https://vuex.vuejs.org/" github-repo-link="https://github.com/vuejs/vuex" />
-</template>
diff --git a/packages/applet/src/modules/vuex/index.ts b/packages/applet/src/modules/vuex/index.ts
deleted file mode 100644
index 3f17c4d2..00000000
--- a/packages/applet/src/modules/vuex/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import Vuex from './index.vue'
-
-export {
-  Vuex,
-}
diff --git a/packages/applet/src/modules/vuex/index.vue b/packages/applet/src/modules/vuex/index.vue
deleted file mode 100644
index de428e52..00000000
--- a/packages/applet/src/modules/vuex/index.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import Home from './components/Home.vue'
-import Store from './components/store/Index.vue'
-import Timeline from './components/timeline/Index.vue'
-import { registerVirtualRouter } from '~/composables/virtual-router'
-import { createDevToolsConnectStateContext } from '~/composables/connect-state'
-
-createDevToolsConnectStateContext()
-
-const { VirtualRouterView } = registerVirtualRouter([
-  {
-    path: '/',
-    name: 'Home',
-    component: Home,
-    icon: 'i-ic-baseline-storage',
-  },
-  {
-    path: '/store',
-    name: 'Store',
-    component: Store,
-    icon: 'i-carbon-tree-view-alt',
-  },
-  {
-    path: '/timeline',
-    name: 'Timeline',
-    component: Timeline,
-    icon: 'i-mdi:timeline-clock-outline',
-  },
-])
-</script>
-
-<template>
-  <div h-full w-full>
-    <VirtualRouterView />
-  </div>
-</template>
diff --git a/packages/browser-extension/manifest.json b/packages/browser-extension/manifest.json
index b4980cb7..3857fcc4 100644
--- a/packages/browser-extension/manifest.json
+++ b/packages/browser-extension/manifest.json
@@ -55,13 +55,15 @@
   "version_name": "0.0.0",
   "web_accessible_resources": [
     {
+      "extension_ids": [],
       "matches": [
         "<all_urls>"
       ],
       "resources": [
         "dist/*",
         "client/*",
-        "overlay/*"
+        "overlay/*",
+        "pages/*"
       ]
     }
   ]
diff --git a/packages/browser-extension/package.json b/packages/browser-extension/package.json
index 82054578..242f6525 100644
--- a/packages/browser-extension/package.json
+++ b/packages/browser-extension/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@vue/devtools-core": "workspace:^",
+    "@vue/devtools-kit": "workspace:^",
     "@vue/devtools-shared": "workspace:^"
   },
   "devDependencies": {
diff --git a/packages/browser-extension/src/background.ts b/packages/browser-extension/src/background.ts
index 204dc0cd..4b2735a0 100644
--- a/packages/browser-extension/src/background.ts
+++ b/packages/browser-extension/src/background.ts
@@ -16,24 +16,32 @@ function initPort(portInfo: PortInfo): Record<'devtools' | 'userApp', chrome.run
 
 function devtoolsUserAppPipe(tabId: string | number) {
   const { devtools, userApp } = ports[tabId]
+  let disconnected = false
 
   function onDevtoolsMessage(message) {
-    if (process.env.NODE_ENV === 'development')
+    if (disconnected)
+      return
+    if (process.env.NODE_ENV === 'development') {
       console.log('%cdevtools -> userApp', 'color:#888;', message)
+    }
 
     userApp.postMessage(message)
   }
   devtools.onMessage.addListener(onDevtoolsMessage)
 
   function onUserAppMessage(message) {
-    if (process.env.NODE_ENV === 'development')
+    if (disconnected)
+      return
+    if (process.env.NODE_ENV === 'development') {
       console.log('%cuserApp -> devtools', 'color:#888;', message)
+    }
 
     devtools.postMessage(message)
   }
   userApp.onMessage.addListener(onUserAppMessage)
 
   function shutdown() {
+    disconnected = true
     if (!ports[tabId])
       return
     const { devtools, userApp } = ports[tabId]
@@ -41,7 +49,8 @@ function devtoolsUserAppPipe(tabId: string | number) {
     userApp.onMessage.removeListener(onUserAppMessage)
     devtools?.disconnect()
     userApp?.disconnect()
-    ports[tabId] = null!
+    delete ports[tabId]
+    // ports[tabId] = null!
   }
 
   devtools.onDisconnect.addListener(shutdown)
@@ -86,14 +95,15 @@ chrome.runtime.onMessage.addListener((req, sender) => {
     chrome.action.setIcon({
       tabId: sender.tab.id,
       path: {
-        16: `../icons/16${suffix}.png`,
-        48: `../icons/48${suffix}.png`,
-        128: `../icons/128${suffix}.png`,
+        16: chrome.runtime.getURL(`icons/16${suffix}.png`),
+        48: chrome.runtime.getURL(`icons/48${suffix}.png`),
+        128: chrome.runtime.getURL(`icons/128${suffix}.png`),
       },
     })
+
     chrome.action.setPopup({
       tabId: sender.tab.id,
-      popup: req.devtoolsEnabled ? `../popups/enabled${suffix}.html` : `../popups/disabled${suffix}.html`,
+      popup: req.devtoolsEnabled ? chrome.runtime.getURL(`popups/enabled${suffix}.html`) : chrome.runtime.getURL(`popups/disabled${suffix}.html`),
     })
   }
 })
diff --git a/packages/browser-extension/src/detector.ts b/packages/browser-extension/src/detector.ts
index f9dd2a4d..fb995061 100644
--- a/packages/browser-extension/src/detector.ts
+++ b/packages/browser-extension/src/detector.ts
@@ -3,6 +3,12 @@ function detect(win: Window) {
     delay: 1000,
     retry: 10,
   }
+  function sendMessage(data) {
+    win.postMessage({
+      key: '__VUE_DEVTOOLS_VUE_DETECTED_EVENT__',
+      data,
+    }, '*')
+  }
 
   function runDetect() {
     // 1. check Nuxt
@@ -10,14 +16,13 @@ function detect(win: Window) {
     const nuxtDetected = !!(window.__NUXT__)
 
     if (nuxtDetected) {
-      win.postMessage({
+      sendMessage({
         devtoolsEnabled: window.__VUE_DEVTOOLS_GLOBAL_HOOK__ && window.__VUE_DEVTOOLS_GLOBAL_HOOK__.enabled,
         vueDetected: true,
         nuxtDetected: true,
         vitePluginDetected: !!window.__VUE_DEVTOOLS_VITE_PLUGIN_DETECTED__,
         vitePluginClientUrl: window.__VUE_DEVTOOLS_VITE_PLUGIN_CLIENT_URL__,
-      }, '*')
-
+      })
       return
     }
 
@@ -25,12 +30,12 @@ function detect(win: Window) {
     // @ts-expect-error types
     const vueDetected = !!(window.__VUE__)
     if (vueDetected) {
-      win.postMessage({
+      sendMessage({
         devtoolsEnabled: window.__VUE_DEVTOOLS_GLOBAL_HOOK__ && window.__VUE_DEVTOOLS_GLOBAL_HOOK__.enabled,
         vueDetected: true,
         vitePluginDetected: !!window.__VUE_DEVTOOLS_VITE_PLUGIN_DETECTED__,
         vitePluginClientUrl: window.__VUE_DEVTOOLS_VITE_PLUGIN_CLIENT_URL__,
-      }, '*')
+      })
       return
     }
 
@@ -48,5 +53,6 @@ function detect(win: Window) {
   }, 100)
 }
 
-if (document instanceof HTMLDocument)
+if (document instanceof HTMLDocument) {
   detect(window)
+}
diff --git a/packages/browser-extension/src/devtools-background.ts b/packages/browser-extension/src/devtools-background.ts
index f522abed..c512e017 100644
--- a/packages/browser-extension/src/devtools-background.ts
+++ b/packages/browser-extension/src/devtools-background.ts
@@ -1,10 +1,33 @@
-chrome.devtools.panels.create(
-  'Vue',
-  'icons/128.png',
-  'pages/devtools-panel.html',
-  (panel) => {
-    panel.onShown.addListener((window) => {
-
-    })
-  },
-)
+let created = false
+let checkCount = 0
+
+chrome.devtools.network.onNavigated.addListener(createPanelOnVueDetected)
+const checkVueInterval = setInterval(createPanelOnVueDetected, 1000)
+createPanelOnVueDetected()
+
+function createPanelOnVueDetected() {
+  if (created || checkCount++ > 10) {
+    clearInterval(checkVueInterval)
+    return
+  }
+  chrome.devtools.inspectedWindow.eval(
+    '!!(window.__VUE_DEVTOOLS_GLOBAL_HOOK__ && (window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue || window.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps.length))',
+    (vueDetected) => {
+      if (!vueDetected || created)
+        return
+
+      clearInterval(checkVueInterval)
+      created = true
+      chrome.devtools.panels.create(
+        'Vue',
+        'icons/128.png',
+        'pages/devtools-panel.html',
+        (panel) => {
+          panel.onShown.addListener((window) => {
+
+          })
+        },
+      )
+    },
+  )
+}
diff --git a/packages/browser-extension/src/devtools-overlay.ts b/packages/browser-extension/src/devtools-overlay.ts
index c1c0ab31..1dbc2778 100644
--- a/packages/browser-extension/src/devtools-overlay.ts
+++ b/packages/browser-extension/src/devtools-overlay.ts
@@ -1,83 +1,86 @@
-import { VIEW_MODE_STORAGE_KEY, VITE_PLUGIN_CLIENT_URL_STORAGE_KEY, VITE_PLUGIN_DETECTED_STORAGE_KEY } from './../../shared/src/constants'
-
 const body = document.getElementsByTagName('body')[0]
 
-const clientUrl = chrome.runtime.getURL('../client/index.html')
-
 // create detector script
 const detector = document.createElement('script')
-detector.src = chrome.runtime.getURL('../dist/detector.js')
+detector.src = chrome.runtime.getURL('dist/detector.js')
 detector.onload = () => {
   detector.parentNode!.removeChild(detector)
 }
-body.appendChild(detector)
-
-function init() {
-  const body = document.getElementsByTagName('body')[0]
-  const head = document.getElementsByTagName('head')[0]
 
-  // create overlay link stylesheet
-  const link = document.createElement('link')
-  link.rel = 'stylesheet'
-  link.href = chrome.runtime.getURL('../overlay/devtools-overlay.css')
+;(document.head || document.documentElement).appendChild(detector)
 
-  // create overlay script
-  const script = document.createElement('script')
-  script.src = chrome.runtime.getURL('../overlay/devtools-overlay.js')
-  head.appendChild(link)
-  link.onload = () => {
-    // append overlay to body
-    body.appendChild(script)
+window.addEventListener('message', (event) => {
+  if (event.data.key === '__VUE_DEVTOOLS_VUE_DETECTED_EVENT__') {
+    chrome.runtime.sendMessage(event.data.data)
   }
+}, false)
 
-  // inject devtools client url variable
-  // de-depulicate
-  if (head.querySelector('meta[name="__VUE_DEVTOOLS_CLIENT_URL__"]'))
-    return
+// function init() {
+//   const body = document.getElementsByTagName('body')[0]
+//   const head = document.getElementsByTagName('head')[0]
 
-  const meta = document.createElement('meta')
-  meta.setAttribute('name', '__VUE_DEVTOOLS_CLIENT_URL__')
-  meta.setAttribute('content', clientUrl)
-  head.appendChild(meta)
-}
+//   // create overlay link stylesheet
+//   const link = document.createElement('link')
+//   link.rel = 'stylesheet'
+//   link.href = chrome.runtime.getURL('../overlay/devtools-overlay.css')
 
-function toggleViewMode(mode: 'overlay' | 'panel') {
-  window.postMessage({
-    source: '__VUE_DEVTOOLS_OVERLAY__',
-    payload: {
-      event: 'toggle-view-mode',
-      data: mode,
-    },
-  }, '*')
-}
+//   // create overlay script
+//   const script = document.createElement('script')
+//   script.src = chrome.runtime.getURL('../overlay/devtools-overlay.js')
+//   head.appendChild(link)
+//   link.onload = () => {
+//     // append overlay to body
+//     body.appendChild(script)
+//   }
 
-window.addEventListener('message', async (e) => {
-  if (e.source === window && e.data.vueDetected) {
-    await chrome.storage.local.set({ [VITE_PLUGIN_DETECTED_STORAGE_KEY]: e.data.vitePluginDetected, [VITE_PLUGIN_CLIENT_URL_STORAGE_KEY]: e.data.vitePluginClientUrl })
-    if (e.data.vitePluginDetected)
-      return
-    chrome.runtime.sendMessage(e.data)
-    const storage = await chrome.storage.local.get(VIEW_MODE_STORAGE_KEY)
-    const viewMode = storage[VIEW_MODE_STORAGE_KEY] ?? 'overlay'
-    const data = e.data
-    if (data.devtoolsEnabled && viewMode === 'overlay')
-      init()
-  }
-  else if (e.data.source === '__VUE_DEVTOOLS_PROXY__' && e.data.payload.event === 'toggle-view-mode') {
-    if (e.data.payload.data === 'panel') {
-      toggleViewMode('panel')
-    }
+//   // inject devtools client url variable
+//   // de-depulicate
+//   if (head.querySelector('meta[name="__VUE_DEVTOOLS_CLIENT_URL__"]'))
+//     return
 
-    else {
-      const link = document.querySelector('link[href^="chrome-extension://"][href*="/devtools-overlay.css"]')
-      const script = document.querySelector('script[src^="chrome-extension://"][src*="/devtools-overlay.js"]')
+//   const meta = document.createElement('meta')
+//   meta.setAttribute('name', '__VUE_DEVTOOLS_CLIENT_URL__')
+//   meta.setAttribute('content', clientUrl)
+//   head.appendChild(meta)
+// }
 
-      // init
-      if (!link || !script)
-        init()
-      // restore
-      else
-        toggleViewMode('overlay')
-    }
-  }
-})
+// function toggleViewMode(mode: 'overlay' | 'panel') {
+//   window.postMessage({
+//     source: '__VUE_DEVTOOLS_OVERLAY__',
+//     payload: {
+//       event: 'toggle-view-mode',
+//       data: mode,
+//     },
+//   }, '*')
+// }
+
+// window.addEventListener('message', async (e) => {
+//   if (e.source === window && e.data.vueDetected) {
+//     await chrome.storage.local.set({ [VITE_PLUGIN_DETECTED_STORAGE_KEY]: e.data.vitePluginDetected, [VITE_PLUGIN_CLIENT_URL_STORAGE_KEY]: e.data.vitePluginClientUrl })
+//     if (e.data.vitePluginDetected)
+//       return
+//     chrome.runtime.sendMessage(e.data)
+//     const storage = await chrome.storage.local.get(VIEW_MODE_STORAGE_KEY)
+//     const viewMode = storage[VIEW_MODE_STORAGE_KEY] ?? 'overlay'
+//     const data = e.data
+//     if (data.devtoolsEnabled && viewMode === 'overlay')
+//       init()
+//   }
+//   else if (e.data.source === '__VUE_DEVTOOLS_PROXY__' && e.data.payload.event === 'toggle-view-mode') {
+//     if (e.data.payload.data === 'panel') {
+//       toggleViewMode('panel')
+//     }
+
+//     else {
+//       const link = document.querySelector('link[href^="chrome-extension://"][href*="/devtools-overlay.css"]')
+//       const script = document.querySelector('script[src^="chrome-extension://"][src*="/devtools-overlay.js"]')
+
+//       // init
+//       if (!link || !script)
+//         init()
+//       // restore
+//       else
+//         toggleViewMode('overlay')
+//     }
+//   }
+// })
diff --git a/packages/browser-extension/src/devtools-panel.ts b/packages/browser-extension/src/devtools-panel.ts
index 1f22a675..2bd0b5b9 100644
--- a/packages/browser-extension/src/devtools-panel.ts
+++ b/packages/browser-extension/src/devtools-panel.ts
@@ -1,6 +1,7 @@
-import { Bridge } from '../../core/src/bridge'
-import { initDevTools } from '../client/devtools-panel'
-import { VITE_PLUGIN_CLIENT_URL_STORAGE_KEY, VITE_PLUGIN_DETECTED_STORAGE_KEY } from './../../shared/src/constants'
+// import { Bridge } from '../../core/src/bridge'
+import { createRpcClient } from '@vue/devtools-kit'
+import { functions, onRpcConnected } from '@vue/devtools-core'
+import { disconnectDevToolsClient, initDevTools, reloadDevToolsClient } from '../client/devtools-panel'
 
 const connectionInfo: {
   retryTimer: NodeJS.Timeout | null
@@ -16,117 +17,47 @@ const connectionInfo: {
   listeners: [],
 }
 
-function connect() {
-  try {
-    clearTimeout(connectionInfo.retryTimer!)
-    connectionInfo.count++
-    connectionInfo.port = chrome.runtime.connect({
-      name: `${chrome.devtools.inspectedWindow.tabId}`,
-    })
+// function connect() {
+//   try {
+//     clearTimeout(connectionInfo.retryTimer!)
+//     connectionInfo.count++
+//     connectionInfo.port = chrome.runtime.connect({
+//       name: `${chrome.devtools.inspectedWindow.tabId}`,
+//     })
 
-    connectionInfo.disconnected = false
-    connectionInfo.port.onDisconnect.addListener(() => {
-      connectionInfo.disconnected = true
-      connectionInfo.retryTimer = setTimeout(connect, 1000)
-    })
-    if (connectionInfo.count > 1)
-      connectionInfo.listeners.forEach(fn => connectionInfo.port.onMessage.addListener(fn))
-  }
-  catch (e) {
-    connectionInfo.disconnected = true
-    connectionInfo.retryTimer = setTimeout(connect, 5000)
-  }
-}
+//     connectionInfo.disconnected = false
+//     connectionInfo.port.onDisconnect.addListener(() => {
+//       connectionInfo.disconnected = true
+//       connectionInfo.retryTimer = setTimeout(connect, 1000)
+//     })
+//     if (connectionInfo.count > 1)
+//       connectionInfo.listeners.forEach(fn => connectionInfo.port.onMessage.addListener(fn))
+//   }
+//   catch (e) {
+//     connectionInfo.disconnected = true
+//     connectionInfo.retryTimer = setTimeout(connect, 5000)
+//   }
+// }
 
-chrome.storage.local.get([VITE_PLUGIN_DETECTED_STORAGE_KEY, VITE_PLUGIN_CLIENT_URL_STORAGE_KEY]).then((storage) => {
-  const vitePluginDetected = storage[VITE_PLUGIN_DETECTED_STORAGE_KEY]
-  const vitePluginClientUrl = storage[VITE_PLUGIN_CLIENT_URL_STORAGE_KEY]
-  // for vite plugin
-  if (vitePluginDetected) {
-    function init(iframe: HTMLIFrameElement) {
-      if (chrome.runtime?.id === undefined)
-        return
-      injectScript(chrome.runtime.getURL('dist/user-app.js'), () => {
-        connect()
-
-        // proxy user app messaging
-        function onPortMessage(data) {
-          if (connectionInfo.disconnected)
-            return
-          iframe?.contentWindow?.postMessage({
-            source: '__VUE_DEVTOOLS_USER_APP__',
-            data,
-          }, '*')
-        }
-        connectionInfo.port!.onMessage.addListener(onPortMessage)
-
-        // proxy devtools client messaging
-        function onIframeMessage(e) {
-          if (connectionInfo.disconnected)
-            return
-          if (e.data.source === '__VUE_DEVTOOLS_CLIENT__')
-            connectionInfo.port?.postMessage(e.data.data)
-        }
-        window.addEventListener('message', onIframeMessage)
-
-        iframe?.contentWindow?.postMessage('__VUE_DEVTOOLS_CREATE_CLIENT__', '*')
-
-        function cleanup() {
-          connectionInfo.port!.onMessage.removeListener(onPortMessage)
-          window.removeEventListener('message', onIframeMessage)
-          chrome.devtools.network.onNavigated.removeListener(cleanup)
-          init(iframe)
-        }
-        chrome.devtools.network.onNavigated.addListener(cleanup)
+function init() {
+  injectScript(chrome.runtime.getURL('dist/user-app.js'), () => {
+    initDevTools()
+
+    createRpcClient(functions, {
+      preset: 'extension',
+    })
+  })
+  chrome.devtools.network.onNavigated.addListener(() => {
+    disconnectDevToolsClient()
+    injectScript(chrome.runtime.getURL('dist/user-app.js'), () => {
+      onRpcConnected(() => {
+        reloadDevToolsClient()
       })
-    }
-
-    function createClient() {
-      const iframe = document.createElement('iframe')
-      iframe.src = vitePluginClientUrl
-      iframe.style.border = 'none'
-      iframe.style.width = '100vw'
-      iframe.style.height = '100vh'
-      document.getElementById('app')!.appendChild(iframe)
-      iframe.onload = () => {
-        init(iframe)
-      }
-    }
-
-    createClient()
-  }
-  // for browser extension
-  else {
-    initDevTools({
-      connect(cb) {
-        if (chrome.runtime?.id === undefined)
-          return
-        injectScript(chrome.runtime.getURL('dist/user-app.js'), () => {
-          // connect to background to setup proxy
-          connect()
-
-          const bridge = new Bridge({
-            tracker(fn: any) {
-              connectionInfo.port.onMessage.addListener(fn)
-              connectionInfo.listeners.push(fn)
-            },
-            trigger(data) {
-              if (connectionInfo.disconnected)
-                return
-
-              connectionInfo.port?.postMessage(data)
-            },
-          })
-
-          cb(bridge)
-        })
-      },
-      reload(fn) {
-        chrome.devtools.network.onNavigated.addListener(fn)
-      },
     })
-  }
-})
+  })
+}
+
+init()
 
 function injectScript(scriptName: string, cb: () => void) {
   const src = `
@@ -144,3 +75,93 @@ function injectScript(scriptName: string, cb: () => void) {
     cb()
   })
 }
+
+// chrome.storage.local.get([VITE_PLUGIN_DETECTED_STORAGE_KEY, VITE_PLUGIN_CLIENT_URL_STORAGE_KEY]).then((storage) => {
+//   const vitePluginDetected = storage[VITE_PLUGIN_DETECTED_STORAGE_KEY]
+//   const vitePluginClientUrl = storage[VITE_PLUGIN_CLIENT_URL_STORAGE_KEY]
+//   // for vite plugin
+//   if (vitePluginDetected) {
+//     function init(iframe: HTMLIFrameElement) {
+//       if (chrome.runtime?.id === undefined)
+//         return
+//       injectScript(chrome.runtime.getURL('dist/user-app.js'), () => {
+//         connect()
+
+//         // proxy user app messaging
+//         function onPortMessage(data) {
+//           if (connectionInfo.disconnected)
+//             return
+//           iframe?.contentWindow?.postMessage({
+//             source: '__VUE_DEVTOOLS_USER_APP__',
+//             data,
+//           }, '*')
+//         }
+//         connectionInfo.port!.onMessage.addListener(onPortMessage)
+
+//         // proxy devtools client messaging
+//         function onIframeMessage(e) {
+//           if (connectionInfo.disconnected)
+//             return
+//           if (e.data.source === '__VUE_DEVTOOLS_CLIENT__')
+//             connectionInfo.port?.postMessage(e.data.data)
+//         }
+//         window.addEventListener('message', onIframeMessage)
+
+//         iframe?.contentWindow?.postMessage('__VUE_DEVTOOLS_CREATE_CLIENT__', '*')
+
+//         function cleanup() {
+//           connectionInfo.port!.onMessage.removeListener(onPortMessage)
+//           window.removeEventListener('message', onIframeMessage)
+//           chrome.devtools.network.onNavigated.removeListener(cleanup)
+//           init(iframe)
+//         }
+//         chrome.devtools.network.onNavigated.addListener(cleanup)
+//       })
+//     }
+
+//     function createClient() {
+//       const iframe = document.createElement('iframe')
+//       iframe.src = vitePluginClientUrl
+//       iframe.style.border = 'none'
+//       iframe.style.width = '100vw'
+//       iframe.style.height = '100vh'
+//       document.getElementById('app')!.appendChild(iframe)
+//       iframe.onload = () => {
+//         init(iframe)
+//       }
+//     }
+
+//     createClient()
+//   }
+//   // for browser extension
+//   else {
+//     // initDevTools({
+//     //   connect(cb) {
+//     //     if (chrome.runtime?.id === undefined)
+//     //       return
+//     //     injectScript(chrome.runtime.getURL('dist/user-app.js'), () => {
+//     //       // connect to background to setup proxy
+//     //       connect()
+
+//     //       const bridge = new Bridge({
+//     //         tracker(fn: any) {
+//     //           connectionInfo.port.onMessage.addListener(fn)
+//     //           connectionInfo.listeners.push(fn)
+//     //         },
+//     //         trigger(data) {
+//     //           if (connectionInfo.disconnected)
+//     //             return
+
+//     //           connectionInfo.port?.postMessage(data)
+//     //         },
+//     //       })
+
+//     //       cb(bridge)
+//     //     })
+//     //   },
+//     //   reload(fn) {
+//     //     chrome.devtools.network.onNavigated.addListener(fn)
+//     //   },
+//     // })
+//   }
+// })
diff --git a/packages/browser-extension/src/proxy.ts b/packages/browser-extension/src/proxy.ts
index 97fb3c9b..9d312611 100644
--- a/packages/browser-extension/src/proxy.ts
+++ b/packages/browser-extension/src/proxy.ts
@@ -3,31 +3,37 @@
 // to the chrome runtime API. It serves as a proxy between the injected
 // user application and the Vue devtools panel.
 
-const port = chrome.runtime.connect({
-  name: 'content-script',
+import { createRpcProxy } from '@vue/devtools-kit'
+
+createRpcProxy({
+  preset: 'extension',
 })
 
-function sendMessageToUserApp(payload) {
-  window.postMessage({
-    source: '__VUE_DEVTOOLS_PROXY__',
-    payload,
-  }, '*')
-}
+// const port = chrome.runtime.connect({
+//   name: 'content-script',
+// })
 
-function sendMessageToDevTools(e) {
-  if (e.data && e.data.source === '__VUE_DEVTOOLS_USER_APP__')
-    port.postMessage(e.data.payload)
-}
+// function sendMessageToUserApp(payload) {
+//   window.postMessage({
+//     source: '__VUE_DEVTOOLS_PROXY__',
+//     payload,
+//   }, '*')
+// }
 
-port.onMessage.addListener(sendMessageToUserApp)
-window.addEventListener('message', sendMessageToDevTools)
-port.onDisconnect.addListener(() => {
-  window.removeEventListener('message', sendMessageToDevTools)
-  sendMessageToUserApp({
-    event: 'shutdown',
-  })
-})
+// function sendMessageToDevTools(e) {
+//   if (e.data && e.data.source === '__VUE_DEVTOOLS_USER_APP__')
+//     port.postMessage(e.data.payload)
+// }
 
-sendMessageToUserApp({
-  event: 'init',
-})
+// port.onMessage.addListener(sendMessageToUserApp)
+// window.addEventListener('message', sendMessageToDevTools)
+// port.onDisconnect.addListener(() => {
+//   window.removeEventListener('message', sendMessageToDevTools)
+//   sendMessageToUserApp({
+//     event: 'shutdown',
+//   })
+// })
+
+// sendMessageToUserApp({
+//   event: 'init',
+// })
diff --git a/packages/browser-extension/src/user-app.ts b/packages/browser-extension/src/user-app.ts
index 1ae5cffb..63fdfc40 100644
--- a/packages/browser-extension/src/user-app.ts
+++ b/packages/browser-extension/src/user-app.ts
@@ -1,52 +1,27 @@
-import { target } from '@vue/devtools-shared'
-import { Bridge } from '../../core/src/bridge'
-import { prepareInjection } from '../../core/src/injection'
+import { createRpcServer } from '@vue/devtools-kit'
+import { functions } from '@vue/devtools-core'
 
 window.addEventListener('message', handshake)
 
+createRpcServer(functions, {
+  preset: 'extension',
+})
+
 function handshake(e: MessageEvent) {
-  if (e.data.source === '__VUE_DEVTOOLS_PROXY__' && e.data.payload.event === 'init') {
+  if (e.data.source === 'proxy->server' && e.data.payload.event === 'init') {
     window.removeEventListener('message', handshake)
 
     const listeners: ((event: unknown) => void)[] = []
-    const bridge = new Bridge({
-      tracker(fn) {
-        const listener = (event) => {
-          if (event.data.source === '__VUE_DEVTOOLS_PROXY__' && event.data.payload)
-            fn(event.data.payload)
-        }
-        window.addEventListener('message', listener)
-        listeners.push(listener)
-      },
-      trigger(data) {
-        window.postMessage({
-          source: '__VUE_DEVTOOLS_USER_APP__',
-          payload: data,
-        }, '*')
-      },
-    })
-    bridge.removeAllListeners()
-
-    bridge.on('shutdown', () => {
-      listeners.forEach((listener) => {
-        window.removeEventListener('message', listener)
-      })
-      listeners.length = 0
-      bridge.removeAllListeners()
-      window.addEventListener('message', handshake)
-    })
-
-    prepareInjection(bridge)
   }
 }
 
-window.addEventListener('message', toggleOverlay)
+// window.addEventListener('message', toggleOverlay)
 
-function toggleOverlay(e) {
-  const data = e.data
-  const payload = data.payload
-  if (data.source === '__VUE_DEVTOOLS_OVERLAY__' && payload.event === 'toggle-view-mode') {
-    // @TODO: refactor
-    target?.__VUE_DEVTOOLS_TOGGLE_OVERLAY__?.(payload.data === 'overlay')
-  }
-}
+// function toggleOverlay(e) {
+//   const data = e.data
+//   const payload = data.payload
+//   if (data.source === '__VUE_DEVTOOLS_OVERLAY__' && payload.event === 'toggle-view-mode') {
+//     // @TODO: refactor
+//     target?.__VUE_DEVTOOLS_TOGGLE_OVERLAY__?.(payload.data === 'overlay')
+//   }
+// }
diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
index 6761f668..a6b0f48b 100644
--- a/packages/client/src/App.vue
+++ b/packages/client/src/App.vue
@@ -1,32 +1,40 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
-import { checkVueInspectorDetected, enableVueInspector, useDevToolsBridge, useDevToolsState } from '@vue/devtools-core'
-import { isInChromePanel } from '@vue/devtools-shared'
-import { useDevToolsColorMode } from '@vue/devtools-ui'
 import { Pane, Splitpanes } from 'splitpanes'
+import { useDevToolsColorMode } from '@vue/devtools-ui'
+import { DevToolsMessagingEvents, onDevToolsConnected, onRpcConnected, refreshCurrentPageData, rpc, useDevToolsState } from '@vue/devtools-core'
 
 import('./setup/unocss-runtime')
-
-// @TODO: fix browser extension cross-origin localStorage issue
 useDevToolsColorMode()
 const router = useRouter()
 const route = useRoute()
-const { connected, clientConnected } = useDevToolsState()
+const hostEnv = useHostEnv()
+const { connected, clientConnected, activeAppRecordId: _activeAppRecordId, appRecords: _appRecords } = useDevToolsState()
 const clientState = devtoolsClientState
 
-const viewMode = inject<Ref<'overlay' | 'panel'>>('viewMode', ref('overlay'))
-const viewModeSwitchVisible = computed(() => viewMode.value === 'overlay' && isInChromePanel)
-const bridge = useDevToolsBridge()
-
+const devtoolsReady = computed(() => connected.value && clientConnected.value)
 const isUtilityView = computed(() => route.path.startsWith('/__') || route.path === '/')
 const sidebarExpanded = computed(() => clientState.value.expandSidebar)
-const devtoolsReady = computed(() => clientConnected.value && connected.value)
+const splitScreenEnabled = computed(() => clientState.value.splitScreen.enabled)
+const splitScreenSize = computed({
+  get: () => clientState.value.splitScreen.size,
+  set: v => clientState.value.splitScreen.size = v,
+})
 
 watchEffect(() => {
   const scale = devtoolsClientState.value.scale
   document.documentElement.style.fontSize = `${scale * 15}px`
 })
 
+onRpcConnected(() => {
+  watchEffect(() => {
+    rpc.value.emit('update-client-state', {
+      minimizePanelInteractive: devtoolsClientState.value.minimizePanelInteractive,
+      closeOnOutsideClick: devtoolsClientState.value.interactionCloseOnOutsideClick,
+      showFloatingPanel: devtoolsClientState.value.showPanel,
+    })
+  })
+})
+
 watch(devtoolsReady, (v) => {
   if (v) {
     router.replace(clientState.value.isFirstVisit ? '/' : clientState.value.route)
@@ -43,51 +51,48 @@ watch(devtoolsReady, (v) => {
 
 useEventListener('keydown', (e) => {
   if (e.code === 'KeyD' && e.altKey && e.shiftKey)
-    bridge.value.emit('toggle-panel')
+    rpc.value.emit('toggle-panel')
 })
 
 watchEffect(() => {
-  bridge.value.emit('update-client-state', {
-    minimizePanelInteractive: devtoolsClientState.value.minimizePanelInteractive,
-    closeOnOutsideClick: devtoolsClientState.value.interactionCloseOnOutsideClick,
-    showFloatingPanel: devtoolsClientState.value.showPanel,
-  })
+  activeAppRecords.value = _appRecords.value
+  activeAppRecordId.value = _activeAppRecordId.value
 })
 
-const splitScreenEnabled = computed(() => clientState.value.splitScreen.enabled)
-const splitScreenSize = computed({
-  get: () => clientState.value.splitScreen.size,
-  set: v => clientState.value.splitScreen.size = v,
+onRpcConnected(() => {
+  rpc.value.initDevToolsServerListener()
+  rpc.value.checkVueInspectorDetected().then((detected) => {
+    if (detected) {
+      vueInspectorDetected.value = true
+      registerCommands(() =>
+        [{
+          id: 'action:vue-inspector',
+          title: 'Inspector',
+          icon: 'i-carbon-select-window',
+          action: async () => {
+            rpc.value.emit('toggle-panel', false)
+            await rpc.value.enableVueInspector()
+          },
+        }],
+      )
+    }
+  })
 })
 
-// setup active app
-const devtoolsState = useDevToolsState()
-watchEffect(() => {
-  activeAppRecords.value = devtoolsState.appRecords.value
-  activeAppRecordId.value = devtoolsState.activeAppRecordId.value
+function onActiveAppUnmounted() {
+  router.push('/overview').then(() => {
+    refreshCurrentPageData()
+  })
+}
+
+onDevToolsConnected(() => {
+  rpc.functions.on(DevToolsMessagingEvents.ACTIVE_APP_UNMOUNTED, onActiveAppUnmounted)
 })
 
 // register commands
 const { copy } = useCopy()
 const eyeDropper = useEyeDropper({})
 
-checkVueInspectorDetected().then((detected) => {
-  if (detected) {
-    vueInspectorDetected.value = true
-    registerCommands(() =>
-      [{
-        id: 'action:vue-inspector',
-        title: 'Inspector',
-        icon: 'i-carbon-select-window',
-        action: async () => {
-          bridge.value.emit('toggle-panel', false)
-          await enableVueInspector()
-        },
-      }],
-    )
-  }
-})
-
 registerCommands(() => [
   ...(eyeDropper.isSupported.value
     ? [{
@@ -95,7 +100,7 @@ registerCommands(() => [
         title: 'Color Picker',
         icon: 'i-carbon-eyedropper',
         action: async () => {
-          bridge.value.emit('toggle-panel', false)
+          rpc.value.emit('toggle-panel', false)
           const { sRGBHex } = await eyeDropper.open() || {}
           if (sRGBHex)
             copy(sRGBHex)
@@ -103,12 +108,22 @@ registerCommands(() => [
       }]
     : []),
 ])
+
+onMounted(() => {
+  onRpcConnected(() => {
+    rpc.value.toggleClientConnected(true)
+  })
+})
+
+onUnmounted(() => {
+  rpc.value.toggleClientConnected(false)
+  rpc.functions.off(DevToolsMessagingEvents.ACTIVE_APP_UNMOUNTED, onActiveAppUnmounted)
+})
 </script>
 
 <template>
   <main class="fixed inset-0 h-screen w-screen $ui-bg-base">
     <AppConnecting v-if="!devtoolsReady" />
-    <ViewModeSwitch v-else-if="viewModeSwitchVisible" />
     <div
       v-else
       class="h-full of-auto transition-base"
diff --git a/packages/client/src/components/AppConnecting.vue b/packages/client/src/components/AppConnecting.vue
index 846ea2ad..86c9f416 100644
--- a/packages/client/src/components/AppConnecting.vue
+++ b/packages/client/src/components/AppConnecting.vue
@@ -28,7 +28,7 @@ import VueLogo from '~/assets/images/vue-logo.svg'
 
 .outer,
 .inner {
-  --at-apply: transform rounded-50% bg-primary-500 bg-opacity-10;
+  --at-apply: transform rounded-[50%] bg-primary-500 bg-opacity-10;
 }
 .outer {
   --at-apply: p-6;
diff --git a/packages/client/src/components/CustomTabComponent.vue b/packages/client/src/components/CustomTabComponent.vue
index 06b3a728..0aea1e9c 100644
--- a/packages/client/src/components/CustomTabComponent.vue
+++ b/packages/client/src/components/CustomTabComponent.vue
@@ -8,7 +8,7 @@ const p = defineProps<{
 
 const props = toRefs(p)
 
-const tabName = computed(() => props.tab.value.name)
+const tabName = computed(() => props.tab.value?.name)
 
 const iframeViewVisible = ref(true)
 watch(() => tabName.value, () => {
diff --git a/packages/client/src/components/assets/AssetDetails.vue b/packages/client/src/components/assets/AssetDetails.vue
index e906ca7b..37b7b91a 100644
--- a/packages/client/src/components/assets/AssetDetails.vue
+++ b/packages/client/src/components/assets/AssetDetails.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTimeAgo } from '@vueuse/core'
-import type { AssetImporter, AssetInfo, CodeSnippet, ImageMeta } from '@vue/devtools-core'
-import { callViteServerAction, useDevToolsState } from '@vue/devtools-core'
+import type { AssetInfo, CodeSnippet } from '@vue/devtools-core'
+import { useDevToolsState, viteRpc } from '@vue/devtools-core'
 import { VueButton, VueIcon, vTooltip } from '@vue/devtools-ui'
 import { openInEditor } from '../../composables/open-in-editor'
 
@@ -10,21 +10,17 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{ (...args: any): void }>()
-
 const state = useDevToolsState()
-const getImageMeta = callViteServerAction<ImageMeta>('assets:get-image-meta')
-const getTextAssetContent = callViteServerAction<string>('assets:get-text-asset-content')
 const asset = useVModel(props, 'modelValue', emit, { passive: true })
-
-const getAssetImporters = callViteServerAction<AssetImporter[]>('assets:get-asset-importers')
-const importers = computedAsync(() => getAssetImporters(asset.value.publicPath), [])
-
+const vitePluginDetected = computed(() => state.vitePluginDetected.value)
+const importers = computedAsync(() => viteRpc.value.getAssetImporters(asset.value.publicPath).then(res => res), [])
 const _vueInspectorDetected = computed(() => vueInspectorDetected.value)
+
 const imageMeta = computedAsync(() => {
   if (asset.value.type !== 'image')
     return undefined
 
-  return getImageMeta(asset.value.filePath)
+  return viteRpc.value.getImageMeta(asset.value.filePath).then(res => res)
 })
 
 const newTextContent = ref()
@@ -36,7 +32,7 @@ const textContent = computedAsync(async () => {
   // eslint-disable-next-line no-unused-expressions
   textContentCounter.value
 
-  const content = await getTextAssetContent(asset.value.filePath)
+  const content = await viteRpc.value.getTextAssetContent(asset.value.filePath).then(res => res)
   newTextContent.value = content
   return content
 })
@@ -136,7 +132,7 @@ const supportsPreview = computed(() => {
             <div flex="~ gap-1" w-full items-center>
               <FilepathItem :filepath="asset.filePath" text-left />
               <VueIcon
-                v-if="state.vitePluginDetected.value && _vueInspectorDetected"
+                v-if="vitePluginDetected && _vueInspectorDetected"
                 v-tooltip="'Open in Editor'"
                 title="Open in Editor"
                 icon="i-carbon-launch"
diff --git a/packages/client/src/components/common/DockingPanel.vue b/packages/client/src/components/common/DockingPanel.vue
index 1edb23bb..7e1ac1a7 100644
--- a/packages/client/src/components/common/DockingPanel.vue
+++ b/packages/client/src/components/common/DockingPanel.vue
@@ -1,15 +1,9 @@
 <script setup lang="ts">
 import { VueButton, VueDarkToggle, VueIcon, VueSelect } from '@vue/devtools-ui'
-import { isInChromePanel } from '@vue/devtools-shared'
-import { toggleApp, useDevToolsState } from '@vue/devtools-core'
-
-// #region view mode
-const viewMode = inject<Ref<'overlay' | 'panel'>>('viewMode', ref('overlay'))
-const viewModeSwitchVisible = computed(() => viewMode.value === 'panel' && isInChromePanel)
-const { toggle: toggleViewMode } = useToggleViewMode()
-// #endregion
+import { refreshCurrentPageData, rpc, useDevToolsState } from '@vue/devtools-core'
 
 const router = useRouter()
+const route = useRoute()
 
 const expandSidebar = computed({
   get: () => devtoolsClientState.value.expandSidebar,
@@ -33,15 +27,20 @@ const appRecords = computed(() => devtoolsState.appRecords.value.map(app => ({
 })))
 
 const activeAppRecordId = ref(devtoolsState.activeAppRecordId.value)
+watchEffect(() => {
+  activeAppRecordId.value = devtoolsState.activeAppRecordId.value
+})
+
 const activeAppRecordName = computed(() => appRecords.value.find(app => app.value === activeAppRecordId.value)?.label ?? '')
 
-watch(activeAppRecordId, (id) => {
-  toggleApp(`${id}`).then(() => {
+function toggleApp(id: string) {
+  rpc.value.toggleApp(id).then(() => {
     router.push('/overview').then(() => {
       refreshCurrentPageData()
     })
   })
-})
+}
+
 // #endregion
 </script>
 
@@ -71,14 +70,11 @@ watch(activeAppRecordId, (id) => {
     </div>
     <div px3 py2 flex="~ gap2">
       <template v-if="appRecords.length > 1">
-        <VueSelect v-model="activeAppRecordId" :options="appRecords" :placeholder="activeAppRecordName || 'Toggle App'" :button-props="{ outlined: true, type: 'primary' }" />
+        <VueSelect v-model="activeAppRecordId" :options="appRecords" :placeholder="activeAppRecordName || 'Toggle App'" :button-props="{ outlined: true, type: 'primary' }" @update:model-value="toggleApp" />
       </template>
       <VueButton outlined type="primary" @click="refreshPage">
         Refresh Page
       </VueButton>
-      <VueButton v-if="viewModeSwitchVisible" outlined type="primary" @click="toggleViewMode('overlay')">
-        Switch to Overlay Mode
-      </VueButton>
     </div>
   </div>
 </template>
diff --git a/packages/client/src/components/inspector/InspectorDataField/Actions.vue b/packages/client/src/components/inspector/InspectorDataField/Actions.vue
deleted file mode 100644
index be799fd2..00000000
--- a/packages/client/src/components/inspector/InspectorDataField/Actions.vue
+++ /dev/null
@@ -1,163 +0,0 @@
-<script setup lang="ts">
-import { toRaw } from 'vue'
-import { VueButton, VueDropdown, VueDropdownButton, VueIcon, vTooltip } from '@vue/devtools-ui'
-import { getRaw } from '@vue/devtools-kit'
-import type { InspectorState, InspectorStateEditorPayload } from '@vue/devtools-kit'
-import type { ButtonProps } from '@vue/devtools-ui/dist/types/src/components/Button'
-import { editInspectorState } from '@vue/devtools-core'
-import type { EditorAddNewPropType, EditorInputValidType } from '../../../composables/inspector'
-
-const props = withDefaults(defineProps<{
-  data: InspectorState
-  hovering: boolean
-  depth: number
-  showAddIfNeeded?: boolean
-  disableEdit?: boolean
-}>(), {
-  showAddIfNeeded: true,
-})
-
-defineEmits<{
-  enableEditInput: [type: EditorInputValidType]
-  addNewProp: [type: EditorAddNewPropType]
-}>()
-
-const state = useStateEditorContext()
-
-const { copy, isSupported } = useClipboard()
-
-const popupVisible = ref(false)
-
-const raw = computed(() => getRaw(props.data.value))
-const rawValue = computed(() => raw.value.value)
-const customType = computed(() => raw.value.customType)
-const dataType = computed(() => rawValue.value === null ? 'null' : typeof rawValue.value)
-
-const iconButtonProps = {
-  flat: true,
-  size: 'mini',
-} satisfies ButtonProps
-
-const buttonClass = computed(() => ({
-  'opacity-0': !props.hovering,
-}))
-
-function quickEdit(v: unknown, remove: boolean = false) {
-  editInspectorState({
-    path: props.data.key.split('.'),
-    inspectorId: state.value.inspectorId,
-    type: props.data.stateType!,
-    nodeId: state.value.nodeId,
-    state: {
-      newKey: null!,
-      value: toRaw(v),
-      type: dataType.value,
-      remove,
-    },
-  } satisfies InspectorStateEditorPayload)
-}
-
-function quickEditNum(v: number | string, offset: 1 | -1) {
-  const target = typeof v === 'number'
-    ? v + offset
-    : BigInt(v) + BigInt(offset)
-  quickEdit(target)
-}
-</script>
-
-<template>
-  <div class="flex pl5px">
-    <!-- only editable will show operate actions -->
-    <template v-if="!props.disableEdit && data.editable">
-      <!-- input edit, number/string/object -->
-      <template v-if="dataType === 'string' || dataType === 'number' || dataType === 'object' || dataType === 'null'">
-        <VueButton
-          v-tooltip="{
-            content: 'Edit value',
-          }" v-bind="iconButtonProps" :class="buttonClass" @click.stop="$emit('enableEditInput', dataType)"
-        >
-          <template #icon>
-            <VueIcon icon="i-material-symbols-edit-rounded" />
-          </template>
-        </VueButton>
-        <VueButton
-          v-if="dataType === 'object' && showAddIfNeeded"
-          v-tooltip="{
-            content: 'Add new value',
-          }" v-bind="iconButtonProps" :class="buttonClass" @click.stop="
-            $emit('addNewProp', Array.isArray(rawValue) ? 'array' : 'object')"
-        >
-          <template #icon>
-            <VueIcon icon="i-material-symbols-add-circle-rounded" />
-          </template>
-        </VueButton>
-      </template>
-      <!-- checkbox, button value only -->
-      <VueButton
-        v-if="dataType === 'boolean'" v-bind="iconButtonProps" :class="buttonClass"
-        @click="quickEdit(!rawValue)"
-      >
-        <template #icon>
-          <VueIcon :icon="rawValue ? 'i-material-symbols-check-box-sharp' : 'i-material-symbols-check-box-outline-blank-sharp'" />
-        </template>
-      </VueButton>
-      <!-- increment/decrement button, numeric/bigint -->
-      <template v-else-if="dataType === 'number' || customType === 'bigint'">
-        <VueButton v-bind="iconButtonProps" :class="buttonClass" @click.stop="quickEditNum(rawValue as number | string, 1)">
-          <template #icon>
-            <VueIcon icon="i-carbon-add" />
-          </template>
-        </VueButton>
-        <VueButton v-bind="iconButtonProps" :class="buttonClass" @click.stop="quickEditNum(rawValue as number | string, -1)">
-          <template #icon>
-            <VueIcon icon="i-carbon-subtract" />
-          </template>
-        </VueButton>
-      </template>
-    </template>
-    <!-- delete prop, only appear if depth > 0 -->
-    <VueButton v-if="!props.disableEdit && depth > 0" v-bind="iconButtonProps" :class="buttonClass" @click.stop="quickEdit(rawValue, true)">
-      <template #icon>
-        <VueIcon icon="i-material-symbols-delete-rounded" />
-      </template>
-    </VueButton>
-    <!-- Copy key/value -->
-    <VueDropdown
-      :class="{
-        'opacity-0': !hovering && !popupVisible,
-      }"
-      :button-props="{
-        flat: true,
-        size: 'mini',
-      }"
-      :disabled="!isSupported"
-      @update:visible="v => popupVisible = v"
-    >
-      <template #popper>
-        <div class="w160px py5px">
-          <VueDropdownButton
-            @click="copy(typeof rawValue === 'object' ? JSON.stringify(rawValue) : rawValue.toString())"
-          >
-            <template #icon>
-              <VueIcon icon="i-material-symbols-copy-all-rounded" class="mt4px" />
-              Copy Value
-            </template>
-          </VueDropdownButton>
-          <VueDropdownButton
-            @click="() => {
-              copy(data.key)
-            }"
-          >
-            <template #icon>
-              <VueIcon icon="i-material-symbols-copy-all-rounded" class="mt4px" />
-              Copy Path
-            </template>
-          </VueDropdownButton>
-        </div>
-      </template>
-      <template #button-icon>
-        <VueIcon icon="i-material-symbols:more-vert" />
-      </template>
-    </VueDropdown>
-  </div>
-</template>
diff --git a/packages/client/src/components/inspector/InspectorDataField/EditInput.vue b/packages/client/src/components/inspector/InspectorDataField/EditInput.vue
deleted file mode 100644
index 1dc5aebd..00000000
--- a/packages/client/src/components/inspector/InspectorDataField/EditInput.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<script setup lang="ts">
-import { VueButton, VueIcon, VueInput, vTooltip } from '@vue/devtools-ui'
-import { debounce } from 'perfect-debounce'
-import { customTypeEnums, toSubmit } from '@vue/devtools-kit'
-
-const props = withDefaults(defineProps<{
-  modelValue: string
-  customType?: customTypeEnums
-  showActions?: boolean
-  autoFocus?: boolean
-}>(), {
-  showActions: true,
-  autoFocus: true,
-})
-
-const emit = defineEmits<{
-  'cancel': []
-  'submit': []
-  'update:modelValue': [value: string]
-}>()
-
-const inputType = computed(() => {
-  if (props.customType === 'date')
-    return 'datetime-local'
-  return ''
-})
-
-// TODO: keyboard shortcut, esc to cancel, enter to submit
-//       and show tooltip on button when hovering
-
-const { escape, enter } = useMagicKeys()
-
-watchEffect(() => {
-  if (escape.value)
-    emit('cancel')
-  else if (enter.value)
-    emit('submit')
-})
-
-const value = useVModel(props, 'modelValue', emit)
-
-function tryToParseJSONString(v: unknown) {
-  try {
-    toSubmit(v as string, props.customType)
-    return true
-  }
-  catch {
-    return false
-  }
-}
-
-const isWarning = ref(false)
-const checkWarning = () => debounce(() => {
-  isWarning.value = !tryToParseJSONString(value.value)
-}, 300)
-watch(value, checkWarning())
-</script>
-
-<template>
-  <span class="flex-inline items-center gap4px">
-    <VueInput v-model="value" :type="inputType" :variant="isWarning ? 'warning' : 'normal'" class="h25px px4px" :class="customType === 'date' ? 'w240px' : 'w120px'" :auto-focus="autoFocus" @click.stop />
-    <template v-if="showActions">
-      <VueButton
-        v-tooltip="{
-          content: 'Esc to cancel',
-        }" size="mini" flat class="p2px!" @click.stop="$emit('cancel')"
-      >
-        <template #icon>
-          <VueIcon icon="i-material-symbols-cancel" />
-        </template>
-      </VueButton>
-      <template v-if="!isWarning">
-        <VueButton
-          v-tooltip="{
-            content: 'Enter to submit change',
-          }" size="mini" flat class="p2px!" @click.stop="$emit('submit')"
-        >
-          <template #icon>
-            <VueIcon icon="i-material-symbols-save" />
-          </template>
-        </VueButton>
-      </template>
-      <VueIcon
-        v-else v-tooltip="{
-          content: 'Invalid value',
-        }" icon="i-material-symbols-warning" class="color-warning-500 dark:color-warning-300"
-      />
-    </template>
-  </span>
-</template>
diff --git a/packages/client/src/components/inspector/InspectorNodeTag.vue b/packages/client/src/components/inspector/InspectorNodeTag.vue
deleted file mode 100644
index 5aae383b..00000000
--- a/packages/client/src/components/inspector/InspectorNodeTag.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type { InspectorNodeTag } from '@vue/devtools-kit'
-import { toHex } from '~/utils'
-
-defineProps<{
-  tag: InspectorNodeTag
-}>()
-</script>
-
-<template>
-  <span
-    v-tooltip="{
-      content: tag.tooltip,
-      html: true,
-    }"
-    :style="{
-      color: `#${toHex(tag.textColor)}`,
-      backgroundColor: `#${toHex(tag.backgroundColor)}`,
-    }"
-    class="ml-2 rounded-sm px-1 text-[0.75rem] leading-snug"
-  >
-    {{ tag.label }}
-  </span>
-</template>
diff --git a/packages/client/src/components/inspector/InspectorState.vue b/packages/client/src/components/inspector/InspectorState.vue
deleted file mode 100644
index 36c2293e..00000000
--- a/packages/client/src/components/inspector/InspectorState.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import type { InspectorState } from '@vue/devtools-kit'
-
-const props = withDefaults(defineProps<{
-  data: InspectorState[]
-  name: string
-  id: string
-  // mutate related, nodeId and inspectorId are required if disableMutate is false(by default)
-  nodeId: string
-  inspectorId: string
-  disableEdit?: boolean
-}>(), {
-  disableEdit: false,
-})
-
-const { isExpanded, toggleCollapse } = useCollapse('inspector-state', props.id)
-// expand the root node by default
-!isExpanded.value && toggleCollapse()
-
-createStateEditorContext({
-  nodeId: props.nodeId!,
-  inspectorId: props.inspectorId!,
-  disableEdit: props.disableEdit,
-})
-</script>
-
-<template>
-  <div class="group w-full px-0 selectable-item" @click="toggleCollapse">
-    <ExpandIcon :value="isExpanded" group-hover:text-white />
-    <span text-primary-400 group-hover:text-white class="text-[#486887] dark:(text-[#7595b5])">
-      {{ name }}
-    </span>
-  </div>
-  <InspectorStateType v-if="isExpanded" :data="data" :root-id="id" />
-</template>
diff --git a/packages/client/src/components/inspector/InspectorStateField.vue b/packages/client/src/components/inspector/InspectorStateField.vue
deleted file mode 100644
index 1ab42e7a..00000000
--- a/packages/client/src/components/inspector/InspectorStateField.vue
+++ /dev/null
@@ -1,267 +0,0 @@
-<script setup lang="ts">
-import type { InspectorCustomState, InspectorState, InspectorStateEditorPayload } from '@vue/devtools-kit'
-import { isArray, isObject, sortByKey } from '@vue/devtools-shared'
-import { formatInspectorStateValue, getInspectorStateValueType, getRaw, toEdit, toSubmit } from '@vue/devtools-kit'
-import { editInspectorState } from '@vue/devtools-core'
-import { VueButton, VueIcon, vTooltip } from '@vue/devtools-ui'
-import Actions from './InspectorDataField/Actions.vue'
-import type { EditorAddNewPropType } from '~/composables/inspector'
-
-const props = withDefaults(defineProps<{
-  data: InspectorState
-  depth?: number
-  no: number
-  rootId: string
-}>(), {
-  depth: 0,
-})
-
-const STATE_FIELDS_LIMIT_SIZE = 30
-
-const state = useStateEditorContext()
-const value = computed(() => formatInspectorStateValue(props.data.value))
-const type = computed(() => getInspectorStateValueType(props.data.value))
-const stateFormatClass = computed(() => {
-  if (type.value === 'custom')
-    return `state-format-${(props.data.value as InspectorCustomState)._custom?.type}`
-
-  else
-    return ``
-})
-
-const { isExpanded, toggleCollapse } = useCollapse('inspector-state', `${props.rootId}-${props.no}-${props.depth}-${props.data.key}`)
-
-const normalizedValue = computed(() => {
-  const stateTypeName = (props.data as InspectorCustomState)._custom?.stateTypeName || props.data?.stateTypeName
-  if (stateTypeName === 'Reactive') {
-    return stateTypeName
-  }
-  // @ts-expect-error @TODO: type
-  else if (props.data.value?.fields?.abstract) {
-    return ''
-  }
-  else {
-    const result = `<span class="state-value-${type.value}">${value.value}</span>`
-    if (stateTypeName)
-      return `${result} <span class="text-gray-500">(${stateTypeName})</span>`
-
-    return result
-  }
-})
-
-const raw = computed(() => getRaw(props.data.value))
-
-const limit = ref(STATE_FIELDS_LIMIT_SIZE)
-
-const normalizedChildField = computed<
-  Record<string, InspectorState>
->(() => {
-  const { value, inherit, customType } = raw.value
-  // The member in native set can only be added or removed.
-  // It cannot be modified.
-  const isUneditableType = customType === 'set'
-  let displayedValue: any[]
-  if (isArray(value)) {
-    const sliced = value.slice(0, limit.value)
-    return sliced.map((item, i) => ({
-      key: `${props.data.key}.${i}`,
-      value: item,
-      ...inherit,
-      editable: props.data.editable && !isUneditableType,
-      creating: false,
-    }))
-  }
-  else if (isObject(value)) {
-    displayedValue = Object.keys(value).slice(0, limit.value).map(key => ({
-      key: `${props.data.key}.${key}`,
-      value: value[key],
-      ...inherit,
-      editable: props.data.editable && !isUneditableType,
-      creating: false,
-    }))
-    if (type.value !== 'custom')
-      displayedValue = sortByKey(displayedValue)
-  }
-  else {
-    displayedValue = []
-  }
-
-  return displayedValue === props.data.value ? {} : displayedValue
-})
-
-const fieldsCount = computed(() => {
-  const { value } = raw.value
-  if (isArray(value))
-    return value.length
-  else if (isObject(value))
-    return Object.keys(value).length
-  else
-    return 0
-})
-
-const normalizedDisplayedKey = computed(() => {
-  const key = props.data.key
-  const lastDotIndex = key.lastIndexOf('.')
-  if (lastDotIndex === -1)
-    return key
-  return key.slice(lastDotIndex + 1)
-})
-
-// ---------------------------- edit ----------------------------
-const { editingType, editing, editingText, toggleEditing, nodeId } = useStateEditor()
-
-watch(() => editing.value, (v) => {
-  if (v) {
-    const { value } = raw.value
-    editingText.value = toEdit(value, raw.value.customType)
-  }
-  else {
-    editingText.value = ''
-  }
-})
-
-function submit() {
-  const data = props.data
-  editInspectorState({
-    path: data.key.split('.'),
-    inspectorId: state.value.inspectorId,
-    type: data.stateType!,
-    nodeId,
-    state: {
-      newKey: null!,
-      type: editingType.value,
-      value: toSubmit(editingText.value, raw.value.customType),
-    },
-  } satisfies InspectorStateEditorPayload)
-  toggleEditing()
-}
-
-// ------ add new prop ------
-const { addNewProp: addNewPropApi, draftingNewProp, resetDrafting } = useStateEditorDrafting()
-
-function addNewProp(type: EditorAddNewPropType) {
-  if (!isExpanded.value)
-    toggleCollapse()
-  addNewPropApi(type, raw.value.value)
-}
-
-function submitDrafting() {
-  const data = props.data
-  const path = data.key.split('.')
-  path.push(draftingNewProp.value.key)
-  editInspectorState({
-    path,
-    inspectorId: state.value.inspectorId,
-    type: data.stateType!,
-    nodeId,
-    state: {
-      newKey: draftingNewProp.value.key,
-      type: typeof toSubmit(draftingNewProp.value.value),
-      value: toSubmit(draftingNewProp.value.value),
-    },
-  } satisfies InspectorStateEditorPayload)
-  resetDrafting()
-}
-
-const hasChildren = computed(() => {
-  return Object.keys(normalizedChildField.value).length > 0
-  // Regard empty object has children When drafting a new property.
-    || draftingNewProp.value.enable
-})
-
-const containerRef = ref<HTMLDivElement>()
-const { isHovering } = useHover(() => containerRef.value)
-</script>
-
-<template>
-  <div ref="containerRef" class="pl-6" :style="{ paddingLeft: `${depth * 15 + 4}px` }">
-    <template v-if="!hasChildren">
-      <div>
-        <span overflow-hidden text-ellipsis whitespace-nowrap state-key>{{ normalizedDisplayedKey }}</span>
-        <span mx-1>:</span>
-        <EditInput v-if="editing" v-model="editingText" :custom-type="raw.customType" @cancel="toggleEditing" @submit="submit" />
-        <template v-else>
-          <span :class="stateFormatClass">
-            <span v-html="normalizedValue" />
-          </span>
-          <Actions
-            :hovering="isHovering" :disable-edit="state.disableEdit"
-            :data="data" :depth="depth" @enable-edit-input="toggleEditing"
-            @add-new-prop="addNewProp"
-          />
-        </template>
-      </div>
-    </template>
-    <template v-else>
-      <div cursor-pointer>
-        <div relative flex items-center @click="toggleCollapse">
-          <ExpandIcon :value="isExpanded" absolute left--6 group-hover:text-white />
-          <span overflow-hidden text-ellipsis whitespace-nowrap state-key>{{ normalizedDisplayedKey }}</span>
-          <span mx-1>:</span>
-          <EditInput v-if="editing" v-model="editingText" :custom-type="raw.customType" @cancel="toggleEditing" @submit="submit" />
-          <template v-else>
-            <span :class="stateFormatClass">
-              <span v-html="normalizedValue" />
-            </span>
-            <Actions
-              :show-add-if-needed="!draftingNewProp.enable"
-              :hovering="isHovering" :data="data" :disable-edit="state.disableEdit"
-              :depth="depth" @enable-edit-input="toggleEditing" @add-new-prop="addNewProp"
-            />
-          </template>
-        </div>
-        <div v-if="isExpanded">
-          <InspectorStateField
-            v-for="(field, index) in normalizedChildField" :key="index" :data="field" :depth="depth + 1" :no="no" :root-id="rootId"
-          />
-          <VueButton v-if="fieldsCount > limit" v-tooltip="'Show more'" flat size="mini" class="ml-4" @click="limit += STATE_FIELDS_LIMIT_SIZE">
-            <template #icon>
-              <VueIcon icon="i-material-symbols-more-horiz" />
-            </template>
-          </VueButton>
-          <div v-if="draftingNewProp.enable" :style="{ paddingLeft: `${(depth + 1) * 15 + 4}px` }">
-            <span overflow-hidden text-ellipsis whitespace-nowrap state-key>
-              <EditInput v-model="draftingNewProp.key" :show-actions="false" />
-            </span>
-            <span mx-1>:</span>
-            <EditInput v-model="draftingNewProp.value" :auto-focus="false" @cancel="resetDrafting" @submit="submitDrafting" />
-          </div>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-// function
-:deep(.state-format-function) {
-  --at-apply: font-italic;
-  & > span {
-    --at-apply: 'text-#0033cc dark:text-#997fff';
-    font-family: Menlo, monospace;
-  }
-}
-
-// component-definition
-:deep(.state-format-component-definition) {
-  --at-apply: text-primary-500;
-  & > span {
-    --at-apply: 'text-#aaa';
-  }
-}
-
-// component
-:deep(.state-format-component) {
-  --at-apply: text-primary-500;
-  &::before {
-    content: '<';
-  }
-  &::after {
-    content: '>';
-  }
-  &::before,
-  &::after {
-    --at-apply: 'text-#aaa';
-  }
-}
-</style>
diff --git a/packages/client/src/components/inspector/InspectorStateType.vue b/packages/client/src/components/inspector/InspectorStateType.vue
deleted file mode 100644
index e4366ae8..00000000
--- a/packages/client/src/components/inspector/InspectorStateType.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import type { InspectorState } from '@vue/devtools-kit'
-
-withDefaults(defineProps<{
-  data: InspectorState[]
-  depth?: number
-  rootId: string
-}>(), {
-  depth: 0,
-})
-</script>
-
-<template>
-  <div
-    v-for="(item, index) in data"
-    :key="index" class="flex items-center pl-8 font-data-field"
-  >
-    <InspectorStateField :data="item" :no="index" :root-id="rootId" />
-  </div>
-</template>
diff --git a/packages/client/src/components/inspector/InspectorTree.vue b/packages/client/src/components/inspector/InspectorTree.vue
deleted file mode 100644
index 0ac95d3c..00000000
--- a/packages/client/src/components/inspector/InspectorTree.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import type { InspectorNodeTag } from '@vue/devtools-kit'
-import { RecycleScroller } from 'vue-virtual-scroller'
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
-
-defineProps<{
-  modelValue: string
-  data: {
-    label: string
-    id: string
-    tags?: InspectorNodeTag[]
-  }[]
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-}>()
-
-function select(id: string) {
-  emit('update:modelValue', id)
-}
-</script>
-
-<template>
-  <RecycleScroller
-    v-slot="{ item }"
-    :items="data"
-    :min-item-size="32"
-    key-field="id"
-    page-mode
-  >
-    <div class="selectable-item" :class="{ active: modelValue === item.id }" @click="select(item.id)">
-      <span class="selectable-item-label">
-        {{ item.label }}
-      </span>
-      <InspectorNodeTag v-for="(childItem, index) in item.tags" :key="index" :tag="childItem" />
-    </div>
-  </RecycleScroller>
-</template>
diff --git a/packages/client/src/composables/app.ts b/packages/client/src/composables/app.ts
index 03f522d4..04299f38 100644
--- a/packages/client/src/composables/app.ts
+++ b/packages/client/src/composables/app.ts
@@ -1,5 +1,5 @@
-import type { DevtoolsBridgeAppRecord } from '@vue/devtools-core'
+import type { AppRecord } from '@vue/devtools-kit'
 
-export const activeAppRecords = shallowRef<DevtoolsBridgeAppRecord[]>([])
+export const activeAppRecords = shallowRef<AppRecord[]>([])
 export const activeAppRecordId = ref<string | null>(null)
 export const activeAppRecord = computed(() => activeAppRecords.value.find(r => r.id === activeAppRecordId.value))
diff --git a/packages/client/src/composables/client.ts b/packages/client/src/composables/client.ts
deleted file mode 100644
index 30a41903..00000000
--- a/packages/client/src/composables/client.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useDevToolsState } from '@vue/devtools-core'
-
-const fns: (() => void)[] = []
-
-export function onDevToolsClientConnected(fn: () => void) {
-  fns.push(fn)
-
-  tryOnScopeDispose(() => {
-    fns.splice(fns.indexOf(fn), 1)
-  })
-
-  const { connected, clientConnected } = useDevToolsState()
-  const devtoolsReady = computed(() => clientConnected.value && connected.value)
-
-  if (devtoolsReady.value) {
-    fns.forEach(fn => fn())
-    return
-  }
-
-  watchOnce(devtoolsReady, (v) => {
-    if (v)
-      fns.forEach(fn => fn())
-  })
-
-  return () => {
-    fns.splice(fns.indexOf(fn), 1)
-  }
-}
-
-export function refreshCurrentPageData() {
-  fns.forEach(fn => fn())
-}
diff --git a/packages/client/src/composables/custom-inspector-tabs.ts b/packages/client/src/composables/custom-inspector-tabs.ts
new file mode 100644
index 00000000..90efa074
--- /dev/null
+++ b/packages/client/src/composables/custom-inspector-tabs.ts
@@ -0,0 +1,24 @@
+import { useCustomInspector } from '@vue/devtools-applet'
+// @ts-expect-error skip type check
+import type { CustomInspectorType } from '@vue/devtools-applet'
+
+import type { ModuleBuiltinTab } from '~/types/tab'
+
+export function useCustomInspectorTabs() {
+  const { registeredInspector } = useCustomInspector()
+
+  const customInspectorTabs = computed<ModuleBuiltinTab[]>(() => {
+    return registeredInspector.value.map((inspector: CustomInspectorType, index) => {
+      return {
+        order: index,
+        name: inspector.id,
+        icon: inspector.logo,
+        title: inspector.label,
+        path: `${CUSTOM_INSPECTOR_TAB_VIEW}/${inspector.id}`,
+        category: 'modules',
+      }
+    })
+  })
+
+  return customInspectorTabs
+}
diff --git a/packages/client/src/composables/host.ts b/packages/client/src/composables/host.ts
new file mode 100644
index 00000000..47018dac
--- /dev/null
+++ b/packages/client/src/composables/host.ts
@@ -0,0 +1,18 @@
+import {
+  isInChromePanel,
+  isInElectron,
+  isInIframe,
+} from '@vue/devtools-shared'
+
+export function useHostEnv() {
+  if (isInElectron)
+    return 'electron'
+
+  else if (isInChromePanel)
+    return 'chrome'
+
+  else if (isInIframe)
+    return 'iframe'
+  else
+    return 'separate-window'
+}
diff --git a/packages/client/src/composables/open-in-editor.ts b/packages/client/src/composables/open-in-editor.ts
index 4d922515..eeec3d0e 100644
--- a/packages/client/src/composables/open-in-editor.ts
+++ b/packages/client/src/composables/open-in-editor.ts
@@ -1,7 +1,7 @@
-import { openInEditor as _openInEditor } from '@vue/devtools-core'
+import { rpc } from '@vue/devtools-core'
 
 export const vueInspectorDetected = ref(false)
 
 export const openInEditor = async (file: string) => {
-  return _openInEditor(file)
+  return rpc.value.openInEditor({ file })
 }
diff --git a/packages/client/src/composables/state-commands.ts b/packages/client/src/composables/state-commands.ts
index 2e494bc8..0dadd4af 100644
--- a/packages/client/src/composables/state-commands.ts
+++ b/packages/client/src/composables/state-commands.ts
@@ -1,7 +1,7 @@
 import { randomStr } from '@vue/devtools-shared'
 import { CustomCommand } from '@vue/devtools-kit'
 import { MaybeRefOrGetter } from 'vue'
-import { onCustomCommandsUpdated, useDevToolsState } from '@vue/devtools-core'
+import { useDevToolsState } from '@vue/devtools-core'
 
 export interface CommandItem {
   id: string
@@ -19,7 +19,6 @@ function uniqueById(items: CommandItem[]): CommandItem[] {
 }
 
 const registeredCommands = reactive(new Map<string, MaybeRefOrGetter<CommandItem[]>>())
-let removeCommandsUpdatedListener: (() => void) | null = null
 
 // @unocss-include
 export function useCommands() {
@@ -33,13 +32,6 @@ export function useCommands() {
     customCommands.value = state.commands.value || []
   })
 
-  onDevToolsClientConnected(() => {
-    removeCommandsUpdatedListener?.()
-    removeCommandsUpdatedListener = onCustomCommandsUpdated((data) => {
-      customCommands.value = data
-    })
-  })
-
   const fixedCommands: CommandItem[] = [
     {
       id: 'fixed:settings',
diff --git a/packages/client/src/composables/state-tab.ts b/packages/client/src/composables/state-tab.ts
index 9e059fce..3c7c2e3f 100644
--- a/packages/client/src/composables/state-tab.ts
+++ b/packages/client/src/composables/state-tab.ts
@@ -1,7 +1,7 @@
-import { onCustomTabsUpdated, useDevToolsState } from '@vue/devtools-core'
 import type { MaybeRef } from 'vue'
 import type { CustomTab } from '@vue/devtools-kit'
-import { isInElectron } from '@vue/devtools-shared'
+import { isInChromePanel, isInElectron } from '@vue/devtools-shared'
+import { useDevToolsState } from '@vue/devtools-core'
 
 import type { ModuleBuiltinTab } from '~/types/tab'
 
@@ -22,22 +22,24 @@ export interface CategorizedCategory {
 
 export type CategorizedTabs = [CategorizedCategory, CategorizedTab[]][]
 
-let removeTabsUpdatedListener: (() => void) | null = null
-
 export function useAllTabs() {
   const state = useDevToolsState()
+  const customInspectorTabs = useCustomInspectorTabs()
+
   const customTabs = ref<CustomTab[]>(state.tabs.value || [])
+  watchEffect(() => {
+    customTabs.value = state.tabs.value
+  })
   const allTabs = computed(() => {
     const vitePluginDetected = state.vitePluginDetected.value
-    const tabs = [...getBuiltinTab(vitePluginDetected, activeAppRecord.value?.moduleDetectives)]
+    const tabs = [...getBuiltinTab(vitePluginDetected, customInspectorTabs.value)]
     customTabs.value.forEach((tab) => {
       const currentTab: [string, Array<ModuleBuiltinTab | CustomTab>] | undefined = tabs.find(t => t[0] === tab.category)
       if (currentTab) {
         if (currentTab[1].some(t => t.name === tab.name))
           return
 
-        // @TODO: electron app support vite only tabs
-        if ((!vitePluginDetected || isInElectron) && viteOnlyTabs.includes(tab.name))
+        if ((!vitePluginDetected || isInElectron || isInChromePanel) && viteOnlyTabs.includes(tab.name))
           return
 
         currentTab[1].push({
@@ -45,7 +47,7 @@ export function useAllTabs() {
         })
       }
     })
-    return tabs
+    return [...tabs]
   })
   const flattenedTabs = computed(() => {
     return allTabs.value.reduce((prev, [_, tabs]) => {
@@ -107,13 +109,6 @@ export function useAllTabs() {
     }, [] as Array<ModuleBuiltinTab | CustomTab>)
   })
 
-  onDevToolsClientConnected(() => {
-    removeTabsUpdatedListener?.()
-    removeTabsUpdatedListener = onCustomTabsUpdated((data) => {
-      customTabs.value = data
-    })
-  })
-
   return { categorizedTabs, flattenedTabs, enabledTabs, enabledFlattenTabs }
 }
 
diff --git a/packages/client/src/composables/view-mode.ts b/packages/client/src/composables/view-mode.ts
index 524cf23c..5caf1a3a 100644
--- a/packages/client/src/composables/view-mode.ts
+++ b/packages/client/src/composables/view-mode.ts
@@ -1,23 +1,23 @@
-import { VIEW_MODE_STORAGE_KEY, isInChromePanel, target } from '@vue/devtools-shared'
-import { useDevToolsBridge } from '@vue/devtools-core'
+// import { VIEW_MODE_STORAGE_KEY, isInChromePanel, target } from '@vue/devtools-shared'
+// import { useDevToolsBridge } from '@vue/devtools-core'
 
-export function useToggleViewMode() {
-  const bridge = useDevToolsBridge()
-  const viewMode = ref('')
+// export function useToggleViewMode() {
+//   const bridge = useDevToolsBridge()
+//   const viewMode = ref('')
 
-  if (isInChromePanel) {
-    target.chrome.storage.local.get(VIEW_MODE_STORAGE_KEY).then((storage) => {
-      viewMode.value = storage[VIEW_MODE_STORAGE_KEY] ?? 'overlay'
-    })
-  }
+//   if (isInChromePanel) {
+//     target.chrome.storage.local.get(VIEW_MODE_STORAGE_KEY).then((storage) => {
+//       viewMode.value = storage[VIEW_MODE_STORAGE_KEY] ?? 'overlay'
+//     })
+//   }
 
-  return {
-    viewMode,
-    toggle(value: 'overlay' | 'panel') {
-      viewMode.value = value
-      target.chrome.storage.local.set({ [VIEW_MODE_STORAGE_KEY]: value })
-      if (isInChromePanel)
-        bridge.value.emit('toggle-view-mode', value)
-    },
-  }
-}
+//   return {
+//     viewMode,
+//     toggle(value: 'overlay' | 'panel') {
+//       viewMode.value = value
+//       target.chrome.storage.local.set({ [VIEW_MODE_STORAGE_KEY]: value })
+//       if (isInChromePanel)
+//         bridge.value.emit('toggle-view-mode', value)
+//     },
+//   }
+// }
diff --git a/packages/client/src/constants/tab.ts b/packages/client/src/constants/tab.ts
index 40cf92dc..b0bb921b 100644
--- a/packages/client/src/constants/tab.ts
+++ b/packages/client/src/constants/tab.ts
@@ -1,5 +1,4 @@
-import type { DevtoolsBridgeAppRecord } from '@vue/devtools-core'
-import { deepClone, isInElectron } from '@vue/devtools-shared'
+import { deepClone, isInChromePanel, isInElectron } from '@vue/devtools-shared'
 import type { ModuleBuiltinTab } from '~/types'
 
 // @unocss-include
@@ -49,34 +48,6 @@ export const builtinTab: [string, ModuleBuiltinTab[]][] = [
       path: 'pinia',
       title: 'Pinia',
     },
-    {
-      icon: 'https://raw.githubusercontent.com/TanStack/query/main/packages/vue-query/media/vue-query.svg',
-      name: 'vueQuery',
-      order: -100,
-      path: 'vue-query',
-      title: 'VueQuery',
-    },
-    {
-      icon: 'https://vee-validate.logaretm.com/v4/logo.png',
-      name: 'veeValidate',
-      order: -100,
-      path: 'vee-validate',
-      title: 'Vee Validate',
-    },
-    {
-      icon: 'i-ic-baseline-storage',
-      name: 'vuex',
-      order: -100,
-      path: 'vuex',
-      title: 'vuex',
-    },
-    {
-      icon: 'i-carbon-language',
-      name: 'i18n',
-      order: -100,
-      path: 'i18n',
-      title: 'I18n Resources',
-    },
   ]],
   ['advanced', [
     {
@@ -95,34 +66,31 @@ export const viteOnlyTabs = [
   'vite-inspect',
 ]
 
-type Detective = NonNullable<DevtoolsBridgeAppRecord['moduleDetectives']>
-
-const moduleDetectivesMapping = {
-  vueQuery: 'vueQuery',
-  veeValidate: 'veeValidate',
-  pinia: 'pinia',
-  vuex: 'vuex',
-  router: 'vueRouter',
-  i18n: 'vueI18n',
-} satisfies Record<string, keyof Detective>
-
-export function isDetected(moduleDetectives: Detective, tab: ModuleBuiltinTab) {
-  const key = tab.name
-  return key in moduleDetectivesMapping && moduleDetectives[moduleDetectivesMapping[key]]
-}
-
-export function getBuiltinTab(viteDetected: boolean, moduleDetectives?: DevtoolsBridgeAppRecord['moduleDetectives']): [string, ModuleBuiltinTab[]][] {
+export function getBuiltinTab(viteDetected: boolean, customInspectorTabs: ModuleBuiltinTab[]): [string, ModuleBuiltinTab[]][] {
   const tab = deepClone(builtinTab)
   // filter out modules that are not detected
   tab.forEach((item) => {
-    if (item[0] === 'modules')
-      item[1] = item[1].filter(t => moduleDetectives ? isDetected(moduleDetectives, t) : true)
+    if (item[0] === 'modules') {
+      // integration pinia and router tabs
+      item[1] = item[1].filter((t) => {
+        if (t.name === 'router') {
+          return customInspectorTabs.findIndex(item => item.name.startsWith('router-inspector')) > -1
+        }
+        else if (t.name === 'pinia') {
+          return customInspectorTabs.findIndex(item => item.name === 'pinia') > -1
+        }
+        return true
+      })
+      const normalizedCustomInspectorTabs = customInspectorTabs.filter(item => !(item.name.startsWith('router-inspector') || item.name === 'pinia'))
+
+      item[1] = [...item[1], ...normalizedCustomInspectorTabs]
+    }
   })
 
-  // @TODO: electron app support vite only tabs
-  return (viteDetected && !isInElectron)
+  return (viteDetected && (!isInElectron && !isInChromePanel))
     ? tab
     : tab.map(([_, tabs]) => [_, tabs.filter(t => !viteOnlyTabs.includes(t.name))])
 }
 
 export const CUSTOM_TAB_VIEW = 'custom-tab-view'
+export const CUSTOM_INSPECTOR_TAB_VIEW = 'custom-inspector-tab-view'
diff --git a/packages/client/src/index.ts b/packages/client/src/index.ts
index b6ee29ca..dd0821fe 100644
--- a/packages/client/src/index.ts
+++ b/packages/client/src/index.ts
@@ -1,20 +1,5 @@
-import { VIEW_MODE_STORAGE_KEY, isBrowser, isInChromePanel, target } from '@vue/devtools-shared'
+export { createConnectionApp, disconnectDevToolsClient, reloadDevToolsClient, initDevTools } from './main'
 
-import { initDevTools as _initDevTools } from './main'
+export function reload() {
 
-export { createConnectionApp } from './main'
-
-export function initDevTools(shell) {
-  if (!isBrowser)
-    return
-  if (isInChromePanel) {
-    target.chrome.storage.local.get(VIEW_MODE_STORAGE_KEY).then((storage) => {
-      _initDevTools(shell, {
-        viewMode: storage[VIEW_MODE_STORAGE_KEY] ?? 'overlay',
-      })
-    })
-  }
-  else {
-    _initDevTools(shell)
-  }
 }
diff --git a/packages/client/src/main.ts b/packages/client/src/main.ts
index 90dd2781..1dfc0c2f 100644
--- a/packages/client/src/main.ts
+++ b/packages/client/src/main.ts
@@ -1,27 +1,25 @@
 import '@unocss/reset/tailwind.css'
 import 'floating-vue/dist/style.css'
+import { getViteClient } from 'vite-hot-client'
 
-import type { BridgeInstanceType } from '@vue/devtools-core'
-import { isInChromePanel, isInElectron, isInIframe } from '@vue/devtools-shared'
-import { Bridge, HandShakeServer, createDevToolsVuePlugin, initDevToolsSeparateWindow, initDevToolsSeparateWindowBridge, initViteClientHotContext, setupDevToolsBridge } from '@vue/devtools-core'
-
+import { isInSeparateWindow } from '@vue/devtools-shared'
+import { VueDevToolsVuePlugin, createViteClientRpc, functions } from '@vue/devtools-core'
+import { createRpcClient, setViteClientContext } from '@vue/devtools-kit'
 import { createApp } from 'vue'
+import type { App as VueApp } from 'vue'
 import { createMemoryHistory, createRouter } from 'vue-router'
 import App from './App.vue'
 import Components from '~/pages/components.vue'
 import Overview from '~/pages/overview.vue'
 import PiniaPage from '~/pages/pinia.vue'
-import VuexPage from '~/pages/vuex.vue'
 import RouterPage from '~/pages/router.vue'
-import I18nPage from '~/pages/i18n.vue'
-import VueQueryPage from '~/pages/vue-query.vue'
-import VeeValidatePage from '~/pages/vee-validate.vue'
 import Pages from '~/pages/pages.vue'
 import Assets from '~/pages/assets.vue'
 import Graph from '~/pages/graph.vue'
 import Index from '~/pages/index.vue'
 import Settings from '~/pages/settings.vue'
 import CustomTabView from '~/pages/custom-tab-view.vue'
+import CustomInspectorTabView from '~/pages/custom-inspector-tab-view.vue'
 import WaitForConnection from '~/components/WaitForConnection.vue'
 
 import 'uno.css'
@@ -32,68 +30,65 @@ const routes = [
   { path: '/overview', component: Overview },
   { path: '/components', component: Components },
   { path: '/pinia', component: PiniaPage },
-  { path: '/vuex', component: VuexPage },
   { path: '/router', component: RouterPage },
-  { path: '/vue-query', component: VueQueryPage },
-  { path: '/vee-validate', component: VeeValidatePage },
-  { path: '/i18n', component: I18nPage },
   { path: '/pages', component: Pages },
   { path: '/assets', component: Assets },
   { path: '/graph', component: Graph },
   { path: '/settings', component: Settings },
   { path: `/${CUSTOM_TAB_VIEW}/:name`, component: CustomTabView },
+  { path: `/${CUSTOM_INSPECTOR_TAB_VIEW}/:name`, component: CustomInspectorTabView },
 ]
 
-// @TODO: find a better way to handle it
-const devtoolsBridge: {
-  value: BridgeInstanceType
-} = {
-  value: null!,
+const router = createRouter({
+  history: createMemoryHistory(),
+  routes,
+})
+
+const app = createApp(App)
+app.use(router)
+app.use(VueDevToolsVuePlugin())
+app.mount('#app')
+
+async function getViteHotContext() {
+  if (import.meta.url?.includes('chrome-extension://'))
+    return
+
+  const viteClient = await getViteClient(`${location.pathname.split('/__devtools__')[0] || ''}/`.replace(/\/\//g, '/'), false)
+  return viteClient?.createHotContext('/____')
 }
 
-async function reload(app, shell) {
-  devtoolsBridge.value.removeAllListeners()
-  shell.connect(async (bridge) => {
-    devtoolsBridge.value = bridge
-    setupDevToolsBridge(devtoolsBridge.value)
-    new HandShakeServer(devtoolsBridge.value).onnConnect().then(() => {
-      app.config.globalProperties.__VUE_DEVTOOLS_UPDATE__(devtoolsBridge.value)
-      devtoolsBridge.value.emit('devtools:client-ready')
-    })
-  })
+export async function initViteClientHotContext() {
+  const context = await getViteHotContext()
+  context && setViteClientContext(context)
+  return context
 }
 
-async function connectApp(app, shell) {
-  return new Promise<void>((resolve) => {
-    shell.connect((bridge) => {
-      devtoolsBridge.value = bridge
-      resolve()
-    })
-    shell.reload(() => {
-      reload(app, shell)
-    })
+initViteClientHotContext().then((ctx) => {
+  if (ctx) {
+    createViteClientRpc()
+  }
+})
+
+// heartbeat()
+
+if (isInSeparateWindow) {
+  createRpcClient(functions, {
+    preset: 'broadcast',
+  })
+}
+else {
+  createRpcClient(functions, {
+    preset: 'iframe',
   })
 }
 
-export async function initDevTools(shell, options: { viewMode?: 'overlay' | 'panel' } = { viewMode: 'overlay' }) {
+let vueApp: VueApp = null!
+export function initDevTools() {
   const app = createApp(App)
-  await connectApp(app, shell)
-  await initViteClientHotContext()
-  setupDevToolsBridge(devtoolsBridge.value)
-  new HandShakeServer(devtoolsBridge.value).onnConnect().then(() => {
-    const router = createRouter({
-      history: createMemoryHistory(),
-      routes,
-    })
-
-    app.use(router)
-    app.use(createDevToolsVuePlugin({
-      bridge: devtoolsBridge.value,
-      viewMode: options.viewMode!,
-    }))
-    app.mount('#app')
-    devtoolsBridge.value.emit('devtools:client-ready')
-  })
+  app.use(router)
+  app.use(VueDevToolsVuePlugin())
+  vueApp = app
+  app.mount('#app')
 }
 
 export function createConnectionApp(container: string = '#app', props?: Record<string, string>) {
@@ -104,53 +99,10 @@ export function createConnectionApp(container: string = '#app', props?: Record<s
   return app
 }
 
-window.addEventListener('message', (event) => {
-  if (event.data === '__VUE_DEVTOOLS_CREATE_CLIENT__') {
-    initDevTools({
-      connect: (callback) => {
-        const bridge = new Bridge({
-          tracker(fn) {
-            window.addEventListener('message', (e) => {
-              if (e.data.source === '__VUE_DEVTOOLS_USER_APP__')
-                fn(e.data.data)
-            })
-          },
-          trigger(data) {
-            event?.source?.postMessage({
-              source: '__VUE_DEVTOOLS_CLIENT__',
-              data,
-            }, {
-              targetOrigin: '*',
-            })
-          },
-        })
-        callback(bridge)
-      },
-    })
-    event.source?.postMessage('__VUE_DEVTOOLS_CLIENT_READY__')
-  }
-})
-
-if (!isInIframe && !isInChromePanel && !isInElectron) {
-  function initSeparateWindow() {
-    const connectionApp = createConnectionApp()
-
-    initDevToolsSeparateWindow({
-      onConnected: (channel) => {
-        connectionApp?.unmount()
-        initDevTools({
-          connect: (callback) => {
-            const bridge = initDevToolsSeparateWindowBridge(channel)
-            bridge.on('disconnect', () => {
-              channel.close()
-              initSeparateWindow()
-            })
-            callback(bridge)
-          },
-        })
-      },
-    })
-  }
+export function disconnectDevToolsClient() {
+  vueApp?.config.globalProperties.$disconnectDevToolsClient()
+}
 
-  initSeparateWindow()
+export function reloadDevToolsClient() {
+  vueApp?.config?.globalProperties?.$getDevToolsState()
 }
diff --git a/packages/client/src/pages/assets.vue b/packages/client/src/pages/assets.vue
index e9053590..fa643379 100644
--- a/packages/client/src/pages/assets.vue
+++ b/packages/client/src/pages/assets.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { VueCheckbox, VueDrawer, VueIcon, VueSelect } from '@vue/devtools-ui'
-import { callViteServerAction, defineViteClientListener } from '@vue/devtools-core'
+import { onViteRpcConnected, viteRpc } from '@vue/devtools-core'
 import type { AssetInfo } from '@vue/devtools-core'
 import Fuse from 'fuse.js'
 
@@ -10,8 +10,6 @@ const navbar = ref<HTMLElement>()
 // const dropzone = ref(false)
 const view = ref('grid')
 const assets = ref<AssetInfo[]>([])
-const getStaticAssets = callViteServerAction<AssetInfo[]>('assets:get-static-assets')
-const onAssetsUpdated = defineViteClientListener('assets:updated')
 
 const uniqAssetsTypes = computed(() => {
   const results: { label: string, value: string }[] = []
@@ -80,26 +78,26 @@ const byTree = computed(() => {
   return root.children
 })
 
-let cleanupAssetsUpdatedEffect: Function
-
 function fetchAssets() {
-  getStaticAssets().then((res) => {
+  viteRpc.value.getStaticAssets().then((res) => {
     assets.value = res
   })
 }
 
-onDevToolsClientConnected(() => {
+function onAssetsUpdated() {
   fetchAssets()
-  cleanupAssetsUpdatedEffect = onAssetsUpdated(() => {
-    fetchAssets()
-  })
+}
+
+onViteRpcConnected(() => {
+  fetchAssets()
+  viteRpc.functions.on('assetsUpdated', onAssetsUpdated)
 })
 function toggleView() {
   view.value = view.value === 'list' ? 'grid' : 'list'
 }
 
 onUnmounted(() => {
-  cleanupAssetsUpdatedEffect?.()
+  viteRpc.functions.off('assetsUpdated', onAssetsUpdated)
 })
 </script>
 
diff --git a/packages/client/src/pages/components.vue b/packages/client/src/pages/components.vue
index a99c4bcf..c042e417 100644
--- a/packages/client/src/pages/components.vue
+++ b/packages/client/src/pages/components.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
 import { Components as ComponentsPanel } from '@vue/devtools-applet'
 import '@vue/devtools-applet/style.css'
-import { useDevToolsBridge } from '@vue/devtools-core'
+import { rpc } from '@vue/devtools-core'
 import { openInEditor } from '../composables/open-in-editor'
 
-const bridge = useDevToolsBridge()
 function onInspectComponentStart() {
-  bridge.value.emit('toggle-panel', false)
+  rpc.value.emit('toggle-panel', false)
 }
 
 function onInspectComponentEnd() {
-  bridge.value.emit('toggle-panel', true)
+  rpc.value.emit('toggle-panel', true)
 }
 </script>
 
diff --git a/packages/client/src/pages/custom-inspector-tab-view.vue b/packages/client/src/pages/custom-inspector-tab-view.vue
new file mode 100644
index 00000000..47238e39
--- /dev/null
+++ b/packages/client/src/pages/custom-inspector-tab-view.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { CustomInspector as CustomInspectorPanel } from '@vue/devtools-applet'
+import '@vue/devtools-applet/style.css'
+
+const route = useRoute()
+const router = useRouter()
+const loadError = ref(false)
+
+function onLoadError() {
+  loadError.value = true
+  const timer = setTimeout(() => {
+    clearTimeout(timer)
+    router.replace('/overview')
+  }, 2000)
+}
+</script>
+
+<template>
+  <div v-if="loadError" flex="~ col" h-full items-center justify-center>
+    <div flex="~ col gap2" mxa items-center>
+      <div i-carbon-queued mb2 text-5xl op50 />
+      <p text-xl>
+        <code text-rose>{{ route.params.name }}</code>  not found
+      </p>
+      <p mt8 animate-pulse>
+        Redirecting to overview page...
+      </p>
+    </div>
+  </div>
+  <CustomInspectorPanel v-else :id="route.params.name" @load-error="onLoadError" />
+</template>
diff --git a/packages/client/src/pages/custom-tab-view.vue b/packages/client/src/pages/custom-tab-view.vue
index 3da776fd..7ba1d2d5 100644
--- a/packages/client/src/pages/custom-tab-view.vue
+++ b/packages/client/src/pages/custom-tab-view.vue
@@ -10,7 +10,11 @@ const tab = computed(() => flattenedTabs.value.find(tab => tabName.value === tab
 
 onMounted(() => {
   if (!tab.value) {
-    setTimeout(() => {
+    const timer = setTimeout(() => {
+      if (tab.value) {
+        clearTimeout(timer)
+        return
+      }
       router.replace('/overview')
     }, 2000)
   }
diff --git a/packages/client/src/pages/graph.vue b/packages/client/src/pages/graph.vue
index 9e1765a3..aab9ec61 100644
--- a/packages/client/src/pages/graph.vue
+++ b/packages/client/src/pages/graph.vue
@@ -1,27 +1,21 @@
 <script setup lang="ts">
-import { callViteServerAction, defineViteClientListener } from '@vue/devtools-core'
+import { onViteRpcConnected, viteRpc } from '@vue/devtools-core'
 import { Network } from 'vis-network'
-import type { ModuleInfo } from '@vue/devtools-core'
-
-const getRoot = callViteServerAction<string>('get-vite-root')
-const getGraph = callViteServerAction<ModuleInfo[]>('graph:get-modules')
-
-const onModuleUpdated = defineViteClientListener('graph:module-updated')
 
 async function fetchGraph() {
-  const root = await getRoot()
-  getGraph().then((res) => {
+  const root = await viteRpc.value.getRoot().then(res => res)
+  viteRpc.value.getGraphModules().then((res) => {
     parseGraphRawData(res, root)
   })
 }
 
-let cleanupModuleUpdatedEffect: Function
+function onModuleUpdated() {
+  fetchGraph()
+}
 
-onDevToolsClientConnected(() => {
+onViteRpcConnected(() => {
   fetchGraph()
-  cleanupModuleUpdatedEffect = onModuleUpdated(() => {
-    fetchGraph()
-  })
+  viteRpc.functions.on('graphModuleUpdated', onModuleUpdated)
 })
 
 const container = ref<HTMLDivElement>()
@@ -58,7 +52,7 @@ onMounted(() => {
 onUnmounted(() => {
   cleanupGraphRelatedStates()
   networkRef.value?.destroy()
-  cleanupModuleUpdatedEffect?.()
+  viteRpc.functions.off('graphModuleUpdated', onModuleUpdated)
 })
 
 const navbarRef = ref<HTMLElement>()
diff --git a/packages/client/src/pages/i18n.vue b/packages/client/src/pages/i18n.vue
deleted file mode 100644
index 94747e54..00000000
--- a/packages/client/src/pages/i18n.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup lang="ts">
-import {
-  getInspectorState,
-  getInspectorTree,
-  onInspectorStateUpdated,
-  onInspectorTreeUpdated,
-  unhighlightElement,
-} from '@vue/devtools-core'
-
-// eslint-disable-next-line ts/no-import-type-side-effects
-import { type InspectorNodeTag, type InspectorState } from '@vue/devtools-kit'
-import { parse } from '@vue/devtools-kit'
-import { Pane, Splitpanes } from 'splitpanes'
-
-const INSPECTOR_ID = 'vue-i18n-resource-inspector'
-
-const selected = ref('')
-const tree = ref<{ id: string, label: string, tags: InspectorNodeTag[] }[]>([])
-const state = ref<{
-  inspectorId?: string
-  state?: InspectorState[]
-  getters?: InspectorState[]
-}>({})
-
-function getI18nState(nodeId: string) {
-  getInspectorState({ inspectorId: INSPECTOR_ID, nodeId }).then((data) => {
-    state.value = parse(data!)
-  })
-}
-
-function clearI18nState() {
-  state.value = {}
-}
-
-watch(selected, () => {
-  clearI18nState()
-  getI18nState(selected.value)
-})
-
-createCollapseContext('inspector-state')
-
-onDevToolsClientConnected(() => {
-  getInspectorTree({ inspectorId: INSPECTOR_ID, filter: '' }).then((_data) => {
-    const data = parse(_data!)
-    tree.value = data
-    if (!selected.value && data.length) {
-      selected.value = data[0].id
-      getI18nState(data[0].id)
-    }
-  })
-
-  onInspectorTreeUpdated((data) => {
-    if (!data?.data.length)
-      return
-    tree.value = data.data as unknown as { id: string, label: string, tags: InspectorNodeTag[] }[]
-    if (!selected.value && data.data.length) {
-      selected.value = data.data[0].id
-      getI18nState(data.data[0].id)
-    }
-  })
-
-  onInspectorStateUpdated((data) => {
-    if (!data || !data?.state?.length || data.inspectorId !== INSPECTOR_ID)
-      return
-
-    state.value = {
-      state: data.state,
-    }
-  })
-})
-
-onUnmounted(() => {
-  unhighlightElement()
-})
-</script>
-
-<template>
-  <div h-screen>
-    <Splitpanes>
-      <Pane flex flex-col border="r base">
-        <div h-screen select-none overflow-scroll p-2 class="no-scrollbar">
-          <InspectorTree v-model="selected" :data="tree" />
-        </div>
-      </Pane>
-      <Pane flex flex-col>
-        <div :key="selected" h-0 grow overflow-auto p-2 class="no-scrollbar">
-          <InspectorState
-            v-for="(item, key) in state" :id="key"
-            :key="key"
-            :inspector-id="INSPECTOR_ID"
-            :node-id="selected" :data="item" :name="`${key}`"
-          />
-        </div>
-      </Pane>
-    </Splitpanes>
-  </div>
-</template>
diff --git a/packages/client/src/pages/overview.vue b/packages/client/src/pages/overview.vue
index de1c6334..d220b1ff 100644
--- a/packages/client/src/pages/overview.vue
+++ b/packages/client/src/pages/overview.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { isMacOS } from '@vue/devtools-shared'
-import { getInspectorTree, getRouterInfo, onInspectorTreeUpdated, onRouterInfoUpdated, useDevToolsState } from '@vue/devtools-core'
-import type { ComponentTreeNode } from '@vue/devtools-kit'
+import { isInChromePanel, isInElectron, isMacOS } from '@vue/devtools-shared'
+import { DevToolsMessagingEvents, onDevToolsConnected, rpc, useDevToolsState } from '@vue/devtools-core'
+import type { CustomInspectorNode } from '@vue/devtools-kit'
 import { parse } from '@vue/devtools-kit'
 import { VueButton } from '@vue/devtools-ui'
-
 import { version } from '../../../core/package.json'
 
 const { vueVersion } = useDevToolsState()
 const pageCount = ref(1)
 const componentCount = ref(0)
 
-function normalizeComponentCount(data: ComponentTreeNode[]) {
+function normalizeComponentCount(data: CustomInspectorNode[]) {
   let count = 0
   for (const node of data) {
     count++
@@ -21,26 +20,39 @@ function normalizeComponentCount(data: ComponentTreeNode[]) {
   return count
 }
 
-onDevToolsClientConnected(() => {
-  // page count getter
-  getRouterInfo().then((_data) => {
-    const data = JSON.parse(_data!)
-    pageCount.value = data?.routes?.length || 1
-  })
-  onRouterInfoUpdated((data) => {
+function onRouterInfoUpdated(data) {
+  pageCount.value = data?.routes?.length || 1
+}
+
+function onInspectorTreeUpdated(_data: string) {
+  const data = parse(_data) as {
+    inspectorId: string
+    rootNodes: CustomInspectorNode[]
+  }
+  if (data.inspectorId !== 'components')
+    return
+
+  componentCount.value = normalizeComponentCount(data.rootNodes)
+}
+
+onDevToolsConnected(() => {
+  rpc.value.getRouterInfo().then((data) => {
     pageCount.value = data?.routes?.length || 1
   })
+  rpc.functions.on(DevToolsMessagingEvents.ROUTER_INFO_UPDATED, onRouterInfoUpdated)
 
   // component count getter
-  getInspectorTree({ inspectorId: 'components', filter: '' }).then((_data) => {
+  rpc.value.getInspectorTree({ inspectorId: 'components', filter: '' }).then((_data) => {
     const data = parse(_data!)
     componentCount.value = normalizeComponentCount(data)
   })
-  onInspectorTreeUpdated((data) => {
-    if (!data?.data?.length || data.inspectorId !== 'components')
-      return
-    componentCount.value = normalizeComponentCount(data.data)
-  })
+})
+
+rpc.functions.on(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, onInspectorTreeUpdated)
+
+onUnmounted(() => {
+  rpc.functions.off(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, onInspectorTreeUpdated)
+  rpc.functions.off(DevToolsMessagingEvents.ROUTER_INFO_UPDATED, onRouterInfoUpdated)
 })
 </script>
 
@@ -122,36 +134,38 @@ onDevToolsClientConnected(() => {
         </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()">
-          <VueButton>
-            ⇧ Shift
-          </VueButton>
-          <span>+</span>
-          <VueButton>
-            ⌥ Option
-          </VueButton>
-          <span>+</span>
-          <VueButton>
-            D
-          </VueButton>
-        </template>
-        <template v-else>
-          <VueButton>
-            Shift
-          </VueButton>
-          <span>+</span>
-          <VueButton>
-            Alt
-          </VueButton>
-          <span>+</span>
-          <VueButton>
-            D
-          </VueButton>
-        </template>
-        to toggle DevTools
-      </div>
+      <template v-if="!isInElectron && !isInChromePanel">
+        <div flex="~ gap-1" cursor-default items-center justify-center pb-8 text-sm op40>
+          Press
+          <template v-if="isMacOS()">
+            <VueButton>
+              ⇧ Shift
+            </VueButton>
+            <span>+</span>
+            <VueButton>
+              ⌥ Option
+            </VueButton>
+            <span>+</span>
+            <VueButton>
+              D
+            </VueButton>
+          </template>
+          <template v-else>
+            <VueButton>
+              Shift
+            </VueButton>
+            <span>+</span>
+            <VueButton>
+              Alt
+            </VueButton>
+            <span>+</span>
+            <VueButton>
+              D
+            </VueButton>
+          </template>
+          to toggle DevTools
+        </div>
+      </template>
     </div>
   </div>
 </template>
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index bcd670dd..5c4f3853 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { RouterInfo } from '@vue/devtools-kit'
 import { VueInput } from '@vue/devtools-ui'
-import { getMatchedRoutes, getRouterInfo, navigateAction, onRouterInfoUpdated } from '@vue/devtools-core'
+import { DevToolsMessagingEvents, onDevToolsConnected, rpc } from '@vue/devtools-core'
 import type { RouteLocationNormalizedLoaded, RouteRecordNormalized } from 'vue-router'
 
 const routeInput = ref('')
@@ -29,27 +29,27 @@ function navigate() {
 }
 
 function navigateToRoute(path: string) {
-  navigateAction({
-    path,
-  })
+  rpc.value.navigate(path)
 }
 
-onDevToolsClientConnected(() => {
-  getRouterInfo().then((data) => {
-    init(JSON.parse(data!))
-  })
-  onRouterInfoUpdated((data) => {
+onDevToolsConnected(() => {
+  rpc.value.getRouterInfo().then((data) => {
     init(data)
   })
+  rpc.functions.on(DevToolsMessagingEvents.ROUTER_INFO_UPDATED, init)
 })
 
 watchDebounced(routeInput, () => {
   if (routeInput.value === currentRoute.value?.path)
     return
-  getMatchedRoutes(routeInput.value).then((data) => {
-    matchedRoutes.value = JSON.parse(data!)
+  rpc.value.getMatchedRoutes(routeInput.value).then((data) => {
+    matchedRoutes.value = data
   })
 })
+
+onUnmounted(() => {
+  rpc.functions.off(DevToolsMessagingEvents.ROUTER_INFO_UPDATED, init)
+})
 </script>
 
 <template>
diff --git a/packages/client/src/pages/router.vue b/packages/client/src/pages/router.vue
index f6ef79de..a53e3402 100644
--- a/packages/client/src/pages/router.vue
+++ b/packages/client/src/pages/router.vue
@@ -1,8 +1,14 @@
 <script setup lang="ts">
-import { Router as RouterPanel } from '@vue/devtools-applet'
+import { Router as RouterPanel, useCustomInspector } from '@vue/devtools-applet'
 import '@vue/devtools-applet/style.css'
+
+const { registeredInspector } = useCustomInspector()
+// @ts-expect-error skip type check
+const vueRouterInspector = computed(() => registeredInspector.value?.find(item => item.packageName === 'vue-router'))
+// @ts-expect-error skip type check
+const inspectorId = computed(() => vueRouterInspector.value?.id)
 </script>
 
 <template>
-  <RouterPanel />
+  <RouterPanel :id="inspectorId" />
 </template>
diff --git a/packages/client/src/pages/settings.vue b/packages/client/src/pages/settings.vue
index dff4e569..f6d02c20 100644
--- a/packages/client/src/pages/settings.vue
+++ b/packages/client/src/pages/settings.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { VueButton, VueCard, VueCheckbox, VueConfirm, VueDarkToggle, VueSelect, VueSwitch } from '@vue/devtools-ui'
-import { isInChromePanel } from '@vue/devtools-shared'
+// import { isInChromePanel } from '@vue/devtools-shared'
 
 // #region view mode
-const viewMode = inject<Ref<'overlay' | 'panel'>>('viewMode', ref('overlay'))
-const viewModeSwitchVisible = computed(() => viewMode.value === 'panel' && isInChromePanel)
-const { toggle: toggleViewMode } = useToggleViewMode()
+// const viewMode = inject<Ref<'overlay' | 'panel'>>('viewMode', ref('overlay'))
+// const viewModeSwitchVisible = computed(() => viewMode.value === 'panel' && isInChromePanel)
+// const { toggle: toggleViewMode } = useToggleViewMode()
 // #endregion
 
 const { categorizedTabs: categories } = useAllTabs()
@@ -162,9 +162,9 @@ const minimizePanelInteractiveLabel = computed(() => {
                 <div i-carbon-sun dark:i-carbon-moon translate-y--1px /> {{ isDark ? 'Dark' : 'Light' }}
               </VueButton>
             </VueDarkToggle>
-            <VueButton v-if="viewModeSwitchVisible" outlined type="primary" @click="toggleViewMode('overlay')">
+            <!-- <VueButton v-if="viewModeSwitchVisible" outlined type="primary" @click="toggleViewMode('overlay')">
               Switch to Overlay Mode
-            </VueButton>
+            </VueButton> -->
           </div>
           <div mx--2 my1 h-1px border="b base" op75 />
           <p>UI Scale</p>
diff --git a/packages/client/src/pages/vee-validate.vue b/packages/client/src/pages/vee-validate.vue
deleted file mode 100644
index 28a96a69..00000000
--- a/packages/client/src/pages/vee-validate.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<script setup lang="ts">
-import { VeeValidate as VeeValidatePanel } from '@vue/devtools-applet'
-import '@vue/devtools-applet/style.css'
-</script>
-
-<template>
-  <VeeValidatePanel />
-</template>
diff --git a/packages/client/src/pages/vue-query.vue b/packages/client/src/pages/vue-query.vue
deleted file mode 100644
index afe8f47b..00000000
--- a/packages/client/src/pages/vue-query.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<script setup lang="ts">
-import { VueQuery as VueQueryPanel } from '@vue/devtools-applet'
-import '@vue/devtools-applet/style.css'
-</script>
-
-<template>
-  <VueQueryPanel />
-</template>
diff --git a/packages/client/src/pages/vuex.vue b/packages/client/src/pages/vuex.vue
deleted file mode 100644
index 428f7a8b..00000000
--- a/packages/client/src/pages/vuex.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<script setup lang="ts">
-import { Vuex as VuexPanel } from '@vue/devtools-applet'
-import '@vue/devtools-applet/style.css'
-</script>
-
-<template>
-  <VuexPanel />
-</template>
diff --git a/packages/core/src/bridge-events/devtools-actions.ts b/packages/core/src/bridge-events/devtools-actions.ts
deleted file mode 100644
index 44892975..00000000
--- a/packages/core/src/bridge-events/devtools-actions.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import type { InspectorStateEditorPayload } from '@vue/devtools-kit'
-import { toggleHighPerfMode as _toggleHighPerfMode, stringify } from '@vue/devtools-kit'
-import { defineDevToolsAction } from '../bridge'
-
-export const checkVueInspectorDetected = defineDevToolsAction<boolean>('devtools:check-vue-inspector-detected', async (devtools) => {
-  return !!await devtools?.api?.getVueInspector?.()
-})
-
-export const enableVueInspector = defineDevToolsAction('devtools:enable-vue-inspector', async (devtools) => {
-  const inspector = await devtools?.api?.getVueInspector?.()
-  if (inspector)
-    await inspector.enable()
-})
-
-export const toggleApp = defineDevToolsAction('devtools:toggle-app', async (devtools, id: string) => {
-  await devtools.api.toggleApp(id)
-})
-
-export const editInspectorState = defineDevToolsAction('devtools:edit-inspector-state', (devtools, payload: InspectorStateEditorPayload) => {
-  devtools.api.editInspectorState(payload)
-})
-
-export const openInEditor = defineDevToolsAction('devtools:open-in-editor', (devtools, file: string, baseUrl?: string) => {
-  devtools.api.openInEditor({ file, baseUrl })
-})
-
-export const getInspectorTree = defineDevToolsAction('devtools:inspector-tree', async (devtools, payload) => {
-  const res = await devtools.api.getInspectorTree(payload)
-  return stringify(res) as string
-})
-
-export const getInspectorNodeActions = defineDevToolsAction('devtools:inspector-node-actions', (devtools, payload) => {
-  return devtools.api.getInspectorNodeActions(payload)
-})
-
-export const callInspectorNodeAction = defineDevToolsAction('devtools:call-inspector-node-action', (devtools, inspectorId: string, actionIndex: number, nodeId: string) => {
-  return devtools.api.callInspectorNodeAction(inspectorId, actionIndex, nodeId)
-})
-
-export const getInspectorActions = defineDevToolsAction('devtools:inspector-actions', (devtools, payload) => {
-  return devtools.api.getInspectorActions(payload)
-})
-
-export const callInspectorAction = defineDevToolsAction('devtools:call-inspector-action', (devtools, inspectorId: string, actionIndex: number, nodeId: string) => {
-  return devtools.api.callInspectorAction(inspectorId, actionIndex, nodeId)
-})
-
-export const getComponentBoundingRect = defineDevToolsAction('devtools:get-component-bounding-rect', (devtools, payload) => {
-  return devtools.api.getComponentBoundingRect(payload)
-})
-
-export const inspectComponentInspector = defineDevToolsAction('devtools:inspect-component-inspector', (devtools) => {
-  return devtools.api.inspectComponentInspector()
-})
-
-export const cancelInspectComponentInspector = defineDevToolsAction('devtools:cancel-inspect-component-inspector', (devtools) => {
-  return devtools.api.cancelInspectComponentInspector()
-})
-
-export const toggleComponentInspector = defineDevToolsAction('devtools:toggle-component-inspector', (devtools, payload) => {
-  return devtools.api.toggleComponentInspector(payload)
-})
-
-export const scrollToComponent = defineDevToolsAction('devtools:scroll-to-component', (devtools, payload) => {
-  return devtools.api.scrollToComponent(payload)
-})
-
-export const getComponentRenderCode = defineDevToolsAction('devtools:get-component-render-code', (devtools, payload) => {
-  return devtools.api.getComponentRenderCode(payload)
-})
-
-export const getInspectorState = defineDevToolsAction('devtools:inspector-state', async (devtools, payload) => {
-  const res = await devtools.api.getInspectorState(payload)
-  return stringify(res) as string
-})
-
-export const updateInspectorTreeId = defineDevToolsAction('devtools:update-inspector-tree-id', (devtools, payload) => {
-  devtools.context.activeInspectorTreeId = payload
-})
-
-export const unhighlightElement = defineDevToolsAction('devtools:unhighlight-element', (devtools) => {
-  return devtools.api.unhighlightElement()
-})
-
-export const getRouterInfo = defineDevToolsAction('devtools:router-info', (devtools) => {
-  return JSON.stringify(devtools.context.routerInfo)
-})
-
-export const navigateAction = defineDevToolsAction('devtools:router-navigate', (devtools, payload) => {
-  devtools.context.router?.push(payload).catch(e => e)
-})
-
-export const getMatchedRoutes = defineDevToolsAction('devtools:matched-routes', (devtools, path) => {
-  const c = console.warn
-  console.warn = () => {}
-  const matched = devtools.context.router?.resolve({
-    path: path || '/',
-  }).matched ?? []
-  console.warn = c
-  return JSON.stringify(matched)
-})
-
-export const getTimelineLayer = defineDevToolsAction('devtools:get-timeline-layer', (devtools) => {
-  return devtools.context.timelineLayer
-})
-
-export const getDevToolsState = defineDevToolsAction('devtools:get-state', (devtools) => {
-  return {
-    connected: devtools.state.connected,
-    clientConnected: devtools.state.clientConnected,
-    vueVersion: devtools.state?.activeAppRecord?.version || '',
-    tabs: devtools.state.tabs,
-    commands: devtools.state.commands,
-    vitePluginDetected: devtools.state.vitePluginDetected,
-    appRecords: devtools.state.appRecords.map(item => ({
-      id: item.id,
-      name: item.name,
-      version: item.version,
-      routerId: item.routerId,
-      moduleDetectives: item.moduleDetectives,
-    })),
-    activeAppRecordId: devtools.state.activeAppRecordId,
-  }
-})
-
-export const toggleHighPerfMode = defineDevToolsAction('devtools:toggle-high-perf-mode', (_, payload) => {
-  _toggleHighPerfMode(payload)
-})
diff --git a/packages/core/src/bridge-events/devtools-listeners.ts b/packages/core/src/bridge-events/devtools-listeners.ts
deleted file mode 100644
index bed3f6b3..00000000
--- a/packages/core/src/bridge-events/devtools-listeners.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import type { ComponentTreeNode, CustomCommand, CustomTab, DevToolsState, InspectorState, RouterInfo, TimelineEvent } from '@vue/devtools-kit'
-import { defineDevToolsListener } from '../bridge'
-
-export const onDevToolsStateUpdated = defineDevToolsListener<DevToolsState & { vueVersion: string }>('devtools:on-state-updated', (devtools, callback) => {
-  function setPayload(payload: DevToolsState & { vueVersion?: string }) {
-    return {
-      vueVersion: payload?.activeAppRecord?.version || '',
-      connected: payload.connected,
-      clientConnected: payload.clientConnected,
-      tabs: payload.tabs,
-      commands: payload.commands,
-      vitePluginDetected: payload.vitePluginDetected,
-      appRecords: payload.appRecords.map(item => ({
-        id: item.id,
-        name: item.name,
-        version: item.version,
-        routerId: item.routerId,
-        moduleDetectives: item.moduleDetectives,
-      })),
-      activeAppRecordId: payload.activeAppRecordId,
-    }
-  }
-  function subscribe() {
-    devtools.api.on.devtoolsStateUpdated((payload) => {
-      callback(setPayload(payload))
-    })
-  }
-  if (devtools?.api) {
-    subscribe()
-  }
-  else {
-    const timer = setInterval(() => {
-      if (devtools.state.connected) {
-        const payload = devtools.state
-        callback(setPayload(payload))
-        subscribe()
-        clearInterval(timer)
-      }
-    }, 10)
-  }
-})
-
-export const onCustomTabsUpdated = defineDevToolsListener<CustomTab[]>('devtools:on-custom-tabs-updated', (devtools, callback) => {
-  devtools.api.on.customTabsUpdated((payload) => {
-    callback(payload)
-  })
-})
-
-export const onCustomCommandsUpdated = defineDevToolsListener<CustomCommand[]>('devtools:on-custom-commands-updated', (devtools, callback) => {
-  devtools.api.on.customCommandsUpdated((payload) => {
-    callback(payload)
-  })
-})
-
-export const onInspectorTreeUpdated = defineDevToolsListener<{ inspectorId: string, data: ComponentTreeNode[] }>('devtools:on-inspector-tree-updated', (devtools, callback) => {
-  devtools.api.on.sendInspectorTree((payload) => {
-    callback(payload)
-  })
-})
-
-export const onInspectorStateUpdated = defineDevToolsListener<{ inspectorId: string, state?: InspectorState[], getters?: InspectorState[] }>('devtools:on-inspector-state-updated', (devtools, callback) => {
-  devtools.api.on.sendInspectorState((payload) => {
-    callback(payload)
-  })
-})
-
-export const onComponentUpdated = defineDevToolsListener<{ inspectorId: string, state?: InspectorState[], getters?: InspectorState[] }>('devtools:on-component-updated', (devtools, callback) => {
-  devtools.api.on.componentUpdated(() => {
-    callback()
-  })
-})
-
-export const onEditInspectorState = defineDevToolsListener<{ inspectorId: string, state?: InspectorState[], getters?: InspectorState[] }>('devtools:on-edit-inspector-state', (devtools, callback) => {
-  devtools.api.on.editInspectorState(async (payload) => {
-    await callback(payload)
-  })
-})
-
-export const onRouterInfoUpdated = defineDevToolsListener<RouterInfo>('devtools:on-router-info-updated', (devtools, callback) => {
-  devtools.api.on.routerInfoUpdated((payload) => {
-    callback(payload)
-  })
-}, { parser: 'json' })
-
-export const onAddTimelineEvent = defineDevToolsListener<TimelineEvent>('devtools:on-add-timeline-event', (devtools, callback) => {
-  devtools.api.on.addTimelineEvent((payload) => {
-    callback(payload)
-  })
-})
diff --git a/packages/core/src/bridge-events/index.ts b/packages/core/src/bridge-events/index.ts
deleted file mode 100644
index 17fe635d..00000000
--- a/packages/core/src/bridge-events/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as devtoolsActions from './devtools-actions'
-import * as devtoolsListeners from './devtools-listeners'
-
-export function initDevToolsAEvent() {
-  Object.values(devtoolsActions).forEach((action) => {
-    action()
-  })
-  Object.values(devtoolsListeners).forEach((action) => {
-    action(() => {})
-  })
-}
diff --git a/packages/core/src/bridge/api.ts b/packages/core/src/bridge/api.ts
deleted file mode 100644
index fe5d024b..00000000
--- a/packages/core/src/bridge/api.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { DevToolsType, parse } from '@vue/devtools-kit'
-import { nanoid } from 'nanoid/non-secure'
-import { BRIDGE_DEVTOOLS_ACTION_KEY, BRIDGE_DEVTOOLS_LISTENER_KEY, devtoolsActionEvents, devtoolsListenerEvents, getBridgeInstance, getBridgeTarget } from './shared'
-
-export function defineDevToolsAction<T>(name: string, action: (devtools: DevToolsType, ...args: any[]) => T | Promise<T>) {
-  return async (...args: any[]) => {
-    const target = getBridgeTarget()
-    if (target === 'devtools') {
-      const bridge = getBridgeInstance()
-      const uniqueEventKey = nanoid()
-      return await new Promise<T>((resolve) => {
-        bridge.once(uniqueEventKey, (e: T) => {
-          resolve(e)
-        })
-
-        bridge.emit(BRIDGE_DEVTOOLS_ACTION_KEY, {
-          name,
-          key: uniqueEventKey,
-          args,
-        })
-      })
-    }
-    else {
-      devtoolsActionEvents.set(name, action)
-    }
-  }
-}
-
-export function defineDevToolsListener<T>(name: string, fn: (devtools: DevToolsType, callback: Function) => void, options: { parser?: 'json' | 'devtools' } = {}) {
-  return (listener: (payload: T) => void) => {
-    const target = getBridgeTarget()
-    if (target === 'devtools') {
-      const {
-        parser = 'devtools',
-      } = options
-      const parserFn = parser === 'devtools' ? parse : JSON.parse
-      const bridge = getBridgeInstance()
-      const uniqueEventKey = nanoid()
-
-      const off = bridge.on(uniqueEventKey, (e) => {
-        listener(parserFn(e))
-      })
-
-      bridge.emit(BRIDGE_DEVTOOLS_LISTENER_KEY, {
-        key: uniqueEventKey,
-        name,
-        parser,
-      })
-
-      return off
-    }
-    else {
-      devtoolsListenerEvents.set(name, fn)
-      return () => {}
-    }
-  }
-}
diff --git a/packages/core/src/bridge/app.ts b/packages/core/src/bridge/app.ts
deleted file mode 100644
index ca8dd0a7..00000000
--- a/packages/core/src/bridge/app.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { devtools, stringify } from '@vue/devtools-kit'
-import { initDevToolsAEvent } from '../bridge-events'
-import { BridgeInstanceType } from './core'
-import { BRIDGE_DEVTOOLS_ACTION_KEY, BRIDGE_DEVTOOLS_LISTENER_KEY, devtoolsActionEvents, devtoolsListenerEvents, setBridgeTarget } from './shared'
-
-export function setupAppBridge(bridge: BridgeInstanceType) {
-  setBridgeTarget('app')
-
-  initDevToolsAEvent()
-
-  bridge.on(BRIDGE_DEVTOOLS_ACTION_KEY, async (payload) => {
-    const action = devtoolsActionEvents.get(payload.name)!
-    if (action) {
-      const result = await action(devtools, ...payload.args)
-      bridge.emit(payload.key, result)
-    }
-  })
-
-  bridge.on(BRIDGE_DEVTOOLS_LISTENER_KEY, async (payload) => {
-    const listener = devtoolsListenerEvents.get(payload.name)!
-
-    if (listener) {
-      listener(devtools, (res: any) => {
-        const stringifyFn = payload.parser === 'devtools' ? stringify : JSON.stringify
-        bridge.emit(payload.key, stringifyFn(res))
-      })
-    }
-  })
-}
diff --git a/packages/core/src/bridge/core.ts b/packages/core/src/bridge/core.ts
deleted file mode 100644
index b83735c9..00000000
--- a/packages/core/src/bridge/core.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { NOOP } from '@vue/devtools-shared'
-import type { Emitter, EventType, Handler } from 'mitt'
-import mitt from 'mitt'
-
-export interface BridgeAdapterOptions {
-  tracker: (fn: Function) => void
-  trigger: (data: Record<string, any>) => void
-}
-
-export type BridgeInstanceType = InstanceType<typeof Bridge>
-
-// @TODO: add unit tests
-export class Bridge<Events extends Record<EventType, any>, Key extends keyof Events> {
-  private emitter: Emitter<Events>
-  private adapter: BridgeAdapterOptions
-
-  constructor(adapter: BridgeAdapterOptions = {
-    tracker: NOOP,
-    trigger: NOOP,
-  }) {
-    this.emitter = mitt<Events>()
-    this.adapter = adapter
-    this.adapter.tracker((message) => {
-      // @TODO: message handler
-      this._emit(message.event, message.data)
-    })
-  }
-
-  private _on(eventName: Key, handler: Handler<Events[Key]>): void {
-    this.emitter.on(eventName, handler)
-  }
-
-  private off(eventName: Key, handler: Handler<Events[Key]>): void {
-    this.emitter.off(eventName, handler)
-  }
-
-  private _emit(eventName: Key, data?: any): void {
-    this.emitter.emit(eventName, data)
-  }
-
-  public on(eventName: Key, handler: Handler<Events[Key]>): () => void {
-    this._on(eventName, handler)
-    return () => this.off(eventName, handler)
-  }
-
-  public once(eventName: Key, handler: Handler<Events[Key]>): void {
-    const onceHandler = (...args) => {
-      // @ts-expect-error missing type
-      handler(...args)
-      this.off(eventName, onceHandler)
-    }
-    this._on(eventName, onceHandler)
-  }
-
-  public emit(eventName: Key, data?: any): void {
-    this.adapter.trigger({
-      event: eventName,
-      data,
-    })
-    this._emit(eventName, data)
-  }
-
-  public removeAllListeners(): void {
-    this.emitter.all.clear()
-  }
-}
diff --git a/packages/core/src/bridge/devtools.ts b/packages/core/src/bridge/devtools.ts
deleted file mode 100644
index 3793fc58..00000000
--- a/packages/core/src/bridge/devtools.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { BridgeInstanceType } from './core'
-import { setBridgeInstance, setBridgeTarget } from './shared'
-
-export function setupDevToolsBridge(bridge: BridgeInstanceType) {
-  setBridgeInstance(bridge)
-  setBridgeTarget('devtools')
-}
diff --git a/packages/core/src/bridge/index.ts b/packages/core/src/bridge/index.ts
deleted file mode 100644
index 17a9b738..00000000
--- a/packages/core/src/bridge/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './app'
-export * from './devtools'
-export * from './api'
-export * from './core'
diff --git a/packages/core/src/bridge/shared.ts b/packages/core/src/bridge/shared.ts
deleted file mode 100644
index 8266a579..00000000
--- a/packages/core/src/bridge/shared.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { target } from '@vue/devtools-shared'
-import { BridgeInstanceType } from './core'
-
-export const BRIDGE_DEVTOOLS_ACTION_KEY = 'devtools:bridge-action'
-export const BRIDGE_DEVTOOLS_LISTENER_KEY = 'devtools:bridge-listener'
-
-export const BRIDGE_GLOBAL_VAR_KEY = '__vue_devtools_bridge__'
-export const BRIDGE_TARET_KEY = '__vue_devtools_bridge_target__'
-
-export const BRIDGE_DEVTOOLS_ACTION_EVENTS_KEY = 'devtools:bridge-action-events'
-export const BRIDGE_DEVTOOLS_LISTENER_EVENTS_KEY = 'devtools:bridge-listener-events'
-
-export const devtoolsActionEvents = target[BRIDGE_DEVTOOLS_ACTION_EVENTS_KEY] = new Map<string, Function>()
-export const devtoolsListenerEvents = target[BRIDGE_DEVTOOLS_LISTENER_EVENTS_KEY] = new Map<string, Function>()
-
-export function getBridgeInstance(): BridgeInstanceType {
-  return target[BRIDGE_GLOBAL_VAR_KEY]
-}
-
-export function setBridgeInstance(instance: BridgeInstanceType) {
-  target[BRIDGE_GLOBAL_VAR_KEY] = instance
-}
-
-export function setBridgeTarget(t: 'devtools' | 'app') {
-  target[BRIDGE_TARET_KEY] = t
-}
-
-export function getBridgeTarget(): 'devtools' | 'app' {
-  return target[BRIDGE_TARET_KEY]
-}
diff --git a/packages/core/src/handshake.ts b/packages/core/src/handshake.ts
deleted file mode 100644
index 47952afa..00000000
--- a/packages/core/src/handshake.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { devtools } from '@vue/devtools-kit'
-import type { BridgeInstanceType } from './bridge'
-
-export enum HandShakeEvents {
-  SYN = 'syn',
-  SYN_ACK = 'syn-ack',
-  ACK = 'ack',
-}
-
-class HandShake {
-  public socket: BridgeInstanceType
-
-  constructor(bridge: BridgeInstanceType) {
-    this.socket = bridge
-  }
-}
-
-export class HandShakeClient extends HandShake {
-  constructor(bridge: BridgeInstanceType) {
-    super(bridge)
-  }
-
-  public onnConnect() {
-    return new Promise<void>((resolve) => {
-      this.socket.emit(HandShakeEvents.SYN)
-      const timer = setInterval(() => {
-        this.socket.emit(HandShakeEvents.SYN)
-      }, 300)
-      this.socket.on(HandShakeEvents.SYN_ACK, () => {
-        clearInterval(timer)
-        this.socket.emit(HandShakeEvents.ACK)
-        devtools.state.clientConnected = true
-        resolve()
-      })
-    })
-  }
-}
-
-export class HandShakeServer extends HandShake {
-  constructor(bridge: BridgeInstanceType) {
-    super(bridge)
-  }
-
-  public onnConnect() {
-    return new Promise<void>((resolve) => {
-      this.socket.on(HandShakeEvents.SYN, () => {
-        this.socket.emit(HandShakeEvents.SYN_ACK)
-        const timer = setInterval(() => {
-          this.socket.emit(HandShakeEvents.SYN_ACK)
-        }, 300)
-        this.socket.on(HandShakeEvents.ACK, () => {
-          clearInterval(timer)
-          resolve()
-        })
-      })
-    })
-  }
-}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index ff768ce1..97d5551f 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -1,9 +1,3 @@
-export * from './vue-plugin'
-export * from './injection'
-export * from './handshake'
 export * from './client'
-export * from './bridge'
-export * from './vite-bridge'
-export * from './bridge-events/devtools-actions'
-export * from './bridge-events/devtools-listeners'
-export * from './separate-window'
+export * from './rpc'
+export * from './vue-plugin/devtools-state'
diff --git a/packages/core/src/injection.ts b/packages/core/src/injection.ts
deleted file mode 100644
index ba092ec3..00000000
--- a/packages/core/src/injection.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { devtools, onDevToolsConnected } from '@vue/devtools-kit'
-
-import { setupAppBridge } from './bridge'
-
-import type { BridgeInstanceType } from './bridge'
-import { HandShakeClient } from './handshake'
-
-export function prepareInjection(bridge: BridgeInstanceType) {
-  setupAppBridge(bridge)
-  new HandShakeClient(bridge).onnConnect().then(() => {
-    bridge.on('devtools:client-ready', () => {
-      onDevToolsConnected(() => {
-        devtools.state.connected = true
-      })
-    })
-  })
-}
diff --git a/packages/core/src/rpc/global.ts b/packages/core/src/rpc/global.ts
new file mode 100644
index 00000000..2fcf8361
--- /dev/null
+++ b/packages/core/src/rpc/global.ts
@@ -0,0 +1,245 @@
+import { DevToolsMessagingHookKeys, devtools, devtoolsRouter, devtoolsRouterInfo, getActiveInspectors, getInspector, getInspectorActions, getInspectorInfo, getInspectorNodeActions, getRpcClient, getRpcServer, stringify, toggleClientConnected } from '@vue/devtools-kit'
+import { createHooks } from 'hookable'
+import type { DevToolsV6PluginAPIHookKeys, DevToolsV6PluginAPIHookPayloads, OpenInEditorOptions } from '@vue/devtools-kit'
+
+const hooks = createHooks()
+
+export enum DevToolsMessagingEvents {
+  INSPECTOR_TREE_UPDATED = 'inspector-tree-updated',
+  INSPECTOR_STATE_UPDATED = 'inspector-state-updated',
+  DEVTOOLS_STATE_UPDATED = 'devtools-state-updated',
+  ROUTER_INFO_UPDATED = 'router-info-updated',
+  TIMELINE_EVENT_UPDATED = 'timeline-event-updated',
+  INSPECTOR_UPDATED = 'inspector-updated',
+  ACTIVE_APP_UNMOUNTED = 'active-app-updated',
+  DESTROY_DEVTOOLS_CLIENT = 'destroy-devtools-client',
+  RELOAD_DEVTOOLS_CLIENT = 'reload-devtools-client',
+}
+
+function getDevToolsState() {
+  const state = devtools.ctx.state
+  return {
+    connected: state.connected,
+    clientConnected: true,
+    vueVersion: state?.activeAppRecord?.version || '',
+    tabs: state.tabs,
+    commands: state.commands,
+    vitePluginDetected: state.vitePluginDetected,
+    appRecords: state.appRecords.map(item => ({
+      id: item.id,
+      name: item.name,
+      version: item.version,
+      routerId: item.routerId,
+    })),
+    activeAppRecordId: state.activeAppRecordId,
+  }
+}
+
+export const functions = {
+  on: (event: string, handler: Function) => {
+    hooks.hook(event, handler)
+  },
+  off: (event: string, handler: Function) => {
+    hooks.removeHook(event, handler)
+  },
+  once: (event: string, handler: Function) => {
+    hooks.hookOnce(event, handler)
+  },
+  emit: (event: string, ...args: any[]) => {
+    hooks.callHook(event, ...args)
+  },
+  heartbeat: () => {
+    return true
+  },
+  devtoolsState: () => {
+    return getDevToolsState()
+  },
+  async getInspectorTree(payload: Pick<DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE], 'inspectorId' | 'filter'>) {
+    const res = await devtools.ctx.api.getInspectorTree(payload)
+    return stringify(res) as string
+  },
+  async getInspectorState(payload: Pick<DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE], 'inspectorId' | 'nodeId'>) {
+    const inspector = getInspector(payload.inspectorId)
+    if (inspector)
+      inspector.selectedNodeId = payload.nodeId
+
+    const res = await devtools.ctx.api.getInspectorState(payload)
+    return stringify(res) as string
+  },
+  async editInspectorState(payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]) {
+    return await devtools.ctx.api.editInspectorState(payload)
+  },
+  inspectComponentInspector() {
+    return devtools.ctx.api.inspectComponentInspector()
+  },
+  cancelInspectComponentInspector() {
+    return devtools.ctx.api.cancelInspectComponentInspector()
+  },
+  getComponentRenderCode(id: string) {
+    return devtools.ctx.api.getComponentRenderCode(id)
+  },
+  scrollToComponent(id: string) {
+    return devtools.ctx.api.scrollToComponent(id)
+  },
+  getInspectorNodeActions(id: string) {
+    return getInspectorNodeActions(id)
+  },
+  getInspectorActions(id: string) {
+    return getInspectorActions(id)
+  },
+  callInspectorNodeAction(inspectorId: string, actionIndex: number, nodeId: string) {
+    const nodeActions = getInspectorNodeActions(inspectorId)
+    if (nodeActions?.length) {
+      const item = nodeActions[actionIndex]
+      item.action?.(nodeId)
+    }
+  },
+  callInspectorAction(inspectorId: string, actionIndex: number) {
+    const actions = getInspectorActions(inspectorId)
+    if (actions?.length) {
+      const item = actions[actionIndex]
+      item.action?.()
+    }
+  },
+  openInEditor(options: OpenInEditorOptions) {
+    return devtools.ctx.api.openInEditor(options)
+  },
+  async checkVueInspectorDetected() {
+    return !!await devtools.ctx.api.getVueInspector()
+  },
+  async enableVueInspector() {
+    const inspector = await devtools?.api?.getVueInspector?.()
+    if (inspector)
+      await inspector.enable()
+  },
+  async toggleApp(id: string) {
+    return devtools.ctx.api.toggleApp(id)
+  },
+  getRouterInfo() {
+    return devtoolsRouterInfo
+  },
+  navigate(path: string) {
+    return devtoolsRouter.value?.push(path).catch(() => ({}))
+  },
+  getMatchedRoutes(path: string) {
+    const c = console.warn
+    console.warn = () => {}
+    const matched = devtoolsRouter.value?.resolve({
+      path: path || '/',
+    }).matched ?? []
+    console.warn = c
+    return matched
+  },
+  toggleClientConnected(state: boolean) {
+    toggleClientConnected(state)
+  },
+  getCustomInspector() {
+    return getActiveInspectors()
+  },
+  getInspectorInfo(id: string) {
+    return getInspectorInfo(id)
+  },
+  // listen to devtools server events
+  initDevToolsServerListener() {
+    const rpcServer = getRpcServer<RPCFunctions>()
+    const broadcast = rpcServer.broadcast
+    devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_INSPECTOR_TREE_TO_CLIENT, (payload) => {
+      broadcast.emit(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, stringify(payload))
+    })
+    devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_INSPECTOR_STATE_TO_CLIENT, (payload) => {
+      broadcast.emit(DevToolsMessagingEvents.INSPECTOR_STATE_UPDATED, stringify(payload))
+    })
+    devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.DEVTOOLS_STATE_UPDATED, () => {
+      broadcast.emit(DevToolsMessagingEvents.DEVTOOLS_STATE_UPDATED, getDevToolsState())
+    })
+    devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.ROUTER_INFO_UPDATED, ({ state }) => {
+      broadcast.emit(DevToolsMessagingEvents.ROUTER_INFO_UPDATED, state)
+    })
+    devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_TIMELINE_EVENT_TO_CLIENT, (payload) => {
+      broadcast.emit(DevToolsMessagingEvents.TIMELINE_EVENT_UPDATED, payload)
+    })
+    devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_INSPECTOR_TO_CLIENT, (payload) => {
+      broadcast.emit(DevToolsMessagingEvents.INSPECTOR_UPDATED, payload)
+    })
+    devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_ACTIVE_APP_UNMOUNTED_TO_CLIENT, () => {
+      broadcast.emit(DevToolsMessagingEvents.ACTIVE_APP_UNMOUNTED)
+    })
+  },
+
+}
+
+export type RPCFunctions = typeof functions
+
+export const rpc = new Proxy<{
+  value: ReturnType<typeof getRpcClient<RPCFunctions>>
+  functions: ReturnType<typeof getRpcClient<RPCFunctions>>
+}>({
+  value: {} as ReturnType<typeof getRpcClient<typeof functions>>,
+  functions: {} as ReturnType<typeof getRpcClient<RPCFunctions>>,
+}, {
+  get(target, property) {
+    const _rpc = getRpcClient<RPCFunctions>()
+    if (property === 'value') {
+      return _rpc
+    }
+    else if (property === 'functions') {
+      return _rpc.$functions
+    }
+  },
+})
+
+export const rpcServer = new Proxy<{
+  value: ReturnType<typeof getRpcServer<RPCFunctions>>
+  functions: ReturnType<typeof getRpcServer<RPCFunctions>>
+}>({
+  value: {} as ReturnType<typeof getRpcServer<typeof functions>>,
+  functions: {} as ReturnType<typeof getRpcServer<RPCFunctions>>,
+}, {
+  get(target, property) {
+    const _rpc = getRpcServer<RPCFunctions>()
+    if (property === 'value') {
+      return _rpc
+    }
+    else if (property === 'functions') {
+      return _rpc.functions
+    }
+  },
+})
+
+export function onRpcConnected(callback: () => void) {
+  let timer: number = null!
+  let retryCount = 0
+
+  function heartbeat() {
+    rpc.value?.heartbeat?.().then(() => {
+      callback()
+      clearTimeout(timer)
+    }).catch(() => {
+    })
+  }
+
+  timer = setInterval(() => {
+    if (retryCount >= 20) {
+      clearTimeout(timer)
+    }
+    retryCount++
+    heartbeat()
+  }, retryCount * 80) as unknown as number
+  heartbeat()
+}
+
+export function onRpcSeverReady(callback: () => void) {
+  let timer: number = null!
+  const timeout = 120
+
+  function heartbeat() {
+    if (rpcServer.value.clients.length > 0) {
+      callback()
+      clearTimeout(timer)
+    }
+  }
+
+  timer = setInterval(() => {
+    heartbeat()
+  }, timeout) as unknown as number
+}
diff --git a/packages/core/src/rpc/index.ts b/packages/core/src/rpc/index.ts
new file mode 100644
index 00000000..bfb9045c
--- /dev/null
+++ b/packages/core/src/rpc/index.ts
@@ -0,0 +1,3 @@
+export * from './global'
+export * from './vite'
+export * from './types'
diff --git a/packages/core/src/vite-bridge/module-types.ts b/packages/core/src/rpc/types.ts
similarity index 100%
rename from packages/core/src/vite-bridge/module-types.ts
rename to packages/core/src/rpc/types.ts
diff --git a/packages/core/src/rpc/vite.ts b/packages/core/src/rpc/vite.ts
new file mode 100644
index 00000000..fd17d75a
--- /dev/null
+++ b/packages/core/src/rpc/vite.ts
@@ -0,0 +1,79 @@
+import { createRpcClient, createRpcServer, getViteRpcClient } from '@vue/devtools-kit'
+import { createHooks } from 'hookable'
+import type { AssetImporter, AssetInfo, ImageMeta, ModuleInfo } from './types'
+
+const hooks = createHooks()
+
+export const viteRpcFunctions = {
+  on: (event: string, handler: Function) => {
+    hooks.hook(event, handler)
+  },
+  off: (event: string, handler: Function) => {
+    hooks.removeHook(event, handler)
+  },
+  once: (event: string, handler: Function) => {
+    hooks.hookOnce(event, handler)
+  },
+  emit: (event: string, ...args: any[]) => {
+    hooks.callHook(event, ...args)
+  },
+  heartbeat: () => { return true },
+}
+
+export type ViteRPCFunctions = typeof viteRpcFunctions & {
+  // assets
+  getStaticAssets: () => Promise<AssetInfo[]>
+  getAssetImporters: (url: string) => Promise<AssetImporter[]>
+  getImageMeta: (filepath: string) => Promise<ImageMeta>
+  getTextAssetContent: (filepath: string, limit?: number) => Promise<string>
+  // config
+  getRoot: () => Promise<string>
+  // graph
+  getGraphModules: () => Promise<ModuleInfo[]>
+}
+
+export const viteRpc = new Proxy<{
+  value: ReturnType<typeof getViteRpcClient<ViteRPCFunctions>>
+  functions: ReturnType<typeof getViteRpcClient<ViteRPCFunctions>>
+}>({
+  value: {} as ReturnType<typeof getViteRpcClient<ViteRPCFunctions>>,
+  functions: {} as ReturnType<typeof getViteRpcClient<ViteRPCFunctions>>,
+}, {
+  get(target, property) {
+    const _rpc = getViteRpcClient<ViteRPCFunctions>()
+    if (property === 'value') {
+      return _rpc
+    }
+    else if (property === 'functions') {
+      return _rpc?.$functions
+    }
+  },
+})
+
+export function onViteRpcConnected(callback: () => void) {
+  let timer: number = null!
+
+  function heartbeat() {
+    viteRpc.value?.heartbeat?.().then(() => {
+      clearTimeout(timer)
+      callback()
+    }).catch(() => ({}))
+    timer = setTimeout(() => {
+      heartbeat()
+    }, 80) as unknown as number
+  }
+
+  heartbeat()
+}
+
+export function createViteClientRpc() {
+  createRpcClient(viteRpcFunctions, {
+    preset: 'vite',
+  })
+}
+
+export function createViteServerRpc(functions: Record<string, any>) {
+  createRpcServer(functions, {
+    preset: 'vite',
+  })
+}
diff --git a/packages/core/src/separate-window/index.ts b/packages/core/src/separate-window/index.ts
deleted file mode 100644
index c0074a36..00000000
--- a/packages/core/src/separate-window/index.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Bridge } from '../bridge'
-import { prepareInjection } from '../injection'
-
-const BROADCAST_CHANNEL_NAME = '__vue-devtools-broadcast-channel__'
-
-const MESSAGING_APP_TARGET = '__VUE_DEVTOOLS_USER_APP__'
-const MESSAGING_DEVTOOLS_TARGET = '__VUE_DEVTOOLS_CLIENT__'
-const CHECK_CONNECTION_EVENT = '__VUE_DEVTOOLS_CHECK_CONNECTION__'
-const CONNECTED_EVENT = '__VUE_DEVTOOLS_CONNECTED__'
-
-// used in user app side
-export function initAppSeparateWindow() {
-  const channel = new BroadcastChannel(BROADCAST_CHANNEL_NAME)
-  const bridge = new Bridge({
-    tracker(fn) {
-      channel.onmessage = (event) => {
-        if (event.data.target === MESSAGING_DEVTOOLS_TARGET)
-          fn(event.data.data)
-      }
-    },
-    trigger(data) {
-      channel.postMessage({
-        target: MESSAGING_APP_TARGET,
-        data,
-      })
-    },
-  })
-  prepareInjection(bridge)
-
-  bridge.on(CHECK_CONNECTION_EVENT, () => {
-    bridge.emit(CONNECTED_EVENT)
-    // force sync to make sure that connect the devtools client
-    setTimeout(() => {
-      bridge.emit('syn')
-    }, 200)
-
-    window.addEventListener('beforeunload', () => {
-      bridge.emit('disconnect')
-    })
-  })
-}
-
-export function initDevToolsSeparateWindowBridge(channel: BroadcastChannel) {
-  const bridge = new Bridge({
-    tracker(fn) {
-      channel.onmessage = (event) => {
-        if (event.data.target === MESSAGING_APP_TARGET)
-          fn(event.data.data)
-      }
-    },
-    trigger(data) {
-      channel.postMessage({
-        target: MESSAGING_DEVTOOLS_TARGET,
-        data,
-      })
-    },
-  })
-
-  return bridge
-}
-
-// used in devtools client side
-export function initDevToolsSeparateWindow(
-  options: {
-    onConnected?: (channel: BroadcastChannel) => void
-  } = {},
-) {
-  const { onConnected = () => {} } = options
-  let connectionTimer: NodeJS.Timeout | null = null
-  const channel = new BroadcastChannel(BROADCAST_CHANNEL_NAME)
-
-  function connect() {
-    connectionTimer = setInterval(() => {
-      channel.postMessage({
-        target: MESSAGING_DEVTOOLS_TARGET,
-        data: {
-          event: CHECK_CONNECTION_EVENT,
-        },
-      })
-    }, 2000)
-  }
-
-  channel.onmessage = (event) => {
-    if (event.data?.data?.event === CONNECTED_EVENT) {
-      clearInterval(connectionTimer!)
-      onConnected(channel)
-    }
-  }
-
-  connect()
-}
diff --git a/packages/core/src/vite-bridge/client.ts b/packages/core/src/vite-bridge/client.ts
deleted file mode 100644
index a7a21f62..00000000
--- a/packages/core/src/vite-bridge/client.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { getViteClient } from 'vite-hot-client'
-import { nanoid } from 'nanoid/non-secure'
-import { getViteClientHotContext, setViteClientHotContext } from './shared'
-
-async function getViteHotContext() {
-  if (import.meta.url?.includes('chrome-extension://'))
-    return
-
-  const viteClient = await getViteClient(`${location.pathname.split('/__devtools__')[0] || ''}/`.replace(/\/\//g, '/'), false)
-  return viteClient?.createHotContext('/____')
-}
-
-export async function initViteClientHotContext() {
-  const context = await getViteHotContext()
-  context && setViteClientHotContext(context)
-}
-
-export function callViteServerAction<T>(name: string) {
-  return async (...args: any[]) => {
-    const viteClient = getViteClientHotContext()
-    const uniqueEventKey = nanoid()
-    return new Promise<T>((resolve) => {
-      const cb = (e: T) => {
-        if (viteClient.off)
-          viteClient.off(uniqueEventKey, cb)
-
-        else
-          // compatible with vite 4.x
-          viteClient.dispose?.(cb)
-
-        resolve(e)
-      }
-      viteClient.on(uniqueEventKey, cb)
-      viteClient.send(name, {
-        key: uniqueEventKey,
-        payload: args,
-      })
-    })
-  }
-}
-
-export function defineViteClientListener(name: string) {
-  return (listener: (...args: any[]) => void) => {
-    const viteClient = getViteClientHotContext()
-    viteClient.on(name, listener)
-    return () => {
-      if (viteClient.off)
-        viteClient.off(name, listener)
-
-      else
-        // compatible with vite 4.x
-        viteClient.dispose?.(listener)
-    }
-  }
-}
diff --git a/packages/core/src/vite-bridge/server.ts b/packages/core/src/vite-bridge/server.ts
deleted file mode 100644
index 08eee451..00000000
--- a/packages/core/src/vite-bridge/server.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { ViteDevServer } from 'vite'
-import { getViteServerContext, setViteServerContext } from './shared'
-
-export function initViteServerContext(context: ViteDevServer) {
-  setViteServerContext(context)
-}
-
-export function defineViteServerAction<T = Promise<unknown>>(name: string, action: (...args: any[]) => void | T) {
-  const viteServer = getViteServerContext()
-  // `server.hot` (Vite 5.1+) > `server.ws`
-  const ws = viteServer.hot ?? viteServer.ws
-  ws.on(name, async ({ key, payload }) => {
-    const res = await action(...payload)
-    ws.send(key, res)
-  })
-}
-
-export function callViteClientListener(name: string) {
-  return async (...args: any[]) => {
-    const viteServer = getViteServerContext()
-    // `server.hot` (Vite 5.1+) > `server.ws`
-    const ws = viteServer.hot ?? viteServer.ws
-
-    ws.send(name, ...args)
-  }
-}
diff --git a/packages/core/src/vite-bridge/shared.ts b/packages/core/src/vite-bridge/shared.ts
deleted file mode 100644
index 865440a1..00000000
--- a/packages/core/src/vite-bridge/shared.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { target } from '@vue/devtools-shared'
-import type { ViteHotContext } from 'vite-hot-client'
-import type { ViteDevServer } from 'vite'
-
-export const VITE_CLIENT_HOT_CONTEXT = 'vite:client-hot-context'
-export const VITE_SERVER_CONTEXT = 'vite:server'
-
-export function getViteClientHotContext(): ViteHotContext {
-  return target[VITE_CLIENT_HOT_CONTEXT]
-}
-
-export function setViteClientHotContext(context: ViteHotContext) {
-  target[VITE_CLIENT_HOT_CONTEXT] = context
-}
-
-export function getViteServerContext(): ViteDevServer {
-  return target[VITE_SERVER_CONTEXT]
-}
-
-export function setViteServerContext(context: ViteDevServer) {
-  target[VITE_SERVER_CONTEXT] = context
-}
diff --git a/packages/core/src/vue-plugin.ts b/packages/core/src/vue-plugin.ts
deleted file mode 100644
index f33126b4..00000000
--- a/packages/core/src/vue-plugin.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import type { App, InjectionKey, Plugin, Ref } from 'vue'
-import { inject, ref } from 'vue'
-import type { AppRecord, CustomCommand, CustomTab } from '@vue/devtools-kit'
-import type { BridgeInstanceType } from './bridge'
-
-import { onDevToolsStateUpdated } from './bridge-events/devtools-listeners'
-import { getDevToolsState } from './bridge-events/devtools-actions'
-
-export interface DevToolsPluginOptions {
-  bridge: BridgeInstanceType
-  viewMode: 'overlay' | 'panel'
-}
-
-export type DevtoolsBridgeAppRecord = Pick<AppRecord, 'name' | 'id' | 'version' | 'routerId' | 'moduleDetectives'>
-
-function initDevToolsState() {
-  const connected = ref(false)
-  const clientConnected = ref(false)
-  const componentCount = ref(0)
-  const vueVersion = ref('')
-  const tabs = ref<CustomTab[]>([])
-  const commands = ref<CustomCommand[]>([])
-  const vitePluginDetected = ref(false)
-  const appRecords = ref<Array<DevtoolsBridgeAppRecord>>([])
-  const activeAppRecordId = ref('')
-
-  function init() {
-    getDevToolsState().then((_data) => {
-      const data = _data!
-      connected.value = data.connected
-      clientConnected.value = data.clientConnected
-      vueVersion.value = data.vueVersion || ''
-      tabs.value = data.tabs
-      commands.value = data.commands
-      vitePluginDetected.value = data.vitePluginDetected
-      appRecords.value = data.appRecords
-      activeAppRecordId.value = data.activeAppRecordId!
-    })
-
-    onDevToolsStateUpdated((data) => {
-      connected.value = data.connected
-      clientConnected.value = data.clientConnected
-      vueVersion.value = data.vueVersion || ''
-      tabs.value = data.tabs
-      commands.value = data.commands
-      vitePluginDetected.value = data.vitePluginDetected
-      appRecords.value = data.appRecords
-      activeAppRecordId.value = data.activeAppRecordId!
-    })
-  }
-
-  return {
-    init,
-    restore: init,
-    vueVersion,
-    connected,
-    clientConnected,
-    componentCount,
-    tabs,
-    commands,
-    vitePluginDetected,
-    appRecords,
-    activeAppRecordId,
-  }
-}
-
-function initDevToolsBridge(_bridge: DevToolsPluginOptions['bridge']) {
-  const bridge = ref<DevToolsPluginOptions['bridge']>(_bridge)
-
-  function restore(_bridge: DevToolsPluginOptions['bridge']) {
-    bridge.value = _bridge
-  }
-  return {
-    bridge,
-    restore,
-  }
-}
-
-const VueDevToolsBridgeSymbol: InjectionKey<Ref<BridgeInstanceType>> = Symbol('VueDevToolsBridgeSymbol')
-const VueDevToolsStateSymbol: InjectionKey<{
-  connected: Ref<boolean>
-  clientConnected: Ref<boolean>
-  componentCount: Ref<number>
-  vueVersion: Ref<string>
-  tabs: Ref<CustomTab[]>
-  commands: Ref<CustomCommand[]>
-  vitePluginDetected: Ref<boolean>
-  appRecords: Ref<Array<DevtoolsBridgeAppRecord>>
-  activeAppRecordId: Ref<string>
-}> = Symbol('VueDevToolsStateSymbol')
-
-export function createDevToolsVuePlugin(pluginOptions: DevToolsPluginOptions): Plugin {
-  return {
-    install(app: App, options) {
-      const { bridge: _bridge, viewMode: _viewMode } = pluginOptions
-      const viewMode = ref(_viewMode)
-      const state = initDevToolsState()
-      const bridgeContext = initDevToolsBridge(_bridge)
-      state.init()
-      app.provide(VueDevToolsBridgeSymbol, bridgeContext.bridge)
-      app.provide(VueDevToolsStateSymbol, state)
-      app.provide('viewMode', viewMode)
-      bridgeContext.bridge.value.on('toggle-view-mode', (v) => {
-        viewMode.value = v
-      })
-      app.config.globalProperties.__VUE_DEVTOOLS_UPDATE__ = (_bridge: DevToolsPluginOptions['bridge']) => {
-        bridgeContext.restore(_bridge)
-        state.restore()
-      }
-    },
-  }
-}
-
-export function useDevToolsBridge() {
-  return inject(VueDevToolsBridgeSymbol)!
-}
-
-export function useDevToolsState() {
-  return inject(VueDevToolsStateSymbol)!
-}
diff --git a/packages/core/src/vue-plugin/devtools-state.ts b/packages/core/src/vue-plugin/devtools-state.ts
new file mode 100644
index 00000000..f8fa51eb
--- /dev/null
+++ b/packages/core/src/vue-plugin/devtools-state.ts
@@ -0,0 +1,118 @@
+import { computed, inject, onUnmounted, ref, watch } from 'vue'
+import type { App, InjectionKey, Ref } from 'vue'
+import type { AppRecord, CustomCommand, CustomTab } from '@vue/devtools-kit'
+import { DevToolsMessagingEvents, onRpcConnected, rpc } from '../rpc'
+
+interface DevToolsState {
+  connected: boolean
+  clientConnected: boolean
+  vueVersion: string
+  tabs: CustomTab[]
+  commands: CustomCommand[]
+  vitePluginDetected: boolean
+  appRecords: AppRecord[]
+  activeAppRecordId: string
+}
+
+type DevToolsRefState = {
+  [P in keyof DevToolsState]: Ref<DevToolsState[P]>
+}
+
+const VueDevToolsStateSymbol: InjectionKey<DevToolsRefState> = Symbol.for('__VueDevToolsStateSymbol__')
+
+export function VueDevToolsVuePlugin() {
+  return {
+    install(app: App) {
+      const state = createDevToolsStateContext()
+      state.getDevToolsState()
+      app.provide(VueDevToolsStateSymbol, state)
+      app.config.globalProperties.$getDevToolsState = state.getDevToolsState
+      app.config.globalProperties.$disconnectDevToolsClient = () => {
+        state.clientConnected.value = false
+        state.connected.value = false
+      }
+    },
+  }
+}
+
+export function createDevToolsStateContext() {
+  const connected = ref(false)
+  const clientConnected = ref(false)
+  const vueVersion = ref('')
+  const tabs = ref<CustomTab[]>([])
+  const commands = ref<CustomCommand[]>([])
+  const vitePluginDetected = ref(false)
+  const appRecords = ref<Array<AppRecord>>([])
+  const activeAppRecordId = ref('')
+
+  function updateState(data: DevToolsState) {
+    connected.value = data.connected
+    clientConnected.value = data.clientConnected
+    vueVersion.value = data.vueVersion || ''
+    tabs.value = data.tabs
+    commands.value = data.commands
+    vitePluginDetected.value = data.vitePluginDetected
+    appRecords.value = data.appRecords
+    activeAppRecordId.value = data.activeAppRecordId!
+  }
+
+  function getDevToolsState() {
+    onRpcConnected(() => {
+      rpc.value.devtoolsState().then((data) => {
+        updateState(data as DevToolsState)
+      })
+      rpc.functions.off(DevToolsMessagingEvents.DEVTOOLS_STATE_UPDATED, updateState)
+      rpc.functions.on(DevToolsMessagingEvents.DEVTOOLS_STATE_UPDATED, updateState)
+    })
+  }
+
+  return {
+    getDevToolsState,
+    connected,
+    clientConnected,
+    vueVersion,
+    tabs,
+    commands,
+    vitePluginDetected,
+    appRecords,
+    activeAppRecordId,
+  }
+}
+
+export function useDevToolsState() {
+  return inject(VueDevToolsStateSymbol)!
+}
+
+const fns: (() => void)[] = []
+
+export function onDevToolsConnected(fn: () => void) {
+  const { connected, clientConnected } = useDevToolsState()
+
+  fns.push(fn)
+
+  onUnmounted(() => {
+    fns.splice(fns.indexOf(fn), 1)
+  })
+
+  const devtoolsReady = computed(() => clientConnected.value && connected.value)
+
+  if (devtoolsReady.value) {
+    fn()
+  }
+  else {
+    const stop = watch(devtoolsReady, (v) => {
+      if (v) {
+        fn()
+        stop()
+      }
+    })
+  }
+
+  return () => {
+    fns.splice(fns.indexOf(fn), 1)
+  }
+}
+
+export function refreshCurrentPageData() {
+  fns.forEach(fn => fn())
+}
diff --git a/packages/devtools-kit/__tests__/api/api.test.ts b/packages/devtools-kit/__tests__/api/api.test.ts
deleted file mode 100644
index fffaa262..00000000
--- a/packages/devtools-kit/__tests__/api/api.test.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-import { devtools } from '@vue/devtools-kit'
-import { mount } from '@vue/test-utils'
-import type { Plugin } from 'vue'
-import { devtoolsAppRecords, resetDevToolsContext, resetDevToolsState } from '../../src/state'
-
-import { DevToolsPluginApi } from '../../src/api'
-import { onDevToolsConnected, setupDevToolsPlugin } from '../../src'
-import { DevToolsHooks } from '../../src/types'
-import App from '../fixtures/App.vue'
-
-function createDevToolsPlugin(fn: (api: DevToolsPluginApi) => void): Plugin {
-  return {
-    install(app) {
-      setupDevToolsPlugin({
-        id: `devtools-test`,
-        label: 'Hi DevTools',
-        app,
-      }, fn)
-    },
-  }
-}
-
-describe('devtools api', () => {
-  beforeAll(() => {
-    devtools.init()
-  })
-  afterEach(() => {
-    resetDevToolsState()
-    resetDevToolsContext()
-  })
-  it('should work w/ addTimelineLayer api', async () => {
-    await new Promise<void>((resolve) => {
-      const timelineLayerData = {
-        id: 'layer',
-        label: 'Layer',
-        color: 0x92A2BF,
-      }
-      devtools.hook.on.vueAppInit(() => {
-        vi.waitFor(
-          () => {
-            expect(devtools.context.timelineLayer).toEqual([timelineLayerData])
-            resolve()
-          },
-        )
-      })
-      mount(App, {
-        attachTo: document.body,
-        global: {
-          plugins: [createDevToolsPlugin((api) => {
-            api.addTimelineLayer(timelineLayerData)
-          })],
-        },
-      })
-    })
-  })
-
-  it('should work w/ addTimelineEvent api', async () => {
-    await new Promise<void>((resolve) => {
-      const timelineEventData = {
-        event: {
-          groupId: 1,
-          time: 100000000,
-          title: 'title',
-          subtitle: 'subtitle',
-          data: {},
-        },
-        layerId: 'layer',
-      }
-
-      onDevToolsConnected(() => {
-        devtools.api.on.addTimelineEvent((payload) => {
-          expect(payload).toEqual(timelineEventData)
-          resolve()
-        })
-      })
-
-      mount(App, {
-        attachTo: document.body,
-        global: {
-          plugins: [createDevToolsPlugin((api) => {
-            onDevToolsConnected(() => {
-              setTimeout(() => {
-                api.addTimelineEvent(timelineEventData)
-              })
-            })
-          })],
-        },
-      })
-    })
-  })
-
-  it('should work w/ addInspector api', async () => {
-    await new Promise<void>((resolve) => {
-      // Originated from https://github.com/vuejs/devtools-next/blob/main/packages/devtools-kit/src/plugins/component.ts#L20-L24
-      const componentInspector = {
-        id: 'components',
-        nodeActions: [],
-        actions: [],
-        nodeId: '',
-        filter: '',
-        treeFilterPlaceholder: 'Search components',
-      }
-      const inspectorData = {
-        id: 'vueuse',
-        label: 'VueUse',
-        actions: [],
-        nodeActions: [],
-        nodeId: '',
-        filter: '',
-        treeFilterPlaceholder: 'Search',
-      }
-      devtools.hook.on.vueAppInit(() => {
-        vi.waitFor(
-          () => {
-            const { label, ...inspectorDataWithoutLabel } = inspectorData
-            expect(devtools.context.inspector).toEqual([inspectorDataWithoutLabel, componentInspector])
-            resolve()
-          },
-        )
-      })
-      mount(App, {
-        attachTo: document.body,
-        global: {
-          plugins: [createDevToolsPlugin((api) => {
-            api.addInspector(inspectorData)
-          })],
-        },
-      })
-    })
-  })
-
-  it('legacy plugin can be registered after app is created', async () => {
-    // Refs: #247
-    await new Promise<void>((resolve) => {
-      const setupFn = vitest.fn()
-      const globalHook = __VUE_DEVTOOLS_GLOBAL_HOOK__
-
-      mount(App, {
-        attachTo: document.body,
-      })
-
-      onDevToolsConnected(() => {
-        const { app, api } = devtoolsAppRecords.active
-        expect(setupFn).not.toHaveBeenCalled()
-        globalHook.emit(DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, { app }, setupFn)
-
-        vi.waitFor(() => {
-          expect(setupFn).toBeCalledWith(api)
-          resolve()
-        })
-      })
-    })
-  })
-})
diff --git a/packages/devtools-kit/__tests__/api/plugin.test.ts b/packages/devtools-kit/__tests__/api/plugin.test.ts
deleted file mode 100644
index 6bbcd980..00000000
--- a/packages/devtools-kit/__tests__/api/plugin.test.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { devtools } from '@vue/devtools-kit'
-import { mount } from '@vue/test-utils'
-import { createRouter, createWebHistory } from 'vue-router'
-import type { RouteRecordRaw } from 'vue-router'
-import { devtoolsAppRecords, resetDevToolsContext, resetDevToolsState } from '../../src/state'
-import App from '../fixtures/App.vue'
-
-const routes: RouteRecordRaw[] = [
-  {
-    path: '/',
-    component: App,
-    name: 'home',
-    alias: '/index',
-  },
-]
-
-const router = createRouter({
-  history: createWebHistory(),
-  routes,
-})
-
-describe('vue plugin', () => {
-  beforeAll(() => {
-    devtools.init()
-  })
-  afterEach(() => {
-    resetDevToolsState()
-    resetDevToolsContext()
-  })
-  it('should work w/ register plugin', async () => {
-    await new Promise<void>((resolve) => {
-      devtools.hook.on.vueAppInit(() => {
-        const [appRecord] = devtoolsAppRecords.value
-        expect(devtools.state.pluginBuffer.findIndex(([descriptor]) => descriptor.packageName === 'vue-router')).toBeGreaterThanOrEqual(0)
-        expect(appRecord.moduleDetectives?.vueRouter).toBe(true)
-        resolve()
-      })
-      mount(App, {
-        attachTo: document.body,
-        global: {
-          plugins: [router],
-        },
-      })
-    })
-  })
-})
diff --git a/packages/devtools-kit/__tests__/hook.test.ts b/packages/devtools-kit/__tests__/hook.test.ts
deleted file mode 100644
index 152bf38a..00000000
--- a/packages/devtools-kit/__tests__/hook.test.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { devtools } from '@vue/devtools-kit'
-import { mount } from '@vue/test-utils'
-import { resetDevToolsContext, resetDevToolsState } from '../src/state'
-import App from './fixtures/App.vue'
-
-describe('hook', () => {
-  beforeAll(() => {
-    devtools.init()
-  })
-  afterEach(() => {
-    resetDevToolsState()
-    resetDevToolsContext()
-  })
-  it('should work w/ app init hook', async () => {
-    await new Promise<void>((resolve) => {
-      devtools.hook.on.vueAppInit((app, version) => {
-        expect(app).toBeTypeOf('object')
-        expect(version).toBeTypeOf('string')
-        resolve()
-      })
-      mount(App, {
-        attachTo: document.body,
-      })
-    })
-  })
-
-  it('should work w/ component updated hook', async () => {
-    await new Promise<void>((resolve) => {
-      devtools.hook.on.componentUpdated((_, __, ___, component) => {
-        expect(component.setupState.count).toBe(10)
-        resolve()
-      })
-
-      const app = mount<{}, { }, { count: number, visible: boolean }>(App, {
-        attachTo: document.body,
-      })
-      app.vm.count = 10
-    })
-  })
-})
diff --git a/packages/devtools-kit/__tests__/state.test.ts b/packages/devtools-kit/__tests__/state.test.ts
deleted file mode 100644
index 8edd4aed..00000000
--- a/packages/devtools-kit/__tests__/state.test.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { devtools } from '@vue/devtools-kit'
-import { mount } from '@vue/test-utils'
-import { resetDevToolsContext, resetDevToolsState } from '../src/state'
-import App from './fixtures/App.vue'
-
-describe('app record', () => {
-  beforeAll(() => {
-    devtools.init()
-  })
-  afterEach(() => {
-    resetDevToolsState()
-    resetDevToolsContext()
-  })
-  it('should work', async () => {
-    await new Promise<void>((resolve) => {
-      devtools.hook.on.vueAppInit(() => {
-        const records = devtools.state.appRecords
-        expect(records.length).toBe(1)
-        expect(devtools.state.connected).toBe(true)
-        resolve()
-      })
-      mount(App, {
-        attachTo: document.body,
-      })
-    })
-  })
-})
diff --git a/packages/devtools-kit/global.d.ts b/packages/devtools-kit/global.d.ts
index 51b6af35..7f556b63 100644
--- a/packages/devtools-kit/global.d.ts
+++ b/packages/devtools-kit/global.d.ts
@@ -1,17 +1,16 @@
-import type { DevToolsContext, DevToolsEnv, DevToolsHook, DevToolsState, Router, RouterInfo } from './src/types'
+import type { DevToolsHook, RouterInfo } from './src/types'
 
 /* eslint-disable vars-on-top, no-var */
 declare global {
   var __VUE_DEVTOOLS_GLOBAL_HOOK__: DevToolsHook
-  var __VUE_DEVTOOLS_GLOBAL_STATE__: DevToolsState
-  var __VUE_DEVTOOLS_CONTEXT__: DevToolsContext
   var __VUE_DEVTOOLS_NEXT_APP_RECORD_INFO__: {
     id: number
     appIds: Set<string>
   }
-  var __VUE_DEVTOOLS_ROUTER__: Router | null
   var __VUE_DEVTOOLS_ROUTER_INFO__: RouterInfo
-  var __VUE_DEVTOOLS_ENV__: DevToolsEnv
+  var __VUE_DEVTOOLS_ENV__: {
+    vitePluginDetected: boolean
+  }
   var __VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__: boolean
   var __VUE_DEVTOOLS_VITE_PLUGIN_DETECTED__: boolean
   var __VUE_DEVTOOLS_VITE_PLUGIN_CLIENT_URL__: string
diff --git a/packages/devtools-kit/package.json b/packages/devtools-kit/package.json
index 61593543..180285d4 100644
--- a/packages/devtools-kit/package.json
+++ b/packages/devtools-kit/package.json
@@ -32,10 +32,12 @@
   },
   "dependencies": {
     "@vue/devtools-shared": "workspace:^",
+    "birpc": "^0.2.17",
     "hookable": "^5.5.3",
     "mitt": "^3.0.1",
     "perfect-debounce": "^1.0.0",
-    "speakingurl": "^14.0.1"
+    "speakingurl": "^14.0.1",
+    "superjson": "^2.2.1"
   },
   "devDependencies": {
     "@types/speakingurl": "^13.0.6",
diff --git a/packages/devtools-kit/src/api/api.ts b/packages/devtools-kit/src/api/api.ts
deleted file mode 100644
index 363f4f56..00000000
--- a/packages/devtools-kit/src/api/api.ts
+++ /dev/null
@@ -1,278 +0,0 @@
-import { TimelineLayerItem, addTimelineLayer } from '../core/timeline'
-import { InspectorApiPayload, addInspector, getInspector, updateInspector } from '../core/inspector'
-import { toggleActiveAppRecord } from '../core/app-record'
-import type { VueAppInstance } from '../types'
-import { cancelInspectComponentHighLighter, highlight as highlightElement, inspectComponentHighLighter, scrollToComponent, toggleComponentHighLighter, unhighlight as unhighlightElement } from '../core/component-highlighter'
-import { devtoolsContext } from '../state'
-import { now as nowFn, stringify } from '../shared'
-import { StateEditor } from '../core/component/state/editor'
-import type { ComponentTreeNode, InspectorStateEditorPayload } from '../core/component/types'
-import { addCustomTab } from '../core/custom-tab'
-import type { CustomTab } from '../core/custom-tab/types'
-import { addCustomCommand, removeCustomCommand } from '../core/custom-command'
-import type { CustomCommand } from '../core/custom-command'
-import { getComponentInspector } from '../core/component-inspector'
-import type { OpenInEditorOptions } from '../core/open-in-editor'
-import { openInEditor } from '../core/open-in-editor'
-import { getComponentInstance } from '../core/component/utils'
-
-import { DevToolsEventParams, DevToolsEvents, apiHooks } from './hook'
-import { on } from './on'
-import { remove } from './off'
-import { updatePluginDetectives } from './plugin'
-
-export { collectDevToolsPlugin } from './plugin'
-
-export class DevToolsPluginApi {
-  public on: typeof on
-  public clear = remove
-  constructor() {
-    this.on = on
-  }
-
-  // #region compatible with old devtools
-
-  // timeline layer
-  addTimelineLayer(payload: TimelineLayerItem) {
-    addTimelineLayer(payload)
-  }
-
-  // timeline event
-  addTimelineEvent(...params: DevToolsEventParams<DevToolsEvents.ADD_TIMELINE_EVENT>) {
-    apiHooks.callHook(DevToolsEvents.ADD_TIMELINE_EVENT, ...params)
-  }
-
-  // add inspector
-  addInspector(payload: InspectorApiPayload) {
-    addInspector({
-      id: payload.id,
-      nodeId: '',
-      filter: '',
-      treeFilterPlaceholder: payload.treeFilterPlaceholder || '',
-      actions: payload.actions || [],
-      nodeActions: payload.nodeActions || [],
-    })
-    updatePluginDetectives()
-  }
-
-  // get inspector node action
-  getInspectorNodeActions(inspectorId: string) {
-    const inspector = getInspector(inspectorId)
-    return inspector?.nodeActions?.map(({ icon, tooltip }) => ({ icon, tooltip })) || []
-  }
-
-  // call inspector node action
-  callInspectorNodeAction(inspectorId: string, actionIndex: number, nodeId: string) {
-    const inspector = getInspector(inspectorId)
-    if (inspector && inspector.nodeActions) {
-      const item = inspector.nodeActions[actionIndex]
-      item.action?.(nodeId)
-    }
-  }
-
-  // get inspector action
-  getInspectorActions(inspectorId: string) {
-    const inspector = getInspector(inspectorId)
-    return inspector?.actions?.map(({ icon, tooltip }) => ({ icon, tooltip })) || []
-  }
-
-  // call inspector action
-  callInspectorAction(inspectorId: string, actionIndex: number, nodeId: string) {
-    const inspector = getInspector(inspectorId)
-    if (inspector && inspector.actions) {
-      const item = inspector.actions[actionIndex]
-      item.action?.(nodeId)
-    }
-  }
-
-  highlightElement(instance: VueAppInstance) {
-    highlightElement(instance)
-  }
-
-  unhighlightElement() {
-    unhighlightElement()
-  }
-
-  // inspector
-
-  async getInspectorTree(payload: DevToolsEventParams<DevToolsEvents.GET_INSPECTOR_TREE>[0] = {}) {
-    const { inspectorId, filter = '', instanceId = '' } = payload
-    const _payload = {
-      app: devtoolsContext.appRecord?.app,
-      inspectorId,
-      instanceId,
-      filter,
-      rootNodes: [],
-    }
-
-    updateInspector(inspectorId!, {
-      filter,
-    })
-
-    await new Promise<void>((resolve) => {
-      // @ts-expect-error hookable
-      apiHooks.callHookWith(async (callbacks) => {
-        await Promise.all(callbacks.map(cb => cb(_payload)))
-        resolve()
-      }, DevToolsEvents.GET_INSPECTOR_TREE)
-    })
-
-    return _payload.rootNodes as ComponentTreeNode[]
-  }
-
-  getInspectorState(payload: { inspectorId?: string, nodeId?: string } = {}) {
-    const { inspectorId, nodeId } = payload
-    const _payload = {
-      app: devtoolsContext.appRecord?.app,
-      inspectorId,
-      nodeId,
-    }
-
-    const ctx = {
-      currentTab: `custom-inspector:${inspectorId}`,
-    }
-
-    updateInspector(inspectorId!, {
-      nodeId,
-    })
-    // @ts-expect-error hookable
-    apiHooks.callHookWith((callbacks) => {
-      callbacks.forEach(cb => cb(_payload, ctx))
-    }, DevToolsEvents.GET_INSPECTOR_STATE)
-
-    // @ts-expect-error TODO: types
-    const state = _payload.state
-
-    delete state?.instance
-    return state
-  }
-
-  async editInspectorState(payload: InspectorStateEditorPayload) {
-    const stateEditor = new StateEditor()
-    apiHooks.callHook(DevToolsEvents.EDIT_INSPECTOR_STATE, {
-      ...payload,
-      app: devtoolsContext.appRecord?.app,
-      set: (obj, path = payload.path, value = payload.state.value, cb) => {
-        stateEditor.set(obj, path, value, cb || stateEditor.createDefaultSetCallback(payload.state))
-      },
-    })
-  }
-
-  async sendInspectorTree(inspectorId: string) {
-    const inspector = getInspector(inspectorId)
-    if (inspector) {
-      const res = await this.getInspectorTree({
-        inspectorId,
-      })
-
-      apiHooks.callHook(DevToolsEvents.SEND_INSPECTOR_TREE, {
-        inspectorId,
-        data: res,
-      })
-    }
-  }
-
-  async sendInspectorState(inspectorId: string) {
-    const inspector = getInspector(inspectorId)
-    if (inspector && inspector.nodeId) {
-      const res = await this.getInspectorState({
-        inspectorId,
-        nodeId: inspector.nodeId,
-      })
-      apiHooks.callHook(DevToolsEvents.SEND_INSPECTOR_STATE, { ...res, inspectorId })
-    }
-  }
-
-  async getComponentInstances(app: VueAppInstance) {
-    const appRecord = app.__VUE_DEVTOOLS_NEXT_APP_RECORD__
-    const appId = appRecord.id.toString()
-    const instances = [...appRecord.instanceMap]
-      .filter(([key]) => key.split(':')[0] === appId)
-      .map(([,instance]) => instance)
-    return instances
-  }
-
-  visitComponentTree(...params: DevToolsEventParams<DevToolsEvents.VISIT_COMPONENT_TREE>) {
-    apiHooks.callHook(DevToolsEvents.VISIT_COMPONENT_TREE, ...params)
-  }
-
-  notifyComponentUpdate() {
-    apiHooks.callHook(DevToolsEvents.COMPONENT_UPDATED)
-  }
-
-  now() {
-    return nowFn()
-  }
-
-  // #endregion compatible with old devtools
-
-  //  #region highlighter
-  toggleComponentInspector(...params: DevToolsEventParams<DevToolsEvents.TOGGLE_COMPONENT_HIGHLIGHTER>) {
-    return toggleComponentHighLighter(...params)
-  }
-
-  inspectComponentInspector() {
-    return inspectComponentHighLighter()
-  }
-
-  cancelInspectComponentInspector() {
-    return cancelInspectComponentHighLighter()
-  }
-
-  scrollToComponent(...params: DevToolsEventParams<DevToolsEvents.SCROLL_TO_COMPONENT>) {
-    return scrollToComponent(...params)
-  }
-
-  getComponentRenderCode(id: string) {
-    const instance = getComponentInstance(devtoolsContext.appRecord!, id)
-    if (instance)
-      // @ts-expect-error skip type check
-      return !(instance?.type instanceof Function) ? instance.render.toString() : instance.type.toString()
-  }
-
-  getComponentBoundingRect(...params: DevToolsEventParams<DevToolsEvents.GET_COMPONENT_BOUNDING_RECT>) {
-    const { inspectorId, instanceId = '' } = params[0]
-    const _payload = {
-      app: devtoolsContext.appRecord?.app,
-      inspectorId,
-      instanceId,
-      rect: {
-        top: 0,
-        left: 0,
-        width: 0,
-        height: 0,
-      },
-    }
-    // @ts-expect-error hookable
-    apiHooks.callHookWith((callbacks) => {
-      callbacks.map(cb => cb(_payload))
-    }, DevToolsEvents.GET_COMPONENT_BOUNDING_RECT)
-    return stringify(_payload.rect) as string
-  }
-
-  // #endregion highlighter
-
-  toggleApp(id: string) {
-    return toggleActiveAppRecord(id)
-  }
-
-  addCustomTab(tab: CustomTab) {
-    addCustomTab(tab)
-  }
-
-  addCustomCommand(action: CustomCommand) {
-    addCustomCommand(action)
-  }
-
-  removeCustomCommand(actionId: CustomCommand['id']) {
-    removeCustomCommand(actionId)
-  }
-
-  openInEditor(payload: OpenInEditorOptions) {
-    openInEditor(payload)
-  }
-
-  getVueInspector() {
-    return getComponentInspector()
-  }
-}
diff --git a/packages/devtools-kit/src/api/hook.ts b/packages/devtools-kit/src/api/hook.ts
deleted file mode 100644
index cf130cd6..00000000
--- a/packages/devtools-kit/src/api/hook.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { HookKeys, Hookable } from 'hookable'
-import { target } from '@vue/devtools-shared'
-import { createHooks } from 'hookable'
-import type { TimelineEvent } from '../core/timeline'
-import type { ComponentHighLighterOptions, ScrollToComponentOptions } from '../core/component-highlighter'
-import type { ComponentBoundingRectApiPayload, ComponentTreeNode, InspectorStateApiPayload, InspectorStateEditorPayload, InspectorTreeApiPayload } from '../core/component/types'
-import type { DevToolsState, RouterInfo, VueAppInstance } from '../types'
-import type { CustomTab } from '../core/custom-tab/types'
-import type { CustomCommand } from '../core/custom-command'
-
-export enum DevToolsEvents {
-  DEVTOOLS_STATE_UPDATED = 'devtools:state-updated',
-  DEVTOOLS_CONNECTED_UPDATED = 'devtools:connected-updated',
-  ROUTER_INFO_UPDATED = 'router-info:updated',
-  COMPONENT_STATE_INSPECT = 'component-state:inspect',
-  COMPONENT_UPDATED = 'component:updated',
-  TOGGLE_COMPONENT_HIGHLIGHTER = 'component-highlighter:toggle',
-  GET_COMPONENT_BOUNDING_RECT = 'component-bounding-rect:get',
-  SCROLL_TO_COMPONENT = 'scroll-to-component',
-  GET_COMPONENT_RENDER_CODE = 'component-render-code:get',
-  GET_INSPECTOR_TREE = 'inspector-tree:get',
-  SEND_INSPECTOR_TREE = 'inspector-tree:send',
-  GET_INSPECTOR_STATE = 'inspector-state:get',
-  EDIT_INSPECTOR_STATE = 'inspector-state:edit',
-  SEND_INSPECTOR_STATE = 'inspector-state:send',
-  VISIT_COMPONENT_TREE = 'component-tree:visit',
-  ADD_TIMELINE_EVENT = 'timeline:add-event',
-  CUSTOM_TABS_UPDATED = 'custom-tabs:updated',
-  CUSTOM_COMMANDS_UPDATED = 'custom-commands:updated',
-}
-
-export interface DevToolsEvent {
-  // timeline
-  [DevToolsEvents.ADD_TIMELINE_EVENT]: (payload: TimelineEvent) => void
-  // router
-  [DevToolsEvents.ROUTER_INFO_UPDATED]: (routerInfo: RouterInfo) => void
-  // highlighter
-  [DevToolsEvents.TOGGLE_COMPONENT_HIGHLIGHTER]: (payload: ComponentHighLighterOptions) => void
-  [DevToolsEvents.SCROLL_TO_COMPONENT]: (payload: ScrollToComponentOptions) => void
-  [DevToolsEvents.GET_COMPONENT_RENDER_CODE]: (id: string) => void
-  [DevToolsEvents.GET_COMPONENT_BOUNDING_RECT]: (payload: ComponentBoundingRectApiPayload) => void
-  // state
-  [DevToolsEvents.DEVTOOLS_STATE_UPDATED]: (state: DevToolsState, oldState: DevToolsState) => void
-  [DevToolsEvents.DEVTOOLS_CONNECTED_UPDATED]: (state: DevToolsState, oldState: DevToolsState) => void
-  // inspector
-  [DevToolsEvents.COMPONENT_STATE_INSPECT]: (payload: {
-    componentInstance: VueAppInstance | undefined
-    app: VueAppInstance | undefined
-    instanceData: InspectorStateApiPayload['state']
-  }) => void
-  [DevToolsEvents.GET_INSPECTOR_TREE]: (payload: InspectorTreeApiPayload) => Promise<void>
-  [DevToolsEvents.SEND_INSPECTOR_TREE]: (payload: { inspectorId: string, data: InspectorTreeApiPayload['rootNodes'] }) => void
-  [DevToolsEvents.GET_INSPECTOR_STATE]: (payload: InspectorStateApiPayload, ctx: { currentTab: string }) => Promise<void>
-  [DevToolsEvents.EDIT_INSPECTOR_STATE]: (payload: InspectorStateEditorPayload) => Promise<void>
-  [DevToolsEvents.SEND_INSPECTOR_STATE]: (payload: string) => void
-  [DevToolsEvents.VISIT_COMPONENT_TREE]: (payload: {
-    componentInstance: VueAppInstance | undefined
-    app: VueAppInstance | undefined
-    treeNode: ComponentTreeNode
-    filter: string
-  }) => void
-  // custom tabs
-  [DevToolsEvents.CUSTOM_TABS_UPDATED]: (payload: CustomTab[]) => void
-  // custom command
-  [DevToolsEvents.CUSTOM_COMMANDS_UPDATED]: (payload: CustomCommand[]) => void
-  [DevToolsEvents.COMPONENT_UPDATED]: () => void
-}
-
-export type DevToolsEventParams<T extends keyof DevToolsEvent> = Parameters<DevToolsEvent[T]>
-
-export const apiHooks: Hookable<DevToolsEvent, HookKeys<DevToolsEvent>> = target.__VUE_DEVTOOLS_API_HOOK ??= createHooks<DevToolsEvent>()
-
-export const instanceHooks: (() => void)[] = []
-
-export const registerInstanceHook = (...args: Parameters<(typeof apiHooks)['hook']>) => {
-  const unregister = apiHooks.hook(...args)
-  instanceHooks.push(unregister)
-}
diff --git a/packages/devtools-kit/src/api/index.ts b/packages/devtools-kit/src/api/index.ts
index be4f099c..a68a497f 100644
--- a/packages/devtools-kit/src/api/index.ts
+++ b/packages/devtools-kit/src/api/index.ts
@@ -1,3 +1,3 @@
-export * from './api'
-export * from './plugin'
-export * from './hook'
+import { DevToolsV6PluginAPI } from './v6'
+
+export const DevToolsPluginAPI = DevToolsV6PluginAPI
diff --git a/packages/devtools-kit/src/api/off.ts b/packages/devtools-kit/src/api/off.ts
deleted file mode 100644
index 80ff4c0b..00000000
--- a/packages/devtools-kit/src/api/off.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { instanceHooks } from './hook'
-
-export function remove() {
-  instanceHooks.forEach(unregister => unregister())
-}
diff --git a/packages/devtools-kit/src/api/on.ts b/packages/devtools-kit/src/api/on.ts
deleted file mode 100644
index 39990dd8..00000000
--- a/packages/devtools-kit/src/api/on.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { DevToolsEvents, apiHooks, registerInstanceHook } from './hook'
-import type { DevToolsEvent } from './hook'
-
-export const on = {
-  // #region compatible with old devtools
-  addTimelineEvent(fn: DevToolsEvent[DevToolsEvents.ADD_TIMELINE_EVENT]) {
-    registerInstanceHook(DevToolsEvents.ADD_TIMELINE_EVENT, fn)
-  },
-  inspectComponent(fn: DevToolsEvent[DevToolsEvents.COMPONENT_STATE_INSPECT]) {
-    registerInstanceHook(DevToolsEvents.COMPONENT_STATE_INSPECT, fn)
-  },
-  visitComponentTree(fn: DevToolsEvent[DevToolsEvents.VISIT_COMPONENT_TREE]) {
-    registerInstanceHook(DevToolsEvents.VISIT_COMPONENT_TREE, fn)
-  },
-  setPluginSettings() {},
-  getInspectorTree(fn: DevToolsEvent[DevToolsEvents.GET_INSPECTOR_TREE]) {
-    registerInstanceHook(DevToolsEvents.GET_INSPECTOR_TREE, fn)
-  },
-  getInspectorState(fn: DevToolsEvent[DevToolsEvents.GET_INSPECTOR_STATE]) {
-    registerInstanceHook(DevToolsEvents.GET_INSPECTOR_STATE, fn)
-  },
-  sendInspectorTree(fn: DevToolsEvent[DevToolsEvents.SEND_INSPECTOR_TREE]) {
-    registerInstanceHook(DevToolsEvents.SEND_INSPECTOR_TREE, fn)
-  },
-  sendInspectorState(fn: DevToolsEvent[DevToolsEvents.SEND_INSPECTOR_STATE]) {
-    registerInstanceHook(DevToolsEvents.SEND_INSPECTOR_STATE, fn)
-  },
-  editInspectorState(fn: DevToolsEvent[DevToolsEvents.EDIT_INSPECTOR_STATE]) {
-    registerInstanceHook(DevToolsEvents.EDIT_INSPECTOR_STATE, fn)
-  },
-  editComponentState() {},
-  componentUpdated(fn: DevToolsEvent[DevToolsEvents.COMPONENT_UPDATED]) {
-    registerInstanceHook(DevToolsEvents.COMPONENT_UPDATED, fn)
-  },
-  // #endregion compatible with old devtools
-
-  // router
-  routerInfoUpdated(fn: DevToolsEvent[DevToolsEvents.ROUTER_INFO_UPDATED]) {
-    registerInstanceHook(DevToolsEvents.ROUTER_INFO_UPDATED, fn)
-  },
-
-  // component highlighter
-  getComponentBoundingRect(fn: DevToolsEvent[DevToolsEvents.GET_COMPONENT_BOUNDING_RECT]) {
-    registerInstanceHook(DevToolsEvents.GET_COMPONENT_BOUNDING_RECT, fn)
-  },
-
-  // custom tabs
-  customTabsUpdated(fn: DevToolsEvent[DevToolsEvents.CUSTOM_TABS_UPDATED]) {
-    registerInstanceHook(DevToolsEvents.CUSTOM_TABS_UPDATED, fn)
-  },
-
-  // custom commands
-  customCommandsUpdated(fn: DevToolsEvent[DevToolsEvents.CUSTOM_COMMANDS_UPDATED]) {
-    registerInstanceHook(DevToolsEvents.CUSTOM_COMMANDS_UPDATED, fn)
-  },
-
-  devtoolsStateUpdated(fn: DevToolsEvent[DevToolsEvents.DEVTOOLS_STATE_UPDATED]) {
-    apiHooks.hook(DevToolsEvents.DEVTOOLS_STATE_UPDATED, fn)
-  },
-} as const
diff --git a/packages/devtools-kit/src/api/plugin.ts b/packages/devtools-kit/src/api/plugin.ts
deleted file mode 100644
index 7e51d985..00000000
--- a/packages/devtools-kit/src/api/plugin.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { App } from 'vue'
-import { PluginDescriptor, PluginSetupFunction } from '../types'
-import { devtoolsAppRecords, devtoolsState } from '../state'
-import { hook } from '../hook'
-import { getRouterDevToolsId } from '../core/router'
-import { getInspector } from '../core/inspector'
-import type { DevToolsPluginApi } from './api'
-
-export function collectDevToolsPlugin(pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) {
-  devtoolsState.pluginBuffer.push([pluginDescriptor, setupFn])
-}
-
-export function setupDevToolsPlugin(pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) {
-  return hook.setupDevToolsPlugin(pluginDescriptor, setupFn)
-}
-
-export function setupExternalPlugin(plugin: [PluginDescriptor, PluginSetupFunction], app: App<any>, api: DevToolsPluginApi) {
-  const [pluginDescriptor, setupFn] = plugin
-  if (pluginDescriptor.app !== app)
-    return
-
-  // edge case for router plugin
-  if (pluginDescriptor.packageName === 'vue-router') {
-    const id = getRouterDevToolsId(`${pluginDescriptor.id}`)
-    if (pluginDescriptor.app === app) {
-      devtoolsAppRecords.value = devtoolsAppRecords.value.map(item => ({
-        ...item,
-        routerId: id,
-      }))
-    }
-  }
-
-  // @TODO: re-design the plugin api
-  const extendedApi = new Proxy(api, {
-    get(target, prop, receiver) {
-      if (prop === 'getSettings') {
-        return function () {
-          const _settings = {}
-          Object.keys(pluginDescriptor.settings!).forEach((key) => {
-            _settings[key] = pluginDescriptor.settings![key].defaultValue
-          })
-
-          return _settings
-        }
-      }
-      return Reflect.get(target, prop, receiver)
-    },
-    set(target, prop, value, receiver) {
-      return Reflect.set(target, prop, value, receiver)
-    },
-  })
-  setupFn(extendedApi)
-}
-
-export function updatePluginDetectives() {
-  devtoolsAppRecords.value = devtoolsAppRecords.value.map((record) => {
-    const globalProperties = record.app?.config?.globalProperties
-    if (!globalProperties)
-      return record
-
-    return {
-      ...record,
-      moduleDetectives: {
-        vueQuery: !!getInspector('vue-query'),
-        veeValidate: !!getInspector('vee-validate-inspector'),
-        vueRouter: !!globalProperties.$router,
-        pinia: !!globalProperties.$pinia,
-        vueI18n: !!globalProperties.$i18n,
-        vuex: !!globalProperties.$store,
-      },
-    }
-  })
-}
-
-export function registerPlugin(app: App<any>, api: DevToolsPluginApi) {
-  devtoolsState.pluginBuffer.forEach(plugin => setupExternalPlugin(plugin, app, api))
-  updatePluginDetectives()
-}
diff --git a/packages/devtools-kit/src/api/v6/index.ts b/packages/devtools-kit/src/api/v6/index.ts
new file mode 100644
index 00000000..0797689a
--- /dev/null
+++ b/packages/devtools-kit/src/api/v6/index.ts
@@ -0,0 +1,142 @@
+import type { DevtoolsContext } from '../../ctx'
+import type { App, ComponentBounds, ComponentInstance, CustomInspectorOptions, DevToolsPlugin, TimelineEventOptions, TimelineLayerOptions } from '../../types'
+import { DevToolsContextHookKeys, DevToolsV6PluginAPIHookKeys, DevToolsV6PluginAPIHooks } from '../../ctx/hook'
+import { devtoolsPluginBuffer } from '../../ctx/plugin'
+import { devtoolsHooks } from '../../hook'
+import { DevToolsHooks } from '../../types'
+
+export class DevToolsV6PluginAPI {
+  private plugin: DevToolsPlugin
+  private hooks: DevtoolsContext['hooks']
+  constructor({ plugin, ctx }: { plugin: DevToolsPlugin, ctx: DevtoolsContext }) {
+    this.hooks = ctx.hooks
+    this.plugin = plugin
+  }
+
+  public get on() {
+    return {
+      // component inspector
+      visitComponentTree: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.VISIT_COMPONENT_TREE]) => {
+        this.hooks.hook(DevToolsV6PluginAPIHookKeys.VISIT_COMPONENT_TREE, handler)
+      },
+      inspectComponent: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.INSPECT_COMPONENT]) => {
+        this.hooks.hook(DevToolsV6PluginAPIHookKeys.INSPECT_COMPONENT, handler)
+      },
+      editComponentState: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE]) => {
+        this.hooks.hook(DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE, handler)
+      },
+
+      // custom inspector
+      getInspectorTree: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE]) => {
+        this.hooks.hook(DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE, handler)
+      },
+      getInspectorState: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE]) => {
+        this.hooks.hook(DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE, handler)
+      },
+      editInspectorState: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]) => {
+        this.hooks.hook(DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE, handler)
+      },
+
+      // timeline
+      inspectTimelineEvent: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.INSPECT_TIMELINE_EVENT]) => {
+        this.hooks.hook(DevToolsV6PluginAPIHookKeys.INSPECT_TIMELINE_EVENT, handler)
+      },
+      timelineCleared: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.TIMELINE_CLEARED]) => {
+        this.hooks.hook(DevToolsV6PluginAPIHookKeys.TIMELINE_CLEARED, handler)
+      },
+
+      // settings
+      setPluginSettings: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.SET_PLUGIN_SETTINGS]) => {
+        this.hooks.hook(DevToolsV6PluginAPIHookKeys.SET_PLUGIN_SETTINGS, handler)
+      },
+    }
+  }
+
+  // component inspector
+  notifyComponentUpdate(instance?: ComponentInstance) {
+    if (instance) {
+      const args = [
+        instance.appContext.app,
+        instance.uid,
+        instance.parent?.uid,
+        instance,
+      ] as const
+      devtoolsHooks.callHook(DevToolsHooks.COMPONENT_UPDATED, ...args)
+    }
+    else {
+      // @ts-expect-error skip type check
+      devtoolsHooks.callHook(DevToolsHooks.COMPONENT_UPDATED)
+    }
+  }
+
+  // custom inspector
+  addInspector(options: CustomInspectorOptions) {
+    this.hooks.callHook(DevToolsContextHookKeys.ADD_INSPECTOR, { inspector: options, plugin: this.plugin })
+  }
+
+  sendInspectorTree(inspectorId: string) {
+    this.hooks.callHook(DevToolsContextHookKeys.SEND_INSPECTOR_TREE, { inspectorId, plugin: this.plugin })
+  }
+
+  sendInspectorState(inspectorId: string) {
+    this.hooks.callHook(DevToolsContextHookKeys.SEND_INSPECTOR_STATE, { inspectorId, plugin: this.plugin })
+  }
+
+  selectInspectorNode(inspectorId: string, nodeId: string) {
+    this.hooks.callHook(DevToolsContextHookKeys.CUSTOM_INSPECTOR_SELECT_NODE, { inspectorId, nodeId, plugin: this.plugin })
+  }
+
+  // timeline
+  now(): number {
+    return Date.now()
+  }
+
+  addTimelineLayer(options: TimelineLayerOptions) {
+    this.hooks.callHook(DevToolsContextHookKeys.TIMELINE_LAYER_ADDED, { options, plugin: this.plugin })
+  }
+
+  addTimelineEvent(options: TimelineEventOptions) {
+    this.hooks.callHook(DevToolsContextHookKeys.TIMELINE_EVENT_ADDED, { options, plugin: this.plugin })
+  }
+
+  // settings
+  getSettings(pluginId?: string) {
+    function _getSettings(settings) {
+      const _settings = {}
+      Object.keys(settings!).forEach((key) => {
+        _settings[key] = settings![key].defaultValue
+      })
+
+      return _settings
+    }
+    if (pluginId) {
+      const item = devtoolsPluginBuffer.find(item => item[0].id === pluginId)?.[0] ?? null
+      return _getSettings(item?.settings) ?? _getSettings(this.plugin.descriptor.settings)
+    }
+    else {
+      return _getSettings(this.plugin.descriptor.settings)
+    }
+  }
+
+  // utilities
+  getComponentInstances(app: App): Promise<ComponentInstance[]> {
+    return this.hooks.callHook(DevToolsContextHookKeys.GET_COMPONENT_INSTANCES, { app })
+  }
+
+  getComponentBounds(instance: ComponentInstance): Promise<ComponentBounds> {
+    return this.hooks.callHook(DevToolsContextHookKeys.GET_COMPONENT_BOUNDS, { instance })
+  }
+
+  getComponentName(instance: ComponentInstance): Promise<string> {
+    return this.hooks.callHook(DevToolsContextHookKeys.GET_COMPONENT_NAME, { instance })
+  }
+
+  highlightElement(instance: ComponentInstance) {
+    const uid = instance.__VUE_DEVTOOLS_NEXT_UID__
+    return this.hooks.callHook(DevToolsContextHookKeys.COMPONENT_HIGHLIGHT, { uid })
+  }
+
+  unhighlightElement() {
+    return this.hooks.callHook(DevToolsContextHookKeys.COMPONENT_UNHIGHLIGHT)
+  }
+}
diff --git a/packages/devtools-kit/src/api/v7/index.ts b/packages/devtools-kit/src/api/v7/index.ts
new file mode 100644
index 00000000..77b4dfae
--- /dev/null
+++ b/packages/devtools-kit/src/api/v7/index.ts
@@ -0,0 +1,6 @@
+// @TODO
+export class DevToolsPluginAPI {
+  constructor() {
+
+  }
+}
diff --git a/packages/devtools-kit/src/core/app-record/index.ts b/packages/devtools-kit/src/core/app/index.ts
similarity index 61%
rename from packages/devtools-kit/src/core/app-record/index.ts
rename to packages/devtools-kit/src/core/app/index.ts
index d95be304..3f567de5 100644
--- a/packages/devtools-kit/src/core/app-record/index.ts
+++ b/packages/devtools-kit/src/core/app/index.ts
@@ -1,9 +1,11 @@
 import slug from 'speakingurl'
+import { target } from '@vue/devtools-shared'
 import { AppRecord, VueAppInstance } from '../../types'
-import { DevToolsPluginApi } from '../../api'
-import { registerPlugin } from '../../api/plugin'
-import { registerComponentDevToolsPlugin } from '../../plugins'
-import { appRecordInfo, devtoolsAppRecords, devtoolsContext, devtoolsState } from '../../state'
+
+const appRecordInfo = target.__VUE_DEVTOOLS_NEXT_APP_RECORD_INFO__ ??= {
+  id: 0,
+  appIds: new Set<string>(),
+}
 
 function getAppRecordName(app: VueAppInstance['appContext']['app'], fallbackName: string) {
   return app?._component?.name || `App ${fallbackName}`
@@ -17,6 +19,14 @@ function getAppRootInstance(app: VueAppInstance['appContext']['app']) {
     return app._container?._vnode?.component
 }
 
+export function removeAppRecordId(app: VueAppInstance['appContext']['app']) {
+  const id = app.__VUE_DEVTOOLS_NEXT_APP_RECORD_ID__
+  if (id != null) {
+    appRecordInfo.appIds.delete(id)
+    appRecordInfo.id--
+  }
+}
+
 function getAppRecordId(app: VueAppInstance['appContext']['app'], defaultId?: string): string {
   if (app.__VUE_DEVTOOLS_NEXT_APP_RECORD_ID__ != null)
     return app.__VUE_DEVTOOLS_NEXT_APP_RECORD_ID__
@@ -61,23 +71,3 @@ export function createAppRecord(app: VueAppInstance['appContext']['app']): AppRe
     return {} as AppRecord
   }
 }
-
-export async function setActiveAppRecord(appRecord: AppRecord) {
-  await registerComponentDevToolsPlugin(appRecord?.app as unknown as VueAppInstance)
-  devtoolsAppRecords.active = appRecord
-  devtoolsAppRecords.activeId = `${appRecord.id}`
-  registerPlugin(appRecord.app!, appRecord.api!)
-}
-
-export async function toggleActiveAppRecord(id: string) {
-  devtoolsContext.componentPluginHookBuffer.forEach(cleanup => cleanup())
-  devtoolsContext.api.clear()
-  devtoolsContext.clear()
-  const appRecord = devtoolsAppRecords.value.find(record => record.id === id)
-  if (appRecord) {
-    devtoolsState.pluginBuffer = devtoolsState.pluginBuffer.filter(([plugin]) => plugin.id !== 'components')
-    const api = new DevToolsPluginApi()
-    appRecord.api = api
-    setActiveAppRecord(appRecord)
-  }
-}
diff --git a/packages/devtools-kit/src/core/component-highlighter/index.ts b/packages/devtools-kit/src/core/component-highlighter/index.ts
index 7d348414..e8040eb7 100644
--- a/packages/devtools-kit/src/core/component-highlighter/index.ts
+++ b/packages/devtools-kit/src/core/component-highlighter/index.ts
@@ -1,6 +1,6 @@
 import type { VueAppInstance } from '../../types'
 import { getComponentId, getComponentInstance, getInstanceName } from '../component/utils'
-import { devtoolsContext } from '../../state'
+import { activeAppRecord } from '../../ctx'
 import { getRootElementsFromComponentInstance } from '../component/tree/el'
 import { getComponentBoundingRect } from '../component/state/bounding-rect'
 import type { ComponentHighLighterOptions, ScrollToComponentOptions } from './types'
@@ -129,7 +129,7 @@ function update(options: ComponentHighLighterOptions) {
 
 export function toggleComponentHighLighter(options: ComponentHighLighterOptions) {
   if (options.visible) {
-    const instance = getComponentInstance(devtoolsContext.appRecord!, options.id)
+    const instance = getComponentInstance(activeAppRecord.value!, options.id)
     if (instance && (options.bounds.width || options.bounds.height)) {
       const name = getInstanceName(instance)
       const el = getContainerElement()
@@ -178,7 +178,7 @@ function selectComponentFn(e: MouseEvent, cb) {
   e.preventDefault()
   e.stopPropagation()
   if (inspectInstance) {
-    const app = devtoolsContext.appRecord?.app as unknown as VueAppInstance
+    const app = activeAppRecord.value?.app as unknown as VueAppInstance
     getComponentId({
       app,
       uid: app.uid,
@@ -219,7 +219,7 @@ export function inspectComponentHighLighter() {
 }
 
 export function scrollToComponent(options: ScrollToComponentOptions) {
-  const instance = getComponentInstance(devtoolsContext.appRecord!, options.id)
+  const instance = getComponentInstance(activeAppRecord.value!, options.id)
   if (instance) {
     const [el] = getRootElementsFromComponentInstance(instance)
     // @ts-expect-error type mismatch
diff --git a/packages/devtools-kit/src/core/component/state/editor.ts b/packages/devtools-kit/src/core/component/state/editor.ts
index 874f2b97..d30a3155 100644
--- a/packages/devtools-kit/src/core/component/state/editor.ts
+++ b/packages/devtools-kit/src/core/component/state/editor.ts
@@ -1,7 +1,8 @@
 import type { MaybeRef, Ref } from 'vue'
 import { isReactive, isRef, toRaw } from 'vue'
 import { getComponentInstance } from '../utils'
-import { devtoolsContext } from '../../../state'
+import { activeAppRecord } from '../../../ctx'
+import { EditStatePayload } from '../../../types'
 
 import type { InspectorStateEditorPayload, PropPath } from '../types'
 
@@ -72,7 +73,7 @@ export class StateEditor {
     return object != null && Object.prototype.hasOwnProperty.call(object, sections[0])
   }
 
-  createDefaultSetCallback(state: InspectorStateEditorPayload['state']) {
+  createDefaultSetCallback(state: EditStatePayload) {
     return (object: Recordable, field: string | number, value: unknown) => {
       if (state.remove || state.newKey) {
         if (Array.isArray(object))
@@ -151,7 +152,7 @@ export async function editComponentState(payload: InspectorStateEditorPayload, s
   const { path, nodeId, state, type } = payload
   // assert data types, currently no...
   // if (!['data', 'props', 'computed', 'setup'].includes(dataType))
-  const instance = getComponentInstance(devtoolsContext.appRecord!, nodeId)
+  const instance = getComponentInstance(activeAppRecord.value, nodeId)
   if (!instance)
     return
 
@@ -172,6 +173,7 @@ export async function editComponentState(payload: InspectorStateEditorPayload, s
     if (state.type === 'object' && type === 'reactive') {
       // prevent loss of reactivity
     }
+    // @ts-expect-error skip type check
     stateEditor.set(target, targetPath, state.value, stateEditor.createDefaultSetCallback(state))
   }
 }
diff --git a/packages/devtools-kit/src/core/component/state/index.ts b/packages/devtools-kit/src/core/component/state/index.ts
index 49ced730..73d448b4 100644
--- a/packages/devtools-kit/src/core/component/state/index.ts
+++ b/packages/devtools-kit/src/core/component/state/index.ts
@@ -1,9 +1,9 @@
-import { devtoolsContext } from '../../../state'
+import { activeAppRecord } from '../../../ctx'
 import { getComponentInstance, getInstanceName, getUniqueComponentId } from '../utils'
 import { processInstanceState } from './process'
 
 export function getInstanceState(params: { instanceId: string }) {
-  const instance = getComponentInstance(devtoolsContext.appRecord!, params.instanceId)
+  const instance = getComponentInstance(activeAppRecord.value, params.instanceId)
   const id = getUniqueComponentId(instance!)
   const name = getInstanceName(instance!)
   const file = instance?.type?.__file
diff --git a/packages/devtools-kit/src/core/component/state/process.ts b/packages/devtools-kit/src/core/component/state/process.ts
index 8e6205a7..4e4804ea 100644
--- a/packages/devtools-kit/src/core/component/state/process.ts
+++ b/packages/devtools-kit/src/core/component/state/process.ts
@@ -40,7 +40,9 @@ function mergeOptions(
 function resolveMergedOptions(
   instance: VueAppInstance,
 ) {
-  const raw = instance.type
+  const raw = instance?.type
+  if (!raw)
+    return {}
   const { mixins, extends: extendsOptions } = raw
   const globalMixins = instance.appContext.mixins
   if (!globalMixins.length && !mixins && !extendsOptions)
diff --git a/packages/devtools-kit/src/core/component/state/reviver.ts b/packages/devtools-kit/src/core/component/state/reviver.ts
index fdd7de89..7cc44f99 100644
--- a/packages/devtools-kit/src/core/component/state/reviver.ts
+++ b/packages/devtools-kit/src/core/component/state/reviver.ts
@@ -1,5 +1,5 @@
 import { target } from '@vue/devtools-shared'
-import { devtoolsContext } from '../../../state'
+import { activeAppRecord } from '../../../ctx'
 import { INFINITY, NAN, NEGATIVE_INFINITY, UNDEFINED, specialTypeRE, symbolRE } from './constants'
 
 export function reviveSet(val) {
@@ -38,7 +38,7 @@ export function revive(val) {
   else if (val && val._custom) {
     const { _custom: custom } = val
     if (custom.type === 'component')
-      return devtoolsContext.appRecord?.instanceMap.get(custom.id)
+      return activeAppRecord.value.instanceMap.get(custom.id)
     else if (custom.type === 'map')
       return reviveMap(val)
     else if (custom.type === 'set')
diff --git a/packages/devtools-kit/src/core/component/tree/index.ts b/packages/devtools-kit/src/core/component/tree/index.ts
index b31b5f90..d21b5b59 100644
--- a/packages/devtools-kit/src/core/component/tree/index.ts
+++ b/packages/devtools-kit/src/core/component/tree/index.ts
@@ -1,10 +1,10 @@
 import type { AppRecord } from '../../../types'
-import { devtoolsContext } from '../../../state'
+import { activeAppRecord } from '../../../ctx'
 import { getComponentInstance } from '../utils'
 import { ComponentWalker } from './walker'
 
 export async function getComponentTree(options: { appRecord?: AppRecord, instanceId?: string, filterText?: string, maxDepth?: number, recursively?: boolean }) {
-  const { appRecord = devtoolsContext.appRecord, maxDepth = 100, instanceId = undefined, filterText = '', recursively = false } = options
+  const { appRecord = activeAppRecord.value, maxDepth = 100, instanceId = undefined, filterText = '', recursively = false } = options
   const instance = getComponentInstance(appRecord!, instanceId)
   if (instance) {
     const walker = new ComponentWalker({
diff --git a/packages/devtools-kit/src/core/component/tree/walker.ts b/packages/devtools-kit/src/core/component/tree/walker.ts
index 096551a9..6516c6b2 100644
--- a/packages/devtools-kit/src/core/component/tree/walker.ts
+++ b/packages/devtools-kit/src/core/component/tree/walker.ts
@@ -1,8 +1,8 @@
 import type { SuspenseBoundary, VNode } from 'vue'
-import type { VueAppInstance } from '../../../types'
-import type { ComponentTreeNode } from '../types'
+import type { ComponentTreeNode, VueAppInstance } from '../../../types'
 import { getAppRecord, getInstanceName, getRenderKey, getUniqueComponentId, isBeingDestroyed, isFragment } from '../utils'
-import { devtoolsAppRecords, devtoolsContext } from '../../../state'
+// import { devtoolsAppRecords, devtoolsContext } from '../../../state'
+import { activeAppRecord } from '../../../ctx'
 import { getRootElementsFromComponentInstance } from './el'
 import type { ComponentFilter } from './filter'
 import { createComponentFilter } from './filter'
@@ -156,12 +156,14 @@ export class ComponentWalker {
       // update instanceMap
       this.mark(instance, true)
     }
-    devtoolsContext.api.visitComponentTree({
-      treeNode,
-      componentInstance: instance,
-      app: instance.appContext.app,
-      filter: this.componentFilter.filter,
-    })
+
+    // @TODO: impl
+    // devtoolsContext.api.visitComponentTree({
+    //   treeNode,
+    //   componentInstance: instance,
+    //   app: instance.appContext.app,
+    //   filter: this.componentFilter.filter,
+    // })
     return treeNode
   }
 
@@ -245,7 +247,7 @@ export class ComponentWalker {
       instanceMap.set(instance.__VUE_DEVTOOLS_NEXT_UID__, instance)
 
       // force sync appRecord instanceMap
-      devtoolsAppRecords.active.instanceMap = instanceMap
+      activeAppRecord.value.instanceMap = instanceMap
     }
   }
 
diff --git a/packages/devtools-kit/src/core/component/types/tree.ts b/packages/devtools-kit/src/core/component/types/tree.ts
index 0ad4da2e..ccbae3a7 100644
--- a/packages/devtools-kit/src/core/component/types/tree.ts
+++ b/packages/devtools-kit/src/core/component/types/tree.ts
@@ -1,25 +1,4 @@
-import type { VueAppInstance } from '../../../types'
-
-export interface InspectorNodeTag {
-  label: string
-  textColor: number
-  backgroundColor: number
-  tooltip?: string
-}
-
-export interface ComponentTreeNode {
-  uid: number | string
-  id: string
-  name: string
-  renderKey: string | number
-  inactive: boolean
-  isFragment: boolean
-  children: ComponentTreeNode[]
-  domOrder?: number[]
-  tags: InspectorNodeTag[]
-  autoOpen: boolean
-  file: string
-}
+import type { ComponentTreeNode, InspectorNodeTag, VueAppInstance } from '../../../types'
 
 export interface InspectorTreeApiPayload {
   app?: VueAppInstance
diff --git a/packages/devtools-kit/src/core/component/utils/index.ts b/packages/devtools-kit/src/core/component/utils/index.ts
index d7344116..084c4cd1 100644
--- a/packages/devtools-kit/src/core/component/utils/index.ts
+++ b/packages/devtools-kit/src/core/component/utils/index.ts
@@ -73,22 +73,22 @@ export function isBeingDestroyed(instance: VueAppInstance) {
  * @return {string}
  */
 export function getInstanceName(instance: VueAppInstance) {
-  const name = getComponentTypeName(instance.type || {})
+  const name = getComponentTypeName(instance?.type || {})
   if (name)
     return name
-  if (instance.root === instance)
+  if (instance?.root === instance)
     return 'Root'
   for (const key in instance.parent?.type?.components) {
-    if (instance.parent.type.components[key] === instance.type)
+    if (instance.parent.type.components[key] === instance?.type)
       return saveComponentGussedName(instance, key)
   }
 
   for (const key in instance.appContext?.components) {
-    if (instance.appContext.components[key] === instance.type)
+    if (instance.appContext.components[key] === instance?.type)
       return saveComponentGussedName(instance, key)
   }
 
-  const fileName = getComponentFileName(instance.type || {})
+  const fileName = getComponentFileName(instance?.type || {})
   if (fileName)
     return fileName
 
diff --git a/packages/devtools-kit/src/core/custom-tab/index.ts b/packages/devtools-kit/src/core/custom-tab/index.ts
deleted file mode 100644
index 732c45e7..00000000
--- a/packages/devtools-kit/src/core/custom-tab/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { devtoolsState } from '../../state'
-import type { CustomTab } from './types'
-
-export type { CustomTab } from './types'
-
-export function addCustomTab(tab: CustomTab) {
-  if (devtoolsState.tabs.some(t => t.name === tab.name))
-    return
-
-  devtoolsState.tabs.push(tab)
-}
diff --git a/packages/devtools-kit/src/core/high-perf-mode/index.ts b/packages/devtools-kit/src/core/high-perf-mode/index.ts
index 335a0091..16357f10 100644
--- a/packages/devtools-kit/src/core/high-perf-mode/index.ts
+++ b/packages/devtools-kit/src/core/high-perf-mode/index.ts
@@ -1,4 +1,4 @@
-import { devtoolsState } from '../../state'
+import { devtoolsState } from '../../ctx/state'
 
 export function toggleHighPerfMode(state?: boolean) {
   devtoolsState.highPerfModeEnabled = state ?? !devtoolsState.highPerfModeEnabled
diff --git a/packages/devtools-kit/src/core/index.ts b/packages/devtools-kit/src/core/index.ts
index d60884a0..3913e3bb 100644
--- a/packages/devtools-kit/src/core/index.ts
+++ b/packages/devtools-kit/src/core/index.ts
@@ -1,13 +1,30 @@
 import { isNuxtApp, target } from '@vue/devtools-shared'
-import { createDevToolsHook, devtoolsHooks, hook, subscribeDevToolsHook } from '../hook'
-import { DevToolsHooks } from '../types'
-import { devtoolsAppRecords, devtoolsState, getDevToolsEnv } from '../state'
-import { DevToolsEvents, DevToolsPluginApi, apiHooks, collectDevToolsPlugin, setupExternalPlugin } from '../api'
+import { createDevToolsHook, hook, subscribeDevToolsHook } from '../hook'
+import {
+  DevToolsMessagingHookKeys,
+  activeAppRecord,
+  addDevToolsAppRecord,
+  addDevToolsPluginToBuffer,
+  devtoolsAppRecords,
+  devtoolsContext,
+  devtoolsPluginBuffer,
+  devtoolsState,
+  getDevToolsEnv,
+  removeDevToolsAppRecord,
+  setActiveAppRecord,
+  setActiveAppRecordId,
+  updateDevToolsState,
+} from '../ctx'
 import { onLegacyDevToolsPluginApiAvailable } from '../compat'
-import { createAppRecord, setActiveAppRecord } from './app-record'
+import { DevToolsHooks } from '../types'
+import { createAppRecord, removeAppRecordId } from './app'
+import { callDevToolsPluginSetupFn, createComponentsDevToolsPlugin, registerDevToolsPlugin, setupDevToolsPlugin } from './plugin'
+import { normalizeRouterInfo } from './router'
 
 export function initDevTools() {
-  devtoolsState.vitePluginDetected = getDevToolsEnv().vitePluginDetected
+  updateDevToolsState({
+    vitePluginDetected: getDevToolsEnv().vitePluginDetected,
+  })
 
   const isDevToolsNext = target.__VUE_DEVTOOLS_GLOBAL_HOOK__?.id === 'vue-devtools-next'
 
@@ -26,17 +43,18 @@ export function initDevTools() {
     }
   }
 
-  // setup old devtools plugin (compatible with pinia, router, etc)
   hook.on.setupDevtoolsPlugin((pluginDescriptor, setupFn) => {
-    collectDevToolsPlugin(pluginDescriptor, setupFn)
-    const { app, api } = devtoolsAppRecords.active || {}
-    if (!app || !api)
+    addDevToolsPluginToBuffer(pluginDescriptor, setupFn)
+    const { app } = activeAppRecord ?? {}
+
+    if (!app)
       return
-    setupExternalPlugin([pluginDescriptor, setupFn], app, api)
+
+    callDevToolsPluginSetupFn([pluginDescriptor, setupFn], app)
   })
 
   onLegacyDevToolsPluginApiAvailable(() => {
-    const normalizedPluginBuffer = devtoolsState.pluginBuffer.filter(([item]) => item.id !== 'components')
+    const normalizedPluginBuffer = devtoolsPluginBuffer.filter(([item]) => item.id !== 'components')
     normalizedPluginBuffer.forEach(([pluginDescriptor, setupFn]) => {
       target.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit(DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, pluginDescriptor, setupFn, { target: 'legacy' })
     })
@@ -44,50 +62,51 @@ export function initDevTools() {
 
   // create app record
   hook.on.vueAppInit(async (app, version) => {
-    const record = createAppRecord(app)
-    const api = new DevToolsPluginApi()
-    devtoolsAppRecords.value = [
-      ...devtoolsAppRecords.value,
-      {
-        ...record,
-        app,
-        version,
-        api,
-      },
-    ]
+    const appRecord = createAppRecord(app)
+    const normalizedAppRecord = {
+      ...appRecord,
+      app,
+      version,
+    }
+    addDevToolsAppRecord(normalizedAppRecord)
 
     if (devtoolsAppRecords.value.length === 1) {
-      await setActiveAppRecord(devtoolsAppRecords.value[0])
-      devtoolsState.connected = true
-      devtoolsHooks.callHook(DevToolsHooks.APP_CONNECTED)
+      setActiveAppRecord(normalizedAppRecord)
+      setActiveAppRecordId(normalizedAppRecord.id)
+      normalizeRouterInfo(normalizedAppRecord, activeAppRecord)
     }
+
+    setupDevToolsPlugin(...createComponentsDevToolsPlugin(normalizedAppRecord.app))
+    registerDevToolsPlugin(normalizedAppRecord.app)
+
+    updateDevToolsState({
+      connected: true,
+    })
+
+    target.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps.push(app)
   })
 
   hook.on.vueAppUnmount(async (app) => {
     const activeRecords = devtoolsAppRecords.value.filter(appRecord => appRecord.app !== app)
-    devtoolsAppRecords.value = activeRecords
-    if (devtoolsAppRecords.active.app === app)
-      await setActiveAppRecord(activeRecords[0])
-  })
-
-  subscribeDevToolsHook()
-}
 
-export function onDevToolsConnected(fn: () => void) {
-  return new Promise<void>((resolve) => {
-    if (devtoolsState.connected) {
-      fn()
-      resolve()
-      return
+    if (activeRecords.length === 0) {
+      updateDevToolsState({
+        connected: false,
+      })
     }
 
-    apiHooks.hook(DevToolsEvents.DEVTOOLS_CONNECTED_UPDATED, (state) => {
-      if (state.connected) {
-        fn()
-        resolve()
-      }
-    })
+    removeDevToolsAppRecord(app)
+
+    removeAppRecordId(app)
+
+    if (activeAppRecord.value.app === app) {
+      setActiveAppRecord(activeRecords[0])
+      devtoolsContext.hooks.callHook(DevToolsMessagingHookKeys.SEND_ACTIVE_APP_UNMOUNTED_TO_CLIENT)
+    }
+    target.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps.splice(target.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps.indexOf(app), 1)
   })
+
+  subscribeDevToolsHook()
 }
 
 export function onDevToolsClientConnected(fn: () => void) {
@@ -98,7 +117,7 @@ export function onDevToolsClientConnected(fn: () => void) {
       return
     }
 
-    apiHooks.hook(DevToolsEvents.DEVTOOLS_CONNECTED_UPDATED, (state) => {
+    devtoolsContext.hooks.hook(DevToolsMessagingHookKeys.DEVTOOLS_CONNECTED_UPDATED, ({ state }) => {
       if (state.connected && state.clientConnected) {
         fn()
         resolve()
diff --git a/packages/devtools-kit/src/core/inspector/index.ts b/packages/devtools-kit/src/core/inspector/index.ts
deleted file mode 100644
index 373c6c44..00000000
--- a/packages/devtools-kit/src/core/inspector/index.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { devtoolsContext } from '../../state'
-
-export interface Inspector {
-  id: string
-  nodeId: string
-  filter: string
-  treeFilterPlaceholder: string
-  actions?: {
-    icon: string
-    tooltip: string
-    action: (payload: unknown) => void
-  }[]
-  nodeActions?: {
-    icon: string
-    tooltip: string
-    action: (payload: unknown) => void
-  }[]
-}
-
-export interface InspectorApiPayload {
-  id: string
-  label: string
-  icon?: string
-  treeFilterPlaceholder?: string
-  actions?: {
-    icon: string
-    tooltip: string
-    action: (payload: unknown) => void
-  }[]
-  nodeActions?: {
-    icon: string
-    tooltip: string
-    action: (payload: unknown) => void
-  }[]
-}
-
-export function addInspector(payload: Inspector) {
-  devtoolsContext.inspector.push(payload)
-}
-
-export function getInspector(inspectorId: string) {
-  return devtoolsContext.inspector.find(inspector => inspector.id === inspectorId)
-}
-
-export function updateInspector(inspectorId: string, payload: Partial<Inspector>) {
-  const inspector = getInspector(inspectorId)
-  inspector && Object.assign(inspector, payload)
-}
diff --git a/packages/devtools-kit/src/core/open-in-editor/index.ts b/packages/devtools-kit/src/core/open-in-editor/index.ts
index 9920a4c6..bcee9df4 100644
--- a/packages/devtools-kit/src/core/open-in-editor/index.ts
+++ b/packages/devtools-kit/src/core/open-in-editor/index.ts
@@ -1,5 +1,5 @@
 import { target } from '@vue/devtools-shared'
-import { devtoolsState } from '../../state'
+import { devtoolsState } from '../../ctx/state'
 
 export interface OpenInEditorOptions {
   baseUrl?: string
diff --git a/packages/devtools-kit/src/plugins/component.ts b/packages/devtools-kit/src/core/plugin/components.ts
similarity index 66%
rename from packages/devtools-kit/src/plugins/component.ts
rename to packages/devtools-kit/src/core/plugin/components.ts
index 7fe0e0c8..a8256ae5 100644
--- a/packages/devtools-kit/src/plugins/component.ts
+++ b/packages/devtools-kit/src/core/plugin/components.ts
@@ -1,53 +1,32 @@
 import { debounce } from 'perfect-debounce'
-import { VueAppInstance } from '../types'
-import { DevToolsEvents, apiHooks, setupDevToolsPlugin } from '../api'
-import { devtoolsAppRecords, devtoolsContext, devtoolsState } from '../state'
-import { hook } from '../hook'
-import { getAppRecord, getComponentId, getComponentInstance } from '../core/component/utils'
-import { getComponentBoundingRect } from '../core/component/state/bounding-rect'
-import { ComponentWalker } from '../core/component/tree/walker'
-import { editState } from '../core/component/state/editor'
-import { getInstanceState } from '../core/component/state'
+import type { App, PluginDescriptor, PluginSetupFunction } from '../../types'
+import { hook } from '../../hook'
+import { getAppRecord, getComponentId, getComponentInstance } from '../../core/component/utils'
+import { DevToolsV6PluginAPIHookKeys, activeAppRecord, devtoolsContext, devtoolsState } from '../../ctx'
+import { ComponentWalker } from '../../core/component/tree/walker'
+import { getInstanceState } from '../../core/component/state'
+import { editState } from '../../core/component/state/editor'
 
 const INSPECTOR_ID = 'components'
 
-export function registerComponentDevToolsPlugin(app: VueAppInstance) {
-  setupDevToolsPlugin({
+export function createComponentsDevToolsPlugin(app: App): [PluginDescriptor, PluginSetupFunction] {
+  const descriptor: PluginDescriptor = {
     id: INSPECTOR_ID,
     label: 'Components',
     app,
-  }, (api) => {
+  }
+
+  const setupFn: PluginSetupFunction = (api) => {
     api.addInspector({
       id: INSPECTOR_ID,
       label: 'Components',
       treeFilterPlaceholder: 'Search components',
     })
 
-    api.on.getComponentBoundingRect((payload) => {
-      if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
-        const instance = getComponentInstance(devtoolsContext.appRecord!, payload.instanceId)
-        if (instance) {
-          if (typeof DOMRect === 'undefined')
-            return
-
-          payload.rect = getComponentBoundingRect(instance)
-          if (payload.rect instanceof DOMRect) {
-            payload.rect = {
-              top: payload.rect.top,
-              left: payload.rect.left,
-              right: payload.rect.right,
-              bottom: payload.rect.bottom,
-              width: payload.rect.width,
-              height: payload.rect.height,
-            }
-          }
-        }
-      }
-    })
-
     api.on.getInspectorTree(async (payload) => {
       if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
-        const instance = getComponentInstance(devtoolsContext.appRecord!, payload.instanceId)
+        // @ts-expect-error skip type @TODO
+        const instance = getComponentInstance(activeAppRecord.value!, payload.instanceId)
         if (instance) {
           const walker = new ComponentWalker({
             filterText: payload.filter,
@@ -55,6 +34,7 @@ export function registerComponentDevToolsPlugin(app: VueAppInstance) {
             maxDepth: 100,
             recursively: false,
           })
+          // @ts-expect-error skip type @TODO
           payload.rootNodes = await walker.getComponentTree(instance)
         }
       }
@@ -73,20 +53,24 @@ export function registerComponentDevToolsPlugin(app: VueAppInstance) {
           instanceData: result,
         }
         // @ts-expect-error hookable
-        apiHooks.callHookWith((callbacks) => {
+        devtoolsContext.hooks.callHookWith((callbacks) => {
           callbacks.forEach(cb => cb(_payload))
-        }, DevToolsEvents.COMPONENT_STATE_INSPECT)
+        }, DevToolsV6PluginAPIHookKeys.INSPECT_COMPONENT)
+        // @ts-expect-error skip type @TODO
         payload.state = result
       }
     })
 
     api.on.editInspectorState(async (payload) => {
       if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
+        // @ts-expect-error skip type @TODO
         editState(payload)
         await api.sendInspectorState('components')
       }
     })
 
+    // @TODO: on getComponentBoundingRect
+
     const debounceSendInspectorTree = debounce(() => {
       api.sendInspectorTree(INSPECTOR_ID)
     }, 120)
@@ -119,8 +103,8 @@ export function registerComponentDevToolsPlugin(app: VueAppInstance) {
         if (!appRecord?.instanceMap.has(id)) {
           appRecord?.instanceMap.set(id, component)
           // force sync appRecord instanceMap
-          if (devtoolsAppRecords.active.id === appRecord?.id)
-            devtoolsAppRecords.active.instanceMap = appRecord!.instanceMap
+          if (activeAppRecord.value.id === appRecord?.id)
+            activeAppRecord.value.instanceMap = appRecord!.instanceMap
         }
       }
 
@@ -154,8 +138,8 @@ export function registerComponentDevToolsPlugin(app: VueAppInstance) {
         if (!appRecord?.instanceMap.has(id)) {
           // force sync appRecord instanceMap
           appRecord?.instanceMap.set(id, component)
-          if (devtoolsAppRecords.active.id === appRecord?.id)
-            devtoolsAppRecords.active.instanceMap = appRecord!.instanceMap
+          if (activeAppRecord.value.id === appRecord?.id)
+            activeAppRecord.value.instanceMap = appRecord!.instanceMap
         }
       }
 
@@ -188,15 +172,12 @@ export function registerComponentDevToolsPlugin(app: VueAppInstance) {
 
       appRecord?.instanceMap.delete(id)
       // force sync appRecord instanceMap
-      if (devtoolsAppRecords.active.id === appRecord?.id)
-        devtoolsAppRecords.active.instanceMap = appRecord!.instanceMap
+      if (activeAppRecord.value.id === appRecord?.id)
+        activeAppRecord.value.instanceMap = appRecord!.instanceMap
 
       debounceSendInspectorTree()
     })
-    devtoolsContext.componentPluginHookBuffer = [
-      componentAddedCleanup,
-      componentUpdatedCleanup,
-      componentRemovedCleanup,
-    ]
-  })
+  }
+
+  return [descriptor, setupFn]
 }
diff --git a/packages/devtools-kit/src/core/plugin/index.ts b/packages/devtools-kit/src/core/plugin/index.ts
new file mode 100644
index 00000000..b5ec8f40
--- /dev/null
+++ b/packages/devtools-kit/src/core/plugin/index.ts
@@ -0,0 +1,39 @@
+import { App, PluginDescriptor, PluginSetupFunction } from '../../types'
+import { hook } from '../../hook'
+import { devtoolsContext, devtoolsPluginBuffer } from '../../ctx'
+import { DevToolsPluginAPI } from '../../api'
+
+export * from './components'
+
+export function setupDevToolsPlugin(pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) {
+  return hook.setupDevToolsPlugin(pluginDescriptor, setupFn)
+}
+
+export function callDevToolsPluginSetupFn(plugin: [PluginDescriptor, PluginSetupFunction], app: App) {
+  const [pluginDescriptor, setupFn] = plugin
+  // @TODO: need check
+  // if (pluginDescriptor.app !== app)
+  // return
+
+  const api = new DevToolsPluginAPI({
+    plugin: {
+      setupFn,
+      descriptor: pluginDescriptor,
+    },
+    ctx: devtoolsContext,
+  })
+
+  // patch for vuex devtools
+  if (pluginDescriptor.packageName === 'vuex') {
+    api.on.editInspectorState((payload) => {
+      api.sendInspectorState(payload.inspectorId)
+    })
+  }
+
+  setupFn(api)
+}
+export function registerDevToolsPlugin(app: App) {
+  devtoolsPluginBuffer.forEach((plugin) => {
+    callDevToolsPluginSetupFn(plugin, app)
+  })
+}
diff --git a/packages/devtools-kit/src/core/router/index.ts b/packages/devtools-kit/src/core/router/index.ts
index 02e9c81a..8be69ff8 100644
--- a/packages/devtools-kit/src/core/router/index.ts
+++ b/packages/devtools-kit/src/core/router/index.ts
@@ -1,10 +1,11 @@
 import type { RouteLocationNormalizedLoaded, RouteRecordRaw, Router } from 'vue-router'
 import { deepClone, target as global } from '@vue/devtools-shared'
 import { debounce } from 'perfect-debounce'
-import { ROUTER_INFO_KEY, ROUTER_KEY } from '../../state'
-import type { AppRecord, DevToolsState } from '../../types'
+import { ROUTER_INFO_KEY, ROUTER_KEY } from '../../ctx/router'
+import { DevToolsMessagingHookKeys, devtoolsContext } from '../../ctx'
+import type { AppRecord } from '../../types'
 import { hook } from '../../hook'
-import { DevToolsEvents, apiHooks } from '../../api/hook'
+// import { DevToolsEvents, apiHooks } from '../../api/hook'
 
 function getRoutes(router?: Router) {
   const routesMap = new Map()
@@ -42,7 +43,7 @@ function filterCurrentRoute(route: RouteLocationNormalizedLoaded & { href?: stri
   return route
 }
 
-export function normalizeRouterInfo(appRecord: AppRecord, state: DevToolsState) {
+export function normalizeRouterInfo(appRecord: AppRecord, activeAppRecord: { value: AppRecord }) {
   function init() {
     const router = appRecord.app?.config.globalProperties.$router as Router | undefined
     const currentRoute = filterCurrentRoute(router?.currentRoute.value)
@@ -59,13 +60,12 @@ export function normalizeRouterInfo(appRecord: AppRecord, state: DevToolsState)
 
   init()
 
-  // @TODO: use another way to watch router
   hook.on.componentUpdated(debounce(() => {
-    if (state.activeAppRecord?.app !== appRecord.app)
+    if (activeAppRecord.value?.app !== appRecord.app)
       return
 
     init()
-    apiHooks.callHook(DevToolsEvents.ROUTER_INFO_UPDATED, global[ROUTER_INFO_KEY])
+    devtoolsContext.hooks.callHook(DevToolsMessagingHookKeys.ROUTER_INFO_UPDATED, { state: global[ROUTER_INFO_KEY] })
   }, 200))
 }
 export function getRouterDevToolsId(id: string) {
diff --git a/packages/devtools-kit/src/core/timeline/index.ts b/packages/devtools-kit/src/core/timeline/index.ts
deleted file mode 100644
index 2e9047ec..00000000
--- a/packages/devtools-kit/src/core/timeline/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { devtoolsContext } from '../../state'
-
-export interface TimelineEvent {
-  event: {
-    groupId: number
-    time: number
-    title: string
-    subtitle: string
-    // @TODO: InspectorCustomState type
-    data: Record<string, unknown>
-  }
-  layerId: string
-}
-
-export interface TimelineLayerItem {
-  id: string
-  label: string
-  color: number
-}
-
-export function addTimelineLayer(payload: TimelineLayerItem) {
-  devtoolsContext.timelineLayer.push(payload)
-}
-
-export function getTimelineLayer() {
-  return devtoolsContext.timelineLayer
-}
diff --git a/packages/devtools-kit/src/ctx/api.ts b/packages/devtools-kit/src/ctx/api.ts
new file mode 100644
index 00000000..cf2f834e
--- /dev/null
+++ b/packages/devtools-kit/src/ctx/api.ts
@@ -0,0 +1,105 @@
+import type { HookKeys, Hookable } from 'hookable'
+import type { CustomInspectorState } from '../types'
+import { StateEditor } from '../core/component/state/editor'
+import { cancelInspectComponentHighLighter, inspectComponentHighLighter, scrollToComponent } from '../core/component-highlighter'
+import { getComponentInstance } from '../core/component/utils'
+import { openInEditor } from '../core/open-in-editor'
+import { normalizeRouterInfo } from '../core/router'
+import { getComponentInspector } from '../core/component-inspector'
+import type { DevToolsContextHooks, DevToolsMessagingHooks, DevToolsV6PluginAPIHookPayloads } from './hook'
+import { DevToolsV6PluginAPIHookKeys } from './hook'
+import { activeAppRecord, devtoolsAppRecords, setActiveAppRecord, setActiveAppRecordId } from './state'
+import { callInspectorUpdatedHook } from './inspector'
+
+export function createDevToolsApi(hooks: Hookable<DevToolsContextHooks & DevToolsMessagingHooks, HookKeys<DevToolsContextHooks & DevToolsMessagingHooks>>) {
+  return {
+    // get inspector tree
+    async getInspectorTree(payload: Pick<DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE], 'inspectorId' | 'filter'>) {
+      const _payload = {
+        ...payload,
+        app: activeAppRecord.value.app,
+        rootNodes: [],
+      }
+      await new Promise<void>((resolve) => {
+        // @ts-expect-error hookable
+        hooks.callHookWith(async (callbacks) => {
+          await Promise.all(callbacks.map(cb => cb(_payload)))
+          resolve()
+        }, DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE)
+      })
+      return _payload.rootNodes
+    },
+    // get inspector state
+    async getInspectorState(payload: Pick<DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE], 'inspectorId' | 'nodeId'>) {
+      const _payload = {
+        ...payload,
+        app: activeAppRecord.value.app,
+        state: null as CustomInspectorState | null,
+      }
+
+      const ctx = {
+        currentTab: `custom-inspector:${payload.inspectorId}`,
+      }
+
+      await new Promise<void>((resolve) => {
+        // @ts-expect-error hookable
+        hooks.callHookWith(async (callbacks) => {
+          await Promise.all(callbacks.map(cb => cb(_payload, ctx)))
+          resolve()
+        }, DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE)
+      })
+      return _payload.state!
+    },
+    // edit inspector state
+    editInspectorState(payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]) {
+      const stateEditor = new StateEditor()
+      const _payload = {
+        ...payload,
+        app: activeAppRecord.value.app,
+        set: (obj, path = payload.path, value = payload.state.value, cb) => {
+          stateEditor.set(obj, path, value, cb || stateEditor.createDefaultSetCallback(payload.state))
+        },
+      }
+      // @ts-expect-error hookable
+      hooks.callHookWith((callbacks) => {
+        callbacks.forEach(cb => cb(_payload))
+      }, DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE)
+    },
+    // inspect component inspector
+    inspectComponentInspector() {
+      return inspectComponentHighLighter()
+    },
+    // cancel inspect component inspector
+    cancelInspectComponentInspector() {
+      return cancelInspectComponentHighLighter()
+    },
+    // get component render code
+    getComponentRenderCode(id: string) {
+      const instance = getComponentInstance(activeAppRecord.value, id)
+
+      if (instance)
+        return !(instance?.type instanceof Function) ? instance.render.toString() : instance.type.toString()
+    },
+    // scroll to component
+    scrollToComponent(id: string) {
+      return scrollToComponent({ id })
+    },
+    // open in editor
+    openInEditor,
+    // get vue inspector
+    getVueInspector: getComponentInspector,
+    // toggle app
+    toggleApp(id: string) {
+      const appRecord = devtoolsAppRecords.value.find(record => record.id === id)
+
+      if (appRecord) {
+        setActiveAppRecordId(id)
+        setActiveAppRecord(appRecord)
+        normalizeRouterInfo(appRecord, activeAppRecord)
+        callInspectorUpdatedHook()
+      }
+    },
+  }
+}
+
+export type DevToolsApiType = ReturnType<typeof createDevToolsApi>
diff --git a/packages/devtools-kit/src/state/env.ts b/packages/devtools-kit/src/ctx/env.ts
similarity index 73%
rename from packages/devtools-kit/src/state/env.ts
rename to packages/devtools-kit/src/ctx/env.ts
index db3acc18..6d488f95 100644
--- a/packages/devtools-kit/src/state/env.ts
+++ b/packages/devtools-kit/src/ctx/env.ts
@@ -1,5 +1,4 @@
 import { target } from '@vue/devtools-shared'
-import { DevToolsEnv } from '../types'
 
 target.__VUE_DEVTOOLS_ENV__ ??= {
   vitePluginDetected: false,
@@ -9,7 +8,7 @@ export function getDevToolsEnv() {
   return target.__VUE_DEVTOOLS_ENV__
 }
 
-export function setDevToolsEnv(env: Partial<DevToolsEnv>) {
+export function setDevToolsEnv(env: Partial<any>) {
   target.__VUE_DEVTOOLS_ENV__ = {
     ...target.__VUE_DEVTOOLS_ENV__,
     ...env,
diff --git a/packages/devtools-kit/src/ctx/hook.ts b/packages/devtools-kit/src/ctx/hook.ts
new file mode 100644
index 00000000..710ad6a8
--- /dev/null
+++ b/packages/devtools-kit/src/ctx/hook.ts
@@ -0,0 +1,376 @@
+import { createHooks } from 'hookable'
+import type {
+  App,
+  ComponentInstance,
+  ComponentTreeNode,
+  CustomInspectorNode,
+  CustomInspectorOptions,
+  CustomInspectorState,
+  DevToolsPlugin,
+  EditStatePayload,
+  InspectedComponentData,
+  RouterInfo,
+  TimelineEvent,
+  TimelineEventOptions,
+  TimelineLayerOptions,
+} from '../types'
+import { highlight, unhighlight } from '../core/component-highlighter'
+import { getComponentBoundingRect } from '../core/component/state/bounding-rect'
+import { getInstanceName } from '../core/component/utils'
+import { addInspector, getInspector } from './inspector'
+import { addTimelineLayer } from './timeline'
+import { DevToolsState, activeAppRecord } from './state'
+
+// v6 plugin api hooks
+export enum DevToolsV6PluginAPIHookKeys {
+  VISIT_COMPONENT_TREE = 'visitComponentTree',
+  INSPECT_COMPONENT = 'inspectComponent',
+  EDIT_COMPONENT_STATE = 'editComponentState',
+  GET_INSPECTOR_TREE = 'getInspectorTree',
+  GET_INSPECTOR_STATE = 'getInspectorState',
+  EDIT_INSPECTOR_STATE = 'editInspectorState',
+  INSPECT_TIMELINE_EVENT = 'inspectTimelineEvent',
+  TIMELINE_CLEARED = 'timelineCleared',
+  SET_PLUGIN_SETTINGS = 'setPluginSettings',
+}
+
+export interface DevToolsV6PluginAPIHookPayloads {
+  [DevToolsV6PluginAPIHookKeys.VISIT_COMPONENT_TREE]: {
+    app: App
+    componentInstance: ComponentInstance
+    treeNode: ComponentTreeNode
+    filter: string
+  }
+  [DevToolsV6PluginAPIHookKeys.INSPECT_COMPONENT]: {
+    app: App
+    componentInstance: ComponentInstance
+    instanceData: InspectedComponentData
+  }
+  [DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE]: {
+    app: App
+    inspectorId: string
+    nodeId: string
+    path: string[]
+    type: string
+    state: EditStatePayload
+    set: (object: any, path?: string | (string[]), value?: any, cb?: (object: any, field: string, value: any) => void) => void
+  }
+  [DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE]: {
+    app: App
+    inspectorId: string
+    filter: string
+    rootNodes: CustomInspectorNode[]
+  }
+  [DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE]: {
+    app: App
+    inspectorId: string
+    nodeId: string
+    state: CustomInspectorState
+  }
+  [DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]: {
+    app: App
+    inspectorId: string
+    nodeId: string
+    path: string[]
+    type: string
+    state: EditStatePayload
+    set: (object: any, path?: string | (string[]), value?: any, cb?: (object: any, field: string, value: any) => void) => void
+  }
+  [DevToolsV6PluginAPIHookKeys.INSPECT_TIMELINE_EVENT]: {
+    app: App
+    layerId: string
+    event: TimelineEvent
+    all?: boolean
+    data: any
+  }
+  [DevToolsV6PluginAPIHookKeys.TIMELINE_CLEARED]: Record<string, never>
+  [DevToolsV6PluginAPIHookKeys.SET_PLUGIN_SETTINGS]: {
+    app: App
+    pluginId: string
+    key: string
+    newValue: any
+    oldValue: any
+    settings: any
+  }
+}
+
+export interface DevToolsV6PluginAPIHooks {
+  [DevToolsV6PluginAPIHookKeys.VISIT_COMPONENT_TREE]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.VISIT_COMPONENT_TREE]) => void
+  [DevToolsV6PluginAPIHookKeys.INSPECT_COMPONENT]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.INSPECT_COMPONENT]) => void
+  [DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE]) => void
+  [DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE]) => void
+  [DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE]) => void
+  [DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]) => void
+  [DevToolsV6PluginAPIHookKeys.INSPECT_TIMELINE_EVENT]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.INSPECT_TIMELINE_EVENT]) => void
+  [DevToolsV6PluginAPIHookKeys.TIMELINE_CLEARED]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.TIMELINE_CLEARED]) => void
+  [DevToolsV6PluginAPIHookKeys.SET_PLUGIN_SETTINGS]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.SET_PLUGIN_SETTINGS]) => void
+}
+
+// devtools context hooks
+export enum DevToolsContextHookKeys {
+  ADD_INSPECTOR = 'addInspector',
+  SEND_INSPECTOR_TREE = 'sendInspectorTree',
+  SEND_INSPECTOR_STATE = 'sendInspectorState',
+  CUSTOM_INSPECTOR_SELECT_NODE = 'customInspectorSelectNode',
+  TIMELINE_LAYER_ADDED = 'timelineLayerAdded',
+  TIMELINE_EVENT_ADDED = 'timelineEventAdded',
+  GET_COMPONENT_INSTANCES = 'getComponentInstances',
+  GET_COMPONENT_BOUNDS = 'getComponentBounds',
+  GET_COMPONENT_NAME = 'getComponentName',
+  COMPONENT_HIGHLIGHT = 'componentHighlight',
+  COMPONENT_UNHIGHLIGHT = 'componentUnhighlight',
+}
+
+export interface DevToolsContextHookPayloads {
+  [DevToolsContextHookKeys.ADD_INSPECTOR]: {
+    inspector: CustomInspectorOptions
+    plugin: DevToolsPlugin
+  }
+  [DevToolsContextHookKeys.SEND_INSPECTOR_TREE]: {
+    inspectorId: string
+    plugin: DevToolsPlugin
+  }
+  [DevToolsContextHookKeys.SEND_INSPECTOR_STATE]: {
+    inspectorId: string
+    plugin: DevToolsPlugin
+  }
+  [DevToolsContextHookKeys.CUSTOM_INSPECTOR_SELECT_NODE]: {
+    inspectorId: string
+    nodeId: string
+    plugin: DevToolsPlugin
+  }
+  [DevToolsContextHookKeys.TIMELINE_LAYER_ADDED]: {
+    options: TimelineLayerOptions
+    plugin: DevToolsPlugin
+  }
+  [DevToolsContextHookKeys.TIMELINE_EVENT_ADDED]: {
+    options: TimelineEventOptions
+    plugin: DevToolsPlugin
+  }
+  [DevToolsContextHookKeys.GET_COMPONENT_INSTANCES]: {
+    app: App
+  }
+  [DevToolsContextHookKeys.GET_COMPONENT_BOUNDS]: {
+    instance: ComponentInstance
+  }
+  [DevToolsContextHookKeys.GET_COMPONENT_NAME]: {
+    instance: ComponentInstance
+  }
+  [DevToolsContextHookKeys.COMPONENT_HIGHLIGHT]: {
+    uid: string
+  }
+  [DevToolsContextHookKeys.COMPONENT_UNHIGHLIGHT]: Record<string, never>
+}
+
+// devtools client hooks
+export enum DevToolsMessagingHookKeys {
+  SEND_INSPECTOR_TREE_TO_CLIENT = 'sendInspectorTreeToClient',
+  SEND_INSPECTOR_STATE_TO_CLIENT = 'sendInspectorStateToClient',
+  SEND_TIMELINE_EVENT_TO_CLIENT = 'sendTimelineEventToClient',
+  SEND_INSPECTOR_TO_CLIENT = 'sendInspectorToClient',
+  SEND_ACTIVE_APP_UNMOUNTED_TO_CLIENT = 'sendActiveAppUpdatedToClient',
+  DEVTOOLS_STATE_UPDATED = 'devtoolsStateUpdated',
+  DEVTOOLS_CONNECTED_UPDATED = 'devtoolsConnectedUpdated',
+  ROUTER_INFO_UPDATED = 'routerInfoUpdated',
+}
+
+export interface DevToolsMessagingHookPayloads {
+  [DevToolsMessagingHookKeys.SEND_INSPECTOR_TREE_TO_CLIENT]: {
+    inspectorId: string
+    rootNodes: CustomInspectorNode[]
+  }
+  [DevToolsMessagingHookKeys.SEND_INSPECTOR_STATE_TO_CLIENT]: {
+    inspectorId: string
+    nodeId: string
+    state: CustomInspectorState
+  }
+  [DevToolsMessagingHookKeys.SEND_TIMELINE_EVENT_TO_CLIENT]: TimelineEventOptions
+  [DevToolsMessagingHookKeys.SEND_INSPECTOR_TO_CLIENT]: {
+    id: string
+    label: string
+    logo: string
+    packageName: string | undefined
+    homepage: string | undefined
+  }[]
+  [DevToolsMessagingHookKeys.DEVTOOLS_STATE_UPDATED]: {
+    state: DevToolsState
+  }
+  [DevToolsMessagingHookKeys.DEVTOOLS_CONNECTED_UPDATED]: {
+    state: DevToolsState
+    oldState: DevToolsState
+  }
+  [DevToolsMessagingHookKeys.ROUTER_INFO_UPDATED]: {
+    state: RouterInfo
+  }
+}
+
+export interface DevToolsMessagingHooks {
+  [DevToolsMessagingHookKeys.SEND_INSPECTOR_TREE_TO_CLIENT]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.SEND_INSPECTOR_TREE_TO_CLIENT]) => void
+  [DevToolsMessagingHookKeys.SEND_INSPECTOR_STATE_TO_CLIENT]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.SEND_INSPECTOR_STATE_TO_CLIENT]) => void
+  [DevToolsMessagingHookKeys.SEND_TIMELINE_EVENT_TO_CLIENT]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.SEND_TIMELINE_EVENT_TO_CLIENT]) => void
+  [DevToolsMessagingHookKeys.SEND_ACTIVE_APP_UNMOUNTED_TO_CLIENT]: () => void
+  [DevToolsMessagingHookKeys.SEND_INSPECTOR_TO_CLIENT]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.SEND_INSPECTOR_TO_CLIENT]) => void
+  [DevToolsMessagingHookKeys.DEVTOOLS_STATE_UPDATED]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.DEVTOOLS_STATE_UPDATED]) => void
+  [DevToolsMessagingHookKeys.DEVTOOLS_CONNECTED_UPDATED]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.DEVTOOLS_CONNECTED_UPDATED]) => void
+  [DevToolsMessagingHookKeys.ROUTER_INFO_UPDATED]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.ROUTER_INFO_UPDATED]) => void
+}
+
+export interface DevToolsContextHooks extends DevToolsV6PluginAPIHooks {
+  [DevToolsContextHookKeys.ADD_INSPECTOR]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.ADD_INSPECTOR]) => void
+  [DevToolsContextHookKeys.SEND_INSPECTOR_TREE]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.SEND_INSPECTOR_TREE]) => void
+  [DevToolsContextHookKeys.SEND_INSPECTOR_STATE]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.SEND_INSPECTOR_STATE]) => void
+  [DevToolsContextHookKeys.CUSTOM_INSPECTOR_SELECT_NODE]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.CUSTOM_INSPECTOR_SELECT_NODE]) => void
+  [DevToolsContextHookKeys.TIMELINE_LAYER_ADDED]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.TIMELINE_LAYER_ADDED]) => void
+  [DevToolsContextHookKeys.TIMELINE_EVENT_ADDED]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.TIMELINE_EVENT_ADDED]) => void
+  [DevToolsContextHookKeys.GET_COMPONENT_INSTANCES]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.GET_COMPONENT_INSTANCES]) => void
+  [DevToolsContextHookKeys.GET_COMPONENT_BOUNDS]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.GET_COMPONENT_BOUNDS]) => void
+  [DevToolsContextHookKeys.GET_COMPONENT_NAME]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.GET_COMPONENT_NAME]) => void
+  [DevToolsContextHookKeys.COMPONENT_HIGHLIGHT]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.COMPONENT_HIGHLIGHT]) => void
+  [DevToolsContextHookKeys.COMPONENT_UNHIGHLIGHT]: () => void
+}
+
+export function createDevToolsCtxHooks() {
+  const hooks = createHooks<DevToolsContextHooks & DevToolsMessagingHooks>()
+  hooks.hook(DevToolsContextHookKeys.ADD_INSPECTOR, ({ inspector, plugin }) => {
+    addInspector(inspector, plugin.descriptor)
+  })
+
+  // send inspector tree
+  hooks.hook(DevToolsContextHookKeys.SEND_INSPECTOR_TREE, async ({ inspectorId, plugin }) => {
+    if (!inspectorId || !plugin?.descriptor?.app)
+      return
+
+    // 1. get inspector
+    const inspector = getInspector(inspectorId, plugin.descriptor.app)
+
+    // 2. get inspector tree
+    const _payload = {
+      app: plugin.descriptor.app,
+      inspectorId,
+      filter: inspector?.treeFilter || '',
+      rootNodes: [],
+    }
+    await new Promise<void>((resolve) => {
+      // @ts-expect-error hookable
+      hooks.callHookWith(async (callbacks) => {
+        await Promise.all(callbacks.map(cb => cb(_payload)))
+        resolve()
+      }, DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE)
+    })
+
+    // @ts-expect-error hookable
+    hooks.callHookWith(async (callbacks) => {
+      await Promise.all(callbacks.map(cb => cb({
+        inspectorId,
+        rootNodes: _payload.rootNodes,
+      })))
+    }, DevToolsMessagingHookKeys.SEND_INSPECTOR_TREE_TO_CLIENT)
+  })
+
+  // send inspector state
+  hooks.hook(DevToolsContextHookKeys.SEND_INSPECTOR_STATE, async ({ inspectorId, plugin }) => {
+    if (!inspectorId || !plugin?.descriptor?.app)
+      return
+
+    // 1. get inspector
+    const inspector = getInspector(inspectorId, plugin.descriptor.app)
+    // 2. get inspector state
+    const _payload = {
+      app: plugin.descriptor.app,
+      inspectorId,
+      nodeId: inspector?.selectedNodeId || '',
+      state: null,
+    }
+
+    const ctx = {
+      currentTab: `custom-inspector:${inspectorId}`,
+    }
+
+    if (_payload.nodeId) {
+      await new Promise<void>((resolve) => {
+        // @ts-expect-error hookable
+        hooks.callHookWith(async (callbacks) => {
+          await Promise.all(callbacks.map(cb => cb(_payload, ctx)))
+          resolve()
+        }, DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE)
+      })
+    }
+
+    // @ts-expect-error hookable
+    hooks.callHookWith(async (callbacks) => {
+      await Promise.all(callbacks.map(cb => cb({
+        inspectorId,
+        nodeId: _payload.nodeId,
+        state: _payload.state,
+      })))
+    }, DevToolsMessagingHookKeys.SEND_INSPECTOR_STATE_TO_CLIENT)
+  })
+
+  // select inspector node
+  hooks.hook(DevToolsContextHookKeys.CUSTOM_INSPECTOR_SELECT_NODE, ({ inspectorId, nodeId, plugin }) => {
+    // 1. get inspector
+    const inspector = getInspector(inspectorId, plugin.descriptor.app)
+
+    if (!inspector)
+      return
+
+    // 2. select node
+    inspector.selectedNodeId = nodeId
+
+    // 3. select node in devtools client and fetch state
+  })
+
+  // add timeline layer
+  hooks.hook(DevToolsContextHookKeys.TIMELINE_LAYER_ADDED, ({ options, plugin }) => {
+    // 1. update layers
+    addTimelineLayer(options, plugin.descriptor)
+  })
+
+  // add timeline event
+  hooks.hook(DevToolsContextHookKeys.TIMELINE_EVENT_ADDED, ({ options, plugin }) => {
+    // @ts-expect-error hookable
+    hooks.callHookWith(async (callbacks) => {
+      await Promise.all(callbacks.map(cb => cb(options)))
+    }, DevToolsMessagingHookKeys.SEND_TIMELINE_EVENT_TO_CLIENT)
+  })
+
+  // get component instances
+  hooks.hook(DevToolsContextHookKeys.GET_COMPONENT_INSTANCES, async ({ app }) => {
+    const appRecord = app.__VUE_DEVTOOLS_NEXT_APP_RECORD__
+    if (!appRecord)
+      return null
+    const appId = appRecord.id.toString()
+    const instances = [...appRecord.instanceMap]
+      .filter(([key]) => key.split(':')[0] === appId)
+      .map(([,instance]) => instance)
+    return instances
+  })
+
+  // get component bounds
+  hooks.hook(DevToolsContextHookKeys.GET_COMPONENT_BOUNDS, async ({ instance }) => {
+    const bounds = getComponentBoundingRect(instance)
+    return bounds
+  })
+
+  // get component name
+  hooks.hook(DevToolsContextHookKeys.GET_COMPONENT_NAME, ({ instance }) => {
+    const name = getInstanceName(instance)
+    return name
+  })
+
+  // component highlight
+  hooks.hook(DevToolsContextHookKeys.COMPONENT_HIGHLIGHT, ({ uid }) => {
+    // 1. highlight component in devtools client
+    const instance = activeAppRecord.value.instanceMap.get(uid)
+    if (instance) {
+      highlight(instance)
+    }
+  })
+
+  // component unhighlight
+  hooks.hook(DevToolsContextHookKeys.COMPONENT_UNHIGHLIGHT, () => {
+    unhighlight()
+  })
+
+  return hooks
+}
diff --git a/packages/devtools-kit/src/ctx/index.ts b/packages/devtools-kit/src/ctx/index.ts
new file mode 100644
index 00000000..39c084fb
--- /dev/null
+++ b/packages/devtools-kit/src/ctx/index.ts
@@ -0,0 +1,43 @@
+import { target } from '@vue/devtools-shared'
+import { HookKeys, Hookable } from 'hookable'
+import type { DevToolsContextHooks, DevToolsMessagingHooks } from './hook'
+import { createDevToolsCtxHooks } from './hook'
+import { activeAppRecord, devtoolsAppRecords, devtoolsState } from './state'
+import type { DevToolsAppRecords, DevToolsState } from './state'
+import type { DevToolsApiType } from './api'
+import { createDevToolsApi } from './api'
+
+export * from './plugin'
+export * from './api'
+export * from './hook'
+export * from './inspector'
+export * from './env'
+export * from './state'
+export * from './router'
+
+export interface DevtoolsContext {
+  hooks: Hookable<DevToolsContextHooks & DevToolsMessagingHooks, HookKeys<DevToolsContextHooks & DevToolsMessagingHooks>>
+  state: DevToolsState & {
+    activeAppRecordId: string
+    activeAppRecord: DevToolsAppRecords
+    appRecords: DevToolsAppRecords[]
+  }
+  api: DevToolsApiType
+}
+
+const hooks = createDevToolsCtxHooks()
+
+target.__VUE_DEVTOOLS_KIT_CONTEXT__ ??= {
+  hooks,
+  get state() {
+    return {
+      ...devtoolsState,
+      activeAppRecordId: activeAppRecord.id,
+      activeAppRecord: activeAppRecord.value,
+      appRecords: devtoolsAppRecords.value,
+    }
+  },
+  api: createDevToolsApi(hooks),
+}
+
+export const devtoolsContext = target.__VUE_DEVTOOLS_KIT_CONTEXT__ as DevtoolsContext
diff --git a/packages/devtools-kit/src/ctx/inspector.ts b/packages/devtools-kit/src/ctx/inspector.ts
new file mode 100644
index 00000000..7e47beb9
--- /dev/null
+++ b/packages/devtools-kit/src/ctx/inspector.ts
@@ -0,0 +1,91 @@
+import { target } from '@vue/devtools-shared'
+import type { App } from 'vue'
+import { debounce } from 'perfect-debounce'
+import type { CustomInspectorOptions, PluginDescriptor } from '../types'
+import { getAppRecord } from '../core/component/utils'
+import { activeAppRecord } from './state'
+import { DevToolsMessagingHookKeys } from './hook'
+import { devtoolsTimelineLayers } from './timeline'
+import { devtoolsContext } from '.'
+
+interface DevToolsKitInspector {
+  options: CustomInspectorOptions
+  descriptor: PluginDescriptor
+  treeFilter: string
+  selectedNodeId: string
+  appRecord: unknown
+}
+target.__VUE_DEVTOOLS_KIT_INSPECTOR__ ??= []
+
+export const devtoolsInspector = new Proxy<DevToolsKitInspector[]>(target.__VUE_DEVTOOLS_KIT_INSPECTOR__, {
+  get(target, prop, receiver) {
+    return Reflect.get(target, prop, receiver)
+  },
+})
+
+export const callInspectorUpdatedHook = debounce(() => {
+  devtoolsContext.hooks.callHook(DevToolsMessagingHookKeys.SEND_INSPECTOR_TO_CLIENT, getActiveInspectors())
+})
+
+export function addInspector(inspector: CustomInspectorOptions, descriptor: PluginDescriptor) {
+  devtoolsInspector.push({
+    options: inspector,
+    descriptor,
+    treeFilter: '',
+    selectedNodeId: '',
+    appRecord: getAppRecord(descriptor.app),
+  })
+
+  callInspectorUpdatedHook()
+}
+
+export function getActiveInspectors() {
+  return devtoolsInspector
+    .filter(inspector => inspector.descriptor.app === activeAppRecord.value.app)
+    .filter(inspector => inspector.descriptor.id !== 'components')
+    .map((inspector) => {
+      const descriptor = inspector.descriptor
+      const options = inspector.options
+      return {
+        id: options.id,
+        label: options.label,
+        logo: `i-ic-baseline-${options.icon}`,
+        packageName: descriptor.packageName,
+        homepage: descriptor.homepage,
+      }
+    })
+}
+
+export function getInspectorInfo(id: string) {
+  const inspector = getInspector(id, activeAppRecord.value.app)
+  if (!inspector)
+    return
+  const descriptor = inspector.descriptor
+  const options = inspector.options
+  const timelineLayers = devtoolsTimelineLayers.filter(layer => layer.descriptorId === descriptor.id).map(item => ({
+    id: item.id,
+    label: item.label,
+    color: item.color,
+  }))
+  return {
+    id: options.id,
+    label: options.label,
+    logo: descriptor.logo,
+    packageName: descriptor.packageName,
+    homepage: descriptor.homepage,
+    timelineLayers,
+  }
+}
+
+export function getInspector(id: string, app?: App) {
+  return devtoolsInspector.find(inspector => inspector.options.id === id && (app ? inspector.descriptor.app === app : true))
+}
+export function getInspectorActions(id: string) {
+  const inspector = getInspector(id)
+  return inspector?.options.actions
+}
+
+export function getInspectorNodeActions(id: string) {
+  const inspector = getInspector(id)
+  return inspector?.options.nodeActions
+}
diff --git a/packages/devtools-kit/src/ctx/plugin.ts b/packages/devtools-kit/src/ctx/plugin.ts
new file mode 100644
index 00000000..e7f1ad24
--- /dev/null
+++ b/packages/devtools-kit/src/ctx/plugin.ts
@@ -0,0 +1,14 @@
+import { target } from '@vue/devtools-shared'
+import { PluginDescriptor, PluginSetupFunction } from '../types'
+
+type DevToolsKitPluginBuffer = [PluginDescriptor, PluginSetupFunction]
+target.__VUE_DEVTOOLS_KIT_PLUGIN_BUFFER__ ??= []
+
+export const devtoolsPluginBuffer = new Proxy<DevToolsKitPluginBuffer[]>(target.__VUE_DEVTOOLS_KIT_PLUGIN_BUFFER__, {
+  get(target, prop, receiver) {
+    return Reflect.get(target, prop, receiver)
+  },
+})
+export function addDevToolsPluginToBuffer(pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) {
+  devtoolsPluginBuffer.push([pluginDescriptor, setupFn])
+}
diff --git a/packages/devtools-kit/src/state/router.ts b/packages/devtools-kit/src/ctx/router.ts
similarity index 51%
rename from packages/devtools-kit/src/state/router.ts
rename to packages/devtools-kit/src/ctx/router.ts
index a8549de3..65c7d2ae 100644
--- a/packages/devtools-kit/src/state/router.ts
+++ b/packages/devtools-kit/src/ctx/router.ts
@@ -1,5 +1,5 @@
 import { target as global } from '@vue/devtools-shared'
-import { RouterInfo } from '../types'
+import { Router, RouterInfo } from '../types'
 
 export const ROUTER_KEY = '__VUE_DEVTOOLS_ROUTER__'
 export const ROUTER_INFO_KEY = '__VUE_DEVTOOLS_ROUTER_INFO__'
@@ -9,10 +9,18 @@ global[ROUTER_INFO_KEY] ??= {
   routes: [],
 }
 
-global[ROUTER_KEY] ??= null
+global[ROUTER_KEY] ??= {}
 
-export const devtoolsRouterInfo: RouterInfo = new Proxy(global[ROUTER_INFO_KEY], {
+export const devtoolsRouterInfo = new Proxy<RouterInfo>(global[ROUTER_INFO_KEY], {
   get(target, property) {
     return global[ROUTER_INFO_KEY][property]
   },
 })
+
+export const devtoolsRouter = new Proxy<{ value: Router }>(global[ROUTER_KEY], {
+  get(target, property) {
+    if (property === 'value') {
+      return global[ROUTER_KEY]
+    }
+  },
+})
diff --git a/packages/devtools-kit/src/ctx/state.ts b/packages/devtools-kit/src/ctx/state.ts
new file mode 100644
index 00000000..b8a37b9b
--- /dev/null
+++ b/packages/devtools-kit/src/ctx/state.ts
@@ -0,0 +1,199 @@
+import { target as global } from '@vue/devtools-shared'
+import { debounce } from 'perfect-debounce'
+import type { AppRecord, CustomCommand, CustomTab } from '../types'
+import { DevToolsMessagingHookKeys } from './hook'
+import { devtoolsContext } from '.'
+
+export interface DevToolsAppRecords extends AppRecord {}
+
+export interface DevToolsState {
+  connected: boolean
+  clientConnected: boolean
+  vitePluginDetected: boolean
+  appRecords: DevToolsAppRecords[]
+  activeAppRecordId: string
+  tabs: CustomTab[]
+  commands: CustomCommand[]
+  highPerfModeEnabled: boolean
+}
+
+global.__VUE_DEVTOOLS_KIT_APP_RECORDS__ ??= []
+global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__ ??= {}
+global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__ ??= ''
+global.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__ ??= []
+global.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__ ??= []
+
+const STATE_KEY = '__VUE_DEVTOOLS_KIT_GLOBAL_STATE__'
+function initStateFactory() {
+  return {
+    connected: false,
+    clientConnected: false,
+    vitePluginDetected: true,
+    appRecords: [],
+    activeAppRecordId: '',
+    tabs: [],
+    commands: [],
+    highPerfModeEnabled: false,
+  }
+}
+global[STATE_KEY] ??= initStateFactory()
+
+export const callStateUpdatedHook = debounce((state: DevToolsState) => {
+  devtoolsContext.hooks.callHook(DevToolsMessagingHookKeys.DEVTOOLS_STATE_UPDATED, { state })
+})
+
+export const callConnectedUpdatedHook = debounce((state: DevToolsState, oldState: DevToolsState) => {
+  devtoolsContext.hooks.callHook(DevToolsMessagingHookKeys.DEVTOOLS_CONNECTED_UPDATED, { state, oldState })
+})
+
+export const devtoolsAppRecords = new Proxy<DevToolsAppRecords[] & { value: DevToolsAppRecords[] }>(global.__VUE_DEVTOOLS_KIT_APP_RECORDS__, {
+  get(_target, prop, receiver) {
+    if (prop === 'value')
+      return global.__VUE_DEVTOOLS_KIT_APP_RECORDS__
+
+    return global.__VUE_DEVTOOLS_KIT_APP_RECORDS__[prop]
+  },
+})
+
+export const addDevToolsAppRecord = (app: AppRecord) => {
+  global.__VUE_DEVTOOLS_KIT_APP_RECORDS__ = [
+    ...global.__VUE_DEVTOOLS_KIT_APP_RECORDS__,
+    app,
+  ]
+}
+
+export const removeDevToolsAppRecord = (app: AppRecord['app']) => {
+  global.__VUE_DEVTOOLS_KIT_APP_RECORDS__ = devtoolsAppRecords.value.filter(record => record.app !== app)
+}
+
+export const activeAppRecord = new Proxy<AppRecord & { value: AppRecord, id: string }>(global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__, {
+  get(_target, prop, receiver) {
+    if (prop === 'value')
+      return global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__
+
+    else if (prop === 'id')
+      return global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__
+
+    return global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__[prop]
+  },
+})
+
+// @TODO: refactor
+function updateAllStates() {
+  callStateUpdatedHook({
+    ...global[STATE_KEY],
+    appRecords: devtoolsAppRecords.value,
+    activeAppRecordId: activeAppRecord.id,
+    tabs: global.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__,
+    commands: global.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__,
+  })
+}
+
+export function setActiveAppRecord(app: AppRecord) {
+  global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__ = app
+  updateAllStates()
+}
+
+export function setActiveAppRecordId(id: string) {
+  global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__ = id
+  updateAllStates()
+}
+
+export const devtoolsState: DevToolsState = new Proxy(global[STATE_KEY], {
+  get(target, property) {
+    if (property === 'appRecords') {
+      return devtoolsAppRecords
+    }
+    else if (property === 'activeAppRecordId') {
+      return activeAppRecord.id
+    }
+    else if (property === 'tabs') {
+      return global.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__
+    }
+    else if (property === 'commands') {
+      return global.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__
+    }
+    return global[STATE_KEY][property]
+  },
+  deleteProperty(target, property) {
+    delete target[property]
+    return true
+  },
+  set(target, property, value) {
+    const oldState = { ...global[STATE_KEY] }
+
+    target[property] = value
+    global[STATE_KEY][property] = value
+
+    return true
+  },
+})
+
+export function resetDevToolsState() {
+  Object.assign(global[STATE_KEY], initStateFactory())
+}
+
+export function updateDevToolsState(state: Partial<DevToolsState>) {
+  const oldState = {
+    ...global[STATE_KEY],
+    appRecords: devtoolsAppRecords.value,
+    activeAppRecordId: activeAppRecord.id,
+  }
+  if (
+    (oldState.connected !== state.connected && state.connected)
+    || (oldState.clientConnected !== state.clientConnected && state.clientConnected)
+  ) {
+    callConnectedUpdatedHook(global[STATE_KEY], oldState)
+  }
+  Object.assign(global[STATE_KEY], state)
+  updateAllStates()
+}
+
+export function onDevToolsConnected(fn: () => void) {
+  return new Promise<void>((resolve) => {
+    if (devtoolsState.connected) {
+      fn()
+      resolve()
+    }
+
+    devtoolsContext.hooks.hook(DevToolsMessagingHookKeys.DEVTOOLS_CONNECTED_UPDATED, ({ state }) => {
+      if (state.connected) {
+        fn()
+        resolve()
+      }
+    })
+  })
+}
+
+export function addCustomTab(tab: CustomTab) {
+  const tabs = global.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__
+  if (tabs.some((t: CustomTab) => t.name === tab.name))
+    return
+
+  tabs.push(tab)
+  updateAllStates()
+}
+
+export function addCustomCommand(action: CustomCommand) {
+  const commands = global.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__
+  if (commands.some((t: CustomCommand) => t.id === action.id))
+    return
+
+  commands.push(action)
+  updateAllStates()
+}
+
+export function removeCustomCommand(actionId: string) {
+  const commands = global.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__
+
+  const index = commands.findIndex(t => t.id === actionId)
+  if (index === -1)
+    return
+
+  commands.splice(index, 1)
+  updateAllStates()
+}
+
+export function toggleClientConnected(state: boolean) {
+  updateDevToolsState({ clientConnected: state })
+}
diff --git a/packages/devtools-kit/src/ctx/timeline.ts b/packages/devtools-kit/src/ctx/timeline.ts
new file mode 100644
index 00000000..7b7224ea
--- /dev/null
+++ b/packages/devtools-kit/src/ctx/timeline.ts
@@ -0,0 +1,24 @@
+import { target } from '@vue/devtools-shared'
+import type { PluginDescriptor, TimelineLayerOptions } from '../types'
+import { getAppRecord } from '../core/component/utils'
+
+interface DevToolsKitTimelineLayer extends TimelineLayerOptions {
+  appRecord: unknown
+  descriptorId: string
+}
+
+target.__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS ??= []
+
+export const devtoolsTimelineLayers = new Proxy<DevToolsKitTimelineLayer[]>(target.__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS, {
+  get(target, prop, receiver) {
+    return Reflect.get(target, prop, receiver)
+  },
+})
+
+export function addTimelineLayer(options: TimelineLayerOptions, descriptor: PluginDescriptor) {
+  devtoolsTimelineLayers.push({
+    ...options,
+    descriptorId: descriptor.id,
+    appRecord: getAppRecord(descriptor.app),
+  })
+}
diff --git a/packages/devtools-kit/src/index.ts b/packages/devtools-kit/src/index.ts
index e63f2b92..c49ef881 100644
--- a/packages/devtools-kit/src/index.ts
+++ b/packages/devtools-kit/src/index.ts
@@ -1,42 +1,33 @@
-import { initDevTools, onDevToolsClientConnected, onDevToolsConnected } from './core'
-import { hook } from './hook'
-import { devtoolsContext, devtoolsState, setDevToolsEnv } from './state'
-import { setupDevToolsPlugin } from './api'
-import { addCustomTab } from './core/custom-tab'
-import { addCustomCommand, removeCustomCommand } from './core/custom-command'
+import { initDevTools, onDevToolsClientConnected } from './core'
 import { toggleComponentInspectorEnabled } from './core/component-inspector'
+import { setupDevToolsPlugin } from './core/plugin'
+import { addCustomCommand, addCustomTab, devtoolsContext, removeCustomCommand } from './ctx'
 import { toggleHighPerfMode } from './core/high-perf-mode'
 import { setOpenInEditorBaseUrl } from './core/open-in-editor'
+import { hook } from './hook'
 
-export type * from './core/custom-tab'
-export type * from './core/custom-command'
-export type * from './core/timeline'
+export * from './core'
+export * from './core/plugin'
+export * from './ctx'
+export * from './messaging'
+export type * from './types'
 export type * from './core/open-in-editor'
 export type * from './core/component-highlighter'
-export type * from './core/component/types'
 export type * from './core/component-inspector'
-export type * from './core/inspector'
-export type * from './types'
-
-export interface DevToolsType {
-  state: typeof devtoolsState
-  context: typeof devtoolsContext
-  hook: typeof hook
-  init: typeof initDevTools
-  get api(): typeof devtoolsContext.api
-
-}
-
+export type * from './core/component/types'
 export { parse, stringify } from './shared'
 export { formatInspectorStateValue, getInspectorStateValueType, getRaw, toEdit, toSubmit } from './core/component/state/format'
 export { UNDEFINED, INFINITY, NAN, NEGATIVE_INFINITY } from './core/component/state/constants'
 export { isPlainObject } from './core/component/state/is'
 
 export const devtools = {
-  state: devtoolsState,
-  context: devtoolsContext,
   hook,
-  init: initDevTools,
+  init: () => {
+    initDevTools()
+  },
+  get ctx() {
+    return devtoolsContext
+  },
   get api() {
     return devtoolsContext.api
   },
@@ -44,12 +35,10 @@ export const devtools = {
 
 export {
   onDevToolsClientConnected,
-  onDevToolsConnected,
   addCustomTab,
   addCustomCommand,
   removeCustomCommand,
   setupDevToolsPlugin,
-  setDevToolsEnv,
   toggleComponentInspectorEnabled,
   toggleHighPerfMode,
   setOpenInEditorBaseUrl,
diff --git a/packages/devtools-kit/src/messaging/index.ts b/packages/devtools-kit/src/messaging/index.ts
new file mode 100644
index 00000000..c7a309a3
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/index.ts
@@ -0,0 +1,163 @@
+import { BirpcReturn, createBirpc, createBirpcGroup } from 'birpc'
+import type { BirpcGroup, BirpcOptions, ChannelOptions } from 'birpc'
+import { target } from '@vue/devtools-shared'
+import { MergeableChannelOptions } from './types'
+import {
+  createBroadcastChannel,
+  createElectronClientChannel,
+  createElectronProxyChannel,
+  createElectronServerChannel,
+  createExtensionClientChannel,
+  createExtensionProxyChannel,
+  createExtensionServerChannel,
+  createIframeClientChannel,
+  createIframeServerChannel,
+  createViteClientChannel,
+  createViteServerChannel,
+} from './presets'
+
+export type Presets = 'iframe' | 'electron' | 'vite' | 'broadcast' | 'extension'
+export {
+  setElectronClientContext,
+  setElectronServerContext,
+  setElectronProxyContext,
+  setViteClientContext,
+  setViteServerContext,
+  setIframeServerContext,
+  setExtensionClientContext,
+  getExtensionClientContext,
+} from './presets'
+export interface CreateRpcClientOptions<RemoteFunctions> {
+  options?: BirpcOptions<RemoteFunctions>
+  preset?: Presets
+  channel?: ChannelOptions
+}
+
+export interface CreateRpcServerOptions<RemoteFunctions> {
+  options?: BirpcOptions<RemoteFunctions>
+  preset?: Presets
+  channel?: ChannelOptions
+}
+
+target.__VUE_DEVTOOLS_KIT_MESSAGE_CHANNELS__ ??= []
+target.__VUE_DEVTOOLS_KIT_RPC_CLIENT__ ??= null!
+target.__VUE_DEVTOOLS_KIT_RPC_SERVER__ ??= null!
+target.__VUE_DEVTOOLS_KIT_VITE_RPC_CLIENT__ ??= null!
+target.__VUE_DEVTOOLS_KIT_VITE_RPC_SERVER__ ??= null!
+target.__VUE_DEVTOOLS_KIT_BROADCAST_RPC_SERVER__ ??= null!
+
+function setRpcClientToGlobal<R, L>(rpc: BirpcReturn<R, L>) {
+  target.__VUE_DEVTOOLS_KIT_RPC_CLIENT__ = rpc
+}
+
+export function setRpcServerToGlobal<R, L >(rpc: BirpcGroup<R, L>) {
+  target.__VUE_DEVTOOLS_KIT_RPC_SERVER__ = rpc
+}
+
+export function getRpcClient<R, L extends object = Record<string, never>>(): BirpcReturn<R, L> {
+  return target.__VUE_DEVTOOLS_KIT_RPC_CLIENT__!
+}
+
+export function getRpcServer<R, L extends object = Record<string, never>>(): BirpcGroup<R, L> {
+  return target.__VUE_DEVTOOLS_KIT_RPC_SERVER__!
+}
+
+export function setViteRpcClientToGlobal<R, L>(rpc: BirpcReturn<R, L>) {
+  target.__VUE_DEVTOOLS_KIT_VITE_RPC_CLIENT__ = rpc
+}
+
+export function setViteRpcServerToGlobal<R, L >(rpc: BirpcGroup<R, L>) {
+  target.__VUE_DEVTOOLS_KIT_VITE_RPC_SERVER__ = rpc
+}
+
+export function getViteRpcClient<R, L extends object = Record<string, never>>(): BirpcReturn<R, L> {
+  return target.__VUE_DEVTOOLS_KIT_VITE_RPC_CLIENT__!
+}
+
+export function getViteRpcServer<R, L extends object = Record<string, never>>(): BirpcGroup<R, L> {
+  return target.__VUE_DEVTOOLS_KIT_VITE_RPC_SERVER__!
+}
+
+function getChannel(preset: Presets, host: 'client' | 'proxy' | 'server' = 'client'): MergeableChannelOptions {
+  const channel = {
+    iframe: {
+      client: createIframeClientChannel,
+      server: createIframeServerChannel,
+    }[host],
+    electron: {
+      client: createElectronClientChannel,
+      proxy: createElectronProxyChannel,
+      server: createElectronServerChannel,
+    }[host],
+    vite: {
+      client: createViteClientChannel,
+      server: createViteServerChannel,
+    }[host],
+    broadcast: {
+      client: createBroadcastChannel,
+      server: createBroadcastChannel,
+    }[host],
+    extension: {
+      client: createExtensionClientChannel,
+      proxy: createExtensionProxyChannel,
+      server: createExtensionServerChannel,
+    }[host],
+  }[preset]
+  return channel()
+}
+
+export function createRpcClient<RemoteFunctions = Record<string, never>, LocalFunctions extends object = Record<string, never>>(functions: LocalFunctions, options: CreateRpcClientOptions<RemoteFunctions> = {}) {
+  const { channel: _channel, options: _options, preset } = options
+
+  const channel = preset ? getChannel(preset)! : _channel!
+  const rpc = createBirpc<RemoteFunctions, LocalFunctions>(functions, {
+    ..._options,
+    ...channel,
+    timeout: -1,
+  })
+
+  // special case for vite
+  if (preset === 'vite') {
+    setViteRpcClientToGlobal<RemoteFunctions, LocalFunctions>(rpc)
+    return
+  }
+
+  setRpcClientToGlobal<RemoteFunctions, LocalFunctions>(rpc)
+  return rpc
+}
+
+export function createRpcServer<RemoteFunctions = Record<string, never>, LocalFunctions extends object = Record<string, never>>(functions: LocalFunctions, options: CreateRpcServerOptions<RemoteFunctions> = {}) {
+  const { channel: _channel, options: _options, preset } = options
+  const channel = preset ? getChannel(preset, 'server')! : _channel!
+
+  const rpcServer = getRpcServer<RemoteFunctions, LocalFunctions>()
+  if (!rpcServer) {
+    const group = createBirpcGroup<RemoteFunctions, LocalFunctions>(functions, [channel], {
+      ..._options,
+      timeout: -1,
+    })
+
+    // special case for vite
+    if (preset === 'vite') {
+      setViteRpcServerToGlobal(group)
+      return
+    }
+
+    setRpcServerToGlobal(group)
+  }
+  else {
+    rpcServer.updateChannels((channels) => {
+      channels.push(channel)
+    })
+  }
+}
+
+export function createRpcProxy<RemoteFunctions = Record<string, never>, LocalFunctions extends object = Record<string, never>>(options: CreateRpcClientOptions<RemoteFunctions> = {}) {
+  const { channel: _channel, options: _options, preset } = options
+  const channel = preset ? getChannel(preset, 'proxy')! : _channel!
+  return createBirpc<RemoteFunctions, LocalFunctions>({} as LocalFunctions, {
+    ..._options,
+    ...channel,
+    timeout: -1,
+  })
+}
diff --git a/packages/devtools-kit/src/messaging/presets/broadcast-channel/context.ts b/packages/devtools-kit/src/messaging/presets/broadcast-channel/context.ts
new file mode 100644
index 00000000..95d3957b
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/broadcast-channel/context.ts
@@ -0,0 +1 @@
+export const __DEVTOOLS_KIT_BROADCAST_MESSAGING_EVENT_KEY = '__devtools-kit-broadcast-messaging-event-key__'
diff --git a/packages/devtools-kit/src/messaging/presets/broadcast-channel/index.ts b/packages/devtools-kit/src/messaging/presets/broadcast-channel/index.ts
new file mode 100644
index 00000000..53db9d1b
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/broadcast-channel/index.ts
@@ -0,0 +1,26 @@
+import SuperJSON from 'superjson'
+import { MergeableChannelOptions } from '../../types'
+import { __DEVTOOLS_KIT_BROADCAST_MESSAGING_EVENT_KEY } from './context'
+
+const BROADCAST_CHANNEL_NAME = '__devtools-kit:broadcast-channel__'
+
+export function createBroadcastChannel(): MergeableChannelOptions {
+  const channel = new BroadcastChannel(BROADCAST_CHANNEL_NAME)
+
+  return {
+    post: (data) => {
+      channel.postMessage(SuperJSON.stringify({
+        event: __DEVTOOLS_KIT_BROADCAST_MESSAGING_EVENT_KEY,
+        data,
+      }))
+    },
+    on: (handler) => {
+      channel.onmessage = (event) => {
+        const parsed = SuperJSON.parse<{ event: string, data: unknown }>(event.data)
+        if (parsed.event === __DEVTOOLS_KIT_BROADCAST_MESSAGING_EVENT_KEY) {
+          handler(parsed.data)
+        }
+      }
+    },
+  }
+}
diff --git a/packages/devtools-kit/src/messaging/presets/electron/client.ts b/packages/devtools-kit/src/messaging/presets/electron/client.ts
new file mode 100644
index 00000000..0503bd15
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/electron/client.ts
@@ -0,0 +1,17 @@
+import { SuperJSON } from 'superjson'
+import { MergeableChannelOptions } from '../../types'
+import { __DEVTOOLS_KIT_ELECTRON_MESSAGING_EVENT_KEY__, getElectronClientContext } from './context'
+
+export function createElectronClientChannel(): MergeableChannelOptions {
+  const socket = getElectronClientContext()
+  return {
+    post: (data) => {
+      socket.emit(__DEVTOOLS_KIT_ELECTRON_MESSAGING_EVENT_KEY__.CLIENT_TO_PROXY, SuperJSON.stringify(data))
+    },
+    on: (handler) => {
+      socket.on(__DEVTOOLS_KIT_ELECTRON_MESSAGING_EVENT_KEY__.PROXY_TO_CLIENT, (e) => {
+        handler(SuperJSON.parse(e))
+      })
+    },
+  }
+}
diff --git a/packages/devtools-kit/src/messaging/presets/electron/context.ts b/packages/devtools-kit/src/messaging/presets/electron/context.ts
new file mode 100644
index 00000000..c3f58319
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/electron/context.ts
@@ -0,0 +1,51 @@
+import { target } from '@vue/devtools-shared'
+
+interface EventEmitter {
+  on: (name: string, handler: (data: any) => void) => void
+  send: (name: string, ...args: any[]) => void
+  emit: (name: string, ...args: any[]) => void
+}
+interface ElectronClientContext extends EventEmitter {}
+interface ElectronProxyContext extends EventEmitter {}
+interface ElectronServerContext extends EventEmitter {}
+
+export const __ELECTRON_CLIENT_CONTEXT__ = 'electron:client-context'
+export const __ELECTRON_RPOXY_CONTEXT__ = 'electron:proxy-context'
+export const __ELECTRON_SERVER_CONTEXT__ = 'electron:server-context'
+
+export const __DEVTOOLS_KIT_ELECTRON_MESSAGING_EVENT_KEY__ = {
+  // client
+  CLIENT_TO_PROXY: 'client->proxy', // on: proxy->client
+  // proxy
+  PROXY_TO_CLIENT: 'proxy->client', // on: server->proxy
+  PROXY_TO_SERVER: 'proxy->server', // on: client->proxy
+  // server
+  SERVER_TO_PROXY: 'server->proxy', // on: proxy->server
+}
+
+// client context
+export function getElectronClientContext(): ElectronClientContext {
+  return target[__ELECTRON_CLIENT_CONTEXT__]
+}
+
+export function setElectronClientContext(context: ElectronClientContext) {
+  target[__ELECTRON_CLIENT_CONTEXT__] = context
+}
+
+// proxy context
+export function getElectronProxyContext(): ElectronProxyContext {
+  return target[__ELECTRON_RPOXY_CONTEXT__]
+}
+
+export function setElectronProxyContext(context: ElectronProxyContext) {
+  target[__ELECTRON_RPOXY_CONTEXT__] = context
+}
+
+// server context
+export function getElectronServerContext(): ElectronServerContext {
+  return target[__ELECTRON_SERVER_CONTEXT__]
+}
+
+export function setElectronServerContext(context: ElectronServerContext) {
+  target[__ELECTRON_SERVER_CONTEXT__] = context
+}
diff --git a/packages/devtools-kit/src/messaging/presets/electron/index.ts b/packages/devtools-kit/src/messaging/presets/electron/index.ts
new file mode 100644
index 00000000..eec02b57
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/electron/index.ts
@@ -0,0 +1,4 @@
+export * from './context'
+export * from './client'
+export * from './proxy'
+export * from './server'
diff --git a/packages/devtools-kit/src/messaging/presets/electron/proxy.ts b/packages/devtools-kit/src/messaging/presets/electron/proxy.ts
new file mode 100644
index 00000000..6623b075
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/electron/proxy.ts
@@ -0,0 +1,21 @@
+import { MergeableChannelOptions } from '../../types'
+import { __DEVTOOLS_KIT_ELECTRON_MESSAGING_EVENT_KEY__, getElectronProxyContext } from './context'
+
+export function createElectronProxyChannel(): MergeableChannelOptions {
+  const socket = getElectronProxyContext()
+  return {
+    post: (data) => {
+    },
+    on: (handler) => {
+      socket.on(__DEVTOOLS_KIT_ELECTRON_MESSAGING_EVENT_KEY__.SERVER_TO_PROXY, (data) => {
+        // @ts-expect-error skip type check
+        socket.broadcast.emit(__DEVTOOLS_KIT_ELECTRON_MESSAGING_EVENT_KEY__.PROXY_TO_CLIENT, data)
+      })
+
+      socket.on(__DEVTOOLS_KIT_ELECTRON_MESSAGING_EVENT_KEY__.CLIENT_TO_PROXY, (data) => {
+        // @ts-expect-error skip type check
+        socket.broadcast.emit(__DEVTOOLS_KIT_ELECTRON_MESSAGING_EVENT_KEY__.PROXY_TO_SERVER, data)
+      })
+    },
+  }
+}
diff --git a/packages/devtools-kit/src/messaging/presets/electron/server.ts b/packages/devtools-kit/src/messaging/presets/electron/server.ts
new file mode 100644
index 00000000..1b731ba9
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/electron/server.ts
@@ -0,0 +1,17 @@
+import { SuperJSON } from 'superjson'
+import { MergeableChannelOptions } from '../../types'
+import { __DEVTOOLS_KIT_ELECTRON_MESSAGING_EVENT_KEY__, getElectronServerContext } from './context'
+
+export function createElectronServerChannel(): MergeableChannelOptions {
+  const socket = getElectronServerContext()
+  return {
+    post: (data) => {
+      socket.emit(__DEVTOOLS_KIT_ELECTRON_MESSAGING_EVENT_KEY__.SERVER_TO_PROXY, SuperJSON.stringify(data))
+    },
+    on: (handler) => {
+      socket.on(__DEVTOOLS_KIT_ELECTRON_MESSAGING_EVENT_KEY__.PROXY_TO_SERVER, (data) => {
+        handler(SuperJSON.parse(data))
+      })
+    },
+  }
+}
diff --git a/packages/devtools-kit/src/messaging/presets/extension/client.ts b/packages/devtools-kit/src/messaging/presets/extension/client.ts
new file mode 100644
index 00000000..2627dbdf
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/extension/client.ts
@@ -0,0 +1,54 @@
+import { SuperJSON } from 'superjson'
+import { MergeableChannelOptions } from '../../types'
+import { setExtensionClientContext } from './context'
+
+export function createExtensionClientChannel(): MergeableChannelOptions {
+  // const port = getExtensionClientContext()
+
+  let disconnected = false
+  let port: chrome.runtime.Port = null!
+  let reconnectTimer: NodeJS.Timeout | null = null
+  let onMessageHandler: (data: any) => void = null!
+
+  function connect() {
+    try {
+      clearTimeout(reconnectTimer!)
+      port = chrome.runtime.connect({
+        name: `${chrome.devtools.inspectedWindow.tabId}`,
+      })
+
+      setExtensionClientContext(port)
+      disconnected = false
+      port?.onMessage.addListener(onMessageHandler!)
+
+      port.onDisconnect.addListener(() => {
+        disconnected = true
+        port?.onMessage.removeListener(onMessageHandler!)
+        reconnectTimer = setTimeout(connect, 1000)
+      })
+    }
+    catch (e) {
+      disconnected = true
+    }
+  }
+
+  connect()
+
+  return {
+    post: (data) => {
+      if (disconnected) {
+        return
+      }
+      port?.postMessage(SuperJSON.stringify(data))
+    },
+    on: (handler) => {
+      onMessageHandler = (data) => {
+        if (disconnected) {
+          return
+        }
+        handler(SuperJSON.parse(data))
+      }
+      port?.onMessage.addListener(onMessageHandler!)
+    },
+  }
+}
diff --git a/packages/devtools-kit/src/messaging/presets/extension/context.ts b/packages/devtools-kit/src/messaging/presets/extension/context.ts
new file mode 100644
index 00000000..7896c9d8
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/extension/context.ts
@@ -0,0 +1,52 @@
+import { target } from '@vue/devtools-shared'
+
+interface EventEmitter {
+  onMessage: {
+    addListener: (listener: (name: string, ...args: any[]) => void) => void
+  }
+  postMessage: (name: string, ...args: any[]) => void
+}
+interface ExtensionClientContext extends EventEmitter {}
+interface ExtensionProxyContext extends EventEmitter {}
+interface ExtensionServerContext extends EventEmitter {}
+
+export const __EXTENSION_CLIENT_CONTEXT__ = 'electron:client-context'
+export const __EXTENSION_RPOXY_CONTEXT__ = 'electron:proxy-context'
+export const __EXTENSION_SERVER_CONTEXT__ = 'electron:server-context'
+
+export const __DEVTOOLS_KIT_EXTENSION_MESSAGING_EVENT_KEY__ = {
+  // client
+  CLIENT_TO_PROXY: 'client->proxy', // on: proxy->client
+  // proxy
+  PROXY_TO_CLIENT: 'proxy->client', // on: server->proxy
+  PROXY_TO_SERVER: 'proxy->server', // on: client->proxy
+  // server
+  SERVER_TO_PROXY: 'server->proxy', // on: proxy->server
+}
+
+// client context
+export function getExtensionClientContext(): ExtensionClientContext {
+  return target[__EXTENSION_CLIENT_CONTEXT__]
+}
+
+export function setExtensionClientContext(context: ExtensionClientContext) {
+  target[__EXTENSION_CLIENT_CONTEXT__] = context
+}
+
+// proxy context
+export function getExtensionProxyContext(): ExtensionProxyContext {
+  return target[__EXTENSION_RPOXY_CONTEXT__]
+}
+
+export function setExtensionProxyContext(context: ExtensionProxyContext) {
+  target[__EXTENSION_RPOXY_CONTEXT__] = context
+}
+
+// server context
+export function getExtensionServerContext(): ExtensionServerContext {
+  return target[__EXTENSION_SERVER_CONTEXT__]
+}
+
+export function setExtensionServerContext(context: ExtensionServerContext) {
+  target[__EXTENSION_SERVER_CONTEXT__] = context
+}
diff --git a/packages/devtools-kit/src/messaging/presets/extension/index.ts b/packages/devtools-kit/src/messaging/presets/extension/index.ts
new file mode 100644
index 00000000..eec02b57
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/extension/index.ts
@@ -0,0 +1,4 @@
+export * from './context'
+export * from './client'
+export * from './proxy'
+export * from './server'
diff --git a/packages/devtools-kit/src/messaging/presets/extension/proxy.ts b/packages/devtools-kit/src/messaging/presets/extension/proxy.ts
new file mode 100644
index 00000000..698f0f54
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/extension/proxy.ts
@@ -0,0 +1,48 @@
+import { SuperJSON } from 'superjson'
+import { MergeableChannelOptions } from '../../types'
+import { __DEVTOOLS_KIT_EXTENSION_MESSAGING_EVENT_KEY__ } from './context'
+
+// This is a content-script that is injected only when the devtools are
+// activated. Because it is not injected using eval, it has full privilege
+// to the chrome runtime API. It serves as a proxy between the injected
+// user application and the Vue devtools panel.
+
+export function createExtensionProxyChannel(): MergeableChannelOptions {
+  const port = chrome.runtime.connect({
+    name: 'content-script',
+  })
+
+  function sendMessageToUserApp(payload: any) {
+    window.postMessage({
+      source: __DEVTOOLS_KIT_EXTENSION_MESSAGING_EVENT_KEY__.PROXY_TO_SERVER,
+      payload,
+    }, '*')
+  }
+
+  function sendMessageToDevToolsClient(e: MessageEvent) {
+    if (e.data && e.data.source === __DEVTOOLS_KIT_EXTENSION_MESSAGING_EVENT_KEY__.SERVER_TO_PROXY) {
+      port.postMessage(e.data.payload)
+    }
+  }
+
+  port.onMessage.addListener(sendMessageToUserApp)
+  window.addEventListener('message', sendMessageToDevToolsClient)
+  port.onDisconnect.addListener(() => {
+    window.removeEventListener('message', sendMessageToDevToolsClient)
+    sendMessageToUserApp(SuperJSON.stringify({
+      event: 'shutdown',
+    }))
+  })
+
+  sendMessageToUserApp(SuperJSON.stringify({
+    event: 'init',
+  }))
+
+  return {
+    post: (data) => {
+    },
+    on: (handler) => {
+
+    },
+  }
+}
diff --git a/packages/devtools-kit/src/messaging/presets/extension/server.ts b/packages/devtools-kit/src/messaging/presets/extension/server.ts
new file mode 100644
index 00000000..a9367dd8
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/extension/server.ts
@@ -0,0 +1,25 @@
+import { SuperJSON } from 'superjson'
+import { MergeableChannelOptions } from '../../types'
+import { __DEVTOOLS_KIT_EXTENSION_MESSAGING_EVENT_KEY__ } from './context'
+
+export function createExtensionServerChannel(): MergeableChannelOptions {
+  return {
+    post: (data) => {
+      window.postMessage({
+        source: __DEVTOOLS_KIT_EXTENSION_MESSAGING_EVENT_KEY__.SERVER_TO_PROXY,
+        payload: SuperJSON.stringify(data),
+      }, '*')
+    },
+    on: (handler) => {
+      const listener = (event: MessageEvent) => {
+        if (event.data.source === __DEVTOOLS_KIT_EXTENSION_MESSAGING_EVENT_KEY__.PROXY_TO_SERVER && event.data.payload) {
+          handler(SuperJSON.parse(event.data.payload))
+        }
+      }
+      window.addEventListener('message', listener)
+      return () => {
+        window.removeEventListener('message', listener)
+      }
+    },
+  }
+}
diff --git a/packages/devtools-kit/src/messaging/presets/iframe/client.ts b/packages/devtools-kit/src/messaging/presets/iframe/client.ts
new file mode 100644
index 00000000..57a3e63d
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/iframe/client.ts
@@ -0,0 +1,31 @@
+import { isBrowser } from '@vue/devtools-shared'
+import SuperJSON from 'superjson'
+import { MergeableChannelOptions } from '../../types'
+import { __DEVTOOLS_KIT_IFRAME_MESSAGING_EVENT_KEY } from './context'
+
+export function createIframeClientChannel(): MergeableChannelOptions {
+  if (!isBrowser) {
+    return {
+      post: (data) => {},
+      on: (handler) => {},
+    }
+  }
+
+  return {
+    post: data => window.parent.postMessage(SuperJSON.stringify({
+      event: __DEVTOOLS_KIT_IFRAME_MESSAGING_EVENT_KEY,
+      data,
+    }), '*'),
+    on: handler => window.addEventListener('message', (event) => {
+      try {
+        const parsed = SuperJSON.parse<{ event: string, data: unknown }>(event.data)
+        if (event.source === window.parent && parsed.event === __DEVTOOLS_KIT_IFRAME_MESSAGING_EVENT_KEY) {
+          handler(parsed.data)
+        }
+      }
+      catch (e) {
+
+      }
+    }),
+  }
+}
diff --git a/packages/devtools-kit/src/messaging/presets/iframe/context.ts b/packages/devtools-kit/src/messaging/presets/iframe/context.ts
new file mode 100644
index 00000000..8f03e4aa
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/iframe/context.ts
@@ -0,0 +1,12 @@
+import { target } from '@vue/devtools-shared'
+
+export const __DEVTOOLS_KIT_IFRAME_MESSAGING_EVENT_KEY = '__devtools-kit-iframe-messaging-event-key__'
+
+export const __IFRAME_SERVER_CONTEXT__ = 'iframe:server-context'
+export function getIframeServerContext(): HTMLIFrameElement {
+  return target[__IFRAME_SERVER_CONTEXT__]
+}
+
+export function setIframeServerContext(context: HTMLIFrameElement) {
+  target[__IFRAME_SERVER_CONTEXT__] = context
+}
diff --git a/packages/core/src/vite-bridge/index.ts b/packages/devtools-kit/src/messaging/presets/iframe/index.ts
similarity index 61%
rename from packages/core/src/vite-bridge/index.ts
rename to packages/devtools-kit/src/messaging/presets/iframe/index.ts
index a5a74f07..0cfe06cc 100644
--- a/packages/core/src/vite-bridge/index.ts
+++ b/packages/devtools-kit/src/messaging/presets/iframe/index.ts
@@ -1,3 +1,3 @@
 export * from './client'
 export * from './server'
-export * from './module-types'
+export * from './context'
diff --git a/packages/devtools-kit/src/messaging/presets/iframe/server.ts b/packages/devtools-kit/src/messaging/presets/iframe/server.ts
new file mode 100644
index 00000000..a8db7a59
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/iframe/server.ts
@@ -0,0 +1,60 @@
+import SuperJSON from 'superjson'
+
+import { isBrowser } from '@vue/devtools-shared'
+import { MergeableChannelOptions } from '../../types'
+import { __DEVTOOLS_KIT_IFRAME_MESSAGING_EVENT_KEY, getIframeServerContext } from './context'
+
+export function createIframeServerChannel(): MergeableChannelOptions {
+  if (!isBrowser) {
+    return {
+      post: (data) => {},
+      on: (handler) => {},
+    }
+  }
+
+  // let connected = false
+  // let channel = new MessageChannel()
+  // let onMessageHandler: (data: any) => void
+
+  // function reconnect() {
+  //   channel.port1.close()
+  //   channel.port2.close()
+  //   channel = new MessageChannel()
+  //   channel.port1.onmessage = onMessageHandler
+  // }
+
+  // window.addEventListener('message', (event) => {
+  //   if (event.data === __DEVTOOLS_KIT_IFRAME_MESSAGING_EVENT_KEY) {
+  //     if (connected) {
+  //       reconnect()
+  //     }
+  //     // @ts-expect-error type check
+  //     event.source?.postMessage('port', '*', [channel.port2])
+  //     connected = true
+  //   }
+  // })
+
+  return {
+    post: (data) => {
+      const iframe = getIframeServerContext()
+      iframe?.contentWindow?.postMessage(SuperJSON.stringify({
+        event: __DEVTOOLS_KIT_IFRAME_MESSAGING_EVENT_KEY,
+        data,
+      }), '*')
+    },
+    on: (handler) => {
+      window.addEventListener('message', (event) => {
+        const iframe = getIframeServerContext()
+        try {
+          const parsed = SuperJSON.parse<{ event: string, data: unknown }>(event.data)
+          if (event.source === iframe?.contentWindow && parsed.event === __DEVTOOLS_KIT_IFRAME_MESSAGING_EVENT_KEY) {
+            handler(parsed.data)
+          }
+        }
+        catch (e) {
+
+        }
+      })
+    },
+  }
+}
diff --git a/packages/devtools-kit/src/messaging/presets/index.ts b/packages/devtools-kit/src/messaging/presets/index.ts
new file mode 100644
index 00000000..3df0a974
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/index.ts
@@ -0,0 +1,6 @@
+export * from './iframe'
+export * from './broadcast-channel'
+export * from './vite'
+export * from './ws'
+export * from './electron'
+export * from './extension'
diff --git a/packages/devtools-kit/src/messaging/presets/vite/client.ts b/packages/devtools-kit/src/messaging/presets/vite/client.ts
new file mode 100644
index 00000000..18822611
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/vite/client.ts
@@ -0,0 +1,17 @@
+import SuperJSON from 'superjson'
+import { MergeableChannelOptions } from '../../types'
+import { __DEVTOOLS_KIT_VITE_MESSAGING_EVENT_KEY, getViteClientContext } from './context'
+
+export function createViteClientChannel(): MergeableChannelOptions {
+  const client = getViteClientContext()
+  return {
+    post: (data) => {
+      client?.send(__DEVTOOLS_KIT_VITE_MESSAGING_EVENT_KEY, SuperJSON.stringify(data))
+    },
+    on: (handler) => {
+      client?.on(__DEVTOOLS_KIT_VITE_MESSAGING_EVENT_KEY, (event) => {
+        handler(SuperJSON.parse(event))
+      })
+    },
+  }
+}
diff --git a/packages/devtools-kit/src/messaging/presets/vite/context.ts b/packages/devtools-kit/src/messaging/presets/vite/context.ts
new file mode 100644
index 00000000..871d9db9
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/vite/context.ts
@@ -0,0 +1,33 @@
+import { target } from '@vue/devtools-shared'
+
+interface EventEmitter {
+  on: (name: string, handler: (data: any) => void) => void
+  send: (name: string, ...args: any[]) => void
+}
+interface ViteClientContext extends EventEmitter {
+}
+
+interface ViteDevServer {
+  hot?: EventEmitter
+  ws?: EventEmitter
+}
+
+export const __DEVTOOLS_KIT_VITE_MESSAGING_EVENT_KEY = '__devtools-kit-vite-messaging-event-key__'
+export const __VITE_CLIENT_CONTEXT__ = 'vite:client-context'
+export const __VITE_SERVER_CONTEXT__ = 'vite:server-context'
+
+export function getViteClientContext(): ViteClientContext {
+  return target[__VITE_CLIENT_CONTEXT__]
+}
+
+export function setViteClientContext(context: ViteClientContext) {
+  target[__VITE_CLIENT_CONTEXT__] = context
+}
+
+export function getViteServerContext(): ViteDevServer {
+  return target[__VITE_SERVER_CONTEXT__]
+}
+
+export function setViteServerContext(context: ViteDevServer) {
+  target[__VITE_SERVER_CONTEXT__] = context
+}
diff --git a/packages/devtools-kit/src/messaging/presets/vite/index.ts b/packages/devtools-kit/src/messaging/presets/vite/index.ts
new file mode 100644
index 00000000..0cfe06cc
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/vite/index.ts
@@ -0,0 +1,3 @@
+export * from './client'
+export * from './server'
+export * from './context'
diff --git a/packages/devtools-kit/src/messaging/presets/vite/server.ts b/packages/devtools-kit/src/messaging/presets/vite/server.ts
new file mode 100644
index 00000000..bcfad997
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/vite/server.ts
@@ -0,0 +1,16 @@
+import SuperJSON from 'superjson'
+import { MergeableChannelOptions } from '../../types'
+import { __DEVTOOLS_KIT_VITE_MESSAGING_EVENT_KEY, getViteServerContext } from './context'
+
+export function createViteServerChannel(): MergeableChannelOptions {
+  const viteServer = getViteServerContext()
+  // `server.hot` (Vite 5.1+) > `server.ws`
+  const ws = viteServer.hot ?? viteServer.ws
+
+  return {
+    post: data => ws?.send(__DEVTOOLS_KIT_VITE_MESSAGING_EVENT_KEY, SuperJSON.stringify(data)),
+    on: handler => ws?.on(__DEVTOOLS_KIT_VITE_MESSAGING_EVENT_KEY, (event) => {
+      handler(SuperJSON.parse(event))
+    }),
+  }
+}
diff --git a/packages/devtools-kit/src/messaging/presets/ws/client.ts b/packages/devtools-kit/src/messaging/presets/ws/client.ts
new file mode 100644
index 00000000..253e8386
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/ws/client.ts
@@ -0,0 +1,25 @@
+import SuperJSON from 'superjson'
+import { MergeableChannelOptions } from '../../types'
+import { getWSClientContext } from './context'
+
+export function createWSClientChannel(): MergeableChannelOptions {
+  const ws = getWSClientContext()
+  return {
+    post: (data) => {
+      data = SuperJSON.stringify(data)
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(data)
+      }
+      else {
+        const handle = () => {
+          ws.send(data)
+          ws.removeEventListener('open', handle)
+        }
+        ws.addEventListener('open', handle)
+      }
+    },
+    on: handler => ws.addEventListener('message', (event) => {
+      handler(SuperJSON.parse(event.data))
+    }),
+  }
+}
diff --git a/packages/devtools-kit/src/messaging/presets/ws/context.ts b/packages/devtools-kit/src/messaging/presets/ws/context.ts
new file mode 100644
index 00000000..3e47fdc4
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/ws/context.ts
@@ -0,0 +1,28 @@
+import { target } from '@vue/devtools-shared'
+
+interface EventEmitter {
+  on: (name: string, handler: (data: any) => void) => void
+  send: (name: string, ...args: any[]) => void
+}
+type WSClientContext = WebSocket
+interface WSServerContext extends EventEmitter {}
+
+export const __DEVTOOLS_KIT_WS_MESSAGING_EVENT_KEY = '__devtools-kit-ws-messaging-event-key__'
+export const __WS_CLIENT_CONTEXT__ = 'ws:client-context'
+export const __WS_SERVER_CONTEXT__ = 'ws:server-context'
+
+export function getWSClientContext(): WSClientContext {
+  return target[__WS_CLIENT_CONTEXT__]
+}
+
+export function setWSClientContext(context: WSClientContext) {
+  target[__WS_CLIENT_CONTEXT__] = context
+}
+
+export function getWSServerContext(): WSServerContext {
+  return target[__WS_SERVER_CONTEXT__]
+}
+
+export function setWSServerContext(context: WSServerContext) {
+  target[__WS_SERVER_CONTEXT__] = context
+}
diff --git a/packages/devtools-kit/src/messaging/presets/ws/index.ts b/packages/devtools-kit/src/messaging/presets/ws/index.ts
new file mode 100644
index 00000000..0cfe06cc
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/ws/index.ts
@@ -0,0 +1,3 @@
+export * from './client'
+export * from './server'
+export * from './context'
diff --git a/packages/devtools-kit/src/messaging/presets/ws/server.ts b/packages/devtools-kit/src/messaging/presets/ws/server.ts
new file mode 100644
index 00000000..009562b0
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/presets/ws/server.ts
@@ -0,0 +1,14 @@
+import SuperJSON from 'superjson'
+
+import { MergeableChannelOptions } from '../../types'
+import { getWSServerContext } from './context'
+
+export function createWSServerChannel(): MergeableChannelOptions {
+  const ws = getWSServerContext()
+  return {
+    post: data => ws.send(SuperJSON.stringify(data)),
+    on: handler => ws.on('message', (data) => {
+      handler(SuperJSON.parse(data.toString()))
+    }),
+  }
+}
diff --git a/packages/devtools-kit/src/messaging/types/channel.ts b/packages/devtools-kit/src/messaging/types/channel.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/devtools-kit/src/messaging/types/index.ts b/packages/devtools-kit/src/messaging/types/index.ts
new file mode 100644
index 00000000..eac6a26c
--- /dev/null
+++ b/packages/devtools-kit/src/messaging/types/index.ts
@@ -0,0 +1,7 @@
+import type { ChannelOptions } from 'birpc'
+
+export type MergeableChannelOptions = Omit<ChannelOptions, 'serialize' | 'deserialize'>
+
+export type Channel = MergeableChannelOptions | {
+  channels: MergeableChannelOptions[]
+}
diff --git a/packages/devtools-kit/src/plugins/index.ts b/packages/devtools-kit/src/plugins/index.ts
deleted file mode 100644
index 452e5c21..00000000
--- a/packages/devtools-kit/src/plugins/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './component'
diff --git a/packages/devtools-kit/src/state/app-record.ts b/packages/devtools-kit/src/state/app-record.ts
deleted file mode 100644
index ee20f0e4..00000000
--- a/packages/devtools-kit/src/state/app-record.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { target } from '@vue/devtools-shared'
-import { AppRecord } from '../types'
-import { normalizeRouterInfo } from '../core/router'
-import { callConnectedUpdatedHook, callStateUpdatedHook, devtoolsState } from './state'
-import { devtoolsRouterInfo } from './router'
-import { devtoolsContext } from './context'
-
-interface DevToolsAppRecords {
-  value: AppRecord[]
-  active: AppRecord
-  activeId: string
-}
-
-export const devtoolsAppRecords = new Proxy<DevToolsAppRecords>(devtoolsState.appRecords as unknown as DevToolsAppRecords, {
-  get(_, property) {
-    if (property === 'value')
-      return devtoolsState.appRecords
-    else if (property === 'active')
-      return devtoolsState.activeAppRecord
-    else if (property === 'activeId')
-      return devtoolsState.activeAppRecordId
-  },
-  set(target, property, value) {
-    const oldState = { ...devtoolsState }
-
-    if (property === 'value') {
-      devtoolsState.appRecords = value
-    }
-
-    else if (property === 'active') {
-      const _value = value as AppRecord
-
-      // sync to context
-      devtoolsState.activeAppRecord = _value
-      devtoolsContext.appRecord = _value
-      devtoolsContext.api = _value.api!
-      // @ts-expect-error expected type
-      devtoolsContext.inspector = _value.inspector ?? []
-      normalizeRouterInfo(value, devtoolsState)
-      devtoolsContext.routerInfo = devtoolsRouterInfo
-    }
-
-    else if (property === 'activeId') {
-      devtoolsState.activeAppRecordId = value
-    }
-
-    callStateUpdatedHook(devtoolsState, oldState)
-    if (['connected', 'clientConnected'].includes(property.toString()) && oldState[property] !== value)
-      callConnectedUpdatedHook(devtoolsState, oldState)
-
-    return true
-  },
-})
-
-export const appRecordInfo = target.__VUE_DEVTOOLS_NEXT_APP_RECORD_INFO__ ??= {
-  id: 0,
-  appIds: new Set<string>(),
-}
diff --git a/packages/devtools-kit/src/state/context.ts b/packages/devtools-kit/src/state/context.ts
deleted file mode 100644
index b8404bb8..00000000
--- a/packages/devtools-kit/src/state/context.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { target as global } from '@vue/devtools-shared'
-import type { DevToolsContext } from '../types'
-import { ROUTER_KEY } from './router'
-
-const CONTEXT_KEY = '__VUE_DEVTOOLS_CONTEXT__'
-
-function initContextFactory() {
-  return {
-    appRecord: null,
-    api: null,
-    inspector: [],
-    timelineLayer: [],
-    routerInfo: {},
-    router: null,
-    activeInspectorTreeId: '',
-    componentPluginHookBuffer: [],
-  } as unknown as DevToolsContext
-}
-
-global[CONTEXT_KEY] ??= initContextFactory()
-
-export function resetDevToolsContext() {
-  global[CONTEXT_KEY] = initContextFactory()
-}
-
-export const devtoolsContext = new Proxy(global[CONTEXT_KEY], {
-  get(target, property) {
-    if (property === 'router')
-      return global[ROUTER_KEY]
-
-    else if (property === 'clear')
-      return resetDevToolsContext
-
-    return global[CONTEXT_KEY][property]
-  },
-  set(target, property, value) {
-    global[CONTEXT_KEY][property] = value
-    return true
-  },
-})
diff --git a/packages/devtools-kit/src/state/index.ts b/packages/devtools-kit/src/state/index.ts
deleted file mode 100644
index 49120dee..00000000
--- a/packages/devtools-kit/src/state/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './state'
-export * from './app-record'
-export * from './context'
-export * from './router'
-export * from './env'
diff --git a/packages/devtools-kit/src/state/state.ts b/packages/devtools-kit/src/state/state.ts
deleted file mode 100644
index c3265096..00000000
--- a/packages/devtools-kit/src/state/state.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { target as global } from '@vue/devtools-shared'
-import { debounce } from 'perfect-debounce'
-import type { DevToolsState } from '../types'
-import { DevToolsEvents, apiHooks } from '../api'
-
-export type { DevToolsState } from '../types'
-
-const STATE_KEY = '__VUE_DEVTOOLS_GLOBAL_STATE__'
-
-function initStateFactory() {
-  return {
-    connected: false,
-    clientConnected: false,
-    appRecords: [],
-    activeAppRecord: null,
-    selectedComponentId: null,
-    pluginBuffer: [],
-    tabs: [],
-    commands: [],
-    vitePluginDetected: false,
-    activeAppRecordId: null,
-    highPerfModeEnabled: false,
-  }
-}
-
-global[STATE_KEY] ??= initStateFactory()
-
-export function resetDevToolsState() {
-  global[STATE_KEY] = initStateFactory()
-}
-
-export const callStateUpdatedHook = debounce((state: DevToolsState, oldState: DevToolsState) => {
-  apiHooks.callHook(DevToolsEvents.DEVTOOLS_STATE_UPDATED, state, oldState)
-}, 80)
-
-export const callConnectedUpdatedHook = debounce((state: DevToolsState, oldState: DevToolsState) => {
-  apiHooks.callHook(DevToolsEvents.DEVTOOLS_CONNECTED_UPDATED, state, oldState)
-}, 80)
-
-export const devtoolsState: DevToolsState = new Proxy(global[STATE_KEY], {
-  get(target, property) {
-    return global[STATE_KEY][property]
-  },
-  deleteProperty(target, property) {
-    delete target[property]
-    return true
-  },
-  set(target, property, value) {
-    const oldState = { ...global[STATE_KEY] }
-
-    target[property] = value
-    // sync to global to ensure the state is consistent
-    global[STATE_KEY][property] = value
-
-    callStateUpdatedHook(global[STATE_KEY], oldState)
-    if (['connected', 'clientConnected'].includes(property.toString()) && oldState[property] !== value)
-      callConnectedUpdatedHook(global[STATE_KEY], oldState)
-
-    return true
-  },
-})
-
-Object.defineProperty(devtoolsState.tabs, 'push', {
-  configurable: true,
-  value(...items: unknown[]) {
-    const result = Array.prototype.push.apply(this, items)
-    devtoolsState.tabs = this
-    apiHooks.callHook(DevToolsEvents.CUSTOM_TABS_UPDATED, this)
-    return result
-  },
-})
-
-;['push', 'splice'].forEach((method) => {
-  Object.defineProperty(devtoolsState.commands, method, {
-    configurable: true,
-    value(...args: unknown[]) {
-      const result = Array.prototype[method].apply(this, args)
-      devtoolsState.commands = this
-      apiHooks.callHook(DevToolsEvents.CUSTOM_COMMANDS_UPDATED, this)
-      return result
-    },
-  })
-})
diff --git a/packages/devtools-kit/src/types/app.ts b/packages/devtools-kit/src/types/app.ts
index 6d1f3270..49acaa19 100644
--- a/packages/devtools-kit/src/types/app.ts
+++ b/packages/devtools-kit/src/types/app.ts
@@ -1,46 +1,6 @@
-import type { App, ComponentInternalInstance, ComponentOptions, SuspenseBoundary } from 'vue'
-import type { DevToolsPluginApi } from '../api'
+import type { ComponentInternalInstance, ComponentOptions, SuspenseBoundary } from 'vue'
 
-export type PluginApi = DevToolsPluginApi
-
-export declare type PluginSettingsItem = {
-  label: string
-  description?: string
-} & ({
-  type: 'boolean'
-  defaultValue: boolean
-} | {
-  type: 'choice'
-  defaultValue: string | number
-  options: {
-    value: string | number
-    label: string
-  }[]
-  component?: 'select' | 'button-group'
-} | {
-  type: 'text'
-  defaultValue: string
-})
-
-export interface PluginDescriptor {
-  id: string
-  label: string
-  app: App<any>
-  packageName?: string
-  homepage?: string
-  componentStateTypes?: string[]
-  logo?: string
-  disableAppScope?: boolean
-  disablePluginScope?: boolean
-  /**
-   * Run the plugin setup and expose the api even if the devtools is not opened yet.
-   * Useful to record timeline events early.
-   */
-  enableEarlyProxy?: boolean
-  settings?: Record<string, PluginSettingsItem>
-}
-
-export type PluginSetupFunction = (api: PluginApi) => void
+export type App = any
 
 export type VueAppInstance = ComponentInternalInstance & {
   type: {
@@ -82,23 +42,14 @@ export type VueAppInstance = ComponentInternalInstance & {
   setupState: Record<string, unknown>
   provides: Record<string | symbol, unknown>
   ctx: Record<string, unknown>
-} & App<any>
+} & App
 export interface AppRecord {
-  id: string | number
+  id: string
   name: string
   app?: App
   version?: string
   types?: Record<string, string | symbol>
   instanceMap: Map<string, VueAppInstance>
   rootInstance: VueAppInstance
-  api?: PluginApi
   routerId?: string
-  moduleDetectives?: {
-    vueQuery: boolean
-    vueRouter: boolean
-    veeValidate: boolean
-    pinia: boolean
-    vuex: boolean
-    vueI18n: boolean
-  }
 }
diff --git a/packages/devtools-kit/src/core/custom-command/index.ts b/packages/devtools-kit/src/types/command.ts
similarity index 64%
rename from packages/devtools-kit/src/core/custom-command/index.ts
rename to packages/devtools-kit/src/types/command.ts
index 69d940d7..04ab7504 100644
--- a/packages/devtools-kit/src/core/custom-command/index.ts
+++ b/packages/devtools-kit/src/types/command.ts
@@ -1,5 +1,3 @@
-import { devtoolsState } from '../../state'
-
 export interface CustomCommandAction {
   type: 'url'
   /**
@@ -34,18 +32,3 @@ export interface CustomCommand {
    */
   children?: Omit<CustomCommand, 'children'>[]
 }
-
-export function addCustomCommand(action: CustomCommand) {
-  if (devtoolsState.commands.some(t => t.id === action.id))
-    return
-
-  devtoolsState.commands.push(action)
-}
-
-export function removeCustomCommand(actionId: string) {
-  const index = devtoolsState.commands.findIndex(t => t.id === actionId)
-  if (index === -1)
-    return
-
-  devtoolsState.commands.splice(index, 1)
-}
diff --git a/packages/devtools-kit/src/types/component.ts b/packages/devtools-kit/src/types/component.ts
new file mode 100644
index 00000000..8b32bb23
--- /dev/null
+++ b/packages/devtools-kit/src/types/component.ts
@@ -0,0 +1,91 @@
+import type { InspectorNodeTag } from './inspector'
+
+export type ComponentInstance = any // @TODO
+
+export interface ComponentTreeNode {
+  uid: string | number
+  id: string
+  name: string
+  renderKey: string | number
+  inactive: boolean
+  isFragment: boolean
+  hasChildren: boolean
+  children: ComponentTreeNode[]
+  domOrder?: number[]
+  consoleId?: string
+  isRouterView?: boolean
+  macthedRouteSegment?: string
+  tags: InspectorNodeTag[]
+  autoOpen: boolean
+  meta?: any
+}
+
+type ComponentBuiltinCustomStateTypes = 'function' | 'map' | 'set' | 'reference' | 'component' | 'component-definition' | 'router' | 'store'
+
+interface ComponentCustomState extends ComponentStateBase {
+  value: CustomState
+}
+
+export interface StateBase {
+  key: string
+  value: any
+  editable?: boolean
+  objectType?: 'ref' | 'reactive' | 'computed' | 'other'
+  raw?: string
+}
+
+interface ComponentStateBase extends StateBase {
+  type: string
+}
+
+interface ComponentPropState extends ComponentStateBase {
+  meta?: {
+    type: string
+    required: boolean
+    /** Vue 1 only */
+    mode?: 'default' | 'sync' | 'once'
+  }
+}
+
+interface CustomState {
+  _custom: {
+    type: ComponentBuiltinCustomStateTypes | string
+    objectType?: string
+    display?: string
+    tooltip?: string
+    value?: any
+    abstract?: boolean
+    file?: string
+    uid?: number
+    readOnly?: boolean
+    /** Configure immediate child fields */
+    fields?: {
+      abstract?: boolean
+    }
+    id?: any
+    actions?: {
+      icon: string
+      tooltip?: string
+      action: () => void | Promise<void>
+    }[]
+    /** internal */
+    _reviveId?: number
+  }
+}
+
+export type ComponentState = ComponentStateBase | ComponentPropState | ComponentCustomState
+
+export interface InspectedComponentData {
+  id: string
+  name: string
+  file: string
+  state: ComponentState[]
+  functional?: boolean
+}
+
+export interface ComponentBounds {
+  left: number
+  top: number
+  width: number
+  height: number
+}
diff --git a/packages/devtools-kit/src/types/context.ts b/packages/devtools-kit/src/types/context.ts
deleted file mode 100644
index 503dc7ea..00000000
--- a/packages/devtools-kit/src/types/context.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { TimelineLayerItem } from '../core/timeline'
-import type { DevToolsPluginApi } from '../api'
-import type { Inspector } from '../core/inspector'
-import type { AppRecord } from './app'
-import type { Router, RouterInfo } from './router'
-
-export interface DevToolsContext {
-  appRecord: AppRecord | null
-  api: DevToolsPluginApi
-  inspector: Inspector[]
-  timelineLayer: TimelineLayerItem[]
-  routerInfo: RouterInfo
-  router: Router | null
-  activeInspectorTreeId: string
-  componentPluginHookBuffer: (() => void)[]
-  clear: () => void
-}
diff --git a/packages/devtools-kit/src/types/env.ts b/packages/devtools-kit/src/types/env.ts
deleted file mode 100644
index 2025a9de..00000000
--- a/packages/devtools-kit/src/types/env.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface DevToolsEnv {
-  vitePluginDetected: boolean
-}
diff --git a/packages/devtools-kit/src/types/hook.ts b/packages/devtools-kit/src/types/hook.ts
index fee5878e..6ad09029 100644
--- a/packages/devtools-kit/src/types/hook.ts
+++ b/packages/devtools-kit/src/types/hook.ts
@@ -1,5 +1,6 @@
 import type { App } from 'vue'
-import type { AppRecord, PluginDescriptor, PluginSetupFunction, VueAppInstance } from './app'
+import type { PluginDescriptor, PluginSetupFunction } from './plugin'
+import type { AppRecord, VueAppInstance } from './app'
 
 type HookAppInstance = App & VueAppInstance
 export enum DevToolsHooks {
@@ -40,7 +41,7 @@ export interface DevToolsHook {
   once: <T extends Function>(event: DevToolsHooks, handler: T) => void
   off: <T extends Function>(event: DevToolsHooks, handler: T) => void
   appRecords: AppRecord[]
-  apps: Record<number, { componentCount: number }>
+  apps: any
   cleanupBuffer?: (matchArg: unknown) => boolean
 }
 
diff --git a/packages/devtools-kit/src/types/index.ts b/packages/devtools-kit/src/types/index.ts
index 13c2de45..04243321 100644
--- a/packages/devtools-kit/src/types/index.ts
+++ b/packages/devtools-kit/src/types/index.ts
@@ -1,6 +1,9 @@
+export * from './inspector'
+export * from './plugin'
 export * from './app'
+export * from './timeline'
+export * from './component'
 export * from './hook'
-export * from './state'
-export * from './context'
+export * from './tab'
+export * from './command'
 export * from './router'
-export * from './env'
diff --git a/packages/devtools-kit/src/types/inspector.ts b/packages/devtools-kit/src/types/inspector.ts
new file mode 100644
index 00000000..7a61be10
--- /dev/null
+++ b/packages/devtools-kit/src/types/inspector.ts
@@ -0,0 +1,50 @@
+import type { ComponentState, StateBase } from './component'
+
+export interface CustomInspectorOptions {
+  id: string
+  label: string
+  icon?: string
+  treeFilterPlaceholder?: string
+  stateFilterPlaceholder?: string
+  noSelectionText?: string
+  actions?: {
+    icon: string
+    tooltip?: string
+    action: () => void | Promise<void>
+  }[]
+  nodeActions?: {
+    icon: string
+    tooltip?: string
+    action: (nodeId: string) => void | Promise<void>
+  }[]
+}
+
+export interface InspectorNodeTag {
+  label: string
+  textColor: number
+  backgroundColor: number
+  tooltip?: string
+}
+
+export type EditStatePayload = {
+  value: any
+  newKey?: string | null
+  remove?: undefined | false
+} | {
+  value?: undefined
+  newKey?: undefined
+  remove: true
+}
+
+export interface CustomInspectorNode {
+  id: string
+  label: string
+  children?: CustomInspectorNode[]
+  tags?: InspectorNodeTag[]
+  name?: string
+  file?: string
+}
+
+export interface CustomInspectorState {
+  [key: string]: (StateBase | Omit<ComponentState, 'type'>)[]
+}
diff --git a/packages/devtools-kit/src/types/plugin.ts b/packages/devtools-kit/src/types/plugin.ts
new file mode 100644
index 00000000..fb3b72ae
--- /dev/null
+++ b/packages/devtools-kit/src/types/plugin.ts
@@ -0,0 +1,46 @@
+import type { App } from 'vue'
+import type { DevToolsPluginAPI } from '../api'
+
+type PluginSettingsItem = {
+  label: string
+  description?: string
+} & ({
+  type: 'boolean'
+  defaultValue: boolean
+} | {
+  type: 'choice'
+  defaultValue: string | number
+  options: {
+    value: string | number
+    label: string
+  }[]
+  component?: 'select' | 'button-group'
+} | {
+  type: 'text'
+  defaultValue: string
+})
+
+export type PluginSetupFunction = (api: InstanceType<typeof DevToolsPluginAPI>) => void
+
+export interface PluginDescriptor {
+  id: string
+  label: string
+  app: App<any>
+  packageName?: string
+  homepage?: string
+  componentStateTypes?: string[]
+  logo?: string
+  disableAppScope?: boolean
+  disablePluginScope?: boolean
+  /**
+   * Run the plugin setup and expose the api even if the devtools is not opened yet.
+   * Useful to record timeline events early.
+   */
+  enableEarlyProxy?: boolean
+  settings?: Record<string, PluginSettingsItem>
+}
+
+export interface DevToolsPlugin {
+  descriptor: PluginDescriptor
+  setupFn: PluginSetupFunction
+}
diff --git a/packages/devtools-kit/src/types/state.ts b/packages/devtools-kit/src/types/state.ts
deleted file mode 100644
index f9af3439..00000000
--- a/packages/devtools-kit/src/types/state.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { CustomCommand } from '../core/custom-command'
-import type { CustomTab } from '../core/custom-tab'
-import type { AppRecord, PluginDescriptor, PluginSetupFunction } from './app'
-
-export interface DevToolsState {
-  connected: boolean
-  clientConnected: boolean
-  vitePluginDetected: boolean
-  appRecords: AppRecord[]
-  activeAppRecord: AppRecord | null
-  selectedComponentId: string | null
-  pluginBuffer: [PluginDescriptor, PluginSetupFunction][]
-  tabs: CustomTab[]
-  commands: CustomCommand[]
-  activeAppRecordId: string | null
-  highPerfModeEnabled: boolean
-}
diff --git a/packages/devtools-kit/src/core/custom-tab/types.ts b/packages/devtools-kit/src/types/tab.ts
similarity index 100%
rename from packages/devtools-kit/src/core/custom-tab/types.ts
rename to packages/devtools-kit/src/types/tab.ts
diff --git a/packages/devtools-kit/src/types/timeline.ts b/packages/devtools-kit/src/types/timeline.ts
new file mode 100644
index 00000000..fb7fc3ff
--- /dev/null
+++ b/packages/devtools-kit/src/types/timeline.ts
@@ -0,0 +1,41 @@
+export interface TimelineEvent<TData = any, TMeta = any> {
+  time: number
+  data: TData
+  logType?: 'default' | 'warning' | 'error'
+  meta?: TMeta
+  groupId?: number | string
+  title?: string
+  subtitle?: string
+}
+
+export interface ScreenshotOverlayEvent {
+  layerId: string
+  renderMeta: any
+}
+
+export interface ScreenshotOverlayRenderContext<TData = any, TMeta = any> {
+  screenshot: ScreenshotData
+  events: (TimelineEvent<TData, TMeta> & ScreenshotOverlayEvent)[]
+  index: number
+}
+
+export type ScreenshotOverlayRenderResult = HTMLElement | string | false
+
+export interface ScreenshotData {
+  time: number
+}
+
+export interface TimelineLayerOptions<TData = any, TMeta = any> {
+  id: string
+  label: string
+  color: number
+  skipScreenshots?: boolean
+  groupsOnly?: boolean
+  ignoreNoDurationGroups?: boolean
+  screenshotOverlayRender?: (event: TimelineEvent<TData, TMeta> & ScreenshotOverlayEvent, ctx: ScreenshotOverlayRenderContext) => ScreenshotOverlayRenderResult | Promise<ScreenshotOverlayRenderResult>
+}
+export interface TimelineEventOptions {
+  layerId: string
+  event: TimelineEvent
+  all?: boolean
+}
diff --git a/packages/devtools-kit/tsup.config.ts b/packages/devtools-kit/tsup.config.ts
index b1ac6862..70f17f43 100644
--- a/packages/devtools-kit/tsup.config.ts
+++ b/packages/devtools-kit/tsup.config.ts
@@ -7,7 +7,7 @@ export default defineConfig({
   external: [
     'vue',
   ],
-  noExternal: ['speakingurl'],
+  noExternal: ['speakingurl', 'superjson'],
   clean: true,
   format: ['esm', 'cjs'],
   dts: true,
diff --git a/packages/electron/package.json b/packages/electron/package.json
index 48cc4cf0..8081e8a6 100644
--- a/packages/electron/package.json
+++ b/packages/electron/package.json
@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "@vue/devtools-core": "workspace:^",
+    "@vue/devtools-kit": "workspace:^",
     "@vue/devtools-shared": "workspace:^",
     "electron": "^29.4.2",
     "execa": "^8.0.1",
diff --git a/packages/electron/src/cli.ts b/packages/electron/src/cli.ts
index 6da9db54..822b34e1 100644
--- a/packages/electron/src/cli.ts
+++ b/packages/electron/src/cli.ts
@@ -6,7 +6,7 @@ const appPath = decodeURIComponent(resolve(new URL('../dist/app.cjs', import.met
 const argv = process.argv.slice(2)
 
 const result = execaSync(electron as unknown as string, [appPath].concat(argv), {
-  stdio: 'ignore',
+  stdio: 'inherit',
   windowsHide: false,
 })
 
diff --git a/packages/electron/src/devtools.ts b/packages/electron/src/devtools.ts
index f04e1e19..856dadac 100644
--- a/packages/electron/src/devtools.ts
+++ b/packages/electron/src/devtools.ts
@@ -1,7 +1,8 @@
 import io from 'socket.io-client/dist/socket.io.js'
 import ip from 'ip'
+import { createRpcClient, setElectronClientContext } from '@vue/devtools-kit'
+import { functions } from '@vue/devtools-core'
 import { createConnectionApp, initDevTools } from '../client/devtools-panel'
-import { Bridge } from '../../core/src/bridge'
 
 const port = window.process.env.PORT || 8098
 
@@ -17,30 +18,11 @@ function init() {
 
   socket.on('vue-devtools:init', () => {
     app.unmount()
-
-    // If new page is opened reload devtools
-    if (reload)
-      return reload()
-
-    initDevTools({
-      connect(cb) {
-        const bridge = new Bridge({
-          tracker(fn) {
-            socket.on('vue-devtools:message', (data) => {
-              fn(data)
-            })
-          },
-          trigger(data) {
-            socket.emit('vue-devtools:message', data)
-          },
-        })
-
-        cb(bridge)
-      },
-      reload(fn) {
-        reload = fn
-      },
+    setElectronClientContext(socket)
+    createRpcClient(functions, {
+      preset: 'electron',
     })
+    initDevTools()
   })
 
   function shutdown() {
diff --git a/packages/electron/src/server.ts b/packages/electron/src/server.ts
index caef4855..2a27eea4 100644
--- a/packages/electron/src/server.ts
+++ b/packages/electron/src/server.ts
@@ -3,6 +3,7 @@ import fs from 'node:fs'
 import path from 'node:path'
 import { createApp, eventHandler, toNodeListener } from 'h3'
 import { Server } from 'socket.io'
+import { createRpcProxy, setElectronProxyContext } from '@vue/devtools-kit'
 
 const port = process.env.PORT || 8098
 export function init() {
@@ -24,6 +25,11 @@ export function init() {
   })
 
   io.on('connection', (socket) => {
+    setElectronProxyContext(socket)
+    createRpcProxy({
+      preset: 'electron',
+    })
+
     // Disconnect any previously connected apps
     socket.broadcast.emit('vue-devtools:disconnect-user-app')
 
@@ -39,10 +45,6 @@ export function init() {
       if (reason.indexOf('client'))
         socket.broadcast.emit('vue-devtools-disconnect-devtools')
     })
-
-    socket.on('vue-devtools:message', (data) => {
-      socket.broadcast.emit('vue-devtools:message', data)
-    })
   })
 
   httpServer.listen(port, () => {
diff --git a/packages/electron/src/user-app.core.ts b/packages/electron/src/user-app.core.ts
index bcb6c6db..f72efd29 100644
--- a/packages/electron/src/user-app.core.ts
+++ b/packages/electron/src/user-app.core.ts
@@ -1,6 +1,6 @@
 import { isBrowser, target } from '@vue/devtools-shared'
-import { Bridge } from '../../core/src/bridge'
-import { prepareInjection } from '../../core/src/injection'
+import { functions } from '@vue/devtools-core'
+import { createRpcServer, setElectronServerContext } from '@vue/devtools-kit'
 import { devtools } from '../../devtools-kit/src/index'
 
 export function init(io) {
@@ -10,25 +10,8 @@ export function init(io) {
   const fullHost = port ? `${host}:${port}` : host
   const socket = createSocket(fullHost)
 
-  // @TODO: de-duplicate
   devtools.init()
 
-  const bridge = new Bridge({
-    tracker(fn) {
-      socket.on('vue-devtools:message', (data) => {
-        fn(data)
-      })
-    },
-    trigger(data) {
-      socket.emit('vue-devtools:message', data)
-    },
-  })
-
-  socket.on('connect', () => {
-    prepareInjection(bridge)
-    socket.emit('vue-devtools:init')
-  })
-
   // Global disconnect handler. Fires in two cases:
   // - after calling above socket.disconnect()
   // - once devtools is closed (that's why we need socket.disconnect() here too, to prevent further polling)
@@ -36,6 +19,15 @@ export function init(io) {
     socket.disconnect()
   })
 
+  socket.on('connect', () => {
+    setElectronServerContext(socket)
+    createRpcServer(functions, {
+      preset: 'electron',
+    })
+
+    socket.emit('vue-devtools:init')
+  })
+
   // Disconnect socket once other client is connected
   socket.on('vue-devtools:disconnect-user-app', () => {
     socket.disconnect()
diff --git a/packages/overlay/src/App.vue b/packages/overlay/src/App.vue
index 980af8b6..ea2a2dc1 100644
--- a/packages/overlay/src/App.vue
+++ b/packages/overlay/src/App.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { Bridge, getDevToolsClientUrl, prepareInjection } from '@vue/devtools-core'
+import { functions, getDevToolsClientUrl } from '@vue/devtools-core'
 import { target } from '@vue/devtools-shared'
 import { useDevToolsColorMode } from '@vue/devtools-ui'
-import { devtools, onDevToolsConnected } from '@vue/devtools-kit'
-import { registerBridge, useFrameState, useIframe, usePanelVisible, usePosition } from '~/composables'
+import { devtools, getRpcServer, onDevToolsConnected, setIframeServerContext } from '@vue/devtools-kit'
+import { useFrameState, useIframe, usePanelVisible, usePosition } from '~/composables'
 import { checkIsSafari } from '~/utils'
 import FrameBox from '~/components/FrameBox.vue'
 
@@ -43,43 +43,22 @@ const { updateState, state } = useFrameState()
 function waitForClientInjection(iframe: HTMLIFrameElement, retry = 50, timeout = 200): Promise<void> | void {
   return new Promise((resolve) => {
     iframe?.contentWindow?.postMessage('__VUE_DEVTOOLS_CREATE_CLIENT__', '*')
-    const bridge = new Bridge({
-      tracker(fn) {
-        if (!overlayVisible.value)
-          return
-
-        window.addEventListener('message', (e) => {
-          if (e.data.source === '__VUE_DEVTOOLS_CLIENT__')
-            fn(e.data.data)
-        })
-      },
-      trigger(data) {
-        if (!overlayVisible.value)
-          return
-
-        iframe?.contentWindow?.postMessage({
-          source: '__VUE_DEVTOOLS_USER_APP__',
-          data,
-        }, '*')
-      },
-    })
-
-    prepareInjection(bridge)
-    registerBridge(bridge)
 
     window.addEventListener('message', (data) => {
       if (data.data === '__VUE_DEVTOOLS_CLIENT_READY__')
         resolve()
     })
-
-    bridge.on('toggle-panel', togglePanelVisible)
   })
 }
 
 const vueInspector = ref()
 
 onDevToolsConnected(() => {
-  devtools.api.getVueInspector().then((inspector) => {
+  const rpcServer = getRpcServer<typeof functions>()
+  rpcServer.broadcast.on('toggle-panel', (state = !panelVisible) => {
+    togglePanelVisible(state)
+  })
+  devtools.ctx.api.getVueInspector().then((inspector) => {
     vueInspector.value = inspector
 
     let previousPanelVisible = panelVisible.value
@@ -111,6 +90,7 @@ function enableVueInspector() {
 
 const { iframe, getIframe } = useIframe(clientUrl, async () => {
   const iframe = getIframe()
+  setIframeServerContext(iframe)
   await waitForClientInjection(iframe)
 })
 </script>
@@ -142,7 +122,7 @@ const { iframe, getIframe } = useIframe(clientUrl, async () => {
           <path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z" />
         </svg>
       </div>
-      <template v-if="devtools.state.vitePluginDetected && vueInspectorEnabled">
+      <template v-if="devtools.ctx.state.vitePluginDetected && vueInspectorEnabled">
         <div class="vue-devtools__panel-content vue-devtools__panel-divider" />
         <div
           class="vue-devtools__anchor-btn vue-devtools__panel-content vue-devtools__inspector-button"
diff --git a/packages/overlay/src/components/FrameBox.vue b/packages/overlay/src/components/FrameBox.vue
index e3a73256..341bd9ed 100644
--- a/packages/overlay/src/components/FrameBox.vue
+++ b/packages/overlay/src/components/FrameBox.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue'
 import { useEventListener } from '@vueuse/core'
-
-import { useFrameState, waitBridgeReady } from '~/composables'
+import { onRpcSeverReady, rpcServer } from '@vue/devtools-core'
+import { useFrameState } from '~/composables'
 import { PANEL_MAX, PANEL_MIN } from '~/constants'
 
 const props = defineProps<{
@@ -24,14 +24,16 @@ const { state, updateState } = useFrameState()
 const container = ref<HTMLElement>()
 const isResizing = ref<false | { top?: boolean, left?: boolean, right?: boolean, bottom?: boolean }>(false)
 
-waitBridgeReady().then((bridge) => {
-  // @TODO: add type
-  bridge.on('update-client-state', (v) => {
-    updateState({
-      minimizePanelInactive: v.minimizePanelInteractive,
-      closeOnOutsideClick: v.closeOnOutsideClick,
-      preferShowFloatingPanel: v.showFloatingPanel,
-    })
+onRpcSeverReady(() => {
+  // @ts-expect-error skip
+  rpcServer.functions.on('update-client-state', (v) => {
+    if (v) {
+      updateState({
+        minimizePanelInactive: v.minimizePanelInteractive,
+        closeOnOutsideClick: v.closeOnOutsideClick,
+        preferShowFloatingPanel: v.showFloatingPanel,
+      })
+    }
   })
 })
 
diff --git a/packages/overlay/src/composables/bridge.ts b/packages/overlay/src/composables/bridge.ts
deleted file mode 100644
index 92191dc3..00000000
--- a/packages/overlay/src/composables/bridge.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Bridge } from '@vue/devtools-core'
-import { shallowRef, watchEffect } from 'vue'
-
-type BridgeType = InstanceType<typeof Bridge>
-
-const bridgeRef = shallowRef<BridgeType | null>(null)
-
-export function registerBridge(bridge: InstanceType<typeof Bridge>) {
-  bridgeRef.value = bridge
-}
-
-export function waitBridgeReady() {
-  return new Promise<BridgeType>((resolve) => {
-    if (bridgeRef.value)
-      resolve(bridgeRef.value)
-    watchEffect(() => {
-      if (bridgeRef.value)
-        resolve(bridgeRef.value)
-    })
-  })
-}
diff --git a/packages/overlay/src/composables/index.ts b/packages/overlay/src/composables/index.ts
index 2876232a..fca38411 100644
--- a/packages/overlay/src/composables/index.ts
+++ b/packages/overlay/src/composables/index.ts
@@ -2,4 +2,3 @@ export * from './position'
 export * from './iframe'
 export * from './panel'
 export * from './state'
-export * from './bridge'
diff --git a/packages/playground/applet/src/App.vue b/packages/playground/applet/src/App.vue
index 8b2f8270..92318263 100644
--- a/packages/playground/applet/src/App.vue
+++ b/packages/playground/applet/src/App.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { Components } from '@vue/devtools-applet'
 import '@vue/devtools-applet/style.css'
-import { HandShakeServer, getDevToolsState, initDevToolsSeparateWindow, initDevToolsSeparateWindowBridge, onDevToolsStateUpdated, setupDevToolsBridge } from '@vue/devtools-core'
+import { DevToolsMessagingEvents, functions, onRpcConnected, rpc } from '@vue/devtools-core'
+import { createRpcClient } from '@vue/devtools-kit'
 import { useDark } from '@vueuse/core'
 import { useCounterStore } from './stores'
 import Hello from './components/Hello.vue'
@@ -10,41 +11,34 @@ const isDark = useDark()
 // user app
 const counterStore = useCounterStore()
 
+createRpcClient(functions, {
+  preset: 'broadcast',
+})
+
 // devtools
 const appConnected = ref(false)
 const clientConnected = ref(false)
 const connected = computed(() => appConnected.value && clientConnected.value)
 
-initDevToolsSeparateWindow({
-  onConnected(channel) {
-    const bridge = initDevToolsSeparateWindowBridge(channel)
-    setupDevToolsBridge(bridge)
-    new HandShakeServer(bridge).onnConnect().then(() => {
-      bridge.emit('devtools:client-ready')
-      initVueDevToolsState()
-    })
-    bridge.on('disconnect', () => {
-      channel.close()
-      initDevToolsSeparateWindow()
-    })
-  },
-})
-
 function initVueDevToolsState() {
-  getDevToolsState().then((data) => {
-    if (data)
+  rpc.value.devtoolsState().then((data) => {
+    if (!data)
       return
     appConnected.value = data!.connected
     clientConnected.value = data!.clientConnected
   })
 
-  onDevToolsStateUpdated((data) => {
+  rpc.functions.on(DevToolsMessagingEvents.DEVTOOLS_STATE_UPDATED, (data) => {
     if (!data)
       return
     appConnected.value = data!.connected
     clientConnected.value = data!.clientConnected
   })
 }
+
+onRpcConnected(() => {
+  initVueDevToolsState()
+})
 </script>
 
 <template>
diff --git a/packages/playground/basic/src/main.ts b/packages/playground/basic/src/main.ts
index 424f268f..6273fda2 100644
--- a/packages/playground/basic/src/main.ts
+++ b/packages/playground/basic/src/main.ts
@@ -2,6 +2,9 @@ import { createPinia } from 'pinia'
 import type { RouteRecordRaw } from 'vue-router'
 import { createRouter, createWebHistory } from 'vue-router'
 import { VueQueryPlugin } from '@tanstack/vue-query'
+import { addCustomCommand } from '@vue/devtools-api'
+import { devtools } from '@vue/devtools'
+
 import store from './stores/vuexStore'
 
 import App from './App.vue'
@@ -17,7 +20,7 @@ const pinia = createPinia()
 
 const app = createApp(App)
 
-// devtools.connect()
+devtools.connect()
 
 const routes: RouteRecordRaw[] = [
   {
@@ -65,16 +68,16 @@ app.use(store)
 app.mount('#app')
 // }, 2000)
 
-// setTimeout(() => {
-//   addCustomCommand({
-//     id: 'vueuse',
-//     title: 'VueUse',
-//     action: {
-//       type: 'url',
-//       src: 'https://vueuse.org/',
-//     },
-//   })
-// }, 2000)
+setTimeout(() => {
+  addCustomCommand({
+    id: 'vueuse',
+    title: 'VueUse',
+    action: {
+      type: 'url',
+      src: 'https://vueuse.org/',
+    },
+  })
+}, 2000)
 
 // setTimeout(() => {
 //   addCustomTab({
@@ -91,4 +94,20 @@ app.mount('#app')
 //     },
 //     category: 'advanced',
 //   })
+//   setTimeout(() => {
+//     addCustomTab({
+//     // unique identifier
+//       name: 'vue-use1',
+//       // title to display in the tab
+//       title: 'VueUse1',
+//       // any icon from Iconify, or a URL to an image
+//       icon: 'i-logos-vueuse',
+//       // iframe view
+//       view: {
+//         type: 'iframe',
+//         src: 'https://vueuse.org/',
+//       },
+//       category: 'advanced',
+//     })
+//   }, 2000)
 // }, 2000)
diff --git a/packages/playground/basic/vite.config.ts b/packages/playground/basic/vite.config.ts
index 9e833e3b..c4a575c0 100644
--- a/packages/playground/basic/vite.config.ts
+++ b/packages/playground/basic/vite.config.ts
@@ -12,7 +12,7 @@ export default defineConfig({
     vue(),
     commonjs(),
     VueDevTools({
-      launchEditor: 'code',
+      // launchEditor: 'code',
     }),
     Unocss(),
     AutoImport({
diff --git a/packages/shared/src/env.ts b/packages/shared/src/env.ts
index 62dae47d..d79af817 100644
--- a/packages/shared/src/env.ts
+++ b/packages/shared/src/env.ts
@@ -14,3 +14,4 @@ export const isInIframe = isBrowser && target.self !== target.top
 export const isInElectron = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().includes('electron')
 // @ts-expect-error skip type check
 export const isNuxtApp = typeof window !== 'undefined' && !!window.__NUXT__
+export const isInSeparateWindow = !isInIframe && !isInChromePanel && !isInElectron
diff --git a/packages/vite/src/modules/get-config.ts b/packages/vite/src/modules/get-config.ts
deleted file mode 100644
index 386b81de..00000000
--- a/packages/vite/src/modules/get-config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { defineViteServerAction } from '@vue/devtools-core'
-import type { ResolvedConfig } from 'vite'
-
-export function getViteConfig(config: ResolvedConfig, pluginOptions) {
-  defineViteServerAction('get-vite-root', () => {
-    return config.root
-  })
-}
diff --git a/packages/vite/src/modules/graph.ts b/packages/vite/src/modules/graph.ts
deleted file mode 100644
index a69957b2..00000000
--- a/packages/vite/src/modules/graph.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { ViteInspectAPI } from 'vite-plugin-inspect'
-import { debounce } from 'perfect-debounce'
-import type { ViteDevServer } from 'vite'
-import { callViteClientListener, defineViteServerAction } from '@vue/devtools-core'
-
-export function setupGraphModule(options: { rpc: ViteInspectAPI['rpc'], server: ViteDevServer }) {
-  const { rpc, server } = options
-
-  defineViteServerAction('graph:get-modules', async () => {
-    const list = await rpc.list()
-    const modules = list?.modules || []
-
-    return modules
-  })
-
-  const triggerModuleUpdated = callViteClientListener('graph:module-updated')
-
-  const debouncedModuleUpdated = debounce(() => {
-    triggerModuleUpdated()
-  }, 100)
-
-  server.middlewares.use((_, __, next) => {
-    debouncedModuleUpdated()
-    next()
-  })
-}
diff --git a/packages/vite/src/modules/index.ts b/packages/vite/src/modules/index.ts
deleted file mode 100644
index bfa0cf2c..00000000
--- a/packages/vite/src/modules/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './get-config'
-export * from './graph'
-export * from './assets'
diff --git a/packages/vite/src/overlay.js b/packages/vite/src/overlay.js
index 1c06632a..bedae99d 100644
--- a/packages/vite/src/overlay.js
+++ b/packages/vite/src/overlay.js
@@ -1,6 +1,6 @@
 import vueDevToolsOptions from 'virtual:vue-devtools-options'
-import { initAppSeparateWindow, setDevToolsClientUrl } from '@vue/devtools-core'
-import { addCustomTab, devtools, setDevToolsEnv, setOpenInEditorBaseUrl, toggleComponentInspectorEnabled } from '@vue/devtools-kit'
+import { functions, setDevToolsClientUrl } from '@vue/devtools-core'
+import { addCustomTab, createRpcServer, devtools, setDevToolsEnv, setOpenInEditorBaseUrl, toggleComponentInspectorEnabled } from '@vue/devtools-kit'
 
 function normalizeUrl(url) {
   return new URL(`${vueDevToolsOptions.base || '/'}${url}`, import.meta.url).toString()
@@ -53,4 +53,10 @@ body.appendChild(script)
 // Used in the browser extension
 window.__VUE_DEVTOOLS_VITE_PLUGIN_CLIENT_URL__ = `${window.location.origin}${devtoolsClientUrl}`
 
-initAppSeparateWindow()
+createRpcServer(functions, {
+  preset: 'iframe',
+})
+
+createRpcServer(functions, {
+  preset: 'broadcast',
+})
diff --git a/packages/vite/src/modules/assets.ts b/packages/vite/src/rpc/assets.ts
similarity index 68%
rename from packages/vite/src/modules/assets.ts
rename to packages/vite/src/rpc/assets.ts
index ffe66dcb..1d267e7a 100644
--- a/packages/vite/src/modules/assets.ts
+++ b/packages/vite/src/rpc/assets.ts
@@ -1,12 +1,11 @@
 import fsp from 'node:fs/promises'
-import type { ViteInspectAPI } from 'vite-plugin-inspect'
 import { debounce } from 'perfect-debounce'
-import type { ResolvedConfig, ViteDevServer } from 'vite'
-import { callViteClientListener, defineViteServerAction } from '@vue/devtools-core'
-import type { AssetImporter, AssetInfo, AssetType, ImageMeta } from '@vue/devtools-core'
+import { getViteRpcServer } from '@vue/devtools-kit'
+import type { AssetImporter, AssetInfo, AssetType, ImageMeta, ViteRPCFunctions } from '@vue/devtools-core'
 import fg from 'fast-glob'
 import { join, resolve } from 'pathe'
 import { imageMeta } from 'image-meta'
+import { RpcFunctionCtx } from './types'
 
 const defaultAllowedExtensions = [
   'png',
@@ -55,8 +54,8 @@ function guessType(path: string): AssetType {
   return 'other'
 }
 
-export function setupAssetsModule(options: { rpc: ViteInspectAPI['rpc'], server: ViteDevServer, config: ResolvedConfig }) {
-  const { rpc, server, config } = options
+export function getAssetsFunctions(ctx: RpcFunctionCtx) {
+  const { server, config } = ctx
 
   const _imageMetaCache = new Map<string, ImageMeta | undefined>()
   let cache: AssetInfo[] | null = null
@@ -125,48 +124,45 @@ export function setupAssetsModule(options: { rpc: ViteInspectAPI['rpc'], server:
     return importers
   }
 
-  defineViteServerAction('assets:get-static-assets', async () => {
-    return await scan()
-  })
-
-  defineViteServerAction('assets:get-asset-importers', async (url: string) => {
-    return await getAssetImporters(url)
-  })
-
-  defineViteServerAction('assets:get-image-meta', async (filepath: string) => {
-    if (_imageMetaCache.has(filepath))
-      return _imageMetaCache.get(filepath)
-    try {
-      const meta = imageMeta(await fsp.readFile(filepath)) as ImageMeta
-      _imageMetaCache.set(filepath, meta)
-      return meta
-    }
-    catch (e) {
-      _imageMetaCache.set(filepath, undefined)
-      console.error(e)
-      return undefined
-    }
-  })
-
-  defineViteServerAction('assets:get-text-asset-content', async (filepath: string, limit = 300) => {
-    try {
-      const content = await fsp.readFile(filepath, 'utf-8')
-      return content.slice(0, limit)
-    }
-    catch (e) {
-      console.error(e)
-      return undefined
-    }
-  })
-
-  const triggerAssetsUpdated = callViteClientListener('assets:updated')
-
   const debouncedAssetsUpdated = debounce(() => {
-    triggerAssetsUpdated()
+    getViteRpcServer<ViteRPCFunctions>?.()?.broadcast?.emit('assetsUpdated')
   }, 100)
 
   server.watcher.on('all', (event) => {
     if (event !== 'change')
       debouncedAssetsUpdated()
   })
+
+  return {
+    async getStaticAssets() {
+      return await scan()
+    },
+    async getAssetImporters(url: string) {
+      return await getAssetImporters(url)
+    },
+    async getImageMeta(filepath: string) {
+      if (_imageMetaCache.has(filepath))
+        return _imageMetaCache.get(filepath)
+      try {
+        const meta = imageMeta(await fsp.readFile(filepath)) as ImageMeta
+        _imageMetaCache.set(filepath, meta)
+        return meta
+      }
+      catch (e) {
+        _imageMetaCache.set(filepath, undefined)
+        console.error(e)
+        return undefined
+      }
+    },
+    async getTextAssetContent(filepath: string, limit = 300) {
+      try {
+        const content = await fsp.readFile(filepath, 'utf-8')
+        return content.slice(0, limit)
+      }
+      catch (e) {
+        console.error(e)
+        return undefined
+      }
+    },
+  }
 }
diff --git a/packages/vite/src/rpc/get-config.ts b/packages/vite/src/rpc/get-config.ts
new file mode 100644
index 00000000..dad5bfd8
--- /dev/null
+++ b/packages/vite/src/rpc/get-config.ts
@@ -0,0 +1,9 @@
+import { RpcFunctionCtx } from './types'
+
+export function getConfigFunctions(ctx: RpcFunctionCtx) {
+  return {
+    getRoot() {
+      return ctx.config.root
+    },
+  }
+}
diff --git a/packages/vite/src/rpc/graph.ts b/packages/vite/src/rpc/graph.ts
new file mode 100644
index 00000000..662ef51c
--- /dev/null
+++ b/packages/vite/src/rpc/graph.ts
@@ -0,0 +1,24 @@
+import { debounce } from 'perfect-debounce'
+import type { ModuleInfo, ViteRPCFunctions } from '@vue/devtools-core'
+import { getViteRpcServer } from '@vue/devtools-kit'
+import { RpcFunctionCtx } from './types'
+
+export function getGraphFunctions(ctx: RpcFunctionCtx) {
+  const { rpc, server } = ctx
+  const debouncedModuleUpdated = debounce(() => {
+    getViteRpcServer<ViteRPCFunctions>?.()?.broadcast?.emit('graphModuleUpdated')
+  }, 100)
+
+  server.middlewares.use((_, __, next) => {
+    debouncedModuleUpdated()
+    next()
+  })
+  return {
+    async getGraphModules(): Promise<ModuleInfo[]> {
+      const list = await rpc.list()
+      const modules = list?.modules || []
+
+      return modules
+    },
+  }
+}
diff --git a/packages/vite/src/rpc/index.ts b/packages/vite/src/rpc/index.ts
new file mode 100644
index 00000000..105ee130
--- /dev/null
+++ b/packages/vite/src/rpc/index.ts
@@ -0,0 +1,15 @@
+import { getAssetsFunctions } from './assets'
+import { getConfigFunctions } from './get-config'
+import { getGraphFunctions } from './graph'
+import { RpcFunctionCtx } from './types'
+
+export function getRpcFunctions(ctx: RpcFunctionCtx) {
+  return {
+    heartbeat() {
+      return true
+    },
+    ...getAssetsFunctions(ctx),
+    ...getConfigFunctions(ctx),
+    ...getGraphFunctions(ctx),
+  }
+}
diff --git a/packages/vite/src/rpc/types.ts b/packages/vite/src/rpc/types.ts
new file mode 100644
index 00000000..4c11efc1
--- /dev/null
+++ b/packages/vite/src/rpc/types.ts
@@ -0,0 +1,8 @@
+import { ResolvedConfig, ViteDevServer } from 'vite'
+import { ViteInspectAPI } from 'vite-plugin-inspect/index'
+
+export interface RpcFunctionCtx {
+  rpc: ViteInspectAPI['rpc']
+  server: ViteDevServer
+  config: ResolvedConfig
+}
diff --git a/packages/vite/src/vite.ts b/packages/vite/src/vite.ts
index 584ceb0a..9a713cbd 100644
--- a/packages/vite/src/vite.ts
+++ b/packages/vite/src/vite.ts
@@ -4,14 +4,13 @@ import { normalizePath } from 'vite'
 import type { PluginOption, ResolvedConfig, ViteDevServer } from 'vite'
 import sirv from 'sirv'
 import Inspect from 'vite-plugin-inspect'
+import { setViteServerContext } from '@vue/devtools-kit'
 import VueInspector from 'vite-plugin-vue-inspector'
-import { initViteServerContext } from '@vue/devtools-core'
+import { createViteServerRpc } from '@vue/devtools-core'
 import { bold, cyan, dim, green, yellow } from 'kolorist'
 import type { VitePluginInspectorOptions } from 'vite-plugin-vue-inspector'
 import { DIR_CLIENT } from './dir'
-import { getViteConfig, setupAssetsModule, setupGraphModule } from './modules'
-
-export type * from './modules'
+import { getRpcFunctions } from './rpc'
 
 type DeepRequired<T> = {
   [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Required<T[P]>;
@@ -99,17 +98,14 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
     }))
 
     // vite client <-> server messaging
-    initViteServerContext(server)
-    getViteConfig(config, pluginOptions)
-    setupGraphModule({
-      rpc: inspect.api.rpc,
-      server,
-    })
-    setupAssetsModule({
+    setViteServerContext(server)
+
+    const rpcFunctions = getRpcFunctions({
       rpc: inspect.api.rpc,
       server,
       config,
     })
+    createViteServerRpc(rpcFunctions)
 
     const _printUrls = server.printUrls
     const colorUrl = (url: string) =>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1a9bde25..cab7516d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -198,6 +198,9 @@ importers:
       '@vue/devtools-core':
         specifier: workspace:^
         version: link:../core
+      '@vue/devtools-kit':
+        specifier: workspace:^
+        version: link:../devtools-kit
       '@vue/devtools-shared':
         specifier: workspace:^
         version: link:../shared
@@ -369,6 +372,9 @@ importers:
       '@vue/devtools-shared':
         specifier: workspace:^
         version: link:../shared
+      birpc:
+        specifier: ^0.2.17
+        version: 0.2.17
       hookable:
         specifier: ^5.5.3
         version: 5.5.3
@@ -381,6 +387,9 @@ importers:
       speakingurl:
         specifier: ^14.0.1
         version: 14.0.1
+      superjson:
+        specifier: ^2.2.1
+        version: 2.2.1
     devDependencies:
       '@types/speakingurl':
         specifier: ^13.0.6
@@ -397,6 +406,9 @@ importers:
       '@vue/devtools-core':
         specifier: workspace:^
         version: link:../core
+      '@vue/devtools-kit':
+        specifier: workspace:^
+        version: link:../devtools-kit
       '@vue/devtools-shared':
         specifier: workspace:^
         version: link:../shared
@@ -3559,6 +3571,9 @@ packages:
   birpc@0.1.1:
     resolution: {integrity: sha512-B64AGL4ug2IS2jvV/zjTYDD1L+2gOJTT7Rv+VaK7KVQtQOo/xZbCDsh7g727ipckmU+QJYRqo5RcifVr0Kgcmg==}
 
+  birpc@0.2.17:
+    resolution: {integrity: sha512-+hkTxhot+dWsLpp3gia5AkVHIsKlZybNT5gIYiDlNzJrmYPcTM9k5/w2uaj3IPpd7LlEYpmCj4Jj1nC41VhDFg==}
+
   bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
 
@@ -4134,6 +4149,10 @@ packages:
     resolution: {integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==}
     engines: {node: '>= 0.6'}
 
+  copy-anything@3.0.5:
+    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
+    engines: {node: '>=12.13'}
+
   copy-webpack-plugin@9.1.0:
     resolution: {integrity: sha512-rxnR7PaGigJzhqETHGmAcxKnLZSR5u1Y3/bcIv/1FnqXedcL/E2ewK7ZCNrArJKCiSv8yVXhTqetJh8inDvfsA==}
     engines: {node: '>= 12.13.0'}
@@ -5584,6 +5603,10 @@ packages:
     resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
     engines: {node: '>=10'}
 
+  is-what@4.1.16:
+    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
+    engines: {node: '>=12.13'}
+
   is-wsl@2.2.0:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
@@ -7460,6 +7483,10 @@ packages:
     resolution: {integrity: sha512-MvjXzkz/BOfyVDkG0oFOtBxHX2u3gKbMHIF/dXblZsgD3BWOFLmHovIpZY7BykJdAjcqRCBi1WYBNdEC9yI7vg==}
     engines: {node: '>= 8.0'}
 
+  superjson@2.2.1:
+    resolution: {integrity: sha512-8iGv75BYOa0xRJHK5vRLEjE2H/i4lulTjzpUXic3Eg8akftYjkmQDa8JARQ42rlczXyFR3IeRoeFCc7RxHsYZA==}
+    engines: {node: '>=16'}
+
   supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -11668,6 +11695,8 @@ snapshots:
 
   birpc@0.1.1: {}
 
+  birpc@0.2.17: {}
+
   bl@4.1.0:
     dependencies:
       buffer: 5.7.1
@@ -12139,6 +12168,10 @@ snapshots:
 
   cookie@0.5.0: {}
 
+  copy-anything@3.0.5:
+    dependencies:
+      is-what: 4.1.16
+
   copy-webpack-plugin@9.1.0(webpack@5.89.0(esbuild@0.21.4)):
     dependencies:
       fast-glob: 3.3.2
@@ -13927,6 +13960,8 @@ snapshots:
 
   is-unicode-supported@0.1.0: {}
 
+  is-what@4.1.16: {}
+
   is-wsl@2.2.0:
     dependencies:
       is-docker: 2.2.1
@@ -15856,6 +15891,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  superjson@2.2.1:
+    dependencies:
+      copy-anything: 3.0.5
+
   supports-color@5.5.0:
     dependencies:
       has-flag: 3.0.0
diff --git a/scripts/extension-zip.ts b/scripts/extension-zip.ts
index 459de63a..5772909b 100644
--- a/scripts/extension-zip.ts
+++ b/scripts/extension-zip.ts
@@ -2,7 +2,7 @@ import path from 'node:path'
 import fs from 'node:fs'
 import { fileURLToPath } from 'node:url'
 import archiver from 'archiver'
-import readDirGlob from 'readdir-glob'
+import readdirGlob from 'readdir-glob'
 import ProgressBar from 'progress'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
@@ -44,7 +44,8 @@ async function zip(filename: string) {
   }
   async function parseFileStats() {
     return new Promise<void>((resolve, reject) => {
-      const globber = readDirGlob(targetPkgDir, { pattern: INCLUDE_FILES, skip: EXCLUDE_DIRS, mark: true, stat: true })
+      // @ts-expect-error skip
+      const globber = readdirGlob.readdirGlob(targetPkgDir, { pattern: INCLUDE_FILES, skip: EXCLUDE_DIRS, mark: true, stat: true })
       globber.on('match', (match) => {
         if (!match.stat.isDirectory())
           status.total++