@vibe-forge/client 2.0.0 → 3.0.0-alpha.0

package/src/components/config/ConfigSectionForm.tsx

@@ -1,57 +1,283 @@
 import './ConfigSectionForm.scss'
 
-import { Collapse, Empty, Input, InputNumber, Select, Slider, Switch } from 'antd'
+import { Button, Collapse, Empty, Input, InputNumber, Select, Slider, Switch } from 'antd'
 import type { ReactNode } from 'react'
+import { Fragment, useMemo } from 'react'
+import useSWR from 'swr'
 
+import type { ConfigUiObjectSchema, ConfigUiSection } from '@vibe-forge/types'
+
+import { getAdapterAccounts } from '#~/api'
 import { normalizeSendShortcut, resolveSendShortcut } from '#~/utils/shortcutUtils'
+
+import { AdapterAccountsManager, mergeAccounts } from './AdapterAccountsManager'
+import { DisplayValue } from './ConfigDisplayValue'
 import { ComplexTextEditor, StringArrayEditor } from './ConfigEditors'
 import { FieldRow } from './ConfigFieldRow'
 import { ShortcutInput } from './ConfigShortcutInput'
+import { DetailCollectionField } from './DetailListField'
+import { McpServerItemEditor } from './McpServerItemEditor'
+import { RecommendedModelsItemEditor } from './RecommendedModelsItemEditor'
+import type { ConfigDetailRoute } from './configDetail'
+import { resolveConfigDetailRouteMeta } from './configDetail'
 import type { FieldSpec } from './configSchema'
-import { configGroupMeta, configSchema } from './configSchema'
+import { configGroupMeta, configGroupOrder, configSchema } from './configSchema'
 import {
   getFieldDescription,
   getFieldLabel,
   getTypeIcon,
   getValueByPath,
   getValueType,
-  isEmptyValue,
   setValueByPath
 } from './configUtils'
 import type { TranslationFn } from './configUtils'
 import {
   BooleanRecordEditor,
-  ChannelRecordEditor,
   KeyValueEditor,
   McpServersRecordEditor,
   ModelServicesRecordEditor,
-  RecordJsonEditor
+  RecordJsonEditor,
+  SchemaObjectEditor,
+  SchemaRecordEditor
 } from './record-editors/index'
+import { resolveConfigUiRecordEntry } from './record-editors/schemaRecordUtils'
+
+const directRecordSections = new Set(['models'])
+const directDetailSections = new Set(['modelServices', 'channels', 'adapters'])
+const defaultGroupOrder = ['base', 'permissions', 'env', 'items', 'default']
+const isRecord = (value: unknown): value is Record<string, unknown> => (
+  value != null && typeof value === 'object' && !Array.isArray(value)
+)
+const isTopLevelField = (path: string[], key: string) => path.length === 1 && path[0] === key
+const configSelectSuffixIcon = (
+  <span className='material-symbols-rounded config-view__select-chevron'>expand_more</span>
+)
 
 export const SectionForm = ({
   sectionKey,
   fields: providedFields,
+  uiSection,
   value,
+  resolvedValue,
   onChange,
   mergedModelServices,
   mergedAdapters,
   selectedModelService,
+  worktreeEnvironmentOptions,
+  detailRoute = null,
+  onOpenDetailRoute,
   t
 }: {
   sectionKey: string
   fields?: FieldSpec[]
+  uiSection?: ConfigUiSection
   value: unknown
+  resolvedValue?: unknown
   onChange: (nextValue: unknown) => void
   mergedModelServices: Record<string, unknown>
   mergedAdapters: Record<string, unknown>
   selectedModelService?: string
+  worktreeEnvironmentOptions?: Array<{ value: string; label: ReactNode }>
+  detailRoute?: ConfigDetailRoute | null
+  onOpenDetailRoute?: (route: ConfigDetailRoute) => void
   t: TranslationFn
 }) => {
   const fields = providedFields ?? configSchema[sectionKey] ?? []
+  const detailContext = {
+    mergedModelServices,
+    mergedAdapters,
+    t
+  }
+  const resolveSchemaFieldLabel = (schemaSectionKey: string) => (field: { path: string[] }, fallback: string) => (
+    getFieldLabel(t, schemaSectionKey, field.path, fallback)
+  )
+  const resolveSchemaFieldDescription = (schemaSectionKey: string) => (field: { path: string[] }, fallback: string) => {
+    const translated = getFieldDescription(t, schemaSectionKey, field.path)
+    return translated !== '' ? translated : fallback
+  }
+  const renderAdapterSection = ({
+    body,
+    title,
+    collapsible = false,
+    defaultExpanded = true,
+    collapseKey = 'section'
+  }: {
+    body: ReactNode
+    title?: string
+    collapsible?: boolean
+    defaultExpanded?: boolean
+    collapseKey?: string
+  }) => {
+    if (collapsible) {
+      return (
+        <Collapse
+          className='config-view__subsection-collapse'
+          ghost
+          expandIconPosition='end'
+          expandIcon={({ isActive }) => (
+            <span
+              className={`material-symbols-rounded config-view__subsection-expand-icon${isActive ? ' is-active' : ''}`}
+            >
+              chevron_right
+            </span>
+          )}
+          defaultActiveKey={defaultExpanded ? [collapseKey] : []}
+          items={[
+            {
+              key: collapseKey,
+              label: <div className='config-view__subsection-title'>{title}</div>,
+              children: body
+            }
+          ]}
+        />
+      )
+    }
+
+    return (
+      <div className='config-view__subsection'>
+        {title != null && title !== '' && (
+          <div className='config-view__subsection-title'>{title}</div>
+        )}
+        {body}
+      </div>
+    )
+  }
+  const renderAdapterSchemaSection = ({
+    schema,
+    currentValue,
+    onCurrentValueChange,
+    visibleFieldPaths,
+    title,
+    collapsible = false,
+    defaultExpanded = true,
+    collapseKey,
+    resolveFieldOptions
+  }: {
+    schema: ConfigUiObjectSchema
+    currentValue: Record<string, unknown>
+    onCurrentValueChange: (nextValue: Record<string, unknown>) => void
+    visibleFieldPaths: string[][]
+    title?: string
+    collapsible?: boolean
+    defaultExpanded?: boolean
+    collapseKey?: string
+    resolveFieldOptions?: Parameters<typeof SchemaObjectEditor>[0]['resolveFieldOptions']
+  }) => {
+    if (visibleFieldPaths.length === 0) return null
+
+    return renderAdapterSection({
+      title,
+      collapsible,
+      defaultExpanded,
+      collapseKey,
+      body: (
+        <div className='config-view__subsection-body'>
+          <SchemaObjectEditor
+            value={currentValue}
+            schema={schema}
+            onChange={onCurrentValueChange}
+            t={t}
+            visibleFieldPaths={visibleFieldPaths}
+            resolveFieldLabel={resolveSchemaFieldLabel('adapters')}
+            resolveFieldDescription={resolveSchemaFieldDescription('adapters')}
+            resolveFieldOptions={resolveFieldOptions}
+          />
+        </div>
+      )
+    })
+  }
+  const renderAdapterAdvancedSections = ({
+    schema,
+    currentValue,
+    onCurrentValueChange,
+    modelSection,
+    advancedSections
+  }: {
+    schema: ConfigUiObjectSchema
+    currentValue: Record<string, unknown>
+    onCurrentValueChange: (nextValue: Record<string, unknown>) => void
+    modelSection?: {
+      title: string
+      visibleFieldPaths: string[][]
+    }
+    advancedSections: Array<{
+      key: string
+      title: string
+      visibleFieldPaths: string[][]
+    }>
+  }) => {
+    const visibleAdvancedSections = advancedSections.filter(section => section.visibleFieldPaths.length > 0)
+    const hasModelSection = modelSection != null && modelSection.visibleFieldPaths.length > 0
+    if (!hasModelSection && visibleAdvancedSections.length === 0) return null
+    const shouldExpandAdvancedByDefault = !hasModelSection && visibleAdvancedSections.length > 0
+
+    return (
+      <div className='config-view__field-stack'>
+        {hasModelSection && renderAdapterSchemaSection({
+          schema,
+          currentValue,
+          onCurrentValueChange,
+          visibleFieldPaths: modelSection.visibleFieldPaths,
+          title: modelSection.title,
+          collapsible: true,
+          defaultExpanded: true,
+          collapseKey: 'models'
+        })}
+        {visibleAdvancedSections.length > 0 && renderAdapterSection({
+          title: t('config.sectionGroups.advanced'),
+          collapsible: true,
+          defaultExpanded: shouldExpandAdvancedByDefault,
+          collapseKey: 'advanced',
+          body: (
+            <div className='config-view__subsection-body'>
+              <div className='config-view__field-stack'>
+                {visibleAdvancedSections.map(section => (
+                  <Fragment key={section.key}>
+                    {renderAdapterSchemaSection({
+                      schema,
+                      currentValue,
+                      onCurrentValueChange,
+                      visibleFieldPaths: section.visibleFieldPaths,
+                      title: section.title
+                    })}
+                  </Fragment>
+                ))}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  if (uiSection?.kind === 'recordMap' && fields.length === 0) {
+    const recordValue = (value != null && typeof value === 'object')
+      ? value as Record<string, unknown>
+      : {}
+    if (uiSection.recordMap.mode === 'discriminated' && (uiSection.recordMap.entryKinds?.length ?? 0) === 0) {
+      return (
+        <RecordJsonEditor
+          value={recordValue}
+          onChange={onChange}
+          t={t}
+          keyPlaceholder={t('config.editor.fieldKey')}
+        />
+      )
+    }
+    return (
+      <SchemaRecordEditor
+        value={recordValue}
+        schema={uiSection.recordMap}
+        onChange={onChange}
+        t={t}
+        keyPlaceholder={uiSection.recordMap.keyPlaceholder ?? t('config.editor.fieldKey')}
+      />
+    )
+  }
+
   if (fields.length === 0) {
     return <Empty description={t('common.noData')} image={null} />
   }
-  const directRecordSections = new Set(['models', 'modelServices', 'channels', 'adapters', 'plugins', 'mcp'])
 
   const modelServiceEntries = Object.entries(mergedModelServices)
   const modelServiceOptions: Array<{ value: string; label: ReactNode }> = modelServiceEntries.map(([key, entry]) => {
@@ -82,37 +308,63 @@ export const SectionForm = ({
       label: <span>{item}</span>
     }))
     : []
-  const adapterOptions: Array<{ value: string; label: ReactNode }> = Object.keys(mergedAdapters)
-    .map(key => ({
-      value: key,
-      label: <span>{key}</span>
-    }))
+  const adapterOptions: Array<{ value: string; label: ReactNode }> = Object.keys(mergedAdapters).map(key => ({
+    value: key,
+    label: <span>{key}</span>
+  }))
 
-  const groupedFields = fields.reduce<Record<string, FieldSpec[]>>((acc, field) => {
-    const key = field.group ?? 'default'
-    if (!acc[key]) acc[key] = []
-    acc[key].push(field)
-    return acc
-  }, {})
-  const orderedGroups = ['base', 'permissions', 'env', 'items', 'default'].filter(key => groupedFields[key]?.length)
-  const notificationEventOrder = ['completed', 'failed', 'terminated', 'waiting_input']
-
-  const getRecordKeyPlaceholder = (field: FieldSpec) => {
-    if (sectionKey === 'models') return t('config.editor.newModelSelectorName')
-    if (sectionKey === 'modelServices') return t('config.editor.newModelServiceName')
-    if (sectionKey === 'channels') return t('config.editor.newChannelName')
-    if (sectionKey === 'adapters') return t('config.editor.newAdapterName')
-    if (sectionKey === 'plugins') {
-      return t('config.editor.newPluginName')
-    }
-    if (sectionKey === 'mcp') return t('config.editor.newMcpServerName')
-    if (sectionKey === 'general' && field.path.join('.') === 'env') return t('config.editor.newEnvVarName')
-    return t('config.editor.fieldKey')
-  }
+  const renderInheritedReadonlyControl = ({
+    fieldValue,
+    fieldPath,
+    onOverride
+  }: {
+    fieldValue: unknown
+    fieldPath: string[]
+    onOverride?: () => void
+  }) => (
+    <div className='config-view__field-readonly'>
+      <div className='config-view__field-readonly-value'>
+        <DisplayValue value={fieldValue} sectionKey={sectionKey} path={fieldPath} t={t} />
+      </div>
+      {onOverride != null && (
+        <Button size='small' onClick={onOverride}>
+          {t('config.detail.override')}
+        </Button>
+      )}
+    </div>
+  )
 
-  const renderField = (field: FieldSpec) => {
-    const fieldValue = getValueByPath(value, field.path)
-    const valueToUse = fieldValue !== undefined ? fieldValue : field.defaultValue
+  const renderField = ({
+    field,
+    currentValue,
+    currentResolvedValue,
+    onCurrentValueChange,
+    keyPrefix,
+    readOnly = false
+  }: {
+    field: FieldSpec
+    currentValue: unknown
+    currentResolvedValue?: unknown
+    onCurrentValueChange: (nextValue: unknown) => void
+    keyPrefix: string
+    readOnly?: boolean
+  }) => {
+    const fieldValue = getValueByPath(currentValue, field.path)
+    const resolvedFieldValue = getValueByPath(currentResolvedValue, field.path)
+    const hasLocalValue = fieldValue !== undefined
+    const hasResolvedValue = resolvedFieldValue !== undefined
+    const inheritedOnly = !hasLocalValue && hasResolvedValue
+    const canInlineOverride = field.type === 'string' ||
+      field.type === 'multiline' ||
+      field.type === 'number' ||
+      field.type === 'boolean' ||
+      field.type === 'select' ||
+      field.type === 'shortcut'
+    const valueToUse = hasLocalValue
+      ? fieldValue
+      : hasResolvedValue && canInlineOverride
+      ? resolvedFieldValue
+      : field.defaultValue
     const label = field.labelKey
       ? t(field.labelKey)
       : getFieldLabel(t, sectionKey, field.path, field.path[field.path.length - 1] ?? '')
@@ -120,16 +372,48 @@ export const SectionForm = ({
       ? t(field.descriptionKey)
       : getFieldDescription(t, sectionKey, field.path)
     const icon = field.icon ?? getTypeIcon(getValueType(valueToUse))
-
     const handleValueChange = (nextValue: unknown) => {
-      const nextSectionValue = setValueByPath(value, field.path, nextValue)
-      onChange(nextSectionValue)
+      onCurrentValueChange(setValueByPath(currentValue, field.path, nextValue))
     }
 
     let control: ReactNode = null
-    const isStacked = ['multiline', 'json', 'record', 'string[]'].includes(field.type)
+    const isStacked = ['multiline', 'json', 'record', 'string[]', 'detailCollection'].includes(field.type)
+    const overrideCurrentField = () => {
+      if (!hasResolvedValue) return
+      handleValueChange(resolvedFieldValue)
+    }
 
-    if (field.type === 'string') {
+    if (readOnly) {
+      control = (
+        <DisplayValue
+          value={hasResolvedValue ? resolvedFieldValue : fieldValue ?? field.defaultValue}
+          sectionKey={sectionKey}
+          path={field.path}
+          t={t}
+        />
+      )
+    } else if (field.type === 'detailCollection') {
+      control = (
+        <DetailCollectionField
+          sectionKey={sectionKey}
+          field={field}
+          value={fieldValue}
+          resolvedValue={resolvedFieldValue}
+          onChange={(next) => handleValueChange(next)}
+          onOpenDetail={(route) => onOpenDetailRoute?.(route)}
+          mergedModelServices={mergedModelServices}
+          mergedAdapters={mergedAdapters}
+          uiSection={uiSection}
+          t={t}
+        />
+      )
+    } else if (inheritedOnly && !canInlineOverride) {
+      control = renderInheritedReadonlyControl({
+        fieldValue: resolvedFieldValue,
+        fieldPath: field.path,
+        onOverride: overrideCurrentField
+      })
+    } else if (field.type === 'string') {
       const placeholder = field.placeholderKey ? t(field.placeholderKey) : undefined
       if (field.sensitive === true) {
         control = (
@@ -204,12 +488,15 @@ export const SectionForm = ({
       const isDefaultAdapter = sectionKey === 'general' && field.path.join('.') === 'defaultAdapter'
       const isDefaultModelService = sectionKey === 'general' && field.path.join('.') === 'defaultModelService'
       const isDefaultModel = sectionKey === 'general' && field.path.join('.') === 'defaultModel'
+      const isWorktreeEnvironment = sectionKey === 'conversation' && field.path.join('.') === 'worktreeEnvironment'
       const options: Array<{ value: string; label: ReactNode }> = isDefaultModelService
         ? modelServiceOptions
         : isDefaultModel
         ? modelOptions
         : isDefaultAdapter
         ? adapterOptions
+        : isWorktreeEnvironment
+        ? worktreeEnvironmentOptions ?? []
         : (field.options ?? []).map(option => ({
           value: option.value,
           label: <span>{t(option.label)}</span>
@@ -220,12 +507,15 @@ export const SectionForm = ({
           options={options}
           onChange={(next) => handleValueChange(next)}
           allowClear
+          suffixIcon={configSelectSuffixIcon}
           disabled={isDefaultModel && modelOptions.length === 0}
           placeholder={t(
             isDefaultAdapter
               ? 'config.editor.defaultAdapterPlaceholder'
               : isDefaultModelService
               ? 'config.editor.defaultModelServicePlaceholder'
+              : isWorktreeEnvironment
+              ? 'config.editor.worktreeEnvironmentPlaceholder'
               : 'config.editor.defaultModelPlaceholder'
           )}
         />
@@ -247,16 +537,16 @@ export const SectionForm = ({
             value={recordValue}
             onChange={handleValueChange}
             t={t}
-            keyPlaceholder={getRecordKeyPlaceholder(field)}
+            keyPlaceholder={getRecordKeyPlaceholder(sectionKey, field, t)}
           />
         )
       } else if (field.recordKind === 'channels') {
         control = (
-          <ChannelRecordEditor
+          <RecordJsonEditor
             value={recordValue}
             onChange={handleValueChange}
             t={t}
-            keyPlaceholder={getRecordKeyPlaceholder(field)}
+            keyPlaceholder={getRecordKeyPlaceholder(sectionKey, field, t)}
           />
         )
       } else if (field.recordKind === 'mcpServers') {
@@ -265,7 +555,7 @@ export const SectionForm = ({
             value={recordValue}
             onChange={handleValueChange}
             t={t}
-            keyPlaceholder={getRecordKeyPlaceholder(field)}
+            keyPlaceholder={getRecordKeyPlaceholder(sectionKey, field, t)}
           />
         )
       } else if (field.recordKind === 'keyValue') {
@@ -274,7 +564,7 @@ export const SectionForm = ({
             value={recordValue as Record<string, string>}
             onChange={handleValueChange}
             t={t}
-            keyPlaceholder={getRecordKeyPlaceholder(field)}
+            keyPlaceholder={getRecordKeyPlaceholder(sectionKey, field, t)}
           />
         )
       } else if (field.recordKind === 'boolean') {
@@ -283,7 +573,7 @@ export const SectionForm = ({
             value={recordValue as Record<string, boolean>}
             onChange={handleValueChange}
             t={t}
-            keyPlaceholder={getRecordKeyPlaceholder(field)}
+            keyPlaceholder={getRecordKeyPlaceholder(sectionKey, field, t)}
           />
         )
       } else {
@@ -292,7 +582,7 @@ export const SectionForm = ({
             value={recordValue}
             onChange={handleValueChange}
             t={t}
-            keyPlaceholder={getRecordKeyPlaceholder(field)}
+            keyPlaceholder={getRecordKeyPlaceholder(sectionKey, field, t)}
           />
         )
       }
@@ -317,14 +607,23 @@ export const SectionForm = ({
 
     if (directRecordSections.has(sectionKey) && field.type === 'record') {
       return (
-        <div key={`${field.path.join('.')}-${field.type}-${field.recordKind ?? ''}`}>
+        <div key={`${keyPrefix}:${field.path.join('.')}:${field.type}:${field.recordKind ?? ''}`}>
+          {control}
+        </div>
+      )
+    }
+
+    if (directDetailSections.has(sectionKey) && field.type === 'detailCollection' && field.path.length === 0) {
+      return (
+        <div key={`${keyPrefix}:${field.path.join('.')}:${field.type}`}>
           {control}
         </div>
       )
     }
+
     return (
       <FieldRow
-        key={`${field.path.join('.')}-${field.type}-${field.labelKey ?? ''}-${field.recordKind ?? ''}`}
+        key={`${keyPrefix}:${field.path.join('.')}:${field.type}:${field.labelKey ?? ''}:${field.recordKind ?? ''}`}
         title={label}
         description={description}
         icon={icon}
@@ -335,55 +634,91 @@ export const SectionForm = ({
     )
   }
 
-  return (
-    <div className='config-view__field-stack'>
-      {orderedGroups.map((groupKey) => {
-        const groupFields = groupedFields[groupKey] ?? []
-        const hideEmptyGroups = new Set(['base', 'permissions'])
-        if (hideEmptyGroups.has(groupKey)) {
-          const hasGroupValues = groupFields.some((field) => {
-            const fieldValue = getValueByPath(value, field.path)
-            if (typeof fieldValue === 'boolean') return fieldValue
-            return !isEmptyValue(fieldValue)
-          })
-          if (!hasGroupValues) {
-            return null
-          }
-        }
-        if (groupKey === 'default') {
-          if (directRecordSections.has(sectionKey)) {
+  const renderFieldGroups = ({
+    currentFields,
+    currentValue,
+    currentResolvedValue,
+    onCurrentValueChange,
+    keyPrefix,
+    readOnly = false
+  }: {
+    currentFields: FieldSpec[]
+    currentValue: unknown
+    currentResolvedValue?: unknown
+    onCurrentValueChange: (nextValue: unknown) => void
+    keyPrefix: string
+    readOnly?: boolean
+  }) => {
+    const groupedFields = currentFields.reduce<Record<string, FieldSpec[]>>((acc, field) => {
+      const key = field.group ?? 'default'
+      if (!acc[key]) acc[key] = []
+      acc[key].push(field)
+      return acc
+    }, {})
+    const orderedGroups = (configGroupOrder[sectionKey] ?? defaultGroupOrder).filter(key => groupedFields[key]?.length)
+
+    return (
+      <div className='config-view__field-stack'>
+        {orderedGroups.map((groupKey) => {
+          const groupFields = groupedFields[groupKey] ?? []
+          if (groupKey === 'default') {
+            if (directRecordSections.has(sectionKey)) {
+              return (
+                <div key={`${keyPrefix}:${groupKey}`}>
+                  {groupFields.map(field =>
+                    renderField({
+                      field,
+                      currentValue,
+                      currentResolvedValue,
+                      onCurrentValueChange,
+                      keyPrefix,
+                      readOnly
+                    })
+                  )}
+                </div>
+              )
+            }
             return (
-              <div key={groupKey}>
-                {groupFields.map(renderField)}
+              <div key={`${keyPrefix}:${groupKey}`} className='config-view__field-list'>
+                {groupFields.map(field =>
+                  renderField({
+                    field,
+                    currentValue,
+                    currentResolvedValue,
+                    onCurrentValueChange,
+                    keyPrefix,
+                    readOnly
+                  })
+                )}
               </div>
             )
           }
-          return (
-            <div key={groupKey} className='config-view__field-list'>
-              {groupFields.map(renderField)}
-            </div>
-          )
-        }
-        const groupLabel = (() => {
-          const labelKey = configGroupMeta[sectionKey]?.[groupKey]?.labelKey
-          if (labelKey) return t(labelKey)
-          return groupKey === 'base'
-            ? t('config.sectionGroups.base')
-            : groupKey === 'permissions'
-            ? t('config.sectionGroups.permissions')
-            : groupKey === 'env'
-            ? t('config.sectionGroups.env')
-            : sectionKey === 'plugins'
-            ? t('config.sectionGroups.plugins')
-            : t('config.sectionGroups.items')
-        })()
-        const visibleFields = groupFields.filter(field => field.hidden !== true)
-        const collapseFields = visibleFields.filter(field => field.collapse != null)
-        const nonCollapseFields = visibleFields.filter(field => field.collapse == null)
-        const collapseGroups = collapseFields.reduce<
-          Map<string, { meta: NonNullable<FieldSpec['collapse']>; fields: FieldSpec[] }>
-        >(
-          (acc, field) => {
+
+          const groupMeta = configGroupMeta[sectionKey]?.[groupKey]
+          const groupLabel = (() => {
+            const labelKey = groupMeta?.labelKey
+            if (labelKey) return t(labelKey)
+            return groupKey === 'base'
+              ? t('config.sectionGroups.base')
+              : groupKey === 'models'
+              ? t('config.sectionGroups.models')
+              : groupKey === 'advanced'
+              ? t('config.sectionGroups.advanced')
+              : groupKey === 'permissions'
+              ? t('config.sectionGroups.permissions')
+              : groupKey === 'env'
+              ? t('config.sectionGroups.env')
+              : sectionKey === 'plugins'
+              ? t('config.sectionGroups.plugins')
+              : t('config.sectionGroups.items')
+          })()
+
+          const visibleFields = groupFields.filter(field => field.hidden !== true)
+          const collapseFields = visibleFields.filter(field => field.collapse != null)
+          const nonCollapseFields = visibleFields.filter(field => field.collapse == null)
+          const collapseGroups = collapseFields.reduce<
+            Map<string, { meta: NonNullable<FieldSpec['collapse']>; fields: FieldSpec[] }>
+          >((acc, field) => {
             const meta = field.collapse
             if (!meta) return acc
             const existing = acc.get(meta.key)
@@ -393,51 +728,64 @@ export const SectionForm = ({
               acc.set(meta.key, { meta, fields: [field] })
             }
             return acc
-          },
-          new Map()
-        )
-        const collapseItems = Array.from(collapseGroups.values()).map((group) => ({
-          key: group.meta.key,
-          collapsible: 'header' as const,
-          label: (
-            <div className='config-view__collapse-header'>
-              <div className='config-view__collapse-header-main'>
-                <div className='config-view__collapse-title'>
-                  {t(group.meta.labelKey)}
-                </div>
-                {group.meta.descKey && (
-                  <div className='config-view__collapse-desc'>
-                    {t(group.meta.descKey)}
+          }, new Map())
+          const collapseItems = Array.from(collapseGroups.values()).map(group => ({
+            key: group.meta.key,
+            collapsible: 'header' as const,
+            label: (
+              <div className='config-view__collapse-header'>
+                <div className='config-view__collapse-header-main'>
+                  <div className='config-view__collapse-title'>
+                    {t(group.meta.labelKey)}
                   </div>
+                  {group.meta.descKey && (
+                    <div className='config-view__collapse-desc'>
+                      {t(group.meta.descKey)}
+                    </div>
+                  )}
+                </div>
+                {group.meta.togglePath && (
+                  <Switch
+                    checked={!getValueByPath(currentValue, group.meta.togglePath)}
+                    onChange={(next) => {
+                      onCurrentValueChange(setValueByPath(currentValue, group.meta.togglePath!, !next))
+                    }}
+                    disabled={readOnly}
+                    onClick={(_, event) => {
+                      event.stopPropagation()
+                    }}
+                  />
                 )}
               </div>
-              {group.meta.togglePath && (
-                <Switch
-                  checked={!getValueByPath(value, group.meta.togglePath)}
-                  onChange={(next) => {
-                    const nextValue = setValueByPath(value, group.meta.togglePath!, !next)
-                    onChange(nextValue)
-                  }}
-                  onClick={(_, event) => {
-                    event.stopPropagation()
-                  }}
-                />
-              )}
-            </div>
-          ),
-          children: (
-            <div className='config-view__field-list'>
-              {group.fields.map(renderField)}
-            </div>
-          )
-        }))
-        return (
-          <div key={groupKey} className='config-view__subsection'>
-            <div className='config-view__subsection-title'>
-              {groupLabel}
-            </div>
+            ),
+            children: (
+              <div className='config-view__field-list'>
+                {group.fields.map(field =>
+                  renderField({
+                    field,
+                    currentValue,
+                    currentResolvedValue,
+                    onCurrentValueChange,
+                    keyPrefix,
+                    readOnly
+                  })
+                )}
+              </div>
+            )
+          }))
+
+          const groupBody = (
             <div className='config-view__subsection-body'>
-              {nonCollapseFields.map(renderField)}
+              {nonCollapseFields.map(field =>
+                renderField({
+                  field,
+                  currentValue,
+                  currentResolvedValue,
+                  onCurrentValueChange,
+                  keyPrefix,
+                  readOnly
+                })
+              )}
               {collapseItems.length > 0 && (
                 <Collapse
                   className='config-view__collapse-group config-view__field-row'
@@ -446,9 +794,471 @@ export const SectionForm = ({
                 />
               )}
             </div>
+          )
+
+          if (groupMeta?.collapsible === true) {
+            return (
+              <Collapse
+                key={`${keyPrefix}:${groupKey}`}
+                className='config-view__subsection-collapse'
+                ghost
+                expandIconPosition='end'
+                expandIcon={({ isActive }) => (
+                  <span
+                    className={`material-symbols-rounded config-view__subsection-expand-icon${
+                      isActive ? ' is-active' : ''
+                    }`}
+                  >
+                    chevron_right
+                  </span>
+                )}
+                defaultActiveKey={groupMeta.defaultExpanded === false ? [] : [groupKey]}
+                items={[
+                  {
+                    key: groupKey,
+                    label: <div className='config-view__subsection-title'>{groupLabel}</div>,
+                    children: groupBody
+                  }
+                ]}
+              />
+            )
+          }
+
+          return (
+            <div key={`${keyPrefix}:${groupKey}`} className='config-view__subsection'>
+              <div className='config-view__subsection-title'>
+                {groupLabel}
+              </div>
+              {groupBody}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  const detailMeta = resolveConfigDetailRouteMeta({
+    sectionKey,
+    fields,
+    value,
+    resolvedValue,
+    route: detailRoute,
+    detailContext,
+    t
+  })
+  const adapterDetailKey = (
+      sectionKey === 'adapters' &&
+      uiSection?.kind === 'recordMap' &&
+      detailMeta?.field.path.length === 0
+    )
+    ? detailMeta.itemKey
+    : null
+  const { data: adapterAccountsData } = useSWR(
+    adapterDetailKey != null ? `/api/adapters/${adapterDetailKey}/accounts` : null,
+    () => getAdapterAccounts(adapterDetailKey!)
+  )
+  const adapterDefaultAccountOptions = useMemo(() => {
+    if (adapterDetailKey == null || !isRecord(detailMeta?.item)) return undefined
+
+    const configuredDefaultAccount =
+      typeof detailMeta.item.defaultAccount === 'string' && detailMeta.item.defaultAccount.trim() !== ''
+        ? detailMeta.item.defaultAccount.trim()
+        : undefined
+    const configuredAccountsValue = getValueByPath(detailMeta.item, ['accounts'])
+    const configuredAccounts = isRecord(configuredAccountsValue) ? { ...configuredAccountsValue } : {}
+
+    if (configuredDefaultAccount != null && configuredAccounts[configuredDefaultAccount] == null) {
+      configuredAccounts[configuredDefaultAccount] = { title: configuredDefaultAccount }
+    }
+
+    return mergeAccounts(configuredAccounts, adapterAccountsData?.accounts ?? [], configuredDefaultAccount)
+      .map((account) => ({
+        value: account.key,
+        label: account.title === account.key ? account.key : `${account.title} (${account.key})`
+      }))
+  }, [adapterAccountsData?.accounts, adapterDetailKey, detailMeta?.item])
+
+  if (detailMeta != null) {
+    const detailCollection = detailMeta.field.detailCollection
+    const canOverrideInheritedDetailItem = detailCollection != null &&
+      (
+        detailCollection.collectionKind !== 'list' ||
+        detailCollection.getMergeKey != null
+      )
+    const writeDetailItem = (nextItem: unknown) => {
+      if (detailMeta.field.type !== 'detailCollection' || detailMeta.field.detailCollection == null) return
+      const resolvedNextItem = (
+          nextItem != null &&
+          typeof nextItem === 'object' &&
+          !Array.isArray(nextItem)
+        )
+        ? nextItem as Record<string, unknown>
+        : {}
+
+      if (detailMeta.field.detailCollection.collectionKind === 'list') {
+        const currentListValue = getValueByPath(value, detailMeta.field.path)
+        const currentItems = Array.isArray(currentListValue)
+          ? currentListValue.filter((item): item is Record<string, unknown> => (
+            item != null &&
+            typeof item === 'object' &&
+            !Array.isArray(item)
+          ))
+          : []
+        const nextItems = [...currentItems]
+        if (detailMeta.localItemIndex == null) {
+          nextItems.push(resolvedNextItem)
+        } else {
+          nextItems[detailMeta.localItemIndex] = resolvedNextItem
+        }
+        onChange(setValueByPath(value, detailMeta.field.path, nextItems))
+        return
+      }
+
+      onChange(setValueByPath(value, [...detailMeta.field.path, detailMeta.itemKey], resolvedNextItem))
+    }
+    const overrideDetailItem = () => {
+      if (!canOverrideInheritedDetailItem) return
+      writeDetailItem(detailMeta.resolvedItem)
+    }
+    const detailNotice = detailMeta.itemSource === 'inherited'
+      ? (
+        <div className='config-view__detail-notice'>
+          <div className='config-view__detail-notice-text'>
+            {canOverrideInheritedDetailItem
+              ? t('config.detail.inheritedReadonly')
+              : t('config.detail.inheritedAppendOnly')}
+          </div>
+          {canOverrideInheritedDetailItem && (
+            <Button size='small' type='primary' onClick={overrideDetailItem}>
+              {t('config.detail.override')}
+            </Button>
+          )}
+        </div>
+      )
+      : detailMeta.hasResolvedOverlay
+      ? (
+        <div className='config-view__detail-notice'>
+          <div className='config-view__detail-notice-text'>
+            {t('config.detail.partialOverride')}
+          </div>
+        </div>
+      )
+      : null
+
+    if (detailMeta.itemSource === 'inherited') {
+      if ((detailMeta.field.detailCollection?.itemFields?.length ?? 0) > 0) {
+        return (
+          <div className='config-view__detail-panel'>
+            {detailNotice}
+            {renderFieldGroups({
+              currentFields: detailMeta.field.detailCollection!.itemFields!,
+              currentValue: undefined,
+              currentResolvedValue: detailMeta.resolvedItem,
+              onCurrentValueChange: () => undefined,
+              keyPrefix: `detail:${detailMeta.field.path.join('.')}:${detailMeta.itemKey}`,
+              readOnly: true
+            })}
           </div>
         )
-      })}
-    </div>
-  )
+      }
+
+      return (
+        <div className='config-view__detail-panel'>
+          {detailNotice}
+          <DisplayValue value={detailMeta.resolvedItem} sectionKey={sectionKey} path={detailMeta.field.path} t={t} />
+        </div>
+      )
+    }
+
+    if (detailMeta.field.detailCollection?.detailKind === 'recommendedModels') {
+      return (
+        <div className='config-view__detail-panel'>
+          {detailNotice}
+          <RecommendedModelsItemEditor
+            value={detailMeta.item}
+            onChange={writeDetailItem}
+            mergedModelServices={mergedModelServices}
+            t={t}
+          />
+        </div>
+      )
+    }
+
+    if (detailMeta.field.detailCollection?.detailKind === 'mcpServer') {
+      return (
+        <div className='config-view__detail-panel'>
+          {detailNotice}
+          <McpServerItemEditor
+            value={detailMeta.item}
+            onChange={writeDetailItem}
+            t={t}
+          />
+        </div>
+      )
+    }
+
+    if (uiSection?.kind === 'recordMap' && detailMeta.field.path.length === 0) {
+      const { itemSchema, isKnownEntry } = resolveConfigUiRecordEntry({
+        schema: uiSection.recordMap,
+        entryKey: detailMeta.itemKey,
+        entryValue: detailMeta.item
+      })
+      const shouldRenderJsonFallback = !isKnownEntry && uiSection.recordMap.unknownEditor === 'json'
+      const discriminatorField = uiSection.recordMap.discriminatorField ?? 'type'
+
+      if (shouldRenderJsonFallback) {
+        return (
+          <div className='config-view__detail-panel'>
+            {detailNotice}
+            <ComplexTextEditor
+              value={detailMeta.item}
+              onChange={(next) => writeDetailItem((next ?? {}) as Record<string, unknown>)}
+            />
+          </div>
+        )
+      }
+
+      if (itemSchema != null) {
+        if (sectionKey === 'adapters') {
+          const accountItemSchema = itemSchema.recordFields?.accounts?.itemSchema
+          const isAccountsNestedRoute = detailRoute?.nestedPath?.[0] === 'accounts'
+          const hiddenFieldPaths = [
+            ...(isKnownEntry && uiSection.recordMap.mode === 'discriminated' ? [[discriminatorField]] : []),
+            ['accounts']
+          ]
+          const visibleAdapterFields = itemSchema.fields.filter(field =>
+            !hiddenFieldPaths.some(hiddenPath => (
+              field.path.length === hiddenPath.length &&
+              field.path.every((segment, index) => segment === hiddenPath[index])
+            ))
+          )
+          const defaultAccountFieldPaths = visibleAdapterFields
+            .filter(field => field.path.length === 1 && field.path[0] === 'defaultAccount')
+            .map(field => field.path)
+          const advancedFields = visibleAdapterFields
+            .filter(field => (
+              (field.path.length === 1 && (
+                field.path[0] === 'includeModels' ||
+                field.path[0] === 'excludeModels' ||
+                field.path[0] === 'experimentalApi' ||
+                field.path[0] === 'maxOutputTokens'
+              )) ||
+              field.type === 'json' ||
+              field.type === 'multiline' ||
+              field.type === 'string[]'
+            ))
+          const primaryFieldPaths = visibleAdapterFields
+            .filter(field =>
+              !defaultAccountFieldPaths.some(path => (
+                field.path.length === path.length &&
+                field.path.every((segment, index) => segment === path[index])
+              ))
+            )
+            .filter(field =>
+              !advancedFields.some(advancedField => (
+                field.path.length === advancedField.path.length &&
+                field.path.every((segment, index) => segment === advancedField.path[index])
+              ))
+            )
+            .map(field => field.path)
+          const modelSection = {
+            title: t('config.sectionGroups.models'),
+            visibleFieldPaths: advancedFields
+              .filter(field => (
+                isTopLevelField(field.path, 'includeModels') ||
+                isTopLevelField(field.path, 'excludeModels')
+              ))
+              .map(field => field.path)
+          }
+          const advancedSections = [
+            {
+              key: 'runtime',
+              title: t('config.sectionGroups.advancedRuntime'),
+              visibleFieldPaths: advancedFields
+                .filter(field => (
+                  isTopLevelField(field.path, 'experimentalApi') ||
+                  isTopLevelField(field.path, 'maxOutputTokens')
+                ))
+                .map(field => field.path)
+            },
+            {
+              key: 'sandbox',
+              title: t('config.sectionGroups.advancedSandbox'),
+              visibleFieldPaths: advancedFields
+                .filter(field => isTopLevelField(field.path, 'sandboxPolicy'))
+                .map(field => field.path)
+            },
+            {
+              key: 'client',
+              title: t('config.sectionGroups.advancedClient'),
+              visibleFieldPaths: advancedFields
+                .filter(field => isTopLevelField(field.path, 'clientInfo'))
+                .map(field => field.path)
+            },
+            {
+              key: 'overrides',
+              title: t('config.sectionGroups.advancedOverrides'),
+              visibleFieldPaths: advancedFields
+                .filter(field => (
+                  isTopLevelField(field.path, 'configOverrides') ||
+                  isTopLevelField(field.path, 'features')
+                ))
+                .map(field => field.path)
+            },
+            {
+              key: 'misc',
+              title: t('config.sectionGroups.advancedMisc'),
+              visibleFieldPaths: advancedFields
+                .filter(field =>
+                  !(
+                    isTopLevelField(field.path, 'includeModels') ||
+                    isTopLevelField(field.path, 'excludeModels') ||
+                    isTopLevelField(field.path, 'experimentalApi') ||
+                    isTopLevelField(field.path, 'maxOutputTokens') ||
+                    isTopLevelField(field.path, 'sandboxPolicy') ||
+                    isTopLevelField(field.path, 'clientInfo') ||
+                    isTopLevelField(field.path, 'configOverrides') ||
+                    isTopLevelField(field.path, 'features')
+                  )
+                )
+                .map(field => field.path)
+            }
+          ]
+
+          if (isAccountsNestedRoute) {
+            return (
+              <div className='config-view__detail-panel'>
+                {detailNotice}
+                <AdapterAccountsManager
+                  adapterKey={detailMeta.itemKey}
+                  value={detailMeta.item}
+                  accountItemSchema={accountItemSchema}
+                  onChange={writeDetailItem}
+                  nestedPath={detailRoute?.nestedPath}
+                  onOpenNestedPath={(nextPath) => {
+                    onOpenDetailRoute?.({
+                      kind: detailRoute?.kind ?? 'detailCollectionItem',
+                      fieldPath: detailMeta.field.path,
+                      itemKey: detailMeta.itemKey,
+                      nestedPath: nextPath
+                    })
+                  }}
+                  t={t}
+                />
+              </div>
+            )
+          }
+
+          return (
+            <div className='config-view__detail-panel'>
+              {detailNotice}
+              <div className='config-view__field-stack'>
+                {renderAdapterSchemaSection({
+                  schema: itemSchema,
+                  currentValue: detailMeta.item,
+                  onCurrentValueChange: writeDetailItem,
+                  visibleFieldPaths: primaryFieldPaths,
+                  title: t('config.sectionGroups.base'),
+                  collapsible: true,
+                  defaultExpanded: true,
+                  collapseKey: 'base'
+                })}
+                {renderAdapterSchemaSection({
+                  schema: itemSchema,
+                  currentValue: detailMeta.item,
+                  onCurrentValueChange: writeDetailItem,
+                  visibleFieldPaths: defaultAccountFieldPaths,
+                  title: undefined,
+                  resolveFieldOptions: (field) => (
+                    field.path.length === 1 && field.path[0] === 'defaultAccount'
+                      ? adapterDefaultAccountOptions ?? []
+                      : undefined
+                  )
+                })}
+                <AdapterAccountsManager
+                  adapterKey={detailMeta.itemKey}
+                  value={detailMeta.item}
+                  accountItemSchema={accountItemSchema}
+                  onChange={writeDetailItem}
+                  nestedPath={detailRoute?.nestedPath}
+                  onOpenNestedPath={(nextPath) => {
+                    onOpenDetailRoute?.({
+                      kind: detailRoute?.kind ?? 'detailCollectionItem',
+                      fieldPath: detailMeta.field.path,
+                      itemKey: detailMeta.itemKey,
+                      nestedPath: nextPath
+                    })
+                  }}
+                  t={t}
+                />
+                {renderAdapterAdvancedSections({
+                  schema: itemSchema,
+                  currentValue: detailMeta.item,
+                  onCurrentValueChange: writeDetailItem,
+                  modelSection,
+                  advancedSections
+                })}
+              </div>
+            </div>
+          )
+        }
+
+        return (
+          <div className='config-view__detail-panel'>
+            {detailNotice}
+            <SchemaObjectEditor
+              value={detailMeta.item}
+              schema={itemSchema}
+              onChange={writeDetailItem}
+              t={t}
+              hideFieldPaths={isKnownEntry && uiSection.recordMap.mode === 'discriminated'
+                ? [[discriminatorField]]
+                : undefined}
+            />
+          </div>
+        )
+      }
+    }
+
+    if ((detailMeta.field.detailCollection?.itemFields?.length ?? 0) > 0) {
+      return (
+        <div className='config-view__detail-panel'>
+          {detailNotice}
+          {renderFieldGroups({
+            currentFields: detailMeta.field.detailCollection!.itemFields!,
+            currentValue: detailMeta.item,
+            currentResolvedValue: detailMeta.resolvedItem,
+            onCurrentValueChange: writeDetailItem,
+            keyPrefix: `detail:${detailMeta.field.path.join('.')}:${detailMeta.itemKey}`
+          })}
+        </div>
+      )
+    }
+
+    return (
+      <div className='config-view__detail-panel'>
+        {detailNotice}
+        <Empty description={t('common.noData')} image={null} />
+      </div>
+    )
+  }
+
+  return renderFieldGroups({
+    currentFields: fields,
+    currentValue: value,
+    currentResolvedValue: resolvedValue,
+    onCurrentValueChange: onChange,
+    keyPrefix: sectionKey
+  })
+}
+
+const getRecordKeyPlaceholder = (sectionKey: string, field: FieldSpec, t: TranslationFn) => {
+  if (sectionKey === 'models') return t('config.editor.newModelSelectorName')
+  if (sectionKey === 'modelServices') return t('config.editor.newModelServiceName')
+  if (sectionKey === 'channels') return t('config.editor.newChannelName')
+  if (sectionKey === 'adapters') return t('config.editor.newAdapterName')
+  if (sectionKey === 'plugins') return t('config.editor.newPluginName')
+  if (sectionKey === 'mcp') return t('config.editor.newMcpServerName')
+  if (sectionKey === 'general' && field.path.join('.') === 'env') return t('config.editor.newEnvVarName')
+  return t('config.editor.fieldKey')
 }