@vibe-forge/client 0.11.3 → 1.0.0

package/src/components/config/ConfigSectionPanel.tsx

@@ -21,7 +21,7 @@ export function ConfigSectionPanel({
   className
 }: {
   sectionKey: string
-  title: ReactNode
+  title?: ReactNode
   icon?: ReactNode
   fields?: FieldSpec[]
   value: unknown
@@ -34,19 +34,26 @@ export function ConfigSectionPanel({
   className?: string
 }) {
   const wrapClassName = ['config-view__editor-wrap', className].filter(Boolean).join(' ')
-  const hasHeader = title != null || icon != null || headerExtra != null
+  const hasHeading = title != null || icon != null
+  const hasHeader = hasHeading || headerExtra != null
+  const headerClassName = [
+    'config-view__section-header',
+    !hasHeading ? 'config-view__section-header--actions-only' : ''
+  ].filter(Boolean).join(' ')
   return (
     <div className={wrapClassName}>
       {hasHeader && (
-        <div className='config-view__section-header'>
-          <div className='config-view__section-title'>
-            {icon != null && (
-              <span className='material-symbols-rounded config-view__section-icon'>
-                {icon}
-              </span>
-            )}
-            <span>{title}</span>
-          </div>
+        <div className={headerClassName}>
+          {hasHeading && (
+            <div className='config-view__section-title'>
+              {icon != null && (
+                <span className='material-symbols-rounded config-view__section-icon'>
+                  {icon}
+                </span>
+              )}
+              <span>{title}</span>
+            </div>
+          )}
           {headerExtra}
         </div>
       )}

package/src/components/config/configSchema.ts

@@ -269,6 +269,7 @@ export const configSchema: Record<string, FieldSpec[]> = {
         { value: 'programmatic', label: 'config.options.conversation.programmatic' }
       ]
     },
+    { path: ['createSessionWorktree'], type: 'boolean', defaultValue: true, icon: 'account_tree' },
     { path: ['customInstructions'], type: 'multiline', defaultValue: '', icon: 'description' }
   ],
   models: [

package/src/components/config/record-editors/RecordEditors.scss

@@ -1,14 +1,23 @@
 .config-view__record-list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
 }
 
 .config-view__record-card {
-  border-radius: 12px;
+  padding: var(--subpage-tertiary-padding);
+  border: var(--subpage-tertiary-border);
+  border-radius: var(--subpage-tertiary-radius);
+  background: var(--subpage-tertiary-bg);
   display: flex;
   flex-direction: column;
   gap: 10px;
+  transition: border-color .2s ease, background-color .2s ease;
+}
+
+.config-view__record-card:hover {
+  border-color: var(--subpage-tertiary-hover-border);
+  background: var(--subpage-tertiary-hover-bg);
 }
 
 .config-view__record-title {
@@ -62,19 +71,27 @@
 .config-view__record-fields {
   display: flex;
   flex-direction: column;
-  border-radius: 10px;
+  gap: 10px;
 }
 
 .config-view__record-row {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 8px;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
 }
 
 .config-view__record-key {
   font-size: 12px;
   color: var(--sub-text-color);
-  min-width: 140px;
+  min-width: 132px;
+  padding-top: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .config-view__record-add {
@@ -88,21 +105,37 @@
   align-items: center;
   gap: 8px;
   flex: 1;
+  padding: 10px 12px;
+  border: 1px dashed var(--border-color);
+  border-radius: 8px;
+  background: var(--sub-bg-color);
 }
 
 .config-view__record-add-inputs .ant-input,
-.config-view__record-add-inputs .ant-input-affix-wrapper {
+.config-view__record-add-inputs .ant-input-affix-wrapper,
+.config-view__record-add-inputs .ant-select {
   flex: 1;
 }
 
+.config-view__record-add-inputs .ant-input,
+.config-view__record-add-inputs .ant-input-affix-wrapper,
+.config-view__record-add-inputs .ant-select-selector,
+.config-view__record-row .ant-input,
+.config-view__record-row .ant-input-affix-wrapper,
+.config-view__record-row .ant-select-selector {
+  border-radius: 6px !important;
+  min-height: 30px;
+}
+
 .config-view__icon-button {
-  width: 32px;
-  height: 32px;
-  min-width: 32px;
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
   padding: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  border-radius: 6px;
 }
 
 .config-view__icon-button--compact {

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

@@ -47,11 +47,15 @@
   min-height: 24px;
   margin: -12px -12px 0;
   padding: 12px 12px 0;
-  cursor: row-resize;
+  cursor: default;
   flex-shrink: 0;
   transition: opacity .18s ease;
 
-  &:hover {
+  &.is-resizable {
+    cursor: row-resize;
+  }
+
+  &.is-resizable:hover {
     opacity: .92;
   }
 }

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