@vibe-forge/client 2.0.0 → 2.0.1

package/src/components/config/WorktreeEnvironmentScriptEditors.tsx

@@ -0,0 +1,189 @@
+import { useState } from 'react'
+
+import type {
+  WorktreeEnvironmentOperation,
+  WorktreeEnvironmentPlatform,
+  WorktreeEnvironmentScriptKey
+} from '@vibe-forge/types'
+
+import { WorktreeEnvironmentScriptEditorCard } from './WorktreeEnvironmentScriptEditorCard'
+import type { TranslationFn } from './configUtils'
+import { operationGroups } from './worktree-environment-panel-model'
+
+type PlatformOverride = Exclude<WorktreeEnvironmentPlatform, 'base'>
+
+const platformIcons: Record<PlatformOverride, string> = {
+  linux: 'terminal',
+  macos: 'laptop_mac',
+  windows: 'desktop_windows'
+}
+
+const getScriptLabel = (key: WorktreeEnvironmentScriptKey, t: TranslationFn) => (
+  t(`config.environments.scripts.${key}`)
+)
+
+const getOperationSectionTitle = (operation: WorktreeEnvironmentOperation, t: TranslationFn) => (
+  t(`config.environments.operationSections.${operation}.title`)
+)
+
+const toggleSetValue = <T,>(current: Set<T>, value: T) => {
+  const next = new Set(current)
+  if (next.has(value)) {
+    next.delete(value)
+  } else {
+    next.add(value)
+  }
+  return next
+}
+
+export function WorktreeEnvironmentScriptEditors({
+  draftScripts,
+  onChange,
+  t
+}: {
+  draftScripts: Record<WorktreeEnvironmentScriptKey, string>
+  onChange: (key: WorktreeEnvironmentScriptKey, content: string) => void
+  t: TranslationFn
+}) {
+  const [selectedPlatforms, setSelectedPlatforms] = useState<Record<WorktreeEnvironmentOperation, PlatformOverride>>({
+    create: 'macos',
+    destroy: 'macos',
+    start: 'macos'
+  })
+  const [expandedOperations, setExpandedOperations] = useState<Set<WorktreeEnvironmentOperation>>(
+    () => new Set(['create'])
+  )
+  const [expandedPlatformGroups, setExpandedPlatformGroups] = useState<Set<WorktreeEnvironmentOperation>>(
+    () => new Set()
+  )
+
+  return (
+    <div className='worktree-env-panel__script-sections'>
+      {operationGroups.map((group) => {
+        const selectedPlatform = selectedPlatforms[group.operation]
+        const selectedScript = group.platformScripts.find(item => item.platform === selectedPlatform) ??
+          group.platformScripts[0]
+        const isOperationExpanded = expandedOperations.has(group.operation)
+        const isPlatformGroupExpanded = expandedPlatformGroups.has(group.operation)
+        const operationTitle = getOperationSectionTitle(group.operation, t)
+
+        return (
+          <section
+            key={group.operation}
+            className={`worktree-env-panel__script-section ${isOperationExpanded ? 'is-expanded' : 'is-collapsed'}`}
+          >
+            <button
+              type='button'
+              className='worktree-env-panel__fold-header'
+              aria-expanded={isOperationExpanded}
+              aria-label={`${
+                isOperationExpanded ? t('config.editor.collapse') : t('config.editor.expand')
+              } ${operationTitle}`}
+              onClick={() => {
+                setExpandedOperations(prev => toggleSetValue(prev, group.operation))
+              }}
+            >
+              <span className='worktree-env-panel__fold-header-main'>
+                <span className='worktree-env-panel__fold-title'>{operationTitle}</span>
+              </span>
+              <span
+                className={`material-symbols-rounded worktree-env-panel__fold-chevron ${
+                  isOperationExpanded ? 'is-active' : ''
+                }`}
+              >
+                chevron_right
+              </span>
+            </button>
+
+            {isOperationExpanded && (
+              <div className='worktree-env-panel__fold-body'>
+                <WorktreeEnvironmentScriptEditorCard
+                  scriptKey={group.baseScript}
+                  value={draftScripts[group.baseScript]}
+                  title={t('config.environments.baseScript')}
+                  description={t(`config.environments.baseScriptDescriptions.${group.operation}`)}
+                  onChange={onChange}
+                  t={t}
+                />
+                <div className='worktree-env-panel__platform-block'>
+                  <div className='worktree-env-panel__platform-header'>
+                    <button
+                      type='button'
+                      className='worktree-env-panel__platform-toggle'
+                      aria-expanded={isPlatformGroupExpanded}
+                      aria-label={`${
+                        isPlatformGroupExpanded ? t('config.editor.collapse') : t('config.editor.expand')
+                      } ${t('config.environments.platformOverrides')}`}
+                      onClick={() => {
+                        setExpandedPlatformGroups(prev => toggleSetValue(prev, group.operation))
+                      }}
+                    >
+                      <span className='worktree-env-panel__platform-copy'>
+                        <span className='worktree-env-panel__platform-title'>
+                          {t('config.environments.platformOverrides')}
+                        </span>
+                      </span>
+                    </button>
+                    <div className='worktree-env-panel__platform-switch' role='tablist'>
+                      {group.platformScripts.map(({ platform, script }) => (
+                        <button
+                          key={platform}
+                          type='button'
+                          role='tab'
+                          aria-selected={selectedPlatform === platform}
+                          className={[
+                            'worktree-env-panel__platform-tab',
+                            selectedPlatform === platform ? 'is-active' : '',
+                            draftScripts[script].trim() !== '' ? 'has-content' : ''
+                          ].filter(Boolean).join(' ')}
+                          title={t(`config.environments.platforms.${platform}`)}
+                          onClick={() => {
+                            setSelectedPlatforms(prev => ({ ...prev, [group.operation]: platform }))
+                            setExpandedPlatformGroups(prev => new Set(prev).add(group.operation))
+                          }}
+                        >
+                          <span className='material-symbols-rounded'>{platformIcons[platform]}</span>
+                        </button>
+                      ))}
+                    </div>
+                    <button
+                      type='button'
+                      className='worktree-env-panel__platform-chevron-button'
+                      aria-expanded={isPlatformGroupExpanded}
+                      aria-label={`${
+                        isPlatformGroupExpanded ? t('config.editor.collapse') : t('config.editor.expand')
+                      } ${t('config.environments.platformOverrides')}`}
+                      onClick={() => {
+                        setExpandedPlatformGroups(prev => toggleSetValue(prev, group.operation))
+                      }}
+                    >
+                      <span
+                        className={`material-symbols-rounded worktree-env-panel__platform-chevron ${
+                          isPlatformGroupExpanded ? 'is-active' : ''
+                        }`}
+                      >
+                        chevron_right
+                      </span>
+                    </button>
+                  </div>
+                  {isPlatformGroupExpanded && (
+                    <WorktreeEnvironmentScriptEditorCard
+                      scriptKey={selectedScript.script}
+                      value={draftScripts[selectedScript.script]}
+                      title={getScriptLabel(selectedScript.script, t)}
+                      description={t('config.environments.platformScriptDescription', {
+                        platform: t(`config.environments.platforms.${selectedScript.platform}`)
+                      })}
+                      onChange={onChange}
+                      t={t}
+                    />
+                  )}
+                </div>
+              </div>
+            )}
+          </section>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/config/configConflict.ts

@@ -0,0 +1,41 @@
+import type { ConfigSource } from '@vibe-forge/core'
+
+export type ConfigRemoteChangeAction = 'none' | 'sync-remote' | 'conflict'
+
+const normalizeComparableValue = (value: unknown): unknown => {
+  if (Array.isArray(value)) {
+    return value.map(item => normalizeComparableValue(item))
+  }
+
+  if (value != null && typeof value === 'object') {
+    return Object.keys(value as Record<string, unknown>)
+      .sort()
+      .reduce<Record<string, unknown>>((result, key) => {
+        result[key] = normalizeComparableValue((value as Record<string, unknown>)[key])
+        return result
+      }, {})
+  }
+
+  return value
+}
+
+export const getConfigDraftKey = (sectionKey: string, source: ConfigSource) => `${source}:${sectionKey}`
+
+export const serializeComparableConfigValue = (value: unknown) => (
+  JSON.stringify(normalizeComparableValue(value ?? {}))
+)
+
+export const resolveRemoteConfigChangeAction = ({
+  baseSerialized,
+  draftSerialized,
+  serverSerialized
+}: {
+  baseSerialized?: string
+  draftSerialized?: string
+  serverSerialized: string
+}): ConfigRemoteChangeAction => {
+  if (baseSerialized == null || draftSerialized == null) return 'none'
+  if (baseSerialized === serverSerialized || draftSerialized === serverSerialized) return 'none'
+  if (draftSerialized === baseSerialized) return 'sync-remote'
+  return 'conflict'
+}

package/src/components/config/configDetail.ts

@@ -0,0 +1,381 @@
+/* eslint-disable max-lines -- detail route helpers intentionally keep path parsing and metadata resolution together */
+import type { DetailCollectionContext, FieldSpec } from './configSchema'
+import { configSchema } from './configSchema'
+import { getFieldLabel, getValueByPath } from './configUtils'
+import type { TranslationFn } from './configUtils'
+
+export interface ConfigDetailRoute {
+  kind: 'detailCollectionItem'
+  fieldPath: string[]
+  itemKey: string
+  nestedPath?: string[]
+}
+
+export interface DetailCollectionEntry {
+  key: string
+  item: Record<string, unknown>
+  index: number
+  localIndex?: number
+  resolvedIndex?: number
+  source: 'local' | 'inherited'
+  localItem?: Record<string, unknown>
+  resolvedItem: Record<string, unknown>
+  hasResolvedOverlay: boolean
+}
+
+export interface ConfigDetailRouteMeta {
+  field: FieldSpec
+  fieldLabel: string
+  item: Record<string, unknown>
+  resolvedItem: Record<string, unknown>
+  itemLabel: string
+  itemKey: string
+  itemIndex: number
+  localItemIndex?: number
+  resolvedItemIndex?: number
+  itemSource: 'local' | 'inherited'
+  hasResolvedOverlay: boolean
+}
+
+const isRecordObject = (value: unknown): value is Record<string, unknown> => (
+  value != null &&
+  typeof value === 'object' &&
+  !Array.isArray(value)
+)
+
+const isSamePath = (left: string[], right: string[]) => (
+  left.length === right.length &&
+  left.every((segment, index) => segment === right[index])
+)
+
+const isSameConfigValue = (left: unknown, right: unknown) => (
+  JSON.stringify(left) === JSON.stringify(right)
+)
+
+export const getSectionFields = (sectionKey: string, providedFields?: FieldSpec[]) => (
+  providedFields ?? configSchema[sectionKey] ?? []
+)
+
+export const toDetailCollectionEntries = ({
+  field,
+  value,
+  resolvedValue
+}: {
+  field: FieldSpec
+  value: unknown
+  resolvedValue?: unknown
+}): DetailCollectionEntry[] => {
+  const detailCollection = field.detailCollection
+  if (field.type !== 'detailCollection' || detailCollection == null) return []
+
+  if (detailCollection.collectionKind === 'list') {
+    const localItems = Array.isArray(value)
+      ? value.filter(isRecordObject)
+      : []
+    const resolvedItems = Array.isArray(resolvedValue)
+      ? resolvedValue.filter(isRecordObject)
+      : localItems
+    const getMergeKey = detailCollection.getMergeKey
+
+    if (getMergeKey != null) {
+      const localIndexesByKey = new Map<string, number[]>()
+      localItems.forEach((item, localIndex) => {
+        const mergeKey = getMergeKey(item)
+        if (mergeKey == null || mergeKey === '') return
+        const existing = localIndexesByKey.get(mergeKey) ?? []
+        existing.push(localIndex)
+        localIndexesByKey.set(mergeKey, existing)
+      })
+
+      const matchedLocalIndexes = new Set<number>()
+      const entries: DetailCollectionEntry[] = resolvedItems.map((resolvedItem, resolvedIndex) => {
+        const mergeKey = getMergeKey(resolvedItem)
+        const matchedIndex = mergeKey != null
+          ? localIndexesByKey.get(mergeKey)?.shift()
+          : undefined
+        if (matchedIndex == null) {
+          return {
+            key: String(resolvedIndex),
+            item: resolvedItem,
+            index: resolvedIndex,
+            resolvedIndex,
+            source: 'inherited',
+            resolvedItem,
+            hasResolvedOverlay: false
+          }
+        }
+
+        const localItem = localItems[matchedIndex]!
+        matchedLocalIndexes.add(matchedIndex)
+        return {
+          key: String(resolvedIndex),
+          item: localItem,
+          index: resolvedIndex,
+          localIndex: matchedIndex,
+          resolvedIndex,
+          source: 'local',
+          localItem,
+          resolvedItem,
+          hasResolvedOverlay: !isSameConfigValue(localItem, resolvedItem)
+        }
+      })
+
+      localItems.forEach((localItem, localIndex) => {
+        if (matchedLocalIndexes.has(localIndex)) return
+        const index = entries.length
+        entries.push({
+          key: String(index),
+          item: localItem,
+          index,
+          localIndex,
+          source: 'local',
+          localItem,
+          resolvedItem: localItem,
+          hasResolvedOverlay: false
+        })
+      })
+
+      return entries
+    }
+
+    const inheritedCount = Math.max(resolvedItems.length - localItems.length, 0)
+    const inheritedEntries = resolvedItems.slice(0, inheritedCount).map((item, index) => ({
+      key: String(index),
+      item,
+      index,
+      resolvedIndex: index,
+      source: 'inherited' as const,
+      resolvedItem: item,
+      hasResolvedOverlay: false
+    }))
+    const localEntries = localItems.map((item, localIndex) => {
+      const resolvedIndex = inheritedCount + localIndex
+      const resolvedItem = resolvedItems[resolvedIndex]
+      const normalizedResolvedItem = isRecordObject(resolvedItem) ? resolvedItem : item
+      return {
+        key: String(resolvedIndex),
+        item,
+        index: resolvedIndex,
+        localIndex,
+        resolvedIndex,
+        source: 'local' as const,
+        localItem: item,
+        resolvedItem: normalizedResolvedItem,
+        hasResolvedOverlay: !isSameConfigValue(item, normalizedResolvedItem)
+      }
+    })
+    return [...inheritedEntries, ...localEntries]
+  }
+
+  if (detailCollection.collectionKind === 'recordMap') {
+    const localSource = isRecordObject(value) ? value : {}
+    const resolvedSource = isRecordObject(resolvedValue) ? resolvedValue : localSource
+    const resolvedKeys = Object.keys(resolvedSource)
+    const entries = resolvedKeys.map((itemKey, index) => {
+      const localItemValue = localSource[itemKey]
+      const localItem = isRecordObject(localItemValue)
+        ? localItemValue
+        : undefined
+      const resolvedItemValue = resolvedSource[itemKey]
+      const resolvedItem = isRecordObject(resolvedItemValue)
+        ? resolvedItemValue
+        : detailCollection.createItem?.(itemKey) ?? {}
+      if (localItem == null) {
+        return {
+          key: itemKey,
+          item: resolvedItem,
+          index,
+          resolvedIndex: index,
+          source: 'inherited' as const,
+          resolvedItem,
+          hasResolvedOverlay: false
+        }
+      }
+
+      return {
+        key: itemKey,
+        item: localItem,
+        index,
+        resolvedIndex: index,
+        source: 'local' as const,
+        localItem,
+        resolvedItem,
+        hasResolvedOverlay: !isSameConfigValue(localItem, resolvedItem)
+      }
+    })
+    const localOnlyEntries = Object.keys(localSource)
+      .filter(itemKey => !Object.hasOwn(resolvedSource, itemKey))
+      .map((itemKey, localOnlyIndex) => {
+        const localItemValue = localSource[itemKey]
+        const localItem = isRecordObject(localItemValue)
+          ? localItemValue
+          : detailCollection.createItem?.(itemKey) ?? {}
+        return {
+          key: itemKey,
+          item: localItem,
+          index: entries.length + localOnlyIndex,
+          source: 'local' as const,
+          localItem,
+          resolvedItem: localItem,
+          hasResolvedOverlay: false
+        }
+      })
+    return [...entries, ...localOnlyEntries]
+  }
+
+  const localSource = isRecordObject(value) ? value : {}
+  const resolvedSource = isRecordObject(resolvedValue) ? resolvedValue : localSource
+  return detailCollection.itemKeys.map((itemKey, index) => {
+    const localItemValue = localSource[itemKey]
+    const resolvedItemValue = resolvedSource[itemKey]
+    const localItem = isRecordObject(localItemValue)
+      ? localItemValue
+      : undefined
+    const resolvedItem = isRecordObject(resolvedItemValue)
+      ? resolvedItemValue
+      : detailCollection.createItem?.(itemKey) ?? {}
+    return {
+      key: itemKey,
+      item: localItem ?? resolvedItem,
+      index,
+      resolvedIndex: index,
+      source: localItem != null ? 'local' as const : 'inherited' as const,
+      localItem,
+      resolvedItem,
+      hasResolvedOverlay: localItem != null && !isSameConfigValue(localItem, resolvedItem)
+    }
+  })
+}
+
+const findFieldByPath = (fields: FieldSpec[], path: string[]) => (
+  fields.find(field => isSamePath(field.path, path))
+)
+
+const getFieldDisplayLabel = ({
+  field,
+  sectionKey,
+  t
+}: {
+  field: FieldSpec
+  sectionKey: string
+  t: TranslationFn
+}) => (
+  field.labelKey != null
+    ? t(field.labelKey)
+    : getFieldLabel(t, sectionKey, field.path, field.path.at(-1) ?? sectionKey)
+)
+
+export const getConfigDetailRouteKey = (route: ConfigDetailRoute | null) => (
+  route == null
+    ? 'root'
+    : `${route.kind}:${route.fieldPath.join('.')}:${route.itemKey}:${(route.nestedPath ?? []).join('/')}`
+)
+
+export const serializeConfigDetailRoute = (route: ConfigDetailRoute | null) => (
+  route == null
+    ? ''
+    : [...route.fieldPath, route.itemKey, ...(route.nestedPath ?? [])]
+      .map(segment => encodeURIComponent(segment))
+      .join('/')
+)
+
+export const parseConfigDetailRoute = ({
+  fields,
+  raw
+}: {
+  fields: FieldSpec[]
+  raw: string
+}): ConfigDetailRoute | null => {
+  const normalized = raw.trim()
+  if (normalized === '') return null
+
+  const segments = normalized
+    .split('/')
+    .map(segment => decodeURIComponent(segment).trim())
+    .filter(segment => segment !== '')
+  if (segments.length < 1) return null
+
+  const detailField = fields
+    .filter(field => field.type === 'detailCollection' && field.detailCollection != null)
+    .sort((left, right) => right.path.length - left.path.length)
+    .find((field) => {
+      if (segments.length < field.path.length + 1) return false
+      if (!field.path.every((segment, index) => segment === segments[index])) return false
+      const itemKey = segments[field.path.length] ?? ''
+      if (itemKey === '') return false
+      if (field.detailCollection?.collectionKind === 'list') return /^\d+$/.test(itemKey)
+      return true
+    })
+  if (detailField == null) return null
+
+  return {
+    kind: 'detailCollectionItem',
+    fieldPath: detailField.path,
+    itemKey: segments[detailField.path.length]!,
+    ...(segments.length > detailField.path.length + 1
+      ? { nestedPath: segments.slice(detailField.path.length + 1) }
+      : {})
+  }
+}
+
+export const resolveConfigDetailRouteMeta = ({
+  sectionKey,
+  fields,
+  value,
+  resolvedValue,
+  route,
+  detailContext,
+  t
+}: {
+  sectionKey: string
+  fields?: FieldSpec[]
+  value: unknown
+  resolvedValue?: unknown
+  route: ConfigDetailRoute | null
+  detailContext: DetailCollectionContext
+  t: TranslationFn
+}): ConfigDetailRouteMeta | null => {
+  if (route == null) return null
+  if (route.kind !== 'detailCollectionItem') return null
+
+  const resolvedFields = getSectionFields(sectionKey, fields)
+  const field = findFieldByPath(resolvedFields, route.fieldPath)
+  if (field?.type !== 'detailCollection' || field.detailCollection == null) {
+    return null
+  }
+
+  const itemEntries = toDetailCollectionEntries({
+    field,
+    value: getValueByPath(value, field.path),
+    resolvedValue: getValueByPath(resolvedValue ?? value, field.path)
+  })
+  const entry = itemEntries.find(item => item.key === route.itemKey)
+  if (entry == null) return null
+
+  const fieldLabel = getFieldDisplayLabel({ field, sectionKey, t })
+  const itemLabel = field.detailCollection.getBreadcrumbLabel?.(
+    entry.item,
+    entry.key,
+    entry.index,
+    detailContext
+  ) ?? field.detailCollection.getItemTitle(
+    entry.item,
+    entry.key,
+    entry.index,
+    detailContext
+  )
+
+  return {
+    field,
+    fieldLabel,
+    item: entry.item,
+    resolvedItem: entry.resolvedItem,
+    itemLabel,
+    itemKey: entry.key,
+    itemIndex: entry.index,
+    localItemIndex: entry.localIndex,
+    resolvedItemIndex: entry.resolvedIndex,
+    itemSource: entry.source,
+    hasResolvedOverlay: entry.hasResolvedOverlay
+  }
+}