feat: add review keyboard shortcuts

Author: haasonsaas

TODO.md

@@ -90,7 +90,7 @@ This roadmap is derived from deep research into Greptile's public docs, blog, MC
 51. [x] Add visible accepted/rejected/dismissed badges to comments throughout the UI, not just icon state.
 52. [x] Add comment grouping by unresolved, fixed, stale, and informational sections in `ReviewView`.
 53. [x] Add a "show only blockers" mode for large reviews.
-54. [ ] Add keyboard actions for thumbs, resolve, and jump-to-next-finding workflows.
+54. [x] Add keyboard actions for thumbs, resolve, and jump-to-next-finding workflows.
 55. [x] Add file-level readiness summaries in the diff sidebar.
 56. [x] Add lifecycle-aware PR summaries that explain what still blocks merge.
 57. [x] Add a "train the reviewer" callout when thumbs coverage on a review is low.
@@ -176,4 +176,5 @@ This roadmap is derived from deep research into Greptile's public docs, blog, MC
 - [x] Add a PR re-review API that reuses stored review metadata and posting policy.
 - [x] Add pattern repository resolution coverage for repo-local directories, Git sources, and broken-source skips.
 - [x] Group ReviewView list-mode findings into unresolved, fixed, stale, and informational sections.
+- [x] Add ReviewView keyboard shortcuts for next-finding navigation plus accept/reject/resolve actions.
 - [ ] Commit and push each validated checkpoint before moving to the next epic.

web/src/components/CommentCard.tsx

@@ -32,9 +32,11 @@ interface Props {
   variant?: 'card' | 'inline'
   onFeedback?: (action: 'accept' | 'reject') => void
   onLifecycleChange?: (status: 'open' | 'resolved' | 'dismissed') => void
+  isActive?: boolean
+  onActivate?: () => void
 }
 
-export function CommentCard({ comment, variant = 'card', onFeedback, onLifecycleChange }: Props) {
+export function CommentCard({ comment, variant = 'card', onFeedback, onLifecycleChange, isActive = false, onActivate }: Props) {
   const [expanded, setExpanded] = useState(false)
   const [copied, setCopied] = useState(false)
   const accepted = comment.feedback === 'accept'
@@ -56,7 +58,14 @@ export function CommentCard({ comment, variant = 'card', onFeedback, onLifecycle
     : 'border border-border rounded-md bg-surface-2'
 
   return (
-    <div className={rootClass}>
+    <div
+      className={`${rootClass} ${isActive ? 'ring-1 ring-accent/50' : ''} focus:outline-none focus-visible:ring-1 focus-visible:ring-accent/50`}
+      data-review-comment-card="true"
+      data-comment-id={comment.id}
+      tabIndex={0}
+      onFocus={() => onActivate?.()}
+      onMouseDown={() => onActivate?.()}
+    >
       {/* Header */}
       <div className={`flex items-center gap-2 px-3 ${isInline ? 'py-1.5 border-b border-border-subtle' : 'py-2'}`}>
         <SeverityBadge severity={comment.severity} />

web/src/components/DiffViewer.tsx

@@ -11,6 +11,8 @@ interface Props {
   comments: Comment[]
   onFeedback?: (commentId: string, action: 'accept' | 'reject') => void
   onLifecycleChange?: (commentId: string, status: 'open' | 'resolved' | 'dismissed') => void
+  activeCommentId?: string | null
+  onActivateComment?: (commentId: string) => void
 }
 
 const statusIcon = {
@@ -27,7 +29,7 @@ const statusColor = {
   modified: 'text-text-secondary',
 }
 
-export function DiffViewer({ files, comments, onFeedback, onLifecycleChange }: Props) {
+export function DiffViewer({ files, comments, onFeedback, onLifecycleChange, activeCommentId = null, onActivateComment }: Props) {
   const [collapsedFiles, setCollapsedFiles] = useState<Set<string>>(new Set())
 
   const commentsByFile = useMemo(() => {
@@ -108,6 +110,8 @@ export function DiffViewer({ files, comments, onFeedback, onLifecycleChange }: P
                     commentsByLine={commentsByFile.get(file.path)}
                     onFeedback={onFeedback}
                     onLifecycleChange={onLifecycleChange}
+                    activeCommentId={activeCommentId}
+                    onActivateComment={onActivateComment}
                   />
                 ))}
                 {file.hunks.length === 0 && (
@@ -124,12 +128,14 @@ export function DiffViewer({ files, comments, onFeedback, onLifecycleChange }: P
   )
 }
 
-export function HunkView({ hunk, filePath, commentsByLine, onFeedback, onLifecycleChange }: {
+export function HunkView({ hunk, filePath, commentsByLine, onFeedback, onLifecycleChange, activeCommentId, onActivateComment }: {
   hunk: DiffHunk
   filePath: string
   commentsByLine?: Map<number, Comment[]>
   onFeedback?: (commentId: string, action: 'accept' | 'reject') => void
   onLifecycleChange?: (commentId: string, status: 'open' | 'resolved' | 'dismissed') => void
+  activeCommentId?: string | null
+  onActivateComment?: (commentId: string) => void
 }) {
   return (
     <div>
@@ -153,6 +159,8 @@ export function HunkView({ hunk, filePath, commentsByLine, onFeedback, onLifecyc
                 filePath={filePath}
                 onFeedback={onFeedback}
                 onLifecycleChange={onLifecycleChange}
+                activeCommentId={activeCommentId}
+                onActivateComment={onActivateComment}
               />
             )
           })}
@@ -162,12 +170,14 @@ export function HunkView({ hunk, filePath, commentsByLine, onFeedback, onLifecyc
   )
 }
 
-export function LineRow({ line, comments, filePath, onFeedback, onLifecycleChange }: {
+export function LineRow({ line, comments, filePath, onFeedback, onLifecycleChange, activeCommentId, onActivateComment }: {
   line: DiffLine
   comments?: Comment[]
   filePath: string
   onFeedback?: (commentId: string, action: 'accept' | 'reject') => void
   onLifecycleChange?: (commentId: string, status: 'open' | 'resolved' | 'dismissed') => void
+  activeCommentId?: string | null
+  onActivateComment?: (commentId: string) => void
 }) {
   const bgClass =
     line.type === 'add' ? 'bg-diff-add-bg' :
@@ -218,6 +228,8 @@ export function LineRow({ line, comments, filePath, onFeedback, onLifecycleChang
                 variant="inline"
                 onFeedback={onFeedback ? (action) => onFeedback(c.id, action) : undefined}
                 onLifecycleChange={onLifecycleChange ? (status) => onLifecycleChange(c.id, status) : undefined}
+                isActive={activeCommentId === c.id}
+                onActivate={onActivateComment ? () => onActivateComment(c.id) : undefined}
               />
             ))}
           </td>