@vibe-forge/client 0.4.0 → 0.5.0

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

@@ -0,0 +1,81 @@
+import { createElement, type ReactNode } 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'
+
+const ADAPTER_STORAGE_KEY = 'vf_chat_adapter'
+
+export function useChatAdapter() {
+  const [selectedAdapter, setSelectedAdapter] = useState<string | undefined>(() => {
+    try {
+      const raw = localStorage.getItem(ADAPTER_STORAGE_KEY)
+      return raw == null || raw.trim() === '' ? undefined : raw
+    } catch {
+      return undefined
+    }
+  })
+
+  const { data: configRes } = useSWR<ConfigResponse>('/api/config', getConfig)
+
+  const mergedAdapters = useMemo(() => {
+    return configRes?.sources?.merged?.adapters ?? {}
+  }, [configRes?.sources?.merged?.adapters])
+
+  const defaultAdapter = configRes?.sources?.merged?.general?.defaultAdapter
+
+  const adapterOptions = useMemo<Array<{ value: string; label: ReactNode }>>(() => {
+    const keys = Object.keys(mergedAdapters)
+    return keys.map((key) => {
+      const display = getAdapterDisplay(key)
+      return {
+        value: key,
+        label: createElement('span', { className: 'adapter-option' }, [
+          display.icon != null
+            ? createElement('img', {
+              key: 'icon',
+              className: 'adapter-option__icon',
+              src: display.icon,
+              alt: '',
+              'aria-hidden': true
+            })
+            : null,
+          createElement('span', { key: 'text', className: 'adapter-option__text' }, display.title)
+        ])
+      }
+    })
+  }, [mergedAdapters])
+
+  // Auto-select: use stored value if valid, else config default, else first available
+  useEffect(() => {
+    const keys = Object.keys(mergedAdapters)
+    if (keys.length === 0) {
+      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]
+    })
+  }, [defaultAdapter, mergedAdapters])
+
+  // Persist to localStorage
+  useEffect(() => {
+    try {
+      if (selectedAdapter == null || selectedAdapter.trim() === '') {
+        localStorage.removeItem(ADAPTER_STORAGE_KEY)
+      } else {
+        localStorage.setItem(ADAPTER_STORAGE_KEY, selectedAdapter)
+      }
+    } catch {}
+  }, [selectedAdapter])
+
+  return {
+    selectedAdapter,
+    setSelectedAdapter,
+    adapterOptions
+  }
+}

package/src/hooks/chat/use-chat-models.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 
-import type { ConfigResponse, ModelServiceConfig, RecommendedModelConfig } from '@vibe-forge/core'
+import type { AdapterBuiltinModel, ConfigResponse, ModelServiceConfig, RecommendedModelConfig } from '@vibe-forge/core'
 import { getConfig } from '#~/api.js'
 
 export interface ModelSelectOption {
@@ -16,7 +16,11 @@ export interface ModelSelectGroup {
   options: ModelSelectOption[]
 }
 
-export function useChatModels() {
+export function useChatModels({
+  selectedAdapter
+}: {
+  selectedAdapter?: string
+} = {}) {
   const { t } = useTranslation()
   const [selectedModel, setSelectedModel] = useState<string | undefined>(() => {
     try {
@@ -41,6 +45,30 @@ export function useChatModels() {
     ))
   }, [configRes?.sources?.merged?.general?.recommendedModels])
 
+  const adapterBuiltinModels = useMemo(() => {
+    const raw = configRes?.sources?.merged?.adapterBuiltinModels
+    return (raw ?? {}) as Record<string, AdapterBuiltinModel[]>
+  }, [configRes?.sources?.merged?.adapterBuiltinModels])
+
+  const activeBuiltinModels = useMemo(() => {
+    if (selectedAdapter && adapterBuiltinModels[selectedAdapter]) {
+      return { [selectedAdapter]: adapterBuiltinModels[selectedAdapter] }
+    }
+    return adapterBuiltinModels
+  }, [adapterBuiltinModels, selectedAdapter])
+
+  const activeBuiltinModelValues = useMemo(() => (
+    Object.values(activeBuiltinModels).flat().map(model => model.value)
+  ), [activeBuiltinModels])
+
+  const builtinModelSet = useMemo(() => {
+    const set = new Set<string>()
+    for (const models of Object.values(activeBuiltinModels)) {
+      for (const m of models) set.add(m.value)
+    }
+    return set
+  }, [activeBuiltinModels])
+
   const modelServiceEntries = useMemo(() => Object.entries(mergedModelServices), [mergedModelServices])
 
   const availableModels = useMemo(() => {
@@ -61,7 +89,7 @@ export function useChatModels() {
   const availableModelValues = useMemo(() => availableModels.map(item => item.model), [availableModels])
   const availableModelKey = useMemo(() => availableModelValues.join('|'), [availableModelValues])
   const availableModelSet = useMemo(() => new Set(availableModelValues), [availableModelKey])
-  const hasAvailableModels = availableModelValues.length > 0
+  const hasAvailableModels = availableModelValues.length > 0 || builtinModelSet.size > 0
   const modelToService = useMemo(() => {
     const map = new Map<string, { key: string; title: string }>()
     for (const entry of availableModels) {
@@ -76,25 +104,35 @@ export function useChatModels() {
   const formatModelWithService = useCallback((model: string | undefined) => {
     const normalizedModel = typeof model === 'string' ? model.trim() : ''
     if (normalizedModel === '') return undefined
+    // Builtin adapter models pass through as-is (no service prefix)
+    if (builtinModelSet.has(normalizedModel)) return normalizedModel
     if (normalizedModel.includes(',')) return normalizedModel
     const resolvedService = modelToService.get(normalizedModel)?.key ?? defaultModelService
     return resolvedService ? `${resolvedService},${normalizedModel}` : normalizedModel
-  }, [defaultModelService, modelToService])
+  }, [builtinModelSet, defaultModelService, modelToService])
   const resolvedDefaultModel = useMemo(() => {
-    if (!hasAvailableModels) return undefined
+    if (defaultModel && builtinModelSet.has(defaultModel)) return defaultModel
+    if (activeBuiltinModelValues.length > 0) {
+      return activeBuiltinModelValues[0]
+    }
     if (defaultModel && availableModelSet.has(defaultModel)) return defaultModel
     if (defaultModelService && mergedModelServices[defaultModelService]) {
       const service = mergedModelServices[defaultModelService]
       const models = Array.isArray(service?.models) ? service?.models.filter(item => typeof item === 'string') : []
       if (models.length > 0) return models[0]
     }
-    return availableModelValues[0]
+    if (availableModelValues.length > 0) return availableModelValues[0]
+    // Fall back to first builtin model from the active adapter
+    const firstBuiltin = Object.values(activeBuiltinModels).flat()[0]
+    return firstBuiltin?.value
   }, [
+    activeBuiltinModels,
+    activeBuiltinModelValues,
     availableModelSet,
     availableModelValues,
+    builtinModelSet,
     defaultModel,
     defaultModelService,
-    hasAvailableModels,
     mergedModelServices
   ])
   const selectedModelWithService = useMemo(() => (
@@ -107,10 +145,13 @@ export function useChatModels() {
       return
     }
     setSelectedModel((prev) => {
-      if (prev != null && availableModelSet.has(prev)) return prev
+      if (prev != null) {
+        const isValid = availableModelSet.has(prev) || builtinModelSet.has(prev)
+        if (isValid) return prev
+      }
       return resolvedDefaultModel
     })
-  }, [availableModelSet, hasAvailableModels, resolvedDefaultModel])
+  }, [availableModelSet, builtinModelSet, hasAvailableModels, resolvedDefaultModel, selectedAdapter])
 
   useEffect(() => {
     try {
@@ -235,8 +276,31 @@ export function useChatModels() {
         options: recommendedOptions
       })
     }
+
+    // Adapter builtin model groups (filtered to active adapter)
+    for (const [adapterKey, models] of Object.entries(activeBuiltinModels)) {
+      if (!Array.isArray(models) || models.length === 0) continue
+      const adapterTitle = t('chat.modelGroupBuiltin', {
+        adapter: adapterKey,
+        defaultValue: `${adapterKey} (Default)`
+      })
+      groups.push({
+        label: (
+          <div className='model-group-label'>
+            <div className='model-group-title'>{adapterTitle}</div>
+          </div>
+        ),
+        options: models.map(m => buildOption({
+          value: m.value,
+          title: m.title,
+          description: m.description
+        }))
+      })
+    }
+
     return [...groups, ...serviceGroups]
   }, [
+    activeBuiltinModels,
     availableModelSet,
     modelToService,
     mergedModelServices,

package/src/hooks/chat/use-chat-session-actions.ts

@@ -4,9 +4,9 @@ import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { useSWRConfig } from 'swr'
 
-import type { ChatMessageContent, Session } from '@vibe-forge/core'
 import { createSession } from '#~/api.js'
 import { connectionManager } from '#~/connectionManager.js'
+import type { ChatMessageContent, Session } from '@vibe-forge/core'
 import type { PermissionMode } from './use-chat-permission-mode'
 
 export function useChatSessionActions({
@@ -14,12 +14,14 @@ export function useChatSessionActions({
   modelForQuery,
   hasAvailableModels,
   permissionMode,
+  adapter,
   onClearMessages
 }: {
   session?: Session
   modelForQuery?: string
   hasAvailableModels: boolean
   permissionMode: PermissionMode
+  adapter?: string
   onClearMessages: () => void
 }) {
   const { message } = App.useApp()
@@ -40,7 +42,8 @@ export function useChatSessionActions({
       setIsCreating(true)
       try {
         const { session: newSession } = await createSession(undefined, text.trim(), undefined, modelForQuery, {
-          permissionMode
+          permissionMode,
+          adapter
         })
 
         await mutate('/api/sessions', (prev: { sessions: Session[] } | undefined) => {
@@ -65,6 +68,7 @@ export function useChatSessionActions({
       text: text.trim()
     })
   }, [
+    adapter,
     hasAvailableModels,
     isThinking,
     message,
@@ -87,7 +91,8 @@ export function useChatSessionActions({
       setIsCreating(true)
       try {
         const { session: newSession } = await createSession(undefined, undefined, content, modelForQuery, {
-          permissionMode
+          permissionMode,
+          adapter
         })
 
         await mutate('/api/sessions', (prev: { sessions: Session[] } | undefined) => {
@@ -113,6 +118,7 @@ export function useChatSessionActions({
       content
     })
   }, [
+    adapter,
     hasAvailableModels,
     isThinking,
     message,

package/src/hooks/chat/use-chat-session-messages.ts

@@ -2,9 +2,9 @@ import { App } from 'antd'
 import { useEffect, useRef, useState } from 'react'
 import { useSWRConfig } from 'swr'
 
-import type { AskUserQuestionParams, ChatMessage, Session, SessionInfo, WSEvent } from '@vibe-forge/core'
 import { getSessionMessages } from '#~/api.js'
 import { connectionManager } from '#~/connectionManager.js'
+import type { AskUserQuestionParams, ChatMessage, Session, SessionInfo, WSEvent } from '@vibe-forge/core'
 import type { PermissionMode } from './use-chat-permission-mode'
 
 const applyMessageEvent = (currentMessages: ChatMessage[], data: WSEvent) => {
@@ -38,11 +38,13 @@ export function useChatSessionMessages({
   session,
   modelForQuery,
   permissionMode,
+  adapter,
   setInteractionRequest
 }: {
   session?: Session
   modelForQuery?: string
   permissionMode: PermissionMode
+  adapter?: string
   setInteractionRequest: (value: { id: string; payload: AskUserQuestionParams } | null) => void
 }) {
   const { message } = App.useApp()
@@ -53,6 +55,7 @@ export function useChatSessionMessages({
   const isInitialLoadRef = useRef<boolean>(true)
   const lastConnectedModelRef = useRef<string | undefined>(undefined)
   const lastConnectedPermissionModeRef = useRef<string | undefined>(undefined)
+  const lastConnectedAdapterRef = useRef<string | undefined>(undefined)
 
   useEffect(() => {
     setMessages([])
@@ -141,23 +144,32 @@ export function useChatSessionMessages({
       lastConnectedPermissionModeRef.current != null &&
       normalizedPermissionMode !== lastConnectedPermissionModeRef.current &&
       session?.status !== 'running'
-    if (modelChanged || permissionModeChanged) {
+    const normalizedAdapter = adapter ?? ''
+    const adapterChanged = adapter != null &&
+      lastConnectedAdapterRef.current != null &&
+      normalizedAdapter !== lastConnectedAdapterRef.current &&
+      session?.status !== 'running'
+    if (modelChanged || permissionModeChanged || adapterChanged) {
       connectionManager.send(session.id, { type: 'terminate_session' })
       connectionManager.close(session.id)
     }
     lastConnectedModelRef.current = normalizedModel
     lastConnectedPermissionModeRef.current = normalizedPermissionMode
+    lastConnectedAdapterRef.current = normalizedAdapter
 
     const timer = setTimeout(() => {
       if (isDisposed) return
 
       const connectionParams: Record<string, string> = {}
-    if (modelForQuery) {
-      connectionParams.model = modelForQuery
+      if (modelForQuery) {
+        connectionParams.model = modelForQuery
       }
       if (permissionMode) {
         connectionParams.permissionMode = permissionMode
       }
+      if (adapter) {
+        connectionParams.adapter = adapter
+      }
 
       cleanup = connectionManager.connect(session.id, {
         onOpen() {
@@ -239,7 +251,7 @@ export function useChatSessionMessages({
       clearTimeout(timer)
       cleanup?.()
     }
-  }, [message, modelForQuery, mutate, permissionMode, session?.id, session?.status, setInteractionRequest])
+  }, [adapter, message, modelForQuery, mutate, permissionMode, session?.id, session?.status, setInteractionRequest])
 
   return {
     messages,

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

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 
 import type { Session } from '@vibe-forge/core'
+import { useChatAdapter } from './use-chat-adapter'
 import { useChatInteraction } from './use-chat-interaction'
 import { useChatModels } from './use-chat-models'
 import { useChatPermissionMode } from './use-chat-permission-mode'
@@ -13,13 +14,14 @@ export function useChatSession({
   session?: Session
 }) {
   const { t } = useTranslation()
+  const { selectedAdapter, setSelectedAdapter, adapterOptions } = useChatAdapter()
   const {
     selectedModel,
     selectedModelWithService,
     setSelectedModel,
     modelOptions,
     hasAvailableModels
-  } = useChatModels()
+  } = useChatModels({ selectedAdapter })
   const { permissionMode, setPermissionMode, permissionModeOptions } = useChatPermissionMode()
   const { activeView, setActiveView } = useChatView()
   const { interactionRequest, setInteractionRequest, handleInteractionResponse } = useChatInteraction({
@@ -29,6 +31,7 @@ export function useChatSession({
     session,
     modelForQuery: selectedModelWithService,
     permissionMode,
+    adapter: selectedAdapter,
     setInteractionRequest
   })
   const isThinking = session?.status === 'running'
@@ -51,6 +54,9 @@ export function useChatSession({
     permissionMode,
     setPermissionMode,
     permissionModeOptions,
+    selectedAdapter,
+    setSelectedAdapter,
+    adapterOptions,
     hasAvailableModels,
     modelUnavailable: !hasAvailableModels
   }

package/src/resources/adapters.ts

@@ -0,0 +1,20 @@
+import { adapterDisplayName as claudeCodeDisplayName, adapterIcon as claudeCodeIcon } from '@vibe-forge/adapter-claude-code/icon'
+import { adapterDisplayName as codexDisplayName, adapterIcon as codexIcon } from '@vibe-forge/adapter-codex/icon'
+
+export const adapterDisplayMap = {
+  'claude-code': {
+    title: claudeCodeDisplayName,
+    icon: claudeCodeIcon
+  },
+  codex: {
+    title: codexDisplayName,
+    icon: codexIcon
+  }
+} as const
+
+export const getAdapterDisplay = (adapterKey: string) => {
+  return adapterDisplayMap[adapterKey as keyof typeof adapterDisplayMap] ?? {
+    title: adapterKey,
+    icon: undefined
+  }
+}

package/dist/assets/channel-DhtnrNJ6.js

@@ -1 +0,0 @@
-import{al as o,am as n}from"./mermaid.core-BnwYO0He.js";const l=(a,r)=>o.lang.round(n.parse(a)[r]);export{l as c};

package/dist/assets/clone-7bHB6YkC.js

@@ -1 +0,0 @@
-import{a as r}from"./graph-CIkpD4Kx.js";var a=4;function n(o){return r(o,a)}export{n as c};

package/dist/assets/flowDiagram-v2-4f6560a1-_13Sz5Wh.js

@@ -1 +0,0 @@
-import{f as o,p as e}from"./flowDb-c6c81e3f-DjiCStMN.js";import{f as a,g as t}from"./styles-d45a18b0-dKMOUh9p.js";import{ar as i}from"./mermaid.core-BnwYO0He.js";import"./graph-CIkpD4Kx.js";import"./layout-Tnmha8Nh.js";import"./index-DRSI_ZIL.js";import"./index-5325376f-aVVRRTIu.js";import"./clone-7bHB6YkC.js";import"./edges-96097737-BU8qStzd.js";import"./createText-1719965b-C1_HJcCc.js";import"./line-BQR2SOyl.js";import"./array-BKyUJesY.js";import"./path-CbwjOpE9.js";import"./channel-DhtnrNJ6.js";const n={parser:e,db:o,renderer:t,styles:a,init:r=>{r.flowchart||(r.flowchart={}),r.flowchart.arrowMarkerAbsolute=r.arrowMarkerAbsolute,i({flowchart:{arrowMarkerAbsolute:r.arrowMarkerAbsolute}}),t.setConf(r.flowchart),o.clear(),o.setGen("gen-2")}};export{n as diagram};