From 28f0802bc64872b4a86af88e77c69c9763a8d46a Mon Sep 17 00:00:00 2001
From: yuyinws <lyc657508366@gmail.com>
Date: Mon, 3 Aug 2026 15:05:14 +0800
Subject: [PATCH 1/3] feat(oxc): add Oxlint setup launcher

---
 docs/errors/OXDT0005.md                       |  16 ++
 docs/errors/index.md                          |   1 +
 packages/oxc/package.json                     |   1 +
 packages/oxc/src/app/pages/index.vue          | 119 +++++++++++----
 packages/oxc/src/app/pages/oxfmt.vue          |  10 +-
 .../oxc/src/app/pages/oxfmt/documents.vue     |  25 +++-
 packages/oxc/src/app/pages/oxlint.vue         |  33 +++--
 .../oxc/src/app/pages/oxlint/documents.vue    |  25 +++-
 packages/oxc/src/app/utils/overview.ts        |  18 +++
 .../src/node/__tests__/oxlint-migrate.test.ts |  69 +++++++++
 packages/oxc/src/node/devframe.ts             |   2 +-
 packages/oxc/src/node/diagnostics.ts          |   4 +
 .../node/rpc/functions/get-config-files.ts    |   1 -
 .../oxc/src/node/rpc/functions/overview.ts    |   8 +
 .../src/node/rpc/functions/oxlint-migrate.ts  | 137 ++++++++++++++++++
 packages/oxc/src/node/rpc/index.ts            |   4 +
 packages/oxc/src/node/utils/config-files.ts   |   2 +-
 pnpm-lock.yaml                                |   3 +
 18 files changed, 425 insertions(+), 53 deletions(-)
 create mode 100644 docs/errors/OXDT0005.md
 create mode 100644 packages/oxc/src/app/utils/overview.ts
 create mode 100644 packages/oxc/src/node/__tests__/oxlint-migrate.test.ts
 create mode 100644 packages/oxc/src/node/rpc/functions/oxlint-migrate.ts

diff --git a/docs/errors/OXDT0005.md b/docs/errors/OXDT0005.md
new file mode 100644
index 000000000..bfd546d6a
--- /dev/null
+++ b/docs/errors/OXDT0005.md
@@ -0,0 +1,16 @@
+---
+outline: deep
+---
+# OXDT0005: Oxlint Setup Failed
+
+## Message
+> Failed to set up Oxlint: `{reason}`
+
+## Cause
+Vite DevTools could not install or initialize Oxlint in the project root.
+
+## Fix
+Check the project package manager and configuration, then try again.
+
+## Source
+- [`packages/oxc/src/node/rpc/functions/oxlint-migrate.ts`](https://github.com/vitejs/devtools/blob/main/packages/oxc/src/node/rpc/functions/oxlint-migrate.ts) — runs the installation, initialization, and migration commands.
diff --git a/docs/errors/index.md b/docs/errors/index.md
index 4c865edb8..c73587391 100644
--- a/docs/errors/index.md
+++ b/docs/errors/index.md
@@ -78,3 +78,4 @@ Emitted by `@vitejs/devtools-oxc`.
 | [OXDT0002](./OXDT0002) | error | Invalid Lint Result ID |
 | [OXDT0003](./OXDT0003) | error | Failed to Delete Lint Result |
 | [OXDT0004](./OXDT0004) | error | Oxlint Config Inspection Failed |
+| [OXDT0005](./OXDT0005) | error | Oxlint Setup Failed |
diff --git a/packages/oxc/package.json b/packages/oxc/package.json
index 4e32370fd..889c37dff 100644
--- a/packages/oxc/package.json
+++ b/packages/oxc/package.json
@@ -46,6 +46,7 @@
     "cac": "catalog:deps",
     "devframe": "catalog:deps",
     "local-pkg": "catalog:deps",
+    "nypm": "catalog:deps",
     "nostics": "catalog:deps",
     "pathe": "catalog:deps",
     "tinyexec": "catalog:deps"
diff --git a/packages/oxc/src/app/pages/index.vue b/packages/oxc/src/app/pages/index.vue
index 1339b645b..3d2420965 100644
--- a/packages/oxc/src/app/pages/index.vue
+++ b/packages/oxc/src/app/pages/index.vue
@@ -1,40 +1,67 @@
 <script setup lang="ts">
 import BannerOxcDevTools from '@vitejs/devtools-ui/components/Banner/BannerOxcDevTools.vue'
+import { DEVTOOLS_TERMINALS_DOCK_ID } from '@vitejs/devtools-kit/constants'
 import DisplayBadge from '@vitejs/devtools-ui/components/Display/DisplayBadge.vue'
 import DisplayFileIcon from '@vitejs/devtools-ui/components/Display/DisplayFileIcon.vue'
 import DisplayNumberBadge from '@vitejs/devtools-ui/components/Display/DisplayNumberBadge.vue'
 import { useAsyncState } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { createOverview } from '../utils/overview'
 import { useRpc } from '#imports'
 
 const rpc = useRpc()
 const vitePlusDarkLogo = '/__devtools-oxc/viteplus-dark.svg'
 const vitePlusLightLogo = '/__devtools-oxc/viteplus-light.svg'
 
-const { state: overview, isLoading } = useAsyncState(
-  () => rpc.value.call('devtools-oxc:overview'),
-  {
-    oxlint: {
-      installed: false,
-      version: undefined,
-      latest: true,
-      npmxLink: undefined,
-    },
-    oxfmt: {
-      installed: false,
-      version: undefined,
-      latest: true,
-      npmxLink: undefined,
-    },
-    vitePlus: undefined,
-  },
-)
+const {
+  state: overview,
+  isLoading,
+  execute: refreshOverview,
+} = useAsyncState(() => rpc.value.call('devtools-oxc:overview'), createOverview())
 
-const { state: configFiles } = useAsyncState(
+const { state: configFiles, execute: refreshConfigFiles } = useAsyncState(
   () => rpc.value.call('devtools-oxc:get-config-files'),
   [],
 )
 
+const isMigrating = ref(false)
+const migrationError = ref<string>()
+const migrationSessionId = ref<string>()
+
+async function migrateOxlint() {
+  await runOxlintSetup('devtools-oxc:migrate-eslint')
+}
+
+async function installOxlint() {
+  await runOxlintSetup('devtools-oxc:install-oxlint')
+}
+
+async function runOxlintSetup(
+  action: 'devtools-oxc:migrate-eslint' | 'devtools-oxc:install-oxlint',
+) {
+  isMigrating.value = true
+  migrationError.value = undefined
+  migrationSessionId.value = undefined
+  try {
+    const { sessionId } = await rpc.value.call(action)
+    migrationSessionId.value = sessionId
+    await rpc.value.call('devtools-oxc:wait-for-setup')
+    await Promise.all([refreshOverview(), refreshConfigFiles()])
+  } catch (error) {
+    migrationError.value = error instanceof Error ? error.message : String(error)
+  } finally {
+    isMigrating.value = false
+  }
+}
+
+async function viewMigrationInTerminal() {
+  if (!migrationSessionId.value) return
+  await rpc.value.call('hub:docks:activate', {
+    dockId: DEVTOOLS_TERMINALS_DOCK_ID,
+    params: { sessionId: migrationSessionId.value },
+  })
+}
+
 interface ToolView {
   title: string
   icon: string
@@ -106,12 +133,23 @@ const tools = computed(() => {
       <div
         v-for="tool in tools"
         :key="tool.id"
-        class="border border-base rounded p2 flex-1 min-w-max"
+        class="border border-base rounded p-4 flex-1 min-w-120 min-h-56"
       >
-        <div class="p4 flex flex-col gap-4 h-full">
-          <div class="text-2xl font-semibold">{{ tool.name }}</div>
+        <div class="flex flex-col gap-4 h-full justify-between">
+          <div class="flex items-end justify-between gap-2">
+            <div class="text-2xl font-semibold">{{ tool.name }}</div>
+            <DisplayBadge
+              v-if="!tool.info.installed"
+              text="Not installed"
+              :color="false"
+              class="badge-color-gray"
+            />
+          </div>
 
-          <div class="grid grid-cols-[max-content_160px_2fr] gap-2 items-center">
+          <div
+            v-if="tool.info.installed"
+            class="grid grid-cols-[max-content_160px_2fr] gap-2 items-center"
+          >
             <div class="i-ph-tag-duotone op-fade" />
             <span class="op-fade">Version</span>
             <div class="flex items-center gap-2 w-full">
@@ -123,7 +161,6 @@ const tools = computed(() => {
               >
                 v{{ tool.info.version }}
               </a>
-              <span v-else class="op-fade">Not installed</span>
               <a
                 v-if="tool.info.installed"
                 :href="
@@ -165,6 +202,26 @@ const tools = computed(() => {
           </div>
 
           <div class="flex gap-2">
+            <button
+              v-if="tool.id === 'oxlint' && overview.needsOxlintMigration"
+              type="button"
+              class="btn-action flex flex-col flex-1 min-w-max p4 !px4 whitespace-nowrap"
+              :disabled="isMigrating"
+              @click="migrateOxlint"
+            >
+              <div class="i-simple-icons:eslint text-2xl" />
+              {{ isMigrating ? 'Migrating…' : 'Migrate from ESLint' }}
+            </button>
+            <button
+              v-if="tool.id === 'oxlint' && !tool.info.installed && !overview.needsOxlintMigration"
+              type="button"
+              class="btn-action flex flex-col flex-1 min-w-40 p4 !px4 whitespace-nowrap"
+              :disabled="isMigrating"
+              @click="installOxlint"
+            >
+              <div class="i-ph-rocket-launch-duotone text-2xl" />
+              {{ isMigrating ? 'Installing…' : 'Install Oxlint' }}
+            </button>
             <NuxtLink
               v-for="view in tool.views"
               :key="view.title"
@@ -175,6 +232,18 @@ const tools = computed(() => {
               {{ view.title }}
             </NuxtLink>
           </div>
+          <button
+            v-if="tool.id === 'oxlint' && isMigrating && migrationSessionId"
+            type="button"
+            class="btn-action flex items-center gap-2 self-start px3 py2 text-sm"
+            @click="viewMigrationInTerminal"
+          >
+            <div class="i-ph-terminal-window-duotone" />
+            View in terminals
+          </button>
+          <p v-if="tool.id === 'oxlint' && migrationError" class="text-sm text-red">
+            {{ migrationError }}
+          </p>
         </div>
       </div>
     </div>
diff --git a/packages/oxc/src/app/pages/oxfmt.vue b/packages/oxc/src/app/pages/oxfmt.vue
index c48def22d..982408ce4 100644
--- a/packages/oxc/src/app/pages/oxfmt.vue
+++ b/packages/oxc/src/app/pages/oxfmt.vue
@@ -8,11 +8,11 @@ useSideNav(() => [
     icon: 'i-ph-house-duotone',
     to: '/',
   },
-  {
-    title: 'Config Inspector',
-    icon: 'i-ph-sliders-duotone',
-    to: '/oxfmt/config',
-  },
+  // {
+  //   title: 'Config Inspector',
+  //   icon: 'i-ph-sliders-duotone',
+  //   to: '/oxfmt/config',
+  // },
   {
     title: 'Documents',
     icon: 'i-ph-book-open-duotone',
diff --git a/packages/oxc/src/app/pages/oxfmt/documents.vue b/packages/oxc/src/app/pages/oxfmt/documents.vue
index 5f1d8bfe8..3101b3f2a 100644
--- a/packages/oxc/src/app/pages/oxfmt/documents.vue
+++ b/packages/oxc/src/app/pages/oxfmt/documents.vue
@@ -1,7 +1,22 @@
+<script setup lang="ts">
+import VisualLoading from '@vitejs/devtools-ui/components/Visual/VisualLoading.vue'
+import { ref } from 'vue'
+
+const isLoading = ref(true)
+</script>
+
 <template>
-  <iframe
-    src="https://oxc.rs/docs/guide/usage/formatter.html"
-    title="Oxfmt Documentation"
-    class="border-0 block w-full h-full"
-  />
+  <div class="relative h-full">
+    <VisualLoading
+      v-if="isLoading"
+      class="absolute inset-0"
+      text="Loading Oxfmt documentation..."
+    />
+    <iframe
+      src="https://oxc.rs/docs/guide/usage/formatter.html"
+      title="Oxfmt Documentation"
+      class="border-0 block w-full h-full"
+      @load="isLoading = false"
+    />
+  </div>
 </template>
diff --git a/packages/oxc/src/app/pages/oxlint.vue b/packages/oxc/src/app/pages/oxlint.vue
index 1b37bbb45..dc16c5088 100644
--- a/packages/oxc/src/app/pages/oxlint.vue
+++ b/packages/oxc/src/app/pages/oxlint.vue
@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import PanelSideNav from '@vitejs/devtools-ui/components/Panel/PanelSideNav.vue'
 import { useSideNav } from '@vitejs/devtools-ui/composables/nav'
+import { useAsyncState } from '@vueuse/core'
+import { createOverview } from '../utils/overview'
+import { useRpc } from '#imports'
+
+const rpc = useRpc()
+const { state: overview } = useAsyncState(
+  () => rpc.value.call('devtools-oxc:overview'),
+  createOverview(),
+)
 
 useSideNav(() => [
   {
@@ -8,16 +17,20 @@ useSideNav(() => [
     icon: 'i-ph-house-duotone',
     to: '/',
   },
-  {
-    title: 'Lint Inspector',
-    icon: 'i-ph-magnifying-glass-duotone',
-    to: '/oxlint/lint',
-  },
-  {
-    title: 'Config Inspector',
-    icon: 'i-ph-gear-duotone',
-    to: '/oxlint/config',
-  },
+  ...(overview.value.oxlint.installed
+    ? [
+        {
+          title: 'Lint Inspector',
+          icon: 'i-ph-magnifying-glass-duotone',
+          to: '/oxlint/lint',
+        },
+        {
+          title: 'Config Inspector',
+          icon: 'i-ph-gear-duotone',
+          to: '/oxlint/config',
+        },
+      ]
+    : []),
   {
     title: 'Documents',
     icon: 'i-ph-book-open-duotone',
diff --git a/packages/oxc/src/app/pages/oxlint/documents.vue b/packages/oxc/src/app/pages/oxlint/documents.vue
index cf822f3f2..9092f4065 100644
--- a/packages/oxc/src/app/pages/oxlint/documents.vue
+++ b/packages/oxc/src/app/pages/oxlint/documents.vue
@@ -1,7 +1,22 @@
+<script setup lang="ts">
+import VisualLoading from '@vitejs/devtools-ui/components/Visual/VisualLoading.vue'
+import { ref } from 'vue'
+
+const isLoading = ref(true)
+</script>
+
 <template>
-  <iframe
-    src="https://oxc.rs/docs/guide/usage/linter.html"
-    title="Oxlint Documentation"
-    class="border-0 block w-full h-full"
-  />
+  <div class="relative h-full">
+    <VisualLoading
+      v-if="isLoading"
+      class="absolute inset-0"
+      text="Loading Oxlint documentation..."
+    />
+    <iframe
+      src="https://oxc.rs/docs/guide/usage/linter.html"
+      title="Oxlint Documentation"
+      class="border-0 block w-full h-full"
+      @load="isLoading = false"
+    />
+  </div>
 </template>
diff --git a/packages/oxc/src/app/utils/overview.ts b/packages/oxc/src/app/utils/overview.ts
new file mode 100644
index 000000000..04ebec490
--- /dev/null
+++ b/packages/oxc/src/app/utils/overview.ts
@@ -0,0 +1,18 @@
+export function createOverview() {
+  return {
+    oxlint: {
+      installed: false,
+      version: undefined,
+      latest: true,
+      npmxLink: undefined,
+    },
+    oxfmt: {
+      installed: false,
+      version: undefined,
+      latest: true,
+      npmxLink: undefined,
+    },
+    vitePlus: undefined,
+    needsOxlintMigration: false,
+  }
+}
diff --git a/packages/oxc/src/node/__tests__/oxlint-migrate.test.ts b/packages/oxc/src/node/__tests__/oxlint-migrate.test.ts
new file mode 100644
index 000000000..ed251a1e2
--- /dev/null
+++ b/packages/oxc/src/node/__tests__/oxlint-migrate.test.ts
@@ -0,0 +1,69 @@
+import { mkdtemp, rm, writeFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { needsOxlintMigration, oxlintInstall, oxlintMigrate } from '../rpc/functions/oxlint-migrate'
+
+const fixtures: string[] = []
+
+async function createFixture() {
+  const cwd = await mkdtemp(join(tmpdir(), 'oxlint-migrate-'))
+  fixtures.push(cwd)
+  return cwd
+}
+
+afterEach(async () => {
+  await Promise.all(fixtures.splice(0).map(dir => rm(dir, { recursive: true, force: true })))
+})
+
+describe('needsOxlintMigration', () => {
+  it('requires a root ESLint config and no root Oxlint config', async () => {
+    const cwd = await createFixture()
+    await writeFile(join(cwd, 'eslint.config.mjs'), 'export default []')
+    expect(needsOxlintMigration(cwd)).toBe(true)
+
+    await writeFile(join(cwd, 'oxlint.config.ts'), 'export default {}')
+    expect(needsOxlintMigration(cwd)).toBe(false)
+  })
+
+  it('runs installation and migration in one terminal session', async () => {
+    const cwd = await createFixture()
+    await writeFile(join(cwd, 'eslint.config.js'), 'export default []')
+    const getResult = vi
+      .fn<() => Promise<{ exitCode: number; stderr: string }>>()
+      .mockResolvedValue({ exitCode: 0, stderr: '' })
+    const startChildProcess = vi
+      .fn<(...args: unknown[]) => Promise<{ getResult: typeof getResult }>>()
+      .mockResolvedValue({ getResult })
+    const setup = oxlintMigrate.setup!({
+      cwd,
+      terminals: { startChildProcess, sessions: new Map() },
+    } as any)
+
+    await setup.handler!()
+
+    expect(startChildProcess).toHaveBeenCalledOnce()
+    expect(startChildProcess.mock.calls[0]![0].args.at(-1)).toContain(' && ')
+  })
+
+  it('installs Oxlint as a dev dependency before initializing it', async () => {
+    const cwd = await createFixture()
+    const startChildProcess = vi
+      .fn<
+        (
+          ...args: unknown[]
+        ) => Promise<{ getResult: () => Promise<{ exitCode: number; stderr: string }> }>
+      >()
+      .mockResolvedValue({ getResult: async () => ({ exitCode: 0, stderr: '' }) })
+    const setup = oxlintInstall.setup!({
+      cwd,
+      terminals: { startChildProcess, sessions: new Map() },
+    } as any)
+
+    await setup.handler!()
+
+    expect(startChildProcess.mock.calls[0]![0].args.at(-1)).toMatch(
+      /oxlint@latest && .*oxlint --init/,
+    )
+  })
+})
diff --git a/packages/oxc/src/node/devframe.ts b/packages/oxc/src/node/devframe.ts
index 5b6f2eab1..6aaee06d3 100644
--- a/packages/oxc/src/node/devframe.ts
+++ b/packages/oxc/src/node/devframe.ts
@@ -20,7 +20,7 @@ export const OXC_DEVTOOLS_BASE = '/__devtools-oxc/'
  */
 export const oxcDevframe = defineDevframe({
   id: 'devtools-oxc',
-  name: 'Oxc',
+  name: 'Oxc Devtools',
   version,
   packageName: name,
   homepage,
diff --git a/packages/oxc/src/node/diagnostics.ts b/packages/oxc/src/node/diagnostics.ts
index 52aa311d9..ac232d7a5 100644
--- a/packages/oxc/src/node/diagnostics.ts
+++ b/packages/oxc/src/node/diagnostics.ts
@@ -23,5 +23,9 @@ export const diagnostics = /* #__PURE__ */ defineDiagnostics({
         `Failed to inspect Oxlint config "${p.configPath}": ${p.reason}`,
       fix: 'Choose a supported Oxlint config inside the workspace and ensure Oxlint can read its rules.',
     },
+    OXDT0005: {
+      why: (p: { reason: string }) => `Failed to set up Oxlint: ${p.reason}`,
+      fix: 'Check the project package manager and configuration, then try again.',
+    },
   },
 })
diff --git a/packages/oxc/src/node/rpc/functions/get-config-files.ts b/packages/oxc/src/node/rpc/functions/get-config-files.ts
index 89323a95b..9fd014384 100644
--- a/packages/oxc/src/node/rpc/functions/get-config-files.ts
+++ b/packages/oxc/src/node/rpc/functions/get-config-files.ts
@@ -5,7 +5,6 @@ export const getConfigFiles = defineOxcRpc({
   name: 'devtools-oxc:get-config-files',
   type: 'query',
   jsonSerializable: true,
-  cacheable: true,
   setup: ctx => ({
     handler: () => getOxcConfigFiles(ctx.cwd),
   }),
diff --git a/packages/oxc/src/node/rpc/functions/overview.ts b/packages/oxc/src/node/rpc/functions/overview.ts
index 8525876db..117ec95da 100644
--- a/packages/oxc/src/node/rpc/functions/overview.ts
+++ b/packages/oxc/src/node/rpc/functions/overview.ts
@@ -1,6 +1,7 @@
 import { defineOxcRpc } from '../_define'
 import { x } from 'tinyexec'
 import { getVitePlusVersions, isVitePlusInstalled } from '../../utils/vite-plus'
+import { needsOxlintMigration } from './oxlint-migrate'
 
 type Package = {
   installed: boolean
@@ -50,6 +51,9 @@ export const overview = defineOxcRpc({
         } else {
           try {
             const { stdout } = await x('oxlint', ['--version'], { nodeOptions: { cwd: ctx.cwd } })
+            if (!stdout) {
+              throw new Error('Not installed')
+            }
             oxlint.installed = true
             oxlint.version = stdout.split(' ')[1]?.trim().replaceAll('\n', '') ?? undefined
             oxlint.latest = oxlint.version === oxlintData.version
@@ -59,6 +63,9 @@ export const overview = defineOxcRpc({
           }
           try {
             const { stdout } = await x('oxfmt', ['--version'], { nodeOptions: { cwd: ctx.cwd } })
+            if (!stdout) {
+              throw new Error('Not installed')
+            }
             oxfmt.installed = true
             oxfmt.version = stdout.split(' ')[1]?.trim().replaceAll('\n', '') ?? undefined
             oxfmt.latest = oxfmt.version === oxfmtData.version
@@ -71,6 +78,7 @@ export const overview = defineOxcRpc({
           oxlint,
           oxfmt,
           vitePlus: vitePlusVersions?.vitePlus,
+          needsOxlintMigration: needsOxlintMigration(ctx.cwd),
         }
       },
     }
diff --git a/packages/oxc/src/node/rpc/functions/oxlint-migrate.ts b/packages/oxc/src/node/rpc/functions/oxlint-migrate.ts
new file mode 100644
index 000000000..b21b31359
--- /dev/null
+++ b/packages/oxc/src/node/rpc/functions/oxlint-migrate.ts
@@ -0,0 +1,137 @@
+import type { DevToolsTerminalHost } from '@vitejs/devtools-kit'
+import type { DevframeNodeContext } from 'devframe/types'
+import { existsSync } from 'node:fs'
+import { addDependencyCommand, detectPackageManager, dlxCommand } from 'nypm'
+import { Diagnostic } from 'nostics'
+import { join } from 'pathe'
+import { x } from 'tinyexec'
+import { diagnostics } from '../../diagnostics'
+import { CONFIG_FILES } from '../../utils/config-files'
+import { defineOxcRpc } from '../_define'
+
+const eslintConfigFiles = ['eslint.config.js', 'eslint.config.mjs']
+
+type ContextWithTerminals = DevframeNodeContext & { terminals?: DevToolsTerminalHost }
+type MigrationSession = Awaited<ReturnType<DevToolsTerminalHost['startChildProcess']>>
+
+let current: MigrationSession | undefined
+let currentSessionId: string | undefined
+let runCount = 0
+
+export function needsOxlintMigration(root: string): boolean {
+  return (
+    eslintConfigFiles.some(file => existsSync(join(root, file))) &&
+    !Object.keys(CONFIG_FILES).some(file => existsSync(join(root, file)))
+  )
+}
+
+export const oxlintMigrate = defineOxcRpc({
+  name: 'devtools-oxc:migrate-eslint',
+  type: 'action',
+  setup: context => ({
+    handler: () => startMigration(context as ContextWithTerminals),
+  }),
+})
+
+async function startMigration(context: ContextWithTerminals): Promise<{ sessionId?: string }> {
+  const root = context.cwd
+  if (!needsOxlintMigration(root))
+    throw diagnostics.OXDT0005({ reason: 'No eligible ESLint config was found.' })
+
+  try {
+    const packageManager = (await detectPackageManager(root))?.name ?? 'npm'
+    const install = addDependencyCommand(packageManager, 'oxlint@latest', { dev: true })
+    const run = dlxCommand(packageManager, '@oxlint/migrate', { short: true })
+    return startSetup(context, [install, run], 'Migrate ESLint to Oxlint')
+  } catch (error) {
+    if (error instanceof Diagnostic) throw error
+    throw diagnostics.OXDT0005({
+      reason: error instanceof Error ? error.message : String(error),
+      cause: error,
+    })
+  }
+}
+
+async function startInstall(context: ContextWithTerminals): Promise<{ sessionId?: string }> {
+  try {
+    const packageManager = (await detectPackageManager(context.cwd))?.name ?? 'npm'
+    const install = addDependencyCommand(packageManager, 'oxlint@latest', { dev: true })
+    const init = dlxCommand(packageManager, 'oxlint', { args: ['--init'], short: true })
+    return startSetup(context, [install, init], 'Install Oxlint')
+  } catch (error) {
+    if (error instanceof Diagnostic) throw error
+    throw diagnostics.OXDT0005({
+      reason: error instanceof Error ? error.message : String(error),
+      cause: error,
+    })
+  }
+}
+
+async function startSetup(
+  context: ContextWithTerminals,
+  commandLines: string[],
+  title: string,
+): Promise<{ sessionId?: string }> {
+  const terminals = context.terminals
+  if (terminals) {
+    if (currentSessionId && terminals.sessions.get(currentSessionId)?.status === 'running')
+      return { sessionId: currentSessionId }
+
+    const command = commandLines.join(' && ')
+    currentSessionId = `devtools-oxc:setup:${++runCount}`
+    current = await terminals.startChildProcess(
+      process.platform === 'win32'
+        ? { command: 'cmd', args: ['/d', '/s', '/c', command], cwd: context.cwd }
+        : { command: 'sh', args: ['-c', command], cwd: context.cwd },
+      { id: currentSessionId, title, icon: 'ph:terminal-window-duotone' },
+    )
+    return { sessionId: currentSessionId }
+  }
+
+  current = undefined
+  currentSessionId = undefined
+  for (const commandLine of commandLines) {
+    const [command, ...args] = commandLine.split(' ')
+    const result = await x(command!, args, { nodeOptions: { cwd: context.cwd } })
+    if (result.exitCode !== 0) {
+      throw diagnostics.OXDT0005({
+        reason: result.stderr.trim() || `Command exited with code ${result.exitCode ?? 'null'}.`,
+      })
+    }
+  }
+  return {}
+}
+
+async function waitForSetup(): Promise<void> {
+  if (!current) return
+  try {
+    const result = await current.getResult()
+    if (result.exitCode !== 0) {
+      throw diagnostics.OXDT0005({
+        reason:
+          result.stderr.trim() ||
+          `Migration command exited with code ${result.exitCode ?? 'null'}.`,
+      })
+    }
+  } catch (error) {
+    if (error instanceof Diagnostic) throw error
+    throw diagnostics.OXDT0005({
+      reason: error instanceof Error ? error.message : String(error),
+      cause: error,
+    })
+  }
+}
+
+export const oxlintInstall = defineOxcRpc({
+  name: 'devtools-oxc:install-oxlint',
+  type: 'action',
+  setup: context => ({
+    handler: () => startInstall(context as ContextWithTerminals),
+  }),
+})
+
+export const oxlintWaitForSetup = defineOxcRpc({
+  name: 'devtools-oxc:wait-for-setup',
+  type: 'action',
+  setup: () => ({ handler: waitForSetup }),
+})
diff --git a/packages/oxc/src/node/rpc/index.ts b/packages/oxc/src/node/rpc/index.ts
index aee7f05d1..2c77bcdbd 100644
--- a/packages/oxc/src/node/rpc/index.ts
+++ b/packages/oxc/src/node/rpc/index.ts
@@ -9,6 +9,7 @@ import { oxlintGetConfigFile } from './functions/oxlint-get-config-file'
 import { oxfmtGetConfigFile } from './functions/oxfmt-get-config-file'
 import { openInEditor } from './functions/open-in-editor'
 import { getConfigFiles } from './functions/get-config-files'
+import { oxlintInstall, oxlintMigrate, oxlintWaitForSetup } from './functions/oxlint-migrate'
 
 export const rpcFunctions = [
   oxlintRun,
@@ -20,6 +21,9 @@ export const rpcFunctions = [
   oxlintGetConfigFile,
   oxfmtGetConfigFile,
   getConfigFiles,
+  oxlintMigrate,
+  oxlintInstall,
+  oxlintWaitForSetup,
   openInEditor,
 ] as const
 
diff --git a/packages/oxc/src/node/utils/config-files.ts b/packages/oxc/src/node/utils/config-files.ts
index 2063e0c36..fd1c8be66 100644
--- a/packages/oxc/src/node/utils/config-files.ts
+++ b/packages/oxc/src/node/utils/config-files.ts
@@ -6,7 +6,7 @@ import { promisify } from 'node:util'
 
 const execFile = promisify(execFileCallback)
 
-const CONFIG_FILES = {
+export const CONFIG_FILES = {
   '.oxlintrc.json': { tool: 'oxlint', format: 'json' },
   '.oxlintrc.jsonc': { tool: 'oxlint', format: 'jsonc' },
   'oxlint.config.js': { tool: 'oxlint', format: 'js' },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c4a369350..f046e2794 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -973,6 +973,9 @@ importers:
       nostics:
         specifier: catalog:deps
         version: 1.2.0
+      nypm:
+        specifier: catalog:deps
+        version: 0.6.9
       pathe:
         specifier: catalog:deps
         version: 2.0.3

From b2e21a80926977edd5b3f4e225f2f9e60c01334e Mon Sep 17 00:00:00 2001
From: yuyinws <lyc657508366@gmail.com>
Date: Tue, 4 Aug 2026 10:46:38 +0800
Subject: [PATCH 2/3] feat: redesign landing page

---
 packages/oxc/src/app/pages/index.vue | 144 ++++++++++++---------------
 1 file changed, 66 insertions(+), 78 deletions(-)

diff --git a/packages/oxc/src/app/pages/index.vue b/packages/oxc/src/app/pages/index.vue
index 3d2420965..ab26f31f8 100644
--- a/packages/oxc/src/app/pages/index.vue
+++ b/packages/oxc/src/app/pages/index.vue
@@ -2,8 +2,6 @@
 import BannerOxcDevTools from '@vitejs/devtools-ui/components/Banner/BannerOxcDevTools.vue'
 import { DEVTOOLS_TERMINALS_DOCK_ID } from '@vitejs/devtools-kit/constants'
 import DisplayBadge from '@vitejs/devtools-ui/components/Display/DisplayBadge.vue'
-import DisplayFileIcon from '@vitejs/devtools-ui/components/Display/DisplayFileIcon.vue'
-import DisplayNumberBadge from '@vitejs/devtools-ui/components/Display/DisplayNumberBadge.vue'
 import { useAsyncState } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { createOverview } from '../utils/overview'
@@ -19,11 +17,6 @@ const {
   execute: refreshOverview,
 } = useAsyncState(() => rpc.value.call('devtools-oxc:overview'), createOverview())
 
-const { state: configFiles, execute: refreshConfigFiles } = useAsyncState(
-  () => rpc.value.call('devtools-oxc:get-config-files'),
-  [],
-)
-
 const isMigrating = ref(false)
 const migrationError = ref<string>()
 const migrationSessionId = ref<string>()
@@ -46,7 +39,7 @@ async function runOxlintSetup(
     const { sessionId } = await rpc.value.call(action)
     migrationSessionId.value = sessionId
     await rpc.value.call('devtools-oxc:wait-for-setup')
-    await Promise.all([refreshOverview(), refreshConfigFiles()])
+    await refreshOverview()
   } catch (error) {
     migrationError.value = error instanceof Error ? error.message : String(error)
   } finally {
@@ -64,6 +57,7 @@ async function viewMigrationInTerminal() {
 
 interface ToolView {
   title: string
+  description: string
   icon: string
   to: string
 }
@@ -73,14 +67,34 @@ const tools = computed(() => {
   const oxlintViews: ToolView[] = [
     ...(oxlint.installed
       ? [
-          { title: 'Lint Inspector', icon: 'i-ph-magnifying-glass-duotone', to: '/oxlint/lint' },
-          { title: 'Config Inspector', icon: 'i-ph-gear-duotone', to: '/oxlint/config' },
+          {
+            title: 'Lint Inspector',
+            description: 'View diagnostics and rules',
+            icon: 'i-ph-magnifying-glass-duotone',
+            to: '/oxlint/lint',
+          },
+          {
+            title: 'Config Inspector',
+            description: 'Inspect configuration files',
+            icon: 'i-ph-gear-duotone',
+            to: '/oxlint/config',
+          },
         ]
       : []),
-    { title: 'Documents', icon: 'i-ph-book-open-duotone', to: '/oxlint/documents' },
+    {
+      title: 'Documents',
+      description: 'Guides and references',
+      icon: 'i-ph-book-open-duotone',
+      to: '/oxlint/documents',
+    },
   ]
   const oxfmtViews: ToolView[] = [
-    { title: 'Documents', icon: 'i-ph-book-open-duotone', to: '/oxfmt/documents' },
+    {
+      title: 'Documents',
+      description: 'Guides and references',
+      icon: 'i-ph-book-open-duotone',
+      to: '/oxfmt/documents',
+    },
   ]
 
   return [
@@ -88,14 +102,12 @@ const tools = computed(() => {
       id: 'oxlint',
       name: 'Oxlint',
       info: oxlint,
-      configs: configFiles.value.filter(file => file.tool === 'oxlint'),
       views: oxlintViews,
     },
     {
       id: 'oxfmt',
       name: 'Oxfmt',
       info: overview.value.oxfmt,
-      configs: configFiles.value.filter(file => file.tool === 'oxfmt'),
       views: oxfmtViews,
     },
   ]
@@ -133,36 +145,23 @@ const tools = computed(() => {
       <div
         v-for="tool in tools"
         :key="tool.id"
-        class="border border-base rounded p-4 flex-1 min-w-120 min-h-56"
+        class="border border-base rounded-lg p-4 flex-1 min-w-120"
       >
-        <div class="flex flex-col gap-4 h-full justify-between">
-          <div class="flex items-end justify-between gap-2">
-            <div class="text-2xl font-semibold">{{ tool.name }}</div>
-            <DisplayBadge
-              v-if="!tool.info.installed"
-              text="Not installed"
-              :color="false"
-              class="badge-color-gray"
-            />
-          </div>
-
-          <div
-            v-if="tool.info.installed"
-            class="grid grid-cols-[max-content_160px_2fr] gap-2 items-center"
-          >
-            <div class="i-ph-tag-duotone op-fade" />
-            <span class="op-fade">Version</span>
-            <div class="flex items-center gap-2 w-full">
+        <div class="flex flex-col gap-6 h-full">
+          <div class="flex items-start justify-between gap-4">
+            <div>
+              <div class="text-2xl font-semibold">{{ tool.name }}</div>
               <a
                 v-if="tool.info.installed"
                 :href="tool.info.npmxLink"
                 target="_blank"
-                class="hover:color-active font-mono"
+                class="block mt-1 hover:color-active op-fade text-sm font-mono"
               >
                 v{{ tool.info.version }}
               </a>
+            </div>
+            <template v-if="tool.info.installed">
               <a
-                v-if="tool.info.installed"
                 :href="
                   tool.info.latest ? undefined : `https://npmx.dev/package/${tool.id}/v/latest`
                 "
@@ -175,77 +174,66 @@ const tools = computed(() => {
                   :class="tool.info.latest ? 'badge-color-green' : 'badge-color-amber'"
                 />
               </a>
-            </div>
-
-            <div class="i-ph-files-duotone op-fade" />
-            <span class="op-fade">Configs</span>
-            <VDropdown v-if="tool.configs.length" placement="bottom-start" :triggers="['hover']">
-              <DisplayNumberBadge
-                :number="tool.configs.length"
-                class="py1 rounded-full font-mono inline-block text-sm cursor-pointer hover:color-active"
-              />
-
-              <template #popper>
-                <div class="p3 min-w-60 flex flex-col gap-2 font-mono text-sm">
-                  <div
-                    v-for="config in tool.configs"
-                    :key="`${config.tool}:${config.path}`"
-                    class="flex items-center gap-2"
-                  >
-                    <DisplayFileIcon class="flex-none" :filename="config.path" />
-                    <span>{{ config.path }}</span>
-                  </div>
-                </div>
-              </template>
-            </VDropdown>
-            <span v-else class="op-fade text-sm">Not found</span>
+            </template>
+            <DisplayBadge v-else text="Not installed" :color="false" class="badge-color-gray" />
           </div>
 
-          <div class="flex gap-2">
+          <div class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-2">
             <button
               v-if="tool.id === 'oxlint' && overview.needsOxlintMigration"
               type="button"
-              class="btn-action flex flex-col flex-1 min-w-max p4 !px4 whitespace-nowrap"
+              class="rounded-lg px-3 py-3 flex items-start gap-3 hover:bg-active transition-colors disabled:pointer-events-none disabled:op30!"
               :disabled="isMigrating"
               @click="migrateOxlint"
             >
-              <div class="i-simple-icons:eslint text-2xl" />
-              {{ isMigrating ? 'Migrating…' : 'Migrate from ESLint' }}
+              <div class="i-simple-icons:eslint text-2xl mt-0.5" />
+              <div class="text-left">
+                <div class="font-medium">
+                  {{ isMigrating ? 'Migrating…' : 'Migrate from ESLint' }}
+                </div>
+                <div class="text-xs op-fade mt-0.5">Migrate from ESLint flat config</div>
+              </div>
             </button>
             <button
               v-if="tool.id === 'oxlint' && !tool.info.installed && !overview.needsOxlintMigration"
               type="button"
-              class="btn-action flex flex-col flex-1 min-w-40 p4 !px4 whitespace-nowrap"
+              class="rounded-lg px-3 py-3 flex items-start gap-3 hover:bg-active transition-colors disabled:pointer-events-none disabled:op30!"
               :disabled="isMigrating"
               @click="installOxlint"
             >
-              <div class="i-ph-rocket-launch-duotone text-2xl" />
-              {{ isMigrating ? 'Installing…' : 'Install Oxlint' }}
+              <div class="i-ph-rocket-launch-duotone text-2xl mt-0.5" />
+              <div class="text-left">
+                <div class="font-medium">{{ isMigrating ? 'Installing…' : 'Install Oxlint' }}</div>
+                <div class="text-xs op-fade mt-0.5">Install & set up Oxlint</div>
+              </div>
             </button>
             <NuxtLink
               v-for="view in tool.views"
               :key="view.title"
               :to="view.to"
-              class="btn-action flex flex-col flex-1 min-w-max p4 !px4 whitespace-nowrap"
+              class="rounded-lg px-3 py-3 flex items-start gap-3 hover:bg-active transition-colors"
             >
-              <div :class="[view.icon, 'text-2xl']" />
-              {{ view.title }}
+              <div :class="[view.icon, 'text-2xl mt-0.5']" />
+              <div class="text-left">
+                <div class="font-medium">{{ view.title }}</div>
+                <div class="text-xs op-fade mt-0.5">{{ view.description }}</div>
+              </div>
             </NuxtLink>
           </div>
-          <button
-            v-if="tool.id === 'oxlint' && isMigrating && migrationSessionId"
-            type="button"
-            class="btn-action flex items-center gap-2 self-start px3 py2 text-sm"
-            @click="viewMigrationInTerminal"
-          >
-            <div class="i-ph-terminal-window-duotone" />
-            View in terminals
-          </button>
           <p v-if="tool.id === 'oxlint' && migrationError" class="text-sm text-red">
             {{ migrationError }}
           </p>
         </div>
       </div>
     </div>
+    <button
+      v-if="isMigrating && migrationSessionId"
+      type="button"
+      class="btn-action flex items-center gap-2 px3 py2 text-sm"
+      @click="viewMigrationInTerminal"
+    >
+      <div class="i-ph-terminal-window-duotone" />
+      View in terminals
+    </button>
   </div>
 </template>

From d380058ce37daf68adb40b03efd8e64f52bbb18e Mon Sep 17 00:00:00 2001
From: yuyinws <lyc657508366@gmail.com>
Date: Tue, 4 Aug 2026 10:52:14 +0800
Subject: [PATCH 3/3] refactor(oxc): rename oxlint setup RPC

---
 .../src/node/__tests__/oxlint-migrate.test.ts    |  2 +-
 packages/oxc/src/node/rpc/functions/overview.ts  |  2 +-
 .../{oxlint-migrate.ts => oxlint-setup.ts}       | 16 ++++++++--------
 packages/oxc/src/node/rpc/index.ts               |  2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)
 rename packages/oxc/src/node/rpc/functions/{oxlint-migrate.ts => oxlint-setup.ts} (100%)

diff --git a/packages/oxc/src/node/__tests__/oxlint-migrate.test.ts b/packages/oxc/src/node/__tests__/oxlint-migrate.test.ts
index ed251a1e2..a4a93ef39 100644
--- a/packages/oxc/src/node/__tests__/oxlint-migrate.test.ts
+++ b/packages/oxc/src/node/__tests__/oxlint-migrate.test.ts
@@ -2,7 +2,7 @@ import { mkdtemp, rm, writeFile } from 'node:fs/promises'
 import { tmpdir } from 'node:os'
 import { join } from 'node:path'
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { needsOxlintMigration, oxlintInstall, oxlintMigrate } from '../rpc/functions/oxlint-migrate'
+import { needsOxlintMigration, oxlintInstall, oxlintMigrate } from '../rpc/functions/oxlint-setup'
 
 const fixtures: string[] = []
 
diff --git a/packages/oxc/src/node/rpc/functions/overview.ts b/packages/oxc/src/node/rpc/functions/overview.ts
index 117ec95da..2ace387f6 100644
--- a/packages/oxc/src/node/rpc/functions/overview.ts
+++ b/packages/oxc/src/node/rpc/functions/overview.ts
@@ -1,7 +1,7 @@
 import { defineOxcRpc } from '../_define'
 import { x } from 'tinyexec'
 import { getVitePlusVersions, isVitePlusInstalled } from '../../utils/vite-plus'
-import { needsOxlintMigration } from './oxlint-migrate'
+import { needsOxlintMigration } from './oxlint-setup'
 
 type Package = {
   installed: boolean
diff --git a/packages/oxc/src/node/rpc/functions/oxlint-migrate.ts b/packages/oxc/src/node/rpc/functions/oxlint-setup.ts
similarity index 100%
rename from packages/oxc/src/node/rpc/functions/oxlint-migrate.ts
rename to packages/oxc/src/node/rpc/functions/oxlint-setup.ts
index b21b31359..9071722a0 100644
--- a/packages/oxc/src/node/rpc/functions/oxlint-migrate.ts
+++ b/packages/oxc/src/node/rpc/functions/oxlint-setup.ts
@@ -25,14 +25,6 @@ export function needsOxlintMigration(root: string): boolean {
   )
 }
 
-export const oxlintMigrate = defineOxcRpc({
-  name: 'devtools-oxc:migrate-eslint',
-  type: 'action',
-  setup: context => ({
-    handler: () => startMigration(context as ContextWithTerminals),
-  }),
-})
-
 async function startMigration(context: ContextWithTerminals): Promise<{ sessionId?: string }> {
   const root = context.cwd
   if (!needsOxlintMigration(root))
@@ -122,6 +114,14 @@ async function waitForSetup(): Promise<void> {
   }
 }
 
+export const oxlintMigrate = defineOxcRpc({
+  name: 'devtools-oxc:migrate-eslint',
+  type: 'action',
+  setup: context => ({
+    handler: () => startMigration(context as ContextWithTerminals),
+  }),
+})
+
 export const oxlintInstall = defineOxcRpc({
   name: 'devtools-oxc:install-oxlint',
   type: 'action',
diff --git a/packages/oxc/src/node/rpc/index.ts b/packages/oxc/src/node/rpc/index.ts
index 2c77bcdbd..67b87b131 100644
--- a/packages/oxc/src/node/rpc/index.ts
+++ b/packages/oxc/src/node/rpc/index.ts
@@ -9,7 +9,7 @@ import { oxlintGetConfigFile } from './functions/oxlint-get-config-file'
 import { oxfmtGetConfigFile } from './functions/oxfmt-get-config-file'
 import { openInEditor } from './functions/open-in-editor'
 import { getConfigFiles } from './functions/get-config-files'
-import { oxlintInstall, oxlintMigrate, oxlintWaitForSetup } from './functions/oxlint-migrate'
+import { oxlintInstall, oxlintMigrate, oxlintWaitForSetup } from './functions/oxlint-setup'
 
 export const rpcFunctions = [
   oxlintRun,