@vibe-forge/client 0.2.0-alpha.0

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

@@ -0,0 +1,113 @@
+import './RecordJsonEditor.scss'
+
+import { Button, Input, Tooltip } from 'antd'
+import { useEffect, useMemo, useState } from 'react'
+
+import { ComplexTextEditor } from '../ConfigEditors'
+import type { TranslationFn } from '../configUtils'
+
+export const RecordJsonEditor = ({
+  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 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'>
+            <ComplexTextEditor
+              value={itemValue}
+              onChange={(next) => {
+                onChange({ ...value, [key]: next })
+              }}
+            />
+          </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]: {} })
+                setNewKey('')
+              }}
+            />
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,5 @@
+export { BooleanRecordEditor } from './BooleanRecordEditor'
+export { KeyValueEditor } from './KeyValueEditor'
+export { McpServersRecordEditor } from './McpServersRecordEditor'
+export { ModelServicesRecordEditor } from './ModelServicesRecordEditor'
+export { RecordJsonEditor } from './RecordJsonEditor'

package/src/components/knowledge-base/KnowledgeBaseView.scss

@@ -0,0 +1,19 @@
+.knowledge-base-view {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  background: var(--bg-color);
+  color: var(--text-color);
+  overflow: hidden;
+}
+
+.knowledge-base-view__tabs {
+  flex: 1;
+  min-height: 0;
+}
+
+.knowledge-base-view__tabs > .ant-tabs-nav {
+  padding: 0 24px;
+  margin: 0;
+}

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

@@ -0,0 +1,186 @@
+import './KnowledgeBaseView.scss'
+
+import { App, Tabs } from 'antd'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+
+import type { EntitySummary, SpecSummary } from '#~/api.js'
+import { EntitiesTab } from './components/EntitiesTab.js'
+import { FlowsTab } from './components/FlowsTab.js'
+import { KnowledgeBaseHeader } from './components/KnowledgeBaseHeader.js'
+import { RulesTab } from './components/RulesTab.js'
+import { SkillsTab } from './components/SkillsTab.js'
+import { TabLabel } from './components/TabLabel.js'
+
+export function KnowledgeBaseView() {
+  const { t } = useTranslation()
+  const { message } = App.useApp()
+  const {
+    data: specsRes,
+    isLoading: isSpecsLoading,
+    mutate: mutateSpecs
+  } = useSWR<{ specs: SpecSummary[] }>('/api/ai/specs')
+  const {
+    data: entitiesRes,
+    isLoading: isEntitiesLoading,
+    mutate: mutateEntities
+  } = useSWR<{ entities: EntitySummary[] }>('/api/ai/entities')
+
+  const specs = specsRes?.specs ?? []
+  const entities = entitiesRes?.entities ?? []
+
+  const [specQuery, setSpecQuery] = React.useState('')
+  const [specTagFilter, setSpecTagFilter] = React.useState<string[]>([])
+  const [entityQuery, setEntityQuery] = React.useState('')
+  const [entityTagFilter, setEntityTagFilter] = React.useState<string[]>([])
+
+  const specTagOptions = React.useMemo(() => {
+    const tags = new Set<string>()
+    specs.forEach(spec => {
+      spec.tags?.forEach(tag => tags.add(tag))
+    })
+    return Array.from(tags).sort().map(tag => ({ label: tag, value: tag }))
+  }, [specs])
+
+  const entityTagOptions = React.useMemo(() => {
+    const tags = new Set<string>()
+    entities.forEach(entity => {
+      entity.tags?.forEach(tag => tags.add(tag))
+    })
+    return Array.from(tags).sort().map(tag => ({ label: tag, value: tag }))
+  }, [entities])
+
+  const filteredSpecs = React.useMemo(() => {
+    const query = specQuery.trim().toLowerCase()
+    return specs.filter(spec => {
+      const tags = spec.tags ?? []
+      if (specTagFilter.length > 0 && !specTagFilter.every(tag => tags.includes(tag))) return false
+      if (query === '') return true
+      const paramsText = spec.params.map(param => `${param.name} ${param.description ?? ''}`).join(' ')
+      const tagsText = tags.join(' ')
+      const skillsText = (spec.skills ?? []).join(' ')
+      const rulesText = (spec.rules ?? []).join(' ')
+      const haystack = `${spec.name} ${spec.description} ${paramsText} ${tagsText} ${skillsText} ${rulesText}`
+        .toLowerCase()
+      return haystack.includes(query)
+    })
+  }, [specQuery, specTagFilter, specs])
+
+  const filteredEntities = React.useMemo(() => {
+    const query = entityQuery.trim().toLowerCase()
+    return entities.filter(entity => {
+      const tags = entity.tags ?? []
+      if (entityTagFilter.length > 0 && !entityTagFilter.every(tag => tags.includes(tag))) return false
+      if (query === '') return true
+      const tagsText = tags.join(' ')
+      const skillsText = (entity.skills ?? []).join(' ')
+      const rulesText = (entity.rules ?? []).join(' ')
+      const haystack = `${entity.name} ${entity.description} ${tagsText} ${skillsText} ${rulesText}`.toLowerCase()
+      return haystack.includes(query)
+    })
+  }, [entityQuery, entityTagFilter, entities])
+
+  const handleRefresh = async () => {
+    await Promise.all([mutateSpecs(), mutateEntities()])
+    void message.success(t('knowledge.actions.refreshed'))
+  }
+
+  const handleCreateSpec = () => {
+    message.info(t('knowledge.flows.createHint'))
+  }
+
+  const handleImportSpec = () => {
+    message.info(t('knowledge.flows.importHint'))
+  }
+
+  const handleCreateEntity = () => {
+    message.info(t('knowledge.entities.createHint'))
+  }
+
+  const handleImportEntity = () => {
+    message.info(t('knowledge.entities.importHint'))
+  }
+
+  const handleCreateSkill = () => {
+    message.info(t('knowledge.skills.createHint'))
+  }
+
+  const handleImportSkill = () => {
+    message.info(t('knowledge.skills.importHint'))
+  }
+
+  const handleCreateRule = () => {
+    message.info(t('knowledge.rules.createHint'))
+  }
+
+  const handleImportRule = () => {
+    message.info(t('knowledge.rules.importHint'))
+  }
+
+  const tabs = [
+    {
+      key: 'skills',
+      label: <TabLabel icon='psychology' label={t('knowledge.tabs.skills')} />,
+      children: (
+        <SkillsTab
+          onCreate={handleCreateSkill}
+          onImport={handleImportSkill}
+        />
+      )
+    },
+    {
+      key: 'entities',
+      label: <TabLabel icon='group_work' label={t('knowledge.tabs.entities')} />,
+      children: (
+        <EntitiesTab
+          entities={entities}
+          filteredEntities={filteredEntities}
+          isLoading={isEntitiesLoading}
+          query={entityQuery}
+          tagOptions={entityTagOptions}
+          tagFilter={entityTagFilter}
+          onQueryChange={setEntityQuery}
+          onTagFilterChange={setEntityTagFilter}
+          onCreate={handleCreateEntity}
+          onImport={handleImportEntity}
+        />
+      )
+    },
+    {
+      key: 'flows',
+      label: <TabLabel icon='account_tree' label={t('knowledge.tabs.flows')} />,
+      children: (
+        <FlowsTab
+          specs={specs}
+          filteredSpecs={filteredSpecs}
+          isLoading={isSpecsLoading}
+          query={specQuery}
+          tagOptions={specTagOptions}
+          tagFilter={specTagFilter}
+          onQueryChange={setSpecQuery}
+          onTagFilterChange={setSpecTagFilter}
+          onCreate={handleCreateSpec}
+          onImport={handleImportSpec}
+        />
+      )
+    },
+    {
+      key: 'rules',
+      label: <TabLabel icon='gavel' label={t('knowledge.tabs.rules')} />,
+      children: (
+        <RulesTab
+          onCreate={handleCreateRule}
+          onImport={handleImportRule}
+        />
+      )
+    }
+  ]
+
+  return (
+    <div className='knowledge-base-view'>
+      <KnowledgeBaseHeader onRefresh={handleRefresh} />
+      <Tabs className='knowledge-base-view__tabs' items={tabs} />
+    </div>
+  )
+}

package/src/components/knowledge-base/components/ActionButton.scss

@@ -0,0 +1,5 @@
+.knowledge-base-view__action-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}

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

@@ -0,0 +1,9 @@
+import './ActionButton.scss'
+
+import { Button } from 'antd'
+import type { ButtonProps } from 'antd'
+
+export function ActionButton({ className, ...rest }: ButtonProps) {
+  const mergedClassName = ['knowledge-base-view__action-button', className].filter(Boolean).join(' ')
+  return <Button {...rest} className={mergedClassName} />
+}

package/src/components/knowledge-base/components/EmptyState.scss

@@ -0,0 +1,19 @@
+.knowledge-base-view__empty {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  border-radius: 12px;
+  border: 1px dashed var(--border-color);
+  background: var(--code-bg);
+}
+
+.knowledge-base-view__empty-simple {
+  padding: 24px;
+  display: grid;
+  place-items: center;
+  border-radius: 12px;
+  border: 1px dashed var(--border-color);
+  background: var(--code-bg);
+}

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

@@ -0,0 +1,42 @@
+import './EmptyState.scss'
+
+import { Empty } from 'antd'
+
+import { ActionButton } from './ActionButton'
+
+type EmptyStateProps = {
+  description: string
+  actionLabel?: string
+  onAction?: () => void
+  variant?: 'default' | 'simple'
+}
+
+export function EmptyState({
+  description,
+  actionLabel,
+  onAction,
+  variant = 'default'
+}: EmptyStateProps) {
+  if (variant === 'simple') {
+    return (
+      <div className='knowledge-base-view__empty-simple'>
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={description} />
+      </div>
+    )
+  }
+
+  return (
+    <div className='knowledge-base-view__empty'>
+      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={description} />
+      {actionLabel && onAction && (
+        <ActionButton
+          type='primary'
+          icon={<span className='material-symbols-rounded'>add_circle</span>}
+          onClick={onAction}
+        >
+          {actionLabel}
+        </ActionButton>
+      )}
+    </div>
+  )
+}

package/src/components/knowledge-base/components/EntitiesTab.scss

@@ -0,0 +1,5 @@
+.knowledge-base-view__entities-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}

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

@@ -0,0 +1,80 @@
+import './EntitiesTab.scss'
+
+import { Space } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import type { EntitySummary } from '#~/api.js'
+import { ActionButton } from './ActionButton'
+import { EntityList } from './EntityList'
+import { FilterBar } from './FilterBar'
+import { SectionHeader } from './SectionHeader'
+import { TabContent } from './TabContent'
+
+interface EntitiesTabProps {
+  entities: EntitySummary[]
+  filteredEntities: EntitySummary[]
+  isLoading: boolean
+  query: string
+  tagOptions: Array<{ label: string; value: string }>
+  tagFilter: string[]
+  onQueryChange: (value: string) => void
+  onTagFilterChange: (value: string[]) => void
+  onCreate: () => void
+  onImport: () => void
+}
+
+export function EntitiesTab({
+  entities,
+  filteredEntities,
+  isLoading,
+  query,
+  tagOptions,
+  tagFilter,
+  onQueryChange,
+  onTagFilterChange,
+  onCreate,
+  onImport
+}: EntitiesTabProps) {
+  const { t } = useTranslation()
+
+  return (
+    <TabContent className='knowledge-base-view__entities-tab'>
+      <SectionHeader
+        title={t('knowledge.entities.title')}
+        description={t('knowledge.entities.desc')}
+        actions={(
+          <Space>
+            <ActionButton
+              icon={<span className='material-symbols-rounded'>download</span>}
+              onClick={onImport}
+            >
+              {t('knowledge.actions.import')}
+            </ActionButton>
+            <ActionButton
+              type='primary'
+              icon={<span className='material-symbols-rounded'>add_circle</span>}
+              onClick={onCreate}
+            >
+              {t('knowledge.entities.create')}
+            </ActionButton>
+          </Space>
+        )}
+      />
+      <FilterBar
+        query={query}
+        tagOptions={tagOptions}
+        tagFilter={tagFilter}
+        searchPlaceholder={t('knowledge.filters.search')}
+        tagsPlaceholder={t('knowledge.filters.tags')}
+        onQueryChange={onQueryChange}
+        onTagFilterChange={onTagFilterChange}
+      />
+      <EntityList
+        isLoading={isLoading}
+        entities={entities}
+        filteredEntities={filteredEntities}
+        onCreate={onCreate}
+      />
+    </TabContent>
+  )
+}

package/src/components/knowledge-base/components/EntityItem.scss

@@ -0,0 +1,82 @@
+.knowledge-base-view__item {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px 16px;
+}
+
+.knowledge-base-view__item-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.knowledge-base-view__item-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.knowledge-base-view__item-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+}
+
+.knowledge-base-view__item-icon {
+  font-size: 18px;
+  color: var(--sub-text-color);
+}
+
+.knowledge-base-view__item-desc {
+  font-size: 12px;
+  color: var(--sub-text-color);
+}
+
+.knowledge-base-view__item-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.knowledge-base-view__meta-pills {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.knowledge-base-view__meta-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 8px;
+  height: 28px;
+}
+
+.knowledge-base-view__meta-pill-icon {
+  font-size: 14px;
+  color: var(--sub-text-color);
+}
+
+.knowledge-base-view__tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.knowledge-base-view__tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.knowledge-base-view__tag-icon {
+  font-size: 12px;
+  color: var(--sub-text-color);
+}

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

@@ -0,0 +1,79 @@
+import './EntityItem.scss'
+
+import { Button, Popover, Tag } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import type { EntitySummary } from '#~/api.js'
+import { MetaList } from './MetaList'
+
+type EntityItemProps = {
+  entity: EntitySummary
+}
+
+export function EntityItem({ entity }: EntityItemProps) {
+  const { t } = useTranslation()
+  const tags = entity.tags ?? []
+  const skills = entity.skills ?? []
+  const rules = entity.rules ?? []
+
+  return (
+    <div className='knowledge-base-view__item'>
+      <div className='knowledge-base-view__item-row'>
+        <div className='knowledge-base-view__item-main'>
+          <div className='knowledge-base-view__item-title'>
+            <span className='material-symbols-rounded knowledge-base-view__item-icon'>group_work</span>
+            <span>{entity.name}</span>
+          </div>
+          <div className='knowledge-base-view__item-desc'>{entity.description}</div>
+          {tags.length > 0 && (
+            <div className='knowledge-base-view__tag-list'>
+              {tags.map(tag => (
+                <Tag key={tag} className='knowledge-base-view__tag'>
+                  <span className='material-symbols-rounded knowledge-base-view__tag-icon'>sell</span>
+                  <span>{tag}</span>
+                </Tag>
+              ))}
+            </div>
+          )}
+        </div>
+        <div className='knowledge-base-view__item-meta'>
+          {entity.always && (
+            <Tag color='blue'>{t('knowledge.meta.always')}</Tag>
+          )}
+          <div className='knowledge-base-view__meta-pills'>
+            <Popover
+              content={<MetaList items={skills} />}
+              title={t('knowledge.meta.skills')}
+              trigger='click'
+              placement='bottomRight'
+            >
+              <Button
+                type='text'
+                className='knowledge-base-view__meta-pill'
+                disabled={skills.length === 0}
+              >
+                <span className='material-symbols-rounded knowledge-base-view__meta-pill-icon'>psychology</span>
+                <span>{t('knowledge.meta.skillsCount', { count: skills.length })}</span>
+              </Button>
+            </Popover>
+            <Popover
+              content={<MetaList items={rules} />}
+              title={t('knowledge.meta.rules')}
+              trigger='click'
+              placement='bottomRight'
+            >
+              <Button
+                type='text'
+                className='knowledge-base-view__meta-pill'
+                disabled={rules.length === 0}
+              >
+                <span className='material-symbols-rounded knowledge-base-view__meta-pill-icon'>gavel</span>
+                <span>{t('knowledge.meta.rulesCount', { count: rules.length })}</span>
+              </Button>
+            </Popover>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/knowledge-base/components/EntityList.scss

@@ -0,0 +1,5 @@
+.knowledge-base-view__entity-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}