From 3d2392f6bdb95692a2490cc454110b6ebd1d71e8 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Tue, 27 Jan 2026 23:02:59 +0800
Subject: [PATCH] refactor: migrate shared components to ui package

---
 alias.ts                                      |  1 +
 packages/ui/package.json                      |  7 +++-
 .../src/components/DataVirtualList.vue}       |  0
 .../src/components/DisplayBadge.vue}          |  2 +-
 .../src/components/DisplayCloseButton.vue}    |  0
 .../src/components/DisplayDuration.vue}       |  3 +-
 .../src/components/DisplayIconButton.vue}     |  0
 .../src/components/DisplayNumberBadge.vue}    |  0
 .../src/components/DisplayNumberWithUnit.vue} |  0
 .../src/components/DisplayTimestamp.vue}      |  0
 packages/ui/src/utils/__tests__/color.test.ts | 36 +++++++++++++++++
 packages/ui/src/utils/color.ts                | 21 ++++++++++
 packages/ui/src/utils/format.ts               | 19 +++++++++
 .../src/app/components/assets/BaseInfo.vue    |  1 +
 .../vite/src/app/components/assets/List.vue   |  1 +
 .../app/components/chart/ModuleFlamegraph.vue |  1 +
 .../src/app/components/chunks/BaseInfo.vue    |  1 +
 .../src/app/components/chunks/FlatList.vue    |  2 +
 .../vite/src/app/components/chunks/Graph.vue  |  1 +
 .../src/app/components/chunks/Imports.vue     |  1 +
 .../src/app/components/data/AssetDetails.vue  |  3 ++
 .../components/data/AssetDetailsLoader.vue    |  1 +
 .../src/app/components/data/ChunkDetails.vue  |  1 +
 .../components/data/ChunkDetailsLoader.vue    |  1 +
 .../components/data/ModuleDetailsLoader.vue   |  1 +
 .../components/data/PackageDetailsLoader.vue  |  2 +
 .../src/app/components/data/PathSelector.vue  |  1 +
 .../components/data/PluginDetailsLoader.vue   |  6 ++-
 .../components/data/PluginDetailsTable.vue    |  3 ++
 .../app/components/data/RawEventsTable.vue    |  2 +
 .../app/components/display/ClusterBadge.vue   |  2 +-
 .../display/ExpandableContainer.vue           |  1 +
 .../src/app/components/display/ModuleId.vue   |  1 +
 .../components/flowmap/ModuleFlowDetails.vue  |  2 +
 .../app/components/flowmap/NodeAssetInfo.vue  |  1 +
 .../app/components/flowmap/NodeChunkInfo.vue  |  1 +
 .../app/components/flowmap/NodeModuleInfo.vue |  1 +
 .../app/components/flowmap/NodePluginInfo.vue |  4 +-
 .../src/app/components/flowmap/PluginFlow.vue |  2 +
 .../app/components/modules/BuildMetrics.vue   |  3 +-
 .../app/components/modules/DetailedList.vue   |  1 +
 .../src/app/components/modules/FlatList.vue   |  1 +
 .../src/app/components/packages/Importers.vue |  1 +
 .../src/app/components/packages/Table.vue     |  1 +
 .../app/components/panel/SessionSelector.vue  |  2 +
 .../src/app/components/plugins/FlatList.vue   |  1 +
 .../src/app/components/plugins/Sunburst.vue   |  1 +
 .../app/pages/session/[session]/chunks.vue    |  1 +
 .../src/app/pages/session/[session]/index.vue |  3 ++
 .../src/app/utils/__tests__/color.test.ts     | 39 ++-----------------
 packages/vite/src/app/utils/color.ts          | 22 +----------
 packages/vite/src/app/utils/format.ts         | 20 ----------
 pnpm-lock.yaml                                |  3 ++
 tsconfig.base.json                            |  3 ++
 54 files changed, 151 insertions(+), 84 deletions(-)
 rename packages/{vite/src/app/components/data/VirtualList.vue => ui/src/components/DataVirtualList.vue} (100%)
 rename packages/{vite/src/app/components/display/Badge.vue => ui/src/components/DisplayBadge.vue} (97%)
 rename packages/{vite/src/app/components/display/CloseButton.vue => ui/src/components/DisplayCloseButton.vue} (100%)
 rename packages/{vite/src/app/components/display/Duration.vue => ui/src/components/DisplayDuration.vue} (90%)
 rename packages/{vite/src/app/components/display/IconButton.vue => ui/src/components/DisplayIconButton.vue} (100%)
 rename packages/{vite/src/app/components/display/NumberBadge.vue => ui/src/components/DisplayNumberBadge.vue} (100%)
 rename packages/{vite/src/app/components/display/NumberWithUnit.vue => ui/src/components/DisplayNumberWithUnit.vue} (100%)
 rename packages/{vite/src/app/components/display/Timestamp.vue => ui/src/components/DisplayTimestamp.vue} (100%)
 create mode 100644 packages/ui/src/utils/__tests__/color.test.ts
 create mode 100644 packages/ui/src/utils/color.ts
 create mode 100644 packages/ui/src/utils/format.ts

diff --git a/alias.ts b/alias.ts
index e552f1d2..544f112b 100644
--- a/alias.ts
+++ b/alias.ts
@@ -23,6 +23,7 @@ export const alias = {
   '@vitejs/devtools-ui/unocss': r('ui/src/unocss/index.ts'),
   '@vitejs/devtools-ui/components': r('ui/src/components'),
   '@vitejs/devtools-ui/composables': r('ui/src/composables'),
+  '@vitejs/devtools-ui/utils': r('ui/src/utils'),
 }
 
 // update tsconfig.base.json
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 3dc07e27..e248758a 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -35,6 +35,10 @@
     "./composables/*": {
       "types": "./src/composables/*.ts",
       "import": "./src/composables/*.ts"
+    },
+    "./utils/*": {
+      "types": "./src/utils/*.ts",
+      "import": "./src/utils/*.ts"
     }
   },
   "main": "./src/index.ts",
@@ -42,6 +46,7 @@
   "peerDependencies": {
     "@vueuse/core": "*",
     "unocss": "*",
-    "vue": "*"
+    "vue": "*",
+    "vue-virtual-scroller": ">=2.0.0-beta.0"
   }
 }
diff --git a/packages/vite/src/app/components/data/VirtualList.vue b/packages/ui/src/components/DataVirtualList.vue
similarity index 100%
rename from packages/vite/src/app/components/data/VirtualList.vue
rename to packages/ui/src/components/DataVirtualList.vue
diff --git a/packages/vite/src/app/components/display/Badge.vue b/packages/ui/src/components/DisplayBadge.vue
similarity index 97%
rename from packages/vite/src/app/components/display/Badge.vue
rename to packages/ui/src/components/DisplayBadge.vue
index faabd08a..5e26e2cb 100644
--- a/packages/vite/src/app/components/display/Badge.vue
+++ b/packages/ui/src/components/DisplayBadge.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import {
   getHashColorFromString,
   getHsla,
-} from '~/utils/color'
+} from '../utils/color'
 
 const props = withDefaults(
   defineProps<{
diff --git a/packages/vite/src/app/components/display/CloseButton.vue b/packages/ui/src/components/DisplayCloseButton.vue
similarity index 100%
rename from packages/vite/src/app/components/display/CloseButton.vue
rename to packages/ui/src/components/DisplayCloseButton.vue
diff --git a/packages/vite/src/app/components/display/Duration.vue b/packages/ui/src/components/DisplayDuration.vue
similarity index 90%
rename from packages/vite/src/app/components/display/Duration.vue
rename to packages/ui/src/components/DisplayDuration.vue
index d061a67d..8b56f241 100644
--- a/packages/vite/src/app/components/display/Duration.vue
+++ b/packages/ui/src/components/DisplayDuration.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { formatDuration } from '~/utils/format'
+import { formatDuration } from '../utils/format'
+import DisplayNumberWithUnit from './DisplayNumberWithUnit.vue'
 
 const props = withDefaults(
   defineProps<{
diff --git a/packages/vite/src/app/components/display/IconButton.vue b/packages/ui/src/components/DisplayIconButton.vue
similarity index 100%
rename from packages/vite/src/app/components/display/IconButton.vue
rename to packages/ui/src/components/DisplayIconButton.vue
diff --git a/packages/vite/src/app/components/display/NumberBadge.vue b/packages/ui/src/components/DisplayNumberBadge.vue
similarity index 100%
rename from packages/vite/src/app/components/display/NumberBadge.vue
rename to packages/ui/src/components/DisplayNumberBadge.vue
diff --git a/packages/vite/src/app/components/display/NumberWithUnit.vue b/packages/ui/src/components/DisplayNumberWithUnit.vue
similarity index 100%
rename from packages/vite/src/app/components/display/NumberWithUnit.vue
rename to packages/ui/src/components/DisplayNumberWithUnit.vue
diff --git a/packages/vite/src/app/components/display/Timestamp.vue b/packages/ui/src/components/DisplayTimestamp.vue
similarity index 100%
rename from packages/vite/src/app/components/display/Timestamp.vue
rename to packages/ui/src/components/DisplayTimestamp.vue
diff --git a/packages/ui/src/utils/__tests__/color.test.ts b/packages/ui/src/utils/__tests__/color.test.ts
new file mode 100644
index 00000000..b8baa0dc
--- /dev/null
+++ b/packages/ui/src/utils/__tests__/color.test.ts
@@ -0,0 +1,36 @@
+import { isDark } from '@vitejs/devtools-ui/composables/dark'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { getHashColorFromString, getHsla } from '../color'
+
+describe('getHashColorFromString', () => {
+  it('should get the same color with the same string', () => {
+    expect(getHashColorFromString('Vite')).toBe(getHashColorFromString('Vite'))
+  })
+  it('should get different colors with different strings', () => {
+    expect(getHashColorFromString('Vite')).not.toBe(getHashColorFromString('DevTools'))
+  })
+})
+
+describe('getHsla', () => {
+  beforeEach(() => {
+    isDark.value = false
+  })
+
+  it('light mode with default opacity', () => {
+    expect(getHsla(180)).toBe('hsla(180, 65%, 40%, 1)')
+  })
+
+  it('light mode with custom opacity', () => {
+    expect(getHsla(180, 0.5)).toBe('hsla(180, 65%, 40%, 0.5)')
+  })
+
+  it('dark mode with default opacity', () => {
+    isDark.value = true
+    expect(getHsla(180)).toBe('hsla(180, 50%, 60%, 1)')
+  })
+
+  it('dark mode with custom opacity', () => {
+    isDark.value = true
+    expect(getHsla(180, 0.8)).toBe('hsla(180, 50%, 60%, 0.8)')
+  })
+})
diff --git a/packages/ui/src/utils/color.ts b/packages/ui/src/utils/color.ts
new file mode 100644
index 00000000..951f85f4
--- /dev/null
+++ b/packages/ui/src/utils/color.ts
@@ -0,0 +1,21 @@
+import { isDark } from '../composables/dark'
+
+export function getHashColorFromString(
+  name: string,
+  opacity: number | string = 1,
+) {
+  let hash = 0
+  for (let i = 0; i < name.length; i++)
+    hash = name.charCodeAt(i) + ((hash << 5) - hash)
+  const h = hash % 360
+  return getHsla(h, opacity)
+}
+
+export function getHsla(
+  hue: number,
+  opacity: number | string = 1,
+) {
+  const saturation = isDark.value ? 50 : 65
+  const lightness = isDark.value ? 60 : 40
+  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`
+}
diff --git a/packages/ui/src/utils/format.ts b/packages/ui/src/utils/format.ts
new file mode 100644
index 00000000..8413cedf
--- /dev/null
+++ b/packages/ui/src/utils/format.ts
@@ -0,0 +1,19 @@
+export function formatDuration(ms: number | null | undefined): string[]
+export function formatDuration(ms: number | null | undefined, stringify: true): string
+export function formatDuration(ms: number | null | undefined, stringify: false): string[]
+export function formatDuration(ms: number | null | undefined, stringify?: boolean): string | string[] {
+  let duration = []
+
+  if (ms == null)
+    duration = ['', '-']
+  else if (ms < 1)
+    duration = ['<1', 'ms']
+  else if (ms < 1000)
+    duration = [ms.toFixed(0), 'ms']
+  else if (ms < 1000 * 60)
+    duration = [(ms / 1000).toFixed(1), 's']
+  else
+    duration = [(ms / 1000 / 60).toFixed(1), 'min']
+
+  return stringify ? duration.join(' ') : duration
+}
diff --git a/packages/vite/src/app/components/assets/BaseInfo.vue b/packages/vite/src/app/components/assets/BaseInfo.vue
index c561eb68..0479a47f 100644
--- a/packages/vite/src/app/components/assets/BaseInfo.vue
+++ b/packages/vite/src/app/components/assets/BaseInfo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RolldownAssetInfo } from '~~/shared/types'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 
 defineProps<{
   asset: RolldownAssetInfo
diff --git a/packages/vite/src/app/components/assets/List.vue b/packages/vite/src/app/components/assets/List.vue
index d47319c9..17c32a08 100644
--- a/packages/vite/src/app/components/assets/List.vue
+++ b/packages/vite/src/app/components/assets/List.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RolldownAssetInfo } from '~~/shared/types'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
 
 defineProps<{
   assets: RolldownAssetInfo[]
diff --git a/packages/vite/src/app/components/chart/ModuleFlamegraph.vue b/packages/vite/src/app/components/chart/ModuleFlamegraph.vue
index 30779970..74a00790 100644
--- a/packages/vite/src/app/components/chart/ModuleFlamegraph.vue
+++ b/packages/vite/src/app/components/chart/ModuleFlamegraph.vue
@@ -7,6 +7,7 @@ import type {
   RolldownResolveInfo,
   SessionContext,
 } from '~~/shared/types'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
 import { Flamegraph, normalizeTreeNode } from 'nanovis'
 import { computed, nextTick, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue'
 import { normalizeTimestamp } from '~/utils/format'
diff --git a/packages/vite/src/app/components/chunks/BaseInfo.vue b/packages/vite/src/app/components/chunks/BaseInfo.vue
index b2fd9421..96e6db82 100644
--- a/packages/vite/src/app/components/chunks/BaseInfo.vue
+++ b/packages/vite/src/app/components/chunks/BaseInfo.vue
@@ -2,6 +2,7 @@
 import type { RolldownChunkImport, RolldownChunkInfo } from '~~/shared/types/data'
 import { useRoute } from '#app/composables/router'
 import { NuxtLink } from '#components'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import { computed } from 'vue'
 
 const props = withDefaults(defineProps<{
diff --git a/packages/vite/src/app/components/chunks/FlatList.vue b/packages/vite/src/app/components/chunks/FlatList.vue
index 5d0365fd..e234050c 100644
--- a/packages/vite/src/app/components/chunks/FlatList.vue
+++ b/packages/vite/src/app/components/chunks/FlatList.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { RolldownChunkInfo, SessionContext } from '~~/shared/types'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 
 withDefaults(defineProps<{
   chunks: Array<RolldownChunkInfo & { id: string }>
diff --git a/packages/vite/src/app/components/chunks/Graph.vue b/packages/vite/src/app/components/chunks/Graph.vue
index 3aa92d3d..ad4bc350 100644
--- a/packages/vite/src/app/components/chunks/Graph.vue
+++ b/packages/vite/src/app/components/chunks/Graph.vue
@@ -3,6 +3,7 @@ import type { ChunkImport } from '@rolldown/debug'
 import type { RolldownChunkInfo, SessionContext } from '~~/shared/types/data'
 import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/module-graph'
 import { useRoute } from '#app/composables/router'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import { computed, nextTick, unref } from 'vue'
 import { createModuleGraph } from '~/composables/module-graph'
 
diff --git a/packages/vite/src/app/components/chunks/Imports.vue b/packages/vite/src/app/components/chunks/Imports.vue
index fcd98f4b..1f3f1869 100644
--- a/packages/vite/src/app/components/chunks/Imports.vue
+++ b/packages/vite/src/app/components/chunks/Imports.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { RolldownChunkImport } from '~~/shared/types/data'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 
 defineProps<{
   imports: RolldownChunkImport[]
diff --git a/packages/vite/src/app/components/data/AssetDetails.vue b/packages/vite/src/app/components/data/AssetDetails.vue
index c2b716be..73e5588a 100644
--- a/packages/vite/src/app/components/data/AssetDetails.vue
+++ b/packages/vite/src/app/components/data/AssetDetails.vue
@@ -2,6 +2,9 @@
 import type { RolldownAssetInfo, RolldownChunkInfo, SessionContext } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
 import { useRpc } from '#imports'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
+import DisplayIconButton from '@vitejs/devtools-ui/components/DisplayIconButton.vue'
 import { useAsyncState } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { settings } from '~~/app/state/settings'
diff --git a/packages/vite/src/app/components/data/AssetDetailsLoader.vue b/packages/vite/src/app/components/data/AssetDetailsLoader.vue
index 32016271..ebe0c578 100644
--- a/packages/vite/src/app/components/data/AssetDetailsLoader.vue
+++ b/packages/vite/src/app/components/data/AssetDetailsLoader.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { RolldownAssetInfo, RolldownChunkInfo, SessionContext } from '~~/shared/types'
 import { useRpc } from '#imports'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
 import { useAsyncState } from '@vueuse/core'
 
 const props = defineProps<{
diff --git a/packages/vite/src/app/components/data/ChunkDetails.vue b/packages/vite/src/app/components/data/ChunkDetails.vue
index e7d2907e..10c20594 100644
--- a/packages/vite/src/app/components/data/ChunkDetails.vue
+++ b/packages/vite/src/app/components/data/ChunkDetails.vue
@@ -2,6 +2,7 @@
 import type { RolldownChunkImport, RolldownChunkInfo, SessionContext } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
 import { useRpc } from '#imports'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'
diff --git a/packages/vite/src/app/components/data/ChunkDetailsLoader.vue b/packages/vite/src/app/components/data/ChunkDetailsLoader.vue
index 94418f20..632a2ae3 100644
--- a/packages/vite/src/app/components/data/ChunkDetailsLoader.vue
+++ b/packages/vite/src/app/components/data/ChunkDetailsLoader.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { SessionContext } from '~~/shared/types/data'
 import { useRpc } from '#imports'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
 import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { useAsyncState } from '@vueuse/core'
 
diff --git a/packages/vite/src/app/components/data/ModuleDetailsLoader.vue b/packages/vite/src/app/components/data/ModuleDetailsLoader.vue
index 73e36a71..9d7d4360 100644
--- a/packages/vite/src/app/components/data/ModuleDetailsLoader.vue
+++ b/packages/vite/src/app/components/data/ModuleDetailsLoader.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ModuleInfo, RolldownModuleTransformInfo, SessionContext } from '~~/shared/types'
 import { useRpc } from '#imports'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
 import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { computedAsync } from '@vueuse/core'
 import { nextTick, ref, watchEffect } from 'vue'
diff --git a/packages/vite/src/app/components/data/PackageDetailsLoader.vue b/packages/vite/src/app/components/data/PackageDetailsLoader.vue
index 6152dbba..830a37b6 100644
--- a/packages/vite/src/app/components/data/PackageDetailsLoader.vue
+++ b/packages/vite/src/app/components/data/PackageDetailsLoader.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { SessionContext } from '~~/shared/types/data'
 import { useRpc } from '#imports'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
 import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'
diff --git a/packages/vite/src/app/components/data/PathSelector.vue b/packages/vite/src/app/components/data/PathSelector.vue
index 3a2c438d..c7c297a7 100644
--- a/packages/vite/src/app/components/data/PathSelector.vue
+++ b/packages/vite/src/app/components/data/PathSelector.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts"  generic="T extends { id:string, imports: Record<string, unknown>[] }">
 import type { SessionContext } from '~~/shared/types'
 import type { GraphPathSelector } from '~/composables/graph-path-selector'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
 import { computed, watch } from 'vue'
 import { useGraphPathSelector } from '~/composables/graph-path-selector'
 
diff --git a/packages/vite/src/app/components/data/PluginDetailsLoader.vue b/packages/vite/src/app/components/data/PluginDetailsLoader.vue
index a64f2430..1a79fbbe 100644
--- a/packages/vite/src/app/components/data/PluginDetailsLoader.vue
+++ b/packages/vite/src/app/components/data/PluginDetailsLoader.vue
@@ -4,14 +4,18 @@ import type { PluginBuildInfo, SessionContext } from '~~/shared/types'
 import type { PluginChartInfo, PluginChartNode } from '~/types/chart'
 import { useRoute } from '#app/composables/router'
 import { useRpc } from '#imports'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
 import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
+import { formatDuration } from '@vitejs/devtools-ui/utils/format'
 import { useAsyncState, useMouse } from '@vueuse/core'
 import { normalizeTreeNode, Sunburst } from 'nanovis'
 import { computed, reactive, watch } from 'vue'
 import { settings } from '~~/app/state/settings'
 import { useChartGraph } from '~/composables/chart'
 import { parseReadablePath } from '~/utils/filepath'
-import { formatDuration, normalizeTimestamp } from '~/utils/format'
+import { normalizeTimestamp } from '~/utils/format'
 import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
 
 const props = defineProps<{
diff --git a/packages/vite/src/app/components/data/PluginDetailsTable.vue b/packages/vite/src/app/components/data/PluginDetailsTable.vue
index 5309909d..91ff74fd 100644
--- a/packages/vite/src/app/components/data/PluginDetailsTable.vue
+++ b/packages/vite/src/app/components/data/PluginDetailsTable.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { RolldownPluginBuildMetrics, SessionContext } from '~~/shared/types/data'
 import type { FilterMatchRule } from '~/utils/icon'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
 import { useCycleList } from '@vueuse/core'
 import { Menu as VMenu } from 'floating-vue'
 import { computed, ref } from 'vue'
diff --git a/packages/vite/src/app/components/data/RawEventsTable.vue b/packages/vite/src/app/components/data/RawEventsTable.vue
index 6f4bc5c1..4f59380d 100644
--- a/packages/vite/src/app/components/data/RawEventsTable.vue
+++ b/packages/vite/src/app/components/data/RawEventsTable.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { RolldownEvent } from '~~/node/rolldown/events-manager'
 import type { SessionContext } from '~~/shared/types'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import DisplayTimestamp from '@vitejs/devtools-ui/components/DisplayTimestamp.vue'
 import { Dropdown as VDropdown } from 'floating-vue'
 
 type FIELDS = 'module_id' | 'action' | 'content' | 'timestamp' | 'event_id' | 'plugin_name' | '*'
diff --git a/packages/vite/src/app/components/display/ClusterBadge.vue b/packages/vite/src/app/components/display/ClusterBadge.vue
index b745b573..edfed1b0 100644
--- a/packages/vite/src/app/components/display/ClusterBadge.vue
+++ b/packages/vite/src/app/components/display/ClusterBadge.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { getHashColorFromString } from '@vitejs/devtools-ui/utils/color'
 import { Tooltip } from 'floating-vue'
 import { computed } from 'vue'
-import { getHashColorFromString } from '~/utils/color'
 
 const props = defineProps<{
   cluster: string
diff --git a/packages/vite/src/app/components/display/ExpandableContainer.vue b/packages/vite/src/app/components/display/ExpandableContainer.vue
index 3a025512..051916d4 100644
--- a/packages/vite/src/app/components/display/ExpandableContainer.vue
+++ b/packages/vite/src/app/components/display/ExpandableContainer.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts" generic="T">
+import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
 import { computed } from 'vue'
 
 const props = defineProps<{
diff --git a/packages/vite/src/app/components/display/ModuleId.vue b/packages/vite/src/app/components/display/ModuleId.vue
index 9ae9a355..6b1ec4fc 100644
--- a/packages/vite/src/app/components/display/ModuleId.vue
+++ b/packages/vite/src/app/components/display/ModuleId.vue
@@ -3,6 +3,7 @@ import type { ModuleImport } from '@rolldown/debug'
 import type { SessionContext } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
 import { NuxtLink } from '#components'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import { Tooltip } from 'floating-vue'
 import { relative } from 'pathe'
 import { computed } from 'vue'
diff --git a/packages/vite/src/app/components/flowmap/ModuleFlowDetails.vue b/packages/vite/src/app/components/flowmap/ModuleFlowDetails.vue
index 4fefe8b8..27d1417a 100644
--- a/packages/vite/src/app/components/flowmap/ModuleFlowDetails.vue
+++ b/packages/vite/src/app/components/flowmap/ModuleFlowDetails.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { RolldownChunkInfo, RolldownModuleFlowNode, SessionContext } from '~~/shared/types'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
+import DisplayIconButton from '@vitejs/devtools-ui/components/DisplayIconButton.vue'
 import { computed } from 'vue'
 import { settings } from '~~/app/state/settings'
 import PluginName from '../display/PluginName.vue'
diff --git a/packages/vite/src/app/components/flowmap/NodeAssetInfo.vue b/packages/vite/src/app/components/flowmap/NodeAssetInfo.vue
index 25e1bae0..acbaa09c 100644
--- a/packages/vite/src/app/components/flowmap/NodeAssetInfo.vue
+++ b/packages/vite/src/app/components/flowmap/NodeAssetInfo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RolldownAssetInfo, SessionContext } from '~~/shared/types'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 
 defineProps<{
   item: RolldownAssetInfo
diff --git a/packages/vite/src/app/components/flowmap/NodeChunkInfo.vue b/packages/vite/src/app/components/flowmap/NodeChunkInfo.vue
index b2007a40..391b705d 100644
--- a/packages/vite/src/app/components/flowmap/NodeChunkInfo.vue
+++ b/packages/vite/src/app/components/flowmap/NodeChunkInfo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RolldownChunkInfo, SessionContext } from '~~/shared/types'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 
 defineProps<{
   item: RolldownChunkInfo
diff --git a/packages/vite/src/app/components/flowmap/NodeModuleInfo.vue b/packages/vite/src/app/components/flowmap/NodeModuleInfo.vue
index fa99221f..4a8a754f 100644
--- a/packages/vite/src/app/components/flowmap/NodeModuleInfo.vue
+++ b/packages/vite/src/app/components/flowmap/NodeModuleInfo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RolldownModuleFlowNode, SessionContext } from '~~/shared/types'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
 import { computed } from 'vue'
 import { isFlowmapSwapping } from '~/state/flowmap'
 
diff --git a/packages/vite/src/app/components/flowmap/NodePluginInfo.vue b/packages/vite/src/app/components/flowmap/NodePluginInfo.vue
index c451c920..8263bc94 100644
--- a/packages/vite/src/app/components/flowmap/NodePluginInfo.vue
+++ b/packages/vite/src/app/components/flowmap/NodePluginInfo.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { formatDuration } from '~/utils/format'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
+import { formatDuration } from '@vitejs/devtools-ui/utils/format'
 
 defineProps<{
   modules: number
diff --git a/packages/vite/src/app/components/flowmap/PluginFlow.vue b/packages/vite/src/app/components/flowmap/PluginFlow.vue
index 685c41df..7a580799 100644
--- a/packages/vite/src/app/components/flowmap/PluginFlow.vue
+++ b/packages/vite/src/app/components/flowmap/PluginFlow.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { ClientSettings } from '~~/app/state/settings'
 import type { RolldownPluginBuildMetrics, SessionContext } from '~~/shared/types/data'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
 import { useCycleList, useToggle } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import { settings } from '~~/app/state/settings'
diff --git a/packages/vite/src/app/components/modules/BuildMetrics.vue b/packages/vite/src/app/components/modules/BuildMetrics.vue
index c1196304..4d6ae189 100644
--- a/packages/vite/src/app/components/modules/BuildMetrics.vue
+++ b/packages/vite/src/app/components/modules/BuildMetrics.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { ModuleBuildMetrics } from '~~/shared/types'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import { formatDuration } from '@vitejs/devtools-ui/utils/format'
 import { computed } from 'vue'
-import { formatDuration } from '~/utils/format'
 
 const props = defineProps<{
   metrics: ModuleBuildMetrics
diff --git a/packages/vite/src/app/components/modules/DetailedList.vue b/packages/vite/src/app/components/modules/DetailedList.vue
index 77aeb51d..a494b1ec 100644
--- a/packages/vite/src/app/components/modules/DetailedList.vue
+++ b/packages/vite/src/app/components/modules/DetailedList.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ModuleListItem, SessionContext } from '~~/shared/types'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
 import { computed } from 'vue'
 
 const props = defineProps<{
diff --git a/packages/vite/src/app/components/modules/FlatList.vue b/packages/vite/src/app/components/modules/FlatList.vue
index 3c2d5a77..ca744093 100644
--- a/packages/vite/src/app/components/modules/FlatList.vue
+++ b/packages/vite/src/app/components/modules/FlatList.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ModuleListItem, SessionContext } from '~~/shared/types'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
 
 withDefaults(defineProps<{
   session: SessionContext
diff --git a/packages/vite/src/app/components/packages/Importers.vue b/packages/vite/src/app/components/packages/Importers.vue
index 8f213c62..a14f20cd 100644
--- a/packages/vite/src/app/components/packages/Importers.vue
+++ b/packages/vite/src/app/components/packages/Importers.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PackageInfo, SessionContext } from '~~/shared/types/data'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import { computed } from 'vue'
 
 const props = defineProps<{
diff --git a/packages/vite/src/app/components/packages/Table.vue b/packages/vite/src/app/components/packages/Table.vue
index 6d733102..c80cec1e 100644
--- a/packages/vite/src/app/components/packages/Table.vue
+++ b/packages/vite/src/app/components/packages/Table.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { PackageInfo, SessionContext } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
 import { useCycleList } from '@vueuse/core'
 import { Tooltip, Menu as VMenu } from 'floating-vue'
 import { settings } from '~~/app/state/settings'
diff --git a/packages/vite/src/app/components/panel/SessionSelector.vue b/packages/vite/src/app/components/panel/SessionSelector.vue
index 104682ba..4f2d0528 100644
--- a/packages/vite/src/app/components/panel/SessionSelector.vue
+++ b/packages/vite/src/app/components/panel/SessionSelector.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { BuildInfo } from '~~/node/rolldown/logs-manager'
 import { NuxtLink } from '#components'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import DisplayTimestamp from '@vitejs/devtools-ui/components/DisplayTimestamp.vue'
 import { computed } from 'vue'
 import { parseReadablePath } from '~/utils/filepath'
 
diff --git a/packages/vite/src/app/components/plugins/FlatList.vue b/packages/vite/src/app/components/plugins/FlatList.vue
index c4fff0ed..be0facc2 100644
--- a/packages/vite/src/app/components/plugins/FlatList.vue
+++ b/packages/vite/src/app/components/plugins/FlatList.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { PluginItem } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
 
 defineProps<{
   plugins: PluginItem[]
diff --git a/packages/vite/src/app/components/plugins/Sunburst.vue b/packages/vite/src/app/components/plugins/Sunburst.vue
index 3f43a771..f08f83c1 100644
--- a/packages/vite/src/app/components/plugins/Sunburst.vue
+++ b/packages/vite/src/app/components/plugins/Sunburst.vue
@@ -2,6 +2,7 @@
 import type { GraphBase, GraphBaseOptions } from 'nanovis'
 import type { SessionContext } from '~~/shared/types'
 import type { PluginChartInfo, PluginChartNode } from '~/types/chart'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
 import { colorToCssBackground } from 'nanovis'
 import { useTemplateRef, watchEffect } from 'vue'
 
diff --git a/packages/vite/src/app/pages/session/[session]/chunks.vue b/packages/vite/src/app/pages/session/[session]/chunks.vue
index 2d0a06ce..c729e403 100644
--- a/packages/vite/src/app/pages/session/[session]/chunks.vue
+++ b/packages/vite/src/app/pages/session/[session]/chunks.vue
@@ -3,6 +3,7 @@ import type { RolldownChunkInfo, SessionContext } from '~~/shared/types/data'
 import type { ClientSettings } from '~/state/settings'
 import type { ChunkChartInfo, ChunkChartNode } from '~/types/chart'
 import { useRpc } from '#imports'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { computedWithControl, useAsyncState, useMouse } from '@vueuse/core'
 import Fuse from 'fuse.js'
diff --git a/packages/vite/src/app/pages/session/[session]/index.vue b/packages/vite/src/app/pages/session/[session]/index.vue
index 8e892067..43a9a811 100644
--- a/packages/vite/src/app/pages/session/[session]/index.vue
+++ b/packages/vite/src/app/pages/session/[session]/index.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import type { SessionContext } from '~~/shared/types'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
 import { computed } from 'vue'
 import { sideNavItems } from '~~/app/state/nav'
 
diff --git a/packages/vite/src/app/utils/__tests__/color.test.ts b/packages/vite/src/app/utils/__tests__/color.test.ts
index 3914e3f7..7f5da53a 100644
--- a/packages/vite/src/app/utils/__tests__/color.test.ts
+++ b/packages/vite/src/app/utils/__tests__/color.test.ts
@@ -1,39 +1,6 @@
-import { isDark } from '@vitejs/devtools-ui/composables/dark'
-import { beforeEach, describe, expect, it } from 'vitest'
-import { getHashColorFromString, getHsla, getPluginColor, predefinedColorMap } from '../color'
-
-describe('getHashColorFromString', () => {
-  it('should get the same color with the same string', () => {
-    expect(getHashColorFromString('Vite')).toBe(getHashColorFromString('Vite'))
-  })
-  it('should get different colors with different strings', () => {
-    expect(getHashColorFromString('Vite')).not.toBe(getHashColorFromString('DevTools'))
-  })
-})
-
-describe('getHsla', () => {
-  beforeEach(() => {
-    isDark.value = false
-  })
-
-  it('light mode with default opacity', () => {
-    expect(getHsla(180)).toBe('hsla(180, 65%, 40%, 1)')
-  })
-
-  it('light mode with custom opacity', () => {
-    expect(getHsla(180, 0.5)).toBe('hsla(180, 65%, 40%, 0.5)')
-  })
-
-  it('dark mode with default opacity', () => {
-    isDark.value = true
-    expect(getHsla(180)).toBe('hsla(180, 50%, 60%, 1)')
-  })
-
-  it('dark mode with custom opacity', () => {
-    isDark.value = true
-    expect(getHsla(180, 0.8)).toBe('hsla(180, 50%, 60%, 0.8)')
-  })
-})
+import { getHashColorFromString, getHsla } from '@vitejs/devtools-ui/utils/color'
+import { describe, expect, it } from 'vitest'
+import { getPluginColor, predefinedColorMap } from '../color'
 
 describe('getPluginColor', () => {
   it('should use predefinedColorMap with known name', () => {
diff --git a/packages/vite/src/app/utils/color.ts b/packages/vite/src/app/utils/color.ts
index 0b64b9c8..fa4b89e8 100644
--- a/packages/vite/src/app/utils/color.ts
+++ b/packages/vite/src/app/utils/color.ts
@@ -1,24 +1,4 @@
-import { isDark } from '@vitejs/devtools-ui/composables/dark'
-
-export function getHashColorFromString(
-  name: string,
-  opacity: number | string = 1,
-) {
-  let hash = 0
-  for (let i = 0; i < name.length; i++)
-    hash = name.charCodeAt(i) + ((hash << 5) - hash)
-  const h = hash % 360
-  return getHsla(h, opacity)
-}
-
-export function getHsla(
-  hue: number,
-  opacity: number | string = 1,
-) {
-  const saturation = isDark.value ? 50 : 65
-  const lightness = isDark.value ? 60 : 40
-  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`
-}
+import { getHashColorFromString, getHsla } from '@vitejs/devtools-ui/utils/color'
 
 /**
  * Predefined color map for matching the branding
diff --git a/packages/vite/src/app/utils/format.ts b/packages/vite/src/app/utils/format.ts
index 5e6b4898..87148dff 100644
--- a/packages/vite/src/app/utils/format.ts
+++ b/packages/vite/src/app/utils/format.ts
@@ -70,23 +70,3 @@ export function normalizeTimestamp(timestamp: number) {
     fractionalSecondDigits: 3,
   })
 }
-
-export function formatDuration(ms: number | null | undefined): string[]
-export function formatDuration(ms: number | null | undefined, stringify: true): string
-export function formatDuration(ms: number | null | undefined, stringify: false): string[]
-export function formatDuration(ms: number | null | undefined, stringify?: boolean): string | string[] {
-  let duration = []
-
-  if (ms == null)
-    duration = ['', '-']
-  else if (ms < 1)
-    duration = ['<1', 'ms']
-  else if (ms < 1000)
-    duration = [ms.toFixed(0), 'ms']
-  else if (ms < 1000 * 60)
-    duration = [(ms / 1000).toFixed(1), 's']
-  else
-    duration = [(ms / 1000 / 60).toFixed(1), 'min']
-
-  return stringify ? duration.join(' ') : duration
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2a54e652..74ec0078 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -686,6 +686,9 @@ importers:
       vue:
         specifier: '*'
         version: 3.5.27(typescript@5.9.3)
+      vue-virtual-scroller:
+        specifier: '>=2.0.0-beta.0'
+        version: 2.0.0-beta.8(vue@3.5.27(typescript@5.9.3))
 
   packages/vite:
     dependencies:
diff --git a/tsconfig.base.json b/tsconfig.base.json
index af0366ef..61d2d5b9 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -59,6 +59,9 @@
       ],
       "@vitejs/devtools-ui/composables": [
         "./packages/ui/src/composables"
+      ],
+      "@vitejs/devtools-ui/utils": [
+        "./packages/ui/src/utils"
       ]
     },
     "resolveJsonModule": true,