From ac3d2d6cec5cec2ad6f531670f4ee3b1aefb8ae1 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Fri, 12 Dec 2025 12:38:49 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20fix:=20improve=20review=20UI=20v?=
 =?UTF-8?q?isual=20hierarchy=20and=20add=20action=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix section header styling in ReviewsBanner (remove font-medium/uppercase)
- Add complete/detach/trash buttons to attached reviews in ChatInput
- Trash button separated with margin as destructive action
- Add onCheckReview and onDeleteReview callbacks to ChatInput types

_Generated with mux_
---
 src/browser/components/AIView.tsx             |  2 +
 src/browser/components/ChatInput/index.tsx    |  8 ++-
 src/browser/components/ChatInput/types.ts     |  6 +-
 src/browser/components/ReviewsBanner.tsx      |  8 +--
 src/browser/components/shared/ReviewBlock.tsx | 65 +++++++++++++++----
 5 files changed, 67 insertions(+), 22 deletions(-)

diff --git a/src/browser/components/AIView.tsx b/src/browser/components/AIView.tsx
index cede3ad6a1..728c77ad82 100644
--- a/src/browser/components/AIView.tsx
+++ b/src/browser/components/AIView.tsx
@@ -749,7 +749,9 @@ const AIViewInner: React.FC<AIViewProps> = ({
           attachedReviews={reviews.attachedReviews}
           onDetachReview={reviews.detachReview}
           onDetachAllReviews={reviews.detachAllAttached}
+          onCheckReview={reviews.checkReview}
           onCheckReviews={handleCheckReviews}
+          onDeleteReview={reviews.removeReview}
           onUpdateReviewNote={reviews.updateReviewNote}
         />
       </div>
diff --git a/src/browser/components/ChatInput/index.tsx b/src/browser/components/ChatInput/index.tsx
index 77505b7ab5..67ae836050 100644
--- a/src/browser/components/ChatInput/index.tsx
+++ b/src/browser/components/ChatInput/index.tsx
@@ -1420,9 +1420,15 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
                 <ReviewBlockFromData
                   key={review.id}
                   data={review.data}
-                  onRemove={
+                  onComplete={
+                    props.onCheckReview ? () => props.onCheckReview!(review.id) : undefined
+                  }
+                  onDetach={
                     props.onDetachReview ? () => props.onDetachReview!(review.id) : undefined
                   }
+                  onDelete={
+                    props.onDeleteReview ? () => props.onDeleteReview!(review.id) : undefined
+                  }
                   onEditComment={
                     props.onUpdateReviewNote
                       ? (newNote) => props.onUpdateReviewNote!(review.id, newNote)
diff --git a/src/browser/components/ChatInput/types.ts b/src/browser/components/ChatInput/types.ts
index 00d48fc403..ca21c0cc9b 100644
--- a/src/browser/components/ChatInput/types.ts
+++ b/src/browser/components/ChatInput/types.ts
@@ -36,8 +36,12 @@ export interface ChatInputWorkspaceVariant {
   onDetachReview?: (reviewId: string) => void;
   /** Detach all attached reviews from chat input */
   onDetachAllReviews?: () => void;
-  /** Mark reviews as checked after sending */
+  /** Mark a single review as checked (completed) */
+  onCheckReview?: (reviewId: string) => void;
+  /** Mark multiple reviews as checked after sending */
   onCheckReviews?: (reviewIds: string[]) => void;
+  /** Permanently delete a review */
+  onDeleteReview?: (reviewId: string) => void;
   /** Update a review's comment/note */
   onUpdateReviewNote?: (reviewId: string, newNote: string) => void;
 }
diff --git a/src/browser/components/ReviewsBanner.tsx b/src/browser/components/ReviewsBanner.tsx
index 8e65953a3d..71ae9f0c74 100644
--- a/src/browser/components/ReviewsBanner.tsx
+++ b/src/browser/components/ReviewsBanner.tsx
@@ -407,9 +407,7 @@ const ReviewsBannerInner: React.FC<ReviewsBannerInnerProps> = ({ workspaceId })
           {pendingList.length > 0 && (
             <div className="space-y-1.5">
               <div className="flex items-center justify-between">
-                <div className="text-muted text-[10px] font-medium tracking-wide uppercase">
-                  Pending ({pendingList.length})
-                </div>
+                <div className="text-muted text-[10px]">Pending ({pendingList.length})</div>
                 {pendingList.length > 1 && (
                   <button
                     type="button"
@@ -439,9 +437,7 @@ const ReviewsBannerInner: React.FC<ReviewsBannerInnerProps> = ({ workspaceId })
           {completedList.length > 0 && (
             <div className="space-y-1.5">
               <div className="flex items-center justify-between">
-                <div className="text-muted text-[10px] font-medium tracking-wide uppercase">
-                  Completed ({completedList.length})
-                </div>
+                <div className="text-muted text-[10px]">Completed ({completedList.length})</div>
                 {completedList.length > 0 && (
                   <button
                     type="button"
diff --git a/src/browser/components/shared/ReviewBlock.tsx b/src/browser/components/shared/ReviewBlock.tsx
index 12d6a3cc37..278ad08184 100644
--- a/src/browser/components/shared/ReviewBlock.tsx
+++ b/src/browser/components/shared/ReviewBlock.tsx
@@ -7,7 +7,7 @@
  */
 
 import React, { useState, useCallback, useRef, useMemo } from "react";
-import { MessageSquare, X, Pencil, Check } from "lucide-react";
+import { MessageSquare, X, Pencil, Check, Trash2 } from "lucide-react";
 import { DiffRenderer } from "./DiffRenderer";
 import { Button } from "../ui/button";
 import { matchesKeybind, formatKeybind, KEYBINDS } from "@/browser/utils/ui/keybinds";
@@ -22,7 +22,12 @@ interface ReviewBlockCoreProps {
   lineRange: string;
   code: string;
   comment: string;
-  onRemove?: () => void;
+  /** Detach from chat (sets status back to pending) */
+  onDetach?: () => void;
+  /** Mark as complete (checked) */
+  onComplete?: () => void;
+  /** Permanently delete the review */
+  onDelete?: () => void;
   onEditComment?: (newComment: string) => void;
 }
 
@@ -34,7 +39,9 @@ const ReviewBlockCore: React.FC<ReviewBlockCoreProps> = ({
   lineRange,
   code,
   comment,
-  onRemove,
+  onDetach,
+  onComplete,
+  onDelete,
   onEditComment,
 }) => {
   const [isEditing, setIsEditing] = useState(false);
@@ -83,20 +90,42 @@ const ReviewBlockCore: React.FC<ReviewBlockCoreProps> = ({
 
   return (
     <div className="min-w-0 overflow-hidden rounded border border-[var(--color-review-accent)]/30 bg-[var(--color-review-accent)]/5">
-      {/* Header */}
-      <div className="flex items-center gap-1.5 border-b border-[var(--color-review-accent)]/20 bg-[var(--color-review-accent)]/10 px-2 py-1 text-xs">
+      {/* Header - actions left of file path (consistent with ReviewsBanner), trash on right */}
+      <div className="flex items-center gap-1 border-b border-[var(--color-review-accent)]/20 bg-[var(--color-review-accent)]/10 px-2 py-1 text-xs">
+        {/* Safe actions on left: complete and detach */}
+        {onComplete && (
+          <button
+            type="button"
+            onClick={onComplete}
+            className="text-muted hover:text-success flex shrink-0 items-center justify-center rounded p-0.5 transition-colors"
+            title="Mark as done"
+          >
+            <Check className="size-3" />
+          </button>
+        )}
+        {onDetach && (
+          <button
+            type="button"
+            onClick={onDetach}
+            className="text-muted hover:text-secondary flex shrink-0 items-center justify-center rounded p-0.5 transition-colors"
+            title="Detach from message"
+          >
+            <X className="size-3" />
+          </button>
+        )}
         <MessageSquare className="size-3 shrink-0 text-[var(--color-review-accent)]" />
         <span className="text-primary min-w-0 flex-1 truncate font-mono">
           {filePath}:{lineRange}
         </span>
-        {onRemove && (
+        {/* Destructive action on right */}
+        {onDelete && (
           <button
             type="button"
-            onClick={onRemove}
-            className="text-muted hover:text-error -mr-0.5 flex shrink-0 items-center justify-center rounded p-0.5 transition-colors"
-            title="Remove from message"
+            onClick={onDelete}
+            className="text-muted hover:text-error flex shrink-0 items-center justify-center rounded p-0.5 transition-colors"
+            title="Delete review"
           >
-            <X className="size-3" />
+            <Trash2 className="size-3" />
           </button>
         )}
       </div>
@@ -183,8 +212,12 @@ const ReviewBlockCore: React.FC<ReviewBlockCoreProps> = ({
 interface ReviewBlockFromDataProps {
   /** Structured review data (no parsing needed) */
   data: ReviewNoteDataForDisplay;
-  /** Optional callback to remove the review */
-  onRemove?: () => void;
+  /** Detach from chat (sets status back to pending) */
+  onDetach?: () => void;
+  /** Mark as complete (checked) */
+  onComplete?: () => void;
+  /** Permanently delete the review */
+  onDelete?: () => void;
   /** Optional callback to edit the comment */
   onEditComment?: (newComment: string) => void;
 }
@@ -195,7 +228,9 @@ interface ReviewBlockFromDataProps {
  */
 export const ReviewBlockFromData: React.FC<ReviewBlockFromDataProps> = ({
   data,
-  onRemove,
+  onDetach,
+  onComplete,
+  onDelete,
   onEditComment,
 }) => {
   return (
@@ -204,7 +239,9 @@ export const ReviewBlockFromData: React.FC<ReviewBlockFromDataProps> = ({
       lineRange={data.lineRange}
       code={data.selectedCode}
       comment={data.userNote}
-      onRemove={onRemove}
+      onDetach={onDetach}
+      onComplete={onComplete}
+      onDelete={onDelete}
       onEditComment={onEditComment}
     />
   );