@vibe-forge/client 0.7.4 → 0.8.0

package/src/components/config/record-editors/McpServersRecordEditor.tsx

@@ -3,11 +3,11 @@ import './McpServersRecordEditor.scss'
 import { Button, Input, Select, Switch, Tooltip } from 'antd'
 import { useEffect, useMemo, useState } from 'react'
 
+import { StringArrayEditor } from '../ConfigEditors'
 import { FieldRow } from '../ConfigFieldRow'
 import { getTypeIcon } from '../configUtils'
 import type { TranslationFn } from '../configUtils'
 import { KeyValueEditor } from './KeyValueEditor'
-import { StringArrayEditor } from '../ConfigEditors'
 
 export const McpServersRecordEditor = ({
   value,
@@ -71,7 +71,9 @@ export const McpServersRecordEditor = ({
                     type='text'
                     className='config-view__icon-button config-view__icon-button--compact'
                     aria-label={isCollapsed ? t('config.editor.expand') : t('config.editor.collapse')}
-                    icon={<span className='material-symbols-rounded'>{isCollapsed ? 'chevron_right' : 'expand_more'}</span>}
+                    icon={
+                      <span className='material-symbols-rounded'>{isCollapsed ? 'chevron_right' : 'expand_more'}</span>
+                    }
                     onClick={() => {
                       setCollapsedKeys(prev => ({ ...prev, [key]: !isCollapsed }))
                     }}
@@ -97,127 +99,127 @@ export const McpServersRecordEditor = ({
             </div>
             <div className='config-view__record-body'>
               <div className='config-view__record-fields'>
-              <FieldRow
-                title={t('config.fields.mcpServer.enabled.label')}
-                description={t('config.fields.mcpServer.enabled.desc')}
-                icon={getTypeIcon('boolean')}
-              >
-                <Switch
-                  checked={Boolean(recordValue.enabled)}
-                  onChange={(next) => {
-                    updateRecord({ ...recordValue, 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 nextRecord = { ...recordValue }
-                    if (next === 'command') {
-                      delete nextRecord.type
-                      if (nextRecord.command == null) nextRecord.command = ''
-                      if (nextRecord.args == null) nextRecord.args = []
-                      delete nextRecord.url
-                      delete nextRecord.headers
-                    } else {
-                      nextRecord.type = next
-                      if (nextRecord.url == null) nextRecord.url = ''
-                      if (nextRecord.headers == null) nextRecord.headers = {}
-                      delete nextRecord.command
-                      delete nextRecord.args
-                    }
-                    updateRecord(nextRecord)
-                  }}
-                />
-              </FieldRow>
-              {typeValue === 'command' && (
-                <>
-                  <FieldRow
-                    title={t('config.fields.mcpServer.command.label')}
-                    description={t('config.fields.mcpServer.command.desc')}
-                    icon={getTypeIcon('string')}
-                  >
-                    <Input
-                      value={typeof recordValue.command === 'string' ? recordValue.command : ''}
-                      onChange={(event) => {
-                        updateRecord({ ...recordValue, 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) => {
-                        updateRecord({ ...recordValue, 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 recordValue.url === 'string' ? recordValue.url : ''}
-                      onChange={(event) => {
-                        updateRecord({ ...recordValue, 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) => {
-                        updateRecord({ ...recordValue, 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) => {
-                    updateRecord({ ...recordValue, env: next })
-                  }}
-                  t={t}
-                  keyPlaceholder={t('config.editor.newEnvVarName')}
-                />
-              </FieldRow>
+                <FieldRow
+                  title={t('config.fields.mcpServer.enabled.label')}
+                  description={t('config.fields.mcpServer.enabled.desc')}
+                  icon={getTypeIcon('boolean')}
+                >
+                  <Switch
+                    checked={Boolean(recordValue.enabled)}
+                    onChange={(next) => {
+                      updateRecord({ ...recordValue, 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 nextRecord = { ...recordValue }
+                      if (next === 'command') {
+                        delete nextRecord.type
+                        if (nextRecord.command == null) nextRecord.command = ''
+                        if (nextRecord.args == null) nextRecord.args = []
+                        delete nextRecord.url
+                        delete nextRecord.headers
+                      } else {
+                        nextRecord.type = next
+                        if (nextRecord.url == null) nextRecord.url = ''
+                        if (nextRecord.headers == null) nextRecord.headers = {}
+                        delete nextRecord.command
+                        delete nextRecord.args
+                      }
+                      updateRecord(nextRecord)
+                    }}
+                  />
+                </FieldRow>
+                {typeValue === 'command' && (
+                  <>
+                    <FieldRow
+                      title={t('config.fields.mcpServer.command.label')}
+                      description={t('config.fields.mcpServer.command.desc')}
+                      icon={getTypeIcon('string')}
+                    >
+                      <Input
+                        value={typeof recordValue.command === 'string' ? recordValue.command : ''}
+                        onChange={(event) => {
+                          updateRecord({ ...recordValue, 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) => {
+                          updateRecord({ ...recordValue, 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 recordValue.url === 'string' ? recordValue.url : ''}
+                        onChange={(event) => {
+                          updateRecord({ ...recordValue, 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) => {
+                          updateRecord({ ...recordValue, 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) => {
+                      updateRecord({ ...recordValue, env: next })
+                    }}
+                    t={t}
+                    keyPlaceholder={t('config.editor.newEnvVarName')}
+                  />
+                </FieldRow>
               </div>
             </div>
           </div>

package/src/components/config/record-editors/ModelServicesRecordEditor.tsx

@@ -62,7 +62,9 @@ export const ModelServicesRecordEditor = ({
                     type='text'
                     className='config-view__icon-button config-view__icon-button--compact'
                     aria-label={isCollapsed ? t('config.editor.expand') : t('config.editor.collapse')}
-                    icon={<span className='material-symbols-rounded'>{isCollapsed ? 'chevron_right' : 'expand_more'}</span>}
+                    icon={
+                      <span className='material-symbols-rounded'>{isCollapsed ? 'chevron_right' : 'expand_more'}</span>
+                    }
                     onClick={() => {
                       setCollapsedKeys(prev => ({ ...prev, [key]: !isCollapsed }))
                     }}
@@ -96,141 +98,141 @@ export const ModelServicesRecordEditor = ({
             </div>
             <div className='config-view__record-body'>
               <div className='config-view__record-fields'>
-              <FieldRow
-                title={t('config.fields.modelServices.item.title.label')}
-                description={t('config.fields.modelServices.item.title.desc')}
-                icon={getTypeIcon('string')}
-              >
-                <Input
-                  value={titleValue}
-                  onChange={(event) => {
-                    onChange({ ...value, [key]: { ...recordValue, title: event.target.value } })
-                  }}
-                  placeholder={t('config.editor.titlePlaceholder')}
-                />
-              </FieldRow>
-              <FieldRow
-                title={t('config.fields.modelServices.item.description.label')}
-                description={t('config.fields.modelServices.item.description.desc')}
-                icon={getTypeIcon('string')}
-                layout='stacked'
-              >
-                <Input.TextArea
-                  value={descriptionValue}
-                  onChange={(event) => {
-                    onChange({ ...value, [key]: { ...recordValue, description: event.target.value } })
-                  }}
-                  autoSize={{ minRows: 2 }}
-                  placeholder={t('config.editor.descriptionPlaceholder')}
-                />
-              </FieldRow>
-              <FieldRow
-                title={t('config.fields.modelServices.item.apiBaseUrl.label')}
-                description={t('config.fields.modelServices.item.apiBaseUrl.desc')}
-                icon={getTypeIcon('string')}
-              >
-                <Input
-                  value={typeof recordValue.apiBaseUrl === 'string' ? recordValue.apiBaseUrl : ''}
-                  onChange={(event) => {
-                    onChange({ ...value, [key]: { ...recordValue, apiBaseUrl: event.target.value } })
-                  }}
-                />
-              </FieldRow>
-              <FieldRow
-                title={t('config.fields.modelServices.item.apiKey.label')}
-                description={t('config.fields.modelServices.item.apiKey.desc')}
-                icon={getTypeIcon('string')}
-              >
-                <Input.Password
-                  value={typeof recordValue.apiKey === 'string' ? recordValue.apiKey : ''}
-                  onChange={(event) => {
-                    onChange({ ...value, [key]: { ...recordValue, apiKey: event.target.value } })
-                  }}
-                  placeholder={t('config.editor.secretPlaceholder')}
-                />
-              </FieldRow>
-              <FieldRow
-                title={t('config.fields.modelServices.item.models.label')}
-                description={t('config.fields.modelServices.item.models.desc')}
-                icon={getTypeIcon('array')}
-                layout='stacked'
-              >
-                <StringArrayEditor
-                  value={models}
-                  onChange={(next) => {
-                    onChange({ ...value, [key]: { ...recordValue, models: next } })
-                  }}
-                  t={t}
-                />
-              </FieldRow>
-              <FieldRow
-                title={t('config.fields.modelServices.item.modelsAlias.label')}
-                description={t('config.fields.modelServices.item.modelsAlias.desc')}
-                icon={getTypeIcon('object')}
-                layout='stacked'
-              >
-                <ComplexTextEditor
-                  value={recordValue.modelsAlias ?? {}}
-                  onChange={(next) => {
-                    onChange({ ...value, [key]: { ...recordValue, modelsAlias: next } })
-                  }}
-                />
-              </FieldRow>
-              <FieldRow
-                title={t('config.fields.modelServices.item.timeoutMs.label')}
-                description={t('config.fields.modelServices.item.timeoutMs.desc')}
-                icon={getTypeIcon('number')}
-              >
-                <InputNumber
-                  min={1}
-                  step={1000}
-                  value={typeof recordValue.timeoutMs === 'number' ? recordValue.timeoutMs : undefined}
-                  onChange={(nextValue) => {
-                    onChange({
-                      ...value,
-                      [key]: {
-                        ...recordValue,
-                        ...(typeof nextValue === 'number' ? { timeoutMs: nextValue } : { timeoutMs: undefined })
-                      }
-                    })
-                  }}
-                />
-              </FieldRow>
-              <FieldRow
-                title={t('config.fields.modelServices.item.maxOutputTokens.label')}
-                description={t('config.fields.modelServices.item.maxOutputTokens.desc')}
-                icon={getTypeIcon('number')}
-              >
-                <InputNumber
-                  min={1}
-                  step={256}
-                  value={typeof recordValue.maxOutputTokens === 'number' ? recordValue.maxOutputTokens : undefined}
-                  onChange={(nextValue) => {
-                    onChange({
-                      ...value,
-                      [key]: {
-                        ...recordValue,
-                        ...(typeof nextValue === 'number'
-                          ? { maxOutputTokens: nextValue }
-                          : { maxOutputTokens: undefined })
-                      }
-                    })
-                  }}
-                />
-              </FieldRow>
-              <FieldRow
-                title={t('config.fields.modelServices.item.extra.label')}
-                description={t('config.fields.modelServices.item.extra.desc')}
-                icon={getTypeIcon('object')}
-                layout='stacked'
-              >
-                <ComplexTextEditor
-                  value={recordValue.extra ?? {}}
-                  onChange={(next) => {
-                    onChange({ ...value, [key]: { ...recordValue, extra: next } })
-                  }}
-                />
-              </FieldRow>
+                <FieldRow
+                  title={t('config.fields.modelServices.item.title.label')}
+                  description={t('config.fields.modelServices.item.title.desc')}
+                  icon={getTypeIcon('string')}
+                >
+                  <Input
+                    value={titleValue}
+                    onChange={(event) => {
+                      onChange({ ...value, [key]: { ...recordValue, title: event.target.value } })
+                    }}
+                    placeholder={t('config.editor.titlePlaceholder')}
+                  />
+                </FieldRow>
+                <FieldRow
+                  title={t('config.fields.modelServices.item.description.label')}
+                  description={t('config.fields.modelServices.item.description.desc')}
+                  icon={getTypeIcon('string')}
+                  layout='stacked'
+                >
+                  <Input.TextArea
+                    value={descriptionValue}
+                    onChange={(event) => {
+                      onChange({ ...value, [key]: { ...recordValue, description: event.target.value } })
+                    }}
+                    autoSize={{ minRows: 2 }}
+                    placeholder={t('config.editor.descriptionPlaceholder')}
+                  />
+                </FieldRow>
+                <FieldRow
+                  title={t('config.fields.modelServices.item.apiBaseUrl.label')}
+                  description={t('config.fields.modelServices.item.apiBaseUrl.desc')}
+                  icon={getTypeIcon('string')}
+                >
+                  <Input
+                    value={typeof recordValue.apiBaseUrl === 'string' ? recordValue.apiBaseUrl : ''}
+                    onChange={(event) => {
+                      onChange({ ...value, [key]: { ...recordValue, apiBaseUrl: event.target.value } })
+                    }}
+                  />
+                </FieldRow>
+                <FieldRow
+                  title={t('config.fields.modelServices.item.apiKey.label')}
+                  description={t('config.fields.modelServices.item.apiKey.desc')}
+                  icon={getTypeIcon('string')}
+                >
+                  <Input.Password
+                    value={typeof recordValue.apiKey === 'string' ? recordValue.apiKey : ''}
+                    onChange={(event) => {
+                      onChange({ ...value, [key]: { ...recordValue, apiKey: event.target.value } })
+                    }}
+                    placeholder={t('config.editor.secretPlaceholder')}
+                  />
+                </FieldRow>
+                <FieldRow
+                  title={t('config.fields.modelServices.item.models.label')}
+                  description={t('config.fields.modelServices.item.models.desc')}
+                  icon={getTypeIcon('array')}
+                  layout='stacked'
+                >
+                  <StringArrayEditor
+                    value={models}
+                    onChange={(next) => {
+                      onChange({ ...value, [key]: { ...recordValue, models: next } })
+                    }}
+                    t={t}
+                  />
+                </FieldRow>
+                <FieldRow
+                  title={t('config.fields.modelServices.item.modelsAlias.label')}
+                  description={t('config.fields.modelServices.item.modelsAlias.desc')}
+                  icon={getTypeIcon('object')}
+                  layout='stacked'
+                >
+                  <ComplexTextEditor
+                    value={recordValue.modelsAlias ?? {}}
+                    onChange={(next) => {
+                      onChange({ ...value, [key]: { ...recordValue, modelsAlias: next } })
+                    }}
+                  />
+                </FieldRow>
+                <FieldRow
+                  title={t('config.fields.modelServices.item.timeoutMs.label')}
+                  description={t('config.fields.modelServices.item.timeoutMs.desc')}
+                  icon={getTypeIcon('number')}
+                >
+                  <InputNumber
+                    min={1}
+                    step={1000}
+                    value={typeof recordValue.timeoutMs === 'number' ? recordValue.timeoutMs : undefined}
+                    onChange={(nextValue) => {
+                      onChange({
+                        ...value,
+                        [key]: {
+                          ...recordValue,
+                          ...(typeof nextValue === 'number' ? { timeoutMs: nextValue } : { timeoutMs: undefined })
+                        }
+                      })
+                    }}
+                  />
+                </FieldRow>
+                <FieldRow
+                  title={t('config.fields.modelServices.item.maxOutputTokens.label')}
+                  description={t('config.fields.modelServices.item.maxOutputTokens.desc')}
+                  icon={getTypeIcon('number')}
+                >
+                  <InputNumber
+                    min={1}
+                    step={256}
+                    value={typeof recordValue.maxOutputTokens === 'number' ? recordValue.maxOutputTokens : undefined}
+                    onChange={(nextValue) => {
+                      onChange({
+                        ...value,
+                        [key]: {
+                          ...recordValue,
+                          ...(typeof nextValue === 'number'
+                            ? { maxOutputTokens: nextValue }
+                            : { maxOutputTokens: undefined })
+                        }
+                      })
+                    }}
+                  />
+                </FieldRow>
+                <FieldRow
+                  title={t('config.fields.modelServices.item.extra.label')}
+                  description={t('config.fields.modelServices.item.extra.desc')}
+                  icon={getTypeIcon('object')}
+                  layout='stacked'
+                >
+                  <ComplexTextEditor
+                    value={recordValue.extra ?? {}}
+                    onChange={(next) => {
+                      onChange({ ...value, [key]: { ...recordValue, extra: next } })
+                    }}
+                  />
+                </FieldRow>
               </div>
             </div>
           </div>