@dsh-plus/llm-pi 0.1.42 → 0.1.43

package/src/client/views/catalog-row.tsx

@@ -0,0 +1,147 @@
+/**
+ * 目录浏览器的单行：路径 id（可复制）+ 名称 + 协议徽标 + 参数行 + 折叠的参数明细
+ * + 「添加到 route」（不可添加时按钮文案即原因）。与浏览器主体拆开，
+ * 便于各自演进（行内只依赖服务端给的模型事实）。
+ * @module llm-pi/client/views/catalog-row
+ */
+
+import {
+  ChevronDownIcon,
+  copyText,
+  IconCheckOutlineRegular,
+  IconCopyOutlineRegular,
+} from '@dsh-plus/shared/client'
+import { type ReactElement, useEffect, useRef, useState } from 'react'
+
+import type { WireModelInfo } from '../api.ts'
+import type { Translate } from '../i18n.ts'
+import type { AddBlockReason, AddEligibility } from '../route-fit.ts'
+
+/** 计数展示（千分位；不引本地化依赖）。 */
+function count(value: number): string {
+  return value.toLocaleString()
+}
+
+/** 参数行的键值短展示：字符串化，长值截断。 */
+function shortValue(value: unknown): string {
+  const text = typeof value === 'string' ? value : JSON.stringify(value)
+  if (text === undefined) return 'undefined'
+  return text.length > 120 ? `${text.slice(0, 117)}…` : text
+}
+
+/** 禁止添加的原因文案。 */
+export function blockText(t: Translate, reason: AddBlockReason, detail?: string): string {
+  if (reason === 'unsupported') {
+    return `${t('blockUnsupported')}${detail === undefined ? '' : `（${detail}）`}`
+  }
+  if (reason === 'duplicate') return t('blockDuplicate')
+  if (reason === 'protocol-conflict') {
+    return `${t('blockConflict')}${detail === undefined || detail === '' ? '' : `（${detail}）`}`
+  }
+  if (reason === 'route-mixed') return t('blockMixed')
+  return t('blockNoRoute')
+}
+
+export interface CatalogRowProps {
+  t: Translate
+  model: WireModelInfo
+  disabled: boolean
+  eligibility: AddEligibility
+  onAdd(): void
+}
+
+/** 单行：路径 id（可复制）+ 名称 + 参数行 + 折叠的参数明细 + 添加按钮。 */
+export function CatalogRow(props: CatalogRowProps): ReactElement {
+  const { t, model } = props
+  const [details, setDetails] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  useEffect(
+    () => () => {
+      if (timer.current !== null) clearTimeout(timer.current)
+    },
+    [],
+  )
+  const blocked = props.eligibility.ok ? undefined : props.eligibility
+  const compatKeys = Object.keys(model.compat ?? {})
+  const restKeys = Object.keys(model.rest)
+  return (
+    <div className="lpc-catRow">
+      <div className="lpc-catHead">
+        <span className="lpc-catPath">{model.path}</span>
+        <button
+          type="button"
+          className="lpc-iconBtn"
+          title={copied ? t('browserCopied') : t('browserCopy')}
+          aria-label={t('browserCopy')}
+          onClick={() => {
+            void copyText(model.path).then((ok) => {
+              if (!ok) return
+              setCopied(true)
+              if (timer.current !== null) clearTimeout(timer.current)
+              timer.current = setTimeout(() => setCopied(false), 1500)
+            })
+          }}
+        >
+          {copied ? <IconCheckOutlineRegular size={14} /> : <IconCopyOutlineRegular size={14} />}
+        </button>
+        <span className="lpc-catName">{model.name}</span>
+        <span className={model.servable ? 'lpc-badge lpc-badgeSet' : 'lpc-badge lpc-badgeUnset'}>
+          {model.api}
+        </span>
+        <button
+          type="button"
+          className="lpc-btn lpc-btnGhost lpc-btnSmall"
+          disabled={props.disabled || blocked !== undefined}
+          title={blocked === undefined ? undefined : blockText(t, blocked.reason, blocked.detail)}
+          onClick={props.onAdd}
+        >
+          {blocked === undefined ? t('browserAdd') : blockText(t, blocked.reason, blocked.detail)}
+        </button>
+      </div>
+      <p className="lpc-catParams">
+        {`${t('browserContextShort')} ${count(model.contextWindow)} · ${t('browserMaxShort')} ${count(model.maxTokens)} · `}
+        {model.input
+          .map((m) => (m === 'image' ? t('browserInputImage') : t('browserInputText')))
+          .join('/')}
+        {model.reasoning ? ` · ${t('browserReasoning')}` : ''}
+        {compatKeys.length > 0 ? ` · compat ${compatKeys.length}` : ''}
+      </p>
+      <button
+        type="button"
+        className="lpc-catDetailsToggle"
+        aria-expanded={details}
+        onClick={() => setDetails(!details)}
+      >
+        <ChevronDownIcon className={`lpc-chevron${details ? ' lpc-chevronOpen' : ''}`} />
+        <span>{t('browserDetails')}</span>
+      </button>
+      {details ? (
+        <div className="lpc-catDetails">
+          {model.thinkingLevelMap !== undefined ? (
+            <p className="lpc-catParams">
+              {`${t('browserThinkMap')}：${Object.entries(model.thinkingLevelMap)
+                .map(([level, wire]) => `${level}=${wire ?? '-'}`)
+                .join(' ')}`}
+            </p>
+          ) : null}
+          {compatKeys.length > 0 ? (
+            <>
+              <p className="lpc-catDetailLabel">{t('browserCompat')}</p>
+              <pre className="lpc-catJson">{JSON.stringify(model.compat, null, 2)}</pre>
+            </>
+          ) : null}
+          {restKeys.length > 0 ? (
+            <>
+              <p className="lpc-catDetailLabel">{t('browserExtra')}</p>
+              <pre className="lpc-catJson">
+                {restKeys.map((key) => `${key}: ${shortValue(model.rest[key])}`).join('\n')}
+              </pre>
+            </>
+          ) : null}
+          <p className="lpc-catParams">{`baseUrl：${model.baseUrl}`}</p>
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/client/views/compat.tsx

@@ -2,10 +2,12 @@
  * compat 覆盖编辑器：按当前 api 渲染字段组（与服务端 compat.ts 字段表一致）。
  * boolean → 三态下拉（未设置/true/false），枚举 → 下拉（含未设置），
  * object → JSON 文本框（本地文本状态，合法时写入草稿，非法仅提示）。
- * 未知/非法值由后端校验兜底（PUT 失败会返回校验明细）。
+ * 未知/非法值由后端校验兜底（保存失败会返回校验明细）。
+ * 字段多（如 completions 19 项）时提供字段名过滤，折叠标题显示"已设 M/K"。
  * @module llm-pi/client/views/compat
  */
 import type { ReactElement } from 'react'
+import { useState } from 'react'
 
 import { COMPAT_FALLBACK_API, compatFieldSpec, compatFieldsOf } from '../constants.ts'
 import { CollapseSection, IntegerField, JsonField, SelectField } from '../fields.tsx'
@@ -25,6 +27,9 @@ export function pruneCompatForApi(
   return next
 }
 
+/** 字段数超过该值时提供过滤框（19 项一屏放不下）。 */
+const FILTER_THRESHOLD = 10
+
 export interface CompatEditorProps {
   idPrefix: string
   api: string
@@ -37,9 +42,14 @@ export interface CompatEditorProps {
 }
 
 export function CompatEditor(props: CompatEditorProps): ReactElement {
+  const [filter, setFilter] = useState('')
   const effective =
     props.api !== '' && compatFieldsOf(props.api).length > 0 ? props.api : COMPAT_FALLBACK_API
-  const fields = compatFieldsOf(effective)
+  const allFields = compatFieldsOf(effective)
+  const needle = filter.trim().toLowerCase()
+  const fields =
+    needle === '' ? allFields : allFields.filter((f) => f.toLowerCase().includes(needle))
+  const setCount = allFields.filter((field) => props.compat[field] !== undefined).length
   const setField = (field: string, value: unknown): void => {
     const next = { ...props.compat }
     if (value === undefined) delete next[field]
@@ -47,13 +57,31 @@ export function CompatEditor(props: CompatEditorProps): ReactElement {
     props.onEdit(next)
   }
   return (
-    <div className={`lpc-field lpc-wide`}>
+    <div className={'lpc-field lpc-wide'}>
       <CollapseSection
         id={`${props.idPrefix}-collapse`}
         title={props.t('compatGroup')}
+        meta={
+          allFields.length === 0
+            ? ''
+            : `${props.t('compatSetCount')} ${setCount}/${allFields.length}`
+        }
         defaultOpen={false}
       >
         {props.api === '' ? <p className="lpc-hint">{props.t('compatApiHint')}</p> : null}
+        {allFields.length > FILTER_THRESHOLD ? (
+          <div className="lpc-catBar">
+            <input
+              className="lpc-input lpc-catSearch"
+              type="search"
+              value={filter}
+              placeholder={props.t('compatFilter')}
+              aria-label={props.t('compatFilter')}
+              disabled={props.disabled === true}
+              onChange={(event) => setFilter(event.target.value)}
+            />
+          </div>
+        ) : null}
         <div className="lpc-grid">
           {fields.map((field) => {
             const spec = compatFieldSpec(effective, field)

package/src/client/views/models.tsx

@@ -1,147 +1,125 @@
 /**
- * 模型目录编辑：每行一个模型（id/extends/name/容量/模态/reasoningEfforts/compat），
- * extends 输入框带 datalist 候选——候选来自 /catalog 端点：选定 source
- * （builtin / models-dev）与 provider 后拉取其 models 列表。
+ * 模型目录编辑：每行一个模型（id/extends/name/容量/模态/reasoningEfforts/compat/
+ * 其余字段），**行默认折叠**——route 内模型一多，展开态会把配置页拉得极长。
+ * 工具条提供"全部展开/收起"与 id/继承源过滤；继承源候选不再内联 datalist，
+ * 改由卡片顶部「内置模型目录」浏览器承担（搜索 + 一键添加）。
  * @module llm-pi/client/views/models
  */
 
-import { CheckRow } from '@dsh-plus/shared/client'
-import { type ReactElement, useEffect, useState } from 'react'
-import { fetchCatalog, type WireModelsDevStatus } from '../api.ts'
+import { CheckRow, ChevronDownIcon } from '@dsh-plus/shared/client'
+import { type ReactElement, useState } from 'react'
+
 import { MODALITIES, THINKING_LEVELS } from '../constants.ts'
 import { emptyModelDraft, extraOfJson, type ModelDraft, type ReasoningDraft } from '../draft.ts'
 import { JsonField, TextField } from '../fields.tsx'
 import type { Translate } from '../i18n.ts'
 import { CompatEditor } from './compat.tsx'
 
-type CatalogSource = 'builtin' | 'models-dev'
-
-function catalogNote(status: WireModelsDevStatus | undefined, t: Translate): string {
-  if (status === undefined) return ''
-  if (status.error !== null) return `${t('modelsDevError')}${status.error}`
-  return `${t('modelsDevStatusLine')}：${status.providers} 个 provider，快照 ${status.fetchedAt ?? '-'}`
-}
-
 export interface ModelsTableProps {
   route: string
   api: string
-  /** 默认候选 provider（route 级 extends）。 */
-  defaultProvider: string
   models: ModelDraft[]
   epoch: number
   disabled?: boolean
   t: Translate
   onModels(next: ModelDraft[]): void
+  /** 打开卡片顶部「内置模型目录」并把本 route 设为添加目标。 */
+  onAddFromCatalog(): void
+}
+
+/** 行标题摘要：继承源与显示名（空则回退 id）。 */
+function rowSummary(model: ModelDraft): string {
+  const parts: string[] = []
+  if (model.extends.trim() !== '') parts.push(`extends ${model.extends.trim()}`)
+  if (model.name.trim() !== '' && model.name.trim() !== model.id.trim()) {
+    parts.push(model.name.trim())
+  }
+  return parts.join(' · ')
 }
 
 export function ModelsTable(props: ModelsTableProps): ReactElement {
   const { t } = props
-  const [source, setSource] = useState<CatalogSource>('builtin')
-  const [providerIds, setProviderIds] = useState<string[]>([])
-  const [provider, setProvider] = useState('')
-  const [candidateModels, setCandidateModels] = useState<string[]>([])
-  const [note, setNote] = useState('')
-  const listId = `lpc-models-${props.route.replace(/[^a-zA-Z0-9_-]/g, '_')}`
+  const [openRows, setOpenRows] = useState<Record<number, boolean>>({})
+  const [filter, setFilter] = useState('')
+  const needle = filter.trim().toLowerCase()
+  const visible = props.models
+    .map((model, index) => ({ model, index }))
+    .filter(({ model }) =>
+      needle === ''
+        ? true
+        : model.id.toLowerCase().includes(needle) ||
+          model.extends.toLowerCase().includes(needle) ||
+          model.name.toLowerCase().includes(needle),
+    )
+  const hidden = props.models.length - visible.length
+  const allOpen =
+    props.models.length > 0 && props.models.every((_, index) => openRows[index] === true)
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: 目录拉取仅随 source 切换重跑；t/defaultProvider 取首帧值即可
-  useEffect(() => {
-    let alive = true
-    setNote(t('catalogLoading'))
-    void (async () => {
-      try {
-        const list = await fetchCatalog('', source)
-        if (!alive) return
-        setProviderIds(list.providers)
-        const preferred = list.providers.includes(props.defaultProvider)
-          ? props.defaultProvider
-          : (list.providers[0] ?? '')
-        setProvider(preferred)
-        setNote(catalogNote(list.status, t))
-        if (preferred === '') return
-        const result = await fetchCatalog(preferred, source)
-        if (alive) setCandidateModels(result.models)
-      } catch {
-        if (alive) setNote(t('catalogFailed'))
-      }
-    })()
-    return () => {
-      alive = false
-    }
-  }, [source])
-
-  const onProviderChange = (value: string): void => {
-    setProvider(value)
-    if (value === '') {
-      setCandidateModels([])
+  const toggleAll = (): void => {
+    if (allOpen) {
+      setOpenRows({})
       return
     }
-    void fetchCatalog(value, source)
-      .then((result) => setCandidateModels(result.models))
-      .catch(() => setNote(t('catalogFailed')))
+    setOpenRows(Object.fromEntries(props.models.map((_, index) => [index, true])))
   }
 
   return (
     <div className="lpc-models">
       <div className="lpc-modelHead">
-        <span className="lpc-modelTitle">{t('modelsGroup')}</span>
+        <span className="lpc-modelTitle">{`${t('modelsGroup')}（${props.models.length}）`}</span>
         <button
           type="button"
           className="lpc-btn lpc-btnGhost lpc-btnSmall"
-          disabled={props.disabled === true}
-          onClick={() => props.onModels([...props.models, emptyModelDraft()])}
+          disabled={props.disabled === true || props.models.length === 0}
+          onClick={toggleAll}
         >
-          {t('addModel')}
+          {allOpen ? t('modelsCollapseAll') : t('modelsExpandAll')}
         </button>
-      </div>
-      <div className="lpc-catalogBar">
-        <label className="lpc-catalogLabel" htmlFor={`${listId}-source`}>
-          {t('catalogSource')}
-        </label>
-        <select
-          id={`${listId}-source`}
-          className="lpc-input lpc-select lpc-catalogSelect"
-          value={source}
+        <button
+          type="button"
+          className="lpc-btn lpc-btnGhost lpc-btnSmall"
           disabled={props.disabled === true}
-          onChange={(event) => setSource(event.target.value as CatalogSource)}
+          onClick={props.onAddFromCatalog}
         >
-          <option value="builtin">builtin</option>
-          <option value="models-dev">models-dev</option>
-        </select>
-        <label className="lpc-catalogLabel" htmlFor={`${listId}-provider`}>
-          {t('catalogProvider')}
-        </label>
-        <select
-          id={`${listId}-provider`}
-          className="lpc-input lpc-select lpc-catalogSelect"
-          value={provider}
-          disabled={props.disabled === true || providerIds.length === 0}
-          onChange={(event) => onProviderChange(event.target.value)}
+          {t('addFromCatalog')}
+        </button>
+        <button
+          type="button"
+          className="lpc-btn lpc-btnGhost lpc-btnSmall"
+          disabled={props.disabled === true}
+          onClick={() => props.onModels([...props.models, emptyModelDraft()])}
         >
-          <option value="">-</option>
-          {providerIds.map((id) => (
-            <option key={id} value={id}>
-              {id}
-            </option>
-          ))}
-        </select>
+          {t('addModel')}
+        </button>
       </div>
-      {note !== '' ? <p className="lpc-hint">{note}</p> : null}
-      <datalist id={listId}>
-        {candidateModels.map((id) => (
-          <option key={id} value={id} />
-        ))}
-      </datalist>
-      {props.models.map((model, index) => (
+      {props.models.length > 6 ? (
+        <div className="lpc-catBar">
+          <input
+            className="lpc-input lpc-catSearch"
+            type="search"
+            value={filter}
+            placeholder={t('modelsFilterPlaceholder')}
+            aria-label={t('modelsFilter')}
+            disabled={props.disabled === true}
+            onChange={(event) => setFilter(event.target.value)}
+          />
+          {hidden > 0 ? (
+            <span className="lpc-catNote">{`${t('modelsHidden')} ${hidden}`}</span>
+          ) : null}
+        </div>
+      ) : null}
+      {visible.map(({ model, index }) => (
         <ModelRow
-          // biome-ignore lint/suspicious/noArrayIndexKey: model.id 可重复（手填），index 前缀保证 key 唯一且随行序稳定
           key={`${index}:${model.id}`}
           index={index}
           model={model}
           api={props.api}
-          listId={listId}
+          uid={props.route.replace(/[^a-zA-Z0-9_-]/g, '_')}
+          open={openRows[index] === true}
           epoch={props.epoch}
           disabled={props.disabled === true}
           t={t}
+          onToggle={() => setOpenRows((prev) => ({ ...prev, [index]: prev[index] !== true }))}
           onPatch={(patch) =>
             props.onModels(props.models.map((m, i) => (i === index ? { ...m, ...patch } : m)))
           }
@@ -156,23 +134,38 @@ export interface ModelRowProps {
   index: number
   model: ModelDraft
   api: string
-  listId: string
+  /** route 派生的 id 前缀（DOM id 唯一性）。 */
+  uid: string
+  open: boolean
   epoch: number
   disabled?: boolean
   t: Translate
+  onToggle(): void
   onPatch(patch: Partial<ModelDraft>): void
   onRemove(): void
 }
 
+/** 单行：折叠头（序号/id/摘要） + 展开体（全部字段）。 */
 export function ModelRow(props: ModelRowProps): ReactElement {
   const { model, t } = props
-  const id = `${props.listId}-m${props.index}`
+  const id = `lpc-m-${props.uid}-${props.index}`
+  const summary = rowSummary(model)
   return (
     <div className="lpc-modelRow">
       <div className="lpc-modelHead">
-        <span className="lpc-modelTitle">
-          {t('modelRow')} {props.index + 1}
-        </span>
+        <button
+          type="button"
+          className="lpc-routeToggle"
+          aria-expanded={props.open}
+          onClick={props.onToggle}
+        >
+          <ChevronDownIcon className={`lpc-chevron${props.open ? ' lpc-chevronOpen' : ''}`} />
+          <span className="lpc-modelTitle">{`#${props.index + 1}`}</span>
+          <span className={model.id.trim() === '' ? 'lpc-invalid' : 'lpc-routeKey'}>
+            {model.id.trim() === '' ? t('modelUntitled') : model.id}
+          </span>
+          {summary !== '' ? <span className="lpc-routeApi">{summary}</span> : null}
+        </button>
         <button
           type="button"
           className="lpc-btn lpc-btnGhost lpc-btnSmall"
@@ -182,100 +175,103 @@ export function ModelRow(props: ModelRowProps): ReactElement {
           {t('deleteModel')}
         </button>
       </div>
-      <div className="lpc-grid">
-        <TextField
-          id={`${id}-id`}
-          label={t('modelId')}
-          hint={t('modelIdHint')}
-          value={model.id}
-          disabled={props.disabled === true}
-          invalid={model.id.trim() === ''}
-          invalidLabel={t('modelIdRequired')}
-          onEdit={(value) => props.onPatch({ id: value })}
-        />
-        <TextField
-          id={`${id}-extends`}
-          label={t('modelExtends')}
-          hint={t('modelExtendsHint')}
-          value={model.extends}
-          list={props.listId}
-          disabled={props.disabled === true}
-          onEdit={(value) => props.onPatch({ extends: value })}
-        />
-        <TextField
-          id={`${id}-name`}
-          label={t('modelName')}
-          value={model.name}
-          disabled={props.disabled === true}
-          onEdit={(value) => props.onPatch({ name: value })}
-        />
-        <TextField
-          id={`${id}-ctx`}
-          label={t('contextWindow')}
-          numeric
-          value={model.contextWindow}
-          disabled={props.disabled === true}
-          onEdit={(value) => props.onPatch({ contextWindow: value })}
-        />
-        <TextField
-          id={`${id}-max`}
-          label={t('maxTokens')}
-          numeric
-          value={model.maxTokens}
-          disabled={props.disabled === true}
-          onEdit={(value) => props.onPatch({ maxTokens: value })}
-        />
-        <div className="lpc-field">
-          <span className="lpc-label">{t('input')}</span>
-          {MODALITIES.map((modality) => (
-            <CheckRow
-              prefix="lpc"
-              key={modality}
-              id={`${id}-input-${modality}`}
-              label={modality}
-              checked={model.input[modality]}
+      {props.open ? (
+        <div className="lpc-modelBody">
+          <div className="lpc-grid">
+            <TextField
+              id={`${id}-id`}
+              label={t('modelId')}
+              hint={t('modelIdHint')}
+              value={model.id}
               disabled={props.disabled === true}
-              onEdit={(checked) =>
-                props.onPatch({
-                  input: { ...model.input, [modality]: checked },
-                })
-              }
+              invalid={model.id.trim() === ''}
+              invalidLabel={t('modelIdRequired')}
+              onEdit={(value) => props.onPatch({ id: value })}
             />
-          ))}
+            <TextField
+              id={`${id}-extends`}
+              label={t('modelExtends')}
+              hint={t('modelExtendsHint')}
+              value={model.extends}
+              disabled={props.disabled === true}
+              onEdit={(value) => props.onPatch({ extends: value })}
+            />
+            <TextField
+              id={`${id}-name`}
+              label={t('modelName')}
+              value={model.name}
+              disabled={props.disabled === true}
+              onEdit={(value) => props.onPatch({ name: value })}
+            />
+            <TextField
+              id={`${id}-ctx`}
+              label={t('contextWindow')}
+              numeric
+              value={model.contextWindow}
+              disabled={props.disabled === true}
+              onEdit={(value) => props.onPatch({ contextWindow: value })}
+            />
+            <TextField
+              id={`${id}-max`}
+              label={t('maxTokens')}
+              numeric
+              value={model.maxTokens}
+              disabled={props.disabled === true}
+              onEdit={(value) => props.onPatch({ maxTokens: value })}
+            />
+            <div className="lpc-field">
+              <span className="lpc-label">{t('input')}</span>
+              {MODALITIES.map((modality) => (
+                <CheckRow
+                  prefix="lpc"
+                  key={modality}
+                  id={`${id}-input-${modality}`}
+                  label={modality}
+                  checked={model.input[modality]}
+                  disabled={props.disabled === true}
+                  onEdit={(checked) =>
+                    props.onPatch({
+                      input: { ...model.input, [modality]: checked },
+                    })
+                  }
+                />
+              ))}
+            </div>
+          </div>
+          <ReasoningEditor
+            idPrefix={`${id}-re`}
+            value={model.reasoningEfforts}
+            disabled={props.disabled === true}
+            t={t}
+            onEdit={(reasoningEfforts) => props.onPatch({ reasoningEfforts })}
+          />
+          <CompatEditor
+            idPrefix={`${id}-compat`}
+            api={props.api}
+            compat={model.compat}
+            epoch={props.epoch}
+            disabled={props.disabled === true}
+            wide
+            t={t}
+            onEdit={(compat) => props.onPatch({ compat })}
+          />
+          <JsonField
+            id={`${id}-extra`}
+            label={t('extraFields')}
+            hint={t('extraFieldsHint')}
+            invalidText={t('invalidJson')}
+            value={Object.keys(model.extra).length === 0 ? undefined : model.extra}
+            epoch={props.epoch}
+            disabled={props.disabled === true}
+            wide
+            onEdit={(extra) => {
+              const next = extraOfJson(extra)
+              // 合法但非对象的 JSON（数组/标量）忽略这次编辑，不静默清空已配置字段。
+              if (next !== undefined) props.onPatch({ extra: next })
+            }}
+          />
         </div>
-      </div>
-      <ReasoningEditor
-        idPrefix={`${id}-re`}
-        value={model.reasoningEfforts}
-        disabled={props.disabled === true}
-        t={t}
-        onEdit={(reasoningEfforts) => props.onPatch({ reasoningEfforts })}
-      />
-      <CompatEditor
-        idPrefix={`${id}-compat`}
-        api={props.api}
-        compat={model.compat}
-        epoch={props.epoch}
-        disabled={props.disabled === true}
-        wide
-        t={t}
-        onEdit={(compat) => props.onPatch({ compat })}
-      />
-      <JsonField
-        id={`${id}-extra`}
-        label={t('extraFields')}
-        hint={t('extraFieldsHint')}
-        invalidText={t('invalidJson')}
-        value={Object.keys(model.extra).length === 0 ? undefined : model.extra}
-        epoch={props.epoch}
-        disabled={props.disabled === true}
-        wide
-        onEdit={(extra) => {
-          const next = extraOfJson(extra)
-          // 合法但非对象的 JSON（数组/标量）忽略这次编辑，不静默清空已配置字段。
-          if (next !== undefined) props.onPatch({ extra: next })
-        }}
-      />
+      ) : null}
     </div>
   )
 }