@vibe-forge/client 0.11.2 → 1.0.0

package/src/components/dock-panel/DockPanel.tsx

@@ -6,22 +6,17 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 
 const DEFAULT_PANEL_HEIGHT = 240
 
-const clampPanelHeight = (height: number, minHeight: number, maxHeight: number) => {
-  return Math.min(Math.max(height, minHeight), Math.max(minHeight, maxHeight))
-}
-
-const shouldIgnoreResizePointerDown = (target: HTMLElement | null) => {
-  if (target == null) {
-    return false
-  }
+const clampPanelHeight = (height: number, minHeight: number, maxHeight: number) =>
+  Math.min(Math.max(height, minHeight), Math.max(minHeight, maxHeight))
 
-  return target.closest(
+const shouldIgnoreResizePointerDown = (target: HTMLElement | null) =>
+  target?.closest(
     'button, a, input, textarea, select, option, [role="button"], [data-dock-panel-no-resize="true"]'
   ) != null
-}
 
 export function DockPanel({
   enterMotion = 'slide-up',
+  allowResize = true,
   children,
   className,
   closeLabel,
@@ -38,6 +33,7 @@ export function DockPanel({
   actions
 }: {
   enterMotion?: 'none' | 'slide-up'
+  allowResize?: boolean
   actions?: ReactNode
   children: ReactNode
   className?: string
@@ -75,7 +71,7 @@ export function DockPanel({
   }, [])
 
   useEffect(() => {
-    if (!isResizing) {
+    if (!allowResize || !isResizing) {
       return
     }
 
@@ -110,7 +106,7 @@ export function DockPanel({
       window.removeEventListener('pointerup', stopResizing)
       window.removeEventListener('pointercancel', stopResizing)
     }
-  }, [isResizing, minHeight])
+  }, [allowResize, isResizing, minHeight])
 
   const handleResizePointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
     if (shouldIgnoreResizePointerDown(event.target as HTMLElement | null)) {
@@ -148,13 +144,13 @@ export function DockPanel({
       ref={panelRef}
       className={`dock-panel ${isOpen && enterMotion === 'slide-up' ? 'is-entering-slide-up' : ''} ${
         isOpen ? 'is-open' : 'is-closing'
-      } ${className ?? ''} ${isResizing ? 'is-resizing' : ''}`}
+      } ${className ?? ''} ${isResizing ? 'is-resizing' : ''} ${allowResize ? 'is-resizable' : 'is-static'}`}
       style={panelStyle as CSSProperties}
     >
       <div
-        className='dock-panel__resize-handle'
-        title={resizeLabel}
-        onPointerDown={handleResizePointerDown}
+        className={`dock-panel__resize-handle ${allowResize ? 'is-resizable' : 'is-static'}`}
+        title={allowResize ? resizeLabel : undefined}
+        onPointerDown={allowResize ? handleResizePointerDown : undefined}
       >
         <div className='dock-panel__header-main'>
           <span className='dock-panel__title'>{title}</span>

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

@@ -1,19 +1,193 @@
 .knowledge-base-view {
-  height: 100%;
+  color: var(--text-color);
+}
+
+.knowledge-base-view__mobile-switcher-shell {
+  display: none;
+}
+
+.knowledge-base-view__body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: row;
+  overflow: hidden;
+}
+
+.knowledge-base-view__left {
+  width: var(--subpage-secondary-panel-width);
+  min-width: var(--subpage-secondary-panel-width);
+  max-width: var(--subpage-secondary-panel-width);
+  display: flex;
+  flex-direction: column;
+  background: var(--sub-bg-color);
+}
+
+.knowledge-base-view__sidebar {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.knowledge-base-view__nav-list {
   display: flex;
   flex-direction: column;
-  padding: 24px;
+  gap: 6px;
+  padding: 10px 12px 12px;
+  overflow: auto;
+}
+
+.knowledge-base-view__nav-item {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
   background: var(--bg-color);
   color: var(--text-color);
+  text-align: left;
+  cursor: pointer;
+  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
+}
+
+.knowledge-base-view__nav-item:hover {
+  border-color: var(--sidebar-hover-bg, #e5e5e5);
+  background: var(--sidebar-hover-bg, #e5e5e5);
+}
+
+.knowledge-base-view__nav-item.is-active {
+  border-color: var(--primary-color);
+  background: var(--primary-soft-bg);
+  color: var(--sidebar-active-text, var(--primary-color));
+}
+
+.knowledge-base-view__nav-icon {
+  font-size: 18px;
+  color: var(--sub-text-color);
+  flex-shrink: 0;
+}
+
+.knowledge-base-view__nav-item.is-active .knowledge-base-view__nav-icon {
+  color: inherit;
+  font-variation-settings: 'FILL' 1;
+}
+
+.knowledge-base-view__nav-main {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  flex: 1;
+}
+
+.knowledge-base-view__nav-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.knowledge-base-view__nav-label {
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+  line-height: 1.35;
+  font-weight: 500;
+}
+
+.knowledge-base-view__nav-count {
+  flex-shrink: 0;
+  font-size: 10px;
+  line-height: 1;
+  color: var(--sub-text-color);
+}
+
+.knowledge-base-view__nav-item.is-active .knowledge-base-view__nav-count {
+  color: inherit;
+}
+
+.knowledge-base-view__nav-desc {
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--sub-text-color);
+}
+
+.knowledge-base-view__nav-item.is-active .knowledge-base-view__nav-desc {
+  color: inherit;
+  opacity: .88;
+}
+
+.knowledge-base-view__right {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
   overflow: hidden;
+  margin: var(--subpage-content-card-gap);
+  margin-left: 0;
+  border-radius: var(--subpage-content-card-radius);
+  background: var(--subpage-content-card-bg);
+  display: flex;
+  flex-direction: column;
 }
 
-.knowledge-base-view__tabs {
+.knowledge-base-view__right-body {
   flex: 1;
   min-height: 0;
+  overflow: hidden;
 }
 
-.knowledge-base-view__tabs > .ant-tabs-nav {
-  padding: 0 24px;
-  margin: 0;
+@media (max-width: 1100px) {
+  .knowledge-base-view__body {
+    flex-direction: column;
+  }
+
+  .knowledge-base-view__left {
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+  }
+
+  .knowledge-base-view__right {
+    margin-top: 0;
+    margin-left: var(--subpage-content-card-gap);
+  }
+
+  .knowledge-base-view__nav-list {
+    padding-bottom: 10px;
+  }
+}
+
+@media (max-width: 960px) {
+  .knowledge-base-view--compact {
+    .knowledge-base-view__mobile-switcher-shell {
+      display: block;
+      padding: 12px;
+      padding-bottom: 0;
+    }
+
+    .knowledge-base-view__mobile-switcher {
+      width: 100%;
+
+      .ant-segmented-group {
+        gap: 4px;
+      }
+
+      .ant-segmented-item {
+        min-height: 32px;
+        font-size: 12px;
+      }
+    }
+
+    .knowledge-base-view__right {
+      margin: 12px;
+      margin-top: 12px;
+    }
+  }
+
+  .knowledge-base-view__nav-item {
+    padding: 8px 10px;
+  }
 }

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

@@ -1,18 +1,18 @@
 import './KnowledgeBaseView.scss'
 
-import { App, Tabs } from 'antd'
+import { App, Segmented } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 
 import type { EntitySummary, RuleSummary, 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 { EntitiesTab } from './components/EntitiesTab.js'
 import { FlowsTab } from './components/FlowsTab.js'
-import { KnowledgeBaseHeader } from './components/KnowledgeBaseHeader.js'
 import { RulesTab } from './components/RulesTab.js'
 import { SkillsTab } from './components/SkillsTab.js'
-import { TabLabel } from './components/TabLabel.js'
 
 interface KnowledgeQueryParams extends Record<string, string> {
   kbTab: string
@@ -21,6 +21,7 @@ interface KnowledgeQueryParams extends Record<string, string> {
 export function KnowledgeBaseView() {
   const { t } = useTranslation()
   const { message } = App.useApp()
+  const { isCompactLayout, isTouchInteraction } = useResponsiveLayout()
   const {
     data: specsRes,
     isLoading: isSpecsLoading,
@@ -147,12 +148,27 @@ export function KnowledgeBaseView() {
     message.info(t('knowledge.rules.importHint'))
   }
 
-  const tabs = [
+  const skillCount = React.useMemo(() => {
+    const names = new Set<string>()
+    specs.forEach(spec => {
+      spec.skills?.forEach(skill => names.add(skill))
+    })
+    entities.forEach(entity => {
+      entity.skills?.forEach(skill => names.add(skill))
+    })
+    return names.size
+  }, [entities, specs])
+
+  const sections = [
     {
       key: 'skills',
-      label: <TabLabel icon='psychology' label={t('knowledge.tabs.skills')} />,
-      children: (
+      icon: 'psychology',
+      label: t('knowledge.tabs.skills'),
+      description: t('knowledge.skills.desc'),
+      count: skillCount,
+      content: (
         <SkillsTab
+          onRefresh={handleRefresh}
           onCreate={handleCreateSkill}
           onImport={handleImportSkill}
         />
@@ -160,8 +176,11 @@ export function KnowledgeBaseView() {
     },
     {
       key: 'entities',
-      label: <TabLabel icon='group_work' label={t('knowledge.tabs.entities')} />,
-      children: (
+      icon: 'group_work',
+      label: t('knowledge.tabs.entities'),
+      description: t('knowledge.entities.desc'),
+      count: entities.length,
+      content: (
         <EntitiesTab
           entities={entities}
           filteredEntities={filteredEntities}
@@ -169,6 +188,7 @@ export function KnowledgeBaseView() {
           query={entityQuery}
           tagOptions={entityTagOptions}
           tagFilter={entityTagFilter}
+          onRefresh={handleRefresh}
           onQueryChange={setEntityQuery}
           onTagFilterChange={setEntityTagFilter}
           onCreate={handleCreateEntity}
@@ -178,8 +198,11 @@ export function KnowledgeBaseView() {
     },
     {
       key: 'flows',
-      label: <TabLabel icon='account_tree' label={t('knowledge.tabs.flows')} />,
-      children: (
+      icon: 'account_tree',
+      label: t('knowledge.tabs.flows'),
+      description: t('knowledge.flows.desc'),
+      count: specs.length,
+      content: (
         <FlowsTab
           specs={specs}
           filteredSpecs={filteredSpecs}
@@ -187,6 +210,7 @@ export function KnowledgeBaseView() {
           query={specQuery}
           tagOptions={specTagOptions}
           tagFilter={specTagFilter}
+          onRefresh={handleRefresh}
           onQueryChange={setSpecQuery}
           onTagFilterChange={setSpecTagFilter}
           onCreate={handleCreateSpec}
@@ -196,13 +220,17 @@ export function KnowledgeBaseView() {
     },
     {
       key: 'rules',
-      label: <TabLabel icon='gavel' label={t('knowledge.tabs.rules')} />,
-      children: (
+      icon: 'gavel',
+      label: t('knowledge.tabs.rules'),
+      description: t('knowledge.rules.desc'),
+      count: rules.length,
+      content: (
         <RulesTab
           rules={rules}
           filteredRules={filteredRules}
           isLoading={isRulesLoading}
           query={ruleQuery}
+          onRefresh={handleRefresh}
           onQueryChange={setRuleQuery}
           onCreate={handleCreateRule}
           onImport={handleImportRule}
@@ -211,24 +239,68 @@ export function KnowledgeBaseView() {
     }
   ]
 
-  const tabKeys = React.useMemo(() => tabs.map(tab => tab.key), [tabs])
-  const activeTab = tabKeys.includes(values.kbTab) ? values.kbTab : tabKeys[0]
+  const sectionKeys = React.useMemo(() => sections.map(section => section.key), [sections])
+  const activeSectionKey = sectionKeys.includes(values.kbTab) ? values.kbTab : sectionKeys[0]
+  const activeSection = React.useMemo(
+    () => sections.find(section => section.key === activeSectionKey) ?? sections[0],
+    [activeSectionKey, sections]
+  )
+  const isCompactView = isCompactLayout || isTouchInteraction
 
   React.useEffect(() => {
-    if (values.kbTab !== activeTab) {
-      update({ kbTab: activeTab })
+    if (values.kbTab !== activeSectionKey) {
+      update({ kbTab: activeSectionKey })
     }
-  }, [activeTab, update, values.kbTab])
+  }, [activeSectionKey, update, values.kbTab])
 
   return (
-    <div className='knowledge-base-view'>
-      <KnowledgeBaseHeader onRefresh={handleRefresh} />
-      <Tabs
-        className='knowledge-base-view__tabs'
-        items={tabs}
-        activeKey={activeTab}
-        onChange={(key) => update({ kbTab: key })}
-      />
-    </div>
+    <PageShell
+      className={`knowledge-base-view ${isCompactView ? 'knowledge-base-view--compact' : ''}`}
+      bodyClassName='knowledge-base-view__body'
+    >
+      {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>
+        )
+        : (
+          <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>
+        )}
+      <div className='knowledge-base-view__right'>
+        <div className='knowledge-base-view__right-body'>{activeSection?.content}</div>
+      </div>
+    </PageShell>
   )
 }

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

@@ -2,4 +2,8 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 6px;
+  font-size: 12px;
 }

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

@@ -1,19 +1,16 @@
 .knowledge-base-view__empty {
-  padding: 24px;
+  min-height: 240px;
+  padding: 32px 24px;
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   gap: 12px;
-  border-radius: 12px;
-  border: 1px dashed var(--border-color);
-  background: var(--code-bg);
 }
 
 .knowledge-base-view__empty-simple {
-  padding: 24px;
+  min-height: 180px;
+  padding: 32px 24px;
   display: grid;
   place-items: center;
-  border-radius: 12px;
-  border: 1px dashed var(--border-color);
-  background: var(--code-bg);
 }

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}