diff --git a/packages/client/app/home/home.vue b/packages/client/app/home/home.vue
index 9cc762c..18eecb7 100644
--- a/packages/client/app/home/home.vue
+++ b/packages/client/app/home/home.vue
@@ -1,11 +1,7 @@
 <template>
   <k-layout :main="`darker page-home${socket ? '' : ' loading'}`">
     <el-scrollbar v-if="socket">
-      <k-slot name="home">
-        <k-slot-item :order="1000">
-          <welcome></welcome>
-        </k-slot-item>
-      </k-slot>
+      <k-slot name="home"></k-slot>
     </el-scrollbar>
     <div v-else>
       <k-card class="connect">正在连接到 Cordis 服务器……</k-card>
@@ -16,7 +12,6 @@
 <script lang="ts" setup>
 
 import { socket } from '@cordisjs/client'
-import Welcome from './welcome.vue'
 
 </script>
 
@@ -30,10 +25,6 @@ import Welcome from './welcome.vue'
     justify-content: center;
   }
 
-  .k-card.welcome {
-    margin: var(--card-margin);
-  }
-
   .k-card.connect {
     width: 400px;
     max-width: 400px;
diff --git a/packages/client/app/home/welcome.en-US.yml b/packages/client/app/home/welcome.en-US.yml
deleted file mode 100644
index 794b1e7..0000000
--- a/packages/client/app/home/welcome.en-US.yml
+++ /dev/null
@@ -1,9 +0,0 @@
-title: Welcome to Koishi！
-description: Your chatbot is ready to go. 点击下面的任一选项，开启你的 Koishi 之旅吧。
-action:
-  docs:
-    title: Documentation
-    description: The official documentation contains everything you want to know.
-  forum:
-    title: Forum
-    description: If you run into problems, you can always ask for help on the forum.
diff --git a/packages/client/app/home/welcome.vue b/packages/client/app/home/welcome.vue
deleted file mode 100644
index 2c6ce64..0000000
--- a/packages/client/app/home/welcome.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-  <div class="k-card welcome">
-    <h1>{{ t('title') }}</h1>
-    <p>{{ t('description') }}</p>
-    <div class="choices">
-      <k-slot name="welcome-choice">
-        <k-slot-item :order="1000">
-          <a class="choice" href="https://koishi.chat" rel="noopener noreferer" target="_blank">
-            <h2>{{ t('action.docs.title') }}</h2>
-            <p>{{ t('action.docs.description') }}</p>
-          </a>
-        </k-slot-item>
-        <k-slot-item :order="500">
-          <a class="choice" href="https://k.ilharp.cc" rel="noopener noreferer" target="_blank">
-            <h2>{{ t('action.forum.title') }}</h2>
-            <p>{{ t('action.forum.description') }}</p>
-          </a>
-        </k-slot-item>
-      </k-slot>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-
-import { useI18n } from 'vue-i18n'
-import zhCN from './welcome.zh-CN.yml'
-import enUS from './welcome.en-US.yml'
-
-const { t, setLocaleMessage } = useI18n({
-  messages: {
-    'zh-CN': zhCN,
-    'en-US': enUS,
-  },
-})
-
-if (import.meta.hot) {
-  import.meta.hot.accept('./welcome.zh-CN.yml', (module) => {
-    setLocaleMessage('zh-CN', module.default)
-  })
-  import.meta.hot.accept('./welcome.en-US.yml', (module) => {
-    setLocaleMessage('en-US', module.default)
-  })
-}
-
-</script>
-
-<style lang="scss">
-
-.page-home .welcome {
-  --welcome-title: 2.5rem;
-  --welcome-padding: 3rem 3rem;
-  --welcome-choice-padding: 0.5rem 1.5rem;
-  --welcome-gap: 2rem;
-
-  padding: var(--welcome-padding);
-
-  h1 {
-    font-size: var(--welcome-title);
-    margin-top: 0;
-  }
-
-  h1 + p {
-    margin: var(--welcome-gap) 0;
-  }
-
-  .choices {
-    display: flex;
-    flex-flow: row wrap;
-    gap: var(--welcome-gap);
-  }
-
-  .choice {
-    flex: 1 0 auto;
-    display: inline-block;
-    width: 280px;
-    box-sizing: border-box;
-    padding: var(--welcome-choice-padding);
-    border: 1px solid var(--k-color-divider);
-    border-radius: 6px;
-    cursor: pointer;
-    transition: var(--color-transition);
-
-    &:hover {
-      background-color: var(--k-side-color);
-    }
-
-    h2 {
-      font-size: 1.25rem;
-      margin-top: 1rem;
-    }
-
-    p {
-      font-size: 0.9375rem;
-    }
-  }
-
-  @media screen and (max-width: 768px) {
-    --welcome-title: 2rem;
-    --welcome-padding: 1.5rem 1.5rem;
-    --welcome-gap: 1.5rem;
-    --welcome-choice-padding: 0.5rem 1.5rem;
-  }
-}
-
-</style>
diff --git a/packages/client/app/home/welcome.zh-CN.yml b/packages/client/app/home/welcome.zh-CN.yml
deleted file mode 100644
index c81d347..0000000
--- a/packages/client/app/home/welcome.zh-CN.yml
+++ /dev/null
@@ -1,9 +0,0 @@
-title: 欢迎使用 Koishi！
-description: 你的机器人已经准备就绪。点击下面的任一选项，开启你的 Koishi 之旅吧。
-action:
-  docs:
-    title: 阅读文档
-    description: 开始阅读官方文档。官方文档里包含了你想要了解的全部内容。
-  forum:
-    title: 前往论坛
-    description: 前往论坛与其他用户交流。如果你遇到了问题，可以在这里寻求帮助。
diff --git a/packages/client/scripts/client.ts b/packages/client/scripts/client.ts
index 1a052af..f7dd2be 100644
--- a/packages/client/scripts/client.ts
+++ b/packages/client/scripts/client.ts
@@ -1,6 +1,7 @@
 import { RollupOutput } from 'rollup'
-import { appendFile, copyFile } from 'fs/promises'
-import { resolve } from 'path'
+import { appendFile, copyFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
 import * as vite from 'vite'
 import unocss from 'unocss/vite'
 import mini from 'unocss/preset-mini'
@@ -8,12 +9,12 @@ import vue from '@vitejs/plugin-vue'
 import yaml from '@maikolib/vite-plugin-yaml'
 
 function findModulePath(id: string) {
-  const path = require.resolve(id).replace(/\\/g, '/')
+  const path = fileURLToPath(import.meta.resolve(id)).replace(/\\/g, '/')
   const keyword = `/node_modules/${id}/`
   return path.slice(0, path.indexOf(keyword)) + keyword.slice(0, -1)
 }
 
-const cwd = resolve(__dirname, '../../..')
+const cwd = resolve(fileURLToPath(import.meta.url), '../../../..')
 const dist = cwd + '/plugins/webui/dist'
 
 export async function build(root: string, config: vite.UserConfig = {}, isClient = false) {
diff --git a/plugins/insight/package.json b/plugins/insight/package.json
index 6c7b296..204e089 100644
--- a/plugins/insight/package.json
+++ b/plugins/insight/package.json
@@ -2,16 +2,8 @@
   "name": "@cordisjs/plugin-insight",
   "description": "Show plugin dependency graph for Cordis",
   "version": "3.5.1",
-  "main": "lib/index.cjs",
-  "types": "lib/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./lib/index.mjs",
-      "require": "./lib/index.cjs",
-      "types": "./lib/index.d.ts"
-    },
-    "./package.json": "./package.json"
-  },
+  "type": "module",
+  "main": "lib/index.js",
   "files": [
     "lib",
     "dist",
@@ -52,7 +44,7 @@
   },
   "peerDependencies": {
     "@cordisjs/plugin-webui": "^0.28.3",
-    "cordis": "^4.17.4"
+    "cordis": "^3.14.0"
   },
   "devDependencies": {
     "@cordisjs/client": "^0.28.3",
@@ -60,6 +52,6 @@
     "d3-force": "^3.0.0"
   },
   "dependencies": {
-    "@cordisjs/webui": "^0.28.3"
+    "cosmokit": "^1.6.2"
   }
 }
diff --git a/plugins/insight/src/index.ts b/plugins/insight/src/index.ts
index 2e99213..95c6478 100644
--- a/plugins/insight/src/index.ts
+++ b/plugins/insight/src/index.ts
@@ -1,10 +1,11 @@
-import { camelize, capitalize, Context, EffectScope, ForkScope, Plugin, Schema, ScopeStatus } from 'koishi'
-import { DataService } from '@cordisjs/webui'
-import { resolve } from 'path'
+import { Context, EffectScope, ForkScope, Plugin, Schema, ScopeStatus } from 'cordis'
+import { camelize, capitalize } from 'cosmokit'
+import { DataService } from '@cordisjs/plugin-webui'
 import {} from '@cordisjs/loader'
+import assert from 'node:assert'
 
-declare module '@cordisjs/webui' {
-  namespace Console {
+declare module '@cordisjs/plugin-webui' {
+  namespace WebUI {
     interface Services {
       insight: Insight
     }
@@ -16,17 +17,17 @@ function format(name: string) {
 }
 
 function getName(plugin: Plugin) {
-  if (!plugin) return 'App'
+  if (!plugin) return 'Root'
   if (!plugin.name || plugin.name === 'apply') return 'Anonymous'
   return format(plugin.name)
 }
 
 function getSourceId(child: ForkScope) {
-  const { state } = child.parent
-  if (state.runtime.isForkable) {
-    return state.uid
+  const { scope } = child.parent
+  if (scope.runtime.isForkable) {
+    return scope.uid
   } else {
-    return state.runtime.uid
+    return scope.runtime.uid
   }
 }
 
@@ -34,15 +35,12 @@ class Insight extends DataService<Insight.Payload> {
   constructor(ctx: Context) {
     super(ctx, 'insight')
 
-    ctx.console.addEntry(process.env.KOISHI_BASE ? [
-      process.env.KOISHI_BASE + '/dist/index.js',
-      process.env.KOISHI_BASE + '/dist/style.css',
-    ] : process.env.KOISHI_ENV === 'browser' ? [
-      // @ts-ignore
-      import.meta.url.replace(/\/src\/[^/]+$/, '/client/index.ts'),
-    ] : {
-      dev: resolve(__dirname, '../client/index.ts'),
-      prod: resolve(__dirname, '../dist'),
+    ctx.webui.addEntry({
+      dev: import.meta.resolve('../client/index.ts'),
+      prod: [
+        import.meta.resolve('../dist/index.js'),
+        import.meta.resolve('../dist/style.css'),
+      ],
     })
 
     const update = ctx.debounce(() => this.refresh(), 0)
@@ -69,9 +67,9 @@ class Insight extends DataService<Insight.Payload> {
 
     for (const runtime of this.ctx.registry.values()) {
       // Suppose we have the following types of nodes:
-      // - A, B: parent plugin states
-      // - X, Y: target fork states
-      // - M:    target main state
+      // - A, B: parent plugin scopes
+      // - X, Y: target fork scopes
+      // - M:    target main scope
       // - S:    service dependencies
 
       // We can divide plugins into three categories:
@@ -82,40 +80,43 @@ class Insight extends DataService<Insight.Payload> {
       // 3. non-reusable plugins
       //    will be displayed as A -> M -> S, B -> M -> S
 
-      function isActive(state: EffectScope) {
+      function isActive(scope: EffectScope) {
         // exclude plugins that don't work due to missing dependencies
-        // return runtime.using.every(name => state.ctx[name])
+        // return runtime.using.every(name => scope.ctx[name])
         return true
       }
 
       const name = getName(runtime.plugin)
 
-      function addNode(state: EffectScope) {
-        const { uid, key, disposables, status } = state
+      function addNode(scope: EffectScope) {
+        const { uid, entry, disposables, status, runtime } = scope
+        assert(uid !== null)
         const weight = disposables.length
-        const isGroup = name === 'Group'
+        const isGroup = !!runtime.plugin?.[Symbol.for('cordis.group')]
         const isRoot = uid === 0
-        const node = { uid, name, weight, status, isGroup, isRoot, services: services[uid] }
-        if (key) node.name += ` [${key}]`
+        const node = { uid, name, weight, status, isGroup, isRoot, services: services[uid!] }
+        if (entry) node.name += ` [${entry.options.id}]`
         nodes.push(node)
       }
 
-      function addEdge(type: 'dashed' | 'solid', source: number, target: number) {
+      function addEdge(type: 'dashed' | 'solid', source: number | null, target: number | null) {
+        assert(source !== null)
+        assert(target !== null)
         edges.push({ type, source, target })
       }
 
-      const addDeps = (state: EffectScope) => {
+      const addDeps = (scope: EffectScope) => {
         for (const name of runtime.using) {
           const instance = this.ctx.get(name)
           if (!(instance instanceof Object)) continue
           const ctx: Context = Reflect.getOwnPropertyDescriptor(instance, Context.current)?.value
-          const uid = ctx?.state.uid
+          const uid = ctx?.scope.uid
           if (!uid) continue
-          addEdge('dashed', uid, state.uid)
+          addEdge('dashed', uid, scope.uid)
         }
       }
 
-      const isReusable = runtime.plugin?.['reusable']
+      const isReusable = runtime.plugin?.reusable
       if (!isReusable) {
         if (!isActive(runtime)) continue
         addNode(runtime)
diff --git a/plugins/webui/package.json b/plugins/webui/package.json
index 931ae0f..8eb667b 100644
--- a/plugins/webui/package.json
+++ b/plugins/webui/package.json
@@ -2,16 +2,16 @@
   "name": "@cordisjs/plugin-webui",
   "description": "Web User Interface for Koishi",
   "version": "0.28.3",
-  "main": "lib/node/index.js",
-  "types": "lib/index.d.ts",
+  "type": "module",
   "exports": {
     ".": {
-      "node": {
-        "require": "./lib/node/index.js",
-        "import": "./lib/node/index.mjs"
-      },
-      "browser": "./lib/browser/index.mjs",
-      "types": "./lib/index.d.ts"
+      "types": "./lib/index.d.ts",
+      "browser": "./lib/browser.js",
+      "default": "./lib/index.js"
+    },
+    "./shared": {
+      "types": "./lib/shared/index.d.ts",
+      "default": "./lib/shared/index.js"
     },
     "./src/*": "./src/*",
     "./package.json": "./package.json"
@@ -53,7 +53,7 @@
   },
   "peerDependencies": {
     "@cordisjs/client": "^0.28.3",
-    "cordis": "^3.13.6"
+    "cordis": "^3.14.0"
   },
   "peerDependenciesMeta": {
     "@cordisjs/client": {
@@ -62,8 +62,8 @@
   },
   "devDependencies": {
     "@cordisjs/client": "^0.28.3",
-    "@cordisjs/loader": "^0.8.6",
-    "@cordisjs/server": "^0.1.8",
+    "@cordisjs/loader": "^0.9.0",
+    "@cordisjs/plugin-server": "^0.2.1",
     "@maikolib/vite-plugin-yaml": "^1.0.1",
     "@types/uuid": "^8.3.4",
     "@vitejs/plugin-vue": "^4.6.2",
@@ -71,7 +71,6 @@
     "vite": "^4.5.3"
   },
   "dependencies": {
-    "@cordisjs/webui": "^0.28.3",
     "cosmokit": "^1.6.2",
     "open": "^8.4.2",
     "uuid": "^8.3.2",
diff --git a/plugins/webui/src/index.ts b/plugins/webui/src/index.ts
index d69f141..af6d39a 100644
--- a/plugins/webui/src/index.ts
+++ b/plugins/webui/src/index.ts
@@ -6,8 +6,7 @@ import { FileSystemServeOptions, ViteDevServer } from 'vite'
 import { extname, resolve } from 'node:path'
 import { createReadStream, existsSync, Stats } from 'node:fs'
 import { readFile, stat } from 'node:fs/promises'
-import { createRequire } from 'node:module'
-import { fileURLToPath, pathToFileURL } from 'node:url'
+import { fileURLToPath } from 'node:url'
 import open from 'open'
 
 declare module 'cordis' {
@@ -63,11 +62,9 @@ class NodeConsole extends WebUI<NodeConsole.Config> {
       loader.envData.clientCount = this.layer.clients.size
     })
 
-    const base = import.meta.url || pathToFileURL(__filename).href
-    const require = createRequire(base)
-    this.root = config.devMode
-      ? resolve(require.resolve('@cordisjs/client/package.json'), '../app')
-      : fileURLToPath(new URL('../../dist', base))
+    this.root = fileURLToPath(config.devMode
+      ? new URL('./app', import.meta.resolve('@cordisjs/client/package.json'))
+      : new URL('../dist', import.meta.url))
   }
 
   createGlobal() {
@@ -103,15 +100,13 @@ class NodeConsole extends WebUI<NodeConsole.Config> {
   }
 
   resolveEntry(files: Entry.Files, key: string) {
-    const filenames: string[] = []
-    for (const url of makeArray(this.getFiles(files))) {
+    return makeArray(this.getFiles(files)).map((url, index) => {
       if (this.config.devMode) {
-        filenames.push('/vite/@fs/' + fileURLToPath(url))
+        return `/vite/@fs/${fileURLToPath(url)}`
       } else {
-        filenames.push(url)
+        return `${this.config.uiPath}/@vendor/${key}/${index}${extname(url)}`
       }
-    }
-    return filenames
+    })
   }
 
   private serveAssets() {
@@ -132,22 +127,22 @@ class NodeConsole extends WebUI<NodeConsole.Config> {
         return ctx.body = createReadStream(filename)
       }
 
-      if (name.startsWith('@plugin-')) {
-        const [key] = name.slice(8).split('/', 1)
-        if (this.entries[key]) {
-          const files = makeArray(this.getFiles(this.entries[key].files))
-          const filename = files[0] + name.slice(8 + key.length)
-          ctx.type = extname(filename)
-          if (this.config.devMode || ctx.type !== 'application/javascript') {
-            return sendFile(filename)
-          }
-
-          // we only transform js imports in production mode
-          const source = await readFile(filename, 'utf8')
-          return ctx.body = await this.transformImport(source)
-        } else {
-          return ctx.status = 404
+      if (name.startsWith('@vendor/')) {
+        const [key, value] = name.slice(8).split('/')
+        if (!this.entries[key]) return ctx.status = 404
+        const files = makeArray(this.getFiles(this.entries[key].files))
+        const type = extname(value)
+        const index = value.slice(0, -type.length)
+        if (!files[index]) return ctx.status = 404
+        const filename = fileURLToPath(files[index])
+        ctx.type = type
+        if (this.config.devMode || ctx.type !== 'application/javascript') {
+          return sendFile(filename)
         }
+
+        // we only transform js imports in production mode
+        const source = await readFile(filename, 'utf8')
+        return ctx.body = await this.transformImport(source)
       }
 
       const filename = resolve(this.root, name)
@@ -169,10 +164,10 @@ class NodeConsole extends WebUI<NodeConsole.Config> {
     while ((cap = /((?:^|;)import\b[^'"]+\bfrom\s*)(['"])([^'"]+)\2;/m.exec(source))) {
       const [stmt, left, quote, path] = cap
       output += source.slice(0, cap.index) + left + quote + ({
-        'vue': '../vue.js',
-        'vue-router': '../vue-router.js',
-        '@vueuse/core': '../vueuse.js',
-        '@cordisjs/client': '../client.js',
+        'vue': this.config.uiPath + '/vue.js',
+        'vue-router': this.config.uiPath + '/vue-router.js',
+        '@vueuse/core': this.config.uiPath + '/vueuse.js',
+        '@cordisjs/client': this.config.uiPath + '/client.js',
       }[path] ?? path) + quote + ';'
       source = source.slice(cap.index + stmt.length)
     }