From 17f7f0171cc5d8aef202f1da0103a536e67248ed Mon Sep 17 00:00:00 2001
From: Zamil Majdy <zamil.majdy@agpt.co>
Date: Sat, 24 Jan 2026 10:43:50 -0600
Subject: [PATCH] fix(frontend): fix HITL instruction label, header text, and
 default collapse state

- Show HITL instruction label by checking for user-provided names (not technical block names)
- Always show 'Review required for X' in header (not just the name)
- Default single reviews to expanded, multiple reviews to collapsed
- Detect HITL blocks by checking if name doesn't contain 'Block' suffix
---
 .../PendingReviewCard/PendingReviewCard.tsx   | 14 +++++++--
 .../PendingReviewsList/PendingReviewsList.tsx | 31 +++++++++----------
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/autogpt_platform/frontend/src/components/organisms/PendingReviewCard/PendingReviewCard.tsx b/autogpt_platform/frontend/src/components/organisms/PendingReviewCard/PendingReviewCard.tsx
index c302ff6fe0..c570e30c34 100644
--- a/autogpt_platform/frontend/src/components/organisms/PendingReviewCard/PendingReviewCard.tsx
+++ b/autogpt_platform/frontend/src/components/organisms/PendingReviewCard/PendingReviewCard.tsx
@@ -57,10 +57,18 @@ export function PendingReviewCard({
   const extractedData = extractReviewData(review.payload);
   const isDataEditable = review.editable;
 
-  // Get instructions - clean up old format if it exists
+  // Get instructions from payload (HITL blocks) or review field
   let instructions = extractedData.instructions || review.instructions;
-  if (instructions) {
-    // Remove old wrapper format: "Review required for X execution" -> "X"
+
+  // Only show as label if it's a HITL block (user-provided meaningful name, not a technical block name)
+  // HITL blocks have names like "User profile data", sensitive blocks have names like "SendEmailBlock"
+  const isHITLBlock = instructions && !instructions.includes("Block");
+
+  if (instructions && !isHITLBlock) {
+    // For non-HITL blocks, don't show label
+    instructions = undefined;
+  } else if (instructions) {
+    // Clean up old format for HITL blocks: "Review required for X execution" -> "X"
     const match = instructions.match(/^Review required for (.+?) execution$/);
     if (match) {
       instructions = match[1];
diff --git a/autogpt_platform/frontend/src/components/organisms/PendingReviewsList/PendingReviewsList.tsx b/autogpt_platform/frontend/src/components/organisms/PendingReviewsList/PendingReviewsList.tsx
index 49fa3c5b2d..37fe44b9ac 100644
--- a/autogpt_platform/frontend/src/components/organisms/PendingReviewsList/PendingReviewsList.tsx
+++ b/autogpt_platform/frontend/src/components/organisms/PendingReviewsList/PendingReviewsList.tsx
@@ -274,27 +274,29 @@ export function PendingReviewsList({
 
       <div className="space-y-7">
         {Object.entries(groupedReviews).map(([nodeId, nodeReviews]) => {
-          // Default to collapsed for all reviews
-          const isCollapsed = collapsedGroups[nodeId] ?? true;
+          // Default to expanded for single reviews, collapsed for multiple
+          const isCollapsed = collapsedGroups[nodeId] ?? nodeReviews.length > 1;
           const displayName =
             nodeNameMap[nodeId] || nodeReviews[0]?.node_id || "Unknown Block";
           const reviewCount = nodeReviews.length;
 
-          // Get review title from instructions field
-          // Only show if it's a HITL block (has custom instructions)
           const firstReview = nodeReviews[0];
-          let reviewTitle = firstReview?.instructions;
+          let blockName = firstReview?.instructions;
 
-          // Clean up old format if it exists: "Review required for X execution" -> "X"
-          if (reviewTitle) {
-            const match = reviewTitle.match(
+          // Extract name from old format if exists
+          if (blockName) {
+            const match = blockName.match(
               /^Review required for (.+?) execution$/,
             );
             if (match) {
-              reviewTitle = match[1];
+              blockName = match[1];
             }
           }
 
+          // Build the review title
+          const finalName = blockName || displayName;
+          const reviewTitle = `Review required for ${finalName}`;
+
           // Helper to shorten node ID
           const getShortenedNodeId = (id: string) => {
             if (id.length <= 8) return id;
@@ -313,14 +315,9 @@ export function PendingReviewsList({
                   <CaretDownIcon size={20} className="text-gray-600" />
                 )}
                 <div className="flex-1">
-                  {reviewTitle && (
-                    <Text
-                      variant="body"
-                      className="font-semibold text-gray-900"
-                    >
-                      {reviewTitle}
-                    </Text>
-                  )}
+                  <Text variant="body" className="font-semibold text-gray-900">
+                    {reviewTitle}
+                  </Text>
                   <Text variant="small" className="text-gray-500">
                     Node #{getShortenedNodeId(nodeId)}
                   </Text>