feat(git): show current branch boundary in commit history (#682)

* feat(git): show current branch boundary in commit history

* style(git): round commit cards around branch divider

* style(git): refine branch divider visual boundary

packages/ui/src/components/views/git/HistoryCommitRow.tsx

@@ -12,6 +12,8 @@ interface HistoryCommitRowProps {
   files: CommitFileEntry[];
   isLoadingFiles: boolean;
   onCopyHash: (hash: string) => void;
+  roundTop?: boolean;
+  roundBottom?: boolean;
 }
 
 function formatCommitDate(date: string) {
@@ -52,6 +54,8 @@ export const HistoryCommitRow: React.FC<HistoryCommitRowProps> = ({
   files,
   isLoadingFiles,
   onCopyHash,
+  roundTop = false,
+  roundBottom = false,
 }) => {
   return (
     <li>
@@ -60,6 +64,8 @@ export const HistoryCommitRow: React.FC<HistoryCommitRowProps> = ({
         onClick={onToggle}
         className={cn(
           'w-full flex items-start gap-3 px-3 py-2 text-left transition-colors',
+          roundTop && 'rounded-t-lg',
+          roundBottom && !isExpanded && 'rounded-b-lg',
           isExpanded ? 'bg-sidebar/90' : 'hover:bg-sidebar/40'
         )}
       >
@@ -107,7 +113,7 @@ export const HistoryCommitRow: React.FC<HistoryCommitRowProps> = ({
       </button>
 
       {isExpanded && (
-        <div className="px-3 pb-2 pl-8 border-t border-border/40">
+        <div className={cn('px-3 pb-2 pl-8 border-t border-border/40', roundBottom && 'rounded-b-lg')}>
           {isLoadingFiles ? (
             <div className="flex items-center gap-2 py-2">
               <RiLoader4Line className="size-4 animate-spin text-muted-foreground" />

packages/ui/src/components/views/git/HistorySection.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RiArrowUpSLine, RiArrowDownSLine } from '@remixicon/react';
+import { RiArrowDownSLine, RiArrowUpLine, RiArrowUpSLine } from '@remixicon/react';
 import {
   Collapsible,
   CollapsibleContent,
@@ -33,6 +33,11 @@ interface HistorySectionProps {
   loadingCommitHashes: Set<string>;
   onCopyHash: (hash: string) => void;
   showHeader?: boolean;
+  branchDivider?: {
+    insertBeforeIndex: number;
+    branchName: string;
+    direction: 'up' | 'down';
+  } | null;
 }
 
 export const HistorySection: React.FC<HistorySectionProps> = ({
@@ -46,6 +51,7 @@ export const HistorySection: React.FC<HistorySectionProps> = ({
   loadingCommitHashes,
   onCopyHash,
   showHeader = true,
+  branchDivider = null,
 }) => {
   const [isOpen, setIsOpen] = React.useState(true);
 
@@ -53,6 +59,11 @@ export const HistorySection: React.FC<HistorySectionProps> = ({
     return null;
   }
 
+  const hasDivider =
+    branchDivider !== null &&
+    branchDivider.insertBeforeIndex > 0 &&
+    branchDivider.insertBeforeIndex < log.all.length;
+
   const content = (
     <ScrollableOverlay outerClassName="min-h-0 max-h-[50vh]" className="w-full">
       {log.all.length === 0 ? (
@@ -63,17 +74,42 @@ export const HistorySection: React.FC<HistorySectionProps> = ({
         </div>
       ) : (
         <ul className="divide-y divide-border/60">
-          {log.all.map((entry) => (
-            <HistoryCommitRow
-              key={entry.hash}
-              entry={entry}
-              isExpanded={expandedCommitHashes.has(entry.hash)}
-              onToggle={() => onToggleCommit(entry.hash)}
-              files={commitFilesMap.get(entry.hash) ?? []}
-              isLoadingFiles={loadingCommitHashes.has(entry.hash)}
-              onCopyHash={onCopyHash}
-            />
-          ))}
+          {log.all.map((entry, index) => {
+            const isBoundary = hasDivider && index === branchDivider.insertBeforeIndex;
+            const roundTop = isBoundary;
+            const roundBottom = hasDivider && index === branchDivider.insertBeforeIndex - 1;
+
+            return (
+              <React.Fragment key={entry.hash}>
+                {isBoundary ? (
+                  <li className="px-3 py-2" aria-hidden>
+                    <div className="flex items-center gap-2">
+                      <span className="h-px flex-1 bg-border/60" />
+                      <span className="inline-flex max-w-[80%] items-center gap-1 typography-micro text-muted-foreground">
+                        <span className="truncate" title={branchDivider.branchName}>{branchDivider.branchName}</span>
+                        {branchDivider.direction === 'down' ? (
+                          <RiArrowDownSLine className="size-3.5" />
+                        ) : (
+                          <RiArrowUpLine className="size-3.5" />
+                        )}
+                      </span>
+                      <span className="h-px flex-1 bg-border/60" />
+                    </div>
+                  </li>
+                ) : null}
+                <HistoryCommitRow
+                  entry={entry}
+                  isExpanded={expandedCommitHashes.has(entry.hash)}
+                  onToggle={() => onToggleCommit(entry.hash)}
+                  files={commitFilesMap.get(entry.hash) ?? []}
+                  isLoadingFiles={loadingCommitHashes.has(entry.hash)}
+                  onCopyHash={onCopyHash}
+                  roundTop={roundTop}
+                  roundBottom={roundBottom}
+                />
+              </React.Fragment>
+            );
+          })}
         </ul>
       )}
     </ScrollableOverlay>