From 16183c5f25db1602511fe720c080c7b97077a3e0 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Mon, 14 Jul 2025 23:17:26 +0800
Subject: [PATCH 1/4] feat: assets list/folder

---
 .../src/app/components/assets/Folder.vue      | 51 ++++++++++++++++
 .../src/app/components/assets/List.vue        | 25 ++++++++
 .../components/data/AssetDetailsLoader.vue    | 42 +++++++++++++
 .../src/app/components/display/TreeNode.vue   |  1 +
 .../src/app/pages/session/[session].vue       | 24 ++++++++
 .../app/pages/session/[session]/assets.vue    | 60 ++++++++++++++-----
 packages/devtools/src/app/state/settings.ts   |  2 +
 .../functions/rolldown-get-asset-details.ts   | 21 +++++++
 packages/devtools/src/node/rpc/index.ts       |  2 +
 9 files changed, 212 insertions(+), 16 deletions(-)
 create mode 100644 packages/devtools/src/app/components/assets/Folder.vue
 create mode 100644 packages/devtools/src/app/components/assets/List.vue
 create mode 100644 packages/devtools/src/app/components/data/AssetDetailsLoader.vue
 create mode 100644 packages/devtools/src/node/rpc/functions/rolldown-get-asset-details.ts

diff --git a/packages/devtools/src/app/components/assets/Folder.vue b/packages/devtools/src/app/components/assets/Folder.vue
new file mode 100644
index 00000000..bc44476d
--- /dev/null
+++ b/packages/devtools/src/app/components/assets/Folder.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { Asset } from '@rolldown/debug'
+import type { ModuleDest, SessionContext } from '~~/shared/types'
+import { useRouter } from '#app/composables/router'
+import { computed, ref } from 'vue'
+import { toTree } from '../../utils/format'
+
+const props = defineProps<{
+  assets: Asset[]
+  session: SessionContext
+}>()
+const router = useRouter()
+const selected = ref('')
+const assetTree = computed(() => {
+  const nodes: ModuleDest[] = []
+  props.assets.forEach((i) => {
+    nodes.push({
+      full: i.filename,
+      path: i.filename,
+    })
+  })
+  return toTree(nodes, 'Project')
+})
+
+function select(node: ModuleDest) {
+  selected.value = node.path
+  router.replace({
+    query: {
+      asset: node.path,
+    },
+  })
+}
+</script>
+
+<template>
+  <div flex="~ gap-2">
+    <DisplayTreeNode
+      v-if="assets?.length"
+      flex-1
+      :node="assetTree"
+      icon="i-catppuccin:folder-dist catppuccin"
+      icon-open="i-catppuccin:folder-dist-open catppuccin"
+      :link="false"
+      @select="select"
+    />
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/packages/devtools/src/app/components/assets/List.vue b/packages/devtools/src/app/components/assets/List.vue
new file mode 100644
index 00000000..7dd43fe5
--- /dev/null
+++ b/packages/devtools/src/app/components/assets/List.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { Asset } from '@rolldown/debug'
+
+defineProps<{
+  assets: Asset[]
+}>()
+</script>
+
+<template>
+  <div p4>
+    <div flex="~ col gap-1">
+      <template v-for="asset in assets" :key="asset.id">
+        <NuxtLink
+          :to="{ query: { asset: asset.filename } }"
+          font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active"
+        >
+          <div flex="~ gap-1">
+            <DisplayFileIcon :filename="asset.filename" />
+            {{ asset.filename }}
+          </div>
+        </NuxtLink>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/packages/devtools/src/app/components/data/AssetDetailsLoader.vue b/packages/devtools/src/app/components/data/AssetDetailsLoader.vue
new file mode 100644
index 00000000..98b7cfdb
--- /dev/null
+++ b/packages/devtools/src/app/components/data/AssetDetailsLoader.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { RolldownAssetInfo, RolldownChunkInfo, SessionContext } from '~~/shared/types'
+import { useRpc } from '#imports'
+import { useAsyncState } from '@vueuse/core'
+
+const props = defineProps<{
+  asset: string
+  session: SessionContext
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const rpc = useRpc()
+const { state } = useAsyncState(
+  async () => {
+    const res = await rpc.value!['vite:rolldown:get-asset-details']?.({
+      session: props.session.id,
+      id: props.asset,
+    })
+    return {
+      asset: { ...res?.asset, type: 'asset' },
+      chunks: [{ ...res?.chunk, type: 'chunk' }],
+    } satisfies {
+      asset: RolldownAssetInfo
+      chunks: RolldownChunkInfo[]
+    }
+  },
+  null,
+)
+</script>
+
+<template>
+  <div v-if="state?.asset" p4 relative h-full w-full of-auto pt12>
+    <DisplayCloseButton
+      absolute right-2 top-1.5
+      @click="emit('close')"
+    />
+    <DataAssetDetails :asset="state.asset" :session="session" :chunks="state?.chunks" />
+  </div>
+</template>
diff --git a/packages/devtools/src/app/components/display/TreeNode.vue b/packages/devtools/src/app/components/display/TreeNode.vue
index 4d1a77f3..5cd35657 100644
--- a/packages/devtools/src/app/components/display/TreeNode.vue
+++ b/packages/devtools/src/app/components/display/TreeNode.vue
@@ -53,6 +53,7 @@ function select(node: ModuleDest) {
         v-for="e of Object.entries(node.children)"
         :key="e[0]" :node="e[1]" :link="link"
         :padding="padding + 1"
+        @select="select"
       />
       <template v-for="i of node.items" :key="i.full">
         <component
diff --git a/packages/devtools/src/app/pages/session/[session].vue b/packages/devtools/src/app/pages/session/[session].vue
index 1bb45dec..b18d5e35 100644
--- a/packages/devtools/src/app/pages/session/[session].vue
+++ b/packages/devtools/src/app/pages/session/[session].vue
@@ -25,6 +25,10 @@ function closeFlowPanel() {
   router.replace({ query: { ...route.query, module: undefined } })
 }
 
+function closeAssetPanel() {
+  router.replace({ query: { ...route.query, asset: undefined } })
+}
+
 useSideNav(() => {
   if (!session.meta)
     return []
@@ -102,5 +106,25 @@ onMounted(async () => {
         />
       </div>
     </div>
+
+    <!-- for assets -->
+    <div
+      v-if="route.query.asset" fixed inset-0
+      backdrop-blur-8 backdrop-brightness-95 z-panel-content
+    >
+      <div
+        :key="(route.query.asset as string)"
+        v-on-click-outside="closeAssetPanel"
+        fixed right-0 bottom-0 top-30 left-150 z-panel-content
+        bg-glass border="l t base rounded-tl-xl"
+        of-auto
+      >
+        <DataAssetDetailsLoader
+          :asset="(route.query.asset as string)"
+          :session="session"
+          @close="closeAssetPanel"
+        />
+      </div>
+    </div>
   </div>
 </template>
diff --git a/packages/devtools/src/app/pages/session/[session]/assets.vue b/packages/devtools/src/app/pages/session/[session]/assets.vue
index e88309fe..fb969629 100644
--- a/packages/devtools/src/app/pages/session/[session]/assets.vue
+++ b/packages/devtools/src/app/pages/session/[session]/assets.vue
@@ -1,12 +1,31 @@
 <script setup lang="ts">
 import type { SessionContext } from '~~/shared/types'
+import type { ClientSettings } from '~/state/settings'
 import { useRpc } from '#imports'
 import { useAsyncState } from '@vueuse/core'
+import { settings } from '~/state/settings'
 
 const props = defineProps<{
   session: SessionContext
 }>()
 
+const assetViewTpyes = [
+  {
+    label: 'List',
+    value: 'list',
+    icon: 'i-ph-list-duotone',
+  },
+  {
+    label: 'Folder',
+    value: 'folder',
+    icon: 'i-ph-folder-duotone',
+  },
+  {
+    label: 'Flamechart',
+    value: 'flamechart',
+    icon: 'i-ph-chart-donut-duotone',
+  },
+] as const
 const rpc = useRpc()
 const { state: assets } = useAsyncState(
   async () => {
@@ -16,25 +35,34 @@ const { state: assets } = useAsyncState(
   },
   null,
 )
+
+function toggleDisplay(type: ClientSettings['assetViewType']) {
+  settings.value.assetViewType = type
+}
 </script>
 
 <template>
-  <div p5 flex="~ col gap-4">
-    Assets
-    <!--
-      WIP:
-      - Use tree view to show assets
-      - Show asssets detail on the right panel
-      - View of Flamechart with nanovis
-    -->
-    <template v-for="asset of assets" :key="asset.filename">
-      <pre>{{
-        {
-          filename: asset.filename,
-          size: asset.size,
-          chunk: asset.chunk_id,
-        }
-      }}</pre>
+  <div p4 flex="~ col gap-4">
+    <div flex="~ gap-2">
+      <button
+        v-for="viewType of assetViewTpyes"
+        :key="viewType.value"
+        btn-action
+        :class="settings.assetViewType === viewType.value ? 'bg-active' : 'grayscale op50'"
+        @click="toggleDisplay(viewType.value)"
+      >
+        <div :class="viewType.icon" />
+        {{ viewType.label }}
+      </button>
+    </div>
+    <template v-if="settings.assetViewType === 'list'">
+      <AssetsList v-if="assets?.length" :assets="assets" :session="session" />
+    </template>
+    <template v-else-if="settings.assetViewType === 'folder'">
+      <AssetsFolder v-if="assets?.length" :assets="assets" :session="session" />
+    </template>
+    <template v-else>
+      WIP: Flamechart view
     </template>
   </div>
 </template>
diff --git a/packages/devtools/src/app/state/settings.ts b/packages/devtools/src/app/state/settings.ts
index d395598c..7d27ab6e 100644
--- a/packages/devtools/src/app/state/settings.ts
+++ b/packages/devtools/src/app/state/settings.ts
@@ -13,6 +13,7 @@ export interface ClientSettings {
   flowExpandAssets: boolean
   flowShowAllTransforms: boolean
   flowShowAllLoads: boolean
+  assetViewType: 'list' | 'folder' | 'flamechart'
 }
 
 export const settings = useLocalStorage<ClientSettings>(
@@ -28,6 +29,7 @@ export const settings = useLocalStorage<ClientSettings>(
     flowExpandAssets: true,
     flowShowAllTransforms: false,
     flowShowAllLoads: false,
+    assetViewType: 'list',
   },
   {
     mergeDefaults: true,
diff --git a/packages/devtools/src/node/rpc/functions/rolldown-get-asset-details.ts b/packages/devtools/src/node/rpc/functions/rolldown-get-asset-details.ts
new file mode 100644
index 00000000..10a160e4
--- /dev/null
+++ b/packages/devtools/src/node/rpc/functions/rolldown-get-asset-details.ts
@@ -0,0 +1,21 @@
+import { defineRpcFunction } from '../utils'
+
+export const rolldownGetAssetDetails = defineRpcFunction({
+  name: 'vite:rolldown:get-asset-details',
+  type: 'query',
+  setup: ({ manager }) => {
+    return {
+      handler: async ({ session, id }: { session: string, id: string }) => {
+        const reader = await manager.loadSession(session)
+        const assets = await reader.manager.assets
+        const chunks = await reader.manager.chunks
+        const asset = assets.get(id)!
+        const chunk = chunks.get(asset.chunk_id!)!
+        return {
+          asset,
+          chunk,
+        }
+      },
+    }
+  },
+})
diff --git a/packages/devtools/src/node/rpc/index.ts b/packages/devtools/src/node/rpc/index.ts
index 2669b26e..027b6859 100644
--- a/packages/devtools/src/node/rpc/index.ts
+++ b/packages/devtools/src/node/rpc/index.ts
@@ -2,6 +2,7 @@ import type { DefinitionsToFunctions, FilterDefinitions } from './types'
 import { getPayload } from './functions/get-payload'
 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 { rolldownGetChunksGraph } from './functions/rolldown-get-chunks-graph'
 import { rolldownGetModuleInfo } from './functions/rolldown-get-module-info'
@@ -23,6 +24,7 @@ export const rpcFunctions = [
   rolldownGetModuleTransforms,
   rolldownGetChunksGraph,
   rolldownGetAssetsList,
+  rolldownGetAssetDetails,
 ] as const
 
 export type ServerFunctions = DefinitionsToFunctions<typeof rpcFunctions>

From b1f33f87dc13674edbea18e656e7c49d55800385 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Mon, 14 Jul 2025 23:54:06 +0800
Subject: [PATCH 2/4] chore: update

---
 .../src/app/components/assets/Folder.vue       | 18 +++---------------
 .../src/app/components/display/TreeNode.vue    |  5 ++++-
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/packages/devtools/src/app/components/assets/Folder.vue b/packages/devtools/src/app/components/assets/Folder.vue
index bc44476d..632e54d0 100644
--- a/packages/devtools/src/app/components/assets/Folder.vue
+++ b/packages/devtools/src/app/components/assets/Folder.vue
@@ -1,16 +1,13 @@
 <script setup lang="ts">
 import type { Asset } from '@rolldown/debug'
 import type { ModuleDest, SessionContext } from '~~/shared/types'
-import { useRouter } from '#app/composables/router'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { toTree } from '../../utils/format'
 
 const props = defineProps<{
   assets: Asset[]
   session: SessionContext
 }>()
-const router = useRouter()
-const selected = ref('')
 const assetTree = computed(() => {
   const nodes: ModuleDest[] = []
   props.assets.forEach((i) => {
@@ -21,15 +18,6 @@ const assetTree = computed(() => {
   })
   return toTree(nodes, 'Project')
 })
-
-function select(node: ModuleDest) {
-  selected.value = node.path
-  router.replace({
-    query: {
-      asset: node.path,
-    },
-  })
-}
 </script>
 
 <template>
@@ -40,8 +28,8 @@ function select(node: ModuleDest) {
       :node="assetTree"
       icon="i-catppuccin:folder-dist catppuccin"
       icon-open="i-catppuccin:folder-dist-open catppuccin"
-      :link="false"
-      @select="select"
+      :link="true"
+      link-query-key="asset"
     />
   </div>
 </template>
diff --git a/packages/devtools/src/app/components/display/TreeNode.vue b/packages/devtools/src/app/components/display/TreeNode.vue
index 5cd35657..59414f69 100644
--- a/packages/devtools/src/app/components/display/TreeNode.vue
+++ b/packages/devtools/src/app/components/display/TreeNode.vue
@@ -8,12 +8,14 @@ const props = withDefaults(defineProps<{
   icon?: string
   iconOpen?: string
   link?: string | boolean
+  linkQueryKey?: string
   padding?: number
   open?: boolean
 }>(), {
   icon: 'i-catppuccin:folder catppuccin',
   iconOpen: 'i-catppuccin:folder-open catppuccin',
   padding: 0,
+  linkQueryKey: 'module',
 })
 
 const emit = defineEmits<{
@@ -53,12 +55,13 @@ function select(node: ModuleDest) {
         v-for="e of Object.entries(node.children)"
         :key="e[0]" :node="e[1]" :link="link"
         :padding="padding + 1"
+        :link-query-key="linkQueryKey"
         @select="select"
       />
       <template v-for="i of node.items" :key="i.full">
         <component
           :is="link ? NuxtLink : 'div'"
-          :to="link ? (typeof link === 'string' ? link : { path: route.path, query: { ...route.query, module: i.full }, hash: location.hash }) : undefined"
+          :to="link ? (typeof link === 'string' ? link : { path: route.path, query: { ...route.query, [linkQueryKey]: i.full }, hash: location.hash }) : undefined"
           text-sm
           ws-nowrap
           flex="~ gap-1"

From 3a8bfde0511ffac39ed10ea90a5a19bd033fa774 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Tue, 15 Jul 2025 19:56:01 +0800
Subject: [PATCH 3/4] feat: init

---
 .../src/app/components/assets/Treemap.vue     | 15 ++++++++++++
 .../src/app/components/chart/AssetTreemap.vue | 24 +++++++++++++++++++
 .../app/pages/session/[session]/assets.vue    | 10 ++++----
 packages/devtools/src/app/state/settings.ts   |  2 +-
 4 files changed, 45 insertions(+), 6 deletions(-)
 create mode 100644 packages/devtools/src/app/components/assets/Treemap.vue
 create mode 100644 packages/devtools/src/app/components/chart/AssetTreemap.vue

diff --git a/packages/devtools/src/app/components/assets/Treemap.vue b/packages/devtools/src/app/components/assets/Treemap.vue
new file mode 100644
index 00000000..25a1f35b
--- /dev/null
+++ b/packages/devtools/src/app/components/assets/Treemap.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { Asset } from '@rolldown/debug'
+import type { SessionContext } from '~~/shared/types'
+
+defineProps<{
+  assets: Asset[]
+  session: SessionContext
+}>()
+</script>
+
+<template>
+  <div>
+    {{ assets.length }}
+  </div>
+</template>
diff --git a/packages/devtools/src/app/components/chart/AssetTreemap.vue b/packages/devtools/src/app/components/chart/AssetTreemap.vue
new file mode 100644
index 00000000..84e07bfa
--- /dev/null
+++ b/packages/devtools/src/app/components/chart/AssetTreemap.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { GraphBase, GraphBaseOptions, TreeNode } from 'nanovis'
+import { useTemplateRef, watchEffect } from 'vue'
+
+interface PackageNode {
+}
+type ChartNode = TreeNode<PackageNode | undefined>
+
+const props = defineProps<{
+  graph: GraphBase<PackageNode | undefined, GraphBaseOptions<PackageNode | undefined>>
+  selected?: ChartNode | undefined
+}>()
+
+// const emit = defineEmits<{
+//   (e: 'select', node: ChartNode | null): void
+// }>()
+
+const el = useTemplateRef<HTMLDivElement>('el')
+watchEffect(() => el.value?.append(props.graph.el))
+</script>
+
+<template>
+  <div ref="el" />
+</template>
diff --git a/packages/devtools/src/app/pages/session/[session]/assets.vue b/packages/devtools/src/app/pages/session/[session]/assets.vue
index fb969629..29036881 100644
--- a/packages/devtools/src/app/pages/session/[session]/assets.vue
+++ b/packages/devtools/src/app/pages/session/[session]/assets.vue
@@ -21,9 +21,9 @@ const assetViewTpyes = [
     icon: 'i-ph-folder-duotone',
   },
   {
-    label: 'Flamechart',
-    value: 'flamechart',
-    icon: 'i-ph-chart-donut-duotone',
+    label: 'Treemap',
+    value: 'treemap',
+    icon: 'i-ph-checkerboard-duotone',
   },
 ] as const
 const rpc = useRpc()
@@ -61,8 +61,8 @@ function toggleDisplay(type: ClientSettings['assetViewType']) {
     <template v-else-if="settings.assetViewType === 'folder'">
       <AssetsFolder v-if="assets?.length" :assets="assets" :session="session" />
     </template>
-    <template v-else>
-      WIP: Flamechart view
+    <template v-else-if="settings.assetViewType === 'treemap'">
+      <AssetsTreemap v-if="assets?.length" :assets="assets" :session="session" />
     </template>
   </div>
 </template>
diff --git a/packages/devtools/src/app/state/settings.ts b/packages/devtools/src/app/state/settings.ts
index 7d27ab6e..b0be2925 100644
--- a/packages/devtools/src/app/state/settings.ts
+++ b/packages/devtools/src/app/state/settings.ts
@@ -13,7 +13,7 @@ export interface ClientSettings {
   flowExpandAssets: boolean
   flowShowAllTransforms: boolean
   flowShowAllLoads: boolean
-  assetViewType: 'list' | 'folder' | 'flamechart'
+  assetViewType: 'list' | 'folder' | 'treemap'
 }
 
 export const settings = useLocalStorage<ClientSettings>(

From cccff5371dbda79423a0c847f97c6d88c76143cf Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Tue, 15 Jul 2025 22:49:59 +0800
Subject: [PATCH 4/4] feat: treemap view

---
 .../src/app/components/assets/Treemap.vue     | 244 +++++++++++++++++-
 .../components/chart/AssetNavBreadcrumb.vue   |  38 +++
 .../src/app/components/chart/AssetTreemap.vue |  23 +-
 packages/devtools/src/app/state/settings.ts   |   2 +
 packages/devtools/src/app/types/assets.ts     |   8 +
 5 files changed, 300 insertions(+), 15 deletions(-)
 create mode 100644 packages/devtools/src/app/components/chart/AssetNavBreadcrumb.vue
 create mode 100644 packages/devtools/src/app/types/assets.ts

diff --git a/packages/devtools/src/app/components/assets/Treemap.vue b/packages/devtools/src/app/components/assets/Treemap.vue
index 25a1f35b..5047ac78 100644
--- a/packages/devtools/src/app/components/assets/Treemap.vue
+++ b/packages/devtools/src/app/components/assets/Treemap.vue
@@ -1,15 +1,249 @@
 <script setup lang="ts">
-import type { Asset } from '@rolldown/debug'
+import type { Asset as AssetInfo } from '@rolldown/debug'
+import type { GraphBase, GraphBaseOptions } from 'nanovis'
 import type { SessionContext } from '~~/shared/types'
+import type { AssetChartInfo, AssetChartNode } from '~/types/assets'
+import { useRouter } from '#app/composables/router'
+import { useMouse } from '@vueuse/core'
+import { createColorGetterSpectrum, Treemap } from 'nanovis'
+import { computed, nextTick, onUnmounted, reactive, ref, shallowRef, watch } from 'vue'
+import { isDark } from '~/composables/dark'
+import { settings } from '~/state/settings'
+import { bytesToHumanSize } from '~/utils/format'
 
-defineProps<{
-  assets: Asset[]
+const props = defineProps<{
+  assets: AssetInfo[]
   session: SessionContext
 }>()
+
+const router = useRouter()
+const mouse = reactive(useMouse())
+const graph = shallowRef<GraphBase<AssetChartInfo | undefined, GraphBaseOptions<AssetChartInfo | undefined>> | undefined>(undefined)
+const nodeHover = shallowRef<AssetChartNode | undefined>(undefined)
+const nodeSelected = shallowRef<AssetChartNode | undefined>(undefined)
+const selectedNode = ref<AssetChartInfo | undefined>(undefined)
+let dispose: () => void | undefined
+
+const tree = computed(() => {
+  const assets = props.assets
+  const map = new Map<string, AssetChartNode>()
+  let maxDepth = 0
+
+  const root: AssetChartNode = {
+    id: '~root',
+    text: 'Project',
+    size: 0,
+    sizeSelf: 0,
+    children: [],
+  }
+
+  const macrosTasks: (() => void)[] = []
+
+  macrosTasks.unshift(() => {
+    root.size += root.children.reduce((acc, i) => acc + i.size, 0)
+    root.subtext = bytesToHumanSize(root.size).join(' ')
+    root.children.sort((a, b) => b.size - a.size || a.id.localeCompare(b.id))
+  })
+
+  function assetToNode(asset: AssetInfo, path: string, name: string, parent: AssetChartNode, depth: number): AssetChartNode {
+    if (map.has(path)) {
+      return map.get(path)!
+    }
+
+    if (depth > maxDepth) {
+      maxDepth = depth
+    }
+
+    const node: AssetChartNode = {
+      id: path,
+      text: name,
+      size: 0,
+      sizeSelf: 0,
+      children: [],
+      meta: {
+        chunk_id: 0,
+        content: '',
+        filename: '',
+        size: 0,
+        path: name,
+        type: 'folder',
+      },
+      parent,
+    }
+
+    map.set(path, node)
+    parent.children.push(node)
+
+    macrosTasks.unshift(() => {
+      const selfSize = node.sizeSelf
+      node.size += node.children.reduce((acc, i) => acc + i.size, 0)
+      node.subtext = bytesToHumanSize(node.size).join(' ')
+
+      if (node.children.length && selfSize / node.size > 0.1) {
+        node.children.push({
+          id: `${node.id}-self`,
+          text: '',
+          size: selfSize,
+          sizeSelf: selfSize,
+          subtext: bytesToHumanSize(selfSize).join(' '),
+          children: [],
+          meta: {
+            ...asset,
+            path: '',
+            type: 'file',
+          },
+          parent: node,
+        })
+      }
+
+      node.children.sort((a, b) => b.size - a.size || a.id.localeCompare(b.id))
+    })
+
+    return node
+  }
+
+  function processAsset(asset: AssetInfo) {
+    const parts = asset.filename.split('/').filter(Boolean)
+    let current = root
+    let currentPath = ''
+    let depth = 0
+
+    parts.forEach((part, index) => {
+      currentPath += (currentPath ? '/' : '') + part
+      depth++
+
+      if (index === parts.length - 1) {
+        const fileNode: AssetChartNode = {
+          id: asset.filename,
+          text: part,
+          size: asset.size,
+          sizeSelf: asset.size,
+          subtext: bytesToHumanSize(asset.size).join(' '),
+          children: [],
+          meta: {
+            ...asset,
+            path: part,
+            type: 'file',
+          },
+        }
+
+        current.children.push(fileNode)
+        map.set(asset.filename, fileNode)
+      }
+      else {
+        current = assetToNode(asset, currentPath, part, current, depth)
+      }
+    })
+  }
+
+  assets.forEach(processAsset)
+
+  macrosTasks.forEach(fn => fn())
+
+  return {
+    map,
+    root,
+    maxDepth,
+  }
+})
+
+const options = computed<GraphBaseOptions<AssetChartInfo | undefined>>(() => {
+  return {
+    onClick(node) {
+      if (node)
+        nodeHover.value = node
+      if (node.meta?.type === 'file') {
+        selectedNode.value = node.meta
+        router.replace({ query: { asset: node.meta.filename } })
+      }
+    },
+    onHover(node) {
+      if (node)
+        nodeHover.value = node
+    },
+    onLeave() {
+      nodeHover.value = undefined
+    },
+    onSelect(node) {
+      nodeSelected.value = node || tree.value.root
+      selectedNode.value = node?.meta
+    },
+    animate: settings.value.chartAnimation,
+    palette: {
+      stroke: isDark.value ? '#222' : '#555',
+      fg: isDark.value ? '#fff' : '#000',
+      bg: isDark.value ? '#111' : '#fff',
+    },
+    getColor: createColorGetterSpectrum(
+      tree.value.root,
+      isDark.value ? 0.8 : 0.9,
+      isDark.value ? 1 : 1.1,
+    ),
+    getSubtext: (node) => {
+      return node.subtext
+    },
+  }
+})
+
+function selectNode(node: AssetChartNode | null, animate?: boolean) {
+  selectedNode.value = node?.meta
+  if (!node?.children.length)
+    node = node?.parent || null
+  graph.value?.select(node, animate)
+}
+
+watch(() => [tree.value, options.value], () => {
+  dispose?.()
+
+  nodeSelected.value = tree.value.root
+
+  if (tree.value?.root) {
+    graph.value = new Treemap(tree.value.root, {
+      ...options.value,
+      selectedPaddingRatio: 0,
+    })
+  }
+  nextTick(() => {
+    const selected = selectedNode.value ? tree.value.map.get(selectedNode.value.filename) || null : null
+    if (selected)
+      selectNode(selected, false)
+  })
+
+  dispose = () => {
+    graph.value?.dispose()
+    graph.value = undefined
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+
+onUnmounted(() => {
+  dispose?.()
+})
 </script>
 
 <template>
-  <div>
-    {{ assets.length }}
+  <ChartAssetTreemap
+    v-if="graph"
+    :graph="graph"
+    :selected="nodeSelected"
+    @select="x => selectNode(x)"
+  />
+  <div
+    v-if="nodeHover?.meta"
+    bg-glass fixed z-panel-nav border="~ base rounded" p2 text-sm
+    flex="~ col gap-2"
+    :style="{
+      left: `${mouse.x + 10}px`,
+      top: `${mouse.y + 10}px`,
+    }"
+  >
+    <div flex="~ gap-1 items-center">
+      {{ nodeHover.text }}
+    </div>
+    <div flex="~ gap-1 items-center">
+      <DisplayFileSizeBadge :bytes="nodeHover.size" :percent="false" />
+    </div>
   </div>
 </template>
diff --git a/packages/devtools/src/app/components/chart/AssetNavBreadcrumb.vue b/packages/devtools/src/app/components/chart/AssetNavBreadcrumb.vue
new file mode 100644
index 00000000..24951dc2
--- /dev/null
+++ b/packages/devtools/src/app/components/chart/AssetNavBreadcrumb.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { GraphBaseOptions } from 'nanovis'
+import type { AssetChartInfo, AssetChartNode } from '~/types/assets'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  selected?: AssetChartNode
+  options: GraphBaseOptions<AssetChartInfo | undefined>
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', node: AssetChartNode | null): void
+}>()
+
+const parentStack = computed(() => {
+  const stack: AssetChartNode[] = []
+  let current = props.selected
+  while (current) {
+    stack.unshift(current)
+    current = current.parent
+  }
+  return stack
+})
+</script>
+
+<template>
+  <div flex="~ gap-1 items-center wrap">
+    <template v-for="node, idx of parentStack" :key="node.id">
+      <div v-if="idx > 0" i-ph-arrow-right-bold text-sm op-fade />
+      <button
+        hover="bg-active" rounded px1
+        @click="emit('select', node)"
+      >
+        <span>{{ node.text || node.id }}</span>
+      </button>
+    </template>
+  </div>
+</template>
diff --git a/packages/devtools/src/app/components/chart/AssetTreemap.vue b/packages/devtools/src/app/components/chart/AssetTreemap.vue
index 84e07bfa..129e193d 100644
--- a/packages/devtools/src/app/components/chart/AssetTreemap.vue
+++ b/packages/devtools/src/app/components/chart/AssetTreemap.vue
@@ -1,24 +1,27 @@
 <script setup lang="ts">
-import type { GraphBase, GraphBaseOptions, TreeNode } from 'nanovis'
+import type { GraphBase, GraphBaseOptions } from 'nanovis'
+import type { AssetChartInfo, AssetChartNode } from '~/types/assets'
 import { useTemplateRef, watchEffect } from 'vue'
 
-interface PackageNode {
-}
-type ChartNode = TreeNode<PackageNode | undefined>
-
 const props = defineProps<{
-  graph: GraphBase<PackageNode | undefined, GraphBaseOptions<PackageNode | undefined>>
-  selected?: ChartNode | undefined
+  graph: GraphBase<AssetChartInfo | undefined, GraphBaseOptions<AssetChartInfo | undefined>>
+  selected?: AssetChartNode | undefined
 }>()
 
-// const emit = defineEmits<{
-//   (e: 'select', node: ChartNode | null): void
-// }>()
+const emit = defineEmits<{
+  (e: 'select', node: AssetChartNode | null): void
+}>()
 
 const el = useTemplateRef<HTMLDivElement>('el')
 watchEffect(() => el.value?.append(props.graph.el))
 </script>
 
 <template>
+  <ChartAssetNavBreadcrumb
+    border="b base" py2 min-h-10
+    :selected="selected"
+    :options="graph.options"
+    @select="emit('select', $event)"
+  />
   <div ref="el" />
 </template>
diff --git a/packages/devtools/src/app/state/settings.ts b/packages/devtools/src/app/state/settings.ts
index b0be2925..4fbd5dce 100644
--- a/packages/devtools/src/app/state/settings.ts
+++ b/packages/devtools/src/app/state/settings.ts
@@ -14,6 +14,7 @@ export interface ClientSettings {
   flowShowAllTransforms: boolean
   flowShowAllLoads: boolean
   assetViewType: 'list' | 'folder' | 'treemap'
+  chartAnimation: boolean
 }
 
 export const settings = useLocalStorage<ClientSettings>(
@@ -30,6 +31,7 @@ export const settings = useLocalStorage<ClientSettings>(
     flowShowAllTransforms: false,
     flowShowAllLoads: false,
     assetViewType: 'list',
+    chartAnimation: true,
   },
   {
     mergeDefaults: true,
diff --git a/packages/devtools/src/app/types/assets.ts b/packages/devtools/src/app/types/assets.ts
new file mode 100644
index 00000000..d3e20c58
--- /dev/null
+++ b/packages/devtools/src/app/types/assets.ts
@@ -0,0 +1,8 @@
+import type { Asset as AssetInfo } from '@rolldown/debug'
+import type { TreeNode } from 'nanovis'
+
+export type AssetChartInfo = AssetInfo & {
+  path: string
+  type: 'folder' | 'file'
+}
+export type AssetChartNode = TreeNode<AssetChartInfo | undefined>