@vibe-forge/client 0.4.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,
@@ -50,14 +75,20 @@ export function Sender({
   permissionMode,
   permissionModeOptions,
   onPermissionModeChange,
+  selectedAdapter,
+  adapterOptions,
+  onAdapterChange,
   modelUnavailable
 }: {
   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
@@ -67,6 +98,9 @@ export function Sender({
   permissionMode: PermissionMode
   permissionModeOptions: Array<{ value: PermissionMode; label: React.ReactNode }>
   onPermissionModeChange: (mode: PermissionMode) => void
+  selectedAdapter?: string
+  adapterOptions?: Array<{ value: string; label: React.ReactNode }>
+  onAdapterChange?: (adapter: string) => void
   modelUnavailable?: boolean
 }) {
   const { t } = useTranslation()
@@ -79,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[]>([])
@@ -101,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('')
@@ -348,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
@@ -538,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')}
@@ -616,36 +688,46 @@ 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>
 
           <div className='toolbar-right'>
+            {adapterOptions && adapterOptions.length > 1 && (
+              <Select
+                className='adapter-select'
+                classNames={{ popup: { root: 'adapter-select-popup' } }}
+                value={selectedAdapter}
+                options={adapterOptions}
+                showSearch={false}
+                allowClear={false}
+                disabled={adapterLocked || modelUnavailable || isThinking}
+                onChange={(value) => onAdapterChange?.(value)}
+                placeholder={t('chat.adapterSelectPlaceholder', { defaultValue: 'Adapter' })}
+                optionLabelProp='label'
+                popupMatchSelectWidth={false}
+              />
+            )}
+
             <Select
               className='model-select'
               classNames={{ popup: { root: 'model-select-popup' } }}
@@ -656,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())
@@ -679,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/config/ConfigSourceSwitch.tsx

@@ -1,19 +1,16 @@
 import { Radio } from 'antd'
+import type { ReactNode } from 'react'
 
 import type { ConfigSource } from '@vibe-forge/core'
 
-import type { TranslationFn } from './configUtils'
-
 export function ConfigSourceSwitch({
   value,
   onChange,
-  configPresent,
-  t
+  options,
 }: {
   value: ConfigSource
   onChange: (value: ConfigSource) => void
-  configPresent?: { project?: boolean; user?: boolean }
-  t: TranslationFn
+  options: Array<{ value: ConfigSource; icon: string; label: ReactNode }>
 }) {
   return (
     <Radio.Group
@@ -24,34 +21,15 @@ export function ConfigSourceSwitch({
       onChange={(event) => {
         onChange(event.target.value as ConfigSource)
       }}
-      options={[
-        {
-          label: (
-            <span className='config-view__source-option'>
-              <span className='material-symbols-rounded'>folder</span>
-              <span>
-                {configPresent?.project === true
-                  ? t('config.sources.project')
-                  : t('config.sources.projectMissing')}
-              </span>
-            </span>
-          ),
-          value: 'project'
-        },
-        {
-          label: (
-            <span className='config-view__source-option'>
-              <span className='material-symbols-rounded'>person</span>
-              <span>
-                {configPresent?.user === true
-                  ? t('config.sources.user')
-                  : t('config.sources.userMissing')}
-              </span>
-            </span>
-          ),
-          value: 'user'
-        }
-      ]}
+      options={options.map(opt => ({
+        value: opt.value,
+        label: (
+          <span className='config-view__source-option'>
+            <span className='material-symbols-rounded'>{opt.icon}</span>
+            <span>{opt.label}</span>
+          </span>
+        )
+      }))}
     />
   )
 }

package/src/components/config/channelDefinitions.ts

@@ -1,6 +1,6 @@
-import { larkChannelDefinition } from '@vibe-forge/channel-lark'
+import { channelDefinition } from '@vibe-forge/channel-lark'
 import type { ChannelDescriptor } from '@vibe-forge/core/channel'
 
 export const channelDefinitions: ChannelDescriptor[] = [
-  larkChannelDefinition
+  channelDefinition
 ]

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/components/sidebar/SessionItem.scss

@@ -163,11 +163,15 @@
         align-items: center;
 
         .session-tag {
+          max-width: 120px;
           font-size: 10px;
           margin: 0;
           padding: 0 4px;
           line-height: 14px;
           border-radius: 2px;
+          display: inline-flex;
+          align-items: center;
+          white-space: nowrap;
 
           &--automation {
             padding: 0 6px;
@@ -176,6 +180,19 @@
           &__link {
             color: var(--primary-color);
             text-decoration: none;
+            display: inline-block;
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          &__text {
+            display: inline-block;
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
           }
         }
       }

package/src/components/sidebar/SessionItem.tsx

@@ -226,28 +226,36 @@ export function SessionItem({
               if (automationTag) {
                 const href = `/automation?rule=${encodeURIComponent(automationTag.ruleId)}`
                 return (
-                  <Tag
+                  <Tooltip
                     key={tag}
-                    className='session-tag session-tag--automation'
-                    onClick={(event) => event.stopPropagation()}
+                    title={automationTag.ruleTitle}
                   >
-                    <a
-                      className='session-tag__link'
-                      href={href}
+                    <Tag
+                      className='session-tag session-tag--automation'
                       onClick={(event) => event.stopPropagation()}
                     >
-                      {automationTag.ruleTitle}
-                    </a>
-                  </Tag>
+                      <a
+                        className='session-tag__link'
+                        href={href}
+                        onClick={(event) => event.stopPropagation()}
+                      >
+                        {automationTag.ruleTitle}
+                      </a>
+                    </Tag>
+                  </Tooltip>
                 )
               }
               return (
-                <Tag
+                <Tooltip
                   key={tag}
-                  className='session-tag'
+                  title={tag}
                 >
-                  {tag}
-                </Tag>
+                  <Tag className='session-tag'>
+                    <span className='session-tag__text'>
+                      {tag}
+                    </span>
+                  </Tag>
+                </Tooltip>
               )
             })}
           </div>

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