diff --git a/packages/client/src/components/graph/GraphNavbar.vue b/packages/client/src/components/graph/GraphNavbar.vue
index 5cb9908e4..257d64d19 100644
--- a/packages/client/src/components/graph/GraphNavbar.vue
+++ b/packages/client/src/components/graph/GraphNavbar.vue
@@ -12,17 +12,61 @@ const selectableItems = [
 ] as const
 
 const filterId = graphFilterNodeId
+
+// Pathfinding mode
+const pathfindingMode = graphPathfindingMode
+const pathfindingStart = graphPathfindingStart
+const pathfindingEnd = graphPathfindingEnd
+const nodesCount = graphNodeCount
+const edgesCount = graphEdgeCount
+
+function togglePathfindingMode() {
+  pathfindingMode.value = !pathfindingMode.value
+  if (!pathfindingStart.value && text.value) {
+    pathfindingStart.value = text.value
+  }
+}
+
+function swapStartAndEnd() {
+  const start = pathfindingStart.value
+  pathfindingStart.value = pathfindingEnd.value
+  pathfindingEnd.value = start
+}
 </script>
 
 <template>
   <div flex="~ items-center gap-4 nowrap" class="[&_>*]:flex-[0_0_auto]" absolute left-0 top-0 z-10 navbar-base w-full overflow-x-auto glass-effect px4 text-sm>
-    <VueInput v-model="text" placeholder="Search modules..." />
+    <!-- Toggle Pathfinding Mode Button -->
+    <button
+      rounded-full px3 py1 text-xs hover:op100
+      :class="pathfindingMode ? 'bg-primary-500 text-white op100' : 'bg-gray:20 op50'"
+      @click="togglePathfindingMode"
+    >
+      <div flex="~ items-center gap-1">
+        <div i-carbon-tree-view-alt />
+        <span>Pathfinding</span>
+      </div>
+    </button>
+
+    <!-- Pathfinding Mode Inputs -->
+    <template v-if="pathfindingMode">
+      <VueInput v-model="pathfindingStart" placeholder="Start module..." />
+      <button i-carbon-arrow-right rounded-full op50 hover:text-primary-500 hover:op100 @click="swapStartAndEnd" />
+      <VueInput v-model="pathfindingEnd" placeholder="End module..." />
+    </template>
+
+    <!-- Normal Search Mode Input -->
+    <VueInput v-else v-model="text" placeholder="Search modules..." />
+
     <div v-for="item in selectableItems" :key="item[0]" flex="~ gap-2 items-center">
       <VueCheckbox v-model="settings[item[0]]" />
       <span :class="{ 'text-gray-400 dark:text-gray-600': !settings[item[0]] }">Show {{ item[1] ?? item[0] }}</span>
     </div>
     <div flex-auto />
-    <button v-if="filterId" rounded-full bg-gray:20 py1 pl3 pr2 text-xs op50 hover:op100 @click="filterId = ''">
+    <div>
+      nodes: {{ nodesCount }} | edges: {{ edgesCount }}
+    </div>
+    <button v-if="!pathfindingMode && filterId" rounded-full bg-gray:20 py1 pl3 pr2 text-xs op50 hover:op100 @click="filterId = ''">
       Clear filter
       <div i-carbon-close mb2px />
     </button>
diff --git a/packages/client/src/composables/__test__/graph-pathfinding.test.ts b/packages/client/src/composables/__test__/graph-pathfinding.test.ts
new file mode 100644
index 000000000..d3df7ed90
--- /dev/null
+++ b/packages/client/src/composables/__test__/graph-pathfinding.test.ts
@@ -0,0 +1,270 @@
+import type { ModuleInfo } from '@vue/devtools-core'
+import type { Edge } from 'vis-network'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { dfs } from '../graph'
+
+// Mock test data
+interface GraphNodesTotalData {
+  mod: ModuleInfo
+  info: {
+    displayName: string
+    displayPath: string
+  }
+  node: any
+  edges: Edge[]
+}
+
+function createMockModule(id: string, displayName: string, deps: string[]): GraphNodesTotalData {
+  return {
+    mod: {
+      id,
+      deps,
+      virtual: false,
+    } as ModuleInfo,
+    info: {
+      displayName,
+      displayPath: id,
+    },
+    node: {
+      id,
+      label: displayName,
+    },
+    edges: deps.map(dep => ({
+      from: id,
+      to: dep,
+      arrows: { to: { enabled: true } },
+    })),
+  }
+}
+
+describe('dfs - graph pathfinding', () => {
+  let modulesMap: Map<string, GraphNodesTotalData>
+
+  beforeEach(() => {
+    // Build dependency graph:
+    // main.ts → App.vue → Header.vue → utils.ts
+    //       └→ router.ts → routes.ts → utils.ts
+    modulesMap = new Map()
+
+    modulesMap.set('/src/main.ts', createMockModule(
+      '/src/main.ts',
+      'main.ts',
+      ['/src/App.vue', '/src/router.ts'],
+    ))
+
+    modulesMap.set('/src/App.vue', createMockModule(
+      '/src/App.vue',
+      'App.vue',
+      ['/src/components/Header.vue'],
+    ))
+
+    modulesMap.set('/src/components/Header.vue', createMockModule(
+      '/src/components/Header.vue',
+      'Header.vue',
+      ['/src/utils/utils.ts'],
+    ))
+
+    modulesMap.set('/src/router.ts', createMockModule(
+      '/src/router.ts',
+      'router.ts',
+      ['/src/routes.ts'],
+    ))
+
+    modulesMap.set('/src/routes.ts', createMockModule(
+      '/src/routes.ts',
+      'routes.ts',
+      ['/src/utils/utils.ts'],
+    ))
+
+    modulesMap.set('/src/utils/utils.ts', createMockModule(
+      '/src/utils/utils.ts',
+      'utils.ts',
+      [],
+    ))
+  })
+
+  it('should find all nodes and edges in a single path', () => {
+    const startNode = modulesMap.get('/src/main.ts')!
+    const targetIds = new Set(['/src/components/Header.vue'])
+    const result: [Set<GraphNodesTotalData>, Set<Edge>] = [new Set(), new Set()]
+
+    const found = dfs(startNode, targetIds, new Set(), modulesMap, result)
+
+    expect(found).toBe(true)
+
+    const [nodes, edges] = result
+    const nodeIds = Array.from(nodes).map(n => n.mod.id).sort()
+
+    // Should contain path: main.ts → App.vue → Header.vue
+    expect(nodeIds).toEqual([
+      '/src/App.vue',
+      '/src/components/Header.vue',
+      '/src/main.ts',
+    ])
+
+    // Should contain 2 edges
+    const edgeDescriptions = Array.from(edges).map(e => `${e.from}→${e.to}`).sort()
+    expect(edgeDescriptions).toEqual([
+      '/src/App.vue→/src/components/Header.vue',
+      '/src/main.ts→/src/App.vue',
+    ])
+  })
+
+  it('should find all nodes and edges across multiple paths without duplicates', () => {
+    const startNode = modulesMap.get('/src/main.ts')!
+    const targetIds = new Set(['/src/utils/utils.ts'])
+    const result: [Set<GraphNodesTotalData>, Set<Edge>] = [new Set(), new Set()]
+
+    const found = dfs(startNode, targetIds, new Set(), modulesMap, result)
+
+    expect(found).toBe(true)
+
+    const [nodes, edges] = result
+    const nodeIds = Array.from(nodes).map(n => n.mod.id).sort()
+
+    // Should contain nodes from both paths:
+    // Path 1: main.ts → App.vue → Header.vue → utils.ts
+    // Path 2: main.ts → router.ts → routes.ts → utils.ts
+    expect(nodeIds).toEqual([
+      '/src/App.vue',
+      '/src/components/Header.vue',
+      '/src/main.ts',
+      '/src/router.ts',
+      '/src/routes.ts',
+      '/src/utils/utils.ts',
+    ])
+
+    // Should contain edges from both paths
+    const edgeDescriptions = Array.from(edges).map(e => `${e.from}→${e.to}`).sort()
+    expect(edgeDescriptions).toEqual([
+      '/src/App.vue→/src/components/Header.vue',
+      '/src/components/Header.vue→/src/utils/utils.ts',
+      '/src/main.ts→/src/App.vue',
+      '/src/main.ts→/src/router.ts',
+      '/src/router.ts→/src/routes.ts',
+      '/src/routes.ts→/src/utils/utils.ts',
+    ])
+  })
+
+  it('should return empty result when no path exists', () => {
+    // utils.ts has no dependencies, cannot reach main.ts
+    const startNode = modulesMap.get('/src/utils/utils.ts')!
+    const targetIds = new Set(['/src/main.ts'])
+    const result: [Set<GraphNodesTotalData>, Set<Edge>] = [new Set(), new Set()]
+
+    const found = dfs(startNode, targetIds, new Set(), modulesMap, result)
+
+    expect(found).toBe(false)
+
+    const [nodes, edges] = result
+    expect(nodes.size).toBe(0)
+    expect(edges.size).toBe(0)
+  })
+
+  it('should return only the start node when it is also the target', () => {
+    const startNode = modulesMap.get('/src/main.ts')!
+    const targetIds = new Set(['/src/main.ts'])
+    const result: [Set<GraphNodesTotalData>, Set<Edge>] = [new Set(), new Set()]
+
+    const found = dfs(startNode, targetIds, new Set(), modulesMap, result)
+
+    expect(found).toBe(true)
+
+    const [nodes, edges] = result
+    expect(nodes.size).toBe(1)
+    expect(Array.from(nodes)[0].mod.id).toBe('/src/main.ts')
+    expect(edges.size).toBe(0) // No edges, no traversal needed
+  })
+
+  it('should handle circular dependencies without infinite loop', () => {
+    // Build circular dependency: a → b → c → a
+    const circularMap = new Map<string, GraphNodesTotalData>()
+    circularMap.set('/src/a.ts', createMockModule('/src/a.ts', 'a.ts', ['/src/b.ts']))
+    circularMap.set('/src/b.ts', createMockModule('/src/b.ts', 'b.ts', ['/src/c.ts']))
+    circularMap.set('/src/c.ts', createMockModule('/src/c.ts', 'c.ts', ['/src/a.ts']))
+
+    const startNode = circularMap.get('/src/a.ts')!
+    const targetIds = new Set(['/src/c.ts'])
+    const result: [Set<GraphNodesTotalData>, Set<Edge>] = [new Set(), new Set()]
+
+    const found = dfs(startNode, targetIds, new Set(), circularMap, result)
+
+    expect(found).toBe(true)
+
+    const [nodes, edges] = result
+    const nodeIds = Array.from(nodes).map(n => n.mod.id).sort()
+
+    // Should contain a → b → c
+    expect(nodeIds).toEqual(['/src/a.ts', '/src/b.ts', '/src/c.ts'])
+
+    // Should not loop infinitely
+    const edgeDescriptions = Array.from(edges).map(e => `${e.from}→${e.to}`).sort()
+    expect(edgeDescriptions).toEqual([
+      '/src/a.ts→/src/b.ts',
+      '/src/b.ts→/src/c.ts',
+    ])
+  })
+
+  it('should support multiple target nodes', () => {
+    const startNode = modulesMap.get('/src/main.ts')!
+    // Set two targets: Header.vue and routes.ts
+    const targetIds = new Set(['/src/components/Header.vue', '/src/routes.ts'])
+    const result: [Set<GraphNodesTotalData>, Set<Edge>] = [new Set(), new Set()]
+
+    const found = dfs(startNode, targetIds, new Set(), modulesMap, result)
+
+    expect(found).toBe(true)
+
+    const [nodes, edges] = result
+    const nodeIds = Array.from(nodes).map(n => n.mod.id).sort()
+
+    // Should contain paths to both targets
+    expect(nodeIds).toEqual([
+      '/src/App.vue',
+      '/src/components/Header.vue',
+      '/src/main.ts',
+      '/src/router.ts',
+      '/src/routes.ts',
+    ])
+
+    const edgeDescriptions = Array.from(edges).map(e => `${e.from}→${e.to}`).sort()
+    expect(edgeDescriptions).toEqual([
+      '/src/App.vue→/src/components/Header.vue',
+      '/src/main.ts→/src/App.vue',
+      '/src/main.ts→/src/router.ts',
+      '/src/router.ts→/src/routes.ts',
+    ])
+  })
+
+  it('should return false when node is null', () => {
+    const targetIds = new Set(['/src/main.ts'])
+    const result: [Set<GraphNodesTotalData>, Set<Edge>] = [new Set(), new Set()]
+
+    const found = dfs(null as any, targetIds, new Set(), modulesMap, result)
+
+    expect(found).toBe(false)
+    expect(result[0].size).toBe(0)
+    expect(result[1].size).toBe(0)
+  })
+
+  it('should return cached result for already visited nodes', () => {
+    const startNode = modulesMap.get('/src/main.ts')!
+    const targetIds = new Set(['/src/utils/utils.ts'])
+    const existingNodeIds = new Set<GraphNodesTotalData>()
+    const result: [Set<GraphNodesTotalData>, Set<Edge>] = [new Set(), new Set()]
+
+    // First call
+    dfs(startNode, targetIds, existingNodeIds, modulesMap, result)
+
+    const firstCallNodeCount = result[0].size
+    const firstCallEdgeCount = result[1].size
+
+    // Second call with same start node
+    const found = dfs(startNode, targetIds, existingNodeIds, modulesMap, result)
+
+    // Should return cached result without adding duplicates
+    expect(found).toBe(true)
+    expect(result[0].size).toBe(firstCallNodeCount)
+    expect(result[1].size).toBe(firstCallEdgeCount)
+  })
+})
diff --git a/packages/client/src/composables/graph.ts b/packages/client/src/composables/graph.ts
index d94d5ce61..166e325ee 100644
--- a/packages/client/src/composables/graph.ts
+++ b/packages/client/src/composables/graph.ts
@@ -3,6 +3,7 @@ import type { Edge, Node, Options } from 'vis-network'
 import { deepClone } from '@vue/devtools-shared'
 import { useDevToolsColorMode } from '@vue/devtools-ui'
 import { DataSet } from 'vis-network/standalone'
+import { devtoolsClientState } from './state'
 
 // #region file types
 export const fileTypes = {
@@ -106,11 +107,27 @@ interface SearcherNode {
   node: Node
   edges: Edge[]
   deps: string[]
+  normalizedId: string
+  normalizedFullId: string
 }
 
 export const graphSearchText = ref('')
 
-watchDebounced(graphSearchText, () => {
+// #region pathfinding
+export interface PathInfo {
+  path: string[] // array of module IDs
+  displayPath: string[] // array of display names
+}
+
+export const graphPathfindingMode = ref(false)
+export const graphPathfindingStart = ref('')
+export const graphPathfindingEnd = ref('')
+export const graphPathfindingResults = ref<PathInfo[]>([])
+export const graphFilterNodeId = ref('')
+export const graphDrawerData = ref<DrawerData>()
+export const [graphDrawerShow, toggleGraphDrawer] = useToggle(false)
+
+watchDebounced([graphSearchText, graphPathfindingMode, graphPathfindingStart, graphPathfindingEnd], () => {
   updateGraph()
 }, {
   debounce: 350,
@@ -134,11 +151,16 @@ interface GraphNodesTotalData {
 export const projectRoot = ref('')
 export const graphNodes = new DataSet<Node>([])
 export const graphEdges = new DataSet<Edge>([])
+export const graphNodeCount = ref(0)
+export const graphEdgeCount = ref(0)
 const graphNodesTotal = shallowRef<GraphNodesTotalData[]>([])
 const graphNodesTotalMap = new Map<string, GraphNodesTotalData>()
 const modulesMap = new Map<string, GraphNodesTotalData>()
 const moduleReferences = new Map<string, { path: string, displayPath: string, mod: ModuleInfo }[]>()
 
+graphNodes.on('*', () => graphNodeCount.value = graphNodes.length)
+graphEdges.on('*', () => graphEdgeCount.value = graphEdges.length)
+
 const uniqueNodes = (nodes: Node[]) => nodes.reduce<Node[]>((prev, node) => {
   if (!prev.some(n => n.id === node.id))
     prev.push(node)
@@ -157,6 +179,10 @@ export function cleanupGraphRelatedStates() {
   graphEdges.clear()
   modulesMap.clear()
   moduleReferences.clear()
+  graphPathfindingMode.value = false
+  graphPathfindingStart.value = ''
+  graphPathfindingEnd.value = ''
+  graphPathfindingResults.value = []
 }
 
 function checkIsValidModule(module: ModuleInfo) {
@@ -189,19 +215,57 @@ function updateGraph() {
   const matchedSearchNodes: SearcherNode[] = []
   const matchedEdges: Edge[] = []
 
+  if (graphPathfindingMode.value && graphPathfindingStart.value && graphPathfindingEnd.value) {
+    // Search for modules matching the input text
+    const startModules = searchModulesByText(graphPathfindingStart.value, 2)
+    const endModules = searchModulesByText(graphPathfindingEnd.value, 4)
+
+    const allNodes: GraphNodesTotalData[] = []
+    const allEdges: Edge[] = []
+    for (const startId of startModules) {
+      const { nodes, edges } = findAllNodes(startId, endModules)
+      allNodes.push(...nodes)
+      allEdges.push(...edges)
+    }
+
+    const startModulesSet = new Set(startModules)
+    const endModulesSet = new Set(endModules)
+    allNodes.forEach(({ node, edges, mod }) => {
+      const nodeId = mod.id
+      if (startModulesSet.has(nodeId)) {
+        node = markNode(node, 'start')
+      }
+      else if (endModulesSet.has(nodeId)) {
+        node = markNode(node, 'end')
+      }
+      matchedNodes.push(node)
+    })
+
+    graphNodes.add(uniqueNodes(matchedNodes))
+    graphEdges.add(uniqueEdges(allEdges))
+    return
+  }
+
   // reuse cache instead of parse every time
   const filterDataset = getGraphFilterDataset()
-  const nodeData = filterDataset ? filterDataset.slice() : graphNodesTotal.value.slice()
+  const nodeData = !graphPathfindingMode.value && filterDataset ? filterDataset.slice() : graphNodesTotal.value.slice()
   nodeData.forEach(({ node, edges, mod }) => {
     if (checkIsValidModule(mod) && checkReferenceIsValid(mod.id)) {
+      const shortId = mod.id.match(EXTRACT_LAST_THREE_MOD_ID_RE)?.[0] ?? mod.id
+
+      if (graphFilterNodeId.value && mod.id === graphFilterNodeId.value)
+        node = markNode(node, 'start')
+
       matchedNodes.push(node)
       matchedSearchNodes.push({
         // only search the exactly name(last 3 segments), instead of full path
-        id: mod.id.match(EXTRACT_LAST_THREE_MOD_ID_RE)?.[0] ?? mod.id,
+        id: shortId,
         fullId: mod.id,
         node,
         edges,
         deps: mod.deps,
+        normalizedId: shortId.toLowerCase(),
+        normalizedFullId: mod.id.toLowerCase(),
       })
       matchedEdges.push(...edges)
     }
@@ -210,7 +274,7 @@ function updateGraph() {
   // TODO: [fuzzy search graph node] use include, instead of fuse.js, for performance reasons
   // if someone need it, we can add it back
   const searchText = graphSearchText.value
-  if (searchText.trim().length) {
+  if (!graphPathfindingMode.value && searchText.trim().length) {
     const result = matchedSearchNodes.filter(({ id }) => id.includes(searchText))
     matchedEdges.length = 0
     matchedNodes.length = 0
@@ -264,6 +328,11 @@ function getEdge(modId: string, dep: string) {
         enabled: true,
         scaleFactor: 0.8,
       },
+      from: {
+        enabled: true,
+        type: 'circle',
+        scaleFactor: 0.8,
+      },
     },
   }
 }
@@ -403,9 +472,6 @@ export interface DrawerData {
   deps: { path: string, displayPath: string }[]
 }
 
-export const graphDrawerData = ref<DrawerData>()
-export const [graphDrawerShow, toggleGraphDrawer] = useToggle(false)
-
 function closeDrawer() {
   toggleGraphDrawer(false)
 }
@@ -453,7 +519,6 @@ export function updateGraphDrawerData(nodeId: string): DrawerData | undefined {
 // #endregion
 
 // #region graph filter
-export const graphFilterNodeId = ref('')
 
 watch(graphFilterNodeId, () => {
   updateGraph()
@@ -467,21 +532,26 @@ export function getGraphFilterDataset() {
   const node = modulesMap.get(nodeId)
   if (!node)
     return null
-  const dataset = recursivelyGetGraphNodeData(nodeId)
+  const existingNodeIds = new Set<string>()
+  const dataset = recursivelyGetGraphNodeData(nodeId, existingNodeIds, 0)
   return dataset
 }
 
 // max depth is 20
-function recursivelyGetGraphNodeData(nodeId: string, depth = 0): GraphNodesTotalData[] {
+function recursivelyGetGraphNodeData(nodeId: string, existingNodeIds: Set<string>, depth: number): GraphNodesTotalData[] {
+  if (existingNodeIds.has(nodeId)) {
+    return []
+  }
   const node = modulesMap.get(nodeId)
   depth += 1
   if (!node || depth > 20)
     return []
   const result = [node]
+  existingNodeIds.add(nodeId)
   node.mod.deps.forEach((dep) => {
     const node = modulesMap.get(dep)
     if (node)
-      result.push(...recursivelyGetGraphNodeData(node.mod.id, depth))
+      result.push(...recursivelyGetGraphNodeData(node.mod.id, existingNodeIds, depth))
   })
   // unique result
   return result.reduce<GraphNodesTotalData[]>((prev, node) => {
@@ -491,3 +561,114 @@ function recursivelyGetGraphNodeData(nodeId: string, depth = 0): GraphNodesTotal
   }, [])
 }
 // #endregion
+
+// #region pathfinding functions
+/**
+ * Search for module IDs that match the given search text
+ * Returns array of full module IDs that contain the search text
+ */
+function searchModulesByText(searchText: string, maxItems = -1): string[] {
+  const results: string[] = []
+  const search = searchText.toLowerCase()
+
+  for (const [moduleId, nodeData] of modulesMap) {
+    if (maxItems !== -1 && results.length >= maxItems) {
+      break
+    }
+    const displayName = nodeData.info.displayName.toLowerCase()
+    const fullPath = moduleId.toLowerCase()
+
+    if (displayName.includes(search) || fullPath.includes(search)) {
+      results.push(moduleId)
+    }
+  }
+
+  return results
+}
+
+export function findAllNodes(startId: string, endIds: string[]): {
+  nodes: GraphNodesTotalData[]
+  edges: Edge[]
+} {
+  const node = modulesMap.get(startId)
+  if (!node) {
+    return {
+      nodes: [],
+      edges: [],
+    }
+  }
+
+  const result: [Set<GraphNodesTotalData>, Set<Edge>] = [new Set<GraphNodesTotalData>(), new Set<Edge>()]
+
+  dfs(node, new Set(endIds), new Set(), modulesMap, result)
+
+  return {
+    nodes: Array.from(result[0]),
+    edges: Array.from(result[1]),
+  }
+}
+
+export function dfs(node: GraphNodesTotalData, targetIds: Set<string>, existingNodeIds: Set<GraphNodesTotalData>, modulesMap: Map<string, GraphNodesTotalData>, result: [Set<GraphNodesTotalData>, Set<Edge>]): boolean {
+  if (!node) {
+    return false
+  }
+  const [resNodes, resEdges] = result
+  if (existingNodeIds.has(node)) {
+    return resNodes.has(node)
+  }
+  existingNodeIds.add(node)
+
+  const nodeId = node.mod.id
+  const isTarget = targetIds.has(nodeId)
+  let hasTarget = isTarget
+
+  node.mod.deps.forEach((dep) => {
+    const childNode = modulesMap.get(dep)
+    if (childNode && checkIsValidModule(childNode.mod)) {
+      const isFound = dfs(childNode, targetIds, existingNodeIds, modulesMap, result)
+      if (isFound) {
+        node.edges.find((edge) => {
+          if (edge.to === childNode.mod.id) {
+            resEdges.add(edge)
+            return true
+          }
+          return false
+        })
+      }
+      hasTarget ||= isFound
+    }
+  })
+
+  if (hasTarget) {
+    resNodes.add(node)
+  }
+
+  return hasTarget
+}
+
+function markNode(node: Node, type: 'start' | 'end') {
+  node = deepClone(node)
+
+  if (!node.font || typeof node.font !== 'object') {
+    node.font = {}
+  }
+
+  // Use different colors for start, end, and intermediate nodes
+  if (type === 'start') {
+    // Start node - green
+    node.font.color = '#f59e0b'
+    node.borderWidth = 3
+    node.color = { border: '#f59e0b' }
+  }
+  else if (type === 'end') {
+    // End node - red
+    node.font.color = '#ef4444'
+    node.borderWidth = 3
+    node.color = { border: '#ef4444' }
+  }
+
+  node.label = `<b>${node.label}</b>`
+
+  return node
+}
+// #endregion
diff --git a/packages/playground/basic/src/pages/Home.vue b/packages/playground/basic/src/pages/Home.vue
index 694498b9e..9b91eaee9 100644
--- a/packages/playground/basic/src/pages/Home.vue
+++ b/packages/playground/basic/src/pages/Home.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Foo from '../components/Foo.vue'
 import IndexComponent from '../components/IndexComponent/index.vue'
+import Post from '../components/Post.vue'
 
 const emit = defineEmits(['update'])
 const visible = ref(false)
@@ -31,6 +32,13 @@ const topLevelProxy = new Proxy({
     return target[key]()
   },
 })
+
+const postId = ref(-1)
+const visitedPosts = ref(new Set())
+const setPostId = (id: number) => {
+  visitedPosts.value.add(id)
+  postId.value = id
+}
 </script>
 
 <template>
@@ -41,6 +49,7 @@ const topLevelProxy = new Proxy({
     </button>
     <Foo v-if="visible" />
     <IndexComponent v-if="visible" />
+    <Post v-if="visible" :post-id="postId" @set-post-id="setPostId" />
     <img src="/vite.svg" alt="Vite Logo">
     <button class="w-30 cursor-pointer" @click="visible = !visible">
       Toggle Foo