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

package/src/components/config/RecommendedModelsItemEditor.tsx

@@ -0,0 +1,146 @@
+import { Input, Select } from 'antd'
+
+import type { RecommendedModelConfig } from '@vibe-forge/types'
+
+import { FieldRow } from './ConfigFieldRow'
+import { getTypeIcon } from './configUtils'
+import type { TranslationFn } from './configUtils'
+
+const isRecordObject = (value: unknown): value is Record<string, unknown> => (
+  value != null &&
+  typeof value === 'object' &&
+  !Array.isArray(value)
+)
+
+type EditableRecommendedModel = Record<string, unknown> & {
+  service?: string
+  model?: string
+  title?: string
+  description?: string
+  placement?: RecommendedModelConfig['placement']
+}
+
+export const RecommendedModelsItemEditor = ({
+  value,
+  onChange,
+  mergedModelServices,
+  t
+}: {
+  value: unknown
+  onChange: (nextValue: Record<string, unknown>) => void
+  mergedModelServices: Record<string, unknown>
+  t: TranslationFn
+}) => {
+  const item: EditableRecommendedModel = isRecordObject(value)
+    ? value as EditableRecommendedModel
+    : {}
+  const serviceKey = typeof item.service === 'string' ? item.service : undefined
+  const serviceOptions = Object.entries(mergedModelServices).map(([key, entry]) => {
+    const record = isRecordObject(entry) ? entry : {}
+    const title = typeof record.title === 'string' && record.title.trim() !== '' ? record.title : key
+    return {
+      value: key,
+      label: title
+    }
+  })
+  const serviceRecord = serviceKey != null && isRecordObject(mergedModelServices[serviceKey])
+    ? mergedModelServices[serviceKey] as Record<string, unknown>
+    : undefined
+  const serviceModels = Array.isArray(serviceRecord?.models)
+    ? serviceRecord.models.filter((model): model is string => typeof model === 'string')
+    : []
+
+  const updateItem = (patch: Partial<EditableRecommendedModel>) => {
+    onChange({
+      ...item,
+      ...patch
+    })
+  }
+
+  return (
+    <div className='config-view__field-stack'>
+      <FieldRow
+        title={t('config.fields.general.recommendedModels.item.service.label')}
+        description={t('config.fields.general.recommendedModels.item.service.desc')}
+        icon={getTypeIcon('string')}
+      >
+        <Select<string>
+          value={serviceKey}
+          options={serviceOptions}
+          onChange={(nextValue) => {
+            updateItem({
+              service: nextValue,
+              model: undefined
+            })
+          }}
+          allowClear
+          placeholder={t('config.editor.defaultModelServicePlaceholder')}
+        />
+      </FieldRow>
+      <FieldRow
+        title={t('config.fields.general.recommendedModels.item.model.label')}
+        description={t('config.fields.general.recommendedModels.item.model.desc')}
+        icon={getTypeIcon('string')}
+      >
+        {serviceModels.length > 0
+          ? (
+            <Select<string>
+              value={typeof item.model === 'string' && item.model !== '' ? item.model : undefined}
+              options={serviceModels.map(model => ({ value: model, label: model }))}
+              onChange={(nextValue) => updateItem({ model: nextValue })}
+              allowClear
+              placeholder={t('config.editor.defaultModelPlaceholder')}
+            />
+          )
+          : (
+            <Input
+              value={typeof item.model === 'string' ? item.model : ''}
+              onChange={(event) => updateItem({ model: event.target.value })}
+              placeholder={t('config.editor.defaultModelPlaceholder')}
+            />
+          )}
+      </FieldRow>
+      <FieldRow
+        title={t('config.fields.general.recommendedModels.item.title.label')}
+        description={t('config.fields.general.recommendedModels.item.title.desc')}
+        icon={getTypeIcon('string')}
+      >
+        <Input
+          value={typeof item.title === 'string' ? item.title : ''}
+          onChange={(event) => updateItem({ title: event.target.value })}
+          placeholder={t('config.editor.titlePlaceholder')}
+        />
+      </FieldRow>
+      <FieldRow
+        title={t('config.fields.general.recommendedModels.item.description.label')}
+        description={t('config.fields.general.recommendedModels.item.description.desc')}
+        icon={getTypeIcon('string')}
+        layout='stacked'
+      >
+        <Input.TextArea
+          value={typeof item.description === 'string' ? item.description : ''}
+          onChange={(event) => updateItem({ description: event.target.value })}
+          autoSize={{ minRows: 4 }}
+          placeholder={t('config.editor.descriptionPlaceholder')}
+        />
+      </FieldRow>
+      <FieldRow
+        title={t('config.fields.general.recommendedModels.item.placement.label')}
+        description={t('config.fields.general.recommendedModels.item.placement.desc')}
+        icon={getTypeIcon('string')}
+      >
+        <Select<RecommendedModelConfig['placement']>
+          value={item.placement}
+          options={[
+            {
+              value: 'modelSelector' as const,
+              label: t('config.options.recommendedModels.modelSelector')
+            }
+          ]}
+          onChange={(nextValue) => updateItem({ placement: nextValue })}
+          allowClear
+        />
+      </FieldRow>
+    </div>
+  )
+}

package/src/components/config/WorktreeEnvironmentDetailView.tsx

@@ -0,0 +1,126 @@
+import { Button, Input, Spin, Tooltip } from 'antd'
+import type { ReactNode } from 'react'
+
+import type { WorktreeEnvironmentDetail, WorktreeEnvironmentScriptKey } from '@vibe-forge/types'
+
+import { WorktreeEnvironmentScriptEditors } from './WorktreeEnvironmentScriptEditors'
+import type { TranslationFn } from './configUtils'
+import { toDisplayEnvironmentName } from './worktree-environment-panel-model'
+
+export function WorktreeEnvironmentDetailView({
+  draftScripts,
+  isDetailLoading,
+  nameDraft,
+  selectedEnvironment,
+  sourceSwitch,
+  onBack,
+  onNameDraftChange,
+  onScriptChange,
+  t
+}: {
+  draftScripts: Record<WorktreeEnvironmentScriptKey, string>
+  isDetailLoading: boolean
+  nameDraft: string
+  selectedEnvironment?: WorktreeEnvironmentDetail
+  sourceSwitch: ReactNode
+  onBack: () => void
+  onNameDraftChange: (value: string) => void
+  onScriptChange: (key: WorktreeEnvironmentScriptKey, content: string) => void
+  t: TranslationFn
+}) {
+  if (selectedEnvironment == null) {
+    return (
+      <div className='worktree-env-panel__state'>
+        <Spin />
+      </div>
+    )
+  }
+
+  return (
+    <div className='worktree-env-panel__detail-view'>
+      <div className='config-view__section-header worktree-env-panel__detail-header'>
+        <WorktreeEnvironmentBreadcrumb
+          environmentId={selectedEnvironment.id}
+          isLocal={selectedEnvironment.isLocal}
+          onBack={onBack}
+          t={t}
+        />
+        <div className='config-view__section-header-extra'>
+          {sourceSwitch}
+        </div>
+      </div>
+
+      <section className='worktree-env-panel__section'>
+        <div className='worktree-env-panel__field-row'>
+          <label>{t('config.environments.name')}</label>
+          <Input
+            value={nameDraft}
+            onChange={event => onNameDraftChange(event.target.value)}
+          />
+        </div>
+      </section>
+
+      {isDetailLoading
+        ? (
+          <div className='worktree-env-panel__state'>
+            <Spin />
+          </div>
+        )
+        : (
+          <WorktreeEnvironmentScriptEditors
+            draftScripts={draftScripts}
+            onChange={onScriptChange}
+            t={t}
+          />
+        )}
+    </div>
+  )
+}
+
+function WorktreeEnvironmentBreadcrumb({
+  environmentId,
+  isLocal,
+  onBack,
+  t
+}: {
+  environmentId: string
+  isLocal: boolean
+  onBack: () => void
+  t: TranslationFn
+}) {
+  const listTitle = isLocal
+    ? t('config.environments.localListTitle')
+    : t('config.environments.projectListTitle')
+
+  return (
+    <div className='config-view__detail-trail'>
+      <Tooltip title={t('config.detail.back')}>
+        <Button
+          size='small'
+          type='text'
+          className='config-view__detail-back'
+          aria-label={t('config.detail.back')}
+          icon={<span className='material-symbols-rounded'>chevron_left</span>}
+          onClick={onBack}
+        />
+      </Tooltip>
+      <div className='config-view__detail-breadcrumb'>
+        <span className='config-view__detail-crumb config-view__detail-crumb--static'>
+          {t('config.sections.environments')}
+        </span>
+        <span className='config-view__detail-separator'>/</span>
+        <button
+          type='button'
+          className='config-view__detail-crumb config-view__detail-crumb--link'
+          onClick={onBack}
+        >
+          {listTitle}
+        </button>
+        <span className='config-view__detail-separator'>/</span>
+        <span className='config-view__detail-crumb config-view__detail-crumb--current'>
+          {toDisplayEnvironmentName(environmentId)}
+        </span>
+      </div>
+    </div>
+  )
+}

package/src/components/config/WorktreeEnvironmentListView.tsx

@@ -0,0 +1,126 @@
+import { Button, Empty, Input, Spin } from 'antd'
+import type { ReactNode } from 'react'
+import { useMemo, useState } from 'react'
+
+import type { WorktreeEnvironmentSummary } from '@vibe-forge/types'
+
+import type { TranslationFn } from './configUtils'
+import { toDisplayEnvironmentName } from './worktree-environment-panel-model'
+
+export function WorktreeEnvironmentListView({
+  isLoading,
+  sourceSwitch,
+  visibleEnvironments,
+  onCreate,
+  onSelectEnvironment,
+  t
+}: {
+  isLoading: boolean
+  sourceSwitch: ReactNode
+  visibleEnvironments: WorktreeEnvironmentSummary[]
+  onCreate: () => void
+  onSelectEnvironment: (id: string) => void
+  t: TranslationFn
+}) {
+  const [searchQuery, setSearchQuery] = useState('')
+  const normalizedSearchQuery = searchQuery.trim().toLowerCase()
+  const filteredEnvironments = useMemo(() => (
+    normalizedSearchQuery === ''
+      ? visibleEnvironments
+      : visibleEnvironments.filter((environment) => {
+        const displayName = toDisplayEnvironmentName(environment.id).toLowerCase()
+        return displayName.includes(normalizedSearchQuery) ||
+          environment.path.toLowerCase().includes(normalizedSearchQuery)
+      })
+  ), [normalizedSearchQuery, visibleEnvironments])
+
+  return (
+    <div className='worktree-env-panel__list-view'>
+      <div className='worktree-env-panel__topbar'>
+        <div className='config-view__section-title'>
+          <span className='material-symbols-rounded config-view__section-icon'>deployed_code</span>
+          <span>{t('config.sections.environments')}</span>
+        </div>
+        {sourceSwitch}
+      </div>
+      <section className='worktree-env-panel__section'>
+        <div className='worktree-env-panel__search-row'>
+          <Input
+            allowClear
+            value={searchQuery}
+            className='worktree-env-panel__search'
+            onChange={event => setSearchQuery(event.target.value)}
+            placeholder={t('config.environments.searchPlaceholder')}
+            prefix={<span className='material-symbols-rounded'>search</span>}
+          />
+          <Button
+            type='text'
+            className='worktree-env-panel__create-button'
+            aria-label={t('config.environments.create')}
+            title={t('config.environments.create')}
+            icon={<span className='material-symbols-rounded'>add</span>}
+            onClick={onCreate}
+          />
+        </div>
+        <WorktreeEnvironmentListState
+          isLoading={isLoading}
+          emptyDescription={visibleEnvironments.length === 0
+            ? t('config.environments.empty')
+            : t('config.environments.searchEmpty')}
+          visibleEnvironments={filteredEnvironments}
+          onSelectEnvironment={onSelectEnvironment}
+        />
+      </section>
+    </div>
+  )
+}
+
+function WorktreeEnvironmentListState({
+  emptyDescription,
+  isLoading,
+  visibleEnvironments,
+  onSelectEnvironment
+}: {
+  emptyDescription: string
+  isLoading: boolean
+  visibleEnvironments: WorktreeEnvironmentSummary[]
+  onSelectEnvironment: (id: string) => void
+}) {
+  if (isLoading) {
+    return (
+      <div className='worktree-env-panel__state'>
+        <Spin />
+      </div>
+    )
+  }
+
+  if (visibleEnvironments.length === 0) {
+    return (
+      <div className='worktree-env-panel__state'>
+        <Empty description={emptyDescription} />
+      </div>
+    )
+  }
+
+  return (
+    <div className='worktree-env-panel__env-list'>
+      {visibleEnvironments.map(environment => (
+        <button
+          key={environment.id}
+          type='button'
+          className='worktree-env-panel__env-row'
+          onClick={() => onSelectEnvironment(environment.id)}
+        >
+          <span className='material-symbols-rounded'>deployed_code</span>
+          <span className='worktree-env-panel__env-row-main'>
+            <span className='worktree-env-panel__env-row-title'>
+              {toDisplayEnvironmentName(environment.id)}
+            </span>
+            <span className='worktree-env-panel__env-row-path'>{environment.path}</span>
+          </span>
+          <span className='material-symbols-rounded'>chevron_right</span>
+        </button>
+      ))}
+    </div>
+  )
+}