@vibe-forge/client 2.0.0 → 2.0.1

package/src/components/automation-view/@hooks/use-automation-startup-options-data.tsx

@@ -0,0 +1,289 @@
+/* eslint-disable max-lines -- sender option assembly keeps config/default resolution in one hook */
+import { createElement, useCallback, useMemo } from 'react'
+import type { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+
+import type {
+  AdapterBuiltinModel,
+  ConfigResponse,
+  ModelMetadataConfig,
+  ModelServiceConfig,
+  RecommendedModelConfig
+} from '@vibe-forge/types'
+import { resolveEffectiveEffort } from '@vibe-forge/utils/model-selection'
+
+import { getConfig } from '#~/api.js'
+import {
+  listServiceModels,
+  normalizeNonEmptyString,
+  resolveAdapterModelCompatibility,
+  resolveChatAdapterSelection,
+  resolveChatModelSelection,
+  resolveDefaultChatModelSelection,
+  resolveModelForChatAdapterSelection
+} from '#~/hooks/chat/model-selector'
+import { buildModelSelectorData } from '#~/hooks/chat/model-selector-data'
+import type { ChatEffort } from '#~/hooks/chat/use-chat-effort'
+import type { ModelSelectMenuGroup, ModelSelectOption } from '#~/hooks/chat/use-chat-model-adapter-selection'
+import { getAdapterDisplay } from '#~/resources/adapters.js'
+import { decorateAutomationSenderModelOption, mapAutomationSenderModelMenuGroups } from '../@utils/sender-model-options'
+
+interface AutomationSenderAdapterOption {
+  value: string
+  label: ReactNode
+  searchText?: string
+  displayLabel?: string
+}
+
+const buildBuiltinModelValues = (models: AdapterBuiltinModel[] | undefined) => (
+  Array.isArray(models) ? models.map(model => model.value) : []
+)
+
+const normalizeChatEffort = (value: unknown): ChatEffort => (
+  value === 'low' || value === 'medium' || value === 'high' || value === 'max' ? value : 'default'
+)
+
+export function useAutomationStartupOptionsData({
+  selectedAdapter,
+  selectedEffort,
+  selectedModel
+}: {
+  selectedAdapter?: string
+  selectedEffort?: ChatEffort
+  selectedModel?: string
+}) {
+  const { t } = useTranslation()
+  const { data: configRes } = useSWR<ConfigResponse>('/api/config', getConfig)
+
+  const mergedAdapters = useMemo(() => {
+    return (configRes?.sources?.merged?.adapters ?? {}) as Record<string, unknown>
+  }, [configRes?.sources?.merged?.adapters])
+
+  const mergedModels = useMemo(() => {
+    return (configRes?.sources?.merged?.models ?? {}) as Record<string, ModelMetadataConfig>
+  }, [configRes?.sources?.merged?.models])
+
+  const mergedModelServices = useMemo(() => {
+    return (configRes?.sources?.merged?.modelServices ?? {}) as Record<string, ModelServiceConfig>
+  }, [configRes?.sources?.merged?.modelServices])
+
+  const recommendedModels = useMemo(() => {
+    const raw = configRes?.sources?.merged?.general?.recommendedModels
+    if (!Array.isArray(raw)) return []
+    return raw.filter((item): item is RecommendedModelConfig => (
+      item != null && typeof item === 'object' && typeof item.model === 'string' && item.model.trim() !== ''
+    ))
+  }, [configRes?.sources?.merged?.general?.recommendedModels])
+
+  const adapterBuiltinModels = useMemo(() => {
+    return (configRes?.sources?.merged?.adapterBuiltinModels ?? {}) as Record<string, AdapterBuiltinModel[]>
+  }, [configRes?.sources?.merged?.adapterBuiltinModels])
+
+  const defaultAdapter = normalizeNonEmptyString(configRes?.sources?.merged?.general?.defaultAdapter)
+  const defaultModel = normalizeNonEmptyString(configRes?.sources?.merged?.general?.defaultModel)
+  const normalizedSelectedAdapter = normalizeNonEmptyString(selectedAdapter)
+  const normalizedSelectedModel = normalizeNonEmptyString(selectedModel)
+  const availableAdapters = useMemo(() => Object.keys(mergedAdapters), [mergedAdapters])
+  const allBuiltinModelValues = useMemo(() => (
+    Object.values(adapterBuiltinModels).flatMap(models => buildBuiltinModelValues(models))
+  ), [adapterBuiltinModels])
+  const availableServiceModels = useMemo(() => listServiceModels(mergedModelServices), [mergedModelServices])
+  const defaultModelService = normalizeNonEmptyString(configRes?.sources?.merged?.general?.defaultModelService)
+
+  const resolveAdapterValue = useCallback((value?: string) => (
+    resolveChatAdapterSelection({
+      value,
+      availableAdapters,
+      defaultAdapter
+    })
+  ), [availableAdapters, defaultAdapter])
+
+  const effectiveAdapter = useMemo(() => (
+    normalizedSelectedAdapter ?? resolveAdapterValue(undefined)
+  ), [normalizedSelectedAdapter, resolveAdapterValue])
+
+  const activeBuiltinModels = useMemo(() => {
+    if (effectiveAdapter != null && adapterBuiltinModels[effectiveAdapter] != null) {
+      return { [effectiveAdapter]: adapterBuiltinModels[effectiveAdapter] }
+    }
+    return adapterBuiltinModels
+  }, [adapterBuiltinModels, effectiveAdapter])
+  const activeBuiltinModelValues = useMemo(() => (
+    Object.values(activeBuiltinModels).flatMap(models => buildBuiltinModelValues(models))
+  ), [activeBuiltinModels])
+
+  const resolvedDefaultModel = useMemo(() => (
+    resolveDefaultChatModelSelection({
+      defaultModel,
+      defaultModelService,
+      builtinModels: allBuiltinModelValues,
+      serviceModels: availableServiceModels,
+      preserveUnknownDefaultModel: false
+    })
+  ), [allBuiltinModelValues, availableServiceModels, defaultModel, defaultModelService])
+
+  const resolveModelForAdapter = useCallback((adapter?: string) => {
+    const builtinModels = buildBuiltinModelValues(
+      adapter != null ? adapterBuiltinModels[adapter] : undefined
+    )
+    const resolvedModel = resolveModelForChatAdapterSelection({
+      adapter,
+      adapters: mergedAdapters,
+      defaultModel,
+      defaultModelService,
+      builtinModels,
+      fallbackBuiltinModels: allBuiltinModelValues,
+      serviceModels: availableServiceModels
+    })
+    if (!adapter || !resolvedModel) return resolvedModel
+
+    const compatibility = resolveAdapterModelCompatibility({
+      adapter,
+      model: resolvedModel,
+      adapterConfig: mergedAdapters[adapter],
+      builtinModels,
+      serviceModels: availableServiceModels,
+      preferredServiceKey: defaultModelService,
+      preserveUnknownDefaultModel: false
+    })
+    return compatibility.model ?? resolvedModel
+  }, [
+    adapterBuiltinModels,
+    allBuiltinModelValues,
+    availableServiceModels,
+    defaultModel,
+    defaultModelService,
+    mergedAdapters
+  ])
+
+  const effectiveModel = useMemo(() => {
+    if (normalizedSelectedModel != null) {
+      return resolveChatModelSelection({
+        value: normalizedSelectedModel,
+        builtinModels: activeBuiltinModelValues,
+        serviceModels: availableServiceModels,
+        defaultModelService,
+        preserveUnknown: true
+      }) ?? normalizedSelectedModel
+    }
+
+    return resolveModelForAdapter(effectiveAdapter) ?? resolvedDefaultModel
+  }, [
+    activeBuiltinModelValues,
+    availableServiceModels,
+    defaultModelService,
+    effectiveAdapter,
+    normalizedSelectedModel,
+    resolveModelForAdapter,
+    resolvedDefaultModel
+  ])
+
+  const effectiveEffort = useMemo<ChatEffort>(() => {
+    if (selectedEffort != null && selectedEffort !== 'default') {
+      return selectedEffort
+    }
+
+    return normalizeChatEffort(
+      resolveEffectiveEffort({
+        model: effectiveModel,
+        adapterConfig: effectiveAdapter != null ? mergedAdapters[effectiveAdapter] : undefined,
+        configEffort: configRes?.sources?.merged?.general?.effort,
+        models: mergedModels
+      }).effort
+    )
+  }, [
+    configRes?.sources?.merged?.general?.effort,
+    effectiveAdapter,
+    effectiveModel,
+    mergedAdapters,
+    mergedModels,
+    selectedEffort
+  ])
+
+  const adapterOptions = useMemo<AutomationSenderAdapterOption[]>(() => {
+    return Object.keys(mergedAdapters).map((key) => {
+      const display = getAdapterDisplay(key)
+      return {
+        value: key,
+        displayLabel: display.title,
+        searchText: `${key} ${display.title}`,
+        label: createElement('span', { className: 'automation-view__sender-adapter-option' }, [
+          display.icon != null
+            ? createElement('img', {
+              key: 'icon',
+              className: 'automation-view__sender-adapter-icon',
+              src: display.icon,
+              alt: '',
+              'aria-hidden': true
+            })
+            : createElement('span', {
+              key: 'fallback-icon',
+              className:
+                'automation-view__sender-adapter-icon automation-view__sender-adapter-icon--fallback material-symbols-rounded',
+              'aria-hidden': true
+            }, 'deployed_code'),
+          createElement('span', { key: 'text' }, display.title)
+        ])
+      }
+    })
+  }, [mergedAdapters])
+
+  const modelSelectorData = useMemo(() => {
+    return buildModelSelectorData({
+      activeBuiltinModels,
+      availableServiceModels,
+      defaultModelService,
+      mergedModels,
+      mergedModelServices,
+      recommendedModels,
+      recommendedGroupTitle: t('chat.modelGroupRecommended', { defaultValue: '推荐模型' }),
+      servicePreviewGroupTitle: t('chat.modelGroupServices', { defaultValue: '模型服务' }),
+      builtinGroupTitle: (adapterKey) =>
+        t('chat.modelGroupBuiltin', {
+          adapter: adapterKey,
+          defaultValue: `${adapterKey} (Default)`
+        })
+    })
+  }, [
+    activeBuiltinModels,
+    availableServiceModels,
+    defaultModelService,
+    mergedModels,
+    mergedModelServices,
+    recommendedModels,
+    t
+  ])
+  const defaultModelLabel = t('automation.defaultModelLabel', { defaultValue: '默认模型' })
+
+  const modelSearchOptions = useMemo<ModelSelectOption[]>(() => (
+    modelSelectorData.searchOptions.map(option => decorateAutomationSenderModelOption(option, { defaultModelLabel }))
+  ), [defaultModelLabel, modelSelectorData.searchOptions])
+
+  const recommendedModelOptions = useMemo<ModelSelectOption[]>(() => (
+    modelSelectorData.recommendedOptions.map(option =>
+      decorateAutomationSenderModelOption(option, { defaultModelLabel })
+    )
+  ), [defaultModelLabel, modelSelectorData.recommendedOptions])
+
+  const servicePreviewModelOptions = useMemo<ModelSelectOption[]>(() => (
+    modelSelectorData.servicePreviewOptions.map(option =>
+      decorateAutomationSenderModelOption(option, { defaultModelLabel })
+    )
+  ), [defaultModelLabel, modelSelectorData.servicePreviewOptions])
+
+  const modelMenuGroups = useMemo<ModelSelectMenuGroup[]>(() => (
+    mapAutomationSenderModelMenuGroups(modelSelectorData.moreModelGroups, { defaultModelLabel })
+  ), [defaultModelLabel, modelSelectorData.moreModelGroups])
+
+  return {
+    adapterOptions,
+    effectiveAdapter,
+    effectiveEffort,
+    effectiveModel,
+    modelMenuGroups,
+    modelSearchOptions,
+    recommendedModelOptions,
+    servicePreviewModelOptions
+  }
+}

package/src/components/automation-view/@hooks/use-automation-startup-static-options.ts

@@ -0,0 +1,51 @@
+import { useMemo } from 'react'
+
+import type { GitBranchKind } from '@vibe-forge/types'
+
+import type { ChatEffort } from '#~/hooks/chat/use-chat-effort'
+import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
+
+import type { AutomationBranchAction, AutomationCreateWorktreeMode } from '../types'
+
+export function useAutomationStartupStaticOptions(t: (key: string) => string) {
+  const effortOptions = useMemo<Array<{ value: ChatEffort; label: string }>>(() => [
+    { value: 'default', label: t('automation.startupDefault') },
+    { value: 'low', label: t('automation.effortLow') },
+    { value: 'medium', label: t('automation.effortMedium') },
+    { value: 'high', label: t('automation.effortHigh') },
+    { value: 'max', label: t('automation.effortMax') }
+  ], [t])
+
+  const permissionModeOptions = useMemo<Array<{ value: PermissionMode; label: string }>>(() => [
+    { value: 'default', label: t('automation.startupDefault') },
+    { value: 'acceptEdits', label: t('automation.permissionAcceptEdits') },
+    { value: 'plan', label: t('automation.permissionPlan') },
+    { value: 'dontAsk', label: t('automation.permissionDontAsk') },
+    { value: 'bypassPermissions', label: t('automation.permissionBypassPermissions') }
+  ], [t])
+
+  const workspaceModeOptions = useMemo<Array<{ value: AutomationCreateWorktreeMode; label: string }>>(() => [
+    { value: 'default', label: t('automation.startupDefault') },
+    { value: 'managed', label: t('automation.startupUseManagedWorktree') },
+    { value: 'local', label: t('automation.startupUseCurrentWorkspace') }
+  ], [t])
+
+  const branchActionOptions = useMemo<Array<{ value: AutomationBranchAction; label: string }>>(() => [
+    { value: 'default', label: t('automation.startupBranchDefault') },
+    { value: 'checkout', label: t('automation.startupBranchCheckout') },
+    { value: 'create', label: t('automation.startupBranchCreate') }
+  ], [t])
+
+  const branchKindOptions = useMemo<Array<{ value: GitBranchKind; label: string }>>(() => [
+    { value: 'local', label: t('automation.startupBranchKindLocal') },
+    { value: 'remote', label: t('automation.startupBranchKindRemote') }
+  ], [t])
+
+  return {
+    branchActionOptions,
+    branchKindOptions,
+    effortOptions,
+    permissionModeOptions,
+    workspaceModeOptions
+  }
+}

package/src/components/automation-view/@utils/sender-model-options.tsx

@@ -0,0 +1,52 @@
+import { createElement } from 'react'
+
+import { ModelSelectOptionLabel } from '#~/components/chat/sender/@components/model-select/ModelSelectOptionLabel'
+import type { ModelSelectGroupData, ModelSelectOptionData } from '#~/hooks/chat/model-selector-data'
+import type { ModelSelectMenuGroup, ModelSelectOption } from '#~/hooks/chat/use-chat-model-adapter-selection'
+
+interface AutomationSenderModelOptionParams {
+  defaultModelLabel: string
+}
+
+const normalizeAutomationModelOption = (
+  option: ModelSelectOptionData,
+  params: AutomationSenderModelOptionParams
+): ModelSelectOptionData => {
+  if (option.value !== 'default') {
+    return option
+  }
+
+  return {
+    ...option,
+    title: params.defaultModelLabel,
+    displayLabel: params.defaultModelLabel,
+    searchText: `${option.searchText} ${params.defaultModelLabel}`
+  }
+}
+
+export const decorateAutomationSenderModelOption = (
+  option: ModelSelectOptionData,
+  params: AutomationSenderModelOptionParams
+): ModelSelectOption => {
+  const normalizedOption = normalizeAutomationModelOption(option, params)
+  const decoratedOption: ModelSelectOption = {
+    ...normalizedOption,
+    canToggleRecommendation: false,
+    isRecommended: false,
+    isUserRecommended: false,
+    label: null
+  }
+
+  decoratedOption.label = createElement(ModelSelectOptionLabel, { option: decoratedOption })
+  return decoratedOption
+}
+
+export const mapAutomationSenderModelMenuGroups = (
+  groups: ModelSelectGroupData[],
+  params: AutomationSenderModelOptionParams
+): ModelSelectMenuGroup[] => (
+  groups.map(group => ({
+    ...group,
+    options: group.options.map(option => decorateAutomationSenderModelOption(option, params))
+  }))
+)

package/src/components/automation-view/@utils/startup-options.ts

@@ -0,0 +1,26 @@
+import type { EffortLevel, SessionPermissionMode } from '@vibe-forge/types'
+
+export const DEFAULT_SELECT_VALUE = ''
+
+export const DEFAULT_STARTUP_FORM_VALUES = {
+  model: DEFAULT_SELECT_VALUE,
+  adapter: DEFAULT_SELECT_VALUE,
+  effort: 'default',
+  permissionMode: 'default',
+  createWorktreeMode: 'default',
+  branchAction: 'default',
+  branchName: '',
+  branchKind: 'local'
+} as const
+
+export const isNonEmptyString = (value: unknown): value is string => (
+  typeof value === 'string' && value.trim() !== ''
+)
+
+export const getEffortLabelKey = (effort: EffortLevel) => (
+  `automation.effort${effort[0].toUpperCase()}${effort.slice(1)}`
+)
+
+export const getPermissionModeLabelKey = (permissionMode: Exclude<SessionPermissionMode, 'default'>) => (
+  `automation.permission${permissionMode[0].toUpperCase()}${permissionMode.slice(1)}`
+)

package/src/components/automation-view/AutomationEmptyGuide.tsx

@@ -0,0 +1,61 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface AutomationEmptyGuideProps {
+  onSelectStarter: (prompt: string) => void
+}
+
+export function AutomationEmptyGuide({ onSelectStarter }: AutomationEmptyGuideProps) {
+  const { t } = useTranslation()
+  const starterItems = useMemo(() => [
+    {
+      icon: 'wb_sunny',
+      title: t('automation.starterDailyTitle'),
+      description: t('automation.starterDailyDescription'),
+      prompt: t('automation.starterDailyPrompt')
+    },
+    {
+      icon: 'bug_report',
+      title: t('automation.starterHealthTitle'),
+      description: t('automation.starterHealthDescription'),
+      prompt: t('automation.starterHealthPrompt')
+    },
+    {
+      icon: 'summarize',
+      title: t('automation.starterWeeklyTitle'),
+      description: t('automation.starterWeeklyDescription'),
+      prompt: t('automation.starterWeeklyPrompt')
+    },
+    {
+      icon: 'notifications_active',
+      title: t('automation.starterReminderTitle'),
+      description: t('automation.starterReminderDescription'),
+      prompt: t('automation.starterReminderPrompt')
+    }
+  ], [t])
+
+  return (
+    <div className='automation-empty-guide'>
+      <div className='automation-empty-guide__header'>
+        <h2>{t('automation.emptyLandingTitle')}</h2>
+        <p>{t('automation.emptyLandingDescription')}</p>
+      </div>
+      <div className='automation-empty-guide__grid'>
+        {starterItems.map(item => (
+          <button
+            key={item.title}
+            type='button'
+            className='automation-empty-guide__item'
+            onClick={() => onSelectStarter(item.prompt)}
+          >
+            <span className='material-symbols-rounded automation-empty-guide__icon'>{item.icon}</span>
+            <span className='automation-empty-guide__item-text'>
+              <span className='automation-empty-guide__item-title'>{item.title}</span>
+              <span className='automation-empty-guide__item-desc'>{item.description}</span>
+            </span>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/automation-view/AutomationEmptyLanding.scss

@@ -0,0 +1,165 @@
+.automation-empty-landing-shell {
+  position: relative;
+  height: 100%;
+  min-height: 0;
+}
+
+.automation-empty-landing-shell--flush-panel {
+  height: calc(100% + var(--automation-view-right-padding-bottom, 12px));
+  margin-inline: calc(-1 * var(--automation-view-right-padding-x, 12px));
+  margin-bottom: calc(-1 * var(--automation-view-right-padding-bottom, 12px));
+
+  .automation-empty-landing__collapsed-actions {
+    left: var(--automation-view-right-padding-x, 12px);
+  }
+}
+
+.automation-empty-landing__collapsed-actions {
+  top: 0;
+  left: 0;
+}
+
+.automation-empty-landing {
+  height: 100%;
+  background: transparent;
+}
+
+.automation-empty-guide {
+  width: min(100%, 980px);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-width: 0;
+}
+
+.automation-empty-guide__header {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+
+  h2 {
+    margin: 0;
+    color: var(--text-color);
+    font-size: 21px;
+    line-height: 1.25;
+    letter-spacing: 0;
+  }
+
+  p {
+    max-width: 620px;
+    margin: 0;
+    color: var(--sub-text-color);
+    font-size: 13px;
+    line-height: 1.55;
+  }
+}
+
+.automation-empty-guide__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.automation-empty-guide__item {
+  min-width: 0;
+  min-height: 72px;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background-color .2s ease,
+    border-color .2s ease,
+    transform .2s ease;
+
+  &:hover {
+    background: var(--tag-hover-bg, var(--tag-bg));
+    border-color: rgba(37, 99, 235, .32);
+  }
+
+  &:active {
+    transform: scale(.99);
+  }
+}
+
+.automation-empty-guide__icon {
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: var(--tag-bg);
+  color: var(--primary-color);
+  font-size: 16px;
+  line-height: 1;
+}
+
+.automation-empty-guide__item-text {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.automation-empty-guide__item-title {
+  color: var(--text-color);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.automation-empty-guide__item-desc {
+  color: var(--sub-text-color);
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.automation-empty-guide__composer {
+  .chat-input-wrapper {
+    background: transparent;
+  }
+}
+
+.composer-landing--compact {
+  &.automation-empty-landing {
+    .composer-landing__content {
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .automation-empty-guide {
+    width: 100%;
+    gap: 10px;
+  }
+
+  .automation-empty-guide__header {
+    gap: 6px;
+
+    h2 {
+      font-size: 18px;
+    }
+
+    p {
+      font-size: 12px;
+    }
+  }
+
+  .automation-empty-guide__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .automation-empty-guide__item {
+    min-height: 62px;
+    padding: 9px;
+  }
+}