feat(ui): show a calm in-flight notice when a live run is on the issue (#11423)
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work > - When an agent run ends without a recorded disposition, Paperclip raises a "missing disposition" handoff so the work does not stall silently > - The issue page shows that handoff as an amber alarm: "This task still needs a next step." > - The server tells the UI whether the issue has a live continuation, and an earlier change used that flag to hide the alarm while a correction run is active > - Hiding it removed the false alarm but replaced it with nothing, so a reader cannot tell "nothing is wrong" from "nothing is tracked" > - This pull request puts a quiet informational line where the alarm was, and links the live run > - The benefit is that the page stays honest in both states: it is calm while an agent works, and it is loud only when the issue is really stuck ## Linked Issues or Issue Description No public GitHub issue exists for this gap. Description follows `.github/ISSUE_TEMPLATE/enhancement.yml`: **What existing behavior does this improve?** The missing-disposition handoff notice on the issue page. It is the amber banner that reads "This task still needs a next step." **Subsystem affected** Web UI — `ui/src/components/IssueBlockedNotice.tsx`. **Current behavior** An issue with an outstanding missing-disposition handoff shows nothing at all in the blocked-notice slot while a correction run is live. `IssueBlockedNotice` calls `isSuccessfulRunHandoffRequired()`. That helper returns `false` when `successfulRunHandoff.hasLiveContinuation` is set. The component then renders no handoff content. Two tests asserted the empty render. **Proposed behavior** The page states, quietly, that a correction run is in progress. It also states that the alarm returns if the run stops without choosing a next step. The reader can open the live run from that line. The amber alarm does not change when no run is live. **Reason and benefit** Silence and "healthy" look the same. A user who saw the alarm earlier cannot tell whether the handoff was resolved, whether the alert was withdrawn, or whether an agent is working on it now. One muted line removes that ambiguity. It also keeps the loud state meaningful, because the alarm now appears only when the issue is really stuck. **Breaking changes** None. The change is presentational and adds no API or data-shape change. ## What Changed - Added `SuccessfulRunHandoffInFlightNotice` to `ui/src/components/IssueBlockedNotice.tsx`. It renders a muted row with a pulsing live dot and this copy: "A correction run is in progress — the agent is working. This alert returns if the run stops without choosing a next step." - The notice links the live run when the server sends `liveRunId` and the handoff has an `assigneeAgentId`. It shows the short run id as plain text when no agent id is available, and it shows no run reference when `liveRunId` is absent. - Liveness reads either the server `hasLiveContinuation` flag or the fresher client `liveIssueIds` set. This matches the rule that already suppressed the alarm. - The amber alarm is unchanged when no live continuation exists. The unpromoted scheduled-retry carve-out still shows the alarm, so the "Retry now" control stays reachable. - The calm line also renders above the blocker notice when an issue has blockers and a live run at the same time. - Storybook: added `InFlightNotice` and `LivenessComparison` stories to `ui/storybook/stories/successful-run-handoff.stories.tsx`, and removed a duplicated panel from the overview story. - Tests: the two cases that asserted an empty render now assert the calm line. New cases cover a missing `liveRunId`, a missing agent id, a handoff that is not required, and the two "alarm is unchanged" guards. ## Verification Run the component and helper suites from `ui/`: ``` cd ui && NODE_ENV=test npx vitest run \ src/components/IssueBlockedNotice.test.tsx \ src/components/IssueChatThread.test.tsx \ src/components/IssueChatThreadSystemNotice.test.tsx \ src/lib/successful-run-handoff.test.ts ``` Result: 4 files, 111 tests, all pass. Also run: - `cd ui && npx tsc -b --force` — clean. - `node scripts/check-token-gates.mjs` — all gates clean. Manual check in Storybook (`pnpm --dir ui storybook`), story `Paperclip/Successful Run Handoff → Liveness Comparison`: - The alarm panel keeps its 4 remediation bullets, its amber surface, and its run chips. - The calm panel shows one 39 px muted row, no bullets, and a working link to the live run. - Measured contrast of the calm text against its rendered surface: 4.58:1 in light mode and 6.52:1 in dark mode. Both pass WCAG AA for normal text. ## Risks Low risk. The change is limited to one presentational component and its stories. It adds a render path where the component previously returned `null`, so a surface that expected an empty render now shows one muted row. No server, API, or data-shape change. The amber alarm path and the scheduled-retry carve-out are covered by tests that assert the calm line does not appear. ## Model Used Claude Opus 5 (Anthropic), model id `claude-opus-5[1m]`, 1M context window, extended thinking, with tool use and code execution. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have not referenced internal/instance-local Paperclip issues or links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip` URLs) - [x] My branch name describes the change (e.g. `docs/...`, `fix/...`) and contains no internal Paperclip ticket id or instance-derived details - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [ ] All Paperclip CI gates are green - [ ] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge Co-authored-by: ClaudeCoder <claudecoder@paperclip.ing> Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
GitHub
parent
92047cac46
commit
d6acb48551
|
|
@ -149,6 +149,9 @@ describe("IssueBlockedNotice", () => {
|
|||
expect(node.textContent).toContain("Asked CodexCoder to choose the next step");
|
||||
expect(node.textContent).toContain("Detected progress: Updated the plan and left follow-up work.");
|
||||
expect(node.querySelector('[data-testid="issue-next-step-retry-now"]')).toBeNull();
|
||||
// No live continuation ⇒ the alarm stays exactly as it was; the calm
|
||||
// in-flight line must not appear alongside it.
|
||||
expect(node.querySelector('[data-testid="issue-next-step-in-flight"]')).toBeNull();
|
||||
});
|
||||
|
||||
it("shows retry-now action for next-step notices with a scheduled retry", async () => {
|
||||
|
|
@ -187,7 +190,7 @@ describe("IssueBlockedNotice", () => {
|
|||
});
|
||||
});
|
||||
|
||||
it("hides the next-step notice while a live continuation is running the issue", () => {
|
||||
it("replaces the alarm with the calm in-flight line while a live continuation is running the issue", () => {
|
||||
const node = render(
|
||||
<IssueBlockedNotice
|
||||
issueStatus="in_progress"
|
||||
|
|
@ -207,11 +210,27 @@ describe("IssueBlockedNotice", () => {
|
|||
/>,
|
||||
);
|
||||
|
||||
// The amber alarm and every remediation bullet are gone...
|
||||
expect(node.querySelector('[data-successful-run-handoff="required"]')).toBeNull();
|
||||
expect(node.textContent).toBe("");
|
||||
expect(node.textContent).not.toContain("This task still needs a next step.");
|
||||
expect(node.textContent).not.toContain("Mark it done or cancelled.");
|
||||
expect(node.querySelector(".bg-amber-50\\/90")).toBeNull();
|
||||
|
||||
// ...replaced by one quiet line that links the live run.
|
||||
const calm = node.querySelector('[data-testid="issue-next-step-in-flight"]');
|
||||
expect(calm).not.toBeNull();
|
||||
expect(calm!.getAttribute("data-successful-run-handoff")).toBe("in_flight");
|
||||
expect(node.textContent).toContain(
|
||||
"A correction run is in progress — the agent is working. This alert returns if the run stops without choosing a next step.",
|
||||
);
|
||||
const runLink = calm!.querySelector("a");
|
||||
expect(runLink?.getAttribute("href")).toBe(
|
||||
"/agents/agent-1/runs/87654321-dddd-eeee-ffff-123456789abc",
|
||||
);
|
||||
expect(runLink?.textContent).toBe("run 87654321");
|
||||
});
|
||||
|
||||
it("hides the next-step notice when the live-run set includes this issue", () => {
|
||||
it("shows the calm in-flight line when the live-run set includes this issue", () => {
|
||||
const node = render(
|
||||
<IssueBlockedNotice
|
||||
issueId="issue-1"
|
||||
|
|
@ -233,6 +252,58 @@ describe("IssueBlockedNotice", () => {
|
|||
);
|
||||
|
||||
expect(node.querySelector('[data-successful-run-handoff="required"]')).toBeNull();
|
||||
const calm = node.querySelector('[data-testid="issue-next-step-in-flight"]');
|
||||
expect(calm).not.toBeNull();
|
||||
// No `liveRunId` on the payload — the copy stands alone, with no run link.
|
||||
expect(calm!.querySelector("a")).toBeNull();
|
||||
expect(node.textContent).toContain("A correction run is in progress");
|
||||
});
|
||||
|
||||
it("omits the run link but keeps the calm copy when the live run has no known agent", () => {
|
||||
const node = render(
|
||||
<IssueBlockedNotice
|
||||
issueStatus="in_progress"
|
||||
blockers={[]}
|
||||
successfulRunHandoff={{
|
||||
state: "required",
|
||||
required: true,
|
||||
hasLiveContinuation: true,
|
||||
liveRunId: "87654321-dddd-eeee-ffff-123456789abc",
|
||||
sourceRunId: null,
|
||||
correctiveRunId: null,
|
||||
assigneeAgentId: null,
|
||||
detectedProgressSummary: null,
|
||||
createdAt: "2026-05-01T00:00:00.000Z",
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
|
||||
const calm = node.querySelector('[data-testid="issue-next-step-in-flight"]');
|
||||
expect(calm).not.toBeNull();
|
||||
expect(calm!.querySelector("a")).toBeNull();
|
||||
expect(calm!.textContent).toContain("run 87654321");
|
||||
});
|
||||
|
||||
it("stays silent when the handoff is not required at all", () => {
|
||||
const node = render(
|
||||
<IssueBlockedNotice
|
||||
issueStatus="in_progress"
|
||||
blockers={[]}
|
||||
successfulRunHandoff={{
|
||||
state: "resolved",
|
||||
required: false,
|
||||
hasLiveContinuation: true,
|
||||
liveRunId: "87654321-dddd-eeee-ffff-123456789abc",
|
||||
sourceRunId: "12345678-aaaa-bbbb-cccc-123456789abc",
|
||||
correctiveRunId: null,
|
||||
assigneeAgentId: "agent-1",
|
||||
detectedProgressSummary: null,
|
||||
createdAt: "2026-05-01T00:00:00.000Z",
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(node.querySelector('[data-testid="issue-next-step-in-flight"]')).toBeNull();
|
||||
expect(node.textContent).toBe("");
|
||||
});
|
||||
|
||||
|
|
@ -259,6 +330,10 @@ describe("IssueBlockedNotice", () => {
|
|||
|
||||
expect(node.querySelector('[data-successful-run-handoff="required"]')).not.toBeNull();
|
||||
expect(node.querySelector('[data-testid="issue-next-step-retry-now"]')).not.toBeNull();
|
||||
// The carve-out wins over the calm line: the alarm is the only thing that
|
||||
// keeps "Retry now" reachable, so it must not be quieted or duplicated.
|
||||
expect(node.querySelector('[data-testid="issue-next-step-in-flight"]')).toBeNull();
|
||||
expect(node.textContent).toContain("This task still needs a next step.");
|
||||
});
|
||||
|
||||
it("does not render when the issue is done even if a stale handoff state is required", () => {
|
||||
|
|
|
|||
|
|
@ -185,6 +185,56 @@ function WaitingStepGlyph({ status }: { status: WaitingStepStatus }) {
|
|||
return <Circle className="h-3.5 w-3.5 text-blue-300 dark:text-blue-500/50" aria-hidden />;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calm in-flight counterpart to the amber "still needs a next step" alarm.
|
||||
* The handoff is still `required`, but a correction run is live on the issue,
|
||||
* so the alarm would be crying wolf while an agent is already working. Saying
|
||||
* it quietly beats saying nothing: the reader still learns a disposition is
|
||||
* outstanding, and learns that the alarm comes back if the run ends without
|
||||
* choosing one.
|
||||
*/
|
||||
function SuccessfulRunHandoffInFlightNotice({
|
||||
liveRunId,
|
||||
assigneeAgentId,
|
||||
}: {
|
||||
liveRunId?: string | null;
|
||||
assigneeAgentId?: string | null;
|
||||
}) {
|
||||
const shortRunId = liveRunId ? liveRunId.slice(0, 8) : null;
|
||||
return (
|
||||
<div
|
||||
data-testid="issue-next-step-in-flight"
|
||||
data-successful-run-handoff="in_flight"
|
||||
className="mb-3 rounded-md border border-border/60 bg-muted/40 px-3 py-2 text-xs text-muted-foreground"
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
<span className="mt-1 flex h-3.5 w-3.5 shrink-0 items-center justify-center" aria-hidden>
|
||||
<span className="h-2 w-2 animate-pulse rounded-full bg-blue-400" />
|
||||
</span>
|
||||
<p className="min-w-0 leading-5">
|
||||
A correction run is in progress — the agent is working. This alert returns if the run
|
||||
stops without choosing a next step.
|
||||
{shortRunId ? (
|
||||
<>
|
||||
{" "}
|
||||
{assigneeAgentId ? (
|
||||
<Link
|
||||
to={`/agents/${assigneeAgentId}/runs/${liveRunId}`}
|
||||
className="font-mono underline underline-offset-2 hover:text-foreground"
|
||||
>
|
||||
run {shortRunId}
|
||||
</Link>
|
||||
) : (
|
||||
<span className="font-mono">run {shortRunId}</span>
|
||||
)}
|
||||
</>
|
||||
) : null}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Blue "Waiting on live work" variant — rendered in place of the
|
||||
* amber notice when `blockerAttention.state === "covered"`: the blocker chain
|
||||
|
|
@ -384,11 +434,33 @@ export function IssueBlockedNotice({
|
|||
// missing-disposition complaint only applies when the issue is stuck.
|
||||
// `hasLiveContinuation` is the server's view; `liveIssueIds` catches runs
|
||||
// that started after the issue payload was fetched.
|
||||
const issueHasLiveRun = Boolean(issueId && liveIssueIds?.has(issueId));
|
||||
const showSuccessfulRunHandoff =
|
||||
successfulRunHandoff != null
|
||||
&& isSuccessfulRunHandoffRequired({ successfulRunHandoff, scheduledRetry })
|
||||
&& !(issueId && liveIssueIds?.has(issueId));
|
||||
if (!showSuccessfulRunHandoff && blockers.length === 0 && issueStatus !== "blocked") return null;
|
||||
&& !issueHasLiveRun;
|
||||
// Outstanding handoff + a live run on the issue: the alarm is suppressed, so
|
||||
// render the quiet in-flight line in its place rather than nothing at all.
|
||||
// The unpromoted-scheduled-retry carve-out keeps `showSuccessfulRunHandoff`
|
||||
// true, so the amber notice (and its "Retry now" control) still wins there.
|
||||
// This stands in for the handoff alarm only. When the issue also has
|
||||
// blockers, the blocker notice below is the stronger signal and owns the
|
||||
// slot, exactly as it did before this line existed.
|
||||
const handoffInFlightNotice =
|
||||
successfulRunHandoff != null
|
||||
&& successfulRunHandoff.required === true
|
||||
&& !showSuccessfulRunHandoff
|
||||
&& (successfulRunHandoff.hasLiveContinuation || issueHasLiveRun)
|
||||
? (
|
||||
<SuccessfulRunHandoffInFlightNotice
|
||||
liveRunId={successfulRunHandoff.liveRunId}
|
||||
assigneeAgentId={successfulRunHandoff.assigneeAgentId}
|
||||
/>
|
||||
)
|
||||
: null;
|
||||
if (!showSuccessfulRunHandoff && blockers.length === 0 && issueStatus !== "blocked") {
|
||||
return handoffInFlightNotice;
|
||||
}
|
||||
const successfulRunRetryNow = showSuccessfulRunHandoff
|
||||
&& issueId
|
||||
&& scheduledRetry?.status === "scheduled_retry"
|
||||
|
|
|
|||
|
|
@ -33,13 +33,14 @@ function ActivityExample({ action }: { action: string }) {
|
|||
function SuccessfulRunHandoffStates() {
|
||||
return (
|
||||
<StoryFrame>
|
||||
<HandoffLivenessComparisonPanel />
|
||||
|
||||
<section className="grid gap-4 lg:grid-cols-[1.15fr_0.85fr]">
|
||||
<PinnedNoticePanel />
|
||||
<ActivityEventsPanel />
|
||||
<IssueCardPanel />
|
||||
</section>
|
||||
|
||||
<section className="grid gap-4 lg:grid-cols-[0.9fr_1.1fr]">
|
||||
<IssueCardPanel />
|
||||
<section className="grid gap-4">
|
||||
<EscalationCommentPanel />
|
||||
</section>
|
||||
</StoryFrame>
|
||||
|
|
@ -68,6 +69,25 @@ function handoffIssue() {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Same outstanding handoff as {@link handoffIssue}, but a correction run is
|
||||
* live on the issue — the state that must NOT raise the amber alarm.
|
||||
*/
|
||||
function handoffIssueInFlight() {
|
||||
const issue = handoffIssue();
|
||||
return createIssue({
|
||||
...issue,
|
||||
id: "issue-handoff-live",
|
||||
identifier: "PAP-3055",
|
||||
issueNumber: 3055,
|
||||
successfulRunHandoff: {
|
||||
...issue.successfulRunHandoff!,
|
||||
hasLiveContinuation: true,
|
||||
liveRunId: "61fdb79b-8012-4676-ac71-2971830e126a",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function StoryFrame({ children, title = "Board-visible handoff states" }: { children: ReactNode; title?: string }) {
|
||||
return (
|
||||
<main className="min-h-screen bg-background p-4 text-foreground sm:p-8">
|
||||
|
|
@ -97,6 +117,33 @@ function PinnedNoticePanel() {
|
|||
);
|
||||
}
|
||||
|
||||
function InFlightNoticePanel() {
|
||||
const issue = handoffIssueInFlight();
|
||||
return (
|
||||
<div className="rounded-lg border border-border bg-card p-4">
|
||||
<div className="mb-3 text-sm font-medium text-muted-foreground">
|
||||
A2. Calm in-flight notice (live continuation)
|
||||
</div>
|
||||
<IssueBlockedNotice
|
||||
issueStatus="in_progress"
|
||||
blockers={[]}
|
||||
successfulRunHandoff={issue.successfulRunHandoff}
|
||||
agentName="CodexCoder"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** The two states side by side — the contrast is the point. */
|
||||
function HandoffLivenessComparisonPanel() {
|
||||
return (
|
||||
<section className="grid gap-4 lg:grid-cols-2">
|
||||
<PinnedNoticePanel />
|
||||
<InFlightNoticePanel />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ActivityEventsPanel() {
|
||||
return (
|
||||
<div className="rounded-lg border border-border bg-card p-4">
|
||||
|
|
@ -166,6 +213,18 @@ function SuccessfulRunHandoffPinnedNotice() {
|
|||
return <StoryFrame title="Pinned needs-next-step notice"><PinnedNoticePanel /></StoryFrame>;
|
||||
}
|
||||
|
||||
function SuccessfulRunHandoffInFlightNoticeStory() {
|
||||
return <StoryFrame title="Calm in-flight notice"><InFlightNoticePanel /></StoryFrame>;
|
||||
}
|
||||
|
||||
function SuccessfulRunHandoffLivenessComparison() {
|
||||
return (
|
||||
<StoryFrame title="Alarm vs calm in-flight">
|
||||
<HandoffLivenessComparisonPanel />
|
||||
</StoryFrame>
|
||||
);
|
||||
}
|
||||
|
||||
function SuccessfulRunHandoffActivityEvents() {
|
||||
return <StoryFrame title="Activity stream events"><ActivityEventsPanel /></StoryFrame>;
|
||||
}
|
||||
|
|
@ -192,6 +251,9 @@ type Story = StoryObj<typeof meta>;
|
|||
|
||||
export const AllStates: Story = {};
|
||||
export const PinnedNotice: Story = { render: () => <SuccessfulRunHandoffPinnedNotice /> };
|
||||
/** Handoff required, but a correction run is live — no alarm. */
|
||||
export const InFlightNotice: Story = { render: () => <SuccessfulRunHandoffInFlightNoticeStory /> };
|
||||
export const LivenessComparison: Story = { render: () => <SuccessfulRunHandoffLivenessComparison /> };
|
||||
export const ActivityEvents: Story = { render: () => <SuccessfulRunHandoffActivityEvents /> };
|
||||
export const IssueCardIndicator: Story = { render: () => <SuccessfulRunHandoffIssueCard /> };
|
||||
export const EscalationComment: Story = { render: () => <SuccessfulRunHandoffEscalationComment /> };
|
||||
|
|
|
|||
Loading…
Reference in New Issue