From cae7dda004d6160091a4fa0f127e584399c0ca0b Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Sun, 13 Jul 2025 02:09:33 +0800
Subject: [PATCH 1/3] feat: init

---
 .../src/app/components/flowmap/ModuleFlow.vue      | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/devtools/src/app/components/flowmap/ModuleFlow.vue b/packages/devtools/src/app/components/flowmap/ModuleFlow.vue
index 0feb7195..1327c9f5 100644
--- a/packages/devtools/src/app/components/flowmap/ModuleFlow.vue
+++ b/packages/devtools/src/app/components/flowmap/ModuleFlow.vue
@@ -375,7 +375,19 @@ const codeDisplay = computed(() => {
         </template>
         <template v-else-if="selected?.type === 'asset'">
           <div p4>
-            Assets Details (TODO)
+            <div relative>
+              <div absolute top-0 right-0 flex="~ gap-2">
+                <button btn-action>
+                  <div i-carbon-launch />
+                  Open in editor
+                </button>
+                <button btn-action>
+                  <div i-catppuccin-java-class-abstract />
+                  View source
+                </button>
+              </div>
+            </div>
+
             - Trace back to the chunk
             - A button to open the asset in the editor
             - A button to show source in the page

From af8d63bfe741ea8578549290e4ad9952b3d95bcc Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Sun, 13 Jul 2025 15:58:36 +0800
Subject: [PATCH 2/3] chore: update

---
 .../src/app/components/data/AssetDetails.vue  | 70 +++++++++++++++++++
 .../src/app/components/data/ChunkDetails.vue  | 39 ++++++-----
 .../src/app/components/flowmap/ModuleFlow.vue | 21 ++----
 3 files changed, 97 insertions(+), 33 deletions(-)
 create mode 100644 packages/devtools/src/app/components/data/AssetDetails.vue

diff --git a/packages/devtools/src/app/components/data/AssetDetails.vue b/packages/devtools/src/app/components/data/AssetDetails.vue
new file mode 100644
index 00000000..10c96b78
--- /dev/null
+++ b/packages/devtools/src/app/components/data/AssetDetails.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { RolldownAssetInfo, RolldownChunkInfo, SessionContext } from '~~/shared/types'
+import { useRpc } from '#imports'
+import { computed, ref } from 'vue'
+
+const props = defineProps<{
+  chunks: RolldownChunkInfo[]
+  session: SessionContext
+  asset: RolldownAssetInfo
+}>()
+
+const rpc = useRpc()
+const showSource = ref(false)
+const assetChunks = computed(() => props.chunks.filter(c => c.chunk_id === props.asset.chunk_id))
+
+function openInEditor() {
+  rpc.value!['vite:open-in-editor'](`${props.session.meta.dir}/${props.asset.filename}`)
+}
+</script>
+
+<template>
+  <div flex="~ col gap-3">
+    <div flex="~ gap-4 items-center wrap">
+      <div flex="~ gap-2 items-center">
+        <div i-catppuccin-java-class-abstract />
+        <div>{{ asset.filename }}</div>
+        <DisplayFileSizeBadge :bytes="asset.size" text-sm />
+        <DisplayBadge :text="asset.type" />
+      </div>
+      <div flex-auto />
+      <div flex="~ gap-2">
+        <button btn-action @click="openInEditor">
+          <div i-carbon-launch />
+          Open in editor
+        </button>
+        <button btn-action @click="showSource = true">
+          <div i-ph-file-text />
+          View source
+        </button>
+      </div>
+    </div>
+    <div op50>
+      Chunks
+    </div>
+    <div v-for="chunk of assetChunks" :key="chunk.chunk_id" border="~ base rounded-lg" px2 py1>
+      <DataChunkDetails
+        :chunk="chunk"
+        :session="session"
+        :show-modules="false"
+      />
+    </div>
+    <template v-if="asset.content && showSource">
+      <div flex="~ gap-2 items-center">
+        <div op50>
+          Source
+        </div>
+        <span flex-auto />
+        <DisplayCloseButton @click="showSource = false" />
+      </div>
+      <div class="w-full of-auto px2 py1" border="~ base rounded-lg">
+        <CodeDiffEditor
+          :from="asset.content!"
+          :to="asset.content!"
+          :diff="false"
+          :one-column="true"
+        />
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/packages/devtools/src/app/components/data/ChunkDetails.vue b/packages/devtools/src/app/components/data/ChunkDetails.vue
index 58d1a4c6..d3a2879e 100644
--- a/packages/devtools/src/app/components/data/ChunkDetails.vue
+++ b/packages/devtools/src/app/components/data/ChunkDetails.vue
@@ -2,10 +2,13 @@
 import type { Chunk as ChunkInfo } from '@rolldown/debug'
 import type { SessionContext } from '~~/shared/types'
 
-defineProps<{
+withDefaults(defineProps<{
   chunk: ChunkInfo
   session: SessionContext
-}>()
+  showModules?: boolean
+}>(), {
+  showModules: true,
+})
 </script>
 
 <template>
@@ -32,20 +35,22 @@ defineProps<{
       {{ chunk.imports }}
     </div> -->
 
-    <div op50>
-      Modules
-    </div>
-    <div flex="~ col gap-1" ws-nowrap>
-      <DisplayModuleId
-        v-for="module of chunk.modules"
-        :id="module"
-        :key="module"
-        :session
-        :link="true"
-        :minimal="true"
-        hover="bg-active"
-        border="~ base rounded" px2 py1 w-full
-      />
-    </div>
+    <template v-if="showModules">
+      <div op50>
+        Modules
+      </div>
+      <div flex="~ col gap-1" ws-nowrap>
+        <DisplayModuleId
+          v-for="module of chunk.modules"
+          :id="module"
+          :key="module"
+          :session
+          :link="true"
+          :minimal="true"
+          hover="bg-active"
+          border="~ base rounded" px2 py1 w-full
+        />
+      </div>
+    </template>
   </div>
 </template>
diff --git a/packages/devtools/src/app/components/flowmap/ModuleFlow.vue b/packages/devtools/src/app/components/flowmap/ModuleFlow.vue
index 1327c9f5..eca880e0 100644
--- a/packages/devtools/src/app/components/flowmap/ModuleFlow.vue
+++ b/packages/devtools/src/app/components/flowmap/ModuleFlow.vue
@@ -375,22 +375,11 @@ const codeDisplay = computed(() => {
         </template>
         <template v-else-if="selected?.type === 'asset'">
           <div p4>
-            <div relative>
-              <div absolute top-0 right-0 flex="~ gap-2">
-                <button btn-action>
-                  <div i-carbon-launch />
-                  Open in editor
-                </button>
-                <button btn-action>
-                  <div i-catppuccin-java-class-abstract />
-                  View source
-                </button>
-              </div>
-            </div>
-
-            - Trace back to the chunk
-            - A button to open the asset in the editor
-            - A button to show source in the page
+            <DataAssetDetails
+              :asset="selected"
+              :session="session"
+              :chunks="info.chunks"
+            />
           </div>
         </template>
         <template v-else-if="codeDisplay?.from && codeDisplay?.to">

From 22980b8d89ba0fd658fb3d971db6675046fad86b Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Sun, 13 Jul 2025 16:06:28 +0800
Subject: [PATCH 3/3] chore: update

---
 .../src/app/components/data/AssetDetails.vue  | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/devtools/src/app/components/data/AssetDetails.vue b/packages/devtools/src/app/components/data/AssetDetails.vue
index 10c96b78..a05d3451 100644
--- a/packages/devtools/src/app/components/data/AssetDetails.vue
+++ b/packages/devtools/src/app/components/data/AssetDetails.vue
@@ -39,17 +39,7 @@ function openInEditor() {
         </button>
       </div>
     </div>
-    <div op50>
-      Chunks
-    </div>
-    <div v-for="chunk of assetChunks" :key="chunk.chunk_id" border="~ base rounded-lg" px2 py1>
-      <DataChunkDetails
-        :chunk="chunk"
-        :session="session"
-        :show-modules="false"
-      />
-    </div>
-    <template v-if="asset.content && showSource">
+    <template v-if="showSource">
       <div flex="~ gap-2 items-center">
         <div op50>
           Source
@@ -66,5 +56,15 @@ function openInEditor() {
         />
       </div>
     </template>
+    <div op50>
+      Chunks
+    </div>
+    <div v-for="chunk of assetChunks" :key="chunk.chunk_id" border="~ base rounded-lg" px2 py1>
+      <DataChunkDetails
+        :chunk="chunk"
+        :session="session"
+        :show-modules="false"
+      />
+    </div>
   </div>
 </template>