@vibe-forge/client 0.2.0-alpha.0

package/src/components/sidebar/SidebarHeader.tsx

@@ -0,0 +1,128 @@
+import './SidebarHeader.scss'
+
+import { Button, Checkbox, Input, Popconfirm, Tooltip } from 'antd'
+import { useAtom } from 'jotai'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { isSidebarCollapsedAtom } from '#~/store/index.js'
+
+interface SidebarHeaderProps {
+  searchQuery: string
+  onSearchChange: (query: string) => void
+  isBatchMode: boolean
+  onToggleBatchMode: () => void
+  selectedCount: number
+  totalCount: number
+  onSelectAll: (selected: boolean) => void
+  onBatchArchive: () => void
+  isCreatingSession: boolean
+  onCreateSession: () => void
+}
+
+export function SidebarHeader({
+  searchQuery,
+  onSearchChange,
+  isBatchMode,
+  onToggleBatchMode,
+  selectedCount,
+  totalCount,
+  onSelectAll,
+  onBatchArchive,
+  isCreatingSession,
+  onCreateSession
+}: SidebarHeaderProps) {
+  const { t } = useTranslation()
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useAtom(isSidebarCollapsedAtom)
+  const isAllSelected = totalCount > 0 && selectedCount === totalCount
+
+  return (
+    <div className='sidebar-header'>
+      <div className='header-bottom'>
+        {isBatchMode && (
+          <div className='batch-select-wrapper'>
+            <Tooltip title={isAllSelected ? t('common.deselectAll') : t('common.selectAll')}>
+              <Checkbox
+                checked={isAllSelected}
+                indeterminate={selectedCount > 0 && selectedCount < totalCount}
+                onChange={(e) => onSelectAll(e.target.checked)}
+              />
+            </Tooltip>
+          </div>
+        )}
+        <Input
+          className='search-input'
+          placeholder={t('common.search')}
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          prefix={
+            <span className='material-symbols-rounded search-icon'>
+              search
+            </span>
+          }
+          allowClear
+        />
+        <div className='batch-actions'>
+          <Tooltip title={isBatchMode ? t('common.cancelBatch') : t('common.batchMode')}>
+            <Button
+              className={`action-btn ${isBatchMode ? 'active' : ''}`}
+              type={isBatchMode ? 'primary' : 'text'}
+              onClick={onToggleBatchMode}
+            >
+              <span className='material-symbols-rounded'>
+                {isBatchMode ? 'close' : 'checklist'}
+              </span>
+            </Button>
+          </Tooltip>
+          {isBatchMode && (
+            <Popconfirm
+              title={t('common.archiveConfirm', { count: selectedCount })}
+              onConfirm={onBatchArchive}
+              okText={t('common.confirm')}
+              cancelText={t('common.cancel')}
+              okButtonProps={{ danger: false }}
+              disabled={selectedCount === 0}
+            >
+              <Tooltip title={t('common.batchArchive')}>
+                <Button
+                  className='action-btn'
+                  type='text'
+                  disabled={selectedCount === 0}
+                >
+                  <span className='material-symbols-rounded'>
+                    archive
+                  </span>
+                </Button>
+              </Tooltip>
+            </Popconfirm>
+          )}
+        </div>
+        <Tooltip title={isSidebarCollapsed ? t('common.expand') : t('common.collapse')}>
+          <Button
+            className='sidebar-collapse-btn'
+            type='text'
+            onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
+          >
+            <span className='material-symbols-rounded'>
+              {isSidebarCollapsed ? 'dock_to_right' : 'left_panel_close'}
+            </span>
+          </Button>
+        </Tooltip>
+        {isSidebarCollapsed && (
+          <Tooltip title={isCreatingSession ? t('common.alreadyInNewChat') : t('common.newChat')} placement='right'>
+            <Button
+              className={`sidebar-new-chat-btn ${isCreatingSession ? 'active' : ''}`}
+              type='text'
+              disabled={!!isCreatingSession}
+              onClick={onCreateSession}
+            >
+              <span className={`material-symbols-rounded ${isCreatingSession ? 'filled' : ''}`}>
+                {isCreatingSession ? 'chat_bubble' : 'send'}
+              </span>
+            </Button>
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/connectionManager.ts

@@ -0,0 +1,172 @@
+import type { WSEvent } from '@vibe-forge/core'
+import { createSocket } from './ws'
+import type { WSHandlers } from './ws'
+
+class ConnectionManager {
+  private sockets = new Map<string, WebSocket>()
+  private subscribers = new Map<string, Set<WSHandlers>>()
+  private disconnectTimers = new Map<string, NodeJS.Timeout>()
+  private connectionParams = new Map<string, string>()
+
+  // Keep connection alive for 60 seconds after last subscriber leaves
+  // This allows for quick navigation between sessions without reconnecting
+  // and basic background task updates if the user quickly checks back
+  private readonly DISCONNECT_DELAY = 60000
+
+  /**
+   * Connect to a session or reuse existing connection
+   * @param sessionId The session ID to connect to
+   * @param handlers Event handlers for this subscription
+   * @returns A cleanup function to unsubscribe
+   */
+  connect(sessionId: string, handlers: WSHandlers, params?: Record<string, string>): () => void {
+    // 1. Cancel any pending disconnect timer
+    if (this.disconnectTimers.has(sessionId)) {
+      clearTimeout(this.disconnectTimers.get(sessionId)!)
+      this.disconnectTimers.delete(sessionId)
+    }
+
+    // 2. Add subscriber
+    if (!this.subscribers.has(sessionId)) {
+      this.subscribers.set(sessionId, new Set())
+    }
+    this.subscribers.get(sessionId)!.add(handlers)
+
+    // 3. Ensure WebSocket is open
+    const nextParams = this.normalizeParams({ sessionId, ...(params ?? {}) })
+    const paramsKey = this.buildParamsKey(nextParams)
+    const prevParamsKey = this.connectionParams.get(sessionId)
+    let ws = this.sockets.get(sessionId)
+
+    if (prevParamsKey != null && prevParamsKey !== paramsKey && ws) {
+      ws.close()
+      this.sockets.delete(sessionId)
+      ws = undefined
+    }
+
+    // If socket doesn't exist or is closed/closing, create a new one
+    if (!ws || ws.readyState === WebSocket.CLOSED || ws.readyState === WebSocket.CLOSING) {
+      this.createConnection(sessionId, nextParams)
+    } else if (ws.readyState === WebSocket.OPEN) {
+      // If already open, trigger onOpen immediately for this new subscriber
+      handlers.onOpen?.()
+    }
+
+    this.connectionParams.set(sessionId, paramsKey)
+    // 4. Return unsubscribe function
+    return () => this.disconnect(sessionId, handlers)
+  }
+
+  private createConnection(sessionId: string, params: Record<string, string>) {
+    const ws = createSocket({
+      onOpen: () => {
+        this.broadcast(sessionId, 'onOpen')
+      },
+      onMessage: (data: WSEvent) => {
+        this.broadcast(sessionId, 'onMessage', data)
+      },
+      onError: (err: Event) => {
+        this.broadcast(sessionId, 'onError', err)
+      },
+      onClose: () => {
+        this.broadcast(sessionId, 'onClose')
+        // Clean up if closed from server side
+        if (this.sockets.get(sessionId) === ws) {
+          this.sockets.delete(sessionId)
+        }
+      }
+    }, params)
+
+    this.sockets.set(sessionId, ws)
+  }
+
+  private disconnect(sessionId: string, handlers: WSHandlers) {
+    const subs = this.subscribers.get(sessionId)
+    if (subs) {
+      subs.delete(handlers)
+
+      // If no more subscribers, schedule disconnect
+      if (subs.size === 0) {
+        this.disconnectTimers.set(
+          sessionId,
+          setTimeout(() => {
+            const ws = this.sockets.get(sessionId)
+            if (ws) {
+              ws.close()
+              this.sockets.delete(sessionId)
+            }
+            this.disconnectTimers.delete(sessionId)
+            this.subscribers.delete(sessionId)
+            this.connectionParams.delete(sessionId)
+          }, this.DISCONNECT_DELAY)
+        )
+      }
+    }
+  }
+
+  private broadcast(sessionId: string, method: keyof WSHandlers, data?: any) {
+    const subs = this.subscribers.get(sessionId)
+    if (subs) {
+      // Create a copy to avoid issues if handlers unsubscribe during execution
+      const handlers = Array.from(subs)
+      handlers.forEach(h => {
+        if (h[method]) {
+          try {
+            // @ts-ignore - Dynamic dispatch
+            h[method](data)
+          } catch (e) {
+            console.error(`Error in ${method} handler for session ${sessionId}:`, e)
+          }
+        }
+      })
+    }
+  }
+
+  /**
+   * Manually close a connection if needed
+   */
+  close(sessionId: string) {
+    const ws = this.sockets.get(sessionId)
+    if (ws) {
+      ws.close()
+      this.sockets.delete(sessionId)
+    }
+    if (this.disconnectTimers.has(sessionId)) {
+      clearTimeout(this.disconnectTimers.get(sessionId)!)
+      this.disconnectTimers.delete(sessionId)
+    }
+    this.subscribers.delete(sessionId)
+    this.connectionParams.delete(sessionId)
+  }
+
+  /**
+   * Send a message to the session
+   */
+  send(sessionId: string, data: any) {
+    const ws = this.sockets.get(sessionId)
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(typeof data === 'string' ? data : JSON.stringify(data))
+    } else {
+      console.warn(`Cannot send message: Session ${sessionId} not connected or ready`)
+    }
+  }
+
+  private normalizeParams(params: Record<string, string>) {
+    return Object.entries(params).reduce<Record<string, string>>((acc, [key, value]) => {
+      if (value == null) return acc
+      const trimmed = String(value).trim()
+      if (trimmed === '') return acc
+      acc[key] = trimmed
+      return acc
+    }, {})
+  }
+
+  private buildParamsKey(params: Record<string, string>) {
+    return Object.entries(params)
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([key, value]) => `${key}=${value}`)
+      .join('&')
+  }
+}
+
+export const connectionManager = new ConnectionManager()

package/src/hooks/useGlobalShortcut.ts

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

@@ -0,0 +1,54 @@
+import { useCallback, useMemo } from 'react'
+import { useSearchParams } from 'react-router-dom'
+
+type QueryParamConfig<T extends Record<string, string>> = {
+  keys: Array<keyof T & string>
+  defaults?: Partial<T>
+  omit?: Partial<Record<keyof T & string, (value: string) => boolean>>
+}
+
+export const useQueryParams = <T extends Record<string, string>>({
+  keys,
+  defaults,
+  omit
+}: QueryParamConfig<T>) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const keySet = useMemo(() => new Set(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[keyof T]
+      return acc
+    }, {} as T)
+  }, [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[keyof 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 searchParams.entries()) {
+      if (!keySet.has(key)) nextParams.append(key, value)
+    }
+
+    if (nextParams.toString() !== searchParams.toString()) {
+      setSearchParams(nextParams, { replace: true })
+    }
+  }, [defaults, keySet, keys, omit, searchParams, setSearchParams])
+
+  return { values, update, searchParams }
+}

package/src/i18n.ts

@@ -0,0 +1,22 @@
+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'
+
+void i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      zh: { translation: zh },
+      en: { translation: en }
+    },
+    fallbackLng: 'zh',
+    interpolation: {
+      escapeValue: false
+    }
+  })
+
+export default i18n

package/src/main.tsx

@@ -0,0 +1,41 @@
+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 App from './App'
+
+const root = createRoot(document.getElementById('root')!)
+root.render(
+  <React.StrictMode>
+    <ConfigProvider locale={zhCN} theme={{ token: { colorPrimary: '#000000' } }}>
+      <AntdApp>
+        <SWRConfig
+          value={{
+            fetcher: async (path: string) => {
+              const serverHost = (import.meta.env.__VF_PROJECT_AI_SERVER_HOST__ != null &&
+                  import.meta.env.__VF_PROJECT_AI_SERVER_HOST__ !== '')
+                ? import.meta.env.__VF_PROJECT_AI_SERVER_HOST__
+                : window.location.hostname
+              const serverPort = (import.meta.env.__VF_PROJECT_AI_SERVER_PORT__ != null &&
+                  import.meta.env.__VF_PROJECT_AI_SERVER_PORT__ !== '')
+                ? import.meta.env.__VF_PROJECT_AI_SERVER_PORT__
+                : '8787'
+              const baseUrl = `http://${serverHost}:${serverPort}`
+              return fetch(`${baseUrl}${path}`).then(async (r) => r.json() as Promise<unknown>)
+            }
+          }}
+        >
+          <BrowserRouter>
+            <App />
+          </BrowserRouter>
+        </SWRConfig>
+      </AntdApp>
+    </ConfigProvider>
+  </React.StrictMode>
+)