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

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

@@ -1,147 +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__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;
-  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;
-}

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

@@ -1,131 +0,0 @@
-import './SpecItem.scss'
-
-import { Button, Empty, Popover, Tag, Tooltip } from 'antd'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
-
-import type { SpecDetail, SpecSummary } from '#~/api.js'
-import { getSpecDetail } from '#~/api.js'
-import { MarkdownContent } from '#~/components/MarkdownContent'
-import { LoadingState } from './LoadingState'
-import { MetaList } from './MetaList'
-
-interface SpecItemProps {
-  spec: SpecSummary
-}
-
-export function SpecItem({ spec }: SpecItemProps) {
-  const { t } = useTranslation()
-  const [expanded, setExpanded] = React.useState(false)
-  const { data, isLoading } = useSWR<{ spec: SpecDetail }>(
-    expanded ? ['spec-detail', spec.id] : null,
-    () => getSpecDetail(spec.id)
-  )
-  const detail = data?.spec
-  const body = detail?.body ?? ''
-  const tags = spec.tags ?? []
-  const skills = spec.skills ?? []
-  const rules = spec.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'>account_tree</span>
-            <span>{spec.name}</span>
-          </div>
-          <div className='knowledge-base-view__item-desc'>{spec.description}</div>
-          {spec.params.length > 0 && (
-            <div className='knowledge-base-view__params'>
-              {spec.params.map(param => (
-                <div key={param.name} className='knowledge-base-view__param'>
-                  <span className='material-symbols-rounded knowledge-base-view__param-icon'>tune</span>
-                  <div className='knowledge-base-view__param-text'>
-                    <span className='knowledge-base-view__param-name'>{param.name}</span>
-                    {param.description && (
-                      <span className='knowledge-base-view__param-desc'>{param.description}</span>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </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'>
-          {spec.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>
-          <Tooltip title={expanded ? t('knowledge.actions.collapse') : t('knowledge.actions.expand')}>
-            <Button
-              type='text'
-              className='knowledge-base-view__icon-button'
-              onClick={() => setExpanded(prev => !prev)}
-              icon={
-                <span className='material-symbols-rounded'>
-                  {expanded ? 'expand_less' : 'expand_more'}
-                </span>
-              }
-            />
-          </Tooltip>
-        </div>
-      </div>
-      {expanded && (
-        <div className='knowledge-base-view__detail'>
-          {isLoading && <LoadingState />}
-          {!isLoading && body.trim() === '' && (
-            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('knowledge.flows.noContent')} />
-          )}
-          {!isLoading && body.trim() !== '' && (
-            <div className='knowledge-base-view__markdown'>
-              <MarkdownContent content={body} />
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

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

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

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

@@ -1,70 +0,0 @@
-import './SpecList.scss'
-
-import { List } from 'antd'
-import { useTranslation } from 'react-i18next'
-
-import type { SpecSummary } from '#~/api.js'
-import { EmptyState } from './EmptyState'
-import { KnowledgeList } from './KnowledgeList'
-import { LoadingState } from './LoadingState'
-import { SpecItem } from './SpecItem'
-
-interface SpecListProps {
-  isLoading: boolean
-  specs: SpecSummary[]
-  filteredSpecs: SpecSummary[]
-  onCreate: () => void
-}
-
-export function SpecList({
-  isLoading,
-  specs,
-  filteredSpecs,
-  onCreate
-}: SpecListProps) {
-  const { t } = useTranslation()
-
-  if (isLoading) {
-    return (
-      <div className='knowledge-base-view__spec-list'>
-        <LoadingState />
-      </div>
-    )
-  }
-
-  if (specs.length === 0) {
-    return (
-      <div className='knowledge-base-view__spec-list'>
-        <EmptyState
-          description={t('knowledge.flows.empty')}
-          actionLabel={t('knowledge.flows.create')}
-          onAction={onCreate}
-        />
-      </div>
-    )
-  }
-
-  if (filteredSpecs.length === 0) {
-    return (
-      <div className='knowledge-base-view__spec-list'>
-        <EmptyState
-          description={t('knowledge.filters.noResults')}
-          variant='simple'
-        />
-      </div>
-    )
-  }
-
-  return (
-    <div className='knowledge-base-view__spec-list'>
-      <KnowledgeList
-        data={filteredSpecs}
-        renderItem={(spec) => (
-          <List.Item className='knowledge-base-view__list-item'>
-            <SpecItem spec={spec} />
-          </List.Item>
-        )}
-      />
-    </div>
-  )
-}

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

@@ -1,9 +0,0 @@
-.knowledge-base-view__content {
-  height: 100%;
-  min-height: 0;
-  overflow: hidden;
-  padding: var(--subpage-content-card-gap);
-  display: flex;
-  flex-direction: column;
-  gap: var(--subpage-tertiary-gap);
-}

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

@@ -1,17 +0,0 @@
-import './TabContent.scss'
-
-import type { ReactNode } from 'react'
-
-interface TabContentProps {
-  children: ReactNode
-  className?: string
-}
-
-export function TabContent({ children, className }: TabContentProps) {
-  const mergedClassName = ['knowledge-base-view__content', className].filter(Boolean).join(' ')
-  return (
-    <div className={mergedClassName}>
-      {children}
-    </div>
-  )
-}

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

@@ -1,10 +0,0 @@
-.knowledge-base-view__tab-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.knowledge-base-view__tab-icon {
-  font-size: 18px;
-  color: var(--sub-text-color);
-}

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

@@ -1,15 +0,0 @@
-import './TabLabel.scss'
-
-interface TabLabelProps {
-  icon: string
-  label: string
-}
-
-export function TabLabel({ icon, label }: TabLabelProps) {
-  return (
-    <span className='knowledge-base-view__tab-label'>
-      <span className='material-symbols-rounded knowledge-base-view__tab-icon'>{icon}</span>
-      <span>{label}</span>
-    </span>
-  )
-}

package/src/components/knowledge-base/components/skill-hub-utils.ts

@@ -1,108 +0,0 @@
-import type { SkillHubItem, SkillSummary } from '#~/api.js'
-
-export interface RegistryFormValues {
-  id: string
-  source: 'url' | 'directory' | 'github' | 'git'
-  value: string
-}
-
-export const ALL_REGISTRIES = 'all'
-export const ALL_SKILL_SOURCES = 'all'
-
-export type SkillHubInstallFilter = 'all' | 'installed' | 'notInstalled'
-export type SkillHubSortKey = 'default' | 'installsDesc' | 'nameAsc' | 'nameDesc'
-
-export const isSkillHubInstallFilter = (value: string): value is SkillHubInstallFilter => (
-  value === 'all' || value === 'installed' || value === 'notInstalled'
-)
-
-export const isSkillHubSortKey = (value: string): value is SkillHubSortKey => (
-  value === 'default' || value === 'installsDesc' || value === 'nameAsc' || value === 'nameDesc'
-)
-
-export const buildRegistrySource = (values: RegistryFormValues) => {
-  const value = values.value.trim()
-  switch (values.source) {
-    case 'directory':
-      return { source: 'directory' as const, path: value }
-    case 'github':
-      return { source: 'github' as const, repo: value }
-    case 'git':
-      return { source: 'git' as const, url: value }
-    case 'url':
-      return { source: 'url' as const, url: value }
-  }
-}
-
-export const buildPluginsWithRegistry = (
-  projectPlugins: Record<string, unknown>,
-  id: string,
-  source: ReturnType<typeof buildRegistrySource>
-) => ({
-  ...projectPlugins,
-  marketplaces: {
-    ...(projectPlugins.marketplaces as Record<string, unknown> | undefined),
-    [id]: {
-      type: 'claude-code',
-      enabled: true,
-      options: { source }
-    }
-  }
-})
-
-export const getSourcePlaceholderKey = (source: RegistryFormValues['source'] | undefined) => {
-  switch (source) {
-    case 'directory':
-      return 'knowledge.skills.registryPathPlaceholder'
-    case 'github':
-      return 'knowledge.skills.registryGithubPlaceholder'
-    case 'git':
-      return 'knowledge.skills.registryGitPlaceholder'
-    case 'url':
-    default:
-      return 'knowledge.skills.registryUrlPlaceholder'
-  }
-}
-
-export const joinValues = (values: string[]) => values.filter(Boolean).join(' · ')
-
-export const filterProjectSkills = (skills: SkillSummary[], query: string) => {
-  const normalizedQuery = query.trim().toLowerCase()
-  if (normalizedQuery === '') return skills
-
-  return skills.filter(skill => {
-    const haystack = `${skill.name} ${skill.description} ${skill.id}`.toLowerCase()
-    return haystack.includes(normalizedQuery)
-  })
-}
-
-export const getSkillHubItemSource = (item: SkillHubItem) => item.source ?? item.registry
-
-export const filterAndSortSkillHubItems = (
-  items: SkillHubItem[],
-  options: {
-    sourceFilter: string
-    installFilter: SkillHubInstallFilter
-    sortKey: SkillHubSortKey
-  }
-) => {
-  const filtered = items.filter((item) => {
-    if (options.sourceFilter !== ALL_SKILL_SOURCES && getSkillHubItemSource(item) !== options.sourceFilter) {
-      return false
-    }
-    if (options.installFilter === 'installed' && !item.installed) return false
-    if (options.installFilter === 'notInstalled' && item.installed) return false
-    return true
-  })
-
-  switch (options.sortKey) {
-    case 'installsDesc':
-      return [...filtered].sort((left, right) => (right.installs ?? -1) - (left.installs ?? -1))
-    case 'nameAsc':
-      return [...filtered].sort((left, right) => left.name.localeCompare(right.name))
-    case 'nameDesc':
-      return [...filtered].sort((left, right) => right.name.localeCompare(left.name))
-    case 'default':
-      return filtered
-  }
-}

package/src/components/knowledge-base/components/use-skill-market-filters.ts

@@ -1,37 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import type { SkillHubItem } from '#~/api.js'
-import { ALL_SKILL_SOURCES, filterAndSortSkillHubItems, getSkillHubItemSource } from './skill-hub-utils'
-import type { SkillHubInstallFilter, SkillHubSortKey } from './skill-hub-utils'
-
-export function useSkillMarketFilters(
-  hubItems: SkillHubItem[],
-  filters: {
-    sourceFilter: string
-    installFilter: SkillHubInstallFilter
-    sortKey: SkillHubSortKey
-  }
-) {
-  const { t } = useTranslation()
-  const sourceOptions = React.useMemo(() => {
-    const sources = Array.from(new Set(hubItems.map(getSkillHubItemSource))).sort((left, right) =>
-      left.localeCompare(right)
-    )
-    return [
-      { label: t('knowledge.skills.allSources'), value: ALL_SKILL_SOURCES },
-      ...sources.map(source => ({ label: source, value: source }))
-    ]
-  }, [hubItems, t])
-  const filteredHubItems = React.useMemo(() =>
-    filterAndSortSkillHubItems(hubItems, {
-      sourceFilter: filters.sourceFilter,
-      installFilter: filters.installFilter,
-      sortKey: filters.sortKey
-    }), [filters.installFilter, filters.sortKey, filters.sourceFilter, hubItems])
-
-  return {
-    filteredHubItems,
-    sourceOptions
-  }
-}

package/src/components/knowledge-base/components/use-skill-market-query-input.ts

@@ -1,44 +0,0 @@
-import React from 'react'
-
-const QUERY_SYNC_DELAY_MS = 160
-
-export function useSkillMarketQueryInput({
-  query,
-  onQueryChange
-}: {
-  query: string
-  onQueryChange: (value: string) => void
-}) {
-  const [draftQuery, setDraftQuery] = React.useState(query)
-
-  React.useEffect(() => {
-    setDraftQuery(previous => previous === query ? previous : query)
-  }, [query])
-
-  React.useEffect(() => {
-    if (draftQuery === query) return
-
-    const timer = window.setTimeout(() => {
-      React.startTransition(() => {
-        onQueryChange(draftQuery)
-      })
-    }, QUERY_SYNC_DELAY_MS)
-
-    return () => window.clearTimeout(timer)
-  }, [draftQuery, onQueryChange, query])
-
-  const flushDraftQuery = React.useCallback((nextQuery?: string) => {
-    const resolvedQuery = nextQuery ?? draftQuery
-    if (resolvedQuery === query) return
-
-    React.startTransition(() => {
-      onQueryChange(resolvedQuery)
-    })
-  }, [draftQuery, onQueryChange, query])
-
-  return {
-    draftQuery,
-    flushDraftQuery,
-    setDraftQuery
-  }
-}

package/src/components/knowledge-base/components/use-skill-market-search.ts

@@ -1,49 +0,0 @@
-import React from 'react'
-import useSWR from 'swr'
-
-import { searchSkillHub } from '#~/api.js'
-import type { SkillHubInstallFilter, SkillHubSortKey } from './skill-hub-utils'
-
-const INITIAL_LIMIT = 100
-const LIMIT_STEP = 100
-const MAX_LIMIT = 500
-
-export function useSkillMarketSearch(params: {
-  installFilter: SkillHubInstallFilter
-  marketQuery: string
-  registry: string
-  sortKey: SkillHubSortKey
-  sourceFilter: string
-  viewMode: 'project' | 'market'
-}) {
-  const [limit, setLimit] = React.useState(INITIAL_LIMIT)
-  const { data, isLoading, isValidating, mutate } = useSWR(
-    params.viewMode === 'market' ? ['skill-hub-search', params.registry, params.marketQuery, limit] : null,
-    () => searchSkillHub({ limit, registry: params.registry, query: params.marketQuery }),
-    { keepPreviousData: true }
-  )
-  const resetKey = [
-    params.marketQuery,
-    params.registry,
-    params.sourceFilter,
-    params.installFilter,
-    params.sortKey
-  ].join('\0')
-
-  React.useEffect(() => {
-    setLimit(INITIAL_LIMIT)
-  }, [params.marketQuery, params.registry])
-  const loadMore = React.useCallback(() => {
-    setLimit(value => Math.min(value + LIMIT_STEP, MAX_LIMIT))
-  }, [])
-
-  return {
-    data,
-    isLoading,
-    isValidating,
-    mutate,
-    resetKey,
-    canLoadMore: data?.hasMore === true && limit < MAX_LIMIT,
-    loadMore
-  }
-}