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

package/src/components/server-connection/ServerConnectionGate.tsx

@@ -0,0 +1,238 @@
+import './ServerConnectionGate.scss'
+
+import { Alert, Button, Form } from 'antd'
+import type { PropsWithChildren } from 'react'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { getClientVersion } from '#~/client-build-info'
+import {
+  clearServerConnectionPickerRequest,
+  createServerUrlFromBase,
+  getConfiguredServerBaseUrl,
+  getStoredServerBaseUrl,
+  isDesktopClientMode,
+  isServerConnectionManagedClientMode,
+  isServerConnectionPickerRequested,
+  normalizeServerBaseUrl,
+  setStoredServerBaseUrl
+} from '#~/runtime-config'
+import {
+  getServerConnectionProfiles,
+  rememberServerBaseUrl,
+  updateServerConnectionProfile
+} from '#~/server-connection-history'
+import { areSemverVersionsCompatible } from '#~/version-compatibility'
+
+import { ServerConnectionProfiles } from './ServerConnectionProfiles'
+import {
+  DEFAULT_SERVER_HOST,
+  DEFAULT_SERVER_SCHEME,
+  ServerConnectionUrlInput,
+  buildServerUrl,
+  normalizeServerUrlField
+} from './ServerConnectionUrlInput'
+import type { ServerConnectionFormValues } from './ServerConnectionUrlInput'
+
+const PWA_DOCS_URL = 'https://github.com/vibe-forge-ai/vibe-forge.ai/blob/master/.ai/docs/usage/pwa.md'
+
+interface ServerPublicStatus {
+  version?: string
+}
+
+class UnsupportedServerVersionError extends Error {
+  constructor(
+    readonly clientVersion: string,
+    readonly serverVersion?: string
+  ) {
+    super('Unsupported server version')
+  }
+}
+
+const isRecord = (value: unknown): value is Record<string, unknown> => (
+  value != null && typeof value === 'object' && !Array.isArray(value)
+)
+
+const readPublicStatus = (value: unknown): ServerPublicStatus => {
+  const body = isRecord(value) && isRecord(value.data) ? value.data : value
+  return isRecord(body) && typeof body.version === 'string' ? { version: body.version } : {}
+}
+
+const pingServer = async (serverBaseUrl: string) => {
+  const response = await fetch(createServerUrlFromBase(serverBaseUrl, '/api/auth/status'), {
+    credentials: 'include'
+  })
+  if (!response.ok) {
+    throw new Error(`Server responded with ${response.status}`)
+  }
+  const publicStatus = readPublicStatus(await response.json().catch(() => undefined))
+  const clientVersion = getClientVersion()
+  if (!areSemverVersionsCompatible(clientVersion, publicStatus.version)) {
+    throw new UnsupportedServerVersionError(clientVersion, publicStatus.version)
+  }
+  return publicStatus
+}
+
+export function ServerConnectionGate({ children }: PropsWithChildren) {
+  const { t } = useTranslation()
+  const connectionManagedMode = isServerConnectionManagedClientMode()
+  const desktopMode = isDesktopClientMode()
+  const configuredServerUrl = getConfiguredServerBaseUrl()
+  const pickerRequested = isServerConnectionPickerRequested()
+  const [form] = Form.useForm<ServerConnectionFormValues>()
+  const [connectedServerUrl, setConnectedServerUrl] = useState(() => getStoredServerBaseUrl())
+  const [connectionProfiles, setConnectionProfiles] = useState(() => getServerConnectionProfiles())
+  const [submitError, setSubmitError] = useState<string | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+
+  useEffect(() => {
+    if (configuredServerUrl == null) return
+    setConnectionProfiles((profiles) => {
+      if (profiles.some(profile => profile.serverUrl === configuredServerUrl)) {
+        return profiles
+      }
+
+      const rememberedProfiles = rememberServerBaseUrl(configuredServerUrl)
+      if (!desktopMode) {
+        return rememberedProfiles
+      }
+
+      return updateServerConnectionProfile(configuredServerUrl, {
+        alias: t('serverConnection.localServiceAlias'),
+        description: t('serverConnection.localServiceProfileDescription')
+      })
+    })
+  }, [configuredServerUrl, desktopMode, t])
+
+  if (!connectionManagedMode || (!pickerRequested && (connectedServerUrl != null || configuredServerUrl != null))) {
+    return children
+  }
+
+  const connectToServer = async (serverUrl: string) => {
+    setSubmitting(true)
+    setSubmitError(null)
+    try {
+      const normalizedServerUrl = normalizeServerBaseUrl(serverUrl)
+      if (normalizedServerUrl == null) {
+        setSubmitError(t('serverConnection.invalidUrl'))
+        return
+      }
+
+      const publicStatus = await pingServer(normalizedServerUrl)
+      const storedServerUrl = setStoredServerBaseUrl(normalizedServerUrl)
+      if (storedServerUrl == null) {
+        setSubmitError(t('serverConnection.invalidUrl'))
+        return
+      }
+      clearServerConnectionPickerRequest()
+      setConnectionProfiles(rememberServerBaseUrl(storedServerUrl, { serverVersion: publicStatus.version }))
+      setConnectedServerUrl(storedServerUrl)
+    } catch (err) {
+      if (err instanceof UnsupportedServerVersionError) {
+        setSubmitError(t('serverConnection.unsupportedServerVersion', {
+          clientVersion: err.clientVersion,
+          serverVersion: err.serverVersion ?? t('serverConnection.serverVersionUnknown')
+        }))
+      } else {
+        setSubmitError(t('serverConnection.connectionFailed'))
+      }
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const handleFinish = async (values: ServerConnectionFormValues) => {
+    normalizeServerUrlField(form)
+    await connectToServer(buildServerUrl(values))
+  }
+
+  const handleProfileConnect = (serverUrl: string) => {
+    void connectToServer(serverUrl)
+  }
+
+  return (
+    <div className='server-connection-gate'>
+      <main className='server-connection-gate__panel' aria-labelledby='server-connection-title'>
+        <div className='server-connection-gate__intro'>
+          <h1 id='server-connection-title'>
+            {desktopMode ? t('serverConnection.desktopTitle') : t('serverConnection.title')}
+          </h1>
+          <p>{desktopMode ? t('serverConnection.desktopSubtitle') : t('serverConnection.subtitle')}</p>
+        </div>
+
+        {desktopMode
+          ? configuredServerUrl != null && (
+            <div className='server-connection-gate__setup'>
+              <div className='server-connection-gate__setup-title'>
+                <span className='material-symbols-rounded'>computer</span>
+                <span>{t('serverConnection.localServiceTitle')}</span>
+              </div>
+              <code>{configuredServerUrl}</code>
+              <p>{t('serverConnection.localServiceBannerDescription')}</p>
+            </div>
+          )
+          : (
+            <div className='server-connection-gate__setup'>
+              <div className='server-connection-gate__setup-title'>
+                <span className='material-symbols-rounded'>terminal</span>
+                <span>{t('serverConnection.setupTitle')}</span>
+              </div>
+              <code>npx vfui-server</code>
+              <p>
+                {t('serverConnection.setupDescription')}
+                <a href={PWA_DOCS_URL} target='_blank' rel='noreferrer'>
+                  {t('serverConnection.docsLink')}
+                </a>
+              </p>
+            </div>
+          )}
+
+        {submitError != null && (
+          <Alert
+            type='error'
+            showIcon
+            className='server-connection-gate__notice'
+            message={submitError}
+          />
+        )}
+
+        <Form
+          form={form}
+          layout='vertical'
+          requiredMark={false}
+          initialValues={{
+            serverScheme: DEFAULT_SERVER_SCHEME,
+            serverUrl: DEFAULT_SERVER_HOST
+          }}
+          onFinish={(values: ServerConnectionFormValues) => void handleFinish(values)}
+        >
+          <Form.Item
+            name='serverUrl'
+            label={t('serverConnection.serverUrl')}
+            rules={[{ required: true, message: t('serverConnection.serverUrlRequired') }]}
+          >
+            <ServerConnectionUrlInput form={form} />
+          </Form.Item>
+
+          <ServerConnectionProfiles
+            profiles={connectionProfiles}
+            submitting={submitting}
+            onConnect={handleProfileConnect}
+            onProfilesChange={setConnectionProfiles}
+          />
+
+          <Button
+            type='primary'
+            htmlType='submit'
+            size='large'
+            loading={submitting}
+            icon={<span className='material-symbols-rounded'>link</span>}
+            block
+          >
+            {t('serverConnection.connect')}
+          </Button>
+        </Form>
+      </main>
+    </div>
+  )
+}

package/src/components/server-connection/ServerConnectionProfileModal.tsx

@@ -0,0 +1,145 @@
+import { App, Button, Form, Input, Modal } from 'antd'
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import {
+  clearAuthTokenForServerUrl,
+  removeServerConnectionProfile,
+  updateServerConnectionProfile
+} from '#~/server-connection-history'
+import type { ServerConnectionProfile } from '#~/server-connection-history'
+
+interface ProfileFormValues {
+  alias?: string
+  description?: string
+}
+
+const hasAuthToken = (profile: ServerConnectionProfile) => (
+  profile.authToken != null && profile.authToken.trim() !== ''
+)
+
+const renderIconLabel = (icon: string, label: string) => (
+  <span className='server-connection-gate__modal-label'>
+    <span className='material-symbols-rounded'>{icon}</span>
+    <span>{label}</span>
+  </span>
+)
+
+export function ServerConnectionProfileModal({
+  profile,
+  onClose,
+  onProfilesChange
+}: {
+  profile: ServerConnectionProfile | null
+  onClose: () => void
+  onProfilesChange: (profiles: ServerConnectionProfile[]) => void
+}) {
+  const { t } = useTranslation()
+  const { modal } = App.useApp()
+  const [form] = Form.useForm<ProfileFormValues>()
+
+  useEffect(() => {
+    if (profile == null) return
+    form.setFieldsValue({
+      alias: profile.alias ?? '',
+      description: profile.description ?? ''
+    })
+  }, [form, profile])
+
+  const handleSave = async () => {
+    if (profile == null) return
+    const values = await form.validateFields()
+    onProfilesChange(updateServerConnectionProfile(profile.serverUrl, values))
+    onClose()
+  }
+
+  const handleClearLoginState = () => {
+    if (profile == null) return
+    modal.confirm({
+      title: t('serverConnection.clearLoginState'),
+      content: t('serverConnection.clearLoginStateConfirm'),
+      okText: t('common.confirm'),
+      cancelText: t('common.cancel'),
+      okButtonProps: { danger: true },
+      onOk: () => {
+        onProfilesChange(clearAuthTokenForServerUrl(profile.serverUrl))
+        onClose()
+      }
+    })
+  }
+
+  const handleRemoveProfile = () => {
+    if (profile == null) return
+    modal.confirm({
+      title: t('serverConnection.removeProfile'),
+      content: t('serverConnection.removeProfileConfirm'),
+      okText: t('common.delete'),
+      cancelText: t('common.cancel'),
+      okButtonProps: { danger: true },
+      onOk: () => {
+        onProfilesChange(removeServerConnectionProfile(profile.serverUrl))
+        onClose()
+      }
+    })
+  }
+
+  return (
+    <Modal
+      open={profile != null}
+      title={renderIconLabel('tune', t('serverConnection.manageProfile'))}
+      okText={t('common.confirm')}
+      cancelText={t('common.cancel')}
+      onOk={() => void handleSave()}
+      onCancel={onClose}
+    >
+      {profile != null && (
+        <div className='server-connection-gate__profile-modal'>
+          <div className='server-connection-gate__profile-modal-url'>
+            <span className='material-symbols-rounded'>link</span>
+            <span>{profile.serverUrl}</span>
+          </div>
+          <div className={`server-connection-gate__profile-modal-auth ${hasAuthToken(profile) ? 'is-saved' : ''}`}>
+            <span className='material-symbols-rounded'>
+              {hasAuthToken(profile) ? 'verified_user' : 'lock_open'}
+            </span>
+            <strong>
+              {hasAuthToken(profile) ? t('serverConnection.loginSaved') : t('serverConnection.loginMissing')}
+            </strong>
+          </div>
+          <Form form={form} layout='vertical' requiredMark={false}>
+            <Form.Item name='alias' label={renderIconLabel('label', t('serverConnection.profileAlias'))}>
+              <Input placeholder={t('serverConnection.profileAliasPlaceholder')} />
+            </Form.Item>
+            <Form.Item name='description' label={renderIconLabel('notes', t('serverConnection.profileDescription'))}>
+              <Input.TextArea
+                autoSize={{ minRows: 2, maxRows: 4 }}
+                placeholder={t('serverConnection.profileDescriptionPlaceholder')}
+              />
+            </Form.Item>
+          </Form>
+          <div className='server-connection-gate__profile-modal-actions'>
+            {hasAuthToken(profile) && (
+              <Button
+                danger
+                htmlType='button'
+                icon={<span className='material-symbols-rounded'>lock_reset</span>}
+                onClick={handleClearLoginState}
+              >
+                {t('serverConnection.clearLoginState')}
+              </Button>
+            )}
+            <Button
+              danger
+              htmlType='button'
+              type='text'
+              icon={<span className='material-symbols-rounded'>delete</span>}
+              onClick={handleRemoveProfile}
+            >
+              {t('serverConnection.removeProfile')}
+            </Button>
+          </div>
+        </div>
+      )}
+    </Modal>
+  )
+}

package/src/components/server-connection/ServerConnectionProfiles.tsx

@@ -0,0 +1,113 @@
+import { Button } from 'antd'
+import type { PointerEvent } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { ServerConnectionProfile } from '#~/server-connection-history'
+
+import { ServerConnectionProfileModal } from './ServerConnectionProfileModal'
+
+const blurActiveElement = () => {
+  const activeElement = document.activeElement
+  if (activeElement instanceof HTMLElement) {
+    activeElement.blur()
+  }
+}
+
+const hasAuthToken = (profile: ServerConnectionProfile) => (
+  profile.authToken != null && profile.authToken.trim() !== ''
+)
+
+const getProfileTitle = (profile: ServerConnectionProfile) => (
+  profile.alias?.trim() || profile.serverUrl
+)
+
+const getServerVersion = (profile: ServerConnectionProfile) => (
+  profile.serverVersion?.trim()
+)
+
+const shouldConnectOnPointerDown = (event: PointerEvent<HTMLButtonElement>) => (
+  event.pointerType === 'touch' || event.pointerType === 'pen'
+)
+
+export function ServerConnectionProfiles({
+  profiles,
+  submitting,
+  onConnect,
+  onProfilesChange
+}: {
+  profiles: ServerConnectionProfile[]
+  submitting: boolean
+  onConnect: (serverUrl: string) => void
+  onProfilesChange: (profiles: ServerConnectionProfile[]) => void
+}) {
+  const { t } = useTranslation()
+  const [editingProfile, setEditingProfile] = useState<ServerConnectionProfile | null>(null)
+
+  if (profiles.length === 0) return null
+
+  const handleProfilePointerDown = (
+    event: PointerEvent<HTMLButtonElement>,
+    profile: ServerConnectionProfile
+  ) => {
+    blurActiveElement()
+    if (!shouldConnectOnPointerDown(event) || submitting) return
+    event.preventDefault()
+    onConnect(profile.serverUrl)
+  }
+
+  return (
+    <section className='server-connection-gate__recent' aria-labelledby='server-connection-recent-title'>
+      <h2 id='server-connection-recent-title'>{t('serverConnection.recentTitle')}</h2>
+      <div className='server-connection-gate__recent-list'>
+        {profiles.map(profile => (
+          <div key={profile.serverUrl} className='server-connection-gate__profile-row'>
+            <div
+              className={`server-connection-gate__profile-card ${submitting ? 'is-disabled' : ''}`}
+            >
+              <button
+                type='button'
+                className='server-connection-gate__recent-item'
+                disabled={submitting}
+                onPointerDown={event => handleProfilePointerDown(event, profile)}
+                onClick={() => onConnect(profile.serverUrl)}
+              >
+                <span className='material-symbols-rounded'>dns</span>
+                <span className='server-connection-gate__profile-main'>
+                  <span className='server-connection-gate__profile-title'>{getProfileTitle(profile)}</span>
+                  <span className='server-connection-gate__profile-url'>{profile.serverUrl}</span>
+                  <span className='server-connection-gate__profile-version'>
+                    {t('serverConnection.serverVersion', {
+                      version: getServerVersion(profile) ?? t('serverConnection.serverVersionUnknown')
+                    })}
+                  </span>
+                  {profile.description != null && (
+                    <span className='server-connection-gate__profile-description'>{profile.description}</span>
+                  )}
+                </span>
+                <span className={`server-connection-gate__profile-auth ${hasAuthToken(profile) ? 'is-saved' : ''}`}>
+                  {hasAuthToken(profile) ? t('serverConnection.loginSaved') : t('serverConnection.loginMissing')}
+                </span>
+              </button>
+              <Button
+                htmlType='button'
+                type='text'
+                className='server-connection-gate__profile-manage'
+                icon={<span className='material-symbols-rounded'>edit</span>}
+                aria-label={t('serverConnection.manageProfile')}
+                onPointerDown={blurActiveElement}
+                onClick={() => setEditingProfile(profile)}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <ServerConnectionProfileModal
+        profile={editingProfile}
+        onClose={() => setEditingProfile(null)}
+        onProfilesChange={onProfilesChange}
+      />
+    </section>
+  )
+}

package/src/components/server-connection/ServerConnectionUrlInput.tsx

@@ -0,0 +1,85 @@
+import { Form, Input, Select } from 'antd'
+import type { FormInstance, InputProps } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+export interface ServerConnectionFormValues {
+  serverScheme: ServerScheme
+  serverUrl: string
+}
+
+export type ServerScheme = 'http' | 'https'
+
+export const DEFAULT_SERVER_SCHEME: ServerScheme = 'http'
+export const DEFAULT_SERVER_HOST = 'localhost:8787'
+
+const SERVER_SCHEME_OPTIONS = [
+  { label: 'http://', value: 'http' },
+  { label: 'https://', value: 'https' }
+] satisfies Array<{ label: string; value: ServerScheme }>
+
+const SERVER_SCHEME_SUFFIX_ICON = (
+  <span className='material-symbols-rounded server-connection-gate__scheme-chevron'>expand_more</span>
+)
+
+const splitServerUrlInput = (value: string) => {
+  const trimmed = value.trim()
+  const match = /^(https?):\/\/(.+)$/i.exec(trimmed)
+  if (match == null) {
+    return {
+      serverScheme: undefined,
+      serverHost: trimmed
+    }
+  }
+  return {
+    serverScheme: match[1].toLowerCase() as ServerScheme,
+    serverHost: match[2].trim()
+  }
+}
+
+export const buildServerUrl = (values: ServerConnectionFormValues) => {
+  const parsed = splitServerUrlInput(values.serverUrl)
+  return `${parsed.serverScheme ?? values.serverScheme}://${parsed.serverHost}`
+}
+
+export const normalizeServerUrlField = (form: FormInstance<ServerConnectionFormValues>) => {
+  const currentValue = form.getFieldValue('serverUrl')
+  if (typeof currentValue !== 'string') return
+  const parsed = splitServerUrlInput(currentValue)
+  if (parsed.serverScheme == null) return
+  form.setFieldsValue({
+    serverScheme: parsed.serverScheme,
+    serverUrl: parsed.serverHost
+  })
+}
+
+interface ServerConnectionUrlInputProps extends Omit<InputProps, 'form'> {
+  form: FormInstance<ServerConnectionFormValues>
+}
+
+export function ServerConnectionUrlInput({ form, onBlur, ...inputProps }: ServerConnectionUrlInputProps) {
+  const { t } = useTranslation()
+
+  return (
+    <Input
+      {...inputProps}
+      autoComplete='url'
+      addonBefore={
+        <Form.Item name='serverScheme' noStyle>
+          <Select
+            aria-label={t('serverConnection.serverScheme')}
+            className='server-connection-gate__scheme-select'
+            options={SERVER_SCHEME_OPTIONS}
+            popupMatchSelectWidth={false}
+            suffixIcon={SERVER_SCHEME_SUFFIX_ICON}
+          />
+        </Form.Item>
+      }
+      onBlur={(event) => {
+        onBlur?.(event)
+        normalizeServerUrlField(form)
+      }}
+      size='large'
+      placeholder={t('serverConnection.serverUrlPlaceholder')}
+    />
+  )
+}

package/src/components/sidebar/SidebarHeader.scss

@@ -358,47 +358,11 @@
   }
 }
 
-.sidebar-header--compact {
-  padding-top: 12px;
-
-  .header-top {
-    align-items: stretch;
-  }
-
-  .new-chat-btn {
-    height: 40px;
-    min-height: 40px;
-    padding: 0 12px;
-    font-size: 13px;
-  }
-
-  .sidebar-collapse-btn,
-  .sidebar-new-chat-btn {
-    width: 40px;
-    min-width: 40px;
-    height: 40px;
-    min-height: 40px;
-    border-radius: 8px;
-  }
-
-  .header-search-row {
-    margin-top: 8px;
-  }
-
-  .search-input {
-    height: 40px;
-    min-height: 40px;
-    padding: 0 10px !important;
-
-    .ant-input {
-      font-size: 13px;
-    }
-
-    .search-toggle-button {
-      width: 24px;
-      height: 24px;
-      border-radius: 6px;
-    }
+.sidebar-list-header--compact.sidebar-header {
+  .search-input .search-toggle-button {
+    width: 24px;
+    height: 24px;
+    border-radius: 6px;
   }
 
   .toolbar-filter-select .ant-select-selector,