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

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 {

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);