feat: VS Code-style inline diff approval toolbar

BunsDev · BunsDev · commit 88fd2adb71cc · 2026-03-10T03:03:02.000-05:00
- Floating bottom toolbar with hunk navigation (← 1/8 →)
- Undo All (⌘⌫) / Keep All (⌘⏎) bulk actions
- Per-hunk 'Undo ⌘N' / 'Keep ⌘Y' inline buttons
- Keyboard shortcuts: ⌘Y/⌘N/J/K/⌘⏎/⌘⌫
- Colored gutter indicators (green additions, red deletions)
- Current hunk highlighting with auto-scroll
- Auto-focus on mount for immediate keyboard control
diff --git a/components/diff-viewer.tsx b/components/diff-viewer.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useMemo, useState, useCallback } from 'react'
+import { useMemo, useState, useCallback, useEffect, useRef } from 'react'
 import { Icon } from '@iconify/react'
 
 interface DiffViewerProps {
@@ -104,6 +104,9 @@ export function DiffViewer({ filePath, original, modified, onApply, onReject }:
   const [acceptedHunks, setAcceptedHunks] = useState<Set<number>>(new Set())
   const [rejectedHunks, setRejectedHunks] = useState<Set<number>>(new Set())
   const [flashApply, setFlashApply] = useState(false)
+  const [currentHunkIndex, setCurrentHunkIndex] = useState(0)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const hunkRefs = useRef<Map<number, HTMLDivElement>>(new Map())
 
   const handleAcceptHunk = useCallback((hunkIdx: number) => {
     setAcceptedHunks((prev) => {
@@ -138,6 +141,107 @@ export function DiffViewer({ filePath, original, modified, onApply, onReject }:
     }, 400)
   }, [onApply])
 
+  const handleKeepAll = useCallback(() => {
+    setAcceptedHunks(new Set(hunks.map((_, idx) => idx)))
+    setRejectedHunks(new Set())
+  }, [hunks])
+
+  const handleUndoAll = useCallback(() => {
+    setAcceptedHunks(new Set())
+    setRejectedHunks(new Set(hunks.map((_, idx) => idx)))
+  }, [hunks])
+
+  const navigateHunk = useCallback(
+    (direction: 'prev' | 'next') => {
+      if (hunks.length === 0) return
+      const newIndex =
+        direction === 'prev'
+          ? currentHunkIndex > 0
+            ? currentHunkIndex - 1
+            : hunks.length - 1
+          : currentHunkIndex < hunks.length - 1
+            ? currentHunkIndex + 1
+            : 0
+      setCurrentHunkIndex(newIndex)
+
+      // Scroll to hunk
+      const hunkElement = hunkRefs.current.get(newIndex)
+      if (hunkElement) {
+        hunkElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      }
+    },
+    [currentHunkIndex, hunks.length]
+  )
+
+  const handleCurrentHunkAction = useCallback(
+    (action: 'accept' | 'reject') => {
+      if (hunks.length === 0) return
+      if (action === 'accept') {
+        handleAcceptHunk(currentHunkIndex)
+      } else {
+        handleRejectHunk(currentHunkIndex)
+      }
+    },
+    [currentHunkIndex, hunks.length, handleAcceptHunk, handleRejectHunk]
+  )
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0
+      const modKey = isMac ? e.metaKey : e.ctrlKey
+
+      // ⌘Y / Ctrl+Y - Keep current hunk
+      if (modKey && e.key.toLowerCase() === 'y') {
+        e.preventDefault()
+        handleCurrentHunkAction('accept')
+      }
+      // ⌘N / Ctrl+N - Undo current hunk
+      else if (modKey && e.key.toLowerCase() === 'n') {
+        e.preventDefault()
+        handleCurrentHunkAction('reject')
+      }
+      // ⌘⏎ / Ctrl+Enter - Keep All
+      else if (modKey && e.key === 'Enter') {
+        e.preventDefault()
+        handleKeepAll()
+      }
+      // ⌘⌫ / Ctrl+Backspace - Undo All
+      else if (modKey && e.key === 'Backspace') {
+        e.preventDefault()
+        handleUndoAll()
+      }
+      // ↑/↓ or J/K - Navigate hunks
+      else if (e.key === 'ArrowUp' || e.key.toLowerCase() === 'k') {
+        e.preventDefault()
+        navigateHunk('prev')
+      } else if (e.key === 'ArrowDown' || e.key.toLowerCase() === 'j') {
+        e.preventDefault()
+        navigateHunk('next')
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [handleCurrentHunkAction, handleKeepAll, handleUndoAll, navigateHunk])
+
+  // Auto-scroll to first hunk on mount
+  useEffect(() => {
+    if (hunks.length > 0) {
+      const firstHunk = hunkRefs.current.get(0)
+      if (firstHunk) {
+        setTimeout(() => {
+          firstHunk.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        }, 100)
+      }
+    }
+  }, [hunks.length])
+
+  // Focus container on mount
+  useEffect(() => {
+    containerRef.current?.focus()
+  }, [])
+
   // Determine which hunk a line belongs to (if any)
   const lineHunkMap = useMemo(() => {
     const map = new Map<number, number>()
@@ -151,20 +255,22 @@ export function DiffViewer({ filePath, original, modified, onApply, onReject }:
 
   return (
     <div
-      className={`flex flex-col h-full border-t border-[var(--border)] bg-[var(--bg)] ${flashApply ? 'diff-apply-flash' : ''}`}
+      ref={containerRef}
+      tabIndex={0}
+      className={`flex flex-col h-full border-t border-[var(--border)] bg-[var(--bg)] outline-none ${flashApply ? 'diff-apply-flash' : ''}`}
     >
       {/* Header */}
       <div className="flex items-center justify-between px-3 py-2 border-b border-[var(--border)] bg-[var(--bg-elevated)] shrink-0">
         <div className="flex items-center gap-2 min-w-0">
-          <Icon icon="lucide:git-compare" width={14} height={14} className="text-[var(--brand)]" />
-          <span className="text-[11px] font-semibold text-[var(--text-primary)] truncate">
+          <Icon icon="lucide:git-compare" width={17} height={17} className="text-[var(--brand)]" />
+          <span className="text-[13px] font-semibold text-[var(--text-primary)] truncate">
             Agent proposed changes
           </span>
-          <span className="text-[10px] text-[var(--text-tertiary)] font-mono truncate">
+          <span className="text-[12px] text-[var(--text-tertiary)] font-mono truncate">
             {filePath}
           </span>
           {/* Changes summary badge */}
-          <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[9px] font-medium bg-[var(--bg-subtle)] border border-[var(--border)]">
+          <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[11px] font-medium bg-[var(--bg-subtle)] border border-[var(--border)]">
             <span className="text-[var(--color-additions)]">+{additions}</span>
             <span className="text-[var(--color-deletions)]">-{deletions}</span>
             <span className="text-[var(--text-disabled)]">
@@ -175,14 +281,14 @@ export function DiffViewer({ filePath, original, modified, onApply, onReject }:
         <div className="flex items-center gap-1.5 shrink-0">
           <button
             onClick={onReject}
-            className="flex items-center gap-1 px-2.5 py-1 rounded-md text-[11px] font-medium border border-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-subtle)] transition-colors cursor-pointer"
+            className="flex items-center gap-1 px-2.5 py-1 rounded-md text-[13px] font-medium border border-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-subtle)] transition-colors cursor-pointer"
           >
-            <Icon icon="lucide:x" width={12} height={12} />
+            <Icon icon="lucide:x" width={14} height={14} />
             Reject
           </button>
           <button
             onClick={handleApplyAll}
-            className="flex items-center gap-1 px-2.5 py-1 rounded-md text-[11px] font-medium transition-colors cursor-pointer"
+            className="flex items-center gap-1 px-2.5 py-1 rounded-md text-[13px] font-medium transition-colors cursor-pointer"
             style={{
               backgroundColor: 'color-mix(in srgb, var(--color-additions) 15%, transparent)',
               borderColor: 'color-mix(in srgb, var(--color-additions) 30%, transparent)',
@@ -191,14 +297,14 @@ export function DiffViewer({ filePath, original, modified, onApply, onReject }:
               borderStyle: 'solid',
             }}
           >
-            <Icon icon="lucide:check" width={12} height={12} />
+            <Icon icon="lucide:check" width={14} height={14} />
             Apply
           </button>
         </div>
       </div>
 
       {/* Diff lines */}
-      <div className="flex-1 overflow-auto font-mono text-[12px] leading-[20px]">
+      <div className="flex-1 overflow-auto font-mono text-[14px] leading-[24px]">
         {diff.map((line, lineIdx) => {
           const hunkIdx = lineHunkMap.get(lineIdx)
           const isHunkStart = hunkIdx !== undefined && hunks[hunkIdx]?.startIdx === lineIdx
@@ -209,32 +315,56 @@ export function DiffViewer({ filePath, original, modified, onApply, onReject }:
             <div key={lineIdx}>
               {/* Hunk separator with per-hunk actions */}
               {isHunkStart && hunkIdx !== undefined && (
-                <div className="hunk-separator flex items-center justify-between px-3 py-1">
-                  <span className="text-[9px] text-[var(--text-disabled)] font-mono">
+                <div
+                  ref={(el) => {
+                    if (el) hunkRefs.current.set(hunkIdx, el)
+                  }}
+                  className={`hunk-separator flex items-center justify-between px-3 py-2 border-l-2 ${
+                    currentHunkIndex === hunkIdx
+                      ? 'border-l-[var(--brand)] bg-[color-mix(in_srgb,var(--brand)_5%,transparent)]'
+                      : 'border-l-transparent'
+                  }`}
+                >
+                  <span className="text-[11px] text-[var(--text-disabled)] font-mono">
                     Hunk {hunkIdx + 1}: +{hunks[hunkIdx]!.additions} -{hunks[hunkIdx]!.deletions}
                   </span>
-                  <div className="flex items-center gap-1">
+                  <div className="flex items-center gap-1.5">
                     {isHunkAccepted ? (
-                      <span className="text-[9px] text-[var(--color-additions)] font-medium flex items-center gap-0.5">
-                        <Icon icon="lucide:check" width={10} height={10} /> Accepted
-                      </span>
+                      <button
+                        onClick={() => handleRejectHunk(hunkIdx)}
+                        className="text-[11px] text-[var(--color-additions)] font-medium flex items-center gap-1 px-2 py-1 rounded-md hover:bg-[var(--bg-subtle)] transition-colors"
+                      >
+                        <Icon icon="lucide:check" width={12} height={12} /> Accepted ✓
+                      </button>
                     ) : isHunkRejected ? (
-                      <span className="text-[9px] text-[var(--color-deletions)] font-medium flex items-center gap-0.5">
-                        <Icon icon="lucide:x" width={10} height={10} /> Rejected
-                      </span>
+                      <button
+                        onClick={() => handleAcceptHunk(hunkIdx)}
+                        className="text-[11px] text-[var(--color-deletions)] font-medium flex items-center gap-1 px-2 py-1 rounded-md hover:bg-[var(--bg-subtle)] transition-colors"
+                      >
+                        <Icon icon="lucide:x" width={12} height={12} /> Rejected ✗
+                      </button>
                     ) : (
                       <>
                         <button
-                          onClick={() => handleAcceptHunk(hunkIdx)}
-                          className="inline-diff-hunk-btn inline-diff-hunk-accept text-[9px] font-medium"
+                          onClick={() => handleRejectHunk(hunkIdx)}
+                          className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-medium border border-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-subtle)] transition-colors"
                         >
-                          Accept
+                          Undo
+                          <span className="text-[10px] text-[var(--text-disabled)]">⌘N</span>
                         </button>
                         <button
-                          onClick={() => handleRejectHunk(hunkIdx)}
-                          className="inline-diff-hunk-btn inline-diff-hunk-reject text-[9px] font-medium"
+                          onClick={() => handleAcceptHunk(hunkIdx)}
+                          className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-medium transition-colors"
+                          style={{
+                            backgroundColor: 'color-mix(in srgb, var(--color-additions) 15%, transparent)',
+                            borderColor: 'color-mix(in srgb, var(--color-additions) 30%, transparent)',
+                            color: 'var(--color-additions)',
+                            borderWidth: '1px',
+                            borderStyle: 'solid',
+                          }}
                         >
-                          Reject
+                          Keep
+                          <span className="text-[10px] opacity-70">⌘Y</span>
                         </button>
                       </>
                     )}
@@ -244,7 +374,7 @@ export function DiffViewer({ filePath, original, modified, onApply, onReject }:
 
               {/* Diff line */}
               <div
-                className={`flex ${
+                className={`flex relative ${
                   isHunkRejected
                     ? 'opacity-30'
                     : line.type === 'added'
@@ -254,9 +384,19 @@ export function DiffViewer({ filePath, original, modified, onApply, onReject }:
                         : ''
                 }`}
               >
+                {/* Gutter indicator */}
+                {line.type !== 'unchanged' && (
+                  <div
+                    className="absolute left-0 top-0 bottom-0 w-[3px]"
+                    style={{
+                      backgroundColor:
+                        line.type === 'added' ? 'var(--color-additions)' : 'var(--color-deletions)',
+                    }}
+                  />
+                )}
                 {/* Old line number */}
                 <span
-                  className="w-10 shrink-0 text-right pr-2 select-none text-[var(--text-tertiary)]"
+                  className="w-10 shrink-0 text-right pr-2 select-none text-[var(--text-tertiary)] pl-[3px]"
                   style={{ opacity: line.type === 'added' ? 0.3 : 1 }}
                 >
                   {line.oldLine ?? ''}
@@ -297,6 +437,60 @@ export function DiffViewer({ filePath, original, modified, onApply, onReject }:
           )
         })}
       </div>
+
+      {/* Floating Bottom Toolbar */}
+      {hunks.length > 0 && (
+        <div className="flex items-center justify-between px-4 py-2.5 border-t border-[var(--border)] bg-[var(--bg-elevated)] shrink-0">
+          {/* Left: Hunk Navigation */}
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => navigateHunk('prev')}
+              className="inline-flex items-center justify-center w-7 h-7 rounded-full border border-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-subtle)] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+              disabled={hunks.length <= 1}
+            >
+              <Icon icon="lucide:chevron-left" width={14} height={14} />
+            </button>
+            <span className="text-[12px] font-medium text-[var(--text-secondary)] font-mono min-w-[60px] text-center">
+              {currentHunkIndex + 1} / {hunks.length}
+            </span>
+            <button
+              onClick={() => navigateHunk('next')}
+              className="inline-flex items-center justify-center w-7 h-7 rounded-full border border-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-subtle)] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+              disabled={hunks.length <= 1}
+            >
+              <Icon icon="lucide:chevron-right" width={14} height={14} />
+            </button>
+          </div>
+
+          {/* Center: Main Actions */}
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleUndoAll}
+              className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-[12px] font-medium border border-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-subtle)] transition-colors"
+            >
+              Undo All
+              <span className="text-[10px] text-[var(--text-disabled)]">⌘⌫</span>
+            </button>
+            <button
+              onClick={handleKeepAll}
+              className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-[12px] font-medium transition-colors"
+              style={{
+                backgroundColor: 'color-mix(in srgb, var(--color-additions) 20%, transparent)',
+                borderColor: 'color-mix(in srgb, var(--color-additions) 40%, transparent)',
+                color: 'var(--color-additions)',
+                borderWidth: '1px',
+                borderStyle: 'solid',
+              }}
+            >
+              Keep All
+              <span className="text-[10px] opacity-70">⌘⏎</span>
+            </button>
+          </div>
+
+          {/* Right: Spacer for balance */}
+          <div className="w-[120px]" />
+        </div>
+      )}
     </div>
   )
 }
