diff --git a/ui/src/components/IssueBlockedNotice.test.tsx b/ui/src/components/IssueBlockedNotice.test.tsx index e41f1eac20a..b0a74c46e8d 100644 --- a/ui/src/components/IssueBlockedNotice.test.tsx +++ b/ui/src/components/IssueBlockedNotice.test.tsx @@ -147,7 +147,10 @@ describe("IssueBlockedNotice", () => { expect(html).toContain('data-blocker-attention-state="covered"'); expect(html).toContain('data-blocker-attention-reason="explicit_waiting"'); expect(html).toContain("Waiting on board confirmation"); - expect(html).toContain("Plan revision r2"); + expect(html).not.toContain("Plan revision r2"); + expect(html).not.toMatch(/>\s*Target\s*); + expect(html).toContain(">Owner<"); + expect(html).toContain(">Resume<"); expect(html).toContain("Resumes when the board accepts"); expect(html).toContain("border-sky-300/70"); expect(html).not.toContain("border-rose-300/70"); @@ -196,7 +199,7 @@ describe("IssueBlockedNotice", () => { expect(html).toContain("Waiting on board approval"); expect(html).toContain("A board approval is open"); - expect(html).toContain("Approval approval"); + expect(html).not.toContain("Approval approval"); expect(html).toContain("Jump to approval"); expect(html).toContain("border-sky-300/70"); }); diff --git a/ui/src/components/IssueBlockedNotice.tsx b/ui/src/components/IssueBlockedNotice.tsx index 89377af3a94..fe3dfd8fa46 100644 --- a/ui/src/components/IssueBlockedNotice.tsx +++ b/ui/src/components/IssueBlockedNotice.tsx @@ -8,7 +8,8 @@ import type { RequestConfirmationInteraction, SuggestTasksInteraction, } from "@paperclipai/shared"; -import { AlertTriangle, Hourglass } from "lucide-react"; +import { AlertTriangle, ArrowDown, ArrowUp, Hourglass } from "lucide-react"; +import { useEffect, useRef, useState } from "react"; import { createIssueDetailPath } from "../lib/issueDetailBreadcrumb"; import { formatAssigneeUserLabel } from "../lib/assignees"; import { IssueLinkQuicklook } from "./IssueLinkQuicklook"; @@ -378,38 +379,6 @@ export function IssueBlockedNotice({ return <>This issue is on hold pending a human decision.>; })(); - const explicitWaitingTargetLabel = (() => { - if (!pendingInteraction) { - if (pendingApproval) { - const id = pendingApproval.id; - return `Approval ${id.slice(0, 8)}`; - } - return null; - } - if (pendingInteraction.kind === "request_confirmation") { - const target = pendingInteraction.payload?.target ?? null; - if (target?.type === "issue_document" && target.key === "plan") { - const revLabel = target.revisionNumber != null ? `r${target.revisionNumber}` : "latest"; - return `Plan revision ${revLabel}`; - } - if (target?.label) return target.label; - if (target?.type === "custom" && target.key) return target.key; - return "Confirmation"; - } - if (pendingInteraction.kind === "ask_user_questions") { - const payload = pendingInteraction.payload as AskUserQuestionsPayload; - const count = payload?.questions?.length ?? 0; - if (count === 0) return "Questions"; - return `${count} ${count === 1 ? "question" : "questions"}`; - } - if (pendingInteraction.kind === "suggest_tasks") { - const count = pendingInteraction.payload?.tasks?.length ?? 0; - if (count === 0) return "Suggested tasks"; - return `${count} suggested ${count === 1 ? "task" : "tasks"}`; - } - return null; - })(); - const explicitWaitingResumeLabel = (() => { if (pendingInteraction) { const policy = pendingInteraction.continuationPolicy ?? "none"; @@ -432,37 +401,24 @@ export function IssueBlockedNotice({ return null; })(); - const explicitWaitingPills = (() => { + const explicitWaitingDetails = (() => { if (!showExplicitWaiting) return null; - const pillClass = - "inline-flex max-w-full items-center gap-1 rounded-md border border-sky-300/70 bg-white/80 px-1.5 py-0.5 text-[11px] font-medium text-sky-900 dark:border-sky-500/40 dark:bg-background/40 dark:text-sky-100"; - const labelClass = - "shrink-0 text-[10px] uppercase tracking-wide text-sky-700/80 dark:text-sky-300/80"; - const valueClass = "min-w-0 break-words"; - const pills: React.ReactNode[] = []; - if (explicitWaitingTargetLabel) { - pills.push( - - Target - {explicitWaitingTargetLabel} - , - ); - } - pills.push( - - Owner - {ownerLabel} - , + + const labelClass = "shrink-0 text-[10px] uppercase tracking-wide text-sky-700/80 dark:text-sky-300/80"; + return ( +