[codex] Filter document artifacts from issue outputs (#7608)
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work > - Issue detail pages promote certain artifact work products into the dedicated Output surface while also listing raw attachments below > - Document-like artifacts such as plan markdown can currently be promoted like binary outputs, which makes the same work product story look like both an output and a document/attachment > - The output surface should stay focused on inspectable generated media, archives, PDFs, WebAssembly, SVG/images, and true binary deliverables while document-like artifacts remain in the document or attachment flow > - This pull request filters document-like artifact metadata out of the Output section and avoids duplicating the attachments that back promoted outputs > - The benefit is a cleaner issue detail page where plans and markdown reports do not appear as binary outputs, while real output files still get highlighted ## Linked Issues or Issue Description Fixes #7609 Refs PAP-10354 Refs PAP-10369 ## What Changed - Added output MIME-type normalization and eligibility checks for issue artifact work products. - Filtered markdown, text, JSON, XML, CSV, YAML, source-like files, and generic binary artifacts with document-like filenames out of promoted issue outputs. - Kept video, image including SVG, PDF, ZIP, WebAssembly, and true binary artifacts eligible for the Output section. - Hid attachments that back promoted outputs while leaving filtered document-like artifact attachments visible. - Preserved the full image attachment set for chat image gallery lookup even when promoted image outputs are hidden from the attachment list. - Added focused tests for output eligibility, glyph labeling, output promotion, attachment filtering, gallery image preservation, and the output section render behavior. ## Verification - `pnpm vitest run ui/src/lib/issue-output.test.ts ui/src/pages/IssueDetail.test.tsx ui/src/components/issue-output/IssueOutputSection.test.tsx` - GitHub PR checks are green on `7d1b80f9702f20ab86cc502bffce599b13f1b088`. - Greptile confidence score is 5/5 and both Greptile review threads are resolved. ## Risks - Low risk. The change only affects UI classification of Paperclip artifact work products. The main behavioral risk is an uncommon text-like generated artifact no longer appearing in the Output section; it remains available through the normal attachment/document surfaces. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used OpenAI GPT-5 Codex via Paperclip CodexCoder, with repository tool use and local command execution. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any 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: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
@@ -1,7 +1,7 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import type { Agent, Issue, IssueTreeControlPreview, IssueTreeHold } from "@paperclipai/shared";
|
||||
import type { Agent, Issue, IssueAttachment, IssueTreeControlPreview, IssueTreeHold, IssueWorkProduct } from "@paperclipai/shared";
|
||||
import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
|
||||
import { flushSync } from "react-dom";
|
||||
import { createRoot, type Root } from "react-dom/client";
|
||||
@@ -73,6 +73,7 @@ const mockSetMobileToolbar = vi.hoisted(() => vi.fn());
|
||||
const mockPushToast = vi.hoisted(() => vi.fn());
|
||||
const mockIssuesListRender = vi.hoisted(() => vi.fn());
|
||||
const mockIssueChatThreadRender = vi.hoisted(() => vi.fn());
|
||||
const mockImageGalleryRender = vi.hoisted(() => vi.fn());
|
||||
|
||||
vi.mock("../api/issues", () => ({
|
||||
issuesApi: mockIssuesApi,
|
||||
@@ -239,6 +240,10 @@ vi.mock("../components/IssueDocumentsSection", () => ({
|
||||
IssueDocumentsSection: () => <div>Documents</div>,
|
||||
}));
|
||||
|
||||
vi.mock("../components/MarkdownBody", () => ({
|
||||
MarkdownBody: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
|
||||
}));
|
||||
|
||||
vi.mock("../components/IssuesList", () => ({
|
||||
IssuesList: (props: { issueBadgeById?: Map<string, string> }) => {
|
||||
mockIssuesListRender(props);
|
||||
@@ -266,7 +271,10 @@ vi.mock("../components/IssueWorkspaceCard", () => ({
|
||||
}));
|
||||
|
||||
vi.mock("../components/ImageGalleryModal", () => ({
|
||||
ImageGalleryModal: () => null,
|
||||
ImageGalleryModal: (props: { images: IssueAttachment[]; initialIndex: number; open: boolean }) => {
|
||||
mockImageGalleryRender(props);
|
||||
return null;
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock("../components/ScrollToBottom", () => ({
|
||||
@@ -423,6 +431,74 @@ function createIssue(overrides: Partial<Issue> = {}): Issue {
|
||||
} as Issue;
|
||||
}
|
||||
|
||||
function createAttachment(overrides: Partial<IssueAttachment> & { id: string }): IssueAttachment {
|
||||
const { id, ...attachmentOverrides } = overrides;
|
||||
return {
|
||||
id,
|
||||
companyId: "company-1",
|
||||
issueId: "issue-1",
|
||||
issueCommentId: null,
|
||||
assetId: `asset-${id}`,
|
||||
provider: "local_disk",
|
||||
objectKey: `attachments/${id}`,
|
||||
contentType: overrides.contentType ?? "application/octet-stream",
|
||||
byteSize: overrides.byteSize ?? 4096,
|
||||
sha256: "sha256",
|
||||
originalFilename: overrides.originalFilename ?? null,
|
||||
createdByAgentId: null,
|
||||
createdByUserId: null,
|
||||
createdAt: new Date("2026-04-21T00:00:00.000Z"),
|
||||
updatedAt: new Date("2026-04-21T00:00:00.000Z"),
|
||||
contentPath: overrides.contentPath ?? `/api/attachments/${id}/content`,
|
||||
openPath: overrides.openPath ?? `/api/attachments/${id}/content`,
|
||||
downloadPath: overrides.downloadPath ?? `/api/attachments/${id}/content?download=1`,
|
||||
...attachmentOverrides,
|
||||
};
|
||||
}
|
||||
|
||||
function createArtifactWorkProduct(
|
||||
overrides: Partial<IssueWorkProduct> & {
|
||||
id: string;
|
||||
attachmentId: string;
|
||||
contentType: string;
|
||||
originalFilename: string;
|
||||
},
|
||||
): IssueWorkProduct {
|
||||
const { id, attachmentId, contentType, originalFilename, ...workProductOverrides } = overrides;
|
||||
const contentPath = `/api/attachments/${attachmentId}/content`;
|
||||
return {
|
||||
id,
|
||||
companyId: "company-1",
|
||||
projectId: null,
|
||||
issueId: "issue-1",
|
||||
executionWorkspaceId: null,
|
||||
runtimeServiceId: null,
|
||||
type: "artifact",
|
||||
provider: "paperclip",
|
||||
externalId: null,
|
||||
title: overrides.title ?? originalFilename,
|
||||
url: null,
|
||||
status: "active",
|
||||
reviewState: "none",
|
||||
isPrimary: false,
|
||||
healthStatus: "unknown",
|
||||
summary: null,
|
||||
metadata: {
|
||||
attachmentId,
|
||||
contentType,
|
||||
byteSize: 4096,
|
||||
contentPath,
|
||||
openPath: contentPath,
|
||||
downloadPath: `${contentPath}?download=1`,
|
||||
originalFilename,
|
||||
},
|
||||
createdByRunId: null,
|
||||
createdAt: new Date("2026-04-21T00:00:00.000Z"),
|
||||
updatedAt: new Date("2026-04-21T00:00:00.000Z"),
|
||||
...workProductOverrides,
|
||||
} as IssueWorkProduct;
|
||||
}
|
||||
|
||||
function createAgent(overrides: Partial<Agent> = {}): Agent {
|
||||
return {
|
||||
id: "agent-1",
|
||||
@@ -807,6 +883,10 @@ describe("IssueDetail", () => {
|
||||
});
|
||||
consoleErrorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
|
||||
vi.spyOn(window, "scrollTo").mockImplementation(() => {});
|
||||
vi.spyOn(globalThis, "fetch").mockResolvedValue({
|
||||
ok: true,
|
||||
text: async () => "# Attachment preview",
|
||||
} as Response);
|
||||
|
||||
mockIssuesApi.list.mockResolvedValue([]);
|
||||
mockIssuesApi.listComments.mockResolvedValue([]);
|
||||
@@ -842,6 +922,7 @@ describe("IssueDetail", () => {
|
||||
mockIssuesApi.listAcceptedPlanDecompositions.mockResolvedValue([]);
|
||||
mockIssuesListRender.mockClear();
|
||||
mockIssueChatThreadRender.mockClear();
|
||||
mockImageGalleryRender.mockClear();
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
@@ -1416,6 +1497,68 @@ describe("IssueDetail", () => {
|
||||
localStorage.removeItem("paperclip:issue-comment-draft:issue-1");
|
||||
});
|
||||
|
||||
it("hides attachments backing promoted outputs while keeping filtered markdown artifacts visible", async () => {
|
||||
const issue = createIssue();
|
||||
const videoAttachment = createAttachment({
|
||||
id: "11111111-1111-4111-8111-111111111111",
|
||||
contentType: "video/mp4",
|
||||
originalFilename: "demo.mp4",
|
||||
});
|
||||
const imageAttachment = createAttachment({
|
||||
id: "33333333-3333-4333-8333-333333333333",
|
||||
contentType: "image/png",
|
||||
originalFilename: "screenshot.png",
|
||||
});
|
||||
const markdownAttachment = createAttachment({
|
||||
id: "22222222-2222-4222-8222-222222222222",
|
||||
contentType: "text/markdown",
|
||||
originalFilename: "report.md",
|
||||
});
|
||||
mockIssuesApi.get.mockResolvedValue(issue);
|
||||
mockIssuesApi.listAttachments.mockResolvedValue([videoAttachment, imageAttachment, markdownAttachment]);
|
||||
mockIssuesApi.listWorkProducts.mockResolvedValue([
|
||||
createArtifactWorkProduct({
|
||||
id: "wp-video",
|
||||
attachmentId: videoAttachment.id,
|
||||
contentType: "video/mp4",
|
||||
originalFilename: "demo.mp4",
|
||||
isPrimary: true,
|
||||
}),
|
||||
createArtifactWorkProduct({
|
||||
id: "wp-image",
|
||||
attachmentId: imageAttachment.id,
|
||||
contentType: "image/png",
|
||||
originalFilename: "screenshot.png",
|
||||
}),
|
||||
createArtifactWorkProduct({
|
||||
id: "wp-markdown",
|
||||
attachmentId: markdownAttachment.id,
|
||||
contentType: "text/markdown",
|
||||
originalFilename: "report.md",
|
||||
}),
|
||||
]);
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<IssueDetail />
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
await flushReact();
|
||||
|
||||
expect(container.textContent).toContain("Output");
|
||||
expect(container.textContent).toContain("demo.mp4");
|
||||
expect(container.textContent).toContain("Attachments");
|
||||
expect(container.textContent).toContain("report.md");
|
||||
expect(container.textContent).toContain("Attachments1");
|
||||
expect(container.querySelectorAll("video")).toHaveLength(1);
|
||||
expect(mockImageGalleryRender.mock.calls.at(-1)?.[0].images.map((attachment: IssueAttachment) => attachment.id)).toEqual([
|
||||
imageAttachment.id,
|
||||
]);
|
||||
});
|
||||
|
||||
it("renders Paused by board distinctly and defaults leaf resume to wake the assignee", async () => {
|
||||
const activeHold = createPauseHold();
|
||||
const releasedHold = createPauseHold({
|
||||
|
||||
@@ -70,6 +70,7 @@ import { IssueDocumentsSection } from "../components/IssueDocumentsSection";
|
||||
import { IssuePlanDecompositionsSection } from "../components/IssuePlanDecompositionsSection";
|
||||
import { IssueOutputSection } from "../components/issue-output/IssueOutputSection";
|
||||
import { isImageAttachment } from "../lib/issue-attachments";
|
||||
import { getPromotedOutputAttachmentIds } from "../lib/issue-output";
|
||||
import { IssueSiblingNavigation } from "../components/IssueSiblingNavigation";
|
||||
import { IssuesList } from "../components/IssuesList";
|
||||
import { AgentIcon } from "../components/AgentIconPicker";
|
||||
@@ -2877,8 +2878,12 @@ export function IssueDetail() {
|
||||
commentComposerRef.current?.focus();
|
||||
}, [detailTab, pendingCommentComposerFocusKey]);
|
||||
|
||||
const attachmentList = attachments ?? [];
|
||||
const imageAttachments = attachmentList.filter(isImageAttachment);
|
||||
const promotedOutputAttachmentIds = useMemo(() => getPromotedOutputAttachmentIds(workProducts), [workProducts]);
|
||||
const attachmentList = useMemo(
|
||||
() => (attachments ?? []).filter((attachment) => !promotedOutputAttachmentIds.has(attachment.id)),
|
||||
[attachments, promotedOutputAttachmentIds],
|
||||
);
|
||||
const imageAttachments = useMemo(() => (attachments ?? []).filter(isImageAttachment), [attachments]);
|
||||
|
||||
const handleChatImageClick = useCallback(
|
||||
(src: string) => {
|
||||
|
||||
Reference in New Issue
Block a user