@vibe-forge/client 0.2.0-alpha.0

package/src/components/config/recordEditors/McpServersRecordEditor.tsx

@@ -0,0 +1,258 @@
+import './McpServersRecordEditor.scss'
+
+import { Button, Input, Select, Switch, Tooltip } from 'antd'
+import { useEffect, useMemo, useState } from 'react'
+
+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,
+  onChange,
+  t,
+  keyPlaceholder
+}: {
+  value: Record<string, unknown>
+  onChange: (nextValue: Record<string, unknown>) => void
+  t: TranslationFn
+  keyPlaceholder: string
+}) => {
+  const [newKey, setNewKey] = useState('')
+  const entries = useMemo(() => Object.entries(value), [value])
+  const [collapsedKeys, setCollapsedKeys] = useState<Record<string, boolean>>(() => (
+    Object.fromEntries(entries.map(([key]) => [key, true]))
+  ))
+
+  useEffect(() => {
+    setCollapsedKeys(prev => {
+      const next: Record<string, boolean> = {}
+      for (const [key] of entries) {
+        next[key] = prev[key] ?? true
+      }
+      return next
+    })
+  }, [entries])
+
+  return (
+    <div className='config-view__record-list'>
+      {entries.map(([key, itemValue]) => {
+        const recordValue = (itemValue != null && typeof itemValue === 'object')
+          ? itemValue as Record<string, unknown>
+          : {}
+        const typeValue = typeof recordValue.type === 'string' ? recordValue.type : 'command'
+        const envValue = (recordValue.env != null && typeof recordValue.env === 'object')
+          ? recordValue.env as Record<string, string>
+          : {}
+        const headersValue = (recordValue.headers != null && typeof recordValue.headers === 'object')
+          ? recordValue.headers as Record<string, string>
+          : {}
+        const argsValue = Array.isArray(recordValue.args)
+          ? recordValue.args.filter(item => typeof item === 'string')
+          : []
+
+        const updateRecord = (nextValue: Record<string, unknown>) => {
+          onChange({ ...value, [key]: nextValue })
+        }
+
+        const isCollapsed = collapsedKeys[key] === true
+        return (
+          <div
+            key={key}
+            className={`config-view__record-card${isCollapsed ? ' config-view__record-card--collapsed' : ''}`}
+          >
+            <div className='config-view__record-title'>
+              <div className='config-view__record-title-left'>
+                <Tooltip title={isCollapsed ? t('config.editor.expand') : t('config.editor.collapse')}>
+                  <Button
+                    size='small'
+                    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>}
+                    onClick={() => {
+                      setCollapsedKeys(prev => ({ ...prev, [key]: !isCollapsed }))
+                    }}
+                  />
+                </Tooltip>
+                <span>{key}</span>
+              </div>
+              <Tooltip title={t('config.editor.remove')}>
+                <Button
+                  size='small'
+                  type='text'
+                  danger
+                  className='config-view__icon-button config-view__icon-button--compact'
+                  aria-label={t('config.editor.remove')}
+                  icon={<span className='material-symbols-rounded'>delete</span>}
+                  onClick={() => {
+                    const updated = { ...value }
+                    delete updated[key]
+                    onChange(updated)
+                  }}
+                />
+              </Tooltip>
+            </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>
+              </div>
+            </div>
+          </div>
+        )
+      })}
+      <div className='config-view__record-add'>
+        <div className='config-view__record-add-inputs'>
+          <Input
+            value={newKey}
+            placeholder={keyPlaceholder}
+            onChange={(event) => setNewKey(event.target.value)}
+          />
+          <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={newKey.trim() === '' || Object.hasOwn(value, newKey)}
+              onClick={() => {
+                onChange({
+                  ...value,
+                  [newKey]: {
+                    enabled: true,
+                    command: '',
+                    args: []
+                  }
+                })
+                setNewKey('')
+              }}
+            />
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/config/recordEditors/ModelServicesRecordEditor.scss

@@ -0,0 +1 @@
+@use './RecordEditors.scss';

package/src/components/config/recordEditors/ModelServicesRecordEditor.tsx

@@ -0,0 +1,233 @@
+import './ModelServicesRecordEditor.scss'
+
+import { Button, Input, Tooltip } from 'antd'
+import { useEffect, useMemo, useState } from 'react'
+
+import { ComplexTextEditor, StringArrayEditor } from '../ConfigEditors'
+import { FieldRow } from '../ConfigFieldRow'
+import { getTypeIcon } from '../configUtils'
+import type { TranslationFn } from '../configUtils'
+
+export const ModelServicesRecordEditor = ({
+  value,
+  onChange,
+  t,
+  keyPlaceholder
+}: {
+  value: Record<string, unknown>
+  onChange: (nextValue: Record<string, unknown>) => void
+  t: TranslationFn
+  keyPlaceholder: string
+}) => {
+  const [newKey, setNewKey] = useState('')
+  const entries = useMemo(() => Object.entries(value), [value])
+  const [collapsedKeys, setCollapsedKeys] = useState<Record<string, boolean>>(() => (
+    Object.fromEntries(entries.map(([key]) => [key, true]))
+  ))
+
+  useEffect(() => {
+    setCollapsedKeys(prev => {
+      const next: Record<string, boolean> = {}
+      for (const [key] of entries) {
+        next[key] = prev[key] ?? true
+      }
+      return next
+    })
+  }, [entries])
+
+  return (
+    <div className='config-view__record-list'>
+      {entries.map(([key, itemValue]) => {
+        const recordValue = (itemValue != null && typeof itemValue === 'object')
+          ? itemValue as Record<string, unknown>
+          : {}
+        const titleValue = typeof recordValue.title === 'string' ? recordValue.title : ''
+        const descriptionValue = typeof recordValue.description === 'string' ? recordValue.description : ''
+        const displayName = titleValue.trim() !== '' ? titleValue : key
+        const models = Array.isArray(recordValue.models)
+          ? recordValue.models.filter(item => typeof item === 'string')
+          : []
+
+        const isCollapsed = collapsedKeys[key] === true
+        return (
+          <div
+            key={key}
+            className={`config-view__record-card${isCollapsed ? ' config-view__record-card--collapsed' : ''}`}
+          >
+            <div className='config-view__record-title'>
+              <div className='config-view__record-title-left'>
+                <Tooltip title={isCollapsed ? t('config.editor.expand') : t('config.editor.collapse')}>
+                  <Button
+                    size='small'
+                    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>}
+                    onClick={() => {
+                      setCollapsedKeys(prev => ({ ...prev, [key]: !isCollapsed }))
+                    }}
+                  />
+                </Tooltip>
+                <div className='config-view__record-heading'>
+                  <div>{displayName}</div>
+                  {displayName !== key && (
+                    <div className='config-view__record-subtitle'>{key}</div>
+                  )}
+                  {descriptionValue !== '' && (
+                    <div className='config-view__record-desc'>{descriptionValue}</div>
+                  )}
+                </div>
+              </div>
+              <Tooltip title={t('config.editor.remove')}>
+                <Button
+                  size='small'
+                  type='text'
+                  danger
+                  className='config-view__icon-button config-view__icon-button--compact'
+                  aria-label={t('config.editor.remove')}
+                  icon={<span className='material-symbols-rounded'>delete</span>}
+                  onClick={() => {
+                    const updated = { ...value }
+                    delete updated[key]
+                    onChange(updated)
+                  }}
+                />
+              </Tooltip>
+            </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.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>
+        )
+      })}
+      <div className='config-view__record-add'>
+        <div className='config-view__record-add-inputs'>
+          <Input
+            value={newKey}
+            placeholder={keyPlaceholder}
+            onChange={(event) => setNewKey(event.target.value)}
+          />
+          <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={newKey.trim() === '' || Object.hasOwn(value, newKey)}
+              onClick={() => {
+                onChange({
+                  ...value,
+                  [newKey]: {
+                    title: '',
+                    description: '',
+                    apiBaseUrl: '',
+                    apiKey: '',
+                    models: [],
+                    modelsAlias: {},
+                    extra: {}
+                  }
+                })
+                setNewKey('')
+              }}
+            />
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/config/recordEditors/RecordEditors.scss

@@ -0,0 +1,117 @@
+.config-view__record-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.config-view__record-card {
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.config-view__record-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.config-view__record-title-left {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.config-view__record-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.config-view__record-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.config-view__record-card--collapsed .config-view__record-body {
+  display: none;
+}
+
+.config-view__record-heading {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.config-view__record-subtitle {
+  font-size: 12px;
+  color: var(--sub-text-color);
+}
+
+.config-view__record-desc {
+  font-size: 12px;
+  color: var(--sub-text-color);
+}
+
+.config-view__record-fields {
+  display: flex;
+  flex-direction: column;
+  border-radius: 10px;
+}
+
+.config-view__record-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.config-view__record-key {
+  font-size: 12px;
+  color: var(--sub-text-color);
+  min-width: 140px;
+}
+
+.config-view__record-add {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.config-view__record-add-inputs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+}
+
+.config-view__record-add-inputs .ant-input,
+.config-view__record-add-inputs .ant-input-affix-wrapper {
+  flex: 1;
+}
+
+.config-view__icon-button {
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.config-view__icon-button--compact {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+}
+
+.config-view__icon-button--full {
+  width: 100%;
+  min-width: 100%;
+}

package/src/components/config/recordEditors/RecordJsonEditor.scss

@@ -0,0 +1 @@
+@use './RecordEditors.scss';