@vibe-forge/client 3.0.0-alpha.6 → 3.0.0-alpha.7

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

@@ -1,183 +0,0 @@
-import { useAtomValue } from 'jotai'
-import { useCallback, useEffect, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import type { Session } from '@vibe-forge/core'
-
-import { optimisticSessionCreationsAtom } from './optimistic-session-creation'
-import { useChatAdapterAccountSelection } from './use-chat-adapter-account-selection'
-import { useChatEffort } from './use-chat-effort'
-import { useChatInteraction } from './use-chat-interaction'
-import { useChatModelAdapterSelection } from './use-chat-model-adapter-selection'
-import { useChatPermissionMode } from './use-chat-permission-mode'
-import { useChatSessionMessages } from './use-chat-session-messages'
-import { useChatView } from './use-chat-view'
-
-export function useChatSession({
-  session
-}: {
-  session?: Session
-}) {
-  const { t } = useTranslation()
-  const optimisticCreations = useAtomValue(optimisticSessionCreationsAtom)
-  const optimisticCreation = session?.id == null || session.id === ''
-    ? undefined
-    : optimisticCreations[session.id]
-  const {
-    adapterOptions,
-    applySessionSelection,
-    modelMenuGroups,
-    selectedAdapter,
-    selectedModel,
-    selectedModelWithService,
-    setSelectedModel,
-    setSelectedAdapter,
-    modelSearchOptions,
-    recommendedModelOptions,
-    servicePreviewModelOptions,
-    toggleRecommendedModel,
-    updatingRecommendedModelValue,
-    hasAvailableModels
-  } = useChatModelAdapterSelection({
-    adapterLocked: session?.id != null
-  })
-  const {
-    accountOptions,
-    selectedAccount,
-    setSelectedAccount,
-    applySessionSelection: applySessionAccountSelection,
-    showAccountSelector
-  } = useChatAdapterAccountSelection({
-    adapter: selectedAdapter,
-    model: selectedModelWithService
-  })
-  const { permissionMode, setPermissionMode, permissionModeOptions } = useChatPermissionMode()
-  const { effort, setEffort, effortOptions } = useChatEffort()
-  const { activeView, isTerminalOpen, setActiveView, setIsTerminalOpen } = useChatView()
-  const { interactionRequest, setInteractionRequest, handleInteractionResponse: submitInteractionResponse } =
-    useChatInteraction({
-      sessionId: session?.id
-    })
-  const {
-    messages,
-    setMessages,
-    sessionInfo,
-    queuedMessages,
-    isReady,
-    errorState,
-    retryConnection,
-    reconcileAfterInteraction
-  } = useChatSessionMessages({
-    session,
-    modelForQuery: selectedModelWithService,
-    effort,
-    permissionMode,
-    adapter: selectedAdapter,
-    account: selectedAccount,
-    optimisticCreation,
-    setInteractionRequest
-  })
-  const handleInteractionResponse = useCallback((id: string, data: string | string[]) => {
-    reconcileAfterInteraction()
-    submitInteractionResponse(id, data)
-  }, [reconcileAfterInteraction, submitInteractionResponse])
-  const lastObservedSessionRef = useRef<
-    Pick<Session, 'id' | 'model' | 'permissionMode' | 'adapter' | 'account' | 'effort'> | null
-  >(
-    null
-  )
-  const isThinking = session?.status === 'running'
-
-  useEffect(() => {
-    if (session?.id == null || session.id === '') {
-      lastObservedSessionRef.current = null
-      return
-    }
-
-    const previous = lastObservedSessionRef.current
-    const sessionChanged = previous?.id !== session.id
-
-    if (sessionChanged || previous?.model !== session.model || previous?.adapter !== session.adapter) {
-      applySessionSelection({
-        model: session.model,
-        adapter: session.adapter
-      })
-    }
-
-    if (sessionChanged || previous?.account !== session.account) {
-      applySessionAccountSelection({
-        account: session.account
-      })
-    }
-
-    if (sessionChanged || previous?.permissionMode !== session.permissionMode) {
-      setPermissionMode(session.permissionMode)
-    }
-
-    if (sessionChanged || previous?.effort !== session.effort) {
-      setEffort(session.effort)
-    }
-
-    lastObservedSessionRef.current = {
-      id: session.id,
-      model: session.model,
-      permissionMode: session.permissionMode,
-      adapter: session.adapter,
-      account: session.account,
-      effort: session.effort
-    }
-  }, [
-    applySessionAccountSelection,
-    session?.adapter,
-    session?.account,
-    session?.effort,
-    session?.id,
-    session?.model,
-    session?.permissionMode,
-    applySessionSelection,
-    setEffort,
-    setPermissionMode
-  ])
-
-  return {
-    messages,
-    sessionInfo,
-    queuedMessages,
-    interactionRequest,
-    isReady,
-    errorState,
-    retryConnection,
-    isThinking,
-    activeView,
-    isTerminalOpen,
-    setActiveView,
-    setIsTerminalOpen,
-    handleInteractionResponse,
-    setMessages,
-    placeholder: !session?.id ? t('chat.newSessionPlaceholder') : undefined,
-    modelMenuGroups,
-    modelSearchOptions,
-    recommendedModelOptions,
-    servicePreviewModelOptions,
-    toggleRecommendedModel,
-    updatingRecommendedModelValue,
-    selectedModel,
-    modelForQuery: selectedModelWithService,
-    setSelectedModel,
-    effort,
-    setEffort,
-    effortOptions,
-    permissionMode,
-    setPermissionMode,
-    permissionModeOptions,
-    selectedAdapter,
-    setSelectedAdapter,
-    selectedAccount,
-    setSelectedAccount,
-    accountOptions,
-    showAccountSelector,
-    adapterOptions,
-    hasAvailableModels,
-    modelUnavailable: !hasAvailableModels
-  }
-}

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

@@ -1,59 +0,0 @@
-import { useCallback, useEffect } from 'react'
-
-import type { ChatHeaderView } from '#~/components/chat/ChatHeader.js'
-import { useQueryParams } from '#~/hooks/useQueryParams.js'
-
-const normalizeView = (value: string): ChatHeaderView => {
-  if (value === 'timeline' || value === 'settings' || value === 'history') {
-    return value
-  }
-  return 'history'
-}
-
-export function useChatView() {
-  const { values: queryValues, update: updateQuery } = useQueryParams<{ terminal: string; view: string }>({
-    keys: ['view', 'terminal'],
-    defaults: {
-      view: 'history',
-      terminal: ''
-    },
-    omit: {
-      view: (value) => value === 'history',
-      terminal: (value) => value === '' || value === 'false'
-    }
-  })
-
-  const legacyTerminalView = queryValues.view === 'terminal'
-  const activeView = normalizeView(legacyTerminalView ? 'history' : queryValues.view)
-  const isTerminalOpen = queryValues.terminal === 'true' || legacyTerminalView
-
-  const setActiveView = useCallback((view: ChatHeaderView) => {
-    updateQuery({ view })
-  }, [updateQuery])
-
-  const setIsTerminalOpen = useCallback((nextOpen: boolean) => {
-    updateQuery({ terminal: nextOpen ? 'true' : 'false' })
-  }, [updateQuery])
-
-  useEffect(() => {
-    if (activeView !== queryValues.view) {
-      updateQuery({ view: activeView })
-    }
-  }, [activeView, queryValues.view, updateQuery])
-
-  useEffect(() => {
-    if (legacyTerminalView) {
-      updateQuery({
-        view: 'history',
-        terminal: 'true'
-      })
-    }
-  }, [legacyTerminalView, updateQuery])
-
-  return {
-    activeView,
-    isTerminalOpen,
-    setActiveView,
-    setIsTerminalOpen
-  }
-}

package/src/hooks/chat/use-composer-control-shortcuts.ts

@@ -1,69 +0,0 @@
-import { useMemo } from 'react'
-
-import type { Config } from '@vibe-forge/types'
-
-import { useGlobalShortcut } from '../useGlobalShortcut'
-
-type ComposerShortcutConfig = NonNullable<Config['shortcuts']>
-
-export const composerControlShortcutDefaults = {
-  switchModel: 'mod+shift+m',
-  switchEffort: 'mod+t',
-  switchPermissionMode: 'mod+p'
-} satisfies Pick<ComposerShortcutConfig, 'switchModel' | 'switchEffort' | 'switchPermissionMode'>
-
-export const resolveComposerControlShortcuts = (
-  shortcuts?: Config['shortcuts']
-) => {
-  const resolveShortcut = (value: string | undefined, fallback: string) => {
-    return value != null && value.trim() !== '' ? value : fallback
-  }
-
-  return {
-    switchModel: resolveShortcut(shortcuts?.switchModel, composerControlShortcutDefaults.switchModel),
-    switchEffort: resolveShortcut(shortcuts?.switchEffort, composerControlShortcutDefaults.switchEffort),
-    switchPermissionMode: resolveShortcut(
-      shortcuts?.switchPermissionMode,
-      composerControlShortcutDefaults.switchPermissionMode
-    )
-  }
-}
-
-export const useComposerControlShortcuts = ({
-  enabled = true,
-  isMac,
-  shortcuts,
-  onSwitchModel,
-  onSwitchEffort,
-  onSwitchPermissionMode
-}: {
-  enabled?: boolean
-  isMac: boolean
-  shortcuts?: Config['shortcuts']
-  onSwitchModel: (event: KeyboardEvent) => void
-  onSwitchEffort: (event: KeyboardEvent) => void
-  onSwitchPermissionMode: (event: KeyboardEvent) => void
-}) => {
-  const resolvedShortcuts = useMemo(() => resolveComposerControlShortcuts(shortcuts), [shortcuts])
-
-  useGlobalShortcut({
-    shortcut: resolvedShortcuts.switchModel,
-    enabled,
-    isMac,
-    onTrigger: onSwitchModel
-  })
-  useGlobalShortcut({
-    shortcut: resolvedShortcuts.switchEffort,
-    enabled,
-    isMac,
-    onTrigger: onSwitchEffort
-  })
-  useGlobalShortcut({
-    shortcut: resolvedShortcuts.switchPermissionMode,
-    enabled,
-    isMac,
-    onTrigger: onSwitchPermissionMode
-  })
-
-  return resolvedShortcuts
-}

package/src/hooks/chat/use-terminal-dock-visibility.ts

@@ -1,39 +0,0 @@
-import { useEffect, useState } from 'react'
-
-const TERMINAL_EXIT_ANIMATION_MS = 240
-
-export function useTerminalDockVisibility(isOpen: boolean) {
-  const [isRendered, setIsRendered] = useState(isOpen)
-  const [isVisible, setIsVisible] = useState(isOpen)
-
-  useEffect(() => {
-    if (isOpen) {
-      setIsRendered(true)
-      const timeoutId = window.setTimeout(() => {
-        setIsVisible(true)
-      }, 0)
-      return () => {
-        window.clearTimeout(timeoutId)
-      }
-    }
-
-    setIsVisible(false)
-
-    if (!isRendered) {
-      return
-    }
-
-    const timeoutId = window.setTimeout(() => {
-      setIsRendered(false)
-    }, TERMINAL_EXIT_ANIMATION_MS)
-
-    return () => {
-      window.clearTimeout(timeoutId)
-    }
-  }, [isOpen, isRendered])
-
-  return {
-    isRendered,
-    isVisible
-  }
-}

package/src/hooks/chat/workspace-file-panel-state.ts

@@ -1,43 +0,0 @@
-import type { SessionWorkspaceFileState } from '@vibe-forge/core'
-
-export interface WorkspaceFilePanelState {
-  openPaths: string[]
-  selectedPath: string | null
-  isOpen: boolean
-}
-
-export const uniqueNonEmptyPaths = (paths: Array<string | null | undefined>) => {
-  const result: string[] = []
-  const seen = new Set<string>()
-  for (const path of paths) {
-    const trimmed = path?.trim()
-    if (trimmed == null || trimmed === '' || seen.has(trimmed)) continue
-    seen.add(trimmed)
-    result.push(trimmed)
-  }
-  return result
-}
-
-export const normalizeWorkspaceFileState = (
-  state: SessionWorkspaceFileState | WorkspaceFilePanelState | undefined
-): WorkspaceFilePanelState => {
-  const selectedPath = state?.selectedPath?.trim() || null
-  const openPaths = uniqueNonEmptyPaths([
-    ...(state?.openPaths ?? []),
-    selectedPath
-  ])
-  const normalizedSelectedPath = selectedPath != null && openPaths.includes(selectedPath)
-    ? selectedPath
-    : openPaths.at(0) ?? null
-  return {
-    openPaths,
-    selectedPath: normalizedSelectedPath,
-    isOpen: state?.isOpen === true && normalizedSelectedPath != null
-  }
-}
-
-export const toSessionWorkspaceFileState = (state: WorkspaceFilePanelState): SessionWorkspaceFileState => ({
-  openPaths: state.openPaths,
-  ...(state.selectedPath == null ? {} : { selectedPath: state.selectedPath }),
-  isOpen: state.isOpen
-})

package/src/hooks/session-subscription-cache.ts

@@ -1,25 +0,0 @@
-import type { ScopedMutator } from 'swr'
-
-const isAdapterConfigCacheKey = (key: unknown) => {
-  if (Array.isArray(key)) {
-    return key[0] === '/api/adapters'
-  }
-
-  return typeof key === 'string' && key.startsWith('/api/adapters/')
-}
-
-export const isConfigRelatedDerivedCacheKey = (key: unknown) => {
-  if (Array.isArray(key)) {
-    return key[0] === 'worktree-environment' || key[0] === '/api/adapters'
-  }
-
-  return isAdapterConfigCacheKey(key)
-}
-
-export async function revalidateConfigRelatedCaches(mutate: ScopedMutator) {
-  await Promise.all([
-    mutate('/api/config'),
-    mutate('worktree-environments'),
-    mutate(isConfigRelatedDerivedCacheKey)
-  ])
-}

package/src/hooks/use-app-preferences.ts

@@ -1,51 +0,0 @@
-import { theme } from 'antd'
-import { useAtomValue } from 'jotai'
-import { useEffect, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
-
-import type { ConfigResponse } from '@vibe-forge/types'
-
-import { getConfig } from '#~/api'
-import { themeAtom } from '#~/store'
-
-interface AppPreferences {
-  isDarkMode: boolean
-  themeConfig: {
-    algorithm: typeof theme.darkAlgorithm | typeof theme.defaultAlgorithm
-    token: {
-      colorPrimary: string
-    }
-  }
-}
-
-export function useAppPreferences(): AppPreferences {
-  const { i18n } = useTranslation()
-  const themeMode = useAtomValue(themeAtom)
-  const { data: configRes } = useSWR<ConfigResponse>('/api/config', getConfig)
-  const interfaceLanguage = configRes?.sources?.merged?.general?.interfaceLanguage
-  const isDarkMode = themeMode === 'dark' ||
-    (themeMode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
-
-  useEffect(() => {
-    document.documentElement.classList.toggle('dark', isDarkMode)
-  }, [isDarkMode])
-
-  useEffect(() => {
-    if (interfaceLanguage && i18n.language !== interfaceLanguage) {
-      void i18n.changeLanguage(interfaceLanguage)
-    }
-  }, [i18n, interfaceLanguage])
-
-  const themeConfig = useMemo(() => ({
-    algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
-    token: {
-      colorPrimary: isDarkMode ? '#3b82f6' : '#000000'
-    }
-  }), [isDarkMode])
-
-  return {
-    isDarkMode,
-    themeConfig
-  }
-}

package/src/hooks/use-chat-layout-query-state.ts

@@ -1,29 +0,0 @@
-import { useQueryParams } from '#~/hooks/useQueryParams.js'
-
-type ChatLayoutMode = 'workspace'
-
-const toChatLayoutMode = (value: string): ChatLayoutMode | undefined => {
-  return value === 'workspace' ? value : undefined
-}
-
-export function useChatLayoutQueryState() {
-  const { values, update } = useQueryParams<{
-    layout: string
-  }>({
-    keys: ['layout'],
-    defaults: {
-      layout: ''
-    },
-    omit: {
-      layout: value => value === ''
-    }
-  })
-
-  const activeLayout = toChatLayoutMode(values.layout)
-
-  return {
-    activeLayout,
-    isWorkspaceDrawerOpen: activeLayout === 'workspace',
-    setWorkspaceDrawerOpen: (open: boolean) => update({ layout: open ? 'workspace' : '' })
-  }
-}

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

@@ -1,115 +0,0 @@
-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
-  )
-}