BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(git-graph): VS Code-style git graph with commit actions in History modal (#1431)

Browse Source 
* feat(types): add parents to GitLogEntry and new commit action types

* feat(git): add parent hashes and --all flag to getLog

* fix(git): move record separator to start of log format string

* feat(git): add checkoutCommit server function and route

* feat(git): add cherryPick server function and route

* feat(git): add revertCommit server function and route

* feat(git): add resetToCommit server function and route

* fix(tests): make git service tests branch-name portable, add error path tests

* feat(client): add checkoutCommit, cherryPick, revertCommit, resetToCommit API wrappers

* feat(git-graph): add lane assignment algorithm with tests

* feat(git-graph): add GitGraphSegment per-row SVG renderer

* feat(i18n): add locale strings for git graph action buttons

* fix(git-graph): handle lane convergence, fix SVG path coords, add connector tests

* feat(git-graph): add ref badges and action buttons to HistoryCommitRow

* fix(git-graph): add loading guards to reset actions, use theme tokens for ref badges

* fix(git-graph): conditional hooks, stale graph log, conflict handling, i18n

* fix(types): replace toBeDefined with toBeTruthy, fix toast API usage

* fix(lint): remove unused variables

* fix(git-graph): fix SVG height causing 150px row spacing

* fix(git-graph): smooth bezier curves, fill row height, round line caps

* fix(git-graph): non-scaling-stroke fixes bezier white spaces, sort curves on top

* fix(git-graph): remove viewBox scaling, match SVG height to actual row height

* fix(git-graph): ResizeObserver tracks actual row height, eliminates SVG height mismatch

* feat(git-graph): replace SVG with Canvas for graph rendering

* fix(git-graph): isolate canvas from flex layout to prevent replaced-element height leak

* feat(git-graph): align action buttons, add confirmation popups for all actions

* fix(git-graph): address code review findings CR-001 through CR-005

- CR-001: VS Code getGitLog now forwards 'all' option and parses %P parents
- CR-002: VS Code bridge/gitService implement checkoutCommit, cherryPick,
  revertCommit, resetToCommit with conflict detection and hard-reset guard
- CR-003: server-side commit hash validated with /^[0-9a-fA-F]{7,40}$/
  in both routes.js and service.js; 12 new rejection tests added
- CR-004: cherry-pick/revert conflict path now refreshes fetchStatus/
  fetchBranches/fetchLog; conflict toast uses i18n keys in all 7 locales
- CR-005: corrected O(n) comment to O(n x lanes)

* fix(i18n): add zh-TW locale and common.language.traditionalChinese key to all locales

upstream/main added zh-TW.ts after branch diverged; CI type-check fails
when PR is merged because zh-TW.ts was missing all gitView.history.actions.*
keys and loadMore/loadingMore. Also adds common.language.traditionalChinese
to en.ts and all 6 non-English files to match upstream en.ts.

* fix: harden git history actions

* feat: split git history graph view

* chore: remove git graph planning docs

---------

Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
This commit is contained in:
Erman HAVUÇ
2026-05-27 00:13:25 +03:00
committed by GitHub
co-authored by Bohdan Triapitsyn
parent cc3d1bd63c
commit 52ffe9daef
26 changed files with 2373 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/views/git/HistoryCommitRow.tsx
+342 -6
View File
@@ -1,5 +1,11 @@
import React from 'react';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { Icon } from "@/components/icon/Icon";
import { cn } from '@/lib/utils';
@@ -8,6 +14,10 @@ import { useI18n } from '@/lib/i18n';
import { getCommitFileDiff, type CommitFileDiffResponse } from '@/lib/gitApi';
import { PierreDiffViewer } from '@/components/views/PierreDiffViewer';
import { getLanguageFromExtension } from '@/lib/toolHelpers';
import type { LanedCommit } from './gitGraph';
import { GitGraphSegment } from './GitGraphSegment';
import * as git from '@/lib/gitApi';
import { toast } from '@/components/ui/toast';
const HISTORY_DIFF_REQUEST_TIMEOUT_MS = 15000;
const HISTORY_DIFF_LARGE_CHANGED_LINES = 500;
@@ -54,12 +64,17 @@ const trimHistoryDiffCache = (cache: Map<string, HistoryDiffCacheValue>): Map<st
interface HistoryCommitRowProps {
entry: GitLogEntry;
mode?: 'history' | 'graph';
laned?: LanedCommit;
totalLanes?: number;
isExpanded: boolean;
onToggle: () => void;
files: CommitFileEntry[];
isLoadingFiles: boolean;
onCopyHash: (hash: string) => void;
directory: string | undefined;
onConflict?: (result: { conflict: boolean; conflictFiles?: string[]; operation: 'cherry-pick' | 'revert' | 'merge' | 'rebase' }) => void;
onActionSuccess?: () => void;
}
function formatCommitDate(date: string) {
@@ -93,21 +108,186 @@ function getChangeTypeColor(changeType: string) {
}
}
interface RefBadge {
label: string;
isHead: boolean;
isTag: boolean;
}
function parseRefBadges(refs: string): RefBadge[] {
if (!refs) return [];
return refs
.split(',')
.map((r) => r.trim())
.filter(Boolean)
.map((r) => {
const isHead = r.startsWith('HEAD ->');
const label = isHead ? r.replace('HEAD -> ', '') : r.replace('tag: ', '');
return {
label,
isHead,
isTag: r.startsWith('tag: '),
};
});
}
export const HistoryCommitRow = React.memo(({
entry,
mode = 'history',
laned,
totalLanes,
isExpanded,
onToggle,
files,
isLoadingFiles,
onCopyHash,
directory,
onConflict,
onActionSuccess,
}: HistoryCommitRowProps) => {
const { t } = useI18n();
const isGraphMode = mode === 'graph';
type PendingAction =
| 'checkout' | 'cherryPick' | 'revert'
| 'merge' | 'rebase'
| 'resetSoft' | 'resetMixed' | 'resetHard';
const [actionLoading, setActionLoading] = React.useState<string | null>(null);
const [showCreateBranch, setShowCreateBranch] = React.useState(false);
const [newBranchName, setNewBranchName] = React.useState('');
const [pendingAction, setPendingAction] = React.useState<PendingAction | null>(null);
const [openDiffPaths, setOpenDiffPaths] = React.useState<Set<string>>(new Set());
const [diffCache, setDiffCache] = React.useState<Map<string, HistoryDiffCacheValue>>(new Map());
const [forceRenderLargePaths, setForceRenderLargePaths] = React.useState<Set<string>>(new Set());
const handleCheckout = async () => {
if (!directory) return;
setActionLoading('checkout');
try {
await git.checkoutCommit(directory, entry.hash);
toast.success(t('gitView.history.actions.detachedHead'));
onActionSuccess?.();
} catch (e: unknown) {
toast.error(String((e as Error).message));
} finally {
setActionLoading(null);
}
};
const handleCreateBranch = async () => {
if (!directory || !newBranchName.trim()) return;
setActionLoading('createBranch');
try {
await git.createBranch(directory, newBranchName.trim(), entry.hash);
setShowCreateBranch(false);
setNewBranchName('');
onActionSuccess?.();
} catch (e: unknown) {
toast.error(String((e as Error).message));
} finally {
setActionLoading(null);
}
};
const handleCherryPick = async () => {
if (!directory) return;
setActionLoading('cherryPick');
try {
const result = await git.cherryPick(directory, entry.hash);
if (result.conflict) {
onConflict?.({ conflict: true, conflictFiles: result.conflictFiles, operation: 'cherry-pick' });
} else {
onActionSuccess?.();
}
} catch (e: unknown) {
toast.error(String((e as Error).message));
} finally {
setActionLoading(null);
}
};
const handleRevert = async () => {
if (!directory) return;
setActionLoading('revert');
try {
const result = await git.revertCommit(directory, entry.hash);
if (result.conflict) {
onConflict?.({ conflict: true, conflictFiles: result.conflictFiles, operation: 'revert' });
} else {
onActionSuccess?.();
}
} catch (e: unknown) {
toast.error(String((e as Error).message));
} finally {
setActionLoading(null);
}
};
const handleReset = async (mode: 'soft' | 'mixed' | 'hard', force = false) => {
if (!directory || actionLoading !== null) return;
setActionLoading('reset');
try {
await git.resetToCommit(directory, entry.hash, mode, force);
onActionSuccess?.();
} catch (e: unknown) {
toast.error(String((e as Error).message));
} finally {
setActionLoading(null);
}
};
// Single confirm handler dispatches to the right action based on pendingAction
const confirmPendingAction = async () => {
if (!pendingAction) return;
const action = pendingAction;
setPendingAction(null);
switch (action) {
case 'checkout': return handleCheckout();
case 'cherryPick': return handleCherryPick();
case 'revert': return handleRevert();
case 'merge': return handleMerge();
case 'rebase': return handleRebase();
case 'resetSoft': return handleReset('soft');
case 'resetMixed': return handleReset('mixed');
case 'resetHard': return handleReset('hard', true); // force=true: user already confirmed
}
};
const handleMerge = async () => {
if (!directory) return;
setActionLoading('merge');
try {
const result = await git.merge(directory, { branch: entry.hash });
if (result.conflict) {
onConflict?.({ conflict: true, conflictFiles: result.conflictFiles, operation: 'merge' });
} else {
onActionSuccess?.();
}
} catch (e: unknown) {
toast.error(String((e as Error).message));
} finally {
setActionLoading(null);
}
};
const handleRebase = async () => {
if (!directory) return;
setActionLoading('rebase');
try {
const result = await git.rebase(directory, { onto: entry.hash });
if (result.conflict) {
onConflict?.({ conflict: true, conflictFiles: result.conflictFiles, operation: 'rebase' });
} else {
onActionSuccess?.();
}
} catch (e: unknown) {
toast.error(String((e as Error).message));
} finally {
setActionLoading(null);
}
};
const loadFileDiff = React.useCallback(async (file: CommitFileEntry) => {
const key = file.path;
if (!directory) {
@@ -169,15 +349,45 @@ export const HistoryCommitRow = React.memo(({
onClick={onToggle}
className={cn(
'w-full flex items-start gap-3 px-3 py-2 text-left transition-colors',
isExpanded ? 'bg-sidebar/90' : 'hover:bg-sidebar/40'
isGraphMode
? 'hover:bg-[var(--interactive-hover)]/40'
: isExpanded ? 'bg-sidebar/90' : 'hover:bg-sidebar/40'
)}
>
<div
className="h-2 w-2 translate-y-2 rounded-full shrink-0"
style={{ backgroundColor: 'var(--status-success)' }}
aria-hidden
/>
{isGraphMode && laned && totalLanes !== undefined ? (
<div className="-my-2 shrink-0 self-stretch">
<GitGraphSegment laned={laned} totalLanes={totalLanes} isExpanded={isExpanded} />
</div>
) : (
<div
className="h-2 w-2 translate-y-2 rounded-full shrink-0"
style={{ backgroundColor: 'var(--status-success)' }}
aria-hidden
/>
)}
<div className="min-w-0 flex-1">
{/* Ref badges */}
{isGraphMode ? (() => {
const badges = parseRefBadges(entry.refs);
return badges.length > 0 ? (
<div className="flex flex-wrap gap-1 mb-0.5">
{badges.map((badge) => (
<span key={badge.label}
className={cn(
'inline-flex items-center px-1.5 py-0 typography-micro rounded font-medium',
badge.isHead
? 'bg-[var(--chart-1)] text-[var(--primary-foreground)]'
: badge.isTag
? 'bg-[var(--chart-5)] text-[var(--primary-foreground)]'
: 'bg-[var(--interactive-hover)] text-[var(--foreground)]'
)}>
{badge.label}
</span>
))}
</div>
) : null;
})() : null}
<p className="typography-ui-label font-medium text-foreground line-clamp-1">
{entry.message}
</p>
@@ -217,6 +427,132 @@ export const HistoryCommitRow = React.memo(({
{isExpanded && (
<div className="px-3 pb-2 pl-8 border-t border-border/40">
{/* Action buttons */}
{isGraphMode && pendingAction ? (
/* Confirmation banner — replaces the button row while an action is pending */
<div className="flex items-center gap-2 py-2 border-b border-border/30 mb-2">
<span className="typography-micro text-muted-foreground flex-1 min-w-0">
{t(`gitView.history.actions.${pendingAction}Confirm` as never)}
</span>
<Button
variant="destructive" size="xs" className="h-6 shrink-0"
disabled={actionLoading !== null}
onClick={(e) => { e.stopPropagation(); void confirmPendingAction(); }}
>
{actionLoading !== null
? <Icon name="loader-4" className="size-3 animate-spin mr-1" />
: null}
{t('gitView.history.actions.confirmButton')}
</Button>
<Button
variant="ghost" size="xs" className="h-6 shrink-0"
disabled={actionLoading !== null}
onClick={(e) => { e.stopPropagation(); setPendingAction(null); }}
>
{t('gitView.history.actions.cancelButton')}
</Button>
</div>
) : isGraphMode ? (
<div className="flex flex-wrap items-center gap-1.5 py-2 border-b border-border/30 mb-2">
<Button variant="outline" size="xs" className="h-6"
disabled={actionLoading !== null}
onClick={(e) => { e.stopPropagation(); setPendingAction('checkout'); }}
>
{t('gitView.history.actions.checkout')}
</Button>
{showCreateBranch ? (
<div className="flex items-center gap-1">
<input
autoFocus value={newBranchName}
onChange={(e) => setNewBranchName(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') void handleCreateBranch();
if (e.key === 'Escape') { setShowCreateBranch(false); setNewBranchName(''); }
}}
placeholder={t('gitView.history.actions.createBranchPlaceholder')}
className="h-6 text-xs px-2 rounded border border-border/60 bg-background min-w-0 w-32"
/>
<Button variant="outline" size="xs" className="h-6"
disabled={!newBranchName.trim() || actionLoading !== null}
onClick={(e) => { e.stopPropagation(); void handleCreateBranch(); }}
>
{actionLoading === 'createBranch'
? <Icon name="loader-4" className="size-3 animate-spin mr-1" />
: null}
{t('gitView.history.actions.createBranchConfirm')}
</Button>
</div>
) : (
<Button variant="outline" size="xs" className="h-6"
onClick={(e) => { e.stopPropagation(); setShowCreateBranch(true); }}
>
{t('gitView.history.actions.createBranch')}
</Button>
)}
<Button variant="outline" size="xs" className="h-6"
disabled={actionLoading !== null}
onClick={(e) => { e.stopPropagation(); setPendingAction('cherryPick'); }}
>
{t('gitView.history.actions.cherryPick')}
</Button>
<Button variant="outline" size="xs" className="h-6"
disabled={actionLoading !== null}
onClick={(e) => { e.stopPropagation(); setPendingAction('revert'); }}
>
{t('gitView.history.actions.revert')}
</Button>
{/* Reset: dropdown first to pick mode, then confirmation banner */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
size="xs"
className="h-6"
disabled={actionLoading !== null}
onClick={(e) => e.stopPropagation()}
>
{actionLoading === 'reset'
? <Icon name="loader-4" className="size-3 animate-spin mr-1" />
: null}
{t('gitView.history.actions.reset')}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="min-w-max">
{(['soft', 'mixed', 'hard'] as const).map((mode) => (
<DropdownMenuItem
key={mode}
disabled={actionLoading !== null}
onSelect={(e) => {
e.stopPropagation();
setPendingAction(`reset${mode.charAt(0).toUpperCase() + mode.slice(1)}` as PendingAction);
}}
>
{t(`gitView.history.actions.reset${mode.charAt(0).toUpperCase() + mode.slice(1)}` as never)}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
<Button variant="outline" size="xs" className="h-6"
disabled={actionLoading !== null}
onClick={(e) => { e.stopPropagation(); setPendingAction('merge'); }}
>
{t('gitView.history.actions.merge')}
</Button>
<Button variant="outline" size="xs" className="h-6"
disabled={actionLoading !== null}
onClick={(e) => { e.stopPropagation(); setPendingAction('rebase'); }}
>
{t('gitView.history.actions.rebase')}
</Button>
</div>
) : null}
{isLoadingFiles ? (
<div className="flex items-center gap-2 py-2">
<Icon name="loader-4" className="size-4 animate-spin text-muted-foreground" />