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

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

@@ -1,86 +0,0 @@
-import './FlowsTab.scss'
-
-import { Space, Tooltip } from 'antd'
-import type { ReactNode } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import type { SpecSummary } from '#~/api.js'
-import { ActionButton } from './ActionButton'
-import { FilterBar } from './FilterBar'
-import { SectionHeader } from './SectionHeader'
-import { SpecList } from './SpecList'
-import { TabContent } from './TabContent'
-
-interface FlowsTabProps {
-  specs: SpecSummary[]
-  filteredSpecs: SpecSummary[]
-  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 FlowsTab({
-  specs,
-  filteredSpecs,
-  hideContentSearch = false,
-  isLoading,
-  leading,
-  query,
-  tagOptions,
-  tagFilter,
-  onRefresh,
-  onQueryChange,
-  onTagFilterChange,
-  onCreate,
-  onImport
-}: FlowsTabProps) {
-  const { t } = useTranslation()
-
-  return (
-    <TabContent className='knowledge-base-view__flows-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}
-      />
-      <SpecList
-        isLoading={isLoading}
-        specs={specs}
-        filteredSpecs={filteredSpecs}
-        onCreate={onCreate}
-      />
-    </TabContent>
-  )
-}

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

@@ -1,6 +0,0 @@
-.knowledge-base-view__header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 12px;
-}

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

@@ -1,25 +0,0 @@
-import './KnowledgeBaseHeader.scss'
-
-import { Tooltip } from 'antd'
-import { useTranslation } from 'react-i18next'
-
-import { ActionButton } from './ActionButton'
-
-interface KnowledgeBaseHeaderProps {
-  onRefresh: () => void
-}
-
-export function KnowledgeBaseHeader({ onRefresh }: KnowledgeBaseHeaderProps) {
-  const { t } = useTranslation()
-
-  return (
-    <div className='knowledge-base-view__header'>
-      <Tooltip title={t('knowledge.actions.refresh')}>
-        <ActionButton
-          icon={<span className='material-symbols-rounded'>refresh</span>}
-          onClick={onRefresh}
-        />
-      </Tooltip>
-    </div>
-  )
-}

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

@@ -1,35 +0,0 @@
-import { Button, Tooltip } from 'antd'
-import { useTranslation } from 'react-i18next'
-
-interface KnowledgeContentControlsProps {
-  onCreate: () => void
-  onExpandSidebar: () => void
-}
-
-export function KnowledgeContentControls({
-  onCreate,
-  onExpandSidebar
-}: KnowledgeContentControlsProps) {
-  const { t } = useTranslation()
-
-  return (
-    <div className='knowledge-base-view__content-controls'>
-      <Tooltip title={t('knowledge.actions.new')}>
-        <Button
-          className='knowledge-base-view__icon-button'
-          type='primary'
-          onClick={onCreate}
-          icon={<span className='material-symbols-rounded'>add_circle</span>}
-        />
-      </Tooltip>
-      <Tooltip title={t('common.expand')}>
-        <Button
-          className='knowledge-base-view__icon-button'
-          type='text'
-          onClick={onExpandSidebar}
-          icon={<span className='material-symbols-rounded'>dock_to_right</span>}
-        />
-      </Tooltip>
-    </div>
-  )
-}

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

@@ -1,39 +0,0 @@
-.knowledge-base-view__list {
-  background: transparent;
-  width: 100%;
-  min-width: 0;
-  min-height: 0;
-  flex: 1;
-  overflow: auto;
-  padding-bottom: 1px;
-  overscroll-behavior: contain;
-}
-
-.knowledge-base-view__list .ant-list-items {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  width: 100%;
-  min-width: 0;
-}
-
-.knowledge-base-view__list .ant-list-item {
-  width: 100%;
-  padding: 0;
-  align-items: stretch;
-  border: 1px solid var(--border-color) !important;
-  border-radius: 8px;
-  background: var(--bg-color);
-  overflow: hidden;
-  box-sizing: border-box;
-  transition: border-color .2s ease, background-color .2s ease;
-}
-
-.knowledge-base-view__list .ant-list-item:hover {
-  border-color: var(--sub-border-color) !important;
-  background: var(--tag-hover-bg);
-}
-
-.knowledge-base-view__list-item {
-  padding: 0;
-}

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

@@ -1,19 +0,0 @@
-import './KnowledgeList.scss'
-
-import { List } from 'antd'
-import type { ReactNode } from 'react'
-
-interface KnowledgeListProps<T> {
-  data: T[]
-  renderItem: (item: T) => ReactNode
-}
-
-export function KnowledgeList<T>({ data, renderItem }: KnowledgeListProps<T>) {
-  return (
-    <List
-      className='knowledge-base-view__list'
-      dataSource={data}
-      renderItem={(item) => renderItem(item)}
-    />
-  )
-}

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

@@ -1,122 +0,0 @@
-import { Button, Input, Tooltip } from 'antd'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import type { KnowledgeSectionNavItem } from './KnowledgeSidebar'
-
-interface KnowledgeMobilePanelProps {
-  activeKey: string
-  open: boolean
-  searchPlaceholder: string
-  searchValue: string
-  sections: KnowledgeSectionNavItem[]
-  showSearch: boolean
-  onClose: () => void
-  onCreate: () => void
-  onSearchChange: (value: string) => void
-  onSelect: (key: string) => void
-}
-
-export function KnowledgeMobilePanel({
-  activeKey,
-  open,
-  searchPlaceholder,
-  searchValue,
-  sections,
-  showSearch,
-  onClose,
-  onCreate,
-  onSearchChange,
-  onSelect
-}: KnowledgeMobilePanelProps) {
-  const { t } = useTranslation()
-
-  React.useEffect(() => {
-    if (!open) return undefined
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose()
-      }
-    }
-
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [onClose, open])
-
-  return (
-    <>
-      <button
-        type='button'
-        className={`knowledge-base-view__mobile-sidebar-backdrop ${open ? 'is-open' : ''}`}
-        aria-label={t('common.close')}
-        aria-hidden={!open}
-        tabIndex={-1}
-        onClick={onClose}
-      />
-      <div
-        className={`knowledge-base-view__mobile-sidebar-sheet ${open ? 'is-open' : ''}`}
-        role='dialog'
-        aria-modal={open ? 'true' : undefined}
-        aria-label={t('knowledge.title')}
-        aria-hidden={!open}
-        tabIndex={-1}
-      >
-        <div className='knowledge-base-view__mobile-sidebar'>
-          <div className='knowledge-base-view__sidebar-top'>
-            <Button
-              className='knowledge-base-view__new-button'
-              type='primary'
-              block
-              onClick={onCreate}
-            >
-              <span className='knowledge-base-view__new-button-content'>
-                <span className='material-symbols-rounded'>add_circle</span>
-                <span>{t('knowledge.actions.new')}</span>
-              </span>
-            </Button>
-            <Tooltip title={t('common.close')}>
-              <Button
-                className='knowledge-base-view__sidebar-control'
-                type='text'
-                aria-label={t('common.close')}
-                onClick={onClose}
-              >
-                <span className='material-symbols-rounded'>close</span>
-              </Button>
-            </Tooltip>
-          </div>
-          {showSearch && (
-            <Input
-              className='knowledge-base-view__sidebar-search'
-              prefix={<span className='material-symbols-rounded knowledge-base-view__filter-icon'>search</span>}
-              placeholder={searchPlaceholder}
-              allowClear
-              value={searchValue}
-              onChange={(event) => onSearchChange(event.target.value)}
-            />
-          )}
-          <div className='knowledge-base-view__nav-list'>
-            {sections.map((section) => (
-              <button
-                key={section.key}
-                type='button'
-                className={`knowledge-base-view__nav-item ${section.key === activeKey ? 'is-active' : ''}`}
-                onClick={() => onSelect(section.key)}
-              >
-                <span className='material-symbols-rounded knowledge-base-view__nav-icon'>{section.icon}</span>
-                <span className='knowledge-base-view__nav-main'>
-                  <span className='knowledge-base-view__nav-row'>
-                    <span className='knowledge-base-view__nav-label'>{section.label}</span>
-                    <span className='knowledge-base-view__nav-count'>{section.count}</span>
-                  </span>
-                  <span className='knowledge-base-view__nav-desc'>{section.description}</span>
-                </span>
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}

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

@@ -1,97 +0,0 @@
-import { Button, Input, Tooltip } from 'antd'
-import { useTranslation } from 'react-i18next'
-
-export interface KnowledgeSectionNavItem {
-  count: number
-  description: string
-  icon: string
-  key: string
-  label: string
-}
-
-interface KnowledgeSidebarProps {
-  activeKey: string
-  collapsed: boolean
-  isCompact: boolean
-  searchPlaceholder: string
-  searchValue: string
-  sections: KnowledgeSectionNavItem[]
-  onCreate: () => void
-  onSearchChange: (value: string) => void
-  onSelect: (key: string) => void
-  onToggleCollapsed: () => void
-}
-
-export function KnowledgeSidebar({
-  activeKey,
-  collapsed,
-  isCompact,
-  searchPlaceholder,
-  searchValue,
-  sections,
-  onCreate,
-  onSearchChange,
-  onSelect,
-  onToggleCollapsed
-}: KnowledgeSidebarProps) {
-  const { t } = useTranslation()
-
-  if (isCompact) return null
-
-  return (
-    <div className={`knowledge-base-view__left ${collapsed ? 'is-collapsed' : ''}`}>
-      <div className='knowledge-base-view__sidebar'>
-        <div className='knowledge-base-view__sidebar-top'>
-          <Button
-            className='knowledge-base-view__new-button'
-            type='primary'
-            block
-            onClick={onCreate}
-          >
-            <span className='knowledge-base-view__new-button-content'>
-              <span className='material-symbols-rounded'>add_circle</span>
-              <span>{t('knowledge.actions.new')}</span>
-            </span>
-          </Button>
-          <Tooltip title={t('common.collapse')}>
-            <Button
-              className='knowledge-base-view__sidebar-control'
-              type='text'
-              aria-label={t('common.collapse')}
-              onClick={onToggleCollapsed}
-            >
-              <span className='material-symbols-rounded'>left_panel_close</span>
-            </Button>
-          </Tooltip>
-        </div>
-        <Input
-          className='knowledge-base-view__sidebar-search'
-          prefix={<span className='material-symbols-rounded knowledge-base-view__filter-icon'>search</span>}
-          placeholder={searchPlaceholder}
-          allowClear
-          value={searchValue}
-          onChange={(event) => onSearchChange(event.target.value)}
-        />
-        <div className='knowledge-base-view__nav-list'>
-          {sections.map((section) => (
-            <button
-              key={section.key}
-              type='button'
-              className={`knowledge-base-view__nav-item ${section.key === activeKey ? 'is-active' : ''}`}
-              onClick={() => onSelect(section.key)}
-            >
-              <span className='material-symbols-rounded knowledge-base-view__nav-icon'>{section.icon}</span>
-              <span className='knowledge-base-view__nav-main'>
-                <span className='knowledge-base-view__nav-row'>
-                  <span className='knowledge-base-view__nav-label'>{section.label}</span>
-                  <span className='knowledge-base-view__nav-count'>{section.count}</span>
-                </span>
-                <span className='knowledge-base-view__nav-desc'>{section.description}</span>
-              </span>
-            </button>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}

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

@@ -1,10 +0,0 @@
-.knowledge-base-view__loading {
-  flex: 1;
-  min-height: 0;
-  padding: 24px;
-  display: grid;
-  place-items: center;
-  border-radius: 8px;
-  border: 1px dashed var(--border-color);
-  background: var(--sub-bg-color);
-}

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

@@ -1,11 +0,0 @@
-import './LoadingState.scss'
-
-import { Spin } from 'antd'
-
-export function LoadingState() {
-  return (
-    <div className='knowledge-base-view__loading'>
-      <Spin />
-    </div>
-  )
-}

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

@@ -1,19 +0,0 @@
-.knowledge-base-view__meta-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 4px 0;
-}
-
-.knowledge-base-view__meta-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  color: var(--text-color);
-}
-
-.knowledge-base-view__meta-item-icon {
-  font-size: 14px;
-  color: var(--sub-text-color);
-}

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

@@ -1,18 +0,0 @@
-import './MetaList.scss'
-
-interface MetaListProps {
-  items: string[]
-}
-
-export function MetaList({ items }: MetaListProps) {
-  return (
-    <div className='knowledge-base-view__meta-list'>
-      {items.map(item => (
-        <div key={item} className='knowledge-base-view__meta-item'>
-          <span className='material-symbols-rounded knowledge-base-view__meta-item-icon'>check_circle</span>
-          <span>{item}</span>
-        </div>
-      ))}
-    </div>
-  )
-}

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

@@ -1,79 +0,0 @@
-import { Empty, List, Spin, Tag } from 'antd'
-import { useTranslation } from 'react-i18next'
-
-import type { SkillSummary } from '#~/api.js'
-import { EmptyState } from './EmptyState'
-
-interface ProjectSkillsListProps {
-  allCount: number
-  isLoading: boolean
-  skills: SkillSummary[]
-  onCreate: () => void
-}
-
-const SKILL_SOURCE_LABEL_KEYS = {
-  project: 'knowledge.skills.sourceProject',
-  plugin: 'knowledge.skills.sourcePlugin',
-  home: 'knowledge.skills.sourceHome'
-} as const
-
-export function ProjectSkillsList({
-  allCount,
-  isLoading,
-  skills,
-  onCreate
-}: ProjectSkillsListProps) {
-  const { t } = useTranslation()
-
-  if (isLoading) {
-    return (
-      <div className='knowledge-base-view__loading'>
-        <Spin />
-      </div>
-    )
-  }
-
-  if (skills.length === 0 && allCount === 0) {
-    return (
-      <EmptyState
-        description={t('knowledge.skills.empty')}
-        actionLabel={t('knowledge.skills.create')}
-        onAction={onCreate}
-      />
-    )
-  }
-
-  if (skills.length === 0) {
-    return (
-      <div className='knowledge-base-view__empty-simple'>
-        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('knowledge.filters.noResults')} />
-      </div>
-    )
-  }
-
-  return (
-    <List
-      className='knowledge-base-view__list'
-      dataSource={skills}
-      renderItem={(skill) => (
-        <List.Item className='knowledge-base-view__list-item'>
-          <div className='knowledge-base-view__skill-result'>
-            <div className='knowledge-base-view__skill-result-main'>
-              <div className='knowledge-base-view__item-title'>
-                <span className='material-symbols-rounded knowledge-base-view__item-icon'>psychology</span>
-                <span>{skill.name}</span>
-                <Tag className='knowledge-base-view__skill-source'>
-                  {t(SKILL_SOURCE_LABEL_KEYS[skill.source])}
-                </Tag>
-              </div>
-              {skill.description.trim() !== '' && (
-                <div className='knowledge-base-view__item-desc'>{skill.description}</div>
-              )}
-              <div className='knowledge-base-view__skill-subtitle'>{skill.id}</div>
-            </div>
-          </div>
-        </List.Item>
-      )}
-    />
-  )
-}

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

@@ -1,86 +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__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);
-}
-
-.knowledge-base-view__detail {
-  padding-top: 10px;
-  border-top: 1px solid var(--border-color);
-}
-
-.knowledge-base-view__markdown {
-  font-size: 12px;
-}
-
-.knowledge-base-view__icon-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  min-width: 28px;
-  height: 28px;
-  border-radius: 6px;
-}