Cancel stale queued heartbeats when issue graph changes (PAP-2314) (#4534)

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/components/StatusIcon.tsx

@@ -40,6 +40,14 @@ function blockedAttentionLabel(blockerAttention: IssueBlockerAttention | null |
     return `Blocked · covered by ${count} active dependencies`;
   }
 
+  if (blockerAttention.reason === "stalled_review") {
+    const count = blockerAttention.stalledBlockerCount;
+    const leaf = blockerAttention.sampleStalledBlockerIdentifier ?? blockerAttention.sampleBlockerIdentifier;
+    if (count === 1 && leaf) return `Blocked · review stalled on ${leaf}`;
+    if (count === 1) return "Blocked · review stalled with no clear next step";
+    return `Blocked · ${count} reviews stalled with no clear next step`;
+  }
+
   if (blockerAttention.reason === "attention_required") {
     const count = blockerAttention.unresolvedBlockerCount;
     return `Blocked · ${count} unresolved ${count === 1 ? "blocker needs" : "blockers need"} attention`;
@@ -51,11 +59,19 @@ function blockedAttentionLabel(blockerAttention: IssueBlockerAttention | null |
 export function StatusIcon({ status, blockerAttention, onChange, className, showLabel }: StatusIconProps) {
   const [open, setOpen] = useState(false);
   const isCoveredBlocked = status === "blocked" && blockerAttention?.state === "covered";
+  const isStalledBlocked = status === "blocked" && blockerAttention?.state === "stalled";
   const colorClass = isCoveredBlocked
     ? "text-cyan-600 border-cyan-600 dark:text-cyan-400 dark:border-cyan-400"
-    : issueStatusIcon[status] ?? issueStatusIconDefault;
+    : isStalledBlocked
+      ? "text-amber-600 border-amber-600 dark:text-amber-400 dark:border-amber-400"
+      : issueStatusIcon[status] ?? issueStatusIconDefault;
   const isDone = status === "done";
   const ariaLabel = status === "blocked" ? blockedAttentionLabel(blockerAttention) : statusLabel(status);
+  const blockerAttentionState = isCoveredBlocked
+    ? "covered"
+    : isStalledBlocked
+      ? "stalled"
+      : undefined;
 
   const circle = (
     <span
@@ -65,7 +81,7 @@ export function StatusIcon({ status, blockerAttention, onChange, className, show
         onChange && !showLabel && "cursor-pointer",
         className
       )}
-      data-blocker-attention-state={isCoveredBlocked ? "covered" : undefined}
+      data-blocker-attention-state={blockerAttentionState}
       aria-label={ariaLabel}
       title={ariaLabel}
     >
@@ -75,6 +91,9 @@ export function StatusIcon({ status, blockerAttention, onChange, className, show
       {isCoveredBlocked && (
         <span className="absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full border border-background bg-current" />
       )}
+      {isStalledBlocked && (
+        <span className="absolute inset-0 m-auto h-1.5 w-1.5 rounded-full bg-current" />
+      )}
     </span>
   );