@vibe-forge/client 0.3.0 → 0.5.0

package/src/components/chat/tools/task/components/TaskToolCard.tsx

@@ -6,7 +6,7 @@ import { useNavigate } from 'react-router-dom'
 import type { ChatMessage, WSEvent } from '@vibe-forge/core'
 
 import { connectionManager } from '#~/connectionManager.js'
-import { CodeBlock } from '../../../CodeBlock'
+import { CodeBlock } from '#~/components/CodeBlock'
 
 export interface TaskToolCardProps {
   description?: string
@@ -154,11 +154,13 @@ export function TaskToolCard({
             ))}
           </div>
         )}
-        <CodeBlock
-          hideHeader
-          code={logText}
-          lang='md'
-        />
+        {logText !== '' && (
+          <CodeBlock
+            hideHeader
+            code={logText}
+            lang='md'
+          />
+        )}
       </div>
     </div>
   )

package/src/components/config/ConfigSectionForm.tsx

@@ -20,6 +20,7 @@ import {
 import type { TranslationFn } from './configUtils'
 import {
   BooleanRecordEditor,
+  ChannelRecordEditor,
   KeyValueEditor,
   McpServersRecordEditor,
   ModelServicesRecordEditor,
@@ -49,7 +50,7 @@ export const SectionForm = ({
   if (fields.length === 0) {
     return <Empty description={t('common.noData')} image={null} />
   }
-  const directRecordSections = new Set(['modelServices', 'adapters', 'plugins', 'mcp'])
+  const directRecordSections = new Set(['modelServices', 'channels', 'adapters', 'plugins', 'mcp'])
 
   const modelServiceEntries = Object.entries(mergedModelServices)
   const modelServiceOptions: Array<{ value: string; label: ReactNode }> = modelServiceEntries.map(([key, entry]) => {
@@ -97,6 +98,7 @@ export const SectionForm = ({
 
   const getRecordKeyPlaceholder = (field: FieldSpec) => {
     if (sectionKey === 'modelServices') return t('config.editor.newModelServiceName')
+    if (sectionKey === 'channels') return t('config.editor.newChannelName')
     if (sectionKey === 'adapters') return t('config.editor.newAdapterName')
     if (sectionKey === 'plugins') {
       if (field.path.join('.') === 'extraKnownMarketplaces') return t('config.editor.newMarketplaceName')
@@ -247,6 +249,15 @@ export const SectionForm = ({
             keyPlaceholder={getRecordKeyPlaceholder(field)}
           />
         )
+      } else if (field.recordKind === 'channels') {
+        control = (
+          <ChannelRecordEditor
+            value={recordValue}
+            onChange={handleValueChange}
+            t={t}
+            keyPlaceholder={getRecordKeyPlaceholder(field)}
+          />
+        )
       } else if (field.recordKind === 'mcpServers') {
         control = (
           <McpServersRecordEditor

package/src/components/config/ConfigSourceSwitch.tsx

@@ -1,19 +1,16 @@
 import { Radio } from 'antd'
+import type { ReactNode } from 'react'
 
 import type { ConfigSource } from '@vibe-forge/core'
 
-import type { TranslationFn } from './configUtils'
-
 export function ConfigSourceSwitch({
   value,
   onChange,
-  configPresent,
-  t
+  options,
 }: {
   value: ConfigSource
   onChange: (value: ConfigSource) => void
-  configPresent?: { project?: boolean; user?: boolean }
-  t: TranslationFn
+  options: Array<{ value: ConfigSource; icon: string; label: ReactNode }>
 }) {
   return (
     <Radio.Group
@@ -24,34 +21,15 @@ export function ConfigSourceSwitch({
       onChange={(event) => {
         onChange(event.target.value as ConfigSource)
       }}
-      options={[
-        {
-          label: (
-            <span className='config-view__source-option'>
-              <span className='material-symbols-rounded'>folder</span>
-              <span>
-                {configPresent?.project === true
-                  ? t('config.sources.project')
-                  : t('config.sources.projectMissing')}
-              </span>
-            </span>
-          ),
-          value: 'project'
-        },
-        {
-          label: (
-            <span className='config-view__source-option'>
-              <span className='material-symbols-rounded'>person</span>
-              <span>
-                {configPresent?.user === true
-                  ? t('config.sources.user')
-                  : t('config.sources.userMissing')}
-              </span>
-            </span>
-          ),
-          value: 'user'
-        }
-      ]}
+      options={options.map(opt => ({
+        value: opt.value,
+        label: (
+          <span className='config-view__source-option'>
+            <span className='material-symbols-rounded'>{opt.icon}</span>
+            <span>{opt.label}</span>
+          </span>
+        )
+      }))}
     />
   )
 }

package/src/components/config/channelDefinitions.ts

@@ -0,0 +1,6 @@
+import { channelDefinition } from '@vibe-forge/channel-lark'
+import type { ChannelDescriptor } from '@vibe-forge/core/channel'
+
+export const channelDefinitions: ChannelDescriptor[] = [
+  channelDefinition
+]

package/src/components/config/configSchema.ts

@@ -9,7 +9,7 @@ export type FieldValueType =
   | 'record'
   | 'shortcut'
 
-export type RecordKind = 'json' | 'modelServices' | 'mcpServers' | 'boolean' | 'keyValue'
+export type RecordKind = 'json' | 'modelServices' | 'mcpServers' | 'boolean' | 'keyValue' | 'channels'
 
 export interface FieldOption {
   value: string
@@ -260,6 +260,15 @@ export const configSchema: Record<string, FieldSpec[]> = {
       icon: 'hub'
     }
   ],
+  channels: [
+    {
+      path: [],
+      type: 'record',
+      recordKind: 'channels',
+      defaultValue: {},
+      icon: 'campaign'
+    }
+  ],
   adapters: [
     {
       path: [],

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

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

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

@@ -0,0 +1,397 @@
+import './ChannelRecordEditor.scss'
+
+import { Button, Input, InputNumber, Select, Switch, Tooltip } from 'antd'
+import { useEffect, useMemo, useState } from 'react'
+import type { ZodRawShape, ZodTypeAny } from 'zod'
+import { z } from 'zod'
+
+import type { ChannelDescriptor } from '@vibe-forge/core/channel'
+import { channelBaseSchema } from '@vibe-forge/core/channel'
+
+import { ComplexTextEditor, StringArrayEditor } from '../ConfigEditors'
+import { FieldRow } from '../ConfigFieldRow'
+import { channelDefinitions } from '../channelDefinitions'
+import { getTypeIcon, isSensitiveKey } from '../configUtils'
+import type { TranslationFn } from '../configUtils'
+
+type ChannelRecordValue = Record<string, unknown>
+
+const getObjectShape = (schema: ZodTypeAny): ZodRawShape => {
+  if (schema instanceof z.ZodObject) return schema.shape
+  if (schema instanceof z.ZodEffects) return getObjectShape(schema.innerType())
+  if (schema instanceof z.ZodOptional) return getObjectShape(schema.unwrap())
+  if (schema instanceof z.ZodDefault) return getObjectShape(schema.removeDefault())
+  if (schema instanceof z.ZodNullable) return getObjectShape(schema.unwrap())
+  return {}
+}
+
+const unwrapSchema = (schema: ZodTypeAny): ZodTypeAny => {
+  if (schema instanceof z.ZodEffects) return unwrapSchema(schema.innerType())
+  if (schema instanceof z.ZodOptional) return unwrapSchema(schema.unwrap())
+  if (schema instanceof z.ZodDefault) return unwrapSchema(schema.removeDefault())
+  if (schema instanceof z.ZodNullable) return unwrapSchema(schema.unwrap())
+  return schema
+}
+
+const getDefaultValue = (schema: ZodTypeAny): unknown => {
+  if (schema instanceof z.ZodDefault) return schema._def.defaultValue()
+  if (schema instanceof z.ZodOptional) return undefined
+  if (schema instanceof z.ZodNullable) return null
+  if (schema instanceof z.ZodLiteral) return schema.value
+  if (schema instanceof z.ZodEnum) return schema.options[0]
+  if (schema instanceof z.ZodNativeEnum) {
+    const values = Object.values(schema.enum)
+    return values.length > 0 ? values[0] : undefined
+  }
+  if (schema instanceof z.ZodString) return ''
+  if (schema instanceof z.ZodNumber) return 0
+  if (schema instanceof z.ZodBoolean) return false
+  if (schema instanceof z.ZodArray) return []
+  if (schema instanceof z.ZodObject) {
+    const shape = getObjectShape(schema)
+    return Object.fromEntries(Object.entries(shape).map(([key, value]) => [key, getDefaultValue(value)]))
+  }
+  if (schema instanceof z.ZodRecord) return {}
+  if (schema instanceof z.ZodEffects) return getDefaultValue(schema.innerType())
+  return undefined
+}
+
+const toLabel = (key: string) =>
+  key
+    .replace(/_/g, ' ')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/\b\w/g, char => char.toUpperCase())
+
+const buildRecordDefaults = (definition: ChannelDescriptor) => {
+  const shape = getObjectShape(definition.configSchema)
+  const entries = Object.entries(shape)
+  return entries.reduce<Record<string, unknown>>((acc, [key, schema]) => {
+    acc[key] = getDefaultValue(schema)
+    return acc
+  }, {})
+}
+
+const getChannelDefinition = (type: string | undefined) =>
+  channelDefinitions.find(definition => definition.type === type)
+
+export const ChannelRecordEditor = ({
+  value,
+  onChange,
+  t,
+  keyPlaceholder
+}: {
+  value: Record<string, unknown>
+  onChange: (nextValue: Record<string, unknown>) => void
+  t: TranslationFn
+  keyPlaceholder: string
+}) => {
+  const [newKey, setNewKey] = useState('')
+  const [newType, setNewType] = useState(channelDefinitions[0]?.type ?? '')
+  const entries = useMemo(() => Object.entries(value), [value])
+  const [collapsedKeys, setCollapsedKeys] = useState<Record<string, boolean>>(() => (
+    Object.fromEntries(entries.map(([key]) => [key, true]))
+  ))
+  const baseKeys = useMemo(() => new Set(Object.keys(getObjectShape(channelBaseSchema))), [])
+  const typeOptions = useMemo(() =>
+    channelDefinitions.map(definition => ({
+      value: definition.type,
+      label: definition.label
+    })), [])
+
+  useEffect(() => {
+    setCollapsedKeys(prev => {
+      const next: Record<string, boolean> = {}
+      for (const [key] of entries) {
+        next[key] = prev[key] ?? true
+      }
+      return next
+    })
+  }, [entries])
+
+  const updateChannel = (key: string, nextValue: ChannelRecordValue) => {
+    onChange({ ...value, [key]: nextValue })
+  }
+
+  const renderField = (
+    channelKey: string,
+    recordValue: ChannelRecordValue,
+    fieldKey: string,
+    fieldSchema: ZodTypeAny
+  ) => {
+    const rawSchema = unwrapSchema(fieldSchema)
+    const description = rawSchema.description ?? ''
+    const label = toLabel(fieldKey)
+    const currentValue = recordValue[fieldKey]
+    const valueToUse = currentValue !== undefined ? currentValue : getDefaultValue(fieldSchema)
+
+    if (rawSchema instanceof z.ZodString) {
+      const isSensitive = isSensitiveKey(fieldKey)
+      return (
+        <FieldRow key={fieldKey} title={label} description={description} icon={getTypeIcon('string')}>
+          {isSensitive
+            ? (
+              <Input.Password
+                value={typeof valueToUse === 'string' ? valueToUse : ''}
+                onChange={(event) => {
+                  updateChannel(channelKey, { ...recordValue, [fieldKey]: event.target.value })
+                }}
+                placeholder={t('config.editor.secretPlaceholder')}
+              />
+            )
+            : (
+              <Input
+                value={typeof valueToUse === 'string' ? valueToUse : ''}
+                onChange={(event) => {
+                  updateChannel(channelKey, { ...recordValue, [fieldKey]: event.target.value })
+                }}
+              />
+            )}
+        </FieldRow>
+      )
+    }
+
+    if (rawSchema instanceof z.ZodNumber) {
+      return (
+        <FieldRow key={fieldKey} title={label} description={description} icon={getTypeIcon('number')}>
+          <InputNumber
+            value={typeof valueToUse === 'number' ? valueToUse : 0}
+            onChange={(nextValue) => {
+              updateChannel(channelKey, { ...recordValue, [fieldKey]: nextValue ?? 0 })
+            }}
+          />
+        </FieldRow>
+      )
+    }
+
+    if (rawSchema instanceof z.ZodBoolean) {
+      return (
+        <FieldRow key={fieldKey} title={label} description={description} icon={getTypeIcon('boolean')}>
+          <Switch
+            checked={Boolean(valueToUse)}
+            onChange={(checked) => {
+              updateChannel(channelKey, { ...recordValue, [fieldKey]: checked })
+            }}
+          />
+        </FieldRow>
+      )
+    }
+
+    if (rawSchema instanceof z.ZodEnum || rawSchema instanceof z.ZodNativeEnum) {
+      const optionValues: string[] = (
+        rawSchema instanceof z.ZodEnum
+          ? rawSchema.options
+          : Object.values(rawSchema.enum)
+      ).map((option: string | number) => String(option))
+      return (
+        <FieldRow key={fieldKey} title={label} description={description} icon={getTypeIcon('string')}>
+          <Select
+            value={typeof valueToUse === 'string' ? valueToUse : undefined}
+            options={optionValues.map((option) => ({ value: option, label: option }))}
+            onChange={(nextValue) => {
+              updateChannel(channelKey, { ...recordValue, [fieldKey]: nextValue })
+            }}
+          />
+        </FieldRow>
+      )
+    }
+
+    if (rawSchema instanceof z.ZodArray) {
+      const inner = unwrapSchema(rawSchema.element)
+      if (inner instanceof z.ZodString) {
+        const items = Array.isArray(valueToUse)
+          ? valueToUse.filter(item => typeof item === 'string')
+          : []
+        return (
+          <FieldRow
+            key={fieldKey}
+            title={label}
+            description={description}
+            icon={getTypeIcon('array')}
+            layout='stacked'
+          >
+            <StringArrayEditor
+              value={items}
+              onChange={(nextValue) => {
+                updateChannel(channelKey, { ...recordValue, [fieldKey]: nextValue })
+              }}
+              t={t}
+            />
+          </FieldRow>
+        )
+      }
+      return (
+        <FieldRow
+          key={fieldKey}
+          title={label}
+          description={description}
+          icon={getTypeIcon('array')}
+          layout='stacked'
+        >
+          <ComplexTextEditor
+            value={Array.isArray(valueToUse) ? valueToUse : []}
+            onChange={(nextValue) => {
+              updateChannel(channelKey, { ...recordValue, [fieldKey]: nextValue })
+            }}
+          />
+        </FieldRow>
+      )
+    }
+
+    return (
+      <FieldRow
+        key={fieldKey}
+        title={label}
+        description={description}
+        icon={getTypeIcon('object')}
+        layout='stacked'
+      >
+        <ComplexTextEditor
+          value={valueToUse ?? {}}
+          onChange={(nextValue) => {
+            updateChannel(channelKey, { ...recordValue, [fieldKey]: nextValue })
+          }}
+        />
+      </FieldRow>
+    )
+  }
+
+  return (
+    <div className='config-view__record-list'>
+      <div className='config-view__record-add'>
+        <div className='config-view__record-add-inputs'>
+          <Input
+            value={newKey}
+            placeholder={keyPlaceholder}
+            onChange={(event) => setNewKey(event.target.value)}
+          />
+          <Select
+            value={newType}
+            options={typeOptions}
+            onChange={(nextValue) => setNewType(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) || newType === ''}
+              onClick={() => {
+                const definition = getChannelDefinition(newType)
+                if (!definition) return
+                onChange({
+                  ...value,
+                  [newKey]: buildRecordDefaults(definition)
+                })
+                setNewKey('')
+              }}
+            />
+          </Tooltip>
+        </div>
+      </div>
+      {entries.map(([key, itemValue]) => {
+        const recordValue = (itemValue != null && typeof itemValue === 'object')
+          ? itemValue as ChannelRecordValue
+          : {}
+        const type = typeof recordValue.type === 'string' ? recordValue.type : undefined
+        const definition = getChannelDefinition(type)
+        const titleValue = typeof recordValue.title === 'string' ? recordValue.title : ''
+        const descriptionValue = typeof recordValue.description === 'string' ? recordValue.description : ''
+        const displayName = titleValue.trim() !== '' ? titleValue : key
+        const typeLabel = definition?.label ?? type ?? t('config.editor.unknownChannelType')
+        const isCollapsed = collapsedKeys[key] === true
+        const shape = definition ? getObjectShape(definition.configSchema) : {}
+        const fieldEntries = Object.entries(shape)
+          .filter(([fieldKey]) => fieldKey !== 'type')
+          .sort(([a], [b]) => {
+            const order = ['title', 'description', 'enabled', 'admins']
+            const aIndex = order.indexOf(a)
+            const bIndex = order.indexOf(b)
+            if (aIndex === -1 && bIndex === -1) return a.localeCompare(b)
+            if (aIndex === -1) return 1
+            if (bIndex === -1) return -1
+            return aIndex - bIndex
+          })
+
+        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>
+                  <div className='config-view__record-subtitle'>
+                    {key} · {typeLabel}
+                  </div>
+                  {descriptionValue !== '' && (
+                    <div className='config-view__record-desc'>{descriptionValue}</div>
+                  )}
+                </div>
+              </div>
+              <div className='config-view__record-actions'>
+                <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>
+            <div className='config-view__record-body'>
+              <div className='config-view__record-fields'>
+                <FieldRow
+                  title={t('config.editor.channelType')}
+                  description={definition?.description ?? ''}
+                  icon={getTypeIcon('string')}
+                >
+                  <Select
+                    value={type}
+                    options={typeOptions}
+                    onChange={(nextType) => {
+                      const nextDefinition = getChannelDefinition(nextType)
+                      if (!nextDefinition) return
+                      const defaults = buildRecordDefaults(nextDefinition)
+                      const preserved = Object.fromEntries(
+                        Object.entries(recordValue).filter(([fieldKey]) => baseKeys.has(fieldKey))
+                      )
+                      updateChannel(key, { ...defaults, ...preserved, type: nextType })
+                    }}
+                  />
+                </FieldRow>
+                {fieldEntries.map(([fieldKey, fieldSchema]) => (
+                  renderField(key, recordValue, fieldKey, fieldSchema)
+                ))}
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

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

@@ -1,3 +1,4 @@
+export { ChannelRecordEditor } from './ChannelRecordEditor'
 export { BooleanRecordEditor } from './BooleanRecordEditor'
 export { KeyValueEditor } from './KeyValueEditor'
 export { McpServersRecordEditor } from './McpServersRecordEditor'

package/src/components/knowledge-base/components/RuleItem.tsx

@@ -5,7 +5,7 @@ import useSWR from 'swr'
 
 import type { RuleDetail, RuleSummary } from '#~/api.js'
 import { getRuleDetail } from '#~/api.js'
-import { MarkdownContent } from '#~/components/chat/MarkdownContent'
+import { MarkdownContent } from '#~/components/MarkdownContent'
 import { LoadingState } from './LoadingState'
 
 type RuleItemProps = {

package/src/components/knowledge-base/components/SpecItem.tsx

@@ -7,7 +7,7 @@ import useSWR from 'swr'
 
 import type { SpecDetail, SpecSummary } from '#~/api.js'
 import { getSpecDetail } from '#~/api.js'
-import { MarkdownContent } from '#~/components/chat/MarkdownContent'
+import { MarkdownContent } from '#~/components/MarkdownContent'
 import { LoadingState } from './LoadingState'
 import { MetaList } from './MetaList'
 

package/src/components/sidebar/SessionItem.scss

@@ -163,11 +163,15 @@
         align-items: center;
 
         .session-tag {
+          max-width: 120px;
           font-size: 10px;
           margin: 0;
           padding: 0 4px;
           line-height: 14px;
           border-radius: 2px;
+          display: inline-flex;
+          align-items: center;
+          white-space: nowrap;
 
           &--automation {
             padding: 0 6px;
@@ -176,6 +180,19 @@
           &__link {
             color: var(--primary-color);
             text-decoration: none;
+            display: inline-block;
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          &__text {
+            display: inline-block;
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
           }
         }
       }

package/src/components/sidebar/SessionItem.tsx

@@ -226,28 +226,36 @@ export function SessionItem({
               if (automationTag) {
                 const href = `/automation?rule=${encodeURIComponent(automationTag.ruleId)}`
                 return (
-                  <Tag
+                  <Tooltip
                     key={tag}
-                    className='session-tag session-tag--automation'
-                    onClick={(event) => event.stopPropagation()}
+                    title={automationTag.ruleTitle}
                   >
-                    <a
-                      className='session-tag__link'
-                      href={href}
+                    <Tag
+                      className='session-tag session-tag--automation'
                       onClick={(event) => event.stopPropagation()}
                     >
-                      {automationTag.ruleTitle}
-                    </a>
-                  </Tag>
+                      <a
+                        className='session-tag__link'
+                        href={href}
+                        onClick={(event) => event.stopPropagation()}
+                      >
+                        {automationTag.ruleTitle}
+                      </a>
+                    </Tag>
+                  </Tooltip>
                 )
               }
               return (
-                <Tag
+                <Tooltip
                   key={tag}
-                  className='session-tag'
+                  title={tag}
                 >
-                  {tag}
-                </Tag>
+                  <Tag className='session-tag'>
+                    <span className='session-tag__text'>
+                      {tag}
+                    </span>
+                  </Tag>
+                </Tooltip>
               )
             })}
           </div>