@vibe-forge/client 0.11.0 → 0.11.2

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/tools/DefaultTool.tsx

@@ -1,16 +1,16 @@
-import { Tooltip } from 'antd'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { ChatMessageContent } from '@vibe-forge/core'
 
-import { CodeBlock } from '#~/components/CodeBlock'
-import { safeJsonStringify } from '#~/utils/safe-serialize'
-
 import { ToolCallBox } from './core/ToolCallBox'
+import { ToolDiffViewer } from './core/ToolDiffViewer'
 import { ToolResultContent } from './core/ToolResultContent'
 import { ToolSummaryHeader } from './core/ToolSummaryHeader'
+import { buildGenericToolPresentation } from './core/generic-tool-presentation'
 import { hasMeaningfulToolValue } from './core/tool-content-presence'
-import { TOOL_TOOLTIP_PROPS, getToolSectionIcon, getToolTargetPresentation } from './core/tool-display'
+import { getToolTargetPresentation } from './core/tool-display'
+import { ToolInlineFields, renderToolBlockField } from './core/tool-field-sections'
 import { getToolPrimaryText, getToolTitleText } from './core/tool-summary'
 
 export function DefaultTool({
@@ -21,11 +21,18 @@ export function DefaultTool({
   resultItem?: Extract<ChatMessageContent, { type: 'tool_result' }>
 }) {
   const { t } = useTranslation()
-  const hasCallDetails = hasMeaningfulToolValue(item.input)
+  const view = useMemo(() => buildGenericToolPresentation(item.name, item.input), [item.input, item.name])
+  const hasCallDetails = view.inlineFields.length > 0 || view.blockFields.length > 0 || view.diff != null
   const hasResultDetails = resultItem != null && hasMeaningfulToolValue(resultItem.content)
-  const hasDetails = hasCallDetails || hasResultDetails
-  const titleText = getToolTitleText(item, t)
-  const targetPresentation = getToolTargetPresentation(getToolPrimaryText(item))
+  const showResultDetails = hasResultDetails && !(view.suppressSuccessResult === true && resultItem?.is_error !== true)
+  const hasDetails = hasCallDetails || showResultDetails
+  const titleText = view.titleKey != null
+    ? t(view.titleKey, { defaultValue: view.fallbackTitle })
+    : getToolTitleText(item, t)
+  const targetPresentation = getToolTargetPresentation(view.primary ?? getToolPrimaryText(item))
+  const preferMarkdown = ['webfetch', 'websearch'].includes(
+    item.name.split(':').pop()?.replace(/[^a-z0-9]+/gi, '').toLowerCase() ?? ''
+  )
   const errorMeta = resultItem?.is_error === true
     ? (
       <span className='tool-status tool-status--error'>
@@ -42,7 +49,7 @@ export function DefaultTool({
         collapsible={hasDetails}
         header={({ isExpanded, isCollapsible }) => (
           <ToolSummaryHeader
-            icon={<span className='material-symbols-rounded'>build</span>}
+            icon={<span className='material-symbols-rounded'>{view.icon}</span>}
             title={titleText}
             target={targetPresentation.text}
             targetTitle={targetPresentation.title}
@@ -56,32 +63,34 @@ export function DefaultTool({
         content={hasDetails
           ? (
             <div className='tool-detail-sections'>
-              {hasCallDetails && (
+              <ToolInlineFields fields={view.inlineFields} t={t} />
+              {view.diff != null && (
                 <div className='tool-detail-section'>
-                  <div className='tool-detail-section__header'>
-                    <Tooltip title={t('chat.tools.call')} {...TOOL_TOOLTIP_PROPS}>
-                      <span className='tool-detail-section__icon material-symbols-rounded'>
-                        {getToolSectionIcon('call')}
-                      </span>
-                    </Tooltip>
-                  </div>
-                  <CodeBlock
-                    code={safeJsonStringify(item.input != null ? item.input : {}, 2)}
-                    lang='json'
-                    hideHeader={true}
+                  <ToolDiffViewer
+                    original={view.diff.original}
+                    modified={view.diff.modified}
+                    language={view.diff.language}
+                    metaItems={(view.diff.metaItems ?? []).map(item => ({
+                      icon: item.icon,
+                      label: t(item.labelKey, { defaultValue: item.fallbackLabel }),
+                      value: item.value != null && item.value !== ''
+                        ? (item.value === 'true'
+                          ? t('chat.tools.booleanOn')
+                          : item.value === 'false'
+                          ? t('chat.tools.booleanOff')
+                          : item.value)
+                        : undefined,
+                      tone: item.tone
+                    }))}
+                    splitLabel={t('chat.tools.diffSplit')}
+                    inlineLabel={t('chat.tools.diffInline')}
                   />
                 </div>
               )}
-              {hasResultDetails && resultItem != null && (
+              {view.blockFields.map((field, index) => renderToolBlockField(field, index, t))}
+              {showResultDetails && resultItem != null && (
                 <div className='tool-detail-section'>
-                  <div className='tool-detail-section__header'>
-                    <Tooltip title={t('chat.result')} {...TOOL_TOOLTIP_PROPS}>
-                      <span className='tool-detail-section__icon material-symbols-rounded'>
-                        {getToolSectionIcon('result')}
-                      </span>
-                    </Tooltip>
-                  </div>
-                  <ToolResultContent content={resultItem.content} />
+                  <ToolResultContent content={resultItem.content} preferMarkdown={preferMarkdown} />
                 </div>
               )}
             </div>

package/src/components/chat/tools/adapter-claude/GenericClaudeTool.tsx

@@ -1,6 +1,5 @@
 import './GenericClaudeTool.scss'
 
-import { Tooltip } from 'antd'
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -8,13 +7,7 @@ import { ToolCallBox } from '../core/ToolCallBox'
 import { ToolResultContent } from '../core/ToolResultContent'
 import { ToolSummaryHeader } from '../core/ToolSummaryHeader'
 import { hasMeaningfulToolValue } from '../core/tool-content-presence'
-import {
-  TOOL_TOOLTIP_PROPS,
-  getToolFieldIcon,
-  getToolInlineValueText,
-  getToolSectionIcon,
-  getToolTargetPresentation
-} from '../core/tool-display'
+import { getToolFieldIcon, getToolInlineValueText, getToolTargetPresentation } from '../core/tool-display'
 import { defineToolRender } from '../defineToolRender'
 import { ClaudeEditDiff } from './ClaudeEditDiff'
 import { ClaudeToolInlineFields, renderClaudeBlockField } from './claude-tool-field-sections'
@@ -114,13 +107,6 @@ export const GenericClaudeTool = defineToolRender(({ item, resultItem }) => {
               {blockFields.map((field, index) => renderClaudeBlockField(field, index, t))}
               {showResultDetails && resultItem != null && (
                 <div className='tool-detail-section'>
-                  <div className='tool-detail-section__header'>
-                    <Tooltip title={t('chat.result')} {...TOOL_TOOLTIP_PROPS}>
-                      <span className='tool-detail-section__icon material-symbols-rounded'>
-                        {getToolSectionIcon('result')}
-                      </span>
-                    </Tooltip>
-                  </div>
                   <ToolResultContent content={resultItem.content} preferMarkdown={preferMarkdown} />
                 </div>
               )}

package/src/components/chat/tools/adapter-claude/claude-tool-edit-builders.ts

@@ -21,7 +21,14 @@ export function buildClaudeEditToolPresentation(params: BuilderParams) {
         const data = todo as Record<string, unknown>
         const content = asString(data.content)
         const status = asString(data.status)
-        return content != null ? [`[${status ?? 'pending'}] ${content}`] : []
+        const activeForm = asString(data.activeForm)
+        if (content == null) {
+          return []
+        }
+        const detail = status === 'in_progress' && activeForm != null && activeForm !== content
+          ? ` (${activeForm})`
+          : ''
+        return [`[${status ?? 'pending'}] ${content}${detail}`]
       })
       : undefined