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

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

@@ -1,81 +0,0 @@
-import './RuleItem.scss'
-
-import { Button, Empty, Tag, Tooltip } from 'antd'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
-
-import type { RuleDetail, RuleSummary } from '#~/api.js'
-import { getRuleDetail } from '#~/api.js'
-import { MarkdownContent } from '#~/components/MarkdownContent'
-import { LoadingState } from './LoadingState'
-
-interface RuleItemProps {
-  rule: RuleSummary
-}
-
-export function RuleItem({ rule }: RuleItemProps) {
-  const { t } = useTranslation()
-  const [expanded, setExpanded] = React.useState(false)
-  const { data, isLoading } = useSWR<{ rule: RuleDetail }>(
-    expanded ? ['rule-detail', rule.id] : null,
-    () => getRuleDetail(rule.id)
-  )
-  const detail = data?.rule
-  const body = detail?.body ?? ''
-  const globList = rule.globs ?? []
-
-  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'>gavel</span>
-            <span>{rule.name}</span>
-          </div>
-          <div className='knowledge-base-view__item-desc'>{rule.description}</div>
-          {globList.length > 0 && (
-            <div className='knowledge-base-view__tag-list'>
-              {globList.map(glob => (
-                <Tag key={glob} className='knowledge-base-view__tag'>
-                  <span className='material-symbols-rounded knowledge-base-view__tag-icon'>folder</span>
-                  <span>{glob}</span>
-                </Tag>
-              ))}
-            </div>
-          )}
-        </div>
-        <div className='knowledge-base-view__item-meta'>
-          {rule.always && (
-            <Tag color='blue'>{t('knowledge.meta.always')}</Tag>
-          )}
-          <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.rules.empty')} />
-          )}
-          {!isLoading && body.trim() !== '' && (
-            <div className='knowledge-base-view__markdown'>
-              <MarkdownContent content={body} />
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

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

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

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

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

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

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

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

@@ -1,81 +0,0 @@
-import './RulesTab.scss'
-
-import { Input, Space, Tooltip } from 'antd'
-import type { ReactNode } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import type { RuleSummary } from '#~/api.js'
-import { ActionButton } from './ActionButton'
-import { RuleList } from './RuleList'
-import { SectionHeader } from './SectionHeader'
-import { TabContent } from './TabContent'
-
-interface RulesTabProps {
-  rules: RuleSummary[]
-  filteredRules: RuleSummary[]
-  hideContentSearch?: boolean
-  isLoading: boolean
-  leading?: ReactNode
-  query: string
-  onRefresh: () => void
-  onQueryChange: (value: string) => void
-  onCreate: () => void
-  onImport: () => void
-}
-
-export function RulesTab({
-  rules,
-  filteredRules,
-  hideContentSearch = false,
-  isLoading,
-  leading,
-  query,
-  onRefresh,
-  onQueryChange,
-  onCreate,
-  onImport
-}: RulesTabProps) {
-  const { t } = useTranslation()
-
-  return (
-    <TabContent className='knowledge-base-view__rules-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}
-      />
-      {!hideContentSearch && (
-        <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={t('knowledge.filters.search')}
-            allowClear
-            value={query}
-            onChange={(e) => onQueryChange(e.target.value)}
-          />
-        </div>
-      )}
-      <RuleList
-        isLoading={isLoading}
-        rules={rules}
-        filteredRules={filteredRules}
-        onCreate={onCreate}
-      />
-    </TabContent>
-  )
-}

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

@@ -1,19 +0,0 @@
-.knowledge-base-view__section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  flex-shrink: 0;
-  padding: 0;
-}
-
-.knowledge-base-view__section-leading,
-.knowledge-base-view__section-actions {
-  display: inline-flex;
-  align-items: center;
-  min-width: 0;
-}
-
-.knowledge-base-view__section-actions {
-  justify-content: flex-end;
-}

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

@@ -1,19 +0,0 @@
-import './SectionHeader.scss'
-
-import type { ReactNode } from 'react'
-
-interface SectionHeaderProps {
-  actions?: ReactNode
-  leading?: ReactNode
-}
-
-export function SectionHeader({ actions, leading }: SectionHeaderProps) {
-  if (actions == null && leading == null) return null
-
-  return (
-    <div className='knowledge-base-view__section-header'>
-      <div className='knowledge-base-view__section-leading'>{leading}</div>
-      <div className='knowledge-base-view__section-actions'>{actions}</div>
-    </div>
-  )
-}

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

@@ -1,43 +0,0 @@
-import React from 'react'
-
-const ARCHIVE_ACCEPT = [
-  '.zip',
-  '.tar',
-  '.tgz',
-  '.tar.gz',
-  '.tar.bz2',
-  '.tbz',
-  '.tar.xz',
-  '.txz',
-  '.7z',
-  '.gz',
-  '.bz2',
-  '.xz',
-  'application/zip',
-  'application/x-tar',
-  'application/gzip',
-  'application/x-bzip2',
-  'application/x-xz',
-  'application/x-7z-compressed'
-].join(',')
-
-interface SkillArchiveInputProps {
-  inputRef: React.Ref<HTMLInputElement>
-  onSelect: (file: File) => void
-}
-
-export function SkillArchiveInput({ inputRef, onSelect }: SkillArchiveInputProps) {
-  return (
-    <input
-      ref={inputRef}
-      type='file'
-      className='knowledge-base-view__hidden-file-input'
-      accept={ARCHIVE_ACCEPT}
-      onChange={(event) => {
-        const file = event.target.files?.[0]
-        event.target.value = ''
-        if (file != null) onSelect(file)
-      }}
-    />
-  )
-}

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

@@ -1,112 +0,0 @@
-import { Button, List, Tag, Tooltip } from 'antd'
-import { useTranslation } from 'react-i18next'
-
-import type { SkillHubItem } from '#~/api.js'
-import { joinValues } from './skill-hub-utils'
-
-function SkillCapabilityTags({ item }: { item: SkillHubItem }) {
-  const { t } = useTranslation()
-  const groups = [
-    { key: 'skills', icon: 'psychology', items: item.skills },
-    { key: 'commands', icon: 'terminal', items: item.commands },
-    { key: 'agents', icon: 'groups', items: item.agents },
-    { key: 'mcp', icon: 'account_tree', items: item.mcpServers },
-    { key: 'hooks', icon: 'bolt', items: item.hasHooks ? [t('knowledge.skills.hooks')] : [] }
-  ]
-
-  return (
-    <div className='knowledge-base-view__skill-capabilities'>
-      {groups.flatMap(group =>
-        group.items.map(value => (
-          <Tag key={`${group.key}:${value}`} className='knowledge-base-view__skill-capability'>
-            <span className='material-symbols-rounded knowledge-base-view__tag-icon'>{group.icon}</span>
-            <span>{value}</span>
-          </Tag>
-        ))
-      )}
-    </div>
-  )
-}
-
-const formatInstalls = (count: number) => {
-  if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`
-  if (count >= 1_000) return `${(count / 1_000).toFixed(1).replace(/\.0$/, '')}K`
-  return `${count}`
-}
-
-const openExternalUrl = (url: string) => {
-  const opened = window.open(url, '_blank')
-  if (opened == null) {
-    window.location.assign(url)
-    return
-  }
-  try {
-    opened.opener = null
-  } catch {
-    // Ignore browsers that do not allow changing opener.
-  }
-  opened.focus()
-}
-
-export function SkillHubResultItem({
-  item,
-  installing,
-  onInstall
-}: {
-  item: SkillHubItem
-  installing: boolean
-  onInstall: (item: SkillHubItem) => void
-}) {
-  const { t } = useTranslation()
-  const detailUrl = item.detailUrl
-  const subtitle = joinValues([
-    item.source ?? item.registry,
-    item.version ?? '',
-    item.installs != null ? t('knowledge.skills.installs', { value: formatInstalls(item.installs) }) : '',
-    item.installScope != null ? `${t('knowledge.skills.scope')}: ${item.installScope}` : ''
-  ])
-
-  return (
-    <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'>extension</span>
-            <span>{item.name}</span>
-            {item.installed &&
-              <Tag className='knowledge-base-view__skill-status'>{t('knowledge.skills.installed')}</Tag>}
-          </div>
-          {subtitle !== '' && <div className='knowledge-base-view__skill-subtitle'>{subtitle}</div>}
-          {item.description != null && item.description.trim() !== '' && (
-            <div className='knowledge-base-view__item-desc'>{item.description}</div>
-          )}
-          <SkillCapabilityTags item={item} />
-        </div>
-        <div className='knowledge-base-view__skill-result-actions'>
-          {detailUrl != null && (
-            <Tooltip title={t('knowledge.skills.openOfficialSite')}>
-              <Button
-                className='knowledge-base-view__icon-button'
-                onClick={() => openExternalUrl(detailUrl)}
-                icon={<span className='material-symbols-rounded'>open_in_new</span>}
-              />
-            </Tooltip>
-          )}
-          <Tooltip title={item.installed ? t('knowledge.skills.reinstall') : t('knowledge.skills.install')}>
-            <Button
-              type={item.installed ? 'default' : 'primary'}
-              className='knowledge-base-view__icon-button'
-              loading={installing}
-              onClick={() => onInstall(item)}
-              icon={
-                <span className='material-symbols-rounded'>
-                  {item.installed ? 'sync' : 'download'}
-                </span>
-              }
-            />
-          </Tooltip>
-        </div>
-      </div>
-    </List.Item>
-  )
-}

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

@@ -1,98 +0,0 @@
-import { Button, List, Tooltip } from 'antd'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import type { SkillHubItem } from '#~/api.js'
-import { SkillHubResultItem } from './SkillHubResultItem'
-
-const PREFETCH_ROOT_MARGIN = '640px'
-
-interface SkillMarketResultsProps {
-  canLoadMore: boolean
-  hubItems: SkillHubItem[]
-  installingId: string | null
-  loadingMore: boolean
-  resetKey: string
-  onInstall: (item: SkillHubItem) => void
-  onLoadMore: () => void
-}
-
-export function SkillMarketResults({
-  canLoadMore,
-  hubItems,
-  installingId,
-  loadingMore,
-  resetKey,
-  onInstall,
-  onLoadMore
-}: SkillMarketResultsProps) {
-  const { t } = useTranslation()
-  const scrollRef = React.useRef<HTMLDivElement | null>(null)
-  const sentinelRef = React.useRef<HTMLDivElement | null>(null)
-  const requestPendingRef = React.useRef(false)
-
-  React.useEffect(() => {
-    scrollRef.current?.scrollTo({ top: 0 })
-    requestPendingRef.current = false
-  }, [resetKey])
-
-  React.useEffect(() => {
-    if (!loadingMore) {
-      requestPendingRef.current = false
-    }
-  }, [loadingMore])
-
-  const requestLoadMore = React.useCallback(() => {
-    if (!canLoadMore || loadingMore || requestPendingRef.current) return
-    requestPendingRef.current = true
-    onLoadMore()
-  }, [canLoadMore, loadingMore, onLoadMore])
-
-  React.useEffect(() => {
-    const sentinel = sentinelRef.current
-    const root = scrollRef.current
-    if (sentinel == null || root == null || !canLoadMore) return
-
-    const observer = new IntersectionObserver(([entry]) => {
-      if (!entry?.isIntersecting) return
-      requestLoadMore()
-    }, {
-      root,
-      rootMargin: PREFETCH_ROOT_MARGIN
-    })
-    observer.observe(sentinel)
-    return () => observer.disconnect()
-  }, [canLoadMore, requestLoadMore])
-
-  return (
-    <div className='knowledge-base-view__skill-results'>
-      <div ref={scrollRef} className='knowledge-base-view__skill-results-scroll'>
-        <List
-          className='knowledge-base-view__list knowledge-base-view__skill-market-list'
-          dataSource={hubItems}
-          renderItem={(item) => (
-            <SkillHubResultItem
-              item={item}
-              installing={installingId === item.id}
-              onInstall={onInstall}
-            />
-          )}
-        />
-        {(canLoadMore || loadingMore) && (
-          <div ref={sentinelRef} className='knowledge-base-view__skill-load-more'>
-            <Tooltip title={loadingMore ? t('knowledge.skills.loadingMore') : t('knowledge.skills.loadMore')}>
-              <Button
-                className='knowledge-base-view__skill-load-more-button'
-                type='text'
-                loading={loadingMore}
-                disabled={loadingMore}
-                onClick={requestLoadMore}
-                icon={<span className='material-symbols-rounded'>expand_more</span>}
-              />
-            </Tooltip>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}