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

package/src/hooks/use-roving-focus-list.ts

@@ -1,104 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-
-export const getLoopedIndex = (
-  currentIndex: number,
-  delta: number,
-  itemCount: number
-) => {
-  if (itemCount <= 0) {
-    return -1
-  }
-
-  const nextIndex = (currentIndex + delta) % itemCount
-  return nextIndex < 0 ? nextIndex + itemCount : nextIndex
-}
-
-export const useRovingFocusList = <T extends string>(
-  keys: T[],
-  initialKey?: T | null
-) => {
-  const itemRefs = useRef(new Map<T, HTMLElement>())
-  const [activeKey, setActiveKey] = useState<T | null>(() => {
-    if (initialKey != null && keys.includes(initialKey)) {
-      return initialKey
-    }
-    return keys[0] ?? null
-  })
-
-  useEffect(() => {
-    if (keys.length === 0) {
-      setActiveKey(null)
-      return
-    }
-
-    if (activeKey != null && keys.includes(activeKey)) {
-      return
-    }
-
-    if (initialKey != null && keys.includes(initialKey)) {
-      setActiveKey(initialKey)
-      return
-    }
-
-    setActiveKey(keys[0] ?? null)
-  }, [activeKey, initialKey, keys])
-
-  const registerItem = useCallback((key: T) => {
-    return (node: HTMLElement | null) => {
-      if (node == null) {
-        itemRefs.current.delete(key)
-        return
-      }
-      itemRefs.current.set(key, node)
-    }
-  }, [])
-
-  const focusKey = useCallback((key: T | null) => {
-    if (key == null) {
-      return
-    }
-    setActiveKey(key)
-    itemRefs.current.get(key)?.focus()
-  }, [])
-
-  const keyIndexMap = useMemo(() => {
-    return new Map(keys.map((key, index) => [key, index]))
-  }, [keys])
-
-  const moveFocus = useCallback((delta: number, fromKey?: T | null) => {
-    if (keys.length === 0) {
-      return null
-    }
-
-    const sourceKey = fromKey ?? activeKey ?? keys[0] ?? null
-    const sourceIndex = sourceKey == null ? 0 : (keyIndexMap.get(sourceKey) ?? 0)
-    const nextIndex = getLoopedIndex(sourceIndex, delta, keys.length)
-    const nextKey = keys[nextIndex] ?? null
-    if (nextKey != null) {
-      focusKey(nextKey)
-    }
-    return nextKey
-  }, [activeKey, focusKey, keyIndexMap, keys])
-
-  const focusFirst = useCallback(() => {
-    const firstKey = keys[0] ?? null
-    focusKey(firstKey)
-    return firstKey
-  }, [focusKey, keys])
-
-  const focusLast = useCallback(() => {
-    const lastKey = keys.at(-1) ?? null
-    focusKey(lastKey)
-    return lastKey
-  }, [focusKey, keys])
-
-  return {
-    activeKey,
-    setActiveKey,
-    registerItem,
-    focusKey,
-    moveFocus,
-    focusFirst,
-    focusLast
-  }
-}

package/src/hooks/use-sender-header-query-state.ts

@@ -1,35 +0,0 @@
-import { useAtomValue } from 'jotai'
-
-import { useQueryParams } from '#~/hooks/useQueryParams.js'
-import { senderHeaderDisplayAtom } from '#~/store/index.js'
-
-const isSenderHeaderQueryValue = (
-  value: string | null
-): value is 'collapsed' | 'expanded' => {
-  return value === 'collapsed' || value === 'expanded'
-}
-
-export function useSenderHeaderQueryState() {
-  const senderHeaderDisplay = useAtomValue(senderHeaderDisplayAtom)
-  const { update, searchParams } = useQueryParams<{
-    senderHeader: string
-  }>({
-    keys: ['senderHeader'],
-    defaults: {
-      senderHeader: ''
-    },
-    omit: {
-      senderHeader: value => value === ''
-    }
-  })
-
-  const rawSenderHeader = searchParams.get('senderHeader')
-  const senderHeaderState = isSenderHeaderQueryValue(rawSenderHeader)
-    ? rawSenderHeader
-    : senderHeaderDisplay
-
-  return {
-    isHeaderCollapsed: senderHeaderState === 'collapsed',
-    setHeaderCollapsed: (collapsed: boolean) => update({ senderHeader: collapsed ? 'collapsed' : 'expanded' })
-  }
-}

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

@@ -1,144 +0,0 @@
-import { useEffect } from 'react'
-import { useSWRConfig } from 'swr'
-
-import type { Session, WSEvent } from '@vibe-forge/core'
-
-import { revalidateConfigRelatedCaches } from '#~/hooks/session-subscription-cache'
-import { createSocket } from '#~/ws.js'
-
-interface SessionListResponse {
-  sessions: Session[]
-}
-interface DeletedSessionUpdate {
-  id: string
-  isDeleted: boolean
-}
-type SessionUpdate = Session | DeletedSessionUpdate
-
-const isDeletedSessionUpdate = (update: SessionUpdate): update is DeletedSessionUpdate => {
-  return 'isDeleted' in update && update.isDeleted
-}
-
-const sortSessions = (sessions: Session[]) => {
-  return [...sessions].sort((a, b) => {
-    const starredDelta = Number(b.isStarred === true) - Number(a.isStarred === true)
-    if (starredDelta !== 0) return starredDelta
-    return (b.createdAt ?? 0) - (a.createdAt ?? 0)
-  })
-}
-
-const mergeSessionList = (
-  prev: SessionListResponse | undefined,
-  updatedSession: SessionUpdate,
-  filter: 'active' | 'archived'
-) => {
-  if (prev?.sessions == null) return prev
-
-  if (isDeletedSessionUpdate(updatedSession)) {
-    return {
-      ...prev,
-      sessions: prev.sessions.filter((session) => session.id !== updatedSession.id)
-    }
-  }
-
-  const session = updatedSession
-  const shouldInclude = filter === 'archived'
-    ? session.isArchived === true
-    : session.isArchived !== true
-  const existing = prev.sessions.find((session) => session.id === updatedSession.id)
-
-  if (!shouldInclude) {
-    return {
-      ...prev,
-      sessions: prev.sessions.filter((session) => session.id !== updatedSession.id)
-    }
-  }
-
-  const nextSessions = existing
-    ? prev.sessions.map((currentSession) =>
-      currentSession.id === updatedSession.id ? { ...currentSession, ...session } : currentSession
-    )
-    : [session, ...prev.sessions]
-
-  return {
-    ...prev,
-    sessions: sortSessions(nextSessions)
-  }
-}
-
-export function useSessionSubscription() {
-  const { mutate } = useSWRConfig()
-
-  useEffect(() => {
-    let disposed = false
-    let socket: WebSocket | undefined
-    let connectTimer: ReturnType<typeof setTimeout> | undefined
-
-    const closeSocket = (target: WebSocket | undefined) => {
-      if (!target) return
-      if (target.readyState === WebSocket.CLOSED || target.readyState === WebSocket.CLOSING) {
-        return
-      }
-      if (target.readyState === WebSocket.CONNECTING) {
-        target.addEventListener('open', () => target.close(), { once: true })
-        return
-      }
-      target.close()
-    }
-
-    const scheduleConnect = (delay = 0) => {
-      if (disposed) return
-      if (connectTimer) {
-        clearTimeout(connectTimer)
-      }
-      connectTimer = setTimeout(() => {
-        connectTimer = undefined
-        connect()
-      }, delay)
-    }
-
-    const connect = () => {
-      if (disposed) return
-
-      socket = createSocket({
-        onMessage: (data: WSEvent) => {
-          if (disposed) return
-
-          if (data.type === 'session_updated') {
-            const updatedSession = data.session as SessionUpdate
-
-            void mutate('/api/sessions', (prev: SessionListResponse | undefined) => {
-              return mergeSessionList(prev, updatedSession, 'active')
-            }, false)
-
-            void mutate('/api/sessions/archived', (prev: SessionListResponse | undefined) => {
-              return mergeSessionList(prev, updatedSession, 'archived')
-            }, false)
-            return
-          }
-
-          if (data.type === 'config_updated') {
-            void revalidateConfigRelatedCaches(mutate)
-          }
-        },
-        onClose: () => {
-          if (disposed) return
-          scheduleConnect(1000)
-        },
-        onError: () => {
-          closeSocket(socket)
-        }
-      }, { subscribe: 'sessions' })
-    }
-
-    scheduleConnect()
-
-    return () => {
-      disposed = true
-      if (connectTimer) {
-        clearTimeout(connectTimer)
-      }
-      closeSocket(socket)
-    }
-  }, [mutate])
-}

package/src/hooks/use-sidebar-navigation.ts

@@ -1,40 +0,0 @@
-import { useAtomValue } from 'jotai'
-import { useCallback } from 'react'
-import { matchPath, useLocation, useNavigate } from 'react-router-dom'
-
-import type { Session } from '@vibe-forge/core'
-
-import { sidebarWidthAtom } from '#~/store'
-
-const SESSION_ROUTE_PATTERN = '/session/:sessionId'
-
-export function useSidebarNavigation() {
-  const navigate = useNavigate()
-  const location = useLocation()
-  const sidebarWidth = useAtomValue(sidebarWidthAtom)
-  const sessionMatch = matchPath({ path: SESSION_ROUTE_PATTERN, end: true }, location.pathname)
-  const activeSessionId = sessionMatch?.params.sessionId
-  const showSidebar = location.pathname === '/' || activeSessionId != null
-
-  const getNavigationTarget = useCallback((pathname: string) => ({
-    pathname,
-    search: location.search
-  }), [location.search])
-
-  const handleSelectSession = useCallback((session: Session, _isNew?: boolean) => {
-    void navigate(getNavigationTarget(session.id === '' ? '/' : `/session/${session.id}`))
-  }, [getNavigationTarget, navigate])
-
-  const handleDeletedSession = useCallback((deletedId: string, nextId?: string) => {
-    if (activeSessionId !== deletedId) return
-    void navigate(getNavigationTarget(nextId ? `/session/${nextId}` : '/'))
-  }, [activeSessionId, getNavigationTarget, navigate])
-
-  return {
-    activeSessionId,
-    handleDeletedSession,
-    handleSelectSession,
-    showSidebar,
-    sidebarWidth
-  }
-}

package/src/hooks/use-sidebar-query-state.ts

@@ -1,79 +0,0 @@
-import { useMemo } from 'react'
-
-import { useQueryParams } from '#~/hooks/useQueryParams.js'
-
-export type SidebarSessionSortOrder = 'asc' | 'desc'
-
-const splitFilterValues = (raw: string) => {
-  return Array.from(
-    new Set(
-      raw
-        .split(',')
-        .map((value) => value.trim())
-        .filter(Boolean)
-    )
-  )
-}
-
-const joinFilterValues = (values: string[]) => {
-  return Array.from(
-    new Set(
-      values
-        .map((value) => value.trim())
-        .filter(Boolean)
-    )
-  ).join(',')
-}
-
-export function useSidebarQueryState() {
-  const { values, update } = useQueryParams<{
-    adapter: string
-    search: string
-    sort: string
-    sidebar: string
-    tag: string
-  }>({
-    keys: ['sidebar', 'search', 'tag', 'adapter', 'sort'],
-    defaults: {
-      sidebar: '',
-      search: '',
-      tag: '',
-      adapter: '',
-      sort: ''
-    },
-    omit: {
-      sidebar: (value) => value === '',
-      search: (value) => value === '',
-      tag: (value) => value === '',
-      adapter: (value) => value === '',
-      sort: (value) => value === ''
-    }
-  })
-
-  const tagFilters = useMemo(() => splitFilterValues(values.tag), [values.tag])
-  const adapterFilters = useMemo(() => splitFilterValues(values.adapter), [values.adapter])
-  const searchQuery = values.search
-  const sortSelection: SidebarSessionSortOrder | undefined = values.sort === 'asc' || values.sort === 'desc'
-    ? values.sort
-    : undefined
-  const sortOrder: SidebarSessionSortOrder = sortSelection ?? 'desc'
-  const isSidebarCollapsed = values.sidebar === 'collapsed'
-  const hasActiveFilterConditions = searchQuery.trim() !== '' || tagFilters.length > 0 || adapterFilters.length > 0
-  const hasActiveSearchControls = hasActiveFilterConditions || sortSelection != null
-
-  return {
-    adapterFilters,
-    hasActiveFilterConditions,
-    hasActiveSearchControls,
-    isSidebarCollapsed,
-    searchQuery,
-    setSortOrder: (sort?: SidebarSessionSortOrder) => update({ sort: sort ?? '' }),
-    setAdapterFilters: (filters: string[]) => update({ adapter: joinFilterValues(filters) }),
-    setSearchQuery: (search: string) => update({ search }),
-    setSidebarCollapsed: (collapsed: boolean) => update({ sidebar: collapsed ? 'collapsed' : '' }),
-    setTagFilters: (filters: string[]) => update({ tag: joinFilterValues(filters) }),
-    sortOrder,
-    sortSelection,
-    tagFilters
-  }
-}

package/src/hooks/useGlobalShortcut.ts

@@ -1,26 +0,0 @@
-import { useEffect } from 'react'
-
-import { isShortcutMatch } from '../utils/shortcutUtils'
-
-export const useGlobalShortcut = ({
-  shortcut,
-  enabled = true,
-  isMac,
-  onTrigger
-}: {
-  shortcut?: string
-  enabled?: boolean
-  isMac: boolean
-  onTrigger: (event: KeyboardEvent) => void
-}) => {
-  useEffect(() => {
-    if (!enabled) return
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (isShortcutMatch(event, shortcut, isMac)) {
-        onTrigger(event)
-      }
-    }
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [enabled, isMac, onTrigger, shortcut])
-}

package/src/hooks/useQueryParams.ts

@@ -1,124 +0,0 @@
-import { useCallback, useMemo } from 'react'
-import { useNavigate, useSearchParams } from 'react-router-dom'
-
-import { getClientBase } from '#~/runtime-config.js'
-
-type QueryParamKey<T> = Extract<keyof T, string>
-
-interface QueryParamConfig<T extends Record<string, string>> {
-  keys: QueryParamKey<T>[]
-  defaults?: Partial<T>
-  omit?: Partial<Record<QueryParamKey<T>, (value: string) => boolean>>
-}
-
-export const resolveQueryParamPathname = (rawPathname: string, clientBase: string) => {
-  if (!rawPathname.startsWith(clientBase)) {
-    return rawPathname === '' ? '/' : rawPathname
-  }
-
-  const relativePath = rawPathname.slice(clientBase.length)
-  if (relativePath === '') {
-    return '/'
-  }
-
-  return relativePath.startsWith('/') ? relativePath : `/${relativePath}`
-}
-
-export const buildQueryParamNavigationTarget = <T extends Record<string, string>>({
-  clientBase,
-  currentHash,
-  currentPathname,
-  currentSearch,
-  defaults,
-  keySet,
-  keys,
-  omit,
-  patch
-}: {
-  clientBase: string
-  currentHash: string
-  currentPathname: string
-  currentSearch: string
-  defaults?: Partial<T>
-  keySet: Set<string>
-  keys: QueryParamKey<T>[]
-  omit?: Partial<Record<QueryParamKey<T>, (value: string) => boolean>>
-  patch: Partial<T>
-}) => {
-  const currentSearchParams = new URLSearchParams(currentSearch)
-  const nextParams = new URLSearchParams()
-  const merged = keys.reduce((acc, key) => {
-    const raw = currentSearchParams.get(key)
-    const fallback = defaults?.[key] ?? ''
-    acc[key] = (raw ?? fallback) as T[QueryParamKey<T>]
-    return acc
-  }, {} as T)
-
-  Object.assign(merged, patch)
-
-  keys.forEach((key) => {
-    const value = merged[key] ?? ''
-    const shouldOmit = value === '' || (omit?.[key] ? omit[key]!(value) : false)
-    if (!shouldOmit) nextParams.set(key, value)
-  })
-
-  for (const [key, value] of currentSearchParams.entries()) {
-    if (!keySet.has(key)) nextParams.append(key, value)
-  }
-
-  if (nextParams.toString() === currentSearchParams.toString()) {
-    return null
-  }
-
-  return {
-    pathname: resolveQueryParamPathname(currentPathname, clientBase),
-    search: nextParams.toString() === '' ? '' : `?${nextParams.toString()}`,
-    hash: currentHash
-  }
-}
-
-export const useQueryParams = <T extends Record<string, string>>({
-  keys,
-  defaults,
-  omit
-}: QueryParamConfig<T>) => {
-  const navigate = useNavigate()
-  const [searchParams] = useSearchParams()
-  const keySet = useMemo(() => new Set<string>(keys), [keys])
-
-  const values = useMemo(() => {
-    return keys.reduce((acc, key) => {
-      const raw = searchParams.get(key)
-      const fallback = defaults?.[key] ?? ''
-      acc[key] = (raw ?? fallback) as T[QueryParamKey<T>]
-      return acc
-    }, {} as T)
-  }, [defaults, keys, searchParams])
-
-  const update = useCallback((patch: Partial<T>) => {
-    const currentLocation = typeof window === 'undefined'
-      ? {
-        hash: '',
-        pathname: '/',
-        search: searchParams.toString() === '' ? '' : `?${searchParams.toString()}`
-      }
-      : window.location
-    const target = buildQueryParamNavigationTarget<T>({
-      clientBase: getClientBase(),
-      currentHash: currentLocation.hash,
-      currentPathname: currentLocation.pathname,
-      currentSearch: currentLocation.search,
-      defaults,
-      keySet,
-      keys,
-      omit,
-      patch
-    })
-
-    if (target != null) {
-      void navigate(target, { replace: true })
-    }
-  }, [defaults, keySet, keys, navigate, omit, searchParams])
-
-  return { values, update, searchParams }
-}

package/src/i18n-resources.ts

@@ -1,44 +0,0 @@
-import type { Resource, i18n as I18nInstance } from 'i18next'
-
-export type LocaleMessages = Record<string, unknown>
-
-export interface LocaleModule {
-  default: LocaleMessages
-}
-
-export type LocaleModuleMap = Record<string, LocaleModule>
-
-export const getLocaleCodeFromPath = (path: string) => (
-  path.match(/\/([^/]+)\.json$/)?.[1] ?? path
-)
-
-export const buildTranslationResources = (modules: LocaleModuleMap): Resource => (
-  Object.fromEntries(
-    Object.entries(modules).map(([path, mod]) => [
-      getLocaleCodeFromPath(path),
-      { translation: mod.default }
-    ])
-  )
-)
-
-export const applyHotTranslationUpdates = ({
-  instance,
-  modulePaths,
-  nextModules
-}: {
-  instance: I18nInstance
-  modulePaths: string[]
-  nextModules: Array<LocaleModule | undefined>
-}) => {
-  modulePaths.forEach((path, index) => {
-    const nextModule = nextModules[index]
-    if (nextModule == null) return
-    const localeCode = getLocaleCodeFromPath(path)
-    instance.removeResourceBundle(localeCode, 'translation')
-    instance.addResourceBundle(
-      localeCode,
-      'translation',
-      nextModule.default
-    )
-  })
-}

package/src/i18n.ts

@@ -1,37 +0,0 @@
-import i18n from 'i18next'
-import LanguageDetector from 'i18next-browser-languagedetector'
-import { initReactI18next } from 'react-i18next'
-
-import { applyHotTranslationUpdates, buildTranslationResources } from './i18n-resources'
-import type { LocaleModule, LocaleModuleMap } from './i18n-resources'
-
-const localeModules = import.meta.glob('./resources/locales/*.json', {
-  eager: true
-}) as LocaleModuleMap
-const localeModulePaths = Object.keys(localeModules).sort()
-
-void i18n
-  .use(LanguageDetector)
-  .use(initReactI18next)
-  .init({
-    resources: buildTranslationResources(localeModules),
-    fallbackLng: 'zh',
-    interpolation: {
-      escapeValue: false
-    },
-    react: {
-      bindI18nStore: 'added'
-    }
-  })
-
-if (import.meta.hot) {
-  import.meta.hot.accept(localeModulePaths, (nextModules) => {
-    applyHotTranslationUpdates({
-      instance: i18n,
-      modulePaths: localeModulePaths,
-      nextModules: nextModules as Array<LocaleModule | undefined>
-    })
-  })
-}
-
-export default i18n

package/src/main.tsx

@@ -1,60 +0,0 @@
-import 'devicon/devicon.min.css'
-
-import './styles/material-symbols-rounded.scss'
-import './styles/global.scss'
-import './i18n'
-
-import { App as AntdApp, ConfigProvider } from 'antd'
-import zhCN from 'antd/locale/zh_CN'
-import React from 'react'
-import { createRoot } from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
-import { SWRConfig } from 'swr'
-
-import { fetchApiJson } from '#~/api/base.js'
-import { setupPwa } from '#~/pwa.js'
-import { getClientBase, resolveDevDocumentTitle } from '#~/runtime-config.js'
-import { setupMobileViewport } from '#~/utils/mobile-viewport.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')!)
-
-setupMobileViewport()
-
-const clientBase = getClientBase()
-setupPwa({
-  clientBase,
-  isProd: import.meta.env.PROD
-})
-
-document.title = resolveDevDocumentTitle(document.title, {
-  isDev: import.meta.env.DEV,
-  gitRef: import.meta.env.__VF_PROJECT_AI_DEV_GIT_REF__
-})
-
-root.render(
-  <React.StrictMode>
-    <ConfigProvider locale={zhCN} theme={{ token: { colorPrimary: '#000000' } }}>
-      <AntdApp>
-        <SWRConfig
-          value={{
-            fetcher: async (path: string) => fetchApiJson<unknown>(path)
-          }}
-        >
-          <BrowserRouter basename={clientBase}>
-            <App />
-          </BrowserRouter>
-        </SWRConfig>
-      </AntdApp>
-    </ConfigProvider>
-  </React.StrictMode>
-)