@vibe-forge/client 2.0.0 → 2.0.1

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

@@ -8,6 +8,7 @@ interface FilterOption {
 }
 
 interface FilterBarProps {
+  hideSearch?: boolean
   query: string
   tagOptions: FilterOption[]
   tagFilter: string[]
@@ -18,6 +19,7 @@ interface FilterBarProps {
 }
 
 export function FilterBar({
+  hideSearch = false,
   query,
   tagOptions,
   tagFilter,
@@ -28,14 +30,16 @@ export function FilterBar({
 }: FilterBarProps) {
   return (
     <div className='knowledge-base-view__filters'>
-      <Input
-        className='knowledge-base-view__filter-input'
-        prefix={<span className='material-symbols-rounded knowledge-base-view__filter-icon'>search</span>}
-        placeholder={searchPlaceholder}
-        allowClear
-        value={query}
-        onChange={(e) => onQueryChange(e.target.value)}
-      />
+      {!hideSearch && (
+        <Input
+          className='knowledge-base-view__filter-input'
+          prefix={<span className='material-symbols-rounded knowledge-base-view__filter-icon'>search</span>}
+          placeholder={searchPlaceholder}
+          allowClear
+          value={query}
+          onChange={(e) => onQueryChange(e.target.value)}
+        />
+      )}
       <Select
         className='knowledge-base-view__filter-select'
         mode='multiple'

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

@@ -1,6 +1,7 @@
 import './FlowsTab.scss'
 
-import { Space } from 'antd'
+import { Space, Tooltip } from 'antd'
+import type { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { SpecSummary } from '#~/api.js'
@@ -13,7 +14,9 @@ import { TabContent } from './TabContent'
 interface FlowsTabProps {
   specs: SpecSummary[]
   filteredSpecs: SpecSummary[]
+  hideContentSearch?: boolean
   isLoading: boolean
+  leading?: ReactNode
   query: string
   tagOptions: Array<{ label: string; value: string }>
   tagFilter: string[]
@@ -27,7 +30,9 @@ interface FlowsTabProps {
 export function FlowsTab({
   specs,
   filteredSpecs,
+  hideContentSearch = false,
   isLoading,
+  leading,
   query,
   tagOptions,
   tagFilter,
@@ -44,29 +49,24 @@ export function FlowsTab({
       <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.flows.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/KnowledgeBaseHeader.tsx

@@ -1,5 +1,6 @@
 import './KnowledgeBaseHeader.scss'
 
+import { Tooltip } from 'antd'
 import { useTranslation } from 'react-i18next'
 
 import { ActionButton } from './ActionButton'
@@ -13,12 +14,12 @@ export function KnowledgeBaseHeader({ onRefresh }: KnowledgeBaseHeaderProps) {
 
   return (
     <div className='knowledge-base-view__header'>
-      <ActionButton
-        icon={<span className='material-symbols-rounded'>refresh</span>}
-        onClick={onRefresh}
-      >
-        {t('knowledge.actions.refresh')}
-      </ActionButton>
+      <Tooltip title={t('knowledge.actions.refresh')}>
+        <ActionButton
+          icon={<span className='material-symbols-rounded'>refresh</span>}
+          onClick={onRefresh}
+        />
+      </Tooltip>
     </div>
   )
 }

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

@@ -0,0 +1,35 @@
+import { Button, Tooltip } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+interface KnowledgeContentControlsProps {
+  onCreate: () => void
+  onExpandSidebar: () => void
+}
+
+export function KnowledgeContentControls({
+  onCreate,
+  onExpandSidebar
+}: KnowledgeContentControlsProps) {
+  const { t } = useTranslation()
+
+  return (
+    <div className='knowledge-base-view__content-controls'>
+      <Tooltip title={t('knowledge.actions.new')}>
+        <Button
+          className='knowledge-base-view__icon-button'
+          type='primary'
+          onClick={onCreate}
+          icon={<span className='material-symbols-rounded'>add_circle</span>}
+        />
+      </Tooltip>
+      <Tooltip title={t('common.expand')}>
+        <Button
+          className='knowledge-base-view__icon-button'
+          type='text'
+          onClick={onExpandSidebar}
+          icon={<span className='material-symbols-rounded'>dock_to_right</span>}
+        />
+      </Tooltip>
+    </div>
+  )
+}

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

@@ -1,26 +1,37 @@
 .knowledge-base-view__list {
   background: transparent;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  overflow: auto;
+  padding-bottom: 1px;
+  overscroll-behavior: contain;
 }
 
 .knowledge-base-view__list .ant-list-items {
   display: flex;
   flex-direction: column;
   gap: 6px;
+  width: 100%;
+  min-width: 0;
 }
 
 .knowledge-base-view__list .ant-list-item {
+  width: 100%;
   padding: 0;
   align-items: stretch;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--border-color) !important;
   border-radius: 8px;
   background: var(--bg-color);
   overflow: hidden;
+  box-sizing: border-box;
   transition: border-color .2s ease, background-color .2s ease;
 }
 
 .knowledge-base-view__list .ant-list-item:hover {
-  border-color: var(--subpage-tertiary-hover-border);
-  background: var(--subpage-tertiary-hover-bg);
+  border-color: var(--sub-border-color) !important;
+  background: var(--tag-hover-bg);
 }
 
 .knowledge-base-view__list-item {

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

@@ -0,0 +1,122 @@
+import { Button, Input, Tooltip } from 'antd'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { KnowledgeSectionNavItem } from './KnowledgeSidebar'
+
+interface KnowledgeMobilePanelProps {
+  activeKey: string
+  open: boolean
+  searchPlaceholder: string
+  searchValue: string
+  sections: KnowledgeSectionNavItem[]
+  showSearch: boolean
+  onClose: () => void
+  onCreate: () => void
+  onSearchChange: (value: string) => void
+  onSelect: (key: string) => void
+}
+
+export function KnowledgeMobilePanel({
+  activeKey,
+  open,
+  searchPlaceholder,
+  searchValue,
+  sections,
+  showSearch,
+  onClose,
+  onCreate,
+  onSearchChange,
+  onSelect
+}: KnowledgeMobilePanelProps) {
+  const { t } = useTranslation()
+
+  React.useEffect(() => {
+    if (!open) return undefined
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [onClose, open])
+
+  return (
+    <>
+      <button
+        type='button'
+        className={`knowledge-base-view__mobile-sidebar-backdrop ${open ? 'is-open' : ''}`}
+        aria-label={t('common.close')}
+        aria-hidden={!open}
+        tabIndex={-1}
+        onClick={onClose}
+      />
+      <div
+        className={`knowledge-base-view__mobile-sidebar-sheet ${open ? 'is-open' : ''}`}
+        role='dialog'
+        aria-modal={open ? 'true' : undefined}
+        aria-label={t('knowledge.title')}
+        aria-hidden={!open}
+        tabIndex={-1}
+      >
+        <div className='knowledge-base-view__mobile-sidebar'>
+          <div className='knowledge-base-view__sidebar-top'>
+            <Button
+              className='knowledge-base-view__new-button'
+              type='primary'
+              block
+              onClick={onCreate}
+            >
+              <span className='knowledge-base-view__new-button-content'>
+                <span className='material-symbols-rounded'>add_circle</span>
+                <span>{t('knowledge.actions.new')}</span>
+              </span>
+            </Button>
+            <Tooltip title={t('common.close')}>
+              <Button
+                className='knowledge-base-view__sidebar-control'
+                type='text'
+                aria-label={t('common.close')}
+                onClick={onClose}
+              >
+                <span className='material-symbols-rounded'>close</span>
+              </Button>
+            </Tooltip>
+          </div>
+          {showSearch && (
+            <Input
+              className='knowledge-base-view__sidebar-search'
+              prefix={<span className='material-symbols-rounded knowledge-base-view__filter-icon'>search</span>}
+              placeholder={searchPlaceholder}
+              allowClear
+              value={searchValue}
+              onChange={(event) => onSearchChange(event.target.value)}
+            />
+          )}
+          <div className='knowledge-base-view__nav-list'>
+            {sections.map((section) => (
+              <button
+                key={section.key}
+                type='button'
+                className={`knowledge-base-view__nav-item ${section.key === activeKey ? 'is-active' : ''}`}
+                onClick={() => onSelect(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>
+    </>
+  )
+}

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

@@ -0,0 +1,97 @@
+import { Button, Input, Tooltip } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+export interface KnowledgeSectionNavItem {
+  count: number
+  description: string
+  icon: string
+  key: string
+  label: string
+}
+
+interface KnowledgeSidebarProps {
+  activeKey: string
+  collapsed: boolean
+  isCompact: boolean
+  searchPlaceholder: string
+  searchValue: string
+  sections: KnowledgeSectionNavItem[]
+  onCreate: () => void
+  onSearchChange: (value: string) => void
+  onSelect: (key: string) => void
+  onToggleCollapsed: () => void
+}
+
+export function KnowledgeSidebar({
+  activeKey,
+  collapsed,
+  isCompact,
+  searchPlaceholder,
+  searchValue,
+  sections,
+  onCreate,
+  onSearchChange,
+  onSelect,
+  onToggleCollapsed
+}: KnowledgeSidebarProps) {
+  const { t } = useTranslation()
+
+  if (isCompact) return null
+
+  return (
+    <div className={`knowledge-base-view__left ${collapsed ? 'is-collapsed' : ''}`}>
+      <div className='knowledge-base-view__sidebar'>
+        <div className='knowledge-base-view__sidebar-top'>
+          <Button
+            className='knowledge-base-view__new-button'
+            type='primary'
+            block
+            onClick={onCreate}
+          >
+            <span className='knowledge-base-view__new-button-content'>
+              <span className='material-symbols-rounded'>add_circle</span>
+              <span>{t('knowledge.actions.new')}</span>
+            </span>
+          </Button>
+          <Tooltip title={t('common.collapse')}>
+            <Button
+              className='knowledge-base-view__sidebar-control'
+              type='text'
+              aria-label={t('common.collapse')}
+              onClick={onToggleCollapsed}
+            >
+              <span className='material-symbols-rounded'>left_panel_close</span>
+            </Button>
+          </Tooltip>
+        </div>
+        <Input
+          className='knowledge-base-view__sidebar-search'
+          prefix={<span className='material-symbols-rounded knowledge-base-view__filter-icon'>search</span>}
+          placeholder={searchPlaceholder}
+          allowClear
+          value={searchValue}
+          onChange={(event) => onSearchChange(event.target.value)}
+        />
+        <div className='knowledge-base-view__nav-list'>
+          {sections.map((section) => (
+            <button
+              key={section.key}
+              type='button'
+              className={`knowledge-base-view__nav-item ${section.key === activeKey ? 'is-active' : ''}`}
+              onClick={() => onSelect(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>
+  )
+}

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

@@ -1,8 +1,9 @@
 .knowledge-base-view__loading {
+  flex: 1;
+  min-height: 0;
   padding: 24px;
   display: grid;
   place-items: center;
-  min-height: 120px;
   border-radius: 8px;
   border: 1px dashed var(--border-color);
   background: var(--sub-bg-color);

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

@@ -0,0 +1,79 @@
+import { Empty, List, Spin, Tag } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import type { SkillSummary } from '#~/api.js'
+import { EmptyState } from './EmptyState'
+
+interface ProjectSkillsListProps {
+  allCount: number
+  isLoading: boolean
+  skills: SkillSummary[]
+  onCreate: () => void
+}
+
+const SKILL_SOURCE_LABEL_KEYS = {
+  project: 'knowledge.skills.sourceProject',
+  plugin: 'knowledge.skills.sourcePlugin',
+  home: 'knowledge.skills.sourceHome'
+} as const
+
+export function ProjectSkillsList({
+  allCount,
+  isLoading,
+  skills,
+  onCreate
+}: ProjectSkillsListProps) {
+  const { t } = useTranslation()
+
+  if (isLoading) {
+    return (
+      <div className='knowledge-base-view__loading'>
+        <Spin />
+      </div>
+    )
+  }
+
+  if (skills.length === 0 && allCount === 0) {
+    return (
+      <EmptyState
+        description={t('knowledge.skills.empty')}
+        actionLabel={t('knowledge.skills.create')}
+        onAction={onCreate}
+      />
+    )
+  }
+
+  if (skills.length === 0) {
+    return (
+      <div className='knowledge-base-view__empty-simple'>
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('knowledge.filters.noResults')} />
+      </div>
+    )
+  }
+
+  return (
+    <List
+      className='knowledge-base-view__list'
+      dataSource={skills}
+      renderItem={(skill) => (
+        <List.Item className='knowledge-base-view__list-item'>
+          <div className='knowledge-base-view__skill-result'>
+            <div className='knowledge-base-view__skill-result-main'>
+              <div className='knowledge-base-view__item-title'>
+                <span className='material-symbols-rounded knowledge-base-view__item-icon'>psychology</span>
+                <span>{skill.name}</span>
+                <Tag className='knowledge-base-view__skill-source'>
+                  {t(SKILL_SOURCE_LABEL_KEYS[skill.source])}
+                </Tag>
+              </div>
+              {skill.description.trim() !== '' && (
+                <div className='knowledge-base-view__item-desc'>{skill.description}</div>
+              )}
+              <div className='knowledge-base-view__skill-subtitle'>{skill.id}</div>
+            </div>
+          </div>
+        </List.Item>
+      )}
+    />
+  )
+}

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

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

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

@@ -1,6 +1,7 @@
 import './RulesTab.scss'
 
-import { Input, Space } from 'antd'
+import { Input, Space, Tooltip } from 'antd'
+import type { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { RuleSummary } from '#~/api.js'
@@ -12,7 +13,9 @@ import { TabContent } from './TabContent'
 interface RulesTabProps {
   rules: RuleSummary[]
   filteredRules: RuleSummary[]
+  hideContentSearch?: boolean
   isLoading: boolean
+  leading?: ReactNode
   query: string
   onRefresh: () => void
   onQueryChange: (value: string) => void
@@ -23,7 +26,9 @@ interface RulesTabProps {
 export function RulesTab({
   rules,
   filteredRules,
+  hideContentSearch = false,
   isLoading,
+  leading,
   query,
   onRefresh,
   onQueryChange,
@@ -37,38 +42,34 @@ export function RulesTab({
       <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.rules.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}
       />
-      <div className='knowledge-base-view__filters'>
-        <Input
-          className='knowledge-base-view__filter-input'
-          prefix={<span className='material-symbols-rounded knowledge-base-view__filter-icon'>search</span>}
-          placeholder={t('knowledge.filters.search')}
-          allowClear
-          value={query}
-          onChange={(e) => onQueryChange(e.target.value)}
-        />
-      </div>
+      {!hideContentSearch && (
+        <div className='knowledge-base-view__filters'>
+          <Input
+            className='knowledge-base-view__filter-input'
+            prefix={<span className='material-symbols-rounded knowledge-base-view__filter-icon'>search</span>}
+            placeholder={t('knowledge.filters.search')}
+            allowClear
+            value={query}
+            onChange={(e) => onQueryChange(e.target.value)}
+          />
+        </div>
+      )}
       <RuleList
         isLoading={isLoading}
         rules={rules}

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

@@ -1,7 +1,19 @@
 .knowledge-base-view__section-header {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
   gap: 16px;
+  flex-shrink: 0;
   padding: 0;
 }
+
+.knowledge-base-view__section-leading,
+.knowledge-base-view__section-actions {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.knowledge-base-view__section-actions {
+  justify-content: flex-end;
+}

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

@@ -4,14 +4,16 @@ import type { ReactNode } from 'react'
 
 interface SectionHeaderProps {
   actions?: ReactNode
+  leading?: ReactNode
 }
 
-export function SectionHeader({ actions }: SectionHeaderProps) {
-  if (actions == null) return null
+export function SectionHeader({ actions, leading }: SectionHeaderProps) {
+  if (actions == null && leading == null) return null
 
   return (
     <div className='knowledge-base-view__section-header'>
-      {actions}
+      <div className='knowledge-base-view__section-leading'>{leading}</div>
+      <div className='knowledge-base-view__section-actions'>{actions}</div>
     </div>
   )
 }