🤖 fix: improve pending reviews UX based on feedback

- Use draft construct for error recovery (no duplication)
- Hide attached reviews from banner to prevent double-send
- Move 'Send to chat' action left, away from delete
- Make 'Clear' button smaller (just text link)
- Grey chat icon when no pending reviews
- Reduce padding/margins in ReviewBlock for compact display
- Notify parent when attached reviews change

_Generated with mux_

Author: ammar-agent

src/browser/components/AIView.tsx

@@ -111,6 +111,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
 
   // Pending reviews state
   const pendingReviews = usePendingReviews(workspaceId);
+  const [attachedReviewIds, setAttachedReviewIds] = useState<string[]>([]);
   const { options } = useProviderOptions();
   const use1M = options.anthropic?.use1MContext ?? false;
   // Get pending model for auto-compaction settings (threshold is per-model)
@@ -616,7 +617,11 @@ const AIViewInner: React.FC<AIViewProps> = ({
             onCompactClick={handleCompactClick}
           />
         )}
-        <PendingReviewsBanner workspaceId={workspaceId} chatInputAPI={chatInputAPI} />
+        <PendingReviewsBanner
+          workspaceId={workspaceId}
+          chatInputAPI={chatInputAPI}
+          attachedReviewIds={attachedReviewIds}
+        />
         <ChatInput
           variant="workspace"
           workspaceId={workspaceId}
@@ -634,6 +639,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
           autoCompactionCheck={autoCompactionResult}
           getReview={pendingReviews.getReview}
           onReviewsSent={(ids) => ids.forEach((id) => pendingReviews.checkReview(id))}
+          onAttachedReviewsChange={setAttachedReviewIds}
         />
       </div>
 

src/browser/components/ChatInput/index.tsx

@@ -154,24 +154,26 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const modelSelectorRef = useRef<ModelSelectorRef>(null);
 
-  // Draft state combines text input and image attachments
-  // Use these helpers to avoid accidentally losing images when modifying text
+  // Draft state combines text input, image attachments, and attached reviews
+  // Use these helpers to avoid accidentally losing content when modifying text
   interface DraftState {
     text: string;
     images: ImageAttachment[];
+    reviewIds: string[];
   }
   const getDraft = useCallback(
-    (): DraftState => ({ text: input, images: imageAttachments }),
-    [input, imageAttachments]
+    (): DraftState => ({ text: input, images: imageAttachments, reviewIds: attachedReviewIds }),
+    [input, imageAttachments, attachedReviewIds]
   );
   const setDraft = useCallback(
     (draft: DraftState) => {
       setInput(draft.text);
       setImageAttachments(draft.images);
+      setAttachedReviewIds(draft.reviewIds);
     },
     [setInput]
   );
-  const preEditDraftRef = useRef<DraftState>({ text: "", images: [] });
+  const preEditDraftRef = useRef<DraftState>({ text: "", images: [], reviewIds: [] });
   const { open } = useSettings();
   const { selectedWorkspace } = useWorkspaceContext();
   const [mode, setMode] = useMode();
@@ -356,6 +358,13 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
   // Get currently attached reviews
   const getAttachedReviews = useCallback(() => attachedReviewIds, [attachedReviewIds]);
 
+  // Notify parent when attached reviews change (workspace variant only)
+  useEffect(() => {
+    if (variant === "workspace" && props.onAttachedReviewsChange) {
+      props.onAttachedReviewsChange(attachedReviewIds);
+    }
+  }, [variant, attachedReviewIds, props]);
+
   // Provide API to parent via callback
   useEffect(() => {
     if (props.onReady) {
@@ -411,7 +420,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
   useEffect(() => {
     if (editingMessage) {
       preEditDraftRef.current = getDraft();
-      setDraft({ text: editingMessage.content, images: [] });
+      setDraft({ text: editingMessage.content, images: [], reviewIds: [] });
       // Auto-resize textarea and focus
       setTimeout(() => {
         if (inputRef.current) {
@@ -968,8 +977,8 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
       }
       setIsSending(true);
 
-      // Save current state for restoration on error
-      const previousImageAttachments = [...imageAttachments];
+      // Save current draft state for restoration on error
+      const preSendDraft = getDraft();
 
       // Auto-compaction check (workspace variant only)
       // Check if we should auto-compact before sending this message
@@ -1002,8 +1011,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
 
           if (!result.success) {
             // Restore on error
-            setInput(messageText);
-            setImageAttachments(previousImageAttachments);
+            setDraft(preSendDraft);
             setToast({
               id: Date.now().toString(),
               type: "error",
@@ -1020,8 +1028,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
           }
         } catch (error) {
           // Restore on unexpected error
-          setInput(messageText);
-          setImageAttachments(previousImageAttachments);
+          setDraft(preSendDraft);
           setToast({
             id: Date.now().toString(),
             type: "error",
@@ -1036,9 +1043,6 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
         return; // Skip normal send
       }
 
-      // Store attached review IDs before try block so catch block can access them
-      const sentReviewIds = [...attachedReviewIds];
-
       try {
         // Prepare image parts if any
         const imageParts = imageAttachments.map((img, index) => {
@@ -1135,10 +1139,8 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
           console.error("Failed to send message:", result.error);
           // Show error using enhanced toast
           setToast(createErrorToast(result.error));
-          // Restore input, images, and attached reviews on error so user can try again
-          setInput(messageText);
-          setImageAttachments(previousImageAttachments);
-          setAttachedReviewIds(sentReviewIds);
+          // Restore draft on error so user can try again
+          setDraft(preSendDraft);
         } else {
           // Track telemetry for successful message send
           telemetry.messageSent(
@@ -1151,8 +1153,8 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
           );
 
           // Mark attached reviews as completed
-          if (sentReviewIds.length > 0) {
-            props.onReviewsSent?.(sentReviewIds);
+          if (preSendDraft.reviewIds.length > 0) {
+            props.onReviewsSent?.(preSendDraft.reviewIds);
           }
 
           // Exit editing mode if we were editing
@@ -1170,9 +1172,8 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
             raw: error instanceof Error ? error.message : "Failed to send message",
           })
         );
-        setInput(messageText);
-        setImageAttachments(previousImageAttachments);
-        setAttachedReviewIds(sentReviewIds);
+        // Restore draft on error
+        setDraft(preSendDraft);
       } finally {
         setIsSending(false);
       }
@@ -1354,7 +1355,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
 
           {/* Attached reviews preview - show styled blocks with remove buttons */}
           {variant === "workspace" && attachedReviewIds.length > 0 && props.getReview && (
-            <div className="border-border max-h-40 space-y-1 overflow-y-auto border-b px-2 py-1.5">
+            <div className="border-border max-h-36 space-y-0.5 overflow-y-auto border-b px-1.5 py-1">
               {attachedReviewIds.map((reviewId) => {
                 const review = props.getReview!(reviewId);
                 if (!review) return null;
@@ -1364,10 +1365,10 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
                     <button
                       type="button"
                       onClick={() => detachReview(reviewId)}
-                      className="bg-dark/80 text-muted hover:text-error absolute top-3 right-3 rounded-full p-0.5 opacity-0 transition-opacity group-hover:opacity-100"
+                      className="bg-dark/80 text-muted hover:text-error absolute top-1.5 right-1.5 rounded-full p-0.5 opacity-0 transition-opacity group-hover:opacity-100"
                       title="Remove from message"
                     >
-                      <X className="size-3.5" />
+                      <X className="size-3" />
                     </button>
                   </div>
                 );

src/browser/components/ChatInput/types.ts

@@ -38,6 +38,8 @@ export interface ChatInputWorkspaceVariant {
   autoCompactionCheck?: AutoCompactionCheckResult; // Computed in parent (AIView) to avoid duplicate calculation
   /** Called after reviews are sent in a message - allows parent to mark them as checked */
   onReviewsSent?: (reviewIds: string[]) => void;
+  /** Called when attached reviews change (for syncing with banner) */
+  onAttachedReviewsChange?: (reviewIds: string[]) => void;
   /** Get a pending review by ID (for resolving attached review IDs to data) */
   getReview?: (id: string) => PendingReview | undefined;
 }

src/browser/components/PendingReviewsBanner.tsx

@@ -24,7 +24,7 @@ import {
 } from "lucide-react";
 import { cn } from "@/common/lib/utils";
 import { Button } from "./ui/button";
-import { Tooltip, TooltipWrapper } from "./Tooltip";
+import { Tooltip, TooltipTrigger, TooltipContent } from "./ui/tooltip";
 import type { PendingReview } from "@/common/types/review";
 import { usePendingReviews } from "@/browser/hooks/usePendingReviews";
 import type { ChatInputAPI } from "./ChatInput";
@@ -176,17 +176,34 @@ const ReviewItem: React.FC<ReviewItemProps> = ({
         </button>
 
         {/* Check/Uncheck button */}
-        <TooltipWrapper inline>
-          <Button
-            variant="ghost"
-            size="icon"
-            className={cn("size-5 shrink-0 [&_svg]:size-3", isChecked && "text-success")}
-            onClick={isChecked ? onUncheck : onCheck}
-          >
-            {isChecked ? <Undo2 /> : <Check />}
-          </Button>
-          <Tooltip align="center">{isChecked ? "Mark as pending" : "Mark as done"}</Tooltip>
-        </TooltipWrapper>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className={cn("size-5 shrink-0 [&_svg]:size-3", isChecked && "text-success")}
+              onClick={isChecked ? onUncheck : onCheck}
+            >
+              {isChecked ? <Undo2 /> : <Check />}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{isChecked ? "Mark as pending" : "Mark as done"}</TooltipContent>
+        </Tooltip>
+
+        {/* Send to chat - near safe actions, away from delete */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100 [&_svg]:size-3"
+              onClick={onSendToChat}
+            >
+              <Send />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Send to chat</TooltipContent>
+        </Tooltip>
 
         {/* File path and age */}
         <button
@@ -200,32 +217,20 @@ const ReviewItem: React.FC<ReviewItemProps> = ({
           <span className="text-muted shrink-0 text-[10px]">{age}</span>
         </button>
 
-        {/* Actions */}
-        <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
-          <TooltipWrapper inline>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="size-5 [&_svg]:size-3"
-              onClick={onSendToChat}
-            >
-              <Send />
-            </Button>
-            <Tooltip align="center">Send to chat</Tooltip>
-          </TooltipWrapper>
-
-          <TooltipWrapper inline>
+        {/* Delete action - separate from safe actions */}
+        <Tooltip>
+          <TooltipTrigger asChild>
             <Button
               variant="ghost"
               size="icon"
-              className="text-error size-5 [&_svg]:size-3"
+              className="text-error size-5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100 [&_svg]:size-3"
               onClick={onRemove}
             >
               <Trash2 />
             </Button>
-            <Tooltip align="center">Remove</Tooltip>
-          </TooltipWrapper>
-        </div>
+          </TooltipTrigger>
+          <TooltipContent>Remove</TooltipContent>
+        </Tooltip>
       </div>
 
       {/* Expanded content */}
@@ -300,24 +305,33 @@ const ReviewItem: React.FC<ReviewItemProps> = ({
 interface PendingReviewsBannerInnerProps {
   workspaceId: string;
   chatInputAPI: React.RefObject<ChatInputAPI | null>;
+  attachedReviewIds: string[];
 }
 
 const PendingReviewsBannerInner: React.FC<PendingReviewsBannerInnerProps> = ({
   workspaceId,
   chatInputAPI,
+  attachedReviewIds,
 }) => {
   const pendingReviews = usePendingReviews(workspaceId);
   const [isExpanded, setIsExpanded] = useState(false);
   const [showAllCompleted, setShowAllCompleted] = useState(false);
 
   const INITIAL_COMPLETED_COUNT = 3;
 
-  // Separate pending and completed reviews
+  // Set of attached review IDs for quick lookup
+  const attachedSet = useMemo(() => new Set(attachedReviewIds), [attachedReviewIds]);
+
+  // Separate pending and completed reviews, excluding those already attached to chat
   const { pendingList, completedList } = useMemo(() => {
-    const pending = pendingReviews.reviews.filter((r) => r.status === "pending");
-    const completed = pendingReviews.reviews.filter((r) => r.status === "checked");
+    const pending = pendingReviews.reviews.filter(
+      (r) => r.status === "pending" && !attachedSet.has(r.id)
+    );
+    const completed = pendingReviews.reviews.filter(
+      (r) => r.status === "checked" && !attachedSet.has(r.id)
+    );
     return { pendingList: pending, completedList: completed };
-  }, [pendingReviews.reviews]);
+  }, [pendingReviews.reviews, attachedSet]);
 
   // Completed reviews to display (limited unless expanded)
   const displayedCompleted = useMemo(() => {
@@ -358,7 +372,12 @@ const PendingReviewsBannerInner: React.FC<PendingReviewsBannerInnerProps> = ({
         onClick={handleToggle}
         className="hover:bg-hover flex w-full items-center gap-2 px-3 py-1.5 text-xs transition-colors"
       >
-        <MessageSquare className="size-3.5 text-[var(--color-review-accent)]" />
+        <MessageSquare
+          className={cn(
+            "size-3.5",
+            pendingReviews.pendingCount > 0 ? "text-[var(--color-review-accent)]" : "text-muted"
+          )}
+        />
         <span className="text-secondary">
           {pendingReviews.pendingCount > 0 ? (
             <>
@@ -415,15 +434,13 @@ const PendingReviewsBannerInner: React.FC<PendingReviewsBannerInnerProps> = ({
                   Completed ({completedList.length})
                 </div>
                 {completedList.length > 0 && (
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="text-error h-5 px-2 text-xs"
+                  <button
+                    type="button"
                     onClick={pendingReviews.clearChecked}
+                    className="text-muted hover:text-error text-[10px] transition-colors"
                   >
-                    <Trash2 className="mr-1 size-3" />
-                    Clear all
-                  </Button>
+                    Clear
+                  </button>
                 )}
               </div>
               {displayedCompleted.map((review) => (
@@ -467,6 +484,8 @@ const PendingReviewsBannerInner: React.FC<PendingReviewsBannerInnerProps> = ({
 interface PendingReviewsBannerProps {
   workspaceId: string;
   chatInputAPI: React.RefObject<ChatInputAPI | null>;
+  /** Review IDs currently attached to chat input (hidden from banner to prevent double-send) */
+  attachedReviewIds: string[];
 }
 
 /**
@@ -476,12 +495,17 @@ interface PendingReviewsBannerProps {
 export const PendingReviewsBanner: React.FC<PendingReviewsBannerProps> = ({
   workspaceId,
   chatInputAPI,
+  attachedReviewIds,
 }) => {
   const pendingReviews = usePendingReviews(workspaceId);
 
   return (
     <BannerErrorBoundary onClear={pendingReviews.clearAll}>
-      <PendingReviewsBannerInner workspaceId={workspaceId} chatInputAPI={chatInputAPI} />
+      <PendingReviewsBannerInner
+        workspaceId={workspaceId}
+        chatInputAPI={chatInputAPI}
+        attachedReviewIds={attachedReviewIds}
+      />
     </BannerErrorBoundary>
   );
 };