Feat: add push to and pull from git with remote selection, along with rebase and merge options (#345)
* Add getRemotes API endpoint
- Add getRemotes() function to git-service.js using simple-git's getRemotes(true)
- Returns array of {name, fetchUrl, pushUrl} for each remote
- Add GET /api/git/remotes endpoint to server/index.js
- Follows existing patterns for git endpoints (directory query param, error handling)
* Add merge and rebase API endpoints
- Add rebase(), abortRebase(), merge(), abortMerge() to git-service.js
- Add POST /api/git/rebase, /api/git/rebase/abort endpoints
- Add POST /api/git/merge, /api/git/merge/abort endpoints
- All functions return { success, conflict?, conflictFiles? }
- Conflict detection via error message parsing and git status
* Add client API functions for git remotes, merge, and rebase
- Added GitRemote, GitMergeResult, GitRebaseResult interfaces to types.ts
- Added getRemotes(), rebase(), abortRebase(), merge(), abortMerge() to gitApiHttp.ts
- Added corresponding exports and runtime wrappers to gitApi.ts
- All functions follow existing patterns with proper error handling
- Lint and type-check pass
* feat(git): add remote selection dropdown to SyncActions
- Add remotes prop to SyncActions component
- Change callbacks to accept GitRemote parameter
- Show dropdown menu when multiple remotes exist
- Execute immediately for single remote repos
- Display remote name and fetch URL in dropdown items
* feat: add BranchIntegrationSection component
- Branch selector dropdown (local + remote branches)
- Merge and Rebase buttons with loading states
- Props: currentBranch, localBranches, remoteBranches, onMerge, onRebase, disabled, isOperating
- Follows existing UI patterns (Command + DropdownMenu)
- Tooltips for all interactive elements
* Add ConflictDialog component for merge/rebase conflicts
- Shows when merge/rebase returns conflict
- Three action options: Resolve in New Session, Abort, Continue Later
- Resolve in New Session opens OpenChamber session in conflict directory
- Displays list of conflicted files
- Uses theme tokens for colors
- Follows existing dialog patterns from AboutDialog.tsx
* Integrate git remote selection and branch operations into GitView
- Fetch remotes on mount and store in state
- Pass remotes to SyncActions and update handleSyncAction to accept GitRemote parameter
- Add BranchIntegrationSection component below sync actions for merge/rebase operations
- Add ConflictDialog to handle merge/rebase conflicts with option to resolve in new session
- Export BranchIntegrationSection and ConflictDialog from git/index.ts
- Update GitHeader to accept remotes prop and pass to SyncActions
- Handle single vs multiple remote scenarios (immediate action vs dropdown)
- Fix React hooks exhaustive-deps warnings by capturing status in local variable
* fix: add missing git API methods to web and vscode packages
* feat: extend VSCode bridge with git remote/rebase/merge endpoints
* feat: add stash support for git operations across UI and API
* hive(01-add-types-for-conflict-details): Added MergeConflictDetails interface to packages/u
* hive(02-add-server-side-conflict-details-function): Added `getConflictDetails(directory)` function to
* hive(03-add-server-endpoint-for-conflict-details): Added GET /api/git/conflict-details endpoint to pa
* hive(04-add-client-side-api-for-conflict-details): Added client-side API for conflict details:
1. **
* hive(05-enhance-conflictdialog-with-rich-context): Enhanced ConflictDialog to fetch and use rich conf
* hive(06-add-state-persistence-for-conflicts): Added state persistence for merge/rebase conflicts
* feat: add conflict details API and AI resolve flow
* fix: improve focus handling in git UI and adjust web dev server port
* feat: add continue merge/rebase support and logs
* fix: address bugs in git merge/rebase feature
- Add explicit parentheses to hasUnresolvedConflicts logic for clarity
- Add error handling for stash operation in handleStashAndRetry
- Fix SSH key path escaping on Windows by normalizing before validation
* fix: add default value for remotes prop to prevent crash
When remotes is undefined, accessing .length throws TypeError.
Add default empty array to handle undefined case gracefully.
* fix: replace DialogFooter with plain div for proper button layout
DialogFooter's default flex-col-reverse and sm:flex-row styles
were conflicting with the intended vertical button stack layout,
causing buttons to not display properly.
* Fix lint erorr
* fix: remove duplicate BranchIntegrationSection and fix broken vscode bridge
- Remove duplicate BranchIntegrationSection from GitView.tsx (already in GitHeader)
- Fix vscode bridge calling non-existent ensureOpenChamberIgnored function
(legacy worktree function was removed, make api:git/ignore-openchamber a no-op)
* fix: handleResolveWithAIFromBanner now properly detects conflicts from status
The function was checking conflictFiles state which may be empty when
the banner is shown. Now it extracts conflict files directly from the
git status (files with 'U' status) and properly sets up the conflict
dialog state before opening it.
This commit is contained in:
gsxdsm
@@ -0,0 +1,451 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
RiGitMergeLine,
|
||||
RiGitBranchLine,
|
||||
RiLoader4Line,
|
||||
RiArrowDownSLine,
|
||||
RiCheckLine,
|
||||
RiCloseLine,
|
||||
} from '@remixicon/react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
CommandSeparator,
|
||||
} from '@/components/ui/command';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
type OperationType = 'merge' | 'rebase';
|
||||
|
||||
export interface OperationLogEntry {
|
||||
message: string;
|
||||
status: 'pending' | 'running' | 'done' | 'error';
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
interface BranchIntegrationSectionProps {
|
||||
currentBranch: string | null | undefined;
|
||||
localBranches: string[];
|
||||
remoteBranches: string[];
|
||||
onMerge: (branch: string) => void;
|
||||
onRebase: (branch: string) => void;
|
||||
disabled?: boolean;
|
||||
isOperating?: boolean;
|
||||
operationLogs?: OperationLogEntry[];
|
||||
onOperationComplete?: () => void;
|
||||
}
|
||||
|
||||
export const BranchIntegrationSection: React.FC<BranchIntegrationSectionProps> = ({
|
||||
currentBranch,
|
||||
localBranches,
|
||||
remoteBranches,
|
||||
onMerge,
|
||||
onRebase,
|
||||
disabled = false,
|
||||
isOperating = false,
|
||||
operationLogs = [],
|
||||
onOperationComplete,
|
||||
}) => {
|
||||
const [dialogOpen, setDialogOpen] = React.useState(false);
|
||||
const [operation, setOperation] = React.useState<OperationType>('merge');
|
||||
const [selectedBranch, setSelectedBranch] = React.useState<string | null>(null);
|
||||
const [branchDropdownOpen, setBranchDropdownOpen] = React.useState(false);
|
||||
const [branchSearch, setBranchSearch] = React.useState('');
|
||||
const searchInputRef = React.useRef<HTMLInputElement>(null);
|
||||
const logContainerRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
const isDisabled = disabled || isOperating;
|
||||
|
||||
// Check if operation completed (all logs are done or error)
|
||||
const operationCompleted = operationLogs.length > 0 &&
|
||||
operationLogs.every(log => log.status === 'done' || log.status === 'error');
|
||||
const hasError = operationLogs.some(log => log.status === 'error');
|
||||
|
||||
// Auto-scroll log container when new entries are added
|
||||
React.useEffect(() => {
|
||||
if (logContainerRef.current) {
|
||||
logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
|
||||
}
|
||||
}, [operationLogs]);
|
||||
|
||||
// Filter branches based on search
|
||||
const filteredLocal = React.useMemo(() => {
|
||||
const term = branchSearch.toLowerCase();
|
||||
const filtered = localBranches.filter((b) => b !== currentBranch);
|
||||
if (!term) return filtered;
|
||||
return filtered.filter((b) => b.toLowerCase().includes(term));
|
||||
}, [branchSearch, localBranches, currentBranch]);
|
||||
|
||||
const filteredRemote = React.useMemo(() => {
|
||||
const term = branchSearch.toLowerCase();
|
||||
if (!term) return remoteBranches;
|
||||
return remoteBranches.filter((b) => b.toLowerCase().includes(term));
|
||||
}, [branchSearch, remoteBranches]);
|
||||
|
||||
const handleOpenDialog = () => {
|
||||
setDialogOpen(true);
|
||||
setSelectedBranch(null);
|
||||
setOperation('merge');
|
||||
setBranchSearch('');
|
||||
};
|
||||
|
||||
const handleSelectBranch = (branch: string) => {
|
||||
setSelectedBranch(branch);
|
||||
setBranchDropdownOpen(false);
|
||||
setBranchSearch('');
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (!selectedBranch) return;
|
||||
|
||||
// Don't close dialog - keep it open to show progress
|
||||
if (operation === 'merge') {
|
||||
onMerge(selectedBranch);
|
||||
} else {
|
||||
onRebase(selectedBranch);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
// Don't allow cancel during operation
|
||||
if (isOperating) return;
|
||||
|
||||
setSelectedBranch(null);
|
||||
setOperation('merge');
|
||||
setBranchSearch('');
|
||||
setDialogOpen(false);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
// Only allow closing when operation is complete or not started
|
||||
if (isOperating && !operationCompleted) return;
|
||||
|
||||
if (operationCompleted) {
|
||||
onOperationComplete?.();
|
||||
}
|
||||
setSelectedBranch(null);
|
||||
setOperation('merge');
|
||||
setBranchSearch('');
|
||||
setDialogOpen(false);
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!branchDropdownOpen) {
|
||||
setBranchSearch('');
|
||||
} else {
|
||||
// Focus the search input when dropdown opens
|
||||
const timer = setTimeout(() => {
|
||||
searchInputRef.current?.focus();
|
||||
}, 0);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [branchDropdownOpen]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip delayDuration={1000}>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 px-2 gap-1.5"
|
||||
onClick={handleOpenDialog}
|
||||
disabled={isDisabled}
|
||||
>
|
||||
{isOperating ? (
|
||||
<RiLoader4Line className="size-4 animate-spin" />
|
||||
) : (
|
||||
<RiGitMergeLine className="size-4" />
|
||||
)}
|
||||
<span className="hidden sm:inline">Integrate</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent sideOffset={8}>
|
||||
Merge or rebase another branch
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
handleClose();
|
||||
} else {
|
||||
setDialogOpen(true);
|
||||
}
|
||||
}}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Integrate Branch</DialogTitle>
|
||||
<DialogDescription>
|
||||
{isOperating ? (
|
||||
operationCompleted ? (
|
||||
hasError ? 'Operation failed' : 'Operation completed'
|
||||
) : (
|
||||
`${operation === 'merge' ? 'Merging' : 'Rebasing'} in progress...`
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
Choose how to integrate changes from another branch into{' '}
|
||||
<span className="font-mono text-foreground">{currentBranch || 'current branch'}</span>
|
||||
</>
|
||||
)}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Show operation log when operating */}
|
||||
{isOperating ? (
|
||||
<div className="space-y-3">
|
||||
<div
|
||||
ref={logContainerRef}
|
||||
className="rounded-lg border border-border bg-muted/30 p-3 max-h-48 overflow-y-auto"
|
||||
>
|
||||
<div className="space-y-2">
|
||||
{operationLogs.map((log, index) => (
|
||||
<div key={index} className="flex items-start gap-2">
|
||||
<div className="mt-0.5 shrink-0">
|
||||
{log.status === 'running' && (
|
||||
<RiLoader4Line className="size-3.5 animate-spin text-primary" />
|
||||
)}
|
||||
{log.status === 'done' && (
|
||||
<RiCheckLine className="size-3.5 text-success" />
|
||||
)}
|
||||
{log.status === 'error' && (
|
||||
<RiCloseLine className="size-3.5 text-destructive" />
|
||||
)}
|
||||
{log.status === 'pending' && (
|
||||
<div className="size-3.5 rounded-full border border-muted-foreground/30" />
|
||||
)}
|
||||
</div>
|
||||
<span className={cn(
|
||||
'typography-micro',
|
||||
log.status === 'error' && 'text-destructive',
|
||||
log.status === 'done' && 'text-muted-foreground',
|
||||
log.status === 'running' && 'text-foreground',
|
||||
log.status === 'pending' && 'text-muted-foreground/60'
|
||||
)}>
|
||||
{log.message}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{operationCompleted && (
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
onClick={handleClose}
|
||||
>
|
||||
{hasError ? 'Close' : 'Done'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Operation Selection */}
|
||||
<div className="space-y-3">
|
||||
<p className="typography-meta text-muted-foreground">Operation</p>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOperation('merge')}
|
||||
className={cn(
|
||||
'flex flex-col items-start gap-1 rounded-lg border p-3 text-left transition-colors',
|
||||
operation === 'merge'
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-border hover:border-border/80 hover:bg-muted/50'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<RiGitMergeLine className={cn(
|
||||
'size-4',
|
||||
operation === 'merge' ? 'text-primary' : 'text-muted-foreground'
|
||||
)} />
|
||||
<span className={cn(
|
||||
'typography-ui-label',
|
||||
operation === 'merge' ? 'text-foreground' : 'text-muted-foreground'
|
||||
)}>
|
||||
Merge
|
||||
</span>
|
||||
</div>
|
||||
<p className="typography-micro text-muted-foreground">
|
||||
Combines branches with a merge commit. Preserves history.
|
||||
</p>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOperation('rebase')}
|
||||
className={cn(
|
||||
'flex flex-col items-start gap-1 rounded-lg border p-3 text-left transition-colors',
|
||||
operation === 'rebase'
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-border hover:border-border/80 hover:bg-muted/50'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<RiGitBranchLine className={cn(
|
||||
'size-4',
|
||||
operation === 'rebase' ? 'text-primary' : 'text-muted-foreground'
|
||||
)} />
|
||||
<span className={cn(
|
||||
'typography-ui-label',
|
||||
operation === 'rebase' ? 'text-foreground' : 'text-muted-foreground'
|
||||
)}>
|
||||
Rebase
|
||||
</span>
|
||||
</div>
|
||||
<p className="typography-micro text-muted-foreground">
|
||||
Replays commits on top. Creates linear history.
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Branch Selection */}
|
||||
<div className="space-y-3">
|
||||
<p className="typography-meta text-muted-foreground">
|
||||
{operation === 'merge' ? 'Branch to merge' : 'Branch to rebase onto'}
|
||||
</p>
|
||||
<DropdownMenu open={branchDropdownOpen} onOpenChange={setBranchDropdownOpen}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-between h-10"
|
||||
>
|
||||
<span className={cn(
|
||||
'truncate',
|
||||
!selectedBranch && 'text-muted-foreground'
|
||||
)}>
|
||||
{selectedBranch || 'Select a branch...'}
|
||||
</span>
|
||||
<RiArrowDownSLine className="size-4 opacity-60 shrink-0" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="w-[--radix-dropdown-menu-trigger-width] p-0 max-h-[300px]">
|
||||
<Command>
|
||||
<CommandInput
|
||||
ref={searchInputRef}
|
||||
placeholder="Search branches..."
|
||||
value={branchSearch}
|
||||
onValueChange={setBranchSearch}
|
||||
/>
|
||||
<CommandList>
|
||||
<CommandEmpty>No branches found.</CommandEmpty>
|
||||
|
||||
{filteredLocal.length > 0 && (
|
||||
<CommandGroup heading="Local branches">
|
||||
{filteredLocal.map((branch) => (
|
||||
<CommandItem
|
||||
key={`local-${branch}`}
|
||||
onSelect={() => handleSelectBranch(branch)}
|
||||
>
|
||||
<span className="typography-ui-label text-foreground truncate">
|
||||
{branch}
|
||||
</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
)}
|
||||
|
||||
{filteredLocal.length > 0 && filteredRemote.length > 0 && (
|
||||
<CommandSeparator />
|
||||
)}
|
||||
|
||||
{filteredRemote.length > 0 && (
|
||||
<CommandGroup heading="Remote branches">
|
||||
{filteredRemote.map((branch) => (
|
||||
<CommandItem
|
||||
key={`remote-${branch}`}
|
||||
onSelect={() => handleSelectBranch(branch)}
|
||||
>
|
||||
<span className="typography-ui-label text-foreground truncate">
|
||||
{branch}
|
||||
</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
)}
|
||||
</CommandList>
|
||||
</Command>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
{/* Summary */}
|
||||
{selectedBranch && (
|
||||
<div className="rounded-lg bg-muted/50 p-3">
|
||||
<p className="typography-meta text-muted-foreground">
|
||||
{operation === 'merge' ? (
|
||||
<>
|
||||
This will merge{' '}
|
||||
<span className="font-mono text-foreground">{selectedBranch}</span>
|
||||
{' '}into{' '}
|
||||
<span className="font-mono text-foreground">{currentBranch}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
This will rebase{' '}
|
||||
<span className="font-mono text-foreground">{currentBranch}</span>
|
||||
{' '}onto{' '}
|
||||
<span className="font-mono text-foreground">{selectedBranch}</span>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter className="gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleCancel}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
onClick={handleConfirm}
|
||||
disabled={!selectedBranch}
|
||||
className="gap-1.5"
|
||||
>
|
||||
{operation === 'merge' ? (
|
||||
<>
|
||||
<RiGitMergeLine className="size-4" />
|
||||
Merge
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<RiGitBranchLine className="size-4" />
|
||||
Rebase
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user