feat(vite): add HMR Inspector tab

packages/vite/src/app/app.vue

@@ -20,6 +20,11 @@ useSideNav(() => {
       icon: 'i-ph-house-duotone',
       to: '/home',
     },
+    {
+      title: 'HMR Inspector',
+      icon: 'i-ph-lightning-duotone',
+      to: '/hmr',
+    },
   ]
 })
 </script>

packages/vite/src/app/pages/hmr.vue

@@ -0,0 +1,358 @@
+<script setup lang="ts">
+import type { HmrUpdate } from '../../shared/types'
+import { useAsyncState, useIntervalFn } from '@vueuse/core'
+import { computed, nextTick, ref, watch } from 'vue'
+import { useRpc } from '#imports'
+
+const rpc = useRpc()
+const filter = ref('')
+const liveMode = ref(true)
+const listRef = ref<HTMLElement>()
+
+const { state: updates, isLoading, execute: refresh } = useAsyncState(
+  () => rpc.value.call('vite:hmr-updates') as Promise<HmrUpdate[]>,
+  [] as HmrUpdate[],
+  { resetOnExecute: false },
+)
+
+useIntervalFn(refresh, 1000)
+
+// Auto-scroll to top only when new updates arrive AND user is already near the top
+const lastSeenId = ref<string | null>(null)
+const missedUpdates = ref(0)
+watch(() => updates.value?.[0]?.id, async (newestId) => {
+  if (!newestId || newestId === lastSeenId.value)
+    return
+  lastSeenId.value = newestId
+  if (!liveMode.value || !listRef.value) {
+    missedUpdates.value++
+    return
+  }
+  // Only auto-scroll if user is already near the top (within 100px)
+  if (listRef.value.scrollTop <= 100) {
+    await nextTick()
+    listRef.value!.scrollTop = 0
+  }
+  else {
+    missedUpdates.value++
+  }
+})
+
+function scrollToTop() {
+  if (listRef.value) {
+    listRef.value.scrollTop = 0
+    missedUpdates.value = 0
+  }
+}
+
+function onListScroll() {
+  if (listRef.value && listRef.value.scrollTop <= 100) {
+    missedUpdates.value = 0
+  }
+}
+
+interface GroupedUpdate {
+  key: string
+  file: string
+  updates: typeof updates.value
+  count: number
+  latestTimestamp: number
+}
+
+const filteredUpdates = computed(() => {
+  if (!filter.value)
+    return updates.value ?? []
+  const q = filter.value.toLowerCase()
+  return (updates.value ?? []).filter(u =>
+    u.files.some(f => f.toLowerCase().includes(q))
+    || u.modules.some(m => m.toLowerCase().includes(q)),
+  )
+})
+
+const groupedByFile = computed<GroupedUpdate[]>(() => {
+  const groups = new Map<string, GroupedUpdate>()
+  for (const update of filteredUpdates.value) {
+    const file = update.files[0] ?? 'unknown'
+    const existing = groups.get(file)
+    if (existing) {
+      existing.updates.push(update)
+      existing.count++
+      if (update.timestamp > existing.latestTimestamp) {
+        existing.latestTimestamp = update.timestamp
+      }
+    }
+    else {
+      groups.set(file, {
+        key: file,
+        file,
+        updates: [update],
+        count: 1,
+        latestTimestamp: update.timestamp,
+      })
+    }
+  }
+  return Array.from(groups.values()).sort((a, b) => b.latestTimestamp - a.latestTimestamp)
+})
+
+const viewMode = ref<'timeline' | 'grouped'>('timeline')
+
+async function clearHistory() {
+  await rpc.value.call('vite:hmr-clear')
+  await refresh()
+}
+
+function openInEditor(file: string) {
+  rpc.value.call('vite:core:open-in-editor', file)
+}
+
+function formatTime(timestamp: number) {
+  return new Date(timestamp).toLocaleTimeString()
+}
+
+function timeAgo(timestamp: number) {
+  const diff = Date.now() - timestamp
+  if (diff < 1000)
+    return 'just now'
+  if (diff < 60000)
+    return `${Math.floor(diff / 1000)}s ago`
+  if (diff < 3600000)
+    return `${Math.floor(diff / 60000)}m ago`
+  return formatTime(timestamp)
+}
+
+function getRelativePath(file: string) {
+  return file.replace(/^.*\//, '')
+}
+</script>
+
+<template>
+  <div p4 flex="~ col gap-4" h-full of-hidden>
+    <!-- Header -->
+    <div flex="~ items-center gap-2 sm:gap-3 flex-wrap">
+      <h1 text-base sm:text-lg font-semibold flex="~ items-center gap-2">
+        <div class="i-ph-lightning-duotone" text-xl />
+        <span>HMR Inspector</span>
+      </h1>
+      <div flex-1 />
+
+      <!-- View mode toggle -->
+      <div flex="~ items-center" border="~ base rounded" text-sm>
+        <button
+          v-tooltip="'Timeline view'"
+          px2 py1
+          :class="viewMode === 'timeline' ? 'bg-active' : 'hover:bg-active/50'"
+          @click="viewMode = 'timeline'"
+        >
+          <div class="i-ph-list" />
+        </button>
+        <button
+          v-tooltip="'Grouped by file'"
+          px2 py1
+          :class="viewMode === 'grouped' ? 'bg-active' : 'hover:bg-active/50'"
+          @click="viewMode = 'grouped'"
+        >
+          <div class="i-ph-stack" />
+        </button>
+      </div>
+
+      <input
+        v-model="filter"
+        placeholder="Filter..."
+        border="~ base rounded"
+        px2 py1 text-sm
+        class="w-32 sm:w-60"
+        bg-transparent
+        outline-none
+        focus:border-primary
+      >
+
+      <!-- Live mode toggle -->
+      <button
+        v-tooltip="liveMode ? 'Disable live mode' : 'Enable live mode'"
+        border="~ base rounded"
+        px2 py1 text-sm flex="~ items-center gap-1"
+        :class="liveMode ? 'text-green border-green/50' : 'hover:bg-active'"
+        @click="liveMode = !liveMode"
+      >
+        <div class="i-ph-broadcast" :class="liveMode ? 'animate-pulse' : ''" />
+        Live
+      </button>
+
+      <button
+        v-tooltip="'Clear history'"
+        border="~ base rounded"
+        px2 py1 text-sm
+        hover:bg-active
+        @click="clearHistory"
+      >
+        <div class="i-ph-trash" />
+      </button>
+      <button
+        v-tooltip="'Refresh'"
+        border="~ base rounded"
+        px2 py1 text-sm
+        hover:bg-active
+        @click="refresh()"
+      >
+        <div class="i-ph-arrow-clockwise" />
+      </button>
+    </div>
+
+    <!-- Empty states -->
+    <div v-if="isLoading && !updates?.length" flex-1 flex items-center justify-center>
+      <div op50>
+        Loading HMR history...
+      </div>
+    </div>
+
+    <div v-else-if="!filteredUpdates.length" flex-1 flex items-center justify-center>
+      <div op50 flex="~ col items-center gap-2">
+        <div class="i-ph-lightning-duotone" text-4xl />
+        <span>No HMR updates yet</span>
+        <span text-xs>Edit a file to see updates appear here</span>
+      </div>
+    </div>
+
+    <!-- Timeline view -->
+    <div v-else-if="viewMode === 'timeline'" class="flex-1 of-hidden relative">
+      <!-- New updates indicator (positioned over the scroll container) -->
+      <Transition name="slide-down">
+        <button
+          v-if="missedUpdates > 0"
+          absolute top-2 left="50%" z-10
+          class="-translate-x-50%"
+          flex="~ items-center gap-1.5"
+          bg-primary text-white
+          px3 py1.5 rounded-full
+          text-xs font-medium
+          shadow-lg
+          hover:opacity-90
+          transition-opacity
+          @click="scrollToTop"
+        >
+          <div class="i-ph-arrow-up" />
+          {{ missedUpdates }} new update{{ missedUpdates > 1 ? 's' : '' }}
+        </button>
+      </Transition>
+      <div ref="listRef" h-full of-auto @scroll="onListScroll">
+        <div flex="~ col gap-1">
+          <div
+            v-for="update in filteredUpdates"
+            :key="update.id"
+            border="~ base rounded"
+            p2 sm:p3 flex="~ col gap-1"
+            hover:bg-active
+            transition-colors
+          >
+            <div flex="~ items-center gap-2 flex-wrap">
+              <div
+                :class="update.type === 'full-reload' ? 'i-ph-arrow-counter-clockwise text-orange' : 'i-ph-lightning text-green'"
+              />
+              <span text-xs op50 font-mono>
+                {{ formatTime(update.timestamp) }}
+              </span>
+              <span
+                text-xs px1 rounded
+                :class="update.type === 'full-reload' ? 'bg-orange/20 text-orange' : 'bg-green/20 text-green'"
+              >
+                {{ update.type === 'full-reload' ? 'Full Reload' : 'HMR Update' }}
+              </span>
+              <div flex-1 />
+              <span text-xs op30 hidden sm:inline>{{ timeAgo(update.timestamp) }}</span>
+            </div>
+            <div pl5 flex="~ col gap-0.5" of-hidden>
+              <div
+                v-for="file in update.files"
+                :key="file"
+                flex="~ items-center gap-1"
+                text-sm group
+                of-hidden
+              >
+                <div class="i-ph-file-duotone shrink-0" text-xs op50 />
+                <span font-mono truncate :title="file">{{ getRelativePath(file) }}</span>
+                <button
+                  v-tooltip="'Open in editor'"
+                  class="i-ph-pencil-simple shrink-0 op40 hover:op100"
+                  text-xs
+                  @click.stop="openInEditor(file)"
+                />
+              </div>
+              <div
+                v-for="mod in update.modules"
+                :key="mod"
+                flex="~ items-center gap-1"
+                text-xs op40
+                of-hidden
+              >
+                <div class="i-ph-cube-duotone shrink-0" text-xs />
+                <span font-mono truncate :title="mod">{{ mod }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Grouped view -->
+    <div v-else ref="listRef" flex-1 of-auto>
+      <div flex="~ col gap-2">
+        <div
+          v-for="group in groupedByFile"
+          :key="group.key"
+          border="~ base rounded"
+          p2 sm:p3 flex="~ col gap-2"
+          hover:bg-active
+          transition-colors
+        >
+          <div flex="~ items-center gap-2" of-hidden>
+            <div class="i-ph-file-duotone shrink-0" op60 />
+            <span font-mono text-sm truncate :title="group.file">{{ getRelativePath(group.file) }}</span>
+            <button
+              v-tooltip="'Open in editor'"
+              class="i-ph-pencil-simple shrink-0 op40 hover:op100"
+              text-xs
+              @click.stop="openInEditor(group.file)"
+            />
+            <div flex-1 />
+            <span
+              text-xs px1.5 py0.5 rounded shrink-0
+              class="bg-primary:15 text-primary"
+              font-mono
+            >
+              {{ group.count }}x
+            </span>
+            <span text-xs op40 shrink-0 hidden sm:inline>{{ timeAgo(group.latestTimestamp) }}</span>
+          </div>
+          <div pl5 flex="~ gap-1 flex-wrap">
+            <span
+              v-for="update in group.updates.slice(0, 10)"
+              :key="update.id"
+              text-xs op40 font-mono
+              border="~ base rounded"
+              px1
+            >
+              {{ formatTime(update.timestamp) }}
+            </span>
+            <span v-if="group.count > 10" text-xs op30>
+              +{{ group.count - 10 }} more
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div border="t base" pt2 text-xs op50 flex="~ items-center gap-2">
+      <div class="i-ph-info" />
+      <span>{{ filteredUpdates.length }} update(s)</span>
+      <span v-if="viewMode === 'grouped'" op30>
+        · {{ groupedByFile.length }} file(s)
+      </span>
+      <div flex-1 />
+      <span v-if="liveMode" class="text-green" flex="~ items-center gap-1">
+        <div class="i-ph-circle-fill animate-pulse" text-xs />
+        <span hidden sm:inline>Live</span>
+      </span>
+    </div>
+  </div>
+</template>