@vibe-forge/client 0.10.1 → 0.11.1

package/src/components/chat/git-controls/use-chat-git-commit.ts

@@ -0,0 +1,185 @@
+import { App } from 'antd'
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { GitRepositoryState } from '@vibe-forge/types'
+
+import { commitSessionGitChanges, getApiErrorMessage, pushSessionGitBranch } from '#~/api'
+
+import type { GitCommitNextStep } from './git-commit-utils'
+import {
+  canGitCommitAndPush,
+  canSubmitGitCommit,
+  getGitCommitBlockedReason,
+  getGitCommitSummary,
+  isGitCommitMessageRequired
+} from './git-commit-utils'
+import { getGitPushBlockedReason } from './git-operation-utils'
+
+export function useChatGitCommit({
+  closeOperationsMenu,
+  refreshGitState,
+  repoState,
+  sessionId,
+  setPendingAction
+}: {
+  closeOperationsMenu: () => void
+  refreshGitState: (nextRepo?: GitRepositoryState) => Promise<void>
+  repoState: GitRepositoryState | undefined
+  sessionId: string
+  setPendingAction: (action: 'commit' | 'commit-and-push' | null) => void
+}) {
+  const { t } = useTranslation()
+  const { message } = App.useApp()
+  const [commitModalOpen, setCommitModalOpen] = useState(false)
+  const [commitMessage, setCommitMessage] = useState('')
+  const [commitMessageError, setCommitMessageError] = useState('')
+  const [commitIncludeUnstagedChanges, setCommitIncludeUnstagedChanges] = useState(true)
+  const [commitSkipHooks, setCommitSkipHooks] = useState(false)
+  const [commitAmend, setCommitAmend] = useState(false)
+  const [commitForcePush, setCommitForcePush] = useState(false)
+  const [commitNextStep, setCommitNextStep] = useState<GitCommitNextStep>('commit')
+
+  const resetCommitState = () => {
+    setCommitModalOpen(false)
+    setCommitMessage('')
+    setCommitMessageError('')
+    setCommitIncludeUnstagedChanges(true)
+    setCommitSkipHooks(false)
+    setCommitAmend(false)
+    setCommitForcePush(false)
+    setCommitNextStep('commit')
+  }
+
+  useEffect(() => {
+    resetCommitState()
+  }, [sessionId])
+
+  const commitSummary = useMemo(() => {
+    if (repoState?.available !== true) {
+      return null
+    }
+
+    return getGitCommitSummary(repoState, commitIncludeUnstagedChanges)
+  }, [commitIncludeUnstagedChanges, repoState])
+
+  const canCommitAndPush = repoState?.available === true && canGitCommitAndPush(repoState)
+  const baseCommitBlockedReason = repoState?.available === true
+    ? getGitCommitBlockedReason(repoState, {
+      includeUnstagedChanges: commitIncludeUnstagedChanges,
+      amend: commitAmend,
+      commitMessage
+    })
+    : null
+  const commitPushBlockedReason = repoState?.available === true && commitNextStep === 'commit-and-push'
+    ? getGitPushBlockedReason(repoState, commitForcePush)
+    : null
+  const canSubmitCommit = repoState?.available === true && canSubmitGitCommit(repoState, {
+    includeUnstagedChanges: commitIncludeUnstagedChanges,
+    amend: commitAmend,
+    commitMessage
+  }) && commitPushBlockedReason == null
+  const commitBlockedReason = baseCommitBlockedReason ?? commitPushBlockedReason
+  const commitBlockedMessage = commitBlockedReason == null
+    ? ''
+    : commitBlockedReason === 'amend-unavailable'
+    ? t('chat.gitAmendUnavailable')
+    : commitBlockedReason === 'message-required'
+    ? t('chat.gitCommitMessageRequired')
+    : commitBlockedReason === 'behind-upstream'
+    ? t('chat.gitPushNeedsSyncOrForce')
+    : commitIncludeUnstagedChanges
+    ? t('chat.gitCommitNoChanges')
+    : t('chat.gitCommitNoStagedChanges')
+
+  useEffect(() => {
+    if (commitNextStep === 'commit-and-push' && !canCommitAndPush) {
+      setCommitNextStep('commit')
+    }
+  }, [canCommitAndPush, commitNextStep])
+
+  const handleCommit = () => {
+    if (repoState?.available !== true) {
+      return
+    }
+
+    const trimmedMessage = commitMessage.trim()
+    if (trimmedMessage === '' && isGitCommitMessageRequired(commitAmend)) {
+      setCommitMessageError(t('chat.gitCommitMessageRequired'))
+      return
+    }
+
+    if (!canSubmitCommit) {
+      void message.error(commitBlockedMessage === '' ? t('common.operationFailed') : commitBlockedMessage)
+      return
+    }
+
+    const action = commitNextStep === 'commit-and-push' ? 'commit-and-push' : 'commit'
+
+    void (async () => {
+      setPendingAction(action)
+      try {
+        const commitResult = await commitSessionGitChanges(sessionId, {
+          message: trimmedMessage === '' ? undefined : trimmedMessage,
+          includeUnstagedChanges: commitIncludeUnstagedChanges,
+          amend: commitAmend,
+          skipHooks: commitSkipHooks
+        })
+
+        if (commitNextStep === 'commit-and-push') {
+          try {
+            const pushResult = await pushSessionGitBranch(sessionId, {
+              force: commitForcePush
+            })
+            await refreshGitState(pushResult.repo)
+            resetCommitState()
+            closeOperationsMenu()
+            void message.success(commitAmend ? t('chat.gitAmendAndPushSuccess') : t('chat.gitCommitAndPushSuccess'))
+          } catch (error) {
+            await refreshGitState()
+            resetCommitState()
+            closeOperationsMenu()
+            void message.error(t('chat.gitCommitPushFailedAfterCommit', {
+              error: getApiErrorMessage(error, t('common.operationFailed'))
+            }))
+          }
+          return
+        }
+
+        await refreshGitState(commitResult.repo)
+        resetCommitState()
+        closeOperationsMenu()
+        void message.success(commitAmend ? t('chat.gitAmendSuccess') : t('chat.gitCommitSuccess'))
+      } catch (error) {
+        void message.error(getApiErrorMessage(error, t('common.operationFailed')))
+      } finally {
+        setPendingAction(null)
+      }
+    })()
+  }
+
+  return {
+    canCommitAndPush,
+    canSubmitCommit,
+    commitAmend,
+    commitBlockedMessage,
+    commitForcePush,
+    commitIncludeUnstagedChanges,
+    commitMessage,
+    commitMessageError,
+    commitModalOpen,
+    commitNextStep,
+    commitSkipHooks,
+    commitSummary,
+    handleCommit,
+    resetCommitState,
+    setCommitAmend,
+    setCommitForcePush,
+    setCommitIncludeUnstagedChanges,
+    setCommitMessage,
+    setCommitMessageError,
+    setCommitModalOpen,
+    setCommitNextStep,
+    setCommitSkipHooks
+  }
+}

package/src/components/chat/git-controls/use-chat-git-controls.ts

@@ -0,0 +1,200 @@
+import { App } from 'antd'
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+
+import type { GitBranchListResult, GitBranchSummary, GitRepositoryState } from '@vibe-forge/types'
+
+import {
+  checkoutSessionGitBranch,
+  createSessionGitBranch,
+  getApiErrorMessage,
+  getSessionGitState,
+  listSessionGitBranches
+} from '#~/api'
+
+import { filterGitBranches, getGitBranchViewState, hasExactGitBranchMatch } from './git-branch-utils'
+import { runGitControlMutation, runSessionGitPush } from './git-mutation-utils'
+import { getGitControlState } from './git-operation-utils'
+import { useChatGitCommit } from './use-chat-git-commit'
+import { useChatGitPushState } from './use-chat-git-push-state'
+import { useChatGitWorktrees } from './use-chat-git-worktrees'
+
+type GitActionKind = 'branch-create' | 'branch-switch' | 'commit' | 'commit-and-push' | 'push' | 'sync'
+
+export function useChatGitControls(sessionId: string) {
+  const { t } = useTranslation()
+  const { message } = App.useApp()
+  const [branchMenuOpen, setBranchMenuOpen] = useState(false)
+  const [operationsMenuOpen, setOperationsMenuOpen] = useState(false)
+  const [shouldLoadBranches, setShouldLoadBranches] = useState(false)
+  const [branchQuery, setBranchQuery] = useState('')
+  const [pendingAction, setPendingAction] = useState<GitActionKind | null>(null)
+  const push = useChatGitPushState()
+
+  const { data: repoState, mutate: mutateRepoState } = useSWR<GitRepositoryState>(
+    ['session-git-state', sessionId],
+    () => getSessionGitState(sessionId),
+    { revalidateOnFocus: false }
+  )
+  const { data: branchData, isLoading: isBranchListLoading, mutate: mutateBranchData } = useSWR<GitBranchListResult>(
+    shouldLoadBranches ? ['session-git-branches', sessionId] : null,
+    () => listSessionGitBranches(sessionId),
+    { revalidateOnFocus: false }
+  )
+  const worktree = useChatGitWorktrees({
+    currentBranch: repoState?.currentBranch,
+    enabled: repoState?.available === true,
+    repositoryRoot: repoState?.repositoryRoot,
+    sessionId
+  })
+
+  useEffect(() => {
+    setBranchMenuOpen(false)
+    setOperationsMenuOpen(false)
+    worktree.setWorktreeMenuOpen(false)
+    setShouldLoadBranches(false)
+    setBranchQuery('')
+    setPendingAction(null)
+    push.resetPushState()
+  }, [sessionId])
+
+  const refreshGitState = async (nextRepo?: GitRepositoryState) => {
+    if (nextRepo != null) {
+      await mutateRepoState(nextRepo, { revalidate: false })
+    } else {
+      await mutateRepoState()
+    }
+
+    if (shouldLoadBranches) {
+      await mutateBranchData()
+    }
+
+    if (repoState?.available === true || nextRepo?.available === true) {
+      await worktree.mutateWorktreeData()
+    }
+  }
+
+  const commit = useChatGitCommit({
+    closeOperationsMenu: () => setOperationsMenuOpen(false),
+    refreshGitState,
+    repoState,
+    sessionId,
+    setPendingAction
+  })
+
+  const allBranches = branchData?.branches ?? []
+  const filteredBranches = useMemo(() => filterGitBranches(allBranches, branchQuery), [allBranches, branchQuery])
+  const currentWorktreePath = repoState?.available === true ? repoState.repositoryRoot ?? '' : ''
+  const { availableLocalBranches, hasResults: hasBranchResults, remoteBranches } = useMemo(
+    () => getGitBranchViewState(filteredBranches, allBranches, currentWorktreePath),
+    [allBranches, filteredBranches, currentWorktreePath]
+  )
+  const canCreateBranch = branchQuery.trim() !== '' && !hasExactGitBranchMatch(allBranches, branchQuery)
+  const isBusy = pendingAction != null
+
+  const { currentBranchLabel, pushBlockedMessage, pushBlockedReason } = getGitControlState(repoState, push.pushForce, {
+    detachedHead: t('chat.gitDetachedHead'),
+    pushNeedsSyncOrForce: t('chat.gitPushNeedsSyncOrForce'),
+    pushUnavailable: t('common.operationFailed')
+  })
+
+  const runMutation = async (
+    action: Exclude<GitActionKind, 'commit' | 'commit-and-push'>,
+    task: () => Promise<{ repo: GitRepositoryState }>,
+    successMessage: string,
+    onSuccess?: () => void
+  ) =>
+    runGitControlMutation({
+      action,
+      notifyError: error => void message.error(getApiErrorMessage(error, t('common.operationFailed'))),
+      notifySuccess: nextMessage => void message.success(nextMessage),
+      onSuccess,
+      refreshGitState,
+      setPendingAction,
+      successMessage,
+      task
+    })
+
+  const closeBranchMenu = () => {
+    setBranchMenuOpen(false)
+    setBranchQuery('')
+  }
+
+  const handleBranchSwitch = (branch: GitBranchSummary) => {
+    void runMutation(
+      'branch-switch',
+      () => checkoutSessionGitBranch(sessionId, { name: branch.name, kind: branch.kind }),
+      t('chat.gitSwitchBranchSuccess', { branch: branch.kind === 'local' ? branch.name : branch.localName }),
+      closeBranchMenu
+    )
+  }
+
+  const handleCreateBranch = (name: string) => {
+    const trimmedName = name.trim()
+    if (trimmedName === '') {
+      return
+    }
+
+    void runMutation(
+      'branch-create',
+      () => createSessionGitBranch(sessionId, { name: trimmedName }),
+      t('chat.gitCreateBranchSuccess', { branch: trimmedName }),
+      closeBranchMenu
+    )
+  }
+
+  const handleOpenPushModal = () => {
+    setOperationsMenuOpen(false)
+    push.setPushModalOpen(true)
+  }
+
+  const handlePush = () => {
+    void runSessionGitPush({
+      blockedMessage: pushBlockedMessage,
+      blockedReason: pushBlockedReason,
+      force: push.pushForce,
+      notifyBlocked: nextMessage => void message.error(nextMessage),
+      onSuccess: push.resetPushState,
+      repoState,
+      runMutation,
+      sessionId,
+      successMessage: push.pushForce ? t('chat.gitForcePushSuccess') : t('chat.gitPushSuccess')
+    })
+  }
+
+  return {
+    branchMenuOpen,
+    branchQuery,
+    canCreateBranch,
+    currentBranchLabel,
+    handleBranchSwitch,
+    handleCreateBranch,
+    handleOpenPushModal,
+    handlePush,
+    hasBranchResults,
+    isBranchListLoading,
+    isBusy,
+    availableLocalBranches,
+    operationsMenuOpen,
+    pendingAction,
+    pushBlockedMessage,
+    pushForce: push.pushForce,
+    pushModalOpen: push.pushModalOpen,
+    remoteBranches,
+    repoState,
+    runMutation,
+    showWorktreeButton: worktree.showWorktreeButton,
+    worktreeMenuOpen: worktree.worktreeMenuOpen,
+    worktrees: worktree.worktrees,
+    setBranchMenuOpen,
+    setBranchQuery,
+    setOperationsMenuOpen,
+    setPushForce: push.setPushForce,
+    setPushModalOpen: push.setPushModalOpen,
+    setShouldLoadBranches,
+    setWorktreeMenuOpen: worktree.setWorktreeMenuOpen,
+    resetPushState: push.resetPushState,
+    ...commit
+  }
+}

package/src/components/chat/git-controls/use-chat-git-push-state.ts

@@ -0,0 +1,19 @@
+import { useState } from 'react'
+
+export function useChatGitPushState() {
+  const [pushModalOpen, setPushModalOpen] = useState(false)
+  const [pushForce, setPushForce] = useState(false)
+
+  const resetPushState = () => {
+    setPushModalOpen(false)
+    setPushForce(false)
+  }
+
+  return {
+    pushForce,
+    pushModalOpen,
+    resetPushState,
+    setPushForce,
+    setPushModalOpen
+  }
+}

package/src/components/chat/git-controls/use-chat-git-worktrees.ts

@@ -0,0 +1,39 @@
+import { useMemo, useState } from 'react'
+import useSWR from 'swr'
+
+import type { GitWorktreeListResult } from '@vibe-forge/types'
+
+import { listSessionGitWorktrees } from '#~/api'
+import { getGitWorktreeViewState } from './git-worktree-utils'
+
+export function useChatGitWorktrees(input: {
+  currentBranch?: string | null
+  enabled: boolean
+  repositoryRoot?: string
+  sessionId: string
+}) {
+  const [worktreeMenuOpen, setWorktreeMenuOpen] = useState(false)
+  const { data: worktreeData, mutate: mutateWorktreeData } = useSWR<GitWorktreeListResult>(
+    input.enabled ? ['session-git-worktrees', input.sessionId] : null,
+    () => listSessionGitWorktrees(input.sessionId),
+    { revalidateOnFocus: false }
+  )
+  const viewState = useMemo(
+    () =>
+      getGitWorktreeViewState({
+        currentBranch: input.currentBranch,
+        enabled: input.enabled,
+        repositoryRoot: input.repositoryRoot,
+        worktrees: worktreeData?.worktrees
+      }),
+    [input.currentBranch, input.enabled, input.repositoryRoot, worktreeData?.worktrees]
+  )
+
+  return {
+    mutateWorktreeData,
+    showWorktreeButton: viewState.showWorktreeButton,
+    worktreeMenuOpen,
+    worktrees: viewState.worktrees,
+    setWorktreeMenuOpen
+  }
+}

package/src/components/chat/messages/MessageStatusNotice.scss

@@ -0,0 +1,163 @@
+.message-status-notice {
+  width: 100%;
+
+  &__card {
+    width: 100%;
+    padding: 7px 12px;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  &__icon {
+    font-size: 14px;
+    line-height: 1;
+    flex-shrink: 0;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+    flex: 1;
+  }
+
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  &__title-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+    min-width: 0;
+    flex-wrap: wrap;
+  }
+
+  &__title {
+    font-size: 12px;
+    line-height: 1.3;
+    font-weight: 500;
+  }
+
+  &__badge,
+  &__meta {
+    display: inline-flex;
+    align-items: center;
+    padding: 0;
+    border-radius: 0;
+    font-size: 10px;
+    line-height: 1.2;
+    white-space: nowrap;
+  }
+
+  &__badge {
+    opacity: .72;
+  }
+
+  &__meta {
+    font-family:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono,
+      Courier New, monospace;
+    opacity: .8;
+  }
+
+  &__message {
+    color: var(--text-color);
+    font-size: 12px;
+    line-height: 1.45;
+    word-break: break-word;
+  }
+
+  &__detail {
+    color: var(--sub-text-color, #6b7280);
+    font-size: 11px;
+    line-height: 1.35;
+    word-break: break-word;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding-top: 1px;
+  }
+
+  &--error {
+    .message-status-notice__icon,
+    .message-status-notice__title {
+      color: #a16262;
+    }
+
+    .message-status-notice__badge,
+    .message-status-notice__meta {
+      color: #b07a7a;
+    }
+  }
+
+  &--warning {
+    .message-status-notice__icon,
+    .message-status-notice__title {
+      color: #9a7b4f;
+    }
+
+    .message-status-notice__badge,
+    .message-status-notice__meta {
+      color: #aa8b62;
+    }
+  }
+}
+
+html.dark {
+  .message-status-notice {
+    &--error {
+      .message-status-notice__icon,
+      .message-status-notice__title,
+      .message-status-notice__badge,
+      .message-status-notice__meta {
+        color: #d9b5b5;
+      }
+
+      .message-status-notice__badge,
+      .message-status-notice__meta {
+        background: transparent;
+      }
+
+      .message-status-notice__message {
+        color: #f3f4f6;
+      }
+
+      .message-status-notice__detail {
+        color: #cba0a0;
+      }
+    }
+
+    &--warning {
+      .message-status-notice__icon,
+      .message-status-notice__title,
+      .message-status-notice__badge,
+      .message-status-notice__meta {
+        color: #d7c399;
+      }
+
+      .message-status-notice__badge,
+      .message-status-notice__meta {
+        background: transparent;
+      }
+
+      .message-status-notice__message {
+        color: #f3f4f6;
+      }
+
+      .message-status-notice__detail {
+        color: #c8b27c;
+      }
+    }
+  }
+}

package/src/components/chat/messages/MessageStatusNotice.tsx

@@ -0,0 +1,48 @@
+import './MessageStatusNotice.scss'
+
+import { Button } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import type { ChatHistoryStatusNotice } from './build-chat-history-status-notices'
+
+export function MessageStatusNotice({
+  notice,
+  onRetryConnection
+}: {
+  notice: ChatHistoryStatusNotice
+  onRetryConnection: () => void
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <div className={`message-status-notice message-status-notice--${notice.tone} ${notice.isMock ? 'is-mock' : ''}`}>
+      <div className='message-status-notice__card' role='status' aria-live='polite'>
+        <div className='message-status-notice__content'>
+          <div className='message-status-notice__header'>
+            <div className='message-status-notice__title-row'>
+              <span className='material-symbols-rounded message-status-notice__icon'>{notice.icon}</span>
+              <div className='message-status-notice__title'>{notice.title}</div>
+              {notice.isMock && (
+                <span className='message-status-notice__badge'>{t('chat.debugMockLabel')}</span>
+              )}
+            </div>
+            {notice.meta != null && notice.meta !== '' && (
+              <span className='message-status-notice__meta'>{notice.meta}</span>
+            )}
+          </div>
+          <div className='message-status-notice__message'>{notice.message}</div>
+          {notice.detail != null && notice.detail !== '' && (
+            <div className='message-status-notice__detail'>{notice.detail}</div>
+          )}
+          {notice.action === 'retry-connection' && (
+            <div className='message-status-notice__actions'>
+              <Button size='small' onClick={onRetryConnection}>
+                {t('chat.retryConnection')}
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}