diff --git a/package.json b/package.json
index c33e07d8..d631558d 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "stub:devtools-kit": "turbo stub --filter=./packages/devtools-kit",
     "stub:overlay": "turbo stub --filter=./packages/overlay",
     "stub:client": "turbo stub --filter=./packages/client",
+    "stub:applet": "turbo stub --filter=./packages/applet",
     "stub:vite": "turbo stub --filter=./packages/vite",
     "stub:devtools-api": "turbo stub --filter=./packages/devtools-api...",
     "build:shared": "turbo build --filter=./packages/shared...",
diff --git a/packages/applet/package.json b/packages/applet/package.json
index 0063e131..2f08187e 100644
--- a/packages/applet/package.json
+++ b/packages/applet/package.json
@@ -28,11 +28,14 @@
     "@vue/devtools-kit": "workspace:^",
     "@vue/devtools-shared": "workspace:^",
     "@vue/devtools-ui": "workspace:^",
+    "lodash-es": "^4.17.21",
     "perfect-debounce": "^1.0.0",
+    "shiki": "1.3.0",
     "splitpanes": "^3.1.5",
     "vue-virtual-scroller": "2.0.0-beta.8"
   },
   "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
     "unplugin-vue": "^5.0.5",
     "vite-plugin-dts": "^3.8.3",
     "vue": "^3.4.23",
diff --git a/packages/applet/src/components/basic/CodeBlock.vue b/packages/applet/src/components/basic/CodeBlock.vue
new file mode 100644
index 00000000..d1792bcd
--- /dev/null
+++ b/packages/applet/src/components/basic/CodeBlock.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+// This components requires to run in DevTools to render correctly
+import { computed, nextTick } from 'vue'
+import type { BuiltinLanguage } from 'shiki'
+import { renderCodeHighlight } from '~/composables/shiki'
+
+const props = withDefaults(
+  defineProps<{
+    code: string
+    lang?: BuiltinLanguage | 'text'
+    lines?: boolean
+    transformRendered?: (code: string) => string
+  }>(),
+  {
+    lines: true,
+  },
+)
+
+const emit = defineEmits(['loaded'])
+
+const rendered = computed(() => {
+  const result = props.lang === 'text'
+    ? { code: props.code, supported: false }
+    : renderCodeHighlight(props.code, props.lang) || { code: props.code, supported: false }
+  if (result.supported && props.transformRendered)
+    result.code = props.transformRendered(result.code)
+  if (result.supported)
+    nextTick(() => emit('loaded'))
+  return result
+})
+</script>
+
+<template>
+  <template v-if="lang && rendered.supported">
+    <pre
+      class="code-block"
+      :class="lines ? 'code-block-lines' : ''"
+      v-html="rendered.code"
+    />
+  </template>
+  <template v-else>
+    <pre
+      class="code-block"
+      :class="lines ? 'code-block-lines' : ''"
+    ><pre class="shiki"><code><template v-for="line, _idx in code.split('\n')" :key="_idx"><span class="line" v-text="line" /><br></template></code></pre></pre>
+  </template>
+</template>
+
+<style>
+.code-block-lines .shiki code {
+  counter-reset: step;
+  counter-increment: step calc(var(--start, 1) - 1);
+}
+.code-block-lines .shiki code .line::before {
+  content: counter(step);
+  counter-increment: step;
+  width: 2.5rem;
+  padding-right: 0.5rem;
+  margin-right: 0.5rem;
+  display: inline-block;
+  text-align: right;
+  --at-apply: 'text-truegray:50';
+}
+</style>
diff --git a/packages/applet/src/components/basic/NodeTag.vue b/packages/applet/src/components/basic/NodeTag.vue
new file mode 100644
index 00000000..ab2c6733
--- /dev/null
+++ b/packages/applet/src/components/basic/NodeTag.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { InspectorNodeTag } from '@vue/devtools-kit'
+import { VTooltip as vTooltip } from '@vue/devtools-ui'
+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/applet/src/components/basic/SelectiveList.vue b/packages/applet/src/components/basic/SelectiveList.vue
index 0b8e7009..5709105a 100644
--- a/packages/applet/src/components/basic/SelectiveList.vue
+++ b/packages/applet/src/components/basic/SelectiveList.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { defineModel } from 'vue'
+import type { InspectorNodeTag } from '@vue/devtools-kit'
+import NodeTag from '~/components/basic/NodeTag.vue'
 
-defineProps<{ data: { id: string, label: string }[] }>()
+defineProps<{ data: { id: string, label: string, tags: InspectorNodeTag[] }[] }>()
 
 const selected = defineModel()
 
@@ -19,6 +21,7 @@ function select(id: string) {
       @click="select(item.id)"
     >
       {{ item.label }}
+      <NodeTag v-for="(_item, index) in item.tags" :key="index" :tag="_item" />
     </li>
   </ul>
 </template>
diff --git a/packages/applet/src/components/state/RootStateViewer.vue b/packages/applet/src/components/state/RootStateViewer.vue
index 56f4ed7d..8f0ee236 100644
--- a/packages/applet/src/components/state/RootStateViewer.vue
+++ b/packages/applet/src/components/state/RootStateViewer.vue
@@ -11,8 +11,10 @@ const props = withDefaults(defineProps<{
   nodeId: string
   inspectorId: string
   disableEdit?: boolean
+  expandedStateId?: string
 }>(), {
   disableEdit: false,
+  expandedStateId: '',
 })
 
 function initEditorContext() {
@@ -28,15 +30,7 @@ watchEffect(() => {
   context.value = initEditorContext()
 })
 
-const { expanded, toggleExpanded } = useToggleExpanded()
-
-watchEffect(() => {
-  // Expand the root level by default
-  Object.keys(props.data).forEach((_, index) => {
-    if (!expanded.value.includes(`${index}`))
-      toggleExpanded(`${index}`)
-  })
-})
+const { expanded, toggleExpanded } = useToggleExpanded(props.expandedStateId)
 </script>
 
 <template>
diff --git a/packages/applet/src/components/state/StateFieldEditor.vue b/packages/applet/src/components/state/StateFieldEditor.vue
index 16132cf6..1d11da73 100644
--- a/packages/applet/src/components/state/StateFieldEditor.vue
+++ b/packages/applet/src/components/state/StateFieldEditor.vue
@@ -68,7 +68,7 @@ function quickEditNum(v: number | string, offset: 1 | -1) {
 </script>
 
 <template>
-  <div class="inline pl5px">
+  <div class="flex pl5px">
     <!-- only editable will show operate actions -->
     <template v-if="!props.disableEdit && data.editable">
       <!-- input edit, number/string/object -->
diff --git a/packages/applet/src/components/state/StateFieldViewer.vue b/packages/applet/src/components/state/StateFieldViewer.vue
index 16f87cc8..2ae9caf3 100644
--- a/packages/applet/src/components/state/StateFieldViewer.vue
+++ b/packages/applet/src/components/state/StateFieldViewer.vue
@@ -58,7 +58,7 @@ const normalizedDisplayedKey = computed(() => {
 // normalized display value
 const normalizedDisplayedValue = computed(() => {
   const directlyDisplayedValueMap = ['Reactive']
-  const extraDisplayedValue = (props.data as InspectorCustomState)._custom?.stateTypeName || props.data?.stateTypeName
+  const extraDisplayedValue = (props.data as InspectorCustomState)?._custom?.stateTypeName || props.data?.stateTypeName
   if (directlyDisplayedValueMap.includes(extraDisplayedValue!)) {
     return extraDisplayedValue
   }
@@ -68,10 +68,10 @@ const normalizedDisplayedValue = computed(() => {
   }
 
   else {
-    const _type = (props.data.value as InspectorCustomState)._custom?.type
+    const _type = (props.data.value as InspectorCustomState)?._custom?.type
     const _value = type.value === 'custom' && !_type ? `"${displayedValue.value}"` : (displayedValue.value === '' ? `""` : displayedValue.value)
     const normalizedType = type.value === 'custom' && _type === 'ref' ? getInspectorStateValueType(_value) : type.value
-    const result = `<span class="${normalizedType}-state-type">${_value}</span>`
+    const result = `<span class="${normalizedType}-state-type flex whitespace-nowrap">${_value}</span>`
 
     if (extraDisplayedValue)
       return `${result} <span class="text-gray-500">(${extraDisplayedValue})</span>`
@@ -197,13 +197,13 @@ function submitDrafting() {
       />
       <!-- placeholder -->
       <span v-else pl5 />
-      <span op70>
+      <span op70 class="whitespace-nowrap">
         {{ normalizedDisplayedKey }}
       </span>
       <span mx1>:</span>
       <StateFieldInputEditor v-if="editing" v-model="editingText" :custom-type="raw.customType" @cancel="toggleEditing" @submit="submit" />
-      <span :class="stateFormatClass">
-        <span v-html="normalizedDisplayedValue" />
+      <span :class="stateFormatClass" class="flex whitespace-nowrap">
+        <span class="flex" v-html="normalizedDisplayedValue" />
       </span>
       <StateFieldEditor
         :hovering="isHovering" :disable-edit="state.disableEdit"
diff --git a/packages/applet/src/components/tree/TreeViewer.vue b/packages/applet/src/components/tree/TreeViewer.vue
new file mode 100644
index 00000000..c3593fd4
--- /dev/null
+++ b/packages/applet/src/components/tree/TreeViewer.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { ComponentTreeNode } from '@vue/devtools-kit'
+import ToggleExpanded from '~/components/basic/ToggleExpanded.vue'
+import ComponentTreeViewer from '~/components/tree/TreeViewer.vue'
+import NodeTag from '~/components/basic/NodeTag.vue'
+
+import { useToggleExpanded } from '~/composables/toggle-expanded'
+import { useSelect } from '~/composables/select'
+
+withDefaults(defineProps<{
+  data: ComponentTreeNode[]
+  depth: number
+}>(), {
+  depth: 0,
+})
+const selectedNodeId = defineModel()
+const { expanded, toggleExpanded } = useToggleExpanded()
+const { select: _select } = useSelect()
+
+function select(id: string) {
+  selectedNodeId.value = id
+}
+</script>
+
+<template>
+  <div
+    v-for="(item, index) in data"
+    :key="index"
+  >
+    <div
+      class="group flex cursor-pointer items-center rounded-1 hover:(bg-primary-300 dark:bg-gray-600)"
+      :style=" { paddingLeft: `${15 * depth + 4}px` }"
+      :class="{ 'bg-primary-600! active': selectedNodeId === item.id }"
+      @click="select(item.id)"
+    >
+      <ToggleExpanded
+        v-if="item?.children?.length"
+        :value="expanded.includes(item.id)"
+        class="[.active_&]:op20 group-hover:op20"
+        @click.stop="toggleExpanded(item.id)"
+      />
+      <!-- placeholder -->
+      <span v-else pl5 />
+      <span font-state-field text-4>
+        <span class="text-gray-400 dark:text-gray-600 group-hover:(text-white op50) [.active_&]:(op50 text-white!)">&lt;</span>
+        <span group-hover:text-white class="[.active_&]:(text-white)">{{ item.name }}</span>
+        <span class="text-gray-400 dark:text-gray-600 group-hover:(text-white op50) [.active_&]:(op50 text-white!)">&gt;</span>
+      </span>
+      <NodeTag v-for="(_item, index) in item.tags" :key="index" :tag="_item" />
+    </div>
+    <div
+      v-if="item?.children?.length && expanded.includes(item.id)"
+    >
+      <ComponentTreeViewer v-model="selectedNodeId" :data="item?.children" :depth="depth + 1" />
+    </div>
+  </div>
+</template>
diff --git a/packages/applet/src/composables/devtools-state.ts b/packages/applet/src/composables/devtools-state.ts
new file mode 100644
index 00000000..a0ec7a6f
--- /dev/null
+++ b/packages/applet/src/composables/devtools-state.ts
@@ -0,0 +1,44 @@
+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/select.ts b/packages/applet/src/composables/select.ts
new file mode 100644
index 00000000..2d6356d1
--- /dev/null
+++ b/packages/applet/src/composables/select.ts
@@ -0,0 +1,27 @@
+import type { InjectionKey, Ref } from 'vue'
+import { inject, provide, ref } from 'vue'
+
+const SelectedSymbolKey: InjectionKey<Ref<string>> = Symbol('SelectedSymbolKey')
+
+export function createSelectedContext() {
+  const selected = ref<string>('')
+
+  provide<Ref<string>>(SelectedSymbolKey, selected)
+
+  return {
+    selected,
+  }
+}
+
+export function useSelect() {
+  const selected = inject<Ref<string>>(SelectedSymbolKey, ref(''))!
+
+  function select(value: string) {
+    selected.value = value
+  }
+
+  return {
+    selected,
+    select,
+  }
+}
diff --git a/packages/applet/src/composables/shiki.ts b/packages/applet/src/composables/shiki.ts
new file mode 100644
index 00000000..be5ed61a
--- /dev/null
+++ b/packages/applet/src/composables/shiki.ts
@@ -0,0 +1,54 @@
+import type { BuiltinLanguage, HighlighterCore } from 'shiki'
+import { getHighlighterCore } from 'shiki/core'
+import getWasm from 'shiki/wasm'
+import { shallowRef } from 'vue'
+
+export const shiki = shallowRef<HighlighterCore>()
+
+let promise: Promise<any> | null = null
+
+export function renderCodeHighlight(code: string, lang: BuiltinLanguage | 'text' = 'text') {
+  if (!promise && !shiki.value) {
+    // Only loading when needed
+    promise = getHighlighterCore({
+      themes: [
+        import('shiki/themes/vitesse-dark.mjs'),
+        import('shiki/themes/vitesse-light.mjs'),
+      ],
+      langs: [
+        import('shiki/langs/json.mjs'),
+        import('shiki/langs/yaml.mjs'),
+        import('shiki/langs/css.mjs'),
+        import('shiki/langs/javascript.mjs'),
+        import('shiki/langs/typescript.mjs'),
+        import('shiki/langs/vue.mjs'),
+        import('shiki/langs/vue-html.mjs'),
+        import('shiki/langs/html.mjs'),
+        import('shiki/langs/diff.mjs'),
+        import('shiki/langs/shellscript.mjs'),
+      ],
+      loadWasm: getWasm,
+    }).then((i) => {
+      shiki.value = i
+    })
+  }
+
+  const supported = shiki.value?.getLoadedLanguages().includes(lang)
+  if (!supported) {
+    return {
+      code,
+      supported,
+    }
+  }
+
+  return {
+    code: shiki.value!.codeToHtml(code, {
+      lang,
+      themes: {
+        dark: 'vitesse-dark',
+        light: 'vitesse-light',
+      },
+    }),
+    supported: true,
+  }
+}
diff --git a/packages/applet/src/composables/toggle-expanded.ts b/packages/applet/src/composables/toggle-expanded.ts
index 129cb453..36f1d2b8 100644
--- a/packages/applet/src/composables/toggle-expanded.ts
+++ b/packages/applet/src/composables/toggle-expanded.ts
@@ -1,18 +1,20 @@
 import type { Ref } from 'vue'
 import { inject, provide, ref } from 'vue'
 
-export function createExpandedContext() {
+const expandedKey = 'expanded-state'
+
+export function createExpandedContext(id = '') {
   const expanded = ref<string[]>([])
 
-  provide<Ref<string[]>>(`state-expanded`, expanded)
+  provide<Ref<string[]>>(`${expandedKey}-${id}`, expanded)
 
   return {
     expanded,
   }
 }
 
-export function useToggleExpanded() {
-  const expanded = inject<Ref<string[]>>(`state-expaned`, ref([]))!
+export function useToggleExpanded(id = '') {
+  const expanded = inject<Ref<string[]>>(`${expandedKey}-${id}`, ref([]))!
 
   function toggleExpanded(key: string) {
     const index = expanded.value.indexOf(key)
diff --git a/packages/applet/src/index.ts b/packages/applet/src/index.ts
index 7b23213a..85f8f61e 100644
--- a/packages/applet/src/index.ts
+++ b/packages/applet/src/index.ts
@@ -1,5 +1,8 @@
 import 'uno.css'
 import '@unocss/reset/tailwind.css'
 import './styles/base.css'
+import 'floating-vue/dist/style.css'
 
-export * from './pinia'
+export * from './modules/pinia'
+export * from './modules/components'
+export * from './modules/router'
diff --git a/packages/applet/src/modules/components/components/RenderCode.vue b/packages/applet/src/modules/components/components/RenderCode.vue
new file mode 100644
index 00000000..5ccb4606
--- /dev/null
+++ b/packages/applet/src/modules/components/components/RenderCode.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import CodeBlock from '~/components/basic/CodeBlock.vue'
+
+defineProps<{
+  code: string
+}>()
+
+const emit = defineEmits(['close'])
+
+function close() {
+  emit('close')
+}
+</script>
+
+<template>
+  <div class="absolute left-0 top-0 h-full w-full flex flex-col bg-white p2 dark:bg-[#121212]">
+    <div class="h-12 w-full flex items-center justify-between py-2">
+      <span class="font-500">Render Code</span>
+      <i class="i-carbon-close cursor-pointer hover:op80" @click="close" />
+    </div>
+    <div class="no-scrollbar flex-1 select-none overflow-scroll">
+      <CodeBlock :code="code" lang="javascript" />
+    </div>
+  </div>
+</template>
diff --git a/packages/applet/src/modules/components/index.ts b/packages/applet/src/modules/components/index.ts
new file mode 100644
index 00000000..5bd7a9dd
--- /dev/null
+++ b/packages/applet/src/modules/components/index.ts
@@ -0,0 +1,5 @@
+import Components from './index.vue'
+
+export {
+  Components,
+}
diff --git a/packages/applet/src/modules/components/index.vue b/packages/applet/src/modules/components/index.vue
new file mode 100644
index 00000000..49a1cc55
--- /dev/null
+++ b/packages/applet/src/modules/components/index.vue
@@ -0,0 +1,316 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { Pane, Splitpanes } from 'splitpanes'
+import type { ComponentTreeNode, InspectorState } from '@vue/devtools-kit'
+import {
+  cancelInspectComponentInspector as cancelInspectComponentInspectorAction,
+  getComponentRenderCode as getComponentRenderCodeAction,
+  getInspectorState,
+  getInspectorTree,
+  inspectComponentInspector as inspectComponentInspectorAction,
+  onInspectorStateUpdated,
+  onInspectorTreeUpdated,
+  scrollToComponent as scrollToComponentAction,
+} from '@vue/devtools-core'
+import { parse } from '@vue/devtools-kit'
+import { useElementSize, useToggle, watchDebounced } from '@vueuse/core'
+import { VueInput, VTooltip as vTooltip } from '@vue/devtools-ui'
+import { sortByKey } from '@vue/devtools-shared'
+import { flatten, groupBy } from 'lodash-es'
+import ComponentRenderCode from './components/RenderCode.vue'
+import ComponentTree from '~/components/tree/TreeViewer.vue'
+import { createExpandedContext } from '~/composables/toggle-expanded'
+import { createSelectedContext } from '~/composables/select'
+import RootStateViewer from '~/components/state/RootStateViewer.vue'
+import { searchDeepInObject } from '~/utils'
+
+const emit = defineEmits(['openInEditor', 'onInspectComponentStart', 'onInspectComponentEnd'])
+// responsive layout
+const splitpanesRef = ref<HTMLDivElement>()
+const splitpanesReady = ref(false)
+const { width: splitpanesWidth } = useElementSize(splitpanesRef)
+// prevent `Splitpanes` layout from being changed before it ready
+const horizontal = computed(() => splitpanesReady.value ? splitpanesWidth.value < 700 : false)
+const filterComponentName = ref('')
+const filterStateName = ref('')
+const [filtered, toggleFiltered] = useToggle(true)
+const componentTreeLoaded = ref(false)
+const inspectComponentTipVisible = ref(false)
+const componentRenderCode = ref('')
+
+// tree
+function dfs(node: { id: string, children?: { id: string }[] }, path: string[] = [], linkedList: string[][] = []) {
+  path.push(node.id)
+  if (node.children?.length === 0)
+    linkedList.push([...path])
+
+  node.children?.forEach((child) => {
+    dfs(child, path, linkedList)
+  })
+  path.pop()
+  return linkedList
+}
+
+function getNodesByDepth(list: string[][], depth: number) {
+  const nodes: string[] = []
+  list.forEach((item) => {
+    nodes.push(...item.slice(0, depth + 1))
+  })
+  return [...new Set(nodes)]
+}
+
+function getTargetLinkedNodes(list: string[][], target: string) {
+  const nodes: string[] = []
+  list.forEach((item) => {
+    const index = item.indexOf(target)
+    if (index !== -1)
+      nodes.push(...item.slice(0, index + 1))
+  })
+  return [...new Set(nodes)]
+}
+
+const inspectorId = 'components'
+const tree = ref<ComponentTreeNode[]>([])
+const treeNodeLinkedList = computed(() => tree.value?.length ? dfs(tree.value?.[0]) : [])
+const activeComponentState = ref<Record<string, InspectorState[]>>({})
+const activeComponentId = ref('')
+const activeTreeNode = computed(() => {
+  const res: ComponentTreeNode[] = []
+  const find = (treeNode: ComponentTreeNode[]) => {
+    treeNode.forEach((item) => {
+      if (item.id === activeComponentId.value)
+        res.push(item)
+      if (item.children?.length)
+        find(item.children)
+    })
+  }
+  find(tree.value)
+  return res[0]
+})
+const activeTreeNodeFilePath = computed(() => activeTreeNode.value?.file ?? '')
+
+const filteredState = computed(() => {
+  const result = {}
+  for (const groupKey in activeComponentState.value) {
+    const group = activeComponentState.value[groupKey]
+    const groupFields = group.filter((el) => {
+      try {
+        return searchDeepInObject({
+          [el.key]: el.value,
+        }, filterStateName.value)
+      }
+      catch (e) {
+        return {
+          [el.key]: e,
+        }
+      }
+    })
+    const normalized = flatten(Object.values(groupBy(sortByKey(groupFields), 'stateType')))
+    if (groupFields.length)
+      result[groupKey] = normalized
+  }
+  return result
+})
+
+const { expanded: expandedTreeNodes } = createExpandedContext()
+const { expanded: expandedStateNodes } = createExpandedContext('component-state')
+createSelectedContext()
+
+function getComponentsInspectorTree(filter = '') {
+  return getInspectorTree({ inspectorId, filter }).then((_data) => {
+    const data = parse(_data!)
+    tree.value = data
+    activeComponentId.value = tree.value?.[0]?.id
+    expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
+    componentTreeLoaded.value = true
+  })
+}
+
+function normalizeComponentState(data: { state?: InspectorState[] }) {
+  if (!data || !data?.state)
+    return {}
+  const res = {}
+  data.state.forEach((item) => {
+    if (!res[item.type])
+      res[item.type] = []
+    res[item.type].push(item)
+  })
+  return res
+}
+
+function getComponentState(id: string) {
+  getInspectorState({ inspectorId, nodeId: id }).then((data) => {
+    activeComponentState.value = normalizeComponentState(parse(data!))
+    expandedStateNodes.value = Array.from({ length: Object.keys(activeComponentState.value).length }, (_, i) => `${i}`)
+  })
+}
+
+watch(activeComponentId, (id) => {
+  getComponentState(id)
+})
+
+onInspectorStateUpdated((data) => {
+  if (data.inspectorId !== inspectorId)
+    return
+
+  activeComponentState.value = normalizeComponentState({ state: data.state })
+})
+
+getComponentsInspectorTree()
+
+onInspectorTreeUpdated((data) => {
+  if (!data?.data.length || data.inspectorId !== inspectorId)
+    return
+
+  tree.value = data.data
+
+  // expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
+})
+
+watchDebounced(filterComponentName, (v) => {
+  const value = v.trim().toLowerCase()
+  toggleFiltered()
+  getComponentsInspectorTree(value).then(() => {
+    toggleFiltered()
+  })
+}, { debounce: 300 })
+
+function inspectComponentInspector() {
+  inspectComponentTipVisible.value = true
+  emit('onInspectComponentStart')
+  inspectComponentInspectorAction().then((_data) => {
+    const data = JSON.parse(_data!)
+    activeComponentId.value = data.id
+    if (!expandedTreeNodes.value.includes(data.id))
+      expandedTreeNodes.value.push(data.id)
+
+    expandedTreeNodes.value = [...new Set([...expandedTreeNodes.value, ...getTargetLinkedNodes(treeNodeLinkedList.value, data.id)])]
+    scrollToActiveTreeNode()
+  }).finally(() => {
+    inspectComponentTipVisible.value = false
+    emit('onInspectComponentEnd')
+  })
+}
+
+function cancelInspectComponentInspector() {
+  inspectComponentTipVisible.value = false
+  cancelInspectComponentInspectorAction()
+}
+
+function scrollToComponent() {
+  scrollToComponentAction({
+    id: activeComponentId.value,
+  })
+}
+
+function getComponentRenderCode() {
+  getComponentRenderCodeAction(activeComponentId.value).then((data) => {
+    componentRenderCode.value = data!
+  })
+}
+
+function openInEditor() {
+  emit('openInEditor', activeTreeNodeFilePath.value)
+}
+
+const componentTreeContainer = ref<HTMLDivElement>()
+function scrollToActiveTreeNode() {
+  setTimeout(() => {
+    const selected = componentTreeContainer.value?.querySelector('.active')
+    selected?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  }, 0)
+}
+
+// @TODO: 1. tree node tags 2. toggle panel when inspect component
+</script>
+
+<template>
+  <div class="h-full w-full">
+    <Splitpanes ref="splitpanesRef" class="flex-1 overflow-auto" :horizontal="horizontal" @ready="splitpanesReady = true">
+      <Pane border="r base" h-full>
+        <div v-if="componentTreeLoaded" class="h-full flex flex-col p2">
+          <div class="flex py2">
+            <VueInput v-model="filterComponentName" :loading-debounce-time="250" :loading="!filtered" placeholder="Find components..." flex-1 />
+            <button px-1 @click="inspectComponentInspector">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                style="height: 1.1em; width: 1.1em;color:#00dc82;"
+                class="hover:(op-80)"
+                viewBox="0 0 24 24"
+              >
+                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r=".5" fill="currentColor" /><path d="M5 12a7 7 0 1 0 14 0a7 7 0 1 0-14 0m7-9v2m-9 7h2m7 7v2m7-9h2" /></g>
+              </svg>
+            </button>
+          </div>
+          <div ref="componentTreeContainer" class="no-scrollbar flex-1 select-none overflow-scroll">
+            <ComponentTree v-model="activeComponentId" :data="tree" />
+          </div>
+        </div>
+      </Pane>
+      <Pane relative h-full>
+        <div class="h-full flex flex-col p2">
+          <div class="flex py2">
+            <!-- component name -->
+            <span v-if="activeTreeNode?.name" class="font-state-field flex items-center px-1 text-4">
+              <span class="text-gray-400 dark:text-gray-600">&lt;</span>
+              <span group-hover:text-white class="max-w-40 of-hidden text-ellipsis [.active_&]:(text-white)">{{ activeTreeNode.name }}</span>
+              <span class="text-gray-400 dark:text-gray-600">&gt;</span>
+            </span>
+
+            <VueInput v-model="filterStateName" :loading-debounce-time="250" placeholder="Filter State..." flex-1 />
+
+            <div class="flex items-center gap-2 px-1">
+              <i v-tooltip.bottom="'Scroll to component'" class="i-material-symbols-light:eye-tracking-outline h-4 w-4 cursor-pointer hover:(op-70)" @click="scrollToComponent" />
+              <i v-tooltip.bottom="'Show render code'" class="i-material-symbols-light:code h-5 w-5 cursor-pointer hover:(op-70)" @click="getComponentRenderCode" />
+              <i v-if="activeTreeNodeFilePath" v-tooltip.bottom="'Open in Editor'" class="i-carbon-launch h-4 w-4 cursor-pointer hover:(op-70)" @click="openInEditor" />
+            </div>
+          </div>
+          <RootStateViewer class="no-scrollbar flex-1 select-none overflow-scroll" :data="filteredState" :node-id="activeComponentId" :inspector-id="inspectorId" expanded-state-id="component-state" />
+        </div>
+        <ComponentRenderCode v-if="componentRenderCode" :code="componentRenderCode" @close="componentRenderCode = ''" />
+      </Pane>
+    </Splitpanes>
+
+    <!-- inspect-component dialog -->
+    <!-- <VueDialog v-model="inspectComponentTipVisible" title="" height="12rem" :closable="false">
+      <div class="h-full flex flex-col items-center justify-center gap-2">
+        <span class="block">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            style="height: 2em; width: 2em; opacity:0.5;color:#00dc82;"
+            class="animate-fade"
+            viewBox="0 0 24 24"
+          >
+            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r=".5" fill="currentColor" /><path d="M5 12a7 7 0 1 0 14 0a7 7 0 1 0-14 0m7-9v2m-9 7h2m7 7v2m7-9h2" /></g>
+          </svg>
+        </span>
+        <p>
+          Click on a component on the page to select it
+        </p>
+      </div>
+      <template #footer>
+        <div class="flex items-center justify-center">
+          <VueButton @click="cancelInspectComponentInspector">
+            Cancel
+          </VueButton>
+        </div>
+      </template>
+    </VueDialog> -->
+  </div>
+</template>
+
+<style scoped>
+@keyframes fade {
+  0%,
+  100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.animate-fade {
+  animation: fade 2s infinite alternate;
+}
+</style>
diff --git a/packages/applet/src/pinia/components/DevToolsLogo.vue b/packages/applet/src/modules/pinia/components/DevToolsLogo.vue
similarity index 100%
rename from packages/applet/src/pinia/components/DevToolsLogo.vue
rename to packages/applet/src/modules/pinia/components/DevToolsLogo.vue
diff --git a/packages/applet/src/pinia/components/Home.vue b/packages/applet/src/modules/pinia/components/Home.vue
similarity index 95%
rename from packages/applet/src/pinia/components/Home.vue
rename to packages/applet/src/modules/pinia/components/Home.vue
index f35ad767..6b4288e3 100644
--- a/packages/applet/src/pinia/components/Home.vue
+++ b/packages/applet/src/modules/pinia/components/Home.vue
@@ -25,9 +25,9 @@ const virtualRouter = useVirtualRouter()
       <div flex-auto />
 
       <div flex="~ gap2 wrap">
-        <div flex="~ col auto" min-w-40 p4 theme-card-lime>
+        <!-- <div flex="~ col auto" min-w-40 p4 theme-card-lime>
           <div i-logos-pinia text-3xl />
-        </div>
+        </div> -->
         <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>
diff --git a/packages/applet/src/pinia/components/Navbar.vue b/packages/applet/src/modules/pinia/components/Navbar.vue
similarity index 100%
rename from packages/applet/src/pinia/components/Navbar.vue
rename to packages/applet/src/modules/pinia/components/Navbar.vue
diff --git a/packages/applet/src/pinia/components/store/Index.vue b/packages/applet/src/modules/pinia/components/store/Index.vue
similarity index 88%
rename from packages/applet/src/pinia/components/store/Index.vue
rename to packages/applet/src/modules/pinia/components/store/Index.vue
index 18d3fc6a..c99cd8a9 100644
--- a/packages/applet/src/pinia/components/store/Index.vue
+++ b/packages/applet/src/modules/pinia/components/store/Index.vue
@@ -9,6 +9,9 @@ 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('pinia-store-state')
 
 const inspectorId = 'pinia'
 
@@ -32,6 +35,7 @@ function filterEmptyState(data: Record<string, unknown[] | undefined>) {
 function getPiniaState(nodeId: string) {
   getInspectorState({ inspectorId, nodeId }).then((data) => {
     state.value = filterEmptyState(parse(data!))
+    expandedStateNodes.value = Array.from({ length: Object.keys(state.value).length }, (_, i) => `${i}`)
   })
 }
 
@@ -73,6 +77,7 @@ onInspectorStateUpdated((data) => {
     state: data.state,
     getters: data.getters,
   })
+  expandedStateNodes.value = Array.from({ length: Object.keys(state.value).length }, (_, i) => `${i}`)
 })
 </script>
 
@@ -89,7 +94,7 @@ onInspectorStateUpdated((data) => {
       </Pane>
       <Pane size="60">
         <div h-full select-none overflow-scroll class="no-scrollbar">
-          <RootStateViewer v-if="selected && !emptyState" class="p3" :data="state" :node-id="selected" :inspector-id="inspectorId" />
+          <RootStateViewer v-if="selected && !emptyState" class="p3" :data="state" :node-id="selected" :inspector-id="inspectorId" expanded-state-id="pinia-store-state" />
           <Empty v-else>
             No Data
           </Empty>
diff --git a/packages/applet/src/pinia/components/timeline/EventList.vue b/packages/applet/src/modules/pinia/components/timeline/EventList.vue
similarity index 100%
rename from packages/applet/src/pinia/components/timeline/EventList.vue
rename to packages/applet/src/modules/pinia/components/timeline/EventList.vue
diff --git a/packages/applet/src/pinia/components/timeline/Index.vue b/packages/applet/src/modules/pinia/components/timeline/Index.vue
similarity index 93%
rename from packages/applet/src/pinia/components/timeline/Index.vue
rename to packages/applet/src/modules/pinia/components/timeline/Index.vue
index 23d1a177..fb8bd841 100644
--- a/packages/applet/src/pinia/components/timeline/Index.vue
+++ b/packages/applet/src/modules/pinia/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 type { InspectorState, TimelineEvent } from '@vue/devtools-kit'
-import { computed, ref } from 'vue'
 import Navbar from '../Navbar.vue'
 import EventList from './EventList.vue'
 import Empty from '~/components/basic/Empty.vue'
@@ -11,7 +11,10 @@ import RootStateViewer from '~/components/state/RootStateViewer.vue'
 import { createExpandedContext } from '~/composables/toggle-expanded'
 import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
 
-createExpandedContext()
+const { expanded: expandedStateNodes } = createExpandedContext('timeline-state')
+
+// event info + group info = [0, 1]
+expandedStateNodes.value = ['0', '1']
 
 const LAYER_ID = 'pinia:mutations'
 const eventList = ref<TimelineEvent['event'][]>([])
@@ -93,7 +96,7 @@ onAddTimelineEvent((payload) => {
           </Pane>
           <Pane size="60">
             <div h-full select-none overflow-scroll class="no-scrollbar">
-              <RootStateViewer class="p3" :data="displayedInfo" node-id="" inspector-id="" :disable-edit="true" />
+              <RootStateViewer class="p3" :data="displayedInfo" node-id="" inspector-id="" :disable-edit="true" expanded-state-id="timeline-state" />
             </div>
           </Pane>
         </Splitpanes>
diff --git a/packages/applet/src/pinia/index.ts b/packages/applet/src/modules/pinia/index.ts
similarity index 100%
rename from packages/applet/src/pinia/index.ts
rename to packages/applet/src/modules/pinia/index.ts
diff --git a/packages/applet/src/pinia/index.vue b/packages/applet/src/modules/pinia/index.vue
similarity index 100%
rename from packages/applet/src/pinia/index.vue
rename to packages/applet/src/modules/pinia/index.vue
diff --git a/packages/applet/src/modules/router/components/DevToolsLogo.vue b/packages/applet/src/modules/router/components/DevToolsLogo.vue
new file mode 100644
index 00000000..77432f2f
--- /dev/null
+++ b/packages/applet/src/modules/router/components/DevToolsLogo.vue
@@ -0,0 +1,6 @@
+<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 -4 24 24"><path fill="#3dd68c" d="M4 15V8.5a4.5 4.5 0 0 1 9 0v7a2.5 2.5 0 0 0 5 0V8.83a3.001 3.001 0 1 1 2 0v6.67a4.5 4.5 0 1 1-9 0v-7a2.5 2.5 0 0 0-5 0V15h3l-4 5l-4-5zm15-8a1 1 0 1 0 0-2a1 1 0 0 0 0 2" /></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/router/components/Home.vue b/packages/applet/src/modules/router/components/Home.vue
new file mode 100644
index 00000000..f5e31ab6
--- /dev/null
+++ b/packages/applet/src/modules/router/components/Home.vue
@@ -0,0 +1,52 @@
+<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>
+            Router 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('/routes')">
+          <div i-carbon-tree-view-alt text-3xl />
+          <code>Routes</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/router" target="_blank" flex="~ gap1" items-center op50 hover="op100 text-blue" transition>
+          <div i-carbon-star />
+          Star on GitHub
+        </a>
+        <a href="https://router.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/router/components/Navbar.vue b/packages/applet/src/modules/router/components/Navbar.vue
new file mode 100644
index 00000000..ca682b72
--- /dev/null
+++ b/packages/applet/src/modules/router/components/Navbar.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useVirtualRoute, useVirtualRouter } from '~/composables/virtual-router'
+
+const { routes, currentRoute } = useVirtualRoute()
+const router = useVirtualRouter()
+</script>
+
+<template>
+  <ul class="flex gap3">
+    <li
+      v-for="(item, index) in routes"
+      :key="index"
+      cursor-pointer hover:op100
+      :style="{
+        opacity: currentRoute.path === item.path ? 1 : 0.7,
+      }"
+      @click="router.push(item.path)"
+    >
+      {{ item.name }}
+    </li>
+  </ul>
+</template>
diff --git a/packages/applet/src/modules/router/components/routes/Index.vue b/packages/applet/src/modules/router/components/routes/Index.vue
new file mode 100644
index 00000000..63e889b4
--- /dev/null
+++ b/packages/applet/src/modules/router/components/routes/Index.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { Pane, Splitpanes } from 'splitpanes'
+import { getInspectorState, getInspectorTree, onInspectorStateUpdated, onInspectorTreeUpdated } from '@vue/devtools-core'
+import { parse } from '@vue/devtools-kit'
+import type { InspectorNodeTag, InspectorState } from '@vue/devtools-kit'
+import Navbar from '../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'
+
+const { expanded: expandedStateNodes } = createExpandedContext('routes-state')
+
+const devtoolsState = useDevToolsState()
+
+const inspectorId = computed(() => {
+  const item = devtoolsState.appRecords.value.find(app => app.id === devtoolsState.activeAppRecordId.value)
+  return `router-inspector:${item?.routerId ?? 0}`
+})
+
+const selected = ref('')
+const tree = ref<{ id: string, label: string, tags: InspectorNodeTag[] }[]>([])
+const state = ref<{
+  state?: InspectorState[]
+  getters?: InspectorState[]
+}>({})
+
+function filterEmptyState(data: Record<string, unknown[] | string | undefined>) {
+  for (const key in data) {
+    if (!data[key]?.length)
+      delete data[key]
+  }
+  return data
+}
+
+function getRoutesState(nodeId: string) {
+  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 clearRoutesState() {
+  state.value = {}
+}
+
+watch(selected, () => {
+  clearRoutesState()
+  getRoutesState(selected.value)
+})
+
+const getRoutesInspectorTree = () => {
+  getInspectorTree({ inspectorId: inspectorId.value, filter: '' }).then((_data) => {
+    const data = parse(_data!)
+    tree.value = data
+    if (!selected.value && data.length)
+      selected.value = data[0].id
+    getRoutesState(data[0].id)
+  })
+}
+getRoutesInspectorTree()
+
+onInspectorTreeUpdated((data) => {
+  if (!data?.data.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[0].id
+    getRoutesState(data.data[0].id)
+  }
+})
+
+onInspectorStateUpdated((data) => {
+  if (!data || !data?.state?.length || data.inspectorId !== inspectorId.value)
+    return
+
+  state.value = filterEmptyState(data!)
+  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://router.vuejs.org/" github-repo-link="https://github.com/vuejs/router">
+      <Navbar />
+    </DevToolsHeader>
+    <Splitpanes class="flex-1 overflow-auto">
+      <Pane border="r base" size="40" h-full>
+        <div h-full select-none overflow-scroll class="no-scrollbar">
+          <SelectiveList v-model="selected" :data="tree" />
+        </div>
+      </Pane>
+      <Pane size="60">
+        <div h-full select-none overflow-scroll class="no-scrollbar">
+          <RootStateViewer v-if="selected" class="p3" :data="state" node-id="" inspector-id="router" expanded-state-id="routes-state" />
+          <Empty v-else>
+            No Data
+          </Empty>
+        </div>
+      </Pane>
+    </Splitpanes>
+  </div>
+</template>
diff --git a/packages/applet/src/modules/router/components/timeline/EventList.vue b/packages/applet/src/modules/router/components/timeline/EventList.vue
new file mode 100644
index 00000000..2e6204ad
--- /dev/null
+++ b/packages/applet/src/modules/router/components/timeline/EventList.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { TimelineEvent } 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 }>
+}>()
+
+const selected = defineModel()
+const colors = ['#3e5770', '#42b983', '#0098c4']
+
+const normalizedData = computed(() => {
+  let currentColorIndex = -1
+  let currentGroupId = 0
+  props.data.forEach((item, index) => {
+    if (item.groupId !== currentGroupId || currentColorIndex === -1)
+      currentColorIndex = (currentColorIndex + 1) % colors.length
+
+    currentGroupId = item.groupId ?? currentGroupId
+
+    item.id = index
+    item.color = colors[currentColorIndex]
+  })
+  return props.data
+})
+</script>
+
+<template>
+  <div class="p3">
+    <RecycleScroller
+      v-slot="{ item }"
+      :items="normalizedData"
+      :min-item-size="52"
+      key-field="id"
+      page-mode
+      item-tag="li"
+      list-tag="ul"
+      :buffer="20"
+    >
+      <div class="relative mb7 h6 cursor-pointer" :style="{ color: selected === item.id ? item.color : '' }" @click="selected = item.id">
+        <!-- head -->
+        <span class="absolute top-1.5 inline-block h3 w3 b rounded-50%" :style="{ border: `3px solid ${item.color}` }" />
+        <!-- line -->
+        <span v-if="item.id < data.length - 1" class="absolute left-5px top-4.5 h10 w0 border-l-2" border="solid gray2" />
+        <!-- content -->
+        <p class="h-full flex items-center truncate pl5">
+          <span absolute top-5 pr2 text-3 op40>[{{ formatTime(item.time) }}]</span>
+          {{ item.title }}
+          <span pl2 op30>{{ item.subtitle }}</span>
+        </p>
+      </div>
+    </RecycleScroller>
+  </div>
+</template>
diff --git a/packages/applet/src/modules/router/components/timeline/Index.vue b/packages/applet/src/modules/router/components/timeline/Index.vue
new file mode 100644
index 00000000..11024f7c
--- /dev/null
+++ b/packages/applet/src/modules/router/components/timeline/Index.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { Pane, Splitpanes } from 'splitpanes'
+import { onAddTimelineEvent } from '@vue/devtools-core'
+import { computed, ref } from 'vue'
+
+import type { InspectorState, TimelineEvent } from '@vue/devtools-kit'
+import Navbar from '../Navbar.vue'
+import EventList from './EventList.vue'
+import Empty from '~/components/basic/Empty.vue'
+import RootStateViewer from '~/components/state/RootStateViewer.vue'
+import { createExpandedContext } from '~/composables/toggle-expanded'
+import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
+
+const { expanded: expandedStateNodes } = createExpandedContext('timeline-state')
+
+// event info + group info = [0, 1]
+expandedStateNodes.value = ['0', '1']
+
+const LAYER_ID = `router:navigations:0`
+const eventList = ref<TimelineEvent['event'][]>([])
+const groupList = ref<Map<number, TimelineEvent['event'][]>>(new Map())
+const selectedEventIndex = ref(0)
+const selectedEventInfo = computed(() => eventList.value[selectedEventIndex.value] ?? null)
+// event info
+const normalizedEventInfo = computed(() => {
+  const info: InspectorState[] = []
+  for (const key in selectedEventInfo.value?.data) {
+    info.push({
+      key,
+      type: key,
+      editable: false,
+      value: selectedEventInfo.value.data[key]!,
+    })
+  }
+  return info
+})
+// group info
+const normalizedGroupInfo = computed(() => {
+  const groupId = selectedEventInfo.value?.groupId
+  const groupInfo = groupList.value.get(groupId)!
+  if (groupInfo) {
+    const duration = groupInfo[groupInfo.length - 1]?.time - (groupInfo[0]?.time ?? 0)
+    return [{
+      key: 'events',
+      type: 'events',
+      editable: false,
+      value: groupInfo.length,
+    }, duration && {
+      key: 'duration',
+      type: 'duration',
+      editable: false,
+      value: `${duration}ms`,
+    }].filter(Boolean)
+  }
+  return undefined
+})
+
+// normalize display info
+const displayedInfo = computed(() => {
+  return { 'Event Info': normalizedEventInfo.value, ...(normalizedGroupInfo.value && { 'Group Info': normalizedGroupInfo.value }) } as unknown as Record<string, InspectorState[]>
+})
+
+function normalizeGroupList(event: TimelineEvent['event']) {
+  const groupId = event.groupId
+  if (groupId !== undefined) {
+    groupList.value.set(groupId, groupList.value.get(groupId) ?? [])
+    groupList.value.get(groupId)?.push(event)
+  }
+}
+
+onAddTimelineEvent((payload) => {
+  if (!payload)
+    return
+
+  const { layerId, event } = payload
+  if (layerId !== LAYER_ID)
+    return
+
+  eventList.value.push(event)
+  normalizeGroupList(event)
+})
+</script>
+
+<template>
+  <div class="h-full flex flex-col">
+    <DevToolsHeader doc-link="https://router.vuejs.org/" github-repo-link="https://github.com/vuejs/router">
+      <Navbar />
+    </DevToolsHeader>
+    <template v-if="eventList.length">
+      <div class="flex-1 overflow-hidden">
+        <Splitpanes class="h-full">
+          <Pane border="r base" size="40" h-full>
+            <div h-full select-none overflow-scroll class="no-scrollbar">
+              <EventList v-model="selectedEventIndex" :data="eventList" />
+            </div>
+          </Pane>
+          <Pane size="60">
+            <div h-full select-none overflow-scroll class="no-scrollbar">
+              <RootStateViewer class="p3" :data="displayedInfo" node-id="" inspector-id="" :disable-edit="true" expanded-state-id="timeline-state" />
+            </div>
+          </Pane>
+        </Splitpanes>
+      </div>
+    </template>
+    <Empty v-else class="flex-1">
+      No events
+    </Empty>
+  </div>
+</template>
diff --git a/packages/applet/src/modules/router/index.ts b/packages/applet/src/modules/router/index.ts
new file mode 100644
index 00000000..aae261bf
--- /dev/null
+++ b/packages/applet/src/modules/router/index.ts
@@ -0,0 +1,5 @@
+import Router from './index.vue'
+
+export {
+  Router,
+}
diff --git a/packages/applet/src/modules/router/index.vue b/packages/applet/src/modules/router/index.vue
new file mode 100644
index 00000000..f1d60f04
--- /dev/null
+++ b/packages/applet/src/modules/router/index.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+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'
+
+createDevToolsConnectStateContext()
+createDevToolsStateContext()
+
+const { VirtualRouterView } = registerVirtualRouter([
+  {
+    path: '/',
+    name: 'Home',
+    component: Home,
+    icon: 'i-ri-route-line',
+  },
+  {
+    path: '/routes',
+    name: 'Routes',
+    component: Routes,
+    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/styles/base.css b/packages/applet/src/styles/base.css
index 490d8f9a..fb098060 100644
--- a/packages/applet/src/styles/base.css
+++ b/packages/applet/src/styles/base.css
@@ -48,3 +48,15 @@
   /* Support Firefox */
   scrollbar-width: none;
 }
+
+/* Shikiji */
+/* refer: https://shikiji.netlify.app/guide/dual-themes#class-based-dark-mode */
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  /* Optional, if you also want font styles */
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
diff --git a/packages/applet/src/utils/color.ts b/packages/applet/src/utils/color.ts
new file mode 100644
index 00000000..4a04af97
--- /dev/null
+++ b/packages/applet/src/utils/color.ts
@@ -0,0 +1,3 @@
+export function toHex(color: number) {
+  return color.toString(16).padStart(6, '0')
+}
diff --git a/packages/applet/src/utils/index.ts b/packages/applet/src/utils/index.ts
index edf1e3ce..92d1e877 100644
--- a/packages/applet/src/utils/index.ts
+++ b/packages/applet/src/utils/index.ts
@@ -1 +1,3 @@
 export * from './date'
+export * from './search'
+export * from './color'
diff --git a/packages/applet/src/utils/search.ts b/packages/applet/src/utils/search.ts
new file mode 100644
index 00000000..3ba452a6
--- /dev/null
+++ b/packages/applet/src/utils/search.ts
@@ -0,0 +1,134 @@
+import { INFINITY, NAN, NEGATIVE_INFINITY, UNDEFINED, isPlainObject } from '@vue/devtools-kit'
+
+/**
+ * Searches a key or value in the object, with a maximum deepness
+ * @param {*} obj Search target
+ * @param {string} searchTerm Search string
+ * @returns {boolean} Search match
+ */
+export function searchDeepInObject(obj, searchTerm) {
+  const seen = new Map()
+  const result = internalSearchObject(obj, searchTerm.toLowerCase(), seen, 0)
+  seen.clear()
+  return result
+}
+
+const SEARCH_MAX_DEPTH = 10
+
+/**
+ * Executes a search on each field of the provided object
+ * @param {*} obj Search target
+ * @param {string} searchTerm Search string
+ * @param {Map<any,boolean>} seen Map containing the search result to prevent stack overflow by walking on the same object multiple times
+ * @param {number} depth Deep search depth level, which is capped to prevent performance issues
+ * @returns {boolean} Search match
+ */
+function internalSearchObject(obj, searchTerm, seen, depth) {
+  if (depth > SEARCH_MAX_DEPTH)
+    return false
+
+  let match = false
+  const keys = Object.keys(obj)
+  let key, value
+  for (let i = 0; i < keys.length; i++) {
+    key = keys[i]
+    value = obj[key]
+    match = internalSearchCheck(searchTerm, key, value, seen, depth + 1)
+    if (match)
+      break
+  }
+  return match
+}
+
+/**
+ * Checks if the provided field matches the search terms
+ * @param {string} searchTerm Search string
+ * @param {string} key Field key (null if from array)
+ * @param {*} value Field value
+ * @param {Map<any,boolean>} seen Map containing the search result to prevent stack overflow by walking on the same object multiple times
+ * @param {number} depth Deep search depth level, which is capped to prevent performance issues
+ * @returns {boolean} Search match
+ */
+function internalSearchCheck(searchTerm, key, value, seen, depth) {
+  let match = false
+  let result
+  if (key === '_custom') {
+    key = value.display
+    value = value.value
+  }
+  (result = specialTokenToString(value)) && (value = result)
+  if (key && compare(key, searchTerm)) {
+    match = true
+    seen.set(value, true)
+  }
+  else if (seen.has(value)) {
+    match = seen.get(value)
+  }
+  else if (Array.isArray(value)) {
+    seen.set(value, null)
+    match = internalSearchArray(value, searchTerm, seen, depth)
+    seen.set(value, match)
+  }
+  else if (isPlainObject(value)) {
+    seen.set(value, null)
+    match = internalSearchObject(value, searchTerm, seen, depth)
+    seen.set(value, match)
+  }
+  else if (compare(value, searchTerm)) {
+    match = true
+    seen.set(value, true)
+  }
+  return match
+}
+
+/**
+ * Compares two values
+ * @param {*} value Mixed type value that will be cast to string
+ * @param {string} searchTerm Search string
+ * @returns {boolean} Search match
+ */
+function compare(value, searchTerm) {
+  return (`${value}`).toLowerCase().includes(searchTerm)
+}
+
+export function specialTokenToString(value) {
+  if (value === null)
+    return 'null'
+
+  else if (value === UNDEFINED)
+    return 'undefined'
+
+  else if (value === NAN)
+    return 'NaN'
+
+  else if (value === INFINITY)
+    return 'Infinity'
+
+  else if (value === NEGATIVE_INFINITY)
+    return '-Infinity'
+
+  return false
+}
+
+/**
+ * Executes a search on each value of the provided array
+ * @param {*} array Search target
+ * @param {string} searchTerm Search string
+ * @param {Map<any,boolean>} seen Map containing the search result to prevent stack overflow by walking on the same object multiple times
+ * @param {number} depth Deep search depth level, which is capped to prevent performance issues
+ * @returns {boolean} Search match
+ */
+function internalSearchArray(array, searchTerm, seen, depth) {
+  if (depth > SEARCH_MAX_DEPTH)
+    return false
+
+  let match = false
+  let value
+  for (let i = 0; i < array.length; i++) {
+    value = array[i]
+    match = internalSearchCheck(searchTerm, null, value, seen, depth + 1)
+    if (match)
+      break
+  }
+  return match
+}
diff --git a/packages/applet/uno.config.ts b/packages/applet/uno.config.ts
index 007e5138..6061eca7 100644
--- a/packages/applet/uno.config.ts
+++ b/packages/applet/uno.config.ts
@@ -48,6 +48,8 @@ export default defineConfig(mergeConfigs([unoConfig, {
     // selective list
     'selectable-item': 'flex items-center px-2 py-1 rounded cursor-pointer hover:bg-primary-200 dark:(hover:bg-gray-800) @active:(text-white bg-primary-600 hover:(text-white bg-primary-600))',
 
+    'code-block': 'dark:bg-[#121212] bg-white',
+
     // state
     'string-state-type': 'text-#e74c3c dark:(text-#c41a16)',
     'literal-state-type': 'text-#03c dark:(text-#997fff)',
diff --git a/packages/client/package.json b/packages/client/package.json
index 77961003..120d9b9c 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -26,6 +26,7 @@
   "dependencies": {
     "@unocss/preset-icons": "^0.59.4",
     "@unocss/runtime": "^0.59.4",
+    "@vue/devtools-applet": "workspace:^",
     "@vue/devtools-core": "workspace:^",
     "@vue/devtools-kit": "workspace:^",
     "@vue/devtools-shared": "workspace:^",
diff --git a/packages/client/src/components/code/CodeBlock.vue b/packages/client/src/components/code/CodeBlock.vue
index fa5052da..195526fb 100644
--- a/packages/client/src/components/code/CodeBlock.vue
+++ b/packages/client/src/components/code/CodeBlock.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // This components requires to run in DevTools to render correctly
 import { computed, nextTick } from 'vue'
-import type { BuiltinLanguage } from 'shikiji'
+import type { BuiltinLanguage } from 'shiki'
 
 const props = withDefaults(
   defineProps<{
diff --git a/packages/client/src/components/code/CodeSnippets.vue b/packages/client/src/components/code/CodeSnippets.vue
index d4e27b22..4e827587 100644
--- a/packages/client/src/components/code/CodeSnippets.vue
+++ b/packages/client/src/components/code/CodeSnippets.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { BuiltinLanguage } from 'shikiji'
+import type { BuiltinLanguage } from 'shiki'
 import type { CodeSnippet } from '@vue/devtools-core'
 import { VueButton } from '@vue/devtools-ui'
 
diff --git a/packages/client/src/components/common/SplitScreen.vue b/packages/client/src/components/common/SplitScreen.vue
index ad89e2f0..6b753a59 100644
--- a/packages/client/src/components/common/SplitScreen.vue
+++ b/packages/client/src/components/common/SplitScreen.vue
@@ -83,7 +83,7 @@ const showGridPanel = ref(false)
       <!-- Tabs -->
       <component :is="PageComponent" :key="`tab-${currentTab.name}`" />
     </div>
-    <PanelGrids v-else>
+    <div v-else>
       <span text-lg op50>
         Select a tab to start
       </span>
@@ -93,6 +93,6 @@ const showGridPanel = ref(false)
       <VueButton type="warning" outlined mt2 @click="close">
         Close Split Screen
       </VueButton>
-    </PanelGrids>
+    </div>
   </div>
 </template>
diff --git a/packages/client/src/components/inspector/InspectorDataField/Actions.vue b/packages/client/src/components/inspector/InspectorDataField/Actions.vue
index 222c1673..59c9e1ef 100644
--- a/packages/client/src/components/inspector/InspectorDataField/Actions.vue
+++ b/packages/client/src/components/inspector/InspectorDataField/Actions.vue
@@ -66,7 +66,7 @@ function quickEditNum(v: number | string, offset: 1 | -1) {
 </script>
 
 <template>
-  <div class="inline pl5px">
+  <div class="flex pl5px">
     <!-- only editable will show operate actions -->
     <template v-if="!props.disableEdit && data.editable">
       <!-- input edit, number/string/object -->
diff --git a/packages/client/src/components/timeline/TimelineEvent.vue b/packages/client/src/components/timeline/TimelineEvent.vue
deleted file mode 100644
index 9429b661..00000000
--- a/packages/client/src/components/timeline/TimelineEvent.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import type { TimelineEvent } from '@vue/devtools-kit'
-import { RecycleScroller } from 'vue-virtual-scroller'
-import { formatTime } from '~/utils'
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
-
-defineProps<{
-  modelValue: string
-  data: TimelineEvent['event'][]
-}>()
-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="42"
-    key-field="id"
-    page-mode
-  >
-    <li
-      class="flex cursor-pointer items-center border-b px-2 py-2 text-gray-200 dark:border-bluegray-800"
-      :class="{
-        'hover:bg-blue-100 dark:hover:bg-blue-900 text-bluegray-800 dark:text-bluegray-200': !(modelValue === item.id),
-        'bg-primary-500 text-white': modelValue === item.id,
-      }"
-      @click="select(item.id)"
-    >
-      <span class="flex-1 truncate font-mono space-x-1">
-        <span
-          class="font-medium"
-          :class="{
-            'text-purple-600 dark:text-purple-400': !(modelValue === item.id),
-          }"
-        >
-          <span>{{ item.title || 'Event' }}</span>
-        </span>
-        <span v-if="item.subtitle" class="op-75" v-html="item.subtitle" />
-      </span>
-      <span v-if="item.time" class="flex-none text-xs font-mono op-50">
-        {{ formatTime(item.time) }}
-      </span>
-    </li>
-  </RecycleScroller>
-</template>
diff --git a/packages/client/src/components/timeline/TimelineLayer.vue b/packages/client/src/components/timeline/TimelineLayer.vue
deleted file mode 100644
index 6c5dbf01..00000000
--- a/packages/client/src/components/timeline/TimelineLayer.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { toHex } from '~/utils'
-
-const props = defineProps<{
-  modelValue: string
-  data: {
-    label: string
-    id: string
-    color: number
-  }
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-}>()
-
-function select() {
-  emit('update:modelValue', props.data.id)
-}
-const activeTextColor = computed(() => `#${toHex(props.data.color)}`)
-</script>
-
-<template>
-  <div class="selectable-item" :style="modelValue === data.id ? { color: activeTextColor } : {}" @click="select">
-    <span overflow-hidden text-ellipsis ws-nowrap>
-      {{ data.label }}
-    </span>
-  </div>
-</template>
diff --git a/packages/client/src/constants/tab.ts b/packages/client/src/constants/tab.ts
index 8dce0719..d8d44502 100644
--- a/packages/client/src/constants/tab.ts
+++ b/packages/client/src/constants/tab.ts
@@ -33,13 +33,6 @@ export const builtinTab: [string, ModuleBuiltinTab[]][] = [
       path: 'assets',
       title: 'Assets',
     },
-    {
-      icon: 'i-icon-park-outline:vertical-timeline',
-      name: 'timeline',
-      order: -100,
-      path: 'timeline',
-      title: 'Timeline',
-    },
   ]],
   ['modules', [
     {
diff --git a/packages/client/src/main.ts b/packages/client/src/main.ts
index a9bb212e..33df592b 100644
--- a/packages/client/src/main.ts
+++ b/packages/client/src/main.ts
@@ -13,7 +13,6 @@ import Overview from '~/pages/overview.vue'
 import PiniaPage from '~/pages/pinia.vue'
 import RouterPage from '~/pages/router.vue'
 import I18nPage from '~/pages/i18n.vue'
-import Timeline from '~/pages/timeline.vue'
 import Pages from '~/pages/pages.vue'
 import Assets from '~/pages/assets.vue'
 import Graph from '~/pages/graph.vue'
@@ -32,7 +31,6 @@ const routes = [
   { path: '/pinia', component: PiniaPage },
   { path: '/router', component: RouterPage },
   { path: '/i18n', component: I18nPage },
-  { path: '/timeline', component: Timeline },
   { path: '/pages', component: Pages },
   { path: '/assets', component: Assets },
   { path: '/graph', component: Graph },
diff --git a/packages/client/src/pages/assets.vue b/packages/client/src/pages/assets.vue
index 7976aa74..6efe9ad8 100644
--- a/packages/client/src/pages/assets.vue
+++ b/packages/client/src/pages/assets.vue
@@ -104,7 +104,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <PanelGrids block h-full of-auto class="drawer-container relative">
+  <div block h-full of-auto class="drawer-container relative">
     <Navbar ref="navbar" v-model:search="search" pb2 :no-padding="true">
       <template #actions>
         <div flex-none flex="~ gap2 items-center" text-lg>
@@ -192,5 +192,5 @@ onUnmounted(() => {
     >
       <AssetDetails v-if="selected" v-model="selected" />
     </VueDrawer>
-  </PanelGrids>
+  </div>
 </template>
diff --git a/packages/client/src/pages/components.vue b/packages/client/src/pages/components.vue
index 177ac57a..a99c4bcf 100644
--- a/packages/client/src/pages/components.vue
+++ b/packages/client/src/pages/components.vue
@@ -1,335 +1,23 @@
 <script setup lang="ts">
-import {
-  getComponentBoundingRect as getComponentBoundingRectAction,
-  getInspectorState,
-  getInspectorTree,
-  inspectComponentInspector as inspectComponentInspectorAction,
-  onInspectorStateUpdated,
-  onInspectorTreeUpdated,
-  scrollToComponent as scrollToComponentAction,
-  toggleComponentInspector as toggleComponentInspectorAction,
-  updateInspectorTreeId,
-  useDevToolsBridge,
-  useDevToolsState,
-} from '@vue/devtools-core'
-
-import type { ComponentBoundingRect, ComponentTreeNode, InspectorState } from '@vue/devtools-kit'
-import { parse } from '@vue/devtools-kit'
-
-import { VueIcon, VueInput, VTooltip as vTooltip } from '@vue/devtools-ui'
-import { Pane, Splitpanes } from 'splitpanes'
+import { Components as ComponentsPanel } from '@vue/devtools-applet'
+import '@vue/devtools-applet/style.css'
+import { useDevToolsBridge } from '@vue/devtools-core'
 import { openInEditor } from '../composables/open-in-editor'
 
-const inspectorId = 'components'
 const bridge = useDevToolsBridge()
-const treeNode = ref<ComponentTreeNode[]>([])
-const activeComponentId = ref('')
-
-const _vueInspectorDetected = computed(() => vueInspectorDetected.value)
-
-// UX related state
-const loaded = ref(false)
-const [filtered, toggleFiltered] = useToggle(true)
-
-// create component context
-const { selected: selectedComponentTree } = createSelectContext('component-tree')
-
-// create collapse context
-const { collapseMap: componentTreeCollapseMap, linkedList: componentTreeLinkedList } = createCollapseContext('component-tree')
-createCollapseContext('inspector-state')
-
-// selected component tree node
-const selectedComponentTreeNode = computed<ComponentTreeNode>(() => {
-  const res: ComponentTreeNode[] = []
-  const find = (treeNode: ComponentTreeNode[]) => {
-    treeNode.forEach((item) => {
-      if (item.id === selectedComponentTree.value)
-        res.push(item)
-      if (item.children?.length)
-        find(item.children)
-    })
-  }
-  find(treeNode.value)
-  return res[0]
-})
-
-const treeNodeIdLinkedList = computed<string[][]>(() => {
-  const res: string[][] = []
-  const find = (treeNode: ComponentTreeNode[], linkedList: string[] = []) => {
-    treeNode.forEach((item) => {
-      res.push([...linkedList, item.id])
-      if (item.children?.length)
-        find(item.children, [...linkedList, item.id])
-    })
-  }
-  find(treeNode.value)
-  return res
-})
-
-// selected component file path
-const selectedComponentFilePath = computed(() => selectedComponentTreeNode.value?.file ?? '')
-
-function checkComponentInTree(treeNode: ComponentTreeNode[], id: string) {
-  if (!treeNode.length)
-    return false
-  if (treeNode.find(item => item.id === id))
-    return true
-  return treeNode.some(item => checkComponentInTree(item.children || [], id))
-}
-
-function initSelectedComponent(treeNode: ComponentTreeNode[]) {
-  if (!treeNode.length)
-    return
-  if (!selectedComponentTree.value) {
-    selectedComponentTree.value = treeNode?.[0].id
-    getComponentState(treeNode?.[0].id)
-  }
-  else {
-    // fallback to root if selected component is not in the tree
-    if (!checkComponentInTree(treeNode, selectedComponentTree.value)) {
-      selectedComponentTree.value = treeNode?.[0].id
-      getComponentState(treeNode?.[0].id)
-    }
-  }
-}
-
-// #region bounding react start
-function getComponentBoundingRect(id: string) {
-  return new Promise<ComponentBoundingRect>((resolve) => {
-    getComponentBoundingRectAction({ inspectorId: 'components', instanceId: id }).then((data) => {
-      resolve(parse(data!))
-    })
-  })
-}
-// #endregion
-
-// #region tree start
-
-function normalizeComponentTreeCollapsed(treeNode: ComponentTreeNode[]) {
-  return {
-    [treeNode[0].id]: true,
-    ...treeNode?.[0].children?.reduce((acc, cur) => {
-      acc[cur.id] = true
-      return acc
-    }, {}),
-  }
-}
-
-function getComponentTree(filterText?: string) {
-  return new Promise<void>((resolve) => {
-    getInspectorTree({ inspectorId: 'components', filter: filterText }).then((_data) => {
-      const isNoComponentTreeCollapsed = !Object.keys(componentTreeCollapseMap.value).length
-      const data = parse(_data!)
-      treeNode.value = data
-      isNoComponentTreeCollapsed && (componentTreeCollapseMap.value = normalizeComponentTreeCollapsed(data))
-      initSelectedComponent(data)
-      resolve()
-    })
-  })
-}
-
-// #region component inspector start
-const isPending = ref(false)
-async function toggleComponentInspector(id: string, visible: boolean) {
-  if (isPending.value)
-    await until(isPending).toBe(false)
-  isPending.value = true
-
-  getComponentBoundingRect(id).then((rect) => {
-    toggleComponentInspectorAction({
-      id,
-      visible,
-      bounds: rect,
-    })
-    isPending.value = false
-  })
-}
-
-function scrollToComponent(id: string) {
-  scrollToComponentAction({
-    id,
-  })
-}
-
-function inspectComponentInspector() {
+function onInspectComponentStart() {
   bridge.value.emit('toggle-panel', false)
-  inspectComponentInspectorAction().then((_data) => {
-    const data = JSON.parse(_data!)
-    selectedComponentTree.value = data.id
-    selectComponentTree(data.id)
-    const linkedList = componentTreeLinkedList.value[data.id]
-    if (linkedList) {
-      linkedList.forEach((id) => {
-        componentTreeCollapseMap.value[id] = true
-      })
-    }
-    else {
-      treeNodeIdLinkedList.value.forEach((item) => {
-        let index = item.indexOf(data.id)
-        while (index >= 0) {
-          componentTreeCollapseMap.value[item[index]] = true
-          index--
-        }
-      })
-    }
-  }).finally(() => {
-    bridge.value.emit('toggle-panel', true)
-    scrollToComponentTree()
-  })
 }
 
-// #endregion
-
-function selectComponentTree(id: string) {
-  clearComponentState()
-  getComponentState(id)
-  activeComponentId.value = id
-}
-
-watch(selectedComponentTree, (id) => {
-  updateInspectorTreeId(id)
-})
-
-// #endregion
-
-// #region state start
-
-const activeComponentState = ref<Record<string, InspectorState[]>>({})
-
-function normalizeComponentState(data: { state?: InspectorState[] }) {
-  if (!data || !data?.state)
-    return {}
-  const res = {}
-  data.state.forEach((item) => {
-    if (!res[item.type])
-      res[item.type] = []
-    res[item.type].push(item)
-  })
-  return res
-}
-
-function getComponentState(id: string) {
-  getInspectorState({ inspectorId: 'components', nodeId: id }).then((data) => {
-    activeComponentState.value = normalizeComponentState(parse(data!))
-  })
-}
-
-function clearComponentState() {
-  activeComponentState.value = {}
-}
-
-// #endregion
-
-onDevToolsClientConnected(() => {
-  // tree
-  getComponentTree().then(() => {
-    loaded.value = true
-  })
-  onInspectorTreeUpdated((data) => {
-    if (!data?.data.length || data.inspectorId !== inspectorId)
-      return
-
-    treeNode.value = data.data
-    componentTreeCollapseMap.value = {
-      ...normalizeComponentTreeCollapsed(data.data),
-      ...componentTreeCollapseMap.value,
-    }
-    initSelectedComponent(data.data)
-  })
-
-  // state
-  onInspectorStateUpdated((data) => {
-    if (data.inspectorId !== inspectorId)
-      return
-
-    activeComponentState.value = normalizeComponentState({ state: data.state })
-  })
-})
-
-const filterName = ref('')
-
-// @TODO: bugfix - the selected component highlighted working failed when the filter is applied
-watchDebounced(filterName, (v) => {
-  const value = v.trim().toLowerCase()
-  toggleFiltered()
-  getComponentTree(value).then(() => {
-    toggleFiltered()
-  })
-}, { debounce: 300 })
-
-const devtoolsState = useDevToolsState()
-
-// responsive layout
-const splitpanesRef = ref<HTMLDivElement>()
-const splitpanesReady = ref(false)
-const { width: splitpanesWidth } = useElementSize(splitpanesRef)
-// prevent `Splitpanes` layout from being changed before it ready
-const horizontal = computed(() => splitpanesReady.value ? splitpanesWidth.value < 700 : false)
-
-const componentTreeContainer = ref<HTMLDivElement>()
-function scrollToComponentTree() {
-  // Use setTimeout to wait for the panel to be visible before scrolling
-  setTimeout(() => {
-    const selected = componentTreeContainer.value?.querySelector('.active')
-    selected?.scrollIntoView({ behavior: 'smooth', block: 'center' })
-  }, 0)
+function onInspectComponentEnd() {
+  bridge.value.emit('toggle-panel', true)
 }
 </script>
 
 <template>
-  <PanelGrids h-screen>
-    <Splitpanes ref="splitpanesRef" :horizontal="horizontal" @ready="splitpanesReady = true">
-      <Pane flex flex-col border="r base">
-        <div w-full flex gap2 px2 py2>
-          <VueInput v-if="loaded" v-model="filterName" :loading-debounce-time="250" :loading="!filtered" placeholder="Find components..." flex-1 />
-          <button v-if="devtoolsState.vitePluginDetected.value" px-1 @click="inspectComponentInspector">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              style="height: 1.1em; width: 1.1em; opacity:0.5;"
-              :style="true ? 'opacity:1;color:#00dc82' : ''"
-              viewBox="0 0 24 24"
-            >
-              <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r=".5" fill="currentColor" /><path d="M5 12a7 7 0 1 0 14 0a7 7 0 1 0-14 0m7-9v2m-9 7h2m7 7v2m7-9h2" /></g>
-            </svg>
-          </button>
-        </div>
-        <div ref="componentTreeContainer" h-screen select-none overflow-scroll p-2 class="no-scrollbar">
-          <ComponentTreeNode v-for="item in treeNode" :key="item.id" :data="item" @select="selectComponentTree" @mouseenter="toggleComponentInspector" @mouseleave="toggleComponentInspector" />
-        </div>
-      </Pane>
-      <Pane flex flex-col>
-        <div flex items-center justify-between overflow-auto px2 py3 class="no-scrollbar">
-          <span v-if="selectedComponentTreeNode?.name">{{ selectedComponentTreeNode.name }}</span>
-          <div flex="~ gap2">
-            <VueIcon
-              v-tooltip="'Scroll to Component'"
-
-              title="Scroll to Component"
-              icon="i-iconoir:mouse-scroll-wheel"
-              action flex-none
-              :border="false"
-              @click="scrollToComponent(selectedComponentTree)"
-            />
-
-            <VueIcon
-              v-if="selectedComponentFilePath && devtoolsState.vitePluginDetected.value && _vueInspectorDetected"
-              v-tooltip="'Open in Editor'"
-              title="Open in Editor"
-              icon="i-carbon-launch"
-              action flex-none
-              :border="false"
-              @click="openInEditor(selectedComponentFilePath)"
-            />
-          </div>
-        </div>
-        <p class="x-divider" />
-        <div :key="selectedComponentTree" h-0 grow overflow-auto p-2 class="no-scrollbar">
-          <InspectorState
-            v-for="(state, key) in activeComponentState" :id="key" :key="key"
-            :node-id="activeComponentId" :data="state" :name="`${key}`" inspector-id="components"
-          />
-        </div>
-      </Pane>
-    </Splitpanes>
-  </PanelGrids>
+  <ComponentsPanel
+    @open-in-editor="openInEditor"
+    @on-inspect-component-start="onInspectComponentStart"
+    @on-inspect-component-end="onInspectComponentEnd"
+  />
 </template>
diff --git a/packages/client/src/pages/custom-tab-view.vue b/packages/client/src/pages/custom-tab-view.vue
index 10aa1fbb..e02cb1ed 100644
--- a/packages/client/src/pages/custom-tab-view.vue
+++ b/packages/client/src/pages/custom-tab-view.vue
@@ -27,7 +27,7 @@ watch(() => route.params.name, () => {
 
 <template>
   <template v-if="!tab">
-    <PanelGrids flex="~ col" h-full items-center justify-center>
+    <div 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>
@@ -37,7 +37,7 @@ watch(() => route.params.name, () => {
           Redirecting to overview page...
         </p>
       </div>
-    </PanelGrids>
+    </div>
   </template>
   <template v-else-if="tab?.view?.type === 'iframe'">
     <IframeView v-if="iframeViewVisible" :src="tab.view.src" />
@@ -46,10 +46,10 @@ watch(() => route.params.name, () => {
     <Component :is="tab.view.vnode" />
   </template>
   <template v-else>
-    <PanelGrids>
+    <div>
       <NCard flex="~ col" h-full items-center justify-center>
         Unknown tab type {{ tab?.view }}
       </NCard>
-    </PanelGrids>
+    </div>
   </template>
 </template>
diff --git a/packages/client/src/pages/i18n.vue b/packages/client/src/pages/i18n.vue
index 2e3be4f8..94747e54 100644
--- a/packages/client/src/pages/i18n.vue
+++ b/packages/client/src/pages/i18n.vue
@@ -75,7 +75,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <PanelGrids h-screen>
+  <div h-screen>
     <Splitpanes>
       <Pane flex flex-col border="r base">
         <div h-screen select-none overflow-scroll p-2 class="no-scrollbar">
@@ -93,5 +93,5 @@ onUnmounted(() => {
         </div>
       </Pane>
     </Splitpanes>
-  </PanelGrids>
+  </div>
 </template>
diff --git a/packages/client/src/pages/index.vue b/packages/client/src/pages/index.vue
index 3a27fa23..1a67cb80 100644
--- a/packages/client/src/pages/index.vue
+++ b/packages/client/src/pages/index.vue
@@ -11,7 +11,7 @@ function visit() {
 </script>
 
 <template>
-  <PanelGrids flex="~ col gap3" relative h-screen w-full items-center justify-center text-center>
+  <div flex="~ col gap3" relative h-screen w-full items-center justify-center text-center>
     <p my2 text-3em text-primary-600 font-bold font-stylish>
       👋 Hi there, welcome to Vue DevTools!
     </p>
@@ -29,5 +29,5 @@ function visit() {
     <VueButton type="primary" @click="visit">
       <span>Get Started</span>
     </VueButton>
-  </PanelGrids>
+  </div>
 </template>
diff --git a/packages/client/src/pages/overview.vue b/packages/client/src/pages/overview.vue
index 3a750092..6289934f 100644
--- a/packages/client/src/pages/overview.vue
+++ b/packages/client/src/pages/overview.vue
@@ -45,7 +45,7 @@ onDevToolsClientConnected(() => {
 </script>
 
 <template>
-  <PanelGrids h-screen w-full flex of-auto>
+  <div h-screen w-full flex of-auto>
     <div flex="~ col gap2" ma h-full max-w-300 w-full px20>
       <div flex-auto />
 
@@ -153,5 +153,5 @@ onDevToolsClientConnected(() => {
         to toggle DevTools
       </div>
     </div>
-  </PanelGrids>
+  </div>
 </template>
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index 8d0ee301..bcd670dd 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -53,7 +53,7 @@ watchDebounced(routeInput, () => {
 </script>
 
 <template>
-  <PanelGrids block h-screen of-auto>
+  <div block h-screen of-auto>
     <div h-full of-auto>
       <div border="b base" flex="~ col gap1" px4 py3>
         <div>
@@ -110,5 +110,5 @@ watchDebounced(routeInput, () => {
         />
       </SectionBlock>
     </div>
-  </PanelGrids>
+  </div>
 </template>
diff --git a/packages/client/src/pages/pinia.vue b/packages/client/src/pages/pinia.vue
index 04e145b0..11d7d1c9 100644
--- a/packages/client/src/pages/pinia.vue
+++ b/packages/client/src/pages/pinia.vue
@@ -1,87 +1,8 @@
 <script setup lang="ts">
-import { getInspectorState, getInspectorTree, onInspectorStateUpdated, onInspectorTreeUpdated } from '@vue/devtools-core'
-
-import type { InspectorNodeTag, InspectorState } from '@vue/devtools-kit'
-import { parse } from '@vue/devtools-kit'
-import { Pane, Splitpanes } from 'splitpanes'
-
-const inspectorId = 'pinia'
-
-const selected = ref('')
-const tree = ref<{ id: string, label: string, tags: InspectorNodeTag[] }[]>([])
-const state = ref<{
-  inspectorId?: string
-  state?: InspectorState[]
-  getters?: InspectorState[]
-}>({})
-
-function getPiniaState(nodeId: string) {
-  getInspectorState({ inspectorId, nodeId }).then((data) => {
-    state.value = parse(data!)
-  })
-}
-
-function clearPiniaState() {
-  state.value = {}
-}
-
-watch(selected, () => {
-  clearPiniaState()
-  getPiniaState(selected.value)
-})
-
-createCollapseContext('inspector-state')
-
-onDevToolsClientConnected(() => {
-  getInspectorTree({ inspectorId, filter: '' }).then((_data) => {
-    const data = parse(_data!)
-    tree.value = data
-    if (!selected.value && data.length) {
-      selected.value = data[0].id
-      getPiniaState(data[0].id)
-    }
-  })
-
-  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[0].id
-      getPiniaState(data.data[0].id)
-    }
-  })
-
-  onInspectorStateUpdated((data) => {
-    if (!data || !data?.state?.length || data.inspectorId !== inspectorId)
-      return
-
-    state.value = {
-      state: data.state,
-      getters: data.getters!,
-    }
-  })
-})
+import { Pinia as PiniaPanel } from '@vue/devtools-applet'
+import '@vue/devtools-applet/style.css'
 </script>
 
 <template>
-  <PanelGrids 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="inspectorId"
-            :node-id="selected" :data="item" :name="`${key}`"
-          />
-        </div>
-      </Pane>
-    </Splitpanes>
-  </PanelGrids>
+  <PiniaPanel />
 </template>
diff --git a/packages/client/src/pages/router.vue b/packages/client/src/pages/router.vue
index f37e89c6..f6ef79de 100644
--- a/packages/client/src/pages/router.vue
+++ b/packages/client/src/pages/router.vue
@@ -1,86 +1,8 @@
 <script setup lang="ts">
-import { getInspectorState, getInspectorTree, onInspectorStateUpdated, onInspectorTreeUpdated, useDevToolsState } from '@vue/devtools-core'
-
-import type { InspectorState } from '@vue/devtools-kit'
-import { parse } from '@vue/devtools-kit'
-import { Pane, Splitpanes } from 'splitpanes'
-
-const selected = ref('')
-const tree = ref<{ id: string, label: string }[]>([])
-const state = ref<{
-  inspectorId?: string
-  state?: InspectorState[]
-}>({})
-const devtoolsState = useDevToolsState()
-const inspectorId = computed(() => {
-  const item = devtoolsState.appRecords.value.find(app => app.id === devtoolsState.activeAppRecordId.value)
-  return `router-inspector:${item?.routerId ?? 0}`
-})
-createCollapseContext('inspector-state')
-
-function getRouterState(nodeId: string) {
-  getInspectorState({ inspectorId: inspectorId.value, nodeId }).then((data) => {
-    state.value = parse(data!)
-  })
-}
-
-function clearRouterState() {
-  state.value = {}
-}
-
-watch(selected, () => {
-  clearRouterState()
-  getRouterState(selected.value)
-})
-
-onDevToolsClientConnected(() => {
-  getInspectorTree({ inspectorId: inspectorId.value, filter: '' }).then((_data) => {
-    const data = parse(_data!)
-    tree.value = data
-    if (!selected.value && data.length) {
-      selected.value = data[0].id
-      getRouterState(data[0].id)
-    }
-  })
-
-  onInspectorTreeUpdated((data) => {
-    if (!data?.data?.length || data.inspectorId !== inspectorId.value)
-      return
-    tree.value = data.data as unknown as { id: string, label: string }[]
-    if (!selected.value && data.data.length) {
-      selected.value = data.data[0].id
-      getRouterState(data.data[0].id)
-    }
-  })
-
-  onInspectorStateUpdated((data) => {
-    if (!data || !data.state || data.inspectorId !== inspectorId.value)
-      return
-
-    state.value = {
-      state: data.state,
-    }
-  })
-})
+import { Router as RouterPanel } from '@vue/devtools-applet'
+import '@vue/devtools-applet/style.css'
 </script>
 
 <template>
-  <PanelGrids 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" :data="item" :name="`${key}`"
-            inspector-id="router"
-          />
-        </div>
-      </Pane>
-    </Splitpanes>
-  </PanelGrids>
+  <RouterPanel />
 </template>
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
deleted file mode 100644
index fa10a1a0..00000000
--- a/packages/client/src/pages/timeline.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<script setup lang="ts">
-import { UNDEFINED } from '@vue/devtools-kit'
-import { Pane, Splitpanes } from 'splitpanes'
-
-import type { InspectorState, TimelineEvent } from '@vue/devtools-kit'
-import { getTimelineLayer, onAddTimelineEvent } from '@vue/devtools-core'
-
-const layers = ref<{
-  color: number
-  id: string
-  label: string
-  groups?: Record<number | string, { events: TimelineEvent['event'][], duration: number }>
-}[]>([])
-const timelineEvent = ref<Record<string, TimelineEvent['event'][]>>({})
-const selectedLayer = ref('')
-const selectedEvent = ref('')
-createCollapseContext('inspector-state')
-
-const activeTimelineEvent = computed(() => timelineEvent.value[selectedLayer.value]?.map((item, index) => ({ ...item, id: `${index}` })) ?? [])
-const selectedEventInfo = computed(() => activeTimelineEvent.value?.[+(selectedEvent.value ?? 0)]?.data ?? {})
-const normalizedEventInfo = computed(() => {
-  const info: InspectorState[] = []
-  for (const key in selectedEventInfo.value) {
-    info.push({
-      key,
-      type: key,
-      editable: false,
-      value: selectedEventInfo.value[key]!,
-    })
-  }
-  return info
-})
-const normalizedGroupInfo = computed(() => {
-  const groups = layers.value.find(layer => layer.id === selectedLayer.value)?.groups
-  const groupId = activeTimelineEvent.value?.[+(selectedEvent.value ?? 0)]?.groupId
-  const groupInfo = groups?.[groupId]
-  if (groupInfo) {
-    return [{
-      key: 'events',
-      type: 'events',
-      editable: false,
-      value: groupInfo.events.length,
-    }, groupInfo.duration && {
-      key: 'duration',
-      type: 'duration',
-      editable: false,
-      value: `${groupInfo.duration}ms`,
-    }].filter(Boolean)
-  }
-  return undefined
-})
-
-const inspectorState = computed(() => {
-  return { 'event info': normalizedEventInfo.value, ...(normalizedGroupInfo.value && { 'group info': normalizedGroupInfo.value }) } as unknown as Record<string, InspectorState[]>
-})
-
-function normalizeGroupInfo(layerId: string, event: TimelineEvent['event']) {
-  const layer = layers.value.find(layer => layer.id === layerId)
-  if (layer && (`${event.groupId}` !== UNDEFINED || event.groupId != null)) {
-    layer.groups![event.groupId] ??= {
-      events: [],
-      duration: 0,
-    }
-    layer.groups![event.groupId].events.push(event)
-    layer.groups![event.groupId].duration = event.time - layer.groups![event.groupId].events?.[0]?.time
-  }
-}
-
-onDevToolsClientConnected(() => {
-  getTimelineLayer().then((data) => {
-    layers.value = data!
-    layers.value.forEach((layer) => {
-      timelineEvent.value[layer.id] = []
-      layer.groups = {}
-    })
-    if (!selectedLayer.value)
-      selectedLayer.value = data?.length ? data[0].id : ''
-  })
-  onAddTimelineEvent((payload) => {
-    if (!payload)
-      return
-
-    const { layerId, event } = payload
-    timelineEvent.value[layerId].push(event)
-    normalizeGroupInfo(layerId, event)
-  })
-})
-
-watch(() => activeTimelineEvent.value.length, (l) => {
-  if (l)
-    selectedEvent.value = '0'
-})
-</script>
-
-<template>
-  <template v-if="layers.length">
-    <PanelGrids>
-      <Splitpanes>
-        <!-- layer -->
-        <Pane border="r base" size="20">
-          <div h-screen select-none overflow-scroll p-2 class="no-scrollbar">
-            <TimelineLayer v-for="(item) in layers" :key="item.id" v-model="selectedLayer" :data="item" />
-          </div>
-        </Pane>
-        <!-- event -->
-        <Pane border="r base" size="45">
-          <div h-screen select-none overflow-scroll class="no-scrollbar">
-            <template v-if="activeTimelineEvent.length">
-              <TimelineEvent v-model="selectedEvent" :data="activeTimelineEvent" />
-            </template>
-            <EmptyPane v-else icon="i-ic-baseline-inbox">
-              No events
-            </EmptyPane>
-          </div>
-        </Pane>
-        <!-- event info -->
-        <Pane size="35">
-          <div h-screen select-none overflow-scroll p-2 class="no-scrollbar">
-            <template v-if="selectedEvent">
-              <InspectorState
-                v-for="(item, key) in inspectorState"
-                :id="`${key}`" :key="key + Date.now()" :data="item" :name="`${key}`"
-                :disable-edit="true" node-id="" inspector-id=""
-              />
-            </template>
-            <EmptyPane v-else icon="i-carbon:menu">
-              Select an event to display details
-            </EmptyPane>
-          </div>
-        </Pane>
-      </Splitpanes>
-    </PanelGrids>
-  </template>
-  <EmptyPane v-else icon="i-ic-baseline-inbox">
-    No layers
-  </EmptyPane>
-</template>
diff --git a/packages/client/uno.config.ts b/packages/client/uno.config.ts
index 8f50211c..d9e62e6d 100644
--- a/packages/client/uno.config.ts
+++ b/packages/client/uno.config.ts
@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfigs, presetAttributify, presetWebFonts } from 'unocss'
-import { themeDef, unoConfig } from '@vue/devtools-ui/theme'
+import { unoConfig } from '@vue/devtools-ui/theme'
 
 export default defineConfig(mergeConfigs([unoConfig, {
   rules: [
@@ -15,7 +15,7 @@ export default defineConfig(mergeConfigs([unoConfig, {
       'background-size': '40px 40px',
     }],
     ['panel-grids-dark', {
-      'background-image': `url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' transform='scale(3)'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='${encodeURIComponent(themeDef.colors.black)}'/%3E%3Cpath d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z' stroke-width='0.2' stroke='${encodeURIComponent('#141b24')}' fill='none'/%3E%3C/svg%3E");`,
+      'background-image': `url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' transform='scale(3)'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='${encodeURIComponent('#121212')}'/%3E%3Cpath d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z' stroke-width='0.2' stroke='${encodeURIComponent('#121212')}' fill='none'/%3E%3C/svg%3E");`,
       'background-size': '40px 40px',
     }],
   ],
@@ -51,7 +51,7 @@ export default defineConfig(mergeConfigs([unoConfig, {
   ],
   shortcuts: [{
     // general
-    'bg-base': 'bg-white dark:bg-black',
+    'bg-base': 'bg-white dark:bg-[#121212]',
     'text-base': 'text-black dark:text-white',
     'bg-active': 'bg-gray:5',
     'border-base': 'border-gray/20',
@@ -61,7 +61,7 @@ export default defineConfig(mergeConfigs([unoConfig, {
     'x-divider': 'h-1px w-full bg-gray/15',
 
     // glass
-    'glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-black/90',
+    'glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-[#121212]/90',
     'navbar-glass': 'sticky z-10 top-0 glass-effect',
 
     // code
diff --git a/packages/core/src/bridge-events/devtools-actions.ts b/packages/core/src/bridge-events/devtools-actions.ts
index c7df3dc4..b900ab51 100644
--- a/packages/core/src/bridge-events/devtools-actions.ts
+++ b/packages/core/src/bridge-events/devtools-actions.ts
@@ -37,6 +37,10 @@ export const inspectComponentInspector = defineDevToolsAction('devtools:inspect-
   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)
 })
@@ -45,6 +49,10 @@ export const scrollToComponent = defineDevToolsAction('devtools:scroll-to-compon
   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
diff --git a/packages/devtools-kit/src/api/api.ts b/packages/devtools-kit/src/api/api.ts
index 35ea0d5f..d3c5f478 100644
--- a/packages/devtools-kit/src/api/api.ts
+++ b/packages/devtools-kit/src/api/api.ts
@@ -2,7 +2,7 @@ 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 { highlight as highlightElement, inspectComponentHighLighter, scrollToComponent, toggleComponentHighLighter, unhighlight as unhighlightElement } from '../core/component-highlighter'
+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'
@@ -14,6 +14,7 @@ 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'
@@ -182,10 +183,21 @@ export class DevToolsPluginApi {
     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 = {
diff --git a/packages/devtools-kit/src/api/hook.ts b/packages/devtools-kit/src/api/hook.ts
index 3410ba50..cd40a90b 100644
--- a/packages/devtools-kit/src/api/hook.ts
+++ b/packages/devtools-kit/src/api/hook.ts
@@ -17,6 +17,7 @@ export enum DevToolsEvents {
   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',
@@ -36,6 +37,7 @@ export interface DevToolsEvent {
   // 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
diff --git a/packages/devtools-kit/src/core/component-highlighter/index.ts b/packages/devtools-kit/src/core/component-highlighter/index.ts
index 679906e3..7d348414 100644
--- a/packages/devtools-kit/src/core/component-highlighter/index.ts
+++ b/packages/devtools-kit/src/core/component-highlighter/index.ts
@@ -189,6 +189,14 @@ function selectComponentFn(e: MouseEvent, cb) {
   }
 }
 
+let inspectComponentHighLighterSelectFn: (e: MouseEvent) => void = null!
+
+export function cancelInspectComponentHighLighter() {
+  window.removeEventListener('mouseover', inspectFn)
+  window.removeEventListener('click', inspectComponentHighLighterSelectFn, true)
+  inspectComponentHighLighterSelectFn = null!
+}
+
 export function inspectComponentHighLighter() {
   window.addEventListener('mouseover', inspectFn)
   return new Promise<string>((resolve) => {
@@ -197,6 +205,7 @@ export function inspectComponentHighLighter() {
       e.stopPropagation()
       selectComponentFn(e, (id: string) => {
         window.removeEventListener('click', onSelect, true)
+        inspectComponentHighLighterSelectFn = null!
         window.removeEventListener('mouseover', inspectFn)
         const el = getContainerElement()
         if (el)
@@ -204,6 +213,7 @@ export function inspectComponentHighLighter() {
         resolve(JSON.stringify({ id }))
       })
     }
+    inspectComponentHighLighterSelectFn = onSelect
     window.addEventListener('click', onSelect, true)
   })
 }
diff --git a/packages/devtools-kit/src/core/component/state/custom.ts b/packages/devtools-kit/src/core/component/state/custom.ts
index 73152ef7..d869435d 100644
--- a/packages/devtools-kit/src/core/component/state/custom.ts
+++ b/packages/devtools-kit/src/core/component/state/custom.ts
@@ -22,7 +22,7 @@ export function getFunctionDetails(func: Function) {
   return {
     _custom: {
       type: 'function' satisfies customTypeEnums,
-      displayText: `<span style="opacity:.5;">function</span> ${escape(name)}${args}`,
+      displayText: `<span style="opacity:.5;margin-right:5px;">function</span> <span style="white-space:nowrap;">${escape(name)}${args}</span>`,
       tooltipText: string.trim() ? `<pre>${string}</pre>` : null,
     },
   }
diff --git a/packages/devtools-kit/src/core/component/state/process.ts b/packages/devtools-kit/src/core/component/state/process.ts
index e11bacbe..8e6205a7 100644
--- a/packages/devtools-kit/src/core/component/state/process.ts
+++ b/packages/devtools-kit/src/core/component/state/process.ts
@@ -148,10 +148,11 @@ function processSetupState(instance: VueAppInstance) {
 
       let result: Partial<InspectorState>
 
-      // @TODO: need to re-design this?
       let isOtherType = typeof value === 'function'
-        || typeof value?.render === 'function'
-        || typeof value?.__asyncLoader === 'function'
+        || typeof value?.render === 'function' // Components
+        || typeof value?.__asyncLoader === 'function' // Components
+        || (typeof value === 'object' && value && ('setup' in value || 'props' in value)) // Components
+        || /^v[A-Z]/.test(key) // Directives
 
       if (rawData) {
         const info = getSetupStateType(rawData)
diff --git a/packages/devtools-kit/src/core/component/utils/index.ts b/packages/devtools-kit/src/core/component/utils/index.ts
index ab3c5679..d7344116 100644
--- a/packages/devtools-kit/src/core/component/utils/index.ts
+++ b/packages/devtools-kit/src/core/component/utils/index.ts
@@ -101,7 +101,7 @@ export function getInstanceName(instance: VueAppInstance) {
  */
 export function getUniqueComponentId(instance: VueAppInstance) {
   const appId = instance?.appContext?.app?.__VUE_DEVTOOLS_NEXT_APP_RECORD_ID__ ?? 0
-  const instanceId = instance === instance.root ? 'root' : instance.uid
+  const instanceId = instance === instance?.root ? 'root' : instance.uid
   return `${appId}:${instanceId}`
 }
 
diff --git a/packages/devtools-kit/src/index.ts b/packages/devtools-kit/src/index.ts
index 0b83c0af..e63f2b92 100644
--- a/packages/devtools-kit/src/index.ts
+++ b/packages/devtools-kit/src/index.ts
@@ -29,7 +29,8 @@ export interface DevToolsType {
 
 export { parse, stringify } from './shared'
 export { formatInspectorStateValue, getInspectorStateValueType, getRaw, toEdit, toSubmit } from './core/component/state/format'
-export { UNDEFINED } from './core/component/state/constants'
+export { UNDEFINED, INFINITY, NAN, NEGATIVE_INFINITY } from './core/component/state/constants'
+export { isPlainObject } from './core/component/state/is'
 
 export const devtools = {
   state: devtoolsState,
diff --git a/packages/playground/applet/package.json b/packages/playground/applet/package.json
index 0e7604e9..0c7b25ec 100644
--- a/packages/playground/applet/package.json
+++ b/packages/playground/applet/package.json
@@ -19,6 +19,7 @@
     "@vue/devtools-applet": "workspace:*",
     "@vue/devtools-core": "workspace:*",
     "@vue/devtools-kit": "workspace:*",
+    "@vue/devtools-shared": "workspace:*",
     "sass": "^1.75.0",
     "serve": "^14.2.2",
     "typescript": "^5.4.5",
diff --git a/packages/playground/applet/src/App.vue b/packages/playground/applet/src/App.vue
index d104efc0..7daf105e 100644
--- a/packages/playground/applet/src/App.vue
+++ b/packages/playground/applet/src/App.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { Pinia } from '@vue/devtools-applet'
+import { Components } from '@vue/devtools-applet'
 import '@vue/devtools-applet/style.css'
 import { HandShakeServer, getDevToolsState, initDevToolsSeparateWindow, initDevToolsSeparateWindowBridge, onDevToolsStateUpdated, setupDevToolsBridge } from '@vue/devtools-core'
 import { useDevToolsColorMode } from '@vue/devtools-shared'
+import { useDark } from '@vueuse/core'
 import { useCounterStore } from './stores'
+import Hello from './components/Hello.vue'
 
-const { isDark } = useDevToolsColorMode()
+const isDark = useDark()
 // user app
 const counterStore = useCounterStore()
 
@@ -58,10 +60,11 @@ useDevToolsColorMode()
       <span @click="counterStore.decrement">➖</span>
     </div>
     <div h-150 w-200 border="1 green solid">
-      <Pinia v-if="connected" />
+      <Components v-if="connected" />
       <div v-else class="h-full flex items-center justify-center">
         Connecting...
       </div>
     </div>
   </div>
+  <Hello />
 </template>
diff --git a/packages/playground/applet/src/components/Foo.vue b/packages/playground/applet/src/components/Foo.vue
new file mode 100644
index 00000000..a00941ba
--- /dev/null
+++ b/packages/playground/applet/src/components/Foo.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  msg: string
+}>()
+</script>
+
+<template>
+  <div>
+    Foo Component {{ msg }}
+  </div>
+</template>
diff --git a/packages/playground/applet/src/components/Hello.vue b/packages/playground/applet/src/components/Hello.vue
new file mode 100644
index 00000000..71a04409
--- /dev/null
+++ b/packages/playground/applet/src/components/Hello.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Foo from './Foo.vue'
+</script>
+
+<template>
+  <div>
+    Hello Component
+    <Foo msg="!!!" />
+  </div>
+</template>
diff --git a/packages/playground/basic/vite.config.ts b/packages/playground/basic/vite.config.ts
index d06e4aeb..f08406a9 100644
--- a/packages/playground/basic/vite.config.ts
+++ b/packages/playground/basic/vite.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import VueDevTools from 'vite-plugin-vue-devtools'
 
-import VueDevtools from 'vite-plugin-vue-devtools'
 import Unocss from 'unocss/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 
@@ -9,7 +9,7 @@ import AutoImport from 'unplugin-auto-import/vite'
 export default defineConfig({
   plugins: [
     vue(),
-    VueDevtools(),
+    VueDevTools(),
     Unocss(),
     AutoImport({
       imports: [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cd3cbb04..9e51c3ff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -161,9 +161,15 @@ importers:
       '@vue/devtools-ui':
         specifier: workspace:^
         version: link:../ui
+      lodash-es:
+        specifier: ^4.17.21
+        version: 4.17.21
       perfect-debounce:
         specifier: ^1.0.0
         version: 1.0.0
+      shiki:
+        specifier: 1.3.0
+        version: 1.3.0
       splitpanes:
         specifier: ^3.1.5
         version: 3.1.5
@@ -171,6 +177,9 @@ importers:
         specifier: 2.0.0-beta.8
         version: 2.0.0-beta.8(vue@3.4.23)
     devDependencies:
+      '@types/lodash-es':
+        specifier: ^4.17.12
+        version: 4.17.12
       unplugin-vue:
         specifier: ^5.0.5
         version: 5.0.5(@types/node@20.12.7)(vue@3.4.23)
@@ -208,6 +217,9 @@ importers:
       '@unocss/runtime':
         specifier: ^0.59.4
         version: 0.59.4
+      '@vue/devtools-applet':
+        specifier: workspace:^
+        version: link:../applet
       '@vue/devtools-core':
         specifier: workspace:^
         version: link:../core
@@ -493,6 +505,9 @@ importers:
       '@vue/devtools-kit':
         specifier: workspace:*
         version: link:../../devtools-kit
+      '@vue/devtools-shared':
+        specifier: workspace:*
+        version: link:../../shared
       sass:
         specifier: ^1.75.0
         version: 1.75.0
@@ -2588,6 +2603,12 @@ packages:
   '@types/linkify-it@3.0.5':
     resolution: {integrity: sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==}
 
+  '@types/lodash-es@4.17.12':
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
+
+  '@types/lodash@4.17.0':
+    resolution: {integrity: sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==}
+
   '@types/markdown-it@12.2.3':
     resolution: {integrity: sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==}
 
@@ -5820,6 +5841,9 @@ packages:
     resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+
   lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
 
@@ -10339,6 +10363,12 @@ snapshots:
 
   '@types/linkify-it@3.0.5': {}
 
+  '@types/lodash-es@4.17.12':
+    dependencies:
+      '@types/lodash': 4.17.0
+
+  '@types/lodash@4.17.0': {}
+
   '@types/markdown-it@12.2.3':
     dependencies:
       '@types/linkify-it': 3.0.5
@@ -14211,6 +14241,8 @@ snapshots:
     dependencies:
       p-locate: 6.0.0
 
+  lodash-es@4.17.21: {}
+
   lodash.debounce@4.0.8: {}
 
   lodash.defaultsdeep@4.6.1: {}
diff --git a/turbo.json b/turbo.json
index 49b2816a..e64bed8e 100644
--- a/turbo.json
+++ b/turbo.json
@@ -10,13 +10,6 @@
         "@vue/devtools-electron#stub"
       ]
     },
-    "@vue/devtools-applet#stub": {
-      "cache": false,
-      "dependsOn": [
-        "@vue/devtools-kit#stub",
-        "^stub"
-      ]
-    },
     "@vue/devtools-browser-extension#build": {
       "dependsOn": [
         "@vue/devtools-client#build",