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

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

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

@@ -0,0 +1,154 @@
+import { Button, Empty, Form, Input, Modal, Spin } from 'antd'
+import type { FormInstance } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import type { SkillHubItem } from '#~/api.js'
+import { SkillMarketResults } from './SkillMarketResults'
+
+export interface SkillsCliFormValues {
+  source: string
+  query?: string
+  registry?: string
+}
+
+interface SkillsCliModalProps {
+  canLoadMore: boolean
+  form: FormInstance<SkillsCliFormValues>
+  hasSearched: boolean
+  installingId: string | null
+  items: SkillHubItem[]
+  loadingMore: boolean
+  open: boolean
+  resetKey: string
+  searchError?: string | null
+  searching: boolean
+  onClose: () => void
+  onInstall: (item: SkillHubItem) => void
+  onLoadMore: () => void
+  onSearch: () => void | Promise<void>
+}
+
+export function SkillsCliModal({
+  canLoadMore,
+  form,
+  hasSearched,
+  installingId,
+  items,
+  loadingMore,
+  open,
+  resetKey,
+  searchError,
+  searching,
+  onClose,
+  onInstall,
+  onLoadMore,
+  onSearch
+}: SkillsCliModalProps) {
+  const { t } = useTranslation()
+
+  return (
+    <Modal
+      title={t('knowledge.skills.installViaSkillsCli')}
+      open={open}
+      footer={null}
+      onCancel={onClose}
+      destroyOnClose
+      width={760}
+    >
+      <Form
+        form={form}
+        layout='vertical'
+        initialValues={{ source: '', query: '', registry: '' }}
+        className='knowledge-base-view__skills-cli-form'
+      >
+        <Form.Item
+          name='source'
+          label={t('knowledge.skills.skillsCliSource')}
+          rules={[{ required: true, message: t('knowledge.skills.skillsCliSourceRequired') }]}
+        >
+          <Input
+            placeholder={t('knowledge.skills.skillsCliSourcePlaceholder')}
+            onPressEnter={(event) => {
+              event.preventDefault()
+              void onSearch()
+            }}
+          />
+        </Form.Item>
+        <Form.Item
+          name='registry'
+          label={t('knowledge.skills.skillsCliRegistry')}
+        >
+          <Input
+            placeholder={t('knowledge.skills.skillsCliRegistryPlaceholder')}
+            onPressEnter={(event) => {
+              event.preventDefault()
+              void onSearch()
+            }}
+          />
+        </Form.Item>
+        <div className='knowledge-base-view__skills-cli-search-row'>
+          <Form.Item
+            name='query'
+            label={t('knowledge.skills.skillsCliQuery')}
+            className='knowledge-base-view__skills-cli-search-field'
+          >
+            <Input
+              allowClear
+              placeholder={t('knowledge.skills.skillsCliQueryPlaceholder')}
+              onPressEnter={(event) => {
+                event.preventDefault()
+                void onSearch()
+              }}
+            />
+          </Form.Item>
+          <Button
+            type='primary'
+            className='knowledge-base-view__skills-cli-search-button'
+            loading={searching && !loadingMore}
+            onClick={() => void onSearch()}
+            icon={<span className='material-symbols-rounded'>search</span>}
+          >
+            {t('knowledge.skills.skillsCliSearch')}
+          </Button>
+        </div>
+      </Form>
+
+      {searching && items.length === 0 && (
+        <div className='knowledge-base-view__loading'>
+          <Spin />
+        </div>
+      )}
+      {!searching && !hasSearched && (
+        <div className='knowledge-base-view__skills-cli-placeholder'>
+          {t('knowledge.skills.skillsCliHint')}
+        </div>
+      )}
+      {!searching && searchError != null && searchError.trim() !== '' && (
+        <div className='knowledge-base-view__skills-cli-error'>
+          {searchError}
+        </div>
+      )}
+      {!searching && hasSearched && searchError == null && items.length === 0 && (
+        <div className='knowledge-base-view__empty-simple'>
+          <Empty
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+            description={t('knowledge.skills.skillsCliEmpty')}
+          />
+        </div>
+      )}
+      {items.length > 0 && (
+        <div className='knowledge-base-view__skills-cli-modal-results'>
+          <SkillMarketResults
+            canLoadMore={canLoadMore}
+            hubItems={items}
+            installingId={installingId}
+            loadingMore={loadingMore}
+            resetKey={resetKey}
+            onInstall={onInstall}
+            onLoadMore={onLoadMore}
+          />
+        </div>
+      )}
+    </Modal>
+  )
+}

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

@@ -1,5 +1,429 @@
 .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%;
+  }
 }