🤖 feat: improve pending reviews UX with attachment model

ammar-agent · ammar-agent · commit d508eb5f58f9 · 2025-12-08T12:54:01.000-06:00
- Track attached reviews separately from text input in ChatInput
- Add attachReview/detachReview/getAttachedReviews to ChatInputAPI
- Show attached reviews as styled blocks with X to remove above input
- Auto-mark reviews as completed when sent to chat
- Use text-primary for review comments (more readable)
- Pass filePath to DiffRenderer for syntax highlighting
- Rename ConnectedPendingReviewsBanner to PendingReviewsBanner

_Generated with mux_
diff --git a/src/browser/components/AIView.tsx b/src/browser/components/AIView.tsx
@@ -51,7 +51,7 @@ import { useSendMessageOptions } from "@/browser/hooks/useSendMessageOptions";
 import { useForceCompaction } from "@/browser/hooks/useForceCompaction";
 import { useAPI } from "@/browser/contexts/API";
 import { usePendingReviews } from "@/browser/hooks/usePendingReviews";
-import { ConnectedPendingReviewsBanner } from "./PendingReviewsBanner";
+import { PendingReviewsBanner } from "./PendingReviewsBanner";
 import type { ReviewNoteData } from "@/common/types/review";
 
 interface AIViewProps {
@@ -616,7 +616,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
             onCompactClick={handleCompactClick}
           />
         )}
-        <ConnectedPendingReviewsBanner workspaceId={workspaceId} chatInputAPI={chatInputAPI} />
+        <PendingReviewsBanner workspaceId={workspaceId} chatInputAPI={chatInputAPI} />
         <ChatInput
           variant="workspace"
           workspaceId={workspaceId}
@@ -632,6 +632,8 @@ const AIViewInner: React.FC<AIViewProps> = ({
           canInterrupt={canInterrupt}
           onReady={handleChatInputReady}
           autoCompactionCheck={autoCompactionResult}
+          getReview={pendingReviews.getReview}
+          onReviewsSent={(ids) => ids.forEach((id) => pendingReviews.checkReview(id))}
         />
       </div>
 
diff --git a/src/browser/components/ChatInput/index.tsx b/src/browser/components/ChatInput/index.tsx
@@ -52,7 +52,7 @@ import {
 } from "@/browser/utils/ui/keybinds";
 import { ModelSelector, type ModelSelectorRef } from "../ModelSelector";
 import { useModelLRU } from "@/browser/hooks/useModelLRU";
-import { SendHorizontal } from "lucide-react";
+import { SendHorizontal, X } from "lucide-react";
 import { VimTextArea } from "../VimTextArea";
 import { ImageAttachments, type ImageAttachment } from "../ImageAttachments";
 import {
@@ -75,7 +75,8 @@ import { useTutorial } from "@/browser/contexts/TutorialContext";
 import { useVoiceInput } from "@/browser/hooks/useVoiceInput";
 import { VoiceInputButton } from "./VoiceInputButton";
 import { RecordingOverlay } from "./RecordingOverlay";
-import { ReviewBlock, hasReviewBlocks } from "../shared/ReviewBlock";
+import { ReviewBlock } from "../shared/ReviewBlock";
+import { formatReviewNoteForChat } from "@/common/types/review";
 
 type TokenCountReader = () => number;
 
@@ -146,6 +147,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
   const [providerNames, setProviderNames] = useState<string[]>([]);
   const [toast, setToast] = useState<Toast | null>(null);
   const [imageAttachments, setImageAttachments] = useState<ImageAttachment[]>([]);
+  const [attachedReviewIds, setAttachedReviewIds] = useState<string[]>([]);
   const handleToastDismiss = useCallback(() => {
     setToast(null);
   }, []);
@@ -341,6 +343,19 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
     setImageAttachments(attachments);
   }, []);
 
+  // Attach a review by ID (for pending reviews feature)
+  const attachReview = useCallback((reviewId: string) => {
+    setAttachedReviewIds((prev) => (prev.includes(reviewId) ? prev : [...prev, reviewId]));
+  }, []);
+
+  // Detach a review by ID
+  const detachReview = useCallback((reviewId: string) => {
+    setAttachedReviewIds((prev) => prev.filter((id) => id !== reviewId));
+  }, []);
+
+  // Get currently attached reviews
+  const getAttachedReviews = useCallback(() => attachedReviewIds, [attachedReviewIds]);
+
   // Provide API to parent via callback
   useEffect(() => {
     if (props.onReady) {
@@ -350,6 +365,9 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
         appendText,
         prependText,
         restoreImages,
+        attachReview,
+        detachReview,
+        getAttachedReviews,
       });
     }
   }, [
@@ -359,6 +377,9 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
     appendText,
     prependText,
     restoreImages,
+    attachReview,
+    detachReview,
+    getAttachedReviews,
     props,
   ]);
 
@@ -1015,6 +1036,9 @@ 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) => {
@@ -1073,18 +1097,30 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
           }
         }
 
-        // Clear input and images immediately for responsive UI
+        // Prepend attached reviews to message
+        const attachedReviews = attachedReviewIds
+          .map((id) => props.getReview?.(id))
+          .filter((r): r is NonNullable<typeof r> => r !== undefined);
+        const reviewsText = attachedReviews
+          .map((r) => formatReviewNoteForChat(r.data))
+          .join("\n\n");
+        const finalMessageText = reviewsText
+          ? reviewsText + (actualMessageText ? "\n\n" + actualMessageText : "")
+          : actualMessageText;
+
+        // Clear input, images, and attached reviews immediately for responsive UI
         // These will be restored if the send operation fails
         setInput("");
         setImageAttachments([]);
+        setAttachedReviewIds([]);
         // Clear inline height style - VimTextArea's useLayoutEffect will handle sizing
         if (inputRef.current) {
           inputRef.current.style.height = "";
         }
 
         const result = await api.workspace.sendMessage({
           workspaceId: props.workspaceId,
-          message: actualMessageText,
+          message: finalMessageText,
           options: {
             ...sendMessageOptions,
             ...compactionOptions,
@@ -1099,20 +1135,26 @@ 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 and images on error so user can try again
+          // Restore input, images, and attached reviews on error so user can try again
           setInput(messageText);
           setImageAttachments(previousImageAttachments);
+          setAttachedReviewIds(sentReviewIds);
         } else {
           // Track telemetry for successful message send
           telemetry.messageSent(
             props.workspaceId,
             sendMessageOptions.model,
             mode,
-            actualMessageText.length,
+            finalMessageText.length,
             runtimeType,
             sendMessageOptions.thinkingLevel ?? "off"
           );
 
+          // Mark attached reviews as completed
+          if (sentReviewIds.length > 0) {
+            props.onReviewsSent?.(sentReviewIds);
+          }
+
           // Exit editing mode if we were editing
           if (editingMessage && props.onCancelEdit) {
             props.onCancelEdit();
@@ -1130,6 +1172,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
         );
         setInput(messageText);
         setImageAttachments(previousImageAttachments);
+        setAttachedReviewIds(sentReviewIds);
       } finally {
         setIsSending(false);
       }
@@ -1309,12 +1352,26 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
             <ChatInputToast toast={toast} onDismiss={handleToastDismiss} />
           )}
 
-          {/* Review preview - show styled review blocks above input */}
-          {variant === "workspace" && hasReviewBlocks(input) && (
-            <div className="border-border max-h-40 overflow-y-auto border-b px-2 pb-2">
-              {input.match(/<review>([\s\S]*?)<\/review>/g)?.map((match, idx) => (
-                <ReviewBlock key={idx} content={match.slice(8, -9)} />
-              ))}
+          {/* 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">
+              {attachedReviewIds.map((reviewId) => {
+                const review = props.getReview!(reviewId);
+                if (!review) return null;
+                return (
+                  <div key={reviewId} className="group relative">
+                    <ReviewBlock content={formatReviewNoteForChat(review.data).slice(8, -9)} />
+                    <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"
+                      title="Remove from message"
+                    >
+                      <X className="size-3.5" />
+                    </button>
+                  </div>
+                );
+              })}
             </div>
           )}
 
diff --git a/src/browser/components/ChatInput/types.ts b/src/browser/components/ChatInput/types.ts
@@ -2,13 +2,20 @@ import type { ImagePart } from "@/common/orpc/types";
 import type { FrontendWorkspaceMetadata } from "@/common/types/workspace";
 import type { TelemetryRuntimeType } from "@/common/telemetry/payload";
 import type { AutoCompactionCheckResult } from "@/browser/utils/compaction/autoCompactionCheck";
+import type { PendingReview } from "@/common/types/review";
 
 export interface ChatInputAPI {
   focus: () => void;
   restoreText: (text: string) => void;
   appendText: (text: string) => void;
   prependText: (text: string) => void;
   restoreImages: (images: ImagePart[]) => void;
+  /** Attach a review by ID (shows in preview, included when sending) */
+  attachReview: (reviewId: string) => void;
+  /** Detach a review by ID */
+  detachReview: (reviewId: string) => void;
+  /** Get currently attached review IDs */
+  getAttachedReviews: () => string[];
 }
 
 // Workspace variant: full functionality for existing workspaces
@@ -29,6 +36,10 @@ export interface ChatInputWorkspaceVariant {
   disabled?: boolean;
   onReady?: (api: ChatInputAPI) => void;
   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;
+  /** Get a pending review by ID (for resolving attached review IDs to data) */
+  getReview?: (id: string) => PendingReview | undefined;
 }
 
 // Creation variant: simplified for first message / workspace creation
diff --git a/src/browser/components/Messages/UserMessage.tsx b/src/browser/components/Messages/UserMessage.tsx
@@ -102,8 +102,8 @@ export const UserMessage: React.FC<UserMessageProps> = ({
       className={className}
       variant="user"
     >
-      {content && (
-        containsReviews ? (
+      {content &&
+        (containsReviews ? (
           <ContentWithReviews
             content={content}
             textClassName="font-primary m-0 leading-6 break-words whitespace-pre-wrap text-[var(--color-user-text)]"
@@ -112,8 +112,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({
           <pre className="font-primary m-0 leading-6 break-words whitespace-pre-wrap text-[var(--color-user-text)]">
             {content}
           </pre>
-        )
-      )}
+        ))}
       {message.imageParts && message.imageParts.length > 0 && (
         <div className="mt-3 flex flex-wrap gap-3">
           {message.imageParts.map((img, idx) => (
diff --git a/src/browser/components/PendingReviewsBanner.tsx b/src/browser/components/PendingReviewsBanner.tsx
@@ -25,8 +25,7 @@ import {
 import { cn } from "@/common/lib/utils";
 import { Button } from "./ui/button";
 import { Tooltip, TooltipWrapper } from "./Tooltip";
-import type { PendingReview, ReviewNoteData } from "@/common/types/review";
-import { formatReviewNoteForChat } from "@/common/types/review";
+import type { PendingReview } from "@/common/types/review";
 import { usePendingReviews } from "@/browser/hooks/usePendingReviews";
 import type { ChatInputAPI } from "./ChatInput";
 import { formatRelativeTime } from "@/browser/utils/ui/dateTime";
@@ -169,7 +168,11 @@ const ReviewItem: React.FC<ReviewItemProps> = ({
           onClick={handleToggleExpand}
           className="text-muted hover:text-secondary shrink-0"
         >
-          {isExpanded ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}
+          {isExpanded ? (
+            <ChevronDown className="size-3.5" />
+          ) : (
+            <ChevronRight className="size-3.5" />
+          )}
         </button>
 
         {/* Check/Uncheck button */}
@@ -200,7 +203,12 @@ const ReviewItem: React.FC<ReviewItemProps> = ({
         {/* 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}>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-5 [&_svg]:size-3"
+              onClick={onSendToChat}
+            >
               <Send />
             </Button>
             <Tooltip align="center">Send to chat</Tooltip>
@@ -243,7 +251,12 @@ const ReviewItem: React.FC<ReviewItemProps> = ({
                 />
                 <div className="flex items-center justify-end gap-1">
                   <span className="text-muted mr-2 text-[10px]">⌘Enter to save, Esc to cancel</span>
-                  <Button variant="ghost" size="sm" className="h-5 px-2 text-xs" onClick={handleCancelEdit}>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-5 px-2 text-xs"
+                    onClick={handleCancelEdit}
+                  >
                     <X className="mr-1 size-3" />
                     Cancel
                   </Button>
@@ -260,7 +273,7 @@ const ReviewItem: React.FC<ReviewItemProps> = ({
               </div>
             ) : (
               <div className="group/comment flex items-start gap-2">
-                <blockquote className="text-secondary flex-1 border-l-2 border-[var(--color-review-accent)] pl-2 text-xs italic">
+                <blockquote className="text-primary flex-1 border-l-2 border-[var(--color-review-accent)] pl-2 text-xs italic">
                   {review.data.userNote || <span className="text-muted">No comment</span>}
                 </blockquote>
                 <Button
@@ -319,8 +332,8 @@ const PendingReviewsBannerInner: React.FC<PendingReviewsBannerInnerProps> = ({
   }, []);
 
   const handleSendToChat = useCallback(
-    (data: ReviewNoteData) => {
-      chatInputAPI.current?.appendText(formatReviewNoteForChat(data));
+    (reviewId: string) => {
+      chatInputAPI.current?.attachReview(reviewId);
     },
     [chatInputAPI]
   );
@@ -386,7 +399,7 @@ const PendingReviewsBannerInner: React.FC<PendingReviewsBannerInnerProps> = ({
                   review={review}
                   onCheck={() => pendingReviews.checkReview(review.id)}
                   onUncheck={() => pendingReviews.uncheckReview(review.id)}
-                  onSendToChat={() => handleSendToChat(review.data)}
+                  onSendToChat={() => handleSendToChat(review.id)}
                   onRemove={() => pendingReviews.removeReview(review.id)}
                   onUpdateNote={(note) => handleUpdateNote(review.id, note)}
                 />
@@ -419,7 +432,7 @@ const PendingReviewsBannerInner: React.FC<PendingReviewsBannerInnerProps> = ({
                   review={review}
                   onCheck={() => pendingReviews.checkReview(review.id)}
                   onUncheck={() => pendingReviews.uncheckReview(review.id)}
-                  onSendToChat={() => handleSendToChat(review.data)}
+                  onSendToChat={() => handleSendToChat(review.id)}
                   onRemove={() => pendingReviews.removeReview(review.id)}
                   onUpdateNote={(note) => handleUpdateNote(review.id, note)}
                 />
@@ -430,7 +443,8 @@ const PendingReviewsBannerInner: React.FC<PendingReviewsBannerInnerProps> = ({
                   onClick={() => setShowAllCompleted(true)}
                   className="text-muted hover:text-secondary w-full py-1 text-center text-xs transition-colors"
                 >
-                  Show {hiddenCompletedCount} more completed review{hiddenCompletedCount !== 1 && "s"}
+                  Show {hiddenCompletedCount} more completed review
+                  {hiddenCompletedCount !== 1 && "s"}
                 </button>
               )}
             </div>
@@ -447,10 +461,10 @@ const PendingReviewsBannerInner: React.FC<PendingReviewsBannerInnerProps> = ({
 };
 
 // ═══════════════════════════════════════════════════════════════════════════════
-// EXPORTED CONNECTED COMPONENT
+// EXPORTED COMPONENT
 // ═══════════════════════════════════════════════════════════════════════════════
 
-interface ConnectedPendingReviewsBannerProps {
+interface PendingReviewsBannerProps {
   workspaceId: string;
   chatInputAPI: React.RefObject<ChatInputAPI | null>;
 }
@@ -459,7 +473,7 @@ interface ConnectedPendingReviewsBannerProps {
  * Self-contained pending reviews banner.
  * Uses usePendingReviews hook internally - only needs workspaceId and chatInputAPI.
  */
-export const ConnectedPendingReviewsBanner: React.FC<ConnectedPendingReviewsBannerProps> = ({
+export const PendingReviewsBanner: React.FC<PendingReviewsBannerProps> = ({
   workspaceId,
   chatInputAPI,
 }) => {
diff --git a/src/browser/components/shared/ReviewBlock.tsx b/src/browser/components/shared/ReviewBlock.tsx
