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

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

@@ -1,429 +0,0 @@
-.knowledge-base-view__skills-tab {
-  display: flex;
-  flex-direction: column;
-  gap: var(--subpage-tertiary-gap);
-}
-
-.knowledge-base-view__skill-view-switch {
-  height: 36px;
-  padding: 4px;
-  border-radius: 6px;
-  flex-shrink: 0;
-}
-
-.knowledge-base-view__skill-view-switch .ant-segmented-group {
-  height: 28px;
-  align-items: center;
-  gap: 4px;
-}
-
-.knowledge-base-view__skill-view-switch .ant-segmented-item,
-.knowledge-base-view__skill-view-switch .ant-segmented-thumb {
-  width: 28px !important;
-  min-width: 28px !important;
-  height: 28px !important;
-  min-height: 28px !important;
-  border-radius: 6px !important;
-}
-
-.knowledge-base-view__skill-view-switch .ant-segmented-item {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 !important;
-}
-
-.knowledge-base-view__skill-view-switch .ant-segmented-item-label {
-  width: 28px;
-  min-width: 28px;
-  height: 28px;
-  min-height: 28px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 !important;
-  line-height: 1;
-}
-
-.knowledge-base-view__skill-section-leading {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.knowledge-base-view__switch-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  font-size: 18px;
-  line-height: 1;
-}
-
-.knowledge-base-view__hidden-file-input {
-  display: none;
-}
-
-.knowledge-base-view__skill-market-search-row {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  min-width: 0;
-}
-
-.knowledge-base-view__skill-market-search {
-  min-width: 0;
-}
-
-.knowledge-base-view__search-toggle-button {
-  width: 20px;
-  height: 20px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  margin-inline-end: -1px;
-  border: none;
-  background: transparent;
-  color: var(--sub-text-color);
-  border-radius: 4px;
-  cursor: pointer;
-  position: relative;
-  transition: color .2s ease, background-color .2s ease;
-}
-
-.knowledge-base-view__search-toggle-button.is-open {
-  color: var(--primary-color);
-}
-
-.knowledge-base-view__search-toggle-button.has-active-filters::after {
-  content: '';
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  width: 6px;
-  height: 6px;
-  border-radius: 999px;
-  background-color: #dc2626;
-  box-shadow: 0 0 0 1px var(--bg-color);
-}
-
-.knowledge-base-view__search-toggle-button:hover {
-  background-color: rgba(37, 99, 235, .08);
-  color: var(--primary-color);
-}
-
-.knowledge-base-view__search-chevron {
-  font-size: 14px;
-  line-height: 1;
-  transition: transform .2s ease, color .2s ease;
-}
-
-.knowledge-base-view__search-toggle-button.is-open
-  .knowledge-base-view__search-chevron {
-  transform: rotate(180deg);
-}
-
-.knowledge-base-view__skill-market-actions {
-  display: none;
-  flex-shrink: 0;
-  overflow: hidden;
-  max-height: 0;
-  opacity: 0;
-  transform: translateY(-6px);
-  pointer-events: none;
-  transition:
-    max-height .24s cubic-bezier(.4, 0, .2, 1),
-    opacity .18s ease,
-    transform .18s ease,
-    margin-top .18s ease;
-}
-
-.knowledge-base-view__skill-market-actions.is-open {
-  display: block;
-  max-height: 128px;
-  opacity: 1;
-  transform: translateY(0);
-  pointer-events: auto;
-}
-
-.knowledge-base-view__skill-market-actions-inner {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 6px;
-  min-width: 0;
-}
-
-.knowledge-base-view__skill-toolbar-field {
-  position: relative;
-  flex: 1 1 150px;
-  min-width: 0;
-}
-
-.knowledge-base-view__skill-toolbar-field--wide {
-  flex-basis: 220px;
-}
-
-.knowledge-base-view__toolbar-filter-icon {
-  position: absolute;
-  top: 50%;
-  left: 8px;
-  transform: translateY(-50%);
-  font-size: 14px;
-  line-height: 1;
-  color: var(--sub-text-color);
-  pointer-events: none;
-  z-index: 1;
-}
-
-.knowledge-base-view__skill-toolbar-select {
-  width: 100%;
-}
-
-.knowledge-base-view__skill-toolbar-select .ant-select-selector {
-  height: 30px !important;
-  padding-left: 28px !important;
-  border-radius: 6px !important;
-  background: var(--bg-color) !important;
-  align-items: center !important;
-}
-
-.knowledge-base-view__select-chevron {
-  font-size: 14px;
-  line-height: 1;
-  color: var(--sub-text-color);
-  transition: transform .2s ease, color .2s ease;
-}
-
-.knowledge-base-view__skill-toolbar-select.ant-select-open
-  .knowledge-base-view__select-chevron {
-  transform: rotate(180deg);
-  color: var(--primary-color);
-}
-
-.knowledge-base-view__skill-registry-errors {
-  display: flex;
-  flex-wrap: wrap;
-  flex-shrink: 0;
-  gap: 6px;
-}
-
-.knowledge-base-view__skill-registry-error {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  margin: 0;
-  border-radius: 6px;
-}
-
-.knowledge-base-view__skill-results {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.knowledge-base-view__skill-results-scroll {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  overscroll-behavior: contain;
-  padding-bottom: 1px;
-}
-
-.knowledge-base-view__skill-market-list {
-  flex: none;
-  min-height: auto;
-  overflow: visible;
-  padding-bottom: 0;
-}
-
-.knowledge-base-view__skill-load-more {
-  min-height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.knowledge-base-view__skill-load-more-button {
-  width: 28px !important;
-  min-width: 28px !important;
-  height: 28px !important;
-  min-height: 28px !important;
-  padding: 0 !important;
-  border-radius: 6px !important;
-  color: var(--sub-text-color);
-}
-
-.knowledge-base-view__skill-load-more-button .material-symbols-rounded {
-  font-size: 18px;
-  line-height: 1;
-}
-
-.knowledge-base-view__skill-capability,
-.knowledge-base-view__skill-source,
-.knowledge-base-view__skill-status {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  margin: 0;
-  border-radius: 6px;
-}
-
-.knowledge-base-view__skill-result {
-  width: 100%;
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  padding: var(--subpage-tertiary-padding);
-}
-
-.knowledge-base-view__skill-result-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-}
-
-.knowledge-base-view__skill-result-main {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.knowledge-base-view__skill-subtitle {
-  font-size: 11px;
-  line-height: 1.35;
-  color: var(--sub-text-color);
-}
-
-.knowledge-base-view__skill-capabilities {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 2px;
-}
-
-.knowledge-base-view__registry-form {
-  padding-top: 8px;
-}
-
-.knowledge-base-view__skills-cli-form {
-  padding-top: 8px;
-}
-
-.knowledge-base-view__skills-cli-search-row {
-  display: flex;
-  align-items: flex-end;
-  gap: 8px;
-}
-
-.knowledge-base-view__skills-cli-search-field {
-  flex: 1;
-  min-width: 0;
-  margin-bottom: 0;
-}
-
-.knowledge-base-view__skills-cli-search-field .ant-form-item-control {
-  min-width: 0;
-}
-
-.knowledge-base-view__skills-cli-search-button {
-  flex-shrink: 0;
-}
-
-.knowledge-base-view__skills-cli-placeholder,
-.knowledge-base-view__skills-cli-error {
-  padding: 12px 0 4px;
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.knowledge-base-view__skills-cli-placeholder {
-  color: var(--sub-text-color);
-}
-
-.knowledge-base-view__skills-cli-error {
-  color: var(--error-color, #dc2626);
-}
-
-.knowledge-base-view__skills-cli-modal-results {
-  height: 360px;
-  margin-top: 12px;
-  display: flex;
-  min-height: 0;
-}
-
-@media (max-width: 640px) {
-  .knowledge-base-view--compact .knowledge-base-view__skill-view-switch {
-    height: 44px;
-  }
-
-  .knowledge-base-view--compact
-    .knowledge-base-view__skill-view-switch
-    .ant-segmented-group {
-    height: 36px;
-  }
-
-  .knowledge-base-view--compact
-    .knowledge-base-view__skill-view-switch
-    .ant-segmented-item,
-  .knowledge-base-view--compact
-    .knowledge-base-view__skill-view-switch
-    .ant-segmented-thumb {
-    width: 36px !important;
-    min-width: 36px !important;
-    height: 36px !important;
-    min-height: 36px !important;
-    border-radius: 8px !important;
-  }
-
-  .knowledge-base-view--compact
-    .knowledge-base-view__skill-view-switch
-    .ant-segmented-item-label {
-    width: 36px;
-    min-width: 36px;
-    height: 36px;
-    min-height: 36px;
-  }
-
-  .knowledge-base-view__skill-toolbar-select,
-  .knowledge-base-view__skill-market-search-row
-    .knowledge-base-view__filter-input {
-    min-width: 0;
-    flex: 1 1 100%;
-  }
-
-  .knowledge-base-view__skill-result {
-    gap: 10px;
-  }
-
-  .knowledge-base-view__skills-cli-search-row {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .knowledge-base-view__skills-cli-search-button {
-    width: 100%;
-  }
-}
-
-@media (min-width: 1280px) {
-  .knowledge-base-view__skill-market-list .ant-list-items {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: var(--subpage-tertiary-gap);
-    align-items: stretch;
-  }
-
-  .knowledge-base-view__skill-market-list .ant-list-item,
-  .knowledge-base-view__skill-market-list .knowledge-base-view__skill-result {
-    height: 100%;
-  }
-}

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

@@ -1,185 +0,0 @@
-import './SkillsTab.scss'
-
-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 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 {
-  leading?: ReactNode
-  installFilter: SkillHubInstallFilter
-  marketQuery: string
-  projectQuery: string
-  registry: string
-  sortKey: SkillHubSortKey
-  sourceFilter: string
-  viewMode: 'project' | 'market'
-  onRefresh: () => void | Promise<void>
-  onCreate: () => 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({
-  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'>
-      <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)}
-      />
-      <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

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