@vibe-forge/client 2.0.0 → 2.0.1

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}
+        />
+      )}
+    </>
+  )
+}

package/src/components/knowledge-base/components/SkillMarketView.types.ts

@@ -0,0 +1,28 @@
+import type { SkillHubItem, SkillHubRegistrySummary } from '#~/api.js'
+import type { SkillHubInstallFilter, SkillHubSortKey } from './skill-hub-utils'
+
+export interface SkillMarketViewProps {
+  canLoadMore: boolean
+  hubItems: SkillHubItem[]
+  installingId: string | null
+  installFilter: SkillHubInstallFilter
+  isLoading: boolean
+  loadingMore: boolean
+  query: string
+  registries: SkillHubRegistrySummary[]
+  registry: string
+  registryOptions: Array<{ label: string; value: string }>
+  resetKey: string
+  sortKey: SkillHubSortKey
+  sourceFilter: string
+  sourceOptions: Array<{ label: string; value: string }>
+  onAddRegistry: () => void
+  onOpenSkillsCli: () => void
+  onInstall: (item: SkillHubItem) => void
+  onInstallFilterChange: (value: SkillHubInstallFilter) => void
+  onLoadMore: () => void
+  onQueryChange: (value: string) => void
+  onRegistryChange: (value: string) => void
+  onSortChange: (value: SkillHubSortKey) => void
+  onSourceFilterChange: (value: string) => void
+}

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

@@ -0,0 +1,21 @@
+import { Tag, Tooltip } from 'antd'
+
+import type { SkillHubRegistrySummary } from '#~/api.js'
+
+export function SkillRegistryErrors({ registries }: { registries: SkillHubRegistrySummary[] }) {
+  const registryErrors = registries.filter(item => item.error != null)
+  if (registryErrors.length === 0) return null
+
+  return (
+    <div className='knowledge-base-view__skill-registry-errors'>
+      {registryErrors.map(item => (
+        <Tooltip key={item.id} title={item.error}>
+          <Tag color='warning' className='knowledge-base-view__skill-registry-error'>
+            <span className='material-symbols-rounded knowledge-base-view__tag-icon'>warning</span>
+            <span>{item.id}</span>
+          </Tag>
+        </Tooltip>
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,74 @@
+import { Form, Input, Modal, Select } from 'antd'
+import type { FormInstance } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import type { RegistryFormValues } from './skill-hub-utils'
+import { getSourcePlaceholderKey } from './skill-hub-utils'
+
+interface SkillRegistryModalProps {
+  open: boolean
+  saving: boolean
+  form: FormInstance<RegistryFormValues>
+  onSave: () => void
+  onClose: () => void
+}
+
+export function SkillRegistryModal({
+  open,
+  saving,
+  form,
+  onSave,
+  onClose
+}: SkillRegistryModalProps) {
+  const { t } = useTranslation()
+  const sourceKind = Form.useWatch('source', form)
+
+  return (
+    <Modal
+      title={t('knowledge.skills.addRegistry')}
+      open={open}
+      confirmLoading={saving}
+      okText={t('config.actions.save')}
+      cancelText={t('config.actions.cancel')}
+      onOk={onSave}
+      onCancel={onClose}
+      destroyOnClose
+    >
+      <Form
+        form={form}
+        layout='vertical'
+        initialValues={{ source: 'url' }}
+        className='knowledge-base-view__registry-form'
+      >
+        <Form.Item
+          name='id'
+          label={t('knowledge.skills.registryName')}
+          rules={[{ required: true, message: t('knowledge.skills.registryNameRequired') }]}
+        >
+          <Input placeholder={t('knowledge.skills.registryNamePlaceholder')} />
+        </Form.Item>
+        <Form.Item
+          name='source'
+          label={t('knowledge.skills.registrySource')}
+          rules={[{ required: true }]}
+        >
+          <Select
+            options={[
+              { label: t('knowledge.skills.registryUrl'), value: 'url' },
+              { label: t('knowledge.skills.registryDirectory'), value: 'directory' },
+              { label: t('knowledge.skills.registryGithub'), value: 'github' },
+              { label: t('knowledge.skills.registryGit'), value: 'git' }
+            ]}
+          />
+        </Form.Item>
+        <Form.Item
+          name='value'
+          label={t('knowledge.skills.registryValue')}
+          rules={[{ required: true, message: t('knowledge.skills.registryValueRequired') }]}
+        >
+          <Input placeholder={t(getSourcePlaceholderKey(sourceKind))} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+}