From 4b157a104596f9d81bf8e774718f4bcd98f4154f Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 21 Aug 2024 21:04:42 +0200
Subject: [PATCH 01/17] feat: add UI improvements

---
 playground/src/App.vue                    |  5 +++++
 playground/src/router/index.ts            |  5 +++++
 playground/src/views/Error.vue            | 15 +++++++++++++
 playground/src/views/Other.vue            | 12 +++++++++-
 playground/src/vite-env.d.ts              |  4 ++++
 playground/vite.config.ts                 | 23 ++++++++++++++++++-
 src/client/components/DurationDisplay.vue | 27 ++++++++++++++++++-----
 src/client/components/ErrorDisplay.vue    |  8 +++----
 src/client/components/FilepathItem.vue    |  6 ++---
 src/client/components/ModuleId.vue        |  2 +-
 src/client/components/ModuleList.vue      | 10 ++++-----
 src/client/components/PluginName.vue      |  4 ++--
 src/client/pages/index/module.vue         | 12 +++++-----
 uno.config.ts                             | 11 +++++++++
 14 files changed, 115 insertions(+), 29 deletions(-)
 create mode 100644 playground/src/views/Error.vue

diff --git a/playground/src/App.vue b/playground/src/App.vue
index 4abaf77..8fce66a 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -8,9 +8,14 @@ import { RouterLink, RouterView } from 'vue-router'
       <RouterLink to="/">
         Home
       </RouterLink>
+      <span px-1rem>|</span>
       <RouterLink to="/other">
         Other
       </RouterLink>
+      <span px-1rem>|</span>
+      <RouterLink to="/error">
+        Error
+      </RouterLink>
     </nav>
 
     <RouterView />
diff --git a/playground/src/router/index.ts b/playground/src/router/index.ts
index 8292351..bf5207b 100644
--- a/playground/src/router/index.ts
+++ b/playground/src/router/index.ts
@@ -14,6 +14,11 @@ const router = createRouter({
       path: '/other',
       component: () => import('../views/Other.vue'),
     },
+    {
+      name: 'error',
+      path: '/error',
+      component: () => import('../views/Error.vue'),
+    },
   ],
 })
 
diff --git a/playground/src/views/Error.vue b/playground/src/views/Error.vue
new file mode 100644
index 0000000..5c4ea1d
--- /dev/null
+++ b/playground/src/views/Error.vue
@@ -0,0 +1,15 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+
+const message = ref('Loading...')
+
+onMounted(() => {
+  import('virtual:slow:error').catch(err => message.value = err.message)
+})
+</script>
+
+<template>
+  <div>
+    <div>Slow Error Message: {{ message }}</div>
+  </div>
+</template>
diff --git a/playground/src/views/Other.vue b/playground/src/views/Other.vue
index a1665a0..d832f41 100644
--- a/playground/src/views/Other.vue
+++ b/playground/src/views/Other.vue
@@ -1,7 +1,17 @@
 <script setup>
+import { onMounted, ref } from 'vue'
 import message from 'virtual:hi'
+
+const message2 = ref('Loading...')
+
+onMounted(() => {
+  import('virtual:slow:2').then(m => message2.value = m.default)
+})
 </script>
 
 <template>
-  <div>Other: {{ message }}</div>
+  <div>
+    <div>Other: {{ message }}</div>
+    <div>Slow Message: {{ message2 }}</div>
+  </div>
 </template>
diff --git a/playground/src/vite-env.d.ts b/playground/src/vite-env.d.ts
index ed4f286..dc53bc8 100644
--- a/playground/src/vite-env.d.ts
+++ b/playground/src/vite-env.d.ts
@@ -2,3 +2,7 @@ declare module 'virtual:hi' {
   const value: string
   export default value
 }
+declare module 'virtual:slow:*' {
+  const value: string
+  export default value
+}
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
index 18994e2..218b07e 100644
--- a/playground/vite.config.ts
+++ b/playground/vite.config.ts
@@ -10,7 +10,7 @@ export default defineConfig({
   plugins: [
     vue(),
     {
-      name: 'custom-loader',
+      name: 'virtual-loader',
       resolveId(id) {
         return id === 'virtual:hi' ? `\0${id}` : undefined
       },
@@ -19,6 +19,27 @@ export default defineConfig({
           return 'export default \'Hi!\''
       },
     },
+    {
+      name: 'slow-virtual-loader',
+      // for testing purpose, don't change it
+      enforce: 'post',
+      resolveId(id) {
+        return id.startsWith('virtual:slow:') ? `\0${id}` : undefined
+      },
+      async load(id) {
+        if (!id.startsWith('\0virtual:slow:'))
+          return
+
+        const matcher = /^\0virtual:slow:(\d)$/.exec(id)
+        if (matcher) {
+          const timeout = +matcher[1]
+          await new Promise(resolve => setTimeout(resolve, timeout * 1000))
+          return `export default 'Hi after ${timeout} seconds!'`
+        }
+
+        throw new Error('Invalid timeout!')
+      },
+    },
     Inspect({
       build: true,
       open: true,
diff --git a/src/client/components/DurationDisplay.vue b/src/client/components/DurationDisplay.vue
index f9d3782..f73fa4a 100644
--- a/src/client/components/DurationDisplay.vue
+++ b/src/client/components/DurationDisplay.vue
@@ -15,16 +15,16 @@ function getDurationColor(duration: number | undefined) {
   if (!props.color)
     return ''
   if (duration == null)
-    return 'text-gray:75'
+    return 'status-gray'
   duration = duration * props.factor
   if (duration < 1)
-    return 'text-gray:75'
+    return 'status-gray'
   if (duration > 1000)
-    return 'text-red-400'
+    return 'status-red'
   if (duration > 500)
-    return 'text-orange-400'
+    return 'status-yellow'
   if (duration > 200)
-    return 'text-yellow-400'
+    return 'status-green'
   return ''
 }
 
@@ -43,6 +43,21 @@ const units = computed(() => {
 
 <template>
   <div :class="getDurationColor(duration)">
-    {{ units[0] }}<span ml-0.4 text-xs op50>{{ units[1] }}</span>
+    <span>{{ units[0] }}</span><span ml-0.4 text-xs>{{ units[1] }}</span>
   </div>
 </template>
+
+<style scoped>
+div:not(.status-red) > span:first-of-type {
+  @apply op80 dark:op65;
+}
+div:not(.status-red) > span:last-of-type {
+  @apply op75 dark:op50;
+}
+div.status-red > span:first-of-type {
+  @apply op80 dark:op95;
+}
+div.status-red > span:last-of-type {
+  @apply op75 dark:op90;
+}
+</style>
diff --git a/src/client/components/ErrorDisplay.vue b/src/client/components/ErrorDisplay.vue
index a250687..4aafa06 100644
--- a/src/client/components/ErrorDisplay.vue
+++ b/src/client/components/ErrorDisplay.vue
@@ -14,15 +14,15 @@ function normalizeFilename(filename?: string) {
 
 <template>
   <div of-auto p4 font-mono flex="~ col gap-4">
-    <div text-xl text-red7 dark:text-red flex="~ gap-2 items-center">
+    <div text-xl status-red flex="~ gap-2 items-center">
       <div i-carbon:warning-square />
       Error
     </div>
-    <pre text-sm text-red7 dark:text-red>{{ error.message }}</pre>
+    <pre text-sm status-red>{{ error.message }}</pre>
     <div border="t main" h-1px w-full />
     <div class="text-xs" mt2 grid="~ cols-[max-content_1fr] gap-x-4 gap-y-1" font-mono>
-      <template v-for="item, idx of error.stack" :key="idx">
-        <div text-right op50>
+      <template v-for="(item, idx) of error.stack" :key="idx">
+        <div text-right op72 dark:op50>
           {{ item.functionName || `(anonymous)` }}
         </div>
         <div ws-nowrap>
diff --git a/src/client/components/FilepathItem.vue b/src/client/components/FilepathItem.vue
index fda4111..1ded2e1 100644
--- a/src/client/components/FilepathItem.vue
+++ b/src/client/components/FilepathItem.vue
@@ -22,8 +22,8 @@ const display = computed(() => {
 
 <template>
   <button flex="~" hover="underline" @click="openInEditor">
-    <span>{{ display[0] }}</span>
-    <span op60>{{ display[1] }}</span>
-    <span v-if="props.line != null && props.column != null" op50>:{{ props.line }}:{{ props.column }}</span>
+    <span fw-600 dark:fw-unset>{{ display[0] }}</span>
+    <span op72 dark:op50>{{ display[1] }}</span>
+    <span v-if="props.line != null && props.column != null" op72 dark:op50>:{{ props.line }}:{{ props.column }}</span>
   </button>
 </template>
diff --git a/src/client/components/ModuleId.vue b/src/client/components/ModuleId.vue
index 7315681..c364f00 100644
--- a/src/client/components/ModuleId.vue
+++ b/src/client/components/ModuleId.vue
@@ -27,7 +27,7 @@ const isVirtual = computed(() => list.value?.modules.find(i => i.id === props.id
 
     <Badge
       v-if="isVirtual"
-      class="ml1 bg-teal-400:10 text-green-700 dark:text-teal-400"
+      class="ml1 badge-green"
       v-text="'virtual'"
     />
   </div>
diff --git a/src/client/components/ModuleList.vue b/src/client/components/ModuleList.vue
index f8a64a2..712b138 100644
--- a/src/client/components/ModuleList.vue
+++ b/src/client/components/ModuleList.vue
@@ -54,26 +54,26 @@ function byteToHumanReadable(byte: number) {
               :key="i"
             >
               <span v-if="idx !== 0" op20>|</span>
-              <span op50>
+              <span>
                 <PluginName :name="i.name" :hide="true" />
               </span>
             </template>
             <template v-if="m.data.invokeCount > 2">
               <span op40>·</span>
               <span
-                text-green
+                status-green
                 :title="`Transform invoked ${m.data.invokeCount} times`"
               >x{{ m.data.invokeCount }}</span>
             </template>
             <div flex-auto />
-            <span op75>
+            <span>
               <DurationDisplay :duration="m.data.totalTime" />
             </span>
             <template v-if="m.data.sourceSize && m.data.distSize">
               <span op40>·</span>
-              <span op50>{{ byteToHumanReadable(m.data.sourceSize) }}</span>
+              <span class="op75 dark:op50">{{ byteToHumanReadable(m.data.sourceSize) }}</span>
               <span i-carbon-arrow-right op40 />
-              <span op50 :class="m.data.distSize > m.data.sourceSize ? 'text-orange' : 'text-green'">{{ byteToHumanReadable(m.data.distSize) }}</span>
+              <span class="op100 dark:op-65" :class="m.data.distSize > m.data.sourceSize ? 'status-yellow' : 'status-green'">{{ byteToHumanReadable(m.data.distSize) }}</span>
             </template>
           </div>
         </RouterLink>
diff --git a/src/client/components/PluginName.vue b/src/client/components/PluginName.vue
index aa70499..454d616 100644
--- a/src/client/components/PluginName.vue
+++ b/src/client/components/PluginName.vue
@@ -24,10 +24,10 @@ const parts = computed(() => {
 </script>
 
 <template>
-  <span v-if="parts[0] && !hide" class="op50">
+  <span v-if="parts[0] && !hide" class="op75 dark:op50">
     {{ parts[0] }}
   </span>
-  <span>
+  <span class="op75 dark:op50">
     {{ parts[1] }}
   </span>
 </template>
diff --git a/src/client/pages/index/module.vue b/src/client/pages/index/module.vue
index 6bcd206..09b5e8f 100644
--- a/src/client/pages/index/module.vue
+++ b/src/client/pages/index/module.vue
@@ -94,7 +94,7 @@ getHot().then((hot) => {
     <ModuleId v-if="id" :id="id" />
     <Badge
       v-if="inspectSSR"
-      class="bg-teal-400:10 text-green-700 font-bold dark:text-teal-400"
+      class="badge-green"
     >
       SSR
     </Badge>
@@ -153,28 +153,28 @@ getHot().then((hot) => {
             </span>
             <Badge
               v-if="!tr.result"
-              class="bg-gray-400:10 text-gray-700 dark:text-gray-400"
+              class="badge-gray"
               v-text="'bailout'"
             />
             <Badge
               v-else-if="tr.noChange"
-              class="bg-orange-400:10 text-orange-800 dark:text-orange-400"
+              class="badge-orange"
               v-text="'no change'"
             />
             <Badge
               v-if="tr.load"
-              class="bg-light-blue-400/10 text-blue-700 dark:text-light-blue-400"
+              class="badge-load"
               v-text="'load'"
             />
             <Badge
               v-if="tr.order && tr.order !== 'normal'"
-              class="bg-violet-400:10 text-violet-700 dark:text-violet-400"
+              class="badge-order"
               :title="tr.order.includes('-') ? `Using object hooks ${tr.order}` : tr.order"
               v-text="tr.order"
             />
             <Badge
               v-if="tr.error"
-              class="bg-red-400:10 text-red7 dark:text-red-400"
+              class="badge-error"
               v-text="'error'"
             />
             <div flex-auto />
diff --git a/uno.config.ts b/uno.config.ts
index 8062e64..e784c59 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -17,6 +17,17 @@ export default defineConfig({
     + 'opacity-75 transition duration-200 ease-in-out '
     + 'hover:opacity-100 hover:text-teal-600 '
     + 'text-0.9em h-1.2em',
+    'badge-gray': 'bg-gray-400:10 text-gray-700 dark:text-gray-400',
+    'badge-green': 'bg-teal-400:10 text-green-700 dark:text-teal-400',
+    'badge-orange': 'bg-orange-400:10 text-orange-800 dark:text-orange-400',
+    'badge-error': 'bg-main  text-[#b71c1c] dark:text-[#EF5350]',
+    'badge-order': 'bg-violet-400:10 text-violet-700 dark:text-violet-400',
+    'badge-load': 'bg-light-blue-400/10 text-blue-700 dark:text-light-blue-400',
+    'badge-post': 'bg-purple5/10 text-purple5',
+    'status-gray': 'text-gray:75',
+    'status-green': 'text-green-700 dark:text-[#34E676]',
+    'status-yellow': 'text-[#827717] dark:text-[#EAB306]',
+    'status-red': 'text-[#b71c1c] dark:text-[#EF5350]',
   },
   presets: [
     presetUno(),

From 667bb4f6511d2da66fc0654ebf84c095750f00d9 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 21 Aug 2024 23:34:00 +0200
Subject: [PATCH 02/17] chore: update badge colors

---
 src/client/components/DurationDisplay.vue | 4 ++--
 src/client/components/ModuleId.vue        | 3 +--
 src/client/components/PluginName.vue      | 8 ++++++--
 src/client/pages/index/metric.vue         | 6 +++---
 uno.config.ts                             | 6 +++---
 5 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/client/components/DurationDisplay.vue b/src/client/components/DurationDisplay.vue
index f73fa4a..78d0dc0 100644
--- a/src/client/components/DurationDisplay.vue
+++ b/src/client/components/DurationDisplay.vue
@@ -15,10 +15,10 @@ function getDurationColor(duration: number | undefined) {
   if (!props.color)
     return ''
   if (duration == null)
-    return 'status-gray'
+    return ''
   duration = duration * props.factor
   if (duration < 1)
-    return 'status-gray'
+    return ''
   if (duration > 1000)
     return 'status-red'
   if (duration > 500)
diff --git a/src/client/components/ModuleId.vue b/src/client/components/ModuleId.vue
index c364f00..9ea2077 100644
--- a/src/client/components/ModuleId.vue
+++ b/src/client/components/ModuleId.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { list, root } from '../logic'
 
 const props = withDefaults(
@@ -27,7 +26,7 @@ const isVirtual = computed(() => list.value?.modules.find(i => i.id === props.id
 
     <Badge
       v-if="isVirtual"
-      class="ml1 badge-green"
+      class="ml1 badge-virtual"
       v-text="'virtual'"
     />
   </div>
diff --git a/src/client/components/PluginName.vue b/src/client/components/PluginName.vue
index 454d616..c2a776b 100644
--- a/src/client/components/PluginName.vue
+++ b/src/client/components/PluginName.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const props = defineProps<{
   name: string
+  colored?: boolean
   hide?: boolean
 }>()
 
@@ -21,13 +22,16 @@ const parts = computed(() => {
   }
   return ['', props.name]
 })
+const opacity = computed(() => {
+  return props.colored ? 'op100 dark:op-65' : 'op75 dark:op50'
+})
 </script>
 
 <template>
-  <span v-if="parts[0] && !hide" class="op75 dark:op50">
+  <span v-if="parts[0] && !hide" :class="opacity">
     {{ parts[0] }}
   </span>
-  <span class="op75 dark:op50">
+  <span :class="opacity">
     {{ parts[1] }}
   </span>
 </template>
diff --git a/src/client/pages/index/metric.vue b/src/client/pages/index/metric.vue
index 5e29c1f..5686bb3 100644
--- a/src/client/pages/index/metric.vue
+++ b/src/client/pages/index/metric.vue
@@ -108,8 +108,8 @@ getHot().then((hot) => {
 
       <template v-for="{ name, totalTime, invokeCount, enforce } in plugins" :key="name">
         <div />
-        <div v-if="totalTime > 0" class="cursor-pointer text-lime-600 dark:text-lime-200 hover:underline" @click="selectPlugin(name)">
-          <PluginName :name="name" />
+        <div v-if="totalTime > 0" class="cursor-pointer status-green hover:underline" @click="selectPlugin(name)">
+          <PluginName :name="name" colored />
         </div>
         <div v-else>
           <PluginName :name="name" />
@@ -118,7 +118,7 @@ getHot().then((hot) => {
           <Badge
             v-if="enforce"
             class="m-auto text-xs"
-            :class="[enforce === 'post' ? 'bg-purple5/10 text-purple5' : 'bg-green5/10 text-green5']"
+            :class="[enforce === 'post' ? 'badge-post' : 'badge-green']"
           >
             {{ enforce }}
           </Badge>
diff --git a/uno.config.ts b/uno.config.ts
index e784c59..1aeb71c 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -17,14 +17,14 @@ export default defineConfig({
     + 'opacity-75 transition duration-200 ease-in-out '
     + 'hover:opacity-100 hover:text-teal-600 '
     + 'text-0.9em h-1.2em',
+    'badge-virtual': 'bg-teal-400:10 text-green-700 dark:text-teal-400',
     'badge-gray': 'bg-gray-400:10 text-gray-700 dark:text-gray-400',
-    'badge-green': 'bg-teal-400:10 text-green-700 dark:text-teal-400',
+    'badge-green': 'bg-teal-400:10 text-green-700 dark:text-[#34E676]',
     'badge-orange': 'bg-orange-400:10 text-orange-800 dark:text-orange-400',
     'badge-error': 'bg-main  text-[#b71c1c] dark:text-[#EF5350]',
     'badge-order': 'bg-violet-400:10 text-violet-700 dark:text-violet-400',
     'badge-load': 'bg-light-blue-400/10 text-blue-700 dark:text-light-blue-400',
-    'badge-post': 'bg-purple5/10 text-purple5',
-    'status-gray': 'text-gray:75',
+    'badge-post': 'bg-purple7/5 text-purple7 dark:bg-purple3/5 dark:text-purple3',
     'status-green': 'text-green-700 dark:text-[#34E676]',
     'status-yellow': 'text-[#827717] dark:text-[#EAB306]',
     'status-red': 'text-[#b71c1c] dark:text-[#EF5350]',

From 803cdc2a1d0795ae96fbd53700d144dedcad0c4d Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 22 Aug 2024 00:12:33 +0200
Subject: [PATCH 03/17] chore: use span, cannot use div inside button

---
 src/client/components/DurationDisplay.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/client/components/DurationDisplay.vue b/src/client/components/DurationDisplay.vue
index 78d0dc0..6f29d2b 100644
--- a/src/client/components/DurationDisplay.vue
+++ b/src/client/components/DurationDisplay.vue
@@ -42,22 +42,22 @@ const units = computed(() => {
 </script>
 
 <template>
-  <div :class="getDurationColor(duration)">
+  <span block :class="getDurationColor(duration)">
     <span>{{ units[0] }}</span><span ml-0.4 text-xs>{{ units[1] }}</span>
-  </div>
+  </span>
 </template>
 
 <style scoped>
-div:not(.status-red) > span:first-of-type {
+span:not(.status-red) > span:first-of-type {
   @apply op80 dark:op65;
 }
-div:not(.status-red) > span:last-of-type {
+span:not(.status-red) > span:last-of-type {
   @apply op75 dark:op50;
 }
-div.status-red > span:first-of-type {
+span.status-red > span:first-of-type {
   @apply op80 dark:op95;
 }
-div.status-red > span:last-of-type {
+span.status-red > span:last-of-type {
   @apply op75 dark:op90;
 }
 </style>

From 4bba7155e7d5c6ef951fa27b64f8b3f8bfe90a99 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 22 Aug 2024 00:13:20 +0200
Subject: [PATCH 04/17] chore: use fw 600 + italic for transform stack

---
 src/client/pages/index/module.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/client/pages/index/module.vue b/src/client/pages/index/module.vue
index 09b5e8f..1bae1a0 100644
--- a/src/client/pages/index/module.vue
+++ b/src/client/pages/index/module.vue
@@ -143,12 +143,12 @@ getHot().then((hot) => {
               currentIndex === tr.index
                 ? 'bg-active'
                 : tr.noChange || !tr.result
-                  ? 'op50'
+                  ? 'op95 font-italic'
                   : ''
             "
             @click="index = tr.index.toString()"
           >
-            <span :class="currentIndex === tr.index ? 'font-bold' : ''">
+            <span :class="currentIndex !== tr.index && (tr.noChange || !tr.result) ? '' : 'fw-600'">
               <PluginName :name="tr.name" />
             </span>
             <Badge
@@ -177,7 +177,7 @@ getHot().then((hot) => {
               class="badge-error"
               v-text="'error'"
             />
-            <div flex-auto />
+            <span flex-auto />
             <DurationDisplay :duration="tr.end - tr.start" />
           </button>
         </template>

From 1da96a8ea66c28f3672e90caf4aa7db027e7e253 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 22 Aug 2024 00:16:57 +0200
Subject: [PATCH 05/17] chore: cannot use div inside button

---
 src/client/pages/index/module.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/client/pages/index/module.vue b/src/client/pages/index/module.vue
index 1bae1a0..f5545bb 100644
--- a/src/client/pages/index/module.vue
+++ b/src/client/pages/index/module.vue
@@ -101,20 +101,20 @@ getHot().then((hot) => {
     <div flex-auto />
 
     <button text-lg icon-btn title="Inspect SSR" @click="inspectSSR = !inspectSSR">
-      <div i-carbon-cloud-services :class="inspectSSR ? 'opacity-100' : 'opacity-25'" />
+      <span i-carbon-cloud-services block :class="inspectSSR ? 'opacity-100' : 'opacity-25'" />
     </button>
     <button text-lg icon-btn :title="sourcemaps ? 'Inspect sourcemaps' : 'Sourcemap is not available'" :disabled="!sourcemaps" @click="inspectSourcemaps({ code: to, sourcemaps })">
-      <div i-carbon-choropleth-map :class="sourcemaps ? 'opacity-100' : 'opacity-25'" />
+      <span i-carbon-choropleth-map block :class="sourcemaps ? 'opacity-100' : 'opacity-25'" />
     </button>
     <button text-lg icon-btn title="Line Wrapping" @click="lineWrapping = !lineWrapping">
-      <div i-carbon-text-wrap :class="lineWrapping ? 'opacity-100' : 'opacity-25'" />
+      <span i-carbon-text-wrap block :class="lineWrapping ? 'opacity-100' : 'opacity-25'" />
     </button>
     <button text-lg icon-btn title="Toggle one column" @click="showOneColumn = !showOneColumn">
-      <div v-if="showOneColumn" i-carbon-side-panel-open />
-      <div v-else i-carbon-side-panel-close />
+      <span v-if="showOneColumn" i-carbon-side-panel-open block />
+      <span v-else i-carbon-side-panel-close block />
     </button>
     <button class="text-lg icon-btn" title="Toggle Diff" @click="enableDiff = !enableDiff">
-      <div i-carbon-compare :class="enableDiff ? 'opacity-100' : 'opacity-25'" />
+      <span i-carbon-compare block :class="enableDiff ? 'opacity-100' : 'opacity-25'" />
     </button>
   </NavBar>
   <Container
@@ -130,7 +130,7 @@ getHot().then((hot) => {
         <div flex="~ gap2 items-center" p2 tracking-widest class="op75 dark:op50">
           <span flex-auto text-center text-sm>{{ inspectSSR ? 'SSR ' : '' }}TRANSFORM STACK</span>
           <button class="icon-btn" title="Toggle bailout plugins" @click="showBailout = !showBailout">
-            <div :class="showBailout ? 'opacity-100 i-carbon-view' : 'opacity-50 i-carbon-view-off'" />
+            <span block :class="showBailout ? 'opacity-100 i-carbon-view' : 'opacity-50 i-carbon-view-off'" />
           </button>
         </div>
         <div border="b main" />

From 8cf856e5eb7545805f980c726dac687087668bc9 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 22 Aug 2024 00:19:54 +0200
Subject: [PATCH 06/17] chore: remove opacity from transform stack when
 unchanged/no-result

---
 src/client/pages/index/module.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/pages/index/module.vue b/src/client/pages/index/module.vue
index f5545bb..15bdba8 100644
--- a/src/client/pages/index/module.vue
+++ b/src/client/pages/index/module.vue
@@ -143,7 +143,7 @@ getHot().then((hot) => {
               currentIndex === tr.index
                 ? 'bg-active'
                 : tr.noChange || !tr.result
-                  ? 'op95 font-italic'
+                  ? 'font-italic'
                   : ''
             "
             @click="index = tr.index.toString()"

From 4bf522e52b8fbb1defee3b35803283c481c4266b Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 22 Aug 2024 00:23:46 +0200
Subject: [PATCH 07/17] chore: cannot use div inside button

---
 src/client/components/NavBar.vue |  4 ++--
 src/client/pages/index.vue       | 22 +++++++++++-----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/client/components/NavBar.vue b/src/client/components/NavBar.vue
index 509e8ad..5e5426e 100644
--- a/src/client/components/NavBar.vue
+++ b/src/client/components/NavBar.vue
@@ -7,7 +7,7 @@ import { isStaticMode, refetch, toggleDark } from '../logic'
     <slot />
     <slot name="actions">
       <button v-if="!isStaticMode" class="text-lg icon-btn" title="Refetch" @click="refetch()">
-        <div i-carbon-renew />
+        <span i-carbon-renew block />
       </button>
       <div h-full w-1 border="r main" />
       <a
@@ -18,7 +18,7 @@ import { isStaticMode, refetch, toggleDark } from '../logic'
         <div i-carbon-logo-github />
       </a>
       <button class="text-lg icon-btn" title="Toggle Dark Mode" @click="toggleDark()">
-        <div i-carbon-sun dark:i-carbon-moon />
+        <span i-carbon-sun dark:i-carbon-moon block />
       </button>
     </slot>
   </nav>
diff --git a/src/client/pages/index.vue b/src/client/pages/index.vue
index 01f759c..70f7e36 100644
--- a/src/client/pages/index.vue
+++ b/src/client/pages/index.vue
@@ -23,27 +23,27 @@ onMounted(() => {
         @click="toggleSort()"
       >
         <template v-if="searchText">
-          <div i-carbon-search />
-          <div i-carbon-arrow-down text-sm op70 />
+          <span i-carbon-search block />
+          <span i-carbon-arrow-down block text-sm op70 />
         </template>
         <template v-else-if="sortMode === 'time-asc'">
-          <div i-carbon-time />
-          <div i-carbon-arrow-down text-sm op70 />
+          <span i-carbon-time block />
+          <span i-carbon-arrow-down block text-sm op70 />
         </template>
         <template v-else-if="sortMode === 'time-desc'">
-          <div i-carbon-time />
-          <div i-carbon-arrow-up text-sm op70 />
+          <span i-carbon-time block />
+          <span i-carbon-arrow-up block text-sm op70 />
         </template>
         <template v-else>
-          <div i-carbon-menu />
-          <div i-carbon-chevron-sort text-sm op70 />
+          <span i-carbon-menu block />
+          <span i-carbon-chevron-sort block text-sm op70 />
         </template>
       </button>
     </template>
     <button text-lg icon-btn title="View Mode" @click="toggleMode()">
-      <div v-if="listMode === 'detailed'" i-carbon-list-boxes />
-      <div v-else-if="listMode === 'list'" i-carbon-list />
-      <div v-else i-carbon-network-4 />
+      <span v-if="listMode === 'detailed'" i-carbon-list-boxes block />
+      <span v-else-if="listMode === 'list'" i-carbon-list block />
+      <span v-else i-carbon-network-4 block />
     </button>
     <div h-full w-1 border="r main" />
     <RouterLink text-lg icon-btn to="/metric" title="Metrics">

From 6b37ba8ae5b9f70d408d139752e80ddefb24811f Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 22 Aug 2024 01:08:55 +0200
Subject: [PATCH 08/17] chore: rename Vite plugins in playground

---
 playground/vite.config.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/playground/vite.config.ts b/playground/vite.config.ts
index 218b07e..76752e9 100644
--- a/playground/vite.config.ts
+++ b/playground/vite.config.ts
@@ -10,7 +10,7 @@ export default defineConfig({
   plugins: [
     vue(),
     {
-      name: 'virtual-loader',
+      name: 'custom-loader',
       resolveId(id) {
         return id === 'virtual:hi' ? `\0${id}` : undefined
       },
@@ -20,7 +20,7 @@ export default defineConfig({
       },
     },
     {
-      name: 'slow-virtual-loader',
+      name: 'custom-slow-loader',
       // for testing purpose, don't change it
       enforce: 'post',
       resolveId(id) {

From 76979385fd6dc35e21e0099da17f538f3207b09e Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 22 Aug 2024 02:15:30 +0200
Subject: [PATCH 09/17] chore: add module title tooltip only on module.vue

---
 src/client/components/ModuleId.vue | 24 ++++++++++++++++++------
 src/client/main.ts                 |  8 +++-----
 src/client/pages/index/module.vue  |  2 +-
 src/client/styles/main.css         |  1 +
 uno.config.ts                      |  1 +
 5 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/client/components/ModuleId.vue b/src/client/components/ModuleId.vue
index 9ea2077..1b44214 100644
--- a/src/client/components/ModuleId.vue
+++ b/src/client/components/ModuleId.vue
@@ -5,6 +5,7 @@ const props = withDefaults(
   defineProps<{
     id?: string
     icon?: boolean
+    module?: boolean
   }>(),
   {
     icon: true,
@@ -12,16 +13,27 @@ const props = withDefaults(
 )
 
 const isVirtual = computed(() => list.value?.modules.find(i => i.id === props.id)?.virtual)
+const moduleName = computed(() =>
+  props.id?.startsWith(root.value)
+    ? props.id.slice(root.value.length)
+    : props.id ?? '',
+)
 </script>
 
 <template>
-  <div v-if="id" my-auto text-sm font-mono flex="~ items-center">
+  <div
+    v-if="id"
+    v-tooltip.bottom-start="{ content: id, triggers: ['hover', 'focus'], disabled: !module }"
+    my-auto text-sm font-mono
+    flex="~ items-center"
+  >
     <FileIcon v-if="icon" :filename="id" mr1.5 />
-    <template v-if="id.startsWith(root)">
-      <span class="op50">.</span>
-      <span>{{ id.slice(root.length) }}</span>
-    </template>
-    <span v-else>{{ id }}</span>
+    <span :class="{ 'module-title': module }">
+      <template v-if="id.startsWith(root)">
+        <span class="op50">.</span>
+      </template>
+      <span :class="{ 'overflow-hidden': module }">{{ moduleName }}</span>
+    </span>
     <slot />
 
     <Badge
diff --git a/src/client/main.ts b/src/client/main.ts
index 882b69c..f3fe61b 100644
--- a/src/client/main.ts
+++ b/src/client/main.ts
@@ -2,6 +2,7 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import routes from 'virtual:generated-pages'
+import FloatingVue from 'floating-vue'
 import App from './App.vue'
 
 import '@unocss/reset/tailwind.css'
@@ -9,10 +10,7 @@ import './styles/main.css'
 import './styles/cm.css'
 import 'uno.css'
 
-const app = createApp(App)
-const router = createRouter({
+createApp(App).use(FloatingVue).use(createRouter({
   history: createWebHashHistory(),
   routes,
-})
-app.use(router)
-app.mount('#app')
+})).mount('#app')
diff --git a/src/client/pages/index/module.vue b/src/client/pages/index/module.vue
index 15bdba8..445423d 100644
--- a/src/client/pages/index/module.vue
+++ b/src/client/pages/index/module.vue
@@ -91,7 +91,7 @@ getHot().then((hot) => {
     <RouterLink my-auto outline-none icon-btn to="/">
       <div i-carbon-arrow-left />
     </RouterLink>
-    <ModuleId v-if="id" :id="id" />
+    <ModuleId v-if="id" :id="id" module />
     <Badge
       v-if="inspectSSR"
       class="badge-green"
diff --git a/src/client/styles/main.css b/src/client/styles/main.css
index 3f84035..e7f0403 100755
--- a/src/client/styles/main.css
+++ b/src/client/styles/main.css
@@ -1,4 +1,5 @@
 @import 'splitpanes/dist/splitpanes.css';
+@import 'floating-vue/dist/style.css';
 
 html,
 body,
diff --git a/uno.config.ts b/uno.config.ts
index 1aeb71c..17c4c34 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -28,6 +28,7 @@ export default defineConfig({
     'status-green': 'text-green-700 dark:text-[#34E676]',
     'status-yellow': 'text-[#827717] dark:text-[#EAB306]',
     'status-red': 'text-[#b71c1c] dark:text-[#EF5350]',
+    'module-title': 'whitespace-nowrap overflow-hidden text-ellipsis',
   },
   presets: [
     presetUno(),

From 7f6b76dd3cabeba0dbbefbcdd8e44b802071ce73 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 22 Aug 2024 15:08:14 +0200
Subject: [PATCH 10/17] chore: add status-lime

---
 src/client/pages/index/metric.vue | 2 +-
 uno.config.ts                     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/client/pages/index/metric.vue b/src/client/pages/index/metric.vue
index 5686bb3..e8da608 100644
--- a/src/client/pages/index/metric.vue
+++ b/src/client/pages/index/metric.vue
@@ -108,7 +108,7 @@ getHot().then((hot) => {
 
       <template v-for="{ name, totalTime, invokeCount, enforce } in plugins" :key="name">
         <div />
-        <div v-if="totalTime > 0" class="cursor-pointer status-green hover:underline" @click="selectPlugin(name)">
+        <div v-if="totalTime > 0" class="cursor-pointer status-lime hover:underline" @click="selectPlugin(name)">
           <PluginName :name="name" colored />
         </div>
         <div v-else>
diff --git a/uno.config.ts b/uno.config.ts
index 17c4c34..de1426f 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -28,6 +28,7 @@ export default defineConfig({
     'status-green': 'text-green-700 dark:text-[#34E676]',
     'status-yellow': 'text-[#827717] dark:text-[#EAB306]',
     'status-red': 'text-[#b71c1c] dark:text-[#EF5350]',
+    'status-lime': 'text-lime-700 dark:text-lime-200',
     'module-title': 'whitespace-nowrap overflow-hidden text-ellipsis',
   },
   presets: [

From ebf41eec1d3fe8d0eb83ebf7ceea82e9a71676e7 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 22 Aug 2024 15:17:28 +0200
Subject: [PATCH 11/17] chore: split main client logic

---
 src/client/main.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/client/main.ts b/src/client/main.ts
index f3fe61b..c3bf61a 100644
--- a/src/client/main.ts
+++ b/src/client/main.ts
@@ -10,7 +10,10 @@ import './styles/main.css'
 import './styles/cm.css'
 import 'uno.css'
 
-createApp(App).use(FloatingVue).use(createRouter({
+const app = createApp(App)
+app.use(FloatingVue)
+app.use(createRouter({
   history: createWebHashHistory(),
   routes,
-})).mount('#app')
+}))
+app.mount('#app')

From 69e58f386f0e0bc464dcffcfe80f731429bc2d4c Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 22 Aug 2024 15:27:41 +0200
Subject: [PATCH 12/17] chore: use tooltip dark

---
 src/client/styles/main.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/client/styles/main.css b/src/client/styles/main.css
index e7f0403..2e8d6f9 100755
--- a/src/client/styles/main.css
+++ b/src/client/styles/main.css
@@ -92,3 +92,15 @@ html.dark {
 .v-popper--theme-tooltip.v-popper--shown * {
   transition: none !important;
 }
+
+.v-popper__popper .v-popper__inner {
+  font-size: 12px;
+  padding: 4px 6px;
+  border-radius: 4px;
+  background-color: #121212;
+  color: white;
+}
+
+.v-popper__popper .v-popper__arrow-outer {
+  border-color: #121212;
+}

From b344a6745bba7745a4f75dce681e1dce4906f677 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 22 Aug 2024 15:29:38 +0200
Subject: [PATCH 13/17] chore: fix module title layout

---
 src/client/components/ModuleId.vue | 38 ++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/client/components/ModuleId.vue b/src/client/components/ModuleId.vue
index 1b44214..fdc057e 100644
--- a/src/client/components/ModuleId.vue
+++ b/src/client/components/ModuleId.vue
@@ -18,21 +18,51 @@ const moduleName = computed(() =>
     ? props.id.slice(root.value.length)
     : props.id ?? '',
 )
+const gridStyles = computed(() => {
+  if (!props.module)
+    return ''
+
+  const gridColumns: string[] = []
+  if (props.icon)
+    gridColumns.push('min-content')
+
+  if (props.module)
+    gridColumns.push('minmax(0,1fr)')
+  else
+    gridColumns.push('100%')
+
+  // todo: handle slot, not being used
+
+  if (isVirtual.value)
+    gridColumns.push('min-content')
+
+  return `grid-template-columns: ${gridColumns.join(' ')};`
+})
+const containerClass = computed(() => {
+  return props.module
+    ? 'grid grid-rows-1 items-center gap-1'
+    : 'flex items-center'
+})
 </script>
 
 <template>
   <div
     v-if="id"
-    v-tooltip.bottom-start="{ content: id, triggers: ['hover', 'focus'], disabled: !module }"
+    v-tooltip.bottom-start="{
+      content: moduleName,
+      triggers: ['hover', 'focus'],
+      disabled: !module,
+    }"
     my-auto text-sm font-mono
-    flex="~ items-center"
+    :class="containerClass"
+    :style="gridStyles"
   >
     <FileIcon v-if="icon" :filename="id" mr1.5 />
-    <span :class="{ 'module-title': module }">
+    <span :class="{ 'overflow-hidden': module }">
       <template v-if="id.startsWith(root)">
         <span class="op50">.</span>
       </template>
-      <span :class="{ 'overflow-hidden': module }">{{ moduleName }}</span>
+      <span :class="{ 'text-truncate': module }">{{ moduleName }}</span>
     </span>
     <slot />
 

From 2760b898f9fb1f15cbb065d0e01b287cbb9c5c73 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 22 Aug 2024 15:38:50 +0200
Subject: [PATCH 14/17] chore: cleanup

---
 uno.config.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/uno.config.ts b/uno.config.ts
index de1426f..06398ef 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -29,7 +29,6 @@ export default defineConfig({
     'status-yellow': 'text-[#827717] dark:text-[#EAB306]',
     'status-red': 'text-[#b71c1c] dark:text-[#EF5350]',
     'status-lime': 'text-lime-700 dark:text-lime-200',
-    'module-title': 'whitespace-nowrap overflow-hidden text-ellipsis',
   },
   presets: [
     presetUno(),

From 3ed727421aa667fcea5e469bea5be1e0e4ea6fed Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 22 Aug 2024 15:51:10 +0200
Subject: [PATCH 15/17] chore: add `text-main` uno shortcut

---
 src/client/styles/main.css | 12 ------------
 uno.config.ts              |  1 +
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/client/styles/main.css b/src/client/styles/main.css
index 2e8d6f9..e7f0403 100755
--- a/src/client/styles/main.css
+++ b/src/client/styles/main.css
@@ -92,15 +92,3 @@ html.dark {
 .v-popper--theme-tooltip.v-popper--shown * {
   transition: none !important;
 }
-
-.v-popper__popper .v-popper__inner {
-  font-size: 12px;
-  padding: 4px 6px;
-  border-radius: 4px;
-  background-color: #121212;
-  color: white;
-}
-
-.v-popper__popper .v-popper__arrow-outer {
-  border-color: #121212;
-}
diff --git a/uno.config.ts b/uno.config.ts
index 06398ef..a728a82 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -12,6 +12,7 @@ export default defineConfig({
   shortcuts: {
     'border-main': 'border-gray-400 border-opacity-30',
     'bg-main': 'bg-white dark:bg-[#121212]',
+    'text-main': 'text-[#121212] dark:text-white',
     'bg-active': 'bg-gray-400/10',
     'icon-btn': 'inline-block cursor-pointer select-none !outline-none '
     + 'opacity-75 transition duration-200 ease-in-out '

From 86efb58e91a41121f5b9045f8b4ddde2371c90ca Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Thu, 22 Aug 2024 16:36:08 +0200
Subject: [PATCH 16/17] chore: update

---
 src/client/components/DurationDisplay.vue | 19 ++-----------------
 src/client/components/ModuleId.vue        |  2 ++
 src/client/main.ts                        |  2 --
 3 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/src/client/components/DurationDisplay.vue b/src/client/components/DurationDisplay.vue
index 6f29d2b..c1901da 100644
--- a/src/client/components/DurationDisplay.vue
+++ b/src/client/components/DurationDisplay.vue
@@ -42,22 +42,7 @@ const units = computed(() => {
 </script>
 
 <template>
-  <span block :class="getDurationColor(duration)">
-    <span>{{ units[0] }}</span><span ml-0.4 text-xs>{{ units[1] }}</span>
+  <span block>
+    <span :class="getDurationColor(duration)">{{ units[0] }}</span><span ml-0.4 text-xs :class="getDurationColor(duration)" op75>{{ units[1] }}</span>
   </span>
 </template>
-
-<style scoped>
-span:not(.status-red) > span:first-of-type {
-  @apply op80 dark:op65;
-}
-span:not(.status-red) > span:last-of-type {
-  @apply op75 dark:op50;
-}
-span.status-red > span:first-of-type {
-  @apply op80 dark:op95;
-}
-span.status-red > span:last-of-type {
-  @apply op75 dark:op90;
-}
-</style>
diff --git a/src/client/components/ModuleId.vue b/src/client/components/ModuleId.vue
index fdc057e..989d3b0 100644
--- a/src/client/components/ModuleId.vue
+++ b/src/client/components/ModuleId.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { vTooltip } from 'floating-vue'
 import { list, root } from '../logic'
 
 const props = withDefaults(
@@ -18,6 +19,7 @@ const moduleName = computed(() =>
     ? props.id.slice(root.value.length)
     : props.id ?? '',
 )
+
 const gridStyles = computed(() => {
   if (!props.module)
     return ''
diff --git a/src/client/main.ts b/src/client/main.ts
index c3bf61a..753d1f7 100644
--- a/src/client/main.ts
+++ b/src/client/main.ts
@@ -2,7 +2,6 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import routes from 'virtual:generated-pages'
-import FloatingVue from 'floating-vue'
 import App from './App.vue'
 
 import '@unocss/reset/tailwind.css'
@@ -11,7 +10,6 @@ import './styles/cm.css'
 import 'uno.css'
 
 const app = createApp(App)
-app.use(FloatingVue)
 app.use(createRouter({
   history: createWebHashHistory(),
   routes,

From eae1f2b615397731c89f6572fbc1cb9cad57702d Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Thu, 22 Aug 2024 17:07:08 +0200
Subject: [PATCH 17/17] feat: highlight path

---
 package.json                       |  1 +
 pnpm-lock.yaml                     |  5 +-
 src/client/components/ModuleId.vue | 93 ++++++++++++++++++++++++++----
 3 files changed, 87 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 69bc26d..bb6556b 100644
--- a/package.json
+++ b/package.json
@@ -120,6 +120,7 @@
     "lint-staged": "^15.2.9",
     "npm-run-all": "^4.1.5",
     "ohash": "^1.1.3",
+    "pathe": "^1.1.2",
     "pinia": "^2.2.2",
     "prism-theme-vars": "^0.2.5",
     "rimraf": "^6.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 780fb12..2d684c5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -123,6 +123,9 @@ importers:
       ohash:
         specifier: ^1.1.3
         version: 1.1.3
+      pathe:
+        specifier: ^1.1.2
+        version: 1.1.2
       pinia:
         specifier: ^2.2.2
         version: 2.2.2(typescript@5.5.4)(vue@3.4.38(typescript@5.5.4))
@@ -1212,7 +1215,7 @@ packages:
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
-      eslint: ^9.9.0
+      eslint: ^8.57.0 || ^9.0.0
       typescript: '*'
     peerDependenciesMeta:
       typescript:
diff --git a/src/client/components/ModuleId.vue b/src/client/components/ModuleId.vue
index 989d3b0..dc751ef 100644
--- a/src/client/components/ModuleId.vue
+++ b/src/client/components/ModuleId.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { vTooltip } from 'floating-vue'
+import { relative } from 'pathe'
 import { list, root } from '../logic'
+import { getPluginColor } from '../logic/color'
 
 const props = withDefaults(
   defineProps<{
@@ -14,11 +16,83 @@ const props = withDefaults(
 )
 
 const isVirtual = computed(() => list.value?.modules.find(i => i.id === props.id)?.virtual)
-const moduleName = computed(() =>
-  props.id?.startsWith(root.value)
-    ? props.id.slice(root.value.length)
-    : props.id ?? '',
-)
+const relativePath = computed(() => {
+  if (!props.id)
+    return ''
+  let relate = relative(root.value, props.id)
+  if (!relate.startsWith('.'))
+    relate = `./${relate}`
+  if (relate.startsWith('./'))
+    return relate
+  if (relate.match(/^(?:\.\.\/){1,3}[^.]/))
+    return relate
+  return props.id
+})
+
+const HighlightedPath = defineComponent({
+  render() {
+    const parts = relativePath.value.split(/([/?&:])/g)
+    let type: 'start' | 'path' | 'query' = 'start'
+
+    const classes: string[][] = parts.map(() => [])
+    const nodes = parts.map((part) => {
+      return h('span', { class: '' }, part)
+    })
+
+    parts.forEach((part, index) => {
+      const _class = classes[index]
+      if (part === '?')
+        type = 'query'
+
+      if (type === 'start') {
+        if (part.match(/^\.+$/)) {
+          _class.push('op50')
+        }
+        else if (part === '/') {
+          _class.push('op50')
+        }
+        else if (part !== '/') {
+          type = 'path'
+        }
+      }
+
+      if (type === 'path') {
+        if (part === '/' || part === 'node_modules' || part.match(/^\.\w/)) {
+          _class.push('op75')
+        }
+        if (part === '.pnpm') {
+          classes[index + 2]?.push('op50')
+          if (nodes[index + 2])
+            nodes[index + 2].children = '…'
+        }
+        if (part === ':') {
+          if (nodes[index - 1]) {
+            nodes[index - 1].props ||= {}
+            nodes[index - 1].props!.style ||= {}
+            nodes[index - 1].props!.style.color = getPluginColor(parts[index - 1])
+          }
+          _class.push('op50')
+        }
+      }
+
+      if (type === 'query') {
+        if (part === '?' || part === '&') {
+          _class.push('text-rose-5 dark:text-rose-4')
+        }
+        else {
+          _class.push('text-orange-9 dark:text-orange-2')
+        }
+      }
+    })
+
+    nodes.forEach((node, index) => {
+      if (node.props)
+        node.props.class = classes[index].join(' ')
+    })
+
+    return nodes
+  },
+})
 
 const gridStyles = computed(() => {
   if (!props.module)
@@ -51,7 +125,7 @@ const containerClass = computed(() => {
   <div
     v-if="id"
     v-tooltip.bottom-start="{
-      content: moduleName,
+      content: props.id,
       triggers: ['hover', 'focus'],
       disabled: !module,
     }"
@@ -60,11 +134,8 @@ const containerClass = computed(() => {
     :style="gridStyles"
   >
     <FileIcon v-if="icon" :filename="id" mr1.5 />
-    <span :class="{ 'overflow-hidden': module }">
-      <template v-if="id.startsWith(root)">
-        <span class="op50">.</span>
-      </template>
-      <span :class="{ 'text-truncate': module }">{{ moduleName }}</span>
+    <span :class="{ 'overflow-hidden': module, 'text-truncate': module }">
+      <HighlightedPath />
     </span>
     <slot />