@vibe-forge/client 0.11.2 → 1.0.0

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

package/src/components/layout/AppShell.scss

@@ -1,5 +1,6 @@
 .app-shell {
-  height: 100vh;
+  min-height: 100vh;
+  height: 100dvh;
   display: flex;
   flex-direction: row;
   gap: 0;
@@ -17,6 +18,13 @@
   min-height: 0;
 }
 
+.app-shell__content-region {
+  flex: 1;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
 .app-shell__content {
   flex: 1;
   position: relative;
@@ -24,8 +32,7 @@
   overflow: hidden;
   min-width: 0;
   min-height: 0;
-  padding: 4px 4px 4px 0;
-  transition: padding-left .3s cubic-bezier(.4, 0, .2, 1);
+  padding: 0;
   border-radius: 0;
   background-color: var(--sub-bg-color);
   box-shadow:
@@ -33,8 +40,12 @@
     0 2px 8px rgba(15, 23, 42, .04);
 }
 
-.app-shell__content.is-sidebar-collapsed {
-  padding-left: 4px;
+.app-shell__content.app-shell__content--session {
+  padding: 12px 12px 12px 0;
+}
+
+.app-shell__content.app-shell__content--session.is-sidebar-collapsed {
+  padding: 4px;
 }
 
 .app-shell__content > * {
@@ -45,6 +56,83 @@
   overflow: hidden;
 }
 
+.app-shell__content.is-flat {
+  padding: 0;
+  background-color: var(--sub-bg-color);
+  box-shadow: none;
+}
+
+.app-shell__content.is-flat > * {
+  border-radius: 0;
+}
+
+.app-shell__mobile-sidebar-backdrop {
+  position: fixed;
+  inset: 0;
+  border: none;
+  background: rgba(0, 0, 0, .28);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity .24s ease, visibility 0s linear .24s;
+  z-index: 60;
+}
+
+.app-shell__mobile-sidebar-backdrop.is-open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition-delay: 0s;
+}
+
+.app-shell__mobile-sidebar-sheet {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: min(320px, calc(100vw - 24px));
+  max-width: calc(100vw - 24px);
+  padding: max(4px, env(safe-area-inset-top)) 0
+    max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
+  transform: translateX(-100%);
+  visibility: hidden;
+  transition:
+    transform .24s cubic-bezier(.4, 0, .2, 1),
+    visibility 0s linear .24s;
+  z-index: 61;
+  pointer-events: none;
+  overscroll-behavior: contain;
+}
+
+.app-shell__mobile-sidebar-sheet.is-open {
+  transform: translateX(0);
+  visibility: visible;
+  pointer-events: auto;
+  transition-delay: 0s;
+}
+
+.app-shell__mobile-sidebar-sheet > * {
+  height: 100%;
+  overflow: hidden;
+  border-radius: 0 8px 8px 0;
+  box-shadow: 0 16px 36px rgba(15, 23, 42, .22);
+  overscroll-behavior: contain;
+}
+
+.app-shell--compact {
+  flex-direction: column;
+
+  .app-shell__content {
+    padding: max(4px, env(safe-area-inset-top)) 4px 4px;
+    box-shadow: none;
+    background-color: var(--sub-bg-color);
+  }
+
+  .app-shell__content > * {
+    border-radius: 8px;
+  }
+}
+
 .app-shell--dark {
   background:
     linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0)),
@@ -52,6 +140,18 @@
 
   .app-shell__content {
     background-color: var(--sub-bg-color);
-    box-shadow: 0 18px 48px rgba(0, 0, 0, .3), 0 2px 10px rgba(0, 0, 0, .22);
+    box-shadow: none;
+  }
+
+  .app-shell__mobile-sidebar-backdrop {
+    background: rgba(0, 0, 0, .48);
+  }
+
+  .app-shell__mobile-sidebar-sheet > * {
+    box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
+  }
+
+  .app-shell__content.is-flat {
+    box-shadow: none;
   }
 }