From 1e0ac43f0ddb7d20e23c63e76876e2affe38ee66 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Sun, 7 Jun 2026 16:05:39 -0500
Subject: [PATCH] feat: allow collapsing attached reviews in the chat
 decoration

Wrap the AttachedReviewsPanel in the ChatInputDecoration primitive so the reviews attached to a pending message can be collapsed/expanded like the other composer decorations. The collapsed/expanded intent persists per-workspace and defaults to expanded to preserve the prior always-visible behavior.
---
 .../ChatInput/AttachedReviewsPanel.tsx        | 108 ++++++++++++------
 src/browser/features/ChatInput/index.tsx      |   1 +
 src/common/constants/storage.ts               |   9 ++
 3 files changed, 82 insertions(+), 36 deletions(-)

diff --git a/src/browser/features/ChatInput/AttachedReviewsPanel.tsx b/src/browser/features/ChatInput/AttachedReviewsPanel.tsx
index ded9e817d9..7425222dc2 100644
--- a/src/browser/features/ChatInput/AttachedReviewsPanel.tsx
+++ b/src/browser/features/ChatInput/AttachedReviewsPanel.tsx
@@ -1,10 +1,14 @@
 import React from "react";
-import { X } from "lucide-react";
+import { MessageSquare, X } from "lucide-react";
 import { Tooltip, TooltipTrigger, TooltipContent } from "@/browser/components/Tooltip/Tooltip";
+import { ChatInputDecoration } from "@/browser/components/ChatPane/ChatInputDecoration";
+import { usePersistedState } from "@/browser/hooks/usePersistedState";
+import { getAttachedReviewsExpandedKey } from "@/common/constants/storage";
 import { ReviewBlockFromData } from "../Shared/ReviewBlock";
 import type { Review } from "@/common/types/review";
 
 export interface AttachedReviewsPanelProps {
+  workspaceId: string;
   reviews: Review[];
   onDetachAll?: () => void;
   onDetach?: (reviewId: string) => void;
@@ -14,10 +18,17 @@ export interface AttachedReviewsPanelProps {
 }
 
 /**
- * Displays attached reviews in the chat input area.
- * Shows a header with count and "Clear all" button when multiple reviews attached.
+ * Displays reviews attached to the pending message as a collapsible chat-input
+ * decoration. Reuses the {@link ChatInputDecoration} primitive so the panel
+ * reads with the same collapsed chrome as the other composer decorations and so
+ * a long list of attachments can be tucked away without detaching them. The
+ * collapsed/expanded intent persists per-workspace; the panel defaults to
+ * expanded to preserve the prior always-visible behavior. The summary surfaces
+ * the count, and "Clear all" lives in the expanded body when multiple reviews
+ * are attached.
  */
 export const AttachedReviewsPanel: React.FC<AttachedReviewsPanelProps> = ({
+  workspaceId,
   reviews,
   onDetachAll,
   onDetach,
@@ -25,41 +36,66 @@ export const AttachedReviewsPanel: React.FC<AttachedReviewsPanelProps> = ({
   onDelete,
   onUpdateNote,
 }) => {
+  const [expanded, setExpanded] = usePersistedState(
+    getAttachedReviewsExpandedKey(workspaceId),
+    true
+  );
+
   if (reviews.length === 0) return null;
 
   return (
-    <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">
-          {reviews.length} review{reviews.length !== 1 && "s"} attached
-        </span>
-        {onDetachAll && reviews.length > 1 && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                onClick={onDetachAll}
-                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>
-      {reviews.map((review) => (
-        <ReviewBlockFromData
-          key={review.id}
-          data={review.data}
-          onComplete={onCheck ? () => onCheck(review.id) : undefined}
-          onDetach={onDetach ? () => onDetach(review.id) : undefined}
-          onDelete={onDelete ? () => onDelete(review.id) : undefined}
-          onEditComment={onUpdateNote ? (newNote) => onUpdateNote(review.id, newNote) : undefined}
-        />
-      ))}
-    </div>
+    <ChatInputDecoration
+      expanded={expanded}
+      onToggle={() => setExpanded(!expanded)}
+      dataComponent="AttachedReviewsPanel"
+      // Unlike the decorations stacked above the composer, this panel renders
+      // inside the chat-input card (which already supplies the gutter), so drop
+      // the primitive's top border + horizontal padding and keep a bottom
+      // divider above the textarea, matching the panel's prior placement.
+      className="border-t-0 border-b px-0"
+      contentClassName="max-h-[50vh] space-y-2 overflow-y-auto py-1.5"
+      summary={
+        <>
+          <MessageSquare className="size-3.5 text-[var(--color-review-accent)] transition-colors" />
+          <span className="text-muted group-hover:text-secondary transition-colors">
+            <span className="font-medium">{reviews.length}</span> review
+            {reviews.length !== 1 && "s"} attached
+          </span>
+        </>
+      }
+      renderExpanded={() => (
+        <>
+          {onDetachAll && reviews.length > 1 && (
+            <div className="flex items-center justify-end">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    onClick={onDetachAll}
+                    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>
+          )}
+          {reviews.map((review) => (
+            <ReviewBlockFromData
+              key={review.id}
+              data={review.data}
+              onComplete={onCheck ? () => onCheck(review.id) : undefined}
+              onDetach={onDetach ? () => onDetach(review.id) : undefined}
+              onDelete={onDelete ? () => onDelete(review.id) : undefined}
+              onEditComment={
+                onUpdateNote ? (newNote) => onUpdateNote(review.id, newNote) : undefined
+              }
+            />
+          ))}
+        </>
+      )}
+    />
   );
 };
diff --git a/src/browser/features/ChatInput/index.tsx b/src/browser/features/ChatInput/index.tsx
index e0213d2075..b4062b6ffb 100644
--- a/src/browser/features/ChatInput/index.tsx
+++ b/src/browser/features/ChatInput/index.tsx
@@ -2992,6 +2992,7 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
           {/* Hide during send to avoid duplicate display with the sent message */}
           {variant === "workspace" && !hideReviewsDuringSend && (
             <AttachedReviewsPanel
+              workspaceId={props.workspaceId}
               reviews={reviewPanelItems}
               onDetachAll={
                 reviewOverrideActive
diff --git a/src/common/constants/storage.ts b/src/common/constants/storage.ts
index 53d9c0eefc..ff76e90fd0 100644
--- a/src/common/constants/storage.ts
+++ b/src/common/constants/storage.ts
@@ -218,6 +218,15 @@ export function getPinnedTodoExpandedKey(workspaceId: string): string {
   return `pinnedTodoExpanded:${workspaceId}`;
 }
 
+/**
+ * Get the localStorage key for the attached reviews panel expansion state.
+ * Lets a long list of reviews attached to the pending message be collapsed
+ * without detaching them. Format: "attachedReviewsExpanded:{workspaceId}"
+ */
+export function getAttachedReviewsExpandedKey(workspaceId: string): string {
+  return `attachedReviewsExpanded:${workspaceId}`;
+}
+
 /**
  * Get the localStorage key for per-workspace transcript auto-expand preferences.
  *