🤖 feat: add bulk attach/detach for pending reviews (#1031)

## Summary

Adds quick actions to bulk manage pending reviews near ChatInput:

- **Clear all reviews**: Remove all attached reviews from current chat
message (shown when 2+ reviews attached)
- **Attach all to chat**: Attach all pending reviews at once from
ReviewsBanner (shown when 2+ pending)

## Changes

- `useReviews` hook: Added `attachAllPending()` and
`detachAllAttached()` methods
- `ChatInput`: Added header with count and 'Clear all' button above
attached reviews
- `ReviewsBanner`: Added 'Attach all to chat' button in pending section
header
- `AIView`: Wired up the new `onDetachAllReviews` prop

_Generated with `mux`_

Author: ammar-agent

src/browser/components/AIView.tsx

@@ -665,6 +665,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
           autoCompactionCheck={autoCompactionResult}
           attachedReviews={reviews.attachedReviews}
           onDetachReview={reviews.detachReview}
+          onDetachAllReviews={reviews.detachAllAttached}
           onCheckReviews={(ids) => ids.forEach((id) => reviews.checkReview(id))}
           onUpdateReviewNote={reviews.updateReviewNote}
         />

src/browser/components/ChatInput/index.tsx

@@ -54,7 +54,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 {
@@ -1381,6 +1381,27 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
           {/* Hide during send to avoid duplicate display with the sent message */}
           {variant === "workspace" && attachedReviews.length > 0 && !hideReviewsDuringSend && (
             <div className="border-border max-h-[50vh] space-y-2 overflow-y-auto border-b px-1.5 py-1.5">
+              {/* Header with count and clear all button */}
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-muted font-medium">
+                  {attachedReviews.length} review{attachedReviews.length !== 1 && "s"} attached
+                </span>
+                {props.onDetachAllReviews && attachedReviews.length > 1 && (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        onClick={props.onDetachAllReviews}
+                        className="text-muted hover:text-error flex items-center gap-1 text-xs transition-colors"
+                      >
+                        <X className="size-3" />
+                        Clear all
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>Remove all reviews from message</TooltipContent>
+                  </Tooltip>
+                )}
+              </div>
               {attachedReviews.map((review) => (
                 <ReviewBlockFromData
                   key={review.id}

src/browser/components/ChatInput/types.ts

@@ -34,6 +34,8 @@ export interface ChatInputWorkspaceVariant {
   attachedReviews?: Review[];
   /** Detach a review from chat input (sets status to pending) */
   onDetachReview?: (reviewId: string) => void;
+  /** Detach all attached reviews from chat input */
+  onDetachAllReviews?: () => void;
   /** Mark reviews as checked after sending */
   onCheckReviews?: (reviewIds: string[]) => void;
   /** Update a review's comment/note */

src/browser/components/ReviewsBanner.tsx

@@ -406,8 +406,20 @@ const ReviewsBannerInner: React.FC<ReviewsBannerInnerProps> = ({ workspaceId })
           {/* Pending reviews section */}
           {pendingList.length > 0 && (
             <div className="space-y-1.5">
-              <div className="text-muted text-[10px] font-medium tracking-wide uppercase">
-                Pending ({pendingList.length})
+              <div className="flex items-center justify-between">
+                <div className="text-muted text-[10px] font-medium tracking-wide uppercase">
+                  Pending ({pendingList.length})
+                </div>
+                {pendingList.length > 1 && (
+                  <button
+                    type="button"
+                    onClick={reviewsHook.attachAllPending}
+                    className="text-muted flex items-center gap-1 text-[10px] transition-colors hover:text-[var(--color-review-accent)]"
+                  >
+                    <Send className="size-3" />
+                    Attach all
+                  </button>
+                )}
               </div>
               {pendingList.map((review) => (
                 <ReviewItem

src/browser/hooks/useReviews.ts

@@ -32,6 +32,10 @@ export interface UseReviewsReturn {
   attachReview: (reviewId: string) => void;
   /** Detach a review from chat input (back to pending) */
   detachReview: (reviewId: string) => void;
+  /** Attach all pending reviews to chat input */
+  attachAllPending: () => void;
+  /** Detach all attached reviews from chat input (back to pending) */
+  detachAllAttached: () => void;
   /** Mark a review as checked (sent) */
   checkReview: (reviewId: string) => void;
   /** Uncheck a review (mark as pending again) */
@@ -153,6 +157,42 @@ export function useReviews(workspaceId: string): UseReviewsReturn {
     [setState]
   );
 
+  const attachAllPending = useCallback(() => {
+    setState((prev) => {
+      const now = Date.now();
+      const updated = { ...prev.reviews };
+      let hasChanges = false;
+
+      for (const [id, review] of Object.entries(prev.reviews)) {
+        if (review.status === "pending") {
+          updated[id] = { ...review, status: "attached", statusChangedAt: now };
+          hasChanges = true;
+        }
+      }
+
+      if (!hasChanges) return prev;
+      return { ...prev, reviews: updated, lastUpdated: now };
+    });
+  }, [setState]);
+
+  const detachAllAttached = useCallback(() => {
+    setState((prev) => {
+      const now = Date.now();
+      const updated = { ...prev.reviews };
+      let hasChanges = false;
+
+      for (const [id, review] of Object.entries(prev.reviews)) {
+        if (review.status === "attached") {
+          updated[id] = { ...review, status: "pending", statusChangedAt: now };
+          hasChanges = true;
+        }
+      }
+
+      if (!hasChanges) return prev;
+      return { ...prev, reviews: updated, lastUpdated: now };
+    });
+  }, [setState]);
+
   const checkReview = useCallback(
     (reviewId: string) => {
       setState((prev) => {
@@ -276,6 +316,8 @@ export function useReviews(workspaceId: string): UseReviewsReturn {
       addReview,
       attachReview,
       detachReview,
+      attachAllPending,
+      detachAllAttached,
       checkReview,
       uncheckReview,
       removeReview,
@@ -293,6 +335,8 @@ export function useReviews(workspaceId: string): UseReviewsReturn {
       addReview,
       attachReview,
       detachReview,
+      attachAllPending,
+      detachAllAttached,
       checkReview,
       uncheckReview,
       removeReview,

src/browser/stories/App.reviews.stories.tsx

@@ -5,6 +5,7 @@
 import { appMeta, AppWithMocks, type AppStory } from "./meta.js";
 import { setupSimpleChatStory, setReviews, createReview } from "./storyHelpers";
 import { createUserMessage, createAssistantMessage } from "./mockFactory";
+import { within, userEvent, waitFor } from "@storybook/test";
 
 export default {
   ...appMeta,
@@ -156,3 +157,93 @@ export const ManyReviews: AppStory = {
     />
   ),
 };
+
+/**
+ * Shows multiple attached reviews in ChatInput with "Clear all" button.
+ * Also shows pending reviews in banner with "Attach all to chat" button.
+ */
+export const BulkReviewActions: AppStory = {
+  render: () => (
+    <AppWithMocks
+      setup={() => {
+        const workspaceId = "ws-bulk-reviews";
+
+        setReviews(workspaceId, [
+          // Attached reviews - shown in ChatInput with "Clear all" button
+          createReview(
+            "review-attached-1",
+            "src/api/auth.ts",
+            "42-48",
+            "Consider using a constant for the token expiry",
+            "attached"
+          ),
+          createReview(
+            "review-attached-2",
+            "src/utils/helpers.ts",
+            "15-20",
+            "This function could be simplified using reduce",
+            "attached"
+          ),
+          createReview(
+            "review-attached-3",
+            "src/hooks/useAuth.ts",
+            "30-35",
+            "Missing error handling for network failures",
+            "attached"
+          ),
+          // Pending reviews - shown in banner with "Attach all to chat" button
+          createReview(
+            "review-pending-1",
+            "src/components/LoginForm.tsx",
+            "55-60",
+            "Add loading state while authenticating",
+            "pending"
+          ),
+          createReview(
+            "review-pending-2",
+            "src/services/api.ts",
+            "12-18",
+            "Consider adding retry logic for failed requests",
+            "pending"
+          ),
+          createReview(
+            "review-pending-3",
+            "src/types/user.ts",
+            "5-10",
+            "Make email field optional for guest users",
+            "pending"
+          ),
+        ]);
+
+        return setupSimpleChatStory({
+          workspaceId,
+          workspaceName: "feature/auth-improvements",
+          projectName: "my-app",
+          messages: [
+            createUserMessage("msg-1", "Help me fix the authentication issues", {
+              historySequence: 1,
+            }),
+            createAssistantMessage("msg-2", "I'll help you address the authentication issues.", {
+              historySequence: 2,
+            }),
+          ],
+        });
+      }}
+    />
+  ),
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+
+    // Expand the ReviewsBanner to show "Attach all to chat" button
+    // The banner shows "3 pending reviews" but number is in separate span,
+    // so we click on "pending review" text
+    await waitFor(async () => {
+      const bannerButton = canvas.getByText(/pending review/i);
+      await userEvent.click(bannerButton);
+    });
+
+    // Wait for any auto-focus timers, then blur
+    await new Promise((resolve) => setTimeout(resolve, 150));
+    (document.activeElement as HTMLElement)?.blur();
+  },
+};

src/browser/stories/storyHelpers.ts

@@ -76,7 +76,7 @@ export function createReview(
   filePath: string,
   lineRange: string,
   note: string,
-  status: "pending" | "checked" = "pending"
+  status: "pending" | "attached" | "checked" = "pending"
 ): Review {
   return {
     id,