@vibe-forge/client 0.11.3 → 1.0.0

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

@@ -17,6 +17,7 @@ interface EntitiesTabProps {
   query: string
   tagOptions: Array<{ label: string; value: string }>
   tagFilter: string[]
+  onRefresh: () => void
   onQueryChange: (value: string) => void
   onTagFilterChange: (value: string[]) => void
   onCreate: () => void
@@ -30,6 +31,7 @@ export function EntitiesTab({
   query,
   tagOptions,
   tagFilter,
+  onRefresh,
   onQueryChange,
   onTagFilterChange,
   onCreate,
@@ -40,10 +42,14 @@ export function EntitiesTab({
   return (
     <TabContent className='knowledge-base-view__entities-tab'>
       <SectionHeader
-        title={t('knowledge.entities.title')}
-        description={t('knowledge.entities.desc')}
         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}

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

@@ -2,8 +2,8 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  padding: 12px 16px;
+  gap: 10px;
+  padding: var(--subpage-tertiary-padding);
 }
 
 .knowledge-base-view__item-row {
@@ -24,7 +24,9 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  font-weight: 600;
+  font-size: 12px;
+  line-height: 1.35;
+  font-weight: 500;
 }
 
 .knowledge-base-view__item-icon {
@@ -56,6 +58,9 @@
   gap: 4px;
   padding: 0 8px;
   height: 28px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-color);
 }
 
 .knowledge-base-view__meta-pill-icon {
@@ -74,6 +79,8 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
+  margin: 0;
+  border-radius: 4px;
 }
 
 .knowledge-base-view__tag-icon {

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

@@ -1,7 +1,7 @@
 .knowledge-base-view__filters {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: 8px;
   align-items: center;
 }
 
@@ -16,6 +16,17 @@
 }
 
 .knowledge-base-view__filter-icon {
-  font-size: 16px;
+  font-size: 14px;
   color: var(--sub-text-color);
 }
+
+.knowledge-base-view__filter-input .ant-input-affix-wrapper,
+.knowledge-base-view__filter-select .ant-select-selector {
+  height: 30px !important;
+  border-radius: 6px !important;
+  background: var(--bg-color);
+}
+
+.knowledge-base-view__filter-select .ant-select-selector {
+  align-items: center !important;
+}

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

@@ -17,6 +17,7 @@ interface FlowsTabProps {
   query: string
   tagOptions: Array<{ label: string; value: string }>
   tagFilter: string[]
+  onRefresh: () => void
   onQueryChange: (value: string) => void
   onTagFilterChange: (value: string[]) => void
   onCreate: () => void
@@ -30,6 +31,7 @@ export function FlowsTab({
   query,
   tagOptions,
   tagFilter,
+  onRefresh,
   onQueryChange,
   onTagFilterChange,
   onCreate,
@@ -40,10 +42,14 @@ export function FlowsTab({
   return (
     <TabContent className='knowledge-base-view__flows-tab'>
       <SectionHeader
-        title={t('knowledge.flows.title')}
-        description={t('knowledge.flows.desc')}
         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}

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

@@ -1,27 +1,6 @@
 .knowledge-base-view__header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.knowledge-base-view__title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.knowledge-base-view__title-icon {
-  font-size: 24px;
-  &.material-symbols-rounded {
-    font-variation-settings: 'FILL' 1;
-  }
-}
-
-.knowledge-base-view__title-text {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  font-size: 18px;
-  font-weight: 600;
+  justify-content: flex-end;
+  gap: 12px;
 }

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

@@ -13,11 +13,6 @@ export function KnowledgeBaseHeader({ onRefresh }: KnowledgeBaseHeaderProps) {
 
   return (
     <div className='knowledge-base-view__header'>
-      <div className='knowledge-base-view__title'>
-        <div className='knowledge-base-view__title-text'>
-          {t('knowledge.title')}
-        </div>
-      </div>
       <ActionButton
         icon={<span className='material-symbols-rounded'>refresh</span>}
         onClick={onRefresh}

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

@@ -1,17 +1,26 @@
 .knowledge-base-view__list {
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  overflow: hidden;
-  background: var(--bg-color);
+  background: transparent;
+}
+
+.knowledge-base-view__list .ant-list-items {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
 .knowledge-base-view__list .ant-list-item {
   padding: 0;
   align-items: stretch;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--bg-color);
+  overflow: hidden;
+  transition: border-color .2s ease, background-color .2s ease;
 }
 
-.knowledge-base-view__list .ant-list-item + .ant-list-item {
-  border-top: 1px solid var(--border-color);
+.knowledge-base-view__list .ant-list-item:hover {
+  border-color: var(--subpage-tertiary-hover-border);
+  background: var(--subpage-tertiary-hover-bg);
 }
 
 .knowledge-base-view__list-item {

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

@@ -2,4 +2,8 @@
   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/RuleItem.scss

@@ -0,0 +1,86 @@
+.knowledge-base-view__item {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: var(--subpage-tertiary-padding);
+}
+
+.knowledge-base-view__item-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.knowledge-base-view__item-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.knowledge-base-view__item-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  line-height: 1.35;
+  font-weight: 500;
+}
+
+.knowledge-base-view__item-icon {
+  font-size: 18px;
+  color: var(--sub-text-color);
+}
+
+.knowledge-base-view__item-desc {
+  font-size: 12px;
+  color: var(--sub-text-color);
+}
+
+.knowledge-base-view__item-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.knowledge-base-view__tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.knowledge-base-view__tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  border-radius: 4px;
+}
+
+.knowledge-base-view__tag-icon {
+  font-size: 12px;
+  color: var(--sub-text-color);
+}
+
+.knowledge-base-view__detail {
+  padding-top: 10px;
+  border-top: 1px solid var(--border-color);
+}
+
+.knowledge-base-view__markdown {
+  font-size: 12px;
+}
+
+.knowledge-base-view__icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  border-radius: 6px;
+}

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

@@ -1,3 +1,5 @@
+import './RuleItem.scss'
+
 import { Button, Empty, Tag, Tooltip } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'

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

@@ -14,6 +14,7 @@ interface RulesTabProps {
   filteredRules: RuleSummary[]
   isLoading: boolean
   query: string
+  onRefresh: () => void
   onQueryChange: (value: string) => void
   onCreate: () => void
   onImport: () => void
@@ -24,6 +25,7 @@ export function RulesTab({
   filteredRules,
   isLoading,
   query,
+  onRefresh,
   onQueryChange,
   onCreate,
   onImport
@@ -33,10 +35,14 @@ export function RulesTab({
   return (
     <TabContent className='knowledge-base-view__rules-tab'>
       <SectionHeader
-        title={t('knowledge.rules.title')}
-        description={t('knowledge.rules.desc')}
         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}

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

@@ -1,22 +1,7 @@
 .knowledge-base-view__section-header {
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
+  align-items: center;
+  justify-content: flex-end;
   gap: 16px;
-}
-
-.knowledge-base-view__section-info {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.knowledge-base-view__section-title {
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.knowledge-base-view__section-desc {
-  font-size: 12px;
-  color: var(--sub-text-color);
+  padding: 0;
 }

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

@@ -3,18 +3,14 @@ import './SectionHeader.scss'
 import type { ReactNode } from 'react'
 
 interface SectionHeaderProps {
-  title: string
-  description: string
   actions?: ReactNode
 }
 
-export function SectionHeader({ title, description, actions }: SectionHeaderProps) {
+export function SectionHeader({ actions }: SectionHeaderProps) {
+  if (actions == null) return null
+
   return (
     <div className='knowledge-base-view__section-header'>
-      <div className='knowledge-base-view__section-info'>
-        <div className='knowledge-base-view__section-title'>{title}</div>
-        <div className='knowledge-base-view__section-desc'>{description}</div>
-      </div>
       {actions}
     </div>
   )

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

@@ -9,20 +9,25 @@ import { SectionHeader } from './SectionHeader'
 import { TabContent } from './TabContent'
 
 interface SkillsTabProps {
+  onRefresh: () => void
   onCreate: () => void
   onImport: () => void
 }
 
-export function SkillsTab({ onCreate, onImport }: SkillsTabProps) {
+export function SkillsTab({ onCreate, onImport, onRefresh }: SkillsTabProps) {
   const { t } = useTranslation()
 
   return (
     <TabContent className='knowledge-base-view__skills-tab'>
       <SectionHeader
-        title={t('knowledge.skills.title')}
-        description={t('knowledge.skills.desc')}
         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}

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

@@ -2,8 +2,8 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  padding: 12px 16px;
+  gap: 10px;
+  padding: var(--subpage-tertiary-padding);
 }
 
 .knowledge-base-view__item-row {
@@ -24,7 +24,9 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  font-weight: 600;
+  font-size: 12px;
+  line-height: 1.35;
+  font-weight: 500;
 }
 
 .knowledge-base-view__item-icon {
@@ -56,6 +58,9 @@
   gap: 4px;
   padding: 0 8px;
   height: 28px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-color);
 }
 
 .knowledge-base-view__meta-pill-icon {
@@ -113,6 +118,8 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
+  margin: 0;
+  border-radius: 4px;
 }
 
 .knowledge-base-view__tag-icon {
@@ -121,10 +128,8 @@
 }
 
 .knowledge-base-view__detail {
-  border-radius: 10px;
-  border: 1px solid var(--border-color);
-  background: var(--code-bg);
-  padding: 12px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border-color);
 }
 
 .knowledge-base-view__markdown {
@@ -135,4 +140,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  border-radius: 6px;
 }

package/src/components/layout/@hooks/use-mobile-sidebar-modal.ts

@@ -0,0 +1,190 @@
+import { useEffect, useRef } from 'react'
+import type { RefObject } from 'react'
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])'
+].join(', ')
+
+const getFocusableElements = (container: HTMLElement) => {
+  return Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
+    .filter((element) =>
+      !element.hasAttribute('disabled') && element.getAttribute('aria-hidden') !== 'true' &&
+      element.offsetParent !== null
+    )
+}
+
+const focusElement = (element: HTMLElement) => {
+  try {
+    element.focus({ preventScroll: true })
+  } catch {
+    element.focus()
+  }
+}
+
+const focusFirstElement = (container: HTMLElement) => {
+  const focusableElements = getFocusableElements(container)
+  const firstFocusableElement = focusableElements[0]
+  if (firstFocusableElement != null) {
+    focusElement(firstFocusableElement)
+  } else {
+    focusElement(container)
+  }
+  return focusableElements
+}
+
+export function useMobileSidebarModal({
+  backgroundRefs,
+  isCompactLayout,
+  isMobileSidebarOpen,
+  setIsMobileSidebarOpen,
+  sheetRef
+}: {
+  backgroundRefs: Array<RefObject<HTMLElement | null>>
+  isCompactLayout: boolean
+  isMobileSidebarOpen: boolean
+  setIsMobileSidebarOpen: (nextOpen: boolean) => void
+  sheetRef: RefObject<HTMLDivElement | null>
+}) {
+  const restoreFocusRef = useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    if (!isCompactLayout) {
+      backgroundRefs.forEach((ref) => {
+        ref.current?.removeAttribute('inert')
+      })
+      return
+    }
+
+    backgroundRefs.forEach((ref) => {
+      const element = ref.current
+      if (element == null) {
+        return
+      }
+
+      if (isMobileSidebarOpen) {
+        element.setAttribute('inert', '')
+      } else {
+        element.removeAttribute('inert')
+      }
+    })
+
+    return () => {
+      backgroundRefs.forEach((ref) => {
+        ref.current?.removeAttribute('inert')
+      })
+    }
+  }, [backgroundRefs, isCompactLayout, isMobileSidebarOpen])
+
+  useEffect(() => {
+    if (!isCompactLayout || !isMobileSidebarOpen) {
+      return
+    }
+
+    const activeElement = document.activeElement
+    restoreFocusRef.current = activeElement instanceof HTMLElement ? activeElement : null
+
+    const focusFrame = window.requestAnimationFrame(() => {
+      const sheet = sheetRef.current
+      if (sheet == null) {
+        return
+      }
+
+      focusFirstElement(sheet)
+    })
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsMobileSidebarOpen(false)
+        return
+      }
+
+      if (event.key !== 'Tab') {
+        return
+      }
+
+      const sheet = sheetRef.current
+      if (sheet == null) {
+        return
+      }
+
+      const focusableElements = getFocusableElements(sheet)
+      if (focusableElements.length === 0) {
+        event.preventDefault()
+        focusElement(sheet)
+        return
+      }
+
+      const firstElement = focusableElements[0]
+      const lastElement = focusableElements[focusableElements.length - 1]
+      const activeTarget = document.activeElement
+
+      if (event.shiftKey) {
+        if (activeTarget === firstElement || activeTarget === sheet) {
+          event.preventDefault()
+          focusElement(lastElement)
+        }
+        return
+      }
+
+      if (activeTarget === lastElement) {
+        event.preventDefault()
+        focusElement(firstElement)
+      }
+    }
+
+    const handleFocusIn = (event: FocusEvent) => {
+      const sheet = sheetRef.current
+      const focusTarget = event.target
+      if (sheet == null || !(focusTarget instanceof HTMLElement)) {
+        return
+      }
+
+      if (sheet.contains(focusTarget)) {
+        return
+      }
+
+      focusFirstElement(sheet)
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    document.addEventListener('focusin', handleFocusIn)
+    return () => {
+      window.cancelAnimationFrame(focusFrame)
+      window.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener('focusin', handleFocusIn)
+
+      const restoreFocusTarget = restoreFocusRef.current
+      if (restoreFocusTarget != null && document.contains(restoreFocusTarget)) {
+        window.requestAnimationFrame(() => {
+          if (document.contains(restoreFocusTarget)) {
+            focusElement(restoreFocusTarget)
+          }
+        })
+      }
+      restoreFocusRef.current = null
+    }
+  }, [isCompactLayout, isMobileSidebarOpen, setIsMobileSidebarOpen, sheetRef])
+
+  useEffect(() => {
+    if (!isCompactLayout || !isMobileSidebarOpen) {
+      return
+    }
+
+    const { body, documentElement } = document
+    const previousBodyOverflow = body.style.overflow
+    const previousDocumentOverflow = documentElement.style.overflow
+
+    body.style.overflow = 'hidden'
+    documentElement.style.overflow = 'hidden'
+
+    return () => {
+      body.style.overflow = previousBodyOverflow
+      documentElement.style.overflow = previousDocumentOverflow
+    }
+  }, [isCompactLayout, isMobileSidebarOpen])
+}