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

package/src/components/config/record-editors/schemaRecordUtils.ts

@@ -0,0 +1,55 @@
+import type { ConfigUiObjectSchema, ConfigUiRecordMapSchema } from '@vibe-forge/types'
+
+import { getValueByPath, setValueByPath } from '../configUtils'
+
+export const toLabel = (value: string) => (
+  value
+    .replace(/_/g, ' ')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/\b\w/g, char => char.toUpperCase())
+)
+
+export const buildConfigUiObjectDefaultValue = (schema: ConfigUiObjectSchema | undefined) => {
+  const initial: Record<string, unknown> = {}
+  for (const field of schema?.fields ?? []) {
+    if (field.defaultValue === undefined) continue
+    const nextValue = typeof field.defaultValue === 'object' && field.defaultValue != null
+      ? JSON.parse(JSON.stringify(field.defaultValue))
+      : field.defaultValue
+    Object.assign(initial, setValueByPath(initial, field.path, nextValue))
+  }
+  return initial
+}
+
+export const resolveConfigUiRecordEntry = ({
+  schema,
+  entryKey,
+  entryValue
+}: {
+  schema: ConfigUiRecordMapSchema
+  entryKey: string
+  entryValue: Record<string, unknown>
+}) => {
+  if (schema.mode === 'keyed') {
+    const matchedSchema = schema.schemas[entryKey]
+    return {
+      itemSchema: matchedSchema ?? schema.unknownSchema,
+      isKnownEntry: matchedSchema != null
+    }
+  }
+
+  const discriminatorField = schema.discriminatorField ?? 'type'
+  const discriminatorValue = getValueByPath(entryValue, [discriminatorField])
+  if (typeof discriminatorValue === 'string') {
+    const matchedSchema = schema.schemas[discriminatorValue]
+    return {
+      itemSchema: matchedSchema ?? schema.unknownSchema,
+      isKnownEntry: matchedSchema != null
+    }
+  }
+
+  return {
+    itemSchema: schema.unknownSchema,
+    isKnownEntry: false
+  }
+}

package/src/components/config/use-worktree-environment-auto-save.ts

@@ -0,0 +1,386 @@
+/* eslint-disable max-lines -- auto-save and conflict resolution share one state machine here. */
+import { useEffect, useRef } from 'react'
+
+import type { ConfigSource } from '@vibe-forge/core'
+import type {
+  WorktreeEnvironmentDetail,
+  WorktreeEnvironmentScriptKey,
+  WorktreeEnvironmentSummary
+} from '@vibe-forge/types'
+
+import { deleteWorktreeEnvironment, getApiErrorMessage, saveWorktreeEnvironment } from '#~/api'
+
+import { resolveRemoteConfigChangeAction, serializeComparableConfigValue } from './configConflict'
+import type { TranslationFn } from './configUtils'
+import {
+  buildDraftScripts,
+  toDisplayEnvironmentName,
+  toEnvironmentIdForSource
+} from './worktree-environment-panel-model'
+
+const AUTO_SAVE_DELAY_MS = 800
+
+const serializeDraftScripts = (scripts: Record<WorktreeEnvironmentScriptKey, string>) => (
+  serializeComparableConfigValue(scripts)
+)
+
+interface SyncedEnvironmentDraft {
+  id: string
+  name: string
+  scripts: string
+}
+
+interface MessageApi {
+  error: (content: string) => unknown
+}
+
+interface ModalApi {
+  confirm: (options: {
+    title: string
+    content: string
+    okText: string
+    cancelText: string
+    cancelButtonProps?: { danger?: boolean }
+    closable?: boolean
+    keyboard?: boolean
+    maskClosable?: boolean
+    onOk?: () => unknown
+    onCancel?: () => unknown
+  }) => unknown
+}
+
+export function useWorktreeEnvironmentAutoSave({
+  draftEnvironmentId,
+  draftScripts,
+  environments,
+  message,
+  modal,
+  nameDraft,
+  selectedEnvironment,
+  selectedId,
+  sourceKey,
+  refreshDetail,
+  refreshEnvironments,
+  setDraftEnvironmentId,
+  setDraftScripts,
+  setNameDraft,
+  setSelectedId,
+  t
+}: {
+  draftEnvironmentId?: string
+  draftScripts: Record<WorktreeEnvironmentScriptKey, string>
+  environments: WorktreeEnvironmentSummary[]
+  message: MessageApi
+  modal: ModalApi
+  nameDraft: string
+  selectedEnvironment?: WorktreeEnvironmentDetail
+  selectedId?: string
+  sourceKey: ConfigSource
+  refreshDetail: () => Promise<unknown>
+  refreshEnvironments: () => Promise<unknown>
+  setDraftEnvironmentId: (id?: string) => void
+  setDraftScripts: (scripts: Record<WorktreeEnvironmentScriptKey, string>) => void
+  setNameDraft: (value: string) => void
+  setSelectedId: (id: string) => void
+  t: TranslationFn
+}) {
+  const autoSaveTimerRef = useRef<ReturnType<typeof setTimeout>>()
+  const syncedDraftRef = useRef<SyncedEnvironmentDraft>()
+  const pendingConflictRef = useRef<{
+    remoteDraft: SyncedEnvironmentDraft
+    remoteScripts: Record<WorktreeEnvironmentScriptKey, string>
+  }>()
+  const draftStateRef = useRef<{
+    id?: string
+    name: string
+    scripts: Record<WorktreeEnvironmentScriptKey, string>
+    serializedScripts: string
+  }>({
+    id: draftEnvironmentId,
+    name: nameDraft,
+    scripts: draftScripts,
+    serializedScripts: serializeDraftScripts(draftScripts)
+  })
+  const blockedRef = useRef(false)
+  const conflictModalOpenRef = useRef(false)
+
+  const clearAutoSaveTimer = () => {
+    if (autoSaveTimerRef.current == null) return
+    clearTimeout(autoSaveTimerRef.current)
+    autoSaveTimerRef.current = undefined
+  }
+
+  const applyRemoteDraft = ({
+    remoteDraft,
+    remoteScripts
+  }: {
+    remoteDraft: SyncedEnvironmentDraft
+    remoteScripts: Record<WorktreeEnvironmentScriptKey, string>
+  }) => {
+    setDraftEnvironmentId(remoteDraft.id)
+    setDraftScripts(remoteScripts)
+    setNameDraft(remoteDraft.name)
+    syncedDraftRef.current = remoteDraft
+  }
+
+  useEffect(() => {
+    draftStateRef.current = {
+      id: draftEnvironmentId,
+      name: nameDraft,
+      scripts: draftScripts,
+      serializedScripts: serializeDraftScripts(draftScripts)
+    }
+  }, [draftEnvironmentId, draftScripts, nameDraft])
+
+  useEffect(() => {
+    if (selectedEnvironment == null) {
+      clearAutoSaveTimer()
+      setDraftEnvironmentId(undefined)
+      setDraftScripts(buildDraftScripts())
+      setNameDraft('')
+      syncedDraftRef.current = undefined
+      pendingConflictRef.current = undefined
+      blockedRef.current = false
+      conflictModalOpenRef.current = false
+      return
+    }
+
+    const remoteScripts = buildDraftScripts(selectedEnvironment)
+    const remoteDraft: SyncedEnvironmentDraft = {
+      id: selectedEnvironment.id,
+      name: toDisplayEnvironmentName(selectedEnvironment.id),
+      scripts: serializeDraftScripts(remoteScripts)
+    }
+    const syncedDraft = syncedDraftRef.current
+
+    if (syncedDraft == null) {
+      applyRemoteDraft({ remoteDraft, remoteScripts })
+      return
+    }
+
+    if (
+      syncedDraft.id === remoteDraft.id &&
+      syncedDraft.name === remoteDraft.name &&
+      syncedDraft.scripts === remoteDraft.scripts
+    ) {
+      return
+    }
+
+    const currentDraft = draftStateRef.current
+    const currentSerialized = serializeComparableConfigValue({
+      id: currentDraft.id ?? '',
+      name: currentDraft.name,
+      scripts: currentDraft.serializedScripts
+    })
+    const syncedSerialized = serializeComparableConfigValue({
+      ...syncedDraft
+    })
+    const remoteSerialized = serializeComparableConfigValue({
+      ...remoteDraft
+    })
+    const action = resolveRemoteConfigChangeAction({
+      baseSerialized: syncedSerialized,
+      draftSerialized: currentSerialized,
+      serverSerialized: remoteSerialized
+    })
+
+    if (action === 'sync-remote') {
+      clearAutoSaveTimer()
+      blockedRef.current = false
+      pendingConflictRef.current = undefined
+      applyRemoteDraft({ remoteDraft, remoteScripts })
+      return
+    }
+
+    if (action === 'conflict') {
+      clearAutoSaveTimer()
+      blockedRef.current = true
+      pendingConflictRef.current = { remoteDraft, remoteScripts }
+
+      if (conflictModalOpenRef.current) {
+        return
+      }
+
+      conflictModalOpenRef.current = true
+      modal.confirm({
+        title: t('config.conflict.title'),
+        content: t('config.conflict.description', {
+          source: t(`config.environments.sources.${sourceKey}`),
+          target: remoteDraft.name
+        }),
+        okText: t('config.conflict.keepLocal'),
+        cancelText: t('config.conflict.useRemote'),
+        cancelButtonProps: { danger: true },
+        closable: false,
+        keyboard: false,
+        maskClosable: false,
+        onOk: async () => {
+          const currentDraftState = draftStateRef.current
+          const currentSelectedId = currentDraftState.id ?? selectedId
+          const nextId = toEnvironmentIdForSource(currentDraftState.name, sourceKey)
+
+          if (currentSelectedId == null || nextId === '') {
+            void message.error(t('config.environments.saveFailed'))
+            throw new Error('worktree environment draft is not ready to save')
+          }
+
+          const saved = await saveEnvironmentDraft({
+            draftScripts: currentDraftState.scripts,
+            message,
+            nextId,
+            refreshDetail,
+            refreshEnvironments,
+            selectedId: currentSelectedId,
+            serializedScripts: serializeDraftScripts(currentDraftState.scripts),
+            setSelectedId,
+            sourceKey,
+            t
+          })
+
+          if (!saved) {
+            throw new Error('failed to save worktree environment draft')
+          }
+
+          blockedRef.current = false
+          pendingConflictRef.current = undefined
+          conflictModalOpenRef.current = false
+        },
+        onCancel: () => {
+          const pendingConflict = pendingConflictRef.current
+          if (pendingConflict != null) {
+            applyRemoteDraft(pendingConflict)
+          }
+          blockedRef.current = false
+          pendingConflictRef.current = undefined
+          conflictModalOpenRef.current = false
+        }
+      })
+      return
+    }
+
+    syncedDraftRef.current = remoteDraft
+    blockedRef.current = false
+    pendingConflictRef.current = undefined
+  }, [
+    message,
+    modal,
+    refreshDetail,
+    refreshEnvironments,
+    selectedEnvironment,
+    selectedId,
+    setDraftEnvironmentId,
+    setDraftScripts,
+    setNameDraft,
+    setSelectedId,
+    sourceKey,
+    t
+  ])
+
+  useEffect(() => () => {
+    clearAutoSaveTimer()
+  }, [])
+
+  useEffect(() => {
+    if (selectedId == null || draftEnvironmentId !== selectedId) return
+    if (blockedRef.current) {
+      clearAutoSaveTimer()
+      return
+    }
+    const nextId = toEnvironmentIdForSource(nameDraft, sourceKey)
+    if (nextId === '') return
+
+    const serializedScripts = serializeDraftScripts(draftScripts)
+    const syncedDraft = syncedDraftRef.current
+    if (syncedDraft?.id === selectedId && syncedDraft.name === nameDraft && syncedDraft.scripts === serializedScripts) {
+      return
+    }
+    if (
+      nextId !== selectedId && environments.some(environment => (
+        environment.id === nextId && environment.source === sourceKey
+      ))
+    ) {
+      void message.error(t('config.environments.exists'))
+      return
+    }
+
+    if (autoSaveTimerRef.current != null) {
+      clearAutoSaveTimer()
+    }
+    autoSaveTimerRef.current = setTimeout(() => {
+      if (blockedRef.current) return
+      void saveEnvironmentDraft({
+        draftScripts,
+        message,
+        nextId,
+        refreshDetail,
+        refreshEnvironments,
+        selectedId,
+        serializedScripts,
+        setSelectedId,
+        sourceKey,
+        t
+      })
+    }, AUTO_SAVE_DELAY_MS)
+
+    return () => {
+      clearAutoSaveTimer()
+    }
+  }, [
+    draftEnvironmentId,
+    draftScripts,
+    environments,
+    message,
+    nameDraft,
+    refreshDetail,
+    refreshEnvironments,
+    selectedId,
+    setSelectedId,
+    sourceKey,
+    t
+  ])
+
+  async function saveEnvironmentDraft({
+    draftScripts,
+    message,
+    nextId,
+    refreshDetail,
+    refreshEnvironments,
+    selectedId,
+    serializedScripts,
+    setSelectedId,
+    sourceKey,
+    t
+  }: {
+    draftScripts: Record<WorktreeEnvironmentScriptKey, string>
+    message: MessageApi
+    nextId: string
+    refreshDetail: () => Promise<unknown>
+    refreshEnvironments: () => Promise<unknown>
+    selectedId: string
+    serializedScripts: string
+    setSelectedId: (id: string) => void
+    sourceKey: ConfigSource
+    t: TranslationFn
+  }) {
+    try {
+      await saveWorktreeEnvironment(nextId, { scripts: draftScripts }, sourceKey)
+      if (nextId !== selectedId) {
+        await deleteWorktreeEnvironment(selectedId, sourceKey)
+        setSelectedId(nextId)
+      }
+      syncedDraftRef.current = {
+        id: nextId,
+        name: toDisplayEnvironmentName(nextId),
+        scripts: serializedScripts
+      }
+      await refreshEnvironments()
+      if (nextId === selectedId) {
+        await refreshDetail()
+      }
+      return true
+    } catch (error) {
+      void message.error(getApiErrorMessage(error, t('config.environments.saveFailed')))
+      return false
+    }
+  }
+}

package/src/components/config/worktree-environment-panel-model.ts

@@ -0,0 +1,108 @@
+import type {
+  WorktreeEnvironmentDetail,
+  WorktreeEnvironmentOperation,
+  WorktreeEnvironmentPlatform,
+  WorktreeEnvironmentScriptKey,
+  WorktreeEnvironmentSummary
+} from '@vibe-forge/types'
+
+export const scriptKeys: WorktreeEnvironmentScriptKey[] = [
+  'create',
+  'create.macos',
+  'create.linux',
+  'create.windows',
+  'start',
+  'start.macos',
+  'start.linux',
+  'start.windows',
+  'destroy',
+  'destroy.macos',
+  'destroy.linux',
+  'destroy.windows'
+]
+
+export const operationGroups: Array<{
+  operation: WorktreeEnvironmentOperation
+  baseScript: WorktreeEnvironmentScriptKey
+  platformScripts: Array<{
+    platform: Exclude<WorktreeEnvironmentPlatform, 'base'>
+    script: WorktreeEnvironmentScriptKey
+  }>
+}> = [
+  {
+    operation: 'create',
+    baseScript: 'create',
+    platformScripts: [
+      { platform: 'macos', script: 'create.macos' },
+      { platform: 'linux', script: 'create.linux' },
+      { platform: 'windows', script: 'create.windows' }
+    ]
+  },
+  {
+    operation: 'start',
+    baseScript: 'start',
+    platformScripts: [
+      { platform: 'macos', script: 'start.macos' },
+      { platform: 'linux', script: 'start.linux' },
+      { platform: 'windows', script: 'start.windows' }
+    ]
+  },
+  {
+    operation: 'destroy',
+    baseScript: 'destroy',
+    platformScripts: [
+      { platform: 'macos', script: 'destroy.macos' },
+      { platform: 'linux', script: 'destroy.linux' },
+      { platform: 'windows', script: 'destroy.windows' }
+    ]
+  }
+]
+
+export const buildDraftScripts = (environment?: WorktreeEnvironmentDetail) => {
+  const scripts = Object.fromEntries(scriptKeys.map(key => [key, ''])) as Record<WorktreeEnvironmentScriptKey, string>
+  for (const script of environment?.scripts ?? []) {
+    scripts[script.key] = script.content ?? ''
+  }
+  return scripts
+}
+
+export const buildDefaultEnvironmentScripts = (): Partial<Record<WorktreeEnvironmentScriptKey, string>> => ({
+  create: [
+    '# Runs after the worktree is created.',
+    '# Example:',
+    '# pnpm install'
+  ].join('\n'),
+  start: [
+    '# Runs before the adapter process starts.',
+    '# Example:',
+    '# docker compose up -d'
+  ].join('\n'),
+  destroy: [
+    '# Runs before the managed worktree is removed.',
+    '# Example:',
+    '# docker compose down --remove-orphans'
+  ].join('\n')
+})
+
+export const normalizeEnvironmentId = (value: string) => value.trim()
+
+export const toDisplayEnvironmentName = (id: string) => (
+  id.endsWith('.local') ? id.slice(0, -'.local'.length) : id
+)
+
+export const toEnvironmentReference = (
+  environment: Pick<WorktreeEnvironmentSummary, 'id' | 'isLocal'>
+) => (
+  environment.isLocal ? `${toDisplayEnvironmentName(environment.id)}.local` : environment.id
+)
+
+export const toEnvironmentIdForSource = (value: string, source: 'project' | 'user') => {
+  const normalized = normalizeEnvironmentId(value)
+  if (normalized === '') return ''
+  const shouldStripLocalSuffix = source === 'project' || source === 'user'
+  return shouldStripLocalSuffix && normalized.endsWith('.local') ? normalized.slice(0, -'.local'.length) : normalized
+}
+
+export const getScriptLanguage = (key: WorktreeEnvironmentScriptKey) => (
+  key.endsWith('.windows') ? 'powershell' : 'shell'
+)

package/src/components/dock-panel/DockPanel.scss

@@ -7,8 +7,7 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
-  padding: var(--dock-panel-padding-top, 12px) 12px
-    var(--dock-panel-padding-bottom, 12px);
+  padding: 0;
   background-color: var(--bg-color);
   border-top: 1px solid var(--dock-panel-border-color, var(--border-color));
   gap: 6px;
@@ -18,8 +17,6 @@
   transition:
     flex-basis .24s cubic-bezier(.22, 1, .36, 1),
     height .24s cubic-bezier(.22, 1, .36, 1),
-    padding-top .24s cubic-bezier(.22, 1, .36, 1),
-    padding-bottom .24s cubic-bezier(.22, 1, .36, 1),
     opacity .18s ease,
     transform .24s cubic-bezier(.22, 1, .36, 1),
     border-top-color .18s ease;
@@ -27,6 +24,31 @@
   &.is-resizing {
     cursor: row-resize;
   }
+
+  &.is-resize-disabled .dock-panel__resize-strip {
+    cursor: default;
+  }
+
+  &.is-fullscreen {
+    position: absolute;
+    inset: var(--dock-panel-fullscreen-inset-top, 0) 0 0 0;
+    z-index: 30;
+    flex: 1 1 auto;
+    width: auto;
+    height: auto;
+    max-height: none;
+    border-top-color: var(--dock-panel-border-color, var(--border-color));
+    transform: none;
+    transform-origin: bottom center;
+    animation: dock-panel-fullscreen-enter .22s cubic-bezier(.22, 1, .36, 1);
+    will-change: clip-path, opacity;
+  }
+
+  &.is-fullscreen.is-fullscreen-exiting {
+    animation: dock-panel-fullscreen-exit .18s cubic-bezier(.4, 0, .2, 1)
+      forwards;
+    pointer-events: none;
+  }
 }
 
 .dock-panel.is-closing {
@@ -39,25 +61,46 @@
   pointer-events: none;
 }
 
-.dock-panel__resize-handle {
+.dock-panel__resize-strip {
+  position: absolute;
+  top: -4px;
+  right: 0;
+  left: 0;
+  z-index: 2;
+  height: 9px;
+  cursor: row-resize;
+
+  &::before {
+    position: absolute;
+    top: 3px;
+    right: 0;
+    left: 0;
+    height: 3px;
+    background-color: var(--primary-color);
+    content: '';
+    opacity: 0;
+    transform: scaleY(.66);
+    transform-origin: top;
+    transition: opacity .16s ease, transform .16s ease;
+  }
+
+  &:hover::before {
+    opacity: .85;
+    transform: scaleY(1);
+  }
+}
+
+.dock-panel__header {
   display: flex;
   align-items: center;
   gap: 8px;
   min-width: 0;
   min-height: 24px;
-  margin: -12px -12px 0;
-  padding: 12px 12px 0;
+  margin: 0;
+  padding: 4px;
   cursor: default;
   flex-shrink: 0;
   transition: opacity .18s ease;
-
-  &.is-resizable {
-    cursor: row-resize;
-  }
-
-  &.is-resizable:hover {
-    opacity: .92;
-  }
 }
 
 .dock-panel__header-main {
@@ -101,8 +144,7 @@
 }
 
 .dock-panel__header-spacer {
-  flex: 1;
-  min-width: 24px;
+  display: none;
 }
 
 .dock-panel__header-actions {
@@ -149,8 +191,33 @@ html.dark .dock-panel__close-btn.ant-btn.ant-btn-text {
   --nav-hover-bg: #1a1a1a;
 }
 
+@keyframes dock-panel-fullscreen-enter {
+  from {
+    clip-path: inset(calc(100% - var(--dock-panel-height, 240px)) 0 0 0);
+    opacity: .96;
+  }
+
+  to {
+    clip-path: inset(0 0 0 0);
+    opacity: 1;
+  }
+}
+
+@keyframes dock-panel-fullscreen-exit {
+  from {
+    clip-path: inset(0 0 0 0);
+    opacity: 1;
+  }
+
+  to {
+    clip-path: inset(calc(100% - var(--dock-panel-height, 240px)) 0 0 0);
+    opacity: .96;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .dock-panel {
+    animation: none;
     transition: none;
   }
 }