@vibe-forge/client 0.11.2 → 1.0.0

package/src/hooks/chat/session-view-cache.ts

@@ -1,4 +1,4 @@
-import type { ChatMessage } from '@vibe-forge/core'
+import type { ChatMessage, SessionMessageQueueState } from '@vibe-forge/core'
 import type { SessionInfo } from '@vibe-forge/types'
 
 import type { ChatErrorState, InteractionRequestState } from './interaction-state'
@@ -6,6 +6,7 @@ import type { ChatErrorState, InteractionRequestState } from './interaction-stat
 export interface ChatSessionViewSnapshot {
   messages: ChatMessage[]
   sessionInfo: SessionInfo | null
+  queuedMessages: SessionMessageQueueState
   errorState: ChatErrorState | null
   interactionRequest: InteractionRequestState | null
   isHydrated: boolean
@@ -18,6 +19,7 @@ export const createChatSessionViewSnapshot = (
 ): ChatSessionViewSnapshot => ({
   messages: value?.messages ?? [],
   sessionInfo: value?.sessionInfo ?? null,
+  queuedMessages: value?.queuedMessages ?? { steer: [], next: [] },
   errorState: value?.errorState ?? null,
   interactionRequest: value?.interactionRequest ?? null,
   isHydrated: value?.isHydrated ?? false
@@ -42,6 +44,7 @@ export const restoreChatSessionViewSnapshot = (snapshot?: ChatSessionViewSnapsho
   return {
     messages: restorable.messages,
     sessionInfo: restorable.sessionInfo,
+    queuedMessages: restorable.queuedMessages,
     errorState: restorable.errorState,
     interactionRequest: restorable.interactionRequest,
     isReady: restorable.isHydrated

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

@@ -57,7 +57,11 @@ export function useChatAdapter() {
               alt: '',
               'aria-hidden': true
             })
-            : null,
+            : createElement('span', {
+              key: 'fallback-icon',
+              className: 'adapter-option__icon adapter-option__icon--fallback material-symbols-rounded',
+              'aria-hidden': true
+            }, 'deployed_code'),
           createElement('span', { key: 'text', className: 'adapter-option__text' }, display.title)
         ])
       }

package/src/hooks/chat/use-chat-model-adapter-selection.tsx

@@ -410,7 +410,11 @@ export function useChatModelAdapterSelection({
               alt: '',
               'aria-hidden': true
             })
-            : null,
+            : createElement('span', {
+              key: 'fallback-icon',
+              className: 'adapter-option__icon adapter-option__icon--fallback material-symbols-rounded',
+              'aria-hidden': true
+            }, 'deployed_code'),
           createElement('span', { key: 'text', className: 'adapter-option__text' }, display.title)
         ])
       }

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

@@ -6,6 +6,7 @@ export function useChatScroll({ contentVersion }: { contentVersion: number }) {
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const messagesContainerRef = useRef<HTMLDivElement>(null)
   const messagesContentRef = useRef<HTMLDivElement>(null)
+  const scrollTimeoutRef = useRef<number | null>(null)
   const [showScrollBottom, setShowScrollBottom] = useState(false)
 
   const updateScrollState = useCallback(() => {
@@ -15,16 +16,30 @@ export function useChatScroll({ contentVersion }: { contentVersion: number }) {
     setShowScrollBottom(distanceToBottom > SCROLL_THRESHOLD)
   }, [])
 
+  const clearScrollTimeout = useCallback(() => {
+    if (scrollTimeoutRef.current == null) {
+      return
+    }
+
+    window.clearTimeout(scrollTimeoutRef.current)
+    scrollTimeoutRef.current = null
+  }, [])
+
   const scrollToBottom = useCallback((behavior: ScrollBehavior = 'smooth') => {
-    setTimeout(() => {
-      if (messagesContainerRef.current) {
-        messagesContainerRef.current.scrollTo({
-          top: messagesContainerRef.current.scrollHeight,
-          behavior
-        })
+    clearScrollTimeout()
+    scrollTimeoutRef.current = window.setTimeout(() => {
+      const container = messagesContainerRef.current
+      scrollTimeoutRef.current = null
+      if (!container) {
+        return
       }
+
+      container.scrollTo({
+        top: container.scrollHeight,
+        behavior
+      })
     }, 50)
-  }, [])
+  }, [clearScrollTimeout])
 
   useEffect(() => {
     const container = messagesContainerRef.current
@@ -41,6 +56,8 @@ export function useChatScroll({ contentVersion }: { contentVersion: number }) {
     updateScrollState()
   }, [contentVersion, updateScrollState])
 
+  useEffect(() => clearScrollTimeout, [clearScrollTimeout])
+
   return {
     messagesEndRef,
     messagesContainerRef,

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

@@ -4,9 +4,19 @@ import { useTranslation } from 'react-i18next'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useSWRConfig } from 'swr'
 
-import { branchSessionFromMessage, createSession, getApiErrorMessage } from '#~/api.js'
+import {
+  branchSessionFromMessage,
+  createQueuedMessage,
+  createSession,
+  deleteQueuedMessage,
+  getApiErrorMessage,
+  moveQueuedMessage,
+  reorderQueuedMessages,
+  updateQueuedMessage
+} from '#~/api.js'
 import { connectionManager } from '#~/connectionManager.js'
-import type { ChatMessageContent, Session } from '@vibe-forge/core'
+import type { ChatMessageContent, Session, SessionQueuedMessageMode } from '@vibe-forge/core'
+import type { ChatSessionWorkspaceDraft } from './chat-session-workspace-draft'
 import type { ChatEffort } from './use-chat-effort'
 import type { PermissionMode } from './use-chat-permission-mode'
 
@@ -17,6 +27,7 @@ export function useChatSessionActions({
   effort,
   permissionMode,
   adapter,
+  workspaceDraft,
   onClearMessages
 }: {
   session?: Session
@@ -25,6 +36,7 @@ export function useChatSessionActions({
   effort: ChatEffort
   permissionMode: PermissionMode
   adapter?: string
+  workspaceDraft?: ChatSessionWorkspaceDraft
   onClearMessages: () => void
 }) {
   const { message } = App.useApp()
@@ -61,7 +73,7 @@ export function useChatSessionActions({
     setIsCreating(false)
   }, [isCreating, session?.id])
 
-  const send = useCallback(async (text: string) => {
+  const send = useCallback(async (text: string, _mode?: SessionQueuedMessageMode) => {
     if (text.trim() === '' || isThinking) return false
     if (!hasAvailableModels) {
       void message.warning(t('chat.modelConfigRequired'))
@@ -74,7 +86,13 @@ export function useChatSessionActions({
         const { session: newSession } = await createSession(undefined, text.trim(), undefined, modelForQuery, {
           effort: effort === 'default' ? undefined : effort,
           permissionMode,
-          adapter
+          adapter,
+          workspace: workspaceDraft == null
+            ? undefined
+            : {
+              createWorktree: workspaceDraft.createWorktree,
+              branch: workspaceDraft.branch
+            }
         })
 
         await insertSessionIntoCache(newSession)
@@ -103,12 +121,13 @@ export function useChatSessionActions({
     navigateWithCurrentSearch,
     effort,
     permissionMode,
+    workspaceDraft,
     modelForQuery,
     session?.id,
     t
   ])
 
-  const sendContent = useCallback(async (content: ChatMessageContent[]) => {
+  const sendContent = useCallback(async (content: ChatMessageContent[], _mode?: SessionQueuedMessageMode) => {
     if (content.length === 0 || isThinking) return false
     if (!hasAvailableModels) {
       void message.warning(t('chat.modelConfigRequired'))
@@ -121,7 +140,13 @@ export function useChatSessionActions({
         const { session: newSession } = await createSession(undefined, undefined, content, modelForQuery, {
           effort: effort === 'default' ? undefined : effort,
           permissionMode,
-          adapter
+          adapter,
+          workspace: workspaceDraft == null
+            ? undefined
+            : {
+              createWorktree: workspaceDraft.createWorktree,
+              branch: workspaceDraft.branch
+            }
         })
 
         await insertSessionIntoCache(newSession)
@@ -150,6 +175,7 @@ export function useChatSessionActions({
     message,
     effort,
     permissionMode,
+    workspaceDraft,
     modelForQuery,
     session?.id,
     t
@@ -200,11 +226,97 @@ export function useChatSessionActions({
     return runMessageAction(messageId, 'edit', { content })
   }, [runMessageAction])
 
+  const enqueueContent = useCallback(async (mode: SessionQueuedMessageMode, content: ChatMessageContent[]) => {
+    if (session?.id == null || session.id === '') {
+      return false
+    }
+    if (content.length === 0) {
+      return false
+    }
+
+    try {
+      await createQueuedMessage(session.id, mode, content)
+      return true
+    } catch (err) {
+      console.error(err)
+      void message.error(getApiErrorMessage(err, t('common.operationFailed')))
+      return false
+    }
+  }, [message, session?.id, t])
+
+  const updateQueuedContent = useCallback(async (queueId: string, content: ChatMessageContent[]) => {
+    if (session?.id == null || session.id === '') {
+      return false
+    }
+    if (content.length === 0) {
+      return false
+    }
+
+    try {
+      await updateQueuedMessage(session.id, queueId, content)
+      return true
+    } catch (err) {
+      console.error(err)
+      void message.error(getApiErrorMessage(err, t('common.operationFailed')))
+      return false
+    }
+  }, [message, session?.id, t])
+
+  const removeQueuedContent = useCallback(async (queueId: string) => {
+    if (session?.id == null || session.id === '') {
+      return false
+    }
+
+    try {
+      await deleteQueuedMessage(session.id, queueId)
+      return true
+    } catch (err) {
+      console.error(err)
+      void message.error(getApiErrorMessage(err, t('common.operationFailed')))
+      return false
+    }
+  }, [message, session?.id, t])
+
+  const moveQueuedContent = useCallback(async (queueId: string, mode: SessionQueuedMessageMode) => {
+    if (session?.id == null || session.id === '') {
+      return false
+    }
+
+    try {
+      await moveQueuedMessage(session.id, queueId, mode)
+      return true
+    } catch (err) {
+      console.error(err)
+      void message.error(getApiErrorMessage(err, t('common.operationFailed')))
+      return false
+    }
+  }, [message, session?.id, t])
+
+  const reorderQueuedContent = useCallback(async (mode: SessionQueuedMessageMode, ids: string[]) => {
+    if (session?.id == null || session.id === '') {
+      return false
+    }
+
+    try {
+      await reorderQueuedMessages(session.id, mode, ids)
+      return true
+    } catch (err) {
+      console.error(err)
+      void message.error(getApiErrorMessage(err, t('common.operationFailed')))
+      return false
+    }
+  }, [message, session?.id, t])
+
   return {
     isCreating,
     isThinking,
     send,
     sendContent,
+    enqueueContent,
+    updateQueuedContent,
+    removeQueuedContent,
+    moveQueuedContent,
+    reorderQueuedContent,
     editMessage,
     forkMessage,
     interrupt,

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

@@ -3,7 +3,7 @@ import type { SetStateAction } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSWRConfig } from 'swr'
 
-import type { AskUserQuestionParams, ChatMessage, Session, WSEvent } from '@vibe-forge/core'
+import type { AskUserQuestionParams, ChatMessage, Session, SessionMessageQueueState, WSEvent } from '@vibe-forge/core'
 import type { SessionInfo } from '@vibe-forge/types'
 
 import { getSessionMessages } from '#~/api.js'
@@ -25,6 +25,8 @@ import type { ChatSessionViewSnapshot } from './session-view-cache'
 import type { ChatEffort } from './use-chat-effort'
 import type { PermissionMode } from './use-chat-permission-mode'
 
+const EMPTY_QUEUED_MESSAGES: SessionMessageQueueState = { steer: [], next: [] }
+
 const applyMessageEvent = (currentMessages: ChatMessage[], data: WSEvent) => {
   if (data.type !== 'message') return currentMessages
   const exists = currentMessages.find((msg) => msg.id === data.message.id)
@@ -71,6 +73,7 @@ export function useChatSessionMessages({
   const { mutate } = useSWRConfig()
   const [messagesState, setMessagesState] = useState<ChatMessage[]>([])
   const [sessionInfo, setSessionInfo] = useState<SessionInfo | null>(null)
+  const [queuedMessages, setQueuedMessages] = useState<SessionMessageQueueState>({ steer: [], next: [] })
   const [isReady, setIsReady] = useState(false)
   const [errorState, setErrorState] = useState<ChatErrorState | null>(null)
   const [retryCount, setRetryCount] = useState(0)
@@ -94,6 +97,7 @@ export function useChatSessionMessages({
     patch: Partial<{
       messages: ChatMessage[]
       sessionInfo: SessionInfo | null
+      queuedMessages: SessionMessageQueueState
       errorState: ChatErrorState | null
       interactionRequest: InteractionRequestState | null
       isHydrated: boolean
@@ -174,9 +178,11 @@ export function useChatSessionMessages({
           code: latestFatalError.code
         }
         : null
+      const nextQueuedMessages = res.queuedMessages ?? EMPTY_QUEUED_MESSAGES
 
       interactionRequestRef.current = restoredInteraction
       setInteractionRequest(restoredInteraction)
+      setQueuedMessages(nextQueuedMessages)
       setErrorState(nextErrorState)
 
       for (const data of events) {
@@ -192,6 +198,7 @@ export function useChatSessionMessages({
       updateSessionViewCache(sessionId, {
         messages: currentMessages,
         sessionInfo: currentSessionInfo,
+        queuedMessages: nextQueuedMessages,
         errorState: nextErrorState,
         interactionRequest: restoredInteraction,
         isHydrated: true
@@ -238,6 +245,7 @@ export function useChatSessionMessages({
     if (session?.id == null || session.id === '') {
       setMessagesState([])
       setSessionInfo(null)
+      setQueuedMessages(EMPTY_QUEUED_MESSAGES)
       setIsReady(true)
       setErrorState(null)
       setInteractionRequest(null)
@@ -255,12 +263,14 @@ export function useChatSessionMessages({
 
     setMessagesState(restoredState.messages)
     setSessionInfo(restoredState.sessionInfo)
+    setQueuedMessages(restoredState.queuedMessages)
     setErrorState(restoredState.errorState)
     setInteractionRequest(restoredState.interactionRequest)
     interactionRequestRef.current = restoredState.interactionRequest
     setIsReady(restoredState.isReady)
     isInitialLoadRef.current = !restoredState.isReady
 
+    void refreshHistory()
     void refreshHistory()
 
     return () => {
@@ -414,6 +424,14 @@ export function useChatSessionMessages({
             return
           }
 
+          if (data.type === 'session_queue_updated') {
+            setQueuedMessages(data.queue)
+            updateSessionViewCache(session.id, {
+              queuedMessages: data.queue
+            })
+            return
+          }
+
           if (data.type === 'message') {
             setMessages((current) => applyMessageEvent(current, data))
             return
@@ -513,6 +531,7 @@ export function useChatSessionMessages({
     messages: messagesState,
     setMessages,
     sessionInfo,
+    queuedMessages,
     isReady,
     errorState,
     retryConnection,

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

@@ -44,6 +44,7 @@ export function useChatSession({
     messages,
     setMessages,
     sessionInfo,
+    queuedMessages,
     isReady,
     errorState,
     retryConnection,
@@ -110,6 +111,7 @@ export function useChatSession({
   return {
     messages,
     sessionInfo,
+    queuedMessages,
     interactionRequest,
     isReady,
     errorState,

package/src/hooks/use-responsive-layout.ts

@@ -0,0 +1,115 @@
+import { useSyncExternalStore } from 'react'
+
+const COMPACT_LAYOUT_QUERY = '(max-width: 960px)'
+const TOUCH_INTERACTION_QUERY = '(hover: none), (pointer: coarse)'
+
+export interface ResponsiveLayoutState {
+  isCompactLayout: boolean
+  isTouchInteraction: boolean
+}
+
+const DEFAULT_RESPONSIVE_LAYOUT: ResponsiveLayoutState = {
+  isCompactLayout: false,
+  isTouchInteraction: false
+}
+
+const listeners = new Set<() => void>()
+
+let compactMediaQuery: MediaQueryList | null = null
+let touchMediaQuery: MediaQueryList | null = null
+let currentSnapshot = DEFAULT_RESPONSIVE_LAYOUT
+let mediaListenersInstalled = false
+let removeMediaQueryListeners: (() => void) | null = null
+
+const getMediaQueryMatch = (query: string) => {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    return false
+  }
+
+  return window.matchMedia(query).matches
+}
+
+const readResponsiveLayoutSnapshot = (): ResponsiveLayoutState => ({
+  isCompactLayout: compactMediaQuery?.matches ?? getMediaQueryMatch(COMPACT_LAYOUT_QUERY),
+  isTouchInteraction: touchMediaQuery?.matches ?? getMediaQueryMatch(TOUCH_INTERACTION_QUERY)
+})
+
+const isSameResponsiveLayoutSnapshot = (
+  left: ResponsiveLayoutState,
+  right: ResponsiveLayoutState
+) => left.isCompactLayout === right.isCompactLayout && left.isTouchInteraction === right.isTouchInteraction
+
+const refreshResponsiveLayoutSnapshot = () => {
+  const nextSnapshot = readResponsiveLayoutSnapshot()
+  if (!isSameResponsiveLayoutSnapshot(currentSnapshot, nextSnapshot)) {
+    currentSnapshot = nextSnapshot
+  }
+
+  return currentSnapshot
+}
+
+const emitIfChanged = () => {
+  const nextSnapshot = readResponsiveLayoutSnapshot()
+  if (isSameResponsiveLayoutSnapshot(currentSnapshot, nextSnapshot)) {
+    return
+  }
+
+  currentSnapshot = nextSnapshot
+  listeners.forEach(listener => listener())
+}
+
+const addMediaQueryListener = (mediaQuery: MediaQueryList, listener: () => void) => {
+  if (typeof mediaQuery.addEventListener === 'function') {
+    mediaQuery.addEventListener('change', listener)
+    return () => mediaQuery.removeEventListener('change', listener)
+  }
+
+  mediaQuery.addListener(listener)
+  return () => mediaQuery.removeListener(listener)
+}
+
+const ensureResponsiveLayoutListeners = () => {
+  if (
+    mediaListenersInstalled ||
+    typeof window === 'undefined' ||
+    typeof window.matchMedia !== 'function'
+  ) {
+    return
+  }
+
+  compactMediaQuery = window.matchMedia(COMPACT_LAYOUT_QUERY)
+  touchMediaQuery = window.matchMedia(TOUCH_INTERACTION_QUERY)
+  currentSnapshot = refreshResponsiveLayoutSnapshot()
+  const removeCompactMediaQueryListener = addMediaQueryListener(compactMediaQuery, emitIfChanged)
+  const removeTouchMediaQueryListener = addMediaQueryListener(touchMediaQuery, emitIfChanged)
+  removeMediaQueryListeners = () => {
+    removeCompactMediaQueryListener()
+    removeTouchMediaQueryListener()
+    compactMediaQuery = null
+    touchMediaQuery = null
+    mediaListenersInstalled = false
+  }
+  mediaListenersInstalled = true
+}
+
+const subscribeResponsiveLayout = (listener: () => void) => {
+  ensureResponsiveLayoutListeners()
+  listeners.add(listener)
+  return () => {
+    listeners.delete(listener)
+    if (listeners.size === 0) {
+      removeMediaQueryListeners?.()
+      removeMediaQueryListeners = null
+    }
+  }
+}
+
+const getResponsiveLayoutSnapshot = () => refreshResponsiveLayoutSnapshot()
+
+export function useResponsiveLayout() {
+  return useSyncExternalStore(
+    subscribeResponsiveLayout,
+    getResponsiveLayoutSnapshot,
+    () => DEFAULT_RESPONSIVE_LAYOUT
+  )
+}

package/src/main.tsx

@@ -16,6 +16,14 @@ import { getClientBase, resolveDevDocumentTitle } from '#~/runtime-config.js'
 
 import App from './App'
 
+const gitRefLabel = import.meta.env.__VF_PROJECT_AI_GIT_REF_LABEL__ ?? ''
+
+const appTitle = import.meta.env.DEV && gitRefLabel !== ''
+  ? `Vibe Forge Web [${gitRefLabel}]`
+  : 'Vibe Forge Web'
+
+document.title = appTitle
+
 const root = createRoot(document.getElementById('root')!)
 
 const clientBase = getClientBase()

package/src/resources/adapters.ts

@@ -3,6 +3,9 @@ import {
   adapterIcon as claudeCodeIcon
 } from '@vibe-forge/adapter-claude-code/icon'
 import { adapterDisplayName as codexDisplayName, adapterIcon as codexIcon } from '@vibe-forge/adapter-codex/icon'
+import { adapterDisplayName as copilotDisplayName, adapterIcon as copilotIcon } from '@vibe-forge/adapter-copilot/icon'
+import { adapterDisplayName as geminiDisplayName, adapterIcon as geminiIcon } from '@vibe-forge/adapter-gemini/icon'
+import { adapterDisplayName as kimiDisplayName, adapterIcon as kimiIcon } from '@vibe-forge/adapter-kimi/icon'
 import {
   adapterDisplayName as opencodeDisplayName,
   adapterIcon as opencodeIcon
@@ -17,6 +20,18 @@ export const adapterDisplayMap = {
     title: codexDisplayName,
     icon: codexIcon
   },
+  copilot: {
+    title: copilotDisplayName,
+    icon: copilotIcon
+  },
+  gemini: {
+    title: geminiDisplayName,
+    icon: geminiIcon
+  },
+  kimi: {
+    title: kimiDisplayName,
+    icon: kimiIcon
+  },
   opencode: {
     title: opencodeDisplayName,
     icon: opencodeIcon