From c8b2ca2c013d11a6db3e315ca564c769673b4f48 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Wed, 26 Nov 2025 22:29:51 +0800
Subject: [PATCH 1/7] feat: init

---
 .../src/app/components/data/SearchPanel.vue   | 21 ++++---
 .../src/app/components/modules/FlatList.vue   | 16 ++++-
 .../app/components/modules/GraphNavigator.vue | 61 +++++++++++++++++++
 .../pages/session/[session]/graph/index.vue   | 21 ++++++-
 4 files changed, 106 insertions(+), 13 deletions(-)
 create mode 100644 packages/vite/src/app/components/modules/GraphNavigator.vue

diff --git a/packages/vite/src/app/components/data/SearchPanel.vue b/packages/vite/src/app/components/data/SearchPanel.vue
index 8cb997c2..1e8fb739 100644
--- a/packages/vite/src/app/components/data/SearchPanel.vue
+++ b/packages/vite/src/app/components/data/SearchPanel.vue
@@ -72,15 +72,18 @@ function unselectToggle() {
 
 <template>
   <div flex="col gap-2" max-w-90vw min-w-30vw border="~ base rounded-xl" bg-glass>
-    <div v-if="modelValue.search !== false">
-      <input
-        v-model="model.search"
-        p2 px4
-        w-full
-        style="outline: none"
-        placeholder="Search"
-      >
-    </div>
+    <slot name="search">
+      <div v-if="modelValue.search !== false" class="flex items-center">
+        <input
+          v-model="model.search"
+          p2 px4
+          w-full
+          style="outline: none"
+          placeholder="Search"
+        >
+        <slot name="search-end" />
+      </div>
+    </slot>
     <div v-if="rules.length" :class="selectedContainerClass" flex="~ gap-2 wrap" p2 border="t base">
       <label
         v-for="rule of rules"
diff --git a/packages/vite/src/app/components/modules/FlatList.vue b/packages/vite/src/app/components/modules/FlatList.vue
index 41727331..3c2d5a77 100644
--- a/packages/vite/src/app/components/modules/FlatList.vue
+++ b/packages/vite/src/app/components/modules/FlatList.vue
@@ -1,9 +1,18 @@
 <script setup lang="ts">
 import type { ModuleListItem, SessionContext } from '~~/shared/types'
 
-defineProps<{
+withDefaults(defineProps<{
   session: SessionContext
   modules: ModuleListItem[]
+  disableTooltip?: boolean
+  link?: boolean
+}>(), {
+  disableTooltip: false,
+  link: true,
+})
+
+const emit = defineEmits<{
+  (e: 'select', module: ModuleListItem): void
 }>()
 </script>
 
@@ -14,13 +23,14 @@ defineProps<{
       key-prop="id"
     >
       <template #default="{ item }">
-        <div flex pb2>
+        <div flex pb2 @click="emit('select', item)">
           <DisplayModuleId
             :id="item.id"
             :session
             hover="bg-active" block px2 p1 w-full
             border="~ base rounded"
-            :link="true"
+            :link="link"
+            :disable-tooltip="disableTooltip"
           />
         </div>
       </template>
diff --git a/packages/vite/src/app/components/modules/GraphNavigator.vue b/packages/vite/src/app/components/modules/GraphNavigator.vue
new file mode 100644
index 00000000..9dd1b7c1
--- /dev/null
+++ b/packages/vite/src/app/components/modules/GraphNavigator.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { ModuleListItem, SessionContext } from '~~/shared/types'
+import { hideAllPoppers, Menu as VMenu } from 'floating-vue'
+
+defineProps<{
+  session: SessionContext
+  modules: ModuleListItem[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+function selectNode(node: ModuleListItem) {
+  return node
+}
+</script>
+
+<template>
+  <div h12 px4 p2 relative flex="~ gap2 items-center">
+    <VMenu inline :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 200, hide: 0 }">
+      <input
+        p1 px4 border="~ base rounded-1" style="outline: none"
+        placeholder="Start"
+        @blur="hideAllPoppers"
+      >
+      <template #popper>
+        <div class="p2 w100" flex="~ col gap2">
+          <ModulesFlatList
+            :session="session"
+            :modules="modules"
+            disable-tooltip
+            :link="false"
+            @select="selectNode"
+          />
+        </div>
+      </template>
+    </VMenu>
+    <div class="i-carbon-arrow-right op50" />
+    <VMenu inline :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 200, hide: 0 }">
+      <input
+        p1 px4 border="~ base rounded-1" style="outline: none"
+        placeholder="End"
+        @blur="hideAllPoppers"
+      >
+      <template #popper>
+        <div class="p2 w100" flex="~ col gap2">
+          <ModulesFlatList
+            :session="session"
+            :modules="modules"
+            disable-tooltip
+            :link="false"
+            @select="selectNode"
+          />
+        </div>
+      </template>
+    </VMenu>
+
+    <DisplayCloseButton class="absolute right-2" @click="emit('close')" />
+  </div>
+</template>
diff --git a/packages/vite/src/app/pages/session/[session]/graph/index.vue b/packages/vite/src/app/pages/session/[session]/graph/index.vue
index f432eed0..69daf62f 100644
--- a/packages/vite/src/app/pages/session/[session]/graph/index.vue
+++ b/packages/vite/src/app/pages/session/[session]/graph/index.vue
@@ -16,9 +16,10 @@ const props = defineProps<{
 
 const route = useRoute()
 const router = useRouter()
+const navigatorVisible = ref(false)
 
 const searchValue = ref<{
-  search: string
+  search: string | false
   selected: string[] | null
   [key: string]: any
 }>({
@@ -121,12 +122,30 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
   }
   settings.value.moduleGraphViewType = type
 }
+
+function toggleNavigator(state: boolean) {
+  navigatorVisible.value = state
+  searchValue.value.search = state ? false : ''
+}
 </script>
 
 <template>
   <div relative max-h-screen of-hidden>
     <div absolute left-4 top-4 z-panel-nav>
       <DataSearchPanel v-model="searchValue" :rules="searchFilterTypes">
+        <template v-if="navigatorVisible" #search>
+          <ModulesGraphNavigator :session="session" :modules="searched" @close="toggleNavigator(false)" />
+        </template>
+        <template #search-end>
+          <div h12 mr2 flex="~ items-center">
+            <button
+              w-8 h-8 rounded-full flex items-center justify-center
+              hover="bg-active op100" op50 title="Module Navigator" @click="toggleNavigator(true)"
+            >
+              <i i-ri:route-line flex />
+            </button>
+          </div>
+        </template>
         <div flex="~ gap-2 items-center" p2 border="t base">
           <span op50 pl2 text-sm>View as</span>
           <button

From 55d30e4646e31ceabc8a8e05c74a7bf5ad91c1e5 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Fri, 28 Nov 2025 20:24:06 +0800
Subject: [PATCH 2/7] chore: update

---
 .../app/components/modules/GraphNavigator.vue | 236 +++++++++++++++---
 .../pages/session/[session]/graph/index.vue   |  77 +++++-
 2 files changed, 271 insertions(+), 42 deletions(-)

diff --git a/packages/vite/src/app/components/modules/GraphNavigator.vue b/packages/vite/src/app/components/modules/GraphNavigator.vue
index 9dd1b7c1..ef9f070d 100644
--- a/packages/vite/src/app/components/modules/GraphNavigator.vue
+++ b/packages/vite/src/app/components/modules/GraphNavigator.vue
@@ -1,61 +1,219 @@
 <script setup lang="ts">
 import type { ModuleListItem, SessionContext } from '~~/shared/types'
+import { computedWithControl } from '@vueuse/core'
 import { hideAllPoppers, Menu as VMenu } from 'floating-vue'
+import Fuse from 'fuse.js'
+import { computed, ref, watch } from 'vue'
 
-defineProps<{
+const props = defineProps<{
   session: SessionContext
   modules: ModuleListItem[]
 }>()
 
 const emit = defineEmits<{
   (e: 'close'): void
+  (e: 'select', nodes: { start: string, end: string }): void
 }>()
 
-function selectNode(node: ModuleListItem) {
-  return node
+const searchStart = ref<{
+  search: string
+  selected: string | null
+}>({
+  search: '',
+  selected: null,
+})
+
+const modulesMap = computed(() => {
+  const map = new Map<string, ModuleListItem>()
+  props.modules.forEach((m) => {
+    map.set(m.id, m)
+  })
+  return map
+})
+
+const startFuse = computedWithControl(
+  () => props.modules,
+  () => new Fuse(props.modules, {
+    includeScore: true,
+    keys: ['id'],
+    ignoreLocation: true,
+    threshold: 0.4,
+  }),
+)
+
+const startModules = computed(() => {
+  if (!searchStart.value.search) {
+    return props.modules
+  }
+  else {
+    return startFuse.value
+      .search(searchStart.value.search)
+      .map(r => r.item)
+  }
+})
+
+const endModules = computed(() => {
+  function getAllImports(moduleId: string, visited = new Set<string>()): ModuleListItem[] {
+    if (visited.has(moduleId))
+      return []
+    visited.add(moduleId)
+
+    const module = modulesMap.value.get(moduleId)
+    if (!module?.imports?.length)
+      return []
+
+    const res: ModuleListItem[] = []
+
+    for (const importItem of module.imports) {
+      const importedModule = modulesMap.value.get(importItem.module_id)
+      if (!importedModule)
+        continue
+
+      if (!visited.has(importedModule.id)) {
+        res.push(importedModule)
+        res.push(...getAllImports(importedModule.id, visited))
+      }
+    }
+
+    return res
+  }
+
+  return searchStart.value.selected ? getAllImports(searchStart.value.selected) : []
+})
+
+const endFuse = computedWithControl(
+  () => endModules.value,
+  () => new Fuse(endModules.value, {
+    includeScore: true,
+    keys: ['id'],
+    ignoreLocation: true,
+    threshold: 0.4,
+  }),
+)
+
+const searchEnd = ref<{
+  search: string
+  selected: string | null
+}>({
+  search: '',
+  selected: null,
+})
+
+const filteredEndModules = computed(() => {
+  if (!searchEnd.value.search) {
+    return endModules.value
+  }
+  else {
+    return endFuse.value
+      .search(searchEnd.value.search)
+      .map(r => r.item)
+  }
+})
+
+function selectStartNode(node: ModuleListItem) {
+  searchStart.value.selected = node.id
+  searchStart.value.search = ''
+}
+
+function selectEndNode(node: ModuleListItem) {
+  searchEnd.value.selected = node.id
+  searchEnd.value.search = ''
+}
+
+function clearSelected(type: 'start' | 'end') {
+  if (type === 'start') {
+    searchStart.value.selected = null
+  }
+  searchEnd.value.selected = null
 }
+
+watch([() => searchStart.value.selected, () => searchEnd.value.selected], () => {
+  emit('select', {
+    start: searchStart.value.selected ?? '',
+    end: searchEnd.value.selected ?? '',
+  })
+})
 </script>
 
 <template>
   <div h12 px4 p2 relative flex="~ gap2 items-center">
-    <VMenu inline :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 200, hide: 0 }">
-      <input
-        p1 px4 border="~ base rounded-1" style="outline: none"
-        placeholder="Start"
-        @blur="hideAllPoppers"
-      >
-      <template #popper>
-        <div class="p2 w100" flex="~ col gap2">
-          <ModulesFlatList
-            :session="session"
-            :modules="modules"
-            disable-tooltip
-            :link="false"
-            @select="selectNode"
-          />
+    <div flex="~ items-center gap2" class="flex-1" min-w-0>
+      <div flex-1 w-0>
+        <div v-if="searchStart.selected" w-full overflow-hidden flex="~ items-center" border="~ base rounded" p1 relative>
+          <div overflow-hidden text-ellipsis pr6 py0.5 w-0 flex-1>
+            <DisplayModuleId
+              :id="searchStart.selected"
+              :session="session"
+              block text-nowrap
+              :link="false"
+              :disable-tooltip="true"
+            />
+          </div>
+          <button i-carbon-clean text-4 hover="op100" op50 title="Clear" absolute right-2 @click="clearSelected('start')" />
         </div>
-      </template>
-    </VMenu>
-    <div class="i-carbon-arrow-right op50" />
-    <VMenu inline :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 200, hide: 0 }">
-      <input
-        p1 px4 border="~ base rounded-1" style="outline: none"
-        placeholder="End"
-        @blur="hideAllPoppers"
-      >
-      <template #popper>
-        <div class="p2 w100" flex="~ col gap2">
-          <ModulesFlatList
-            :session="session"
-            :modules="modules"
-            disable-tooltip
-            :link="false"
-            @select="selectNode"
-          />
+        <VMenu v-else :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 300, hide: 120 }">
+          <input
+            v-model="searchStart.search"
+            p1 px4 w-full border="~ base rounded-1" style="outline: none"
+            placeholder="Start"
+            @blur="hideAllPoppers"
+          >
+          <template #popper>
+            <div class="p2 w100" flex="~ col gap2">
+              <ModulesFlatList
+                :session="session"
+                :modules="startModules"
+                disable-tooltip
+                :link="false"
+                @select="selectStartNode"
+              />
+            </div>
+          </template>
+        </VMenu>
+      </div>
+      <div class="i-carbon-arrow-right op50" flex-shrink-0 />
+
+      <div flex-1 w-0>
+        <div v-if="searchEnd.selected" w-full overflow-hidden flex="~ items-center" border="~ base rounded" p1 relative>
+          <div overflow-hidden text-ellipsis pr6 py0.5 w-0 flex-1>
+            <DisplayModuleId
+              :id="searchEnd.selected"
+              :session="session"
+              block text-nowrap
+              :link="false"
+              :disable-tooltip="true"
+            />
+          </div>
+          <button i-carbon-clean text-4 hover="op100" op50 title="Clear" absolute right-2 @click="clearSelected('end')" />
         </div>
-      </template>
-    </VMenu>
+        <VMenu v-else :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 300, hide: 120 }">
+          <input
+            v-model="searchEnd.search"
+            p1 px4 w-full border="~ base rounded-1" style="outline: none"
+            placeholder="End"
+            @blur="hideAllPoppers"
+          >
+          <template #popper>
+            <div class="p2 w100" flex="~ col gap2">
+              <ModulesFlatList
+                v-if="filteredEndModules.length"
+                :session="session"
+                :modules="filteredEndModules"
+                disable-tooltip
+                :link="false"
+                @select="selectEndNode"
+              />
+              <div v-else flex="~ items-center justify-center" w-full h-20>
+                <span italic op50>
+                  No modules
+                </span>
+              </div>
+            </div>
+          </template>
+        </VMenu>
+      </div>
+    </div>
 
-    <DisplayCloseButton class="absolute right-2" @click="emit('close')" />
+    <DisplayCloseButton class="mr--2" @click="emit('close')" />
   </div>
 </template>
diff --git a/packages/vite/src/app/pages/session/[session]/graph/index.vue b/packages/vite/src/app/pages/session/[session]/graph/index.vue
index 69daf62f..0d58762e 100644
--- a/packages/vite/src/app/pages/session/[session]/graph/index.vue
+++ b/packages/vite/src/app/pages/session/[session]/graph/index.vue
@@ -16,7 +16,18 @@ const props = defineProps<{
 
 const route = useRoute()
 const router = useRouter()
-const navigatorVisible = ref(false)
+const navigatorVisible = ref(true)
+const navigatorNode = ref({
+  start: '',
+  end: '',
+})
+
+function selectNavigatorNodes(nodes: { start: string, end: string }) {
+  navigatorNode.value = {
+    start: nodes.start,
+    end: nodes.end,
+  }
+}
 
 const searchValue = ref<{
   search: string | false
@@ -116,6 +127,66 @@ const searched = computed(() => {
     .map(r => r.item)
 })
 
+const filteredGraph = computed(() => {
+  const { start, end } = navigatorNode.value
+  if (!start && !end)
+    return searched.value
+
+  const modulesMap = new Map(props.session.modulesList.map(m => [m.id, m]))
+  const linkedNodes = new Set<string>()
+
+  const bfs = (startId: string, getNext: (id: string) => string[], stopAt?: string) => {
+    const queue = [startId]
+    const visited = new Set<string>()
+    const pathMap = new Map<string, string[]>([[startId, [startId]]])
+
+    while (queue.length > 0) {
+      const id = queue.shift()!
+      if (visited.has(id))
+        continue
+      visited.add(id)
+
+      if (stopAt) {
+        if (id === stopAt)
+          pathMap.get(id)?.forEach(nodeId => linkedNodes.add(nodeId))
+      }
+      else {
+        linkedNodes.add(id)
+      }
+
+      if (!stopAt || id !== stopAt) {
+        getNext(id).forEach((nextId) => {
+          if (!visited.has(nextId)) {
+            queue.push(nextId)
+            if (stopAt)
+              pathMap.set(nextId, [...(pathMap.get(id) || []), nextId])
+          }
+        })
+      }
+    }
+  }
+
+  if (start && end) {
+    bfs(start, id => modulesMap.get(id)?.imports.map(imp => imp.module_id) || [], end)
+  }
+  else if (start) {
+    bfs(start, id => modulesMap.get(id)?.imports.map(imp => imp.module_id) || [])
+  }
+  else if (end) {
+    bfs(end, id => modulesMap.get(id)?.importers || [])
+  }
+
+  return filtered.value.filter(x => linkedNodes.has(x.id)).map((m) => {
+    if (m.id === start) {
+      return {
+        ...m,
+        importers: [],
+      }
+    }
+    return m
+  })
+})
+
 function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
   if (route.query.module) {
     router.replace({ query: { ...route.query, module: undefined } })
@@ -134,7 +205,7 @@ function toggleNavigator(state: boolean) {
     <div absolute left-4 top-4 z-panel-nav>
       <DataSearchPanel v-model="searchValue" :rules="searchFilterTypes">
         <template v-if="navigatorVisible" #search>
-          <ModulesGraphNavigator :session="session" :modules="searched" @close="toggleNavigator(false)" />
+          <ModulesGraphNavigator :session="session" :modules="searched" @select="selectNavigatorNodes" @close="toggleNavigator(false)" />
         </template>
         <template #search-end>
           <div h12 mr2 flex="~ items-center">
@@ -190,7 +261,7 @@ function toggleNavigator(state: boolean) {
     <template v-else-if="settings.moduleGraphViewType === 'graph'">
       <ModulesGraph
         :session="session"
-        :modules="searched"
+        :modules="filteredGraph"
       />
     </template>
     <template v-else>

From a905136c7e1bf18f50bb61b08b666f2576d7f34d Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Sun, 30 Nov 2025 00:18:39 +0800
Subject: [PATCH 3/7] chore: update

---
 packages/vite/src/app/components/modules/GraphNavigator.vue | 6 +++---
 .../vite/src/app/pages/session/[session]/graph/index.vue    | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/vite/src/app/components/modules/GraphNavigator.vue b/packages/vite/src/app/components/modules/GraphNavigator.vue
index ef9f070d..4fef7dbb 100644
--- a/packages/vite/src/app/components/modules/GraphNavigator.vue
+++ b/packages/vite/src/app/components/modules/GraphNavigator.vue
@@ -78,7 +78,7 @@ const endModules = computed(() => {
     return res
   }
 
-  return searchStart.value.selected ? getAllImports(searchStart.value.selected) : []
+  return searchStart.value.selected ? getAllImports(searchStart.value.selected) : props.modules
 })
 
 const endFuse = computedWithControl(
@@ -151,7 +151,7 @@ watch([() => searchStart.value.selected, () => searchEnd.value.selected], () =>
           </div>
           <button i-carbon-clean text-4 hover="op100" op50 title="Clear" absolute right-2 @click="clearSelected('start')" />
         </div>
-        <VMenu v-else :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 300, hide: 120 }">
+        <VMenu v-else :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 300, hide: 150 }">
           <input
             v-model="searchStart.search"
             p1 px4 w-full border="~ base rounded-1" style="outline: none"
@@ -186,7 +186,7 @@ watch([() => searchStart.value.selected, () => searchEnd.value.selected], () =>
           </div>
           <button i-carbon-clean text-4 hover="op100" op50 title="Clear" absolute right-2 @click="clearSelected('end')" />
         </div>
-        <VMenu v-else :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 300, hide: 120 }">
+        <VMenu v-else :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 300, hide: 150 }">
           <input
             v-model="searchEnd.search"
             p1 px4 w-full border="~ base rounded-1" style="outline: none"
diff --git a/packages/vite/src/app/pages/session/[session]/graph/index.vue b/packages/vite/src/app/pages/session/[session]/graph/index.vue
index 0d58762e..884f4bd9 100644
--- a/packages/vite/src/app/pages/session/[session]/graph/index.vue
+++ b/packages/vite/src/app/pages/session/[session]/graph/index.vue
@@ -208,7 +208,7 @@ function toggleNavigator(state: boolean) {
           <ModulesGraphNavigator :session="session" :modules="searched" @select="selectNavigatorNodes" @close="toggleNavigator(false)" />
         </template>
         <template #search-end>
-          <div h12 mr2 flex="~ items-center">
+          <div v-if="settings.moduleGraphViewType === 'graph'" h12 mr2 flex="~ items-center">
             <button
               w-8 h-8 rounded-full flex items-center justify-center
               hover="bg-active op100" op50 title="Module Navigator" @click="toggleNavigator(true)"

From 30b54dca0e68e8083e3ab2f03a5220d463ddcfc6 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Mon, 1 Dec 2025 21:55:47 +0800
Subject: [PATCH 4/7] refactor: path selector

---
 .../app/components/modules/GraphNavigator.vue | 219 ------------------
 .../app/components/modules/PathSelector.vue   | 169 ++++++++++++++
 .../vite/src/app/composables/moduleGraph.ts   |  50 +++-
 .../pages/session/[session]/graph/index.vue   |   2 +-
 4 files changed, 219 insertions(+), 221 deletions(-)
 delete mode 100644 packages/vite/src/app/components/modules/GraphNavigator.vue
 create mode 100644 packages/vite/src/app/components/modules/PathSelector.vue

diff --git a/packages/vite/src/app/components/modules/GraphNavigator.vue b/packages/vite/src/app/components/modules/GraphNavigator.vue
deleted file mode 100644
index 4fef7dbb..00000000
--- a/packages/vite/src/app/components/modules/GraphNavigator.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<script setup lang="ts">
-import type { ModuleListItem, SessionContext } from '~~/shared/types'
-import { computedWithControl } from '@vueuse/core'
-import { hideAllPoppers, Menu as VMenu } from 'floating-vue'
-import Fuse from 'fuse.js'
-import { computed, ref, watch } from 'vue'
-
-const props = defineProps<{
-  session: SessionContext
-  modules: ModuleListItem[]
-}>()
-
-const emit = defineEmits<{
-  (e: 'close'): void
-  (e: 'select', nodes: { start: string, end: string }): void
-}>()
-
-const searchStart = ref<{
-  search: string
-  selected: string | null
-}>({
-  search: '',
-  selected: null,
-})
-
-const modulesMap = computed(() => {
-  const map = new Map<string, ModuleListItem>()
-  props.modules.forEach((m) => {
-    map.set(m.id, m)
-  })
-  return map
-})
-
-const startFuse = computedWithControl(
-  () => props.modules,
-  () => new Fuse(props.modules, {
-    includeScore: true,
-    keys: ['id'],
-    ignoreLocation: true,
-    threshold: 0.4,
-  }),
-)
-
-const startModules = computed(() => {
-  if (!searchStart.value.search) {
-    return props.modules
-  }
-  else {
-    return startFuse.value
-      .search(searchStart.value.search)
-      .map(r => r.item)
-  }
-})
-
-const endModules = computed(() => {
-  function getAllImports(moduleId: string, visited = new Set<string>()): ModuleListItem[] {
-    if (visited.has(moduleId))
-      return []
-    visited.add(moduleId)
-
-    const module = modulesMap.value.get(moduleId)
-    if (!module?.imports?.length)
-      return []
-
-    const res: ModuleListItem[] = []
-
-    for (const importItem of module.imports) {
-      const importedModule = modulesMap.value.get(importItem.module_id)
-      if (!importedModule)
-        continue
-
-      if (!visited.has(importedModule.id)) {
-        res.push(importedModule)
-        res.push(...getAllImports(importedModule.id, visited))
-      }
-    }
-
-    return res
-  }
-
-  return searchStart.value.selected ? getAllImports(searchStart.value.selected) : props.modules
-})
-
-const endFuse = computedWithControl(
-  () => endModules.value,
-  () => new Fuse(endModules.value, {
-    includeScore: true,
-    keys: ['id'],
-    ignoreLocation: true,
-    threshold: 0.4,
-  }),
-)
-
-const searchEnd = ref<{
-  search: string
-  selected: string | null
-}>({
-  search: '',
-  selected: null,
-})
-
-const filteredEndModules = computed(() => {
-  if (!searchEnd.value.search) {
-    return endModules.value
-  }
-  else {
-    return endFuse.value
-      .search(searchEnd.value.search)
-      .map(r => r.item)
-  }
-})
-
-function selectStartNode(node: ModuleListItem) {
-  searchStart.value.selected = node.id
-  searchStart.value.search = ''
-}
-
-function selectEndNode(node: ModuleListItem) {
-  searchEnd.value.selected = node.id
-  searchEnd.value.search = ''
-}
-
-function clearSelected(type: 'start' | 'end') {
-  if (type === 'start') {
-    searchStart.value.selected = null
-  }
-  searchEnd.value.selected = null
-}
-
-watch([() => searchStart.value.selected, () => searchEnd.value.selected], () => {
-  emit('select', {
-    start: searchStart.value.selected ?? '',
-    end: searchEnd.value.selected ?? '',
-  })
-})
-</script>
-
-<template>
-  <div h12 px4 p2 relative flex="~ gap2 items-center">
-    <div flex="~ items-center gap2" class="flex-1" min-w-0>
-      <div flex-1 w-0>
-        <div v-if="searchStart.selected" w-full overflow-hidden flex="~ items-center" border="~ base rounded" p1 relative>
-          <div overflow-hidden text-ellipsis pr6 py0.5 w-0 flex-1>
-            <DisplayModuleId
-              :id="searchStart.selected"
-              :session="session"
-              block text-nowrap
-              :link="false"
-              :disable-tooltip="true"
-            />
-          </div>
-          <button i-carbon-clean text-4 hover="op100" op50 title="Clear" absolute right-2 @click="clearSelected('start')" />
-        </div>
-        <VMenu v-else :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 300, hide: 150 }">
-          <input
-            v-model="searchStart.search"
-            p1 px4 w-full border="~ base rounded-1" style="outline: none"
-            placeholder="Start"
-            @blur="hideAllPoppers"
-          >
-          <template #popper>
-            <div class="p2 w100" flex="~ col gap2">
-              <ModulesFlatList
-                :session="session"
-                :modules="startModules"
-                disable-tooltip
-                :link="false"
-                @select="selectStartNode"
-              />
-            </div>
-          </template>
-        </VMenu>
-      </div>
-      <div class="i-carbon-arrow-right op50" flex-shrink-0 />
-
-      <div flex-1 w-0>
-        <div v-if="searchEnd.selected" w-full overflow-hidden flex="~ items-center" border="~ base rounded" p1 relative>
-          <div overflow-hidden text-ellipsis pr6 py0.5 w-0 flex-1>
-            <DisplayModuleId
-              :id="searchEnd.selected"
-              :session="session"
-              block text-nowrap
-              :link="false"
-              :disable-tooltip="true"
-            />
-          </div>
-          <button i-carbon-clean text-4 hover="op100" op50 title="Clear" absolute right-2 @click="clearSelected('end')" />
-        </div>
-        <VMenu v-else :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 300, hide: 150 }">
-          <input
-            v-model="searchEnd.search"
-            p1 px4 w-full border="~ base rounded-1" style="outline: none"
-            placeholder="End"
-            @blur="hideAllPoppers"
-          >
-          <template #popper>
-            <div class="p2 w100" flex="~ col gap2">
-              <ModulesFlatList
-                v-if="filteredEndModules.length"
-                :session="session"
-                :modules="filteredEndModules"
-                disable-tooltip
-                :link="false"
-                @select="selectEndNode"
-              />
-              <div v-else flex="~ items-center justify-center" w-full h-20>
-                <span italic op50>
-                  No modules
-                </span>
-              </div>
-            </div>
-          </template>
-        </VMenu>
-      </div>
-    </div>
-
-    <DisplayCloseButton class="mr--2" @click="emit('close')" />
-  </div>
-</template>
diff --git a/packages/vite/src/app/components/modules/PathSelector.vue b/packages/vite/src/app/components/modules/PathSelector.vue
new file mode 100644
index 00000000..e8357f9c
--- /dev/null
+++ b/packages/vite/src/app/components/modules/PathSelector.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import type { ModuleListItem, SessionContext } from '~~/shared/types'
+import { hideAllPoppers, Menu as VMenu } from 'floating-vue'
+import { computed, watch } from 'vue'
+import { useModulePathSelector } from '~/composables/moduleGraph'
+
+const props = defineProps<{
+  session: SessionContext
+  modules: ModuleListItem[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'select', nodes: { start: string, end: string }): void
+}>()
+
+const modulesMap = computed(() => {
+  const map = new Map<string, ModuleListItem>()
+  props.modules.forEach((m) => {
+    map.set(m.id, m)
+  })
+  return map
+})
+
+const startSelector = useModulePathSelector({
+  getModules: () => {
+    if (!startSelector.state.value.search) {
+      return props.modules
+    }
+    else {
+      return startSelector.fuse.value!.value?.search(startSelector.state.value.search).map(r => r.item) ?? []
+    }
+  },
+})
+
+startSelector.initSelector(computed(() => props.modules))
+
+function getAllImports(moduleId: string, visited = new Set<string>()): ModuleListItem[] {
+  if (visited.has(moduleId))
+    return []
+  visited.add(moduleId)
+
+  const module = modulesMap.value.get(moduleId)
+  if (!module?.imports?.length)
+    return []
+
+  const res: ModuleListItem[] = []
+
+  for (const importItem of module.imports) {
+    const importedModule = modulesMap.value.get(importItem.module_id)
+    if (!importedModule)
+      continue
+
+    if (!visited.has(importedModule.id)) {
+      res.push(importedModule)
+      res.push(...getAllImports(importedModule.id, visited))
+    }
+  }
+
+  return res
+}
+
+const endSelector = useModulePathSelector({
+  getModules: () => {
+    return startSelector.state.value.selected ? getAllImports(startSelector.state.value.selected) : []
+  },
+})
+
+endSelector.initSelector(endSelector.modules)
+
+const filteredEndModules = computed(() => {
+  if (!endSelector.state.value.search) {
+    return endSelector.modules.value
+  }
+  else {
+    return endSelector.fuse.value!.value?.search(endSelector.state.value.search).map(r => r.item) ?? []
+  }
+})
+
+watch([() => startSelector.state.value.selected, () => endSelector.state.value.selected], () => {
+  emit('select', {
+    start: startSelector.state.value.selected ?? '',
+    end: endSelector.state.value.selected ?? '',
+  })
+})
+</script>
+
+<template>
+  <div h12 px4 p2 relative flex="~ gap2 items-center">
+    <div flex="~ items-center gap2" class="flex-1" min-w-0>
+      <div flex-1 w-0>
+        <div v-if="startSelector.state.value.selected" w-full overflow-hidden flex="~ items-center" border="~ base rounded" p1 relative>
+          <div overflow-hidden text-ellipsis pr6 py0.5 w-0 flex-1>
+            <DisplayModuleId
+              :id="startSelector.state.value.selected"
+              :session="session"
+              block text-nowrap
+              :link="false"
+              :disable-tooltip="true"
+            />
+          </div>
+          <button i-carbon-clean text-4 hover="op100" op50 title="Clear" absolute right-2 @click="startSelector.clear" />
+        </div>
+        <VMenu v-else :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 300, hide: 150 }">
+          <input
+            v-model="startSelector.state.value.search"
+            p1 px4 w-full border="~ base rounded-1" style="outline: none"
+            placeholder="Start"
+            @blur="hideAllPoppers"
+          >
+          <template #popper>
+            <div class="p2 w100" flex="~ col gap2">
+              <ModulesFlatList
+                :session="session"
+                :modules="startSelector.modules.value"
+                disable-tooltip
+                :link="false"
+                @select="startSelector.select"
+              />
+            </div>
+          </template>
+        </VMenu>
+      </div>
+      <div class="i-carbon-arrow-right op50" flex-shrink-0 />
+
+      <div flex-1 w-0>
+        <div v-if="endSelector.state.value.selected" w-full overflow-hidden flex="~ items-center" border="~ base rounded" p1 relative>
+          <div overflow-hidden text-ellipsis pr6 py0.5 w-0 flex-1>
+            <DisplayModuleId
+              :id="endSelector.state.value.selected"
+              :session="session"
+              block text-nowrap
+              :link="false"
+              :disable-tooltip="true"
+            />
+          </div>
+          <button i-carbon-clean text-4 hover="op100" op50 title="Clear" absolute right-2 @click="() => { startSelector.clear() ; endSelector.clear() }" />
+        </div>
+        <VMenu v-else :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 300, hide: 150 }">
+          <input
+            v-model="endSelector.state.value.search"
+            p1 px4 w-full border="~ base rounded-1" style="outline: none"
+            placeholder="End"
+            @blur="hideAllPoppers"
+          >
+          <template #popper>
+            <div class="p2 w100" flex="~ col gap2">
+              <ModulesFlatList
+                v-if="filteredEndModules.length"
+                :session="session"
+                :modules="filteredEndModules"
+                disable-tooltip
+                :link="false"
+                @select="endSelector.select"
+              />
+              <div v-else flex="~ items-center justify-center" w-full h-20>
+                <span italic op50>
+                  {{ startSelector.state.value.selected ? 'No modules' : 'Select a start module to get end modules' }}
+                </span>
+              </div>
+            </div>
+          </template>
+        </VMenu>
+      </div>
+    </div>
+
+    <DisplayCloseButton class="mr--2" @click="emit('close')" />
+  </div>
+</template>
diff --git a/packages/vite/src/app/composables/moduleGraph.ts b/packages/vite/src/app/composables/moduleGraph.ts
index ddb9a084..ea325584 100644
--- a/packages/vite/src/app/composables/moduleGraph.ts
+++ b/packages/vite/src/app/composables/moduleGraph.ts
@@ -1,8 +1,11 @@
+import type { ComputedRefWithControl } from '@vueuse/core'
 import type { HierarchyLink, HierarchyNode } from 'd3-hierarchy'
 import type { ComputedRef, InjectionKey, MaybeRef, Ref, ShallowReactive, ShallowRef } from 'vue'
-import { onKeyPressed, useEventListener, useMagicKeys } from '@vueuse/core'
+import type { ModuleListItem } from '~~/shared/types'
+import { computedWithControl, onKeyPressed, useEventListener, useMagicKeys } from '@vueuse/core'
 import { hierarchy, tree } from 'd3-hierarchy'
 import { linkHorizontal, linkVertical } from 'd3-shape'
+import Fuse from 'fuse.js'
 import { computed, inject, nextTick, provide, ref, shallowReactive, shallowRef, unref } from 'vue'
 import { useZoomElement } from './zoomElement'
 
@@ -352,3 +355,48 @@ export function useGraphDraggingScroll() {
     isGrabbing,
   }
 }
+
+export function useModulePathSelector(options: {
+  getModules: () => ModuleListItem[]
+}) {
+  const state = ref<{
+    search: string
+    selected: string | null
+  }>({
+    search: '',
+    selected: null,
+  })
+  const fuse = ref<ComputedRefWithControl<Fuse<ModuleListItem>>>()
+
+  const modules = computed(options.getModules)
+
+  function initSelector(modules: ComputedRef<ModuleListItem[]>) {
+    fuse.value = computedWithControl(
+      modules,
+      () => new Fuse(modules.value, {
+        includeScore: true,
+        keys: ['id'],
+        ignoreLocation: true,
+        threshold: 0.4,
+      }),
+    )
+  }
+
+  function select(node: ModuleListItem) {
+    state.value.selected = node.id
+    state.value.search = ''
+  }
+
+  function clear() {
+    state.value.selected = null
+  }
+
+  return {
+    state,
+    modules,
+    fuse,
+    initSelector,
+    select,
+    clear,
+  }
+}
diff --git a/packages/vite/src/app/pages/session/[session]/graph/index.vue b/packages/vite/src/app/pages/session/[session]/graph/index.vue
index 884f4bd9..9954de76 100644
--- a/packages/vite/src/app/pages/session/[session]/graph/index.vue
+++ b/packages/vite/src/app/pages/session/[session]/graph/index.vue
@@ -205,7 +205,7 @@ function toggleNavigator(state: boolean) {
     <div absolute left-4 top-4 z-panel-nav>
       <DataSearchPanel v-model="searchValue" :rules="searchFilterTypes">
         <template v-if="navigatorVisible" #search>
-          <ModulesGraphNavigator :session="session" :modules="searched" @select="selectNavigatorNodes" @close="toggleNavigator(false)" />
+          <ModulesPathSelector :session="session" :modules="searched" @select="selectNavigatorNodes" @close="toggleNavigator(false)" />
         </template>
         <template #search-end>
           <div v-if="settings.moduleGraphViewType === 'graph'" h12 mr2 flex="~ items-center">

From 247c4478218af8d397b79d183be411acebbac6d5 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Mon, 1 Dec 2025 22:30:54 +0800
Subject: [PATCH 5/7] refactor: component

---
 .../app/components/modules/PathSelector.vue   | 95 +++++--------------
 .../components/modules/PathSelectorItem.vue   | 65 +++++++++++++
 .../vite/src/app/composables/moduleGraph.ts   | 11 ++-
 3 files changed, 98 insertions(+), 73 deletions(-)
 create mode 100644 packages/vite/src/app/components/modules/PathSelectorItem.vue

diff --git a/packages/vite/src/app/components/modules/PathSelector.vue b/packages/vite/src/app/components/modules/PathSelector.vue
index e8357f9c..098e82ce 100644
--- a/packages/vite/src/app/components/modules/PathSelector.vue
+++ b/packages/vite/src/app/components/modules/PathSelector.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { ModuleListItem, SessionContext } from '~~/shared/types'
-import { hideAllPoppers, Menu as VMenu } from 'floating-vue'
 import { computed, watch } from 'vue'
 import { useModulePathSelector } from '~/composables/moduleGraph'
 
@@ -88,80 +87,32 @@ watch([() => startSelector.state.value.selected, () => endSelector.state.value.s
 <template>
   <div h12 px4 p2 relative flex="~ gap2 items-center">
     <div flex="~ items-center gap2" class="flex-1" min-w-0>
-      <div flex-1 w-0>
-        <div v-if="startSelector.state.value.selected" w-full overflow-hidden flex="~ items-center" border="~ base rounded" p1 relative>
-          <div overflow-hidden text-ellipsis pr6 py0.5 w-0 flex-1>
-            <DisplayModuleId
-              :id="startSelector.state.value.selected"
-              :session="session"
-              block text-nowrap
-              :link="false"
-              :disable-tooltip="true"
-            />
-          </div>
-          <button i-carbon-clean text-4 hover="op100" op50 title="Clear" absolute right-2 @click="startSelector.clear" />
-        </div>
-        <VMenu v-else :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 300, hide: 150 }">
-          <input
-            v-model="startSelector.state.value.search"
-            p1 px4 w-full border="~ base rounded-1" style="outline: none"
-            placeholder="Start"
-            @blur="hideAllPoppers"
-          >
-          <template #popper>
-            <div class="p2 w100" flex="~ col gap2">
-              <ModulesFlatList
-                :session="session"
-                :modules="startSelector.modules.value"
-                disable-tooltip
-                :link="false"
-                @select="startSelector.select"
-              />
-            </div>
-          </template>
-        </VMenu>
-      </div>
+      <ModulesPathSelectorItem
+        v-model:search="startSelector.state.value.search"
+        placeholder="Start"
+        :selector="startSelector"
+        :session="session"
+        :modules="startSelector.modules.value"
+        @clear="() => { startSelector.clear(); endSelector.clear() }"
+      />
       <div class="i-carbon-arrow-right op50" flex-shrink-0 />
 
-      <div flex-1 w-0>
-        <div v-if="endSelector.state.value.selected" w-full overflow-hidden flex="~ items-center" border="~ base rounded" p1 relative>
-          <div overflow-hidden text-ellipsis pr6 py0.5 w-0 flex-1>
-            <DisplayModuleId
-              :id="endSelector.state.value.selected"
-              :session="session"
-              block text-nowrap
-              :link="false"
-              :disable-tooltip="true"
-            />
+      <ModulesPathSelectorItem
+        v-model:search="endSelector.state.value.search"
+        placeholder="End"
+        :selector="endSelector"
+        :session="session"
+        :modules="filteredEndModules"
+        @clear="endSelector.clear"
+      >
+        <template #empty>
+          <div flex="~ items-center justify-center" w-full h-20>
+            <span italic op50>
+              {{ startSelector.state.value.selected ? 'No modules' : 'Select a start module to get end modules' }}
+            </span>
           </div>
-          <button i-carbon-clean text-4 hover="op100" op50 title="Clear" absolute right-2 @click="() => { startSelector.clear() ; endSelector.clear() }" />
-        </div>
-        <VMenu v-else :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 300, hide: 150 }">
-          <input
-            v-model="endSelector.state.value.search"
-            p1 px4 w-full border="~ base rounded-1" style="outline: none"
-            placeholder="End"
-            @blur="hideAllPoppers"
-          >
-          <template #popper>
-            <div class="p2 w100" flex="~ col gap2">
-              <ModulesFlatList
-                v-if="filteredEndModules.length"
-                :session="session"
-                :modules="filteredEndModules"
-                disable-tooltip
-                :link="false"
-                @select="endSelector.select"
-              />
-              <div v-else flex="~ items-center justify-center" w-full h-20>
-                <span italic op50>
-                  {{ startSelector.state.value.selected ? 'No modules' : 'Select a start module to get end modules' }}
-                </span>
-              </div>
-            </div>
-          </template>
-        </VMenu>
-      </div>
+        </template>
+      </ModulesPathSelectorItem>
     </div>
 
     <DisplayCloseButton class="mr--2" @click="emit('close')" />
diff --git a/packages/vite/src/app/components/modules/PathSelectorItem.vue b/packages/vite/src/app/components/modules/PathSelectorItem.vue
new file mode 100644
index 00000000..c3f253fc
--- /dev/null
+++ b/packages/vite/src/app/components/modules/PathSelectorItem.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { ModuleListItem, SessionContext } from '~~/shared/types'
+import type { ModulePathSelector } from '~/composables/moduleGraph'
+import { hideAllPoppers, Menu as VMenu } from 'floating-vue'
+
+withDefaults(
+  defineProps<{
+    selector: ModulePathSelector
+    placeholder: string
+    session: SessionContext
+    modules?: ModuleListItem[]
+    emptyStateText?: string
+    onClear?: () => void
+  }>(),
+  {
+    modules: undefined,
+    emptyStateText: undefined,
+    onClear: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'clear'): void
+}>()
+
+const search = defineModel<string>('search', { required: true })
+</script>
+
+<template>
+  <div flex-1 w-0>
+    <div v-if="selector.state.value.selected" w-full overflow-hidden flex="~ items-center" border="~ base rounded" p1 relative>
+      <div overflow-hidden text-ellipsis pr6 py0.5 w-0 flex-1>
+        <DisplayModuleId
+          :id="selector.state.value.selected"
+          :session="session"
+          block text-nowrap
+          :link="false"
+          :disable-tooltip="true"
+        />
+      </div>
+      <button i-carbon-clean text-4 hover="op100" op50 title="Clear" absolute right-2 @click="emit('clear')" />
+    </div>
+    <VMenu v-else :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 300, hide: 150 }">
+      <input
+        v-model="search"
+        p1
+        px4 w-full border="~ base rounded-1" style="outline: none" :placeholder="placeholder"
+        @blur="hideAllPoppers"
+      >
+      <template #popper>
+        <div class="p2 w100" flex="~ col gap2">
+          <ModulesFlatList
+            v-if="modules?.length"
+            :session="session"
+            :modules="modules"
+            disable-tooltip
+            :link="false"
+            @select="selector.select"
+          />
+          <slot v-else name="empty" />
+        </div>
+      </template>
+    </VMenu>
+  </div>
+</template>
diff --git a/packages/vite/src/app/composables/moduleGraph.ts b/packages/vite/src/app/composables/moduleGraph.ts
index ea325584..da05b6e4 100644
--- a/packages/vite/src/app/composables/moduleGraph.ts
+++ b/packages/vite/src/app/composables/moduleGraph.ts
@@ -356,9 +356,18 @@ export function useGraphDraggingScroll() {
   }
 }
 
+export interface ModulePathSelector {
+  state: { value: { search: string, selected: string | null } }
+  modules: ComputedRef<ModuleListItem[]>
+  fuse: Ref<ComputedRefWithControl<Fuse<ModuleListItem>> | undefined>
+  initSelector: (modules: ComputedRef<ModuleListItem[]>) => void
+  select: (module: ModuleListItem) => void
+  clear: () => void
+}
+
 export function useModulePathSelector(options: {
   getModules: () => ModuleListItem[]
-}) {
+}): ModulePathSelector {
   const state = ref<{
     search: string
     selected: string | null

From ece333d9f5e342802ac80d337ca818fa211dbe67 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Mon, 1 Dec 2025 22:35:00 +0800
Subject: [PATCH 6/7] chore: rename

---
 .../pages/session/[session]/graph/index.vue   | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/vite/src/app/pages/session/[session]/graph/index.vue b/packages/vite/src/app/pages/session/[session]/graph/index.vue
index 9954de76..40a7e641 100644
--- a/packages/vite/src/app/pages/session/[session]/graph/index.vue
+++ b/packages/vite/src/app/pages/session/[session]/graph/index.vue
@@ -16,14 +16,14 @@ const props = defineProps<{
 
 const route = useRoute()
 const router = useRouter()
-const navigatorVisible = ref(true)
-const navigatorNode = ref({
+const pathSelectorVisible = ref(true)
+const pathNodes = ref({
   start: '',
   end: '',
 })
 
-function selectNavigatorNodes(nodes: { start: string, end: string }) {
-  navigatorNode.value = {
+function selectPathNodes(nodes: { start: string, end: string }) {
+  pathNodes.value = {
     start: nodes.start,
     end: nodes.end,
   }
@@ -128,7 +128,7 @@ const searched = computed(() => {
 })
 
 const filteredGraph = computed(() => {
-  const { start, end } = navigatorNode.value
+  const { start, end } = pathNodes.value
   if (!start && !end)
     return searched.value
 
@@ -194,8 +194,8 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
   settings.value.moduleGraphViewType = type
 }
 
-function toggleNavigator(state: boolean) {
-  navigatorVisible.value = state
+function togglePathSelector(state: boolean) {
+  pathSelectorVisible.value = state
   searchValue.value.search = state ? false : ''
 }
 </script>
@@ -204,14 +204,14 @@ function toggleNavigator(state: boolean) {
   <div relative max-h-screen of-hidden>
     <div absolute left-4 top-4 z-panel-nav>
       <DataSearchPanel v-model="searchValue" :rules="searchFilterTypes">
-        <template v-if="navigatorVisible" #search>
-          <ModulesPathSelector :session="session" :modules="searched" @select="selectNavigatorNodes" @close="toggleNavigator(false)" />
+        <template v-if="pathSelectorVisible" #search>
+          <ModulesPathSelector :session="session" :modules="searched" @select="selectPathNodes" @close="togglePathSelector(false)" />
         </template>
         <template #search-end>
           <div v-if="settings.moduleGraphViewType === 'graph'" h12 mr2 flex="~ items-center">
             <button
               w-8 h-8 rounded-full flex items-center justify-center
-              hover="bg-active op100" op50 title="Module Navigator" @click="toggleNavigator(true)"
+              hover="bg-active op100" op50 title="Module Navigator" @click="togglePathSelector(true)"
             >
               <i i-ri:route-line flex />
             </button>

From 5f7e76cdc12f64b5aa3ca078c3d90576c0706bba Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Mon, 1 Dec 2025 22:47:30 +0800
Subject: [PATCH 7/7] chore: update

---
 packages/vite/src/app/pages/session/[session]/graph/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/app/pages/session/[session]/graph/index.vue b/packages/vite/src/app/pages/session/[session]/graph/index.vue
index 86b360b3..68cc03f4 100644
--- a/packages/vite/src/app/pages/session/[session]/graph/index.vue
+++ b/packages/vite/src/app/pages/session/[session]/graph/index.vue
@@ -16,7 +16,7 @@ const props = defineProps<{
 
 const route = useRoute()
 const router = useRouter()
-const pathSelectorVisible = ref(true)
+const pathSelectorVisible = ref(false)
 const pathNodes = ref({
   start: '',
   end: '',