From aea87e18f1bfbcbe1b652d3a76b3ae985d8d7c7d Mon Sep 17 00:00:00 2001
From: DrSmoothl <1787882683@qq.com>
Date: Fri, 3 Apr 2026 02:46:07 +0800
Subject: [PATCH] feat: enhance bot configuration with new sections and JSON
 field hooks

- Added support for new configuration sections: relationship, database, maisaka, mcp, and plugin_runtime.
- Introduced complex field hooks for handling JSON configurations in chat talk value rules, expression learning lists, and more.
- Updated the field hooks to include schema metadata for better UI representation.
- Refactored the bot configuration page to utilize a more dynamic approach for managing section values and state.
- Improved the configuration schema generation to ensure all top-level sections have UI metadata.
- Added tests to validate the new configuration schema and ensure proper functionality of the JSON field hooks.
---
 .../dynamic-form/DynamicConfigForm.tsx        | 185 +++++-
 .../components/dynamic-form/DynamicField.tsx  | 120 +++-
 .../__tests__/DynamicConfigForm.test.tsx      |  68 ++-
 .../__tests__/DynamicField.test.tsx           |  16 +-
 dashboard/src/lib/field-hooks.ts              |   2 +
 dashboard/src/routes/config/bot.tsx           | 560 ++++++++++--------
 .../config/bot/hooks/JsonFieldHookFactory.tsx | 103 ++++
 .../config/bot/hooks/complexFieldHooks.tsx    |  49 ++
 .../src/routes/config/bot/hooks/index.ts      |  10 +
 dashboard/src/routes/config/bot/types.ts      |   5 +
 dashboard/src/types/config-schema.ts          |  10 +-
 pytests/webui/test_config_schema.py           |  52 +-
 src/config/official_configs.py                |   1 -
 src/webui/config_schema.py                    |  11 +-
 src/webui/routers/websocket/__init__.py       |  10 +-
 15 files changed, 881 insertions(+), 321 deletions(-)
 create mode 100644 dashboard/src/routes/config/bot/hooks/JsonFieldHookFactory.tsx
 create mode 100644 dashboard/src/routes/config/bot/hooks/complexFieldHooks.tsx

diff --git a/dashboard/src/components/dynamic-form/DynamicConfigForm.tsx b/dashboard/src/components/dynamic-form/DynamicConfigForm.tsx
index cd04b78f..abb377c2 100644
--- a/dashboard/src/components/dynamic-form/DynamicConfigForm.tsx
+++ b/dashboard/src/components/dynamic-form/DynamicConfigForm.tsx
@@ -1,5 +1,14 @@
 import * as React from 'react'
+import * as LucideIcons from 'lucide-react'
 
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Separator } from '@/components/ui/separator'
 import type { ConfigSchema, FieldSchema } from '@/types/config-schema'
 import { fieldHooks, type FieldHookRegistry } from '@/lib/field-hooks'
 
@@ -9,7 +18,10 @@ export interface DynamicConfigFormProps {
   schema: ConfigSchema
   values: Record<string, unknown>
   onChange: (field: string, value: unknown) => void
+  basePath?: string
   hooks?: FieldHookRegistry
+  /** 嵌套层级：0 = tab 内容层, 1 = section 内容层, 2+ = 更深嵌套 */
+  level?: number
 }
 
 /**
@@ -19,21 +31,32 @@ export interface DynamicConfigFormProps {
  * 1. Hook 系统：通过 FieldHookRegistry 自定义字段渲染
  *    - replace 模式：完全替换默认渲染
  *    - wrapper 模式：包装默认渲染（通过 children 传递）
- * 2. 嵌套 schema：递归渲染 schema.nested 中的子配置
+ * 2. 嵌套 schema：递归渲染 schema.nested 中的子配置，使用 Card 容器区分层级
  * 3. 默认渲染：使用 DynamicField 组件
  */
 export const DynamicConfigForm: React.FC<DynamicConfigFormProps> = ({
   schema,
   values,
   onChange,
+  basePath = '',
   hooks = fieldHooks, // 默认使用全局单例
+  level = 0,
 }) => {
+  const fieldMap = React.useMemo(
+    () => new Map(schema.fields.map((field) => [field.name, field])),
+    [schema.fields]
+  )
+
+  const buildFieldPath = (fieldName: string) => {
+    return basePath ? `${basePath}.${fieldName}` : fieldName
+  }
+
   /**
    * 渲染单个字段
    * 检查是否有注册的 Hook，根据 Hook 类型选择渲染方式
    */
   const renderField = (field: FieldSchema) => {
-    const fieldPath = field.name
+    const fieldPath = buildFieldPath(field.name)
 
     // 检查是否有注册的 Hook
     if (hooks.has(fieldPath)) {
@@ -49,6 +72,7 @@ export const DynamicConfigForm: React.FC<DynamicConfigFormProps> = ({
             fieldPath={fieldPath}
             value={values[field.name]}
             onChange={(v) => onChange(field.name, v)}
+            schema={field}
           />
         )
       } else {
@@ -58,6 +82,7 @@ export const DynamicConfigForm: React.FC<DynamicConfigFormProps> = ({
             fieldPath={fieldPath}
             value={values[field.name]}
             onChange={(v) => onChange(field.name, v)}
+            schema={field}
           >
             <DynamicField
               schema={field}
@@ -81,34 +106,146 @@ export const DynamicConfigForm: React.FC<DynamicConfigFormProps> = ({
     )
   }
 
+  /** 渲染 section 图标 */
+  const renderSectionIcon = (iconName?: string) => {
+    if (!iconName) return null
+    const IconComponent = LucideIcons[iconName as keyof typeof LucideIcons] as
+      | React.ComponentType<{ className?: string }>
+      | undefined
+    if (!IconComponent) return null
+    return <IconComponent className="h-5 w-5 text-muted-foreground" />
+  }
+
+  // 过滤出不属于 nested 的顶层字段
+  const topLevelFields = schema.fields.filter(
+    (field) => !schema.nested?.[field.name]
+  )
+
   return (
-    <div className="space-y-4">
+    <div className="space-y-6">
       {/* 渲染顶层字段 */}
-      {schema.fields.map((field) => (
-        <div key={field.name}>{renderField(field)}</div>
-      ))}
+      {topLevelFields.length > 0 && (
+        <div className="space-y-1">
+          {topLevelFields.map((field, index) => (
+            <React.Fragment key={field.name}>
+              {index > 0 && field.type !== 'boolean' && topLevelFields[index - 1]?.type !== 'boolean' && (
+                <Separator className="my-1" />
+              )}
+              <div>{renderField(field)}</div>
+            </React.Fragment>
+          ))}
+        </div>
+      )}
 
       {/* 渲染嵌套 schema */}
       {schema.nested &&
-        Object.entries(schema.nested).map(([key, nestedSchema]) => (
-          <div key={key} className="mt-6 space-y-4">
-            {/* 嵌套 schema 标题 */}
-            <div className="border-b pb-2">
-              <h3 className="text-lg font-semibold">{nestedSchema.className}</h3>
-              {nestedSchema.classDoc && (
-                <p className="text-sm text-muted-foreground">{nestedSchema.classDoc}</p>
-              )}
-            </div>
+        Object.entries(schema.nested).map(([key, nestedSchema]) => {
+          const nestedField = fieldMap.get(key)
+          const nestedFieldPath = buildFieldPath(key)
 
-            {/* 递归渲染嵌套表单 */}
-            <DynamicConfigForm
-              schema={nestedSchema}
-              values={(values[key] as Record<string, unknown>) || {}}
-              onChange={(field, value) => onChange(`${key}.${field}`, value)}
-              hooks={hooks}
-            />
-          </div>
-        ))}
+          // Hook 系统处理
+          if (hooks.has(nestedFieldPath)) {
+            const hookEntry = hooks.get(nestedFieldPath)
+            if (!hookEntry) return null
+
+            const HookComponent = hookEntry.component
+            if (hookEntry.type === 'replace') {
+              return (
+                <div key={key}>
+                  <HookComponent
+                    fieldPath={nestedFieldPath}
+                    value={values[key]}
+                    onChange={(v) => onChange(key, v)}
+                    schema={nestedField ?? nestedSchema}
+                  />
+                </div>
+              )
+            }
+
+            return (
+              <div key={key}>
+                <HookComponent
+                  fieldPath={nestedFieldPath}
+                  value={values[key]}
+                  onChange={(v) => onChange(key, v)}
+                  schema={nestedField ?? nestedSchema}
+                >
+                  <DynamicConfigForm
+                    schema={nestedSchema}
+                    values={(values[key] as Record<string, unknown>) || {}}
+                    onChange={(field, value) => onChange(`${key}.${field}`, value)}
+                    basePath={nestedFieldPath}
+                    hooks={hooks}
+                    level={level + 1}
+                  />
+                </HookComponent>
+              </div>
+            )
+          }
+
+          const sectionTitle =
+            nestedSchema.uiLabel || nestedSchema.classDoc || nestedSchema.className
+          const sectionDescription =
+            nestedSchema.classDoc && nestedSchema.classDoc !== sectionTitle
+              ? nestedSchema.classDoc
+              : undefined
+
+          // 一级嵌套：使用 Card 包裹，清晰的 section 边界
+          if (level === 0) {
+            return (
+              <Card key={key}>
+                <CardHeader className="pb-4">
+                  <div className="flex items-center gap-2">
+                    {renderSectionIcon(nestedSchema.uiIcon)}
+                    <CardTitle className="text-lg">{sectionTitle}</CardTitle>
+                  </div>
+                  {sectionDescription && (
+                    <CardDescription>{sectionDescription}</CardDescription>
+                  )}
+                </CardHeader>
+                <CardContent>
+                  <DynamicConfigForm
+                    schema={nestedSchema}
+                    values={(values[key] as Record<string, unknown>) || {}}
+                    onChange={(field, value) => onChange(`${key}.${field}`, value)}
+                    basePath={nestedFieldPath}
+                    hooks={hooks}
+                    level={level + 1}
+                  />
+                </CardContent>
+              </Card>
+            )
+          }
+
+          // 二级及更深嵌套：使用左侧指示条 + 轻量分组
+          return (
+            <div
+              key={key}
+              className="relative space-y-4 rounded-lg border-l-2 border-muted-foreground/20 pl-4 pt-1 pb-1"
+            >
+              <div className="space-y-1">
+                <div className="flex items-center gap-2">
+                  {renderSectionIcon(nestedSchema.uiIcon)}
+                  <h4 className="text-sm font-semibold">{sectionTitle}</h4>
+                </div>
+                {sectionDescription && (
+                  <p className="text-xs text-muted-foreground">
+                    {sectionDescription}
+                  </p>
+                )}
+              </div>
+
+              <DynamicConfigForm
+                schema={nestedSchema}
+                values={(values[key] as Record<string, unknown>) || {}}
+                onChange={(field, value) => onChange(`${key}.${field}`, value)}
+                basePath={nestedFieldPath}
+                hooks={hooks}
+                level={level + 1}
+              />
+            </div>
+          )
+        })}
     </div>
   )
 }
diff --git a/dashboard/src/components/dynamic-form/DynamicField.tsx b/dashboard/src/components/dynamic-form/DynamicField.tsx
index 875ec721..b1e4dc59 100644
--- a/dashboard/src/components/dynamic-form/DynamicField.tsx
+++ b/dashboard/src/components/dynamic-form/DynamicField.tsx
@@ -2,6 +2,7 @@ import * as React from "react"
 import * as LucideIcons from "lucide-react"
 
 import { Input } from "@/components/ui/input"
+import { KeyValueEditor } from "@/components/ui/key-value-editor"
 import { Label } from "@/components/ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Slider } from "@/components/ui/slider"
@@ -29,6 +30,57 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
   value,
   onChange,
 }) => {
+  const renderPrimitiveArrayEditor = () => {
+    const itemType = schema.items?.type ?? 'string'
+    const arrayValue = Array.isArray(value)
+      ? value
+      : Array.isArray(schema.default)
+        ? schema.default
+        : []
+
+    const textareaValue = arrayValue.map((item) => String(item ?? '')).join('\n')
+
+    return (
+      <Textarea
+        value={textareaValue}
+        onChange={(e) => {
+          const nextItems = e.target.value
+            .split('\n')
+            .map((line) => line.trim())
+            .filter((line) => line.length > 0)
+            .map((line) => {
+              if (itemType === 'integer') {
+                return parseInt(line, 10) || 0
+              }
+              if (itemType === 'number') {
+                return parseFloat(line) || 0
+              }
+              if (itemType === 'boolean') {
+                return line === 'true'
+              }
+              return line
+            })
+          onChange(nextItems)
+        }}
+        rows={Math.max(4, arrayValue.length || 4)}
+      />
+    )
+  }
+
+  const renderObjectEditor = () => {
+    const objectValue =
+      value && typeof value === 'object' && !Array.isArray(value)
+        ? (value as Record<string, unknown>)
+        : {}
+
+    return (
+      <KeyValueEditor
+        value={objectValue}
+        onChange={onChange}
+      />
+    )
+  }
+
   /**
    * 渲染字段图标
    */
@@ -53,6 +105,12 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
       switch (widget) {
         case 'slider':
           return renderSlider()
+        case 'input':
+          return renderTextInput()
+        case 'number':
+          return renderNumberInput()
+        case 'password':
+          return renderTextInput('password')
         case 'switch':
           return renderSwitch()
         case 'textarea':
@@ -60,6 +118,12 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
         case 'select':
           return renderSelect()
         case 'custom':
+          if (type === 'array' && schema.items && schema.items.type !== 'object') {
+            return renderPrimitiveArrayEditor()
+          }
+          if (type === 'object') {
+            return renderObjectEditor()
+          }
           return (
             <div className="rounded-md border border-dashed border-muted-foreground/25 bg-muted/10 p-4 text-center text-sm text-muted-foreground">
               Custom field requires Hook
@@ -83,17 +147,16 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
       case 'select':
         return renderSelect()
       case 'array':
-        return (
-          <div className="rounded-md border border-dashed border-muted-foreground/25 bg-muted/10 p-4 text-center text-sm text-muted-foreground">
-            Array fields not yet supported
-          </div>
-        )
+        if (!schema.items || schema.items.type === 'object') {
+          return (
+            <div className="rounded-md border border-dashed border-muted-foreground/25 bg-muted/10 p-4 text-center text-sm text-muted-foreground">
+              Complex array requires Hook
+            </div>
+          )
+        }
+        return renderPrimitiveArrayEditor()
       case 'object':
-        return (
-          <div className="rounded-md border border-dashed border-muted-foreground/25 bg-muted/10 p-4 text-center text-sm text-muted-foreground">
-            Object fields not yet supported
-          </div>
-        )
+        return renderObjectEditor()
       case 'textarea':
         return renderTextarea()
       default:
@@ -107,14 +170,27 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
 
   /**
    * 渲染 Switch 组件（用于 boolean 类型）
+   * 使用水平布局：标签+描述在左，开关在右
    */
   const renderSwitch = () => {
     const checked = Boolean(value)
     return (
-      <Switch
-        checked={checked}
-        onCheckedChange={(checked) => onChange(checked)}
-      />
+      <div className="flex items-center justify-between rounded-lg border p-3 sm:p-4">
+        <div className="space-y-0.5 pr-4">
+          <Label className="text-sm font-medium flex items-center gap-2">
+            {renderIcon()}
+            {schema.label}
+            {schema.required && <span className="text-destructive">*</span>}
+          </Label>
+          {schema.description && (
+            <p className="text-[13px] text-muted-foreground">{schema.description}</p>
+          )}
+        </div>
+        <Switch
+          checked={checked}
+          onCheckedChange={(checked) => onChange(checked)}
+        />
+      </div>
     )
   }
 
@@ -169,11 +245,11 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
   /**
    * 渲染 Input[type="text"] 组件（用于 string 类型）
    */
-  const renderTextInput = () => {
+  const renderTextInput = (type: 'password' | 'text' = 'text') => {
     const strValue = typeof value === 'string' ? value : (schema.default as string ?? '')
     return (
       <Input
-        type="text"
+        type={type}
         value={strValue}
         onChange={(e) => onChange(e.target.value)}
       />
@@ -225,6 +301,16 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
     )
   }
 
+  // 判断当前字段是否为 Switch/Boolean 类型（独立处理布局）
+  const isBoolean =
+    schema['x-widget'] === 'switch' ||
+    (!schema['x-widget'] && schema.type === 'boolean')
+
+  // Switch/Boolean 字段自带完整布局，直接返回
+  if (isBoolean) {
+    return renderInputComponent()
+  }
+
   return (
     <div className="space-y-2">
       {/* Label with icon */}
@@ -239,7 +325,7 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
 
       {/* Description */}
       {schema.description && (
-        <p className="text-sm text-muted-foreground">{schema.description}</p>
+        <p className="text-[13px] text-muted-foreground">{schema.description}</p>
       )}
     </div>
   )
diff --git a/dashboard/src/components/dynamic-form/__tests__/DynamicConfigForm.test.tsx b/dashboard/src/components/dynamic-form/__tests__/DynamicConfigForm.test.tsx
index c2328ce4..b142e3b1 100644
--- a/dashboard/src/components/dynamic-form/__tests__/DynamicConfigForm.test.tsx
+++ b/dashboard/src/components/dynamic-form/__tests__/DynamicConfigForm.test.tsx
@@ -85,7 +85,6 @@ describe('DynamicConfigForm', () => {
       render(<DynamicConfigForm schema={schema} values={values} onChange={onChange} />)
 
       expect(screen.getByText('Top Field')).toBeInTheDocument()
-      expect(screen.getByText('SubConfig')).toBeInTheDocument()
       expect(screen.getByText('Sub configuration')).toBeInTheDocument()
       expect(screen.getByText('Nested Field')).toBeInTheDocument()
     })
@@ -305,6 +304,71 @@ describe('DynamicConfigForm', () => {
 
       expect(onChange).toHaveBeenCalledWith('hooked_field', 'hook_value')
     })
+
+    it('renders nested Hook component with full field path', async () => {
+      const NestedHookComponent: React.FC<FieldHookComponentProps> = ({ fieldPath, onChange }) => {
+        return (
+          <button onClick={() => onChange?.([{ enabled: true }])}>
+            {fieldPath}
+          </button>
+        )
+      }
+
+      const hooks = new FieldHookRegistry()
+      hooks.register('mcp.servers', NestedHookComponent, 'replace')
+
+      const schema: ConfigSchema = {
+        className: 'RootConfig',
+        classDoc: 'Root configuration',
+        fields: [],
+        nested: {
+          mcp: {
+            className: 'MCPConfig',
+            classDoc: 'MCP 配置',
+            fields: [
+              {
+                name: 'enable',
+                type: 'boolean',
+                label: '启用 MCP',
+                description: '是否启用 MCP',
+                required: false,
+              },
+              {
+                name: 'servers',
+                type: 'array',
+                label: '服务器列表',
+                description: '复杂对象数组',
+                required: false,
+                items: {
+                  type: 'object',
+                },
+              },
+            ],
+            nested: {
+              servers: {
+                className: 'MCPServerItemConfig',
+                classDoc: 'MCP 服务器项',
+                fields: [],
+              },
+            },
+          },
+        },
+      }
+      const values = {
+        mcp: {
+          enable: true,
+          servers: [],
+        },
+      }
+      const onChange = vi.fn()
+      const user = userEvent.setup()
+
+      render(<DynamicConfigForm schema={schema} values={values} onChange={onChange} hooks={hooks} />)
+
+      await user.click(screen.getByRole('button', { name: 'mcp.servers' }))
+
+      expect(onChange).toHaveBeenCalledWith('mcp.servers', [{ enabled: true }])
+    })
   })
 
   describe('edge cases', () => {
@@ -334,7 +398,7 @@ describe('DynamicConfigForm', () => {
 
       render(<DynamicConfigForm schema={schema} values={values} onChange={onChange} />)
 
-      expect(screen.getByText('SubConfig')).toBeInTheDocument()
+      expect(screen.getByText('Sub configuration')).toBeInTheDocument()
       expect(screen.getByText('Nested Field')).toBeInTheDocument()
     })
 
diff --git a/dashboard/src/components/dynamic-form/__tests__/DynamicField.test.tsx b/dashboard/src/components/dynamic-form/__tests__/DynamicField.test.tsx
index d95d7408..f018643b 100644
--- a/dashboard/src/components/dynamic-form/__tests__/DynamicField.test.tsx
+++ b/dashboard/src/components/dynamic-form/__tests__/DynamicField.test.tsx
@@ -207,22 +207,25 @@ describe('DynamicField', () => {
       expect(screen.getByRole('combobox')).toBeInTheDocument()
     })
 
-    it('renders placeholder for array type', () => {
+    it('renders textarea editor for primitive array type', () => {
       const schema: FieldSchema = {
         name: 'test_array',
         type: 'array',
         label: 'Test Array',
         description: 'A test array',
         required: false,
+        items: {
+          type: 'string',
+        },
       }
       const onChange = vi.fn()
 
-      render(<DynamicField schema={schema} value={[]} onChange={onChange} />)
+      render(<DynamicField schema={schema} value={['a', 'b']} onChange={onChange} />)
 
-      expect(screen.getByText('Array fields not yet supported')).toBeInTheDocument()
+      expect(screen.getByRole('textbox')).toHaveValue('a\nb')
     })
 
-    it('renders placeholder for object type', () => {
+    it('renders key-value editor for object type', () => {
       const schema: FieldSchema = {
         name: 'test_object',
         type: 'object',
@@ -232,9 +235,10 @@ describe('DynamicField', () => {
       }
       const onChange = vi.fn()
 
-      render(<DynamicField schema={schema} value={{}} onChange={onChange} />)
+      render(<DynamicField schema={schema} value={{ foo: 'bar' }} onChange={onChange} />)
 
-      expect(screen.getByText('Object fields not yet supported')).toBeInTheDocument()
+      expect(screen.getByText('可视化编辑')).toBeInTheDocument()
+      expect(screen.getByDisplayValue('foo')).toBeInTheDocument()
     })
   })
 
diff --git a/dashboard/src/lib/field-hooks.ts b/dashboard/src/lib/field-hooks.ts
index 2be1b866..9efa691b 100644
--- a/dashboard/src/lib/field-hooks.ts
+++ b/dashboard/src/lib/field-hooks.ts
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import type { ConfigSchema, FieldSchema } from '@/types/config-schema'
 
 /**
  * Hook type for field-level customization
@@ -13,6 +14,7 @@ export interface FieldHookComponentProps {
   value: unknown
   onChange?: (value: unknown) => void
   children?: ReactNode
+  schema?: ConfigSchema | FieldSchema
 }
 
 /**
diff --git a/dashboard/src/routes/config/bot.tsx b/dashboard/src/routes/config/bot.tsx
index 5e02fdae..44c48884 100644
--- a/dashboard/src/routes/config/bot.tsx
+++ b/dashboard/src/routes/config/bot.tsx
@@ -27,55 +27,37 @@ import { RestartProvider, useRestart } from '@/lib/restart-context'
 import { Code2, Info, Layout, Power, Save } from 'lucide-react'
 
 import type { ConfigSchema } from '@/types/config-schema'
-import type {
-  BotConfig,
-  ChatConfig,
-  ChineseTypoConfig,
-  DebugConfig,
-  DreamConfig,
-  EmojiConfig,
-  ExperimentalConfig,
-  ExpressionConfig,
-  KeywordReactionConfig,
-  LogConfig,
-  LPMMKnowledgeConfig,
-  MaimMessageConfig,
-  MemoryConfig,
-  MessageReceiveConfig,
-  PersonalityConfig,
-  ResponsePostProcessConfig,
-  ResponseSplitterConfig,
-  TelemetryConfig,
-  ToolConfig,
-  VoiceConfig,
-  WebUIConfig,
-} from './bot/types'
-import { useAutoSave, useConfigAutoSave } from './bot/hooks'
-import { ChatSectionHook } from './bot/hooks'
 import {
-  BotInfoSection,
-  DebugSection,
-  DreamSection,
-  ExperimentalSection,
-  ExpressionSection,
-  FeaturesSection,
-  LogSection,
-  LPMMSection,
-  MaimMessageSection,
-  MessageReceiveSection,
-  PersonalitySection,
-  ProcessingSection,
-  TelemetrySection,
-  WebUISection,
-} from './bot/sections'
+  ChatTalkValueRulesHook,
+  ExperimentalChatPromptsHook,
+  ExpressionGroupsHook,
+  ExpressionLearningListHook,
+  KeywordRulesHook,
+  MCPRootItemsHook,
+  MCPServersHook,
+  RegexRulesHook,
+  useAutoSave,
+  useConfigAutoSave,
+} from './bot/hooks'
+
+type ConfigSectionData = Record<string, unknown>
 // ==================== 常量定义 ====================
 /** Toast 显示前的延迟时间 (毫秒) */
 const TOAST_DISPLAY_DELAY = 500
 
 /** Tab 标签页的首选排列顺序 (host field name) */
 const TAB_ORDER = [
-  'bot', 'personality', 'chat', 'expression', 'emoji',
-  'response_post_process', 'dream', 'lpmm_knowledge', 'webui', 'debug',
+  'bot',
+  'personality',
+  'chat',
+  'expression',
+  'emoji',
+  'response_post_process',
+  'lpmm_knowledge',
+  'webui',
+  'maisaka',
+  'plugin_runtime',
+  'debug',
 ]
 
 // ==================== Tab 分组类型与构建 ====================
@@ -88,30 +70,51 @@ interface TabGroup {
 
 /**
  * 从 schema 的 nested 字段解析出 tab 分组信息。
- * - 有 uiLabel 且无 uiParent → 独立 tab (host)
- * - 有 uiParent → 归入对应 host tab 的 sections
+ * - 有 uiLabel 且无 uiParent → 独立 tab
+ * - 有 uiParent → 递归找到最终 host，并归入对应 tab
  */
 function buildTabGroupsFromSchema(schema: ConfigSchema): TabGroup[] {
   const nested = schema.nested || {}
+  const nestedEntries = Object.entries(nested)
   const hosts = new Map<string, TabGroup>()
-  const children: Array<{ fieldName: string; parentId: string }> = []
 
-  for (const [fieldName, fieldSchema] of Object.entries(nested)) {
-    if (fieldSchema.uiLabel && !fieldSchema.uiParent) {
+  const resolveHostId = (fieldName: string, visited: Set<string> = new Set()): string | null => {
+    if (visited.has(fieldName)) {
+      return null
+    }
+
+    const fieldSchema = nested[fieldName]
+    if (!fieldSchema) {
+      return null
+    }
+
+    if (!fieldSchema.uiParent) {
+      return fieldSchema.uiLabel && fieldSchema.uiIcon ? fieldName : null
+    }
+
+    visited.add(fieldName)
+    return resolveHostId(fieldSchema.uiParent, visited)
+  }
+
+  for (const [fieldName, fieldSchema] of nestedEntries) {
+    if (fieldSchema.uiLabel && fieldSchema.uiIcon && !fieldSchema.uiParent) {
       hosts.set(fieldName, {
         id: fieldName,
         label: fieldSchema.uiLabel,
         icon: fieldSchema.uiIcon || '',
         sections: [fieldName],
       })
-    } else if (fieldSchema.uiParent) {
-      children.push({ fieldName, parentId: fieldSchema.uiParent })
     }
   }
 
-  for (const { fieldName, parentId } of children) {
-    const parent = hosts.get(parentId)
-    if (parent) {
+  for (const [fieldName] of nestedEntries) {
+    const hostId = resolveHostId(fieldName)
+    if (!hostId || hostId === fieldName) {
+      continue
+    }
+
+    const parent = hosts.get(hostId)
+    if (parent && !parent.sections.includes(fieldName)) {
       parent.sections.push(fieldName)
     }
   }
@@ -147,27 +150,29 @@ function BotConfigPageContent() {
   const { triggerRestart, isRestarting } = useRestart()
 
   // 配置状态
-  const [botConfig, setBotConfig] = useState<BotConfig | null>(null)
-  const [personalityConfig, setPersonalityConfig] = useState<PersonalityConfig | null>(null)
-  const [chatConfig, setChatConfig] = useState<ChatConfig | null>(null)
-  const [expressionConfig, setExpressionConfig] = useState<ExpressionConfig | null>(null)
-  const [emojiConfig, setEmojiConfig] = useState<EmojiConfig | null>(null)
-  const [memoryConfig, setMemoryConfig] = useState<MemoryConfig | null>(null)
-  const [toolConfig, setToolConfig] = useState<ToolConfig | null>(null)
-  const [voiceConfig, setVoiceConfig] = useState<VoiceConfig | null>(null)
-  const [messageReceiveConfig, setMessageReceiveConfig] = useState<MessageReceiveConfig | null>(null)
-  const [dreamConfig, setDreamConfig] = useState<DreamConfig | null>(null)
-  const [lpmmConfig, setLpmmConfig] = useState<LPMMKnowledgeConfig | null>(null)
-  const [keywordReactionConfig, setKeywordReactionConfig] = useState<KeywordReactionConfig | null>(null)
-  const [responsePostProcessConfig, setResponsePostProcessConfig] = useState<ResponsePostProcessConfig | null>(null)
-  const [chineseTypoConfig, setChineseTypoConfig] = useState<ChineseTypoConfig | null>(null)
-  const [responseSplitterConfig, setResponseSplitterConfig] = useState<ResponseSplitterConfig | null>(null)
-  const [logConfig, setLogConfig] = useState<LogConfig | null>(null)
-  const [debugConfig, setDebugConfig] = useState<DebugConfig | null>(null)
-  const [experimentalConfig, setExperimentalConfig] = useState<ExperimentalConfig | null>(null)
-  const [maimMessageConfig, setMaimMessageConfig] = useState<MaimMessageConfig | null>(null)
-  const [telemetryConfig, setTelemetryConfig] = useState<TelemetryConfig | null>(null)
-  const [webuiConfig, setWebuiConfig] = useState<WebUIConfig | null>(null)
+  const [botConfig, setBotConfig] = useState<ConfigSectionData | null>(null)
+  const [personalityConfig, setPersonalityConfig] = useState<ConfigSectionData | null>(null)
+  const [chatConfig, setChatConfig] = useState<ConfigSectionData | null>(null)
+  const [expressionConfig, setExpressionConfig] = useState<ConfigSectionData | null>(null)
+  const [emojiConfig, setEmojiConfig] = useState<ConfigSectionData | null>(null)
+  const [memoryConfig, setMemoryConfig] = useState<ConfigSectionData | null>(null)
+  const [relationshipConfig, setRelationshipConfig] = useState<ConfigSectionData | null>(null)
+  const [voiceConfig, setVoiceConfig] = useState<ConfigSectionData | null>(null)
+  const [messageReceiveConfig, setMessageReceiveConfig] = useState<ConfigSectionData | null>(null)
+  const [lpmmConfig, setLpmmConfig] = useState<ConfigSectionData | null>(null)
+  const [keywordReactionConfig, setKeywordReactionConfig] = useState<ConfigSectionData | null>(null)
+  const [responsePostProcessConfig, setResponsePostProcessConfig] = useState<ConfigSectionData | null>(null)
+  const [chineseTypoConfig, setChineseTypoConfig] = useState<ConfigSectionData | null>(null)
+  const [responseSplitterConfig, setResponseSplitterConfig] = useState<ConfigSectionData | null>(null)
+  const [debugConfig, setDebugConfig] = useState<ConfigSectionData | null>(null)
+  const [experimentalConfig, setExperimentalConfig] = useState<ConfigSectionData | null>(null)
+  const [maimMessageConfig, setMaimMessageConfig] = useState<ConfigSectionData | null>(null)
+  const [telemetryConfig, setTelemetryConfig] = useState<ConfigSectionData | null>(null)
+  const [webuiConfig, setWebuiConfig] = useState<ConfigSectionData | null>(null)
+  const [databaseConfig, setDatabaseConfig] = useState<ConfigSectionData | null>(null)
+  const [maisakaConfig, setMaisakaConfig] = useState<ConfigSectionData | null>(null)
+  const [mcpConfig, setMcpConfig] = useState<ConfigSectionData | null>(null)
+  const [pluginRuntimeConfig, setPluginRuntimeConfig] = useState<ConfigSectionData | null>(null)
 
   // Schema 状态（用于动态 tab 分组）
   const [configSchema, setConfigSchema] = useState<ConfigSchema | null>(null)
@@ -242,34 +247,29 @@ function BotConfigPageContent() {
   const parseAndSetConfig = useCallback((config: Record<string, unknown>) => {
     configRef.current = config
 
-    setBotConfig(config.bot as BotConfig)
-    setPersonalityConfig(config.personality as PersonalityConfig)
-    
-    // 确保 chat 配置和 talk_value_rules 有默认值
-    const chatConfigData = (config.chat ?? {}) as ChatConfig
-    if (!chatConfigData.talk_value_rules) {
-      chatConfigData.talk_value_rules = []
-    }
-    setChatConfig(chatConfigData)
-    
-    setExpressionConfig(config.expression as ExpressionConfig)
-    setEmojiConfig(config.emoji as EmojiConfig)
-    setMemoryConfig(config.memory as MemoryConfig)
-    setToolConfig(config.tool as ToolConfig)
-    setVoiceConfig(config.voice as VoiceConfig)
-    setMessageReceiveConfig(config.message_receive as MessageReceiveConfig)
-    setDreamConfig(config.dream as DreamConfig)
-    setLpmmConfig(config.lpmm_knowledge as LPMMKnowledgeConfig)
-    setKeywordReactionConfig(config.keyword_reaction as KeywordReactionConfig)
-    setResponsePostProcessConfig(config.response_post_process as ResponsePostProcessConfig)
-    setChineseTypoConfig(config.chinese_typo as ChineseTypoConfig)
-    setResponseSplitterConfig(config.response_splitter as ResponseSplitterConfig)
-    setLogConfig(config.log as LogConfig)
-    setDebugConfig(config.debug as DebugConfig)
-    setExperimentalConfig(config.experimental as ExperimentalConfig)
-    setMaimMessageConfig(config.maim_message as MaimMessageConfig)
-    setTelemetryConfig(config.telemetry as TelemetryConfig)
-    setWebuiConfig(config.webui as WebUIConfig)
+    setBotConfig((config.bot ?? {}) as ConfigSectionData)
+    setPersonalityConfig((config.personality ?? {}) as ConfigSectionData)
+    setChatConfig((config.chat ?? {}) as ConfigSectionData)
+    setExpressionConfig((config.expression ?? {}) as ConfigSectionData)
+    setEmojiConfig((config.emoji ?? {}) as ConfigSectionData)
+    setMemoryConfig((config.memory ?? {}) as ConfigSectionData)
+    setRelationshipConfig((config.relationship ?? {}) as ConfigSectionData)
+    setVoiceConfig((config.voice ?? {}) as ConfigSectionData)
+    setMessageReceiveConfig((config.message_receive ?? {}) as ConfigSectionData)
+    setLpmmConfig((config.lpmm_knowledge ?? {}) as ConfigSectionData)
+    setKeywordReactionConfig((config.keyword_reaction ?? {}) as ConfigSectionData)
+    setResponsePostProcessConfig((config.response_post_process ?? {}) as ConfigSectionData)
+    setChineseTypoConfig((config.chinese_typo ?? {}) as ConfigSectionData)
+    setResponseSplitterConfig((config.response_splitter ?? {}) as ConfigSectionData)
+    setDebugConfig((config.debug ?? {}) as ConfigSectionData)
+    setExperimentalConfig((config.experimental ?? {}) as ConfigSectionData)
+    setMaimMessageConfig((config.maim_message ?? {}) as ConfigSectionData)
+    setTelemetryConfig((config.telemetry ?? {}) as ConfigSectionData)
+    setWebuiConfig((config.webui ?? {}) as ConfigSectionData)
+    setDatabaseConfig((config.database ?? {}) as ConfigSectionData)
+    setMaisakaConfig((config.maisaka ?? {}) as ConfigSectionData)
+    setMcpConfig((config.mcp ?? {}) as ConfigSectionData)
+    setPluginRuntimeConfig((config.plugin_runtime ?? {}) as ConfigSectionData)
   }, [])
 
   /**
@@ -285,28 +285,48 @@ function BotConfigPageContent() {
       expression: expressionConfig,
       emoji: emojiConfig,
       memory: memoryConfig,
-      tool: toolConfig,
+      relationship: relationshipConfig,
       voice: voiceConfig,
       message_receive: messageReceiveConfig,
-      dream: dreamConfig,
       lpmm_knowledge: lpmmConfig,
       keyword_reaction: keywordReactionConfig,
       response_post_process: responsePostProcessConfig,
       chinese_typo: chineseTypoConfig,
       response_splitter: responseSplitterConfig,
-      log: logConfig,
       debug: debugConfig,
       experimental: experimentalConfig,
       maim_message: maimMessageConfig,
       telemetry: telemetryConfig,
       webui: webuiConfig,
+      database: databaseConfig,
+      maisaka: maisakaConfig,
+      mcp: mcpConfig,
+      plugin_runtime: pluginRuntimeConfig,
     }
   }, [
-    botConfig, personalityConfig, chatConfig, expressionConfig,
-    emojiConfig, memoryConfig, toolConfig,
-    voiceConfig, messageReceiveConfig, dreamConfig, lpmmConfig, keywordReactionConfig, responsePostProcessConfig,
-    chineseTypoConfig, responseSplitterConfig, logConfig, debugConfig, experimentalConfig,
-    maimMessageConfig, telemetryConfig, webuiConfig
+    botConfig,
+    personalityConfig,
+    chatConfig,
+    expressionConfig,
+    emojiConfig,
+    memoryConfig,
+    relationshipConfig,
+    voiceConfig,
+    messageReceiveConfig,
+    lpmmConfig,
+    keywordReactionConfig,
+    responsePostProcessConfig,
+    chineseTypoConfig,
+    responseSplitterConfig,
+    debugConfig,
+    experimentalConfig,
+    maimMessageConfig,
+    telemetryConfig,
+    webuiConfig,
+    databaseConfig,
+    maisakaConfig,
+    mcpConfig,
+    pluginRuntimeConfig,
   ])
 
   // 加载源代码
@@ -384,9 +404,25 @@ function BotConfigPageContent() {
   }, [loadConfig])
 
   useEffect(() => {
-    fieldHooks.register('chat', ChatSectionHook, 'replace')
+    const hookEntries = [
+      ['chat.talk_value_rules', ChatTalkValueRulesHook],
+      ['experimental.chat_prompts', ExperimentalChatPromptsHook],
+      ['expression.expression_groups', ExpressionGroupsHook],
+      ['expression.learning_list', ExpressionLearningListHook],
+      ['keyword_reaction.keyword_rules', KeywordRulesHook],
+      ['keyword_reaction.regex_rules', RegexRulesHook],
+      ['mcp.client.roots.items', MCPRootItemsHook],
+      ['mcp.servers', MCPServersHook],
+    ] as const
+
+    for (const [fieldPath, hookComponent] of hookEntries) {
+      fieldHooks.register(fieldPath, hookComponent, 'replace')
+    }
+
     return () => {
-      fieldHooks.unregister('chat')
+      for (const [fieldPath] of hookEntries) {
+        fieldHooks.unregister(fieldPath)
+      }
     }
   }, [])
 
@@ -406,19 +442,23 @@ function BotConfigPageContent() {
   useConfigAutoSave(expressionConfig, 'expression', initialLoadRef.current, triggerAutoSave)
   useConfigAutoSave(emojiConfig, 'emoji', initialLoadRef.current, triggerAutoSave)
   useConfigAutoSave(memoryConfig, 'memory', initialLoadRef.current, triggerAutoSave)
-  useConfigAutoSave(toolConfig, 'tool', initialLoadRef.current, triggerAutoSave)
+  useConfigAutoSave(relationshipConfig, 'relationship', initialLoadRef.current, triggerAutoSave)
   useConfigAutoSave(voiceConfig, 'voice', initialLoadRef.current, triggerAutoSave)
-  useConfigAutoSave(dreamConfig, 'dream', initialLoadRef.current, triggerAutoSave)
+  useConfigAutoSave(messageReceiveConfig, 'message_receive', initialLoadRef.current, triggerAutoSave)
   useConfigAutoSave(lpmmConfig, 'lpmm_knowledge', initialLoadRef.current, triggerAutoSave)
   useConfigAutoSave(keywordReactionConfig, 'keyword_reaction', initialLoadRef.current, triggerAutoSave)
   useConfigAutoSave(responsePostProcessConfig, 'response_post_process', initialLoadRef.current, triggerAutoSave)
   useConfigAutoSave(chineseTypoConfig, 'chinese_typo', initialLoadRef.current, triggerAutoSave)
   useConfigAutoSave(responseSplitterConfig, 'response_splitter', initialLoadRef.current, triggerAutoSave)
-  useConfigAutoSave(logConfig, 'log', initialLoadRef.current, triggerAutoSave)
   useConfigAutoSave(debugConfig, 'debug', initialLoadRef.current, triggerAutoSave)
+  useConfigAutoSave(experimentalConfig, 'experimental', initialLoadRef.current, triggerAutoSave)
   useConfigAutoSave(maimMessageConfig, 'maim_message', initialLoadRef.current, triggerAutoSave)
   useConfigAutoSave(telemetryConfig, 'telemetry', initialLoadRef.current, triggerAutoSave)
   useConfigAutoSave(webuiConfig, 'webui', initialLoadRef.current, triggerAutoSave)
+  useConfigAutoSave(databaseConfig, 'database', initialLoadRef.current, triggerAutoSave)
+  useConfigAutoSave(maisakaConfig, 'maisaka', initialLoadRef.current, triggerAutoSave)
+  useConfigAutoSave(mcpConfig, 'mcp', initialLoadRef.current, triggerAutoSave)
+  useConfigAutoSave(pluginRuntimeConfig, 'plugin_runtime', initialLoadRef.current, triggerAutoSave)
 
   // 保存源代码
   const saveSourceCode = async () => {
@@ -609,6 +649,89 @@ function BotConfigPageContent() {
     return buildTabGroupsFromSchema(configSchema)
   }, [configSchema])
 
+  const sectionValues = useMemo<Record<string, ConfigSectionData | null>>(
+    () => ({
+      bot: botConfig,
+      personality: personalityConfig,
+      chat: chatConfig,
+      expression: expressionConfig,
+      emoji: emojiConfig,
+      memory: memoryConfig,
+      relationship: relationshipConfig,
+      voice: voiceConfig,
+      message_receive: messageReceiveConfig,
+      lpmm_knowledge: lpmmConfig,
+      keyword_reaction: keywordReactionConfig,
+      response_post_process: responsePostProcessConfig,
+      chinese_typo: chineseTypoConfig,
+      response_splitter: responseSplitterConfig,
+      debug: debugConfig,
+      experimental: experimentalConfig,
+      maim_message: maimMessageConfig,
+      telemetry: telemetryConfig,
+      webui: webuiConfig,
+      database: databaseConfig,
+      maisaka: maisakaConfig,
+      mcp: mcpConfig,
+      plugin_runtime: pluginRuntimeConfig,
+    }),
+    [
+      botConfig,
+      personalityConfig,
+      chatConfig,
+      expressionConfig,
+      emojiConfig,
+      memoryConfig,
+      relationshipConfig,
+      voiceConfig,
+      messageReceiveConfig,
+      lpmmConfig,
+      keywordReactionConfig,
+      responsePostProcessConfig,
+      chineseTypoConfig,
+      responseSplitterConfig,
+      debugConfig,
+      experimentalConfig,
+      maimMessageConfig,
+      telemetryConfig,
+      webuiConfig,
+      databaseConfig,
+      maisakaConfig,
+      mcpConfig,
+      pluginRuntimeConfig,
+    ]
+  )
+
+  const setSectionValue = useCallback((sectionName: string, value: ConfigSectionData) => {
+    const sectionSetterMap: Record<string, (nextValue: ConfigSectionData) => void> = {
+      bot: setBotConfig,
+      personality: setPersonalityConfig,
+      chat: setChatConfig,
+      expression: setExpressionConfig,
+      emoji: setEmojiConfig,
+      memory: setMemoryConfig,
+      relationship: setRelationshipConfig,
+      voice: setVoiceConfig,
+      message_receive: setMessageReceiveConfig,
+      lpmm_knowledge: setLpmmConfig,
+      keyword_reaction: setKeywordReactionConfig,
+      response_post_process: setResponsePostProcessConfig,
+      chinese_typo: setChineseTypoConfig,
+      response_splitter: setResponseSplitterConfig,
+      debug: setDebugConfig,
+      experimental: setExperimentalConfig,
+      maim_message: setMaimMessageConfig,
+      telemetry: setTelemetryConfig,
+      webui: setWebuiConfig,
+      database: setDatabaseConfig,
+      maisaka: setMaisakaConfig,
+      mcp: setMcpConfig,
+      plugin_runtime: setPluginRuntimeConfig,
+    }
+
+    sectionSetterMap[sectionName]?.(value)
+  }, [])
+
   if (loading) {
     return (
       <ScrollArea className="h-full">
@@ -748,28 +871,10 @@ function BotConfigPageContent() {
         {/* 可视化模式 */}
         {editMode === 'visual' && (
           <DynamicConfigTabs
+            configSchema={configSchema}
             tabGroups={tabGroups}
-            botConfig={botConfig} setBotConfig={setBotConfig}
-            personalityConfig={personalityConfig} setPersonalityConfig={setPersonalityConfig}
-            chatConfig={chatConfig} setChatConfig={setChatConfig}
-            expressionConfig={expressionConfig} setExpressionConfig={setExpressionConfig}
-            emojiConfig={emojiConfig} setEmojiConfig={setEmojiConfig}
-            memoryConfig={memoryConfig} setMemoryConfig={setMemoryConfig}
-            toolConfig={toolConfig} setToolConfig={setToolConfig}
-            voiceConfig={voiceConfig} setVoiceConfig={setVoiceConfig}
-            messageReceiveConfig={messageReceiveConfig} setMessageReceiveConfig={setMessageReceiveConfig}
-            dreamConfig={dreamConfig} setDreamConfig={setDreamConfig}
-            lpmmConfig={lpmmConfig} setLpmmConfig={setLpmmConfig}
-            keywordReactionConfig={keywordReactionConfig} setKeywordReactionConfig={setKeywordReactionConfig}
-            responsePostProcessConfig={responsePostProcessConfig} setResponsePostProcessConfig={setResponsePostProcessConfig}
-            chineseTypoConfig={chineseTypoConfig} setChineseTypoConfig={setChineseTypoConfig}
-            responseSplitterConfig={responseSplitterConfig} setResponseSplitterConfig={setResponseSplitterConfig}
-            logConfig={logConfig} setLogConfig={setLogConfig}
-            debugConfig={debugConfig} setDebugConfig={setDebugConfig}
-            experimentalConfig={experimentalConfig} setExperimentalConfig={setExperimentalConfig}
-            maimMessageConfig={maimMessageConfig} setMaimMessageConfig={setMaimMessageConfig}
-            telemetryConfig={telemetryConfig} setTelemetryConfig={setTelemetryConfig}
-            webuiConfig={webuiConfig} setWebuiConfig={setWebuiConfig}
+            sectionValues={sectionValues}
+            setSectionValue={setSectionValue}
             setHasUnsavedChanges={setHasUnsavedChanges}
           />
         )}
@@ -783,133 +888,90 @@ function BotConfigPageContent() {
 
 // ==================== 动态 Tab 渲染组件 ====================
 
+function updateNestedValue(
+  target: ConfigSectionData | null | undefined,
+  pathSegments: string[],
+  value: unknown
+): ConfigSectionData {
+  const currentTarget = target && typeof target === 'object' && !Array.isArray(target) ? target : {}
+  const [currentPath, ...restPath] = pathSegments
+
+  if (!currentPath) {
+    return currentTarget
+  }
+
+  if (restPath.length === 0) {
+    return {
+      ...currentTarget,
+      [currentPath]: value,
+    }
+  }
+
+  return {
+    ...currentTarget,
+    [currentPath]: updateNestedValue(currentTarget[currentPath] as ConfigSectionData | undefined, restPath, value),
+  }
+}
+
 interface DynamicConfigTabsProps {
+  configSchema: ConfigSchema | null
   tabGroups: TabGroup[]
-  botConfig: BotConfig | null
-  setBotConfig: (c: BotConfig) => void
-  personalityConfig: PersonalityConfig | null
-  setPersonalityConfig: (c: PersonalityConfig) => void
-  chatConfig: ChatConfig | null
-  setChatConfig: (c: ChatConfig) => void
-  expressionConfig: ExpressionConfig | null
-  setExpressionConfig: (c: ExpressionConfig) => void
-  emojiConfig: EmojiConfig | null
-  setEmojiConfig: (c: EmojiConfig) => void
-  memoryConfig: MemoryConfig | null
-  setMemoryConfig: (c: MemoryConfig) => void
-  toolConfig: ToolConfig | null
-  setToolConfig: (c: ToolConfig) => void
-  voiceConfig: VoiceConfig | null
-  setVoiceConfig: (c: VoiceConfig) => void
-  messageReceiveConfig: MessageReceiveConfig | null
-  setMessageReceiveConfig: (c: MessageReceiveConfig) => void
-  dreamConfig: DreamConfig | null
-  setDreamConfig: (c: DreamConfig) => void
-  lpmmConfig: LPMMKnowledgeConfig | null
-  setLpmmConfig: (c: LPMMKnowledgeConfig) => void
-  keywordReactionConfig: KeywordReactionConfig | null
-  setKeywordReactionConfig: (c: KeywordReactionConfig) => void
-  responsePostProcessConfig: ResponsePostProcessConfig | null
-  setResponsePostProcessConfig: (c: ResponsePostProcessConfig) => void
-  chineseTypoConfig: ChineseTypoConfig | null
-  setChineseTypoConfig: (c: ChineseTypoConfig) => void
-  responseSplitterConfig: ResponseSplitterConfig | null
-  setResponseSplitterConfig: (c: ResponseSplitterConfig) => void
-  logConfig: LogConfig | null
-  setLogConfig: (c: LogConfig) => void
-  debugConfig: DebugConfig | null
-  setDebugConfig: (c: DebugConfig) => void
-  experimentalConfig: ExperimentalConfig | null
-  setExperimentalConfig: (c: ExperimentalConfig) => void
-  maimMessageConfig: MaimMessageConfig | null
-  setMaimMessageConfig: (c: MaimMessageConfig) => void
-  telemetryConfig: TelemetryConfig | null
-  setTelemetryConfig: (c: TelemetryConfig) => void
-  webuiConfig: WebUIConfig | null
-  setWebuiConfig: (c: WebUIConfig) => void
+  sectionValues: Record<string, ConfigSectionData | null>
+  setSectionValue: (sectionName: string, value: ConfigSectionData) => void
   setHasUnsavedChanges: (v: boolean) => void
 }
 
 function DynamicConfigTabs(props: DynamicConfigTabsProps) {
-  const { tabGroups } = props
+  const { configSchema, sectionValues, setHasUnsavedChanges, setSectionValue, tabGroups } = props
 
-  // 每个 tab host field name → 对应的 ReactNode 内容
-  const tabContentMap: Record<string, React.ReactNode> = {
-    bot: props.botConfig && (
-      <BotInfoSection config={props.botConfig} onChange={props.setBotConfig} />
-    ),
-    personality: props.personalityConfig && (
-      <PersonalitySection config={props.personalityConfig} onChange={props.setPersonalityConfig} />
-    ),
-    chat: props.chatConfig && (
+  if (tabGroups.length === 0 || !configSchema?.nested) {
+    return null
+  }
+
+  const renderTabContent = (tab: TabGroup) => {
+    const tabNestedEntries = tab.sections
+      .map((sectionName) => [sectionName, configSchema.nested?.[sectionName]] as const)
+      .filter((entry): entry is readonly [string, ConfigSchema] => Boolean(entry[1]))
+
+    if (tabNestedEntries.length === 0) {
+      return null
+    }
+
+    const values = Object.fromEntries(
+      tabNestedEntries.map(([sectionName]) => [sectionName, sectionValues[sectionName] ?? {}])
+    )
+
+    const tabSchema: ConfigSchema = {
+      className: tab.id,
+      classDoc: tab.label,
+      fields: [],
+      nested: Object.fromEntries(tabNestedEntries),
+    }
+
+    return (
       <DynamicConfigForm
-        schema={{ className: 'ChatConfig', classDoc: '聊天配置', fields: [{ name: 'chat', type: 'object', label: '聊天', description: '聊天配置', required: false }], nested: {} }}
-        values={{ chat: props.chatConfig }}
-        onChange={(field, value) => {
-          if (field === 'chat') {
-            props.setChatConfig(value as ChatConfig)
-            props.setHasUnsavedChanges(true)
+        schema={tabSchema}
+        values={values}
+        onChange={(fieldPath, value) => {
+          const [sectionName, ...restPath] = fieldPath.split('.')
+          if (!sectionName) {
+            return
           }
+
+          const currentSectionValue = sectionValues[sectionName] ?? {}
+          const nextSectionValue =
+            restPath.length === 0
+              ? (value as ConfigSectionData)
+              : updateNestedValue(currentSectionValue, restPath, value)
+
+          setSectionValue(sectionName, nextSectionValue)
+          setHasUnsavedChanges(true)
         }}
         hooks={fieldHooks}
       />
-    ),
-    expression: props.expressionConfig && (
-      <ExpressionSection config={props.expressionConfig} onChange={props.setExpressionConfig} />
-    ),
-    emoji: props.emojiConfig && props.memoryConfig && props.toolConfig && props.voiceConfig && (
-      <FeaturesSection
-        emojiConfig={props.emojiConfig}
-        memoryConfig={props.memoryConfig}
-        toolConfig={props.toolConfig}
-        voiceConfig={props.voiceConfig}
-        onEmojiChange={props.setEmojiConfig}
-        onMemoryChange={props.setMemoryConfig}
-        onToolChange={props.setToolConfig}
-        onVoiceChange={props.setVoiceConfig}
-      />
-    ),
-    response_post_process: (
-      <>
-        {props.keywordReactionConfig && props.responsePostProcessConfig && props.chineseTypoConfig && props.responseSplitterConfig && (
-          <ProcessingSection
-            keywordReactionConfig={props.keywordReactionConfig}
-            responsePostProcessConfig={props.responsePostProcessConfig}
-            chineseTypoConfig={props.chineseTypoConfig}
-            responseSplitterConfig={props.responseSplitterConfig}
-            onKeywordReactionChange={props.setKeywordReactionConfig}
-            onResponsePostProcessChange={props.setResponsePostProcessConfig}
-            onChineseTypoChange={props.setChineseTypoConfig}
-            onResponseSplitterChange={props.setResponseSplitterConfig}
-          />
-        )}
-        {props.messageReceiveConfig && (
-          <MessageReceiveSection config={props.messageReceiveConfig} onChange={props.setMessageReceiveConfig} />
-        )}
-      </>
-    ),
-    dream: props.dreamConfig && (
-      <DreamSection config={props.dreamConfig} onChange={props.setDreamConfig} />
-    ),
-    lpmm_knowledge: props.lpmmConfig && (
-      <LPMMSection config={props.lpmmConfig} onChange={props.setLpmmConfig} />
-    ),
-    webui: props.webuiConfig && (
-      <WebUISection config={props.webuiConfig} onChange={props.setWebuiConfig} />
-    ),
-    debug: (
-      <>
-        {props.logConfig && <LogSection config={props.logConfig} onChange={props.setLogConfig} />}
-        {props.debugConfig && <DebugSection config={props.debugConfig} onChange={props.setDebugConfig} />}
-        {props.experimentalConfig && <ExperimentalSection config={props.experimentalConfig} onChange={props.setExperimentalConfig} />}
-        {props.maimMessageConfig && <MaimMessageSection config={props.maimMessageConfig} onChange={props.setMaimMessageConfig} />}
-        {props.telemetryConfig && <TelemetrySection config={props.telemetryConfig} onChange={props.setTelemetryConfig} />}
-      </>
-    ),
+    )
   }
 
-  if (tabGroups.length === 0) return null
-
   return (
     <Tabs defaultValue={tabGroups[0].id} className="w-full">
       <TabsList className="flex flex-wrap h-auto gap-1 p-1">
@@ -925,7 +987,7 @@ function DynamicConfigTabs(props: DynamicConfigTabsProps) {
       </TabsList>
       {tabGroups.map((tab) => (
         <TabsContent key={tab.id} value={tab.id} className="space-y-4">
-          {tabContentMap[tab.id]}
+          {renderTabContent(tab)}
         </TabsContent>
       ))}
     </Tabs>
diff --git a/dashboard/src/routes/config/bot/hooks/JsonFieldHookFactory.tsx b/dashboard/src/routes/config/bot/hooks/JsonFieldHookFactory.tsx
new file mode 100644
index 00000000..71692ca3
--- /dev/null
+++ b/dashboard/src/routes/config/bot/hooks/JsonFieldHookFactory.tsx
@@ -0,0 +1,103 @@
+import { useEffect, useMemo, useState } from 'react'
+
+import { Textarea } from '@/components/ui/textarea'
+import type { FieldHookComponent } from '@/lib/field-hooks'
+import type { ConfigSchema, FieldSchema } from '@/types/config-schema'
+
+interface JsonFieldHookOptions {
+  emptyValue: unknown
+  helperText: string
+  placeholder: string
+}
+
+function resolveLabel(schema?: ConfigSchema | FieldSchema, fieldPath?: string): string {
+  if (!schema) {
+    return fieldPath?.split('.').at(-1) || 'JSON 配置'
+  }
+  if ('label' in schema && schema.label) {
+    return schema.label
+  }
+  if ('uiLabel' in schema && schema.uiLabel) {
+    return schema.uiLabel
+  }
+  if ('classDoc' in schema && schema.classDoc) {
+    return schema.classDoc
+  }
+  if ('className' in schema && schema.className) {
+    return schema.className
+  }
+  return fieldPath?.split('.').at(-1) || 'JSON 配置'
+}
+
+function resolveDescription(schema?: ConfigSchema | FieldSchema): string {
+  if (!schema) {
+    return ''
+  }
+  if ('description' in schema) {
+    return schema.description || ''
+  }
+  if ('classDoc' in schema) {
+    return schema.classDoc || ''
+  }
+  return ''
+}
+
+export function createJsonFieldHook(options: JsonFieldHookOptions): FieldHookComponent {
+  const JsonFieldHook: FieldHookComponent = ({ fieldPath, onChange, schema, value }) => {
+    const normalizedValue = useMemo(() => {
+      if (value === undefined) {
+        return options.emptyValue
+      }
+      return value
+    }, [value])
+
+    const [editorValue, setEditorValue] = useState(() => JSON.stringify(normalizedValue, null, 2))
+    const [errorMessage, setErrorMessage] = useState('')
+
+    useEffect(() => {
+      setEditorValue(JSON.stringify(normalizedValue, null, 2))
+      setErrorMessage('')
+    }, [normalizedValue])
+
+    const label = resolveLabel(schema, fieldPath)
+    const description = resolveDescription(schema)
+
+    return (
+      <div className="space-y-3 rounded-lg border bg-card p-4 sm:p-6">
+        <div className="space-y-1">
+          <h3 className="text-base font-semibold">{label}</h3>
+          {description && (
+            <p className="text-sm text-muted-foreground">{description}</p>
+          )}
+          <p className="text-xs text-muted-foreground">{options.helperText}</p>
+        </div>
+
+        <Textarea
+          className="min-h-[220px] font-mono text-sm"
+          placeholder={options.placeholder}
+          value={editorValue}
+          onChange={(event) => {
+            const nextValue = event.target.value
+            setEditorValue(nextValue)
+
+            try {
+              const parsed = JSON.parse(nextValue)
+              setErrorMessage('')
+              onChange?.(parsed)
+            } catch (error) {
+              setErrorMessage(error instanceof Error ? error.message : 'JSON 格式错误')
+            }
+          }}
+        />
+
+        {errorMessage ? (
+          <p className="text-sm text-destructive">JSON 解析失败：{errorMessage}</p>
+        ) : (
+          <p className="text-sm text-muted-foreground">JSON 有效，修改会立即写回配置草稿。</p>
+        )}
+      </div>
+    )
+  }
+
+  return JsonFieldHook
+}
diff --git a/dashboard/src/routes/config/bot/hooks/complexFieldHooks.tsx b/dashboard/src/routes/config/bot/hooks/complexFieldHooks.tsx
new file mode 100644
index 00000000..63da5ba3
--- /dev/null
+++ b/dashboard/src/routes/config/bot/hooks/complexFieldHooks.tsx
@@ -0,0 +1,49 @@
+import { createJsonFieldHook } from './JsonFieldHookFactory'
+
+export const ChatTalkValueRulesHook = createJsonFieldHook({
+  emptyValue: [],
+  helperText: '复杂对象数组使用 JSON 编辑。每一项对应一个聊天频率规则对象。',
+  placeholder: '[\n  {\n    "platform": "",\n    "item_id": "",\n    "rule_type": "group",\n    "time": "00:00-23:59",\n    "value": 1.0\n  }\n]',
+})
+
+export const ExpressionLearningListHook = createJsonFieldHook({
+  emptyValue: [],
+  helperText: '表达学习配置较复杂，使用 JSON 编辑更稳妥。每一项对应一个学习规则。',
+  placeholder: '[\n  {\n    "platform": "",\n    "item_id": "",\n    "rule_type": "group",\n    "use_expression": true,\n    "enable_learning": true,\n    "enable_jargon_learning": true\n  }\n]',
+})
+
+export const ExpressionGroupsHook = createJsonFieldHook({
+  emptyValue: [],
+  helperText: '表达互通组使用 JSON 编辑。每一项包含一个 expression_groups 数组。',
+  placeholder: '[\n  {\n    "expression_groups": [\n      {\n        "platform": "qq",\n        "item_id": "123456",\n        "rule_type": "group"\n      }\n    ]\n  }\n]',
+})
+
+export const ExperimentalChatPromptsHook = createJsonFieldHook({
+  emptyValue: [],
+  helperText: '实验配置中的定向 Prompt 列表使用 JSON 编辑。每一项应包含 platform、item_id、rule_type、prompt。',
+  placeholder: '[\n  {\n    "platform": "qq",\n    "item_id": "123456",\n    "rule_type": "group",\n    "prompt": "这里填写额外提示词"\n  }\n]',
+})
+
+export const KeywordRulesHook = createJsonFieldHook({
+  emptyValue: [],
+  helperText: '关键词规则为对象数组，建议直接编辑 JSON。',
+  placeholder: '[\n  {\n    "keywords": ["早安"],\n    "regex": [],\n    "reaction": "早安呀"\n  }\n]',
+})
+
+export const RegexRulesHook = createJsonFieldHook({
+  emptyValue: [],
+  helperText: '正则规则为对象数组，建议直接编辑 JSON。',
+  placeholder: '[\n  {\n    "keywords": [],\n    "regex": ["https?://[^\\\\s]+"],\n    "reaction": "检测到链接：[0]"\n  }\n]',
+})
+
+export const MCPRootItemsHook = createJsonFieldHook({
+  emptyValue: [],
+  helperText: 'MCP Roots 条目为对象数组，使用 JSON 编辑。',
+  placeholder: '[\n  {\n    "enabled": true,\n    "uri": "file:///Users/example/project",\n    "name": "project-root"\n  }\n]',
+})
+
+export const MCPServersHook = createJsonFieldHook({
+  emptyValue: [],
+  helperText: 'MCP 服务器配置结构较复杂，使用 JSON 编辑。',
+  placeholder: '[\n  {\n    "name": "example-server",\n    "enabled": true,\n    "transport": "stdio",\n    "command": "uvx",\n    "args": ["example-server"],\n    "env": {},\n    "url": "",\n    "headers": {},\n    "http_timeout_seconds": 30.0,\n    "read_timeout_seconds": 300.0,\n    "authorization": {\n      "mode": "none",\n      "bearer_token": ""\n    }\n  }\n]',
+})
diff --git a/dashboard/src/routes/config/bot/hooks/index.ts b/dashboard/src/routes/config/bot/hooks/index.ts
index 1dc90961..c4988b1e 100644
--- a/dashboard/src/routes/config/bot/hooks/index.ts
+++ b/dashboard/src/routes/config/bot/hooks/index.ts
@@ -10,6 +10,16 @@ export type {
   UseAutoSaveConfig,
   UseAutoSaveReturnGeneric,
 } from './useAutoSave'
+export {
+  ChatTalkValueRulesHook,
+  ExperimentalChatPromptsHook,
+  ExpressionGroupsHook,
+  ExpressionLearningListHook,
+  KeywordRulesHook,
+  MCPRootItemsHook,
+  MCPServersHook,
+  RegexRulesHook,
+} from './complexFieldHooks'
 export { ChatSectionHook } from './ChatSectionHook'
 export { PersonalitySectionHook } from './PersonalitySectionHook'
 export { DebugSectionHook } from './DebugSectionHook'
diff --git a/dashboard/src/routes/config/bot/types.ts b/dashboard/src/routes/config/bot/types.ts
index 7dc60537..210a6a99 100644
--- a/dashboard/src/routes/config/bot/types.ts
+++ b/dashboard/src/routes/config/bot/types.ts
@@ -261,6 +261,7 @@ export type ConfigSectionName =
   | 'expression'
   | 'emoji'
   | 'memory'
+  | 'relationship'
   | 'tool'
   | 'voice'
   | 'message_receive'
@@ -276,3 +277,7 @@ export type ConfigSectionName =
   | 'maim_message'
   | 'telemetry'
   | 'webui'
+  | 'database'
+  | 'maisaka'
+  | 'mcp'
+  | 'plugin_runtime'
diff --git a/dashboard/src/types/config-schema.ts b/dashboard/src/types/config-schema.ts
index c4a5681f..c48f7411 100644
--- a/dashboard/src/types/config-schema.ts
+++ b/dashboard/src/types/config-schema.ts
@@ -12,7 +12,15 @@ export type FieldType =
   | 'object'
   | 'textarea'
 
-export type XWidgetType = 'slider' | 'select' | 'textarea' | 'switch' | 'custom'
+export type XWidgetType =
+  | 'custom'
+  | 'input'
+  | 'number'
+  | 'password'
+  | 'select'
+  | 'slider'
+  | 'switch'
+  | 'textarea'
 
 export interface FieldSchema {
   name: string
diff --git a/pytests/webui/test_config_schema.py b/pytests/webui/test_config_schema.py
index 8bbedd80..7bd5e3fa 100644
--- a/pytests/webui/test_config_schema.py
+++ b/pytests/webui/test_config_schema.py
@@ -1,4 +1,4 @@
-from src.config.official_configs import ChatConfig
+from src.config.official_configs import ChatConfig, MessageReceiveConfig
 from src.config.config import Config
 from src.webui.config_schema import ConfigSchemaGenerator
 
@@ -60,17 +60,49 @@ def test_nested_model_schema():
 def test_field_without_extra_metadata():
     """Test that fields without json_schema_extra still generate valid schema."""
     schema = ConfigSchemaGenerator.generate_schema(ChatConfig)
-    max_context_size = next(f for f in schema["fields"] if f["name"] == "max_context_size")
+    inevitable_at_reply = next(f for f in schema["fields"] if f["name"] == "inevitable_at_reply")
 
     # Verify basic fields are generated
-    assert "name" in max_context_size
-    assert max_context_size["name"] == "max_context_size"
-    assert "type" in max_context_size
-    assert max_context_size["type"] == "integer"
-    assert "label" in max_context_size
-    assert "required" in max_context_size
+    assert "name" in inevitable_at_reply
+    assert inevitable_at_reply["name"] == "inevitable_at_reply"
+    assert "type" in inevitable_at_reply
+    assert inevitable_at_reply["type"] == "boolean"
+    assert "label" in inevitable_at_reply
+    assert "required" in inevitable_at_reply
 
     # Verify no x-widget or x-icon from json_schema_extra (since field has none)
     # These fields should only be present if explicitly defined in json_schema_extra
-    assert not max_context_size.get("x-widget")
-    assert not max_context_size.get("x-icon")
+    assert not inevitable_at_reply.get("x-widget")
+    assert not inevitable_at_reply.get("x-icon")
+
+
+def test_all_top_level_sections_have_ui_metadata():
+    """所有顶层配置节都必须声明 uiParent 或独立 Tab 的标签与图标。"""
+    schema = ConfigSchemaGenerator.generate_schema(Config)
+
+    for section_name, section_schema in schema["nested"].items():
+        has_parent = bool(section_schema.get("uiParent"))
+        has_host_meta = bool(section_schema.get("uiLabel")) and bool(section_schema.get("uiIcon"))
+        assert has_parent or has_host_meta, f"{section_name} 缺少 UI 元数据"
+
+
+def test_maisaka_is_host_tab_and_mcp_is_attached_to_it():
+    """MaiSaka 应作为独立 Tab，MCP 作为其子配置挂载。"""
+    schema = ConfigSchemaGenerator.generate_schema(Config)
+
+    maisaka_schema = schema["nested"]["maisaka"]
+    mcp_schema = schema["nested"]["mcp"]
+
+    assert maisaka_schema.get("uiParent") is None
+    assert maisaka_schema.get("uiLabel") == "MaiSaka"
+    assert maisaka_schema.get("uiIcon") == "message-circle"
+    assert mcp_schema.get("uiParent") == "maisaka"
+
+
+def test_set_field_is_mapped_as_array():
+    """set[str] 应映射为前端可识别的 array。"""
+    schema = ConfigSchemaGenerator.generate_schema(MessageReceiveConfig)
+    ban_words = next(field for field in schema["fields"] if field["name"] == "ban_words")
+
+    assert ban_words["type"] == "array"
+    assert ban_words["items"]["type"] == "string"
diff --git a/src/config/official_configs.py b/src/config/official_configs.py
index 10fa331a..9c800996 100644
--- a/src/config/official_configs.py
+++ b/src/config/official_configs.py
@@ -1473,7 +1473,6 @@ class MaiSakaConfig(ConfigBase):
 
     __ui_label__ = "MaiSaka"
     __ui_icon__ = "message-circle"
-    __ui_parent__ = "experimental"
 
     enable_knowledge_module: bool = Field(
         default=True,
diff --git a/src/webui/config_schema.py b/src/webui/config_schema.py
index 6dfe2381..862da1e5 100644
--- a/src/webui/config_schema.py
+++ b/src/webui/config_schema.py
@@ -1,6 +1,7 @@
-import inspect
 from typing import Any, Dict, List, get_args, get_origin
 
+import inspect
+
 from pydantic_core import PydanticUndefined
 
 from src.config.config_base import ConfigBase
@@ -56,7 +57,7 @@ class ConfigSchemaGenerator:
         if inspect.isclass(annotation) and issubclass(annotation, ConfigBase):
             return cls.generate_config_schema(annotation)
 
-        if origin in {list, tuple} and args:
+        if origin in {list, set, tuple} and args:
             first = args[0]
             if inspect.isclass(first) and issubclass(first, ConfigBase):
                 return cls.generate_config_schema(first)
@@ -83,7 +84,7 @@ class ConfigSchemaGenerator:
         origin = get_origin(annotation)
         args = get_args(annotation)
 
-        if origin is list and args:
+        if origin in {list, set} and args:
             schema["items"] = {"type": cls._map_field_type(args[0])}
 
         if options := cls._extract_options(annotation):
@@ -120,7 +121,7 @@ class ConfigSchemaGenerator:
         origin = get_origin(annotation)
         args = get_args(annotation)
 
-        if origin in {list, tuple}:
+        if origin in {list, set, tuple}:
             return "array"
         if inspect.isclass(annotation) and issubclass(annotation, ConfigBase):
             return "object"
@@ -133,7 +134,7 @@ class ConfigSchemaGenerator:
         if annotation is str:
             return "string"
 
-        if origin in {list, tuple} and args:
+        if origin in {list, set, tuple} and args:
             return "array"
 
         if origin in {dict}:
diff --git a/src/webui/routers/websocket/__init__.py b/src/webui/routers/websocket/__init__.py
index d3cdba75..af4ffdb5 100644
--- a/src/webui/routers/websocket/__init__.py
+++ b/src/webui/routers/websocket/__init__.py
@@ -1,9 +1,7 @@
-"""WebSocket 路由聚合导出。"""
-
-from .auth import router as ws_auth_router
-from .unified import router as unified_ws_router
+"""WebSocket 路由包。"""
 
 __all__ = [
-    "unified_ws_router",
-    "ws_auth_router",
+    "auth",
+    "manager",
+    "unified",
 ]