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

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

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

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

@@ -1,85 +0,0 @@
-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/SessionContextMenu.scss

@@ -1,143 +0,0 @@
-.session-context-menu {
-  min-width: 196px;
-  padding: 4px;
-  border: 1px solid var(--border-color);
-  border-radius: 10px;
-  background-color: var(--bg-color);
-  box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.session-context-menu__item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  min-height: 32px;
-  padding: 6px 10px;
-  border: 0;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--text-color);
-  text-align: left;
-  cursor: pointer;
-  transition: background-color .18s ease, color .18s ease;
-
-  &:hover {
-    background-color: color-mix(
-      in srgb,
-      var(--primary-color) 8%,
-      var(--bg-color)
-    );
-  }
-
-  &.is-confirming {
-    background-color: color-mix(
-      in srgb,
-      var(--primary-color) 12%,
-      var(--bg-color)
-    );
-  }
-
-  &.is-danger {
-    color: #dc2626;
-
-    &:hover {
-      background-color: rgba(220, 38, 38, .12);
-      color: #b91c1c;
-    }
-
-    &.is-confirming {
-      background-color: rgba(220, 38, 38, .12);
-    }
-  }
-}
-
-.session-context-menu__meta {
-  min-width: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.session-context-menu__icon {
-  font-size: 16px;
-  line-height: 1;
-  flex-shrink: 0;
-}
-
-.session-context-menu__item--star .session-context-menu__icon {
-  color: #d97706;
-}
-
-.session-context-menu__item--archive .session-context-menu__icon {
-  color: #dc2626;
-}
-
-.session-context-menu__item--delete .session-context-menu__icon {
-  color: #991b1b;
-}
-
-.session-context-menu__item--copy-session-link .session-context-menu__icon {
-  color: #2563eb;
-}
-
-.session-context-menu__item--copy-session-id .session-context-menu__icon {
-  color: #64748b;
-}
-
-.session-context-menu__item--copy-resume-command .session-context-menu__icon {
-  color: #0f766e;
-}
-
-.session-context-menu__label {
-  min-width: 0;
-  font-size: 12px;
-  line-height: 1.4;
-}
-
-.session-context-menu__confirm-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  margin-left: 12px;
-  flex-shrink: 0;
-}
-
-.session-context-menu__confirm-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  border: 0;
-  border-radius: 999px;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  transition: background-color .18s ease, color .18s ease;
-
-  .material-symbols-rounded {
-    font-size: 14px;
-    line-height: 1;
-  }
-
-  &.is-accept:hover {
-    background-color: rgba(34, 197, 94, .14);
-    color: #15803d;
-  }
-
-  &.is-cancel:hover {
-    background-color: rgba(148, 163, 184, .18);
-    color: var(--text-color);
-  }
-}
-
-.session-context-menu__divider {
-  height: 1px;
-  margin: 4px 6px;
-  background-color: var(--border-color);
-}

package/src/components/sidebar/SessionContextMenu.tsx

@@ -1,198 +0,0 @@
-import './SessionContextMenu.scss'
-
-import { App, Dropdown, Input } from 'antd'
-import type { ReactElement } from 'react'
-import { useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import type { Session } from '@vibe-forge/core'
-
-import { buildSessionUrl } from '#~/utils/chat-links.js'
-import { copyTextWithFeedback } from '#~/utils/copy.js'
-import { SessionContextMenuContent } from './SessionContextMenuContent'
-import type { SessionContextMenuEntry } from './SessionContextMenuContent'
-
-interface SessionContextMenuProps {
-  children: ReactElement
-  session: Session
-  trigger?: ('click' | 'contextMenu')[]
-  onArchive: (id: string) => void | Promise<void>
-  onDelete: (id: string) => void | Promise<void>
-  onRename: (id: string, title: string) => Promise<void>
-  onStar: (id: string, isStarred: boolean) => void | Promise<void>
-}
-
-type PendingSessionMenuAction = 'archive' | 'delete' | null
-
-export function SessionContextMenu({
-  children,
-  session,
-  trigger = ['contextMenu'],
-  onArchive,
-  onDelete,
-  onRename,
-  onStar
-}: SessionContextMenuProps) {
-  const { t } = useTranslation()
-  const { message, modal } = App.useApp()
-  const [open, setOpen] = useState(false)
-  const [pendingAction, setPendingAction] = useState<PendingSessionMenuAction>(null)
-
-  const closeMenu = () => {
-    setOpen(false)
-    setPendingAction(null)
-  }
-
-  const handleConfirmableActionClick = (action: Exclude<PendingSessionMenuAction, null>) => {
-    if (pendingAction === action) {
-      closeMenu()
-      if (action === 'archive') {
-        void onArchive(session.id)
-        return
-      }
-      void onDelete(session.id)
-      return
-    }
-
-    setPendingAction(action)
-  }
-
-  const entries = useMemo<SessionContextMenuEntry[]>(() => {
-    return [
-      {
-        key: 'star',
-        label: session.isStarred ? t('common.unstar') : t('common.star'),
-        icon: session.isStarred ? 'star' : 'star_border',
-        onClick: () => {
-          closeMenu()
-          void onStar(session.id, !session.isStarred)
-        }
-      },
-      {
-        key: 'rename',
-        label: t('common.rename'),
-        icon: 'edit',
-        onClick: () => {
-          closeMenu()
-          let nextTitle = session.title ?? ''
-
-          modal.confirm({
-            title: t('common.renameSession'),
-            okText: t('common.confirm'),
-            cancelText: t('common.cancel'),
-            content: (
-              <Input
-                autoFocus
-                defaultValue={session.title ?? ''}
-                placeholder={t('chat.enterTitle')}
-                onChange={(event) => {
-                  nextTitle = event.target.value
-                }}
-              />
-            ),
-            onOk: async () => {
-              const normalizedTitle = nextTitle.trim()
-              if (normalizedTitle === (session.title ?? '').trim()) {
-                return
-              }
-
-              try {
-                await onRename(session.id, normalizedTitle)
-                void message.success(t('chat.titleUpdated'))
-              } catch {
-                void message.error(t('common.operationFailed'))
-                throw new Error('rename-session-failed')
-              }
-            }
-          })
-        }
-      },
-      {
-        key: 'archive',
-        label: session.isArchived ? t('common.restore') : t('common.archive'),
-        confirmLabel: t('common.confirmAction', {
-          action: session.isArchived ? t('common.restore') : t('common.archive')
-        }),
-        icon: session.isArchived ? 'unarchive' : 'archive',
-        onClick: () => {
-          handleConfirmableActionClick('archive')
-        }
-      },
-      {
-        key: 'delete',
-        label: t('common.delete'),
-        confirmLabel: t('common.confirmAction', { action: t('common.delete') }),
-        icon: 'delete',
-        danger: true,
-        onClick: () => {
-          handleConfirmableActionClick('delete')
-        }
-      },
-      { key: 'divider-main', type: 'divider', label: '', icon: '', onClick: () => undefined },
-      {
-        key: 'copy-session-link',
-        label: t('common.copySessionLink'),
-        icon: 'link',
-        onClick: () => {
-          closeMenu()
-          void copyTextWithFeedback({
-            text: buildSessionUrl(session.id),
-            messageApi: message,
-            successMessage: t('common.sessionLinkCopied'),
-            failureMessage: t('common.copyFailed')
-          })
-        }
-      },
-      {
-        key: 'copy-session-id',
-        label: t('common.copySessionId'),
-        icon: 'fingerprint',
-        onClick: () => {
-          closeMenu()
-          void copyTextWithFeedback({
-            text: session.id,
-            messageApi: message,
-            successMessage: t('common.sessionIdCopied'),
-            failureMessage: t('common.copyFailed')
-          })
-        }
-      },
-      {
-        key: 'copy-resume-command',
-        label: t('common.copyResumeCommand'),
-        icon: 'terminal',
-        onClick: () => {
-          closeMenu()
-          void copyTextWithFeedback({
-            text: `vf --resume ${session.id}`,
-            messageApi: message,
-            successMessage: t('common.resumeCommandCopied'),
-            failureMessage: t('common.copyFailed')
-          })
-        }
-      }
-    ]
-  }, [message, modal, onArchive, onDelete, onRename, onStar, pendingAction, session, t])
-
-  return (
-    <Dropdown
-      trigger={trigger}
-      open={open}
-      onOpenChange={(nextOpen) => {
-        setOpen(nextOpen)
-        if (!nextOpen) {
-          setPendingAction(null)
-        }
-      }}
-      dropdownRender={() => (
-        <SessionContextMenuContent
-          entries={entries}
-          pendingAction={pendingAction}
-          onCancelConfirm={() => setPendingAction(null)}
-        />
-      )}
-    >
-      {children}
-    </Dropdown>
-  )
-}