= {}): Issue {
- return {
- id: "issue-1",
- companyId: "company-1",
- projectId: null,
- projectWorkspaceId: null,
- goalId: null,
- parentId: null,
- title: "Watch deploy",
- description: null,
- status: "in_progress",
- priority: "medium",
- assigneeAgentId: "agent-1",
- assigneeUserId: null,
- responsibleUserId: null,
- checkoutRunId: null,
- executionRunId: null,
- executionAgentNameKey: null,
- executionLockedAt: null,
- createdByAgentId: null,
- createdByUserId: "local-board",
- issueNumber: 1,
- identifier: "PAP-1",
- requestDepth: 0,
- billingCode: null,
- assigneeAdapterOverrides: null,
- executionPolicy: {
- mode: "normal",
- commentRequired: true,
- stages: [],
- monitor: {
- nextCheckAt: "2026-04-11T12:30:00.000Z",
- notes: "Check deployment health",
- scheduledBy: "board",
- },
- },
- executionState: {
- status: "idle",
- currentStageId: null,
- currentStageIndex: null,
- currentStageType: null,
- currentParticipant: null,
- returnAssignee: null,
- reviewRequest: null,
- completedStageIds: [],
- lastDecisionId: null,
- lastDecisionOutcome: null,
- monitor: {
- status: "scheduled",
- nextCheckAt: "2026-04-11T12:30:00.000Z",
- lastTriggeredAt: null,
- attemptCount: 0,
- notes: "Check deployment health",
- scheduledBy: "board",
- clearedAt: null,
- clearReason: null,
- },
- },
- monitorNextCheckAt: new Date("2026-04-11T12:30:00.000Z"),
- monitorLastTriggeredAt: null,
- monitorAttemptCount: 0,
- monitorNotes: "Check deployment health",
- monitorScheduledBy: "board",
- executionWorkspaceId: null,
- executionWorkspacePreference: null,
- executionWorkspaceSettings: null,
- startedAt: null,
- completedAt: null,
- cancelledAt: null,
- hiddenAt: null,
- createdAt: new Date("2026-04-11T10:00:00.000Z"),
- updatedAt: new Date("2026-04-11T10:00:00.000Z"),
- ...overrides,
- workMode: overrides.workMode ?? "standard",
- };
-}
-
-describe("IssueMonitorActivityCard", () => {
- let container: HTMLDivElement;
-
- beforeEach(() => {
- vi.useFakeTimers();
- vi.setSystemTime(new Date("2026-04-11T12:00:00.000Z"));
- container = document.createElement("div");
- document.body.appendChild(container);
- });
-
- afterEach(() => {
- vi.useRealTimers();
- container.remove();
- });
-
- it("renders the scheduled monitor details and check-now action", () => {
- const onCheckNow = vi.fn();
- const root = createRoot(container);
-
- act(() => {
- root.render(
);
- });
-
- expect(container.textContent).toContain("Monitor scheduled");
- expect(container.textContent).toContain("Next check");
- expect(container.textContent).toContain("in 30m");
- expect(container.textContent).toContain("Check deployment health");
-
- const button = Array.from(container.querySelectorAll("button")).find((candidate) =>
- candidate.textContent?.includes("Check now"),
- );
- expect(button).toBeTruthy();
-
- act(() => {
- button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
- });
-
- expect(onCheckNow).toHaveBeenCalledTimes(1);
-
- act(() => root.unmount());
- });
-
- it("does not render external references from monitor metadata", () => {
- const root = createRoot(container);
-
- act(() => {
- root.render(
-
,
- );
- });
-
- expect(container.textContent).toContain("Deploy provider");
- expect(container.textContent).not.toContain("provider.example");
- expect(container.textContent).not.toContain("token=secret");
-
- act(() => root.unmount());
- });
-
- it("renders without throwing when monitorNextCheckAt arrives as an ISO string", () => {
- const root = createRoot(container);
-
- act(() => {
- root.render(
-
,
- );
- });
-
- expect(container.textContent).toContain("Monitor scheduled");
- expect(container.textContent).toContain("Next check");
- expect(container.textContent).toContain("in 30m");
-
- act(() => root.unmount());
- });
-
- it("renders nothing when the issue has no scheduled monitor", () => {
- const root = createRoot(container);
-
- act(() => {
- root.render(
-
,
- );
- });
-
- expect(container.textContent).toBe("");
-
- act(() => root.unmount());
- });
-});
diff --git a/ui/src/components/IssueMonitorActivityCard.tsx b/ui/src/components/IssueMonitorActivityCard.tsx
deleted file mode 100644
index 58764a93ee..0000000000
--- a/ui/src/components/IssueMonitorActivityCard.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import type { Issue } from "@paperclipai/shared";
-import { Button } from "@/components/ui/button";
-import { formatMonitorOffset } from "@/lib/issue-monitor";
-import { formatDateTime } from "@/lib/utils";
-
-function resolveScheduledMonitor(issue: Issue) {
- const nextCheckAt =
- issue.monitorNextCheckAt ??
- issue.executionPolicy?.monitor?.nextCheckAt ??
- issue.executionState?.monitor?.nextCheckAt ??
- null;
- if (!nextCheckAt) return null;
-
- return {
- nextCheckAt,
- notes: issue.executionPolicy?.monitor?.notes ?? issue.monitorNotes ?? issue.executionState?.monitor?.notes ?? null,
- attemptCount: issue.monitorAttemptCount ?? issue.executionState?.monitor?.attemptCount ?? 0,
- serviceName: issue.executionPolicy?.monitor?.serviceName ?? issue.executionState?.monitor?.serviceName ?? null,
- };
-}
-
-interface IssueMonitorActivityCardProps {
- issue: Issue;
- onCheckNow?: (() => void) | null;
- checkingNow?: boolean;
-}
-
-export function IssueMonitorActivityCard({
- issue,
- onCheckNow = null,
- checkingNow = false,
-}: IssueMonitorActivityCardProps) {
- const monitor = resolveScheduledMonitor(issue);
- if (!monitor) return null;
-
- return (
-
-
-
-
Monitor scheduled
-
- Next check {formatDateTime(monitor.nextCheckAt)} ({formatMonitorOffset(monitor.nextCheckAt)})
-
- {monitor.notes ? (
-
{monitor.notes}
- ) : null}
- {monitor.serviceName ? (
-
- {monitor.serviceName}
-
- ) : null}
- {monitor.attemptCount > 0 ? (
-
Attempt {monitor.attemptCount}
- ) : null}
-
- {onCheckNow ? (
-
- {checkingNow ? "Checking..." : "Check now"}
-
- ) : null}
-
-
- );
-}
diff --git a/ui/src/components/IssueMonitorBanner.test.tsx b/ui/src/components/IssueMonitorBanner.test.tsx
new file mode 100644
index 0000000000..53c9f0fc7b
--- /dev/null
+++ b/ui/src/components/IssueMonitorBanner.test.tsx
@@ -0,0 +1,196 @@
+// @vitest-environment jsdom
+
+import { flushSync } from "react-dom";
+import { createRoot } from "react-dom/client";
+import type { Issue } from "@paperclipai/shared";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+ IssueMonitorBanner,
+ IssueMonitorComposerStrip,
+ buildMonitorSurfaceCopy,
+ hasVisibleMonitorSurface,
+} from "./IssueMonitorBanner";
+import type { DerivedMonitorState } from "@/lib/issue-monitor";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+const NOW = new Date("2026-07-17T20:00:00.000Z");
+
+function derived(overrides: Partial
& { state: DerivedMonitorState["state"] }): DerivedMonitorState {
+ return {
+ source: "monitor",
+ nextCheckAt: null,
+ attemptCount: 0,
+ serviceName: null,
+ ...overrides,
+ };
+}
+
+describe("buildMonitorSurfaceCopy", () => {
+ it("leads with two-unit relative time while scheduled", () => {
+ const copy = buildMonitorSurfaceCopy(
+ derived({
+ state: "scheduled",
+ nextCheckAt: new Date(NOW.getTime() + (2 * 60 + 12) * 60_000).toISOString(),
+ attemptCount: 1,
+ serviceName: "vercel-deploy",
+ }),
+ NOW,
+ );
+
+ expect(copy).not.toBeNull();
+ expect(copy!.bannerTitle).toBe("Waiting on monitor — resumes in 2h 12m");
+ expect(copy!.stripTitle).toBe("Resumes in 2h 12m");
+ expect(copy!.tone).toBe("info");
+ expect(copy!.bannerMeta).toContain("Attempt 1");
+ expect(copy!.bannerMeta).toContain("Watching: vercel-deploy");
+ // Absolute time carries the "(your time)" hint on the banner only.
+ expect(copy!.bannerMeta.some((piece) => piece.includes("(your time)"))).toBe(true);
+ expect(copy!.stripMeta.some((piece) => piece.includes("(your time)"))).toBe(false);
+ });
+
+ it("keeps the retrying attempt count visible", () => {
+ const copy = buildMonitorSurfaceCopy(
+ derived({
+ state: "retrying",
+ nextCheckAt: new Date(NOW.getTime() + 90 * 60_000).toISOString(),
+ attemptCount: 3,
+ }),
+ NOW,
+ );
+ expect(copy!.stripTitle).toBe("Resumes in 1h 30m");
+ expect(copy!.stripMeta).toContain("Attempt 3");
+ });
+
+ it("uses agent copy for scheduled retries without a monitor", () => {
+ const copy = buildMonitorSurfaceCopy(
+ derived({
+ state: "retrying",
+ source: "scheduled-retry",
+ nextCheckAt: new Date(NOW.getTime() + 90 * 60_000).toISOString(),
+ attemptCount: 2,
+ }),
+ NOW,
+ );
+
+ expect(copy!.bannerTitle).toBe("Agent resumes in 1h 30m");
+ expect(copy!.stripTitle).toBe("Resumes in 1h 30m");
+ });
+
+ it("switches copy for due-now and overdue states", () => {
+ const dueNow = buildMonitorSurfaceCopy(
+ derived({ state: "due-now", nextCheckAt: NOW.toISOString(), attemptCount: 1 }),
+ NOW,
+ );
+ expect(dueNow!.bannerTitle).toBe("Waiting on monitor — due now");
+ expect(dueNow!.stripTitle).toBe("Due now");
+ expect(dueNow!.bannerMeta).toContain("Checking momentarily…");
+ expect(dueNow!.tone).toBe("info");
+
+ const overdue = buildMonitorSurfaceCopy(
+ derived({
+ state: "overdue",
+ nextCheckAt: new Date(NOW.getTime() - 18 * 60_000).toISOString(),
+ attemptCount: 2,
+ }),
+ NOW,
+ );
+ expect(overdue!.bannerTitle).toBe("Waiting on monitor — overdue by 18m");
+ expect(overdue!.stripTitle).toBe("Overdue by 18m");
+ expect(overdue!.bannerMeta).toContain("Fires on next tick");
+ expect(overdue!.tone).toBe("warning");
+ });
+
+ it("hides both surfaces when cleared, none, or without a next check", () => {
+ expect(buildMonitorSurfaceCopy(derived({ state: "cleared", attemptCount: 2 }), NOW)).toBeNull();
+ expect(buildMonitorSurfaceCopy(derived({ state: "none" }), NOW)).toBeNull();
+ // A "scheduled" state with no timestamp cannot render an ETA — hide.
+ expect(buildMonitorSurfaceCopy(derived({ state: "scheduled", nextCheckAt: null }), NOW)).toBeNull();
+ });
+});
+
+describe("IssueMonitorBanner / IssueMonitorComposerStrip rendering", () => {
+ let container: HTMLDivElement;
+
+ beforeEach(() => {
+ vi.useFakeTimers();
+ vi.setSystemTime(NOW);
+ container = document.createElement("div");
+ document.body.appendChild(container);
+ });
+
+ afterEach(() => {
+ vi.useRealTimers();
+ container.remove();
+ });
+
+ function issueWithMonitor(nextCheckAt: string | null): Issue {
+ return {
+ executionState: nextCheckAt
+ ? { monitor: { status: "scheduled", nextCheckAt, attemptCount: 1, serviceName: "vercel-deploy" } }
+ : null,
+ scheduledRetry: null,
+ } as unknown as Issue;
+ }
+
+ it("renders the banner with a working Check now button while waiting", () => {
+ const onCheckNow = vi.fn();
+ expect(hasVisibleMonitorSurface(issueWithMonitor(new Date(NOW.getTime() + 2 * 60 * 60_000).toISOString()))).toBe(true);
+ const root = createRoot(container);
+ flushSync(() => {
+ root.render(
+
+ {checkingNow ? "Checking…" : "Check now"}
+
+ );
+}
+
+export interface IssueMonitorSurfaceProps {
+ issue: Issue;
+ onCheckNow?: (() => void) | null;
+ checkingNow?: boolean;
+}
+
+/**
+ * Pinned banner rendered between the issue title and description while a
+ * monitor is waiting. Replaces the description-area "Monitor scheduled" card
+ * for the waiting state (PAP-14557 decision 1) — the two never render at once.
+ */
+export function IssueMonitorBanner({
+ issue,
+ onCheckNow = null,
+ checkingNow = false,
+}: IssueMonitorSurfaceProps) {
+ const copy = useMonitorSurfaceCopy(issue);
+ if (!copy) return null;
+
+ return (
+ {copy.bannerMeta.join(" · ")}
+
+ );
+}
+
+/**
+ * Slim, inline (not sticky) strip anchored directly above the reply composer.
+ * Mirrors the banner's monitor state and reminds the reader that replying wakes
+ * the agent early (PAP-14557 decisions 2 + wireframe 02).
+ */
+export function IssueMonitorComposerStrip({
+ issue,
+ onCheckNow = null,
+ checkingNow = false,
+ className,
+}: IssueMonitorSurfaceProps & { className?: string }) {
+ const copy = useMonitorSurfaceCopy(issue);
+ if (!copy) return null;
+
+ return (
+
+
+
+
+
+
{copy.stripTitle}
+
{copy.stripMeta.join(" · ")}
+
+
+ {onCheckNow ?
: null}
+
+
+ Sending a reply wakes the agent now — before the scheduled check.
+
+
+ ,
+ );
+ });
+ };
+
+ renderMonitor(createIssue({
+ executionPolicy: createExecutionPolicy({ monitor: { ...baseMonitorState, serviceName: "vercel-deploy" } }),
+ executionState: createExecutionState({ monitor: baseMonitorState }),
+ monitorAttemptCount: 1,
+ }));
+ await flush();
+ expect(monitorRowText()).toContain("In 2h 12m");
+ expect(monitorRowText()).toContain("Today, 4:08 PM · Attempt 1");
+
+ renderMonitor(createIssue({
+ executionPolicy: createExecutionPolicy({ monitor: { ...baseMonitorState, nextCheckAt: "2026-07-17T18:08:00.000Z" } }),
+ executionState: createExecutionState({ monitor: { ...baseMonitorState, nextCheckAt: "2026-07-17T16:08:00.000Z" } }),
+ monitorNextCheckAt: new Date("2026-07-17T17:08:00.000Z"),
+ }));
+ await flush();
+ expect(monitorRowText()).toContain("In 2h 12m");
+ expect(monitorRowText()).toContain("Today, 4:08 PM");
+
+ renderMonitor(createIssue({
+ executionPolicy: createExecutionPolicy({ monitor: { ...baseMonitorState, serviceName: "vercel-deploy" } }),
+ executionState: createExecutionState({ monitor: { ...baseMonitorState, attemptCount: 3 } }),
+ monitorAttemptCount: 3,
+ }));
+ await flush();
+ expect(monitorRowText()).toContain("Attempt 3");
+
+ renderMonitor(createIssue({
+ executionPolicy: createExecutionPolicy({ monitor: { ...baseMonitorState, nextCheckAt: "2026-07-17T13:56:00.000Z" } }),
+ executionState: createExecutionState({ monitor: { ...baseMonitorState, nextCheckAt: "2026-07-17T13:56:00.000Z" } }),
+ }));
+ await flush();
+ expect(monitorRowText()).toContain("Due now");
+ expect(monitorRowText()).toContain("checking momentarily…");
+
+ renderMonitor(createIssue({
+ executionPolicy: createExecutionPolicy({ monitor: { ...baseMonitorState, nextCheckAt: "2026-07-17T13:38:00.000Z" } }),
+ executionState: createExecutionState({ monitor: { ...baseMonitorState, nextCheckAt: "2026-07-17T13:38:00.000Z" } }),
+ }));
+ await flush();
+ expect(monitorRowText()).toContain("Overdue by 18m");
+ expect(monitorRowText()).toContain("Today, 1:38 PM · fires on next tick");
+
+ renderMonitor(createIssue({
+ executionPolicy: createExecutionPolicy(),
+ executionState: createExecutionState({ monitor: {
+ ...baseMonitorState,
+ status: "cleared",
+ nextCheckAt: null,
+ lastTriggeredAt: "2026-07-17T11:56:00.000Z",
+ attemptCount: 2,
+ clearedAt: "2026-07-17T12:00:00.000Z",
+ clearReason: "manual",
+ } }),
+ monitorAttemptCount: 2,
+ monitorLastTriggeredAt: new Date("2026-07-17T11:56:00.000Z"),
+ }));
+ await flush();
+ expect(monitorRowText()).toContain("Cleared");
+ expect(monitorRowText()).toContain("last checked 2h ago · after attempt 2");
+
+ renderMonitor(createIssue());
+ await flush();
+ expect(monitorRowText()).toContain("None");
+
+ act(() => root.unmount());
+ dateNowSpy.mockRestore();
});
const watchdogAgent = {
diff --git a/ui/src/components/issue-properties/IssueProperties.tsx b/ui/src/components/issue-properties/IssueProperties.tsx
index 1a524e0648..1da295b16e 100644
--- a/ui/src/components/issue-properties/IssueProperties.tsx
+++ b/ui/src/components/issue-properties/IssueProperties.tsx
@@ -26,7 +26,14 @@ import { getRecentProjectIds, trackRecentProject } from "../../lib/recent-projec
import { orderItemsBySelectedAndRecent } from "../../lib/recent-selections";
import { formatAssigneeUserLabel, formatUserLabel } from "../../lib/assignees";
import { buildExecutionPolicy, stageParticipantValues } from "../../lib/issue-execution-policy";
-import { formatMonitorOffset } from "../../lib/issue-monitor";
+import {
+ formatMonitorAbsolute,
+ formatMonitorAbsoluteFull,
+ formatMonitorEta,
+ formatMonitorEtaLabel,
+ formatMonitorOffset,
+ useMonitorCountdown,
+} from "../../lib/issue-monitor";
import { extractProviderIdWithFallback } from "../../lib/model-utils";
import { formatRetryReason } from "../../lib/runRetryState";
import { useRetryNowMutation } from "../../hooks/useRetryNowMutation";
@@ -44,6 +51,7 @@ import { ToggleSwitch } from "@/components/ui/toggle-switch";
import { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { User, ArrowUpRight, Plus, GitBranch, FolderOpen, HardDrive, Check, Clock, RotateCcw, Loader2, CheckCircle2, ArchiveRestore } from "lucide-react";
import { AgentIcon } from "../AgentIconPicker";
import { InlineEntitySelector, type InlineEntityOption } from "../InlineEntitySelector";
@@ -126,6 +134,8 @@ interface IssuePropertiesProps {
externalObjectsLoading?: boolean;
externalObjectsError?: boolean;
onRetryExternalObjects?: () => void;
+ onCheckMonitorNow?: () => void;
+ checkingMonitorNow?: boolean;
}
const ISSUE_BLOCKER_SEARCH_LIMIT = 50;
@@ -142,6 +152,8 @@ export function IssueProperties({
externalObjectsLoading,
externalObjectsError,
onRetryExternalObjects,
+ onCheckMonitorNow,
+ checkingMonitorNow = false,
}: IssuePropertiesProps) {
const { selectedCompanyId } = useCompany();
const queryClient = useQueryClient();
@@ -176,6 +188,7 @@ export function IssueProperties({
const [approversOpen, setApproversOpen] = useState(false);
const [approverSearch, setApproverSearch] = useState("");
const [monitorOpen, setMonitorOpen] = useState(false);
+ const [monitorDetailsOpen, setMonitorDetailsOpen] = useState(false);
const [scheduledRetryOpen, setScheduledRetryOpen] = useState(false);
const [labelsOpen, setLabelsOpen] = useState(false);
const [assigneeOptionsOpen, setAssigneeOptionsOpen] = useState(false);
@@ -990,45 +1003,94 @@ export function IssueProperties({
updateMonitor(null);
setMonitorOpen(false);
};
- const currentMonitorLabel = (() => {
- if (issue.executionPolicy?.monitor?.nextCheckAt) {
- return `Next check ${formatDate(new Date(issue.executionPolicy.monitor.nextCheckAt))}`;
- }
- if (issue.executionState?.monitor?.status === "cleared") {
- return "Cleared";
- }
- if (issue.monitorLastTriggeredAt) {
- return `Last triggered ${timeAgo(issue.monitorLastTriggeredAt)}`;
- }
- return "None";
- })();
- const monitorNextCheckAt = issue.executionPolicy?.monitor?.nextCheckAt ?? null;
+ const monitorState = issue.executionState?.monitor ?? null;
+ const monitorNextCheckAt = monitorState?.nextCheckAt ?? issue.monitorNextCheckAt ?? issue.executionPolicy?.monitor?.nextCheckAt ?? null;
+ const monitorAttemptCount = issue.monitorAttemptCount ?? monitorState?.attemptCount ?? 0;
+ const monitorLastTriggeredAt = issue.monitorLastTriggeredAt ?? monitorState?.lastTriggeredAt ?? null;
+ const monitorServiceName = issue.executionPolicy?.monitor?.serviceName ?? monitorState?.serviceName ?? null;
+ const monitorNotes = issue.executionPolicy?.monitor?.notes ?? monitorState?.notes ?? null;
+ const monitorNow = useMonitorCountdown(monitorNextCheckAt);
+ const monitorRelative = monitorNextCheckAt ? formatMonitorEta(monitorNextCheckAt, monitorNow) : null;
+ const monitorIsDueNow = monitorRelative === "due now";
+ const monitorIsOverdue = Boolean(monitorRelative?.startsWith("overdue by "));
+ const monitorPrimary = monitorNextCheckAt
+ ? formatMonitorEtaLabel(monitorNextCheckAt, monitorNow)
+ : monitorState?.status === "cleared"
+ ? "Cleared"
+ : "None";
+ const monitorSecondary = monitorNextCheckAt
+ ? monitorIsDueNow
+ ? "checking momentarily…"
+ : `${formatMonitorAbsolute(monitorNextCheckAt, {}, monitorNow)}${monitorIsOverdue ? " · fires on next tick" : monitorAttemptCount > 0 ? ` · Attempt ${monitorAttemptCount}` : ""}`
+ : monitorState?.status === "cleared"
+ ? [
+ monitorLastTriggeredAt ? `last checked ${timeAgo(monitorLastTriggeredAt)}` : null,
+ monitorAttemptCount > 0 ? `after attempt ${monitorAttemptCount}` : null,
+ ].filter(Boolean).join(" · ")
+ : null;
const monitorTrigger = (
-
+
+
+
+ setMonitorDetailsOpen(false)}
+ >
{monitorNextCheckAt ? (
-
- {monitorNextCheckAt ? `Next check ${formatMonitorOffset(monitorNextCheckAt)}` : currentMonitorLabel}
-
- {monitorNextCheckAt ? (
-
- {formatDate(new Date(monitorNextCheckAt))}
+
+ {monitorPrimary}
+ {monitorSecondary ? (
+ {monitorSecondary}
+ ) : null}
+
+
+ {monitorNextCheckAt ? (
+ event.stopPropagation()}
+ >
+
+ Monitor
+ {monitorAttemptCount > 0 ? Attempt {monitorAttemptCount} : null}
+
+
+
+
Next check
+
{formatMonitorAbsoluteFull(monitorNextCheckAt)}
+
{monitorRelative}
+
+
+
Watching
+
{monitorServiceName ?? "—"}
+
+
+
Notes
+
{monitorNotes ?? "—"}
+
+
+
Last triggered
+
{monitorLastTriggeredAt ? formatMonitorAbsoluteFull(monitorLastTriggeredAt) : "— not yet triggered"}
+
+
+ {onCheckMonitorNow ? (
+ { setMonitorDetailsOpen(false); onCheckMonitorNow(); }}>
+ {checkingMonitorNow ? "Checking…" : "Check now"}
+
+ ) : null}
+ { setMonitorDetailsOpen(false); setMonitorOpen(true); }}>Edit
+ { setMonitorDetailsOpen(false); clearMonitor(); }}>Clear
+
+
) : null}
-
+
+
);
- const monitorAttemptBadge = issue.monitorAttemptCount && issue.monitorAttemptCount > 0 ? (
-
- Attempt {issue.monitorAttemptCount}
-
- ) : null;
const scheduledRetry = issue.scheduledRetry ?? null;
const retryNow = useRetryNowMutation(issue.id);
@@ -2191,7 +2253,6 @@ export function IssueProperties({
triggerContent={monitorTrigger}
triggerClassName="min-w-0 max-w-full"
popoverClassName={cn("max-w-full", inline ? "w-full" : "w-80 sm:w-(--sz-32rem)")}
- extra={monitorAttemptBadge}
>
{monitorContent}
diff --git a/ui/src/lib/issue-monitor.test.tsx b/ui/src/lib/issue-monitor.test.tsx
new file mode 100644
index 0000000000..84b7ced040
--- /dev/null
+++ b/ui/src/lib/issue-monitor.test.tsx
@@ -0,0 +1,206 @@
+// @vitest-environment jsdom
+
+import { flushSync } from "react-dom";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+ deriveMonitorState,
+ formatMonitorAbsolute,
+ formatMonitorAbsoluteFull,
+ formatMonitorEta,
+ formatMonitorEtaLabel,
+ formatMonitorOffset,
+ useMonitorCountdown,
+} from "./issue-monitor";
+
+describe("monitor time formatting", () => {
+ const now = new Date("2026-07-17T19:56:00.000Z");
+
+ it.each([
+ [45_000, "in 45s"],
+ [5 * 60_000, "in 5m"],
+ [2 * 60 * 60_000, "in 2h"],
+ [(2 * 60 + 12) * 60_000, "in 2h 12m"],
+ [(2 * 60 + 59) * 60_000, "in 2h 59m"],
+ [(3 * 24 + 4) * 60 * 60_000, "in 3d 4h"],
+ [3 * 24 * 60 * 60_000, "in 3d"],
+ ])("formats future offset %i with up to two non-zero units", (offsetMs, expected) => {
+ expect(formatMonitorEta(new Date(now.getTime() + offsetMs), now)).toBe(expected);
+ });
+
+ it("uses due-now grace before switching to overdue copy", () => {
+ expect(formatMonitorEta(now, now)).toBe("due now");
+ expect(formatMonitorEta(new Date(now.getTime() - 59_999), now)).toBe("due now");
+ expect(formatMonitorEta(new Date(now.getTime() - 60_000), now)).toBe("overdue by 1m");
+ expect(formatMonitorEta(new Date(now.getTime() - 12 * 60_000), now)).toBe("overdue by 12m");
+ });
+
+ it("formats sentence-case ETA labels without slicing prefixes", () => {
+ expect(formatMonitorEtaLabel(new Date(now.getTime() + (2 * 60 + 12) * 60_000), now)).toBe("In 2h 12m");
+ expect(formatMonitorEtaLabel(now, now)).toBe("Due now");
+ expect(formatMonitorEtaLabel(new Date(now.getTime() - 18 * 60_000), now)).toBe("Overdue by 18m");
+ });
+
+ it("uses the injectable Date.now clock for scheduled retry offsets", () => {
+ const dateNowSpy = vi.spyOn(Date, "now").mockReturnValue(now.getTime());
+ expect(formatMonitorOffset(new Date(now.getTime() + 15 * 60_000))).toBe("in 15m");
+ expect(formatMonitorOffset(new Date(now.getTime() + 10_000))).toBe("now");
+ expect(formatMonitorOffset(now)).toBe("now");
+ dateNowSpy.mockRestore();
+ });
+
+ it("formats the full local timestamp with weekday, year and zone", () => {
+ const timestamp = "2026-07-17T21:08:00.000Z";
+ const options = { locale: "en-US", timeZone: "America/Chicago" } as const;
+
+ expect(formatMonitorAbsoluteFull(timestamp, options)).toBe("Friday, July 17, 2026, 4:08:00 PM CDT");
+ });
+
+ describe("formatMonitorAbsolute compact copy (wireframe 04)", () => {
+ const options = { locale: "en-US", timeZone: "America/Chicago" } as const;
+ // 2026-07-17T21:08:00Z is 4:08 PM in America/Chicago.
+ const timestamp = "2026-07-17T21:08:00.000Z";
+
+ it("says Today when the check lands on the reference day", () => {
+ const now = "2026-07-17T14:00:00.000Z"; // 9:00 AM Chicago, same day
+ expect(formatMonitorAbsolute(timestamp, options, now)).toBe("Today, 4:08 PM");
+ });
+
+ it("compares the day in the display time zone, not UTC", () => {
+ // 2026-07-18T04:08:00Z is still 11:08 PM on Jul 17 in Chicago.
+ const lateNight = "2026-07-18T04:08:00.000Z";
+ const now = "2026-07-17T14:00:00.000Z"; // 9:00 AM Chicago, Jul 17
+ expect(formatMonitorAbsolute(lateNight, options, now)).toBe("Today, 11:08 PM");
+ });
+
+ it("prefixes the weekday beyond today within the current year", () => {
+ const later = "2026-07-20T14:00:00.000Z"; // 9:00 AM Chicago, Mon Jul 20
+ const now = "2026-07-17T14:00:00.000Z";
+ expect(formatMonitorAbsolute(later, options, now)).toBe("Mon Jul 20, 9:00 AM");
+ });
+
+ it("adds the year only when it differs from the reference year", () => {
+ const nextYear = "2027-01-04T15:00:00.000Z"; // 9:00 AM Chicago, Mon Jan 4 2027
+ const now = "2026-07-17T14:00:00.000Z";
+ expect(formatMonitorAbsolute(nextYear, options, now)).toBe("Mon Jan 4, 2027, 9:00 AM");
+ });
+ });
+});
+
+describe("deriveMonitorState", () => {
+ const now = new Date("2026-07-17T20:00:00.000Z");
+
+ it("derives scheduled and retrying states with monitor details", () => {
+ expect(
+ deriveMonitorState(
+ {
+ executionPolicy: { monitor: { nextCheckAt: "2026-07-17T22:12:00.000Z", serviceName: "API" } },
+ executionState: {
+ monitor: {
+ status: "scheduled",
+ nextCheckAt: "2026-07-17T22:12:00.000Z",
+ attemptCount: 1,
+ serviceName: "API",
+ },
+ },
+ },
+ now,
+ ),
+ ).toEqual({
+ state: "scheduled",
+ source: "monitor",
+ nextCheckAt: "2026-07-17T22:12:00.000Z",
+ attemptCount: 1,
+ serviceName: "API",
+ });
+
+ expect(
+ deriveMonitorState(
+ {
+ executionState: {
+ monitor: {
+ status: "scheduled",
+ nextCheckAt: "2026-07-17T22:12:00.000Z",
+ attemptCount: 3,
+ serviceName: "deploy health",
+ },
+ },
+ },
+ now,
+ ).state,
+ ).toBe("retrying");
+ });
+
+ it("derives due-now and overdue at the grace boundary", () => {
+ const issue = (nextCheckAt: string) => ({
+ executionState: { monitor: { status: "scheduled" as const, nextCheckAt, attemptCount: 1 } },
+ });
+
+ expect(deriveMonitorState(issue("2026-07-17T19:59:00.001Z"), now).state).toBe("due-now");
+ expect(deriveMonitorState(issue("2026-07-17T19:59:00.000Z"), now).state).toBe("overdue");
+ });
+
+ it("derives cleared, none, and scheduled retry states", () => {
+ expect(
+ deriveMonitorState({ executionState: { monitor: { status: "cleared", attemptCount: 2 } } }, now),
+ ).toMatchObject({ state: "cleared", attemptCount: 2 });
+ expect(deriveMonitorState({}, now)).toEqual({
+ state: "none",
+ source: "none",
+ nextCheckAt: null,
+ attemptCount: 0,
+ serviceName: null,
+ });
+ expect(
+ deriveMonitorState(
+ {
+ monitorAttemptCount: 0,
+ scheduledRetry: {
+ status: "scheduled_retry",
+ scheduledRetryAt: "2026-07-17T20:05:00.000Z",
+ scheduledRetryAttempt: 2,
+ },
+ },
+ now,
+ ),
+ ).toMatchObject({ state: "retrying", source: "scheduled-retry", attemptCount: 2 });
+ });
+});
+
+describe("useMonitorCountdown", () => {
+ beforeEach(() => {
+ vi.useFakeTimers();
+ vi.setSystemTime(new Date("2026-07-17T20:00:00.000Z"));
+ });
+
+ afterEach(() => {
+ vi.useRealTimers();
+ });
+
+ it("ticks every 30 seconds normally, every second near due, and cleans up", () => {
+ const container = document.createElement("div");
+ const root = createRoot(container);
+ const observed: number[] = [];
+
+ function Probe({ nextCheckAt }: { nextCheckAt: string | null }) {
+ observed.push(useMonitorCountdown(nextCheckAt).getTime());
+ return null;
+ }
+
+ flushSync(() => root.render( | null = null;
+ let cancelled = false;
+ const scheduleNextTick = () => {
+ timeoutId = setTimeout(() => {
+ if (cancelled) return;
+ setNow(new Date(Date.now()));
+ scheduleNextTick();
+ }, countdownCadence(new Date(nextCheckTimestamp)));
+ };
+
+ scheduleNextTick();
+ return () => {
+ cancelled = true;
+ if (timeoutId !== null) clearTimeout(timeoutId);
+ };
+ }, [nextCheckTimestamp]);
+
+ return now;
+}
+
+export function formatMonitorOffset(nextCheckAt: MonitorDate): string {
+ const now = new Date(Date.now());
+ const deltaMs = toTimestamp(nextCheckAt) - now.getTime();
+ if (Math.round(Math.abs(deltaMs) / MINUTE_MS) === 0) return "now";
+ const eta = formatMonitorEta(nextCheckAt, now);
+ if (eta === "due now") return "now";
+ if (eta.startsWith("overdue by ")) return `${eta.slice("overdue by ".length)} ago`;
+ return eta;
}
diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx
index 897e6a0c59..38d8a1982f 100644
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -102,7 +102,11 @@ import { IssuesList } from "../components/IssuesList";
import { AgentIcon } from "../components/AgentIconPicker";
import { IssueReferenceActivitySummary } from "../components/IssueReferenceActivitySummary";
import { IssueRelatedWorkPanel } from "../components/IssueRelatedWorkPanel";
-import { IssueMonitorActivityCard } from "../components/IssueMonitorActivityCard";
+import {
+ IssueMonitorBanner,
+ IssueMonitorComposerStrip,
+ hasVisibleMonitorSurface,
+} from "../components/IssueMonitorBanner";
import { IssueScheduledRetryCard } from "../components/IssueScheduledRetryCard";
import { IssueProperties } from "../components/IssueProperties";
import { PauseAffectsSummaryView } from "../components/interrupt-handoff/InterruptHandoffViews";
@@ -883,6 +887,8 @@ type IssueDetailChatTabProps = {
onRefreshLatestComments: () => Promise | void;
onWorkModeChange?: (workMode: IssueWorkMode) => Promise | void;
composerRef: Ref;
+ /** Optional node rendered inline directly above the reply composer (e.g. the monitor strip). */
+ composerAccessory?: ReactNode;
footer?: ReactNode;
feedbackVotes?: FeedbackVote[];
feedbackDataSharingPreference: "allowed" | "not_allowed" | "prompt";
@@ -970,6 +976,7 @@ const IssueDetailChatTab = memo(function IssueDetailChatTab({
onRefreshLatestComments,
onWorkModeChange,
composerRef,
+ composerAccessory,
footer,
feedbackVotes,
feedbackDataSharingPreference,
@@ -1162,6 +1169,7 @@ const IssueDetailChatTab = memo(function IssueDetailChatTab({
) : null}
;
pendingApprovalAction: { approvalId: string; action: "approve" | "reject" } | null;
onApprovalAction: (approvalId: string, action: "approve" | "reject") => void;
- onCheckMonitorNow: () => void;
- checkingMonitorNow: boolean;
handoffFocusSignal?: number;
externalReferences?: MarkdownExternalReferenceMap;
};
@@ -1275,8 +1281,6 @@ function IssueDetailActivityTab({
userProfileMap,
pendingApprovalAction,
onApprovalAction,
- onCheckMonitorNow,
- checkingMonitorNow,
handoffFocusSignal = 0,
externalReferences,
}: IssueDetailActivityTabProps) {
@@ -1507,11 +1511,7 @@ function IssueDetailActivityTab({
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+