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

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

ui/src/components/IssueChatThread.tsx

@@ -32,6 +32,7 @@ import type {
   FeedbackVote,
   FeedbackVoteValue,
   IssueAttachment,
+  IssueBlockerAttention,
   IssueRelationIssueSummary,
 } from "@paperclipai/shared";
 import type { ActiveRunForIssue, LiveRunForIssue } from "../api/heartbeats";
@@ -88,7 +89,6 @@ import {
 } from "../lib/issue-chat-scroll";
 import { formatAssigneeUserLabel } from "../lib/assignees";
 import type { CompanyUserProfile } from "../lib/company-members";
-import { createIssueDetailPath } from "../lib/issueDetailBreadcrumb";
 import { timeAgo } from "../lib/timeAgo";
 import {
   describeToolInput,
@@ -104,7 +104,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Textarea } from "@/components/ui/textarea";
 import { AlertTriangle, ArrowRight, Brain, Check, ChevronDown, Copy, Hammer, Loader2, MoreHorizontal, Paperclip, PauseCircle, Search, Square, ThumbsDown, ThumbsUp } from "lucide-react";
-import { IssueLinkQuicklook } from "./IssueLinkQuicklook";
+import { IssueBlockedNotice } from "./IssueBlockedNotice";
 
 interface IssueChatMessageContext {
   feedbackVoteByTargetId: Map<string, FeedbackVoteValue>;
@@ -245,6 +245,7 @@ interface IssueChatThreadProps {
   liveRuns?: LiveRunForIssue[];
   activeRun?: ActiveRunForIssue | null;
   blockedBy?: IssueRelationIssueSummary[];
+  blockerAttention?: IssueBlockerAttention | null;
   companyId?: string | null;
   projectId?: string | null;
   issueStatus?: string;
@@ -344,66 +345,6 @@ class IssueChatErrorBoundary extends Component<IssueChatErrorBoundaryProps, Issu
   }
 }
 
-function IssueBlockedNotice({
-  issueStatus,
-  blockers,
-}: {
-  issueStatus?: string;
-  blockers: IssueRelationIssueSummary[];
-}) {
-  if (blockers.length === 0 && issueStatus !== "blocked") return null;
-
-  const blockerLabel = blockers.length === 1 ? "the linked issue" : "the linked issues";
-  const terminalBlockers = blockers
-    .flatMap((blocker) => blocker.terminalBlockers ?? [])
-    .filter((blocker, index, all) => all.findIndex((candidate) => candidate.id === blocker.id) === index);
-
-  const renderBlockerChip = (blocker: IssueRelationIssueSummary) => {
-    const issuePathId = blocker.identifier ?? blocker.id;
-    return (
-      <IssueLinkQuicklook
-        key={blocker.id}
-        issuePathId={issuePathId}
-        to={createIssueDetailPath(issuePathId)}
-        className="inline-flex max-w-full items-center gap-1 rounded-md border border-amber-300/70 bg-background/80 px-2 py-1 font-mono text-xs text-amber-950 transition-colors hover:border-amber-500 hover:bg-amber-100 hover:underline dark:border-amber-500/40 dark:bg-background/40 dark:text-amber-100 dark:hover:bg-amber-500/15"
-      >
-        <span>{blocker.identifier ?? blocker.id.slice(0, 8)}</span>
-        <span className="max-w-[18rem] truncate font-sans text-[11px] text-amber-800 dark:text-amber-200">
-          {blocker.title}
-        </span>
-      </IssueLinkQuicklook>
-    );
-  };
-
-  return (
-    <div className="mb-3 rounded-md border border-amber-300/70 bg-amber-50/90 px-3 py-2.5 text-sm text-amber-950 shadow-sm dark:border-amber-500/40 dark:bg-amber-500/10 dark:text-amber-100">
-      <div className="flex items-start gap-2">
-        <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-300" />
-        <div className="min-w-0 space-y-1.5">
-          <p className="leading-5">
-            {blockers.length > 0
-              ? <>Work on this issue is blocked by {blockerLabel} until {blockers.length === 1 ? "it is" : "they are"} complete. Comments still wake the assignee for questions or triage.</>
-              : <>Work on this issue is blocked until it is moved back to todo. Comments still wake the assignee for questions or triage.</>}
-          </p>
-          {blockers.length > 0 ? (
-            <div className="flex flex-wrap gap-1.5">
-              {blockers.map(renderBlockerChip)}
-            </div>
-          ) : null}
-          {terminalBlockers.length > 0 ? (
-            <div className="flex flex-wrap items-center gap-1.5 pt-0.5">
-              <span className="text-xs font-medium text-amber-800 dark:text-amber-200">
-                Ultimately waiting on
-              </span>
-              {terminalBlockers.map(renderBlockerChip)}
-            </div>
-          ) : null}
-        </div>
-      </div>
-    </div>
-  );
-}
-
 function IssueAssigneePausedNotice({ agent }: { agent: Agent | null }) {
   if (!agent || agent.status !== "paused") return null;
 
@@ -2511,6 +2452,7 @@ export function IssueChatThread({
   liveRuns = [],
   activeRun = null,
   blockedBy = [],
+  blockerAttention = null,
   companyId,
   projectId,
   issueStatus,
@@ -2867,7 +2809,11 @@ export function IssueChatThread({
               )}
               {showComposer ? (
                 <div data-testid="issue-chat-thread-notices" className="space-y-2">
-                  <IssueBlockedNotice issueStatus={issueStatus} blockers={unresolvedBlockers} />
+                  <IssueBlockedNotice
+                    issueStatus={issueStatus}
+                    blockers={unresolvedBlockers}
+                    blockerAttention={blockerAttention}
+                  />
                   <IssueAssigneePausedNotice agent={assignedAgent} />
                 </div>
               ) : null}