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

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

@@ -1,53 +1,184 @@
 import './SkillsTab.scss'
 
-import { Space } from 'antd'
+import { App } 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 { SkillSummary } from '#~/api.js'
+import { getConfig, listSkills } from '#~/api.js'
+import { useSkillsCliModalController } from './@hooks/use-skills-cli-modal-controller'
+import { useSkillsTabActions } from './@hooks/use-skills-tab-actions'
+import { ProjectSkillsList } from './ProjectSkillsList'
+import { SkillArchiveInput } from './SkillArchiveInput'
+import { SkillMarketView } from './SkillMarketView'
+import { SkillRegistryModal } from './SkillRegistryModal'
+import { SkillsCliModal } 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'
 
 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 {
+    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 actions = useSkillsTabActions({
+    marketMutate: marketSearch.mutate,
+    message,
+    mutateConfig,
+    mutateSkills,
+    onRefresh,
+    t
+  })
+  const skillsCliModal = useSkillsCliModalController({
+    message,
+    mutateSkills,
+    t
+  })
+
+  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])
 
   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={actions.importing}
+        leading={leading}
+        viewMode={viewMode}
+        onRefresh={() => void actions.handleRefresh()}
+        onImport={() => actions.importInputRef.current?.click()}
+        onOpenConfig={() => navigate('/config?tab=plugins')}
+        onViewModeChange={onViewModeChange}
+      />
+      <SkillArchiveInput
+        inputRef={actions.importInputRef}
+        onSelect={(file) => void actions.handleImportArchive(file)}
+      />
+      {viewMode === 'project' && (
+        <ProjectSkillsList
+          allCount={skills.length}
+          isLoading={isSkillsLoading}
+          skills={filteredSkills}
+          onCreate={onCreate}
+        />
+      )}
+      {viewMode === 'market' && (
+        <SkillMarketView
+          hubItems={marketFilters.filteredHubItems}
+          installingId={actions.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={() => skillsCliModal.setOpen(true)}
+          onInstall={actions.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={skillsCliModal.hasMore}
+        form={skillsCliModal.form}
+        hasSearched={skillsCliModal.hasSearched}
+        installingId={skillsCliModal.installingId}
+        items={skillsCliModal.items}
+        loadingMore={skillsCliModal.loadingMore}
+        open={skillsCliModal.open}
+        resetKey={skillsCliModal.resetKey}
+        searchError={skillsCliModal.searchError}
+        searching={skillsCliModal.searching}
+        onClose={skillsCliModal.handleClose}
+        onInstall={skillsCliModal.handleInstall}
+        onLoadMore={() => void skillsCliModal.handleLoadMore()}
+        onSearch={() => void skillsCliModal.handleSearch()}
       />
     </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
+  }
+}

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

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

package/src/components/knowledge-base/components/use-skill-registry-modal.ts

@@ -0,0 +1,68 @@
+import { App, Form } from 'antd'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { ConfigResponse } from '@vibe-forge/types'
+
+import { getApiErrorMessage, updateConfig } from '#~/api.js'
+import { buildPluginsWithRegistry, buildRegistrySource } from './skill-hub-utils'
+import type { RegistryFormValues } from './skill-hub-utils'
+
+export function useSkillRegistryModal({
+  configRes,
+  mutateConfig,
+  mutateHub,
+  setRegistry
+}: {
+  configRes?: ConfigResponse
+  mutateConfig: () => Promise<unknown>
+  mutateHub: () => Promise<unknown>
+  setRegistry: (value: string) => void
+}) {
+  const { t } = useTranslation()
+  const { message } = App.useApp()
+  const [open, setOpen] = React.useState(false)
+  const [saving, setSaving] = React.useState(false)
+  const [form] = Form.useForm<RegistryFormValues>()
+
+  const save = async () => {
+    const values = await form.validateFields()
+    const id = values.id.trim()
+    const projectPlugins = configRes?.sources?.project?.plugins ?? {}
+    const existingMarketplaces = projectPlugins.marketplaces ?? {}
+    if (id === 'skills' || Object.hasOwn(existingMarketplaces, id)) {
+      void message.warning(t('knowledge.skills.registryExists'))
+      return
+    }
+
+    setSaving(true)
+    try {
+      await updateConfig(
+        'project',
+        'plugins',
+        buildPluginsWithRegistry(
+          projectPlugins,
+          id,
+          buildRegistrySource(values)
+        )
+      )
+      setRegistry(id)
+      setOpen(false)
+      form.resetFields()
+      await Promise.all([mutateConfig(), mutateHub()])
+      void message.success(t('knowledge.skills.registrySaved'))
+    } catch (error) {
+      void message.error(getApiErrorMessage(error, t('config.saveFailed')))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return {
+    form,
+    open,
+    save,
+    saving,
+    setOpen
+  }
+}

package/src/components/monaco/monaco-runtime.ts

@@ -0,0 +1,44 @@
+import { loader } from '@monaco-editor/react'
+import * as monacoApi from 'monaco-editor'
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
+import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
+import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+import TypeScriptWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+
+type MonacoWorkerFactory = (_moduleId: string, label: string) => Worker
+
+const createMonacoWorker: MonacoWorkerFactory = (_moduleId, label) => {
+  if (label === 'json') {
+    return new JsonWorker()
+  }
+
+  if (label === 'css' || label === 'scss' || label === 'less') {
+    return new CssWorker()
+  }
+
+  if (label === 'html' || label === 'handlebars' || label === 'razor') {
+    return new HtmlWorker()
+  }
+
+  if (label === 'typescript' || label === 'javascript') {
+    return new TypeScriptWorker()
+  }
+
+  return new EditorWorker()
+}
+
+const monacoRuntime = globalThis as typeof globalThis & {
+  MonacoEnvironment?: {
+    getWorker: MonacoWorkerFactory
+  }
+}
+
+monacoRuntime.MonacoEnvironment = {
+  ...monacoRuntime.MonacoEnvironment,
+  getWorker: createMonacoWorker
+}
+
+loader.config({ monaco: monacoApi })
+
+export { monacoApi }