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
This commit is contained in:
Zamil Majdy
2026-01-24 10:43:50 -06:00
parent 385536c2aa
commit 17f7f0171c
2 changed files with 25 additions and 20 deletions

View File

@@ -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];

View File

@@ -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>