diff --git a/plugins/config/client/components/forks.vue b/plugins/config/client/components/forks.vue
new file mode 100644
index 0000000..40a399b
--- /dev/null
+++ b/plugins/config/client/components/forks.vue
@@ -0,0 +1,116 @@
+<template>
+  <el-dialog
+    :model-value="!!dialogFork"
+    @update:model-value="dialogFork = null"
+    class="dialog-config-fork"
+    destroy-on-close>
+    <template #header="{ titleId, titleClass }">
+      <span :id="titleId" :class="titleClass">
+        {{ dialogFork + (local?.workspace ? ' (工作区)' : '') }}
+      </span>
+    </template>
+    <table>
+      <tr v-for="id in plugins.forks[dialogFork]" :key="id">
+        <td class="text-left">
+          <span class="status-light" :class="getStatus(plugins.paths[id])"></span>
+          <span class="path">{{ getFullPath(plugins.paths[id]) }}</span>
+        </td>
+        <td class="text-right">
+          <span class="actions">
+            <span class="action" @click.stop="configure(id)"><k-icon name="arrow-right"></k-icon></span>
+            <span class="action" @click.stop="removeItem(plugins.paths[id])"><k-icon name="delete"></k-icon></span>
+          </span>
+        </td>
+      </tr>
+    </table>
+    <template #footer>
+      <div class="left">
+        <template v-if="plugins.forks[dialogFork]?.length">
+          此插件目前存在 {{ plugins.forks[dialogFork]?.length }} 份配置。
+        </template>
+        <template v-else>
+          此插件尚未被配置。
+        </template>
+      </div>
+      <div class="right">
+        <el-button @click.stop="configure()">添加新配置</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+
+import { computed } from 'vue'
+import { store, send, router } from '@cordisjs/client'
+import { dialogFork, plugins, getStatus, removeItem, Tree } from './utils'
+
+const local = computed(() => store.packages?.[dialogFork.value])
+
+function getLabel(tree: Tree) {
+  return `${tree.label ? `${tree.label} ` : ''}[${tree.path}]`
+}
+
+function getFullPath(tree: Tree) {
+  const path = [getLabel(tree)]
+  while (tree.parent) {
+    tree = tree.parent
+    path.unshift(getLabel(tree))
+  }
+  path.shift()
+  return path.join(' > ')
+}
+
+async function configure(id?: string) {
+  if (!id) {
+    id = await send('manager/add', { name: dialogFork.value, disabled: true }, '')
+  }
+  await router.push('/plugins/' + id)
+  dialogFork.value = null
+}
+
+</script>
+
+<style lang="scss">
+
+.dialog-config-fork {
+  .el-dialog__header .el-dialog__title {
+    font-weight: 500;
+    color: var(--fg1);
+    margin-right: 0.5rem;
+    flex: 0 0 auto;
+  }
+
+  .status-light {
+    margin-right: 0.75rem;
+  }
+
+  .actions {
+    display: flex;
+    gap: 0 0.5rem;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .action {
+    display: inline-flex;
+    width: 1.25rem;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--fg2);
+    transition: var(--color-transition);
+
+    &:hover {
+      color: var(--fg1);
+    }
+  }
+
+  .el-dialog__footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.9em;
+  }
+}
+
+</style>
diff --git a/plugins/config/client/components/global.vue b/plugins/config/client/components/global.vue
new file mode 100644
index 0000000..896e984
--- /dev/null
+++ b/plugins/config/client/components/global.vue
@@ -0,0 +1,23 @@
+<template>
+  <k-form :schema="store.packages[''].runtime.schema" :initial="current.config" v-model="config"></k-form>
+</template>
+
+<script lang="ts" setup>
+
+import { store } from '@cordisjs/client'
+import { computed } from 'vue'
+import { Tree } from './utils'
+
+const props = defineProps<{
+  current: Tree
+  modelValue: any
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const config = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value),
+})
+
+</script>
diff --git a/plugins/config/client/components/group.vue b/plugins/config/client/components/group.vue
new file mode 100644
index 0000000..bdcd29c
--- /dev/null
+++ b/plugins/config/client/components/group.vue
@@ -0,0 +1,29 @@
+<template>
+</template>
+
+<script lang="ts" setup>
+
+import { computed } from 'vue'
+import { Tree } from './utils'
+
+const props = defineProps<{
+  current: Tree
+  modelValue: any
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const config = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value),
+})
+
+</script>
+
+<style lang="scss" scoped>
+
+h2 {
+  font-size: 1.25rem;
+}
+
+</style>
diff --git a/plugins/config/client/components/index.vue b/plugins/config/client/components/index.vue
new file mode 100644
index 0000000..928bcdb
--- /dev/null
+++ b/plugins/config/client/components/index.vue
@@ -0,0 +1,262 @@
+<template>
+  <k-layout menu="config.tree" :menu-data="current">
+    <template #header>
+      <!-- root -->
+      <template v-if="!current">插件配置</template>
+
+      <!-- group -->
+      <template v-else-if="current.children">
+        分组：{{ current.label || current.id }}
+      </template>
+
+      <!-- plugin -->
+      <template v-else>
+        {{ current.label || current.name }} [{{ current.path }}]
+      </template>
+    </template>
+
+    <template #left>
+      <tree-view ref="tree" v-model="path"></tree-view>
+    </template>
+
+    <k-empty v-if="!current">
+      <div>请在左侧选择插件</div>
+    </k-empty>
+    <k-content v-else class="plugin-view" :key="path">
+      <group-settings v-if="current.children" v-model="config" :current="current"></group-settings>
+      <plugin-settings v-else :current="current" v-model="config"></plugin-settings>
+    </k-content>
+
+    <el-dialog
+      v-model="showRemove"
+      title="确认移除"
+      destroy-on-close
+      @closed="remove = null"
+    >
+      <template v-if="remove">
+        确定要移除{{ remove.children ? `分组 ${remove.label || remove.path}` : `插件 ${remove.label || remove.name}` }} 吗？此操作不可撤销！
+      </template>
+      <template #footer>
+        <el-button @click="showRemove = false">取消</el-button>
+        <el-button type="danger" @click="(showRemove = false, removeItem(remove), tree?.activate())">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      v-model="showRename"
+      title="重命名"
+      destroy-on-close
+      @open="handleOpen"
+      @closed="rename = null"
+    >
+      <template v-if="rename">
+        <el-input ref="inputEl" v-model="input" @keydown.enter.stop.prevent="renameItem(rename, input)"/>
+      </template>
+      <template #footer>
+        <el-button @click="showRename = false">取消</el-button>
+        <el-button type="primary" @click="renameItem(rename, input)">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      :model-value="groupCreate !== null"
+      @update:model-value="groupCreate = null"
+      title="创建分组"
+      destroy-on-close
+      @open="handleOpen"
+    >
+      <el-input ref="inputEl" v-model="input" @keydown.enter.stop.prevent="createGroup(input)"/>
+      <template #footer>
+        <el-button @click="groupCreate = null">取消</el-button>
+        <el-button type="primary" @click="createGroup(input)">确定</el-button>
+      </template>
+    </el-dialog>
+  </k-layout>
+</template>
+
+<script setup lang="ts">
+
+import { computed, ref, watch, nextTick } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { clone, message, send, store, useContext, Schema } from '@cordisjs/client'
+import { Tree, hasCoreDeps, current, plugins, removeItem, dialogSelect, dialogFork } from './utils'
+import GroupSettings from './group.vue'
+import TreeView from './tree.vue'
+import PluginSettings from './plugin.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const path = computed<string>({
+  get() {
+    const name = route.path.slice(9)
+    return name in plugins.value.paths ? name : ''
+  },
+  set(name) {
+    if (!(name in plugins.value.paths)) name = ''
+    router.replace('/plugins/' + name)
+  },
+})
+
+const config = ref()
+const input = ref('')
+const inputEl = ref()
+const tree = ref<InstanceType<typeof TreeView>>()
+
+async function handleOpen() {
+  // https://github.com/element-plus/element-plus/issues/15250
+  await nextTick()
+  inputEl.value?.focus()
+}
+
+const remove = ref<Tree>()
+const showRemove = ref(false)
+const rename = ref<Tree>()
+const showRename = ref(false)
+const groupCreate = ref<string>(null)
+
+watch(remove, (value) => {
+  if (value) showRemove.value = true
+})
+
+watch(rename, (value) => {
+  if (value) showRename.value = true
+})
+
+watch(() => plugins.value.paths[path.value], (value) => {
+  current.value = value
+  if (value) config.value = clone(value.config)
+}, { immediate: true })
+
+const ctx = useContext()
+
+ctx.define('config.tree', current)
+
+ctx.action('config.tree.add-plugin', {
+  hidden: ({ config }) => config.tree && !config.tree.children,
+  action: ({ config }) => dialogSelect.value = config.tree,
+})
+
+ctx.action('config.tree.add-group', {
+  hidden: ({ config }) => config.tree && !config.tree.children,
+  action: ({ config }) => {
+    groupCreate.value = config.tree.path
+  },
+})
+
+async function createGroup(label: string) {
+  const id = await send('manager/add', { name: 'cordis/group', label }, groupCreate.value)
+  router.replace('/plugins/' + id)
+  groupCreate.value = null
+}
+
+ctx.action('config.tree.clone', {
+  hidden: ({ config }) => !config.tree || !!config.tree.children,
+  action: async ({ config }) => {
+    const children = config.tree.parent.path
+      ? config.tree.parent.children
+      : plugins.value.data.slice(1)
+    const index = children.findIndex(tree => tree.path === config.tree.path)
+    const id = await send('manager/add', {
+      name: config.tree.name,
+      config: config.tree.config,
+      disabled: true,
+    }, config.tree.parent.id, index + 1)
+    router.replace(`/plugins/${id}`)
+  },
+})
+
+ctx.action('config.tree.manage', {
+  hidden: ({ config }) => !config.tree || !!config.tree.children,
+  action: async ({ config }) => {
+    dialogFork.value = config.tree.name
+  },
+})
+
+ctx.action('config.tree.rename', {
+  disabled: ({ config }) => !config.tree,
+  action: ({ config }) => {
+    input.value = config.tree.label || (config.tree.name === 'group' ? config.tree.path : config.tree.name)
+    rename.value = config.tree
+  },
+})
+
+ctx.action('config.tree.remove', {
+  disabled: ({ config }) => !config.tree || hasCoreDeps(config.tree),
+  action: ({ config }) => remove.value = config.tree,
+})
+
+function checkConfig(name: string) {
+  let schema = store.packages[name]?.runtime.schema
+  if (!schema) return true
+  try {
+    (new Schema(schema))(config.value)
+    return true
+  } catch {
+    message.error('当前配置项不满足约束，请检查配置！')
+    return false
+  }
+}
+
+ctx.action('config.tree.save', {
+  shortcut: 'ctrl+s',
+  disabled: (scope) => !scope?.config?.tree || !['config'].includes(router.currentRoute.value?.meta?.activity.id),
+  action: async ({ config: { tree } }) => {
+    const { disabled } = tree
+    if (!disabled && !checkConfig(tree.name)) return
+    try {
+      await execute(tree, disabled ? 'unload' : 'reload')
+      message.success(disabled ? '配置已保存。' : '配置已重载。')
+    } catch (error) {
+      message.error('操作失败，请检查日志！')
+    }
+  },
+})
+
+ctx.action('config.tree.toggle', {
+  disabled: ({ config }) => !config.tree || hasCoreDeps(config.tree),
+  action: async ({ config: { tree } }) => {
+    const { disabled, name } = tree
+    if (disabled && !checkConfig(tree.name)) return
+    try {
+      await execute(tree, disabled ? 'reload' : 'unload')
+      message.success((name === 'group' ? '分组' : '插件') + (disabled ? '已启用。' : '已停用。'))
+    } catch (error) {
+      message.error('操作失败，请检查日志！')
+    }
+  },
+})
+
+async function execute(tree: Tree, event: 'unload' | 'reload') {
+  await send(`manager/${event}`, tree.id, config.value)
+}
+
+function renameItem(tree: Tree, name: string) {
+  showRename.value = false
+  tree.label = name
+  send('manager/meta', tree.path, { $label: name || null })
+}
+
+</script>
+
+<style lang="scss">
+
+.end {
+  margin-right: 0.5rem;
+}
+
+.config-header {
+  font-size: 1.375rem;
+  margin: 0 0 2rem;
+  line-height: 2rem;
+
+  .k-button {
+    float: right;
+  }
+}
+
+.plugin-view .k-content > *:first-child {
+  margin-top: 0;
+}
+
+</style>
diff --git a/plugins/config/client/components/plugin.vue b/plugins/config/client/components/plugin.vue
new file mode 100644
index 0000000..32e12d6
--- /dev/null
+++ b/plugins/config/client/components/plugin.vue
@@ -0,0 +1,144 @@
+<template>
+  <template v-if="name">
+    <k-comment v-if="!local.runtime">
+      <p>正在加载插件配置……</p>
+    </k-comment>
+    <k-comment v-else-if="local.runtime.failed" type="danger">
+      <p>插件加载失败，这可能是插件本身的问题所致。{{ hint }}</p>
+    </k-comment>
+
+    <k-slot v-else name="plugin-details">
+      <!-- dependency -->
+      <k-slot-item :order="800">
+        <k-slot name="plugin-dependency" single>
+          <k-comment
+            v-for="({ required, active }, name) in env.peer" :key="name"
+            :type="active ? 'success' : required ? 'warning' : 'primary'">
+            <p>
+              {{ required ? '必需' : '可选' }}依赖：{{ name }} ({{ active ? '已加载' : '未加载' }})
+            </p>
+          </k-comment>
+          <k-comment
+            v-for="({ required }, name) in env.using" :key="name"
+            :type="name in store.services ? 'success' : required ? 'warning' : 'primary'">
+            <p>
+              {{ required ? '必需' : '可选' }}服务：{{ name }} ({{ name in store.services ? '已加载' : '未加载' }})
+            </p>
+          </k-comment>
+        </k-slot>
+      </k-slot-item>
+
+      <!-- implements -->
+      <k-slot-item :order="600">
+        <template v-for="name in env.impl" :key="name">
+          <k-comment v-if="name in store.services && current.disabled" type="warning">
+            <p>此插件将会提供 {{ name }} 服务，但此服务已被其他插件实现。</p>
+          </k-comment>
+          <k-comment v-else :type="current.disabled ? 'primary' : 'success'">
+            <p>此插件{{ current.disabled ? '启用后将会提供' : '提供了' }} {{ name }} 服务。</p>
+          </k-comment>
+        </template>
+      </k-slot-item>
+
+      <!-- reusability -->
+      <k-slot-item :order="400">
+        <k-comment v-if="local.runtime.id && !local.runtime.forkable && current.disabled" type="warning">
+          <p>此插件已在运行且不可重用，启用可能会导致非预期的问题。</p>
+        </k-comment>
+        <k-comment v-if="plugins.forks[current.name]?.length > 1" type="primary">
+          <p>此插件存在多份配置，<span class="k-link" @click.stop="dialogFork = name">点击前往管理</span>。</p>
+        </k-comment>
+      </k-slot-item>
+
+      <!-- implements -->
+      <k-slot-item :order="300">
+        <template v-for="(activity, key) in ctx.$router.pages" :key="key">
+          <k-comment type="success" v-if="activity.ctx.extension?.paths.includes(current.path) && !activity.disabled()">
+            <p>
+              <span>此插件提供了页面：</span>
+              <k-activity-link :id="activity.id" />
+            </p>
+          </k-comment>
+        </template>
+      </k-slot-item>
+
+      <!-- usage -->
+      <k-slot-item :order="-200" v-if="local.runtime?.usage">
+        <k-markdown unsafe class="usage" :source="local.runtime?.usage"></k-markdown>
+      </k-slot-item>
+
+      <!-- modifier -->
+      <k-slot-item :order="-600">
+      </k-slot-item>
+
+      <!-- config -->
+      <k-slot-item :order="-1000">
+        <k-comment v-if="!local.runtime.schema" type="warning">
+          <p>此插件未声明配置项，这可能并非预期行为。{{ hint }}</p>
+        </k-comment>
+        <k-form v-else :schema="local.runtime.schema" :initial="current.config" v-model="config">
+          <template #hint>{{ hint }}</template>
+        </k-form>
+      </k-slot-item>
+    </k-slot>
+  </template>
+
+  <template v-else>
+    <k-slot name="plugin-missing" single>
+      <k-comment type="danger">
+        <p>此插件尚未安装。</p>
+      </k-comment>
+    </k-slot>
+  </template>
+</template>
+
+<script lang="ts" setup>
+
+import { store, send, useContext } from '@cordisjs/client'
+import { computed, provide, watch } from 'vue'
+import { envMap, name, plugins, dialogFork, Tree } from './utils'
+
+const props = defineProps<{
+  current: Tree
+  modelValue: any
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const ctx = useContext()
+
+const config = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value),
+})
+
+const env = computed(() => envMap.value[name.value])
+const local = computed(() => store.packages[name.value])
+const hint = computed(() => local.value.workspace ? '请检查插件源代码。' : '请联系插件作者并反馈此问题。')
+
+watch(local, (value) => {
+  if (!value || value.runtime) return
+  send('config/request-runtime', value.name)
+}, { immediate: true })
+
+provide('plugin:name', name)
+provide('plugin:env', env)
+provide('manager.settings.local', local)
+provide('manager.settings.config', config)
+provide('manager.settings.current', computed(() => props.current))
+
+</script>
+
+<style lang="scss">
+
+.plugin-view {
+  .markdown.usage {
+    margin-bottom: 2rem;
+
+    h2 {
+      font-size: 1.25rem;
+    }
+  }
+}
+
+</style>
diff --git a/plugins/config/client/components/select.vue b/plugins/config/client/components/select.vue
new file mode 100644
index 0000000..9f80089
--- /dev/null
+++ b/plugins/config/client/components/select.vue
@@ -0,0 +1,171 @@
+<template>
+  <el-dialog
+    v-if="store.packages"
+    :modelValue="!!dialogSelect"
+    @update:modelValue="dialogSelect = null"
+    class="plugin-select"
+  >
+    <template #header>
+      <slot name="title" :packages="packages">
+        <span class="title">选择插件</span>
+      </slot>
+      <el-input ref="input" v-model="keyword" #suffix>
+        <k-icon name="search"></k-icon>
+      </el-input>
+    </template>
+    <slot name="tabs" :packages="packages"></slot>
+    <div class="content">
+      <el-scrollbar>
+        <div class="package" v-for="({ name, manifest }) in packages" :key="name" @click.stop="configure(name)">
+          <h3>{{ name }}</h3>
+          <k-markdown inline class="desc" :source="tt(manifest.description)"></k-markdown>
+        </div>
+      </el-scrollbar>
+    </div>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+
+import { router, send, store, useI18nText } from '@cordisjs/client'
+import { computed, inject, nextTick, ref, watch } from 'vue'
+import { PackageProvider } from '@cordisjs/plugin-config'
+import { dialogSelect } from './utils'
+
+const tt = useI18nText()
+
+const keyword = ref('')
+const input = ref()
+
+const filter = inject('plugin-select-filter', (data: PackageProvider.Data) => true)
+
+const packages = computed(() => Object.values(store.packages).filter(({ name, shortname }) => {
+  return name && shortname.includes(keyword.value.toLowerCase()) && filter(store.packages[name])
+}))
+
+async function configure(name: string) {
+  const path = dialogSelect.value.path
+  dialogSelect.value = null
+  keyword.value = ''
+  const id = await send('manager/add', { name, disabled: true }, path)
+  router.push('/plugins/' + id)
+}
+
+watch(dialogSelect, async (value) => {
+  if (!value) return
+  await nextTick()
+  await input.value.focus()
+}, { flush: 'post' })
+
+</script>
+
+<style lang="scss">
+
+.plugin-select {
+  .el-dialog__header {
+    margin-right: 0;
+    padding: 12px 20px;
+    border-bottom: 1px solid var(--k-color-divider);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    button {
+      top: 2px;
+    }
+
+    .title {
+      flex: 0 0 auto;
+    }
+
+    .el-input {
+      display: inline-block;
+      width: 220px;
+      height: 2rem;
+    }
+  }
+
+  .el-dialog__body {
+    display: flex;
+    padding: 0;
+    height: 50vh;
+
+    .tabs {
+      width: 7.5rem;
+      border-right: 1px solid var(--k-color-divider);
+      font-size: 15px;
+      flex: 0 0 auto;
+
+      @media screen and (max-width: 768px) {
+        width: 3rem;
+      }
+
+      .el-scrollbar__view {
+        padding: 0.5rem 0;
+      }
+
+      .tab-item {
+        display: flex;
+        align-items: center;
+        height: 2rem;
+        padding: 0 1rem;
+        cursor: pointer;
+        font-size: 0.875rem;
+        justify-content: center;
+        transition: var(--color-transition);
+
+        &:hover {
+          background-color: var(--k-hover-bg);
+        }
+
+        @media screen and (max-width: 768px) {
+          padding: 0 0;
+        }
+
+        .market-icon {
+          width: 1.25rem;
+          height: 1rem;
+        }
+
+        &.active {
+          color: var(--primary);
+        }
+
+        .title {
+          width: 3.5rem;
+          margin-left: 0.5rem;
+          @media screen and (max-width: 768px) {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .content {
+      flex: 1 1 auto;
+
+      .package {
+        padding: 0.5rem 1rem;
+        cursor: pointer;
+        transition: var(--color-transition);
+
+        h3 {
+          font-size: 16px;
+          margin: 0;
+          margin-bottom: 0.25rem;
+        }
+
+        p {
+          margin: 0;
+          font-size: 14px;
+        }
+
+        &:hover {
+          background-color: var(--k-hover-bg);
+        }
+      }
+    }
+  }
+}
+
+</style>
diff --git a/plugins/config/client/components/tree.vue b/plugins/config/client/components/tree.vue
new file mode 100644
index 0000000..e8f77b0
--- /dev/null
+++ b/plugins/config/client/components/tree.vue
@@ -0,0 +1,203 @@
+<template>
+  <el-scrollbar class="plugin-tree" ref="root">
+    <div class="search">
+      <el-input v-model="keyword" #suffix>
+        <k-icon name="search"></k-icon>
+      </el-input>
+    </div>
+    <el-tree
+      ref="tree"
+      node-key="path"
+      :data="plugins.data"
+      :draggable="true"
+      :auto-expand-parent="false"
+      :default-expanded-keys="plugins.expanded"
+      :expand-on-click-node="false"
+      :filter-node-method="filterNode"
+      :props="{ class: getClass }"
+      :allow-drag="allowDrag"
+      :allow-drop="allowDrop"
+      @node-click="handleClick"
+      @node-contextmenu="trigger"
+      @node-drop="handleDrop"
+      @node-expand="handleExpand"
+      @node-collapse="handleCollapse"
+      #="{ node }">
+      <div class="item" :ref="handleItemMount">
+        <div class="label" :title="getLabel(node)">
+          {{ getLabel(node) }}
+        </div>
+        <div class="right">
+          <span v-if="node.data.name" class="status-light" :class="getStatus(node.data)"></span>
+        </div>
+      </div>
+    </el-tree>
+  </el-scrollbar>
+</template>
+
+<script lang="ts" setup>
+
+import { ref, onActivated, nextTick, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { ElScrollbar, ElTree } from 'element-plus'
+import { send, useMenu, store } from '@cordisjs/client'
+import { Tree, getStatus, plugins } from './utils'
+
+const props = defineProps<{
+  modelValue: string
+}>()
+
+const route = useRoute()
+const trigger = useMenu('config.tree')
+
+const emit = defineEmits(['update:modelValue'])
+
+const root = ref<InstanceType<typeof ElScrollbar>>(null)
+const tree = ref<InstanceType<typeof ElTree>>(null)
+const keyword = ref('')
+
+function filterNode(value: string, data: Tree) {
+  return data.name.toLowerCase().includes(keyword.value.toLowerCase())
+}
+
+const isActivating = ref(true)
+
+// This will be called in 3 situations:
+// 1. the component is activated
+// 2. a new config entry is added
+// 3. route is programmatically changed
+async function activate() {
+  await nextTick()
+  const rootEl = root.value?.$el
+  const nodeEl = rootEl?.querySelector('.el-tree-node.is-active') as HTMLElement
+  if (!nodeEl || !nodeEl.offsetTop && route.path.slice(9 /* /plugins/ */)) return
+  root.value['setScrollTop'](nodeEl.offsetTop - (rootEl.offsetHeight - nodeEl.offsetHeight) / 2)
+}
+
+defineExpose({ activate })
+
+onActivated(async () => {
+  activate()
+  isActivating.value = false
+})
+
+function handleItemMount(itemEl: HTMLElement) {
+  if (!itemEl || isActivating.value) return
+  activate()
+}
+
+interface Node {
+  data: Tree
+  label?: string
+  parent: Node
+  expanded: boolean
+  isLeaf: boolean
+  childNodes: Node[]
+}
+
+function getLabel(node: Node) {
+  if (node.data.name === 'group') {
+    return '分组：' + (node.label || node.data.path)
+  } else {
+    return node.label || node.data.name || '待添加'
+  }
+}
+
+function allowDrag(node: Node) {
+  return node.data.path !== ''
+}
+
+function allowDrop(source: Node, target: Node, type: 'inner' | 'prev' | 'next') {
+  if (type !== 'inner') {
+    return target.data.path !== '' || type === 'next'
+  }
+  return target.data.id.startsWith('group:')
+}
+
+function handleClick(tree: Tree, target: Node, instance: any, event: MouseEvent) {
+  emit('update:modelValue', tree.path)
+  // el-tree will stop propagation,
+  // so we need to manually trigger the event
+  // so that context menu can be closed.
+  window.dispatchEvent(new MouseEvent(event.type, event))
+}
+
+function handleExpand(data: Tree, target: Node, instance) {
+  send('manager/meta', data.path, { $collapsed: null })
+}
+
+function handleCollapse(data: Tree, target: Node, instance) {
+  send('manager/meta', data.path, { $collapsed: true })
+}
+
+function handleDrop(source: Node, target: Node, position: 'before' | 'after' | 'inner', event: DragEvent) {
+  const parent = position === 'inner' ? target : target.parent
+  let index = parent.childNodes.findIndex(node => node.data.path === source.data.path)
+  if (!parent.data.path) index -= 1 // global config
+  send('manager/teleport', source.data.parent?.path ?? '', source.data.id, parent.data.path, index)
+}
+
+function getClass(tree: Tree) {
+  const words: string[] = []
+  if (tree.children) words.push('is-group')
+  if (!tree.children && !(tree.name in store.packages)) words.push('is-disabled')
+  if (tree.path === props.modelValue) words.push('is-active')
+  return words.join(' ')
+}
+
+watch(keyword, (val) => {
+  tree.value.filter(val)
+})
+
+</script>
+
+<style lang="scss">
+
+.plugin-tree {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+
+  .el-scrollbar__view {
+    padding: 1rem 0;
+    line-height: 2.25rem;
+  }
+
+  .search {
+    padding: 0 1.5rem;
+  }
+
+  .k-icon-filter {
+    height: 15px;
+  }
+
+  .el-tree-node {
+    &.is-group > .el-tree-node__content {
+      font-weight: bold;
+    }
+  }
+
+  .el-tree-node__content {
+    .item {
+      flex: 1;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      overflow: hidden;
+    }
+
+    .label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transition: var(--color-transition);
+    }
+
+    .right {
+      height: 100%;
+      margin: 0 1.5rem 0 0.5rem;
+    }
+  }
+}
+
+</style>
diff --git a/plugins/config/client/components/utils.ts b/plugins/config/client/components/utils.ts
new file mode 100644
index 0000000..5116d4f
--- /dev/null
+++ b/plugins/config/client/components/utils.ts
@@ -0,0 +1,194 @@
+import { Dict } from 'cosmokit'
+import { computed, ref } from 'vue'
+import { router, ScopeStatus, send, store } from '@cordisjs/client'
+import type { Entry } from '@cordisjs/loader'
+
+interface DepInfo {
+  required: boolean
+}
+
+interface PeerInfo {
+  required: boolean
+  active: boolean
+}
+
+export interface EnvInfo {
+  impl: string[]
+  using: Dict<DepInfo>
+  peer: Dict<PeerInfo>
+  warning?: boolean
+}
+
+export const dialogFork = ref<string>()
+export const dialogSelect = ref<Tree>()
+
+export const coreDeps = [
+  '@cordisjs/plugin-webui',
+  '@cordisjs/plugin-config',
+  '@cordisjs/server',
+]
+
+export function hasCoreDeps(tree: Tree) {
+  if (coreDeps.includes('@cordisjs/plugin-' + tree.name)) return true
+  if (tree.children) return tree.children.some(hasCoreDeps)
+}
+
+function getEnvInfo(name: string) {
+  function setService(name: string, required: boolean) {
+    if (services.has(name)) return
+    if (name === 'console') return
+    result.using[name] = { required }
+  }
+
+  const local = store.packages[name]
+  const result: EnvInfo = { impl: [], using: {}, peer: {} }
+  const services = new Set<string>()
+
+  // check peer dependencies
+  for (const name in local.package.peerDependencies ?? {}) {
+    if (!name.includes('@cordisjs/plugin-') && !name.includes('cordis-plugin-')) continue
+    if (coreDeps.includes(name)) continue
+    const required = !local.package.peerDependenciesMeta?.[name]?.optional
+    const active = !!store.packages[name]?.runtime?.id
+    result.peer[name] = { required, active }
+    for (const service of store.packages[name]?.manifest?.service.implements ?? []) {
+      services.add(service)
+    }
+  }
+
+  // check implementations
+  for (const name of local.manifest.service.implements) {
+    if (name === 'adapter') continue
+    result.impl.push(name)
+  }
+
+  // check services
+  for (const name of local.runtime?.required ?? []) {
+    setService(name, true)
+  }
+  for (const name of local.runtime?.optional ?? []) {
+    setService(name, false)
+  }
+
+  // check reusability
+  if (local.runtime?.id && !local.runtime?.forkable) {
+    result.warning = true
+  }
+
+  // check schema
+  if (!local.runtime?.schema) {
+    result.warning = true
+  }
+
+  return result
+}
+
+export const envMap = computed(() => {
+  return Object.fromEntries(Object
+    .keys(store.packages)
+    .filter(x => x)
+    .map(name => [name, getEnvInfo(name)]))
+})
+
+declare module '@cordisjs/client' {
+  interface ActionContext {
+    'config.tree': Tree
+  }
+}
+
+export interface Tree {
+  id: string
+  name: string
+  path: string
+  label?: string
+  config?: any
+  parent?: Tree
+  disabled?: boolean
+  children?: Tree[]
+}
+
+export const current = ref<Tree>()
+
+export const name = computed(() => {
+  if (!(current.value?.name in store.packages)) return
+  return current.value.name
+})
+
+export const type = computed(() => {
+  const env = envMap.value[name.value]
+  if (!env) return
+  if (env.warning && current.value.disabled) return 'warning'
+  for (const name in env.using) {
+    if (name in store.services || {}) {
+      if (env.impl.includes(name)) return 'warning'
+    } else {
+      if (env.using[name].required) return 'warning'
+    }
+  }
+})
+
+function getTree(parent: Tree, plugins: any): Tree[] {
+  const trees: Tree[] = []
+  for (let key in plugins) {
+    if (key.startsWith('$')) continue
+    const config = plugins[key]
+    const node = { config, parent } as Tree
+    if (key.startsWith('~')) {
+      node.disabled = true
+      key = key.slice(1)
+    }
+    node.name = key.split(':', 1)[0]
+    node.id = key
+    node.path = key.slice(node.name.length + 1)
+    node.label = config?.$label
+    if (key.startsWith('group:')) {
+      node.children = getTree(node, config)
+    }
+    trees.push(node)
+  }
+  return trees
+}
+
+export const plugins = computed(() => {
+  const expanded: string[] = []
+  const forks: Dict<string[]> = {}
+  const paths: Dict<Tree> = {}
+  function handle(config: Entry.Options[]) {
+    return config.map(options => {
+      const node: Tree = {
+        id: options.id,
+        name: options.name,
+        path: options.id,
+        config: options.config,
+      }
+      if (options.name === 'cordis/group') {
+        node.children = handle(options.config)
+      }
+      if (!options.collapsed && node.children) {
+        expanded.push(node.path)
+      }
+      forks[node.name] ||= []
+      forks[node.name].push(node.path)
+      paths[node.path] = node
+      return node
+    })
+  }
+  const data = handle(store.config)
+  return { data, forks, paths, expanded }
+})
+
+export function getStatus(tree: Tree) {
+  switch (store.packages?.[tree.name]?.runtime?.forks?.[tree.path]?.status) {
+    case ScopeStatus.PENDING: return 'pending'
+    case ScopeStatus.LOADING: return 'loading'
+    case ScopeStatus.ACTIVE: return 'active'
+    case ScopeStatus.FAILED: return 'failed'
+    case ScopeStatus.DISPOSED: return 'disposed'
+    default: return 'disabled'
+  }
+}
+
+export async function removeItem(tree: Tree) {
+  send('manager/remove', tree.id)
+  await router.replace('/plugins/' + tree.parent!.path)
+}
diff --git a/plugins/config/client/icons/add-group.vue b/plugins/config/client/icons/add-group.vue
new file mode 100644
index 0000000..ebfc94e
--- /dev/null
+++ b/plugins/config/client/icons/add-group.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M452 60H488C499 60 508 68.95 508 80C508 91.05 499 100 488 100H452V136C452 147 443 156 432 156C420.1 156 412 147 412 136V100H376C364.1 100 356 91.05 356 80C356 68.95 364.1 60 376 60H412V24C412 12.95 420.1 4 432 4C443 4 452 12.95 452 24V60zM280.8 133.1L490.1 222.8C503.4 228.5 512 241.5 512 256C512 270.5 503.4 283.5 490.1 289.2L280.8 378.9C272.1 382.3 264.5 384 256 384C247.5 384 239 382.3 231.2 378.9L21.9 289.2C8.614 283.5 0 270.5 0 256C0 241.5 8.614 228.5 21.9 222.8L231.2 133.1C239 129.7 247.5 128 256 128C264.5 128 272.1 129.7 280.8 133.1V133.1zM66.26 256L250.1 334.8C251.1 335.6 253.1 336 256 336C258 336 260 335.6 261.9 334.8L445.7 256L261.9 177.2C260 176.4 258 176 256 176C253.1 176 251.1 176.4 250.1 177.2L66.26 256zM59.53 350.6C66.15 359.9 65.24 372.3 57.1 380.5L250.1 462.8C251.1 463.6 253.1 464 256 464C258 464 260 463.6 261.9 462.8L452 381.3C447.4 374.4 446.5 365.2 450.5 357.3C456.5 345.4 470.9 340.6 482.7 346.5L491.8 351.1C504.2 357.3 512 369.9 512 383.7C512 398.4 503.3 411.6 489.9 417.3L280.8 506.9C272.1 510.3 264.5 512 256 512C247.5 512 239 510.3 231.2 506.9L22.81 417.6C8.971 411.7 .001 398.1 .001 383C.001 370.9 5.87 359.5 15.76 352.4L26.05 345C36.84 337.3 51.83 339.8 59.53 350.6L59.53 350.6z"/>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/plugins/config/client/icons/add-plugin.vue b/plugins/config/client/icons/add-plugin.vue
new file mode 100644
index 0000000..871523b
--- /dev/null
+++ b/plugins/config/client/icons/add-plugin.vue
@@ -0,0 +1,10 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M144,0c13.3,0,24,10.8,24,24v88h-48V24C120,10.8,130.8,0,144,0z M336,0c13.3,0,24,10.8,24,24v88h-48V24
+      C312,10.8,322.7,0,336,0z M408,144c13.3,0,24,10.7,24,24s-10.7,24-24,24h-8v64c0,80.2-59.9,146.6-136,158.2V512h-48v-97.8
+      c-77-11.6-136-78-136-158.2v-64h-8c-13.2,0-24-10.7-24-24s10.8-24,24-24H408z M240,368c61.9,0,112-50.1,112-112v-64H128v64
+      C128,317.9,178.1,368,240,368z"/>
+    <path fill="currentColor" d="M444,416h36c11,0,20,9,20,20s-9,20-20,20h-36v36c0,11-9,20-20,20c-11.9,0-20-9-20-20v-36h-36c-11.9,0-20-9-20-20
+      s8.1-20,20-20h36v-36c0-11,8.1-20,20-20c11,0,20,9,20,20V416z"/>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/plugins/config/client/icons/check.vue b/plugins/config/client/icons/check.vue
new file mode 100644
index 0000000..199445a
--- /dev/null
+++ b/plugins/config/client/icons/check.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path fill="currentColor" d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"/>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/plugins/config/client/icons/clone.vue b/plugins/config/client/icons/clone.vue
new file mode 100644
index 0000000..90e3c83
--- /dev/null
+++ b/plugins/config/client/icons/clone.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M64 464H288C296.8 464 304 456.8 304 448V384H352V448C352 483.3 323.3 512 288 512H64C28.65 512 0 483.3 0 448V224C0 188.7 28.65 160 64 160H128V208H64C55.16 208 48 215.2 48 224V448C48 456.8 55.16 464 64 464zM160 64C160 28.65 188.7 0 224 0H448C483.3 0 512 28.65 512 64V288C512 323.3 483.3 352 448 352H224C188.7 352 160 323.3 160 288V64zM224 304H448C456.8 304 464 296.8 464 288V64C464 55.16 456.8 48 448 48H224C215.2 48 208 55.16 208 64V288C208 296.8 215.2 304 224 304z"/>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/plugins/config/client/icons/index.ts b/plugins/config/client/icons/index.ts
new file mode 100644
index 0000000..c226a4c
--- /dev/null
+++ b/plugins/config/client/icons/index.ts
@@ -0,0 +1,23 @@
+import { icons } from '@cordisjs/client'
+
+import AddGroup from './add-group.vue'
+import AddPlugin from './add-plugin.vue'
+import TrashCan from './trash-can.vue'
+import Check from './check.vue'
+import Clone from './clone.vue'
+import Manage from './manage.vue'
+import Plugin from './plugin.vue'
+import Play from './play.vue'
+import Stop from './stop.vue'
+import Save from './save.vue'
+
+icons.register('activity:plugin', Plugin)
+icons.register('add-group', AddGroup)
+icons.register('add-plugin', AddPlugin)
+icons.register('trash-can', TrashCan)
+icons.register('check', Check)
+icons.register('clone', Clone)
+icons.register('manage', Manage)
+icons.register('play', Play)
+icons.register('stop', Stop)
+icons.register('save', Save)
diff --git a/plugins/config/client/icons/manage.vue b/plugins/config/client/icons/manage.vue
new file mode 100644
index 0000000..78eb354
--- /dev/null
+++ b/plugins/config/client/icons/manage.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M81.84 152.1C77.43 156.9 71.21 159.8 64.63 159.1C58.05 160.2 51.69 157.6 47.03 152.1L7.029 112.1C-2.343 103.6-2.343 88.4 7.029 79.03C16.4 69.66 31.6 69.66 40.97 79.03L63.08 101.1L118.2 39.94C127 30.09 142.2 29.29 152.1 38.16C161.9 47.03 162.7 62.2 153.8 72.06L81.84 152.1zM81.84 312.1C77.43 316.9 71.21 319.8 64.63 319.1C58.05 320.2 51.69 317.6 47.03 312.1L7.029 272.1C-2.343 263.6-2.343 248.4 7.029 239C16.4 229.7 31.6 229.7 40.97 239L63.08 261.1L118.2 199.9C127 190.1 142.2 189.3 152.1 198.2C161.9 207 162.7 222.2 153.8 232.1L81.84 312.1zM216 120C202.7 120 192 109.3 192 96C192 82.75 202.7 72 216 72H488C501.3 72 512 82.75 512 96C512 109.3 501.3 120 488 120H216zM192 256C192 242.7 202.7 232 216 232H488C501.3 232 512 242.7 512 256C512 269.3 501.3 280 488 280H216C202.7 280 192 269.3 192 256zM160 416C160 402.7 170.7 392 184 392H488C501.3 392 512 402.7 512 416C512 429.3 501.3 440 488 440H184C170.7 440 160 429.3 160 416zM64 448C46.33 448 32 433.7 32 416C32 398.3 46.33 384 64 384C81.67 384 96 398.3 96 416C96 433.7 81.67 448 64 448z"/>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/plugins/config/client/icons/play.vue b/plugins/config/client/icons/play.vue
new file mode 100644
index 0000000..19f45d0
--- /dev/null
+++ b/plugins/config/client/icons/play.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+    <path fill="currentColor" d="M24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13V38.13zM48 432L336 256L48 80V432z"/>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/plugins/config/client/icons/plugin.vue b/plugins/config/client/icons/plugin.vue
new file mode 100644
index 0000000..ffc1691
--- /dev/null
+++ b/plugins/config/client/icons/plugin.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M168 255.1C168 207.4 207.4 167.1 256 167.1C304.6 167.1 344 207.4 344 255.1C344 304.6 304.6 344 256 344C207.4 344 168 304.6 168 255.1zM256 199.1C225.1 199.1 200 225.1 200 255.1C200 286.9 225.1 311.1 256 311.1C286.9 311.1 312 286.9 312 255.1C312 225.1 286.9 199.1 256 199.1zM65.67 230.6L25.34 193.8C14.22 183.7 11.66 167.2 19.18 154.2L49.42 101.8C56.94 88.78 72.51 82.75 86.84 87.32L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L194.5 25.16C197.7 10.47 210.7 0 225.8 0H286.2C301.3 0 314.3 10.47 317.5 25.16L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L425.2 87.32C439.5 82.75 455.1 88.78 462.6 101.8L492.8 154.2C500.3 167.2 497.8 183.7 486.7 193.8L446.3 230.6C447.4 238.9 448 247.4 448 255.1C448 264.6 447.4 273.1 446.3 281.4L486.7 318.2C497.8 328.3 500.3 344.8 492.8 357.8L462.6 410.2C455.1 423.2 439.5 429.2 425.2 424.7L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L317.5 486.8C314.3 501.5 301.3 512 286.2 512H225.8C210.7 512 197.7 501.5 194.5 486.8L182.8 433.6C167 427 152.2 418.4 138.8 408.1L86.84 424.7C72.51 429.2 56.94 423.2 49.42 410.2L19.18 357.8C11.66 344.8 14.22 328.3 25.34 318.2L65.67 281.4C64.57 273.1 64 264.6 64 255.1C64 247.4 64.57 238.9 65.67 230.6V230.6zM158.4 129.2L145.1 139.5L77.13 117.8L46.89 170.2L99.58 218.2L97.39 234.8C96.47 241.7 96 248.8 96 255.1C96 263.2 96.47 270.3 97.39 277.2L99.58 293.8L46.89 341.8L77.13 394.2L145.1 372.5L158.4 382.8C169.5 391.4 181.9 398.6 195 403.1L210.5 410.4L225.8 480H286.2L301.5 410.4L316.1 403.1C330.1 398.6 342.5 391.4 353.6 382.8L366.9 372.5L434.9 394.2L465.1 341.8L412.4 293.8L414.6 277.2C415.5 270.3 416 263.2 416 256C416 248.8 415.5 241.7 414.6 234.8L412.4 218.2L465.1 170.2L434.9 117.8L366.9 139.5L353.6 129.2C342.5 120.6 330.1 113.4 316.1 108L301.5 101.6L286.2 32H225.8L210.5 101.6L195 108C181.9 113.4 169.5 120.6 158.4 129.2H158.4z"/>
+  </svg>
+</template>
diff --git a/plugins/config/client/icons/save.vue b/plugins/config/client/icons/save.vue
new file mode 100644
index 0000000..abd74d3
--- /dev/null
+++ b/plugins/config/client/icons/save.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path fill="currentColor" d="M224 256c-35.2 0-64 28.8-64 64c0 35.2 28.8 64 64 64c35.2 0 64-28.8 64-64C288 284.8 259.2 256 224 256zM433.1 129.1l-83.9-83.9C341.1 37.06 328.8 32 316.1 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h320c35.35 0 64-28.65 64-64V163.9C448 151.2 442.9 138.9 433.1 129.1zM128 80h144V160H128V80zM400 416c0 8.836-7.164 16-16 16H64c-8.836 0-16-7.164-16-16V96c0-8.838 7.164-16 16-16h16v104c0 13.25 10.75 24 24 24h192C309.3 208 320 197.3 320 184V83.88l78.25 78.25C399.4 163.2 400 164.8 400 166.3V416z"/>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/plugins/config/client/icons/stop.vue b/plugins/config/client/icons/stop.vue
new file mode 100644
index 0000000..f1e7d87
--- /dev/null
+++ b/plugins/config/client/icons/stop.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+    <path fill="currentColor" d="M320 64H64c-35.35 0-64 28.65-64 64v255.1c0 35.35 28.65 64 64 64H320c35.35 0 64-28.65 64-64V128C384 92.65 355.3 64 320 64zM336 384c0 8.822-7.178 16-16 16H64c-8.822 0-16-7.178-16-16V128c0-8.822 7.178-16 16-16h256c8.822 0 16 7.178 16 16V384z"/>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/plugins/config/client/icons/trash-can.vue b/plugins/config/client/icons/trash-can.vue
new file mode 100644
index 0000000..d9ea36c
--- /dev/null
+++ b/plugins/config/client/icons/trash-can.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path fill="currentColor" d="M160 400C160 408.8 152.8 416 144 416C135.2 416 128 408.8 128 400V192C128 183.2 135.2 176 144 176C152.8 176 160 183.2 160 192V400zM240 400C240 408.8 232.8 416 224 416C215.2 416 208 408.8 208 400V192C208 183.2 215.2 176 224 176C232.8 176 240 183.2 240 192V400zM320 400C320 408.8 312.8 416 304 416C295.2 416 288 408.8 288 400V192C288 183.2 295.2 176 304 176C312.8 176 320 183.2 320 192V400zM317.5 24.94L354.2 80H424C437.3 80 448 90.75 448 104C448 117.3 437.3 128 424 128H416V432C416 476.2 380.2 512 336 512H112C67.82 512 32 476.2 32 432V128H24C10.75 128 0 117.3 0 104C0 90.75 10.75 80 24 80H93.82L130.5 24.94C140.9 9.357 158.4 0 177.1 0H270.9C289.6 0 307.1 9.358 317.5 24.94H317.5zM151.5 80H296.5L277.5 51.56C276 49.34 273.5 48 270.9 48H177.1C174.5 48 171.1 49.34 170.5 51.56L151.5 80zM80 432C80 449.7 94.33 464 112 464H336C353.7 464 368 449.7 368 432V128H80V432z"/>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/plugins/config/client/index.scss b/plugins/config/client/index.scss
new file mode 100644
index 0000000..7aa1b01
--- /dev/null
+++ b/plugins/config/client/index.scss
@@ -0,0 +1,37 @@
+
+.dialog-config-fork, .plugin-tree {
+  .status-light {
+    display: inline-block;
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 100%;
+    transition: var(--color-transition);
+
+    &.active {
+      background-color: var(--k-color-success);
+    }
+    &.pending {
+      background-color: var(--k-color-warning);
+    }
+    &.loading {
+      animation: status-flash 1s infinite;
+      background-color: var(--k-color-warning);
+    }
+    &.failed {
+      background-color: var(--k-color-danger);
+    }
+    &.disabled:not(.ignore-disabled) {
+      opacity: 0.5;
+      background-color: var(--k-color-disabled);
+    }
+  }
+}
+
+@keyframes status-flash {
+  0%, 100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
diff --git a/plugins/config/client/index.ts b/plugins/config/client/index.ts
new file mode 100644
index 0000000..8eaaee1
--- /dev/null
+++ b/plugins/config/client/index.ts
@@ -0,0 +1,128 @@
+import { Context, router, send, Service } from '@cordisjs/client'
+import { defineComponent, h, resolveComponent } from 'vue'
+import type {} from '@cordisjs/plugin-config'
+import { dialogFork, plugins, type } from './components/utils'
+import Settings from './components/index.vue'
+import Forks from './components/forks.vue'
+import Select from './components/select.vue'
+
+import 'virtual:uno.css'
+import './index.scss'
+import './icons'
+
+export * from './components/utils'
+
+declare module '@cordisjs/client' {
+  interface Context {
+    configWriter: ConfigWriter
+  }
+}
+
+export default class ConfigWriter extends Service {
+  constructor(ctx: Context) {
+    super(ctx, 'configWriter', true)
+
+    ctx.slot({
+      type: 'global',
+      component: defineComponent(() => () => {
+        return h(resolveComponent('k-slot'), { name: 'plugin-select', single: true })
+      }),
+    })
+
+    ctx.slot({
+      type: 'plugin-select-base',
+      component: Select,
+      order: -1000,
+    })
+
+    ctx.slot({
+      type: 'plugin-select',
+      component: Select,
+      order: -1000,
+    })
+
+    ctx.slot({
+      type: 'global',
+      component: Forks,
+    })
+
+    ctx.page({
+      id: 'config',
+      path: '/plugins/:name*',
+      name: '插件配置',
+      icon: 'activity:plugin',
+      order: 800,
+      authority: 4,
+      fields: ['config', 'packages', 'services'],
+      component: Settings,
+    })
+
+    ctx.menu('config.tree', [{
+      id: 'config.tree.toggle',
+      type: ({ config }) => config.tree?.disabled ? '' : type.value,
+      icon: ({ config }) => config.tree?.disabled ? 'play' : 'stop',
+      label: ({ config }) => (config.tree?.disabled ? '启用' : '停用')
+        + (config.tree?.name === 'group' ? '分组' : '插件'),
+    }, {
+      id: '.save',
+      icon: ({ config }) => config.tree?.disabled ? 'save' : 'check',
+      label: ({ config }) => config.tree?.disabled ? '保存配置' : '重载配置',
+    }, {
+      id: '@separator',
+    }, {
+      id: '.rename',
+      icon: 'edit',
+      label: '重命名',
+    }, {
+      id: '.remove',
+      type: 'danger',
+      icon: 'delete',
+      label: ({ config }) => config.tree?.children ? '移除分组' : '移除插件',
+    }, {
+      id: '@separator',
+    }, {
+      id: '.clone',
+      icon: 'clone',
+      label: '克隆配置',
+    }, {
+      id: '.manage',
+      icon: 'manage',
+      label: '管理多份配置',
+    }, {
+      id: '.add-plugin',
+      icon: 'add-plugin',
+      label: '添加插件',
+    }, {
+      id: '.add-group',
+      icon: 'add-group',
+      label: '添加分组',
+    }])
+  }
+
+  ensure(name: string, passive?: boolean) {
+    const forks = plugins.value.forks[name]
+    if (!forks?.length) {
+      const key = Math.random().toString(36).slice(2, 8)
+      send('manager/add', { name, disabled: true }, '')
+      if (!passive) router.push('/plugins/' + key)
+    } else if (forks.length === 1) {
+      if (!passive) router.push('/plugins/' + forks[0])
+    } else {
+      if (!passive) dialogFork.value = name
+    }
+  }
+
+  remove(name: string) {
+    const shortname = name.replace(/(cordis-|^@cordisjs\/)plugin-/, '')
+    const forks = plugins.value.forks[shortname]
+    for (const id of forks) {
+      const tree = plugins.value.paths[id]
+      send('manager/remove', tree.id)
+    }
+  }
+
+  get(name: string) {
+    const shortname = name.replace(/(cordis-|^@cordisjs\/)plugin-/, '')
+    return plugins.value.forks[shortname]?.map(id => plugins.value.paths[id])
+  }
+}
diff --git a/plugins/config/client/tsconfig.json b/plugins/config/client/tsconfig.json
new file mode 100644
index 0000000..2b4971d
--- /dev/null
+++ b/plugins/config/client/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.client",
+  "compilerOptions": {
+    "rootDir": ".",
+  },
+  "include": [
+    ".",
+  ],
+}
\ No newline at end of file
diff --git a/plugins/config/package.json b/plugins/config/package.json
new file mode 100644
index 0000000..db84279
--- /dev/null
+++ b/plugins/config/package.json
@@ -0,0 +1,70 @@
+{
+  "name": "@cordisjs/plugin-config",
+  "description": "Manage your bots and plugins with console",
+  "version": "2.8.5",
+  "main": "lib/node/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "node": "./lib/node/index.js",
+      "browser": "./lib/browser/index.mjs",
+      "types": "./lib/index.d.ts"
+    },
+    "./shared": {
+      "require": "./lib/shared/index.js",
+      "import": "./lib/shared/index.mjs"
+    },
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "dist",
+    "src"
+  ],
+  "author": "Shigma <shigma10826@gmail.com>",
+  "license": "AGPL-3.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cordisjs/webui.git",
+    "directory": "plugins/config"
+  },
+  "bugs": {
+    "url": "https://github.com/cordisjs/webui/issues"
+  },
+  "homepage": "https://koishi.chat/plugins/console/config.html",
+  "keywords": [
+    "cordis",
+    "plugin",
+    "config",
+    "manager",
+    "server"
+  ],
+  "cordis": {
+    "public": [
+      "dist"
+    ],
+    "description": {
+      "en": "Configure your plugins with console",
+      "zh": "使用控制台查看、配置你的插件"
+    },
+    "service": {
+      "required": [
+        "console"
+      ]
+    }
+  },
+  "peerDependencies": {
+    "@cordisjs/loader": "^0.8.6",
+    "@cordisjs/plugin-webui": "^0.28.3",
+    "cordis": "^4.17.4"
+  },
+  "devDependencies": {
+    "@cordisjs/client": "^0.28.3",
+    "@cordisjs/plugin-hmr": "^0.2.0"
+  },
+  "dependencies": {
+    "@cordisjs/registry": "^7.0.3",
+    "@cordisjs/webui": "^0.28.3"
+  }
+}
diff --git a/plugins/config/src/browser/index.ts b/plugins/config/src/browser/index.ts
new file mode 100644
index 0000000..3ff6f2d
--- /dev/null
+++ b/plugins/config/src/browser/index.ts
@@ -0,0 +1,26 @@
+import { Context, Schema } from 'cordis'
+import { PackageProvider } from './packages'
+import { ConfigWriter, ServiceProvider } from '../shared'
+
+export * from '../shared'
+
+export const name = 'config'
+export const inject = ['console', 'loader']
+
+export interface Config {}
+
+export const Config: Schema<Config> = Schema.object({})
+
+export function apply(ctx: Context, config: Config) {
+  ctx.plugin(PackageProvider)
+  ctx.plugin(ConfigWriter)
+  ctx.plugin(ServiceProvider)
+
+  ctx.console.addEntry(process.env.KOISHI_BASE ? [
+    process.env.KOISHI_BASE + '/dist/index.js',
+    process.env.KOISHI_BASE + '/dist/style.css',
+  ] : [
+    // @ts-ignore
+    import.meta.url.replace(/\/src\/[^/]+\/[^/]+$/, '/client/index.ts'),
+  ])
+}
diff --git a/plugins/config/src/browser/packages.ts b/plugins/config/src/browser/packages.ts
new file mode 100644
index 0000000..fc01a13
--- /dev/null
+++ b/plugins/config/src/browser/packages.ts
@@ -0,0 +1,7 @@
+import * as shared from '../shared'
+
+export class PackageProvider extends shared.PackageProvider {
+  async collect(forced: boolean) {
+    return this.ctx.loader.market.objects
+  }
+}
diff --git a/plugins/config/src/index.ts b/plugins/config/src/index.ts
new file mode 100644
index 0000000..bb04ea2
--- /dev/null
+++ b/plugins/config/src/index.ts
@@ -0,0 +1,2 @@
+// placeholder file, do not modify
+export * from './node'
diff --git a/plugins/config/src/node/index.ts b/plugins/config/src/node/index.ts
new file mode 100644
index 0000000..fc57c88
--- /dev/null
+++ b/plugins/config/src/node/index.ts
@@ -0,0 +1,28 @@
+import { Context, Schema } from 'cordis'
+import { resolve } from 'path'
+import { PackageProvider } from './packages'
+import { ConfigWriter, ServiceProvider } from '../shared'
+
+export * from '../shared'
+
+export const name = 'config'
+export const inject = ['console']
+
+export interface Config {}
+
+export const Config: Schema<Config> = Schema.object({})
+
+export function apply(ctx: Context, config: Config) {
+  if (!ctx.loader?.writable) {
+    return ctx.logger('app').warn('@cordisjs/plugin-config is only available for json/yaml config file')
+  }
+
+  ctx.plugin(PackageProvider)
+  ctx.plugin(ServiceProvider)
+  ctx.plugin(ConfigWriter)
+
+  ctx.console.addEntry({
+    dev: resolve(__dirname, '../../client/index.ts'),
+    prod: resolve(__dirname, '../../dist'),
+  })
+}
diff --git a/plugins/config/src/node/packages.ts b/plugins/config/src/node/packages.ts
new file mode 100644
index 0000000..cc87d69
--- /dev/null
+++ b/plugins/config/src/node/packages.ts
@@ -0,0 +1,40 @@
+import { Logger } from 'cordis'
+import { LocalScanner } from '@cordisjs/registry'
+import * as shared from '../shared'
+
+const logger = new Logger('config')
+
+class PackageScanner extends LocalScanner {
+  constructor(private service: PackageProvider) {
+    super(service.ctx.baseDir)
+  }
+
+  async onError(error: any, name: string) {
+    logger.warn('failed to resolve %c', name)
+    logger.warn(error)
+  }
+
+  async parsePackage(name: string) {
+    const result = await super.parsePackage(name)
+    try {
+      // require.resolve(name) may be different from require.resolve(path)
+      // because tsconfig-paths may resolve the path differently
+      const entry = require.resolve(name)
+      if (require.cache[entry]) {
+        this.service.cache[name] = await this.service.parseExports(name)
+      }
+    } catch (error) {
+      this.onError(error, name)
+    }
+    return result
+  }
+}
+
+export class PackageProvider extends shared.PackageProvider {
+  scanner = new PackageScanner(this)
+
+  async collect(forced: boolean) {
+    await this.scanner.collect(forced)
+    return this.scanner.objects
+  }
+}
diff --git a/plugins/config/src/shared/index.ts b/plugins/config/src/shared/index.ts
new file mode 100644
index 0000000..7794102
--- /dev/null
+++ b/plugins/config/src/shared/index.ts
@@ -0,0 +1,17 @@
+import { PackageProvider } from './packages'
+import { ServiceProvider } from './services'
+import { ConfigWriter } from './writer'
+
+declare module '@cordisjs/webui' {
+  namespace Console {
+    interface Services {
+      packages: PackageProvider
+      services: ServiceProvider
+      config: ConfigWriter
+    }
+  }
+}
+
+export * from './packages'
+export * from './services'
+export * from './writer'
diff --git a/plugins/config/src/shared/packages.ts b/plugins/config/src/shared/packages.ts
new file mode 100644
index 0000000..eaed325
--- /dev/null
+++ b/plugins/config/src/shared/packages.ts
@@ -0,0 +1,127 @@
+import { Context, Logger, MainScope, Plugin, Schema, ScopeStatus } from 'cordis'
+import { Dict } from 'cosmokit'
+import { DataService } from '@cordisjs/webui'
+import { PackageJson, SearchObject, SearchResult } from '@cordisjs/registry'
+import {} from '@cordisjs/plugin-hmr'
+
+declare module '@cordisjs/loader' {
+  interface Loader {
+    market: SearchResult
+  }
+}
+
+declare module '@cordisjs/webui' {
+  interface Events {
+    'config/request-runtime'(name: string): void
+  }
+}
+
+const logger = new Logger('config')
+
+export abstract class PackageProvider extends DataService<Dict<PackageProvider.Data>> {
+  cache: Dict<PackageProvider.RuntimeData> = {}
+  debouncedRefresh: () => void
+
+  store = new WeakMap<Plugin, string>()
+
+  constructor(public ctx: Context) {
+    super(ctx, 'packages', { authority: 4 })
+
+    this.debouncedRefresh = ctx.debounce(() => this.refresh(false), 0)
+    ctx.on('internal/runtime', scope => this.update(scope.runtime.plugin))
+    ctx.on('internal/fork', scope => this.update(scope.runtime.plugin))
+    ctx.on('internal/status', scope => this.update(scope.runtime.plugin))
+    ctx.on('hmr/reload', (reloads) => {
+      for (const [plugin] of reloads) {
+        this.update(plugin)
+      }
+    })
+
+    ctx.console.addListener('config/request-runtime', async (name) => {
+      this.cache[name] = await this.parseExports(name)
+      this.refresh(false)
+    }, { authority: 4 })
+  }
+
+  abstract collect(forced: boolean): Promise<PackageProvider.Data[]>
+
+  async update(plugin: Plugin) {
+    const name = this.store.get(plugin)
+    if (!this.cache[name]) return
+    this.cache[name] = await this.parseExports(name)
+    this.debouncedRefresh()
+  }
+
+  parseRuntime(state: MainScope, result: PackageProvider.RuntimeData) {
+    result.id = state.runtime.uid
+    result.forkable = state.runtime.isForkable
+    result.forks = Object.fromEntries(state.children
+      .filter(fork => fork.entry)
+      .map(fork => [fork.entry!.options.id, { status: fork.status }]))
+  }
+
+  async get(forced = false) {
+    const objects = (await this.collect(forced)).slice()
+    for (const object of objects) {
+      object.name = object.package?.name || ''
+      if (!this.cache[object.name]) continue
+      object.runtime = this.cache[object.name]
+    }
+
+    return Object.fromEntries(objects.map(data => [data.name, data]))
+  }
+
+  async parseExports(name: string) {
+    try {
+      const exports = await this.ctx.loader.resolve(name)
+      if (exports) this.store.set(exports, name)
+      const result: PackageProvider.RuntimeData = {}
+      result.schema = exports?.Config || exports?.schema
+      result.usage = exports?.usage
+      result.filter = exports?.filter
+      const inject = exports?.using || exports?.inject || []
+      if (Array.isArray(inject)) {
+        result.required = inject
+        result.optional = []
+      } else {
+        result.required = inject.required || []
+        result.optional = inject.optional || []
+      }
+
+      // make sure that result can be serialized into json
+      JSON.stringify(result)
+
+      if (exports) {
+        const runtime = this.ctx.registry.get(exports)
+        if (runtime) this.parseRuntime(runtime, result)
+      }
+      return result
+    } catch (error) {
+      logger.warn('failed to load %c', name)
+      logger.warn(error)
+      return { failed: true }
+    }
+  }
+}
+
+export namespace PackageProvider {
+  export interface Data extends Pick<SearchObject, 'shortname' | 'workspace' | 'manifest' | 'portable'> {
+    name?: string
+    runtime?: RuntimeData
+    package: Pick<PackageJson, 'name' | 'version' | 'peerDependencies' | 'peerDependenciesMeta'>
+  }
+
+  export interface RuntimeData {
+    id?: number
+    filter?: boolean
+    forkable?: boolean
+    schema?: Schema
+    usage?: string
+    required?: string[]
+    optional?: string[]
+    failed?: boolean
+    forks?: Dict<{
+      status?: ScopeStatus
+    }>
+  }
+}
diff --git a/plugins/config/src/shared/services.ts b/plugins/config/src/shared/services.ts
new file mode 100644
index 0000000..526a272
--- /dev/null
+++ b/plugins/config/src/shared/services.ts
@@ -0,0 +1,29 @@
+import { DataService } from '@cordisjs/webui'
+import { Context } from 'cordis'
+import { Dict } from 'cosmokit'
+
+export class ServiceProvider extends DataService<Dict<number>> {
+  constructor(ctx: Context) {
+    super(ctx, 'services')
+    ctx.on('internal/service', () => this.refresh())
+  }
+
+  async get() {
+    const services = {} as Dict<number>
+    const attach = (internal: Context[typeof Context.internal]) => {
+      if (!internal) return
+      attach(Object.getPrototypeOf(internal))
+      for (const [key, { type }] of Object.entries(internal)) {
+        if (type !== 'service') continue
+        const instance = this.ctx.get(key)
+        if (!(instance instanceof Object)) continue
+        const ctx: Context = Reflect.getOwnPropertyDescriptor(instance, Context.current)?.value
+        if (!ctx) continue
+        const name = key.replace(/^__/, '').replace(/__$/, '')
+        services[name] = ctx.scope.uid
+      }
+    }
+    attach(this.ctx.root[Context.internal])
+    return services
+  }
+}
diff --git a/plugins/config/src/shared/writer.ts b/plugins/config/src/shared/writer.ts
new file mode 100644
index 0000000..24b5875
--- /dev/null
+++ b/plugins/config/src/shared/writer.ts
@@ -0,0 +1,106 @@
+import { DataService } from '@cordisjs/webui'
+import { Context, Logger } from 'cordis'
+import { Entry, Loader } from '@cordisjs/loader'
+
+declare module '@cordisjs/webui' {
+  interface Events {
+    'manager/app-reload'(config: any): void
+    'manager/teleport'(source: string, key: string, target: string, index: number): void
+    'manager/reload'(id: string, config: any): void
+    'manager/unload'(id: string, config: any): void
+    'manager/add'(options: any, parent: string, index?: number): string
+    'manager/remove'(id: string): void
+    'manager/meta'(ident: string, config: any): void
+  }
+}
+
+const logger = new Logger('loader')
+
+export class ConfigWriter extends DataService<Entry.Options[]> {
+  protected loader: Loader
+
+  constructor(ctx: Context) {
+    super(ctx, 'config', { authority: 4 })
+    this.loader = ctx.loader
+
+    for (const key of ['teleport', 'reload', 'unload', 'remove', 'meta', 'add'] as const) {
+      ctx.console.addListener(`manager/${key}`, async (...args: any[]) => {
+        try {
+          await this[key].apply(this, args)
+        } catch (error) {
+          logger.error(error)
+          throw new Error('failed')
+        }
+      }, { authority: 4 })
+    }
+
+    ctx.on('config', () => this.refresh())
+  }
+
+  async get() {
+    return this.loader.config
+  }
+
+  async meta(ident: string, config: any) {
+    // const [parent, key] = this.resolveConfig(ident)
+    // const target = parent[key]
+    // for (const key of Object.keys(config)) {
+    //   delete target[key]
+    //   if (config[key] === null) {
+    //     delete config[key]
+    //   }
+    // }
+    // insertKey(target, config, Object.keys(target))
+    // await this.loader.writeConfig(true)
+  }
+
+  async reload(id: string, config: any) {
+    const entry = this.loader.entries[id]
+    if (!entry) throw new Error('entry not found')
+    entry.options.config = config
+    delete entry.options.disabled
+    entry.resume()
+  }
+
+  async unload(id: string, config: any) {
+    const entry = this.loader.entries[id]
+    if (!entry) throw new Error('entry not found')
+    entry.options.config = config
+    entry.options.disabled = true
+    entry.resume()
+  }
+
+  async add(options: Omit<Entry.Options, 'id'>, parent: string, index?: number) {
+    return this.loader.add(options, parent, index)
+  }
+
+  async remove(id: string) {
+    this.loader.remove(id)
+  }
+
+  async teleport(source: string, key: string, target: string, index: number) {
+    // const parentS = this.resolveFork(source)
+    // const parentT = this.resolveFork(target)
+
+    // // teleport fork
+    // const fork = parentS?.[Loader.kRecord]?.[key]
+    // if (fork && parentS !== parentT) {
+    //   delete parentS[Loader.kRecord][key]
+    //   parentT[Loader.kRecord][key] = fork
+    //   remove(parentS.disposables, fork.dispose)
+    //   parentT.disposables.push(fork.dispose)
+    //   fork.parent = parentT.ctx
+    //   Object.setPrototypeOf(fork.ctx, parentT.ctx)
+    //   fork.ctx.emit('internal/fork', fork)
+    //   if (fork.runtime.using.some(name => parentS[name] !== parentT[name])) {
+    //     fork.restart()
+    //   }
+    // }
+
+    // // teleport config
+    // const temp = dropKey(parentS.config, key)
+    // const rest = Object.keys(parentT.config).slice(index)
+    // insertKey(parentT.config, temp, rest)
+    // await this.loader.writeConfig()
+  }
+}
diff --git a/plugins/config/tsconfig.json b/plugins/config/tsconfig.json
new file mode 100644
index 0000000..e193a11
--- /dev/null
+++ b/plugins/config/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "lib",
+  },
+  "include": [
+    "src",
+  ],
+}
\ No newline at end of file