mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-10-21 16:27:18 +02:00
7b9334cd10
## Thinking Path > - Paperclip helps people manage AI agents and their work. > - People need consistent UI patterns to review and control that work. > - The current board uses related layouts and controls with different spacing, type, and behavior. > - That drift makes it hard for a designer or an agent to build a new page from a reliable reference. > - Storybook can show the shared patterns and the states they need to support. > - This pull request adds design proposals, a local sandbox, and reusable UI controls so people can compare the patterns in context. > - The benefit is a clearer design system that agents can use to build consistent UI. ## Linked Issues or Issue Description **Subsystem affected** `ui/` — React board UI and Storybook. **Problem or motivation** Board pages repeat visual and interaction decisions. Storybook did not provide a complete reference for task views, conversation states, typography, toolbars, tabs, and light/dark colors. People could not compare a proposed pattern with the running board in one place. **Proposed solution** Add a staged Design Proposals catalog with foundations, components, layouts, and page specimens. Add an opt-in sandbox. Reuse production components where possible. Include synthetic conversation states and shared controls so reviewers can compare and refine them. **Alternatives considered** Separate static mockups would not show keyboard behavior, responsive layout, or real component states. Rebuilding each page only in Storybook would allow the reference to drift from the board. **Roadmap alignment** This improves existing board UI and Skills Manager surfaces. It does not add a new control-plane capability. ## What Changed - Added dark and light color references, typography and conversation specimens, and component stories for buttons, tabs, toolbars, sidebar, popovers, activity, and task lists. - Added a local design sandbox with synthetic task conversation playback and representative states. - Shared collection toolbars and navigation patterns across task, agent, project, routine, skill, connector, and artifact pages. - Added the streamlined Skills tabs and a My Skills collection that uses the shared skill cards. - Restored saved-thread access during synthetic playback, kept connector searchbox semantics, and updated reproduction checks after moving trial stories. - Documented the proposed patterns and added focused UI, catalog, and browser checks. ## Verification - `pnpm check:token-gates`, `node scripts/check-maps.mjs`, and `node scripts/storybook-catalog.mjs --check` passed. - Full workspace `pnpm -r typecheck` and `pnpm build` passed after merging master. After the review fixes, focused UI typecheck, `pnpm build-storybook`, 23 Skills Sources tests, and all 15 Storybook typography browser tests passed. - Focused task-thread and system-notice suites passed: 251 tests. Connector Browse passed 84 tests; the connector, attachment, recovery, and Storybook flyout browser journeys passed locally. - A local full Vitest run hit one intermittent chat-channels integration failure; that test passed in isolation. GitHub CI [39347996059](https://github.com/paperclipai/paperclip/actions/runs/39347996059) passed on the exact latest commit: 55 successful checks and two skipped draft-only Storybook jobs. - Greptile reviewed the exact latest commit at 5/5 with no new comments or open review threads. GitHub reports the branch as cleanly mergeable. ## Risks - This PR changes 206 files and exceeds the repository's 100-file review target. Review by commit and consider a scoped split before merge. - Design Proposals are staged references. Fixture interactions do not prove API behavior, permissions, or provider execution. - UI changes to shared controls may affect pages outside the proposal sandbox. Focused browser checks and the full CI matrix passed. ## Model Used - OpenAI Codex, GPT-6 family. The exact runtime model ID and context window are not exposed in this session. The model used reasoning, code execution, browser inspection, and local tests. Earlier branch commits were also AI-assisted in this Codex conversation. ## 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 available in this session) - [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 where applicable - [x] I have either linked existing issues or described the issue in-PR following the relevant issue template - [x] I have not referenced internal or instance-local Paperclip issues or links - [x] My branch name describes the change and contains no internal ticket id - [x] I have run focused 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 risks above - [x] All Paperclip CI gates are green - [x] 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: Scott Tong <scott@scotts-mbp-m5-max.local> Co-authored-by: Paperclip <noreply@paperclip.ing>
4359 lines
140 KiB
TypeScript
4359 lines
140 KiB
TypeScript
// @vitest-environment jsdom
|
||
|
||
import {
|
||
act,
|
||
createRef,
|
||
forwardRef,
|
||
StrictMode,
|
||
useImperativeHandle,
|
||
useState,
|
||
} from "react";
|
||
import { flushSync } from "react-dom";
|
||
import type { ComponentProps, ReactNode } from "react";
|
||
import { createRoot } from "react-dom/client";
|
||
import { MemoryRouter } from "react-router-dom";
|
||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||
import type { Agent } from "@paperclipai/shared";
|
||
import { CommentSubmissionUnknownError } from "../lib/comment-submit-result";
|
||
import { loadDraft, preserveDraftInTab, settleDraftSubmission } from "../lib/composer-draft";
|
||
import {
|
||
IssueAssigneePausedNotice,
|
||
IssueChatThread,
|
||
VIRTUALIZED_THREAD_ROW_THRESHOLD,
|
||
canStopIssueChatRun,
|
||
findLatestCommentMessageIndex,
|
||
getVirtualizedMeasurementScrollAdjustment,
|
||
resolveAssistantMessageFoldedState,
|
||
resolveIssueChatHumanAuthor,
|
||
} from "./IssueChatThread";
|
||
import type {
|
||
AskUserQuestionsInteraction,
|
||
RequestConfirmationInteraction,
|
||
SuggestTasksInteraction,
|
||
} from "../lib/issue-thread-interactions";
|
||
import {
|
||
issueChatLongThreadAgentMap,
|
||
issueChatLongThreadComments,
|
||
issueChatLongThreadEvents,
|
||
issueChatLongThreadLinkedRuns,
|
||
issueChatLongThreadTranscriptsByRunId,
|
||
} from "../fixtures/issueChatLongThreadFixture";
|
||
import { expiredSecretProposalInteraction } from "../fixtures/issueThreadInteractionFixtures";
|
||
import type {
|
||
IssueChatLinkedRun,
|
||
IssueChatTranscriptEntry,
|
||
} from "../lib/issue-chat-messages";
|
||
|
||
function flushAct<T>(callback: () => T): T {
|
||
let result: T | undefined;
|
||
flushSync(() => {
|
||
result = callback();
|
||
});
|
||
return result as T;
|
||
}
|
||
|
||
function hasSmoothScrollBehavior(arg: unknown) {
|
||
return (
|
||
typeof arg === "object" &&
|
||
arg !== null &&
|
||
"behavior" in arg &&
|
||
(arg as ScrollToOptions).behavior === "smooth"
|
||
);
|
||
}
|
||
|
||
const { markdownBodyRenderMock, markdownEditorFocusMock } = vi.hoisted(() => ({
|
||
markdownBodyRenderMock: vi.fn(),
|
||
markdownEditorFocusMock: vi.fn(),
|
||
}));
|
||
|
||
const { appendMock } = vi.hoisted(() => ({
|
||
appendMock: vi.fn(async () => undefined),
|
||
}));
|
||
|
||
const {
|
||
captureComposerViewportSnapshotMock,
|
||
restoreComposerViewportSnapshotMock,
|
||
shouldPreserveComposerViewportMock,
|
||
} = vi.hoisted(() => ({
|
||
captureComposerViewportSnapshotMock: vi.fn(),
|
||
restoreComposerViewportSnapshotMock: vi.fn(),
|
||
shouldPreserveComposerViewportMock: vi.fn(),
|
||
}));
|
||
|
||
vi.mock("@assistant-ui/react", () => ({
|
||
AssistantRuntimeProvider: ({ children }: { children: ReactNode }) => (
|
||
<div>{children}</div>
|
||
),
|
||
useAui: () => ({ thread: () => ({ append: appendMock }) }),
|
||
}));
|
||
|
||
vi.mock("./transcript/useLiveRunTranscripts", () => ({
|
||
useLiveRunTranscripts: () => ({
|
||
transcriptByRun: new Map(),
|
||
hasOutputForRun: () => false,
|
||
}),
|
||
}));
|
||
|
||
vi.mock("../lib/issue-chat-scroll", async (importOriginal) => {
|
||
const actual =
|
||
await importOriginal<typeof import("../lib/issue-chat-scroll")>();
|
||
return {
|
||
...actual,
|
||
captureComposerViewportSnapshot:
|
||
captureComposerViewportSnapshotMock.mockImplementation(
|
||
actual.captureComposerViewportSnapshot,
|
||
),
|
||
restoreComposerViewportSnapshot:
|
||
restoreComposerViewportSnapshotMock.mockImplementation(
|
||
actual.restoreComposerViewportSnapshot,
|
||
),
|
||
shouldPreserveComposerViewport:
|
||
shouldPreserveComposerViewportMock.mockImplementation(
|
||
actual.shouldPreserveComposerViewport,
|
||
),
|
||
};
|
||
});
|
||
|
||
vi.mock("./MarkdownBody", () => ({
|
||
MarkdownBody: ({
|
||
children,
|
||
className,
|
||
}: {
|
||
children: ReactNode;
|
||
className?: string;
|
||
}) => {
|
||
markdownBodyRenderMock({ children, className });
|
||
return <div className={className}>{children}</div>;
|
||
},
|
||
}));
|
||
|
||
vi.mock("./MarkdownEditor", () => ({
|
||
MarkdownEditor: forwardRef(
|
||
(
|
||
{
|
||
value = "",
|
||
onChange,
|
||
placeholder,
|
||
className,
|
||
contentClassName,
|
||
fileDropTarget,
|
||
}: {
|
||
value?: string;
|
||
onChange?: (value: string) => void;
|
||
placeholder?: string;
|
||
className?: string;
|
||
contentClassName?: string;
|
||
fileDropTarget?: "editor" | "parent";
|
||
},
|
||
ref,
|
||
) => {
|
||
useImperativeHandle(ref, () => ({
|
||
focus: markdownEditorFocusMock,
|
||
}));
|
||
|
||
return (
|
||
<textarea
|
||
aria-label="Issue chat editor"
|
||
data-class-name={className}
|
||
data-content-class-name={contentClassName}
|
||
data-file-drop-target={fileDropTarget}
|
||
placeholder={placeholder}
|
||
value={value}
|
||
onChange={(event) => onChange?.(event.target.value)}
|
||
/>
|
||
);
|
||
},
|
||
),
|
||
}));
|
||
|
||
vi.mock("./InlineEntitySelector", () => ({
|
||
InlineEntitySelector: ({ value, onChange }: { value: string; onChange: (value: string) => void }) => (
|
||
<select aria-label="Test recipient" value={value} onChange={(event) => onChange(event.target.value)}>
|
||
<option value="agent:first">First agent</option>
|
||
<option value="agent:latest">Latest agent</option>
|
||
<option value="user:me">Me</option>
|
||
<option value="">No responsible</option>
|
||
</select>
|
||
),
|
||
}));
|
||
|
||
vi.mock("./Identity", async importOriginal => ({
|
||
...await importOriginal<typeof import("./Identity")>(),
|
||
Identity: ({ name }: { name: string }) => <span>{name}</span>,
|
||
}));
|
||
|
||
vi.mock("./OutputFeedbackButtons", () => ({
|
||
OutputFeedbackButtons: () => null,
|
||
}));
|
||
|
||
vi.mock("@/components/ui/tooltip", () => ({
|
||
Tooltip: ({ children }: { children: ReactNode }) => <>{children}</>,
|
||
TooltipContent: ({ children }: { children: ReactNode }) => (
|
||
<div>{children}</div>
|
||
),
|
||
TooltipTrigger: ({ children }: { children: ReactNode }) => <>{children}</>,
|
||
}));
|
||
|
||
vi.mock("./AgentIconPicker", () => ({
|
||
AgentIcon: () => null,
|
||
}));
|
||
|
||
vi.mock("./StatusBadge", () => ({
|
||
StatusBadge: ({ status }: { status: string }) => <span>{status}</span>,
|
||
}));
|
||
|
||
vi.mock("./IssueLinkQuicklook", () => ({
|
||
IssueLinkQuicklook: ({
|
||
children,
|
||
to,
|
||
issuePathId,
|
||
className,
|
||
}: {
|
||
children: ReactNode;
|
||
to: string;
|
||
issuePathId: string;
|
||
className?: string;
|
||
}) => (
|
||
<a href={to} data-issue-path-id={issuePathId} className={className}>
|
||
{children}
|
||
</a>
|
||
),
|
||
}));
|
||
|
||
vi.mock("../hooks/usePaperclipIssueRuntime", () => ({
|
||
usePaperclipIssueRuntime: () => ({}),
|
||
}));
|
||
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
|
||
|
||
function createSuggestedTasksInteraction(
|
||
overrides: Partial<SuggestTasksInteraction> = {},
|
||
): SuggestTasksInteraction {
|
||
return {
|
||
id: "interaction-suggest-1",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
kind: "suggest_tasks",
|
||
title: "Suggested follow-up work",
|
||
summary: "Preview the next issue tree before accepting it.",
|
||
status: "pending",
|
||
continuationPolicy: "wake_assignee",
|
||
createdByAgentId: "agent-1",
|
||
createdByUserId: null,
|
||
resolvedByAgentId: null,
|
||
resolvedByUserId: null,
|
||
createdAt: new Date("2026-04-06T12:02:00.000Z"),
|
||
updatedAt: new Date("2026-04-06T12:02:00.000Z"),
|
||
resolvedAt: null,
|
||
payload: {
|
||
version: 1,
|
||
tasks: [
|
||
{
|
||
clientKey: "task-1",
|
||
title: "Prototype the card",
|
||
},
|
||
],
|
||
},
|
||
result: null,
|
||
...overrides,
|
||
resolverPolicy: overrides.resolverPolicy ?? "anyone",
|
||
requestedResolverPolicy: overrides.requestedResolverPolicy ?? "anyone",
|
||
effectiveResolverPolicy: overrides.effectiveResolverPolicy ?? "anyone",
|
||
resolverPolicyProvenance: overrides.resolverPolicyProvenance ?? "inherited",
|
||
effectiveResolverPolicySource:
|
||
overrides.effectiveResolverPolicySource ?? "requested",
|
||
legacyResolverPolicyAliases: overrides.legacyResolverPolicyAliases ?? {
|
||
requested: "board_or_agents",
|
||
effective: "board_or_agents",
|
||
},
|
||
};
|
||
}
|
||
|
||
function createQuestionInteraction(
|
||
overrides: Partial<AskUserQuestionsInteraction> = {},
|
||
): AskUserQuestionsInteraction {
|
||
return {
|
||
id: "interaction-question-1",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
kind: "ask_user_questions",
|
||
title: "Clarify the phase",
|
||
status: "pending",
|
||
continuationPolicy: "wake_assignee",
|
||
createdByAgentId: "agent-1",
|
||
createdByUserId: null,
|
||
resolvedByAgentId: null,
|
||
resolvedByUserId: null,
|
||
createdAt: new Date("2026-04-06T12:03:00.000Z"),
|
||
updatedAt: new Date("2026-04-06T12:03:00.000Z"),
|
||
resolvedAt: null,
|
||
payload: {
|
||
version: 1,
|
||
submitLabel: "Submit answers",
|
||
questions: [
|
||
{
|
||
id: "scope",
|
||
prompt: "Pick one scope",
|
||
selectionMode: "single",
|
||
required: true,
|
||
options: [
|
||
{ id: "phase-1", label: "Phase 1" },
|
||
{ id: "phase-2", label: "Phase 2" },
|
||
],
|
||
},
|
||
],
|
||
},
|
||
result: null,
|
||
...overrides,
|
||
resolverPolicy: overrides.resolverPolicy ?? "anyone",
|
||
requestedResolverPolicy: overrides.requestedResolverPolicy ?? "anyone",
|
||
effectiveResolverPolicy: overrides.effectiveResolverPolicy ?? "anyone",
|
||
resolverPolicyProvenance: overrides.resolverPolicyProvenance ?? "inherited",
|
||
effectiveResolverPolicySource:
|
||
overrides.effectiveResolverPolicySource ?? "requested",
|
||
legacyResolverPolicyAliases: overrides.legacyResolverPolicyAliases ?? {
|
||
requested: "board_or_agents",
|
||
effective: "board_or_agents",
|
||
},
|
||
};
|
||
}
|
||
|
||
function createExpiredRequestConfirmationInteraction(
|
||
overrides: Partial<RequestConfirmationInteraction> = {},
|
||
): RequestConfirmationInteraction {
|
||
return {
|
||
id: "interaction-confirmation-expired",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
kind: "request_confirmation",
|
||
title: "Approve the plan",
|
||
status: "expired",
|
||
continuationPolicy: "wake_assignee_on_accept",
|
||
createdByAgentId: "agent-1",
|
||
createdByUserId: null,
|
||
resolvedByAgentId: null,
|
||
resolvedByUserId: "user-1",
|
||
createdAt: new Date("2026-04-06T12:04:00.000Z"),
|
||
updatedAt: new Date("2026-04-06T12:05:00.000Z"),
|
||
resolvedAt: new Date("2026-04-06T12:05:00.000Z"),
|
||
payload: {
|
||
version: 1,
|
||
prompt: "Approve the plan and let the responsible start implementation?",
|
||
acceptLabel: "Approve plan",
|
||
rejectLabel: "Request revisions",
|
||
},
|
||
result: {
|
||
version: 1,
|
||
outcome: "superseded_by_comment",
|
||
commentId: "comment-1",
|
||
},
|
||
...overrides,
|
||
resolverPolicy: overrides.resolverPolicy ?? "anyone",
|
||
requestedResolverPolicy: overrides.requestedResolverPolicy ?? "anyone",
|
||
effectiveResolverPolicy: overrides.effectiveResolverPolicy ?? "anyone",
|
||
resolverPolicyProvenance: overrides.resolverPolicyProvenance ?? "inherited",
|
||
effectiveResolverPolicySource:
|
||
overrides.effectiveResolverPolicySource ?? "requested",
|
||
legacyResolverPolicyAliases: overrides.legacyResolverPolicyAliases ?? {
|
||
requested: "board_or_agents",
|
||
effective: "board_or_agents",
|
||
},
|
||
};
|
||
}
|
||
|
||
function createFileDragEvent(type: string, files: File[]) {
|
||
const event = new Event(type, {
|
||
bubbles: true,
|
||
cancelable: true,
|
||
}) as Event & {
|
||
dataTransfer: {
|
||
types: string[];
|
||
files: File[];
|
||
dropEffect?: string;
|
||
};
|
||
};
|
||
event.dataTransfer = {
|
||
types: ["Files"],
|
||
files,
|
||
};
|
||
return event;
|
||
}
|
||
|
||
describe("IssueChatThread", () => {
|
||
let container: HTMLDivElement;
|
||
|
||
it("updates automatic suggestions but preserves manual choices until the task changes", () => {
|
||
const root = createRoot(container);
|
||
const render = (suggestion: string, draftKey = "task-one") => act(() => root.render(
|
||
<MemoryRouter>
|
||
<IssueChatThread comments={[]} onAdd={async () => {}} enableReassign
|
||
reassignOptions={[{ id: "agent:first", label: "First agent" }]}
|
||
currentAssigneeValue="user:me" suggestedAssigneeValue={suggestion} draftKey={draftKey} enableLiveTranscriptPolling={false} />
|
||
</MemoryRouter>,
|
||
));
|
||
const selector = () => container.querySelector('select[aria-label="Test recipient"]') as HTMLSelectElement;
|
||
render("agent:first");
|
||
expect(selector().value).toBe("agent:first");
|
||
render("agent:latest");
|
||
expect(selector().value).toBe("agent:latest");
|
||
for (const manual of ["user:me", ""]) {
|
||
act(() => {
|
||
selector().value = manual;
|
||
selector().dispatchEvent(new Event("change", { bubbles: true }));
|
||
});
|
||
render("agent:first");
|
||
render("agent:latest");
|
||
expect(selector().value).toBe(manual);
|
||
}
|
||
render("agent:first", "task-two");
|
||
expect(selector().value).toBe("agent:first");
|
||
act(() => root.unmount());
|
||
});
|
||
function renderIssueThread(root: ReturnType<typeof createRoot>, props: Partial<ComponentProps<typeof IssueChatThread>> = {}) {
|
||
root.render(
|
||
<MemoryRouter>
|
||
<IssueChatThread
|
||
comments={[]}
|
||
linkedRuns={[]}
|
||
timelineEvents={[]}
|
||
liveRuns={[]}
|
||
onAdd={async () => {}}
|
||
enableLiveTranscriptPolling={false}
|
||
{...props}
|
||
/>
|
||
</MemoryRouter>,
|
||
);
|
||
}
|
||
|
||
beforeEach(() => {
|
||
container = document.createElement("div");
|
||
document.body.appendChild(container);
|
||
window.scrollTo = vi.fn();
|
||
localStorage.clear();
|
||
sessionStorage.clear();
|
||
});
|
||
|
||
afterEach(() => {
|
||
container.remove();
|
||
vi.useRealTimers();
|
||
appendMock.mockReset();
|
||
markdownEditorFocusMock.mockReset();
|
||
captureComposerViewportSnapshotMock.mockClear();
|
||
restoreComposerViewportSnapshotMock.mockClear();
|
||
shouldPreserveComposerViewportMock.mockClear();
|
||
markdownBodyRenderMock.mockClear();
|
||
});
|
||
|
||
it("drops the count heading and does not use an internal scrollbox", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
const spacer = container.querySelector(
|
||
'[data-testid="issue-chat-bottom-spacer"]',
|
||
);
|
||
expect(spacer).toBeNull();
|
||
|
||
expect(container.textContent).toContain("Jump to latest");
|
||
expect(container.textContent).not.toContain("Chat (");
|
||
|
||
const viewport = container.querySelector(
|
||
'[data-testid="thread-viewport"]',
|
||
) as HTMLDivElement | null;
|
||
expect(viewport).not.toBeNull();
|
||
expect(viewport?.className).not.toContain("overflow-y-auto");
|
||
expect(viewport?.className).not.toContain("max-h-(--sz-70vh)");
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("labels incoming iMessage bubbles without labeling board replies", () => {
|
||
const root = createRoot(container);
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: ["imessage", "board"].map((source) => ({
|
||
id: `comment-${source}`,
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
authorAgentId: null,
|
||
authorUserId: "user-board",
|
||
authorType: "user" as const,
|
||
body: `Reply from ${source}`,
|
||
presentation: null,
|
||
metadata: source === "imessage" ? {
|
||
version: 1 as const,
|
||
sourceChannel: "imessage-photon" as const,
|
||
sections: [{ title: "iMessage Photon sender", rows: [{ type: "text" as const, text: "Linked person" }] }],
|
||
} : null,
|
||
createdAt: new Date("2026-09-12T12:00:00Z"),
|
||
updatedAt: new Date("2026-09-12T12:00:00Z"),
|
||
})),
|
||
currentUserId: "user-board",
|
||
showComposer: false,
|
||
});
|
||
});
|
||
expect(container.querySelector("#comment-comment-imessage")?.textContent).toContain("Sent from iMessage");
|
||
expect(container.querySelector("#comment-comment-board")?.textContent).not.toContain("Sent from iMessage");
|
||
act(() => root.unmount());
|
||
});
|
||
|
||
it("uses accent-safe markdown color in the current user's blue message bubble", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: [
|
||
{
|
||
id: "comment-current-user",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
authorAgentId: null,
|
||
authorUserId: "user-board",
|
||
authorType: "user",
|
||
body: "1. **Readable** markdown on blue",
|
||
presentation: null,
|
||
metadata: null,
|
||
createdAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
updatedAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
},
|
||
],
|
||
currentUserId: "user-board",
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
expect(markdownBodyRenderMock).toHaveBeenCalledWith(
|
||
expect.objectContaining({
|
||
children: "1. **Readable** markdown on blue",
|
||
className: expect.stringContaining("paperclip-markdown-on-accent"),
|
||
}),
|
||
);
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("labels operator-interrupted cancelled runs as interrupted while preserving plain cancelled runs", () => {
|
||
const root = createRoot(container);
|
||
const linkedRuns: IssueChatLinkedRun[] = [
|
||
{
|
||
runId: "run-interrupted",
|
||
status: "cancelled",
|
||
agentId: "agent-1",
|
||
agentName: "CodexCoder",
|
||
createdAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
startedAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
finishedAt: new Date("2026-04-06T12:01:00.000Z"),
|
||
errorCode: "operator_interrupted",
|
||
resultJson: {
|
||
operatorInterrupted: true,
|
||
interruptionSource: "issue_comment_interrupt",
|
||
},
|
||
},
|
||
{
|
||
runId: "run-cancelled",
|
||
status: "cancelled",
|
||
agentId: "agent-1",
|
||
agentName: "CodexCoder",
|
||
createdAt: new Date("2026-04-06T12:02:00.000Z"),
|
||
startedAt: new Date("2026-04-06T12:02:00.000Z"),
|
||
finishedAt: new Date("2026-04-06T12:03:00.000Z"),
|
||
resultJson: { stopReason: "cancelled" },
|
||
},
|
||
];
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
linkedRuns: linkedRuns,
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
expect(container.textContent).toContain(
|
||
"interrupted by board after 1 minute",
|
||
);
|
||
expect(container.textContent).toContain("cancelled after 1 minute");
|
||
expect(container.textContent).not.toContain("run interrupted");
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("falls back to execCommand for comment copy actions in insecure contexts", async () => {
|
||
const clipboardWrite = vi.fn(async () => {
|
||
throw new Error("Clipboard API blocked");
|
||
});
|
||
const execCommand = vi.fn(() => true);
|
||
const originalClipboard = Object.getOwnPropertyDescriptor(
|
||
navigator,
|
||
"clipboard",
|
||
);
|
||
const originalExecCommand = Object.getOwnPropertyDescriptor(
|
||
document,
|
||
"execCommand",
|
||
);
|
||
const originalSecureContext = Object.getOwnPropertyDescriptor(
|
||
window,
|
||
"isSecureContext",
|
||
);
|
||
Object.defineProperty(window, "isSecureContext", {
|
||
configurable: true,
|
||
value: false,
|
||
});
|
||
Object.defineProperty(navigator, "clipboard", {
|
||
configurable: true,
|
||
value: { writeText: clipboardWrite },
|
||
});
|
||
Object.defineProperty(document, "execCommand", {
|
||
configurable: true,
|
||
value: execCommand,
|
||
});
|
||
|
||
try {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: [
|
||
{
|
||
id: "comment-copy",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
authorAgentId: null,
|
||
authorUserId: "user-1",
|
||
authorType: "user",
|
||
body: "Copy this comment",
|
||
presentation: null,
|
||
metadata: null,
|
||
createdAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
updatedAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
},
|
||
],
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
const copyButton = container.querySelector(
|
||
'button[aria-label="Copy message"]',
|
||
) as HTMLButtonElement | null;
|
||
expect(copyButton).not.toBeNull();
|
||
|
||
await act(async () => {
|
||
copyButton?.click();
|
||
await Promise.resolve();
|
||
});
|
||
|
||
expect(clipboardWrite).not.toHaveBeenCalled();
|
||
expect(execCommand).toHaveBeenCalledWith("copy");
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
} finally {
|
||
if (originalClipboard) {
|
||
Object.defineProperty(navigator, "clipboard", originalClipboard);
|
||
} else {
|
||
// @ts-expect-error test cleanup for optional browser API
|
||
delete navigator.clipboard;
|
||
}
|
||
if (originalExecCommand) {
|
||
Object.defineProperty(document, "execCommand", originalExecCommand);
|
||
} else {
|
||
// @ts-expect-error test cleanup for optional browser API
|
||
delete document.execCommand;
|
||
}
|
||
if (originalSecureContext) {
|
||
Object.defineProperty(window, "isSecureContext", originalSecureContext);
|
||
} else {
|
||
// @ts-expect-error test cleanup for optional browser API
|
||
delete window.isSecureContext;
|
||
}
|
||
}
|
||
});
|
||
|
||
it("renders footer content inside the thread viewport before the bottom anchor", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
showComposer: false,
|
||
footer: <div>Sibling footer</div>,
|
||
});
|
||
});
|
||
|
||
const viewport = container.querySelector('[data-testid="thread-viewport"]');
|
||
const footer = container.querySelector(
|
||
'[data-testid="issue-chat-thread-footer"]',
|
||
);
|
||
expect(viewport).not.toBeNull();
|
||
expect(footer).not.toBeNull();
|
||
expect(footer?.textContent).toBe("Sibling footer");
|
||
expect(footer?.parentElement).toBe(viewport);
|
||
expect(footer?.nextElementSibling?.textContent).toBe("");
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("renders the composer in planning mode when the issue is in planning mode", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
issueWorkMode: "planning",
|
||
onWorkModeChange: () => {},
|
||
});
|
||
});
|
||
|
||
const composer = container.querySelector(
|
||
'[data-testid="issue-chat-composer"]',
|
||
);
|
||
expect(composer).not.toBeNull();
|
||
expect(composer?.getAttribute("data-pending-work-mode")).toBe("planning");
|
||
expect(composer?.className).toContain("amber");
|
||
|
||
const chip = container.querySelector(
|
||
'[data-testid="issue-chat-composer-work-mode-chip"]',
|
||
);
|
||
expect(chip).not.toBeNull();
|
||
expect(chip?.getAttribute("data-pending-work-mode")).toBe("planning");
|
||
expect(chip?.textContent).toContain("Plan mode");
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("selects planning from the add menu and removes its chip", () => {
|
||
const root = createRoot(container);
|
||
const onWorkModeChange = vi.fn();
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
issueWorkMode: "standard",
|
||
onWorkModeChange: onWorkModeChange,
|
||
});
|
||
});
|
||
|
||
expect(container.querySelector('[data-testid="issue-chat-composer-work-mode-chip"]')).toBeNull();
|
||
const add = container.querySelector('[data-testid="issue-chat-composer-add"]') as HTMLButtonElement;
|
||
expect(add).not.toBeNull();
|
||
|
||
const composer = container.querySelector(
|
||
'[data-testid="issue-chat-composer"]',
|
||
);
|
||
expect(composer?.getAttribute("data-pending-work-mode")).toBe("standard");
|
||
expect(composer?.className).not.toContain("amber");
|
||
|
||
act(() => {
|
||
add.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, button: 0 }));
|
||
});
|
||
|
||
const menuItem = document.querySelector(
|
||
'[data-testid="composer-add-plan"]',
|
||
) as HTMLButtonElement | null;
|
||
expect(menuItem).not.toBeNull();
|
||
expect(menuItem?.textContent).toContain("Plan mode");
|
||
|
||
act(() => {
|
||
menuItem?.click();
|
||
});
|
||
|
||
// Local pending switch only — does not mutate the issue until submit.
|
||
expect(onWorkModeChange).not.toHaveBeenCalled();
|
||
expect(composer?.getAttribute("data-pending-work-mode")).toBe("planning");
|
||
expect(composer?.className).toContain("amber");
|
||
const chip = container.querySelector('[data-testid="issue-chat-composer-work-mode-chip"]') as HTMLButtonElement;
|
||
expect(chip?.textContent).toContain("Plan mode");
|
||
act(() => chip.click());
|
||
expect(composer?.getAttribute("data-pending-work-mode")).toBe("standard");
|
||
expect(container.querySelector('[data-testid="issue-chat-composer-work-mode-chip"]')).toBeNull();
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("selects ask mode from the composer menu and cycles work modes with cmd-period", () => {
|
||
const root = createRoot(container);
|
||
const onWorkModeChange = vi.fn();
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
issueWorkMode: "standard",
|
||
onWorkModeChange: onWorkModeChange,
|
||
});
|
||
});
|
||
|
||
const add = container.querySelector('[data-testid="issue-chat-composer-add"]') as HTMLButtonElement;
|
||
const composer = container.querySelector(
|
||
'[data-testid="issue-chat-composer"]',
|
||
) as HTMLDivElement | null;
|
||
expect(add).not.toBeNull();
|
||
expect(composer).not.toBeNull();
|
||
|
||
act(() => {
|
||
add.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, button: 0 }));
|
||
});
|
||
|
||
const askMenuItem = document.querySelector(
|
||
'[data-testid="composer-add-ask"]',
|
||
) as HTMLButtonElement | null;
|
||
expect(askMenuItem).not.toBeNull();
|
||
expect(askMenuItem?.textContent).toContain("Ask mode");
|
||
|
||
act(() => {
|
||
askMenuItem?.click();
|
||
});
|
||
|
||
expect(onWorkModeChange).not.toHaveBeenCalled();
|
||
expect(composer?.getAttribute("data-pending-work-mode")).toBe("ask");
|
||
expect(composer?.className).toContain("sky");
|
||
expect(container.querySelector('[data-testid="issue-chat-composer-work-mode-chip"]')?.textContent).toContain("Ask mode");
|
||
|
||
act(() => {
|
||
composer?.dispatchEvent(
|
||
new KeyboardEvent("keydown", {
|
||
bubbles: true,
|
||
code: "Period",
|
||
key: ".",
|
||
metaKey: true,
|
||
}),
|
||
);
|
||
});
|
||
|
||
expect(composer?.getAttribute("data-pending-work-mode")).toBe("standard");
|
||
expect(container.querySelector('[data-testid="issue-chat-composer-work-mode-chip"]')).toBeNull();
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("cycles work modes and prevents default when iOS leaves the keydown code empty", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
issueWorkMode: "standard",
|
||
});
|
||
});
|
||
|
||
const composer = container.querySelector(
|
||
'[data-testid="issue-chat-composer"]',
|
||
) as HTMLDivElement | null;
|
||
expect(composer).not.toBeNull();
|
||
expect(composer?.getAttribute("data-pending-work-mode")).toBe("standard");
|
||
|
||
// iOS Safari with a hardware keyboard frequently reports an empty `code` for
|
||
// cmd-period. Without a `key` fallback the handler returns early, never calls
|
||
// preventDefault, and Safari's default cancel/dismiss closes the view.
|
||
const evt = new KeyboardEvent("keydown", {
|
||
bubbles: true,
|
||
cancelable: true,
|
||
code: "",
|
||
key: ".",
|
||
metaKey: true,
|
||
});
|
||
act(() => {
|
||
composer?.dispatchEvent(evt);
|
||
});
|
||
|
||
expect(evt.defaultPrevented).toBe(true);
|
||
expect(composer?.getAttribute("data-pending-work-mode")).not.toBe(
|
||
"standard",
|
||
);
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("virtualizes long merged threads so only a windowed slice mounts", () => {
|
||
const root = createRoot(container);
|
||
const totalMergedRows =
|
||
issueChatLongThreadComments.length +
|
||
issueChatLongThreadEvents.length +
|
||
issueChatLongThreadLinkedRuns.length;
|
||
expect(totalMergedRows).toBeGreaterThanOrEqual(
|
||
VIRTUALIZED_THREAD_ROW_THRESHOLD,
|
||
);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: issueChatLongThreadComments,
|
||
linkedRuns: issueChatLongThreadLinkedRuns,
|
||
timelineEvents: issueChatLongThreadEvents,
|
||
agentMap: issueChatLongThreadAgentMap,
|
||
currentUserId: "user-board",
|
||
showComposer: false,
|
||
showJumpToLatest: false,
|
||
autoScrollToHashOnInitialLoad: true,
|
||
transcriptsByRunId: issueChatLongThreadTranscriptsByRunId,
|
||
hasOutputForRun: (runId) =>
|
||
issueChatLongThreadTranscriptsByRunId.has(runId),
|
||
});
|
||
});
|
||
|
||
const virtualizer = container.querySelector(
|
||
'[data-testid="issue-chat-thread-virtualizer"]',
|
||
) as HTMLDivElement | null;
|
||
expect(virtualizer).not.toBeNull();
|
||
expect(virtualizer?.dataset.virtualCount).toBe(String(totalMergedRows));
|
||
|
||
const rows = container.querySelectorAll(
|
||
'[data-testid="issue-chat-message-row"]',
|
||
);
|
||
expect(rows.length).toBeGreaterThan(0);
|
||
expect(rows.length).toBeLessThan(totalMergedRows);
|
||
|
||
const virtualRows = container.querySelectorAll(
|
||
'[data-testid="issue-chat-thread-virtual-row"]',
|
||
);
|
||
expect(virtualRows.length).toBe(rows.length);
|
||
for (const row of Array.from(virtualRows)) {
|
||
const transform = (row as HTMLDivElement).style.transform;
|
||
expect(transform).toMatch(/translateY\(/);
|
||
}
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("measures tall virtual rows before positioning following rows", async () => {
|
||
const root = createRoot(container);
|
||
const requestAnimationFrameMock = vi
|
||
.spyOn(window, "requestAnimationFrame")
|
||
.mockImplementation((callback) => {
|
||
callback(0);
|
||
return 0;
|
||
});
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: issueChatLongThreadComments,
|
||
linkedRuns: issueChatLongThreadLinkedRuns,
|
||
timelineEvents: issueChatLongThreadEvents,
|
||
agentMap: issueChatLongThreadAgentMap,
|
||
currentUserId: "user-board",
|
||
showComposer: false,
|
||
showJumpToLatest: false,
|
||
transcriptsByRunId: issueChatLongThreadTranscriptsByRunId,
|
||
hasOutputForRun: (runId) =>
|
||
issueChatLongThreadTranscriptsByRunId.has(runId),
|
||
});
|
||
});
|
||
|
||
const virtualRows = container.querySelectorAll<HTMLDivElement>(
|
||
'[data-testid="issue-chat-thread-virtual-row"]',
|
||
);
|
||
expect(virtualRows.length).toBeGreaterThan(1);
|
||
|
||
Object.defineProperty(virtualRows[0], "getBoundingClientRect", {
|
||
configurable: true,
|
||
value: () => ({
|
||
x: 0,
|
||
y: 0,
|
||
width: 700,
|
||
height: 800,
|
||
top: 0,
|
||
right: 700,
|
||
bottom: 800,
|
||
left: 0,
|
||
toJSON: () => ({}),
|
||
}),
|
||
});
|
||
|
||
await act(async () => {
|
||
virtualRows[0].dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||
await Promise.resolve();
|
||
});
|
||
|
||
const nextTransform = virtualRows[1].style.transform;
|
||
const translateY = Number(
|
||
nextTransform.match(/translateY\(([-\d.]+)px\)/)?.[1] ?? "0",
|
||
);
|
||
expect(translateY).toBeGreaterThanOrEqual(800);
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
requestAnimationFrameMock.mockRestore();
|
||
});
|
||
|
||
it("scrolls loaded hash targets through the virtualized message index when initial hash scrolling is enabled", () => {
|
||
const root = createRoot(container);
|
||
const targetComment = issueChatLongThreadComments.at(-1);
|
||
expect(targetComment).toBeDefined();
|
||
const scrollToMock = vi
|
||
.spyOn(window, "scrollTo")
|
||
.mockImplementation(() => {});
|
||
|
||
act(() => {
|
||
root.render(
|
||
<MemoryRouter
|
||
initialEntries={[`/issues/PAP-1#comment-${targetComment!.id}`]}
|
||
>
|
||
<IssueChatThread
|
||
comments={issueChatLongThreadComments}
|
||
linkedRuns={issueChatLongThreadLinkedRuns}
|
||
timelineEvents={issueChatLongThreadEvents}
|
||
liveRuns={[]}
|
||
agentMap={issueChatLongThreadAgentMap}
|
||
currentUserId="user-board"
|
||
onAdd={async () => {}}
|
||
showComposer={false}
|
||
showJumpToLatest={false}
|
||
autoScrollToHashOnInitialLoad
|
||
enableLiveTranscriptPolling={false}
|
||
transcriptsByRunId={issueChatLongThreadTranscriptsByRunId}
|
||
hasOutputForRun={(runId) =>
|
||
issueChatLongThreadTranscriptsByRunId.has(runId)
|
||
}
|
||
/>
|
||
</MemoryRouter>,
|
||
);
|
||
});
|
||
|
||
expect(
|
||
scrollToMock.mock.calls.some(([arg]) => hasSmoothScrollBehavior(arg)),
|
||
).toBe(true);
|
||
|
||
scrollToMock.mockRestore();
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("uses the virtualizer when jumping to the latest long-thread row", () => {
|
||
const root = createRoot(container);
|
||
const scrollToMock = vi
|
||
.spyOn(window, "scrollTo")
|
||
.mockImplementation(() => {});
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: issueChatLongThreadComments,
|
||
linkedRuns: issueChatLongThreadLinkedRuns,
|
||
timelineEvents: issueChatLongThreadEvents,
|
||
agentMap: issueChatLongThreadAgentMap,
|
||
currentUserId: "user-board",
|
||
transcriptsByRunId: issueChatLongThreadTranscriptsByRunId,
|
||
hasOutputForRun: (runId) =>
|
||
issueChatLongThreadTranscriptsByRunId.has(runId),
|
||
});
|
||
});
|
||
|
||
const jump = Array.from(container.querySelectorAll("button")).find(
|
||
(button) => button.textContent === "Jump to latest",
|
||
) as HTMLButtonElement | undefined;
|
||
expect(jump).toBeDefined();
|
||
|
||
act(() => {
|
||
jump?.click();
|
||
});
|
||
|
||
expect(
|
||
scrollToMock.mock.calls.some(([arg]) => hasSmoothScrollBehavior(arg)),
|
||
).toBe(true);
|
||
|
||
scrollToMock.mockRestore();
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
// Regression for PAP-2660: on the real issue page the chat thread is wrapped
|
||
// in `<main id="main-content" overflow-auto>`, so the virtualizer must bind
|
||
// to that ancestor's scroll instead of `window` (which never moves on
|
||
// desktop). When mounted inside an overflow-auto ancestor the jump-to-latest
|
||
// action must drive that element's scrollTo, not window.scrollTo.
|
||
it("targets an overflow-auto ancestor instead of window scroll on jump-to-latest", () => {
|
||
container.remove();
|
||
const scrollHost = document.createElement("main");
|
||
scrollHost.id = "main-content";
|
||
scrollHost.style.overflowY = "auto";
|
||
scrollHost.style.overflow = "auto";
|
||
scrollHost.style.height = "640px";
|
||
document.body.appendChild(scrollHost);
|
||
container = document.createElement("div");
|
||
scrollHost.appendChild(container);
|
||
|
||
const root = createRoot(container);
|
||
const windowScrollToMock = vi
|
||
.spyOn(window, "scrollTo")
|
||
.mockImplementation(() => {});
|
||
const elementScrollToMock = vi.fn();
|
||
scrollHost.scrollTo =
|
||
elementScrollToMock as unknown as typeof scrollHost.scrollTo;
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: issueChatLongThreadComments,
|
||
linkedRuns: issueChatLongThreadLinkedRuns,
|
||
timelineEvents: issueChatLongThreadEvents,
|
||
agentMap: issueChatLongThreadAgentMap,
|
||
currentUserId: "user-board",
|
||
transcriptsByRunId: issueChatLongThreadTranscriptsByRunId,
|
||
hasOutputForRun: (runId) =>
|
||
issueChatLongThreadTranscriptsByRunId.has(runId),
|
||
});
|
||
});
|
||
|
||
const jump = Array.from(container.querySelectorAll("button")).find(
|
||
(button) => button.textContent === "Jump to latest",
|
||
) as HTMLButtonElement | undefined;
|
||
expect(jump).toBeDefined();
|
||
|
||
windowScrollToMock.mockClear();
|
||
elementScrollToMock.mockClear();
|
||
|
||
act(() => {
|
||
jump?.click();
|
||
});
|
||
|
||
expect(
|
||
elementScrollToMock.mock.calls.some(([arg]) =>
|
||
hasSmoothScrollBehavior(arg),
|
||
),
|
||
).toBe(true);
|
||
expect(
|
||
windowScrollToMock.mock.calls.some(([arg]) =>
|
||
hasSmoothScrollBehavior(arg),
|
||
),
|
||
).toBe(false);
|
||
|
||
windowScrollToMock.mockRestore();
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
scrollHost.remove();
|
||
});
|
||
|
||
it("cancels jump-to-latest settling when the user scrolls manually", () => {
|
||
vi.useFakeTimers();
|
||
container.remove();
|
||
const scrollHost = document.createElement("main");
|
||
scrollHost.id = "main-content";
|
||
scrollHost.style.overflowY = "auto";
|
||
scrollHost.style.overflow = "auto";
|
||
scrollHost.style.height = "640px";
|
||
document.body.appendChild(scrollHost);
|
||
container = document.createElement("div");
|
||
scrollHost.appendChild(container);
|
||
|
||
const elementScrollToMock = vi.fn();
|
||
scrollHost.scrollTo =
|
||
elementScrollToMock as unknown as typeof scrollHost.scrollTo;
|
||
const originalScrollIntoView = Element.prototype.scrollIntoView;
|
||
const scrollIntoViewMock = vi.fn();
|
||
Element.prototype.scrollIntoView =
|
||
scrollIntoViewMock as unknown as typeof Element.prototype.scrollIntoView;
|
||
|
||
const root = createRoot(container);
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: issueChatLongThreadComments,
|
||
linkedRuns: issueChatLongThreadLinkedRuns,
|
||
timelineEvents: issueChatLongThreadEvents,
|
||
agentMap: issueChatLongThreadAgentMap,
|
||
currentUserId: "user-board",
|
||
transcriptsByRunId: issueChatLongThreadTranscriptsByRunId,
|
||
hasOutputForRun: (runId) =>
|
||
issueChatLongThreadTranscriptsByRunId.has(runId),
|
||
});
|
||
});
|
||
|
||
const jump = Array.from(container.querySelectorAll("button")).find(
|
||
(button) => button.textContent === "Jump to latest",
|
||
) as HTMLButtonElement | undefined;
|
||
expect(jump).toBeDefined();
|
||
|
||
// Flush pending mount timers so this test measures only the explicit
|
||
// jump-to-latest interaction.
|
||
act(() => {
|
||
vi.advanceTimersByTime(500);
|
||
});
|
||
elementScrollToMock.mockClear();
|
||
scrollIntoViewMock.mockClear();
|
||
|
||
act(() => {
|
||
jump?.click();
|
||
});
|
||
|
||
expect(
|
||
elementScrollToMock.mock.calls.some(([arg]) =>
|
||
hasSmoothScrollBehavior(arg),
|
||
),
|
||
).toBe(true);
|
||
const scrollCallsAfterClick = elementScrollToMock.mock.calls.length;
|
||
|
||
act(() => {
|
||
scrollHost.dispatchEvent(new WheelEvent("wheel", { bubbles: true }));
|
||
vi.advanceTimersByTime(500);
|
||
});
|
||
|
||
expect(elementScrollToMock).toHaveBeenCalledTimes(scrollCallsAfterClick);
|
||
expect(scrollIntoViewMock).not.toHaveBeenCalled();
|
||
|
||
Element.prototype.scrollIntoView = originalScrollIntoView;
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
scrollHost.remove();
|
||
});
|
||
|
||
// PAP-12003: initial page load must not jump to the latest comment. If a
|
||
// user wants the newest message, the explicit Jump to latest control owns it.
|
||
it("can keep the page at the top on initial load while preserving manual jump-to-latest", () => {
|
||
vi.useFakeTimers();
|
||
container.remove();
|
||
const scrollHost = document.createElement("main");
|
||
scrollHost.id = "main-content";
|
||
scrollHost.style.overflowY = "auto";
|
||
scrollHost.style.overflow = "auto";
|
||
scrollHost.style.height = "640px";
|
||
document.body.appendChild(scrollHost);
|
||
container = document.createElement("div");
|
||
scrollHost.appendChild(container);
|
||
|
||
const elementScrollToMock = vi.fn();
|
||
scrollHost.scrollTo =
|
||
elementScrollToMock as unknown as typeof scrollHost.scrollTo;
|
||
const originalScrollIntoView = Element.prototype.scrollIntoView;
|
||
const scrollIntoViewMock = vi.fn();
|
||
Element.prototype.scrollIntoView =
|
||
scrollIntoViewMock as unknown as typeof Element.prototype.scrollIntoView;
|
||
|
||
const root = createRoot(container);
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: issueChatLongThreadComments,
|
||
linkedRuns: issueChatLongThreadLinkedRuns,
|
||
timelineEvents: issueChatLongThreadEvents,
|
||
agentMap: issueChatLongThreadAgentMap,
|
||
currentUserId: "user-board",
|
||
transcriptsByRunId: issueChatLongThreadTranscriptsByRunId,
|
||
hasOutputForRun: (runId) =>
|
||
issueChatLongThreadTranscriptsByRunId.has(runId),
|
||
});
|
||
});
|
||
|
||
act(() => {
|
||
vi.advanceTimersByTime(500);
|
||
});
|
||
|
||
expect(elementScrollToMock).not.toHaveBeenCalled();
|
||
expect(scrollIntoViewMock).not.toHaveBeenCalled();
|
||
|
||
const jump = Array.from(container.querySelectorAll("button")).find(
|
||
(button) => button.textContent === "Jump to latest",
|
||
) as HTMLButtonElement | undefined;
|
||
expect(jump).toBeDefined();
|
||
|
||
act(() => {
|
||
jump?.click();
|
||
});
|
||
|
||
const scrolledToLatest =
|
||
elementScrollToMock.mock.calls.some(([arg]) =>
|
||
hasSmoothScrollBehavior(arg),
|
||
) || scrollIntoViewMock.mock.calls.length > 0;
|
||
expect(scrolledToLatest).toBe(true);
|
||
|
||
Element.prototype.scrollIntoView = originalScrollIntoView;
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
scrollHost.remove();
|
||
vi.useRealTimers();
|
||
});
|
||
|
||
it("can keep the page at the top on initial load even when the URL has a comment hash", () => {
|
||
vi.useFakeTimers();
|
||
const originalScrollIntoView = Element.prototype.scrollIntoView;
|
||
const scrollIntoViewMock = vi.fn();
|
||
Object.defineProperty(Element.prototype, "scrollIntoView", {
|
||
configurable: true,
|
||
value: scrollIntoViewMock,
|
||
});
|
||
|
||
const root = createRoot(container);
|
||
act(() => {
|
||
root.render(
|
||
<MemoryRouter
|
||
initialEntries={["/PAP/issues/PAP-12003#comment-comment-target"]}
|
||
>
|
||
<IssueChatThread
|
||
comments={[
|
||
{
|
||
id: "comment-target",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
authorAgentId: "agent-1",
|
||
authorUserId: null,
|
||
authorType: "agent",
|
||
body: "Previous done comment near the bottom.",
|
||
presentation: null,
|
||
metadata: null,
|
||
createdAt: new Date("2026-07-07T21:13:07.902Z"),
|
||
updatedAt: new Date("2026-07-07T21:13:07.902Z"),
|
||
},
|
||
]}
|
||
linkedRuns={[]}
|
||
timelineEvents={[]}
|
||
liveRuns={[]}
|
||
onAdd={async () => {}}
|
||
showComposer={false}
|
||
enableLiveTranscriptPolling={false}
|
||
/>
|
||
</MemoryRouter>,
|
||
);
|
||
});
|
||
|
||
act(() => {
|
||
vi.advanceTimersByTime(500);
|
||
});
|
||
|
||
expect(scrollIntoViewMock).not.toHaveBeenCalled();
|
||
|
||
Object.defineProperty(Element.prototype, "scrollIntoView", {
|
||
configurable: true,
|
||
value: originalScrollIntoView,
|
||
});
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
vi.useRealTimers();
|
||
});
|
||
|
||
// Regression for PAP-2672: when the merged feed ends with a non-comment row
|
||
// (run/timeline/embedded output) we still want Jump to latest to land on the
|
||
// last comment, not whichever activity row sorts last.
|
||
it("targets the latest comment row when trailing rows are non-comments (PAP-2672)", () => {
|
||
const lastComment = issueChatLongThreadComments.at(-1);
|
||
expect(lastComment).toBeDefined();
|
||
const trailingRunStart = new Date(
|
||
new Date(lastComment!.createdAt).getTime() + 60_000,
|
||
);
|
||
const trailingRun: IssueChatLinkedRun = {
|
||
runId: "trailing-run-pap-2672",
|
||
status: "failed",
|
||
agentId: "agent-perf-codex",
|
||
agentName: "TrailingRunner",
|
||
adapterType: "codex_local",
|
||
createdAt: trailingRunStart,
|
||
startedAt: trailingRunStart,
|
||
finishedAt: trailingRunStart,
|
||
hasStoredOutput: true,
|
||
};
|
||
const trailingTranscriptEntries: readonly IssueChatTranscriptEntry[] = [
|
||
{
|
||
kind: "assistant",
|
||
ts: trailingRunStart.toISOString(),
|
||
text: "Trailing run posted after the latest comment.",
|
||
},
|
||
];
|
||
const transcriptsByRunId = new Map(issueChatLongThreadTranscriptsByRunId);
|
||
transcriptsByRunId.set(trailingRun.runId, trailingTranscriptEntries);
|
||
const linkedRuns: IssueChatLinkedRun[] = [
|
||
...issueChatLongThreadLinkedRuns,
|
||
trailingRun,
|
||
];
|
||
|
||
container.remove();
|
||
const scrollHost = document.createElement("main");
|
||
scrollHost.id = "main-content";
|
||
scrollHost.style.overflowY = "auto";
|
||
scrollHost.style.overflow = "auto";
|
||
scrollHost.style.height = "800px";
|
||
Object.defineProperty(scrollHost, "scrollHeight", {
|
||
configurable: true,
|
||
get: () => 200_000,
|
||
});
|
||
Object.defineProperty(scrollHost, "clientHeight", {
|
||
configurable: true,
|
||
get: () => 800,
|
||
});
|
||
document.body.appendChild(scrollHost);
|
||
container = document.createElement("div");
|
||
scrollHost.appendChild(container);
|
||
|
||
const elementScrollToMock = vi.fn();
|
||
scrollHost.scrollTo =
|
||
elementScrollToMock as unknown as typeof scrollHost.scrollTo;
|
||
|
||
const root = createRoot(container);
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: issueChatLongThreadComments,
|
||
linkedRuns: linkedRuns,
|
||
timelineEvents: issueChatLongThreadEvents,
|
||
agentMap: issueChatLongThreadAgentMap,
|
||
currentUserId: "user-board",
|
||
transcriptsByRunId: transcriptsByRunId,
|
||
hasOutputForRun: (runId) => transcriptsByRunId.has(runId),
|
||
});
|
||
});
|
||
|
||
const virtualizerEl = container.querySelector<HTMLDivElement>(
|
||
'[data-testid="issue-chat-thread-virtualizer"]',
|
||
);
|
||
expect(virtualizerEl).not.toBeNull();
|
||
const totalMergedRows = Number(virtualizerEl?.dataset.virtualCount ?? "0");
|
||
expect(totalMergedRows).toBeGreaterThan(VIRTUALIZED_THREAD_ROW_THRESHOLD);
|
||
|
||
elementScrollToMock.mockClear();
|
||
|
||
const jump = Array.from(container.querySelectorAll("button")).find(
|
||
(button) => button.textContent === "Jump to latest",
|
||
) as HTMLButtonElement | undefined;
|
||
expect(jump).toBeDefined();
|
||
|
||
act(() => {
|
||
jump?.click();
|
||
});
|
||
|
||
const smoothCalls = elementScrollToMock.mock.calls
|
||
.map((call) => call[0] as ScrollToOptions)
|
||
.filter(hasSmoothScrollBehavior);
|
||
expect(smoothCalls.length).toBeGreaterThan(0);
|
||
|
||
// For align="end" with the very last index, tanstack-virtual short-circuits
|
||
// to getMaxScrollOffset() (= scrollHeight - clientHeight = 199_200 here).
|
||
// A jump to the latest comment row (one slot earlier) lands at item.end -
|
||
// clientHeight, which is strictly less. Asserting top < maxScrollOffset
|
||
// proves the button isn't routing to the trailing run row.
|
||
const maxScrollOffset = 200_000 - 800;
|
||
const lastTop = smoothCalls[smoothCalls.length - 1]?.top;
|
||
expect(typeof lastTop).toBe("number");
|
||
expect(lastTop as number).toBeLessThan(maxScrollOffset);
|
||
expect(lastTop as number).toBeGreaterThan(0);
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
scrollHost.remove();
|
||
});
|
||
|
||
// Regression for PAP-2672 follow-up: clicking Jump to latest must refresh
|
||
// the comments page so a comment that arrived after the initial load is
|
||
// present before we scroll. Otherwise the user lands on the latest *loaded*
|
||
// comment but not the absolute newest.
|
||
it("invokes onRefreshLatestComments before scrolling on Jump to latest", async () => {
|
||
const refreshMock = vi.fn(async () => undefined);
|
||
const directComments = issueChatLongThreadComments.slice(0, 8);
|
||
|
||
const root = createRoot(container);
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: directComments,
|
||
agentMap: issueChatLongThreadAgentMap,
|
||
currentUserId: "user-board",
|
||
onRefreshLatestComments: refreshMock,
|
||
});
|
||
});
|
||
|
||
const jump = Array.from(container.querySelectorAll("button")).find(
|
||
(button) => button.textContent === "Jump to latest",
|
||
) as HTMLButtonElement | undefined;
|
||
expect(jump).toBeDefined();
|
||
|
||
act(() => {
|
||
jump?.click();
|
||
});
|
||
|
||
expect(refreshMock).toHaveBeenCalledTimes(1);
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("uses comments rendered by onRefreshLatestComments before resolving latest", async () => {
|
||
const scrolledIds: string[] = [];
|
||
const originalScrollIntoView = Element.prototype.scrollIntoView;
|
||
Element.prototype.scrollIntoView = vi.fn(function scrollIntoView(
|
||
this: Element,
|
||
) {
|
||
scrolledIds.push(this.id);
|
||
}) as unknown as typeof Element.prototype.scrollIntoView;
|
||
|
||
const olderComment = {
|
||
id: "comment-before-refresh",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
authorAgentId: "agent-perf-codex",
|
||
authorUserId: null,
|
||
body: "Older loaded comment",
|
||
authorType: "agent" as const,
|
||
presentation: null,
|
||
metadata: null,
|
||
createdAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
updatedAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
};
|
||
const latestComment = {
|
||
...olderComment,
|
||
id: "comment-after-refresh",
|
||
body: "Latest fetched comment",
|
||
createdAt: new Date("2026-04-06T12:01:00.000Z"),
|
||
updatedAt: new Date("2026-04-06T12:01:00.000Z"),
|
||
};
|
||
|
||
function RefreshingThread() {
|
||
const [comments, setComments] = useState([olderComment]);
|
||
return (
|
||
<IssueChatThread
|
||
comments={comments}
|
||
linkedRuns={[]}
|
||
timelineEvents={[]}
|
||
liveRuns={[]}
|
||
agentMap={issueChatLongThreadAgentMap}
|
||
currentUserId="user-board"
|
||
onAdd={async () => {}}
|
||
enableLiveTranscriptPolling={false}
|
||
onRefreshLatestComments={async () => {
|
||
setComments([olderComment, latestComment]);
|
||
await new Promise((resolve) =>
|
||
window.requestAnimationFrame(resolve),
|
||
);
|
||
}}
|
||
/>
|
||
);
|
||
}
|
||
|
||
const root = createRoot(container);
|
||
await act(async () => {
|
||
root.render(
|
||
<MemoryRouter>
|
||
<RefreshingThread />
|
||
</MemoryRouter>,
|
||
);
|
||
});
|
||
|
||
const jump = Array.from(container.querySelectorAll("button")).find(
|
||
(button) => button.textContent === "Jump to latest",
|
||
) as HTMLButtonElement | undefined;
|
||
expect(jump).toBeDefined();
|
||
|
||
await act(async () => {
|
||
jump?.click();
|
||
await new Promise((resolve) => window.requestAnimationFrame(resolve));
|
||
});
|
||
|
||
expect(scrolledIds).toContain("comment-comment-after-refresh");
|
||
|
||
Element.prototype.scrollIntoView = originalScrollIntoView;
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("findLatestCommentMessageIndex prefers the last comment-anchored row (PAP-2672)", () => {
|
||
const messages = [
|
||
{ metadata: { custom: { anchorId: "comment-a" } } },
|
||
{ metadata: { custom: { anchorId: "run-1" } } },
|
||
{ metadata: { custom: { anchorId: "comment-b" } } },
|
||
{ metadata: { custom: { anchorId: "run-2" } } },
|
||
{ metadata: { custom: { anchorId: "activity-3" } } },
|
||
];
|
||
expect(findLatestCommentMessageIndex(messages as never)).toBe(2);
|
||
expect(
|
||
findLatestCommentMessageIndex([
|
||
{ metadata: { custom: { anchorId: "run-only" } } },
|
||
] as never),
|
||
).toBe(-1);
|
||
expect(findLatestCommentMessageIndex([] as never)).toBe(-1);
|
||
});
|
||
|
||
it("keeps the direct render path for short threads under the virtualization threshold", () => {
|
||
const root = createRoot(container);
|
||
const directComments = issueChatLongThreadComments.slice(0, 12);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: directComments,
|
||
agentMap: issueChatLongThreadAgentMap,
|
||
currentUserId: "user-board",
|
||
showComposer: false,
|
||
showJumpToLatest: false,
|
||
});
|
||
});
|
||
|
||
expect(
|
||
container.querySelector('[data-testid="issue-chat-thread-virtualizer"]'),
|
||
).toBeNull();
|
||
const rows = container.querySelectorAll(
|
||
'[data-testid="issue-chat-message-row"]',
|
||
);
|
||
expect(rows.length).toBe(directComments.length);
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("keeps the viewport anchored when virtualized rows above it remeasure", () => {
|
||
expect(
|
||
getVirtualizedMeasurementScrollAdjustment({
|
||
itemStart: 200,
|
||
previousSize: 220,
|
||
nextSize: 360,
|
||
viewportStart: 480,
|
||
}),
|
||
).toBe(140);
|
||
|
||
expect(
|
||
getVirtualizedMeasurementScrollAdjustment({
|
||
itemStart: 200,
|
||
previousSize: 360,
|
||
nextSize: 180,
|
||
viewportStart: 620,
|
||
}),
|
||
).toBe(-180);
|
||
});
|
||
|
||
it("does not scroll-anchor virtualized measurement changes inside the viewport", () => {
|
||
expect(
|
||
getVirtualizedMeasurementScrollAdjustment({
|
||
itemStart: 420,
|
||
previousSize: 220,
|
||
nextSize: 360,
|
||
viewportStart: 480,
|
||
}),
|
||
).toBe(0);
|
||
});
|
||
|
||
it("renders virtualized rows with the same role/kind metadata as the direct path", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: issueChatLongThreadComments,
|
||
linkedRuns: issueChatLongThreadLinkedRuns,
|
||
timelineEvents: issueChatLongThreadEvents,
|
||
agentMap: issueChatLongThreadAgentMap,
|
||
currentUserId: "user-board",
|
||
showComposer: false,
|
||
showJumpToLatest: false,
|
||
transcriptsByRunId: issueChatLongThreadTranscriptsByRunId,
|
||
hasOutputForRun: (runId) =>
|
||
issueChatLongThreadTranscriptsByRunId.has(runId),
|
||
});
|
||
});
|
||
|
||
const rows = container.querySelectorAll(
|
||
'[data-testid="issue-chat-message-row"]',
|
||
);
|
||
expect(rows.length).toBeGreaterThan(0);
|
||
const roles = new Set<string>();
|
||
const kinds = new Set<string>();
|
||
for (const row of Array.from(rows)) {
|
||
const element = row as HTMLDivElement;
|
||
const role = element.dataset.messageRole;
|
||
const kind = element.dataset.messageKind;
|
||
if (role) roles.add(role);
|
||
if (kind) kinds.add(kind);
|
||
}
|
||
expect(roles.size).toBeGreaterThan(0);
|
||
expect(kinds.size).toBeGreaterThan(0);
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("does not re-render long-thread markdown rows for unrelated layout updates", () => {
|
||
const root = createRoot(container);
|
||
const onAdd = async () => {};
|
||
const hasOutputForRun = (runId: string) =>
|
||
issueChatLongThreadTranscriptsByRunId.has(runId);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: issueChatLongThreadComments,
|
||
linkedRuns: issueChatLongThreadLinkedRuns,
|
||
timelineEvents: issueChatLongThreadEvents,
|
||
agentMap: issueChatLongThreadAgentMap,
|
||
currentUserId: "user-board",
|
||
onAdd: onAdd,
|
||
showComposer: false,
|
||
showJumpToLatest: false,
|
||
transcriptsByRunId: issueChatLongThreadTranscriptsByRunId,
|
||
hasOutputForRun: hasOutputForRun,
|
||
});
|
||
});
|
||
|
||
expect(markdownBodyRenderMock).toHaveBeenCalled();
|
||
markdownBodyRenderMock.mockClear();
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: issueChatLongThreadComments,
|
||
linkedRuns: issueChatLongThreadLinkedRuns,
|
||
timelineEvents: issueChatLongThreadEvents,
|
||
agentMap: issueChatLongThreadAgentMap,
|
||
currentUserId: "user-board",
|
||
onAdd: onAdd,
|
||
showComposer: false,
|
||
showJumpToLatest: true,
|
||
transcriptsByRunId: issueChatLongThreadTranscriptsByRunId,
|
||
hasOutputForRun: hasOutputForRun,
|
||
});
|
||
});
|
||
|
||
expect(markdownBodyRenderMock).not.toHaveBeenCalled();
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("does not re-render unchanged markdown when feedback votes change", () => {
|
||
const root = createRoot(container);
|
||
const onAdd = async () => {};
|
||
const onVote = async () => {};
|
||
const comments = [
|
||
{
|
||
id: "comment-agent-feedback",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
authorAgentId: "agent-1",
|
||
authorUserId: null,
|
||
body: "Agent summary with **markdown**",
|
||
authorType: "agent" as const,
|
||
presentation: null,
|
||
metadata: null,
|
||
createdAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
updatedAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
},
|
||
];
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: comments,
|
||
onAdd: onAdd,
|
||
onVote: onVote,
|
||
feedbackVotes: [],
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
expect(markdownBodyRenderMock).toHaveBeenCalled();
|
||
markdownBodyRenderMock.mockClear();
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: comments,
|
||
onAdd: onAdd,
|
||
onVote: onVote,
|
||
feedbackVotes: [
|
||
{
|
||
id: "feedback-1",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
targetType: "issue_comment",
|
||
targetId: "comment-agent-feedback",
|
||
authorUserId: "user-1",
|
||
vote: "up",
|
||
reason: null,
|
||
sharedWithLabs: false,
|
||
sharedAt: null,
|
||
consentVersion: null,
|
||
redactionSummary: null,
|
||
createdAt: new Date("2026-04-06T12:01:00.000Z"),
|
||
updatedAt: new Date("2026-04-06T12:01:00.000Z"),
|
||
},
|
||
],
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
expect(markdownBodyRenderMock).not.toHaveBeenCalled();
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("renders a genuine agent comment in the conference-room neutral bubble (PAP-97 rev 7)", () => {
|
||
const root = createRoot(container);
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: [
|
||
{
|
||
id: "comment-agent-bubble",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
authorAgentId: "agent-1",
|
||
authorUserId: null,
|
||
body: "Here is my agent reply.",
|
||
authorType: "agent" as const,
|
||
presentation: null,
|
||
metadata: null,
|
||
createdAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
updatedAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
},
|
||
],
|
||
currentUserId: "user-board",
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
// Conference-room canonical agent bubble: bg-card + border + tail corner.
|
||
const bubble = Array.from(container.querySelectorAll("div")).find(
|
||
(el) =>
|
||
el.className.includes("bg-card") &&
|
||
el.className.includes("border-border") &&
|
||
el.className.includes("[border-radius:14px_14px_14px_4px]"),
|
||
);
|
||
expect(bubble).toBeDefined();
|
||
expect(bubble?.textContent).toContain("Here is my agent reply.");
|
||
expect(bubble?.className).toContain("max-w-(--sz-calc-7)");
|
||
expect(bubble?.className).toContain("sm:max-w-(--pct-85)");
|
||
// Neutral, not the human liveness-blue bubble (--liveness-blue, DECISION-SHEET.md A6).
|
||
expect(bubble?.className).not.toContain("bg-(--liveness-blue)");
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("confirms and invokes delete only for the current user's normal comments", async () => {
|
||
const root = createRoot(container);
|
||
const onDeleteComment = vi.fn(async () => {});
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: [
|
||
{
|
||
id: "comment-owned",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
authorAgentId: null,
|
||
authorUserId: "user-board",
|
||
body: "Delete me",
|
||
authorType: "user",
|
||
presentation: null,
|
||
metadata: null,
|
||
createdAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
updatedAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
},
|
||
{
|
||
id: "comment-other",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
authorAgentId: null,
|
||
authorUserId: "user-other",
|
||
body: "Do not delete",
|
||
authorType: "user",
|
||
presentation: null,
|
||
metadata: null,
|
||
createdAt: new Date("2026-04-06T12:01:00.000Z"),
|
||
updatedAt: new Date("2026-04-06T12:01:00.000Z"),
|
||
},
|
||
],
|
||
currentUserId: "user-board",
|
||
onDeleteComment: onDeleteComment,
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
const deleteButtons = Array.from(
|
||
container.querySelectorAll("button[aria-label='Delete comment']"),
|
||
);
|
||
expect(deleteButtons).toHaveLength(1);
|
||
|
||
await act(async () => {
|
||
deleteButtons[0]?.dispatchEvent(
|
||
new MouseEvent("click", { bubbles: true }),
|
||
);
|
||
});
|
||
|
||
expect(document.body.textContent).toContain("Delete comment?");
|
||
const confirmButton = Array.from(
|
||
document.body.querySelectorAll("button"),
|
||
).find((button) => button.textContent === "Delete comment");
|
||
expect(confirmButton).toBeTruthy();
|
||
|
||
await act(async () => {
|
||
confirmButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||
});
|
||
|
||
expect(onDeleteComment).toHaveBeenCalledWith("comment-owned");
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("renders deleted comments as tombstones without the original body", () => {
|
||
const root = createRoot(container);
|
||
|
||
flushAct(() => {
|
||
renderIssueThread(root, {
|
||
comments: [
|
||
{
|
||
id: "comment-deleted",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
authorAgentId: null,
|
||
authorUserId: "user-board",
|
||
body: "Sensitive deleted body",
|
||
authorType: "user",
|
||
presentation: null,
|
||
metadata: null,
|
||
deletedAt: new Date("2026-04-06T12:05:00.000Z"),
|
||
deletedByType: "user",
|
||
deletedByUserId: "user-board",
|
||
createdAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
updatedAt: new Date("2026-04-06T12:05:00.000Z"),
|
||
},
|
||
],
|
||
currentUserId: "user-board",
|
||
onDeleteComment: async () => {},
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
expect(container.textContent).toContain("You deleted this comment");
|
||
expect(container.textContent).not.toContain("Sensitive deleted body");
|
||
expect(
|
||
container.querySelector("button[aria-label='Delete comment']"),
|
||
).toBeNull();
|
||
expect(
|
||
container.querySelector("button[aria-label='Copy message']"),
|
||
).toBeNull();
|
||
|
||
flushAct(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("clears a deleted comment deep-link hash instead of highlighting it", () => {
|
||
const root = createRoot(container);
|
||
const replaceStateSpy = vi
|
||
.spyOn(window.history, "replaceState")
|
||
.mockImplementation(() => {});
|
||
|
||
flushAct(() => {
|
||
root.render(
|
||
<MemoryRouter
|
||
initialEntries={["/issues/PAP-1#comment-comment-deleted"]}
|
||
>
|
||
<IssueChatThread
|
||
comments={[
|
||
{
|
||
id: "comment-deleted",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
authorAgentId: null,
|
||
authorUserId: "user-board",
|
||
body: "Sensitive deleted body",
|
||
authorType: "user",
|
||
presentation: null,
|
||
metadata: null,
|
||
deletedAt: new Date("2026-04-06T12:05:00.000Z"),
|
||
deletedByType: "user",
|
||
deletedByUserId: "user-board",
|
||
createdAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
updatedAt: new Date("2026-04-06T12:05:00.000Z"),
|
||
},
|
||
]}
|
||
currentUserId="user-board"
|
||
linkedRuns={[]}
|
||
timelineEvents={[]}
|
||
liveRuns={[]}
|
||
onAdd={async () => {}}
|
||
showComposer={false}
|
||
enableLiveTranscriptPolling={false}
|
||
/>
|
||
</MemoryRouter>,
|
||
);
|
||
});
|
||
|
||
expect(replaceStateSpy).toHaveBeenCalledWith(null, "", "/issues/PAP-1");
|
||
|
||
replaceStateSpy.mockRestore();
|
||
flushAct(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("shows explicit follow-up badges and event copy", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: [
|
||
{
|
||
id: "comment-1",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
authorAgentId: null,
|
||
authorUserId: "local-board",
|
||
body: "Please continue validation.",
|
||
authorType: "user",
|
||
presentation: null,
|
||
metadata: null,
|
||
followUpRequested: true,
|
||
createdAt: new Date("2026-03-11T10:00:00.000Z"),
|
||
updatedAt: new Date("2026-03-11T10:00:00.000Z"),
|
||
},
|
||
],
|
||
timelineEvents: [
|
||
{
|
||
id: "event-1",
|
||
actorType: "agent",
|
||
actorId: "agent-1",
|
||
createdAt: new Date("2026-03-11T10:00:00.000Z"),
|
||
commentId: "comment-1",
|
||
followUpRequested: true,
|
||
},
|
||
],
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
expect(container.textContent).toContain("Follow-up");
|
||
expect(container.textContent).toContain("requested follow-up");
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("shows unresolved blocker context above the composer", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
issueStatus: "todo",
|
||
blockedBy: [
|
||
{
|
||
id: "blocker-1",
|
||
identifier: "PAP-1723",
|
||
title: "QA the install flow",
|
||
status: "blocked",
|
||
priority: "medium",
|
||
assigneeAgentId: "agent-1",
|
||
assigneeUserId: null,
|
||
},
|
||
],
|
||
});
|
||
});
|
||
|
||
expect(container.textContent).toContain("PAP-1723");
|
||
expect(container.textContent).toContain("QA the install flow");
|
||
expect(
|
||
container.querySelector('[data-issue-path-id="PAP-1723"]'),
|
||
).not.toBeNull();
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("shows terminal blocker context when an immediate blocker is transitively blocked", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
issueStatus: "blocked",
|
||
blockedBy: [
|
||
{
|
||
id: "blocker-1",
|
||
identifier: "PAP-2167",
|
||
title: "Phase 7 review",
|
||
status: "blocked",
|
||
priority: "medium",
|
||
assigneeAgentId: "agent-1",
|
||
assigneeUserId: null,
|
||
terminalBlockers: [
|
||
{
|
||
id: "terminal-1",
|
||
identifier: "PAP-2201",
|
||
title: "Security sign-off",
|
||
status: "todo",
|
||
priority: "high",
|
||
assigneeAgentId: "agent-2",
|
||
assigneeUserId: null,
|
||
},
|
||
],
|
||
},
|
||
],
|
||
});
|
||
});
|
||
|
||
expect(container.textContent).toContain("PAP-2167");
|
||
expect(container.textContent).toContain("Phase 7 review");
|
||
expect(container.textContent).toContain("Ultimately waiting on");
|
||
expect(container.textContent).toContain("PAP-2201");
|
||
expect(container.textContent).toContain("Security sign-off");
|
||
expect(
|
||
container.querySelector('[data-issue-path-id="PAP-2201"]'),
|
||
).not.toBeNull();
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("renders the blue 'Waiting on live work' variant when the blocker chain is covered", () => {
|
||
const root = createRoot(container);
|
||
|
||
flushAct(() => {
|
||
renderIssueThread(root, {
|
||
issueStatus: "blocked",
|
||
liveIssueIds: new Set(["blocker-run"]),
|
||
blockerAttention: {
|
||
state: "covered",
|
||
reason: "active_dependency",
|
||
unresolvedBlockerCount: 3,
|
||
coveredBlockerCount: 3,
|
||
stalledBlockerCount: 0,
|
||
attentionBlockerCount: 0,
|
||
sampleBlockerIdentifier: "PAP-2002",
|
||
sampleStalledBlockerIdentifier: null,
|
||
},
|
||
blockedBy: [
|
||
{
|
||
id: "blocker-done",
|
||
identifier: "PAP-2001",
|
||
title: "Server work",
|
||
status: "done",
|
||
priority: "medium",
|
||
assigneeAgentId: "agent-1",
|
||
assigneeUserId: null,
|
||
},
|
||
{
|
||
id: "blocker-run",
|
||
identifier: "PAP-2002",
|
||
title: "UI work",
|
||
status: "in_progress",
|
||
priority: "medium",
|
||
assigneeAgentId: "agent-2",
|
||
assigneeUserId: null,
|
||
},
|
||
{
|
||
id: "blocker-queued",
|
||
identifier: "PAP-2003",
|
||
title: "QA gate",
|
||
status: "todo",
|
||
priority: "medium",
|
||
assigneeAgentId: "agent-3",
|
||
assigneeUserId: null,
|
||
},
|
||
],
|
||
});
|
||
});
|
||
|
||
const notice = container.querySelector(
|
||
'[data-testid="issue-blocked-notice-live"]',
|
||
);
|
||
expect(notice).not.toBeNull();
|
||
expect(notice?.getAttribute("data-blocker-attention-state")).toBe(
|
||
"covered",
|
||
);
|
||
expect(container.textContent).toContain("Waiting on live work");
|
||
expect(container.textContent).toContain(
|
||
"resumes automatically when the chain is done",
|
||
);
|
||
// Progress counts: 1 done, 1 running out of 3.
|
||
expect(container.textContent).toContain("1 of 3 done · 1 running");
|
||
// Amber "Ultimately waiting on" / "blocked by the linked task" copy is gone.
|
||
expect(container.textContent).not.toContain("Ultimately waiting on");
|
||
expect(container.textContent).not.toContain(
|
||
"Work on this task is blocked by",
|
||
);
|
||
// All three blockers render as chips.
|
||
expect(
|
||
container.querySelector('[data-issue-path-id="PAP-2001"]'),
|
||
).not.toBeNull();
|
||
expect(
|
||
container.querySelector('[data-issue-path-id="PAP-2002"]'),
|
||
).not.toBeNull();
|
||
expect(
|
||
container.querySelector('[data-issue-path-id="PAP-2003"]'),
|
||
).not.toBeNull();
|
||
|
||
flushAct(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("shows a 'Now running' row replacing 'Ultimately waiting on' when the terminal leaf is live", () => {
|
||
const root = createRoot(container);
|
||
|
||
flushAct(() => {
|
||
renderIssueThread(root, {
|
||
issueStatus: "blocked",
|
||
liveIssueIds: new Set(["terminal-live"]),
|
||
blockerAttention: {
|
||
state: "covered",
|
||
reason: "active_dependency",
|
||
unresolvedBlockerCount: 1,
|
||
coveredBlockerCount: 1,
|
||
stalledBlockerCount: 0,
|
||
attentionBlockerCount: 0,
|
||
sampleBlockerIdentifier: "PAP-3001",
|
||
sampleStalledBlockerIdentifier: null,
|
||
},
|
||
blockedBy: [
|
||
{
|
||
id: "blocker-mid",
|
||
identifier: "PAP-3001",
|
||
title: "Phase 7 review",
|
||
status: "blocked",
|
||
priority: "medium",
|
||
assigneeAgentId: "agent-1",
|
||
assigneeUserId: null,
|
||
terminalBlockers: [
|
||
{
|
||
id: "terminal-live",
|
||
identifier: "PAP-3002",
|
||
title: "Security sign-off",
|
||
status: "in_progress",
|
||
priority: "high",
|
||
assigneeAgentId: "agent-2",
|
||
assigneeUserId: null,
|
||
},
|
||
],
|
||
},
|
||
],
|
||
});
|
||
});
|
||
|
||
const nowRunning = container.querySelector(
|
||
'[data-testid="issue-blocked-notice-now-running"]',
|
||
);
|
||
expect(nowRunning).not.toBeNull();
|
||
expect(nowRunning?.textContent).toContain("Now running");
|
||
expect(nowRunning?.textContent).toContain("PAP-3002");
|
||
expect(container.textContent).not.toContain("Ultimately waiting on");
|
||
|
||
flushAct(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("keeps the parked-work row amber inside the blue variant", () => {
|
||
const root = createRoot(container);
|
||
|
||
flushAct(() => {
|
||
renderIssueThread(root, {
|
||
issueStatus: "blocked",
|
||
liveIssueIds: new Set(["blocker-run"]),
|
||
blockerAttention: {
|
||
state: "covered",
|
||
reason: "active_dependency",
|
||
unresolvedBlockerCount: 2,
|
||
coveredBlockerCount: 2,
|
||
stalledBlockerCount: 0,
|
||
attentionBlockerCount: 0,
|
||
sampleBlockerIdentifier: "PAP-4001",
|
||
sampleStalledBlockerIdentifier: null,
|
||
},
|
||
blockedBy: [
|
||
{
|
||
id: "blocker-run",
|
||
identifier: "PAP-4001",
|
||
title: "UI work",
|
||
status: "in_progress",
|
||
priority: "medium",
|
||
assigneeAgentId: "agent-1",
|
||
assigneeUserId: null,
|
||
},
|
||
{
|
||
id: "blocker-parked",
|
||
identifier: "PAP-4002",
|
||
title: "Parked backlog task",
|
||
status: "backlog",
|
||
priority: "medium",
|
||
assigneeAgentId: "agent-2",
|
||
assigneeUserId: null,
|
||
},
|
||
],
|
||
});
|
||
});
|
||
|
||
expect(
|
||
container.querySelector('[data-testid="issue-blocked-notice-live"]'),
|
||
).not.toBeNull();
|
||
const parkedRow = container.querySelector(
|
||
'[data-testid="issue-blocked-notice-parked-row"]',
|
||
);
|
||
expect(parkedRow).not.toBeNull();
|
||
expect(parkedRow?.textContent).toContain("Blocked by parked work");
|
||
// Parked label keeps its amber tone even inside the blue box.
|
||
expect(parkedRow?.querySelector(".text-amber-800")).not.toBeNull();
|
||
|
||
flushAct(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("keeps the amber notice byte-for-byte for stalled / needs_attention / none states", () => {
|
||
for (const state of ["stalled", "needs_attention", "none"] as const) {
|
||
const root = createRoot(container);
|
||
|
||
flushAct(() => {
|
||
renderIssueThread(root, {
|
||
issueStatus: "blocked",
|
||
liveIssueIds: new Set(["blocker-1"]),
|
||
blockerAttention: {
|
||
state,
|
||
reason: state === "stalled" ? "stalled_review" : null,
|
||
unresolvedBlockerCount: 1,
|
||
coveredBlockerCount: 0,
|
||
stalledBlockerCount: state === "stalled" ? 1 : 0,
|
||
attentionBlockerCount: state === "needs_attention" ? 1 : 0,
|
||
sampleBlockerIdentifier: "PAP-5001",
|
||
sampleStalledBlockerIdentifier:
|
||
state === "stalled" ? "PAP-5001" : null,
|
||
},
|
||
blockedBy: [
|
||
{
|
||
id: "blocker-1",
|
||
identifier: "PAP-5001",
|
||
title: "Review task",
|
||
status: "in_review",
|
||
priority: "medium",
|
||
assigneeAgentId: "agent-1",
|
||
assigneeUserId: null,
|
||
},
|
||
],
|
||
});
|
||
});
|
||
|
||
// Blue variant never appears for non-covered states.
|
||
expect(
|
||
container.querySelector('[data-testid="issue-blocked-notice-live"]'),
|
||
).toBeNull();
|
||
// The amber container (with the canonical attention data attribute) does.
|
||
const amber = container.querySelector(
|
||
`[data-blocker-attention-state="${state}"]`,
|
||
);
|
||
expect(amber).not.toBeNull();
|
||
expect(amber?.className).toContain("border-amber-300/70");
|
||
if (state === "stalled") {
|
||
expect(container.textContent).toContain("Stalled in review");
|
||
}
|
||
|
||
flushAct(() => {
|
||
root.unmount();
|
||
});
|
||
}
|
||
});
|
||
|
||
it("shows paused responsible agent context above the composer", () => {
|
||
const root = createRoot(container);
|
||
const pausedAgent = {
|
||
id: "agent-1",
|
||
companyId: "company-1",
|
||
name: "CodexCoder",
|
||
status: "paused",
|
||
pauseReason: "manual",
|
||
} as Agent;
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
agentMap: new Map([["agent-1", pausedAgent]]),
|
||
currentAssigneeValue: "agent:agent-1",
|
||
});
|
||
});
|
||
|
||
expect(container.textContent).toContain("CodexCoder is paused");
|
||
expect(container.textContent).toContain(
|
||
"New runs will not start until the agent is resumed",
|
||
);
|
||
expect(container.textContent).toContain("It was paused manually");
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("supports the embedded read-only variant without the jump control", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
showComposer: false,
|
||
showJumpToLatest: false,
|
||
variant: "embedded",
|
||
emptyMessage: "No run output captured.",
|
||
});
|
||
});
|
||
|
||
expect(container.textContent).toContain("No run output captured.");
|
||
expect(container.textContent).not.toContain("Jump to latest");
|
||
|
||
const viewport = container.querySelector(
|
||
'[data-testid="thread-viewport"]',
|
||
) as HTMLDivElement | null;
|
||
expect(viewport?.className).toContain("space-y-3");
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("invokes the accept callback for pending suggested-task interactions", async () => {
|
||
const root = createRoot(container);
|
||
const onAcceptInteraction = vi.fn(async () => undefined);
|
||
|
||
await act(async () => {
|
||
renderIssueThread(root, {
|
||
interactions: [createSuggestedTasksInteraction()],
|
||
onAcceptInteraction: onAcceptInteraction,
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
const acceptButton = Array.from(container.querySelectorAll("button")).find(
|
||
(button) => button.textContent?.includes("Accept drafts"),
|
||
);
|
||
expect(acceptButton).toBeTruthy();
|
||
|
||
await act(async () => {
|
||
acceptButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||
});
|
||
|
||
expect(onAcceptInteraction).toHaveBeenCalledWith(
|
||
expect.objectContaining({
|
||
id: "interaction-suggest-1",
|
||
kind: "suggest_tasks",
|
||
}),
|
||
["task-1"],
|
||
);
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("submits only the selected draft subtree when tasks are manually pruned", async () => {
|
||
const root = createRoot(container);
|
||
const onAcceptInteraction = vi.fn(async () => undefined);
|
||
|
||
await act(async () => {
|
||
renderIssueThread(root, {
|
||
interactions: [
|
||
createSuggestedTasksInteraction({
|
||
payload: {
|
||
version: 1,
|
||
tasks: [
|
||
{
|
||
clientKey: "root",
|
||
title: "Root task",
|
||
},
|
||
{
|
||
clientKey: "child",
|
||
parentClientKey: "root",
|
||
title: "Child task",
|
||
},
|
||
],
|
||
},
|
||
}),
|
||
],
|
||
onAcceptInteraction: onAcceptInteraction,
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
const childCheckbox = container.querySelector(
|
||
'[aria-label="Include Child task"]',
|
||
);
|
||
expect(childCheckbox).toBeTruthy();
|
||
|
||
await act(async () => {
|
||
childCheckbox?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||
});
|
||
const acceptButton = Array.from(container.querySelectorAll("button")).find(
|
||
(button) => button.textContent?.includes("Accept selected drafts"),
|
||
);
|
||
expect(acceptButton).toBeTruthy();
|
||
await act(async () => {
|
||
acceptButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||
});
|
||
|
||
expect(onAcceptInteraction).toHaveBeenCalledWith(
|
||
expect.objectContaining({
|
||
id: "interaction-suggest-1",
|
||
kind: "suggest_tasks",
|
||
}),
|
||
["root"],
|
||
);
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("submits selected answers for pending question interactions", async () => {
|
||
const root = createRoot(container);
|
||
const onSubmitInteractionAnswers = vi.fn(async () => undefined);
|
||
|
||
await act(async () => {
|
||
renderIssueThread(root, {
|
||
interactions: [createQuestionInteraction()],
|
||
onSubmitInteractionAnswers: onSubmitInteractionAnswers,
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
const optionButton = Array.from(container.querySelectorAll("button")).find(
|
||
(button) => button.textContent?.includes("Phase 1"),
|
||
);
|
||
const submitButton = Array.from(container.querySelectorAll("button")).find(
|
||
(button) => button.textContent?.includes("Submit answers"),
|
||
);
|
||
expect(optionButton).toBeTruthy();
|
||
expect(submitButton).toBeTruthy();
|
||
|
||
await act(async () => {
|
||
optionButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||
});
|
||
await act(async () => {
|
||
submitButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||
});
|
||
|
||
expect(onSubmitInteractionAnswers).toHaveBeenCalledWith(
|
||
expect.objectContaining({
|
||
id: "interaction-question-1",
|
||
kind: "ask_user_questions",
|
||
}),
|
||
[{ questionId: "scope", optionIds: ["phase-1"] }],
|
||
);
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("submits Other text for pending question interactions", async () => {
|
||
const root = createRoot(container);
|
||
const onSubmitInteractionAnswers = vi.fn(async () => undefined);
|
||
|
||
await act(async () => {
|
||
renderIssueThread(root, {
|
||
interactions: [createQuestionInteraction()],
|
||
onSubmitInteractionAnswers: onSubmitInteractionAnswers,
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
const otherButton = Array.from(container.querySelectorAll("button")).find(
|
||
(button) => button.textContent?.includes("Other"),
|
||
);
|
||
expect(otherButton).toBeTruthy();
|
||
|
||
await act(async () => {
|
||
otherButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||
});
|
||
|
||
const textarea = container.querySelector(
|
||
"textarea",
|
||
) as HTMLTextAreaElement | null;
|
||
expect(textarea).toBeTruthy();
|
||
|
||
await act(async () => {
|
||
const valueSetter = Object.getOwnPropertyDescriptor(
|
||
HTMLTextAreaElement.prototype,
|
||
"value",
|
||
)?.set;
|
||
valueSetter?.call(textarea, "Phase 1 plus docs");
|
||
textarea!.dispatchEvent(new Event("input", { bubbles: true }));
|
||
});
|
||
|
||
const submitButton = Array.from(container.querySelectorAll("button")).find(
|
||
(button) => button.textContent?.includes("Submit answers"),
|
||
);
|
||
|
||
await act(async () => {
|
||
submitButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||
});
|
||
|
||
expect(onSubmitInteractionAnswers).toHaveBeenCalledWith(
|
||
expect.objectContaining({
|
||
id: "interaction-question-1",
|
||
kind: "ask_user_questions",
|
||
}),
|
||
[{ questionId: "scope", optionIds: [], otherText: "Phase 1 plus docs" }],
|
||
);
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("invokes the cancel callback for pending question interactions", async () => {
|
||
const root = createRoot(container);
|
||
const onCancelInteraction = vi.fn(async () => undefined);
|
||
|
||
await act(async () => {
|
||
renderIssueThread(root, {
|
||
interactions: [createQuestionInteraction()],
|
||
onCancelInteraction: onCancelInteraction,
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
const cancelButton = Array.from(container.querySelectorAll("button")).find(
|
||
(button) => button.textContent?.includes("Cancel question"),
|
||
);
|
||
expect(cancelButton).toBeTruthy();
|
||
|
||
await act(async () => {
|
||
cancelButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||
});
|
||
|
||
expect(onCancelInteraction).toHaveBeenCalledWith(
|
||
expect.objectContaining({
|
||
id: "interaction-question-1",
|
||
kind: "ask_user_questions",
|
||
}),
|
||
);
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("folds expired request confirmations into an activity row by default", async () => {
|
||
const root = createRoot(container);
|
||
|
||
await act(async () => {
|
||
renderIssueThread(root, {
|
||
interactions: [createExpiredRequestConfirmationInteraction()],
|
||
currentUserId: "user-1",
|
||
userLabelMap: new Map([["user-1", "Dotta"]]),
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
expect(container.textContent).toContain("Dotta");
|
||
expect(container.textContent).toContain("updated this task");
|
||
expect(container.textContent).toContain("Expired confirmation");
|
||
expect(container.textContent).not.toContain("Approve the plan");
|
||
|
||
const toggleButton = Array.from(container.querySelectorAll("button")).find(
|
||
(button) => button.textContent?.includes("Expired confirmation"),
|
||
);
|
||
expect(toggleButton).toBeTruthy();
|
||
|
||
await act(async () => {
|
||
toggleButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||
});
|
||
|
||
expect(container.textContent).toContain("Approve the plan");
|
||
expect(container.textContent).toContain(
|
||
"Confirmation expired after comment",
|
||
);
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("renders expired secret proposals as full receipts by default", async () => {
|
||
const root = createRoot(container);
|
||
|
||
await act(async () => {
|
||
renderIssueThread(root, {
|
||
interactions: [expiredSecretProposalInteraction],
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
expect(container.textContent).toContain("Secret binding requested");
|
||
expect(container.textContent).toContain("OpenAI API key");
|
||
expect(container.textContent).toContain("access.evals_openai_api_key");
|
||
expect(container.textContent).toContain("EvalsEngineer");
|
||
expect(container.textContent).toContain("A fresh proposal is required");
|
||
expect(container.textContent).not.toContain("updated this task");
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("renders the transcript directly from stable Paperclip messages", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: [
|
||
{
|
||
id: "comment-1",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
authorAgentId: "agent-1",
|
||
authorUserId: null,
|
||
body: "Agent summary",
|
||
authorType: "agent",
|
||
presentation: null,
|
||
metadata: null,
|
||
createdAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
updatedAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
},
|
||
],
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
expect(container.textContent).toContain("Agent summary");
|
||
expect(container.textContent).not.toContain(
|
||
"Chat renderer hit an internal state error.",
|
||
);
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("hides queued interrupt and cancel actions until the task resumes", () => {
|
||
const root = createRoot(container);
|
||
const comments = [{
|
||
id: "comment-paused-queue", companyId: "company-1", issueId: "issue-1",
|
||
authorAgentId: null, authorUserId: "user-1", authorType: "user" as const,
|
||
body: "Keep this queued message", presentation: null, metadata: null,
|
||
queueState: "queued" as const, queueTargetRunId: "run-1",
|
||
createdAt: new Date(), updatedAt: new Date(),
|
||
}];
|
||
for (const paused of [false, true, false]) {
|
||
act(() => root.render(<MemoryRouter><IssueChatThread
|
||
comments={comments} onAdd={async () => {}}
|
||
onInterruptQueued={async () => {}} onCancelQueued={() => {}}
|
||
composerPause={paused ? { scope: "leaf", onResume: () => {} } : null}
|
||
enableLiveTranscriptPolling={false}
|
||
/></MemoryRouter>));
|
||
const labels = [...container.querySelectorAll("button")].map((button) => button.textContent);
|
||
expect(labels.includes("Interrupt")).toBe(!paused);
|
||
expect(labels.includes("Cancel")).toBe(!paused);
|
||
expect(container.textContent).toContain("Keep this queued message");
|
||
}
|
||
act(() => root.unmount());
|
||
});
|
||
|
||
it("dispatches queued messages with Interrupt after the target run has stopped", () => {
|
||
const root = createRoot(container);
|
||
const onInterruptQueued = vi.fn(async () => {});
|
||
act(() => root.render(<MemoryRouter><IssueChatThread
|
||
comments={[{ id: "comment-queue", companyId: "company-1", issueId: "issue-1",
|
||
authorAgentId: null, authorUserId: "user-1", authorType: "user", body: "Pending input",
|
||
presentation: null, metadata: null, queueState: "queued", queueTargetRunId: null,
|
||
createdAt: new Date(), updatedAt: new Date() }]}
|
||
onAdd={async () => {}} onInterruptQueued={onInterruptQueued} showComposer={false}
|
||
enableLiveTranscriptPolling={false}
|
||
/></MemoryRouter>));
|
||
const interrupt = [...container.querySelectorAll("button")].find(button => button.textContent === "Interrupt");
|
||
expect(interrupt).toBeDefined();
|
||
act(() => interrupt!.click());
|
||
expect(onInterruptQueued).toHaveBeenCalledWith(null);
|
||
act(() => root.unmount());
|
||
});
|
||
|
||
it("shows deferred wake badge only for hold-deferred queued comments", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: [
|
||
{
|
||
id: "comment-hold",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
authorAgentId: null,
|
||
authorUserId: "user-1",
|
||
body: "Need a quick update",
|
||
authorType: "user",
|
||
presentation: null,
|
||
metadata: null,
|
||
queueState: "queued",
|
||
queueReason: "hold",
|
||
createdAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
updatedAt: new Date("2026-04-06T12:00:00.000Z"),
|
||
},
|
||
],
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
expect(container.textContent).toContain("Deferred wake");
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: [
|
||
{
|
||
id: "comment-active-run",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
authorAgentId: null,
|
||
authorUserId: "user-1",
|
||
body: "Queue behind active run",
|
||
authorType: "user",
|
||
presentation: null,
|
||
metadata: null,
|
||
queueState: "queued",
|
||
queueReason: "active_run",
|
||
createdAt: new Date("2026-04-06T12:01:00.000Z"),
|
||
updatedAt: new Date("2026-04-06T12:01:00.000Z"),
|
||
},
|
||
],
|
||
showComposer: false,
|
||
});
|
||
});
|
||
|
||
expect(container.textContent).toContain("Queued");
|
||
expect(container.textContent).not.toContain("Deferred wake");
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("preserves a restored draft through the real app StrictMode mount cleanup", () => {
|
||
localStorage.setItem("strict-restored-draft", "Inspect my uploaded file");
|
||
const root = createRoot(container);
|
||
act(() =>
|
||
root.render(
|
||
<StrictMode>
|
||
<MemoryRouter>
|
||
<IssueChatThread
|
||
comments={[]}
|
||
linkedRuns={[]}
|
||
timelineEvents={[]}
|
||
liveRuns={[]}
|
||
onAdd={async () => {}}
|
||
draftKey="strict-restored-draft"
|
||
enableLiveTranscriptPolling={false}
|
||
/>
|
||
</MemoryRouter>
|
||
</StrictMode>,
|
||
),
|
||
);
|
||
expect(
|
||
container.querySelector<HTMLTextAreaElement>(
|
||
'textarea[aria-label="Issue chat editor"]',
|
||
)?.value,
|
||
).toBe("Inspect my uploaded file");
|
||
expect(localStorage.getItem("strict-restored-draft")).toBe(
|
||
"Inspect my uploaded file",
|
||
);
|
||
act(() => root.unmount());
|
||
});
|
||
|
||
it("settles a restored submission only once through StrictMode effect replay", () => {
|
||
const key = "strict-restored-submission";
|
||
const attemptId = "aaf8228f-0be7-45ae-a104-6fbe0af6f1d3";
|
||
const submitted = "One text-only save interrupted by reload.";
|
||
const nextDraft = "A newer draft written while delivery was pending.";
|
||
localStorage.setItem(key, `${submitted}\n\n${nextDraft}`);
|
||
localStorage.setItem(`${key}:submission:v1`, JSON.stringify({
|
||
version: 1,
|
||
draftKey: key,
|
||
attemptId,
|
||
reviewed: false,
|
||
nextDraftOffset: submitted.length + 2,
|
||
submittedAttachmentIds: [],
|
||
}));
|
||
const root = createRoot(container);
|
||
try {
|
||
act(() => root.render(
|
||
<StrictMode>
|
||
<MemoryRouter>
|
||
<IssueChatThread
|
||
comments={[{
|
||
...issueChatLongThreadComments[0]!,
|
||
id: "confirmed-restored-comment",
|
||
body: submitted,
|
||
authorAgentId: null,
|
||
authorUserId: "user-1",
|
||
clientRequestId: attemptId,
|
||
}]}
|
||
currentUserId="user-1"
|
||
linkedRuns={[]}
|
||
timelineEvents={[]}
|
||
liveRuns={[]}
|
||
onAdd={async () => {}}
|
||
draftKey={key}
|
||
enableLiveTranscriptPolling={false}
|
||
/>
|
||
</MemoryRouter>
|
||
</StrictMode>,
|
||
));
|
||
expect(container.querySelector<HTMLTextAreaElement>(
|
||
'textarea[aria-label="Issue chat editor"]',
|
||
)?.value).toBe(nextDraft);
|
||
expect(localStorage.getItem(key)).toBe(nextDraft);
|
||
expect(localStorage.getItem(`${key}:submission:v1`)).toBeNull();
|
||
expect(container.textContent).not.toContain("We couldn’t confirm");
|
||
} finally {
|
||
act(() => root.unmount());
|
||
}
|
||
expect(localStorage.getItem(key)).toBe(nextDraft);
|
||
});
|
||
|
||
it.each(["submission write", "all storage"])(
|
||
"unlocks a confirmed in-memory submission after failed %s",
|
||
async (failure) => {
|
||
const key = "unavailable-submission-storage";
|
||
const originalSetItem = localStorage.setItem.bind(localStorage);
|
||
const write = vi.spyOn(localStorage, "setItem").mockImplementation((key, value) => {
|
||
if (failure === "all storage" || key.endsWith(":submission:v1")) throw new Error("Storage unavailable");
|
||
originalSetItem(key, value);
|
||
});
|
||
const read = failure === "all storage"
|
||
? vi.spyOn(localStorage, "getItem").mockImplementation(() => { throw new Error("Storage unavailable"); })
|
||
: null;
|
||
let rejectSend!: (error: Error) => void;
|
||
const onAdd = vi.fn().mockReturnValueOnce(new Promise<void>((_, reject) => { rejectSend = reject; })).mockResolvedValue(undefined);
|
||
const root = createRoot(container);
|
||
const element = (attemptId?: string) => (
|
||
<MemoryRouter>
|
||
<IssueChatThread
|
||
comments={attemptId ? [{ ...issueChatLongThreadComments[0]!, id: "confirmed-memory-comment", body: "Earlier message", authorAgentId: null, authorUserId: "user-1", clientRequestId: attemptId }] : []}
|
||
currentUserId="user-1" linkedRuns={[]} timelineEvents={[]} liveRuns={[]}
|
||
onAdd={onAdd} draftKey={key} enableLiveTranscriptPolling={false}
|
||
/>
|
||
</MemoryRouter>
|
||
);
|
||
const editor = () => container.querySelector<HTMLTextAreaElement>('textarea[aria-label="Issue chat editor"]')!;
|
||
const type = (value: string) => act(() => {
|
||
Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value")!.set!.call(editor(), value);
|
||
editor().dispatchEvent(new Event("input", { bubbles: true }));
|
||
});
|
||
const send = () => Array.from(container.querySelectorAll("button")).find(button => button.textContent === "Send") as HTMLButtonElement;
|
||
try {
|
||
await act(async () => root.render(element()));
|
||
type("Earlier message");
|
||
await act(async () => send().click());
|
||
const attemptId = onAdd.mock.calls[0]![4] as string;
|
||
type("The full next draft");
|
||
await act(async () => rejectSend(new CommentSubmissionUnknownError()));
|
||
expect(container.textContent).toContain("We couldn’t confirm");
|
||
await act(async () => root.render(element(attemptId)));
|
||
expect(editor().value).toBe("The full next draft");
|
||
expect(container.textContent).not.toContain("We couldn’t confirm");
|
||
expect(send().disabled).toBe(false);
|
||
await act(async () => send().click());
|
||
expect(onAdd.mock.calls[1]![0]).toBe("The full next draft");
|
||
} finally {
|
||
await act(async () => root.unmount());
|
||
write.mockRestore();
|
||
read?.mockRestore();
|
||
}
|
||
},
|
||
);
|
||
|
||
it.each(["newer local text", "foreign pending receipt", "matching text with new attachments", "matching full text with new attachments", "own receipt with newer stored text", "unavailable recovery storage"])(
|
||
"preserves both tabs through settlement and reload: %s",
|
||
async (scenario) => {
|
||
const key = `cross-tab-preserved-${scenario}`;
|
||
const attemptId = "aaf8228f-0be7-45ae-a104-6fbe0af6f1d3";
|
||
const newerId = "baf8228f-0be7-45ae-a104-6fbe0af6f1d3";
|
||
const attachmentId = "caf8228f-0be7-45ae-a104-6fbe0af6f1d3";
|
||
const localText = "This tab's newer unsent draft";
|
||
const otherText = scenario === "matching text with new attachments" ? localText : scenario === "matching full text with new attachments" ? `Earlier message\n\n${localText}` : "The other tab's unsent draft";
|
||
localStorage.setItem(key, `Earlier message\n\n${localText}`);
|
||
localStorage.setItem(`${key}:submission:v1`, JSON.stringify({ version: 1, draftKey: key, attemptId, reviewed: false, nextDraftOffset: 17, submittedAttachmentIds: [] }));
|
||
const element = (confirmed: boolean, foreignConfirmed = false) => (
|
||
<MemoryRouter>
|
||
<IssueChatThread
|
||
comments={confirmed ? [
|
||
{ ...issueChatLongThreadComments[0]!, id: "confirmed-cross-tab-comment", body: "Earlier message", authorAgentId: null, authorUserId: "user-1", clientRequestId: attemptId },
|
||
...(foreignConfirmed ? [{ ...issueChatLongThreadComments[0]!, id: "other-tab-confirmed", body: "Other tab message", authorAgentId: null, authorUserId: "user-1", clientRequestId: newerId }] : []),
|
||
] : []}
|
||
currentUserId="user-1" linkedRuns={[]} timelineEvents={[]} liveRuns={[]}
|
||
onAdd={async () => {}} draftKey={key} enableLiveTranscriptPolling={false}
|
||
/>
|
||
</MemoryRouter>
|
||
);
|
||
let root = createRoot(container);
|
||
const storagePrototype = Object.getPrototypeOf(sessionStorage) as Storage;
|
||
const originalStorageWrite = storagePrototype.setItem;
|
||
const recoveryWrite = scenario === "unavailable recovery storage"
|
||
? vi.spyOn(storagePrototype, "setItem").mockImplementation(function (this: Storage, key: string, value: string) {
|
||
if (this === sessionStorage) throw new Error("Storage full");
|
||
return originalStorageWrite.call(this, key, value);
|
||
})
|
||
: null;
|
||
try {
|
||
await act(async () => root.render(element(false)));
|
||
if (scenario === "own receipt with newer stored text") localStorage.setItem(key, `Earlier message\n\n${otherText}`);
|
||
else expect(settleDraftSubmission(key, attemptId, otherText)).toBe(true);
|
||
if (scenario === "foreign pending receipt") localStorage.setItem(`${key}:submission:v1`, JSON.stringify({ version: 1, draftKey: key, attemptId: newerId, reviewed: false, nextDraftOffset: 0, submittedAttachmentIds: [] }));
|
||
localStorage.setItem(`${key}:attachments:v1`, JSON.stringify({ version: 1, draftKey: key, attachments: [{ attachmentId, name: "another-tab.txt", inline: false, contentPath: `/api/attachments/${attachmentId}/content` }] }));
|
||
await act(async () => root.render(element(true)));
|
||
const editor = () => container.querySelector<HTMLTextAreaElement>('textarea[aria-label="Issue chat editor"]')!;
|
||
expect(editor().value).toBe(localText);
|
||
expect(container.textContent).not.toContain("We couldn’t confirm");
|
||
if (scenario === "unavailable recovery storage") expect(container.textContent).toContain("copy your text before leaving");
|
||
if (scenario.includes("with new attachments")) expect(container.textContent).toContain("another-tab.txt");
|
||
if (scenario === "foreign pending receipt") {
|
||
localStorage.setItem(key, "The owning tab kept typing after the first receipt");
|
||
await act(async () => root.render(element(true, true)));
|
||
expect(localStorage.getItem(`${key}:submission:v1`)).toContain(newerId);
|
||
} else expect(localStorage.getItem(`${key}:submission:v1`)).toBeNull();
|
||
const storedText = localStorage.getItem(key);
|
||
expect(storedText).toBe(scenario === "foreign pending receipt" ? "The owning tab kept typing after the first receipt" : otherText);
|
||
expect(localStorage.getItem(`${key}:attachments:v1`)).toContain(attachmentId);
|
||
await act(async () => root.unmount());
|
||
expect(localStorage.getItem(key)).toBe(storedText);
|
||
if (scenario === "unavailable recovery storage") return;
|
||
root = createRoot(container);
|
||
await act(async () => root.render(element(true, true)));
|
||
expect(editor().value).toBe(localText);
|
||
if (scenario.includes("with new attachments")) expect(container.textContent).toContain("another-tab.txt");
|
||
expect(localStorage.getItem(key)).toBe(storedText);
|
||
expect(localStorage.getItem(`${key}:attachments:v1`)).toContain(attachmentId);
|
||
} finally {
|
||
if (container.childNodes.length) await act(async () => root.unmount());
|
||
recoveryWrite?.mockRestore();
|
||
}
|
||
},
|
||
);
|
||
|
||
it.each(["ordinary", "recovered"])("preserves %s drafts when the same composer switches A to B to A before debounce", async (kind) => {
|
||
vi.useFakeTimers();
|
||
const a = `navigation-a-${kind}`;
|
||
const b = `navigation-b-${kind}`;
|
||
const keys = kind === "recovered"
|
||
? [preserveDraftInTab(a, "Draft A", []).key, preserveDraftInTab(b, "Draft B", []).key]
|
||
: [a, b];
|
||
if (kind === "ordinary") { localStorage.setItem(a, "Draft A"); localStorage.setItem(b, "Draft B"); }
|
||
const root = createRoot(container);
|
||
const element = (draftKey: string) => (
|
||
<MemoryRouter><IssueChatThread comments={[]} linkedRuns={[]} timelineEvents={[]} liveRuns={[]}
|
||
onAdd={async () => {}} draftKey={draftKey} enableLiveTranscriptPolling={false} /></MemoryRouter>
|
||
);
|
||
const editor = () => container.querySelector<HTMLTextAreaElement>('textarea[aria-label="Issue chat editor"]')!;
|
||
const type = (value: string) => act(() => {
|
||
Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value")!.set!.call(editor(), value);
|
||
editor().dispatchEvent(new Event("input", { bubbles: true }));
|
||
});
|
||
try {
|
||
await act(async () => root.render(element(a)));
|
||
expect(editor().value).toBe("Draft A");
|
||
type("Draft A typed just now");
|
||
await act(async () => root.render(element(b)));
|
||
expect(editor().value).toBe("Draft B");
|
||
expect(loadDraft(keys[0]!)).toBe("Draft A typed just now");
|
||
type("Draft B typed just now");
|
||
await act(async () => root.render(element(a)));
|
||
expect(editor().value).toBe("Draft A typed just now");
|
||
expect(loadDraft(keys[1]!)).toBe("Draft B typed just now");
|
||
} finally { await act(async () => root.unmount()); }
|
||
});
|
||
|
||
it("returns to the shared draft after finishing a recovery and leaving the task", async () => {
|
||
const a = "finished-recovery-a";
|
||
const b = "finished-recovery-b";
|
||
localStorage.setItem(a, "The other tab's preserved draft");
|
||
preserveDraftInTab(a, "My recovered message", []);
|
||
const onAdd = vi.fn().mockResolvedValue(undefined);
|
||
const root = createRoot(container);
|
||
const element = (draftKey: string) => (
|
||
<MemoryRouter><IssueChatThread comments={[]} linkedRuns={[]} timelineEvents={[]} liveRuns={[]}
|
||
onAdd={onAdd} draftKey={draftKey} enableLiveTranscriptPolling={false} /></MemoryRouter>
|
||
);
|
||
const editor = () => container.querySelector<HTMLTextAreaElement>('textarea[aria-label="Issue chat editor"]')!;
|
||
try {
|
||
await act(async () => root.render(element(a)));
|
||
expect(editor().value).toBe("My recovered message");
|
||
await act(async () => (Array.from(container.querySelectorAll("button")).find(button => button.textContent === "Send") as HTMLButtonElement).click());
|
||
expect(onAdd.mock.calls[0]![0]).toBe("My recovered message");
|
||
expect(editor().value).toBe("");
|
||
await act(async () => root.render(element(b)));
|
||
await act(async () => root.render(element(a)));
|
||
expect(editor().value).toBe("The other tab's preserved draft");
|
||
expect(container.textContent).not.toContain("This draft is kept separately");
|
||
} finally { await act(async () => root.unmount()); }
|
||
});
|
||
|
||
it("stores and restores the composer draft per issue key", () => {
|
||
vi.useFakeTimers();
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
draftKey: "issue-chat-draft:test-1",
|
||
});
|
||
});
|
||
|
||
const editor = container.querySelector(
|
||
'textarea[aria-label="Issue chat editor"]',
|
||
) as HTMLTextAreaElement | null;
|
||
expect(editor).not.toBeNull();
|
||
expect(editor?.placeholder).toBe("Reply");
|
||
|
||
act(() => {
|
||
const valueSetter = Object.getOwnPropertyDescriptor(
|
||
window.HTMLTextAreaElement.prototype,
|
||
"value",
|
||
)?.set;
|
||
valueSetter?.call(editor, "Draft survives refresh");
|
||
editor?.dispatchEvent(new Event("input", { bubbles: true }));
|
||
});
|
||
|
||
act(() => {
|
||
vi.advanceTimersByTime(900);
|
||
});
|
||
|
||
expect(localStorage.getItem("issue-chat-draft:test-1")).toBe(
|
||
"Draft survives refresh",
|
||
);
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
|
||
const remount = createRoot(container);
|
||
act(() => {
|
||
remount.render(
|
||
<MemoryRouter>
|
||
<IssueChatThread
|
||
comments={[]}
|
||
linkedRuns={[]}
|
||
timelineEvents={[]}
|
||
liveRuns={[]}
|
||
onAdd={async () => {}}
|
||
draftKey="issue-chat-draft:test-1"
|
||
enableLiveTranscriptPolling={false}
|
||
/>
|
||
</MemoryRouter>,
|
||
);
|
||
});
|
||
|
||
const restoredEditor = container.querySelector(
|
||
'textarea[aria-label="Issue chat editor"]',
|
||
) as HTMLTextAreaElement | null;
|
||
expect(restoredEditor?.value).toBe("Draft survives refresh");
|
||
|
||
act(() => {
|
||
remount.unmount();
|
||
});
|
||
});
|
||
|
||
it("shows full-composer drop instructions while dragging files over the issue composer", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
imageUploadHandler: async () => "/api/attachments/image/content",
|
||
onAttachImage: async () => undefined,
|
||
});
|
||
});
|
||
|
||
const composer = container.querySelector(
|
||
'[data-testid="issue-chat-composer"]',
|
||
) as HTMLDivElement | null;
|
||
expect(composer).not.toBeNull();
|
||
const fileInput = container.querySelector(
|
||
'input[type="file"]',
|
||
) as HTMLInputElement | null;
|
||
expect(fileInput?.getAttribute("accept")).toBeNull();
|
||
|
||
act(() => {
|
||
composer?.dispatchEvent(
|
||
createFileDragEvent("dragenter", [
|
||
new File(["hello"], "notes.txt", { type: "text/plain" }),
|
||
]),
|
||
);
|
||
});
|
||
|
||
expect(
|
||
container.querySelector(
|
||
'[data-testid="issue-chat-composer-drop-overlay"]',
|
||
),
|
||
).not.toBeNull();
|
||
expect(container.textContent).toContain("Drop to upload");
|
||
expect(container.textContent).toContain("Images insert into the reply");
|
||
expect(container.textContent).toContain(
|
||
"Other files are added to this task",
|
||
);
|
||
expect(composer?.className).toContain("border-primary/45");
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("keeps mode controls available while a dropped file uploads", async () => {
|
||
const root = createRoot(container);
|
||
let finishUpload: () => void = () => {};
|
||
const uploadGate = new Promise<void>((resolve) => {
|
||
finishUpload = resolve;
|
||
});
|
||
const onAttachImage = vi.fn(async (file: File) => {
|
||
await uploadGate;
|
||
return {
|
||
id: "attachment-1",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
issueCommentId: null,
|
||
assetId: "asset-1",
|
||
provider: "local_disk",
|
||
objectKey: "issues/issue-1/report.pdf",
|
||
contentPath: "/api/attachments/attachment-1/content",
|
||
originalFilename: file.name,
|
||
contentType: file.type,
|
||
byteSize: file.size,
|
||
sha256: "abc123",
|
||
createdByAgentId: null,
|
||
createdByUserId: "user-1",
|
||
createdAt: new Date("2026-04-24T12:00:00.000Z"),
|
||
updatedAt: new Date("2026-04-24T12:00:00.000Z"),
|
||
};
|
||
});
|
||
|
||
await act(async () => {
|
||
renderIssueThread(root, {
|
||
onAttachImage: onAttachImage,
|
||
issueWorkMode: "standard",
|
||
onWorkModeChange: () => {},
|
||
});
|
||
});
|
||
|
||
const composer = container.querySelector(
|
||
'[data-testid="issue-chat-composer"]',
|
||
) as HTMLDivElement | null;
|
||
const file = new File(["report body"], "report.pdf", {
|
||
type: "application/pdf",
|
||
});
|
||
|
||
act(() => {
|
||
composer?.dispatchEvent(createFileDragEvent("drop", [file]));
|
||
});
|
||
|
||
expect(onAttachImage).toHaveBeenCalledWith(file);
|
||
const add = container.querySelector('[data-testid="issue-chat-composer-add"]') as HTMLButtonElement;
|
||
expect(add.disabled).toBe(false);
|
||
act(() => {
|
||
add.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, button: 0 }));
|
||
});
|
||
expect(document.querySelector('[data-testid="composer-add-file"]')?.getAttribute("data-disabled")).not.toBeNull();
|
||
const plan = document.querySelector('[data-testid="composer-add-plan"]') as HTMLButtonElement;
|
||
act(() => plan.click());
|
||
const chip = container.querySelector('[data-testid="issue-chat-composer-work-mode-chip"]') as HTMLButtonElement;
|
||
expect(chip?.textContent).toContain("Plan mode");
|
||
expect(chip.disabled).toBe(false);
|
||
act(() => chip.click());
|
||
expect(container.querySelector('[data-testid="issue-chat-composer-work-mode-chip"]')).toBeNull();
|
||
|
||
await act(async () => {
|
||
finishUpload();
|
||
});
|
||
const attachmentList = container.querySelector(
|
||
'[data-testid="issue-chat-composer-attachments"]',
|
||
);
|
||
expect(attachmentList).not.toBeNull();
|
||
expect(container.textContent).toContain("report.pdf");
|
||
expect(container.textContent).toContain("Attached to task");
|
||
|
||
await act(async () => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("awaits the actual legacy send and retains uploaded receipts after rejection and reload", async () => {
|
||
let root = createRoot(container);
|
||
const onAdd = vi
|
||
.fn()
|
||
.mockRejectedValueOnce(new Error("retry"))
|
||
.mockResolvedValue(undefined);
|
||
const id = "9af8228f-0be7-45ae-a104-6fbe0af6f1d3";
|
||
let resolveUpload!: (value: unknown) => void;
|
||
const onAttachImage = vi.fn().mockReturnValue(
|
||
new Promise((resolve) => {
|
||
resolveUpload = resolve;
|
||
}),
|
||
);
|
||
const element = (
|
||
<MemoryRouter>
|
||
<IssueChatThread
|
||
comments={[]}
|
||
linkedRuns={[]}
|
||
timelineEvents={[]}
|
||
liveRuns={[]}
|
||
onAdd={onAdd}
|
||
onAttachImage={onAttachImage}
|
||
draftKey="legacy-receipt-reload"
|
||
enableLiveTranscriptPolling={false}
|
||
/>
|
||
</MemoryRouter>
|
||
);
|
||
await act(async () => root.render(element));
|
||
const composer = container.querySelector(
|
||
'[data-testid="issue-chat-composer"]',
|
||
)!;
|
||
const editor = container.querySelector<HTMLTextAreaElement>(
|
||
'textarea[aria-label="Issue chat editor"]',
|
||
)!;
|
||
const send = () =>
|
||
Array.from(container.querySelectorAll("button")).find(
|
||
(element) => element.textContent === "Send",
|
||
) as HTMLButtonElement;
|
||
act(() => {
|
||
Object.getOwnPropertyDescriptor(
|
||
window.HTMLTextAreaElement.prototype,
|
||
"value",
|
||
)!.set!.call(editor, "Inspect the file");
|
||
editor.dispatchEvent(new Event("input", { bubbles: true }));
|
||
composer.dispatchEvent(
|
||
createFileDragEvent("drop", [
|
||
new File(["fresh"], "fresh.txt", { type: "text/plain" }),
|
||
]),
|
||
);
|
||
});
|
||
expect(send().disabled).toBe(true);
|
||
await act(async () => {
|
||
resolveUpload({
|
||
id,
|
||
contentPath: `/api/attachments/${id}/content`,
|
||
originalFilename: "fresh.txt",
|
||
});
|
||
});
|
||
expect(send().disabled).toBe(false);
|
||
await act(async () => send().click());
|
||
const expectedBody = `Inspect the file\n\n[fresh.txt](/api/attachments/${id}/content)`;
|
||
expect(onAdd).toHaveBeenNthCalledWith(1, expectedBody, undefined, undefined, [id], expect.any(String));
|
||
expect(appendMock).not.toHaveBeenCalled();
|
||
await act(async () => root.unmount());
|
||
root = createRoot(container);
|
||
await act(async () => root.render(element));
|
||
expect(
|
||
container.querySelector<HTMLTextAreaElement>(
|
||
'textarea[aria-label="Issue chat editor"]',
|
||
)!.value,
|
||
).toBe("Inspect the file");
|
||
expect(container.textContent).toContain("fresh.txt");
|
||
await act(async () => send().click());
|
||
expect(onAdd).toHaveBeenNthCalledWith(2, expectedBody, undefined, undefined, [id], expect.any(String));
|
||
expect(onAttachImage).toHaveBeenCalledTimes(1);
|
||
await act(async () => root.unmount());
|
||
});
|
||
|
||
it.each(["success", "unknown"])(
|
||
"does not overwrite another retained legacy attempt after an older %s",
|
||
async (outcome) => {
|
||
const key = "legacy-exact-attempt-settlement";
|
||
let settle!: () => void;
|
||
const onAdd = vi.fn().mockReturnValue(
|
||
new Promise<void>((resolve, reject) => {
|
||
settle =
|
||
outcome === "success"
|
||
? resolve
|
||
: () => reject(new CommentSubmissionUnknownError());
|
||
}),
|
||
);
|
||
const root = createRoot(container);
|
||
await act(async () =>
|
||
renderIssueThread(root, {
|
||
onAdd: onAdd,
|
||
draftKey: key,
|
||
}),
|
||
);
|
||
const editor = container.querySelector<HTMLTextAreaElement>(
|
||
'textarea[aria-label="Issue chat editor"]',
|
||
)!;
|
||
act(() => {
|
||
Object.getOwnPropertyDescriptor(
|
||
window.HTMLTextAreaElement.prototype,
|
||
"value",
|
||
)!.set!.call(editor, "Older request");
|
||
editor.dispatchEvent(new Event("input", { bubbles: true }));
|
||
});
|
||
await act(async () =>
|
||
Array.from(container.querySelectorAll("button"))
|
||
.find((button) => button.textContent === "Send")!
|
||
.click(),
|
||
);
|
||
const newer = {
|
||
version: 1,
|
||
draftKey: key,
|
||
attemptId: "aaf8228f-0be7-45ae-a104-6fbe0af6f1d3",
|
||
reviewed: false,
|
||
};
|
||
localStorage.setItem(key, "Newer retained draft");
|
||
localStorage.setItem(`${key}:attachments:v1`, "newer receipt sentinel");
|
||
localStorage.setItem(`${key}:submission:v1`, JSON.stringify(newer));
|
||
await act(async () => settle());
|
||
window.dispatchEvent(new Event("beforeunload"));
|
||
expect(localStorage.getItem(`${key}:submission:v1`)).toBe(
|
||
JSON.stringify(newer),
|
||
);
|
||
expect(localStorage.getItem(key)).toBe("Newer retained draft");
|
||
expect(localStorage.getItem(`${key}:attachments:v1`)).toBe(
|
||
"newer receipt sentinel",
|
||
);
|
||
await act(async () => root.unmount());
|
||
},
|
||
);
|
||
|
||
it.each(["late receipt", "reload receipt", "navigation success"])(
|
||
"preserves a newer legacy draft after %s",
|
||
async (outcome) => {
|
||
const key = `legacy-next-draft-${outcome}`;
|
||
let resolveSend!: () => void;
|
||
let rejectSend!: (error: Error) => void;
|
||
const onAdd = vi.fn().mockReturnValue(new Promise<void>((resolve, reject) => {
|
||
resolveSend = resolve;
|
||
rejectSend = reject;
|
||
}));
|
||
const attachmentId = "aaf8228f-0be7-45ae-a104-6fbe0af6f1d3";
|
||
const onAttachImage = vi.fn().mockResolvedValue({
|
||
id: attachmentId, contentPath: `/api/attachments/${attachmentId}/content`, originalFilename: "next-draft.txt",
|
||
});
|
||
let root = createRoot(container);
|
||
const element = (requestId?: string) => (
|
||
<MemoryRouter>
|
||
<IssueChatThread
|
||
comments={requestId ? [{
|
||
...issueChatLongThreadComments[0]!,
|
||
id: "confirmed-legacy-comment", body: "Earlier message",
|
||
authorAgentId: null, authorUserId: "user-1", clientRequestId: requestId,
|
||
}] : []}
|
||
currentUserId="user-1"
|
||
linkedRuns={[]} timelineEvents={[]} liveRuns={[]}
|
||
onAdd={onAdd} onAttachImage={onAttachImage} draftKey={key} enableLiveTranscriptPolling={false}
|
||
/>
|
||
</MemoryRouter>
|
||
);
|
||
const editor = () => container.querySelector<HTMLTextAreaElement>('textarea[aria-label="Issue chat editor"]')!;
|
||
const type = (value: string) => act(() => {
|
||
Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value")!.set!.call(editor(), value);
|
||
editor().dispatchEvent(new Event("input", { bubbles: true }));
|
||
});
|
||
await act(async () => root.render(element()));
|
||
type("Earlier message");
|
||
await act(async () => Array.from(container.querySelectorAll("button")).find(button => button.textContent === "Send")!.click());
|
||
const requestId = onAdd.mock.calls[0]![4] as string;
|
||
type("Newer unsent draft");
|
||
await act(async () => container.querySelector('[data-testid="issue-chat-composer"]')!
|
||
.dispatchEvent(createFileDragEvent("drop", [new File(["next"], "next-draft.txt", { type: "text/plain" })])));
|
||
if (outcome !== "late receipt") await act(async () => root.unmount());
|
||
if (outcome === "navigation success") await act(async () => resolveSend());
|
||
else if (outcome === "late receipt") await act(async () => rejectSend(new CommentSubmissionUnknownError()));
|
||
if (outcome !== "late receipt") root = createRoot(container);
|
||
await act(async () => root.render(element(requestId)));
|
||
expect(editor().value).toBe("Newer unsent draft");
|
||
expect(localStorage.getItem(key)).toBe("Newer unsent draft");
|
||
expect(localStorage.getItem(`${key}:submission:v1`)).toBeNull();
|
||
expect(localStorage.getItem(`${key}:attachments:v1`)).toContain(attachmentId);
|
||
expect(container.textContent).toContain("next-draft.txt");
|
||
expect(container.textContent).not.toContain("We couldn’t confirm");
|
||
await act(async () => root.unmount());
|
||
await act(async () => resolveSend());
|
||
expect(localStorage.getItem(key)).toBe("Newer unsent draft");
|
||
},
|
||
);
|
||
|
||
it("keeps a reassigned legacy comment pending until its actual mutation promise settles", async () => {
|
||
let resolveSend!: () => void;
|
||
const onAdd = vi.fn().mockReturnValue(
|
||
new Promise<void>((resolve) => {
|
||
resolveSend = resolve;
|
||
}),
|
||
);
|
||
const root = createRoot(container);
|
||
await act(async () =>
|
||
renderIssueThread(root, {
|
||
onAdd: onAdd,
|
||
draftKey: "legacy-awaited-reassignment",
|
||
enableReassign: true,
|
||
reassignOptions: [
|
||
{ id: "user:board", label: "Board" },
|
||
{ id: "user:reviewer", label: "Reviewer" },
|
||
],
|
||
currentAssigneeValue: "user:board",
|
||
suggestedAssigneeValue: "user:reviewer",
|
||
}),
|
||
);
|
||
const editor = container.querySelector<HTMLTextAreaElement>(
|
||
'textarea[aria-label="Issue chat editor"]',
|
||
)!;
|
||
act(() => {
|
||
Object.getOwnPropertyDescriptor(
|
||
window.HTMLTextAreaElement.prototype,
|
||
"value",
|
||
)!.set!.call(editor, "Please review the result");
|
||
editor.dispatchEvent(new Event("input", { bubbles: true }));
|
||
});
|
||
await act(async () =>
|
||
Array.from(container.querySelectorAll("button"))
|
||
.find((button) => button.textContent === "Send")!
|
||
.click(),
|
||
);
|
||
expect(onAdd).toHaveBeenCalledWith("Please review the result", undefined, {
|
||
assigneeAgentId: null,
|
||
assigneeUserId: "reviewer",
|
||
}, undefined, expect.any(String));
|
||
expect(appendMock).not.toHaveBeenCalled();
|
||
expect(container.textContent).toContain("Posting...");
|
||
expect(localStorage.getItem("legacy-awaited-reassignment")).toBe(
|
||
"Please review the result",
|
||
);
|
||
expect(
|
||
localStorage.getItem("legacy-awaited-reassignment:submission:v1"),
|
||
).toContain('"reviewed":false');
|
||
await act(async () => resolveSend());
|
||
expect(localStorage.getItem("legacy-awaited-reassignment")).toBeNull();
|
||
expect(
|
||
localStorage.getItem("legacy-awaited-reassignment:submission:v1"),
|
||
).toBeNull();
|
||
await act(async () => root.unmount());
|
||
});
|
||
it("shows only the outer composer drop overlay when dragging over the reply editor", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
imageUploadHandler: async () => "/api/attachments/image/content",
|
||
onAttachImage: async () => undefined,
|
||
});
|
||
});
|
||
|
||
const composer = container.querySelector(
|
||
'[data-testid="issue-chat-composer"]',
|
||
) as HTMLDivElement | null;
|
||
const editor = container.querySelector(
|
||
'textarea[aria-label="Issue chat editor"]',
|
||
) as HTMLTextAreaElement | null;
|
||
expect(composer).not.toBeNull();
|
||
expect(editor).not.toBeNull();
|
||
|
||
act(() => {
|
||
editor?.dispatchEvent(
|
||
createFileDragEvent("dragenter", [
|
||
new File(["hello"], "notes.txt", { type: "text/plain" }),
|
||
]),
|
||
);
|
||
});
|
||
|
||
expect(
|
||
container.querySelector(
|
||
'[data-testid="issue-chat-composer-drop-overlay"]',
|
||
),
|
||
).not.toBeNull();
|
||
expect(container.textContent).toContain("Drop to upload");
|
||
expect(container.textContent).not.toContain("Drop image to upload");
|
||
expect(composer?.className).toContain("border-primary/45");
|
||
|
||
const fileInput = container.querySelector(
|
||
'input[type="file"]',
|
||
) as HTMLInputElement | null;
|
||
expect(fileInput?.getAttribute("accept")).toBeNull();
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("shows non-image attachment upload state in the composer after a drop from the editor", async () => {
|
||
const root = createRoot(container);
|
||
const onAttachImage = vi.fn(async (file: File) => ({
|
||
id: "attachment-1",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
issueCommentId: null,
|
||
assetId: "asset-1",
|
||
provider: "local_disk",
|
||
objectKey: "issues/issue-1/report.pdf",
|
||
contentPath: "/api/attachments/attachment-1/content",
|
||
originalFilename: file.name,
|
||
contentType: file.type,
|
||
byteSize: file.size,
|
||
sha256: "abc123",
|
||
createdByAgentId: null,
|
||
createdByUserId: "user-1",
|
||
createdAt: new Date("2026-04-24T12:00:00.000Z"),
|
||
updatedAt: new Date("2026-04-24T12:00:00.000Z"),
|
||
}));
|
||
|
||
await act(async () => {
|
||
renderIssueThread(root, {
|
||
onAttachImage: onAttachImage,
|
||
});
|
||
});
|
||
|
||
const editor = container.querySelector(
|
||
'textarea[aria-label="Issue chat editor"]',
|
||
) as HTMLTextAreaElement | null;
|
||
const file = new File(["report body"], "report.pdf", {
|
||
type: "application/pdf",
|
||
});
|
||
|
||
await act(async () => {
|
||
editor?.dispatchEvent(createFileDragEvent("drop", [file]));
|
||
});
|
||
|
||
expect(onAttachImage).toHaveBeenCalledWith(file);
|
||
const attachmentList = container.querySelector(
|
||
'[data-testid="issue-chat-composer-attachments"]',
|
||
);
|
||
expect(attachmentList).not.toBeNull();
|
||
expect(attachmentList?.className).toContain("mb-3");
|
||
expect(container.textContent).toContain("report.pdf");
|
||
expect(container.textContent).toContain("Attached to task");
|
||
|
||
await act(async () => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("renders the bottom spacer with zero height until the user has submitted", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
comments: [
|
||
{
|
||
id: "comment-spacer-1",
|
||
companyId: "company-1",
|
||
issueId: "issue-1",
|
||
authorAgentId: null,
|
||
authorUserId: "user-1",
|
||
body: "hello",
|
||
authorType: "user",
|
||
presentation: null,
|
||
metadata: null,
|
||
createdAt: new Date("2026-04-22T12:00:00.000Z"),
|
||
updatedAt: new Date("2026-04-22T12:00:00.000Z"),
|
||
},
|
||
],
|
||
});
|
||
});
|
||
|
||
const spacer = container.querySelector(
|
||
'[data-testid="issue-chat-bottom-spacer"]',
|
||
) as HTMLDivElement | null;
|
||
expect(spacer).not.toBeNull();
|
||
expect(spacer?.style.height).toBe("0px");
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("hides the reopen control and infers reopen for closed agent-assigned issue replies", async () => {
|
||
const root = createRoot(container);
|
||
const onAdd = vi.fn().mockResolvedValue(undefined);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
issueStatus: "done",
|
||
currentAssigneeValue: "agent:agent-1",
|
||
onAdd: onAdd,
|
||
});
|
||
});
|
||
|
||
expect(container.textContent).not.toContain("Re-open");
|
||
|
||
const editor = container.querySelector(
|
||
'textarea[aria-label="Issue chat editor"]',
|
||
) as HTMLTextAreaElement | null;
|
||
const submitButton = Array.from(container.querySelectorAll("button")).find(
|
||
(element) => element.textContent === "Send",
|
||
) as HTMLButtonElement | undefined;
|
||
expect(editor).not.toBeNull();
|
||
expect(submitButton).toBeDefined();
|
||
|
||
act(() => {
|
||
const valueSetter = Object.getOwnPropertyDescriptor(
|
||
window.HTMLTextAreaElement.prototype,
|
||
"value",
|
||
)?.set;
|
||
valueSetter?.call(editor, "Please pick this back up");
|
||
editor?.dispatchEvent(new Event("input", { bubbles: true }));
|
||
});
|
||
|
||
await act(async () => {
|
||
submitButton?.click();
|
||
});
|
||
|
||
expect(onAdd).toHaveBeenCalledWith("Please pick this back up", true, undefined, undefined, expect.any(String));
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("opens a warning dialog before sending a reply with no assignee selected and posts on Send anyway", async () => {
|
||
const root = createRoot(container);
|
||
const onAdd = vi.fn().mockResolvedValue(undefined);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
onAdd: onAdd,
|
||
enableReassign: true,
|
||
reassignOptions: [
|
||
{ id: "", label: "No responsible" },
|
||
{ id: "agent:agent-1", label: "Agent 1" },
|
||
],
|
||
currentAssigneeValue: "",
|
||
suggestedAssigneeValue: "",
|
||
});
|
||
});
|
||
|
||
const editor = container.querySelector(
|
||
'textarea[aria-label="Issue chat editor"]',
|
||
) as HTMLTextAreaElement | null;
|
||
const submitButton = Array.from(container.querySelectorAll("button")).find(
|
||
(element) => element.textContent === "Send",
|
||
) as HTMLButtonElement | undefined;
|
||
expect(editor).not.toBeNull();
|
||
expect(submitButton).toBeDefined();
|
||
|
||
act(() => {
|
||
const valueSetter = Object.getOwnPropertyDescriptor(
|
||
window.HTMLTextAreaElement.prototype,
|
||
"value",
|
||
)?.set;
|
||
valueSetter?.call(editor, "Reply without assignee");
|
||
editor?.dispatchEvent(new Event("input", { bubbles: true }));
|
||
});
|
||
|
||
await act(async () => {
|
||
submitButton?.click();
|
||
});
|
||
|
||
expect(onAdd).not.toHaveBeenCalled();
|
||
const dialog = document.querySelector(
|
||
'[data-testid="issue-chat-no-assignee-dialog"]',
|
||
);
|
||
expect(dialog).not.toBeNull();
|
||
expect(dialog?.textContent).toContain("No responsible selected");
|
||
expect(dialog?.textContent).toContain("no agent will be woken");
|
||
|
||
const sendAnyway = document.querySelector(
|
||
'[data-testid="issue-chat-no-assignee-send-anyway"]',
|
||
) as HTMLButtonElement | null;
|
||
expect(sendAnyway).not.toBeNull();
|
||
|
||
await act(async () => {
|
||
sendAnyway?.click();
|
||
});
|
||
|
||
expect(onAdd).toHaveBeenCalledTimes(1);
|
||
expect(onAdd).toHaveBeenCalledWith("Reply without assignee", undefined, undefined, undefined, expect.any(String));
|
||
expect(
|
||
document.querySelector('[data-testid="issue-chat-no-assignee-dialog"]'),
|
||
).toBeNull();
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("does not post when choosing Go back in the no-assignee warning dialog", async () => {
|
||
const root = createRoot(container);
|
||
const onAdd = vi.fn().mockResolvedValue(undefined);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
onAdd: onAdd,
|
||
enableReassign: true,
|
||
reassignOptions: [
|
||
{ id: "", label: "No responsible" },
|
||
{ id: "agent:agent-1", label: "Agent 1" },
|
||
],
|
||
currentAssigneeValue: "",
|
||
suggestedAssigneeValue: "",
|
||
});
|
||
});
|
||
|
||
const editor = container.querySelector(
|
||
'textarea[aria-label="Issue chat editor"]',
|
||
) as HTMLTextAreaElement | null;
|
||
const submitButton = Array.from(container.querySelectorAll("button")).find(
|
||
(element) => element.textContent === "Send",
|
||
) as HTMLButtonElement | undefined;
|
||
|
||
act(() => {
|
||
const valueSetter = Object.getOwnPropertyDescriptor(
|
||
window.HTMLTextAreaElement.prototype,
|
||
"value",
|
||
)?.set;
|
||
valueSetter?.call(editor, "Reply without assignee");
|
||
editor?.dispatchEvent(new Event("input", { bubbles: true }));
|
||
});
|
||
|
||
await act(async () => {
|
||
submitButton?.click();
|
||
});
|
||
|
||
expect(
|
||
document.querySelector('[data-testid="issue-chat-no-assignee-dialog"]'),
|
||
).not.toBeNull();
|
||
|
||
const goBack = document.querySelector(
|
||
'[data-testid="issue-chat-no-assignee-go-back"]',
|
||
) as HTMLButtonElement | null;
|
||
expect(goBack).not.toBeNull();
|
||
|
||
await act(async () => {
|
||
goBack?.click();
|
||
});
|
||
|
||
expect(onAdd).not.toHaveBeenCalled();
|
||
expect(
|
||
document.querySelector('[data-testid="issue-chat-no-assignee-dialog"]'),
|
||
).toBeNull();
|
||
// The composer keeps the draft so the user can pick a responsible and resend.
|
||
const editorAfter = container.querySelector(
|
||
'textarea[aria-label="Issue chat editor"]',
|
||
) as HTMLTextAreaElement | null;
|
||
expect(editorAfter?.value).toBe("Reply without assignee");
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("does not warn when sending a reply with an assignee selected", async () => {
|
||
const root = createRoot(container);
|
||
const onAdd = vi.fn().mockResolvedValue(undefined);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
onAdd: onAdd,
|
||
enableReassign: true,
|
||
reassignOptions: [
|
||
{ id: "", label: "No responsible" },
|
||
{ id: "agent:agent-1", label: "Agent 1" },
|
||
],
|
||
currentAssigneeValue: "agent:agent-1",
|
||
suggestedAssigneeValue: "agent:agent-1",
|
||
});
|
||
});
|
||
|
||
const editor = container.querySelector(
|
||
'textarea[aria-label="Issue chat editor"]',
|
||
) as HTMLTextAreaElement | null;
|
||
const submitButton = Array.from(container.querySelectorAll("button")).find(
|
||
(element) => element.textContent === "Send",
|
||
) as HTMLButtonElement | undefined;
|
||
|
||
act(() => {
|
||
const valueSetter = Object.getOwnPropertyDescriptor(
|
||
window.HTMLTextAreaElement.prototype,
|
||
"value",
|
||
)?.set;
|
||
valueSetter?.call(editor, "Reply with assignee");
|
||
editor?.dispatchEvent(new Event("input", { bubbles: true }));
|
||
});
|
||
|
||
await act(async () => {
|
||
submitButton?.click();
|
||
});
|
||
|
||
expect(onAdd).toHaveBeenCalledTimes(1);
|
||
expect(document.body.textContent).not.toContain("No responsible selected");
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("exposes a composer focus handle that forwards to the editor", () => {
|
||
const root = createRoot(container);
|
||
const composerRef = createRef<{
|
||
focus: () => void;
|
||
restoreDraft: (submittedBody: string) => void;
|
||
}>();
|
||
const scrollByMock = vi
|
||
.spyOn(window, "scrollBy")
|
||
.mockImplementation(() => {});
|
||
const requestAnimationFrameMock = vi
|
||
.spyOn(window, "requestAnimationFrame")
|
||
.mockImplementation((callback: FrameRequestCallback) => {
|
||
callback(0);
|
||
return 1;
|
||
});
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
composerRef: composerRef,
|
||
});
|
||
});
|
||
|
||
const composer = container.querySelector(
|
||
'[data-testid="issue-chat-composer"]',
|
||
) as HTMLDivElement | null;
|
||
expect(composerRef.current).not.toBeNull();
|
||
expect(composer).not.toBeNull();
|
||
|
||
const scrollIntoViewMock = vi.fn();
|
||
composer!.scrollIntoView = scrollIntoViewMock;
|
||
|
||
act(() => {
|
||
composerRef.current?.focus();
|
||
});
|
||
|
||
expect(scrollIntoViewMock).toHaveBeenCalledWith({
|
||
behavior: "smooth",
|
||
block: "end",
|
||
});
|
||
expect(scrollByMock).toHaveBeenCalledWith({ top: 96, behavior: "smooth" });
|
||
expect(markdownEditorFocusMock).toHaveBeenCalledTimes(1);
|
||
scrollByMock.mockRestore();
|
||
requestAnimationFrameMock.mockRestore();
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("restores a cancelled queued draft into the composer handle", () => {
|
||
const root = createRoot(container);
|
||
const composerRef = createRef<{
|
||
focus: () => void;
|
||
restoreDraft: (submittedBody: string) => void;
|
||
}>();
|
||
const scrollByMock = vi
|
||
.spyOn(window, "scrollBy")
|
||
.mockImplementation(() => {});
|
||
const requestAnimationFrameMock = vi
|
||
.spyOn(window, "requestAnimationFrame")
|
||
.mockImplementation((callback: FrameRequestCallback) => {
|
||
callback(0);
|
||
return 1;
|
||
});
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
composerRef: composerRef,
|
||
});
|
||
});
|
||
|
||
const editor = container.querySelector(
|
||
'textarea[aria-label="Issue chat editor"]',
|
||
) as HTMLTextAreaElement | null;
|
||
expect(editor).not.toBeNull();
|
||
|
||
act(() => {
|
||
composerRef.current?.restoreDraft("Queued message");
|
||
});
|
||
|
||
expect(editor?.value).toBe("Queued message");
|
||
expect(markdownEditorFocusMock).toHaveBeenCalledTimes(1);
|
||
expect(scrollByMock).toHaveBeenCalledWith({ top: 96, behavior: "smooth" });
|
||
|
||
scrollByMock.mockRestore();
|
||
requestAnimationFrameMock.mockRestore();
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("does not restore the composer viewport for passive live updates by default", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root);
|
||
});
|
||
|
||
const dock = container.querySelector(
|
||
'[data-testid="issue-chat-composer-dock"]',
|
||
) as HTMLDivElement | null;
|
||
expect(dock).not.toBeNull();
|
||
expect(dock?.className).toContain("sticky");
|
||
expect(dock?.className).toContain("bottom-(--sz-calc-8)");
|
||
expect(dock?.className).toContain("z-20");
|
||
|
||
const composer = container.querySelector(
|
||
'[data-testid="issue-chat-composer"]',
|
||
) as HTMLDivElement | null;
|
||
expect(composer).not.toBeNull();
|
||
expect(composer?.className).toContain("rounded-md");
|
||
expect(composer?.className).not.toContain("rounded-lg");
|
||
expect(composer?.className).toContain("p-(--sz-15px)");
|
||
|
||
const editor = container.querySelector(
|
||
'textarea[aria-label="Issue chat editor"]',
|
||
) as HTMLTextAreaElement | null;
|
||
expect(editor?.dataset.contentClassName).toContain("max-h-(--sz-28dvh)");
|
||
expect(editor?.dataset.contentClassName).toContain("overflow-y-auto");
|
||
expect(editor?.dataset.contentClassName).not.toContain("min-h-(--sz-72px)");
|
||
expect(editor?.dataset.fileDropTarget).toBe("parent");
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
liveRuns: [
|
||
{
|
||
id: "run-1",
|
||
issueId: "issue-1",
|
||
status: "running",
|
||
invocationSource: "comment",
|
||
triggerDetail: null,
|
||
startedAt: "2026-04-06T12:00:00.000Z",
|
||
finishedAt: null,
|
||
createdAt: "2026-04-06T12:00:00.000Z",
|
||
agentId: "agent-1",
|
||
agentName: "Agent 1",
|
||
adapterType: "codex_local",
|
||
},
|
||
],
|
||
});
|
||
});
|
||
|
||
expect(restoreComposerViewportSnapshotMock).not.toHaveBeenCalled();
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("requests composer viewport restoration when live messages arrive during active composer interaction", () => {
|
||
const root = createRoot(container);
|
||
const scrollByMock = vi
|
||
.spyOn(window, "scrollBy")
|
||
.mockImplementation(() => {});
|
||
shouldPreserveComposerViewportMock.mockReturnValue(true);
|
||
captureComposerViewportSnapshotMock.mockReturnValue({
|
||
composerViewportTop: 420,
|
||
});
|
||
|
||
act(() => {
|
||
renderIssueThread(root);
|
||
});
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
liveRuns: [
|
||
{
|
||
id: "run-1",
|
||
issueId: "issue-1",
|
||
status: "running",
|
||
invocationSource: "comment",
|
||
triggerDetail: null,
|
||
startedAt: "2026-04-06T12:00:00.000Z",
|
||
finishedAt: null,
|
||
createdAt: "2026-04-06T12:00:00.000Z",
|
||
agentId: "agent-1",
|
||
agentName: "Agent 1",
|
||
adapterType: "codex_local",
|
||
},
|
||
],
|
||
});
|
||
});
|
||
|
||
expect(restoreComposerViewportSnapshotMock).toHaveBeenCalled();
|
||
|
||
scrollByMock.mockRestore();
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("keeps a running chain-of-thought in the Working state between commands", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
liveRuns: [
|
||
{
|
||
id: "run-1",
|
||
issueId: "issue-1",
|
||
status: "running",
|
||
invocationSource: "comment",
|
||
triggerDetail: null,
|
||
startedAt: "2026-04-06T12:00:00.000Z",
|
||
finishedAt: null,
|
||
createdAt: "2026-04-06T12:00:00.000Z",
|
||
agentId: "agent-1",
|
||
agentName: "Agent 1",
|
||
adapterType: "codex_local",
|
||
},
|
||
],
|
||
transcriptsByRunId: new Map([
|
||
[
|
||
"run-1",
|
||
[
|
||
{
|
||
kind: "tool_call",
|
||
ts: "2026-04-06T12:00:10.000Z",
|
||
name: "command_execution",
|
||
toolUseId: "tool-1",
|
||
input: { command: "pnpm test" },
|
||
},
|
||
{
|
||
kind: "tool_result",
|
||
ts: "2026-04-06T12:00:20.000Z",
|
||
toolUseId: "tool-1",
|
||
toolName: "command_execution",
|
||
content: "Tests passed",
|
||
isError: false,
|
||
},
|
||
],
|
||
],
|
||
]),
|
||
});
|
||
});
|
||
|
||
expect(container.textContent).toContain("Working");
|
||
expect(container.textContent).not.toContain("Worked");
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("renders ephemeral active-run status below the working indicator", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
activeRun: {
|
||
id: "run-1",
|
||
issueId: "issue-1",
|
||
status: "running",
|
||
invocationSource: "comment",
|
||
triggerDetail: null,
|
||
startedAt: "2026-04-06T12:00:00.000Z",
|
||
finishedAt: null,
|
||
createdAt: "2026-04-06T12:00:00.000Z",
|
||
agentId: "agent-1",
|
||
agentName: "Agent 1",
|
||
adapterType: "codex_local",
|
||
currentStatusMessage: "Syncing git worktree to environment",
|
||
currentStatusUpdatedAt: "2026-04-06T12:00:05.000Z",
|
||
currentToolName: "bash",
|
||
lastEventAt: new Date(Date.now() - 2000).toISOString(),
|
||
},
|
||
});
|
||
});
|
||
|
||
expect(container.textContent).toContain("Working...");
|
||
expect(container.textContent).toContain("Using bash");
|
||
expect(container.textContent).not.toContain("last activity");
|
||
expect(container.textContent).toMatch(/\d+ seconds? ago/);
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("keeps the completed chain-of-thought caret beside its label and reveals it on hover or focus", () => {
|
||
const root = createRoot(container);
|
||
const run = issueChatLongThreadLinkedRuns[2];
|
||
|
||
act(() => {
|
||
renderIssueThread(root, {
|
||
linkedRuns: [run],
|
||
showComposer: false,
|
||
transcriptsByRunId: issueChatLongThreadTranscriptsByRunId,
|
||
hasOutputForRun: () => true,
|
||
});
|
||
});
|
||
|
||
const header = Array.from(container.querySelectorAll("button")).find((button) =>
|
||
button.textContent?.includes("worked for 4 minutes"),
|
||
);
|
||
expect(header).toBeDefined();
|
||
const label = Array.from(header!.children).find((child) =>
|
||
child.textContent?.includes("worked for 4 minutes"),
|
||
);
|
||
const caret = label?.nextElementSibling;
|
||
expect(caret?.tagName.toLowerCase()).toBe("svg");
|
||
expect(header?.classList.contains("group")).toBe(true);
|
||
expect(caret?.classList.contains("opacity-0")).toBe(true);
|
||
expect(caret?.classList.contains("group-hover:opacity-100")).toBe(true);
|
||
expect(caret?.classList.contains("group-focus-visible:opacity-100")).toBe(true);
|
||
expect(caret?.nextElementSibling?.classList.contains("ml-auto")).toBe(true);
|
||
|
||
act(() => {
|
||
header!.click();
|
||
});
|
||
expect(caret?.classList.contains("rotate-180")).toBe(true);
|
||
|
||
act(() => {
|
||
root.unmount();
|
||
});
|
||
});
|
||
|
||
it("folds chain-of-thought when the same message transitions from running to complete", () => {
|
||
expect(
|
||
resolveAssistantMessageFoldedState({
|
||
messageId: "message-1",
|
||
currentFolded: false,
|
||
isFoldable: true,
|
||
previousMessageId: "message-1",
|
||
previousIsFoldable: false,
|
||
}),
|
||
).toBe(true);
|
||
});
|
||
|
||
it("preserves a manually opened completed message across rerenders", () => {
|
||
expect(
|
||
resolveAssistantMessageFoldedState({
|
||
messageId: "message-1",
|
||
currentFolded: false,
|
||
isFoldable: true,
|
||
previousMessageId: "message-1",
|
||
previousIsFoldable: true,
|
||
}),
|
||
).toBe(false);
|
||
});
|
||
|
||
it("shows the stop-run action for active run-linked messages even without embedded run status", () => {
|
||
expect(
|
||
canStopIssueChatRun({
|
||
runId: "run-1",
|
||
runStatus: null,
|
||
activeRunIds: new Set(["run-1"]),
|
||
}),
|
||
).toBe(true);
|
||
});
|
||
|
||
it("hides the stop-run action for completed historical runs", () => {
|
||
expect(
|
||
canStopIssueChatRun({
|
||
runId: "run-1",
|
||
runStatus: "cancelled",
|
||
activeRunIds: new Set<string>(),
|
||
}),
|
||
).toBe(false);
|
||
});
|
||
|
||
it("uses company profile data to distinguish the current user from other humans", () => {
|
||
const userProfileMap = new Map([
|
||
["user-1", { label: "Dotta", image: "/avatars/dotta.png" }],
|
||
["user-2", { label: "Alice", image: "/avatars/alice.png" }],
|
||
]);
|
||
|
||
expect(
|
||
resolveIssueChatHumanAuthor({
|
||
authorName: "You",
|
||
authorUserId: "user-1",
|
||
currentUserId: "user-1",
|
||
userProfileMap,
|
||
}),
|
||
).toEqual({
|
||
isCurrentUser: true,
|
||
authorName: "Dotta",
|
||
avatarUrl: "/avatars/dotta.png",
|
||
});
|
||
|
||
expect(
|
||
resolveIssueChatHumanAuthor({
|
||
authorName: "Alice",
|
||
authorUserId: "user-2",
|
||
currentUserId: "user-1",
|
||
userProfileMap,
|
||
}),
|
||
).toEqual({
|
||
isCurrentUser: false,
|
||
authorName: "Alice",
|
||
avatarUrl: "/avatars/alice.png",
|
||
});
|
||
});
|
||
});
|
||
|
||
describe("IssueAssigneePausedNotice", () => {
|
||
let container: HTMLDivElement;
|
||
|
||
beforeEach(() => {
|
||
container = document.createElement("div");
|
||
document.body.appendChild(container);
|
||
});
|
||
|
||
afterEach(() => {
|
||
container.remove();
|
||
});
|
||
|
||
function pausedAgent(pauseReason: string): Agent {
|
||
return {
|
||
id: "agent-1",
|
||
name: "CEO",
|
||
status: "paused",
|
||
pauseReason,
|
||
} as unknown as Agent;
|
||
}
|
||
|
||
it("explains an import pause and resumes the agent on click", () => {
|
||
const onResume = vi.fn();
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
root.render(
|
||
<IssueAssigneePausedNotice
|
||
agent={pausedAgent("import")}
|
||
onResume={onResume}
|
||
resuming={false}
|
||
/>,
|
||
);
|
||
});
|
||
|
||
expect(container.textContent).toContain(
|
||
"arrived paused from an organization import",
|
||
);
|
||
const resumeButton = container.querySelector(
|
||
'[data-testid="issue-assignee-paused-resume"]',
|
||
) as HTMLButtonElement | null;
|
||
expect(resumeButton).not.toBeNull();
|
||
|
||
act(() => {
|
||
resumeButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||
});
|
||
expect(onResume).toHaveBeenCalledTimes(1);
|
||
|
||
act(() => root.unmount());
|
||
});
|
||
|
||
it("offers no resume action for budget pauses", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
root.render(
|
||
<IssueAssigneePausedNotice
|
||
agent={pausedAgent("budget")}
|
||
onResume={vi.fn()}
|
||
resuming={false}
|
||
/>,
|
||
);
|
||
});
|
||
|
||
expect(container.textContent).toContain("budget hard stop");
|
||
expect(
|
||
container.querySelector('[data-testid="issue-assignee-paused-resume"]'),
|
||
).toBeNull();
|
||
|
||
act(() => root.unmount());
|
||
});
|
||
|
||
it("renders nothing for an active agent", () => {
|
||
const root = createRoot(container);
|
||
|
||
act(() => {
|
||
root.render(
|
||
<IssueAssigneePausedNotice
|
||
agent={
|
||
{ id: "agent-1", name: "CEO", status: "idle" } as unknown as Agent
|
||
}
|
||
/>,
|
||
);
|
||
});
|
||
|
||
expect(
|
||
container.querySelector('[data-testid="issue-assignee-paused-notice"]'),
|
||
).toBeNull();
|
||
|
||
act(() => root.unmount());
|
||
});
|
||
});
|