@skyhook-io/radar-app 1.16.1 → 1.16.2

package/src/components/diagnose/InvestigationRefusalAction.test.tsx

@@ -0,0 +1,156 @@
+import { describe, expect, it } from "vitest";
+import { renderToString } from "react-dom/server";
+import { DiagnoseError, investigationRefusal } from "../../api/diagnose";
+import { DiagnoseCustomizationProvider } from "../../context/DiagnoseCustomization";
+import {
+  InvestigationFailureNotice,
+  InvestigationStartErrorAlert,
+  InvestigationStatusCheckNotice,
+} from "./InvestigationView";
+
+const quota = new DiagnoseError(
+  402,
+  "Your organization has used this month's investigations.",
+  {
+    code: "ai_quota_exhausted",
+    reason: "allowance_used_free",
+    action: "upgrade",
+  },
+);
+
+describe("investigationRefusal", () => {
+  it("carries a host refusal's code, reason and action with its sentence", () => {
+    expect(investigationRefusal(quota)).toEqual({
+      status: 402,
+      message: "Your organization has used this month's investigations.",
+      code: "ai_quota_exhausted",
+      reason: "allowance_used_free",
+      action: "upgrade",
+    });
+  });
+
+  it("is null for Radar's own errors and for anything that isn't a DiagnoseError", () => {
+    expect(
+      investigationRefusal(
+        new DiagnoseError(409, "Too many investigations running."),
+      ),
+    ).toBeNull();
+    expect(investigationRefusal(new Error("network down"))).toBeNull();
+    expect(investigationRefusal(undefined)).toBeNull();
+  });
+});
+
+describe("InvestigationStartErrorAlert", () => {
+  const alert = (refusal = investigationRefusal(quota)) => (
+    <InvestigationStartErrorAlert
+      error={quota.message}
+      refusal={refusal}
+      onDismiss={() => {}}
+    />
+  );
+
+  it("shows the host's action beside the refusal", () => {
+    const html = renderToString(
+      <DiagnoseCustomizationProvider
+        value={undefined}
+        renderRefusalAction={(r) => (
+          <a href="/plans">{`Upgrade (${r.reason})`}</a>
+        )}
+      >
+        {alert()}
+      </DiagnoseCustomizationProvider>,
+    );
+    expect(html).toContain("this month&#x27;s investigations");
+    expect(html).toContain("Upgrade (allowance_used_free)");
+  });
+
+  it("shows only the sentence when the host offers no action", () => {
+    const html = renderToString(alert());
+    expect(html).toContain("this month&#x27;s investigations");
+    expect(html).not.toContain("Upgrade");
+  });
+
+  it("asks the host for nothing when the error carries no refusal", () => {
+    let asked = false;
+    renderToString(
+      <DiagnoseCustomizationProvider
+        value={undefined}
+        renderRefusalAction={() => {
+          asked = true;
+          return null;
+        }}
+      >
+        {alert(null)}
+      </DiagnoseCustomizationProvider>,
+    );
+    expect(asked).toBe(false);
+  });
+});
+
+const withHost = (node: React.ReactNode) =>
+  renderToString(
+    <DiagnoseCustomizationProvider
+      value={undefined}
+      renderRefusalAction={(r) => (
+        <a href="/plans">{`Upgrade (${r.reason})`}</a>
+      )}
+    >
+      {node}
+    </DiagnoseCustomizationProvider>,
+  );
+
+describe("InvestigationStatusCheckNotice (Findings)", () => {
+  it("says a refused status check couldn't run, with the host's action", () => {
+    const html = withHost(
+      <InvestigationStatusCheckNotice
+        message={quota.message}
+        uncertainOnly={false}
+        refusal={investigationRefusal(quota)}
+        onCheck={() => {}}
+        disabled={false}
+      />,
+    );
+    expect(html).toContain("Couldn&#x27;t check status:");
+    expect(html).not.toContain("Verification did not complete");
+    expect(html).toContain("Upgrade (allowance_used_free)");
+  });
+
+  it("keeps the verification wording, and no action, for a check that ran and failed", () => {
+    const html = withHost(
+      <InvestigationStatusCheckNotice
+        message="The agent stopped before checking."
+        uncertainOnly={false}
+        refusal={null}
+        onCheck={() => {}}
+        disabled={false}
+      />,
+    );
+    expect(html).toContain("Verification did not complete:");
+    expect(html).not.toContain("Upgrade");
+  });
+});
+
+describe("InvestigationFailureNotice (Activity)", () => {
+  it("keeps a status warning first and shows a newer refused follow-up, with its action, beside it", () => {
+    const html = withHost(
+      <InvestigationFailureNotice
+        message="Radar couldn't confirm whether the apply request completed."
+        refusal={null}
+        statusCheck={{
+          label: "Check current status",
+          onCheck: () => {},
+          disabled: false,
+        }}
+        followUp={{
+          message: quota.message,
+          refusal: investigationRefusal(quota),
+        }}
+      />,
+    );
+    expect(
+      html.indexOf("couldn&#x27;t confirm whether the apply"),
+    ).toBeLessThan(html.indexOf("this month&#x27;s investigations"));
+    expect(html).toContain("Check current status");
+    expect(html).toContain("Upgrade (allowance_used_free)");
+  });
+});

package/src/components/diagnose/InvestigationRefusalAction.tsx

@@ -0,0 +1,14 @@
+import type { InvestigationRefusal } from "../../api/diagnose";
+import { useDiagnoseCustomization } from "../../context/DiagnoseCustomization";
+
+/** The host's action for a refused start or follow-up, or nothing when the
+ * refusal carries no code, reason or action, or the host offers none. */
+export function InvestigationRefusalAction({
+  refusal,
+}: {
+  refusal: InvestigationRefusal | null;
+}) {
+  const { renderRefusalAction } = useDiagnoseCustomization();
+  if (!refusal || !renderRefusalAction) return null;
+  return <>{renderRefusalAction(refusal)}</>;
+}

package/src/components/diagnose/InvestigationView.tsx

@@ -20,6 +20,7 @@ import {
   investigationApplyAttemptVerified,
   investigationAssessmentNeedsCurrentStateVerification,
   investigationApplyRejectionIsDefinitive,
+  investigationFailureShown,
   investigationApplyCompletionEffects,
   investigationTurnWithTerminalEvent,
   investigationApplyTerminalNeedsClusterRefresh,
@@ -74,10 +75,13 @@ import {
   addTurn,
   stopRun,
   DiagnoseError,
+  investigationRefusal,
   type DiagnoseStreamEvent,
+  type InvestigationRefusal,
   type RunSummary,
 } from "../../api/diagnose";
 import { useDiagnose } from "./DiagnoseContext";
+import { InvestigationRefusalAction } from "./InvestigationRefusalAction";
 import {
   TurnView,
   ResultCard,
@@ -114,9 +118,11 @@ const RECHECK_QUESTION =
 
 export function InvestigationStartErrorAlert({
   error,
+  refusal = null,
   onDismiss,
 }: {
   error: string;
+  refusal?: InvestigationRefusal | null;
   onDismiss: () => void;
 }) {
   return (
@@ -130,6 +136,11 @@ export function InvestigationStartErrorAlert({
           Couldn't start a new investigation
         </div>
         <div className="text-theme-text-secondary">{error}</div>
+        {refusal ? (
+          <div className="mt-1.5">
+            <InvestigationRefusalAction refusal={refusal} />
+          </div>
+        ) : null}
       </div>
       <button
         type="button"
@@ -142,6 +153,99 @@ export function InvestigationStartErrorAlert({
   );
 }
 
+// The activity pane's one failure notice: a status warning (with its retry) or
+// a failed request, the host's action beside a refusal, and a newer failed
+// follow-up shown under a status warning it can't replace.
+export function InvestigationFailureNotice({
+  message,
+  refusal,
+  statusCheck,
+  followUp,
+}: {
+  message: string;
+  refusal: InvestigationRefusal | null;
+  statusCheck: { label: string; onCheck: () => void; disabled: boolean } | null;
+  followUp: { message: string; refusal: InvestigationRefusal | null } | null;
+}) {
+  return (
+    <div className="flex items-start gap-2 rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-sm text-theme-text-primary">
+      <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-red-400" />
+      <div className="min-w-0 flex-1">
+        <span>{message}</span>
+        {refusal ? (
+          <div className="mt-2">
+            <InvestigationRefusalAction refusal={refusal} />
+          </div>
+        ) : null}
+        {statusCheck ? (
+          <button
+            type="button"
+            onClick={statusCheck.onCheck}
+            disabled={statusCheck.disabled}
+            className="mt-2 block rounded-md border border-red-500/30 px-2 py-1 text-xs font-medium text-theme-text-primary hover:bg-red-500/10 disabled:opacity-50"
+          >
+            {statusCheck.label}
+          </button>
+        ) : null}
+        {followUp ? (
+          <div className="mt-3 border-t border-red-500/20 pt-2">
+            <span>{followUp.message}</span>
+            {followUp.refusal ? (
+              <div className="mt-2">
+                <InvestigationRefusalAction refusal={followUp.refusal} />
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+// The Findings pane's status line. A refused status check never ran, so it
+// says it couldn't check, and offers the host's action like Activity does.
+export function InvestigationStatusCheckNotice({
+  message,
+  uncertainOnly,
+  refusal,
+  onCheck,
+  disabled,
+}: {
+  message: string;
+  uncertainOnly: boolean;
+  refusal: InvestigationRefusal | null;
+  onCheck: () => void;
+  disabled: boolean;
+}) {
+  return (
+    <div className="mt-2 flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/5 px-3 py-2 text-xs text-theme-text-secondary">
+      <AlertTriangle className="h-3.5 w-3.5 shrink-0 text-red-400" />
+      <div className="min-w-0 flex-1">
+        <span>
+          {refusal
+            ? `Couldn't check status: ${message}`
+            : uncertainOnly
+              ? message
+              : `Verification did not complete: ${message}`}
+        </span>
+        {refusal ? (
+          <div className="mt-1.5">
+            <InvestigationRefusalAction refusal={refusal} />
+          </div>
+        ) : null}
+      </div>
+      <button
+        type="button"
+        onClick={onCheck}
+        disabled={disabled}
+        className="shrink-0 rounded-md border border-theme-border px-2 py-1 font-medium text-theme-text-primary hover:bg-theme-hover disabled:opacity-50"
+      >
+        {uncertainOnly ? "Check current status" : "Check current status again"}
+      </button>
+    </div>
+  );
+}
+
 function captureEvidenceCardLayout(container: HTMLElement) {
   const containerTop = container.getBoundingClientRect().top;
   return new Map(
@@ -176,8 +280,14 @@ export function InvestigationView({
   onOpenTimeline?: (scope: InvestigationTimelineScope) => void;
 }) {
   const { kind, namespace, name } = run;
-  const { refreshRuns, openInvestigation, startError, dismissError, agents } =
-    useDiagnose();
+  const {
+    refreshRuns,
+    openInvestigation,
+    startError,
+    startRefusal,
+    dismissError,
+    agents,
+  } = useDiagnose();
   // Capabilities are the declared ones of the agent that ran this run, not
   // the picker's: a reopened run keeps the backend it was made with.
   const runAgent = agents.find((agent) => agent.name === run.agent);
@@ -215,6 +325,7 @@ export function InvestigationView({
     sequence: number;
     status: "running" | "error";
     error?: string;
+    refusal?: InvestigationRefusal | null;
   } | null>(null);
   const [explanationReveal, setExplanationReveal] = useState<{
     sequence: number;
@@ -226,6 +337,12 @@ export function InvestigationView({
     useState<InvestigationHistoryUnavailableState | null>(null);
   const [input, setInput] = useState("");
   const [actionError, setActionError] = useState<string | null>(null);
+  // The host's refusal behind a failed follow-up, for its action beside the error.
+  const [actionRefusal, setActionRefusal] =
+    useState<InvestigationRefusal | null>(null);
+  // The host's refusal behind a failed status check, for its action beside it.
+  const [verificationRefusal, setVerificationRefusal] =
+    useState<InvestigationRefusal | null>(null);
   const [verificationError, setVerificationError] = useState<string | null>(
     null,
   );
@@ -242,7 +359,7 @@ export function InvestigationView({
   // the server-owned verification turn arrives. This is presentation state only:
   // the durable server job, never the browser, schedules verification.
   const [verificationPending, setVerificationPending] = useState(false);
-  // The panes are simultaneous above the workspace breakpoint and tabs below it.
+  // On the full page the panes sit side by side; in the panel they are tabs.
   // Successful/stale history opens on its outcome; running and ended-early runs
   // open on Activity, where the user can immediately see what happened.
   const [narrowPane, setNarrowPane] = useState<"activity" | "evidence">(() =>
@@ -294,11 +411,11 @@ export function InvestigationView({
   const paneSelectionTouchedRef = useRef(false);
   const evidenceRevealRequestIdRef = useRef(0);
   const activityRevealRequestIdRef = useRef(0);
-  const workspaceId = useId();
-  const activityTabId = `${workspaceId}-activity-tab`;
-  const activityPaneId = `${workspaceId}-activity-pane`;
-  const findingsTabId = `${workspaceId}-findings-tab`;
-  const findingsPaneId = `${workspaceId}-findings-pane`;
+  const viewId = useId();
+  const activityTabId = `${viewId}-activity-tab`;
+  const activityPaneId = `${viewId}-activity-pane`;
+  const findingsTabId = `${viewId}-findings-tab`;
+  const findingsPaneId = `${viewId}-findings-pane`;
   // Stick-to-bottom: follow streaming output while the user is at/near the bottom,
   // detach the moment they scroll up to read history, re-attach when they return.
   // Tracked from scroll events (the user's intent) — NOT post-render geometry, which
@@ -419,7 +536,9 @@ export function InvestigationView({
     setExplanationReveal(null);
     setHistoryUnavailable(null);
     setActionError(null);
+    setActionRefusal(null);
     setVerificationError(null);
+    setVerificationRefusal(null);
     setVerificationPending(false);
     setLocalApplyAttemptAssessmentIdx(-1);
     setApplyOutcomeUncertain(null);
@@ -468,6 +587,7 @@ export function InvestigationView({
             if (ev.verify) {
               setVerificationPending(false);
               setVerificationError(null);
+              setVerificationRefusal(null);
             }
             streamInFlightRef.current = true;
             if (live) setBusy(true);
@@ -565,6 +685,7 @@ export function InvestigationView({
                 setVerificationError(
                   ev.error || "The verification could not be completed.",
                 );
+                setVerificationRefusal(null);
               }
             }
             updateLast((t) => investigationTurnWithTerminalEvent(t, ev, live));
@@ -745,6 +866,9 @@ export function InvestigationView({
     if (!q || interactionsBlocked) return;
     setInput("");
     setActionError(null);
+    setActionRefusal(null);
+    setVerificationError(null);
+    setVerificationRefusal(null);
     setNarrowPane("activity");
     suppressEvidenceMotionRef.current = false;
     pinnedRef.current = true; // a user-initiated turn always follows to the bottom
@@ -752,6 +876,7 @@ export function InvestigationView({
     addTurn(run.id, { question: q }).catch((e) => {
       setRequestPending(false);
       setActionError(e instanceof DiagnoseError ? e.message : "Couldn't send.");
+      setActionRefusal(investigationRefusal(e));
     });
   };
   const stop = () => stopRun(run.id);
@@ -759,6 +884,7 @@ export function InvestigationView({
   const askExplanation = (sequence: number) => {
     if (interactionsBlocked) return;
     setActionError(null);
+    setActionRefusal(null);
     const serial = ++explanationRequestSerial.current;
     const previousTurns = turnsRef.current.length;
     setExplanationRequest({ sequence, status: "running" });
@@ -780,6 +906,7 @@ export function InvestigationView({
           e instanceof DiagnoseError
             ? e.message
             : "Couldn't request an explanation.",
+        refusal: investigationRefusal(e),
       });
     });
   };
@@ -832,7 +959,9 @@ export function InvestigationView({
     setConfirmApply(false);
     if (interactionsBlocked) return;
     setActionError(null);
+    setActionRefusal(null);
     setVerificationError(null);
+    setVerificationRefusal(null);
     setApplyOutcomeUncertain(null);
     setNarrowPane("activity");
     suppressEvidenceMotionRef.current = false;
@@ -852,6 +981,7 @@ export function InvestigationView({
         setLocalApplyAttemptAssessmentIdx(-1);
         setApplyOutcomeUncertain(null);
         setActionError(e.message.trim() || "Couldn't apply.");
+        setActionRefusal(investigationRefusal(e));
         return;
       }
       refreshClusterState();
@@ -866,7 +996,9 @@ export function InvestigationView({
   const checkStatus = () => {
     if (interactionsBlocked) return Promise.resolve();
     setActionError(null);
+    setActionRefusal(null);
     setVerificationError(null);
+    setVerificationRefusal(null);
     setNarrowPane("activity");
     suppressEvidenceMotionRef.current = false;
     pinnedRef.current = true;
@@ -881,6 +1013,7 @@ export function InvestigationView({
           ? error.message
           : "Couldn't check status.",
       );
+      setVerificationRefusal(investigationRefusal(error));
     });
   };
 
@@ -1280,12 +1413,23 @@ export function InvestigationView({
     0,
   );
   const latestVerification = [...turns].reverse().find((turn) => turn.verify);
-  const displayedVerificationError =
-    latestVerification?.status === "error"
-      ? latestVerification.error || "The verification could not be completed."
-      : verificationError;
-  const displayedStatusCheckError =
-    displayedVerificationError || applyOutcomeUncertain;
+  const {
+    verificationError: displayedVerificationError,
+    statusCheckError: displayedStatusCheckError,
+    message: shownFailure,
+    refusal: shownActionRefusal,
+    followUp: shownFollowUp,
+  } = investigationFailureShown({
+    actionError,
+    actionRefusal,
+    verificationError,
+    verificationRefusal,
+    savedVerificationError:
+      latestVerification?.status === "error"
+        ? latestVerification.error || "The verification could not be completed."
+        : null,
+    applyOutcomeUncertain,
+  });
   const findingsTabAccessibleLabel =
     "Findings: current assessment, Radar evidence, and next steps";
   const currentAssessmentCoverageLimited = investigationEvidenceCoverageLimited(
@@ -1476,17 +1620,17 @@ export function InvestigationView({
       ? Math.round((Date.now() - runningSinceRef.current) / 1000)
       : 0,
   });
-  const showSplitWorkspace = maximized;
-  const splitGridClass = showSplitWorkspace
+  const showSidePanes = maximized;
+  const splitGridClass = showSidePanes
     ? "@min-[1000px]/investigation:grid-cols-[minmax(320px,min(30%,520px))_minmax(0,1fr)]"
     : "";
-  const splitTabClass = showSplitWorkspace
+  const splitTabClass = showSidePanes
     ? "@min-[1000px]/investigation:hidden"
     : "";
-  const splitPaneClass = showSplitWorkspace
+  const splitPaneClass = showSidePanes
     ? "@min-[1000px]/investigation:flex"
     : "";
-  const splitActivityBorderClass = showSplitWorkspace
+  const splitActivityBorderClass = showSidePanes
     ? "@min-[1000px]/investigation:border-r @min-[1000px]/investigation:border-theme-border"
     : "";
 
@@ -1637,11 +1781,11 @@ export function InvestigationView({
       <section
         ref={nextStepsRef}
         tabIndex={-1}
-        aria-labelledby={`${workspaceId}-next-steps`}
+        aria-labelledby={`${viewId}-next-steps`}
         className="investigation-next-steps rounded-xl border p-4 outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
       >
         <h2
-          id={`${workspaceId}-next-steps`}
+          id={`${viewId}-next-steps`}
           className="text-lg font-semibold text-theme-text-primary"
         >
           {earlierPlan ? "Earlier proposed steps" : "Next steps"}
@@ -1678,7 +1822,7 @@ export function InvestigationView({
 
   return (
     <div
-      data-investigation-workspace
+      data-investigation-view
       className={`@container/investigation relative flex min-h-0 flex-1 flex-col bg-theme-surface ${maximized ? "investigation-split-enabled" : ""}`}
     >
       {stale ? (
@@ -1740,6 +1884,7 @@ export function InvestigationView({
       {startError ? (
         <InvestigationStartErrorAlert
           error={startError}
+          refusal={startRefusal}
           onDismiss={dismissError}
         />
       ) : null}
@@ -1769,7 +1914,7 @@ export function InvestigationView({
 
       <div
         role="group"
-        aria-label="Investigation workspace"
+        aria-label="Investigation view"
         className={`grid grid-cols-2 border-b border-theme-border bg-theme-base/40 p-1 ${splitTabClass}`}
       >
         <button
@@ -1989,7 +2134,7 @@ export function InvestigationView({
                             ) : undefined;
                           })()}
                         />
-                        {showSplitWorkspace &&
+                        {showSidePanes &&
                         index === currentAssessmentIdx &&
                         turn.timeline.length === 0 ? (
                           <p className="hidden text-sm text-theme-text-tertiary @min-[1000px]/investigation:block">
@@ -2039,26 +2184,25 @@ export function InvestigationView({
                       </Fragment>
                     );
                   })}
-                  {(actionError || displayedStatusCheckError) && (
-                    <div className="flex items-start gap-2 rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-sm text-theme-text-primary">
-                      <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-red-400" />
-                      <div className="min-w-0 flex-1">
-                        <span>{displayedStatusCheckError || actionError}</span>
-                        {displayedStatusCheckError ? (
-                          <button
-                            type="button"
-                            onClick={checkStatus}
-                            disabled={interactionsBlocked}
-                            className="mt-2 block rounded-md border border-red-500/30 px-2 py-1 text-xs font-medium text-theme-text-primary hover:bg-red-500/10 disabled:opacity-50"
-                          >
-                            {applyOutcomeUncertain &&
-                            !displayedVerificationError
-                              ? "Check current status"
-                              : "Check current status again"}
-                          </button>
-                        ) : null}
-                      </div>
-                    </div>
+                  {shownFailure && (
+                    <InvestigationFailureNotice
+                      message={shownFailure}
+                      refusal={shownActionRefusal}
+                      statusCheck={
+                        displayedStatusCheckError
+                          ? {
+                              label:
+                                applyOutcomeUncertain &&
+                                !displayedVerificationError
+                                  ? "Check current status"
+                                  : "Check current status again",
+                              onCheck: checkStatus,
+                              disabled: interactionsBlocked,
+                            }
+                          : null
+                      }
+                      followUp={shownFollowUp}
+                    />
                   )}
                 </div>
               </div>
@@ -2169,12 +2313,12 @@ export function InvestigationView({
                       not a fifth, and it fills the pane it is given. */}
                   <div className="space-y-3">
                     <section
-                      aria-labelledby={`${workspaceId}-assessment-heading`}
+                      aria-labelledby={`${viewId}-assessment-heading`}
                       className="investigation-assessment rounded-xl border p-3"
                     >
                       <div className="flex flex-wrap items-center gap-1.5">
                         <h2
-                          id={`${workspaceId}-assessment-heading`}
+                          id={`${viewId}-assessment-heading`}
                           className="text-lg font-semibold text-theme-text-primary"
                         >
                           {assessmentNeedsCurrentStateVerification
@@ -2314,26 +2458,16 @@ export function InvestigationView({
                         </div>
                       )}
                       {displayedStatusCheckError ? (
-                        <div className="mt-2 flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/5 px-3 py-2 text-xs text-theme-text-secondary">
-                          <AlertTriangle className="h-3.5 w-3.5 shrink-0 text-red-400" />
-                          <span className="min-w-0 flex-1">
-                            {applyOutcomeUncertain &&
+                        <InvestigationStatusCheckNotice
+                          message={displayedStatusCheckError}
+                          uncertainOnly={
+                            !!applyOutcomeUncertain &&
                             !displayedVerificationError
-                              ? displayedStatusCheckError
-                              : `Verification did not complete: ${displayedStatusCheckError}`}
-                          </span>
-                          <button
-                            type="button"
-                            onClick={checkStatus}
-                            disabled={interactionsBlocked}
-                            className="shrink-0 rounded-md border border-theme-border px-2 py-1 font-medium text-theme-text-primary hover:bg-theme-hover disabled:opacity-50"
-                          >
-                            {applyOutcomeUncertain &&
-                            !displayedVerificationError
-                              ? "Check current status"
-                              : "Check current status again"}
-                          </button>
-                        </div>
+                          }
+                          refusal={shownActionRefusal}
+                          onCheck={checkStatus}
+                          disabled={interactionsBlocked}
+                        />
                       ) : null}
                     </section>