feat: add visible comment feedback badges

Author: haasonsaas

TODO.md

@@ -87,7 +87,7 @@ This roadmap is derived from deep research into Greptile's public docs, blog, MC
 
 ## 6. Review UX and Workflow Integration
 
-51. [ ] Add visible accepted/rejected/dismissed badges to comments throughout the UI, not just icon state.
+51. [x] Add visible accepted/rejected/dismissed badges to comments throughout the UI, not just icon state.
 52. [ ] 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.
@@ -164,4 +164,5 @@ This roadmap is derived from deep research into Greptile's public docs, blog, MC
 - [x] Surface unresolved blocker counts in repo and PR GitHub discovery views.
 - [x] Add a blocker-only review mode that narrows large reviews to open Error and Warning findings.
 - [x] Add file-level readiness summaries to the review diff sidebar.
+- [x] Add visible feedback badges on comments so accepted and rejected states are not icon-only.
 - [ ] Commit and push each validated checkpoint before moving to the next epic.

web/src/components/CommentCard.tsx

@@ -16,6 +16,17 @@ const lifecycleBadge: Record<string, string> = {
   Dismissed: 'bg-text-muted/10 text-text-muted border border-border',
 }
 
+const feedbackBadge: Record<'accept' | 'reject', { label: string; className: string }> = {
+  accept: {
+    label: 'Accepted',
+    className: 'bg-sev-suggestion/10 text-sev-suggestion border border-sev-suggestion/20',
+  },
+  reject: {
+    label: 'Rejected',
+    className: 'bg-sev-error/10 text-sev-error border border-sev-error/20',
+  },
+}
+
 interface Props {
   comment: Comment
   variant?: 'card' | 'inline'
@@ -29,6 +40,7 @@ export function CommentCard({ comment, variant = 'card', onFeedback, onLifecycle
   const accepted = comment.feedback === 'accept'
   const rejected = comment.feedback === 'reject'
   const lifecycle = comment.status ?? 'Open'
+  const feedbackState = comment.feedback ? feedbackBadge[comment.feedback] : null
 
   const copyCode = () => {
     if (comment.code_suggestion?.suggested_code) {
@@ -55,6 +67,11 @@ export function CommentCard({ comment, variant = 'card', onFeedback, onLifecycle
         <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${lifecycleBadge[lifecycle] ?? lifecycleBadge.Open}`}>
           {lifecycle}
         </span>
+        {feedbackState && (
+          <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${feedbackState.className}`}>
+            {feedbackState.label}
+          </span>
+        )}
 
         <div className="ml-auto flex items-center gap-1">
           {comment.fix_effort && (

web/src/components/__tests__/CommentCard.test.tsx

@@ -57,6 +57,21 @@ describe('CommentCard', () => {
     expect(screen.getByText('High')).toBeInTheDocument()
   })
 
+  it('renders a visible accepted badge when feedback is positive', () => {
+    render(<CommentCard comment={makeComment({ feedback: 'accept' })} />)
+    expect(screen.getByText('Accepted')).toBeInTheDocument()
+  })
+
+  it('renders a visible rejected badge when feedback is negative', () => {
+    render(<CommentCard comment={makeComment({ feedback: 'reject' })} />)
+    expect(screen.getByText('Rejected')).toBeInTheDocument()
+  })
+
+  it('renders a visible dismissed badge from lifecycle state', () => {
+    render(<CommentCard comment={makeComment({ status: 'Dismissed' })} />)
+    expect(screen.getByText('Dismissed')).toBeInTheDocument()
+  })
+
   it('shows "Suggested fix" toggle when code_suggestion is present', () => {
     const comment = makeComment({
       code_suggestion: {