@vibe-forge/client 2.0.0 → 2.0.1

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

@@ -1,53 +1,337 @@
 import './SkillsTab.scss'
 
-import { Space } from 'antd'
+import { App, Form } from 'antd'
+import React from 'react'
+import type { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import useSWR from 'swr'
 
-import { ActionButton } from './ActionButton'
-import { EmptyState } from './EmptyState'
-import { SectionHeader } from './SectionHeader'
+import type { ConfigResponse } from '@vibe-forge/types'
+
+import type { SkillHubItem, SkillSummary } from '#~/api.js'
+import {
+  getApiErrorMessage,
+  getConfig,
+  importSkillArchive,
+  installSkillHubItem,
+  installSkillsCliItem,
+  listSkills,
+  searchSkillsCli
+} from '#~/api.js'
+import { ProjectSkillsList } from './ProjectSkillsList'
+import { SkillArchiveInput } from './SkillArchiveInput'
+import { SkillMarketView } from './SkillMarketView'
+import { SkillRegistryModal } from './SkillRegistryModal'
+import { SkillsCliModal } from './SkillsCliModal'
+import type { SkillsCliFormValues } from './SkillsCliModal'
+import { SkillsTabActions } from './SkillsTabActions'
 import { TabContent } from './TabContent'
+import { ALL_REGISTRIES, filterProjectSkills } from './skill-hub-utils'
+import type { SkillHubInstallFilter, SkillHubSortKey } from './skill-hub-utils'
+import { useSkillMarketFilters } from './use-skill-market-filters'
+import { useSkillMarketSearch } from './use-skill-market-search'
+import { useSkillRegistryModal } from './use-skill-registry-modal'
+
+const SKILLS_CLI_INITIAL_LIMIT = 100
+const SKILLS_CLI_LIMIT_STEP = 100
+const SKILLS_CLI_MAX_LIMIT = 500
+
+const trimOptionalString = (value: string | undefined) => {
+  const normalizedValue = value?.trim()
+  return normalizedValue == null || normalizedValue === '' ? undefined : normalizedValue
+}
 
 interface SkillsTabProps {
-  onRefresh: () => void
+  leading?: ReactNode
+  installFilter: SkillHubInstallFilter
+  marketQuery: string
+  projectQuery: string
+  registry: string
+  sortKey: SkillHubSortKey
+  sourceFilter: string
+  viewMode: 'project' | 'market'
+  onRefresh: () => void | Promise<void>
   onCreate: () => void
-  onImport: () => void
+  onInstallFilterChange: (value: SkillHubInstallFilter) => void
+  onMarketQueryChange: (value: string) => void
+  onRegistryChange: (value: string) => void
+  onSortChange: (value: SkillHubSortKey) => void
+  onSourceFilterChange: (value: string) => void
+  onViewModeChange: (value: 'project' | 'market') => void
 }
 
-export function SkillsTab({ onCreate, onImport, onRefresh }: SkillsTabProps) {
+export function SkillsTab({
+  leading,
+  installFilter,
+  marketQuery,
+  projectQuery,
+  registry,
+  sortKey,
+  sourceFilter,
+  viewMode,
+  onCreate,
+  onInstallFilterChange,
+  onMarketQueryChange,
+  onRegistryChange,
+  onRefresh,
+  onSortChange,
+  onSourceFilterChange,
+  onViewModeChange
+}: SkillsTabProps) {
   const { t } = useTranslation()
+  const { message } = App.useApp()
+  const navigate = useNavigate()
+  const importInputRef = React.useRef<HTMLInputElement | null>(null)
+  const [installingId, setInstallingId] = React.useState<string | null>(null)
+  const [importing, setImporting] = React.useState(false)
+  const [skillsCliOpen, setSkillsCliOpen] = React.useState(false)
+  const [skillsCliSearching, setSkillsCliSearching] = React.useState(false)
+  const [skillsCliLoadingMore, setSkillsCliLoadingMore] = React.useState(false)
+  const [skillsCliInstallingId, setSkillsCliInstallingId] = React.useState<string | null>(null)
+  const [skillsCliItems, setSkillsCliItems] = React.useState<SkillHubItem[]>([])
+  const [skillsCliError, setSkillsCliError] = React.useState<string | null>(null)
+  const [skillsCliHasMore, setSkillsCliHasMore] = React.useState(false)
+  const [skillsCliHasSearched, setSkillsCliHasSearched] = React.useState(false)
+  const [skillsCliLimit, setSkillsCliLimit] = React.useState(SKILLS_CLI_INITIAL_LIMIT)
+  const [skillsCliResetKey, setSkillsCliResetKey] = React.useState('')
+  const [skillsCliForm] = Form.useForm<SkillsCliFormValues>()
+  const {
+    data: skillsRes,
+    isLoading: isSkillsLoading,
+    mutate: mutateSkills
+  } = useSWR<{ skills: SkillSummary[] }>('/api/ai/skills', listSkills)
+  const { data: configRes, mutate: mutateConfig } = useSWR<ConfigResponse>('/api/config', getConfig)
+  const marketSearch = useSkillMarketSearch({ installFilter, marketQuery, registry, sortKey, sourceFilter, viewMode })
+  const registryModal = useSkillRegistryModal({
+    configRes,
+    mutateConfig,
+    mutateHub: marketSearch.mutate,
+    setRegistry: onRegistryChange
+  })
+
+  const skills = skillsRes?.skills ?? []
+  const registries = marketSearch.data?.registries ?? []
+  const hubItems = marketSearch.data?.items ?? []
+  const filteredSkills = React.useMemo(() => filterProjectSkills(skills, projectQuery), [projectQuery, skills])
+  const marketFilters = useSkillMarketFilters(hubItems, {
+    sourceFilter,
+    installFilter,
+    sortKey
+  })
+  const registryOptions = React.useMemo(() => [
+    { label: t('knowledge.skills.allRegistries'), value: ALL_REGISTRIES },
+    ...registries.map(item => ({ label: item.id, value: item.id }))
+  ], [registries, t])
+
+  const handleRefresh = async () => {
+    await Promise.all([mutateSkills(), marketSearch.mutate(), mutateConfig(), onRefresh()])
+  }
+
+  const handleInstall = async (item: SkillHubItem) => {
+    setInstallingId(item.id)
+    try {
+      await installSkillHubItem({
+        registry: item.registry,
+        plugin: item.installRef ?? item.name,
+        force: item.installed
+      })
+      await Promise.all([marketSearch.mutate(), mutateSkills()])
+      void message.success(t('knowledge.skills.installSuccess'))
+    } catch (error) {
+      void message.error(getApiErrorMessage(error, t('knowledge.skills.installFailed')))
+    } finally {
+      setInstallingId(null)
+    }
+  }
+
+  const handleImportArchive = async (file: File) => {
+    setImporting(true)
+    try {
+      const result = await importSkillArchive(file)
+      await Promise.all([mutateSkills(), onRefresh()])
+      void message.success(t('knowledge.skills.importSuccess', { count: result.fileCount }))
+    } catch (error) {
+      void message.error(getApiErrorMessage(error, t('knowledge.skills.importFailed')))
+    } finally {
+      setImporting(false)
+    }
+  }
+
+  const resolveSkillsCliRequest = React.useCallback(async () => {
+    try {
+      await skillsCliForm.validateFields(['source'])
+    } catch {
+      return undefined
+    }
+
+    const values = skillsCliForm.getFieldsValue()
+    const source = values.source.trim()
+    return {
+      source,
+      query: trimOptionalString(values.query),
+      registry: trimOptionalString(values.registry)
+    }
+  }, [skillsCliForm])
+
+  const runSkillsCliSearch = React.useCallback(async (nextLimit: number) => {
+    const request = await resolveSkillsCliRequest()
+    if (request == null) return false
+
+    const result = await searchSkillsCli({
+      limit: nextLimit,
+      source: request.source,
+      ...(request.query != null ? { query: request.query } : {}),
+      ...(request.registry != null ? { registry: request.registry } : {})
+    })
+
+    setSkillsCliHasSearched(true)
+    setSkillsCliLimit(nextLimit)
+    setSkillsCliItems(result.items)
+    setSkillsCliError(result.error ?? null)
+    setSkillsCliHasMore(result.hasMore === true && nextLimit < SKILLS_CLI_MAX_LIMIT)
+    setSkillsCliResetKey([request.source, request.query ?? '', request.registry ?? '', String(nextLimit)].join('\0'))
+    return true
+  }, [resolveSkillsCliRequest])
+
+  const handleSearchSkillsCli = async () => {
+    setSkillsCliSearching(true)
+    setSkillsCliLoadingMore(false)
+    try {
+      await runSkillsCliSearch(SKILLS_CLI_INITIAL_LIMIT)
+    } catch (error) {
+      void message.error(getApiErrorMessage(error, t('knowledge.skills.skillsCliSearchFailed')))
+    } finally {
+      setSkillsCliSearching(false)
+    }
+  }
+
+  const handleLoadMoreSkillsCli = async () => {
+    const nextLimit = Math.min(skillsCliLimit + SKILLS_CLI_LIMIT_STEP, SKILLS_CLI_MAX_LIMIT)
+    if (nextLimit === skillsCliLimit) return
+
+    setSkillsCliLoadingMore(true)
+    try {
+      await runSkillsCliSearch(nextLimit)
+    } catch (error) {
+      void message.error(getApiErrorMessage(error, t('knowledge.skills.skillsCliSearchFailed')))
+    } finally {
+      setSkillsCliLoadingMore(false)
+    }
+  }
+
+  const handleInstallSkillsCli = async (item: SkillHubItem) => {
+    const request = await resolveSkillsCliRequest()
+    if (request == null) return
+
+    setSkillsCliInstallingId(item.id)
+    try {
+      await installSkillsCliItem({
+        source: request.source,
+        skill: item.installRef ?? item.name,
+        force: item.installed,
+        ...(request.registry != null ? { registry: request.registry } : {})
+      })
+      await mutateSkills()
+      try {
+        await runSkillsCliSearch(skillsCliLimit)
+      } catch {
+        // Keep the install success state even if refreshing the source list fails afterwards.
+      }
+      void message.success(t('knowledge.skills.installSuccess'))
+    } catch (error) {
+      void message.error(getApiErrorMessage(error, t('knowledge.skills.installFailed')))
+    } finally {
+      setSkillsCliInstallingId(null)
+    }
+  }
+
+  const handleCloseSkillsCli = React.useCallback(() => {
+    setSkillsCliOpen(false)
+    setSkillsCliSearching(false)
+    setSkillsCliLoadingMore(false)
+    setSkillsCliInstallingId(null)
+    setSkillsCliItems([])
+    setSkillsCliError(null)
+    setSkillsCliHasMore(false)
+    setSkillsCliHasSearched(false)
+    setSkillsCliLimit(SKILLS_CLI_INITIAL_LIMIT)
+    setSkillsCliResetKey('')
+    skillsCliForm.resetFields()
+  }, [skillsCliForm])
 
   return (
     <TabContent className='knowledge-base-view__skills-tab'>
-      <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.skills.create')}
-            </ActionButton>
-          </Space>
-        }
+      <SkillsTabActions
+        importing={importing}
+        leading={leading}
+        viewMode={viewMode}
+        onRefresh={() => void handleRefresh()}
+        onImport={() => importInputRef.current?.click()}
+        onOpenConfig={() => navigate('/config?tab=plugins')}
+        onViewModeChange={onViewModeChange}
+      />
+      <SkillArchiveInput
+        inputRef={importInputRef}
+        onSelect={(file) => void handleImportArchive(file)}
+      />
+      {viewMode === 'project' && (
+        <ProjectSkillsList
+          allCount={skills.length}
+          isLoading={isSkillsLoading}
+          skills={filteredSkills}
+          onCreate={onCreate}
+        />
+      )}
+      {viewMode === 'market' && (
+        <SkillMarketView
+          hubItems={marketFilters.filteredHubItems}
+          installingId={installingId}
+          installFilter={installFilter}
+          isLoading={marketSearch.isLoading && hubItems.length === 0}
+          query={marketQuery}
+          registries={registries}
+          registry={registry}
+          registryOptions={registryOptions}
+          sortKey={sortKey}
+          sourceFilter={sourceFilter}
+          sourceOptions={marketFilters.sourceOptions}
+          canLoadMore={marketSearch.canLoadMore}
+          loadingMore={marketSearch.isValidating && hubItems.length > 0}
+          onAddRegistry={() => registryModal.setOpen(true)}
+          onOpenSkillsCli={() => setSkillsCliOpen(true)}
+          onInstall={handleInstall}
+          onInstallFilterChange={onInstallFilterChange}
+          onLoadMore={marketSearch.loadMore}
+          onQueryChange={onMarketQueryChange}
+          onRegistryChange={onRegistryChange}
+          resetKey={marketSearch.resetKey}
+          onSortChange={onSortChange}
+          onSourceFilterChange={onSourceFilterChange}
+        />
+      )}
+      <SkillRegistryModal
+        open={registryModal.open}
+        saving={registryModal.saving}
+        form={registryModal.form}
+        onSave={() => void registryModal.save()}
+        onClose={() => registryModal.setOpen(false)}
       />
-      <EmptyState
-        description={t('knowledge.skills.empty')}
-        actionLabel={t('knowledge.skills.create')}
-        onAction={onCreate}
+      <SkillsCliModal
+        canLoadMore={skillsCliHasMore}
+        form={skillsCliForm}
+        hasSearched={skillsCliHasSearched}
+        installingId={skillsCliInstallingId}
+        items={skillsCliItems}
+        loadingMore={skillsCliLoadingMore}
+        open={skillsCliOpen}
+        resetKey={skillsCliResetKey}
+        searchError={skillsCliError}
+        searching={skillsCliSearching}
+        onClose={handleCloseSkillsCli}
+        onInstall={handleInstallSkillsCli}
+        onLoadMore={() => void handleLoadMoreSkillsCli()}
+        onSearch={() => void handleSearchSkillsCli()}
       />
     </TabContent>
   )

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

@@ -0,0 +1,88 @@
+import { Segmented, Space, Tooltip } from 'antd'
+import type { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { ActionButton } from './ActionButton'
+import { SectionHeader } from './SectionHeader'
+
+interface SkillsTabActionsProps {
+  importing: boolean
+  leading?: ReactNode
+  viewMode: 'project' | 'market'
+  onRefresh: () => void
+  onImport: () => void
+  onOpenConfig: () => void
+  onViewModeChange: (value: 'project' | 'market') => void
+}
+
+export function SkillsTabActions({
+  importing,
+  leading,
+  viewMode,
+  onRefresh,
+  onImport,
+  onOpenConfig,
+  onViewModeChange
+}: SkillsTabActionsProps) {
+  const { t } = useTranslation()
+  const isProjectView = viewMode === 'project'
+
+  return (
+    <SectionHeader
+      leading={
+        <div className='knowledge-base-view__skill-section-leading'>
+          {leading}
+          <Segmented
+            className='knowledge-base-view__skill-view-switch'
+            size='small'
+            value={viewMode}
+            onChange={(value) => onViewModeChange(value as 'project' | 'market')}
+            options={[
+              {
+                label: (
+                  <Tooltip title={t('knowledge.skills.project')}>
+                    <span className='material-symbols-rounded knowledge-base-view__switch-icon'>folder_managed</span>
+                  </Tooltip>
+                ),
+                value: 'project'
+              },
+              {
+                label: (
+                  <Tooltip title={t('knowledge.skills.market')}>
+                    <span className='material-symbols-rounded knowledge-base-view__switch-icon'>storefront</span>
+                  </Tooltip>
+                ),
+                value: 'market'
+              }
+            ]}
+          />
+        </div>
+      }
+      actions={
+        <Space>
+          <Tooltip title={t('knowledge.actions.refresh')}>
+            <ActionButton
+              icon={<span className='material-symbols-rounded'>refresh</span>}
+              onClick={onRefresh}
+            />
+          </Tooltip>
+          {isProjectView && (
+            <Tooltip title={t('knowledge.actions.import')}>
+              <ActionButton
+                loading={importing}
+                icon={<span className='material-symbols-rounded'>download</span>}
+                onClick={onImport}
+              />
+            </Tooltip>
+          )}
+          <Tooltip title={t('knowledge.skills.openConfig')}>
+            <ActionButton
+              icon={<span className='material-symbols-rounded'>settings</span>}
+              onClick={onOpenConfig}
+            />
+          </Tooltip>
+        </Space>
+      }
+    />
+  )
+}

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

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

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

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

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

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

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