From bee3b1da046d891465cbd7effc6dd01c22670541 Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Fri, 31 Oct 2025 19:47:46 +0900
Subject: [PATCH] feat: graph pathfinding

---
 .../src/components/graph/GraphDrawer.vue      | 155 +++++++--
 .../src/components/graph/GraphNavbar.vue      |  43 ++-
 .../__test__/graph-pathfinding.test.ts        | 315 ++++++++++++++++++
 packages/client/src/composables/graph.ts      | 210 +++++++++++-
 packages/client/src/pages/graph.vue           |   4 +-
 packages/playground/basic/src/pages/Home.vue  |   9 +
 6 files changed, 689 insertions(+), 47 deletions(-)
 create mode 100644 packages/client/src/composables/__test__/graph-pathfinding.test.ts

diff --git a/packages/client/src/components/graph/GraphDrawer.vue b/packages/client/src/components/graph/GraphDrawer.vue
index efaf74895..d92ef2a40 100644
--- a/packages/client/src/components/graph/GraphDrawer.vue
+++ b/packages/client/src/components/graph/GraphDrawer.vue
@@ -38,6 +38,17 @@ const keys = [
   ['refs', 'references'],
   ['deps', 'dependencies'],
 ] as const
+
+// Pathfinding mode
+const pathfindingMode = graphPathfindingMode
+const pathfindingResults = graphPathfindingResults
+const pathfindingStart = graphPathfindingStart
+const pathfindingEnd = graphPathfindingEnd
+
+function handleFilterToThisModule() {
+  filterId.value = data.value!.path
+  pathfindingMode.value = false
+}
 </script>
 
 <template>
@@ -51,43 +62,117 @@ const keys = [
     mount-to=".graph-body"
   >
     <div class="w-300px" h-full of-auto>
-      <div text-md h-80px border-b border-base p3 flex="~ col gap1">
-        <span text-lg flex="~ gap2 items-center">
-          {{ data?.name }}
-          <span v-if="copied" i-material-symbols-check-small text-primary-500 />
-          <span
-            v-else-if="data"
-            hover="op-100" i-carbon-copy cursor-pointer text-sm op-50 :class="{
-              'text-gray-200': !isSupported,
-            }" @click="copy(data.name)"
-          />
-        </span>
-        <button hover="underline" truncate text-left text-gray-500 :title="data?.displayPath" @click="_openInEditor(data!.path)">
-          {{ data?.displayPath }}
-        </button>
-      </div>
-      <div
-        v-for="([key, keyDisplay]) in keys" :key="key"
-        max-h-60 of-auto border-b border-base p3 text-sm
-      >
-        <div pb2 text-gray-500>
-          <span text-primary-500>{{ data?.[key].length }}</span>
-          {{ keyDisplay }}
-        </div>
-        <div flex="~ col gap2 items-start">
-          <button
-            v-for="item in data?.[key]" :key="item.path" dark="text-gray-200"
-            of-hidden truncate ws-nowrap pr-3 text-gray-800 hover="underline" @click="_openInEditor(item.path)"
-          >
-            {{ item.displayPath }}
+      <!-- Show Selected Node Info -->
+      <template v-if="data">
+        <div text-md h-80px border-b border-base p3 flex="~ col gap1">
+          <span text-lg flex="~ gap2 items-center">
+            {{ data?.name }}
+            <span v-if="copied" i-material-symbols-check-small text-primary-500 />
+            <span
+              v-else-if="data"
+              hover="op-100" i-carbon-copy cursor-pointer text-sm op-50 :class="{
+                'text-gray-200': !isSupported,
+              }" @click="copy(data.name)"
+            />
+          </span>
+          <button hover="underline" truncate text-left text-gray-500 :title="data?.displayPath" @click="_openInEditor(data!.path)">
+            {{ data?.displayPath }}
           </button>
         </div>
-      </div>
-      <div p3>
-        <VueButton type="primary" @click="filterId = data!.path">
-          Filter to this module
-        </VueButton>
-      </div>
+        <div
+          v-for="([key, keyDisplay]) in keys" :key="key"
+          max-h-60 of-auto border-b border-base p3 text-sm
+        >
+          <div pb2 text-gray-500>
+            <span text-primary-500>{{ data?.[key].length }}</span>
+            {{ keyDisplay }}
+          </div>
+          <div flex="~ col gap2 items-start">
+            <button
+              v-for="item in data?.[key]" :key="item.path" dark="text-gray-200"
+              of-hidden truncate ws-nowrap pr-3 text-gray-800 hover="underline" @click="_openInEditor(item.path)"
+            >
+              {{ item.displayPath }}
+            </button>
+          </div>
+        </div>
+        <div p3>
+          <VueButton type="primary" @click="handleFilterToThisModule">
+            Filter to this module
+          </VueButton>
+        </div>
+      </template>
+
+      <!-- Show Found Paths -->
+      <template v-if="pathfindingMode && pathfindingStart && pathfindingEnd">
+        <div v-if="data" border-b border-base p3 />
+
+        <div text-md h-auto border-b border-base p3 flex="~ col gap2">
+          <span text-lg font-bold>Path Results</span>
+          <div text-sm text-gray-500>
+            <span text-primary-500>{{ pathfindingResults.length }}</span>
+            {{ pathfindingResults.length === 1 ? 'path' : 'paths' }} found
+          </div>
+          <div text-xs text-gray-400>
+            From: {{ pathfindingStart }}
+          </div>
+          <div text-xs text-gray-400>
+            To: {{ pathfindingEnd }}
+          </div>
+        </div>
+
+        <div v-if="pathfindingResults.length === 0" p3 text-sm text-gray-500>
+          <div mb2>
+            No paths found between these modules.
+          </div>
+          <div text-xs>
+            Tip: Try using partial file names like "App.vue" or "main.ts"
+          </div>
+        </div>
+
+        <div
+          v-for="(pathInfo, index) in pathfindingResults"
+          :key="index"
+          border-b border-base p3 text-sm
+        >
+          <div pb2 text-gray-500 font-bold>
+            Path {{ index + 1 }}
+            <span text-xs>({{ pathInfo.path.length }} steps)</span>
+          </div>
+          <div flex="~ col gap1">
+            <div
+              v-for="(nodeName, nodeIndex) in pathInfo.displayPath"
+              :key="nodeIndex"
+              flex="~ items-center gap-2"
+            >
+              <div
+                h-4px w-4px rounded-full
+                :class="[
+                  nodeIndex === 0 ? 'bg-green-500'
+                  : nodeIndex === pathInfo.displayPath.length - 1 ? 'bg-red-500'
+                    : 'bg-orange-500',
+                ]"
+              />
+              <button
+                truncate text-left hover="underline"
+                :class="[
+                  nodeIndex === 0 ? 'text-green-600 dark:text-green-400 font-bold'
+                  : nodeIndex === pathInfo.displayPath.length - 1 ? 'text-red-600 dark:text-red-400 font-bold'
+                    : 'text-gray-800 dark:text-gray-200',
+                ]"
+                :title="pathInfo.path[nodeIndex]"
+                @click="_openInEditor(pathInfo.path[nodeIndex])"
+              >
+                {{ nodeName }}
+              </button>
+              <div
+                v-if="nodeIndex < pathInfo.displayPath.length - 1"
+                i-carbon-arrow-down text-xs op50
+              />
+            </div>
+          </div>
+        </div>
+      </template>
     </div>
   </VueDrawer>
 </template>
diff --git a/packages/client/src/components/graph/GraphNavbar.vue b/packages/client/src/components/graph/GraphNavbar.vue
index 5cb9908e4..05554a824 100644
--- a/packages/client/src/components/graph/GraphNavbar.vue
+++ b/packages/client/src/components/graph/GraphNavbar.vue
@@ -12,17 +12,56 @@ const selectableItems = [
 ] as const
 
 const filterId = graphFilterNodeId
+
+// Pathfinding mode
+const pathfindingMode = graphPathfindingMode
+const pathfindingStart = graphPathfindingStart
+const pathfindingEnd = graphPathfindingEnd
+
+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 = ''">
+    <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..448801c45
--- /dev/null
+++ b/packages/client/src/composables/__test__/graph-pathfinding.test.ts
@@ -0,0 +1,315 @@
+import type { ModuleInfo } from '@vue/devtools-core'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+// Mock test data setup
+interface GraphNodesTotalData {
+  mod: ModuleInfo
+  info: {
+    displayName: string
+    displayPath: string
+  }
+  node: any
+  edges: any[]
+}
+
+// Test module graph structure:
+// main.ts -> App.vue -> Header.vue -> utils.ts
+//        \-> router.ts -> routes.ts -> utils.ts
+const mockModulesMap = new Map<string, GraphNodesTotalData>()
+
+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: [],
+  }
+}
+
+describe('graph Pathfinding', () => {
+  // Helper function to search modules by text
+  function searchModulesByText(searchText: string, modulesMap: Map<string, GraphNodesTotalData>): string[] {
+    const results: string[] = []
+
+    modulesMap.forEach((nodeData, moduleId) => {
+      const displayName = nodeData.info.displayName.toLowerCase()
+      const fullPath = moduleId.toLowerCase()
+      const search = searchText.toLowerCase()
+
+      if (displayName.includes(search) || fullPath.includes(search)) {
+        results.push(moduleId)
+      }
+    })
+
+    return results
+  }
+
+  beforeEach(() => {
+    // Clear and setup mock data
+    mockModulesMap.clear()
+
+    // Build a simple dependency graph:
+    // main.ts imports App.vue and router.ts
+    // App.vue imports Header.vue
+    // Header.vue imports utils.ts
+    // router.ts imports routes.ts
+    // routes.ts imports utils.ts
+
+    mockModulesMap.set('/src/main.ts', createMockModule(
+      '/src/main.ts',
+      'main.ts',
+      ['/src/App.vue', '/src/router.ts'],
+    ))
+
+    mockModulesMap.set('/src/App.vue', createMockModule(
+      '/src/App.vue',
+      'App.vue',
+      ['/src/components/Header.vue'],
+    ))
+
+    mockModulesMap.set('/src/components/Header.vue', createMockModule(
+      '/src/components/Header.vue',
+      'Header.vue',
+      ['/src/utils/utils.ts'],
+    ))
+
+    mockModulesMap.set('/src/router.ts', createMockModule(
+      '/src/router.ts',
+      'router.ts',
+      ['/src/routes.ts'],
+    ))
+
+    mockModulesMap.set('/src/routes.ts', createMockModule(
+      '/src/routes.ts',
+      'routes.ts',
+      ['/src/utils/utils.ts'],
+    ))
+
+    mockModulesMap.set('/src/utils/utils.ts', createMockModule(
+      '/src/utils/utils.ts',
+      'utils.ts',
+      [],
+    ))
+  })
+
+  describe('module Search', () => {
+    it('should find module by exact display name', () => {
+      const results = searchModulesByText('main.ts', mockModulesMap)
+
+      expect(results).toHaveLength(1)
+      expect(results[0]).toBe('/src/main.ts')
+    })
+
+    it('should find module by partial name', () => {
+      const results = searchModulesByText('App', mockModulesMap)
+
+      expect(results).toHaveLength(1)
+      expect(results[0]).toBe('/src/App.vue')
+    })
+
+    it('should find module by path segment', () => {
+      const results = searchModulesByText('components', mockModulesMap)
+
+      expect(results).toHaveLength(1)
+      expect(results[0]).toBe('/src/components/Header.vue')
+    })
+
+    it('should find multiple modules with common name', () => {
+      const results = searchModulesByText('utils', mockModulesMap)
+
+      expect(results).toHaveLength(1)
+      expect(results[0]).toBe('/src/utils/utils.ts')
+    })
+
+    it('should be case insensitive', () => {
+      const results = searchModulesByText('MAIN.TS', mockModulesMap)
+
+      expect(results).toHaveLength(1)
+      expect(results[0]).toBe('/src/main.ts')
+    })
+  })
+
+  // Simple DFS pathfinding implementation for testing
+  function findAllPaths(
+    startId: string,
+    endId: string,
+    modulesMap: Map<string, GraphNodesTotalData>,
+    maxDepth = 20,
+  ) {
+    const paths: { path: string[], displayPath: string[] }[] = []
+    const visited = new Set<string>()
+
+    function dfs(currentId: string, targetId: string, currentPath: string[], depth: number) {
+      if (depth > maxDepth || visited.has(currentId)) {
+        return
+      }
+
+      currentPath.push(currentId)
+
+      if (currentId === targetId) {
+        const displayPath = currentPath.map((id) => {
+          const node = modulesMap.get(id)
+          return node?.info.displayName ?? id.split('/').at(-1) ?? id
+        })
+        paths.push({
+          path: [...currentPath],
+          displayPath,
+        })
+        currentPath.pop()
+        return
+      }
+
+      visited.add(currentId)
+
+      const node = modulesMap.get(currentId)
+      if (node) {
+        for (const dep of node.mod.deps) {
+          if (!visited.has(dep)) {
+            dfs(dep, targetId, currentPath, depth + 1)
+          }
+        }
+      }
+
+      visited.delete(currentId)
+      currentPath.pop()
+    }
+
+    dfs(startId, endId, [], 0)
+    return paths
+  }
+
+  it('should find a single path from main.ts to Header.vue', () => {
+    const paths = findAllPaths('/src/main.ts', '/src/components/Header.vue', mockModulesMap)
+
+    expect(paths).toHaveLength(1)
+    expect(paths[0].path).toEqual([
+      '/src/main.ts',
+      '/src/App.vue',
+      '/src/components/Header.vue',
+    ])
+    expect(paths[0].displayPath).toEqual([
+      'main.ts',
+      'App.vue',
+      'Header.vue',
+    ])
+  })
+
+  it('should find multiple paths from main.ts to utils.ts', () => {
+    const paths = findAllPaths('/src/main.ts', '/src/utils/utils.ts', mockModulesMap)
+
+    expect(paths).toHaveLength(2)
+
+    // Path 1: main.ts -> App.vue -> Header.vue -> utils.ts
+    expect(paths[0].path).toEqual([
+      '/src/main.ts',
+      '/src/App.vue',
+      '/src/components/Header.vue',
+      '/src/utils/utils.ts',
+    ])
+
+    // Path 2: main.ts -> router.ts -> routes.ts -> utils.ts
+    expect(paths[1].path).toEqual([
+      '/src/main.ts',
+      '/src/router.ts',
+      '/src/routes.ts',
+      '/src/utils/utils.ts',
+    ])
+  })
+
+  it('should return empty array when no path exists', () => {
+    const paths = findAllPaths('/src/utils/utils.ts', '/src/main.ts', mockModulesMap)
+
+    expect(paths).toHaveLength(0)
+  })
+
+  it('should handle same start and end node', () => {
+    const paths = findAllPaths('/src/main.ts', '/src/main.ts', mockModulesMap)
+
+    expect(paths).toHaveLength(1)
+    expect(paths[0].path).toEqual(['/src/main.ts'])
+  })
+
+  it('should handle non-existent nodes', () => {
+    const paths = findAllPaths('/src/nonexistent.ts', '/src/main.ts', mockModulesMap)
+
+    expect(paths).toHaveLength(0)
+  })
+
+  it('should prevent infinite loops with max depth', () => {
+    // Create a circular dependency
+    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 paths = findAllPaths('/src/a.ts', '/src/nonexistent.ts', circularMap, 3)
+
+    // Should not crash and return empty paths
+    expect(paths).toHaveLength(0)
+  })
+
+  describe('integration: Search + Pathfinding', () => {
+    it('should find paths using partial file names', () => {
+      // Search for modules
+      const startModules = searchModulesByText('main', mockModulesMap)
+      const endModules = searchModulesByText('utils', mockModulesMap)
+
+      // Find paths
+      const allPaths: any[] = []
+      for (const startId of startModules) {
+        for (const endId of endModules) {
+          const paths = findAllPaths(startId, endId, mockModulesMap)
+          allPaths.push(...paths)
+        }
+      }
+
+      // Should find 2 paths from main.ts to utils.ts
+      expect(allPaths).toHaveLength(2)
+    })
+
+    it('should handle case-insensitive search in pathfinding', () => {
+      const startModules = searchModulesByText('MAIN.TS', mockModulesMap)
+      const endModules = searchModulesByText('HEADER.VUE', mockModulesMap)
+
+      const allPaths: any[] = []
+      for (const startId of startModules) {
+        for (const endId of endModules) {
+          const paths = findAllPaths(startId, endId, mockModulesMap)
+          allPaths.push(...paths)
+        }
+      }
+
+      expect(allPaths).toHaveLength(1)
+      expect(allPaths[0].path).toEqual([
+        '/src/main.ts',
+        '/src/App.vue',
+        '/src/components/Header.vue',
+      ])
+    })
+
+    it('should return empty when search finds no modules', () => {
+      const startModules = searchModulesByText('nonexistent', mockModulesMap)
+      const endModules = searchModulesByText('utils', mockModulesMap)
+
+      const allPaths: any[] = []
+      for (const startId of startModules) {
+        for (const endId of endModules) {
+          const paths = findAllPaths(startId, endId, mockModulesMap)
+          allPaths.push(...paths)
+        }
+      }
+
+      expect(allPaths).toHaveLength(0)
+    })
+  })
+})
diff --git a/packages/client/src/composables/graph.ts b/packages/client/src/composables/graph.ts
index d94d5ce61..1145321f0 100644
--- a/packages/client/src/composables/graph.ts
+++ b/packages/client/src/composables/graph.ts
@@ -1,5 +1,5 @@
 import type { ModuleInfo } from '@vue/devtools-core'
-import type { Edge, Node, Options } from 'vis-network'
+import type { Edge, Font, Node, Options } from 'vis-network'
 import { deepClone } from '@vue/devtools-shared'
 import { useDevToolsColorMode } from '@vue/devtools-ui'
 import { DataSet } from 'vis-network/standalone'
@@ -106,11 +106,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,
@@ -157,6 +173,10 @@ export function cleanupGraphRelatedStates() {
   graphEdges.clear()
   modulesMap.clear()
   moduleReferences.clear()
+  graphPathfindingMode.value = false
+  graphPathfindingStart.value = ''
+  graphPathfindingEnd.value = ''
+  graphPathfindingResults.value = []
 }
 
 function checkIsValidModule(module: ModuleInfo) {
@@ -185,23 +205,52 @@ function updateGraph() {
   graphEdges.clear()
   closeDrawer()
 
+  // Pathfinding mode: find and display paths between two nodes
+  if (graphPathfindingMode.value && graphPathfindingStart.value && graphPathfindingEnd.value) {
+    // Search for modules matching the input text
+    const startModules = searchModulesByText(graphPathfindingStart.value)
+    const endModules = searchModulesByText(graphPathfindingEnd.value)
+
+    // Find paths between all matching start and end modules
+    const allPaths: PathInfo[] = []
+    for (const startId of startModules) {
+      for (const endId of endModules) {
+        const paths = findAllPaths(startId, endId)
+        allPaths.push(...paths)
+      }
+    }
+
+    graphPathfindingResults.value = allPaths
+
+    if (allPaths.length > 0) {
+      const { nodes, edges } = getPathNodesAndEdges(allPaths)
+      graphNodes.add(uniqueNodes(nodes))
+      graphEdges.add(uniqueEdges(edges))
+    }
+    toggleGraphDrawer(true)
+    return
+  }
+
   const matchedNodes: Node[] = []
   const matchedSearchNodes: SearcherNode[] = []
   const matchedEdges: Edge[] = []
 
   // 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
       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 +259,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
@@ -403,9 +452,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 +499,6 @@ export function updateGraphDrawerData(nodeId: string): DrawerData | undefined {
 // #endregion
 
 // #region graph filter
-export const graphFilterNodeId = ref('')
 
 watch(graphFilterNodeId, () => {
   updateGraph()
@@ -491,3 +536,150 @@ 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): string[] {
+  const results: string[] = []
+
+  modulesMap.forEach((nodeData, moduleId) => {
+    // Search in both full path and display name
+    const displayName = nodeData.info.displayName.toLowerCase()
+    const fullPath = moduleId.toLowerCase()
+    const search = searchText.toLowerCase()
+
+    if (displayName.includes(search) || fullPath.includes(search)) {
+      results.push(moduleId)
+    }
+  })
+
+  return results
+}
+
+/**
+ * Find all paths from start node to end node using DFS
+ * Returns array of paths, where each path is an array of module IDs
+ */
+export function findAllPaths(startId: string, endId: string, maxDepth = 20): PathInfo[] {
+  const paths: PathInfo[] = []
+  const visited = new Set<string>()
+
+  function dfs(currentId: string, targetId: string, currentPath: string[], depth: number) {
+    // Prevent infinite loops and limit depth
+    if (depth > maxDepth || visited.has(currentId)) {
+      return
+    }
+
+    // Add current node to path
+    currentPath.push(currentId)
+
+    // Found the target
+    if (currentId === targetId) {
+      // Convert to display format
+      const displayPath = currentPath.map((id) => {
+        const node = modulesMap.get(id)
+        return node?.info.displayName ?? id.split('/').at(-1) ?? id
+      })
+      paths.push({
+        path: [...currentPath],
+        displayPath,
+      })
+      currentPath.pop()
+      return
+    }
+
+    // Mark as visited for this path
+    visited.add(currentId)
+
+    // Get current node's dependencies
+    const node = modulesMap.get(currentId)
+    if (node) {
+      for (const dep of node.mod.deps) {
+        if (!visited.has(dep) && checkIsValidModule(modulesMap.get(dep)!.mod!)) {
+          dfs(dep, targetId, currentPath, depth + 1)
+        }
+      }
+    }
+
+    // Backtrack
+    visited.delete(currentId)
+    currentPath.pop()
+  }
+
+  dfs(startId, endId, [], 0)
+  return paths
+}
+
+/**
+ * Get all nodes and edges involved in the found paths
+ */
+function getPathNodesAndEdges(paths: PathInfo[]): { nodes: Node[], edges: Edge[] } {
+  const allNodes = new Map<string, Node>()
+  const allEdges = new Map<string, Edge>()
+
+  paths.forEach((pathInfo, pathIndex) => {
+    const { path } = pathInfo
+
+    path.forEach((nodeId, index) => {
+      const nodeData = modulesMap.get(nodeId)
+      if (nodeData) {
+        const node = deepClone(nodeData.node)
+
+        // Highlight nodes in the path
+        if (!node.font) {
+          node.font = {}
+        }
+
+        // Use different colors for start, end, and intermediate nodes
+        if (index === 0) {
+          // Start node - green
+          (node.font as Font).color = '#10b981'
+          node.borderWidth = 3
+          node.color = { border: '#10b981' }
+        }
+        else if (index === path.length - 1) {
+          // End node - red
+          (node.font as Font).color = '#ef4444'
+          node.borderWidth = 3
+          node.color = { border: '#ef4444' }
+        }
+        else {
+          // Intermediate nodes - orange
+          (node.font as Font).color = '#f59e0b'
+        }
+
+        node.label = `<b>${node.label}</b>`
+        allNodes.set(nodeId, node)
+      }
+
+      // Add edge to next node in path
+      if (index < path.length - 1) {
+        const nextNodeId = path[index + 1]
+        const edgeKey = `${nodeId}-${nextNodeId}`
+        const edge = {
+          from: nodeId,
+          to: nextNodeId,
+          arrows: {
+            to: {
+              enabled: true,
+              scaleFactor: 0.8,
+            },
+          },
+          // Highlight the edges in the path
+          color: { color: '#f59e0b', highlight: '#f59e0b' },
+          width: 2,
+        }
+        allEdges.set(edgeKey, edge)
+      }
+    })
+  })
+
+  return {
+    nodes: Array.from(allNodes.values()),
+    edges: Array.from(allEdges.values()),
+  }
+}
+// #endregion
diff --git a/packages/client/src/pages/graph.vue b/packages/client/src/pages/graph.vue
index b3af11ba3..1299a67be 100644
--- a/packages/client/src/pages/graph.vue
+++ b/packages/client/src/pages/graph.vue
@@ -45,7 +45,9 @@ function mountNetwork() {
   })
 
   network.on('deselectNode', () => {
-    toggleGraphDrawer(false)
+    if (!graphPathfindingMode.value)
+      toggleGraphDrawer(false)
+    graphDrawerData.value = undefined
   })
 
   watch(() => graphFilterNodeId.value, (id) => {
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