@vibe-forge/client 2.0.0 → 2.0.1

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

@@ -1,23 +1,51 @@
 import './KnowledgeBaseView.scss'
 
-import { App, Segmented } from 'antd'
+import { App, Form } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 
-import type { EntitySummary, RuleSummary, SpecSummary } from '#~/api.js'
+import { createSkill, getApiErrorMessage } from '#~/api.js'
+import type { EntitySummary, RuleSummary, SkillSummary, SpecSummary } from '#~/api.js'
 import { PageShell } from '#~/components/layout/PageShell.js'
 import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import { useQueryParams } from '#~/hooks/useQueryParams.js'
+import { CreateSkillModal } from './components/CreateSkillModal.js'
+import type { CreateSkillFormValues } from './components/CreateSkillModal.js'
 import { EntitiesTab } from './components/EntitiesTab.js'
 import { FlowsTab } from './components/FlowsTab.js'
+import { KnowledgeContentControls } from './components/KnowledgeContentControls.js'
+import { KnowledgeMobilePanel } from './components/KnowledgeMobilePanel.js'
+import { KnowledgeSidebar } from './components/KnowledgeSidebar.js'
 import { RulesTab } from './components/RulesTab.js'
 import { SkillsTab } from './components/SkillsTab.js'
+import {
+  ALL_REGISTRIES,
+  ALL_SKILL_SOURCES,
+  isSkillHubInstallFilter,
+  isSkillHubSortKey
+} from './components/skill-hub-utils.js'
+import type { SkillHubInstallFilter, SkillHubSortKey } from './components/skill-hub-utils.js'
 
 interface KnowledgeQueryParams extends Record<string, string> {
   kbTab: string
+  skillInstall: string
+  skillMarketSearch: string
+  skillProjectSearch: string
+  skillRegistry: string
+  skillSort: string
+  skillSource: string
+  skillView: string
 }
 
+const toSkillViewMode = (value: string): 'project' | 'market' => value === 'market' ? 'market' : 'project'
+const toSkillHubInstallFilter = (value: string): SkillHubInstallFilter => (
+  isSkillHubInstallFilter(value) ? value : 'all'
+)
+const toSkillHubSortKey = (value: string): SkillHubSortKey => (
+  isSkillHubSortKey(value) ? value : 'default'
+)
+
 export function KnowledgeBaseView() {
   const { t } = useTranslation()
   const { message } = App.useApp()
@@ -37,6 +65,10 @@ export function KnowledgeBaseView() {
     isLoading: isRulesLoading,
     mutate: mutateRules
   } = useSWR<{ rules: RuleSummary[] }>('/api/ai/rules')
+  const {
+    data: skillsRes,
+    mutate: mutateSkills
+  } = useSWR<{ skills: SkillSummary[] }>('/api/ai/skills')
 
   const specs = specsRes?.specs ?? []
   const entities = entitiesRes?.entities ?? []
@@ -47,13 +79,71 @@ export function KnowledgeBaseView() {
   const [entityQuery, setEntityQuery] = React.useState('')
   const [entityTagFilter, setEntityTagFilter] = React.useState<string[]>([])
   const [ruleQuery, setRuleQuery] = React.useState('')
+  const [isKnowledgeSidebarCollapsed, setKnowledgeSidebarCollapsed] = React.useState(false)
+  const [isMobileKnowledgePanelOpen, setMobileKnowledgePanelOpen] = React.useState(false)
+  const [createSkillOpen, setCreateSkillOpen] = React.useState(false)
+  const [savingSkill, setSavingSkill] = React.useState(false)
+  const [createSkillForm] = Form.useForm<CreateSkillFormValues>()
 
   const { values, update } = useQueryParams<KnowledgeQueryParams>({
-    keys: ['kbTab'],
+    keys: [
+      'kbTab',
+      'skillView',
+      'skillProjectSearch',
+      'skillMarketSearch',
+      'skillRegistry',
+      'skillSource',
+      'skillInstall',
+      'skillSort'
+    ],
     defaults: {
-      kbTab: 'skills'
+      kbTab: 'skills',
+      skillView: 'project',
+      skillProjectSearch: '',
+      skillMarketSearch: '',
+      skillRegistry: ALL_REGISTRIES,
+      skillSource: ALL_SKILL_SOURCES,
+      skillInstall: 'all',
+      skillSort: 'default'
+    },
+    omit: {
+      skillView: value => value === 'project',
+      skillProjectSearch: value => value === '',
+      skillMarketSearch: value => value === '',
+      skillRegistry: value => value === ALL_REGISTRIES,
+      skillSource: value => value === ALL_SKILL_SOURCES,
+      skillInstall: value => value === 'all',
+      skillSort: value => value === 'default'
     }
   })
+  const skillViewMode = toSkillViewMode(values.skillView)
+  const skillInstallFilter = toSkillHubInstallFilter(values.skillInstall)
+  const skillSortKey = toSkillHubSortKey(values.skillSort)
+  const skillProjectQuery = values.skillProjectSearch
+  const skillMarketQuery = values.skillMarketSearch
+  const skillRegistry = values.skillRegistry || ALL_REGISTRIES
+  const skillSourceFilter = values.skillSource || ALL_SKILL_SOURCES
+  const updateSkillProjectQuery = React.useCallback((value: string) => {
+    update({ skillProjectSearch: value })
+  }, [update])
+  const updateSkillViewMode = React.useCallback((value: 'project' | 'market') => {
+    update({ skillView: value })
+  }, [update])
+  const updateSkillMarketQuery = React.useCallback((value: string) => {
+    update({ skillMarketSearch: value })
+  }, [update])
+  const updateSkillRegistry = React.useCallback((value: string) => {
+    update({ skillRegistry: value })
+  }, [update])
+  const updateSkillSourceFilter = React.useCallback((value: string) => {
+    update({ skillSource: value })
+  }, [update])
+  const updateSkillInstallFilter = React.useCallback((value: SkillHubInstallFilter) => {
+    update({ skillInstall: value })
+  }, [update])
+  const updateSkillSortKey = React.useCallback((value: SkillHubSortKey) => {
+    update({ skillSort: value })
+  }, [update])
 
   const specTagOptions = React.useMemo(() => {
     const tags = new Set<string>()
@@ -112,7 +202,7 @@ export function KnowledgeBaseView() {
   }, [ruleQuery, rules])
 
   const handleRefresh = async () => {
-    await Promise.all([mutateSpecs(), mutateEntities(), mutateRules()])
+    await Promise.all([mutateSpecs(), mutateEntities(), mutateRules(), mutateSkills()])
     void message.success(t('knowledge.actions.refreshed'))
   }
 
@@ -133,11 +223,28 @@ export function KnowledgeBaseView() {
   }
 
   const handleCreateSkill = () => {
-    message.info(t('knowledge.skills.createHint'))
+    createSkillForm.resetFields()
+    setCreateSkillOpen(true)
   }
 
-  const handleImportSkill = () => {
-    message.info(t('knowledge.skills.importHint'))
+  const handleSaveSkill = async () => {
+    const values = await createSkillForm.validateFields()
+    setSavingSkill(true)
+    try {
+      await createSkill({
+        name: values.name,
+        description: values.description,
+        body: values.body
+      })
+      setCreateSkillOpen(false)
+      createSkillForm.resetFields()
+      await mutateSkills()
+      void message.success(t('knowledge.skills.createSuccess'))
+    } catch (error) {
+      void message.error(getApiErrorMessage(error, t('knowledge.skills.createFailed')))
+    } finally {
+      setSavingSkill(false)
+    }
   }
 
   const handleCreateRule = () => {
@@ -148,7 +255,26 @@ export function KnowledgeBaseView() {
     message.info(t('knowledge.rules.importHint'))
   }
 
+  const isCompactView = isCompactLayout || isTouchInteraction
+  const getContentControls = (onCreate: () => void) =>
+    isCompactView
+      ? (
+        <KnowledgeContentControls
+          onCreate={onCreate}
+          onExpandSidebar={() => setMobileKnowledgePanelOpen(true)}
+        />
+      )
+      : isKnowledgeSidebarCollapsed
+      ? (
+        <KnowledgeContentControls
+          onCreate={onCreate}
+          onExpandSidebar={() => setKnowledgeSidebarCollapsed(false)}
+        />
+      )
+      : undefined
+
   const skillCount = React.useMemo(() => {
+    if (skillsRes?.skills != null) return skillsRes.skills.length
     const names = new Set<string>()
     specs.forEach(spec => {
       spec.skills?.forEach(skill => names.add(skill))
@@ -157,7 +283,7 @@ export function KnowledgeBaseView() {
       entity.skills?.forEach(skill => names.add(skill))
     })
     return names.size
-  }, [entities, specs])
+  }, [entities, skillsRes?.skills, specs])
 
   const sections = [
     {
@@ -168,9 +294,22 @@ export function KnowledgeBaseView() {
       count: skillCount,
       content: (
         <SkillsTab
+          installFilter={skillInstallFilter}
+          leading={getContentControls(handleCreateSkill)}
+          marketQuery={skillMarketQuery}
+          projectQuery={skillProjectQuery}
+          registry={skillRegistry}
+          sortKey={skillSortKey}
+          sourceFilter={skillSourceFilter}
+          viewMode={skillViewMode}
           onRefresh={handleRefresh}
           onCreate={handleCreateSkill}
-          onImport={handleImportSkill}
+          onInstallFilterChange={updateSkillInstallFilter}
+          onMarketQueryChange={updateSkillMarketQuery}
+          onRegistryChange={updateSkillRegistry}
+          onSortChange={updateSkillSortKey}
+          onSourceFilterChange={updateSkillSourceFilter}
+          onViewModeChange={updateSkillViewMode}
         />
       )
     },
@@ -184,7 +323,9 @@ export function KnowledgeBaseView() {
         <EntitiesTab
           entities={entities}
           filteredEntities={filteredEntities}
+          hideContentSearch={isCompactView}
           isLoading={isEntitiesLoading}
+          leading={getContentControls(handleCreateEntity)}
           query={entityQuery}
           tagOptions={entityTagOptions}
           tagFilter={entityTagFilter}
@@ -206,7 +347,9 @@ export function KnowledgeBaseView() {
         <FlowsTab
           specs={specs}
           filteredSpecs={filteredSpecs}
+          hideContentSearch={isCompactView}
           isLoading={isSpecsLoading}
+          leading={getContentControls(handleCreateSpec)}
           query={specQuery}
           tagOptions={specTagOptions}
           tagFilter={specTagFilter}
@@ -228,7 +371,9 @@ export function KnowledgeBaseView() {
         <RulesTab
           rules={rules}
           filteredRules={filteredRules}
+          hideContentSearch={isCompactView}
           isLoading={isRulesLoading}
+          leading={getContentControls(handleCreateRule)}
           query={ruleQuery}
           onRefresh={handleRefresh}
           onQueryChange={setRuleQuery}
@@ -245,7 +390,72 @@ export function KnowledgeBaseView() {
     () => sections.find(section => section.key === activeSectionKey) ?? sections[0],
     [activeSectionKey, sections]
   )
-  const isCompactView = isCompactLayout || isTouchInteraction
+  const activeSearchValue = activeSectionKey === 'skills'
+    ? skillProjectQuery
+    : activeSectionKey === 'entities'
+    ? entityQuery
+    : activeSectionKey === 'flows'
+    ? specQuery
+    : activeSectionKey === 'rules'
+    ? ruleQuery
+    : ''
+  const activeSearchPlaceholder = activeSectionKey === 'skills'
+    ? t('knowledge.skills.searchProject')
+    : t('knowledge.filters.searchActive')
+  const showMobileSearch = !(activeSectionKey === 'skills' && skillViewMode === 'market')
+
+  React.useEffect(() => {
+    if (!isCompactView) {
+      setMobileKnowledgePanelOpen(false)
+    }
+  }, [isCompactView])
+
+  const handleActiveSearchChange = (value: string) => {
+    if (activeSectionKey === 'skills') {
+      updateSkillProjectQuery(value)
+      return
+    }
+    if (activeSectionKey === 'entities') {
+      setEntityQuery(value)
+      return
+    }
+    if (activeSectionKey === 'flows') {
+      setSpecQuery(value)
+      return
+    }
+    if (activeSectionKey === 'rules') {
+      setRuleQuery(value)
+    }
+  }
+
+  const handleSidebarCreate = () => {
+    if (isCompactView) {
+      setMobileKnowledgePanelOpen(false)
+    }
+
+    if (activeSectionKey === 'skills') {
+      handleCreateSkill()
+      return
+    }
+    if (activeSectionKey === 'entities') {
+      handleCreateEntity()
+      return
+    }
+    if (activeSectionKey === 'flows') {
+      handleCreateSpec()
+      return
+    }
+    if (activeSectionKey === 'rules') {
+      handleCreateRule()
+    }
+  }
+
+  const handleSelectSection = (key: string) => {
+    update({ kbTab: key })
+    if (isCompactView) {
+      setMobileKnowledgePanelOpen(false)
+    }
+  }
 
   React.useEffect(() => {
     if (values.kbTab !== activeSectionKey) {
@@ -260,47 +470,43 @@ export function KnowledgeBaseView() {
     >
       {isCompactView
         ? (
-          <div className='knowledge-base-view__mobile-switcher-shell'>
-            <Segmented
-              block
-              className='knowledge-base-view__mobile-switcher'
-              value={activeSectionKey}
-              onChange={(value) => update({ kbTab: value as string })}
-              options={sections.map((section) => ({
-                label: `${section.label} ${section.count}`,
-                value: section.key
-              }))}
-            />
-          </div>
+          <KnowledgeMobilePanel
+            activeKey={activeSectionKey}
+            open={isMobileKnowledgePanelOpen}
+            searchPlaceholder={activeSearchPlaceholder}
+            searchValue={activeSearchValue}
+            sections={sections}
+            showSearch={showMobileSearch}
+            onClose={() => setMobileKnowledgePanelOpen(false)}
+            onCreate={handleSidebarCreate}
+            onSearchChange={handleActiveSearchChange}
+            onSelect={handleSelectSection}
+          />
         )
         : (
-          <div className='knowledge-base-view__left'>
-            <div className='knowledge-base-view__sidebar'>
-              <div className='knowledge-base-view__nav-list'>
-                {sections.map((section) => (
-                  <button
-                    key={section.key}
-                    type='button'
-                    className={`knowledge-base-view__nav-item ${section.key === activeSectionKey ? 'is-active' : ''}`}
-                    onClick={() => update({ kbTab: section.key })}
-                  >
-                    <span className='material-symbols-rounded knowledge-base-view__nav-icon'>{section.icon}</span>
-                    <span className='knowledge-base-view__nav-main'>
-                      <span className='knowledge-base-view__nav-row'>
-                        <span className='knowledge-base-view__nav-label'>{section.label}</span>
-                        <span className='knowledge-base-view__nav-count'>{section.count}</span>
-                      </span>
-                      <span className='knowledge-base-view__nav-desc'>{section.description}</span>
-                    </span>
-                  </button>
-                ))}
-              </div>
-            </div>
-          </div>
+          <KnowledgeSidebar
+            activeKey={activeSectionKey}
+            collapsed={isKnowledgeSidebarCollapsed}
+            isCompact={isCompactView}
+            searchPlaceholder={activeSearchPlaceholder}
+            searchValue={activeSearchValue}
+            sections={sections}
+            onCreate={handleSidebarCreate}
+            onSearchChange={handleActiveSearchChange}
+            onSelect={handleSelectSection}
+            onToggleCollapsed={() => setKnowledgeSidebarCollapsed(prev => !prev)}
+          />
         )}
       <div className='knowledge-base-view__right'>
         <div className='knowledge-base-view__right-body'>{activeSection?.content}</div>
       </div>
+      <CreateSkillModal
+        open={createSkillOpen}
+        saving={savingSkill}
+        form={createSkillForm}
+        onSave={() => void handleSaveSkill()}
+        onClose={() => setCreateSkillOpen(false)}
+      />
     </PageShell>
   )
 }

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

@@ -1,9 +1,35 @@
-.knowledge-base-view__action-button {
+.ant-btn.knowledge-base-view__action-button {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
-  height: 28px;
-  padding: 0 10px;
-  border-radius: 6px;
+  height: 28px !important;
+  min-height: 28px !important;
+  padding: 0 10px !important;
+  border-radius: 6px !important;
   font-size: 12px;
+  line-height: 1;
+}
+
+.ant-btn.knowledge-base-view__action-button--icon-only {
+  width: 28px !important;
+  min-width: 28px !important;
+  max-width: 28px !important;
+  aspect-ratio: 1 / 1;
+  padding: 0 !important;
+}
+
+.knowledge-base-view__action-button--icon-only .ant-btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.knowledge-base-view__action-button--icon-only .material-symbols-rounded {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  line-height: 1;
 }

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

@@ -3,7 +3,17 @@ import './ActionButton.scss'
 import { Button } from 'antd'
 import type { ButtonProps } from 'antd'
 
-export function ActionButton({ className, ...rest }: ButtonProps) {
-  const mergedClassName = ['knowledge-base-view__action-button', className].filter(Boolean).join(' ')
-  return <Button {...rest} className={mergedClassName} />
+export function ActionButton({ className, children, icon, ...rest }: ButtonProps) {
+  const iconOnly = icon != null && (children == null || children === false)
+  const mergedClassName = [
+    'knowledge-base-view__action-button',
+    iconOnly ? 'knowledge-base-view__action-button--icon-only' : '',
+    className
+  ].filter(Boolean).join(' ')
+
+  return (
+    <Button {...rest} icon={icon} className={mergedClassName}>
+      {children}
+    </Button>
+  )
 }

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

@@ -0,0 +1,59 @@
+import { Form, Input, Modal } from 'antd'
+import type { FormInstance } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+export interface CreateSkillFormValues {
+  name: string
+  description?: string
+  body?: string
+}
+
+interface CreateSkillModalProps {
+  open: boolean
+  saving: boolean
+  form: FormInstance<CreateSkillFormValues>
+  onSave: () => void
+  onClose: () => void
+}
+
+export function CreateSkillModal({
+  open,
+  saving,
+  form,
+  onSave,
+  onClose
+}: CreateSkillModalProps) {
+  const { t } = useTranslation()
+
+  return (
+    <Modal
+      title={t('knowledge.skills.create')}
+      open={open}
+      confirmLoading={saving}
+      okText={t('config.actions.save')}
+      cancelText={t('config.actions.cancel')}
+      onOk={onSave}
+      onCancel={onClose}
+      destroyOnClose
+    >
+      <Form form={form} layout='vertical' className='knowledge-base-view__create-skill-form'>
+        <Form.Item
+          name='name'
+          label={t('knowledge.skills.skillName')}
+          rules={[{ required: true, message: t('knowledge.skills.skillNameRequired') }]}
+        >
+          <Input placeholder={t('knowledge.skills.skillNamePlaceholder')} />
+        </Form.Item>
+        <Form.Item name='description' label={t('knowledge.skills.skillDescription')}>
+          <Input placeholder={t('knowledge.skills.skillDescriptionPlaceholder')} />
+        </Form.Item>
+        <Form.Item name='body' label={t('knowledge.skills.skillBody')}>
+          <Input.TextArea
+            autoSize={{ minRows: 5, maxRows: 10 }}
+            placeholder={t('knowledge.skills.skillBodyPlaceholder')}
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+}

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

@@ -1,5 +1,6 @@
 .knowledge-base-view__empty {
-  min-height: 240px;
+  flex: 1;
+  min-height: 0;
   padding: 32px 24px;
   display: flex;
   flex-direction: column;
@@ -9,7 +10,8 @@
 }
 
 .knowledge-base-view__empty-simple {
-  min-height: 180px;
+  flex: 1;
+  min-height: 0;
   padding: 32px 24px;
   display: grid;
   place-items: center;

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

@@ -1,6 +1,7 @@
 import './EntitiesTab.scss'
 
-import { Space } from 'antd'
+import { Space, Tooltip } from 'antd'
+import type { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { EntitySummary } from '#~/api.js'
@@ -13,7 +14,9 @@ import { TabContent } from './TabContent'
 interface EntitiesTabProps {
   entities: EntitySummary[]
   filteredEntities: EntitySummary[]
+  hideContentSearch?: boolean
   isLoading: boolean
+  leading?: ReactNode
   query: string
   tagOptions: Array<{ label: string; value: string }>
   tagFilter: string[]
@@ -27,7 +30,9 @@ interface EntitiesTabProps {
 export function EntitiesTab({
   entities,
   filteredEntities,
+  hideContentSearch = false,
   isLoading,
+  leading,
   query,
   tagOptions,
   tagFilter,
@@ -44,29 +49,24 @@ export function EntitiesTab({
       <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.entities.create')}
-            </ActionButton>
+            <Tooltip title={t('knowledge.actions.refresh')}>
+              <ActionButton
+                icon={<span className='material-symbols-rounded'>refresh</span>}
+                onClick={onRefresh}
+              />
+            </Tooltip>
+            <Tooltip title={t('knowledge.actions.import')}>
+              <ActionButton
+                icon={<span className='material-symbols-rounded'>download</span>}
+                onClick={onImport}
+              />
+            </Tooltip>
           </Space>
         }
+        leading={leading}
       />
       <FilterBar
+        hideSearch={hideContentSearch}
         query={query}
         tagOptions={tagOptions}
         tagFilter={tagFilter}

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

@@ -1,5 +1,8 @@
 .knowledge-base-view__entity-list {
   display: flex;
   flex-direction: column;
+  flex: 1;
   gap: 12px;
+  min-height: 0;
+  overflow: hidden;
 }

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

@@ -3,6 +3,7 @@
   flex-wrap: wrap;
   gap: 8px;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .knowledge-base-view__filter-input {