@vibe-forge/client 0.2.0-alpha.0

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

@@ -0,0 +1,70 @@
+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'
+
+type 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

@@ -0,0 +1,21 @@
+.knowledge-base-view__filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+}
+
+.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: 16px;
+  color: var(--sub-text-color);
+}

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

@@ -0,0 +1,51 @@
+import './FilterBar.scss'
+
+import { Input, Select } from 'antd'
+
+type FilterOption = {
+  label: string
+  value: string
+}
+
+type FilterBarProps = {
+  query: string
+  tagOptions: FilterOption[]
+  tagFilter: string[]
+  searchPlaceholder: string
+  tagsPlaceholder: string
+  onQueryChange: (value: string) => void
+  onTagFilterChange: (value: string[]) => void
+}
+
+export function FilterBar({
+  query,
+  tagOptions,
+  tagFilter,
+  searchPlaceholder,
+  tagsPlaceholder,
+  onQueryChange,
+  onTagFilterChange
+}: FilterBarProps) {
+  return (
+    <div className='knowledge-base-view__filters'>
+      <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

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

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

@@ -0,0 +1,80 @@
+import './FlowsTab.scss'
+
+import { Space } from 'antd'
+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'
+
+type FlowsTabProps = {
+  specs: SpecSummary[]
+  filteredSpecs: SpecSummary[]
+  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 FlowsTab({
+  specs,
+  filteredSpecs,
+  isLoading,
+  query,
+  tagOptions,
+  tagFilter,
+  onQueryChange,
+  onTagFilterChange,
+  onCreate,
+  onImport
+}: FlowsTabProps) {
+  const { t } = useTranslation()
+
+  return (
+    <TabContent className='knowledge-base-view__flows-tab'>
+      <SectionHeader
+        title={t('knowledge.flows.title')}
+        description={t('knowledge.flows.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.flows.create')}
+            </ActionButton>
+          </Space>
+        }
+      />
+      <FilterBar
+        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

@@ -0,0 +1,27 @@
+.knowledge-base-view__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.knowledge-base-view__title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.knowledge-base-view__title-icon {
+  font-size: 24px;
+  &.material-symbols-rounded {
+    font-variation-settings: 'FILL' 1;
+  }
+}
+
+.knowledge-base-view__title-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 18px;
+  font-weight: 600;
+}

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

@@ -0,0 +1,29 @@
+import './KnowledgeBaseHeader.scss'
+
+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'>
+      <div className='knowledge-base-view__title'>
+        <div className='knowledge-base-view__title-text'>
+          {t('knowledge.title')}
+        </div>
+      </div>
+      <ActionButton
+        icon={<span className='material-symbols-rounded'>refresh</span>}
+        onClick={onRefresh}
+      >
+        {t('knowledge.actions.refresh')}
+      </ActionButton>
+    </div>
+  )
+}

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

@@ -0,0 +1,19 @@
+.knowledge-base-view__list {
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--bg-color);
+}
+
+.knowledge-base-view__list .ant-list-item {
+  padding: 0;
+  align-items: stretch;
+}
+
+.knowledge-base-view__list .ant-list-item + .ant-list-item {
+  border-top: 1px solid var(--border-color);
+}
+
+.knowledge-base-view__list-item {
+  padding: 0;
+}

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

@@ -0,0 +1,19 @@
+import './KnowledgeList.scss'
+
+import { List } from 'antd'
+import type { ReactNode } from 'react'
+
+type 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/LoadingState.scss

@@ -0,0 +1,5 @@
+.knowledge-base-view__loading {
+  padding: 24px;
+  display: grid;
+  place-items: center;
+}

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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,19 @@
+.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

@@ -0,0 +1,18 @@
+import './MetaList.scss'
+
+type 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/RulesTab.scss

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

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

@@ -0,0 +1,49 @@
+import './RulesTab.scss'
+
+import { Space } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import { ActionButton } from './ActionButton'
+import { EmptyState } from './EmptyState'
+import { SectionHeader } from './SectionHeader'
+import { TabContent } from './TabContent'
+
+type RulesTabProps = {
+  onCreate: () => void
+  onImport: () => void
+}
+
+export function RulesTab({ onCreate, onImport }: RulesTabProps) {
+  const { t } = useTranslation()
+
+  return (
+    <TabContent className='knowledge-base-view__rules-tab'>
+      <SectionHeader
+        title={t('knowledge.rules.title')}
+        description={t('knowledge.rules.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.rules.create')}
+            </ActionButton>
+          </Space>
+        )}
+      />
+      <EmptyState
+        description={t('knowledge.rules.empty')}
+        actionLabel={t('knowledge.rules.create')}
+        onAction={onCreate}
+      />
+    </TabContent>
+  )
+}

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

@@ -0,0 +1,22 @@
+.knowledge-base-view__section-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.knowledge-base-view__section-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.knowledge-base-view__section-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.knowledge-base-view__section-desc {
+  font-size: 12px;
+  color: var(--sub-text-color);
+}

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

@@ -0,0 +1,21 @@
+import './SectionHeader.scss'
+
+import type { ReactNode } from 'react'
+
+type SectionHeaderProps = {
+  title: string
+  description: string
+  actions?: ReactNode
+}
+
+export function SectionHeader({ title, description, actions }: SectionHeaderProps) {
+  return (
+    <div className='knowledge-base-view__section-header'>
+      <div className='knowledge-base-view__section-info'>
+        <div className='knowledge-base-view__section-title'>{title}</div>
+        <div className='knowledge-base-view__section-desc'>{description}</div>
+      </div>
+      {actions}
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,49 @@
+import './SkillsTab.scss'
+
+import { Space } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import { ActionButton } from './ActionButton'
+import { EmptyState } from './EmptyState'
+import { SectionHeader } from './SectionHeader'
+import { TabContent } from './TabContent'
+
+type SkillsTabProps = {
+  onCreate: () => void
+  onImport: () => void
+}
+
+export function SkillsTab({ onCreate, onImport }: SkillsTabProps) {
+  const { t } = useTranslation()
+
+  return (
+    <TabContent className='knowledge-base-view__skills-tab'>
+      <SectionHeader
+        title={t('knowledge.skills.title')}
+        description={t('knowledge.skills.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.skills.create')}
+            </ActionButton>
+          </Space>
+        )}
+      />
+      <EmptyState
+        description={t('knowledge.skills.empty')}
+        actionLabel={t('knowledge.skills.create')}
+        onAction={onCreate}
+      />
+    </TabContent>
+  )
+}

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

@@ -0,0 +1,138 @@
+.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__params {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 6px;
+}
+
+.knowledge-base-view__param {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border-radius: 8px;
+  background: var(--tag-bg);
+  border: 1px solid var(--border-color);
+}
+
+.knowledge-base-view__param-icon {
+  font-size: 14px;
+  color: var(--sub-text-color);
+}
+
+.knowledge-base-view__param-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.knowledge-base-view__param-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.knowledge-base-view__param-desc {
+  font-size: 11px;
+  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);
+}
+
+.knowledge-base-view__detail {
+  border-radius: 10px;
+  border: 1px solid var(--border-color);
+  background: var(--code-bg);
+  padding: 12px;
+}
+
+.knowledge-base-view__markdown {
+  font-size: 12px;
+}
+
+.knowledge-base-view__icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}