@vibe-forge/client 0.10.1 → 0.11.1

package/src/components/chat/git-controls/ChatGitControls.tsx

@@ -0,0 +1,151 @@
+import './ChatGitControls.scss'
+
+import { useTranslation } from 'react-i18next'
+
+import { syncSessionGitBranch } from '#~/api'
+
+import { BranchSwitcherDropdown } from './BranchSwitcherDropdown'
+import { GitCommitModal } from './GitCommitModal'
+import { GitOperationsDropdown } from './GitOperationsDropdown'
+import { GitPushModal } from './GitPushModal'
+import { GitWorktreeDropdown } from './GitWorktreeDropdown'
+import { useChatGitControls } from './use-chat-git-controls'
+
+export function ChatGitControls({
+  sessionId
+}: {
+  sessionId: string
+}) {
+  const { t } = useTranslation()
+  const git = useChatGitControls(sessionId)
+
+  if (git.repoState?.available !== true) {
+    return null
+  }
+
+  return (
+    <>
+      <div className='chat-header-git'>
+        <GitOperationsDropdown
+          isBusy={git.isBusy}
+          open={git.operationsMenuOpen}
+          repoState={git.repoState}
+          onOpenChange={(nextOpen) => {
+            git.setOperationsMenuOpen(nextOpen)
+            if (nextOpen) {
+              git.setBranchMenuOpen(false)
+              git.setWorktreeMenuOpen(false)
+            }
+          }}
+          onOpenCommit={() => {
+            git.setOperationsMenuOpen(false)
+            git.setCommitMessageError('')
+            git.setCommitModalOpen(true)
+          }}
+          onPush={git.handleOpenPushModal}
+          onSync={() => {
+            void git.runMutation(
+              'sync',
+              () => syncSessionGitBranch(sessionId),
+              t('chat.gitSyncSuccess'),
+              () => git.setOperationsMenuOpen(false)
+            )
+          }}
+        />
+
+        <BranchSwitcherDropdown
+          availableLocalBranches={git.availableLocalBranches}
+          currentBranchLabel={git.currentBranchLabel}
+          isBusy={git.isBusy}
+          isLoading={git.isBranchListLoading}
+          open={git.branchMenuOpen}
+          repoState={git.repoState}
+          branchQuery={git.branchQuery}
+          canCreateBranch={git.canCreateBranch}
+          hasBranchResults={git.hasBranchResults}
+          remoteBranches={git.remoteBranches}
+          onCreateBranch={git.handleCreateBranch}
+          onOpenChange={(nextOpen) => {
+            git.setBranchMenuOpen(nextOpen)
+            if (nextOpen) {
+              git.setOperationsMenuOpen(false)
+              git.setWorktreeMenuOpen(false)
+              git.setShouldLoadBranches(true)
+              return
+            }
+            git.setBranchQuery('')
+          }}
+          onQueryChange={git.setBranchQuery}
+          onSwitchBranch={git.handleBranchSwitch}
+        />
+
+        {git.showWorktreeButton && (
+          <GitWorktreeDropdown
+            open={git.worktreeMenuOpen}
+            worktrees={git.worktrees}
+            onOpenChange={(nextOpen) => {
+              git.setWorktreeMenuOpen(nextOpen)
+              if (nextOpen) {
+                git.setOperationsMenuOpen(false)
+                git.setBranchMenuOpen(false)
+              }
+            }}
+          />
+        )}
+
+        <div className='chat-header-git__separator' />
+      </div>
+
+      <GitCommitModal
+        canCommitAndPush={git.canCommitAndPush}
+        canSubmit={git.canSubmitCommit}
+        commitAmend={git.commitAmend}
+        commitBlockedMessage={git.commitBlockedMessage}
+        commitForcePush={git.commitForcePush}
+        commitIncludeUnstagedChanges={git.commitIncludeUnstagedChanges}
+        commitMessage={git.commitMessage}
+        commitMessageError={git.commitMessageError}
+        commitNextStep={git.commitNextStep}
+        commitSkipHooks={git.commitSkipHooks}
+        commitSummary={git.commitSummary}
+        currentBranchLabel={git.currentBranchLabel}
+        headCommit={git.repoState.headCommit ?? null}
+        open={git.commitModalOpen}
+        pending={git.pendingAction === 'commit' || git.pendingAction === 'commit-and-push'}
+        onCancel={git.resetCommitState}
+        onCommit={git.handleCommit}
+        onNextStepChange={git.setCommitNextStep}
+        onToggleAmend={(checked) => {
+          git.setCommitAmend(checked)
+          if (git.commitMessageError !== '') {
+            git.setCommitMessageError('')
+          }
+        }}
+        onToggleForcePush={git.setCommitForcePush}
+        onToggleIncludeUnstagedChanges={(checked) => {
+          git.setCommitIncludeUnstagedChanges(checked)
+        }}
+        onToggleSkipHooks={git.setCommitSkipHooks}
+        onMessageChange={(value) => {
+          git.setCommitMessage(value)
+          if (git.commitMessageError !== '') {
+            git.setCommitMessageError('')
+          }
+        }}
+      />
+
+      <GitPushModal
+        blockedMessage={git.pushBlockedMessage}
+        currentBranchLabel={git.currentBranchLabel}
+        forcePush={git.pushForce}
+        hasUpstream={git.repoState.upstream != null && git.repoState.upstream.trim() !== ''}
+        open={git.pushModalOpen}
+        pending={git.pendingAction === 'push'}
+        upstreamLabel={git.repoState.upstream?.trim() || t('chat.gitNoUpstream')}
+        onCancel={git.resetPushState}
+        onPush={git.handlePush}
+        onToggleForcePush={git.setPushForce}
+      />
+    </>
+  )
+}

package/src/components/chat/git-controls/GitCommitModal.tsx

@@ -0,0 +1,199 @@
+import { Button, Input, Modal } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import type { GitChangeSummary, GitHeadCommitSummary } from '@vibe-forge/types'
+
+import {
+  GitCommitForcePushOption,
+  GitCommitNextSteps,
+  GitCommitSummaryGrid,
+  GitCommitToggleRow,
+  getGitCommitNextSteps
+} from './GitCommitModalParts'
+import type { GitCommitNextStep } from './git-commit-utils'
+
+export function GitCommitModal({
+  canCommitAndPush,
+  canSubmit,
+  commitAmend,
+  commitBlockedMessage,
+  commitForcePush,
+  commitIncludeUnstagedChanges,
+  commitMessage,
+  commitMessageError,
+  commitNextStep,
+  commitSkipHooks,
+  commitSummary,
+  currentBranchLabel,
+  headCommit,
+  open,
+  pending,
+  onCancel,
+  onCommit,
+  onMessageChange,
+  onNextStepChange,
+  onToggleAmend,
+  onToggleForcePush,
+  onToggleIncludeUnstagedChanges,
+  onToggleSkipHooks
+}: {
+  canCommitAndPush: boolean
+  canSubmit: boolean
+  commitAmend: boolean
+  commitBlockedMessage: string
+  commitForcePush: boolean
+  commitIncludeUnstagedChanges: boolean
+  commitMessage: string
+  commitMessageError: string
+  commitNextStep: GitCommitNextStep
+  commitSkipHooks: boolean
+  commitSummary: GitChangeSummary | null
+  currentBranchLabel: string
+  headCommit: GitHeadCommitSummary | null
+  open: boolean
+  pending: boolean
+  onCancel: () => void
+  onCommit: () => void
+  onMessageChange: (value: string) => void
+  onNextStepChange: (value: GitCommitNextStep) => void
+  onToggleAmend: (checked: boolean) => void
+  onToggleForcePush: (checked: boolean) => void
+  onToggleIncludeUnstagedChanges: (checked: boolean) => void
+  onToggleSkipHooks: (checked: boolean) => void
+}) {
+  const { i18n, t } = useTranslation()
+  const numberFormatter = new Intl.NumberFormat(i18n.language)
+  const nextSteps = getGitCommitNextSteps(t)
+  const changedFilesCount = commitSummary?.changedFiles ?? 0
+  return (
+    <Modal
+      centered
+      className='chat-header-git__commit-modal'
+      closeIcon={<span className='material-symbols-rounded'>close</span>}
+      destroyOnHidden
+      footer={null}
+      open={open}
+      title={null}
+      width={592}
+      onCancel={onCancel}
+    >
+      <div className='chat-header-git__commit-sheet'>
+        <div className='chat-header-git__commit-icon'>
+          <span className='material-symbols-rounded'>commit</span>
+        </div>
+        <div className='chat-header-git__commit-title'>
+          {t('chat.gitCommitPanelTitle')}
+        </div>
+        <GitCommitSummaryGrid
+          branchLabel={t('chat.gitCommitPanelBranch')}
+          changedFilesLabel={t('chat.gitChangedFilesCount', {
+            count: changedFilesCount
+          })}
+          changesLabel={t('chat.gitCommitPanelChanges')}
+          currentBranchLabel={currentBranchLabel}
+          formattedAdditions={numberFormatter.format(commitSummary?.additions ?? 0)}
+          formattedDeletions={numberFormatter.format(commitSummary?.deletions ?? 0)}
+          summary={commitSummary}
+        />
+
+        <div className='chat-header-git__commit-toggles'>
+          <GitCommitToggleRow
+            checked={commitIncludeUnstagedChanges}
+            description={commitIncludeUnstagedChanges
+              ? t('chat.gitCommitIncludeUnstagedChangesDescription')
+              : t('chat.gitCommitOnlyStagedChangesDescription')}
+            disabled={pending}
+            title={t('chat.gitCommitIncludeUnstagedChanges')}
+            onChange={onToggleIncludeUnstagedChanges}
+          />
+
+          <GitCommitToggleRow
+            checked={commitSkipHooks}
+            description={t('chat.gitCommitSkipHooksDescription')}
+            disabled={pending}
+            title={t('chat.gitCommitSkipHooks')}
+            onChange={onToggleSkipHooks}
+          />
+
+          <GitCommitToggleRow
+            checked={commitAmend}
+            description={headCommit == null
+              ? t('chat.gitCommitAmendUnavailableDescription')
+              : t('chat.gitCommitAmendDescription', { subject: headCommit.subject })}
+            disabled={pending || headCommit == null}
+            title={t('chat.gitCommitAmend')}
+            onChange={onToggleAmend}
+          />
+        </div>
+
+        <div className='chat-header-git__commit-section-header'>
+          <span>{t('chat.gitCommitMessageLabel')}</span>
+          {commitAmend && (
+            <span className='chat-header-git__overlay-meta'>
+              {t('chat.gitCommitMessageOptional')}
+            </span>
+          )}
+        </div>
+
+        <Input.TextArea
+          autoFocus
+          className='chat-header-git__commit-input'
+          placeholder={commitAmend
+            ? t('chat.gitCommitMessagePlaceholderAmend')
+            : t('chat.gitCommitMessagePlaceholder')}
+          rows={3}
+          status={commitMessageError !== '' ? 'error' : undefined}
+          value={commitMessage}
+          onChange={(event) => onMessageChange(event.target.value)}
+        />
+
+        {commitMessageError !== '' && (
+          <div className='chat-header-git__commit-error'>{commitMessageError}</div>
+        )}
+        {commitMessageError === '' && commitAmend && (
+          <div className='chat-header-git__overlay-meta'>
+            {t('chat.gitCommitMessageAmendHint')}
+          </div>
+        )}
+
+        <div className='chat-header-git__commit-section-header'>
+          <span>{t('chat.gitCommitNextStep')}</span>
+        </div>
+
+        <GitCommitNextSteps
+          canCommitAndPush={canCommitAndPush}
+          pending={pending}
+          selected={commitNextStep}
+          steps={nextSteps}
+          onChange={onNextStepChange}
+        />
+
+        {commitNextStep === 'commit-and-push' && (
+          <GitCommitForcePushOption
+            checked={commitForcePush}
+            pending={pending}
+            onChange={onToggleForcePush}
+          />
+        )}
+
+        {!canSubmit && commitBlockedMessage !== '' && (
+          <div className='chat-header-git__overlay-meta'>
+            {commitBlockedMessage}
+          </div>
+        )}
+
+        <div className='chat-header-git__commit-footer'>
+          <Button
+            className='chat-header-git__commit-submit'
+            disabled={!canSubmit}
+            loading={pending}
+            type='primary'
+            onClick={onCommit}
+          >
+            {t('common.continue')}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}

package/src/components/chat/git-controls/GitCommitModalParts.tsx

@@ -0,0 +1,151 @@
+import { useTranslation } from 'react-i18next'
+
+import type { GitChangeSummary } from '@vibe-forge/types'
+
+import type { GitCommitNextStep } from './git-commit-utils'
+
+export function GitCommitSummaryGrid({
+  changedFilesLabel,
+  changesLabel,
+  currentBranchLabel,
+  formattedAdditions,
+  formattedDeletions,
+  summary,
+  branchLabel
+}: {
+  changedFilesLabel: string
+  changesLabel: string
+  currentBranchLabel: string
+  formattedAdditions: string
+  formattedDeletions: string
+  summary: GitChangeSummary | null
+  branchLabel: string
+}) {
+  return (
+    <div className='chat-header-git__commit-summary-grid'>
+      <div className='chat-header-git__commit-summary-label'>{branchLabel}</div>
+      <div className='chat-header-git__commit-summary-value chat-header-git__commit-summary-value--branch'>
+        <span className='material-symbols-rounded'>call_split</span>
+        <span>{currentBranchLabel}</span>
+      </div>
+
+      <div className='chat-header-git__commit-summary-label'>{changesLabel}</div>
+      <div className='chat-header-git__commit-summary-value chat-header-git__commit-summary-value--stats'>
+        <span>{changedFilesLabel}</span>
+        <span className='chat-header-git__commit-summary-delta is-positive'>+{formattedAdditions}</span>
+        <span className='chat-header-git__commit-summary-delta is-negative'>-{formattedDeletions}</span>
+      </div>
+    </div>
+  )
+}
+
+export function GitCommitToggleRow({
+  checked,
+  description,
+  disabled,
+  onChange,
+  title
+}: {
+  checked: boolean
+  description: string
+  disabled?: boolean
+  onChange: (checked: boolean) => void
+  title: string
+}) {
+  return (
+    <label className={`chat-header-git__commit-toggle-row ${disabled ? 'is-disabled' : ''}`}>
+      <input
+        checked={checked}
+        className='chat-header-git__commit-toggle-checkbox'
+        disabled={disabled}
+        type='checkbox'
+        onChange={(event) => onChange(event.target.checked)}
+      />
+      <div className='chat-header-git__commit-toggle-copy'>
+        <div className='chat-header-git__commit-toggle-title'>{title}</div>
+        <div className='chat-header-git__commit-toggle-description'>{description}</div>
+      </div>
+    </label>
+  )
+}
+
+export function GitCommitNextSteps({
+  canCommitAndPush,
+  pending,
+  selected,
+  onChange,
+  steps
+}: {
+  canCommitAndPush: boolean
+  pending: boolean
+  selected: GitCommitNextStep
+  onChange: (value: GitCommitNextStep) => void
+  steps: Array<{
+    icon: string
+    key: GitCommitNextStep
+    label: string
+  }>
+}) {
+  return (
+    <div className='chat-header-git__commit-next-steps'>
+      {steps.map(step => {
+        const disabled = pending || (step.key === 'commit-and-push' && !canCommitAndPush)
+        const isSelected = selected === step.key
+        return (
+          <button
+            key={step.key}
+            aria-pressed={isSelected}
+            className={`chat-header-git__commit-next-step ${isSelected ? 'is-selected' : ''}`}
+            disabled={disabled}
+            type='button'
+            onClick={() => onChange(step.key)}
+          >
+            <div className='chat-header-git__commit-next-step-main'>
+              <span className='chat-header-git__row-icon material-symbols-rounded'>{step.icon}</span>
+              <span>{step.label}</span>
+            </div>
+            {isSelected && (
+              <span className='chat-header-git__row-state material-symbols-rounded'>check</span>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export function GitCommitForcePushOption({
+  checked,
+  pending,
+  onChange
+}: {
+  checked: boolean
+  pending: boolean
+  onChange: (checked: boolean) => void
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <div className='chat-header-git__commit-sub-options'>
+      <GitCommitToggleRow
+        checked={checked}
+        description={t('chat.gitForcePushDescription')}
+        disabled={pending}
+        title={t('chat.gitForcePush')}
+        onChange={onChange}
+      />
+      {checked && (
+        <div className='chat-header-git__overlay-meta'>
+          {t('chat.gitForcePushHint')}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export const getGitCommitNextSteps = (t: ReturnType<typeof useTranslation>['t']) => {
+  return [
+    { key: 'commit', icon: 'commit', label: t('chat.gitCommitShort') },
+    { key: 'commit-and-push', icon: 'upload', label: t('chat.gitCommitAndPush') }
+  ] satisfies Array<{ icon: string; key: GitCommitNextStep; label: string }>
+}

package/src/components/chat/git-controls/GitOperationsDropdown.tsx

@@ -0,0 +1,123 @@
+import { Button, Dropdown } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import type { GitRepositoryState } from '@vibe-forge/types'
+import type { GitOperationKind } from './git-operation-utils'
+
+import { getPrimaryGitOperationKind, isGitOperationDisabled } from './git-operation-utils'
+
+export function GitOperationsDropdown({
+  isBusy,
+  open,
+  repoState,
+  onOpenChange,
+  onOpenCommit,
+  onPush,
+  onSync
+}: {
+  isBusy: boolean
+  open: boolean
+  repoState: GitRepositoryState
+  onOpenChange: (open: boolean) => void
+  onOpenCommit: () => void
+  onPush: () => void
+  onSync: () => void
+}) {
+  const { t } = useTranslation()
+  const primaryActionKind = getPrimaryGitOperationKind(repoState)
+  const operationKinds: GitOperationKind[] = primaryActionKind == null
+    ? ['commit', 'push', 'sync']
+    : [
+      primaryActionKind,
+      ...(['commit', 'push', 'sync'] as GitOperationKind[]).filter(kind => kind !== primaryActionKind)
+    ]
+  const actionMap = {
+    commit: {
+      disabled: isBusy || isGitOperationDisabled(repoState, 'commit'),
+      icon: 'commit',
+      label: t('chat.gitCommitShort'),
+      onClick: onOpenCommit
+    },
+    push: {
+      disabled: isBusy || isGitOperationDisabled(repoState, 'push'),
+      icon: 'upload',
+      label: t('chat.gitPushShort'),
+      onClick: onPush
+    },
+    sync: {
+      disabled: isBusy || isGitOperationDisabled(repoState, 'sync'),
+      icon: 'sync',
+      label: t('chat.gitSyncShort'),
+      onClick: onSync
+    }
+  } satisfies Record<GitOperationKind, {
+    disabled: boolean
+    icon: string
+    label: string
+    onClick: () => void
+  }>
+  const primaryAction = primaryActionKind != null ? actionMap[primaryActionKind] : null
+
+  return (
+    <div className={`chat-header-git__split ${open ? 'is-open' : ''}`}>
+      <Button
+        type='text'
+        className='chat-header-git__split-main'
+        disabled={primaryAction?.disabled ?? true}
+        title={primaryAction?.label ?? t('chat.gitOperations')}
+        aria-label={primaryAction?.label ?? t('chat.gitOperations')}
+        onClick={() => {
+          primaryAction?.onClick()
+        }}
+      >
+        <span className='material-symbols-rounded'>
+          {primaryAction?.icon ?? 'deployed_code'}
+        </span>
+        <span className='chat-header-git__trigger-label'>
+          {primaryAction?.label ?? t('chat.gitOperations')}
+        </span>
+      </Button>
+
+      {primaryActionKind !== 'commit' && (
+        <div className='chat-header-git__split-divider' />
+      )}
+
+      <Dropdown
+        open={open}
+        placement='bottomLeft'
+        trigger={['click']}
+        onOpenChange={onOpenChange}
+        dropdownRender={() => (
+          <div className='chat-header-git__overlay chat-header-git__overlay--operations'>
+            {operationKinds.map(kind => {
+              const action = actionMap[kind]
+              return (
+                <button
+                  key={kind}
+                  type='button'
+                  className='chat-header-git__operation-row'
+                  disabled={action.disabled}
+                  onClick={action.onClick}
+                >
+                  <div className='chat-header-git__operation-row-main'>
+                    <span className='chat-header-git__row-icon material-symbols-rounded'>{action.icon}</span>
+                    <span className='chat-header-git__row-title'>{action.label}</span>
+                  </div>
+                </button>
+              )
+            })}
+          </div>
+        )}
+      >
+        <Button
+          type='text'
+          className='chat-header-git__split-toggle'
+          title={t('chat.gitOperations')}
+          aria-label={t('chat.gitOperations')}
+        >
+          <span className='material-symbols-rounded'>expand_more</span>
+        </Button>
+      </Dropdown>
+    </div>
+  )
+}