From 0d6ebde49b56050d19a115c2f936a6199b66ce4a Mon Sep 17 00:00:00 2001
From: liangmiQwQ <mi_yyds@126.com>
Date: Sun, 17 Aug 2025 08:43:13 +0800
Subject: [PATCH 01/12] feat: add imports display

---
 .../src/app/components/data/ChunkDetails.vue     | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/devtools-vite/src/app/components/data/ChunkDetails.vue b/packages/devtools-vite/src/app/components/data/ChunkDetails.vue
index d3a2879e..1bc57233 100644
--- a/packages/devtools-vite/src/app/components/data/ChunkDetails.vue
+++ b/packages/devtools-vite/src/app/components/data/ChunkDetails.vue
@@ -6,8 +6,10 @@ withDefaults(defineProps<{
   chunk: ChunkInfo
   session: SessionContext
   showModules?: boolean
+  showImports?: boolean
 }>(), {
   showModules: true,
+  showImports: true,
 })
 </script>
 
@@ -28,12 +30,14 @@ withDefaults(defineProps<{
     </div>
 
     <!-- TODO -->
-    <!-- <div op50>
-      Imports
-    </div>
-    <div flex="~ col gap-1" ws-nowrap>
-      {{ chunk.imports }}
-    </div> -->
+    <template v-if="showImports && chunk.imports.length > 0">
+      <div op50>
+        Imports
+      </div>
+      <div flex="~ col gap-1" ws-nowrap>
+        {{ chunk.imports }}
+      </div>
+    </template>
 
     <template v-if="showModules">
       <div op50>

From bbe7e6a02c21d769ef0a88b9adfd0882e49278a1 Mon Sep 17 00:00:00 2001
From: liangmiQwQ <mi_yyds@126.com>
Date: Sun, 17 Aug 2025 17:26:54 +0800
Subject: [PATCH 02/12] feat: add ChunkImport transfer

---
 .../src/app/components/data/AssetDetails.vue  |  1 +
 .../src/app/components/data/ChunkDetails.vue  |  9 ++++
 .../app/components/display/ChunkImports.vue   | 48 +++++++++++++++++++
 .../rpc/functions/rolldown-get-chunk-by-id.ts | 16 +++++++
 packages/devtools-vite/src/node/rpc/index.ts  |  2 +
 5 files changed, 76 insertions(+)
 create mode 100644 packages/devtools-vite/src/app/components/display/ChunkImports.vue
 create mode 100644 packages/devtools-vite/src/node/rpc/functions/rolldown-get-chunk-by-id.ts

diff --git a/packages/devtools-vite/src/app/components/data/AssetDetails.vue b/packages/devtools-vite/src/app/components/data/AssetDetails.vue
index b1ced23d..408d6a07 100644
--- a/packages/devtools-vite/src/app/components/data/AssetDetails.vue
+++ b/packages/devtools-vite/src/app/components/data/AssetDetails.vue
@@ -115,6 +115,7 @@ function openInEditor() {
             :chunk="chunk"
             :session="session"
             :show-modules="false"
+            :show-imports="false"
           />
         </div>
       </div>
diff --git a/packages/devtools-vite/src/app/components/data/ChunkDetails.vue b/packages/devtools-vite/src/app/components/data/ChunkDetails.vue
index 1bc57233..ff7e06c9 100644
--- a/packages/devtools-vite/src/app/components/data/ChunkDetails.vue
+++ b/packages/devtools-vite/src/app/components/data/ChunkDetails.vue
@@ -35,6 +35,15 @@ withDefaults(defineProps<{
         Imports
       </div>
       <div flex="~ col gap-1" ws-nowrap>
+        <!-- TODO -->
+        <DisplayChunkImports
+          v-for="(importChunk, index) in chunk.imports"
+          :key="index"
+          :chunk-import="importChunk"
+          :session="session"
+          hover="bg-active"
+          border="~ base rounded" px2 py1 w-full
+        />
         {{ chunk.imports }}
       </div>
     </template>
diff --git a/packages/devtools-vite/src/app/components/display/ChunkImports.vue b/packages/devtools-vite/src/app/components/display/ChunkImports.vue
new file mode 100644
index 00000000..1ba23bfd
--- /dev/null
+++ b/packages/devtools-vite/src/app/components/display/ChunkImports.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import type { ChunkImport } from '@rolldown/debug'
+import type { SessionContext } from '../../../shared/types/data'
+import { useAsyncState } from '@vueuse/core'
+import { useRpc } from '../../../modules/rpc/runtime/composables/rpc'
+
+const props = defineProps<{
+  chunkImport: ChunkImport
+  session: SessionContext
+}>()
+
+const rpc = useRpc()
+const { state: chunk } = useAsyncState(
+  async () => {
+    return await rpc.value!['vite:rolldown:get-chunk-by-id']?.({
+      session: props.session.id,
+      id: props.chunkImport.chunk_id,
+    })
+  },
+  null,
+)
+</script>
+
+<template>
+  <!-- <VisualLoading /> -->
+  <template v-if="chunk">
+    <div flex="~ gap-4 items-center">
+      <div flex="~ gap-2 items-center" :title="`Chunk #${chunk.chunk_id}`">
+        <div />
+        <div>{{ chunk.name || '[unnamed]' }}</div>
+        <DisplayBadge :text="chunk.reason" />
+      </div>
+      <div flex-auto />
+      <span op50 font-mono>#{{ chunk.chunk_id }}</span>
+      <div flex="~ gap-1 items-center">
+        <div i-ph-package-duotone />
+        {{ chunk.modules.length }}
+      </div>
+    </div>
+  </template>
+  <div v-else>
+    {{ chunk }}
+  </div>
+</template>
+
+<style>
+
+</style>
diff --git a/packages/devtools-vite/src/node/rpc/functions/rolldown-get-chunk-by-id.ts b/packages/devtools-vite/src/node/rpc/functions/rolldown-get-chunk-by-id.ts
new file mode 100644
index 00000000..bf1ca8be
--- /dev/null
+++ b/packages/devtools-vite/src/node/rpc/functions/rolldown-get-chunk-by-id.ts
@@ -0,0 +1,16 @@
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+import { getLogsManager } from '../utils'
+
+export const rolldownGetChunkByID = defineRpcFunction({
+  name: 'vite:rolldown:get-chunk-by-id',
+  type: 'query',
+  setup: (context) => {
+    const manager = getLogsManager(context)
+    return {
+      handler: async ({ session, id }: { session: string, id: number }) => {
+        const reader = await manager.loadSession(session)
+        return reader.manager.chunks.get(id)
+      },
+    }
+  },
+})
diff --git a/packages/devtools-vite/src/node/rpc/index.ts b/packages/devtools-vite/src/node/rpc/index.ts
index 8236cda4..a7143ff6 100644
--- a/packages/devtools-vite/src/node/rpc/index.ts
+++ b/packages/devtools-vite/src/node/rpc/index.ts
@@ -4,6 +4,7 @@ import { openInEditor } from './functions/open-in-editor'
 import { openInFinder } from './functions/open-in-finder'
 import { rolldownGetAssetDetails } from './functions/rolldown-get-asset-details'
 import { rolldownGetAssetsList } from './functions/rolldown-get-assets-list'
+import { rolldownGetChunkByID } from './functions/rolldown-get-chunk-by-id'
 import { rolldownGetChunksGraph } from './functions/rolldown-get-chunks-graph'
 import { rolldownGetModuleInfo } from './functions/rolldown-get-module-info'
 import { rolldownGetModuleRawEvents } from './functions/rolldown-get-module-raw-events'
@@ -27,6 +28,7 @@ export const rpcFunctions = [
   rolldownGetAssetsList,
   rolldownGetAssetDetails,
   rolldownGetPluginDetails,
+  rolldownGetChunkByID,
 ] as const
 
 export type ServerFunctions = RpcDefinitionsToFunctions<typeof rpcFunctions>

From a0f5f688ea6c2d00b60260eeb828555776eb75b1 Mon Sep 17 00:00:00 2001
From: liangmiQwQ <mi_yyds@126.com>
Date: Mon, 18 Aug 2025 10:37:55 +0800
Subject: [PATCH 03/12] chore: added info displays

---
 .../src/app/components/data/ChunkDetails.vue  |  8 +++++-
 .../app/components/display/ChunkImports.vue   | 25 ++++++++++++++++---
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/packages/devtools-vite/src/app/components/data/ChunkDetails.vue b/packages/devtools-vite/src/app/components/data/ChunkDetails.vue
index ff7e06c9..3924845f 100644
--- a/packages/devtools-vite/src/app/components/data/ChunkDetails.vue
+++ b/packages/devtools-vite/src/app/components/data/ChunkDetails.vue
@@ -15,14 +15,20 @@ withDefaults(defineProps<{
 
 <template>
   <div flex="~ col gap-3">
-    <div flex="~ gap-4 items-center">
+    <div flex="~ gap-3 items-center">
       <div flex="~ gap-2 items-center" :title="`Chunk #${chunk.chunk_id}`">
         <div i-ph-shapes-duotone />
         <div>{{ chunk.name || '[unnamed]' }}</div>
         <DisplayBadge :text="chunk.reason" />
       </div>
+
       <div flex-auto />
+
       <span op50 font-mono>#{{ chunk.chunk_id }}</span>
+      <div flex="~ gap-1 items-center">
+        <div i-carbon-document-import />
+        {{ chunk.imports.length }}
+      </div>
       <div flex="~ gap-1 items-center">
         <div i-ph-package-duotone />
         {{ chunk.modules.length }}
diff --git a/packages/devtools-vite/src/app/components/display/ChunkImports.vue b/packages/devtools-vite/src/app/components/display/ChunkImports.vue
index 1ba23bfd..d2393278 100644
--- a/packages/devtools-vite/src/app/components/display/ChunkImports.vue
+++ b/packages/devtools-vite/src/app/components/display/ChunkImports.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { ChunkImport } from '@rolldown/debug'
 import type { SessionContext } from '../../../shared/types/data'
+import { useRoute } from '#app/composables/router'
 import { useAsyncState } from '@vueuse/core'
 import { useRpc } from '../../../modules/rpc/runtime/composables/rpc'
 
@@ -8,6 +9,7 @@ const props = defineProps<{
   chunkImport: ChunkImport
   session: SessionContext
 }>()
+const route = useRoute()
 
 const rpc = useRpc()
 const { state: chunk } = useAsyncState(
@@ -23,21 +25,36 @@ const { state: chunk } = useAsyncState(
 
 <template>
   <!-- <VisualLoading /> -->
-  <template v-if="chunk">
-    <div flex="~ gap-4 items-center">
+  <NuxtLink
+    v-if="chunk"
+    :to="{ path: route.path, query: { a: '1' } }"
+  >
+    <div flex="~ gap-3 items-center">
+      <!-- Icon, Name, Reason -->
       <div flex="~ gap-2 items-center" :title="`Chunk #${chunk.chunk_id}`">
-        <div />
+        <div v-if="chunkImport.kind === 'import-statement'" i-ph-file-duotone />
+        <div v-if="chunkImport.kind === 'dynamic-import'" i-ph-lightning-duotone />
         <div>{{ chunk.name || '[unnamed]' }}</div>
         <DisplayBadge :text="chunk.reason" />
+
+        <!-- Import Kind -->
+        <DisplayBadge v-if="chunkImport.kind === 'import-statement'" text="statement" :color="210" />
+        <DisplayBadge v-if="chunkImport.kind === 'dynamic-import'" text="dynamic" :color="30" />
       </div>
+
       <div flex-auto />
+
       <span op50 font-mono>#{{ chunk.chunk_id }}</span>
+      <div flex="~ gap-1 items-center">
+        <div i-carbon-document-import />
+        {{ chunk.imports.length }}
+      </div>
       <div flex="~ gap-1 items-center">
         <div i-ph-package-duotone />
         {{ chunk.modules.length }}
       </div>
     </div>
-  </template>
+  </NuxtLink>
   <div v-else>
     {{ chunk }}
   </div>

From 9c51dd3ca4ad87b2c405854a7cab73ddf3bd6eec Mon Sep 17 00:00:00 2001
From: liangmiQwQ <mi_yyds@126.com>
Date: Mon, 18 Aug 2025 12:34:32 +0800
Subject: [PATCH 04/12] chore: adjust ui

---
 .../src/app/components/data/ChunkDetails.vue  |  1 -
 .../app/components/display/ChunkImports.vue   | 20 ++++++++++---------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/devtools-vite/src/app/components/data/ChunkDetails.vue b/packages/devtools-vite/src/app/components/data/ChunkDetails.vue
index 3924845f..35faf821 100644
--- a/packages/devtools-vite/src/app/components/data/ChunkDetails.vue
+++ b/packages/devtools-vite/src/app/components/data/ChunkDetails.vue
@@ -50,7 +50,6 @@ withDefaults(defineProps<{
           hover="bg-active"
           border="~ base rounded" px2 py1 w-full
         />
-        {{ chunk.imports }}
       </div>
     </template>
 
diff --git a/packages/devtools-vite/src/app/components/display/ChunkImports.vue b/packages/devtools-vite/src/app/components/display/ChunkImports.vue
index d2393278..fbae7ccc 100644
--- a/packages/devtools-vite/src/app/components/display/ChunkImports.vue
+++ b/packages/devtools-vite/src/app/components/display/ChunkImports.vue
@@ -29,7 +29,7 @@ const { state: chunk } = useAsyncState(
     v-if="chunk"
     :to="{ path: route.path, query: { a: '1' } }"
   >
-    <div flex="~ gap-3 items-center">
+    <div flex="~ items-center">
       <!-- Icon, Name, Reason -->
       <div flex="~ gap-2 items-center" :title="`Chunk #${chunk.chunk_id}`">
         <div v-if="chunkImport.kind === 'import-statement'" i-ph-file-duotone />
@@ -44,14 +44,16 @@ const { state: chunk } = useAsyncState(
 
       <div flex-auto />
 
-      <span op50 font-mono>#{{ chunk.chunk_id }}</span>
-      <div flex="~ gap-1 items-center">
-        <div i-carbon-document-import />
-        {{ chunk.imports.length }}
-      </div>
-      <div flex="~ gap-1 items-center">
-        <div i-ph-package-duotone />
-        {{ chunk.modules.length }}
+      <div text-sm flex="~ items-center gap-2">
+        <span op50 font-mono>#{{ chunk.chunk_id }}</span>
+        <div flex="~ gap-1 items-center">
+          <div i-carbon-document-import />
+          {{ chunk.imports.length }}
+        </div>
+        <div flex="~ gap-1 items-center">
+          <div i-ph-package-duotone />
+          {{ chunk.modules.length }}
+        </div>
       </div>
     </div>
   </NuxtLink>

From 3ce64191c5e40217978fd461bf9253137cd4c804 Mon Sep 17 00:00:00 2001
From: liangmiQwQ <mi_yyds@126.com>
Date: Mon, 18 Aug 2025 13:20:32 +0800
Subject: [PATCH 05/12] refactor: adjust element struct

---
 .../app/components/display/ChunkImports.vue   | 54 ++++++++-----------
 1 file changed, 22 insertions(+), 32 deletions(-)

diff --git a/packages/devtools-vite/src/app/components/display/ChunkImports.vue b/packages/devtools-vite/src/app/components/display/ChunkImports.vue
index fbae7ccc..f402d0c4 100644
--- a/packages/devtools-vite/src/app/components/display/ChunkImports.vue
+++ b/packages/devtools-vite/src/app/components/display/ChunkImports.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { ChunkImport } from '@rolldown/debug'
 import type { SessionContext } from '../../../shared/types/data'
-import { useRoute } from '#app/composables/router'
 import { useAsyncState } from '@vueuse/core'
 import { useRpc } from '../../../modules/rpc/runtime/composables/rpc'
 
@@ -9,7 +8,6 @@ const props = defineProps<{
   chunkImport: ChunkImport
   session: SessionContext
 }>()
-const route = useRoute()
 
 const rpc = useRpc()
 const { state: chunk } = useAsyncState(
@@ -25,40 +23,32 @@ const { state: chunk } = useAsyncState(
 
 <template>
   <!-- <VisualLoading /> -->
-  <NuxtLink
-    v-if="chunk"
-    :to="{ path: route.path, query: { a: '1' } }"
-  >
-    <div flex="~ items-center">
-      <!-- Icon, Name, Reason -->
-      <div flex="~ gap-2 items-center" :title="`Chunk #${chunk.chunk_id}`">
-        <div v-if="chunkImport.kind === 'import-statement'" i-ph-file-duotone />
-        <div v-if="chunkImport.kind === 'dynamic-import'" i-ph-lightning-duotone />
-        <div>{{ chunk.name || '[unnamed]' }}</div>
-        <DisplayBadge :text="chunk.reason" />
-
-        <!-- Import Kind -->
-        <DisplayBadge v-if="chunkImport.kind === 'import-statement'" text="statement" :color="210" />
-        <DisplayBadge v-if="chunkImport.kind === 'dynamic-import'" text="dynamic" :color="30" />
-      </div>
+  <div v-if="chunk" flex="~ items-center">
+    <!-- Icon, Name, Reason -->
+    <div flex="~ gap-2 items-center" :title="`Chunk #${chunk.chunk_id}`">
+      <div v-if="chunkImport.kind === 'import-statement'" i-ph-file-duotone />
+      <div v-if="chunkImport.kind === 'dynamic-import'" i-ph-lightning-duotone />
+      <div>{{ chunk.name || '[unnamed]' }}</div>
+      <DisplayBadge :text="chunk.reason" />
+
+      <!-- Import Kind -->
+      <DisplayBadge v-if="chunkImport.kind === 'import-statement'" text="statement" :color="210" />
+      <DisplayBadge v-if="chunkImport.kind === 'dynamic-import'" text="dynamic" :color="30" />
+    </div>
 
-      <div flex-auto />
+    <div flex-auto />
 
-      <div text-sm flex="~ items-center gap-2">
-        <span op50 font-mono>#{{ chunk.chunk_id }}</span>
-        <div flex="~ gap-1 items-center">
-          <div i-carbon-document-import />
-          {{ chunk.imports.length }}
-        </div>
-        <div flex="~ gap-1 items-center">
-          <div i-ph-package-duotone />
-          {{ chunk.modules.length }}
-        </div>
+    <div text-sm flex="~ items-center gap-2">
+      <span op50 font-mono>#{{ chunk.chunk_id }}</span>
+      <div flex="~ gap-1 items-center">
+        <div i-carbon-document-import />
+        {{ chunk.imports.length }}
+      </div>
+      <div flex="~ gap-1 items-center">
+        <div i-ph-package-duotone />
+        {{ chunk.modules.length }}
       </div>
     </div>
-  </NuxtLink>
-  <div v-else>
-    {{ chunk }}
   </div>
 </template>
 

From 3a03f49a4eea48bf2276a586beed614de97c2349 Mon Sep 17 00:00:00 2001
From: liangmiQwQ <mi_yyds@126.com>
Date: Mon, 18 Aug 2025 14:56:14 +0800
Subject: [PATCH 06/12] chore: remove todos

---
 packages/devtools-vite/src/app/components/data/ChunkDetails.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/devtools-vite/src/app/components/data/ChunkDetails.vue b/packages/devtools-vite/src/app/components/data/ChunkDetails.vue
index 35faf821..0eaeedaa 100644
--- a/packages/devtools-vite/src/app/components/data/ChunkDetails.vue
+++ b/packages/devtools-vite/src/app/components/data/ChunkDetails.vue
@@ -35,13 +35,11 @@ withDefaults(defineProps<{
       </div>
     </div>
 
-    <!-- TODO -->
     <template v-if="showImports && chunk.imports.length > 0">
       <div op50>
         Imports
       </div>
       <div flex="~ col gap-1" ws-nowrap>
-        <!-- TODO -->
         <DisplayChunkImports
           v-for="(importChunk, index) in chunk.imports"
           :key="index"

From d08a34dff1964794533adc7faf3c7dc1ebb587d9 Mon Sep 17 00:00:00 2001
From: liangmiQwQ <mi_yyds@126.com>
Date: Wed, 20 Aug 2025 22:15:59 +0800
Subject: [PATCH 07/12] feat: add basic ChunkDetailsLoader

---
 .../src/app/components/data/ChunkDetails.vue  |  1 +
 .../components/data/ChunkDetailsLoader.vue    | 43 +++++++++++++++++++
 .../app/components/display/ChunkImports.vue   | 10 +++--
 .../src/app/pages/session/[session].vue       | 24 +++++++++++
 4 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 packages/devtools-vite/src/app/components/data/ChunkDetailsLoader.vue

diff --git a/packages/devtools-vite/src/app/components/data/ChunkDetails.vue b/packages/devtools-vite/src/app/components/data/ChunkDetails.vue
index 0eaeedaa..b6ebfb97 100644
--- a/packages/devtools-vite/src/app/components/data/ChunkDetails.vue
+++ b/packages/devtools-vite/src/app/components/data/ChunkDetails.vue
@@ -45,6 +45,7 @@ withDefaults(defineProps<{
           :key="index"
           :chunk-import="importChunk"
           :session="session"
+          :importer="chunk"
           hover="bg-active"
           border="~ base rounded" px2 py1 w-full
         />
diff --git a/packages/devtools-vite/src/app/components/data/ChunkDetailsLoader.vue b/packages/devtools-vite/src/app/components/data/ChunkDetailsLoader.vue
new file mode 100644
index 00000000..ef78176e
--- /dev/null
+++ b/packages/devtools-vite/src/app/components/data/ChunkDetailsLoader.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { SessionContext } from '../../../shared/types/data'
+import { useRpc } from '#imports'
+import { useAsyncState } from '@vueuse/core'
+
+const props = defineProps<{
+  chunk: number
+  session: SessionContext
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const rpc = useRpc()
+const { state, isLoading } = useAsyncState(
+  async () => {
+    return await rpc.value!['vite:rolldown:get-chunk-by-id']?.({
+      session: props.session.id,
+      id: props.chunk,
+    })
+  },
+  null,
+)
+</script>
+
+<template>
+  <VisualLoading v-if="isLoading" />
+
+  <div v-if="state" p4 pt-0 relative h-full w-full of-auto z-panel-content>
+    <DisplayCloseButton
+      absolute right-2 top-1.5
+      @click="emit('close')"
+    />
+    <span op50 min-h-12 flex="~ items-center">
+      Import by
+      <NuxtLink font-mono :to="{ query: { chunk: 1 } }">
+        #1
+      </NuxtLink>
+    </span>
+    <DataChunkDetails :session="session" :chunk="state" />
+  </div>
+</template>
diff --git a/packages/devtools-vite/src/app/components/display/ChunkImports.vue b/packages/devtools-vite/src/app/components/display/ChunkImports.vue
index f402d0c4..dd61dccc 100644
--- a/packages/devtools-vite/src/app/components/display/ChunkImports.vue
+++ b/packages/devtools-vite/src/app/components/display/ChunkImports.vue
@@ -1,14 +1,18 @@
 <script lang="ts" setup>
-import type { ChunkImport } from '@rolldown/debug'
+import type { ChunkImport, Chunk as ChunkInfo } from '@rolldown/debug'
 import type { SessionContext } from '../../../shared/types/data'
+import { useRoute } from '#app/composables/router'
 import { useAsyncState } from '@vueuse/core'
 import { useRpc } from '../../../modules/rpc/runtime/composables/rpc'
 
 const props = defineProps<{
   chunkImport: ChunkImport
   session: SessionContext
+  importer: ChunkInfo
 }>()
 
+const route = useRoute()
+
 const rpc = useRpc()
 const { state: chunk } = useAsyncState(
   async () => {
@@ -23,7 +27,7 @@ const { state: chunk } = useAsyncState(
 
 <template>
   <!-- <VisualLoading /> -->
-  <div v-if="chunk" flex="~ items-center">
+  <NuxtLink v-if="chunk" flex="~ items-center" :to="{ path: route.path, query: { chunk: chunk.chunk_id } }">
     <!-- Icon, Name, Reason -->
     <div flex="~ gap-2 items-center" :title="`Chunk #${chunk.chunk_id}`">
       <div v-if="chunkImport.kind === 'import-statement'" i-ph-file-duotone />
@@ -49,7 +53,7 @@ const { state: chunk } = useAsyncState(
         {{ chunk.modules.length }}
       </div>
     </div>
-  </div>
+  </NuxtLink>
 </template>
 
 <style>
diff --git a/packages/devtools-vite/src/app/pages/session/[session].vue b/packages/devtools-vite/src/app/pages/session/[session].vue
index 5197c595..42336d6b 100644
--- a/packages/devtools-vite/src/app/pages/session/[session].vue
+++ b/packages/devtools-vite/src/app/pages/session/[session].vue
@@ -35,6 +35,10 @@ function closePluginPanel() {
   router.replace({ query: { ...route.query, plugin: undefined } })
 }
 
+function closeChunkPanel() {
+  router.replace({ query: { ...route.query, chunk: undefined } })
+}
+
 onKeyDown('Escape', (e) => {
   e.preventDefault()
 
@@ -168,5 +172,25 @@ onMounted(async () => {
         />
       </div>
     </div>
+
+    <!-- for chunks -->
+    <div
+      v-if="route.query.chunk" fixed inset-0
+      backdrop-blur-8 backdrop-brightness-95 z-panel-content
+    >
+      <div
+        :key="(route.query.chunk as string)"
+        v-on-click-outside="closeChunkPanel"
+        fixed right-0 bottom-0 top-20 z-panel-content
+        bg-glass border="l t base rounded-tl-xl"
+        class="left-20 xl:left-100 2xl:left-150"
+      >
+        <DataChunkDetailsLoader
+          :chunk="(Number(route.query.chunk))"
+          :session="session"
+          @close="closeChunkPanel"
+        />
+      </div>
+    </div>
   </div>
 </template>

From d9617ce6382f2f49ccc19b403516fd0ec97b5af6 Mon Sep 17 00:00:00 2001
From: liangmiQwQ <mi_yyds@126.com>
Date: Thu, 21 Aug 2025 08:05:15 +0800
Subject: [PATCH 08/12] chore: remove import info

---
 .../src/app/components/data/ChunkDetailsLoader.vue        | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/devtools-vite/src/app/components/data/ChunkDetailsLoader.vue b/packages/devtools-vite/src/app/components/data/ChunkDetailsLoader.vue
index ef78176e..1f4e3808 100644
--- a/packages/devtools-vite/src/app/components/data/ChunkDetailsLoader.vue
+++ b/packages/devtools-vite/src/app/components/data/ChunkDetailsLoader.vue
@@ -27,17 +27,11 @@ const { state, isLoading } = useAsyncState(
 <template>
   <VisualLoading v-if="isLoading" />
 
-  <div v-if="state" p4 pt-0 relative h-full w-full of-auto z-panel-content>
+  <div v-if="state" p4 pt-12 relative h-full w-full of-auto z-panel-content>
     <DisplayCloseButton
       absolute right-2 top-1.5
       @click="emit('close')"
     />
-    <span op50 min-h-12 flex="~ items-center">
-      Import by
-      <NuxtLink font-mono :to="{ query: { chunk: 1 } }">
-        #1
-      </NuxtLink>
-    </span>
     <DataChunkDetails :session="session" :chunk="state" />
   </div>
 </template>

From 491c0cf1ce29929a1fabec050470defcb1e5a4dd Mon Sep 17 00:00:00 2001
From: liangmi <121547620+liangmiQwQ@users.noreply.github.com>
Date: Thu, 21 Aug 2025 10:16:11 +0800
Subject: [PATCH 09/12] chore: rename `rolldown-get-chunk-by-id` to
 `rolldown-get-chunk-info`

Co-authored-by: Anthony Fu <github@antfu.me>
---
 packages/devtools-vite/src/node/rpc/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/devtools-vite/src/node/rpc/index.ts b/packages/devtools-vite/src/node/rpc/index.ts
index a7143ff6..dab1eeb8 100644
--- a/packages/devtools-vite/src/node/rpc/index.ts
+++ b/packages/devtools-vite/src/node/rpc/index.ts
@@ -4,7 +4,7 @@ import { openInEditor } from './functions/open-in-editor'
 import { openInFinder } from './functions/open-in-finder'
 import { rolldownGetAssetDetails } from './functions/rolldown-get-asset-details'
 import { rolldownGetAssetsList } from './functions/rolldown-get-assets-list'
-import { rolldownGetChunkByID } from './functions/rolldown-get-chunk-by-id'
+import { rolldownGetChunkInfo } from './functions/rolldown-get-chunk-info'
 import { rolldownGetChunksGraph } from './functions/rolldown-get-chunks-graph'
 import { rolldownGetModuleInfo } from './functions/rolldown-get-module-info'
 import { rolldownGetModuleRawEvents } from './functions/rolldown-get-module-raw-events'

From 72e3764ed24ac9a3d3e5db5b085c5b622bdc5397 Mon Sep 17 00:00:00 2001
From: liangmiQwQ <mi_yyds@126.com>
Date: Thu, 21 Aug 2025 10:19:55 +0800
Subject: [PATCH 10/12] chore: rename

---
 .../src/app/components/data/ChunkDetailsLoader.vue            | 2 +-
 .../devtools-vite/src/app/components/display/ChunkImports.vue | 2 +-
 ...rolldown-get-chunk-by-id.ts => rolldown-get-chunk-info.ts} | 4 ++--
 packages/devtools-vite/src/node/rpc/index.ts                  | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)
 rename packages/devtools-vite/src/node/rpc/functions/{rolldown-get-chunk-by-id.ts => rolldown-get-chunk-info.ts} (80%)

diff --git a/packages/devtools-vite/src/app/components/data/ChunkDetailsLoader.vue b/packages/devtools-vite/src/app/components/data/ChunkDetailsLoader.vue
index 1f4e3808..b1ed5058 100644
--- a/packages/devtools-vite/src/app/components/data/ChunkDetailsLoader.vue
+++ b/packages/devtools-vite/src/app/components/data/ChunkDetailsLoader.vue
@@ -15,7 +15,7 @@ const emit = defineEmits<{
 const rpc = useRpc()
 const { state, isLoading } = useAsyncState(
   async () => {
-    return await rpc.value!['vite:rolldown:get-chunk-by-id']?.({
+    return await rpc.value!['vite:rolldown:get-chunk-info']?.({
       session: props.session.id,
       id: props.chunk,
     })
diff --git a/packages/devtools-vite/src/app/components/display/ChunkImports.vue b/packages/devtools-vite/src/app/components/display/ChunkImports.vue
index dd61dccc..f0b15d45 100644
--- a/packages/devtools-vite/src/app/components/display/ChunkImports.vue
+++ b/packages/devtools-vite/src/app/components/display/ChunkImports.vue
@@ -16,7 +16,7 @@ const route = useRoute()
 const rpc = useRpc()
 const { state: chunk } = useAsyncState(
   async () => {
-    return await rpc.value!['vite:rolldown:get-chunk-by-id']?.({
+    return await rpc.value!['vite:rolldown:get-chunk-info']?.({
       session: props.session.id,
       id: props.chunkImport.chunk_id,
     })
diff --git a/packages/devtools-vite/src/node/rpc/functions/rolldown-get-chunk-by-id.ts b/packages/devtools-vite/src/node/rpc/functions/rolldown-get-chunk-info.ts
similarity index 80%
rename from packages/devtools-vite/src/node/rpc/functions/rolldown-get-chunk-by-id.ts
rename to packages/devtools-vite/src/node/rpc/functions/rolldown-get-chunk-info.ts
index bf1ca8be..c763400e 100644
--- a/packages/devtools-vite/src/node/rpc/functions/rolldown-get-chunk-by-id.ts
+++ b/packages/devtools-vite/src/node/rpc/functions/rolldown-get-chunk-info.ts
@@ -1,8 +1,8 @@
 import { defineRpcFunction } from '@vitejs/devtools-kit'
 import { getLogsManager } from '../utils'
 
-export const rolldownGetChunkByID = defineRpcFunction({
-  name: 'vite:rolldown:get-chunk-by-id',
+export const rolldownGetChunkInfo = defineRpcFunction({
+  name: 'vite:rolldown:get-chunk-info',
   type: 'query',
   setup: (context) => {
     const manager = getLogsManager(context)
diff --git a/packages/devtools-vite/src/node/rpc/index.ts b/packages/devtools-vite/src/node/rpc/index.ts
index dab1eeb8..c9f7b6ad 100644
--- a/packages/devtools-vite/src/node/rpc/index.ts
+++ b/packages/devtools-vite/src/node/rpc/index.ts
@@ -28,7 +28,7 @@ export const rpcFunctions = [
   rolldownGetAssetsList,
   rolldownGetAssetDetails,
   rolldownGetPluginDetails,
-  rolldownGetChunkByID,
+  rolldownGetChunkInfo,
 ] as const
 
 export type ServerFunctions = RpcDefinitionsToFunctions<typeof rpcFunctions>

From a3d271d589cb4967337e75d3ac59dff4d6f57838 Mon Sep 17 00:00:00 2001
From: liangmiQwQ <mi_yyds@126.com>
Date: Fri, 22 Aug 2025 21:31:02 +0800
Subject: [PATCH 11/12] fix: fixed escape bug

---
 packages/devtools-vite/src/app/pages/session/[session].vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/devtools-vite/src/app/pages/session/[session].vue b/packages/devtools-vite/src/app/pages/session/[session].vue
index 42336d6b..1815d429 100644
--- a/packages/devtools-vite/src/app/pages/session/[session].vue
+++ b/packages/devtools-vite/src/app/pages/session/[session].vue
@@ -45,7 +45,7 @@ onKeyDown('Escape', (e) => {
   if (!e.isTrusted || e.repeat)
     return
 
-  const { module, asset, plugin } = route.query
+  const { module, asset, plugin, chunk } = route.query
 
   if (module)
     closeFlowPanel()
@@ -55,6 +55,9 @@ onKeyDown('Escape', (e) => {
 
   if (plugin)
     closePluginPanel()
+
+  if (chunk)
+    closeChunkPanel()
 })
 
 useSideNav(() => {

From 844bd287422b897cde72b87a942e82089ca4b911 Mon Sep 17 00:00:00 2001
From: liangmiQwQ <mi_yyds@126.com>
Date: Sat, 23 Aug 2025 12:48:25 +0800
Subject: [PATCH 12/12] chore: use @click.self instead of v-on-click-outside

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

diff --git a/packages/devtools-vite/src/app/pages/session/[session].vue b/packages/devtools-vite/src/app/pages/session/[session].vue
index 1815d429..0b7fc7ea 100644
--- a/packages/devtools-vite/src/app/pages/session/[session].vue
+++ b/packages/devtools-vite/src/app/pages/session/[session].vue
@@ -180,10 +180,10 @@ onMounted(async () => {
     <div
       v-if="route.query.chunk" fixed inset-0
       backdrop-blur-8 backdrop-brightness-95 z-panel-content
+      @click.self="closeChunkPanel"
     >
       <div
         :key="(route.query.chunk as string)"
-        v-on-click-outside="closeChunkPanel"
         fixed right-0 bottom-0 top-20 z-panel-content
         bg-glass border="l t base rounded-tl-xl"
         class="left-20 xl:left-100 2xl:left-150"