@vibe-forge/client 0.5.0 → 0.6.0

package/src/components/chat/{Sender → sender}/Sender.tsx

@@ -1,17 +1,17 @@
 import './Sender.scss'
 
-import { App, Button, Input, Select, Tooltip } from 'antd'
+import { App, Button, Cascader, Input, Select, Tooltip } from 'antd'
 import type { TextAreaRef } from 'antd/es/input/TextArea'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 
+import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
 import type { AskUserQuestionParams, ChatMessageContent, SessionInfo, SessionStatus } from '@vibe-forge/core'
+import { isShortcutMatch } from '../../../utils/shortcutUtils'
 import type { CompletionItem } from './CompletionMenu'
-import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
 import { CompletionMenu } from './CompletionMenu'
 import { ThinkingStatus } from './ThinkingStatus'
-import { isShortcutMatch } from '../../../utils/shortcutUtils'
 
 const { TextArea } = Input
 
@@ -19,6 +19,7 @@ interface ModelSelectOption {
   value: string
   label: React.ReactNode
   searchText: string
+  displayLabel: string
 }
 
 interface ModelSelectGroup {
@@ -34,13 +35,37 @@ interface PendingImage {
   mimeType?: string
 }
 
+interface SenderToolGroup {
+  key: 'chrome-devtools' | 'system'
+  label: string
+  tools: string[]
+}
+
+interface SenderToolOption {
+  value: string
+  label: React.ReactNode
+  children?: SenderToolOption[]
+}
+
+const formatToolLabel = (tool: string) => {
+  const parts = tool.split('__')
+  return parts[parts.length - 1] || tool
+}
+
+const getToolGroupIcon = (groupKey: SenderToolGroup['key']) => {
+  return groupKey === 'chrome-devtools' ? 'web_traffic' : 'memory'
+}
+
 export function Sender({
   onSend,
   onSendContent,
+  adapterLocked = false,
   sessionStatus,
   onInterrupt,
   onClear,
   sessionInfo,
+  connectionError,
+  onRetryConnection,
   interactionRequest,
   onInteractionResponse,
   placeholder,
@@ -57,10 +82,13 @@ export function Sender({
 }: {
   onSend: (text: string) => void
   onSendContent: (content: ChatMessageContent[]) => void
+  adapterLocked?: boolean
   sessionStatus?: SessionStatus
   onInterrupt: () => void
   onClear?: () => void
   sessionInfo?: SessionInfo | null
+  connectionError?: string | null
+  onRetryConnection?: () => void
   interactionRequest?: { id: string; payload: AskUserQuestionParams } | null
   onInteractionResponse?: (id: string, data: string | string[]) => void
   placeholder?: string
@@ -85,7 +113,6 @@ export function Sender({
 
   const [showToolsList, setShowToolsList] = useState(false)
   const textareaRef = useRef<TextAreaRef>(null)
-  const toolsRef = useRef<HTMLDivElement>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
   const isMac = navigator.platform.includes('Mac')
   const [pendingImages, setPendingImages] = useState<PendingImage[]>([])
@@ -107,16 +134,39 @@ export function Sender({
     : 'mod+enter'
 
   const isThinking = sessionStatus === 'running'
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (toolsRef.current && !toolsRef.current.contains(event.target as Node)) {
-        setShowToolsList(false)
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [])
+  const groupedTools: SenderToolGroup[] = sessionInfo != null && sessionInfo.type === 'init'
+    ? [
+        {
+          key: 'chrome-devtools',
+          label: t('chat.toolGroupChromeDevtools'),
+          tools: sessionInfo.tools.filter(tool => tool.startsWith('mcp__ChromeDevtools__'))
+        },
+        {
+          key: 'system',
+          label: t('chat.toolGroupSystem'),
+          tools: sessionInfo.tools.filter(tool => !tool.startsWith('mcp__ChromeDevtools__'))
+        }
+      ].filter(group => group.tools.length > 0)
+    : []
+  const toolCascaderOptions: SenderToolOption[] = groupedTools.map(group => ({
+    value: group.key,
+    label: (
+      <span className='sender-tool-group-option'>
+        <span className='sender-tool-group-option__icon material-symbols-rounded'>{getToolGroupIcon(group.key)}</span>
+        <span className='sender-tool-group-option__text'>{group.label}</span>
+        <span className='sender-tool-group-option__count'>{group.tools.length}</span>
+      </span>
+    ),
+    children: group.tools.map(tool => ({
+      value: tool,
+      label: (
+        <span className='sender-tool-option'>
+          <span className='sender-tool-option__dot' />
+          <span className='sender-tool-option__text'>{formatToolLabel(tool)}</span>
+        </span>
+      )
+    }))
+  }))
 
   const [historyIndex, setHistoryIndex] = useState(-1)
   const [draft, setDraft] = useState('')
@@ -354,7 +404,9 @@ export function Sender({
       handleSend()
       return
     }
-    if (clearInputShortcut != null && clearInputShortcut.trim() !== '' && isShortcutMatch(e, clearInputShortcut, isMac)) {
+    if (
+      clearInputShortcut != null && clearInputShortcut.trim() !== '' && isShortcutMatch(e, clearInputShortcut, isMac)
+    ) {
       e.preventDefault()
       clearInputValue()
       return
@@ -544,6 +596,20 @@ export function Sender({
         </div>
       )}
       <div className='chat-input-container'>
+        {connectionError && connectionError.trim() !== '' && (
+          <div className='connection-error-banner'>
+            <div className='connection-error-content'>
+              <span className='material-symbols-rounded'>error</span>
+              <div className='connection-error-copy'>
+                <div className='connection-error-title'>{t('chat.connectionErrorTitle')}</div>
+                <div className='connection-error-message'>{connectionError}</div>
+              </div>
+            </div>
+            <Button size='small' onClick={onRetryConnection}>
+              {t('chat.retryConnection')}
+            </Button>
+          </div>
+        )}
         {modelUnavailable && (
           <div className='model-unavailable'>
             {t('chat.modelConfigRequired')}
@@ -622,31 +688,25 @@ export function Sender({
             </Tooltip>
 
             {sessionInfo != null && sessionInfo.type === 'init' && (
-              <div className='session-info-toolbar' ref={toolsRef}>
-                <div
-                  className={`info-item ${showToolsList ? 'active' : ''}`}
-                  onClick={() => setShowToolsList(!showToolsList)}
+              <div className='session-info-toolbar'>
+                <Cascader
+                  open={showToolsList}
+                  options={toolCascaderOptions}
+                  expandTrigger='hover'
+                  placement='topLeft'
+                  allowClear={false}
+                  popupClassName='sender-tools-cascader-popup'
+                  onOpenChange={setShowToolsList}
+                  onChange={() => setShowToolsList(false)}
                 >
-                  <span className='material-symbols-rounded'>build</span>
-                  <span className='info-text'>{t('chat.toolsCount', { count: sessionInfo.tools.length })}</span>
-                  <span className='material-symbols-rounded arrow-icon'>keyboard_arrow_up</span>
-                </div>
-
-                {showToolsList && (
-                  <div className='tools-list-popup'>
-                    <div className='popup-header'>{t('chat.availableTools')}</div>
-                    <div className='popup-content'>
-                      <div className='tools-list'>
-                        {sessionInfo.tools.map(tool => (
-                          <div key={tool} className='tool-item'>
-                            <span className='material-symbols-rounded'>check_circle</span>
-                            <span className='tool-name'>{tool}</span>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
+                  <div className={`info-item ${showToolsList ? 'active' : ''}`}>
+                    <span className='info-item-leading'>
+                      <span className='material-symbols-rounded'>build</span>
+                    </span>
+                    <span className='info-text'>{t('chat.toolsCount', { count: sessionInfo.tools.length })}</span>
+                    <span className='material-symbols-rounded arrow-icon'>keyboard_arrow_up</span>
                   </div>
-                )}
+                </Cascader>
               </div>
             )}
           </div>
@@ -660,7 +720,7 @@ export function Sender({
                 options={adapterOptions}
                 showSearch={false}
                 allowClear={false}
-                disabled={modelUnavailable || isThinking}
+                disabled={adapterLocked || modelUnavailable || isThinking}
                 onChange={(value) => onAdapterChange?.(value)}
                 placeholder={t('chat.adapterSelectPlaceholder', { defaultValue: 'Adapter' })}
                 optionLabelProp='label'
@@ -678,7 +738,7 @@ export function Sender({
               disabled={modelUnavailable || isThinking}
               onChange={(value) => onModelChange?.(value)}
               placeholder={modelUnavailable ? t('chat.modelUnavailable') : t('chat.modelSelectPlaceholder')}
-              optionLabelProp='value'
+              optionLabelProp='displayLabel'
               filterOption={(input, option) => {
                 const searchText = String((option as ModelSelectOption | undefined)?.searchText ?? '')
                 return searchText.toLowerCase().includes(input.toLowerCase())
@@ -701,7 +761,9 @@ export function Sender({
             />
 
             <div
-              className={`chat-send-btn ${input.trim() !== '' && !modelUnavailable ? 'active' : ''} ${isThinking ? 'thinking' : ''} ${modelUnavailable ? 'disabled' : ''}`}
+              className={`chat-send-btn ${input.trim() !== '' && !modelUnavailable ? 'active' : ''} ${
+                isThinking ? 'thinking' : ''
+              } ${modelUnavailable ? 'disabled' : ''}`}
               onClick={modelUnavailable ? undefined : (isThinking ? onInterrupt : handleSend)}
             >
               <span className='material-symbols-rounded'>

package/src/components/chat/tools/core/ToolGroup.tsx

@@ -3,7 +3,7 @@ import './ToolGroup.scss'
 import type { ChatMessage, ChatMessageContent } from '@vibe-forge/core'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { MessageFooter } from '../../Messages/MessageFooter'
+import { MessageFooter } from '../../messages/MessageFooter'
 import { ToolRenderer } from './ToolRenderer'
 
 type ToolGroupProps = {

package/src/components/config/ConfigSectionForm.tsx

@@ -25,7 +25,7 @@ import {
   McpServersRecordEditor,
   ModelServicesRecordEditor,
   RecordJsonEditor
-} from './recordEditors/index'
+} from './record-editors/index'
 
 export const SectionForm = ({
   sectionKey,

package/src/components/layout/AppShell.scss

@@ -0,0 +1,19 @@
+.app-shell {
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+}
+
+.app-shell__content {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  background-color: #fff;
+}
+
+.app-shell--dark {
+  .app-shell__content {
+    background-color: #141414;
+  }
+}

package/src/components/layout/AppShell.tsx

@@ -0,0 +1,45 @@
+import './AppShell.scss'
+
+import { Layout } from 'antd'
+import type { PropsWithChildren } from 'react'
+
+import type { Session } from '@vibe-forge/core'
+
+import { NavRail } from '#~/components/NavRail'
+import { Sidebar } from '#~/components/Sidebar'
+
+type AppShellProps = PropsWithChildren<{
+  activeSessionId?: string
+  isDarkMode: boolean
+  onDeletedSession: (deletedId: string, nextId?: string) => void
+  onSelectSession: (session: Session, isNew?: boolean) => void
+  showSidebar: boolean
+  sidebarWidth: number
+}>
+
+export function AppShell({
+  activeSessionId,
+  children,
+  isDarkMode,
+  onDeletedSession,
+  onSelectSession,
+  showSidebar,
+  sidebarWidth
+}: AppShellProps) {
+  return (
+    <Layout className={`app-shell ${isDarkMode ? 'app-shell--dark' : ''}`}>
+      <NavRail />
+      {showSidebar && (
+        <Sidebar
+          width={sidebarWidth}
+          activeId={activeSessionId}
+          onSelectSession={onSelectSession}
+          onDeletedSession={onDeletedSession}
+        />
+      )}
+      <Layout.Content className='app-shell__content'>
+        {children}
+      </Layout.Content>
+    </Layout>
+  )
+}

package/src/hooks/chat/model-selector.ts

@@ -0,0 +1,150 @@
+import type { ModelServiceConfig } from '@vibe-forge/core'
+
+export interface ServiceModelEntry {
+  serviceKey: string
+  model: string
+  selectorValue: string
+}
+
+const normalizeNonEmptyString = (value: string | undefined) => {
+  const normalized = typeof value === 'string' ? value.trim() : ''
+  return normalized === '' ? undefined : normalized
+}
+
+export const buildServiceModelSelector = (serviceKey: string, modelName: string) => `${serviceKey},${modelName}`
+
+export const parseServiceModelSelector = (value: string | undefined) => {
+  const normalizedValue = normalizeNonEmptyString(value)
+  if (!normalizedValue || !normalizedValue.includes(',')) return undefined
+
+  const [serviceKey, modelName] = normalizedValue.split(/,(.+)/)
+  const normalizedServiceKey = normalizeNonEmptyString(serviceKey)
+  const normalizedModelName = normalizeNonEmptyString(modelName)
+  if (!normalizedServiceKey || !normalizedModelName) return undefined
+
+  return {
+    serviceKey: normalizedServiceKey,
+    modelName: normalizedModelName,
+    selectorValue: buildServiceModelSelector(normalizedServiceKey, normalizedModelName)
+  }
+}
+
+export const listServiceModels = (modelServices: Record<string, ModelServiceConfig>) => {
+  const list: ServiceModelEntry[] = []
+
+  for (const [serviceKey, serviceValue] of Object.entries(modelServices)) {
+    const normalizedServiceKey = normalizeNonEmptyString(serviceKey)
+    if (!normalizedServiceKey) continue
+
+    const service = (serviceValue != null && typeof serviceValue === 'object')
+      ? serviceValue
+      : undefined
+    const models = Array.isArray(service?.models) ? service.models : []
+
+    for (const model of models) {
+      const normalizedModel = normalizeNonEmptyString(model)
+      if (!normalizedModel) continue
+
+      list.push({
+        serviceKey: normalizedServiceKey,
+        model: normalizedModel,
+        selectorValue: buildServiceModelSelector(normalizedServiceKey, normalizedModel)
+      })
+    }
+  }
+
+  return list
+}
+
+const findExactServiceModel = (serviceModels: ServiceModelEntry[], serviceKey: string, modelName: string) => (
+  serviceModels.find(entry => entry.serviceKey === serviceKey && entry.model === modelName)
+)
+
+export const resolveServiceModelSelector = (params: {
+  value?: string
+  serviceModels: ServiceModelEntry[]
+  preferredServiceKey?: string
+}) => {
+  const normalizedValue = normalizeNonEmptyString(params.value)
+  if (!normalizedValue) return undefined
+
+  const parsed = parseServiceModelSelector(normalizedValue)
+  if (parsed) {
+    const exactMatch = findExactServiceModel(params.serviceModels, parsed.serviceKey, parsed.modelName)
+    if (exactMatch) return exactMatch.selectorValue
+  }
+
+  const modelName = parsed?.modelName ?? normalizedValue
+  const candidates = params.serviceModels.filter(entry => entry.model === modelName)
+  if (candidates.length === 0) return undefined
+
+  const preferredKeys = [parsed?.serviceKey, normalizeNonEmptyString(params.preferredServiceKey)]
+    .filter((value, index, array): value is string => Boolean(value) && array.indexOf(value) === index)
+
+  for (const preferredKey of preferredKeys) {
+    const candidate = candidates.find(entry => entry.serviceKey === preferredKey)
+    if (candidate) return candidate.selectorValue
+  }
+
+  return candidates[0]?.selectorValue
+}
+
+export const resolveChatModelSelection = (params: {
+  value?: string
+  builtinModels?: Iterable<string>
+  serviceModels: ServiceModelEntry[]
+  defaultModelService?: string
+}) => {
+  const normalizedValue = normalizeNonEmptyString(params.value)
+  if (!normalizedValue) return undefined
+
+  const builtinModelSet = new Set(
+    Array.from(params.builtinModels ?? [])
+      .map(item => normalizeNonEmptyString(item))
+      .filter((item): item is string => Boolean(item))
+  )
+
+  if (builtinModelSet.has(normalizedValue)) return normalizedValue
+
+  return resolveServiceModelSelector({
+    value: normalizedValue,
+    serviceModels: params.serviceModels,
+    preferredServiceKey: params.defaultModelService
+  })
+}
+
+export const resolveDefaultChatModelSelection = (params: {
+  defaultModel?: string
+  defaultModelService?: string
+  builtinModels?: Iterable<string>
+  serviceModels: ServiceModelEntry[]
+}) => {
+  const builtinModels = Array.from(params.builtinModels ?? [])
+    .map(item => normalizeNonEmptyString(item))
+    .filter((item): item is string => Boolean(item))
+  const builtinModelSet = new Set(builtinModels)
+  const normalizedDefaultModel = normalizeNonEmptyString(params.defaultModel)
+
+  if (normalizedDefaultModel) {
+    const parsed = parseServiceModelSelector(normalizedDefaultModel)
+    const resolvedServiceModel = resolveServiceModelSelector({
+      value: normalizedDefaultModel,
+      serviceModels: params.serviceModels,
+      preferredServiceKey: parsed?.serviceKey ?? params.defaultModelService
+    })
+    if (resolvedServiceModel) return resolvedServiceModel
+
+    if (builtinModelSet.has(normalizedDefaultModel)) return normalizedDefaultModel
+    if (parsed?.modelName && builtinModelSet.has(parsed.modelName)) return parsed.modelName
+  }
+
+  const normalizedDefaultModelService = normalizeNonEmptyString(params.defaultModelService)
+  if (normalizedDefaultModelService) {
+    const defaultServiceModel = params.serviceModels.find(entry => entry.serviceKey === normalizedDefaultModelService)
+    if (defaultServiceModel) return defaultServiceModel.selectorValue
+  }
+
+  if (builtinModels.length > 0) return builtinModels[0]
+
+  return params.serviceModels[0]?.selectorValue
+}

package/src/hooks/chat/use-chat-adapter.ts

@@ -1,10 +1,10 @@
-import { createElement, type ReactNode } from 'react'
+import { type ReactNode, createElement } from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import useSWR from 'swr'
 
 import { getConfig } from '#~/api.js'
-import type { ConfigResponse } from '@vibe-forge/core'
 import { getAdapterDisplay } from '#~/resources/adapters.js'
+import type { ConfigResponse } from '@vibe-forge/core'
 
 const ADAPTER_STORAGE_KEY = 'vf_chat_adapter'
 
@@ -26,6 +26,22 @@ export function useChatAdapter() {
 
   const defaultAdapter = configRes?.sources?.merged?.general?.defaultAdapter
 
+  const resolveAdapter = (value?: string) => {
+    const normalizedValue = typeof value === 'string' ? value.trim() : ''
+    const keys = Object.keys(mergedAdapters)
+    if (keys.length === 0) return undefined
+    if (normalizedValue !== '' && keys.includes(normalizedValue)) return normalizedValue
+    if (defaultAdapter && keys.includes(defaultAdapter as string)) return defaultAdapter as string
+    return keys[0]
+  }
+
+  const updateSelectedAdapter = (value?: string) => {
+    setSelectedAdapter((prev) => {
+      const nextValue = resolveAdapter(value)
+      return nextValue === prev ? prev : nextValue
+    })
+  }
+
   const adapterOptions = useMemo<Array<{ value: string; label: ReactNode }>>(() => {
     const keys = Object.keys(mergedAdapters)
     return keys.map((key) => {
@@ -55,11 +71,7 @@ export function useChatAdapter() {
       setSelectedAdapter(undefined)
       return
     }
-    setSelectedAdapter((prev) => {
-      if (prev != null && keys.includes(prev)) return prev
-      if (defaultAdapter && keys.includes(defaultAdapter as string)) return defaultAdapter as string
-      return keys[0]
-    })
+    setSelectedAdapter((prev) => resolveAdapter(prev))
   }, [defaultAdapter, mergedAdapters])
 
   // Persist to localStorage
@@ -75,7 +87,7 @@ export function useChatAdapter() {
 
   return {
     selectedAdapter,
-    setSelectedAdapter,
+    setSelectedAdapter: updateSelectedAdapter,
     adapterOptions
   }
 }