@vibe-forge/client 0.2.0-alpha.0

package/src/components/config/configSchema.ts

@@ -0,0 +1,319 @@
+export type FieldValueType =
+  | 'string'
+  | 'number'
+  | 'boolean'
+  | 'string[]'
+  | 'select'
+  | 'json'
+  | 'multiline'
+  | 'record'
+  | 'shortcut'
+
+export type RecordKind = 'json' | 'modelServices' | 'mcpServers' | 'boolean' | 'keyValue'
+
+export interface FieldOption {
+  value: string
+  label: string
+}
+
+export interface FieldSpec {
+  path: string[]
+  type: FieldValueType
+  defaultValue: unknown
+  icon?: string
+  options?: FieldOption[]
+  placeholderKey?: string
+  labelKey?: string
+  descriptionKey?: string
+  group?: 'base' | 'permissions' | 'env' | 'items'
+  recordKind?: RecordKind
+  sensitive?: boolean
+  hidden?: boolean
+  collapse?: {
+    key: string
+    labelKey: string
+    descKey?: string
+    togglePath?: string[]
+  }
+}
+
+export const configGroupMeta: Record<string, Record<string, { labelKey: string }>> = {
+  general: {
+    items: {
+      labelKey: 'config.fields.general.notifications.label'
+    }
+  }
+}
+
+export const configSchema: Record<string, FieldSpec[]> = {
+  general: [
+    { path: ['baseDir'], type: 'string', defaultValue: '.ai', icon: 'folder', group: 'base' },
+    { path: ['defaultAdapter'], type: 'select', defaultValue: '', icon: 'settings_input_component', group: 'base' },
+    { path: ['defaultModelService'], type: 'select', defaultValue: '', icon: 'hub', group: 'base' },
+    { path: ['defaultModel'], type: 'select', defaultValue: '', icon: 'model_training', group: 'base' },
+    { path: ['recommendedModels'], type: 'json', defaultValue: [], icon: 'stars', group: 'base' },
+    {
+      path: ['interfaceLanguage'],
+      type: 'select',
+      defaultValue: '',
+      icon: 'language',
+      group: 'base',
+      options: [
+        { value: 'zh', label: 'config.options.language.zh' },
+        { value: 'en', label: 'config.options.language.en' }
+      ]
+    },
+    {
+      path: ['modelLanguage'],
+      type: 'select',
+      defaultValue: '',
+      icon: 'translate',
+      group: 'base',
+      options: [
+        { value: 'zh', label: 'config.options.language.zh' },
+        { value: 'en', label: 'config.options.language.en' }
+      ]
+    },
+    { path: ['announcements'], type: 'string[]', defaultValue: [], icon: 'campaign', group: 'base' },
+    { path: ['permissions', 'allow'], type: 'string[]', defaultValue: [], icon: 'check_circle', group: 'permissions' },
+    { path: ['permissions', 'deny'], type: 'string[]', defaultValue: [], icon: 'block', group: 'permissions' },
+    { path: ['permissions', 'ask'], type: 'string[]', defaultValue: [], icon: 'help', group: 'permissions' },
+    { path: ['env'], type: 'record', recordKind: 'keyValue', defaultValue: {}, icon: 'terminal', group: 'env' },
+    { path: ['notifications', 'disabled'], type: 'boolean', defaultValue: false, icon: 'notifications', group: 'items' },
+    { path: ['notifications', 'volume'], type: 'number', defaultValue: 100, icon: 'volume_down', group: 'items' },
+    {
+      path: ['notifications', 'events', 'completed', 'title'],
+      type: 'string',
+      defaultValue: '',
+      icon: 'title',
+      group: 'items',
+      collapse: {
+        key: 'notifications.events.completed',
+        labelKey: 'config.fields.general.notifications.events.completed.label',
+        descKey: 'config.fields.general.notifications.events.completed.desc',
+        togglePath: ['notifications', 'events', 'completed', 'disabled']
+      }
+    },
+    {
+      path: ['notifications', 'events', 'completed', 'description'],
+      type: 'multiline',
+      defaultValue: '',
+      icon: 'notes',
+      group: 'items',
+      collapse: {
+        key: 'notifications.events.completed',
+        labelKey: 'config.fields.general.notifications.events.completed.label',
+        descKey: 'config.fields.general.notifications.events.completed.desc',
+        togglePath: ['notifications', 'events', 'completed', 'disabled']
+      }
+    },
+    {
+      path: ['notifications', 'events', 'completed', 'sound'],
+      type: 'string',
+      defaultValue: '',
+      icon: 'volume_up',
+      group: 'items',
+      collapse: {
+        key: 'notifications.events.completed',
+        labelKey: 'config.fields.general.notifications.events.completed.label',
+        descKey: 'config.fields.general.notifications.events.completed.desc',
+        togglePath: ['notifications', 'events', 'completed', 'disabled']
+      }
+    },
+    {
+      path: ['notifications', 'events', 'failed', 'title'],
+      type: 'string',
+      defaultValue: '',
+      icon: 'title',
+      group: 'items',
+      collapse: {
+        key: 'notifications.events.failed',
+        labelKey: 'config.fields.general.notifications.events.failed.label',
+        descKey: 'config.fields.general.notifications.events.failed.desc',
+        togglePath: ['notifications', 'events', 'failed', 'disabled']
+      }
+    },
+    {
+      path: ['notifications', 'events', 'failed', 'description'],
+      type: 'multiline',
+      defaultValue: '',
+      icon: 'notes',
+      group: 'items',
+      collapse: {
+        key: 'notifications.events.failed',
+        labelKey: 'config.fields.general.notifications.events.failed.label',
+        descKey: 'config.fields.general.notifications.events.failed.desc',
+        togglePath: ['notifications', 'events', 'failed', 'disabled']
+      }
+    },
+    {
+      path: ['notifications', 'events', 'failed', 'sound'],
+      type: 'string',
+      defaultValue: '',
+      icon: 'volume_up',
+      group: 'items',
+      collapse: {
+        key: 'notifications.events.failed',
+        labelKey: 'config.fields.general.notifications.events.failed.label',
+        descKey: 'config.fields.general.notifications.events.failed.desc',
+        togglePath: ['notifications', 'events', 'failed', 'disabled']
+      }
+    },
+    {
+      path: ['notifications', 'events', 'terminated', 'title'],
+      type: 'string',
+      defaultValue: '',
+      icon: 'title',
+      group: 'items',
+      collapse: {
+        key: 'notifications.events.terminated',
+        labelKey: 'config.fields.general.notifications.events.terminated.label',
+        descKey: 'config.fields.general.notifications.events.terminated.desc',
+        togglePath: ['notifications', 'events', 'terminated', 'disabled']
+      }
+    },
+    {
+      path: ['notifications', 'events', 'terminated', 'description'],
+      type: 'multiline',
+      defaultValue: '',
+      icon: 'notes',
+      group: 'items',
+      collapse: {
+        key: 'notifications.events.terminated',
+        labelKey: 'config.fields.general.notifications.events.terminated.label',
+        descKey: 'config.fields.general.notifications.events.terminated.desc',
+        togglePath: ['notifications', 'events', 'terminated', 'disabled']
+      }
+    },
+    {
+      path: ['notifications', 'events', 'terminated', 'sound'],
+      type: 'string',
+      defaultValue: '',
+      icon: 'volume_up',
+      group: 'items',
+      collapse: {
+        key: 'notifications.events.terminated',
+        labelKey: 'config.fields.general.notifications.events.terminated.label',
+        descKey: 'config.fields.general.notifications.events.terminated.desc',
+        togglePath: ['notifications', 'events', 'terminated', 'disabled']
+      }
+    },
+    {
+      path: ['notifications', 'events', 'waiting_input', 'title'],
+      type: 'string',
+      defaultValue: '',
+      icon: 'title',
+      group: 'items',
+      collapse: {
+        key: 'notifications.events.waiting_input',
+        labelKey: 'config.fields.general.notifications.events.waiting_input.label',
+        descKey: 'config.fields.general.notifications.events.waiting_input.desc',
+        togglePath: ['notifications', 'events', 'waiting_input', 'disabled']
+      }
+    },
+    {
+      path: ['notifications', 'events', 'waiting_input', 'description'],
+      type: 'multiline',
+      defaultValue: '',
+      icon: 'notes',
+      group: 'items',
+      collapse: {
+        key: 'notifications.events.waiting_input',
+        labelKey: 'config.fields.general.notifications.events.waiting_input.label',
+        descKey: 'config.fields.general.notifications.events.waiting_input.desc',
+        togglePath: ['notifications', 'events', 'waiting_input', 'disabled']
+      }
+    },
+    {
+      path: ['notifications', 'events', 'waiting_input', 'sound'],
+      type: 'string',
+      defaultValue: '',
+      icon: 'volume_up',
+      group: 'items',
+      collapse: {
+        key: 'notifications.events.waiting_input',
+        labelKey: 'config.fields.general.notifications.events.waiting_input.label',
+        descKey: 'config.fields.general.notifications.events.waiting_input.desc',
+        togglePath: ['notifications', 'events', 'waiting_input', 'disabled']
+      }
+    }
+  ],
+  conversation: [
+    {
+      path: ['style'],
+      type: 'select',
+      defaultValue: 'friendly',
+      icon: 'forum',
+      options: [
+        { value: 'friendly', label: 'config.options.conversation.friendly' },
+        { value: 'programmatic', label: 'config.options.conversation.programmatic' }
+      ]
+    },
+    { path: ['customInstructions'], type: 'multiline', defaultValue: '', icon: 'description' }
+  ],
+  modelServices: [
+    {
+      path: [],
+      type: 'record',
+      recordKind: 'modelServices',
+      defaultValue: {},
+      icon: 'hub'
+    }
+  ],
+  adapters: [
+    {
+      path: [],
+      type: 'record',
+      recordKind: 'json',
+      defaultValue: {},
+      icon: 'settings_input_component'
+    }
+  ],
+  plugins: [
+    {
+      path: ['plugins'],
+      type: 'record',
+      recordKind: 'json',
+      defaultValue: {},
+      icon: 'extension'
+    },
+    {
+      path: ['enabledPlugins'],
+      type: 'record',
+      recordKind: 'boolean',
+      defaultValue: {},
+      group: 'base',
+      icon: 'toggle_on',
+      labelKey: 'config.fields.plugins.enabled.label',
+      descriptionKey: 'config.fields.plugins.enabled.desc'
+    },
+    {
+      path: ['extraKnownMarketplaces'],
+      type: 'record',
+      recordKind: 'json',
+      defaultValue: {},
+      group: 'base',
+      icon: 'storefront',
+      labelKey: 'config.fields.plugins.marketplaces.label',
+      descriptionKey: 'config.fields.plugins.marketplaces.desc'
+    }
+  ],
+  mcp: [
+    { path: ['defaultIncludeMcpServers'], type: 'string[]', defaultValue: [], group: 'base', icon: 'playlist_add' },
+    { path: ['defaultExcludeMcpServers'], type: 'string[]', defaultValue: [], group: 'base', icon: 'playlist_remove' },
+    { path: ['noDefaultVibeForgeMcpServer'], type: 'boolean', defaultValue: false, group: 'base', icon: 'block' },
+    {
+      path: ['mcpServers'],
+      type: 'record',
+      recordKind: 'mcpServers',
+      defaultValue: {},
+      icon: 'account_tree'
+    }
+  ],
+  shortcuts: [
+    { path: ['newSession'], type: 'shortcut', defaultValue: '', icon: 'add_comment' },
+    { path: ['openConfig'], type: 'shortcut', defaultValue: '', icon: 'settings' },
+    { path: ['sendMessage'], type: 'shortcut', defaultValue: '', icon: 'send' },
+    { path: ['clearInput'], type: 'shortcut', defaultValue: '', icon: 'clear' }
+  ]
+}

package/src/components/config/configUtils.ts

@@ -0,0 +1,83 @@
+export type EditorValueType = 'string' | 'number' | 'boolean' | 'object' | 'array'
+
+export type TranslationFn = (key: string, options?: { defaultValue?: string }) => string
+
+export const isEmptyValue = (value: unknown) => {
+  if (value == null) return true
+  if (Array.isArray(value)) return value.length === 0
+  if (typeof value === 'object') return Object.keys(value as Record<string, unknown>).length === 0
+  return false
+}
+
+export const cloneValue = (value: unknown) => {
+  if (value == null) return value
+  return JSON.parse(JSON.stringify(value)) as unknown
+}
+
+export const getValueType = (value: unknown): EditorValueType => {
+  if (Array.isArray(value)) return 'array'
+  if (value != null && typeof value === 'object') return 'object'
+  if (typeof value === 'number') return 'number'
+  if (typeof value === 'boolean') return 'boolean'
+  return 'string'
+}
+
+export const getTypeIcon = (valueType: EditorValueType) => {
+  if (valueType === 'string') return 'text_fields'
+  if (valueType === 'number') return 'numbers'
+  if (valueType === 'boolean') return 'toggle_on'
+  if (valueType === 'array') return 'view_list'
+  return 'account_tree'
+}
+
+export const getFieldLabel = (
+  t: TranslationFn,
+  sectionKey: string,
+  path: string[],
+  fallback: string
+) => {
+  if (path.length === 0) return fallback
+  const key = `config.fields.${sectionKey}.${path.join('.')}.label`
+  return t(key, { defaultValue: fallback })
+}
+
+export const getFieldDescription = (
+  t: TranslationFn,
+  sectionKey: string,
+  path: string[]
+) => {
+  if (path.length === 0) return ''
+  const key = `config.fields.${sectionKey}.${path.join('.')}.desc`
+  return t(key, { defaultValue: '' })
+}
+
+export const isSensitiveKey = (key: string) => /key|token|secret|password/i.test(key)
+
+export const getValueByPath = (value: unknown, path: string[]) => {
+  if (path.length === 0) return value
+  let current = value
+  for (const key of path) {
+    if (current == null || typeof current !== 'object') return undefined
+    current = (current as Record<string, unknown>)[key]
+  }
+  return current
+}
+
+export const setValueByPath = (value: unknown, path: string[], nextValue: unknown) => {
+  if (path.length === 0) return nextValue
+  const root = (value != null && typeof value === 'object' && !Array.isArray(value))
+    ? { ...(value as Record<string, unknown>) }
+    : {}
+  let current: Record<string, unknown> = root
+  for (let index = 0; index < path.length - 1; index += 1) {
+    const key = path[index]
+    const existing = current[key]
+    const next = (existing != null && typeof existing === 'object' && !Array.isArray(existing))
+      ? { ...(existing as Record<string, unknown>) }
+      : {}
+    current[key] = next
+    current = next
+  }
+  current[path[path.length - 1]] = nextValue
+  return root
+}

package/src/components/config/index.tsx

@@ -0,0 +1,5 @@
+export { AboutSection } from './ConfigAboutSection'
+export { DisplayValue } from './ConfigDisplayValue'
+export { ConfigSectionPanel } from './ConfigSectionPanel'
+export { ConfigSourceSwitch } from './ConfigSourceSwitch'
+export { SectionForm } from './ConfigSectionForm'

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

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

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

@@ -0,0 +1,75 @@
+import './BooleanRecordEditor.scss'
+
+import { Button, Input, Switch, Tooltip } from 'antd'
+import { useState } from 'react'
+
+import type { TranslationFn } from '../configUtils'
+
+export const BooleanRecordEditor = ({
+  value,
+  onChange,
+  t,
+  keyPlaceholder
+}: {
+  value: Record<string, boolean>
+  onChange: (nextValue: Record<string, boolean>) => void
+  t: TranslationFn
+  keyPlaceholder: string
+}) => {
+  const [newKey, setNewKey] = useState('')
+  const entries = Object.entries(value)
+
+  return (
+    <div className='config-view__record-list'>
+      {entries.map(([key, itemValue]) => (
+        <div key={key} className='config-view__record-row'>
+          <div className='config-view__record-key'>{key}</div>
+          <Switch
+            checked={Boolean(itemValue)}
+            onChange={(next) => {
+              onChange({ ...value, [key]: next })
+            }}
+          />
+          <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-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]: true })
+                setNewKey('')
+              }}
+            />
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,97 @@
+import './KeyValueEditor.scss'
+
+import { Button, Input, Tooltip } from 'antd'
+import { useState } from 'react'
+
+import { isSensitiveKey } from '../configUtils'
+import type { TranslationFn } from '../configUtils'
+
+export const KeyValueEditor = ({
+  value,
+  onChange,
+  t,
+  keyPlaceholder
+}: {
+  value: Record<string, string>
+  onChange: (nextValue: Record<string, string>) => void
+  t: TranslationFn
+  keyPlaceholder: string
+}) => {
+  const [newKey, setNewKey] = useState('')
+  const [newValue, setNewValue] = useState('')
+  const entries = Object.entries(value)
+
+  return (
+    <div className='config-view__array-list'>
+      {entries.map(([key, val]) => (
+        <div key={key} className='config-view__array-item'>
+          <div className='config-view__record-key'>{key}</div>
+          {isSensitiveKey(key)
+            ? (
+              <Input.Password
+                value={val}
+                onChange={(event) => {
+                  onChange({ ...value, [key]: event.target.value })
+                }}
+                placeholder={t('config.editor.fieldValue')}
+              />
+            )
+            : (
+              <Input
+                value={val}
+                onChange={(event) => {
+                  onChange({ ...value, [key]: event.target.value })
+                }}
+                placeholder={t('config.editor.fieldValue')}
+              />
+            )}
+          <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__array-add'>
+        <div className='config-view__array-add-inputs'>
+          <Input
+            value={newKey}
+            placeholder={keyPlaceholder}
+            onChange={(event) => setNewKey(event.target.value)}
+          />
+          <Input
+            value={newValue}
+            placeholder={t('config.editor.fieldValue')}
+            onChange={(event) => setNewValue(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={() => {
+                const nextValue = { ...value, [newKey]: newValue }
+                onChange(nextValue)
+                setNewKey('')
+                setNewValue('')
+              }}
+            />
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  )
+}

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

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