@vibe-forge/client 3.0.0-alpha.6 → 3.0.0

package/src/components/config/DetailListField.tsx

@@ -1,413 +0,0 @@
-/* eslint-disable max-lines -- detail collection list/add/remove flow stays in one renderer for consistency */
-import './record-editors/RecordEditors.scss'
-
-import { Button, Input, Select, Switch, Tooltip } from 'antd'
-import { useMemo, useState } from 'react'
-
-import { getAdapterDisplay } from '#~/resources/adapters'
-import type { ConfigUiSection } from '@vibe-forge/types'
-
-import { DetailCollectionFieldActions } from './DetailCollectionFieldActions'
-import type { ConfigDetailRoute } from './configDetail'
-import { toDetailCollectionEntries } from './configDetail'
-import type { FieldSpec } from './configSchema'
-import { getFieldLabel, getValueByPath, setValueByPath } from './configUtils'
-import type { TranslationFn } from './configUtils'
-import { buildConfigUiObjectDefaultValue } from './record-editors/schemaRecordUtils'
-
-const normalizeConfigText = (value: unknown) => (
-  typeof value === 'string' && value.trim() !== ''
-    ? value.trim()
-    : ''
-)
-
-const formatAdapterKeyTitle = (adapterKey: string) => (
-  adapterKey
-    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-    .replace(/[-_]+/g, ' ')
-    .split(/\s+/)
-    .filter(Boolean)
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ')
-)
-
-const resolveAdapterListTitle = (adapterKey: string) => {
-  const adapterDisplay = getAdapterDisplay(adapterKey)
-  const displayTitle = normalizeConfigText(adapterDisplay.title)
-  return displayTitle !== '' && displayTitle !== adapterKey
-    ? displayTitle
-    : formatAdapterKeyTitle(adapterKey)
-}
-
-const resolveAdapterListSubtitle = ({
-  item,
-  fallbackSubtitle,
-  t
-}: {
-  item: Record<string, unknown>
-  fallbackSubtitle?: string
-  t: TranslationFn
-}) => {
-  const summaryParts: string[] = []
-  const defaultModel = normalizeConfigText(item.defaultModel)
-  const defaultAccount = normalizeConfigText(item.defaultAccount)
-
-  if (defaultModel !== '') {
-    summaryParts.push(`${t('config.fields.adapters.defaultModel.label')}: ${defaultModel}`)
-  }
-
-  if (defaultAccount !== '') {
-    summaryParts.push(`${t('config.fields.adapters.defaultAccount.label')}: ${defaultAccount}`)
-  }
-
-  if (summaryParts.length > 0) return summaryParts.join(' · ')
-  return fallbackSubtitle
-}
-
-export const DetailCollectionField = ({
-  sectionKey,
-  field,
-  value,
-  resolvedValue,
-  onChange,
-  onOpenDetail,
-  mergedModelServices,
-  mergedAdapters,
-  uiSection,
-  t
-}: {
-  sectionKey: string
-  field: FieldSpec
-  value: unknown
-  resolvedValue?: unknown
-  onChange: (nextValue: unknown) => void
-  onOpenDetail: (route: ConfigDetailRoute) => void
-  mergedModelServices: Record<string, unknown>
-  mergedAdapters: Record<string, unknown>
-  uiSection?: ConfigUiSection
-  t: TranslationFn
-}) => {
-  const detailCollection = field.detailCollection
-  if (detailCollection == null) return null
-  const [newRecordKey, setNewRecordKey] = useState('')
-  const [newRecordKind, setNewRecordKind] = useState(
-    uiSection?.kind === 'recordMap' ? (uiSection.recordMap.entryKinds?.[0]?.key ?? '') : ''
-  )
-
-  const items = toDetailCollectionEntries({
-    field,
-    value,
-    resolvedValue
-  })
-  const detailContext = {
-    mergedModelServices,
-    mergedAdapters,
-    t
-  }
-  const fieldLabel = field.labelKey != null
-    ? t(field.labelKey)
-    : getFieldLabel(t, sectionKey, field.path, field.path.at(-1) ?? sectionKey)
-  const isListCollection = detailCollection.collectionKind === 'list'
-  const isRecordMapCollection = detailCollection.collectionKind === 'recordMap'
-  const canSelectKind = isRecordMapCollection && uiSection?.kind === 'recordMap' &&
-    uiSection.recordMap.mode === 'discriminated'
-  const keyPlaceholder = detailCollection.collectionKind === 'recordMap'
-    ? (
-      detailCollection.keyPlaceholderKey != null
-        ? t(detailCollection.keyPlaceholderKey)
-        : t('config.editor.fieldKey')
-    )
-    : ''
-  const kindOptions = useMemo(() => (
-    uiSection?.kind === 'recordMap'
-      ? (uiSection.recordMap.entryKinds ?? []).map(item => ({
-        value: item.key,
-        label: item.label ?? item.key
-      }))
-      : []
-  ), [uiSection])
-  const localListItems = isListCollection && Array.isArray(value)
-    ? value.filter(item => item != null && typeof item === 'object' && !Array.isArray(item)) as Array<
-      Record<string, unknown>
-    >
-    : []
-
-  const updateRecordEntry = (itemKey: string, nextItem: Record<string, unknown>) => {
-    onChange(setValueByPath(value, [itemKey], nextItem))
-  }
-
-  const updateListItems = (nextItems: Array<Record<string, unknown>>) => {
-    onChange(nextItems)
-  }
-
-  const moveItem = (localIndex: number, direction: -1 | 1) => {
-    if (!isListCollection) return
-    const targetIndex = localIndex + direction
-    if (targetIndex < 0 || targetIndex >= localListItems.length) return
-    const next = [...localListItems]
-    const [current] = next.splice(localIndex, 1)
-    if (current == null) return
-    next.splice(targetIndex, 0, current)
-    updateListItems(next)
-  }
-
-  const removeItem = (localIndex: number) => {
-    if (!isListCollection) return
-    updateListItems(localListItems.filter((_, itemIndex) => itemIndex !== localIndex))
-  }
-
-  const removeRecordItem = (itemKey: string) => {
-    if (!isRecordMapCollection) return
-    const currentValue = (value != null && typeof value === 'object' && !Array.isArray(value))
-      ? { ...(value as Record<string, unknown>) }
-      : {}
-    delete currentValue[itemKey]
-    onChange(currentValue)
-  }
-
-  const openDetail = (itemKey: string) => {
-    onOpenDetail({
-      kind: 'detailCollectionItem',
-      fieldPath: field.path,
-      itemKey
-    })
-  }
-
-  const renderSummaryControls = ({
-    item,
-    itemKey,
-    title,
-    localIndex,
-    source
-  }: {
-    item: Record<string, unknown>
-    itemKey: string
-    title: string
-    localIndex?: number
-    source: 'local' | 'inherited'
-  }) => {
-    if (source !== 'local') return null
-    if ((detailCollection.summaryControls?.length ?? 0) === 0) return null
-
-    return (
-      <div
-        className='config-view__detail-summary-controls'
-        onClick={event => event.stopPropagation()}
-      >
-        {detailCollection.summaryControls!.map((control) => {
-          if (control.kind !== 'boolean') return null
-          const checkedValue = control.checkedValue ?? true
-          const currentValue = Boolean(getValueByPath(item, control.path))
-          const checked = currentValue === checkedValue
-          const label = control.labelKey != null ? t(control.labelKey) : title
-
-          return (
-            <Switch
-              key={`${itemKey}:${control.path.join('.')}`}
-              size='small'
-              checked={checked}
-              aria-label={label}
-              onChange={(nextChecked) => {
-                const nextItem = setValueByPath(
-                  item,
-                  control.path,
-                  nextChecked ? checkedValue : !checkedValue
-                ) as Record<string, unknown>
-                if (isListCollection) {
-                  if (localIndex == null) return
-                  const nextItems = [...localListItems]
-                  nextItems[localIndex] = nextItem
-                  updateListItems(nextItems)
-                  return
-                }
-                updateRecordEntry(itemKey, nextItem)
-              }}
-            />
-          )
-        })}
-      </div>
-    )
-  }
-
-  const addRecordItem = () => {
-    if (!isRecordMapCollection) return
-    const itemKey = newRecordKey.trim()
-    if (itemKey === '' || items.some(item => item.key === itemKey)) return
-
-    let nextItem: Record<string, unknown>
-    if (uiSection?.kind === 'recordMap') {
-      const nextSchema = uiSection.recordMap.mode === 'discriminated'
-        ? (uiSection.recordMap.schemas[newRecordKind] ?? uiSection.recordMap.unknownSchema)
-        : (uiSection.recordMap.schemas[itemKey] ?? uiSection.recordMap.unknownSchema)
-      nextItem = buildConfigUiObjectDefaultValue(nextSchema)
-      if (uiSection.recordMap.mode === 'discriminated') {
-        const discriminatorField = uiSection.recordMap.discriminatorField ?? 'type'
-        nextItem = setValueByPath(nextItem, [discriminatorField], newRecordKind) as Record<string, unknown>
-      }
-    } else {
-      nextItem = detailCollection.createItem?.(itemKey, newRecordKind) ?? {}
-    }
-
-    updateRecordEntry(itemKey, nextItem)
-    setNewRecordKey('')
-    openDetail(itemKey)
-  }
-
-  return (
-    <div className='config-view__detail-list'>
-      {items.map(({ item, key, index, localIndex, source, hasResolvedOverlay }) => {
-        const title = detailCollection.getItemTitle(item, key, index, detailContext)
-        const subtitle = detailCollection.getItemSubtitle?.(item, key, index, detailContext)
-        const description = detailCollection.getItemDescription?.(item, key, index, detailContext)
-        const adapterDisplay = sectionKey === 'adapters' ? getAdapterDisplay(key) : undefined
-        const displayTitle = sectionKey === 'adapters' ? resolveAdapterListTitle(key) : title
-        const displaySubtitle = sectionKey === 'adapters'
-          ? resolveAdapterListSubtitle({ item, fallbackSubtitle: subtitle, t })
-          : subtitle
-        return (
-          <div
-            key={`${field.path.join('.')}:${key}:${title}`}
-            className={`config-view__record-card${source === 'inherited' ? ' config-view__record-card--readonly' : ''}`}
-          >
-            <div className='config-view__detail-list-row'>
-              <button type='button' className='config-view__detail-list-main' onClick={() => openDetail(key)}>
-                <div
-                  className={`config-view__record-heading${adapterDisplay?.icon != null ? ' has-adapter-icon' : ''}`}
-                >
-                  {adapterDisplay != null && (
-                    <div className='config-view__adapter-icon-wrap' aria-hidden='true'>
-                      {adapterDisplay.icon != null
-                        ? (
-                          <img
-                            className='config-view__adapter-icon'
-                            src={adapterDisplay.icon}
-                            alt=''
-                          />
-                        )
-                        : (
-                          <span className='config-view__adapter-icon-fallback material-symbols-rounded'>
-                            deployed_code
-                          </span>
-                        )}
-                    </div>
-                  )}
-                  <div className='config-view__record-heading-text'>
-                    <div className='config-view__detail-list-title'>
-                      <span>{displayTitle}</span>
-                      {(source === 'inherited' || hasResolvedOverlay) && (
-                        <span
-                          className={`config-view__detail-badge${
-                            source === 'inherited'
-                              ? ' config-view__detail-badge--readonly'
-                              : ' config-view__detail-badge--override'
-                          }`}
-                        >
-                          {source === 'inherited'
-                            ? t('config.detail.inheritedBadge')
-                            : t('config.detail.overrideBadge')}
-                        </span>
-                      )}
-                    </div>
-                    {displaySubtitle != null && displaySubtitle !== '' && (
-                      <div className='config-view__record-subtitle'>
-                        {displaySubtitle}
-                      </div>
-                    )}
-                    {description != null && description !== '' && (
-                      <div className='config-view__record-desc'>{description}</div>
-                    )}
-                  </div>
-                </div>
-              </button>
-              {renderSummaryControls({ item, itemKey: key, title: displayTitle, localIndex, source })}
-              {(isListCollection || isRecordMapCollection) && source === 'local' && (
-                <DetailCollectionFieldActions
-                  index={localIndex ?? 0}
-                  itemCount={isListCollection
-                    ? localListItems.length
-                    : items.filter(entry => entry.source === 'local').length}
-                  onMove={isListCollection
-                    ? (direction) => {
-                      if (localIndex == null) return
-                      moveItem(localIndex, direction)
-                    }
-                    : undefined}
-                  onRemove={() => {
-                    if (isListCollection) {
-                      if (localIndex == null) return
-                      removeItem(localIndex)
-                      return
-                    }
-                    removeRecordItem(key)
-                  }}
-                  t={t}
-                />
-              )}
-            </div>
-          </div>
-        )
-      })}
-      {isListCollection && items.length === 0 && (
-        <div className='config-view__detail-list-empty'>
-          <div className='config-view__detail-list-empty-title'>{fieldLabel}</div>
-          <div className='config-view__detail-list-empty-desc'>{t('common.noData')}</div>
-        </div>
-      )}
-      {isListCollection && (
-        <div className='config-view__record-add'>
-          <Tooltip title={t('config.editor.addItem')}>
-            <Button
-              size='small'
-              type='primary'
-              className='config-view__icon-button config-view__icon-button--full'
-              aria-label={t('config.editor.addItem')}
-              icon={<span className='material-symbols-rounded'>add</span>}
-              onClick={() => {
-                const next = [...localListItems, detailCollection.createItem()]
-                updateListItems(next)
-                const nextEntries = toDetailCollectionEntries({
-                  field,
-                  value: next,
-                  resolvedValue
-                })
-                const nextEntry = nextEntries.find(entry => entry.localIndex === next.length - 1)
-                openDetail(nextEntry?.key ?? String(next.length - 1))
-              }}
-            />
-          </Tooltip>
-        </div>
-      )}
-      {isRecordMapCollection && (
-        <div className='config-view__record-add'>
-          <div className='config-view__record-add-inputs'>
-            <Input
-              value={newRecordKey}
-              placeholder={keyPlaceholder}
-              onChange={(event) => setNewRecordKey(event.target.value)}
-            />
-            {canSelectKind && (
-              <Select
-                value={newRecordKind}
-                options={kindOptions}
-                onChange={(nextValue) => setNewRecordKind(nextValue)}
-              />
-            )}
-            <Tooltip title={t('common.confirm')}>
-              <Button
-                size='small'
-                type='primary'
-                className='config-view__icon-button'
-                aria-label={t('common.confirm')}
-                icon={<span className='material-symbols-rounded'>check</span>}
-                disabled={newRecordKey.trim() === '' ||
-                  items.some(item => item.key === newRecordKey.trim()) ||
-                  (canSelectKind && newRecordKind.trim() === '')}
-                onClick={addRecordItem}
-              />
-            </Tooltip>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/config/McpServerItemEditor.tsx

@@ -1,154 +0,0 @@
-import { Input, Select, Switch } from 'antd'
-
-import { StringArrayEditor } from './ConfigEditors'
-import { FieldRow } from './ConfigFieldRow'
-import { getTypeIcon } from './configUtils'
-import type { TranslationFn } from './configUtils'
-import { KeyValueEditor } from './record-editors'
-
-export const McpServerItemEditor = ({
-  value,
-  onChange,
-  t
-}: {
-  value: Record<string, unknown>
-  onChange: (nextValue: Record<string, unknown>) => void
-  t: TranslationFn
-}) => {
-  const typeValue = typeof value.type === 'string' ? value.type : 'command'
-  const envValue = (value.env != null && typeof value.env === 'object')
-    ? value.env as Record<string, string>
-    : {}
-  const headersValue = (value.headers != null && typeof value.headers === 'object')
-    ? value.headers as Record<string, string>
-    : {}
-  const argsValue = Array.isArray(value.args)
-    ? value.args.filter(item => typeof item === 'string')
-    : []
-
-  return (
-    <div className='config-view__field-stack'>
-      <FieldRow
-        title={t('config.fields.mcpServer.enabled.label')}
-        description={t('config.fields.mcpServer.enabled.desc')}
-        icon={getTypeIcon('boolean')}
-      >
-        <Switch
-          checked={Boolean(value.enabled)}
-          onChange={(next) => {
-            onChange({ ...value, enabled: next })
-          }}
-        />
-      </FieldRow>
-      <FieldRow
-        title={t('config.fields.mcpServer.type.label')}
-        description={t('config.fields.mcpServer.type.desc')}
-        icon={getTypeIcon('string')}
-      >
-        <Select
-          value={typeValue}
-          options={[
-            { value: 'command', label: t('config.options.mcp.command') },
-            { value: 'sse', label: t('config.options.mcp.sse') },
-            { value: 'http', label: t('config.options.mcp.http') }
-          ]}
-          onChange={(next) => {
-            const nextValue = { ...value }
-            if (next === 'command') {
-              delete nextValue.type
-              if (nextValue.command == null) nextValue.command = ''
-              if (nextValue.args == null) nextValue.args = []
-              delete nextValue.url
-              delete nextValue.headers
-            } else {
-              nextValue.type = next
-              if (nextValue.url == null) nextValue.url = ''
-              if (nextValue.headers == null) nextValue.headers = {}
-              delete nextValue.command
-              delete nextValue.args
-            }
-            onChange(nextValue)
-          }}
-        />
-      </FieldRow>
-      {typeValue === 'command' && (
-        <>
-          <FieldRow
-            title={t('config.fields.mcpServer.command.label')}
-            description={t('config.fields.mcpServer.command.desc')}
-            icon={getTypeIcon('string')}
-          >
-            <Input
-              value={typeof value.command === 'string' ? value.command : ''}
-              onChange={(event) => {
-                onChange({ ...value, command: event.target.value })
-              }}
-              placeholder={t('config.editor.commandPlaceholder')}
-            />
-          </FieldRow>
-          <FieldRow
-            title={t('config.fields.mcpServer.args.label')}
-            description={t('config.fields.mcpServer.args.desc')}
-            icon={getTypeIcon('array')}
-            layout='stacked'
-          >
-            <StringArrayEditor
-              value={argsValue}
-              onChange={(next) => {
-                onChange({ ...value, args: next })
-              }}
-              t={t}
-            />
-          </FieldRow>
-        </>
-      )}
-      {typeValue !== 'command' && (
-        <>
-          <FieldRow
-            title={t('config.fields.mcpServer.url.label')}
-            description={t('config.fields.mcpServer.url.desc')}
-            icon={getTypeIcon('string')}
-          >
-            <Input
-              value={typeof value.url === 'string' ? value.url : ''}
-              onChange={(event) => {
-                onChange({ ...value, url: event.target.value })
-              }}
-              placeholder={t('config.editor.urlPlaceholder')}
-            />
-          </FieldRow>
-          <FieldRow
-            title={t('config.fields.mcpServer.headers.label')}
-            description={t('config.fields.mcpServer.headers.desc')}
-            icon={getTypeIcon('object')}
-            layout='stacked'
-          >
-            <KeyValueEditor
-              value={headersValue}
-              onChange={(next) => {
-                onChange({ ...value, headers: next })
-              }}
-              t={t}
-              keyPlaceholder={t('config.editor.newHeaderName')}
-            />
-          </FieldRow>
-        </>
-      )}
-      <FieldRow
-        title={t('config.fields.mcpServer.env.label')}
-        description={t('config.fields.mcpServer.env.desc')}
-        icon={getTypeIcon('object')}
-        layout='stacked'
-      >
-        <KeyValueEditor
-          value={envValue}
-          onChange={(next) => {
-            onChange({ ...value, env: next })
-          }}
-          t={t}
-          keyPlaceholder={t('config.editor.newEnvVarName')}
-        />
-      </FieldRow>
-    </div>
-  )
-}