@vibe-forge/client 2.0.0 → 3.0.0-alpha.0

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

@@ -0,0 +1,79 @@
+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/RuleList.scss

@@ -1,5 +1,8 @@
 .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/RulesTab.tsx

@@ -1,6 +1,7 @@
 import './RulesTab.scss'
 
-import { Input, Space } from 'antd'
+import { Input, Space, Tooltip } from 'antd'
+import type { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { RuleSummary } from '#~/api.js'
@@ -12,7 +13,9 @@ import { TabContent } from './TabContent'
 interface RulesTabProps {
   rules: RuleSummary[]
   filteredRules: RuleSummary[]
+  hideContentSearch?: boolean
   isLoading: boolean
+  leading?: ReactNode
   query: string
   onRefresh: () => void
   onQueryChange: (value: string) => void
@@ -23,7 +26,9 @@ interface RulesTabProps {
 export function RulesTab({
   rules,
   filteredRules,
+  hideContentSearch = false,
   isLoading,
+  leading,
   query,
   onRefresh,
   onQueryChange,
@@ -37,38 +42,34 @@ export function RulesTab({
       <SectionHeader
         actions={
           <Space>
-            <ActionButton
-              icon={<span className='material-symbols-rounded'>refresh</span>}
-              onClick={onRefresh}
-            >
-              {t('knowledge.actions.refresh')}
-            </ActionButton>
-            <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>
+            <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}
       />
-      <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>
+      {!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}

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

@@ -1,7 +1,19 @@
 .knowledge-base-view__section-header {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  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

@@ -4,14 +4,16 @@ import type { ReactNode } from 'react'
 
 interface SectionHeaderProps {
   actions?: ReactNode
+  leading?: ReactNode
 }
 
-export function SectionHeader({ actions }: SectionHeaderProps) {
-  if (actions == null) return null
+export function SectionHeader({ actions, leading }: SectionHeaderProps) {
+  if (actions == null && leading == null) return null
 
   return (
     <div className='knowledge-base-view__section-header'>
-      {actions}
+      <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

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

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

@@ -0,0 +1,98 @@
+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>
+  )
+}

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

@@ -0,0 +1,198 @@
+import { Button, Empty, Input, Select, Spin, Tooltip } from 'antd'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { EmptyState } from './EmptyState'
+import { SkillMarketResults } from './SkillMarketResults'
+import type { SkillMarketViewProps } from './SkillMarketView.types'
+import { SkillRegistryErrors } from './SkillRegistryErrors'
+import { ALL_REGISTRIES, ALL_SKILL_SOURCES } from './skill-hub-utils'
+import type { SkillHubInstallFilter, SkillHubSortKey } from './skill-hub-utils'
+import { useSkillMarketQueryInput } from './use-skill-market-query-input'
+
+export function SkillMarketView({
+  canLoadMore,
+  hubItems,
+  installingId,
+  installFilter,
+  isLoading,
+  loadingMore,
+  query,
+  registries,
+  registry,
+  registryOptions,
+  resetKey,
+  sortKey,
+  sourceFilter,
+  sourceOptions,
+  onAddRegistry,
+  onOpenSkillsCli,
+  onInstall,
+  onInstallFilterChange,
+  onLoadMore,
+  onQueryChange,
+  onRegistryChange,
+  onSortChange,
+  onSourceFilterChange
+}: SkillMarketViewProps) {
+  const { t } = useTranslation()
+  const [actionsOpen, setActionsOpen] = React.useState(false)
+  const { draftQuery, flushDraftQuery, setDraftQuery } = useSkillMarketQueryInput({
+    query,
+    onQueryChange
+  })
+  const hasRegistryFilter = registry !== ALL_REGISTRIES
+  const hasSourceFilter = sourceFilter !== ALL_SKILL_SOURCES
+  const hasInstallFilter = installFilter !== 'all'
+  const hasSort = sortKey !== 'default'
+  const hasActiveControls = hasRegistryFilter || hasSourceFilter || hasInstallFilter || hasSort
+  const hasSearchCriteria = query.trim() !== '' || hasRegistryFilter || hasSourceFilter || hasInstallFilter
+  const registryChevron = <span className='material-symbols-rounded knowledge-base-view__select-chevron'>
+    expand_more
+  </span>
+  const installFilterOptions: Array<{ label: string; value: SkillHubInstallFilter }> = [
+    { label: t('knowledge.skills.allStatuses'), value: 'all' },
+    { label: t('knowledge.skills.installedOnly'), value: 'installed' },
+    { label: t('knowledge.skills.notInstalled'), value: 'notInstalled' }
+  ]
+  const sortOptions: Array<{ label: string; value: SkillHubSortKey }> = [
+    { label: t('knowledge.skills.sortDefault'), value: 'default' },
+    { label: t('knowledge.skills.sortInstallsDesc'), value: 'installsDesc' },
+    { label: t('knowledge.skills.sortNameAsc'), value: 'nameAsc' },
+    { label: t('knowledge.skills.sortNameDesc'), value: 'nameDesc' }
+  ]
+
+  return (
+    <>
+      <div className='knowledge-base-view__skill-market-search-row'>
+        <Input
+          className='knowledge-base-view__filter-input knowledge-base-view__skill-market-search'
+          prefix={<span className='material-symbols-rounded knowledge-base-view__filter-icon'>search</span>}
+          suffix={
+            <Tooltip title={t('knowledge.skills.marketActions')}>
+              <button
+                type='button'
+                className={`knowledge-base-view__search-toggle-button ${actionsOpen ? 'is-open' : ''} ${
+                  hasActiveControls ? 'has-active-filters' : ''
+                }`}
+                aria-label={t('knowledge.skills.marketActions')}
+                onMouseDown={(event) => event.preventDefault()}
+                onClick={() => setActionsOpen((prev) => !prev)}
+              >
+                <span className='material-symbols-rounded knowledge-base-view__search-chevron'>expand_more</span>
+              </button>
+            </Tooltip>
+          }
+          placeholder={t('knowledge.skills.searchHub')}
+          allowClear
+          value={draftQuery}
+          onBlur={() => flushDraftQuery()}
+          onChange={(event) => {
+            const nextQuery = event.target.value
+            setDraftQuery(nextQuery)
+            if (nextQuery === '') {
+              flushDraftQuery('')
+            }
+          }}
+          onPressEnter={() => flushDraftQuery()}
+        />
+      </div>
+      <div className={`knowledge-base-view__skill-market-actions ${actionsOpen ? 'is-open' : ''}`}>
+        <div className='knowledge-base-view__skill-market-actions-inner'>
+          <div className='knowledge-base-view__skill-toolbar-field knowledge-base-view__skill-toolbar-field--wide'>
+            <span className='material-symbols-rounded knowledge-base-view__toolbar-filter-icon'>source</span>
+            <Select
+              className='knowledge-base-view__skill-toolbar-select'
+              aria-label={t('knowledge.skills.registryFilter')}
+              value={registry}
+              options={registryOptions}
+              suffixIcon={registryChevron}
+              onChange={onRegistryChange}
+            />
+          </div>
+          <div className='knowledge-base-view__skill-toolbar-field knowledge-base-view__skill-toolbar-field--wide'>
+            <span className='material-symbols-rounded knowledge-base-view__toolbar-filter-icon'>inventory_2</span>
+            <Select
+              className='knowledge-base-view__skill-toolbar-select'
+              aria-label={t('knowledge.skills.sourceFilter')}
+              value={sourceFilter}
+              options={sourceOptions}
+              suffixIcon={registryChevron}
+              onChange={onSourceFilterChange}
+            />
+          </div>
+          <div className='knowledge-base-view__skill-toolbar-field'>
+            <span className='material-symbols-rounded knowledge-base-view__toolbar-filter-icon'>filter_list</span>
+            <Select
+              className='knowledge-base-view__skill-toolbar-select'
+              aria-label={t('knowledge.skills.installFilter')}
+              value={installFilter}
+              options={installFilterOptions}
+              suffixIcon={registryChevron}
+              onChange={onInstallFilterChange}
+            />
+          </div>
+          <div className='knowledge-base-view__skill-toolbar-field'>
+            <span className='material-symbols-rounded knowledge-base-view__toolbar-filter-icon'>sort</span>
+            <Select
+              className='knowledge-base-view__skill-toolbar-select'
+              aria-label={t('knowledge.skills.sort')}
+              value={sortKey}
+              options={sortOptions}
+              suffixIcon={registryChevron}
+              onChange={onSortChange}
+            />
+          </div>
+          <Tooltip title={t('knowledge.skills.addRegistry')}>
+            <Button
+              className='knowledge-base-view__icon-button'
+              type='text'
+              onClick={onAddRegistry}
+              icon={<span className='material-symbols-rounded'>add_link</span>}
+            />
+          </Tooltip>
+          <Tooltip title={t('knowledge.skills.installViaSkillsCli')}>
+            <Button
+              className='knowledge-base-view__icon-button'
+              type='text'
+              onClick={onOpenSkillsCli}
+              icon={<span className='material-symbols-rounded'>terminal</span>}
+            />
+          </Tooltip>
+        </div>
+      </div>
+      <SkillRegistryErrors registries={registries} />
+      {isLoading && (
+        <div className='knowledge-base-view__loading'>
+          <Spin />
+        </div>
+      )}
+      {!isLoading && hubItems.length > 0 && (
+        <SkillMarketResults
+          canLoadMore={canLoadMore}
+          hubItems={hubItems}
+          installingId={installingId}
+          loadingMore={loadingMore}
+          resetKey={resetKey}
+          onInstall={onInstall}
+          onLoadMore={onLoadMore}
+        />
+      )}
+      {!isLoading && hubItems.length === 0 && registries.length > 0 && (
+        <div className='knowledge-base-view__empty-simple'>
+          <Empty
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+            description={hasSearchCriteria ? t('knowledge.filters.noResults') : t('knowledge.skills.emptyHub')}
+          />
+        </div>
+      )}
+      {!isLoading && hubItems.length === 0 && registries.length === 0 && (
+        <EmptyState
+          description={t('knowledge.skills.noRegistry')}
+          actionLabel={t('knowledge.skills.addRegistry')}
+          onAction={onAddRegistry}
+        />
+      )}
+    </>
+  )
+}