@vibe-forge/client 3.0.0-alpha.6 → 3.0.0-alpha.7

package/src/components/knowledge-base/components/@hooks/use-skills-tab-actions.ts

@@ -1,63 +0,0 @@
-import React from 'react'
-
-import type { MessageInstance } from 'antd/es/message/interface'
-import type { TFunction } from 'i18next'
-
-import type { SkillHubItem } from '#~/api.js'
-import { getApiErrorMessage, importSkillArchive, installSkillHubItem } from '#~/api.js'
-
-export const useSkillsTabActions = (params: {
-  marketMutate: () => Promise<unknown>
-  message: MessageInstance
-  mutateConfig: () => Promise<unknown>
-  mutateSkills: () => Promise<unknown>
-  onRefresh: () => void | Promise<void>
-  t: TFunction
-}) => {
-  const importInputRef = React.useRef<HTMLInputElement | null>(null)
-  const [installingId, setInstallingId] = React.useState<string | null>(null)
-  const [importing, setImporting] = React.useState(false)
-
-  const handleRefresh = React.useCallback(async () => {
-    await Promise.all([params.mutateSkills(), params.marketMutate(), params.mutateConfig(), params.onRefresh()])
-  }, [params])
-
-  const handleInstall = React.useCallback(async (item: SkillHubItem) => {
-    setInstallingId(item.id)
-    try {
-      await installSkillHubItem({
-        registry: item.registry,
-        plugin: item.installRef ?? item.name,
-        force: item.installed
-      })
-      await Promise.all([params.marketMutate(), params.mutateSkills()])
-      void params.message.success(params.t('knowledge.skills.installSuccess'))
-    } catch (error) {
-      void params.message.error(getApiErrorMessage(error, params.t('knowledge.skills.installFailed')))
-    } finally {
-      setInstallingId(null)
-    }
-  }, [params])
-
-  const handleImportArchive = React.useCallback(async (file: File) => {
-    setImporting(true)
-    try {
-      const result = await importSkillArchive(file)
-      await Promise.all([params.mutateSkills(), params.onRefresh()])
-      void params.message.success(params.t('knowledge.skills.importSuccess', { count: result.fileCount }))
-    } catch (error) {
-      void params.message.error(getApiErrorMessage(error, params.t('knowledge.skills.importFailed')))
-    } finally {
-      setImporting(false)
-    }
-  }, [params])
-
-  return {
-    importInputRef,
-    importing,
-    installingId,
-    handleImportArchive,
-    handleInstall,
-    handleRefresh
-  }
-}

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

@@ -1,35 +0,0 @@
-.ant-btn.knowledge-base-view__action-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 28px !important;
-  min-height: 28px !important;
-  padding: 0 10px !important;
-  border-radius: 6px !important;
-  font-size: 12px;
-  line-height: 1;
-}
-
-.ant-btn.knowledge-base-view__action-button--icon-only {
-  width: 28px !important;
-  min-width: 28px !important;
-  max-width: 28px !important;
-  aspect-ratio: 1 / 1;
-  padding: 0 !important;
-}
-
-.knowledge-base-view__action-button--icon-only .ant-btn-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-}
-
-.knowledge-base-view__action-button--icon-only .material-symbols-rounded {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  line-height: 1;
-}

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

@@ -1,19 +0,0 @@
-import './ActionButton.scss'
-
-import { Button } from 'antd'
-import type { ButtonProps } from 'antd'
-
-export function ActionButton({ className, children, icon, ...rest }: ButtonProps) {
-  const iconOnly = icon != null && (children == null || children === false)
-  const mergedClassName = [
-    'knowledge-base-view__action-button',
-    iconOnly ? 'knowledge-base-view__action-button--icon-only' : '',
-    className
-  ].filter(Boolean).join(' ')
-
-  return (
-    <Button {...rest} icon={icon} className={mergedClassName}>
-      {children}
-    </Button>
-  )
-}

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

@@ -1,59 +0,0 @@
-import { Form, Input, Modal } from 'antd'
-import type { FormInstance } from 'antd'
-import { useTranslation } from 'react-i18next'
-
-export interface CreateSkillFormValues {
-  name: string
-  description?: string
-  body?: string
-}
-
-interface CreateSkillModalProps {
-  open: boolean
-  saving: boolean
-  form: FormInstance<CreateSkillFormValues>
-  onSave: () => void
-  onClose: () => void
-}
-
-export function CreateSkillModal({
-  open,
-  saving,
-  form,
-  onSave,
-  onClose
-}: CreateSkillModalProps) {
-  const { t } = useTranslation()
-
-  return (
-    <Modal
-      title={t('knowledge.skills.create')}
-      open={open}
-      confirmLoading={saving}
-      okText={t('config.actions.save')}
-      cancelText={t('config.actions.cancel')}
-      onOk={onSave}
-      onCancel={onClose}
-      destroyOnClose
-    >
-      <Form form={form} layout='vertical' className='knowledge-base-view__create-skill-form'>
-        <Form.Item
-          name='name'
-          label={t('knowledge.skills.skillName')}
-          rules={[{ required: true, message: t('knowledge.skills.skillNameRequired') }]}
-        >
-          <Input placeholder={t('knowledge.skills.skillNamePlaceholder')} />
-        </Form.Item>
-        <Form.Item name='description' label={t('knowledge.skills.skillDescription')}>
-          <Input placeholder={t('knowledge.skills.skillDescriptionPlaceholder')} />
-        </Form.Item>
-        <Form.Item name='body' label={t('knowledge.skills.skillBody')}>
-          <Input.TextArea
-            autoSize={{ minRows: 5, maxRows: 10 }}
-            placeholder={t('knowledge.skills.skillBodyPlaceholder')}
-          />
-        </Form.Item>
-      </Form>
-    </Modal>
-  )
-}

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

@@ -1,18 +0,0 @@
-.knowledge-base-view__empty {
-  flex: 1;
-  min-height: 0;
-  padding: 32px 24px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-}
-
-.knowledge-base-view__empty-simple {
-  flex: 1;
-  min-height: 0;
-  padding: 32px 24px;
-  display: grid;
-  place-items: center;
-}

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

@@ -1,42 +0,0 @@
-import './EmptyState.scss'
-
-import { Empty } from 'antd'
-
-import { ActionButton } from './ActionButton'
-
-interface 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

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

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

@@ -1,86 +0,0 @@
-import './EntitiesTab.scss'
-
-import { Space, Tooltip } from 'antd'
-import type { ReactNode } from 'react'
-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[]
-  hideContentSearch?: boolean
-  isLoading: boolean
-  leading?: ReactNode
-  query: string
-  tagOptions: Array<{ label: string; value: string }>
-  tagFilter: string[]
-  onRefresh: () => void
-  onQueryChange: (value: string) => void
-  onTagFilterChange: (value: string[]) => void
-  onCreate: () => void
-  onImport: () => void
-}
-
-export function EntitiesTab({
-  entities,
-  filteredEntities,
-  hideContentSearch = false,
-  isLoading,
-  leading,
-  query,
-  tagOptions,
-  tagFilter,
-  onRefresh,
-  onQueryChange,
-  onTagFilterChange,
-  onCreate,
-  onImport
-}: EntitiesTabProps) {
-  const { t } = useTranslation()
-
-  return (
-    <TabContent className='knowledge-base-view__entities-tab'>
-      <SectionHeader
-        actions={
-          <Space>
-            <Tooltip title={t('knowledge.actions.refresh')}>
-              <ActionButton
-                icon={<span className='material-symbols-rounded'>refresh</span>}
-                onClick={onRefresh}
-              />
-            </Tooltip>
-            <Tooltip title={t('knowledge.actions.import')}>
-              <ActionButton
-                icon={<span className='material-symbols-rounded'>download</span>}
-                onClick={onImport}
-              />
-            </Tooltip>
-          </Space>
-        }
-        leading={leading}
-      />
-      <FilterBar
-        hideSearch={hideContentSearch}
-        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

@@ -1,89 +0,0 @@
-.knowledge-base-view__item {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: var(--subpage-tertiary-padding);
-}
-
-.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-size: 12px;
-  line-height: 1.35;
-  font-weight: 500;
-}
-
-.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;
-  border-radius: 6px;
-  border: 1px solid var(--border-color);
-  background: var(--bg-color);
-}
-
-.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;
-  margin: 0;
-  border-radius: 4px;
-}
-
-.knowledge-base-view__tag-icon {
-  font-size: 12px;
-  color: var(--sub-text-color);
-}

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

@@ -1,79 +0,0 @@
-import './EntityItem.scss'
-
-import { Button, Popover, Tag } from 'antd'
-import { useTranslation } from 'react-i18next'
-
-import type { EntitySummary } from '#~/api.js'
-import { MetaList } from './MetaList'
-
-interface 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

@@ -1,8 +0,0 @@
-.knowledge-base-view__entity-list {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  gap: 12px;
-  min-height: 0;
-  overflow: hidden;
-}

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

@@ -1,70 +0,0 @@
-import './EntityList.scss'
-
-import { List } from 'antd'
-import { useTranslation } from 'react-i18next'
-
-import type { EntitySummary } from '#~/api.js'
-import { EmptyState } from './EmptyState'
-import { EntityItem } from './EntityItem'
-import { KnowledgeList } from './KnowledgeList'
-import { LoadingState } from './LoadingState'
-
-interface EntityListProps {
-  isLoading: boolean
-  entities: EntitySummary[]
-  filteredEntities: EntitySummary[]
-  onCreate: () => void
-}
-
-export function EntityList({
-  isLoading,
-  entities,
-  filteredEntities,
-  onCreate
-}: EntityListProps) {
-  const { t } = useTranslation()
-
-  if (isLoading) {
-    return (
-      <div className='knowledge-base-view__entity-list'>
-        <LoadingState />
-      </div>
-    )
-  }
-
-  if (entities.length === 0) {
-    return (
-      <div className='knowledge-base-view__entity-list'>
-        <EmptyState
-          description={t('knowledge.entities.empty')}
-          actionLabel={t('knowledge.entities.create')}
-          onAction={onCreate}
-        />
-      </div>
-    )
-  }
-
-  if (filteredEntities.length === 0) {
-    return (
-      <div className='knowledge-base-view__entity-list'>
-        <EmptyState
-          description={t('knowledge.filters.noResults')}
-          variant='simple'
-        />
-      </div>
-    )
-  }
-
-  return (
-    <div className='knowledge-base-view__entity-list'>
-      <KnowledgeList
-        data={filteredEntities}
-        renderItem={(entity) => (
-          <List.Item className='knowledge-base-view__list-item'>
-            <EntityItem entity={entity} />
-          </List.Item>
-        )}
-      />
-    </div>
-  )
-}

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

@@ -1,33 +0,0 @@
-.knowledge-base-view__filters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.knowledge-base-view__filter-input {
-  flex: 1;
-  min-width: 220px;
-}
-
-.knowledge-base-view__filter-select {
-  min-width: 220px;
-  flex: 0 1 280px;
-}
-
-.knowledge-base-view__filter-icon {
-  font-size: 14px;
-  color: var(--sub-text-color);
-}
-
-.knowledge-base-view__filter-input .ant-input-affix-wrapper,
-.knowledge-base-view__filter-select .ant-select-selector {
-  height: 30px !important;
-  border-radius: 6px !important;
-  background: var(--bg-color);
-}
-
-.knowledge-base-view__filter-select .ant-select-selector {
-  align-items: center !important;
-}

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

@@ -1,55 +0,0 @@
-import './FilterBar.scss'
-
-import { Input, Select } from 'antd'
-
-interface FilterOption {
-  label: string
-  value: string
-}
-
-interface FilterBarProps {
-  hideSearch?: boolean
-  query: string
-  tagOptions: FilterOption[]
-  tagFilter: string[]
-  searchPlaceholder: string
-  tagsPlaceholder: string
-  onQueryChange: (value: string) => void
-  onTagFilterChange: (value: string[]) => void
-}
-
-export function FilterBar({
-  hideSearch = false,
-  query,
-  tagOptions,
-  tagFilter,
-  searchPlaceholder,
-  tagsPlaceholder,
-  onQueryChange,
-  onTagFilterChange
-}: FilterBarProps) {
-  return (
-    <div className='knowledge-base-view__filters'>
-      {!hideSearch && (
-        <Input
-          className='knowledge-base-view__filter-input'
-          prefix={<span className='material-symbols-rounded knowledge-base-view__filter-icon'>search</span>}
-          placeholder={searchPlaceholder}
-          allowClear
-          value={query}
-          onChange={(e) => onQueryChange(e.target.value)}
-        />
-      )}
-      <Select
-        className='knowledge-base-view__filter-select'
-        mode='multiple'
-        placeholder={tagsPlaceholder}
-        options={tagOptions}
-        value={tagFilter}
-        onChange={onTagFilterChange}
-        maxTagCount='responsive'
-        disabled={tagOptions.length === 0}
-      />
-    </div>
-  )
-}

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

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