feat(oxc): migrate the DevTools UI onto @vitejs/devtools-ui + UnoCSS

.gitignore

@@ -14,6 +14,8 @@ packages/vite/runtime
 packages/rolldown/src/public/fonts
 packages/rolldown/src/app/public/fonts
 packages/rolldown/runtime
+packages/oxc/src/public/fonts
+packages/oxc/src/app/public/fonts
 packages/kit/skills
 .rolldown
 .devtools-oxc

AGENTS.md

@@ -23,7 +23,7 @@ Monorepo (`pnpm` workspaces + `turbo`). ESM TypeScript; bundled with `tsdown`. P
 | `packages/ui` | `@vitejs/devtools-ui` | Shared UI components, composables, and UnoCSS preset (`presetDevToolsUI`). Private, not published. |
 | `packages/rolldown` | `@vitejs/devtools-rolldown` | Nuxt UI for Rolldown build data. Hub-mounted via `Plugin.devtools.setup`. Serves at `/__devtools-rolldown/`. |
 | `packages/vite` | `@vitejs/devtools-vite` | Nuxt UI for Vite DevTools (WIP). Hub-mounted via `Plugin.devtools.setup`. Serves at `/__devtools-vite/`. |
-| `packages/oxc` | `@vitejs/devtools-oxc` | Oxc toolchain (oxlint/oxfmt) inspector, donated from [`yuyinws/oxc-inspector`](https://github.com/yuyinws/oxc-inspector) with full history; owned by Leo. Advertised by core as a built-in install launcher in the `~viteplus` group (installed on demand), mounted via `DevToolsOxc()` from `@vitejs/devtools-oxc/vite` once present, plus a standalone CLI/client. A workspace member on the current devframe/hub APIs; its build is not wired into turbo yet (the `@nuxt/ui` client is pending a UI-stack decision), so it stays out of the build/typecheck/lint/export-snapshot gates. |
+| `packages/oxc` | `@vitejs/devtools-oxc` | Oxc toolchain (oxlint/oxfmt) inspector, donated from [`yuyinws/oxc-inspector`](https://github.com/yuyinws/oxc-inspector) with full history; owned by Leo. Advertised by core as a built-in install launcher in the `~viteplus` group (installed on demand), mounted via `DevToolsOxc()` from `@vitejs/devtools-oxc/vite` once present, plus a standalone CLI/client. Its Nuxt client is on the shared stack — UnoCSS via `presetDevToolsUI` and `@vitejs/devtools-ui` components (an oxc-cyan `primary` scale derived from the `BannerOxcDevTools` accent) — and is wired into the turbo build, `vue-tsc` typecheck (own `src/tsconfig.json` reference) and export-snapshot gates. It dogfoods its own oxlint/oxfmt on itself (run `pnpm -C packages/oxc lint`), whose formatting conflicts with the repo-wide antfu ESLint config, so it stays out of the shared ESLint run. |
 | `packages/vitest` | `@vitejs/devtools-vitest` | Slim launcher for the Vitest UI, in the `~viteplus` dock group. A `launcher` dock (only shown when the project uses Vitest) installs `@vitest/ui` on demand, spawns `vitest --ui`, then swaps to an iframe. Serves its favicon at `/__devtools-vitest/`. |
 | `packages/webext` | — | Browser extension scaffolding (ancillary). |
 

eslint.config.js

@@ -14,9 +14,10 @@ export default antfu({
     // dependency specifiers rather than the repo catalog and stays out of the
     // repo-wide ESLint run.
     'playgrounds/production',
-    // `packages/oxc` (donated from yuyinws/oxc-inspector) carries its own
-    // oxlint/oxfmt style and is linted by its own toolchain, so it stays out of
-    // the repo-wide ESLint run.
+    // `packages/oxc` is DevTools for the Oxc toolchain and dogfoods its own
+    // oxlint/oxfmt on itself, whose formatting (e.g. `arrowParens: "avoid"`)
+    // conflicts with this shared antfu config, so it is linted by its own
+    // toolchain (`pnpm -C packages/oxc lint`) rather than the repo-wide run.
     'packages/oxc',
     '!packages/oxc/package.json',
   ],

packages/oxc/package.json

@@ -55,25 +55,27 @@
   "devDependencies": {
     "@humanwhocodes/momoa": "catalog:frontend",
     "@nuxt/kit": "catalog:build",
-    "@nuxt/ui": "catalog:frontend",
     "@types/picomatch": "catalog:types",
+    "@unocss/nuxt": "catalog:build",
     "@vitejs/devtools": "workspace:*",
     "@vitejs/devtools-kit": "workspace:*",
     "@vitejs/devtools-ui": "workspace:*",
     "@vueuse/core": "catalog:frontend",
     "@vueuse/nuxt": "catalog:build",
     "devframe": "catalog:deps",
+    "floating-vue": "catalog:frontend",
     "modern-monaco": "catalog:frontend",
     "nuxt": "catalog:build",
     "oxfmt": "catalog:devtools",
     "oxlint": "catalog:devtools",
     "pathe": "catalog:deps",
     "picomatch": "catalog:frontend",
     "shiki": "catalog:frontend",
-    "tailwindcss": "catalog:build",
+    "theme-vitesse": "catalog:frontend",
     "tsdown": "catalog:build",
     "tsx": "catalog:build",
     "typescript": "catalog:devtools",
+    "unocss": "catalog:build",
     "vite": "catalog:build",
     "vue": "catalog:deps",
     "vue-router": "catalog:frontend"

packages/oxc/src/app/app.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
 import { connect, connectionState } from './composables/rpc'
+import 'floating-vue/dist/style.css'
+import './assets/css/main.css'
+import '@vitejs/devtools-ui/composables/dark'
 
 connect()
 </script>
 
 <template>
-  <div v-if="connectionState.error" class="text-red-500">
+  <div v-if="connectionState.error" text-red>
     {{ connectionState.error }}
   </div>
   <VisualLoading v-else-if="!connectionState.connected" text="Connecting..." />
-  <UApp v-else>
-    <UMain class="container mx-auto p-4">
-      <NuxtPage />
-    </UMain>
-  </UApp>
+  <main v-else container mx-auto p4>
+    <NuxtPage />
+  </main>
 </template>

packages/oxc/src/app/assets/css/main.css

@@ -1,51 +1,67 @@
-@import 'tailwindcss';
-@import '@nuxt/ui';
-@custom-variant dark (&:where(.dark, .dark *));
+@import '@vitejs/devtools-ui/styles/global.css';
 
-body {
-  background-color: unset;
-  @apply text-neutral-800 dark:text-neutral-300;
+/* Floating Vue tooltips / dropdowns — align to the shared semantic tokens. */
+.v-popper--theme-dropdown .v-popper__inner,
+.v-popper--theme-tooltip .v-popper__inner {
+  --uno: bg-tooltip color-base font-sans rounded border border-base shadow dark: shadow-2xl;
+  box-shadow: 0 6px 30px #0000001a;
 }
 
-.bg-dots {
-  background-image: url('/dot-grid-light.png');
-  background-size: 50px;
-  background-repeat: repeat;
+.v-popper--theme-dropdown .v-popper__inner {
+  max-width: 50vw;
+  max-height: 50vh;
+  overflow: auto;
 }
 
-.dark .bg-dots,
-.bg-dots.dark {
-  color-scheme: dark;
-  background-color: black;
-  background-image: url('/dot-grid-dark.png');
+.v-popper--theme-tooltip .v-popper__arrow-inner,
+.v-popper--theme-dropdown .v-popper__arrow-inner {
+  visibility: visible;
+  --uno: border-solid border-white dark: border-#111;
 }
 
-.shiki,
-.shiki span {
-  color: var(--shiki-dark) !important;
-  background-color: var(--ui-bg) !important;
+.v-popper--theme-tooltip .v-popper__arrow-outer,
+.v-popper--theme-dropdown .v-popper__arrow-outer {
+  --uno: border-solid border-base;
 }
 
-.summary-card {
-  @apply border gap-1 border-neutral-200 dark:border-neutral-700 rounded-sm px-2 py-1 flex items-center;
+/* Shiki code blocks: drop Shiki's baked-in theme background (an inline style,
+   so `!important` is required) and let the host surface show through. Light
+   mode keeps Shiki's inline light colors; dark mode swaps to the dual-theme
+   `--shiki-dark` values, again overriding the inline color. */
+.shiki,
+.shiki span {
+  background-color: transparent !important;
 }
 
-.color-scale-neutral {
-  @apply text-gray-700/75 dark:text-gray-300/75;
+.dark .shiki,
+.dark .shiki span {
+  color: var(--shiki-dark) !important;
 }
 
-.color-scale-low {
-  @apply text-lime-700/75 dark:text-lime-300/75 dark:saturate-50;
+/* Monaco */
+.monaco-editor,
+.monaco-editor .margin,
+.monaco-editor .view-lines,
+.monaco-editor .view-line,
+.monaco-editor .line-numbers {
+  font-family: 'Input Mono', 'FiraCode', monospace !important;
+  font-size: 13px !important;
 }
 
-.color-scale-medium {
-  @apply text-amber-700/85 dark:text-amber-300/85 dark:saturate-80;
+.monaco-editor,
+.monaco-editor .monaco-editor-background,
+.monaco-editor .overflow-guard,
+.monaco-editor .margin {
+  background-color: transparent !important;
 }
 
-.color-scale-high {
-  @apply text-orange-700/95 dark:text-orange-300/95;
+.monaco-scrollable-element > .scrollbar > .slider {
+  background-color: var(--app-scrollbar-thumb) !important;
+  border-radius: var(--app-scrollbar-radius) !important;
+  transition: background 0.2s ease;
 }
 
-.color-scale-critical {
-  @apply text-red-700/95 dark:text-red-300/95;
+.monaco-scrollable-element > .scrollbar > .slider.active,
+.monaco-scrollable-element > .scrollbar > .slider:hover {
+  background-color: var(--app-scrollbar-thumb-hover) !important;
 }

packages/oxc/src/app/components/Back.vue

@@ -14,13 +14,8 @@ function goBack() {
 </script>
 
 <template>
-  <u-button
-    icon="ph:arrow-bend-up-left-duotone"
-    color="neutral"
-    variant="outline"
-    class="cursor-pointer mb-2 w-fit"
-    @click="goBack"
-  >
+  <button btn-action-sm mb2 w-fit cursor-pointer @click="goBack">
+    <div i-ph-arrow-bend-up-left-duotone />
     Back
-  </u-button>
+  </button>
 </template>

packages/oxc/src/app/components/ErrorTooltip.vue

@@ -11,14 +11,12 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const severityClasses = computed(() => {
-  return props.message.severity === 'error'
-    ? 'bg-red-50 text-red-700 dark:bg-red-900/50 dark:text-red-300'
-    : 'bg-yellow-50 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-300'
+const severityBadge = computed(() => {
+  return props.message.severity === 'error' ? 'badge-color-red' : 'badge-color-amber'
 })
 
 const severityIcon = computed(() => {
-  return props.message.severity === 'error' ? 'ph:x-circle' : 'ph:warning-circle'
+  return props.message.severity === 'error' ? 'i-ph-x-circle' : 'i-ph-warning-circle'
 })
 
 const rpc = useRpc()
@@ -29,58 +27,68 @@ function handleOpenInEditor() {
 </script>
 
 <template>
-  <div class="space-y-3">
+  <div flex="~ col gap-3">
     <!-- Header area -->
-    <div class="flex items-center gap-2 pb-2 border-b border-neutral-200 dark:border-neutral-800">
-      <div
-        class="flex items-center gap-2 px-2 py-1 rounded-md text-sm font-medium"
-        :class="severityClasses"
-      >
-        <u-icon :name="severityIcon" class="w-3.5 h-3.5" />
-        <span class="font-mono">{{ message.code }}</span>
+    <div flex items-center gap-2 pb2 border="b base">
+      <div flex items-center gap-2 px2 py1 rounded-md text-sm font-medium :class="severityBadge">
+        <div :class="severityIcon" text-sm />
+        <span font-mono>{{ message.code }}</span>
       </div>
     </div>
 
     <!-- Message content -->
     <div
       v-if="message.message"
-      class="text-sm leading-relaxed text-neutral-700 dark:text-neutral-300"
+      text-sm
+      leading-relaxed
+      color-base
       v-html="processLabelHtml(message.message)"
     />
 
     <!-- Help text -->
-    <div
-      v-if="message.help"
-      class="flex items-start gap-2 p-2 bg-blue-50 dark:bg-blue-950/30 rounded-md border border-blue-100/50 dark:border-blue-900/50"
-    >
-      <u-icon
-        name="ph:lightbulb-duotone"
-        class="w-4 h-4 text-blue-500 dark:text-blue-400 mt-0.5 flex-shrink-0"
-      />
-      <div class="text-xs text-blue-600 dark:text-blue-300 leading-relaxed">
+    <div v-if="message.help" flex items-start gap-2 p2 rounded-md border="~ base" bg-active>
+      <div i-ph-lightbulb-duotone flex-shrink-0 text-primary-500 mt-0.5 />
+      <div text-xs op-fade leading-relaxed>
         {{ message.help }}
       </div>
     </div>
 
     <!-- Action buttons -->
-    <div class="flex items-center gap-2 pt-2 border-t border-neutral-200 dark:border-neutral-800">
+    <div flex items-center gap-2 pt2 border="t base">
       <!-- Jump to the rule URL -->
       <a
         v-if="message.url"
         :href="message.url"
         target="_blank"
-        class="flex items-center gap-1.5 px-2 py-1.5 rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors text-xs text-neutral-600 dark:text-neutral-400"
+        flex
+        items-center
+        gap-1.5
+        px2
+        py1.5
+        rounded-md
+        op-fade
+        hover:bg-active
+        text-xs
       >
-        <u-icon name="ph:info" class="w-3.5 h-3.5" />
+        <div i-ph-info text-sm />
         <span>Rule details</span>
       </a>
 
       <!-- Open in editor -->
       <button
-        class="flex items-center gap-1.5 cursor-pointer px-2 py-1.5 rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors text-xs text-neutral-600 dark:text-neutral-400"
+        flex
+        items-center
+        gap-1.5
+        cursor-pointer
+        px2
+        py1.5
+        rounded-md
+        op-fade
+        hover:bg-active
+        text-xs
         @click="handleOpenInEditor"
       >
-        <u-icon name="radix-icons:open-in-new-window" class="w-3.5 h-3.5" />
+        <div i-radix-icons:open-in-new-window text-sm />
         <span>Open in editor</span>
       </button>
     </div>