@vibe-forge/client 2.0.0 → 3.0.0-alpha.0

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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,25 @@
+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-chat-layout-query-state.ts

@@ -0,0 +1,29 @@
+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-sender-header-query-state.ts

@@ -0,0 +1,35 @@
+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

@@ -3,6 +3,7 @@ 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 {
@@ -101,16 +102,24 @@ export function useSessionSubscription() {
 
       socket = createSocket({
         onMessage: (data: WSEvent) => {
-          if (disposed || data.type !== 'session_updated') return
-          const updatedSession = data.session as SessionUpdate
+          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', (prev: SessionListResponse | undefined) => {
-            return mergeSessionList(prev, updatedSession, 'active')
-          }, false)
+            void mutate('/api/sessions/archived', (prev: SessionListResponse | undefined) => {
+              return mergeSessionList(prev, updatedSession, 'archived')
+            }, false)
+            return
+          }
 
-          void mutate('/api/sessions/archived', (prev: SessionListResponse | undefined) => {
-            return mergeSessionList(prev, updatedSession, 'archived')
-          }, false)
+          if (data.type === 'config_updated') {
+            void revalidateConfigRelatedCaches(mutate)
+          }
         },
         onClose: () => {
           if (disposed) return

package/src/hooks/useQueryParams.ts

@@ -1,5 +1,7 @@
 import { useCallback, useMemo } from 'react'
-import { useSearchParams } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+
+import { getClientBase } from '#~/runtime-config.js'
 
 type QueryParamKey<T> = Extract<keyof T, string>
 
@@ -9,12 +11,79 @@ interface QueryParamConfig<T extends Record<string, string>> {
   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 [searchParams, setSearchParams] = useSearchParams()
+  const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
   const keySet = useMemo(() => new Set<string>(keys), [keys])
 
   const values = useMemo(() => {
@@ -27,30 +96,29 @@ export const useQueryParams = <T extends Record<string, string>>({
   }, [defaults, keys, searchParams])
 
   const update = useCallback((patch: Partial<T>) => {
-    const nextParams = new URLSearchParams()
-    const merged = 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)
-
-    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)
+    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
     })
 
-    for (const [key, value] of searchParams.entries()) {
-      if (!keySet.has(key)) nextParams.append(key, value)
-    }
-
-    if (nextParams.toString() !== searchParams.toString()) {
-      setSearchParams(nextParams, { replace: true })
+    if (target != null) {
+      void navigate(target, { replace: true })
     }
-  }, [defaults, keySet, keys, omit, searchParams, setSearchParams])
+  }, [defaults, keySet, keys, navigate, omit, searchParams])
 
   return { values, update, searchParams }
 }

package/src/i18n-resources.ts

@@ -0,0 +1,44 @@
+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

@@ -2,21 +2,36 @@ import i18n from 'i18next'
 import LanguageDetector from 'i18next-browser-languagedetector'
 import { initReactI18next } from 'react-i18next'
 
-import en from './resources/locales/en.json'
-import zh from './resources/locales/zh.json'
+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: {
-      zh: { translation: zh },
-      en: { translation: en }
-    },
+    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

@@ -12,7 +12,9 @@ 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'
 
@@ -26,7 +28,13 @@ 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,

package/src/pwa.ts

@@ -0,0 +1,46 @@
+const normalizeBasePath = (clientBase: string) => {
+  const trimmed = clientBase.trim()
+  const withLeadingSlash = trimmed.startsWith('/') ? trimmed : `/${trimmed}`
+  return withLeadingSlash.endsWith('/') ? withLeadingSlash : `${withLeadingSlash}/`
+}
+
+const getServiceWorkerRegistration = (clientBase: string) => {
+  const scope = normalizeBasePath(clientBase)
+  return {
+    scope,
+    url: `${scope}sw.js`
+  }
+}
+
+const unregisterDevServiceWorker = async (scope: string) => {
+  if (typeof navigator.serviceWorker.getRegistrations !== 'function') return
+
+  const scopeUrl = new URL(scope, window.location.origin).href
+  const registrations = await navigator.serviceWorker.getRegistrations()
+  await Promise.all(
+    registrations
+      .filter(registration => registration.scope === scopeUrl)
+      .map(registration => registration.unregister())
+  )
+}
+
+export const setupPwa = (input: {
+  clientBase: string
+  isProd: boolean
+}) => {
+  if (!('serviceWorker' in navigator)) return
+
+  const registration = getServiceWorkerRegistration(input.clientBase)
+  if (!input.isProd) {
+    void unregisterDevServiceWorker(registration.scope)
+    return
+  }
+
+  window.addEventListener('load', () => {
+    void navigator.serviceWorker
+      .register(registration.url, { scope: registration.scope })
+      .catch((error: unknown) => {
+        console.warn('[pwa] service worker registration failed', error)
+      })
+  })
+}