diff --git a/build/dtsc.ts b/build/dtsc.ts
index fdc0adc784..716be51c1d 100644
--- a/build/dtsc.ts
+++ b/build/dtsc.ts
@@ -34,7 +34,7 @@ async function bundle(path: string) {
   const importMap: Record<string, Record<string, string>> = {}
   const namespaceMap: Record<string, string> = {}
 
-  let prolog = '', cap: RegExpExecArray
+  let prolog = '', epilog = '', cap: RegExpExecArray
   let content = await fs.readFile(entry, 'utf8')
   content = content.split(EOL).filter((line) => {
     if (cap = /^ {4}import \* as (.+) from ["'](.+)["'];$/.exec(line)) {
@@ -59,6 +59,8 @@ async function bundle(path: string) {
       }
     } else if (line.startsWith('///')) {
       prolog += line + EOL
+    } else if (line.startsWith('    export default ')) {
+      epilog = line.trimStart() + EOL
     } else {
       return true
     }
@@ -85,8 +87,9 @@ async function bundle(path: string) {
       if (identifier) return `declare namespace ${identifier} {`
       return ''
     })
+    .replace(/^( {4})((module|class|namespace) .+ \{)$/gm, (_, $1, $2) => `${$1}declare ${$2}`)
     .replace(/\r?\n}/g, '')
-    .replace(/^ {4}/gm, ''))
+    .replace(/^ {4}/gm, '') + epilog)
 }
 
 async function bundleAll(names: readonly string[]) {
@@ -95,15 +98,13 @@ async function bundleAll(names: readonly string[]) {
   }
 }
 
-const targets = ['koishi-utils', 'koishi-core']
-const databases = ['mongo', 'mysql']
+const targets = ['koishi-utils', 'koishi-core', 'plugin-mysql', 'plugin-mongo']
 const corePlugins = ['common', 'eval', 'puppeteer', 'teach']
 
 function precedence(name: string) {
   if (name.startsWith('adapter')) return 1
   if (name.startsWith('koishi')) return 5
   const plugin = name.slice(7)
-  if (databases.includes(plugin)) return 2
   if (corePlugins.includes(plugin)) return 3
   return 4
 }
diff --git a/packages/adapter-discord/package.json b/packages/adapter-discord/package.json
index 041451ad98..3289132c15 100644
--- a/packages/adapter-discord/package.json
+++ b/packages/adapter-discord/package.json
@@ -1,7 +1,7 @@
 {
   "name": "koishi-adapter-discord",
   "description": "Discord adapter for Koishi",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [
@@ -28,7 +28,7 @@
     "koishi"
   ],
   "peerDependencies": {
-    "koishi-core": "^3.2.0"
+    "koishi-core": "^3.2.1"
   },
   "devDependencies": {
     "@types/ws": "^7.4.0",
diff --git a/packages/adapter-discord/src/bot.ts b/packages/adapter-discord/src/bot.ts
index 351bf74f7b..a467f2aa29 100644
--- a/packages/adapter-discord/src/bot.ts
+++ b/packages/adapter-discord/src/bot.ts
@@ -106,7 +106,7 @@ export class DiscordBot extends Bot<'discord'> {
           })
           sentMessageId = r.id
         }
-        if (type === 'image' || type === 'video') {
+        if (type === 'image' || type === 'video' && data.url) {
           if (data.url.startsWith('http://') || data.url.startsWith('https://')) {
             const a = await axios({
               url: data.url,
diff --git a/packages/adapter-discord/src/index.ts b/packages/adapter-discord/src/index.ts
index dc4a4c56b9..106da66e85 100644
--- a/packages/adapter-discord/src/index.ts
+++ b/packages/adapter-discord/src/index.ts
@@ -2,6 +2,7 @@ import { Adapter } from 'koishi-core'
 import { AxiosRequestConfig } from 'axios'
 import { DiscordBot } from './bot'
 import WsClient from './ws'
+import { Embed } from './types'
 
 export * from './bot'
 export * as dc from './types'
@@ -15,6 +16,12 @@ declare module 'koishi-core' {
     discord?: DiscordOptions
   }
 
+  interface Session {
+    discord?: {
+      embeds: Embed[]
+    }
+  }
+
   namespace Bot {
     interface Platforms {
       discord: DiscordBot
diff --git a/packages/adapter-discord/src/utils.ts b/packages/adapter-discord/src/utils.ts
index 24a818796b..55cffadc66 100644
--- a/packages/adapter-discord/src/utils.ts
+++ b/packages/adapter-discord/src/utils.ts
@@ -28,7 +28,7 @@ export const adaptAuthor = (author: DC.Author): AuthorInfo => ({
   nickname: author.username,
 })
 
-export async function adaptMessage(bot: DiscordBot, meta: DC.DiscordMessage, session: MessageInfo = {}) {
+export async function adaptMessage(bot: DiscordBot, meta: DC.DiscordMessage, session: Partial<Session.Payload<Session.MessageAction>> = {}) {
   if (meta.author) {
     session.author = adaptAuthor(meta.author)
     session.userId = meta.author.id
@@ -90,7 +90,9 @@ export async function adaptMessage(bot: DiscordBot, meta: DC.DiscordMessage, ses
       session.content += segment('video', { url: embed.video.url, proxy_url: embed.video.proxy_url })
     }
   }
-  session.content = meta.embeds.map(v => segment('embed', { data: JSON.stringify(v) })).join('') + session.content
+  session.discord = {
+    embeds: meta.embeds
+  }
   return session
 }
 
diff --git a/packages/adapter-kaiheila/package.json b/packages/adapter-kaiheila/package.json
index 64c1ebf073..d6b09821ec 100644
--- a/packages/adapter-kaiheila/package.json
+++ b/packages/adapter-kaiheila/package.json
@@ -24,14 +24,14 @@
     "koishi"
   ],
   "peerDependencies": {
-    "koishi-core": "^3.2.0"
+    "koishi-core": "^3.2.1"
   },
   "devDependencies": {
     "koishi-test-utils": "^6.0.0-beta.10"
   },
   "dependencies": {
     "axios": "^0.21.1",
-    "koishi-utils": "^4.0.1",
+    "koishi-utils": "^4.0.2",
     "ws": "^7.4.4"
   }
 }
diff --git a/packages/adapter-onebot/package.json b/packages/adapter-onebot/package.json
index efdc4f39a1..45673008c9 100644
--- a/packages/adapter-onebot/package.json
+++ b/packages/adapter-onebot/package.json
@@ -27,7 +27,7 @@
     "koishi"
   ],
   "peerDependencies": {
-    "koishi-core": "^3.2.0"
+    "koishi-core": "^3.2.1"
   },
   "devDependencies": {
     "@types/ws": "^7.4.0",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
-    "koishi-utils": "^4.0.1",
+    "koishi-utils": "^4.0.2",
     "ws": "^7.4.4"
   }
 }
diff --git a/packages/adapter-telegram/package.json b/packages/adapter-telegram/package.json
index 24c611d3df..656f644c40 100644
--- a/packages/adapter-telegram/package.json
+++ b/packages/adapter-telegram/package.json
@@ -28,7 +28,7 @@
     "koishi"
   ],
   "peerDependencies": {
-    "koishi-core": "^3.2.0"
+    "koishi-core": "^3.2.1"
   },
   "devDependencies": {
     "koishi-test-utils": "^6.0.0-beta.10"
@@ -36,6 +36,6 @@
   "dependencies": {
     "axios": "^0.21.1",
     "form-data": "^4.0.0",
-    "koishi-utils": "^4.0.1"
+    "koishi-utils": "^4.0.2"
   }
 }
diff --git a/packages/adapter-tomon/package.json b/packages/adapter-tomon/package.json
index c68d964861..cadb9ccd5f 100644
--- a/packages/adapter-tomon/package.json
+++ b/packages/adapter-tomon/package.json
@@ -24,7 +24,7 @@
     "koishi"
   ],
   "peerDependencies": {
-    "koishi-core": "^3.2.0"
+    "koishi-core": "^3.2.1"
   },
   "devDependencies": {
     "@types/pako": "^1.0.1",
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
-    "koishi-utils": "^4.0.1",
+    "koishi-utils": "^4.0.2",
     "pako": "^2.0.3",
     "ws": "^7.4.4"
   }
diff --git a/packages/koishi-core/package.json b/packages/koishi-core/package.json
index a3400598f0..0a1a8aa6b4 100644
--- a/packages/koishi-core/package.json
+++ b/packages/koishi-core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "koishi-core",
   "description": "Core features for Koishi",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "engines": {
@@ -42,7 +42,7 @@
     "fastest-levenshtein": "^1.0.12",
     "koa": "^2.13.1",
     "koa-bodyparser": "^4.3.0",
-    "koishi-utils": "^4.0.1",
+    "koishi-utils": "^4.0.2",
     "lru-cache": "^6.0.0"
   }
 }
diff --git a/packages/koishi-core/src/adapter.ts b/packages/koishi-core/src/adapter.ts
index 3f2f304d14..6bac0727ba 100644
--- a/packages/koishi-core/src/adapter.ts
+++ b/packages/koishi-core/src/adapter.ts
@@ -1,4 +1,4 @@
-import { Logger, paramCase, sleep, Time } from 'koishi-utils'
+import { Logger, paramCase, remove, sleep, Time } from 'koishi-utils'
 import { Session } from './session'
 import { App } from './app'
 import WebSocket from 'ws'
@@ -34,6 +34,7 @@ export abstract class Adapter<P extends Platform = Platform> {
     const bot = new this.Bot(this, options)
     this.bots.push(bot)
     this.app.bots.push(bot)
+    return bot
   }
 
   dispatch(session: Session) {
@@ -254,6 +255,12 @@ export class Bot<P extends Platform> {
     }
     return messageIds
   }
+
+  dispose() {
+    const bot = this as Bot.Instance<P>
+    remove(this.adapter.bots, bot)
+    remove(this.app.bots, bot)
+  }
 }
 
 export namespace Bot {
diff --git a/packages/koishi-core/src/app.ts b/packages/koishi-core/src/app.ts
index 2f65e812e0..8b1cfd7349 100644
--- a/packages/koishi-core/src/app.ts
+++ b/packages/koishi-core/src/app.ts
@@ -235,7 +235,7 @@ export class App extends Context {
     if (this.database) {
       if (session.subtype === 'group') {
         // attach group data
-        const channelFields = new Set<Channel.Field>(['flag', 'assignee', 'disable'])
+        const channelFields = new Set<Channel.Field>(['flag', 'assignee'])
         this.emit('before-attach-channel', session, channelFields)
         const channel = await session.observeChannel(channelFields)
 
@@ -346,11 +346,12 @@ export class App extends Context {
     return argv
   }
 
-  private _handleShortcut(content: string, { parsed, quote }: Session) {
+  private _handleShortcut(content: string, session: Session) {
+    const { parsed, quote } = session
     if (parsed.prefix || quote) return
     for (const shortcut of this._shortcuts) {
       const { name, fuzzy, command, greedy, prefix, options = {}, args = [] } = shortcut
-      if (prefix && !parsed.appel) continue
+      if (prefix && !parsed.appel || !command.context.match(session)) continue
       if (typeof name === 'string') {
         if (!fuzzy && content !== name || !content.startsWith(name)) continue
         const message = content.slice(name.length)
diff --git a/packages/koishi-core/src/command.ts b/packages/koishi-core/src/command.ts
index 3e93d985eb..3760ae24e9 100644
--- a/packages/koishi-core/src/command.ts
+++ b/packages/koishi-core/src/command.ts
@@ -1,4 +1,4 @@
-import { Logger, coerce, Time, template } from 'koishi-utils'
+import { Logger, coerce, Time, template, remove } from 'koishi-utils'
 import { Argv, Domain } from './parser'
 import { Context, NextFunction } from './context'
 import { User, Channel } from './database'
@@ -245,11 +245,9 @@ export class Command<U extends User.Field = never, G extends Channel.Field = nev
     }
     this.app._shortcuts = this.app._shortcuts.filter(s => s.command !== this)
     this._aliases.forEach(name => delete this.app._commandMap[name])
-    const index = this.app._commands.indexOf(this)
-    this.app._commands.splice(index, 1)
+    remove(this.app._commands, this)
     if (this.parent) {
-      const index = this.parent.children.indexOf(this)
-      this.parent.children.splice(index, 1)
+      remove(this.parent.children, this)
     }
   }
 }
@@ -260,6 +258,8 @@ export function getUsageName(command: Command) {
 
 export type ValidationField = 'authority' | 'usage' | 'timers'
 
+Command.channelFields(['disable'])
+
 Command.userFields(({ tokens, command, options = {} }, fields) => {
   if (!command) return
   const { maxUsage, minInterval, authority } = command.config
diff --git a/packages/koishi-core/src/context.ts b/packages/koishi-core/src/context.ts
index 6ff099f36b..d52f217ce7 100644
--- a/packages/koishi-core/src/context.ts
+++ b/packages/koishi-core/src/context.ts
@@ -1,4 +1,4 @@
-import { Logger, defineProperty } from 'koishi-utils'
+import { Logger, defineProperty, remove } from 'koishi-utils'
 import { Command } from './command'
 import { Session } from './session'
 import { User, Channel, Database } from './database'
@@ -139,14 +139,6 @@ export class Context {
     return this.app.registry.get(this._plugin)
   }
 
-  private removeDisposable(listener: Disposable) {
-    const index = this.state.disposables.indexOf(listener)
-    if (index >= 0) {
-      this.state.disposables.splice(index, 1)
-      return true
-    }
-  }
-
   addSideEffect(state = this.state) {
     while (state && !state.sideEffect) {
       state.sideEffect = true
@@ -208,6 +200,7 @@ export class Context {
       ...state.disposables.map(dispose => dispose()),
     ]).finally(() => {
       this.app.registry.delete(plugin)
+      remove(state.parent.children, plugin)
       const index = state.parent.children.indexOf(plugin)
       if (index >= 0) state.parent.children.splice(index, 1)
       this.emit('registry', this.app.registry)
@@ -292,7 +285,7 @@ export class Context {
       return _listener(), () => false
     } else if (name === 'before-disconnect') {
       this.state.disposables[method](_listener)
-      return () => this.removeDisposable(_listener)
+      return () => remove(this.state.disposables, _listener)
     } else if (name === 'before-connect') {
       // before-connect is side effect
       this.addSideEffect()
@@ -342,7 +335,7 @@ export class Context {
   private createTimerDispose(timer: NodeJS.Timeout) {
     const dispose = () => {
       clearTimeout(timer)
-      return this.removeDisposable(dispose)
+      return remove(this.state.disposables, dispose)
     }
     this.state.disposables.push(dispose)
     return dispose
@@ -502,8 +495,7 @@ Router.prototype.register = function (this: Router, ...args) {
   const layer = register.apply(this, args)
   const context: Context = this['_koishiContext']
   context.state.disposables.push(() => {
-    const index = this.stack.indexOf(layer)
-    if (index) this.stack.splice(index, 1)
+    remove(this.stack, layer)
   })
   return layer
 }
diff --git a/packages/koishi-core/src/session.ts b/packages/koishi-core/src/session.ts
index 7d71f37e60..48abb76696 100644
--- a/packages/koishi-core/src/session.ts
+++ b/packages/koishi-core/src/session.ts
@@ -2,7 +2,7 @@ import LruCache from 'lru-cache'
 import { distance } from 'fastest-levenshtein'
 import { User, Channel, TableType, Tables } from './database'
 import { Command } from './command'
-import { contain, observe, Logger, defineProperty, Random, template } from 'koishi-utils'
+import { contain, observe, Logger, defineProperty, Random, template, remove } from 'koishi-utils'
 import { Argv } from './parser'
 import { Middleware, NextFunction } from './context'
 import { App } from './app'
@@ -169,8 +169,7 @@ export class Session<
       const hook = () => {
         resolve()
         clearTimeout(timer)
-        const index = this._hooks.indexOf(hook)
-        if (index >= 0) this._hooks.splice(index, 1)
+        remove(this._hooks, hook)
       }
       this._hooks.push(hook)
       const timer = setTimeout(async () => {
diff --git a/packages/koishi-core/tsconfig.json b/packages/koishi-core/tsconfig.json
index e27408c68b..b7549d1c0b 100644
--- a/packages/koishi-core/tsconfig.json
+++ b/packages/koishi-core/tsconfig.json
@@ -3,7 +3,6 @@
   "compilerOptions": {
     "rootDir": "src",
     "outFile": "temp/index.d.ts",
-    "tsBuildInfoFile": "tsconfig.tsbuildinfo"
   },
   "include": [
     "src"
diff --git a/packages/koishi-test-utils/package.json b/packages/koishi-test-utils/package.json
index 4a4a35d878..3a423b9034 100644
--- a/packages/koishi-test-utils/package.json
+++ b/packages/koishi-test-utils/package.json
@@ -37,8 +37,8 @@
   "dependencies": {
     "chai": "^4.3.3",
     "chai-as-promised": "^7.1.1",
-    "koishi-core": "^3.2.0",
-    "koishi-utils": "^4.0.1"
+    "koishi-core": "^3.2.1",
+    "koishi-utils": "^4.0.2"
   },
   "devDependencies": {
     "@types/chai": "^4.2.15",
diff --git a/packages/koishi-utils/package.json b/packages/koishi-utils/package.json
index 6869cac482..78539d2ea8 100644
--- a/packages/koishi-utils/package.json
+++ b/packages/koishi-utils/package.json
@@ -1,7 +1,7 @@
 {
   "name": "koishi-utils",
   "description": "Utilities for Koishi",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [
diff --git a/packages/koishi-utils/src/set.ts b/packages/koishi-utils/src/set.ts
index bd098c4b43..697676667a 100644
--- a/packages/koishi-utils/src/set.ts
+++ b/packages/koishi-utils/src/set.ts
@@ -17,3 +17,11 @@ export function union<T>(array1: readonly T[], array2: readonly T[]) {
 export function deduplicate<T>(array: readonly T[]) {
   return [...new Set(array)]
 }
+
+export function remove<T>(list: T[], item: T) {
+  const index = list.indexOf(item)
+  if (index >= 0) {
+    list.splice(index, 1)
+    return true
+  }
+}
diff --git a/packages/koishi-utils/tsconfig.json b/packages/koishi-utils/tsconfig.json
index e27408c68b..b7549d1c0b 100644
--- a/packages/koishi-utils/tsconfig.json
+++ b/packages/koishi-utils/tsconfig.json
@@ -3,7 +3,6 @@
   "compilerOptions": {
     "rootDir": "src",
     "outFile": "temp/index.d.ts",
-    "tsBuildInfoFile": "tsconfig.tsbuildinfo"
   },
   "include": [
     "src"
diff --git a/packages/koishi/ecosystem.json b/packages/koishi/ecosystem.json
index 89d68d20b8..a340d163bb 100644
--- a/packages/koishi/ecosystem.json
+++ b/packages/koishi/ecosystem.json
@@ -1,6 +1,6 @@
 {
   "koishi-adapter-discord": {
-    "version": "1.0.3",
+    "version": "1.0.4",
     "description": "Discord adapter for Koishi"
   },
   "koishi-adapter-kaiheila": {
@@ -48,14 +48,14 @@
     "description": "Image searching plugin for Koishi"
   },
   "koishi-plugin-mongo": {
-    "version": "2.0.0",
+    "version": "2.1.0",
     "description": "MongoDB support for Koishi"
   },
   "koishi-plugin-monitor": {
     "version": "1.0.0-beta.27"
   },
   "koishi-plugin-mysql": {
-    "version": "3.0.0",
+    "version": "3.1.0",
     "description": "MySQL support for Koishi"
   },
   "koishi-plugin-puppeteer": {
@@ -71,7 +71,7 @@
     "description": "Schedule plugin for Koishi"
   },
   "koishi-plugin-status": {
-    "version": "4.0.0-alpha.0",
+    "version": "4.0.0-alpha.1",
     "description": "Show Status of Koishi"
   },
   "koishi-plugin-teach": {
diff --git a/packages/koishi/package.json b/packages/koishi/package.json
index 683c23af72..1a8165c8e9 100644
--- a/packages/koishi/package.json
+++ b/packages/koishi/package.json
@@ -1,7 +1,7 @@
 {
   "name": "koishi",
   "description": "A QQ bot framework based on CQHTTP",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "main": "index.js",
   "typings": "index.d.ts",
   "engines": {
@@ -38,8 +38,8 @@
     "cac": "^6.7.2",
     "chokidar": "^3.5.1",
     "kleur": "^4.1.4",
-    "koishi-core": "^3.2.0",
-    "koishi-utils": "^4.0.1",
+    "koishi-core": "^3.2.1",
+    "koishi-utils": "^4.0.2",
     "prompts": "^2.4.0"
   }
 }
diff --git a/packages/plugin-adventure/package.json b/packages/plugin-adventure/package.json
index 58502d7e52..8e39991323 100644
--- a/packages/plugin-adventure/package.json
+++ b/packages/plugin-adventure/package.json
@@ -28,11 +28,11 @@
     "adventure"
   ],
   "peerDependencies": {
-    "koishi-core": "^3.2.0",
+    "koishi-core": "^3.2.1",
     "koishi-plugin-common": "^4.1.2",
-    "koishi-plugin-mysql": "^3.0.0",
+    "koishi-plugin-mysql": "^3.1.0",
     "koishi-plugin-teach": "^2.0.0",
-    "koishi-utils": "^4.0.1"
+    "koishi-utils": "^4.0.2"
   },
   "devDependencies": {
     "koishi-test-utils": "^6.0.0-beta.10"
diff --git a/packages/plugin-chess/package.json b/packages/plugin-chess/package.json
index 44973afe2c..98299c345c 100644
--- a/packages/plugin-chess/package.json
+++ b/packages/plugin-chess/package.json
@@ -29,8 +29,8 @@
     "game"
   ],
   "peerDependencies": {
-    "koishi-core": "^3.2.0",
+    "koishi-core": "^3.2.1",
     "koishi-plugin-puppeteer": "^2.0.0",
-    "koishi-utils": "^4.0.1"
+    "koishi-utils": "^4.0.2"
   }
 }
diff --git a/packages/plugin-common/package.json b/packages/plugin-common/package.json
index 3b04c7652b..61aa244d33 100644
--- a/packages/plugin-common/package.json
+++ b/packages/plugin-common/package.json
@@ -30,8 +30,8 @@
     "plugin"
   ],
   "peerDependencies": {
-    "koishi-core": "^3.2.0",
-    "koishi-utils": "^4.0.1"
+    "koishi-core": "^3.2.1",
+    "koishi-utils": "^4.0.2"
   },
   "devDependencies": {
     "koishi-test-utils": "^6.0.0-beta.10"
diff --git a/packages/plugin-dice/package.json b/packages/plugin-dice/package.json
index 971abcf19b..a8f883d77f 100644
--- a/packages/plugin-dice/package.json
+++ b/packages/plugin-dice/package.json
@@ -31,8 +31,8 @@
     "dice"
   ],
   "peerDependencies": {
-    "koishi-core": "^3.2.0",
-    "koishi-utils": "^4.0.1"
+    "koishi-core": "^3.2.1",
+    "koishi-utils": "^4.0.2"
   },
   "devDependencies": {
     "koishi-test-utils": "^6.0.0-beta.10"
diff --git a/packages/plugin-eval/package.json b/packages/plugin-eval/package.json
index 0f36d3a9d4..299d527688 100644
--- a/packages/plugin-eval/package.json
+++ b/packages/plugin-eval/package.json
@@ -33,7 +33,7 @@
     "code"
   ],
   "peerDependencies": {
-    "koishi-core": "^3.2.0"
+    "koishi-core": "^3.2.1"
   },
   "dependencies": {
     "js-yaml": "^4.0.0",
diff --git a/packages/plugin-github/package.json b/packages/plugin-github/package.json
index 0b15b482c1..90e3764f70 100644
--- a/packages/plugin-github/package.json
+++ b/packages/plugin-github/package.json
@@ -32,9 +32,9 @@
     "koishi-test-utils": "^6.0.0-beta.10"
   },
   "peerDependencies": {
-    "koishi-core": "^3.2.0",
+    "koishi-core": "^3.2.1",
     "koishi-plugin-puppeteer": "^2.0.0",
-    "koishi-utils": "^4.0.1"
+    "koishi-utils": "^4.0.2"
   },
   "dependencies": {
     "@octokit/webhooks-definitions": "^3.62.5",
diff --git a/packages/plugin-image-search/package.json b/packages/plugin-image-search/package.json
index a87d50d109..c85c4f25b5 100644
--- a/packages/plugin-image-search/package.json
+++ b/packages/plugin-image-search/package.json
@@ -33,8 +33,8 @@
     "pixiv"
   ],
   "peerDependencies": {
-    "koishi-core": "^3.2.0",
-    "koishi-utils": "^4.0.1"
+    "koishi-core": "^3.2.1",
+    "koishi-utils": "^4.0.2"
   },
   "dependencies": {
     "axios": "^0.21.1",
diff --git a/packages/plugin-mongo/package.json b/packages/plugin-mongo/package.json
index 099b394894..192ae4673d 100644
--- a/packages/plugin-mongo/package.json
+++ b/packages/plugin-mongo/package.json
@@ -1,7 +1,7 @@
 {
   "name": "koishi-plugin-mongo",
   "description": "MongoDB support for Koishi",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [
@@ -35,7 +35,7 @@
     "@types/mongodb": "^3.6.9"
   },
   "peerDependencies": {
-    "koishi-core": "^3.2.0"
+    "koishi-core": "^3.2.1"
   },
   "dependencies": {
     "mongodb": "^3.6.4"
diff --git a/packages/plugin-mongo/src/database.ts b/packages/plugin-mongo/src/database.ts
index 36331a0904..3ccf3220c7 100644
--- a/packages/plugin-mongo/src/database.ts
+++ b/packages/plugin-mongo/src/database.ts
@@ -1,7 +1,11 @@
 import { MongoClient, Db, Collection } from 'mongodb'
-import { App, Channel, Database, Tables, TableType, User } from 'koishi-core'
+import { App, Channel, Database, User, Tables as KoishiTables } from 'koishi-core'
 import { URLSearchParams } from 'url'
 
+type TableType = keyof Tables
+
+export interface Tables extends KoishiTables {}
+
 export interface Config {
   username?: string
   password?: string
diff --git a/packages/plugin-mongo/tsconfig.json b/packages/plugin-mongo/tsconfig.json
index 54a917908e..8b165bdac1 100644
--- a/packages/plugin-mongo/tsconfig.json
+++ b/packages/plugin-mongo/tsconfig.json
@@ -1,8 +1,8 @@
 {
     "extends": "../../tsconfig.base",
     "compilerOptions": {
-        "outDir": "dist",
         "rootDir": "src",
+        "outFile": "temp/index.d.ts",
     },
     "include": [
         "src",
diff --git a/packages/plugin-monitor/package.json b/packages/plugin-monitor/package.json
index 451e620d2d..89e47eb357 100644
--- a/packages/plugin-monitor/package.json
+++ b/packages/plugin-monitor/package.json
@@ -17,7 +17,7 @@
   },
   "homepage": "https://github.com/koishijs/koishi#readme",
   "peerDependencies": {
-    "koishi-core": "^3.2.0",
-    "koishi-utils": "^4.0.1"
+    "koishi-core": "^3.2.1",
+    "koishi-utils": "^4.0.2"
   }
 }
diff --git a/packages/plugin-mysql/package.json b/packages/plugin-mysql/package.json
index 48524be8aa..f85b1c5f6e 100644
--- a/packages/plugin-mysql/package.json
+++ b/packages/plugin-mysql/package.json
@@ -1,7 +1,7 @@
 {
   "name": "koishi-plugin-mysql",
   "description": "MySQL support for Koishi",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [
@@ -35,8 +35,8 @@
     "@types/mysql": "^2.15.18"
   },
   "peerDependencies": {
-    "koishi-core": "^3.2.0",
-    "koishi-utils": "^4.0.1"
+    "koishi-core": "^3.2.1",
+    "koishi-utils": "^4.0.2"
   },
   "dependencies": {
     "mysql": "^2.18.1"
diff --git a/packages/plugin-mysql/src/database.ts b/packages/plugin-mysql/src/database.ts
index 8df9530839..eb24290157 100644
--- a/packages/plugin-mysql/src/database.ts
+++ b/packages/plugin-mysql/src/database.ts
@@ -1,5 +1,5 @@
 import { createPool, Pool, PoolConfig, escape as mysqlEscape, escapeId, format, OkPacket, TypeCast } from 'mysql'
-import { TableType, Tables, App, Database } from 'koishi-core'
+import { Tables as KoishiTables, App, Database } from 'koishi-core'
 import { Logger } from 'koishi-utils'
 import { types } from 'util'
 
@@ -9,6 +9,10 @@ declare module 'mysql' {
   }
 }
 
+type TableType = keyof Tables
+
+export interface Tables extends KoishiTables {}
+
 const logger = new Logger('mysql')
 
 export interface Config extends PoolConfig {}
diff --git a/packages/plugin-mysql/tsconfig.json b/packages/plugin-mysql/tsconfig.json
index a497f05e83..b9a2903071 100644
--- a/packages/plugin-mysql/tsconfig.json
+++ b/packages/plugin-mysql/tsconfig.json
@@ -1,8 +1,8 @@
 {
   "extends": "../../tsconfig.base",
   "compilerOptions": {
-    "outDir": "dist",
     "rootDir": "src",
+    "outFile": "temp/index.d.ts",
   },
   "include": [
     "src",
diff --git a/packages/plugin-puppeteer/package.json b/packages/plugin-puppeteer/package.json
index e43fe44946..4c6dfd5a6e 100644
--- a/packages/plugin-puppeteer/package.json
+++ b/packages/plugin-puppeteer/package.json
@@ -33,8 +33,8 @@
     "koishi-test-utils": "^6.0.0-beta.10"
   },
   "peerDependencies": {
-    "koishi-core": "^3.2.0",
-    "koishi-utils": "^4.0.1"
+    "koishi-core": "^3.2.1",
+    "koishi-utils": "^4.0.2"
   },
   "dependencies": {
     "chrome-finder": "^1.0.7",
diff --git a/packages/plugin-rss/package.json b/packages/plugin-rss/package.json
index d5f6de7df4..dbaf7cf1ab 100644
--- a/packages/plugin-rss/package.json
+++ b/packages/plugin-rss/package.json
@@ -31,8 +31,8 @@
     "rss"
   ],
   "peerDependencies": {
-    "koishi-core": "^3.2.0",
-    "koishi-utils": "^4.0.1"
+    "koishi-core": "^3.2.1",
+    "koishi-utils": "^4.0.2"
   },
   "devDependencies": {
     "koishi-test-utils": "^6.0.0-beta.10"
diff --git a/packages/plugin-schedule/package.json b/packages/plugin-schedule/package.json
index db8ca7bd17..7451cd7455 100644
--- a/packages/plugin-schedule/package.json
+++ b/packages/plugin-schedule/package.json
@@ -29,12 +29,12 @@
     "task"
   ],
   "devDependencies": {
-    "koishi-plugin-mongo": "^2.0.0",
-    "koishi-plugin-mysql": "^3.0.0",
+    "koishi-plugin-mongo": "^2.1.0",
+    "koishi-plugin-mysql": "^3.1.0",
     "koishi-test-utils": "^6.0.0-beta.10"
   },
   "peerDependencies": {
-    "koishi-core": "^3.2.0",
-    "koishi-utils": "^4.0.1"
+    "koishi-core": "^3.2.1",
+    "koishi-utils": "^4.0.2"
   }
 }
diff --git a/packages/plugin-status/client/app.vue b/packages/plugin-status/client/app.vue
deleted file mode 100644
index 60bbb8a1d6..0000000000
--- a/packages/plugin-status/client/app.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <template v-if="status">
-    <load-chart :status="status"/>
-    <bot-table :status="status"/>
-    <plugin-list :status="status"/>
-    <history-chart :status="status"/>
-    <hour-chart :status="status"/>
-    <group-chart :status="status"/>
-    <word-cloud :status="status"/>
-  </template>
-</template>
-
-<script setup lang="ts">
-
-import { useStatus, BotTable, GroupChart, HistoryChart, HourChart, LoadChart, PluginList, WordCloud } from '.'
-
-const status = useStatus()
-
-</script>
-
-<style lang="scss">
-
-body {
-  margin: 0;
-}
-
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-}
-
-</style>
diff --git a/packages/plugin-status/client/components/bot-table.vue b/packages/plugin-status/client/components/bot-table.vue
deleted file mode 100644
index 972a41ab28..0000000000
--- a/packages/plugin-status/client/components/bot-table.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <el-card class="bot-table frameless" header="账号数据" shadow="hover">
-    <table v-if="status.bots.length">
-      <tr>
-        <th>平台名</th>
-        <th>用户名</th>
-        <th>运行状态</th>
-        <th>当前消息频率</th>
-        <th>近期消息频率</th>
-      </tr>
-      <tr v-for="(bot, index) in status.bots" :key="index">
-        <td>{{ bot.platform }}</td>
-        <td>{{ bot.username }}</td>
-        <td>{{ codes[bot.code] }}</td>
-        <td>发送 {{ bot.currentRate[0] }}/min，接收 {{ bot.currentRate[1] }}/min</td>
-        <td>发送 {{ bot.recentRate[0] }}/min，接收 {{ bot.recentRate[1] }}/min</td>
-      </tr>
-    </table>
-    <p v-else>暂无数据。</p>
-  </el-card>
-</template>
-
-<script lang="ts" setup>
-
-import type { Payload } from '~/server'
-import { defineProps } from 'vue'
-
-defineProps<{ status: Payload }>()
-
-const codes = ['运行中', '闲置', '离线', '网络异常', '服务器异常', '封禁中', '尝试连接']
-
-</script>
-
-<style lang="scss">
-
-.bot-table {
-  table {
-    text-align: center;
-    width: 100%;
-    border-collapse: collapse;
-  }
-
-  tr {
-    transition: 0.3s ease;
-  }
-
-  tr:hover {
-    background-color: #f6f8fa;
-  }
-
-  td, th {
-    padding: .6em 1em;
-    border-bottom: 1px solid #ebeef5;
-  }
-
-  tr:last-child td {
-    border-bottom: none;
-  }
-}
-
-</style>
diff --git a/packages/plugin-status/client/components/button.vue b/packages/plugin-status/client/components/button.vue
new file mode 100644
index 0000000000..5bfdb078d3
--- /dev/null
+++ b/packages/plugin-status/client/components/button.vue
@@ -0,0 +1,125 @@
+<template>
+  <button
+    :title="disabled ? '' : title"
+    :class="['k-button', type, { solid, round, unframed }]"
+    :disabled="disabled"
+    @click.stop="$emit('click')"
+  >
+    <slot/>
+  </button>
+</template>
+
+<script lang="ts" setup>
+
+import { defineProps } from 'vue'
+
+defineProps({
+  type: {
+    type: String,
+    default: 'default',
+  },
+  solid: Boolean,
+  unframed: Boolean,
+  title: String,
+  round: Boolean,
+  disabled: Boolean,
+})
+
+</script>
+
+<style lang="scss" scoped>
+
+@import '../index.scss';
+
+@mixin active-bg-color($color) {
+  background-color: $color !important;
+  &:hover {
+    background-color: lighten($color, 30%) !important;
+  }
+  &:active {
+    background-color: darken($color, 30%) !important;
+  }
+  &:disabled {
+    background-color: #999 !important;
+  }
+}
+
+button {
+  font-size: 1em;
+  line-height: 1.2em;
+  appearance: none;
+  user-select: none;
+  border: none;
+  border-radius: 0.4em;
+  cursor: pointer;
+  padding: 0.6em 1em;
+  transition: 0.3s ease;
+  display: inline-block;
+  &.round {
+    border-radius: 50%;
+  }
+  &:focus {
+    outline: 0;
+  }
+  &:disabled {
+    cursor: default;
+  }
+  // default: transparent & framed
+  color: $tpFgColor3;
+  border: 1px solid $tpBorderColor2;
+  background-color: $tpBgColor1;
+  &:disabled {
+    color: $tpFgColor1;
+    border-color: $tpBorderColor1;
+    background-color: transparent;
+  }
+  &:hover:not(:disabled) {
+    color: $tpFgColor4;
+    border: 1px solid $tpBorderColor3;
+    background-color: $tpBgColor2;
+  }
+  // dim
+  &.dim {
+    border-color: $tpBorderColor1;
+    background-color: transparent;
+    &:hover:not(:disabled) {
+      border-color: $tpBorderColor2;
+      background-color: $tpBgColor1;
+    }
+  }
+  // solid
+  &.solid {
+    color: #ffffff !important;
+    border-color: transparent !important;
+    &.default {
+      @include active-bg-color($accentColor);
+    }
+    &.danger {
+      @include active-bg-color($warningColor);
+    }
+    &.success {
+      @include active-bg-color($successColor);
+    }
+  }
+  // unframed
+  &.unframed {
+    color: $tpFgColor4;
+    border-color: transparent;
+    background-color: transparent;
+    text-shadow: 1px 2px 3px #000a;
+    &:hover {
+      border-color: $tpBorderColor1;
+      background-color: #ffffff40;
+    }
+    @media (max-width: $bp_xs) {
+      color: $tpFgColor5;
+      background-color: #ffffff40;
+      &:hover {
+        border-color: $tpBorderColor2;
+        background-color: #ffffff60;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/packages/plugin-status/client/components/card.vue b/packages/plugin-status/client/components/card.vue
new file mode 100644
index 0000000000..dd8b6edfac
--- /dev/null
+++ b/packages/plugin-status/client/components/card.vue
@@ -0,0 +1,63 @@
+<template>
+  <section class="k-card">
+    <header v-if="title || $slots.header">
+      <slot name="header">{{ title }}</slot>
+    </header>
+    <div class="k-card-body"><slot/></div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+
+import { defineProps } from 'vue'
+
+defineProps<{
+  title?: string
+}>()
+
+</script>
+
+<style lang="scss" scoped>
+
+$paddingX: 1.2rem;
+$paddingY: 1.6rem;
+
+.k-card {
+  margin: 0 auto 2rem;
+  width: 100%;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, .24);
+  box-shadow: 0 23px 20px -20px rgb(9 10 18 / 10%), 0 0 15px rgb(9 10 18 / 6%);
+
+  header {
+    font-size: 1.25rem;
+    font-weight: bolder;
+    padding: $paddingX $paddingY 0;
+    transition: color 0.3s ease;
+    color: rgba(244, 244, 245, .8);
+  }
+
+  .k-card-body {
+    padding: $paddingX $paddingY;
+    > :first-child {
+      margin-top: 0;
+    }
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &.frameless .k-card-body {
+    padding: 0;
+
+    p {
+      margin: 1.5rem 2rem;
+    }
+  }
+
+  .footer {
+    border-top: 1px solid #EBEEF5;
+  }
+}
+
+</style>
diff --git a/packages/plugin-status/client/components/input.vue b/packages/plugin-status/client/components/input.vue
new file mode 100644
index 0000000000..552f72f32f
--- /dev/null
+++ b/packages/plugin-status/client/components/input.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="k-input" :class="{ focused, disabled }">
+    <i v-if="prefix" :class="'fas fa-' + prefix" class="prefix" @click="$emit('clickPrefix')"/>
+    <input
+      ref="input"
+      :value="modelValue"
+      :type="type"
+      :style="inputStyle"
+      :tabindex="tabindex"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :class="{
+        invalid,
+        'round-left': roundLeft,
+        'round-right': roundRight,
+        'ortho-left': orthoLeft,
+        'ortho-right': orthoRight,
+      }"
+      @input="onInput"
+      @focus="onFocus"
+      @blur="onBlur"
+      @keydown.enter.stop="$emit('enter', $event)"
+    />
+    <i v-if="suffix" :class="'fas fa-' + suffix" class="suffix" @click="$emit('clickSuffix')"/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+import { defineProps, ref, computed, defineEmit } from 'vue'
+
+const props = defineProps({
+  prefix: String,
+  suffix: String,
+  placeholder: String,
+  disabled: Boolean,
+  validate: Function,
+  tabindex: Number,
+  roundLeft: Boolean,
+  roundRight: Boolean,
+  orthoLeft: Boolean,
+  orthoRight: Boolean,
+  modelValue: [ String, Number ],
+  type: { default: 'text' },
+  size: { default: 1 },
+})
+
+const focused = ref(false)
+const invalid = ref(false)
+
+const inputStyle = computed(() => ({
+  fontSize: props.size + 'em',
+  paddingLeft: +!!(props.prefix) + 1 + 'em',
+  paddingRight: +!!(props.suffix) + 1 + 'em',
+}))
+
+const emit = defineEmit(['update:modelValue', 'focus', 'blur', 'enter', 'clickPrefix', 'clickSuffix'])
+
+function onInput (event) {
+  if (props.validate) {
+    invalid.value = !props.validate(event.target.value)
+  }
+  emit('update:modelValue', event.target.value)
+}
+
+function onFocus (event) {
+  focused.value = true
+  emit('focus', event)
+}
+
+function onBlur (event) {
+  focused.value = false
+  emit('blur', event)
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+@import '../index.scss';
+
+.k-input {
+  height: 2em;
+  position: relative;
+  transition: 0.3s ease;
+  position: relative;
+  display: inline-block;
+
+  > i.prefix, > i.suffix {
+    color: $tpColor1;
+    top: 50%;
+    position: absolute;
+    margin-top: -0.5em;
+  }
+  > i.prefix {
+    left: 10px;
+  }
+  > i.suffix {
+    right: 10px;
+  }
+
+  > input {
+    padding: 0;
+    color: white;
+    width: 100%;
+    outline: none;
+    font-size: 1em;
+    height: inherit;
+    display: inline-block;
+    border-radius: 0.3em;
+    transition: 0.3s ease;
+    box-sizing: border-box;
+    appearance: none;
+    background-color: transparent;
+    border: 1px solid $tpBorderColor1;
+    &:hover:not(:disabled) {
+      border-color: $tpBorderColor2;
+      background-color: $tpBgColor1;
+      box-shadow: 0 0 4px 1px inset $tpInsetColor;
+    }
+    &:focus:not(:disabled) {
+      border-color: #409eff;
+      background-color: $tpBgColor2;
+      box-shadow: 0 0 8px 2px inset $tpInsetColor;
+    }
+    &::-webkit-input-placeholder {
+      color: $tpColor1;
+      user-select: none;
+    }
+    &:hover:not(:disabled)::-webkit-input-placeholder {
+      color: $tpColor2;
+    }
+    &:focus:not(:disabled)::-webkit-input-placeholder {
+      color: $tpColor3;
+    }
+    &:disabled::-webkit-input-placeholder {
+      color: $tpFgColor2;
+    }
+  }
+
+  &.round > input {
+    border-radius: 1rem;
+  }
+  &.ortho > input {
+    border-radius: 0;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/packages/plugin-status/client/components/load-chart.vue b/packages/plugin-status/client/components/load-chart.vue
deleted file mode 100644
index da53efde3b..0000000000
--- a/packages/plugin-status/client/components/load-chart.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <el-card header="负载状态" shadow="hover">
-    <load-bar title="CPU" :rate="status.cpu"/>
-    <load-bar title="内存" :rate="status.memory"/>
-  </el-card>
-</template>
-
-<script setup lang="ts">
-
-import LoadBar from './load-bar.vue'
-import type { Payload } from '~/server'
-import { defineProps } from 'vue'
-
-defineProps<{ status: Payload }>()
-
-</script>
diff --git a/packages/plugin-status/client/components/plugin-list.vue b/packages/plugin-status/client/components/plugin-list.vue
deleted file mode 100644
index 9c5d2acff9..0000000000
--- a/packages/plugin-status/client/components/plugin-list.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <el-card header="插件列表" shadow="hover">
-    <ul class="plugin-list">
-      <plugin-view :data="data" v-for="(data, index) in status.plugins" :key="index"/>
-    </ul>
-  </el-card>
-</template>
-
-<script setup lang="ts">
-
-import PluginView from './plugin-view.vue'
-import type { Payload } from '~/server'
-import { defineProps } from 'vue'
-
-defineProps<{ status: Payload }>()
-
-</script>
diff --git a/packages/plugin-status/client/global.d.ts b/packages/plugin-status/client/global.d.ts
index 7c590f0ffc..e251d395c6 100644
--- a/packages/plugin-status/client/global.d.ts
+++ b/packages/plugin-status/client/global.d.ts
@@ -9,6 +9,7 @@ declare module '*.vue' {
 }
 
 declare module '~/server' {
+  import {} from 'koishi-plugin-status/server'
   export * from 'koishi-plugin-status/server/webui'
 }
 
@@ -16,8 +17,4 @@ declare module '~/client' {
   export * from 'koishi-plugin-status/client'
 }
 
-declare module '~/layout' {
-  export * from 'koishi-plugin-status/client/app.vue'
-}
-
 declare const KOISHI_ENDPOINT: string
diff --git a/packages/plugin-status/client/index.scss b/packages/plugin-status/client/index.scss
index 3ff79052e9..7fce8efabf 100644
--- a/packages/plugin-status/client/index.scss
+++ b/packages/plugin-status/client/index.scss
@@ -10,34 +10,38 @@ $success: #67c23a;
 $error: #F56C6C;
 $warning: #E6A23C;
 
-.el-card {
-  max-width: 960px;
-  margin: 2rem auto;
-  border-radius: 6px;
+// color schemes
+$activeColor: #7fffd4;
+$accentColor: #409eff;
+$warningColor: #f56c6c;
+$successColor: #67c23a;
+$borderColor: #eaecef;
 
-  .el-card__header {
-    font-size: 1.25rem;
-    font-weight: bolder;
-    padding: 1rem 1.5rem;
-    text-align: center;
-  }
+$tableBdColor: #dfe2e5;
 
-  .frameless > & .el-card__body {
-    padding: 0;
+// transparent
+$tpColor1: #c0c4cc80;
+$tpColor2: #c0c4ccb0;
+$tpColor3: #c0c4cc;
+$tpFgColor1: #e4e7ed60;
+$tpFgColor2: #e4e7ed90;
+$tpFgColor3: #f2f6fcc0;
+$tpFgColor4: #f2f6fc;
+$tpFgColor5: #f5f8fd;
+$tpBgColor0: transparent;
+$tpBgColor1: #fff2;
+$tpBgColor2: #fff4;
+$tpBorderColor1: #dcdfe640;
+$tpBorderColor2: #dcdfe680;
+$tpBorderColor3: #dcdfe6;
+$tpInsetColor: #0004;
 
-    p {
-      margin: 1.5rem 2rem;
-    }
-  }
+// breakpoints
+$bp_lg: 1440px;
+$bp_md: 1024px;
+$bp_sm: 768px;
+$bp_xs: 480px;
 
-  .footer {
-    border-top: 1px solid #EBEEF5;
-  }
-}
-
-.echarts {
-  width: 800px;
-  height: 400px;
-  max-width: 100%;
-  margin: 0 auto;
-}
+$navbarHeight: 4rem;
+$sidebarWidth: 16rem;
+$mainPadding: 2rem;
diff --git a/packages/plugin-status/client/index.ts b/packages/plugin-status/client/index.ts
index 9969a59f4a..12f09ac28a 100644
--- a/packages/plugin-status/client/index.ts
+++ b/packages/plugin-status/client/index.ts
@@ -1,36 +1,83 @@
-import { ref, onMounted } from 'vue'
-import type { Payload } from '~/server'
-import BotTable from './components/bot-table.vue'
-import GroupChart from './components/group-chart.vue'
-import HistoryChart from './components/history-chart.vue'
-import HourChart from './components/hour-chart.vue'
-import LoadChart from './components/load-chart.vue'
-import PluginList from './components/plugin-list.vue'
-import WordCloud from './components/word-cloud.vue'
-
-export {
-  BotTable,
-  GroupChart,
-  HistoryChart,
-  HourChart,
-  LoadChart,
-  PluginList,
-  WordCloud,
+/* eslint-disable no-undef */
+
+import { ref, watch } from 'vue'
+import type { User } from 'koishi-core'
+import type { Registry, Profile, Statistics } from '~/server'
+
+const prefix = 'koishi:'
+
+export namespace storage {
+  export function get(key: string) {
+    if (typeof localStorage === 'undefined') return
+    const rawData = localStorage.getItem(prefix + key)
+    if (!rawData) return
+    try {
+      return JSON.parse(rawData)
+    } catch {}
+  }
+
+  export function set(key: string, value: any) {
+    if (typeof localStorage === 'undefined') return
+    localStorage.setItem(prefix + key, JSON.stringify(value))
+  }
+
+  export function create<T>(key: string, fallback?: T) {
+    const wrapper = ref<T>({ ...fallback, ...get(key) })
+    watch(wrapper, () => set(key, wrapper.value), {
+      deep: typeof fallback === 'object',
+    })
+    return wrapper
+  }
+}
+
+interface Config {
+  authType: 0 | 1
+  username?: string
+  password?: string
+  platform?: string
+  userId?: string
+  showPass?: boolean
 }
 
-export function useStatus() {
-  const status = ref<Payload>(null)
-
-  onMounted(async () => {
-    const socket = new WebSocket(KOISHI_ENDPOINT)
-    socket.onmessage = (ev) => {
-      const data = JSON.parse(ev.data)
-      console.log('receive', data)
-      if (data.type === 'update') {
-        status.value = data.body
-      }
+export const user = storage.create<User>('user')
+export const config = storage.create<Config>('config', { authType: 0 })
+export const profile = ref<Profile>(null)
+export const registry = ref<Registry>(null)
+export const stats = ref<Statistics>(null)
+export const socket = ref<WebSocket>(null)
+
+const listeners: Record<string, (data: any) => void> = {}
+
+export function start() {
+  socket.value = new WebSocket(KOISHI_ENDPOINT.replace(/^http/, 'ws'))
+  socket.value.onmessage = (ev) => {
+    const data = JSON.parse(ev.data)
+    console.log(data)
+    if (data.type in listeners) {
+      listeners[data.type](data.body)
     }
-  })
+  }
+  receive('profile', data => profile.value = data)
+  receive('registry', data => registry.value = data)
+  receive('stats', data => stats.value = data)
+  receive('user', data => user.value = data)
+}
+
+export function send(type: string, body: any) {
+  socket.value.send(JSON.stringify({ type, body }))
+}
+
+export function receive<T = any>(event: string, listener: (data: T) => void) {
+  listeners[event] = listener
+}
 
-  return status
+export async function sha256(password: string) {
+  const data = new TextEncoder().encode(password)
+  const buffer = await crypto.subtle.digest('SHA-256', data)
+  const view = new DataView(buffer)
+  let output = ''
+  for (let i = 0; i < view.byteLength; i += 4) {
+    output += ('00000000' + view.getUint32(i).toString(16)).slice(-8)
+  }
+  return output
 }
diff --git a/packages/plugin-status/client/main.ts b/packages/plugin-status/client/main.ts
index 3d5240b0e5..b95ed8a4a1 100644
--- a/packages/plugin-status/client/main.ts
+++ b/packages/plugin-status/client/main.ts
@@ -1,22 +1,99 @@
 import { createApp } from 'vue'
-import { ElCard, ElButton, ElCollapseTransition } from 'element-plus'
+import { ElButton, ElCollapseTransition } from 'element-plus'
 import { THEME_KEY } from 'vue-echarts'
-import Layout from '~/layout'
+import { createRouter, createWebHistory } from 'vue-router'
+import Card from './components/card.vue'
+import Button from './components/button.vue'
+import Input from './components/input.vue'
+import App from './views/layout/index.vue'
+import { start, user, receive } from '.'
 
 // for el-collapse-transition
 import 'element-plus/lib/theme-chalk/base.css'
 import 'element-plus/lib/theme-chalk/el-icon.css'
-import 'element-plus/lib/theme-chalk/el-card.css'
 import 'element-plus/lib/theme-chalk/el-button.css'
 
+import '@fortawesome/fontawesome-free/css/fontawesome.css'
+import '@fortawesome/fontawesome-free/css/brands.css'
+import '@fortawesome/fontawesome-free/css/regular.css'
+import '@fortawesome/fontawesome-free/css/solid.css'
+
 import './index.scss'
 
-const app = createApp(Layout)
+declare module 'vue-router' {
+  interface RouteMeta {
+    icon?: string
+    hidden?: boolean
+    authorize?: boolean
+    frameless?: boolean
+    require?: ('stats' | 'profile' | 'registry')[]
+  }
+}
+
+const app = createApp(App)
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{
+    path: '/',
+    name: '仪表盘',
+    meta: { icon: 'tachometer-alt', require: ['stats', 'profile', 'registry'] },
+    component: () => import('./views/home/index.vue'),
+  }, {
+    path: '/bots',
+    name: '机器人',
+    meta: { icon: 'robot', require: ['stats', 'profile'] },
+    component: () => import('./views/bots.vue'),
+  }, {
+    path: '/plugins',
+    name: '插件',
+    meta: { icon: 'plug', require: ['registry'] },
+    component: () => import('./views/plugins/index.vue'),
+  }, {
+    path: '/sandbox',
+    name: '沙盒',
+    meta: { icon: 'laptop-code', authorize: true },
+    component: () => import('./views/sandbox.vue'),
+  }, {
+    path: '/profile',
+    name: '资料',
+    meta: { icon: 'user-circle', authorize: true, hidden: true },
+    component: () => import('./views/profile.vue'),
+  }, {
+    path: '/login',
+    name: '登录',
+    meta: { icon: 'sign-in-alt', frameless: true, hidden: true },
+    component: () => import('./views/login.vue'),
+  }],
+})
 
-app.provide(THEME_KEY, 'light')
+app.component('k-card', Card)
+app.component('k-button', Button)
+app.component('k-input', Input)
+
+app.provide(THEME_KEY, 'dark-blue')
 
-app.use(ElCard)
 app.use(ElButton)
 app.use(ElCollapseTransition)
 
+app.use(router)
+
+receive('expire', () => {
+  router.push('/login')
+})
+
+router.beforeEach((route) => {
+  if (route.meta.authorize && !user.value) {
+    return '/login'
+  }
+})
+
+router.afterEach((route) => {
+  if (typeof route.name === 'string') {
+    document.title = route.name + ' | Koishi 控制台'
+  }
+})
+
+start()
+
 app.mount('#app')
diff --git a/packages/plugin-status/client/views/bots.vue b/packages/plugin-status/client/views/bots.vue
new file mode 100644
index 0000000000..4b1b3da842
--- /dev/null
+++ b/packages/plugin-status/client/views/bots.vue
@@ -0,0 +1,58 @@
+<template>
+  <k-card class="bot-table" title="账号数据">
+    <table v-if="profile.bots.length">
+      <tr>
+        <th>平台名</th>
+        <th>用户名</th>
+        <th>运行状态</th>
+        <th>当前消息频率</th>
+        <th>近期消息频率</th>
+      </tr>
+      <tr v-for="({ platform, username, selfId, code, currentRate }, index) in profile.bots" :key="index">
+        <td>{{ platform }}</td>
+        <td>{{ username }}</td>
+        <td>{{ codes[code] }}</td>
+        <td>发送 {{ currentRate[0] }}/min，接收 {{ currentRate[1] }}/min</td>
+        <td>发送 {{ stats.botSend[`${platform}:${selfId}`] || 0 }}/d，接收 {{ stats.botReceive[`${platform}:${selfId}`] || 0 }}/d</td>
+      </tr>
+    </table>
+    <p v-else>暂无数据。</p>
+  </k-card>
+</template>
+
+<script lang="ts" setup>
+
+import { stats, profile } from '~/client'
+
+const codes = ['运行中', '闲置', '离线', '网络异常', '服务器异常', '封禁中', '尝试连接']
+
+</script>
+
+<style lang="scss">
+
+.bot-table {
+  table {
+    text-align: center;
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  tr {
+    transition: 0.3s ease;
+  }
+
+  tr:hover {
+    background-color: #474d8450;
+  }
+
+  td, th {
+    padding: .6em 1em;
+    border-bottom: 1px solid #040620;
+  }
+
+  th {
+    border-top: 1px solid #040620;
+  }
+}
+
+</style>
diff --git a/packages/plugin-status/client/views/home/card-numeric.vue b/packages/plugin-status/client/views/home/card-numeric.vue
new file mode 100644
index 0000000000..030d70f019
--- /dev/null
+++ b/packages/plugin-status/client/views/home/card-numeric.vue
@@ -0,0 +1,49 @@
+<template>
+  <k-card class="k-card-numeric">
+    <i :class="`fas fa-${icon}`"/>
+    <div class="content">
+      <p class="title">{{ title }}</p>
+      <p class="value"><slot/></p>
+    </div>
+  </k-card>
+</template>
+
+<script lang="ts" setup>
+
+import { defineProps } from 'vue'
+
+defineProps<{
+  title: string
+  icon: string
+  to?: string
+}>()
+
+</script>
+
+<style lang="scss" scoped>
+
+.k-card-numeric {
+  i {
+    font-size: 2.4rem;
+    padding: 0.3rem 0;
+    width: 3rem;
+    text-align: center;
+  }
+
+  .content {
+    float: right;
+    text-align: right;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .value {
+    font-size: 1.2rem;
+    margin-top: 0.2rem;
+    color: rgba(244, 244, 245, .8);
+  }
+}
+
+</style>
diff --git a/packages/plugin-status/client/components/group-chart.vue b/packages/plugin-status/client/views/home/group-chart.vue
similarity index 73%
rename from packages/plugin-status/client/components/group-chart.vue
rename to packages/plugin-status/client/views/home/group-chart.vue
index 6be2442328..efbda0ffff 100644
--- a/packages/plugin-status/client/components/group-chart.vue
+++ b/packages/plugin-status/client/views/home/group-chart.vue
@@ -1,14 +1,14 @@
 <template>
-  <el-card class="frameless" header="各群发言数量" shadow="hover">
-    <v-chart v-if="status.groups.length" :option="option" autoresize/>
+  <k-card class="frameless" title="各群发言数量">
+    <v-chart v-if="stats.groups.length" :option="option" autoresize/>
     <p v-else>暂无数据。</p>
-  </el-card>
+  </k-card>
 </template>
 
 <script lang="ts" setup>
 
-import type { Payload } from '~/server'
-import { defineProps, computed } from 'vue'
+import { stats } from '~/client'
+import { computed } from 'vue'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { GridComponent, TooltipComponent } from 'echarts/components'
@@ -17,8 +17,6 @@ import VChart from 'vue-echarts'
 
 use([CanvasRenderer, GridComponent, TooltipComponent, PieChart])
 
-const props = defineProps<{ status: Payload }>()
-
 const option = computed(() => ({
   tooltip: {
     trigger: 'item',
@@ -34,7 +32,7 @@ const option = computed(() => ({
   },
   series: [{
     type: 'pie',
-    data: props.status.groups.sort((a, b) => b.value - a.value),
+    data: stats.value.groups.sort((a, b) => b.value - a.value),
     radius: ['35%', '65%'],
     minShowLabelAngle: 3,
   }],
diff --git a/packages/plugin-status/client/components/history-chart.vue b/packages/plugin-status/client/views/home/history-chart.vue
similarity index 68%
rename from packages/plugin-status/client/components/history-chart.vue
rename to packages/plugin-status/client/views/home/history-chart.vue
index 0ae4b95e50..f106537bc3 100644
--- a/packages/plugin-status/client/components/history-chart.vue
+++ b/packages/plugin-status/client/views/home/history-chart.vue
@@ -1,14 +1,14 @@
 <template>
-  <el-card class="frameless" header="历史发言数量" shadow="hover">
-    <v-chart v-if="Object.keys(status.history).length" :option="option" autoresize/>
+  <k-card class="frameless" title="历史发言数量">
+    <v-chart v-if="Object.keys(stats.history).length" :option="option" autoresize/>
     <p v-else>暂无数据。</p>
-  </el-card>
+  </k-card>
 </template>
 
 <script lang="ts" setup>
 
-import type { Payload } from '~/server'
-import { defineProps, computed } from 'vue'
+import { stats } from '~/client'
+import { computed } from 'vue'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { GridComponent, TooltipComponent } from 'echarts/components'
@@ -17,8 +17,6 @@ import VChart from 'vue-echarts'
 
 use([CanvasRenderer, GridComponent, TooltipComponent, LineChart])
 
-const props = defineProps<{ status: Payload }>()
-
 const week = '日一二三四五六'
 
 const option = computed(() => ({
@@ -34,7 +32,7 @@ const option = computed(() => ({
   },
   xAxis: {
     type: 'category',
-    data: Object.keys(props.status.history).reverse(),
+    data: Object.keys(stats.value.history).reverse(),
   },
   yAxis: {
     type: 'value',
@@ -45,7 +43,7 @@ const option = computed(() => ({
   series: {
     type: 'line',
     smooth: true,
-    data: Object.values(props.status.history).reverse(),
+    data: Object.values(stats.value.history).reverse(),
   },
 }))
 
diff --git a/packages/plugin-status/client/components/hour-chart.vue b/packages/plugin-status/client/views/home/hour-chart.vue
similarity index 77%
rename from packages/plugin-status/client/components/hour-chart.vue
rename to packages/plugin-status/client/views/home/hour-chart.vue
index 896db66057..0d53de18fe 100644
--- a/packages/plugin-status/client/components/hour-chart.vue
+++ b/packages/plugin-status/client/views/home/hour-chart.vue
@@ -1,13 +1,13 @@
 <template>
-  <el-card class="frameless" header="每小时发言数量" shadow="hover">
+  <k-card class="frameless" title="每小时发言数量">
     <v-chart :option="option" autoresize/>
-  </el-card>
+  </k-card>
 </template>
 
 <script lang="ts" setup>
 
-import type { Payload } from '~/server'
-import { defineProps, computed } from 'vue'
+import { stats } from '~/client'
+import { computed } from 'vue'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { GridComponent, TooltipComponent } from 'echarts/components'
@@ -18,8 +18,6 @@ use([CanvasRenderer, GridComponent, TooltipComponent, BarChart])
 
 const formatHour = (value: number) => `${(value - 0.5).toFixed()}:00-${(value + 0.5).toFixed()}:00`
 
-const props = defineProps<{ status: Payload }>()
-
 const option = computed(() => ({
   tooltip: {
     trigger: 'axis',
@@ -28,7 +26,7 @@ const option = computed(() => ({
     },
     formatter(params) {
       const [{ data: [x], dataIndex, color }] = params
-      const source = props.status.hours[dataIndex]
+      const source = stats.value.hours[dataIndex]
       const output = [
         `${formatHour(x)}`,
         `消息总量：${+source.total.toFixed(1)}`,
@@ -63,7 +61,7 @@ const option = computed(() => ({
   },
   series: [{
     name: '其他',
-    data: props.status.hours.map((val, index) => [index + 0.5, val.total || 0]),
+    data: stats.value.hours.map((val, index) => [index + 0.5, val.total || 0]),
     type: 'bar',
     stack: 1,
     itemStyle: {
@@ -71,7 +69,7 @@ const option = computed(() => ({
     },
   }, {
     name: '教学',
-    data: props.status.hours.map((val, index) => [index + 0.5, (val.command || 0) + (val.dialogue || 0)]),
+    data: stats.value.hours.map((val, index) => [index + 0.5, (val.command || 0) + (val.dialogue || 0)]),
     type: 'bar',
     stack: 1,
     itemStyle: {
@@ -79,7 +77,7 @@ const option = computed(() => ({
     },
   }, {
     name: '指令',
-    data: props.status.hours.map((val, index) => [index + 0.5, val.command || 0]),
+    data: stats.value.hours.map((val, index) => [index + 0.5, val.command || 0]),
     type: 'bar',
     stack: 1,
     itemStyle: {
diff --git a/packages/plugin-status/client/views/home/index.vue b/packages/plugin-status/client/views/home/index.vue
new file mode 100644
index 0000000000..d48a6414b1
--- /dev/null
+++ b/packages/plugin-status/client/views/home/index.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="stats-grid basic-stats">
+    <card-numeric title="当前消息频率" icon="paper-plane">{{ currentRate }} / min</card-numeric>
+    <card-numeric title="近期消息频率" icon="history">{{ recentRate }} / d</card-numeric>
+    <card-numeric title="命名插件数量" icon="plug">{{ registry.pluginCount }}</card-numeric>
+    <card-numeric title="数据库体积" icon="database">{{ (profile.storageSize / 1048576).toFixed(1) }} MB</card-numeric>
+    <card-numeric title="活跃用户数量" icon="heart">{{ profile.activeUsers }}</card-numeric>
+    <card-numeric title="活跃群数量" icon="users">{{ profile.activeGroups }}</card-numeric>
+  </div>
+  <load-chart/>
+  <div class="stats-grid chart-stats">
+    <history-chart/>
+    <hour-chart/>
+    <group-chart/>
+    <word-cloud/>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import { computed } from 'vue'
+import { stats, profile, registry } from '~/client'
+import CardNumeric from './card-numeric.vue'
+import GroupChart from './group-chart.vue'
+import HistoryChart from './history-chart.vue'
+import HourChart from './hour-chart.vue'
+import LoadChart from './load-chart.vue'
+import WordCloud from './word-cloud.vue'
+
+const currentRate = computed(() => {
+  return profile.value.bots.reduce((sum, bot) => sum + bot.currentRate[0], 0)
+})
+
+const recentRate = computed(() => {
+  return Object.values(stats.value.botSend).reduce((sum, value) => sum + value, 0).toFixed(1)
+})
+
+</script>
+
+<style lang="scss">
+
+.stats-grid .k-card {
+  margin: 0;
+}
+
+.basic-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  grid-gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+.chart-stats {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, auto);
+  grid-gap: 2rem;
+  margin: 2rem 0 4rem;
+
+  .echarts {
+    max-width: 100%;
+    margin: 0 auto -3rem;
+  }
+
+  @media (min-width: 1400px) {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, auto);
+
+    @media (min-width: 1600px) {
+      .echarts {
+        width: 600px;
+        height: 400px;
+        max-width: 100%;
+        margin: 0 auto -3rem;
+      }
+    }
+
+    @media (max-width: 1600px) {
+      .echarts {
+        width: 480px;
+        height: 360px;
+      }
+    }
+  }
+
+  @media (max-width: 1440px) {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(4, auto);
+
+    @media (min-width: 1200px) {
+      .echarts {
+        width: 800px;
+        height: 400px;
+      }
+    }
+
+    @media (max-width: 1200px) {
+      .echarts {
+        width: 720px;
+        height: 400px;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/packages/plugin-status/client/components/load-bar.vue b/packages/plugin-status/client/views/home/load-bar.vue
similarity index 52%
rename from packages/plugin-status/client/components/load-bar.vue
rename to packages/plugin-status/client/views/home/load-bar.vue
index 2f181d5337..98f10b7b6f 100644
--- a/packages/plugin-status/client/components/load-bar.vue
+++ b/packages/plugin-status/client/views/home/load-bar.vue
@@ -1,12 +1,14 @@
 <template>
-  <div class="load">
+  <div class="load-bar">
     <span class="title">{{ title }}</span>
-    <span class="body" :class="mainly">
+    <span class="body">
       <span class="used bar" :style="{ width: percentage(rate[1] - rate[0]) }">
-        <span class="caption">{{ caption }}</span>
+        <span v-if="mainly === 'used'" class="caption">{{ caption }}</span>
       </span>
-      <span class="app bar" :style="{ width: percentage(rate[0]) }"/>
-      <span class="caption">{{ caption }}</span>
+      <span class="app bar" :style="{ width: percentage(rate[0]) }">
+        <span v-if="mainly === 'app'" class="caption">{{ caption }}</span>
+      </span>
+      <span v-if="mainly === 'free'" class="caption">{{ caption }}</span>
     </span>
   </div>
 </template>
@@ -22,8 +24,12 @@ function percentage(value: number, digits = 3) {
   return (value * 100).toFixed(digits) + '%'
 }
 
-const mainly = computed(() => {
-  return 1 + props.rate[0] > 2 * props.rate[1] ? 'free' : 'busy'
+const segments = ['used', 'app', 'free'] as const
+
+const mainly = computed<typeof segments[number]>(() => {
+  const length = [props.rate[1] - props.rate[0], props.rate[0], 1 - props.rate[1]]
+  const index = length.indexOf(Math.max(...length))
+  return segments[index]
 })
 
 const caption = computed(() => {
@@ -32,11 +38,9 @@ const caption = computed(() => {
 
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
-.load {
-  margin: 1rem 0;
-  padding: 0 2rem;
+.load-bar {
   display: flex;
   align-items: center;
   user-select: none;
@@ -47,47 +51,44 @@ const caption = computed(() => {
 
   .body {
     width: 100%;
-    height: 1.6rem;
+    height: 1.2rem;
     position: relative;
     display: inline;
-    background-color: #f6f8fa;
-    &.busy > .caption, &.free .used > .caption {
-      display: none;
-    }
+    background-color: #474d84;
+    border-radius: 4px;
+    overflow: hidden;
   }
 
   .bar {
     height: 100%;
     position: relative;
     float: left;
-    transition: 0.6s ease;
-    &:hover {
-      z-index: 10;
-      cursor: pointer;
-      box-shadow: 0 0 4px #000c;
-    }
+    transition: 0.3s ease;
   }
 
   .used {
-    background-color: rgb(50,197,233);
+    background-color: #2477ff;
     color: white;
     &:hover {
-      background-color: rgb(55,216,255);
+      background-color: lighten(#2477ff, 10%);
     }
   }
 
   .app {
-    background-color: rgb(255,159,127);
+    background-color: #e49400;
     &:hover {
-      background-color: rgb(255,174,139);
+      background-color: lighten(#e49400, 10%);
     }
   }
 
   .caption {
-    left: 0.6rem;
-    line-height: 1.7;
+    left: 1rem;
     position: relative;
   }
+
+  & + & {
+    margin-top: 0.6rem;
+  }
 }
 
 </style>
\ No newline at end of file
diff --git a/packages/plugin-status/client/views/home/load-chart.vue b/packages/plugin-status/client/views/home/load-chart.vue
new file mode 100644
index 0000000000..82533f02ff
--- /dev/null
+++ b/packages/plugin-status/client/views/home/load-chart.vue
@@ -0,0 +1,13 @@
+<template>
+  <k-card class="load-chart" title="负载状态">
+    <load-bar title="CPU" :rate="profile.cpu"/>
+    <load-bar title="内存" :rate="profile.memory"/>
+  </k-card>
+</template>
+
+<script setup lang="ts">
+
+import LoadBar from './load-bar.vue'
+import { profile } from '~/client'
+
+</script>
diff --git a/packages/plugin-status/client/components/word-cloud.vue b/packages/plugin-status/client/views/home/word-cloud.vue
similarity index 76%
rename from packages/plugin-status/client/components/word-cloud.vue
rename to packages/plugin-status/client/views/home/word-cloud.vue
index 374d9ca148..917d40e357 100644
--- a/packages/plugin-status/client/components/word-cloud.vue
+++ b/packages/plugin-status/client/views/home/word-cloud.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-card class="frameless word-cloud" v-if="status.questions" shadow="hover">
+  <k-card class="frameless word-cloud" v-if="stats.questions">
     <template #header>
       问答日均触发次数
       <el-button class="refresh" @click="refresh" type="text">刷新</el-button>
@@ -8,13 +8,13 @@
     <div class="footer">
       <p>显示的次数为实际触发次数。不考虑重定向问答和指令调用。</p>
     </div>
-  </el-card>
+  </k-card>
 </template>
 
 <script lang="ts" setup>
 
-import type { Payload } from '~/server'
-import { defineProps, computed, ref } from 'vue'
+import { stats } from '~/client'
+import { computed, ref } from 'vue'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { TooltipComponent } from 'echarts/components'
@@ -23,12 +23,10 @@ import 'echarts-wordcloud'
 
 use([CanvasRenderer, TooltipComponent])
 
-const props = defineProps<{ status: Payload }>()
-
-const questions = ref(props.status.questions)
+const questions = ref(stats.value.questions)
 
 function refresh() {
-  questions.value = props.status.questions
+  questions.value = stats.value.questions
 }
 
 const option = computed(() => ({
diff --git a/packages/plugin-status/client/views/layout/index.vue b/packages/plugin-status/client/views/layout/index.vue
new file mode 100644
index 0000000000..7e7df29cf7
--- /dev/null
+++ b/packages/plugin-status/client/views/layout/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <template v-if="!frameless">
+    <navbar/>
+    <sidebar/>
+  </template>
+  <main :class="{ frameless }">
+    <router-view v-if="loaded"/>
+  </main>
+</template>
+
+<script lang="ts" setup>
+
+import * as client from '~/client'
+import Navbar from './navbar.vue'
+import Sidebar from './sidebar.vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const frameless = computed(() => route.meta.frameless)
+const loaded = computed(() => (route.meta.require || []).every((key) => client[key].value))
+
+</script>
+
+<style lang="scss">
+
+@import '~/variables';
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: rgba(244, 244, 245, .6);
+  overflow-x: hidden;
+  background: radial-gradient(farthest-side ellipse at 10% 0, #333867, #17193b);
+  background-attachment: fixed;
+  position: relative;
+}
+
+a {
+  color: $default;
+  text-decoration: none;
+}
+
+main {
+  margin: $navbarHeight 0;
+  padding: 0 $mainPadding;
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  right: 0;
+  left: $sidebarWidth;
+}
+
+main.frameless {
+  margin: 0;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+::-webkit-scrollbar {
+  height: 100%;
+  width: 0.6rem;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 0.6rem;
+  background: #fff4;
+  &:hover {
+    background: #fff8;
+  }
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 0.6rem;
+  box-shadow: inset 0 0 6px #000b;
+}
+
+</style>
diff --git a/packages/plugin-status/client/views/layout/navbar.vue b/packages/plugin-status/client/views/layout/navbar.vue
new file mode 100644
index 0000000000..e55917ac32
--- /dev/null
+++ b/packages/plugin-status/client/views/layout/navbar.vue
@@ -0,0 +1,63 @@
+<template>
+  <nav>
+    <span class="title">Koishi 控制台</span>
+    <span class="right">
+      <template v-if="user">
+        <router-link to="/profile">{{ user.name }}<i class="fas fa-user-circle"/></router-link>
+        <el-button type="text" @click="logout">登出<i class="fas fa-sign-in-alt"/></el-button>
+      </template>
+      <template v-else>
+        <router-link to="/login">登录<i class="fas fa-sign-in-alt"/></router-link>
+      </template>
+    </span>
+  </nav>
+</template>
+
+<script lang="ts" setup>
+
+import { user } from '~/client'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+async function logout() {
+  await router.push('/login')
+  user.value = null
+}
+
+</script>
+
+<style lang="scss">
+
+nav {
+  padding: 1rem 2rem;
+  line-height: 2rem;
+
+  .title {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: bold;
+    color: rgba(244, 244, 245, .8);
+  }
+
+  .right {
+    font-size: 1.05rem;
+    float: right;
+
+    i {
+      margin-left: 0.4rem;
+    }
+
+    > * + * {
+      margin-left: 1rem;
+    }
+  }
+
+  .el-button {
+    font-size: 1.05rem !important;
+    min-height: auto !important;
+    padding: 0 !important;
+  }
+}
+
+</style>
diff --git a/packages/plugin-status/client/views/layout/sidebar.vue b/packages/plugin-status/client/views/layout/sidebar.vue
new file mode 100644
index 0000000000..6489e947a8
--- /dev/null
+++ b/packages/plugin-status/client/views/layout/sidebar.vue
@@ -0,0 +1,71 @@
+<template>
+  <aside>
+    <ul>
+      <template v-for="(route, index) in $router.getRoutes()" :key="index">
+        <li v-if="!route.meta.hidden" :class="{ current: route.name === $route.name }">
+          <router-link :to="route.path">
+            <i :class="`fas fa-${route.meta.icon}`"/>
+            {{ route.name }}
+          </router-link>
+        </li>
+      </template>
+    </ul>
+  </aside>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style lang="scss">
+
+@import '../../index.scss';
+
+aside {
+  margin: 0 1rem;
+  position: absolute;
+  top: $navbarHeight;
+  width: $sidebarWidth - 1rem;
+
+  ul {
+    list-style: none;
+    width: 100%;
+    padding-left: 0;
+    margin: 0;
+  }
+
+  li {
+    border-radius: 0.5rem;
+    transition: 0.3s ease;
+  }
+
+  i {
+    width: 1.5rem;
+    margin-right: 0.5rem;
+    text-align: center;
+  }
+
+  li a {
+    display: block;
+    font-size: 1.05rem;
+    text-decoration: none;
+    cursor: pointer;
+    color: rgba(244, 244, 245, .6);
+    line-height: 3rem;
+    padding: 0 1rem;
+    transition: 0.3s ease;
+  }
+
+  li:hover {
+    background-color: rgba(4, 6, 32, .24);
+    a {
+      color: rgba(244, 244, 245, .8);
+    }
+  }
+
+  li.current a {
+    font-weight: bolder;
+    color: rgba(244, 244, 245);
+  }
+}
+
+</style>
diff --git a/packages/plugin-status/client/views/login.vue b/packages/plugin-status/client/views/login.vue
new file mode 100644
index 0000000000..bf7271996b
--- /dev/null
+++ b/packages/plugin-status/client/views/login.vue
@@ -0,0 +1,136 @@
+<template>
+  <k-card class="login">
+    <template v-if="data.token">
+      <h1><span>平台账户登录</span></h1>
+      <p class="hint">欢迎你，{{ data.name || 'Koishi 用户' }}！</p>
+      <p class="hint">请用上述账号将下面的验证码私聊发送给任意机器人</p>
+      <p class="token">{{ data.token }}</p>
+      <div class="control">
+        <k-button @click="data.token = null">返回上一步</k-button>
+      </div>
+    </template>
+    <template v-else>
+      <h1>
+        <span :class="{ inactive: config.authType === 1 }" @click="config.authType = 0">平台账户登录</span>
+        /
+        <span :class="{ inactive: config.authType === 0 }" @click="config.authType = 1">用户名密码登录</span>
+      </h1>
+      <template v-if="config.authType === 0">
+        <k-input prefix="at" placeholder="平台名" v-model="config.platform"/>
+        <k-input prefix="user" placeholder="账号" v-model="config.userId" @enter="enter"/>
+        <p class="error" v-if="data.message">{{ data.message }}</p>
+        <div class="control">
+          <k-button @click="$router.back()">返回</k-button>
+          <k-button @click="enter">获取验证码</k-button>
+        </div>
+      </template>
+      <template v-else>
+        <k-input prefix="user" placeholder="用户名" v-model="config.username"/>
+        <k-input prefix="lock" placeholder="密码" v-model="config.password" @enter="login"
+          :type="config.showPass ? 'text' : 'password'"
+          :suffix="config.showPass ? 'eye' : 'eye-slash'"
+          @click-suffix="config.showPass = !config.showPass"
+        />
+        <p class="error" v-if="data.message">{{ data.message }}</p>
+        <div class="control">
+          <k-button @click="$router.back()">返回</k-button>
+          <k-button @click="login">登录</k-button>
+        </div>
+      </template>
+    </template>
+  </k-card>
+</template>
+
+<script lang="ts" setup>
+
+import { ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { send, receive, user, config, sha256 } from '~/client'
+
+interface LoginData {
+  token?: string
+  name?: string
+  message?: string
+}
+
+const data = ref<LoginData>({})
+const router = useRouter()
+
+receive('login', body => data.value = body)
+
+watch(user, (value) => {
+  if (!value) return
+  router.push('/profile')
+})
+
+let timestamp = 0
+
+async function enter() {
+  const now = Date.now()
+  if (now < timestamp) return
+  const { platform, userId } = config.value
+  if (!platform || !userId) return
+  timestamp = now + 1000
+  send('token', { platform, userId })
+}
+
+async function login() {
+  const { username, password } = config.value
+  send('login', { username, password: await sha256(password) })
+}
+
+</script>
+
+<style lang="scss">
+
+section.login {
+  max-width: 600px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  .k-card-body {
+    padding: 3rem 0 !important;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+    margin: 2.5rem auto;
+    cursor: default;
+
+    span {
+      transition: 0.3s ease;
+    }
+
+    span.inactive:hover {
+      cursor: pointer;
+      color: rgba(244, 244, 245, .8);
+    }
+
+    span:not(.inactive) {
+      color: rgba(244, 244, 245);
+    }
+  }
+
+  .token {
+    font-weight: bold;
+  }
+
+  .k-input {
+    display: block;
+    max-width: 400px;
+    margin: 1rem auto;
+  }
+
+  .control {
+    margin: 2.5rem auto;
+  }
+
+  .k-button {
+    width: 8rem;
+    margin: 0 1rem;
+  }
+}
+
+</style>
diff --git a/packages/plugin-status/client/views/plugins/index.vue b/packages/plugin-status/client/views/plugins/index.vue
new file mode 100644
index 0000000000..160b5e198b
--- /dev/null
+++ b/packages/plugin-status/client/views/plugins/index.vue
@@ -0,0 +1,14 @@
+<template>
+  <k-card title="插件列表">
+    <ul class="plugin-list">
+      <plugin-view :data="data" v-for="(data, index) in registry.plugins" :key="index"/>
+    </ul>
+  </k-card>
+</template>
+
+<script setup lang="ts">
+
+import PluginView from './plugin-view.vue'
+import { registry } from '~/client'
+
+</script>
diff --git a/packages/plugin-status/client/components/plugin-view.vue b/packages/plugin-status/client/views/plugins/plugin-view.vue
similarity index 98%
rename from packages/plugin-status/client/components/plugin-view.vue
rename to packages/plugin-status/client/views/plugins/plugin-view.vue
index eca9e76f7d..a0dba86fad 100644
--- a/packages/plugin-status/client/components/plugin-view.vue
+++ b/packages/plugin-status/client/views/plugins/plugin-view.vue
@@ -27,7 +27,7 @@ const state = computed(() => {
 
 <style lang="scss">
 
-@import '../index.scss';
+@import '../../index.scss';
 
 :not(.has-children) > .el-icon-caret-right {
   font-size: 16px !important;
diff --git a/packages/plugin-status/client/views/profile.vue b/packages/plugin-status/client/views/profile.vue
new file mode 100644
index 0000000000..b2bb50a437
--- /dev/null
+++ b/packages/plugin-status/client/views/profile.vue
@@ -0,0 +1,35 @@
+<template>
+  <k-card title="基本资料">
+    <p>用户名：{{ user.name }}</p>
+    <p>权限等级：{{ user.authority }}</p>
+  </k-card>
+  <k-card title="设置密码">
+    <k-input v-model="password" @enter="enter"
+      :type="config.showPass ? 'text' : 'password'"
+      :suffix="config.showPass ? 'eye' : 'eye-slash'"
+      @click-suffix="config.showPass = !config.showPass"
+    />
+    <p>
+      <k-button type="danger" solid :disabled="!password" @click="enter">应用更改</k-button>
+    </p>
+  </k-card>
+</template>
+
+<script lang="ts" setup>
+
+import { user, config, send, sha256 } from '~/client'
+import { ref } from 'vue'
+
+const password = ref(config.value.password)
+
+async function enter() {
+  if (!password.value) return
+  const { id, token } = user.value
+  send('password', { id, token, password: await sha256(password.value) })
+  config.value.password = password.value
+}
+
+</script>
+
+<style lang="scss">
+</style>
diff --git a/packages/plugin-status/client/views/sandbox.vue b/packages/plugin-status/client/views/sandbox.vue
new file mode 100644
index 0000000000..674a3effeb
--- /dev/null
+++ b/packages/plugin-status/client/views/sandbox.vue
@@ -0,0 +1,100 @@
+<template>
+  <k-card class="sandbox">
+    <div class="history" ref="panel">
+      <p v-for="({ from, content }, index) in messages" :key="index" :class="from">
+        {{ content }}
+      </p>
+    </div>
+    <k-input v-model="text" @enter="onEnter"></k-input>
+  </k-card>
+</template>
+
+<script lang="ts" setup>
+
+import { ref, reactive, nextTick } from 'vue'
+import { send, receive, user } from '~/client'
+
+interface Message {
+  from: 'user' | 'bot'
+  content: string
+}
+
+const text = ref('')
+const panel = ref<Element>(null)
+const messages = reactive<Message[]>([])
+
+function addMessage(from: 'user' | 'bot', content: string) {
+  messages.push({ from, content })
+  const { scrollTop, clientHeight, scrollHeight } = panel.value
+  if (Math.abs(scrollTop + clientHeight - scrollHeight) < 1) {
+    nextTick(scrollToBottom)
+  }
+}
+
+function scrollToBottom() {
+  panel.value.scrollTop = panel.value.scrollHeight - panel.value.clientHeight
+}
+
+function onEnter() {
+  if (!text.value) return
+  addMessage('user', text.value)
+  const { token, id } = user.value
+  send('sandbox', { token, id, content: text.value })
+  text.value = ''
+}
+
+receive('sandbox', (data) => {
+  addMessage('bot', data)
+})
+
+</script>
+
+<style lang="scss">
+
+.sandbox {
+  height: 100%;
+  position: relative;
+
+  .history {
+    position: absolute;
+    top: 2rem;
+    left: 2rem;
+    right: 2rem;
+    bottom: 6rem;
+    overflow-x: visible;
+    overflow-y: auto;
+  }
+
+  p {
+    padding-left: 1rem;
+    white-space: break-spaces;
+    color: rgba(244, 244, 245, .8);
+  }
+
+  p:first-child {
+    margin-top: 0;
+  }
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  p.user::before {
+    content: '>';
+    position: absolute;
+    left: -.1rem;
+  }
+  p.bot::before {
+    content: '<';
+    position: absolute;
+    left: -.1rem;
+  }
+
+  .k-input {
+    position: absolute;
+    bottom: 2rem;
+    left: 2rem;
+    right: 2rem;
+  }
+}
+
+</style>
diff --git a/packages/plugin-status/package.json b/packages/plugin-status/package.json
index 18f342abbc..57eb1cd0fd 100644
--- a/packages/plugin-status/package.json
+++ b/packages/plugin-status/package.json
@@ -1,7 +1,7 @@
 {
   "name": "koishi-plugin-status",
   "description": "Show Status of Koishi",
-  "version": "4.0.0-alpha.0",
+  "version": "4.0.0-alpha.1",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [
@@ -28,14 +28,15 @@
     "status"
   ],
   "peerDependencies": {
-    "koishi-core": "^3.2.0"
+    "koishi-core": "^3.2.1"
   },
   "devDependencies": {
-    "koishi-plugin-mongo": "^2.0.0",
-    "koishi-plugin-mysql": "^3.0.0",
+    "koishi-plugin-mongo": "^2.1.0",
+    "koishi-plugin-mysql": "^3.1.0",
     "koishi-test-utils": "^6.0.0-beta.10"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.2",
     "@types/ws": "^7.4.0",
     "@vitejs/plugin-vue": "^1.1.5",
     "@vue/compiler-sfc": "^3.0.7",
@@ -47,6 +48,7 @@
     "vite": "^2.0.5",
     "vue": "^3.0.7",
     "vue-echarts": "^6.0.0-rc.3",
+    "vue-router": "^4.0.5",
     "ws": "^7.4.3"
   }
 }
diff --git a/packages/plugin-status/server/adapter.ts b/packages/plugin-status/server/adapter.ts
new file mode 100644
index 0000000000..0be259d370
--- /dev/null
+++ b/packages/plugin-status/server/adapter.ts
@@ -0,0 +1,146 @@
+import { Adapter, Bot, BotOptions, Context, Logger, omit, pick, Random, Session, Time, User } from 'koishi-core'
+import Profile from './profile'
+import WebSocket from 'ws'
+
+const logger = new Logger('status')
+const states: Record<string, [string, number, WebBot]> = {}
+
+const TOKEN_TIMEOUT = Time.minute * 10
+
+export class WebBot extends Bot<'sandbox'> {
+  adapter: WebAdapter
+
+  constructor(adapter: WebAdapter, options: BotOptions) {
+    super(adapter, options)
+    Profile.initBot(this)
+  }
+
+  async sendMessage(channelId: string, content: string) {
+    this._send('sandbox', content)
+    return Random.uuid()
+  }
+
+  // websocket api
+
+  _send(type: string, body?: any) {
+    this.socket.send(JSON.stringify({ type, body }))
+  }
+
+  async $token({ platform, userId }) {
+    const user = await this.app.database.getUser(platform, userId, ['name'])
+    if (!user) return this._send('login', { message: '找不到此账户。' })
+    const id = `${platform}:${userId}`
+    const token = Random.uuid()
+    const expire = Date.now() + TOKEN_TIMEOUT
+    states[id] = [token, expire, this]
+    setTimeout(() => {
+      if (states[id]?.[1] > Date.now()) delete states[id]
+    }, TOKEN_TIMEOUT)
+    this._send('login', { token, name: user.name })
+  }
+
+  async _validate<T extends User.Field>(id: string, token: string, fields: T[] = []) {
+    const user = await this.app.database.getUser('id', id, ['token', 'expire', ...fields])
+    if (token !== user.token || user.expire <= Date.now()) {
+      this._send('expire')
+      return
+    }
+    return user
+  }
+
+  async $password({ id, token, password }) {
+    const user = await this._validate(id, token, ['password'])
+    if (password === user.password) return
+    await this.app.database.setUser('id', id, { password })
+  }
+
+  async $login({ username, password }) {
+    const user = await this.app.database.getUser('name', username, ['password', 'authority', 'id', 'expire', 'token'])
+    if (!user || user.password !== password) {
+      return this._send('login', { message: '用户名或密码错误。' })
+    }
+    user.token = Random.uuid()
+    user.expire = Date.now() + this.adapter.config.expiration
+    await this.app.database.setUser('name', username, pick(user, ['token', 'expire']))
+    this._send('user', omit(user, ['password']))
+  }
+
+  async $sandbox({ id, token, content }) {
+    const user = await this._validate(id, token, ['name'])
+    const session = new Session(this.app, {
+      platform: 'sandbox',
+      userId: id,
+      content,
+      selfId: this.selfId,
+      type: 'message',
+      subtype: 'private',
+      author: {
+        userId: 'id',
+        username: user.name,
+      },
+    })
+    session.platform = 'id' as never
+    this.adapter.dispatch(session)
+  }
+}
+
+export namespace WebAdapter {
+  export interface Config {
+    path?: string
+    expiration?: number
+  }
+}
+
+export class WebAdapter extends Adapter<'sandbox'> {
+  server: WebSocket.Server
+
+  constructor(ctx: Context, public config: WebAdapter.Config) {
+    super(ctx.app, WebBot)
+    this.server = new WebSocket.Server({
+      path: config.path,
+      server: ctx.app._httpServer,
+    })
+
+    ctx.all().middleware(async (session, next) => {
+      if (session.subtype !== 'private') return next()
+      const state = states[session.uid]
+      if (state && state[0] === session.content) {
+        const user = await session.observeUser(['id', 'name', 'authority', 'token', 'expire'])
+        user.token = Random.uuid()
+        user.expire = Date.now() + config.expiration
+        return state[2]._send('user', user)
+      }
+      return next()
+    }, true)
+  }
+
+  async start() {
+    this.server.on('connection', async (socket) => {
+      const bot = this.create({ type: 'sandbox', selfId: Random.uuid() })
+      bot.socket = socket
+      bot.username = '沙箱机器人'
+      bot.status = Bot.Status.GOOD
+
+      socket.on('close', () => {
+        bot.dispose()
+        for (const id in states) {
+          if (states[id][2] === bot) delete states[id]
+        }
+      })
+
+      socket.on('message', async (data) => {
+        const { type, body } = JSON.parse(data.toString())
+        const method = bot['$' + type]
+        if (method) {
+          method.call(bot, body)
+        } else {
+          logger.info(type, body)
+        }
+      })
+    })
+  }
+
+  stop() {
+    this.server.close()
+  }
+}
diff --git a/packages/plugin-status/server/database.ts b/packages/plugin-status/server/database.ts
deleted file mode 100644
index f1b60081f6..0000000000
--- a/packages/plugin-status/server/database.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { Channel } from 'koishi-core'
-import Statistics from './stats'
-
-import './mongo'
-import './mysql'
-
-export interface ActiveData {
-  allUsers: number
-  activeUsers: number
-  allGroups: number
-  activeGroups: number
-}
-
-export type Activity = Record<number, number>
-export type StatRecord = Record<string, number>
-
-export interface Synchronizer {
-  groups: StatRecord
-  daily: Record<Synchronizer.DailyField, StatRecord>
-  hourly: Record<Synchronizer.HourlyField, number>
-  longterm: Record<Synchronizer.LongtermField, number>
-  addDaily(field: Synchronizer.DailyField, key: string | number): void
-  upload(date: Date): Promise<void>
-  download(date: string): Promise<Synchronizer.Data>
-}
-
-export namespace Synchronizer {
-  export type DailyField = typeof dailyFields[number]
-  export const dailyFields = [
-    'command', 'dialogue', 'botSend', 'botReceive', 'group',
-  ] as const
-
-  export type HourlyField = typeof hourlyFields[number]
-  export const hourlyFields = [
-    'total', 'group', 'private', 'command', 'dialogue',
-  ] as const
-
-  export type LongtermField = typeof longtermFields[number]
-  export const longtermFields = [
-    'message',
-  ] as const
-
-  export interface Data {
-    extension?: Statistics
-    groups: Pick<Channel, 'id' | 'name' | 'assignee'>[]
-    daily: Record<DailyField, StatRecord>[]
-    hourly: ({ time: Date } & Record<HourlyField, number>)[]
-    longterm: ({ time: Date } & Record<LongtermField, number>)[]
-  }
-}
-
-declare module 'koishi-core' {
-  interface User {
-    lastCall: Date
-  }
-
-  interface App {
-    synchronizer: Synchronizer
-  }
-
-  interface Database {
-    getActiveData(): Promise<ActiveData>
-    setChannels(data: Partial<Channel>[]): Promise<void>
-    Synchronizer: new (db: Database) => Synchronizer
-  }
-
-  interface Channel {
-    name: string
-    activity: Activity
-  }
-
-  interface Session {
-    _sendType?: 'command' | 'dialogue'
-  }
-}
-
-Channel.extend(() => ({
-  activity: {},
-}))
diff --git a/packages/plugin-status/server/index.ts b/packages/plugin-status/server/index.ts
index 91b9c0cebd..83b1f00577 100644
--- a/packages/plugin-status/server/index.ts
+++ b/packages/plugin-status/server/index.ts
@@ -1,13 +1,36 @@
-import { Context, App, Argv } from 'koishi-core'
+import { Context, Channel, App, Argv, User } from 'koishi-core'
 import { interpolate, Time } from 'koishi-utils'
-import { ActiveData } from './database'
 import * as WebUI from './webui'
 import Profile from './profile'
-import Statistics from './stats'
+import Statistics, { Synchronizer } from './stats'
+import { WebBot } from './adapter'
 
-export * from './database'
+import './mongo'
+import './mysql'
+
+export type Activity = Record<number, number>
 
 declare module 'koishi-core' {
+  interface App {
+    synchronizer: Synchronizer
+  }
+
+  interface Database {
+    getProfile(): Promise<Profile.Meta>
+    setChannels(data: Partial<Channel>[]): Promise<void>
+    Synchronizer: new (db: Database) => Synchronizer
+  }
+
+  interface Session {
+    _sendType?: 'command' | 'dialogue'
+  }
+
+  namespace Bot {
+    interface Platforms {
+      'sandbox': WebBot
+    }
+  }
+
   interface Bot {
     messageSent: number[]
     messageReceived: number[]
@@ -16,18 +39,34 @@ declare module 'koishi-core' {
   interface EventMap {
     'status/tick'(): void
   }
+
+  interface User {
+    lastCall: Date
+    password: string
+    token: string
+    expire: number
+  }
+
+  interface Channel {
+    name: string
+    activity: Activity
+  }
 }
 
+Channel.extend(() => ({
+  activity: {},
+}))
+
+User.extend(() => ({
+  expire: 0,
+}))
+
 export interface Config extends WebUI.Config {
-  refresh?: number
   format?: string
   formatBot?: string
 }
 
-export interface Status extends Profile, ActiveData {
-  timestamp: number
-  startTime: number
-}
+export interface Status extends Profile {}
 
 type StatusCallback = (this: App, status: Status, config: Config) => void | Promise<void>
 const callbacks: StatusCallback[] = []
@@ -38,11 +77,14 @@ export function extend(callback: StatusCallback) {
 
 extend(async function (status) {
   if (!this.database) return
-  Object.assign(status, await this.database.getActiveData())
+  Object.assign(status, await this.database.getProfile())
 })
 
 const defaultConfig: Config = {
-  refresh: Time.minute,
+  path: '/status',
+  expiration: Time.week,
+  tickInterval: Time.second * 5,
+  refreshInterval: Time.hour,
   // eslint-disable-next-line no-template-curly-in-string
   formatBot: '{{ username }}：{{ code ? `无法连接` : `工作中（${currentRate[0]}/min）` }}',
   format: [
@@ -58,12 +100,18 @@ const defaultConfig: Config = {
 export const name = 'status'
 
 export function apply(ctx: Context, config: Config = {}) {
-  const { refresh, formatBot, format } = { ...defaultConfig, ...config }
+  config = Object.assign(defaultConfig, config)
+  const { path, formatBot, format } = config
 
   ctx.all().on('command', ({ session }: Argv<'lastCall'>) => {
     session.user.lastCall = new Date()
   })
 
+  ctx.router?.get(path, async (koa) => {
+    koa.set('Access-Control-Allow-Origin', '*')
+    koa.body = await getStatus()
+  })
+
   ctx.command('status', '查看机器人运行状态')
     .shortcut('你的状态', { prefix: true })
     .shortcut('你的状况', { prefix: true })
@@ -85,24 +133,13 @@ export function apply(ctx: Context, config: Config = {}) {
       return interpolate(format, status)
     })
 
-  async function _getStatus() {
-    const status = await Profile.from(ctx) as Status
+  async function getStatus() {
+    const status = await Profile.get(ctx, config) as Status
     await Promise.all(callbacks.map(callback => callback.call(ctx.app, status, config)))
-    status.timestamp = timestamp
     return status
   }
 
-  let cachedStatus: Promise<Status>
-  let timestamp: number
-
-  async function getStatus(): Promise<Status> {
-    const now = Date.now()
-    if (now - timestamp < refresh) return cachedStatus
-    timestamp = now
-    return cachedStatus = _getStatus()
-  }
-
-  ctx.plugin(Profile)
-  ctx.plugin(Statistics)
+  ctx.plugin(Profile, config)
+  ctx.plugin(Statistics, config)
   if (config.port) ctx.plugin(WebUI, config)
 }
diff --git a/packages/plugin-status/server/mongo.ts b/packages/plugin-status/server/mongo.ts
index f34ecb675e..5f8ccccf7e 100644
--- a/packages/plugin-status/server/mongo.ts
+++ b/packages/plugin-status/server/mongo.ts
@@ -1,15 +1,88 @@
-import { Database } from 'koishi-core'
-import {} from 'koishi-plugin-mongo'
+import { Database, Logger, Time } from 'koishi-core'
+import type MongoDatabase from 'koishi-plugin-mongo'
+import { RECENT_LENGTH, StatRecord, Synchronizer } from './stats'
+
+const logger = new Logger('status')
+
+declare module 'koishi-plugin-mongo' {
+  interface Tables {
+    'plugin-status': any
+  }
+}
 
 Database.extend('koishi-plugin-mongo', {
-  async getActiveData() {
+  async getProfile() {
     const $gt = new Date(new Date().getTime() - 1000 * 3600 * 24)
-    const [allGroups, activeGroups, allUsers, activeUsers] = await Promise.all([
+    const [allGroups, activeGroups, allUsers, activeUsers, { storageSize }] = await Promise.all([
       this.channel.countDocuments(),
       this.channel.find({ assignee: { $ne: null } }).count(),
       this.user.countDocuments(),
       this.user.find({ lastCall: { $gt } }).count(),
+      this.mongo.db.stats(),
     ])
-    return { allGroups, activeGroups, allUsers, activeUsers }
+    return { allGroups, activeGroups, allUsers, activeUsers, storageSize }
+  },
+
+  async setChannels(data) {
+    await Promise.all(data.map(ch => this.setChannel(ch.type, ch.id, ch)))
+  },
+
+  Synchronizer: class {
+    groups: StatRecord
+    daily: any
+    hourly: Record<Synchronizer.HourlyField, number>
+    longterm: Record<Synchronizer.LongtermField, number>
+
+    constructor(private db: MongoDatabase) {
+      this.reset()
+    }
+
+    reset() {
+      this.hourly = Object.fromEntries(Synchronizer.hourlyFields.map(i => [i, 0])) as any
+      this.daily = {}
+      this.longterm = Object.fromEntries(Synchronizer.longtermFields.map(i => [i, 0])) as any
+      this.groups = {}
+    }
+
+    addDaily(field: Synchronizer.DailyField, key: string | number) {
+      if (!this.daily[field]) this.daily[field] = {}
+      const stat: Record<string, number> = this.daily[field]
+      stat[key] = (stat[key] || 0) + 1
+    }
+
+    async upload(date: Date): Promise<void> {
+      logger.debug(this.hourly, this.daily, this.longterm, this.groups)
+      const coll = this.db.collection('plugin-status')
+      const _date = new Date(date)
+      _date.setMinutes(0)
+      _date.setSeconds(0)
+      _date.setMilliseconds(0)
+      await coll.updateOne({ type: 'hourly', time: _date }, { $inc: this.hourly }, { upsert: true })
+      _date.setHours(0)
+      const $inc = {}
+      for (const key in this.daily) {
+        for (const subkey in this.daily[key]) {
+          $inc[`${key}.${subkey}`] = this.daily[key][subkey]
+        }
+      }
+      if (Object.keys($inc).length) await coll.updateOne({ type: 'daily', time: _date }, { $inc }, { upsert: true })
+      await coll.updateOne({ type: 'longterm', time: _date }, { $inc: this.longterm }, { upsert: true })
+      for (const id in this.groups) {
+        await this.db.channel.updateOne({ id }, { $inc: { ['activity.' + Time.getDateNumber(date)]: this.groups[id] } } as any)
+      }
+      this.reset()
+      logger.debug('stats updated')
+    }
+
+    async download(date: Date) {
+      const time = { $lt: new Date(date) }
+      const coll = this.db.collection('plugin-status')
+      const hourly = await coll.find({ type: 'hourly', time }).sort({ time: -1 }).limit(24 * RECENT_LENGTH).toArray()
+      const daily = await coll.find({ type: 'daily', time }).sort({ time: -1 }).limit(RECENT_LENGTH).toArray()
+      const longterm = await coll.find({ type: 'longterm', time }).sort({ time: -1 }).toArray()
+      const groups = await this.db.channel.find({}).project({ type: 1, pid: 1, name: 1, assignee: 1 })
+        .map(data => ({ ...data, id: `${data.type}:${data.pid}` })).toArray()
+      return { daily, hourly, longterm, groups }
+    }
   },
 })
diff --git a/packages/plugin-status/server/mysql.ts b/packages/plugin-status/server/mysql.ts
index 8da798902c..eec49d1819 100644
--- a/packages/plugin-status/server/mysql.ts
+++ b/packages/plugin-status/server/mysql.ts
@@ -1,6 +1,5 @@
 import { Database, Logger, Time } from 'koishi-core'
-import { StatRecord, Synchronizer } from './database'
-import { RECENT_LENGTH } from './stats'
+import { StatRecord, Synchronizer, RECENT_LENGTH } from './stats'
 import MysqlDatabase from 'koishi-plugin-mysql'
 
 const logger = new Logger('status')
@@ -110,14 +109,15 @@ namespace Stat {
 }
 
 Database.extend('koishi-plugin-mysql', {
-  async getActiveData() {
-    const [[{ activeUsers }], [{ allUsers }], [{ activeGroups }], [{ allGroups }]] = await this.query([
+  async getProfile() {
+    const [[{ activeUsers }], [{ allUsers }], [{ activeGroups }], [{ allGroups }], [{ storageSize }]] = await this.query([
       'SELECT COUNT(*) as activeUsers FROM `user` WHERE CURRENT_TIMESTAMP() - `lastCall` < 1000 * 3600 * 24',
       'SELECT COUNT(*) as allUsers FROM `user`',
       'SELECT COUNT(*) as activeGroups FROM `channel` WHERE `assignee`',
       'SELECT COUNT(*) as allGroups FROM `channel`',
+      'SELECT SUM(DATA_LENGTH) as storageSize from information_schema.TABLES',
     ])
-    return { activeUsers, allUsers, activeGroups, allGroups }
+    return { activeUsers, allUsers, activeGroups, allGroups, storageSize }
   },
 
   async setChannels(data) {
@@ -158,13 +158,14 @@ Database.extend('koishi-plugin-mysql', {
       await this.db.query(sqls)
     }
 
-    async download(date: string) {
+    async download(date: Date) {
+      const dateString = date.toLocaleDateString()
       const [daily, hourly, longterm, groups] = await this.db.query([
         'SELECT * FROM `stats_daily` WHERE `time` < DATE(?) ORDER BY `time` DESC LIMIT ?',
         'SELECT * FROM `stats_hourly` WHERE `time` < DATE(?) ORDER BY `time` DESC LIMIT ?',
         'SELECT * FROM `stats_longterm` WHERE `time` < DATE(?) ORDER BY `time` DESC',
         'SELECT `id`, `name`, `assignee` FROM `channel`',
-      ], [date, RECENT_LENGTH, date, 24 * RECENT_LENGTH, date])
+      ], [dateString, RECENT_LENGTH, dateString, 24 * RECENT_LENGTH, dateString])
       return { daily, hourly, longterm, groups }
     }
   },
@@ -172,6 +173,9 @@ Database.extend('koishi-plugin-mysql', {
 
 Database.extend('koishi-plugin-mysql', ({ tables, Domain }) => {
   tables.user.lastCall = 'timestamp'
+  tables.user.password = 'varchar(64)'
+  tables.user.token = 'varchar(64)'
+  tables.user.expire = 'bigint unsigned default 0'
   tables.channel.name = 'varchar(50)'
   tables.channel.activity = new Domain.Json()
 })
diff --git a/packages/plugin-status/server/profile.ts b/packages/plugin-status/server/profile.ts
index b9b57bb194..274b55b413 100644
--- a/packages/plugin-status/server/profile.ts
+++ b/packages/plugin-status/server/profile.ts
@@ -1,5 +1,4 @@
 import { Bot, Context, Platform } from 'koishi-core'
-import { Time } from 'koishi-utils'
 import { cpus } from 'os'
 import { mem } from 'systeminformation'
 
@@ -50,24 +49,23 @@ export interface BotData {
   platform: Platform
   code: Bot.Status
   currentRate: MessageRate
-  recentRate?: MessageRate
 }
 
-export namespace BotData {
-  function accumulate(record: number[]) {
-    return record.slice(1).reduce((prev, curr) => prev + curr, 0)
-  }
+function accumulate(record: number[]) {
+  return record.slice(1).reduce((prev, curr) => prev + curr, 0)
+}
 
-  export const from = async (bot: Bot) => ({
+export async function BotData(bot: Bot) {
+  return {
     platform: bot.platform,
     selfId: bot.selfId,
     username: bot.username,
     code: await bot.getStatus(),
     currentRate: [accumulate(bot.messageSent), accumulate(bot.messageReceived)],
-  } as BotData)
+  } as BotData
 }
 
-export interface Profile {
+export interface Profile extends Profile.Meta {
   bots: BotData[]
   memory: LoadRate
   cpu: LoadRate
@@ -75,20 +73,44 @@ export interface Profile {
 
 export namespace Profile {
   export interface Config {
-    tick?: number
+    tickInterval?: number
+    refreshInterval?: number
+  }
+
+  export interface Meta {
+    allUsers: number
+    activeUsers: number
+    allGroups: number
+    activeGroups: number
+    storageSize: number
   }
 
-  export async function from(ctx: Context) {
+  export async function get(ctx: Context, config: Config) {
     const [memory, bots] = await Promise.all([
       memoryRate(),
-      Promise.all(ctx.bots.map(BotData.from)),
+      Promise.all(ctx.bots.filter(bot => bot.platform !== 'sandbox').map(BotData)),
     ])
     const cpu: LoadRate = [appRate, usedRate]
-    return { bots, memory, cpu } as Profile
+    return { bots, memory, cpu, ...await getMeta(ctx, config) } as Profile
+  }
+
+  let timestamp = 0
+  let cachedMeta: Promise<Meta>
+
+  async function getMeta(ctx: Context, config: Config) {
+    const next = Date.now() + config.refreshInterval
+    if (timestamp > next) return cachedMeta
+    timestamp = next
+    return cachedMeta = ctx.database.getProfile()
+  }
+
+  export function initBot(bot: Bot) {
+    bot.messageSent = new Array(61).fill(0)
+    bot.messageReceived = new Array(61).fill(0)
   }
 
   export function apply(ctx: Context, config: Config = {}) {
-    const { tick = 5 * Time.second } = config
+    const { tickInterval } = config
 
     ctx.all().before('send', (session) => {
       session.bot.messageSent[0] += 1
@@ -99,10 +121,7 @@ export namespace Profile {
     })
 
     ctx.on('connect', async () => {
-      ctx.bots.forEach((bot) => {
-        bot.messageSent = new Array(61).fill(0)
-        bot.messageReceived = new Array(61).fill(0)
-      })
+      ctx.bots.forEach(initBot)
 
       ctx.setInterval(() => {
         updateCpuUsage()
@@ -113,7 +132,7 @@ export namespace Profile {
           messageReceived.splice(-1, 1)
         })
         ctx.emit('status/tick')
-      }, tick)
+      }, tickInterval)
     })
   }
 }
diff --git a/packages/plugin-status/server/stats.ts b/packages/plugin-status/server/stats.ts
index 982e6724ea..3bdf804f70 100644
--- a/packages/plugin-status/server/stats.ts
+++ b/packages/plugin-status/server/stats.ts
@@ -1,9 +1,42 @@
-import { Context, Channel, noop, Session, Logger, Bot, Platform } from 'koishi'
+import { Context, Channel, noop, Session, Logger, Bot, Platform, Time } from 'koishi'
 import {} from 'koishi-plugin-teach'
-import { Synchronizer } from './database'
-import Profile from './profile'
 
-type StatRecord = Record<string, number>
+export type StatRecord = Record<string, number>
+
+export interface Synchronizer {
+  groups: StatRecord
+  daily: Record<Synchronizer.DailyField, StatRecord>
+  hourly: Record<Synchronizer.HourlyField, number>
+  longterm: Record<Synchronizer.LongtermField, number>
+  addDaily(field: Synchronizer.DailyField, key: string | number): void
+  upload(date: Date): Promise<void>
+  download(date: Date): Promise<Synchronizer.Data>
+}
+
+export namespace Synchronizer {
+  export type DailyField = typeof dailyFields[number]
+  export const dailyFields = [
+    'command', 'dialogue', 'botSend', 'botReceive', 'group',
+  ] as const
+
+  export type HourlyField = typeof hourlyFields[number]
+  export const hourlyFields = [
+    'total', 'group', 'private', 'command', 'dialogue',
+  ] as const
+
+  export type LongtermField = typeof longtermFields[number]
+  export const longtermFields = [
+    'message',
+  ] as const
+
+  export interface Data {
+    extension?: Statistics
+    groups: Pick<Channel, 'id' | 'name' | 'assignee'>[]
+    daily: Record<DailyField, StatRecord>[]
+    hourly: ({ time: Date } & Record<HourlyField, number>)[]
+    longterm: ({ time: Date } & Record<LongtermField, number>)[]
+  }
+}
 
 export const RECENT_LENGTH = 5
 
@@ -40,6 +73,8 @@ interface Statistics {
   hours: StatRecord[]
   questions: QuestionData[]
   groups: GroupData[]
+  botSend: StatRecord
+  botReceive: StatRecord
 }
 
 const REFRESH_INTERVAL = 60000
@@ -57,9 +92,9 @@ async function upload(sync: Synchronizer, forced = false) {
   }
 }
 
-async function download(ctx: Context, date: string) {
+async function download(ctx: Context, date: Date) {
   const data = await ctx.app.synchronizer.download(date)
-  const extension = data.extension = {} as Statistics
+  const extension = {} as Statistics
   const { daily, hourly, longterm, groups } = data
 
   // history
@@ -68,8 +103,10 @@ async function download(ctx: Context, date: string) {
     extension.history[stat.time.toLocaleDateString('zh-CN')] = stat.message
   })
 
-  // command
+  // command & bot
   extension.commands = average(daily.map(data => data.command))
+  extension.botSend = average(daily.map(stat => stat.botSend))
+  extension.botReceive = average(daily.map(stat => stat.botReceive))
 
   // group
   const groupSet = new Set<string>()
@@ -83,7 +120,7 @@ async function download(ctx: Context, date: string) {
     const groups = await bot.getGroupList()
     for (const { groupId, groupName: name } of groups) {
       const id = `${bot.platform}:${groupId}`
-      if (!messageMap[id] || groupSet.has(id)) continue
+      if (!messageMap[id] || !groupMap[id] || groupSet.has(id)) continue
       groupSet.add(id)
       const { name: oldName, assignee } = groupMap[id]
       if (name !== oldName) updateList.push({ id, name })
@@ -108,7 +145,7 @@ async function download(ctx: Context, date: string) {
         name: name || key,
         value: messageMap[key],
         last: daily[0].group[key],
-        assignee: ctx.bots[assignee].selfId,
+        assignee: ctx.bots[`${platform}:${assignee}`]?.selfId || '',
       })
     }
   }
@@ -122,7 +159,7 @@ async function download(ctx: Context, date: string) {
   // dialogue
   if (ctx.database.getDialoguesById) {
     const dialogueMap = average(daily.map(data => data.dialogue))
-    const dialogues = await ctx.database.getDialoguesById(Object.keys(dialogueMap) as any, ['id', 'original'])
+    const dialogues = await ctx.database.getDialoguesById(Object.keys(dialogueMap).map(i => +i), ['id', 'original'])
     const questionMap: Record<string, QuestionData> = {}
     for (const dialogue of dialogues) {
       const { id, original: name } = dialogue
@@ -139,7 +176,7 @@ async function download(ctx: Context, date: string) {
     extension.questions = Object.values(questionMap)
   }
 
-  return data
+  return extension
 }
 
 const send = Session.prototype.send
@@ -150,25 +187,21 @@ Session.prototype.send = function (this: Session, ...args) {
   return send.apply(this, args)
 }
 
+const customTag = Symbol('custom-send')
+Session.prototype.send[customTag] = send
+
 namespace Statistics {
-  let cachedDate: string
-  let cachedData: Promise<Synchronizer.Data>
-
-  export async function patch(ctx: Context, profile: Profile) {
-    const dateString = new Date().toLocaleDateString('zh-CN')
-    if (dateString !== cachedDate) {
-      cachedData = download(ctx, dateString)
-      cachedDate = dateString
+  let cachedDate: number
+  let cachedData: Promise<Statistics>
+
+  export async function get(ctx: Context) {
+    const date = new Date()
+    const dateNumber = Time.getDateNumber(date, date.getTimezoneOffset())
+    if (dateNumber !== cachedDate) {
+      cachedData = download(ctx, date)
+      cachedDate = dateNumber
     }
-    const { extension, daily } = await cachedData
-    Object.assign(profile, extension)
-
-    const botSend = average(daily.map(stat => stat.botSend))
-    const botReceive = average(daily.map(stat => stat.botReceive))
-    profile.bots.forEach((bot) => {
-      const sid = `${bot.platform}:${bot.selfId}`
-      bot.recentRate = [botSend[sid] || 0, botReceive[sid] || 0]
-    })
+    return cachedData
   }
 
   export function apply(ctx: Context) {
@@ -184,6 +217,10 @@ namespace Statistics {
     })
 
     ctx.before('disconnect', async () => {
+      // rollback to default implementation to prevent infinite call stack
+      if (Session.prototype.send[customTag]) {
+        Session.prototype.send = Session.prototype.send[customTag]
+      }
       process.off('SIGINT', handleSigInt)
       await upload(sync, true)
     })
diff --git a/packages/plugin-status/server/webui.ts b/packages/plugin-status/server/webui.ts
index 31be1d1f22..fc569e5448 100644
--- a/packages/plugin-status/server/webui.ts
+++ b/packages/plugin-status/server/webui.ts
@@ -1,19 +1,17 @@
 import { Context, Plugin } from 'koishi-core'
 import { assertProperty } from 'koishi-utils'
 import { resolve } from 'path'
+import { WebAdapter } from './adapter'
 import { createServer, ViteDevServer } from 'vite'
-import WebSocket from 'ws'
 import vuePlugin from '@vitejs/plugin-vue'
 import Profile from './profile'
 import Statistics from './stats'
 
 export { BotData, LoadRate } from './profile'
 
-export interface Config {
-  path?: string
+export interface Config extends WebAdapter.Config, Profile.Config {
   port?: number
   selfUrl?: string
-  layout?: string
 }
 
 export interface PluginData extends Plugin.Meta {
@@ -21,8 +19,11 @@ export interface PluginData extends Plugin.Meta {
   dependencies: string[]
 }
 
-export interface Payload extends Profile, Statistics {
+export { Statistics, Profile }
+
+export interface Registry {
   plugins: PluginData[]
+  pluginCount: number
 }
 
 export const name = 'webui'
@@ -30,15 +31,10 @@ export const name = 'webui'
 export function apply(ctx: Context, config: Config = {}) {
   const root = resolve(__dirname, '../client')
   const koishiPort = assertProperty(ctx.app.options, 'port')
-  const {
-    path = '/status',
-    port = 8080,
-    layout = root + '/app.vue',
-    selfUrl = `ws://localhost:${koishiPort}`,
-  } = config
+  const { path, port, selfUrl = `http://localhost:${koishiPort}` } = config
 
   let vite: ViteDevServer
-  let wsServer: WebSocket.Server
+  let adapter: WebAdapter
   ctx.on('connect', async () => {
     vite = await createServer({
       root,
@@ -46,7 +42,7 @@ export function apply(ctx: Context, config: Config = {}) {
       resolve: {
         alias: {
           '~/client': root,
-          '~/layout': resolve(process.cwd(), layout),
+          '~/variables': root + '/index.scss',
         },
       },
       define: {
@@ -54,21 +50,19 @@ export function apply(ctx: Context, config: Config = {}) {
       },
     })
 
-    wsServer = new WebSocket.Server({
-      path,
-      server: ctx.app._httpServer,
-    })
+    adapter = ctx.app.adapters.sandbox = new WebAdapter(ctx, config)
 
-    wsServer.on('connection', async (socket) => {
-      if (!plugins) updatePlugins()
-      if (!profile) await updateProfile()
-      const data = JSON.stringify({
-        type: 'update',
-        body: { ...profile, plugins },
-      })
-      socket.send(data)
+    adapter.server.on('connection', async (socket) => {
+      function send(type: string, body: any) {
+        socket.send(JSON.stringify({ type, body }))
+      }
+
+      Statistics.get(ctx).then(data => send('stats', data))
+      getProfile().then(data => send('profile', data))
+      send('registry', getRegistry())
     })
 
+    await adapter.start()
     await vite.listen(port)
   })
 
@@ -87,46 +81,44 @@ export function apply(ctx: Context, config: Config = {}) {
     const children = state.children.flatMap(traverse, 1)
     const { name, sideEffect } = state
     if (!name) return children
+    internal.pluginCount += 1
     const dependencies = [...new Set(getDeps(state))]
     return [{ name, sideEffect, children, dependencies }]
   }
 
-  let plugins: PluginData[]
-  let profile: Profile
+  let profile: Promise<Profile>
+  let internal: Registry
 
-  async function broadcast(callback: () => void | Promise<void>) {
-    if (!wsServer?.clients.size) return
-    await callback()
-    const data = JSON.stringify({
-      type: 'update',
-      body: { ...profile, plugins },
-    })
-    wsServer.clients.forEach((socket) => socket.send(data))
+  async function broadcast(type: string, body: any) {
+    if (!adapter?.server.clients.size) return
+    const data = JSON.stringify({ type, body })
+    adapter.server.clients.forEach((socket) => socket.send(data))
   }
 
-  function updatePlugins() {
-    plugins = traverse(null)
+  function getRegistry(forced = false) {
+    if (internal && !forced) return internal
+    internal = { pluginCount: 0 } as Registry
+    internal.plugins = traverse(null)
+    return internal
   }
 
-  async function updateProfile() {
-    profile = await Profile.from(ctx)
-    await Statistics.patch(ctx, profile)
+  function getProfile(forced = false) {
+    if (profile && !forced) return profile
+    return profile = Profile.get(ctx, config)
   }
 
   ctx.on('registry', () => {
-    broadcast(updatePlugins)
+    broadcast('registry', getRegistry(true))
   })
 
-  ctx.on('status/tick', () => {
-    broadcast(updateProfile)
+  ctx.on('status/tick', async () => {
+    broadcast('profile', await getProfile(true))
   })
 
   ctx.before('disconnect', async () => {
     await Promise.all([
       vite?.close(),
-      new Promise<void>((resolve, reject) => {
-        wsServer.close((err) => err ? resolve() : reject(err))
-      }),
+      adapter?.stop(),
     ])
   })
 }
diff --git a/packages/plugin-teach/package.json b/packages/plugin-teach/package.json
index 2767e17845..0d4c3e3a09 100644
--- a/packages/plugin-teach/package.json
+++ b/packages/plugin-teach/package.json
@@ -33,12 +33,12 @@
     "conversation"
   ],
   "peerDependencies": {
-    "koishi-core": "^3.2.0",
-    "koishi-utils": "^4.0.1"
+    "koishi-core": "^3.2.1",
+    "koishi-utils": "^4.0.2"
   },
   "devDependencies": {
-    "koishi-plugin-mongo": "^2.0.0",
-    "koishi-plugin-mysql": "^3.0.0",
+    "koishi-plugin-mongo": "^2.1.0",
+    "koishi-plugin-mysql": "^3.1.0",
     "koishi-test-utils": "^6.0.0-beta.10"
   },
   "dependencies": {
diff --git a/packages/plugin-tools/package.json b/packages/plugin-tools/package.json
index 3cc5cce851..537fa2cf50 100644
--- a/packages/plugin-tools/package.json
+++ b/packages/plugin-tools/package.json
@@ -21,8 +21,8 @@
     "@types/qrcode": "^1.4.0"
   },
   "peerDependencies": {
-    "koishi-core": "^3.2.0",
-    "koishi-utils": "^4.0.1"
+    "koishi-core": "^3.2.1",
+    "koishi-utils": "^4.0.2"
   },
   "dependencies": {
     "axios": "^0.21.1",