@vibe-forge/client 2.0.0 → 3.0.0-alpha.0

package/src/components/config/configUtils.ts

@@ -1,6 +1,6 @@
 export type EditorValueType = 'string' | 'number' | 'boolean' | 'object' | 'array'
 
-export type TranslationFn = (key: string, options?: { defaultValue?: string }) => string
+export type TranslationFn = (key: string, options?: Record<string, unknown> & { defaultValue?: string }) => string
 
 export const isEmptyValue = (value: unknown) => {
   if (value == null) return true

package/src/components/config/record-editors/RecordEditors.scss

@@ -20,6 +20,26 @@
   background: var(--subpage-tertiary-hover-bg);
 }
 
+.config-view__record-card--highlighted {
+  border-color: color-mix(
+    in srgb,
+    var(--primary-color, #2563eb) 28%,
+    var(--border-color)
+  );
+  background: color-mix(
+    in srgb,
+    var(--primary-soft-bg, #eff6ff) 42%,
+    var(--subpage-tertiary-bg)
+  );
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--primary-color, #2563eb) 18%, transparent);
+  scroll-margin-top: 24px;
+}
+
+.config-view__record-card--readonly {
+  border-style: dashed;
+}
+
 .config-view__record-title {
   display: flex;
   align-items: center;
@@ -58,6 +78,79 @@
   gap: 2px;
 }
 
+.config-view__record-heading.has-adapter-icon {
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+}
+
+.config-view__record-heading-text {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.config-view__adapter-icon-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  min-width: 26px;
+  height: 26px;
+}
+
+.config-view__adapter-icon {
+  width: 18px;
+  height: 18px;
+  object-fit: contain;
+}
+
+.config-view__adapter-icon-fallback {
+  font-size: 18px;
+  color: var(--sub-text-color);
+}
+
+.config-view__detail-list-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.config-view__detail-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 18px;
+  padding: 0 7px;
+  border-radius: 999px;
+  background: color-mix(
+    in srgb,
+    var(--subpage-tertiary-hover-bg) 72%,
+    transparent
+  );
+  color: var(--sub-text-color);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.config-view__detail-badge--readonly {
+  background: color-mix(
+    in srgb,
+    var(--subpage-tertiary-hover-border) 30%,
+    transparent
+  );
+}
+
+.config-view__detail-badge--override {
+  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
+  color: var(--primary-color);
+}
+
 .config-view__record-subtitle {
   font-size: 12px;
   color: var(--sub-text-color);
@@ -74,6 +167,92 @@
   gap: 10px;
 }
 
+.config-view__detail-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.config-view__detail-list-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.config-view__detail-summary-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.config-view__detail-list-main {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.config-view__record-card .config-view__record-actions {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-2px);
+  transition: opacity .16s ease, transform .16s ease;
+}
+
+.config-view__record-card:hover .config-view__record-actions,
+.config-view__record-card:focus-within .config-view__record-actions {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.config-view__detail-list-main:hover
+  .config-view__record-heading
+  > div:first-child {
+  color: var(--primary-color);
+}
+
+.config-view__detail-list-empty {
+  padding: 14px 16px;
+  border: var(--subpage-tertiary-border);
+  border-radius: 10px;
+  background: var(--subpage-tertiary-bg);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  transition: border-color .2s ease, background-color .2s ease;
+}
+
+.config-view__detail-list-empty:hover {
+  border-color: var(--subpage-tertiary-hover-border);
+  background: var(--subpage-tertiary-hover-bg);
+}
+
+.config-view__detail-list-empty-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.config-view__detail-list-empty-desc {
+  font-size: 12px;
+  color: var(--sub-text-color);
+}
+
+@media (hover: none) {
+  .config-view__record-card .config-view__record-actions {
+    opacity: 1;
+    pointer-events: auto;
+    transform: none;
+  }
+}
+
 .config-view__record-row {
   display: flex;
   align-items: flex-start;
@@ -106,9 +285,15 @@
   gap: 8px;
   flex: 1;
   padding: 10px 12px;
-  border: 1px dashed var(--border-color);
+  border: var(--subpage-tertiary-border);
   border-radius: 8px;
-  background: var(--sub-bg-color);
+  background: var(--subpage-tertiary-bg);
+  transition: border-color .2s ease, background-color .2s ease;
+}
+
+.config-view__record-add-inputs:hover {
+  border-color: var(--subpage-tertiary-hover-border);
+  background: var(--subpage-tertiary-hover-bg);
 }
 
 .config-view__record-add-inputs .ant-input,

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

@@ -1,7 +1,7 @@
 import './RecordJsonEditor.scss'
 
 import { Button, Input, Tooltip } from 'antd'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 
 import { ComplexTextEditor } from '../ConfigEditors'
 import type { TranslationFn } from '../configUtils'
@@ -9,16 +9,19 @@ import type { TranslationFn } from '../configUtils'
 export const RecordJsonEditor = ({
   value,
   onChange,
+  highlightedKey,
   t,
   keyPlaceholder
 }: {
   value: Record<string, unknown>
   onChange: (nextValue: Record<string, unknown>) => void
+  highlightedKey?: string
   t: TranslationFn
   keyPlaceholder: string
 }) => {
   const [newKey, setNewKey] = useState('')
   const entries = useMemo(() => Object.entries(value), [value])
+  const cardRefs = useRef<Record<string, HTMLDivElement | null>>({})
   const [collapsedKeys, setCollapsedKeys] = useState<Record<string, boolean>>(() => (
     Object.fromEntries(entries.map(([key]) => [key, true]))
   ))
@@ -33,6 +36,21 @@ export const RecordJsonEditor = ({
     })
   }, [entries])
 
+  useEffect(() => {
+    if (highlightedKey == null || highlightedKey.trim() === '' || !Object.hasOwn(value, highlightedKey)) {
+      return
+    }
+
+    setCollapsedKeys(prev => prev[highlightedKey] === false ? prev : { ...prev, [highlightedKey]: false })
+    const frame = window.requestAnimationFrame(() => {
+      cardRefs.current[highlightedKey]?.scrollIntoView({
+        block: 'center',
+        behavior: 'smooth'
+      })
+    })
+    return () => window.cancelAnimationFrame(frame)
+  }, [highlightedKey, value])
+
   return (
     <div className='config-view__record-list'>
       {entries.map(([key, itemValue]) => {
@@ -40,7 +58,14 @@ export const RecordJsonEditor = ({
         return (
           <div
             key={key}
-            className={`config-view__record-card${isCollapsed ? ' config-view__record-card--collapsed' : ''}`}
+            ref={(node) => {
+              cardRefs.current[key] = node
+            }}
+            className={[
+              'config-view__record-card',
+              isCollapsed ? 'config-view__record-card--collapsed' : '',
+              highlightedKey === key ? 'config-view__record-card--highlighted' : ''
+            ].filter(Boolean).join(' ')}
           >
             <div className='config-view__record-title'>
               <div className='config-view__record-title-left'>

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

@@ -0,0 +1,183 @@
+import { Input, InputNumber, Select, Switch } from 'antd'
+import type { ReactNode } from 'react'
+
+import type { ConfigUiField, ConfigUiFieldOption, ConfigUiObjectSchema } from '@vibe-forge/types'
+
+import { ComplexTextEditor, StringArrayEditor } from '../ConfigEditors'
+import { FieldRow } from '../ConfigFieldRow'
+import { getTypeIcon, getValueByPath, isSensitiveKey, setValueByPath } from '../configUtils'
+import type { TranslationFn } from '../configUtils'
+
+import { toLabel } from './schemaRecordUtils'
+
+const buildSelectOptions = (options: ConfigUiFieldOption[] = []) => (
+  options.map(option => ({
+    value: option.value,
+    label: option.label ?? option.value
+  }))
+)
+const configSelectSuffixIcon = (
+  <span className='material-symbols-rounded config-view__select-chevron'>expand_more</span>
+)
+
+const resolveFieldIcon = (field: ConfigUiField) => {
+  if (field.icon != null) return field.icon
+  if (field.type === 'json') return getTypeIcon('object')
+  if (field.type === 'string[]') return getTypeIcon('array')
+  if (field.type === 'select' || field.type === 'multiline') return getTypeIcon('string')
+  if (field.type === 'string' || field.type === 'number' || field.type === 'boolean') {
+    return getTypeIcon(field.type)
+  }
+  return getTypeIcon('object')
+}
+
+export const SchemaObjectEditor = ({
+  value,
+  schema,
+  onChange,
+  t,
+  hideFieldPaths,
+  visibleFieldPaths,
+  resolveFieldLabel,
+  resolveFieldDescription,
+  resolveFieldOptions
+}: {
+  value: Record<string, unknown>
+  schema: ConfigUiObjectSchema
+  onChange: (nextValue: Record<string, unknown>) => void
+  t: TranslationFn
+  hideFieldPaths?: string[][]
+  visibleFieldPaths?: string[][]
+  resolveFieldLabel?: (field: ConfigUiField, fallback: string) => string
+  resolveFieldDescription?: (field: ConfigUiField, fallback: string) => string
+  resolveFieldOptions?: (field: ConfigUiField) => ConfigUiFieldOption[] | undefined
+}) => {
+  const renderField = (field: ConfigUiField) => {
+    if (
+      visibleFieldPaths != null && !visibleFieldPaths.some(visiblePath => (
+        field.path.length === visiblePath.length &&
+        field.path.every((segment, index) => segment === visiblePath[index])
+      ))
+    ) {
+      return null
+    }
+
+    if (
+      hideFieldPaths?.some(hiddenPath => (
+        field.path.length === hiddenPath.length &&
+        field.path.every((segment, index) => segment === hiddenPath[index])
+      ))
+    ) {
+      return null
+    }
+
+    const currentValue = getValueByPath(value, field.path)
+    const valueToUse = currentValue !== undefined ? currentValue : field.defaultValue
+    const fallbackTitle = field.label ?? toLabel(field.path[field.path.length - 1] ?? '')
+    const fallbackDescription = field.description ?? ''
+    const title = resolveFieldLabel?.(field, fallbackTitle) ?? fallbackTitle
+    const description = resolveFieldDescription?.(field, fallbackDescription) ?? fallbackDescription
+    const resolvedOptions = resolveFieldOptions?.(field)
+    const nextValue = (updated: unknown) => {
+      onChange(setValueByPath(value, field.path, updated) as Record<string, unknown>)
+    }
+
+    let control: ReactNode = null
+    const stacked = field.type === 'json' || field.type === 'multiline' || field.type === 'string[]'
+
+    if (field.type === 'string' && resolvedOptions != null) {
+      control = (
+        <Select
+          allowClear
+          value={typeof valueToUse === 'string' && valueToUse !== '' ? valueToUse : undefined}
+          options={buildSelectOptions(resolvedOptions)}
+          placeholder={field.placeholder}
+          suffixIcon={configSelectSuffixIcon}
+          onChange={(selected) => nextValue(typeof selected === 'string' ? selected : undefined)}
+        />
+      )
+    } else if (field.type === 'string') {
+      const sensitive = field.sensitive === true || isSensitiveKey(field.path[field.path.length - 1] ?? '')
+      control = sensitive
+        ? (
+          <Input.Password
+            value={typeof valueToUse === 'string' ? valueToUse : ''}
+            onChange={(event) => nextValue(event.target.value)}
+            placeholder={field.placeholder ?? t('config.editor.secretPlaceholder')}
+          />
+        )
+        : (
+          <Input
+            value={typeof valueToUse === 'string' ? valueToUse : ''}
+            onChange={(event) => nextValue(event.target.value)}
+            placeholder={field.placeholder}
+          />
+        )
+    } else if (field.type === 'multiline') {
+      control = (
+        <Input.TextArea
+          value={typeof valueToUse === 'string' ? valueToUse : ''}
+          onChange={(event) => nextValue(event.target.value)}
+          autoSize={{ minRows: 2 }}
+          placeholder={field.placeholder}
+        />
+      )
+    } else if (field.type === 'number') {
+      control = (
+        <InputNumber
+          value={typeof valueToUse === 'number' ? valueToUse : undefined}
+          onChange={(input) => nextValue(typeof input === 'number' ? input : undefined)}
+        />
+      )
+    } else if (field.type === 'boolean') {
+      control = (
+        <Switch
+          checked={Boolean(valueToUse)}
+          onChange={(checked) => nextValue(checked)}
+        />
+      )
+    } else if (field.type === 'string[]') {
+      control = (
+        <StringArrayEditor
+          value={Array.isArray(valueToUse) ? valueToUse.filter(item => typeof item === 'string') : []}
+          onChange={(items) => nextValue(items)}
+          t={t}
+        />
+      )
+    } else if (field.type === 'select') {
+      control = (
+        <Select
+          value={typeof valueToUse === 'string' ? valueToUse : undefined}
+          options={buildSelectOptions(resolvedOptions ?? field.options ?? [])}
+          suffixIcon={configSelectSuffixIcon}
+          onChange={(selected) => nextValue(selected)}
+        />
+      )
+    } else {
+      control = (
+        <ComplexTextEditor
+          value={valueToUse ?? {}}
+          onChange={(updated) => nextValue(updated)}
+        />
+      )
+    }
+
+    return (
+      <FieldRow
+        key={field.path.join('.')}
+        title={title}
+        description={description}
+        icon={resolveFieldIcon(field)}
+        layout={stacked ? 'stacked' : 'inline'}
+      >
+        {control}
+      </FieldRow>
+    )
+  }
+
+  return (
+    <div className='config-view__record-fields'>
+      {schema.fields.map(renderField)}
+    </div>
+  )
+}

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

@@ -0,0 +1,184 @@
+import './RecordJsonEditor.scss'
+
+import { Button, Input, Select, Tooltip } from 'antd'
+import { useEffect, useMemo, useState } from 'react'
+
+import type { ConfigUiRecordMapSchema } from '@vibe-forge/types'
+
+import { ComplexTextEditor } from '../ConfigEditors'
+import { getValueByPath, setValueByPath } from '../configUtils'
+import type { TranslationFn } from '../configUtils'
+
+import { SchemaObjectEditor } from './SchemaObjectEditor'
+import { buildConfigUiObjectDefaultValue, resolveConfigUiRecordEntry } from './schemaRecordUtils'
+
+export const SchemaRecordEditor = ({
+  value,
+  schema,
+  onChange,
+  t,
+  keyPlaceholder
+}: {
+  value: Record<string, unknown>
+  schema: ConfigUiRecordMapSchema
+  onChange: (nextValue: Record<string, unknown>) => void
+  t: TranslationFn
+  keyPlaceholder: string
+}) => {
+  const [newKey, setNewKey] = useState('')
+  const [newKind, setNewKind] = useState(schema.entryKinds?.[0]?.key ?? '')
+  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 { itemSchema, isKnownEntry } = resolveConfigUiRecordEntry({
+          schema,
+          entryKey: key,
+          entryValue: recordValue
+        })
+        const isCollapsed = collapsedKeys[key] === true
+        const discriminatorField = schema.discriminatorField ?? 'type'
+        const discriminatorValue = schema.mode === 'discriminated'
+          ? getValueByPath(recordValue, [discriminatorField])
+          : undefined
+        const shouldRenderJsonFallback = !isKnownEntry && schema.unknownEditor === 'json'
+        const kindMeta = typeof discriminatorValue === 'string'
+          ? schema.entryKinds?.find(item => item.key === discriminatorValue)
+          : schema.entryKinds?.find(item => item.key === key)
+
+        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>{key}</div>
+                  {kindMeta?.label != null && kindMeta.label !== key && (
+                    <div className='config-view__record-subtitle'>{kindMeta.label}</div>
+                  )}
+                  {kindMeta?.description != null && kindMeta.description !== '' && (
+                    <div className='config-view__record-desc'>{kindMeta.description}</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'>
+              {!shouldRenderJsonFallback && itemSchema != null && (
+                <SchemaObjectEditor
+                  value={recordValue}
+                  schema={itemSchema}
+                  onChange={(updated) => {
+                    onChange({ ...value, [key]: updated })
+                  }}
+                  t={t}
+                  hideFieldPaths={isKnownEntry && schema.mode === 'discriminated' ? [[discriminatorField]] : undefined}
+                />
+              )}
+              {shouldRenderJsonFallback && (
+                <ComplexTextEditor
+                  value={recordValue}
+                  onChange={(updated) => {
+                    onChange({ ...value, [key]: updated })
+                  }}
+                />
+              )}
+            </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)}
+          />
+          {schema.mode === 'discriminated' && (
+            <Select
+              value={newKind}
+              options={(schema.entryKinds ?? []).map(item => ({
+                value: item.key,
+                label: item.label ?? item.key
+              }))}
+              onChange={(nextValue) => setNewKind(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={newKey.trim() === '' ||
+                Object.hasOwn(value, newKey) ||
+                (schema.mode === 'discriminated' && newKind.trim() === '')}
+              onClick={() => {
+                const nextSchema = schema.mode === 'discriminated'
+                  ? (schema.schemas[newKind] ?? schema.unknownSchema)
+                  : (schema.schemas[newKey] ?? schema.unknownSchema)
+                const nextEntry = buildConfigUiObjectDefaultValue(nextSchema)
+
+                if (schema.mode === 'discriminated') {
+                  const discriminatorField = schema.discriminatorField ?? 'type'
+                  Object.assign(nextEntry, setValueByPath(nextEntry, [discriminatorField], newKind))
+                }
+
+                onChange({ ...value, [newKey]: nextEntry })
+                setNewKey('')
+              }}
+            />
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -1,6 +1,7 @@
 export { BooleanRecordEditor } from './BooleanRecordEditor'
-export { ChannelRecordEditor } from './ChannelRecordEditor'
 export { KeyValueEditor } from './KeyValueEditor'
 export { McpServersRecordEditor } from './McpServersRecordEditor'
 export { ModelServicesRecordEditor } from './ModelServicesRecordEditor'
 export { RecordJsonEditor } from './RecordJsonEditor'
+export { SchemaObjectEditor } from './SchemaObjectEditor'
+export { SchemaRecordEditor } from './SchemaRecordEditor'