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

package/src/components/auth/AuthGate.tsx

@@ -1,174 +0,0 @@
-import './AuthGate.scss'
-
-import { Alert, Button, Checkbox, Form, Input, Spin } from 'antd'
-import type { PropsWithChildren } from 'react'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
-
-import { getAuthStatus, login } from '#~/api/auth'
-import { setAuthToken } from '#~/api/auth-token'
-import { getApiErrorMessage } from '#~/api/base'
-import { isServerConnectionManagedClientMode, requestServerConnectionPicker } from '#~/runtime-config'
-
-interface LoginFormValues {
-  username?: string
-  password?: string
-  rememberDevice?: boolean
-}
-
-export function AuthGate({ children }: PropsWithChildren) {
-  const { t } = useTranslation()
-  const { data, error, isLoading, mutate } = useSWR('/api/auth/status', getAuthStatus)
-  const [submitError, setSubmitError] = useState<string | null>(null)
-  const [submitting, setSubmitting] = useState(false)
-  const suggestedUsername = data?.usernames[0] ?? 'admin'
-  const connectionManagedMode = isServerConnectionManagedClientMode()
-
-  const handleChangeServer = () => {
-    requestServerConnectionPicker({ clearCurrentServer: true })
-    window.location.reload()
-  }
-
-  if (isLoading) {
-    return (
-      <div className='auth-gate auth-gate--loading'>
-        <Spin size='large' />
-      </div>
-    )
-  }
-
-  if (error != null) {
-    return (
-      <div className='auth-gate'>
-        <div className='auth-gate__panel'>
-          <Alert
-            type='error'
-            showIcon
-            message={t('auth.statusFailed')}
-            description={getApiErrorMessage(error, t('auth.statusFailed'))}
-          />
-          {connectionManagedMode && (
-            <Button
-              className='auth-gate__secondary-action'
-              htmlType='button'
-              onClick={handleChangeServer}
-              block
-            >
-              {t('auth.changeServer')}
-            </Button>
-          )}
-        </div>
-      </div>
-    )
-  }
-
-  if (data == null || !data.enabled || data.authenticated) {
-    return children
-  }
-
-  const handleFinish = async (values: LoginFormValues) => {
-    setSubmitting(true)
-    setSubmitError(null)
-    try {
-      const status = await login({
-        username: values.username?.trim() ?? '',
-        password: values.password ?? '',
-        rememberDevice: values.rememberDevice === true,
-        returnToken: connectionManagedMode
-      })
-      if (status.token != null) {
-        setAuthToken(status.token)
-      }
-      await mutate(status, { revalidate: false })
-    } catch (err) {
-      setSubmitError(getApiErrorMessage(err, t('auth.loginFailed')))
-    } finally {
-      setSubmitting(false)
-    }
-  }
-
-  return (
-    <div className='auth-gate'>
-      <main className='auth-gate__panel' aria-labelledby='auth-gate-title'>
-        <div className='auth-gate__intro'>
-          <h1 id='auth-gate-title'>{t('auth.title')}</h1>
-          <p>{t('auth.subtitle')}</p>
-        </div>
-
-        {submitError != null && (
-          <Alert
-            type='error'
-            showIcon
-            className='auth-gate__notice'
-            message={submitError}
-          />
-        )}
-
-        <Form
-          layout='vertical'
-          requiredMark={false}
-          initialValues={{ username: suggestedUsername, rememberDevice: true }}
-          onFinish={(values: LoginFormValues) => void handleFinish(values)}
-        >
-          <Form.Item
-            name='username'
-            label={t('auth.username')}
-            rules={[{ required: true, message: t('auth.usernameRequired') }]}
-          >
-            <Input
-              autoComplete='username'
-              size='large'
-              placeholder={t('auth.usernamePlaceholder')}
-            />
-          </Form.Item>
-
-          <Form.Item
-            name='password'
-            label={t('auth.password')}
-            rules={[{ required: true, message: t('auth.passwordRequired') }]}
-          >
-            <Input.Password
-              autoComplete='current-password'
-              size='large'
-              placeholder={t('auth.passwordPlaceholder')}
-            />
-          </Form.Item>
-
-          <Form.Item name='rememberDevice' valuePropName='checked' className='auth-gate__remember'>
-            <Checkbox>{t('auth.rememberDevice')}</Checkbox>
-          </Form.Item>
-
-          {data.passwordSource === 'generated' && (
-            <p className='auth-gate__hint'>
-              {t('auth.generatedPasswordHint', {
-                path: data.passwordFilePath ?? '.data/web-auth-password'
-              })}
-            </p>
-          )}
-
-          <Button
-            type='primary'
-            htmlType='submit'
-            size='large'
-            loading={submitting}
-            block
-          >
-            {t('auth.login')}
-          </Button>
-
-          {connectionManagedMode && (
-            <Button
-              className='auth-gate__secondary-action'
-              htmlType='button'
-              onClick={handleChangeServer}
-              block
-            >
-              {t('auth.changeServer')}
-            </Button>
-          )}
-        </Form>
-      </main>
-    </div>
-  )
-}

package/src/components/automation-view/@components/AutomationTaskComposer.tsx

@@ -1,220 +0,0 @@
-/* eslint-disable max-lines -- task composer wires Sender, status bar, and collapse behavior together */
-import { Button, Form, Input, Tooltip } from 'antd'
-import type { FormInstance } from 'antd'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
-
-import type { ConfigResponse } from '@vibe-forge/types'
-
-import { getConfig } from '#~/api.js'
-import { Sender } from '#~/components/chat/sender/Sender'
-import { ChatStatusBar } from '#~/components/chat/status-bar/ChatStatusBar'
-import {
-  DEFAULT_CHAT_SESSION_WORKSPACE_DRAFT,
-  getChatSessionWorkspaceDraftFromConfig
-} from '#~/hooks/chat/chat-session-workspace-draft'
-import type { ChatSessionWorkspaceDraft } from '#~/hooks/chat/chat-session-workspace-draft'
-
-import { useAutomationStartupOptionsData } from '../@hooks/use-automation-startup-options-data'
-import { useAutomationStartupStaticOptions } from '../@hooks/use-automation-startup-static-options'
-import { DEFAULT_STARTUP_FORM_VALUES, isNonEmptyString } from '../@utils/startup-options'
-import type { RuleFormValues } from '../types'
-
-interface AutomationTaskComposerProps {
-  fieldName: number
-  form: FormInstance<RuleFormValues>
-}
-
-interface AutomationTaskSenderProps extends AutomationTaskComposerProps {
-  onChange?: (value: string) => void
-  value?: string
-}
-
-const noop = () => {}
-const preventSubmit = () => false
-
-const isSenderEffort = (value: unknown): value is NonNullable<RuleFormValues['tasks'][number]['effort']> => (
-  value === 'default' || value === 'low' || value === 'medium' || value === 'high' || value === 'max'
-)
-
-function AutomationTaskSender({ fieldName, form, onChange, value }: AutomationTaskSenderProps) {
-  const { t } = useTranslation()
-  const emittedValueRef = useRef(value ?? '')
-  const [initialContent, setInitialContent] = useState(value ?? '')
-  const adapter = Form.useWatch(['tasks', fieldName, 'adapter'], form)
-  const model = Form.useWatch(['tasks', fieldName, 'model'], form)
-  const effort = Form.useWatch(['tasks', fieldName, 'effort'], form)
-  const selectedAdapter = isNonEmptyString(adapter) ? adapter : undefined
-  const selectedModel = isNonEmptyString(model) ? model : undefined
-  const selectedEffort = isSenderEffort(effort) ? effort : 'default'
-  const {
-    adapterOptions,
-    effectiveAdapter,
-    effectiveEffort,
-    effectiveModel,
-    modelMenuGroups,
-    modelSearchOptions,
-    recommendedModelOptions,
-    servicePreviewModelOptions
-  } = useAutomationStartupOptionsData({
-    selectedAdapter,
-    selectedEffort,
-    selectedModel
-  })
-  const { effortOptions } = useAutomationStartupStaticOptions(t)
-
-  useEffect(() => {
-    const nextValue = value ?? ''
-
-    if (nextValue === emittedValueRef.current) {
-      return
-    }
-
-    emittedValueRef.current = nextValue
-    setInitialContent(nextValue)
-  }, [value])
-
-  const setTaskField = (name: keyof RuleFormValues['tasks'][number], nextValue: unknown) => {
-    form.setFieldValue(['tasks', fieldName, name], nextValue)
-  }
-
-  return (
-    <div className='automation-view__task-sender'>
-      <Sender
-        initialContent={initialContent}
-        placeholder={t('automation.prompt')}
-        hideReferenceActions
-        hideSubmitAction
-        forceEffortControl
-        adapterOptions={adapterOptions}
-        selectedAdapter={effectiveAdapter}
-        onAdapterChange={(nextAdapter) => setTaskField('adapter', nextAdapter)}
-        modelMenuGroups={modelMenuGroups}
-        modelSearchOptions={modelSearchOptions}
-        recommendedModelOptions={recommendedModelOptions}
-        servicePreviewModelOptions={servicePreviewModelOptions}
-        selectedModel={effectiveModel}
-        onModelChange={(nextModel) => setTaskField('model', nextModel)}
-        effort={effectiveEffort}
-        effortOptions={effortOptions}
-        onEffortChange={(nextEffort) => setTaskField('effort', nextEffort)}
-        onInputChange={(nextValue) => {
-          emittedValueRef.current = nextValue
-          onChange?.(nextValue)
-        }}
-        onInterrupt={noop}
-        onSend={preventSubmit}
-        onSendContent={preventSubmit}
-      />
-    </div>
-  )
-}
-
-const getTaskWorkspaceDraft = (
-  task: RuleFormValues['tasks'][number] | undefined,
-  defaultDraft: ChatSessionWorkspaceDraft
-): ChatSessionWorkspaceDraft => {
-  const createWorktreeMode = task?.createWorktreeMode ?? DEFAULT_STARTUP_FORM_VALUES.createWorktreeMode
-  const branchAction = task?.branchAction ?? DEFAULT_STARTUP_FORM_VALUES.branchAction
-  const branchName = task?.branchName?.trim() ?? ''
-  const createWorktree = createWorktreeMode === 'managed'
-    ? true
-    : createWorktreeMode === 'local'
-    ? false
-    : defaultDraft.createWorktree
-
-  return {
-    createWorktree,
-    branch: branchAction === 'default' || branchName === ''
-      ? undefined
-      : {
-        mode: branchAction,
-        name: branchName,
-        kind: task?.branchKind ?? DEFAULT_STARTUP_FORM_VALUES.branchKind
-      }
-  }
-}
-
-function AutomationTaskStatusBar({ fieldName, form }: AutomationTaskComposerProps) {
-  const { data: configRes } = useSWR<ConfigResponse>('/api/config', getConfig)
-  const task = Form.useWatch(['tasks', fieldName], form)
-  const defaultDraft = useMemo(() => (
-    configRes == null ? DEFAULT_CHAT_SESSION_WORKSPACE_DRAFT : getChatSessionWorkspaceDraftFromConfig(configRes)
-  ), [configRes])
-  const draftWorkspace = useMemo(() => getTaskWorkspaceDraft(task, defaultDraft), [defaultDraft, task])
-  const handleDraftWorkspaceChange = useCallback((nextDraft: ChatSessionWorkspaceDraft) => {
-    form.setFieldValue(
-      ['tasks', fieldName, 'createWorktreeMode'],
-      nextDraft.createWorktree ? 'managed' : 'local'
-    )
-
-    if (nextDraft.branch == null) {
-      form.setFieldValue(['tasks', fieldName, 'branchAction'], 'default')
-      form.setFieldValue(['tasks', fieldName, 'branchName'], '')
-      form.setFieldValue(['tasks', fieldName, 'branchKind'], DEFAULT_STARTUP_FORM_VALUES.branchKind)
-      return
-    }
-
-    form.setFieldValue(['tasks', fieldName, 'branchAction'], nextDraft.branch.mode)
-    form.setFieldValue(['tasks', fieldName, 'branchName'], nextDraft.branch.name)
-    form.setFieldValue(
-      ['tasks', fieldName, 'branchKind'],
-      nextDraft.branch.kind ?? DEFAULT_STARTUP_FORM_VALUES.branchKind
-    )
-  }, [fieldName, form])
-
-  return (
-    <div className='automation-view__task-status-bar'>
-      <ChatStatusBar
-        draftWorkspace={draftWorkspace}
-        isCreating={false}
-        onDraftWorkspaceChange={handleDraftWorkspaceChange}
-      />
-    </div>
-  )
-}
-
-export function AutomationTaskComposer({ fieldName, form }: AutomationTaskComposerProps) {
-  const { t } = useTranslation()
-  const [collapsed, setCollapsed] = useState(false)
-
-  return (
-    <div className={`automation-view__task-composer ${collapsed ? 'is-collapsed' : ''}`.trim()}>
-      <div className='automation-view__task-title-row'>
-        <Tooltip title={collapsed ? t('automation.expandTask') : t('automation.collapseTask')}>
-          <Button
-            aria-expanded={!collapsed}
-            aria-label={collapsed ? t('automation.expandTask') : t('automation.collapseTask')}
-            className='automation-view__task-collapse-button'
-            type='text'
-            onClick={() => setCollapsed(prev => !prev)}
-          >
-            <span className='material-symbols-rounded automation-view__action-icon'>
-              {collapsed ? 'chevron_right' : 'keyboard_arrow_down'}
-            </span>
-          </Button>
-        </Tooltip>
-        <Form.Item className='automation-view__task-title-item' name={[fieldName, 'title']}>
-          <Input
-            aria-label={t('automation.taskTitle')}
-            className='automation-view__task-title-input'
-            placeholder={t('automation.taskTitlePlaceholder')}
-          />
-        </Form.Item>
-      </div>
-      <div className='automation-view__task-collapsible' hidden={collapsed}>
-        <div className='sender-container automation-view__task-sender-stack'>
-          <Form.Item
-            className='automation-view__task-prompt-item'
-            name={[fieldName, 'prompt']}
-            rules={[{ required: true, message: t('automation.promptRequired') }]}
-          >
-            <AutomationTaskSender fieldName={fieldName} form={form} />
-          </Form.Item>
-          <AutomationTaskStatusBar fieldName={fieldName} form={form} />
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/automation-view/@components/AutomationTriggerRow.tsx

@@ -1,192 +0,0 @@
-import { Button, Form, Input, InputNumber, Select, Tooltip } from 'antd'
-import type { FormInstance } from 'antd'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import type { RuleFormValues } from '../types'
-
-interface AutomationTriggerRowProps {
-  fieldName: number
-  form: FormInstance<RuleFormValues>
-  getWebhookUrl: (triggerId?: string, webhookKey?: string) => string
-  index: number
-  remove: (name: number) => void
-  triggerCount: number
-  updateWeeklyCron: (index: number, nextDay?: string, nextTime?: string) => void
-}
-
-const resetTriggerFields = (
-  form: FormInstance<RuleFormValues>,
-  fieldName: number,
-  value: RuleFormValues['triggers'][number]['type']
-) => {
-  form.setFieldValue(['triggers', fieldName, 'intervalMinutes'], 30)
-  form.setFieldValue(['triggers', fieldName, 'cronExpression'], '')
-  form.setFieldValue(['triggers', fieldName, 'weeklyDay'], '1')
-  form.setFieldValue(['triggers', fieldName, 'weeklyTime'], '09:00')
-  form.setFieldValue(['triggers', fieldName, 'webhookKey'], '')
-  if (value !== 'cron') {
-    form.setFieldValue(['triggers', fieldName, 'cronPreset'], undefined)
-  }
-}
-
-export function AutomationTriggerRow({
-  fieldName,
-  form,
-  getWebhookUrl,
-  index,
-  remove,
-  triggerCount,
-  updateWeeklyCron
-}: AutomationTriggerRowProps) {
-  const { t } = useTranslation()
-  const selectArrow = <span className='material-symbols-rounded automation-view__select-arrow'>
-    keyboard_arrow_down
-  </span>
-
-  return (
-    <Form.Item
-      noStyle
-      shouldUpdate={(prevValues, nextValues) => {
-        const prevTrigger = prevValues.triggers?.[fieldName]
-        const nextTrigger = nextValues.triggers?.[fieldName]
-        return prevTrigger?.type !== nextTrigger?.type ||
-          prevTrigger?.webhookKey !== nextTrigger?.webhookKey ||
-          prevTrigger?.id !== nextTrigger?.id
-      }}
-    >
-      {(formInstance) => {
-        const triggerType = formInstance.getFieldValue([
-          'triggers',
-          fieldName,
-          'type'
-        ]) as RuleFormValues['triggers'][number]['type']
-        const triggerId = formInstance.getFieldValue(['triggers', fieldName, 'id']) as string | undefined
-        const webhookKey = formInstance.getFieldValue(['triggers', fieldName, 'webhookKey']) as string | undefined
-        const webhookUrl = getWebhookUrl(triggerId, webhookKey)
-        return (
-          <div className='automation-view__trigger-row'>
-            <Form.Item name={[fieldName, 'id']} hidden>
-              <Input />
-            </Form.Item>
-            <div className='automation-view__trigger-type'>
-              <Form.Item
-                name={[fieldName, 'type']}
-                rules={[{ required: true, message: t('automation.ruleTypeRequired') }]}
-              >
-                <Select
-                  aria-label={t('automation.ruleType')}
-                  options={[
-                    { label: t('automation.typeInterval'), value: 'interval' },
-                    { label: t('automation.typeWebhook'), value: 'webhook' },
-                    { label: t('automation.typeCron'), value: 'cron' }
-                  ]}
-                  suffixIcon={selectArrow}
-                  onChange={(value) => resetTriggerFields(form, fieldName, value)}
-                />
-              </Form.Item>
-            </div>
-            <div className='automation-view__trigger-config'>
-              {triggerType === 'interval' && (
-                <Form.Item
-                  name={[fieldName, 'intervalMinutes']}
-                  rules={[{ required: true, message: t('automation.intervalRequired') }]}
-                >
-                  <InputNumber
-                    min={1}
-                    aria-label={t('automation.intervalMinutes')}
-                    className='automation-view__input-number'
-                  />
-                </Form.Item>
-              )}
-              {triggerType === 'cron' && (
-                <div className='automation-view__cron-section'>
-                  <Form.Item
-                    name={[fieldName, 'cronExpression']}
-                    rules={[{ required: true, message: t('automation.cronExpressionRequired') }]}
-                  >
-                    <Input
-                      aria-label={t('automation.cronExpressionLabel')}
-                      placeholder={t('automation.cronExpressionHint')}
-                    />
-                  </Form.Item>
-                  <Form.Item name={[fieldName, 'cronPreset']}>
-                    <Select
-                      aria-label={t('automation.cronPreset')}
-                      options={[
-                        { label: t('automation.cronPresetHourly'), value: '0 * * * *' },
-                        { label: t('automation.cronPresetDaily9'), value: '0 9 * * *' },
-                        { label: t('automation.cronPresetWeekday9'), value: '0 9 * * 1-5' },
-                        { label: t('automation.cronPresetWeekend10'), value: '0 10 * * 6,0' }
-                      ]}
-                      onChange={(value) => form.setFieldValue(['triggers', fieldName, 'cronExpression'], value)}
-                      placeholder={t('automation.cronPresetHint')}
-                      allowClear
-                    />
-                  </Form.Item>
-                  <div className='automation-view__cron-weekly'>
-                    <Form.Item name={[fieldName, 'weeklyDay']}>
-                      <Select
-                        aria-label={t('automation.weeklyDay')}
-                        options={[
-                          { label: t('automation.weekdaySun'), value: '0' },
-                          { label: t('automation.weekdayMon'), value: '1' },
-                          { label: t('automation.weekdayTue'), value: '2' },
-                          { label: t('automation.weekdayWed'), value: '3' },
-                          { label: t('automation.weekdayThu'), value: '4' },
-                          { label: t('automation.weekdayFri'), value: '5' },
-                          { label: t('automation.weekdaySat'), value: '6' }
-                        ]}
-                        onChange={(value) => updateWeeklyCron(index, value)}
-                      />
-                    </Form.Item>
-                    <Form.Item name={[fieldName, 'weeklyTime']}>
-                      <Input
-                        aria-label={t('automation.weeklyTime')}
-                        placeholder={t('automation.weeklyTimeHint')}
-                        onChange={(event) => updateWeeklyCron(index, undefined, event.target.value)}
-                      />
-                    </Form.Item>
-                  </div>
-                </div>
-              )}
-              {triggerType === 'webhook' && (
-                <div className='automation-view__webhook'>
-                  <Form.Item name={[fieldName, 'webhookKey']}>
-                    <Input aria-label={t('automation.webhookKey')} placeholder={t('automation.webhookKeyHint')} />
-                  </Form.Item>
-                  {webhookUrl && (
-                    <div className='automation-view__webhook-row'>
-                      <span className='automation-view__webhook-url'>{webhookUrl}</span>
-                      <Tooltip title={t('automation.copy')}>
-                        <Button
-                          className='automation-view__icon-button'
-                          type='text'
-                          onClick={() => void navigator.clipboard.writeText(webhookUrl)}
-                        >
-                          <span className='material-symbols-rounded automation-view__action-icon'>content_copy</span>
-                        </Button>
-                      </Tooltip>
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-            <div className='automation-view__trigger-actions'>
-              <Tooltip title={t('automation.remove')}>
-                <Button
-                  className='automation-view__trigger-remove-button'
-                  type='text'
-                  onClick={() => remove(fieldName)}
-                  disabled={triggerCount <= 1}
-                >
-                  <span className='material-symbols-rounded automation-view__action-icon'>close</span>
-                </Button>
-              </Tooltip>
-            </div>
-          </div>
-        )
-      }}
-    </Form.Item>
-  )
-}