- No artifacts yet. Attachments and work products will appear here.
+ No artifacts yet. Work products, documents, and agent-produced files will appear here.
);
}
return (
-
+ {workProductRows.length > 0 ? (
+ <>
+
Work products
+
+ {workProductRows.map((wp) => (
+ -
+
+
+ ))}
+
+
+ ) : null}
+ {documentRows.length > 0 ? (
+ <>
+
Documents
+
+ {documentRows.map((doc) => (
+ -
+
+
+ ))}
+
+
+ ) : null}
+ {fileRows.length > 0 ? (
+ <>
+
Files
+
+
+ ) : null}
+
{planDocumentLoading ? (
@@ -113,6 +119,22 @@ export function IssuePropertiesPlansTab({ issue }: IssuePropertiesPlansTabProps)
) : null}
+ {otherDocuments.map((doc) => (
+
+
+
{documentDisplayTitle(doc)}
+
+ {`Revision ${doc.latestRevisionNumber ?? 1} · updated ${new Date(doc.updatedAt).toLocaleString([], {
+ month: "short",
+ day: "numeric",
+ hour: "numeric",
+ minute: "2-digit",
+ })}`}
+
+
+ {doc.body}
+
+ ))}
{hasPlans ? (
) : null}
diff --git a/ui/src/components/task-chat/TaskChatBubble.tsx b/ui/src/components/task-chat/TaskChatBubble.tsx
index 89584df89f..6da7a74318 100644
--- a/ui/src/components/task-chat/TaskChatBubble.tsx
+++ b/ui/src/components/task-chat/TaskChatBubble.tsx
@@ -1,6 +1,7 @@
-import type { ReactNode } from "react";
+import { useState, type ReactNode } from "react";
import { cn } from "@/lib/utils";
import { MarkdownBody } from "@/components/MarkdownBody";
+import { ImageGalleryModal, type GalleryMediaItem } from "@/components/ImageGalleryModal";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { AgentIcon } from "@/components/AgentIconPicker";
import { CommentAttributionChip } from "@/components/CommentAttributionChip";
@@ -13,7 +14,7 @@ import {
AttachmentTitle,
AttachmentTrigger,
} from "@/components/ui/attachment";
-import { extractAttachmentRefs, fileKindForName } from "./task-chat-attachments";
+import { extractAttachmentRefs, extractImageRefs, fileKindForName } from "./task-chat-attachments";
import { TaskChatSystemNotice } from "./TaskChatSystemNotice";
import type { TaskChatMessageItem } from "./task-chat-model";
@@ -49,7 +50,21 @@ function initialsForName(name: string) {
* bubble with an avatar author header (the agent's assigned icon + name · mode
* chip); system notices are centered and recede.
*/
+function galleryItemForImage(src: string, name?: string): GalleryMediaItem {
+ return {
+ id: src,
+ contentPath: src,
+ // The modal only inspects contentType/filename to spot videos; embedded
+ // markdown images are always images, so an empty type is safe here.
+ contentType: "",
+ originalFilename: name?.trim() ? name : "image",
+ };
+}
+
export function TaskChatBubble({ item, attachedTurn, actions }: TaskChatBubbleProps) {
+ // Clicking an embedded image opens the full-screen lightbox (with download);
+ // arrow keys walk across the other images in the same bubble.
+ const [lightboxSrc, setLightboxSrc] = useState
(null);
if (item.interstitial) {
// Interstitial updates are ephemeral (PAP-361): while streaming the text
// lives on the live parent row's line (TaskChatStatusItem.selfTalk), and
@@ -67,6 +82,16 @@ export function TaskChatBubble({ item, attachedTurn, actions }: TaskChatBubblePr
// Non-image file references ("[name](/api/attachments/…/content)") render as
// attachment chips under the bubble; link-only lines leave the body text.
const { refs: attachmentRefs, text: bodyText } = extractAttachmentRefs(item.text);
+ const imageRefs = extractImageRefs(bodyText);
+ const galleryItems: GalleryMediaItem[] =
+ lightboxSrc !== null && !imageRefs.some((ref) => ref.url === lightboxSrc)
+ // A clicked image the extractor missed (e.g. inline HTML) still gets a
+ // single-item lightbox rather than nothing.
+ ? [galleryItemForImage(lightboxSrc)]
+ : imageRefs.map((ref) => galleryItemForImage(ref.url, ref.name));
+ const lightboxIndex = lightboxSrc === null
+ ? -1
+ : Math.max(0, galleryItems.findIndex((galleryItem) => galleryItem.contentPath === lightboxSrc));
return (
{!isHuman && item.authorName ? (
@@ -114,6 +139,7 @@ export function TaskChatBubble({ item, attachedTurn, actions }: TaskChatBubblePr
className={isHuman ? "paperclip-markdown-on-accent" : undefined}
softBreaks
linkIssueReferences
+ onImageClick={setLightboxSrc}
>
{bodyText}
@@ -175,6 +201,16 @@ export function TaskChatBubble({ item, attachedTurn, actions }: TaskChatBubblePr
{item.timestamp}
) : null}
+ {lightboxSrc !== null && lightboxIndex >= 0 ? (
+ {
+ if (!open) setLightboxSrc(null);
+ }}
+ />
+ ) : null}
);
}
diff --git a/ui/src/components/task-chat/task-chat-attachments.test.ts b/ui/src/components/task-chat/task-chat-attachments.test.ts
index 9a7ee240cb..1fb9cebe20 100644
--- a/ui/src/components/task-chat/task-chat-attachments.test.ts
+++ b/ui/src/components/task-chat/task-chat-attachments.test.ts
@@ -1,6 +1,7 @@
import { describe, expect, it } from "vitest";
import {
extractAttachmentRefs,
+ extractImageRefs,
fileKindForName,
formatFileSize,
isImageFilename,
@@ -86,3 +87,30 @@ describe("extractAttachmentRefs", () => {
]);
});
});
+
+describe("extractImageRefs", () => {
+ it("collects image embeds in order, skipping plain links", () => {
+ const body =
+ "\nSee [notes.txt](/api/attachments/n/content)\n";
+ expect(extractImageRefs(body)).toEqual([
+ { name: "a.png", url: "/api/attachments/a/content" },
+ { name: "b.jpg", url: "https://example.com/b.jpg" },
+ ]);
+ });
+
+ it("dedupes repeated embeds and tolerates empty alt text", () => {
+ const body = "\n";
+ expect(extractImageRefs(body)).toEqual([{ name: "", url: "/api/attachments/a/content" }]);
+ });
+
+ it("unescapes bracket-escaped alt text", () => {
+ const body = String.raw`![shot \[1\].png](/api/attachments/s/content)`;
+ expect(extractImageRefs(body)).toEqual([
+ { name: "shot [1].png", url: "/api/attachments/s/content" },
+ ]);
+ });
+
+ it("returns nothing for bodies without images", () => {
+ expect(extractImageRefs("just text and a [link](/api/attachments/x/content)")).toEqual([]);
+ });
+});
diff --git a/ui/src/components/task-chat/task-chat-attachments.ts b/ui/src/components/task-chat/task-chat-attachments.ts
index 5746cae43f..7701117f4d 100644
--- a/ui/src/components/task-chat/task-chat-attachments.ts
+++ b/ui/src/components/task-chat/task-chat-attachments.ts
@@ -115,6 +115,26 @@ export interface AttachmentRef {
const ATTACHMENT_LINK_RE =
/(? src picks the initial index.
+ */
+export function extractImageRefs(body: string): AttachmentRef[] {
+ const refs: AttachmentRef[] = [];
+ const seen = new Set();
+ for (const match of body.matchAll(IMAGE_EMBED_RE)) {
+ const [, name, url] = match;
+ if (seen.has(url)) continue;
+ seen.add(url);
+ refs.push({ name: name.replace(/\\([[\]])/g, "$1"), url });
+ }
+ return refs;
+}
+
export interface ExtractedAttachmentRefs {
refs: AttachmentRef[];
/** Body with lines that were nothing but extracted links removed. */
diff --git a/ui/src/hooks/useIssueDocuments.ts b/ui/src/hooks/useIssueDocuments.ts
new file mode 100644
index 0000000000..04abd58576
--- /dev/null
+++ b/ui/src/hooks/useIssueDocuments.ts
@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/react-query";
+import type { IssueDocument } from "@paperclipai/shared";
+import { issuesApi } from "@/api/issues";
+import { queryKeys } from "@/lib/queryKeys";
+
+/**
+ * All of the issue's non-system documents, bodies included (the list endpoint
+ * filters system keys server-side and returns full documents). Shared by the
+ * properties pane's tab gating and the Plan/Artifacts tab bodies so they all
+ * consume one cached fetch. Keyed under queryKeys.issues.documents so
+ * document-scope invalidations refresh it alongside the single-doc queries.
+ */
+export function useIssueDocuments(issueId: string | null | undefined) {
+ return useQuery({
+ queryKey: [...queryKeys.issues.documents(issueId ?? ""), "list"],
+ enabled: Boolean(issueId),
+ queryFn: () => issuesApi.listDocuments(issueId!),
+ });
+}
diff --git a/ui/src/lib/issue-artifacts.test.ts b/ui/src/lib/issue-artifacts.test.ts
new file mode 100644
index 0000000000..026cff4739
--- /dev/null
+++ b/ui/src/lib/issue-artifacts.test.ts
@@ -0,0 +1,160 @@
+import { describe, expect, it } from "vitest";
+import type { IssueAttachment, IssueWorkProduct } from "@paperclipai/shared";
+import {
+ documentDisplayTitle,
+ isAgentAttachment,
+ selectAgentArtifactAttachments,
+ workProductHref,
+} from "./issue-artifacts";
+
+function makeAttachment(overrides: Partial & { id: string }): IssueAttachment {
+ return {
+ companyId: "company-1",
+ issueId: "issue-1",
+ issueCommentId: null,
+ assetId: "asset-1",
+ provider: "local",
+ objectKey: `objects/${overrides.id}`,
+ contentType: "image/png",
+ byteSize: 1024,
+ sha256: "0".repeat(64),
+ originalFilename: "shot.png",
+ createdByAgentId: null,
+ createdByUserId: null,
+ createdAt: new Date("2026-08-01T12:00:00Z"),
+ updatedAt: new Date("2026-08-01T12:00:00Z"),
+ contentPath: `/api/attachments/${overrides.id}/content`,
+ ...overrides,
+ } as IssueAttachment;
+}
+
+function makePromotingWorkProduct(attachmentId: string): IssueWorkProduct {
+ return {
+ id: `wp-${attachmentId}`,
+ companyId: "company-1",
+ projectId: null,
+ issueId: "issue-1",
+ executionWorkspaceId: null,
+ runtimeServiceId: null,
+ type: "artifact",
+ provider: "paperclip",
+ externalId: null,
+ title: "output.png",
+ url: null,
+ status: "active",
+ reviewState: "none",
+ isPrimary: false,
+ healthStatus: "unknown",
+ summary: null,
+ metadata: {
+ attachmentId,
+ contentType: "image/png",
+ byteSize: 1024,
+ contentPath: `/api/attachments/${attachmentId}/content`,
+ openPath: `/api/attachments/${attachmentId}/content`,
+ downloadPath: `/api/attachments/${attachmentId}/content?download=1`,
+ originalFilename: "output.png",
+ },
+ createdByRunId: null,
+ createdAt: new Date("2026-08-01T12:00:00Z"),
+ updatedAt: new Date("2026-08-01T12:00:00Z"),
+ } as IssueWorkProduct;
+}
+
+describe("isAgentAttachment", () => {
+ it("accepts agent-authored rows regardless of comment binding", () => {
+ expect(isAgentAttachment(makeAttachment({ id: "a", createdByAgentId: "agent-1" }))).toBe(true);
+ expect(
+ isAgentAttachment(
+ makeAttachment({ id: "b", createdByAgentId: "agent-1", issueCommentId: "comment-1" }),
+ ),
+ ).toBe(true);
+ });
+
+ it("rejects user uploads", () => {
+ expect(isAgentAttachment(makeAttachment({ id: "c", createdByUserId: "user-1" }))).toBe(false);
+ expect(
+ isAgentAttachment(
+ makeAttachment({ id: "d", createdByUserId: "user-1", issueCommentId: "comment-1" }),
+ ),
+ ).toBe(false);
+ });
+
+ it("treats authorless rows as agent output only when not comment-bound", () => {
+ expect(isAgentAttachment(makeAttachment({ id: "e" }))).toBe(true);
+ expect(isAgentAttachment(makeAttachment({ id: "f", issueCommentId: "comment-1" }))).toBe(false);
+ });
+});
+
+describe("selectAgentArtifactAttachments", () => {
+ it("keeps agent attachments and drops user uploads", () => {
+ const agent = makeAttachment({ id: "agent-file", createdByAgentId: "agent-1" });
+ const user = makeAttachment({
+ id: "user-file",
+ createdByUserId: "user-1",
+ issueCommentId: "comment-1",
+ });
+ expect(selectAgentArtifactAttachments([agent, user], [])).toEqual([agent]);
+ });
+
+ it("dedupes attachments already promoted to work products", () => {
+ // The promotion metadata schema requires a UUID attachmentId.
+ const promotedId = "00000000-0000-4000-8000-000000000001";
+ const promoted = makeAttachment({ id: promotedId, createdByAgentId: "agent-1" });
+ const loose = makeAttachment({ id: "loose", createdByAgentId: "agent-1" });
+ const result = selectAgentArtifactAttachments(
+ [promoted, loose],
+ [makePromotingWorkProduct(promotedId)],
+ );
+ expect(result.map((a) => a.id)).toEqual(["loose"]);
+ });
+
+ it("tolerates missing inputs", () => {
+ expect(selectAgentArtifactAttachments(null, null)).toEqual([]);
+ });
+});
+
+describe("workProductHref", () => {
+ it("prefers the top-level url", () => {
+ expect(
+ workProductHref({ url: "https://example.com/pr/1", metadata: { openPath: "/api/x" } }),
+ ).toBe("https://example.com/pr/1");
+ });
+
+ it("falls back to metadata.openPath, then metadata.url", () => {
+ expect(
+ workProductHref({ url: null, metadata: { openPath: "/api/attachments/a/content" } }),
+ ).toBe("/api/attachments/a/content");
+ expect(
+ workProductHref({ url: null, metadata: { url: "https://tunnel.here.now/x" } }),
+ ).toBe("https://tunnel.here.now/x");
+ expect(
+ workProductHref({
+ url: null,
+ metadata: { openPath: "/api/attachments/a/content", url: "https://tunnel.here.now/x" },
+ }),
+ ).toBe("/api/attachments/a/content");
+ });
+
+ it("ignores non-string and blank metadata values", () => {
+ expect(workProductHref({ url: null, metadata: { openPath: 42, url: " " } })).toBeNull();
+ });
+
+ it("returns null without url or metadata links", () => {
+ expect(workProductHref({ url: null, metadata: null })).toBeNull();
+ expect(workProductHref({ url: null, metadata: { attachmentId: "a" } })).toBeNull();
+ });
+});
+
+describe("documentDisplayTitle", () => {
+ it("prefers the stored title", () => {
+ expect(documentDisplayTitle({ key: "synthesis", title: "Findings Synthesis" })).toBe(
+ "Findings Synthesis",
+ );
+ });
+
+ it("humanizes the key when no title is set", () => {
+ expect(documentDisplayTitle({ key: "synthesis", title: null })).toBe("Synthesis");
+ expect(documentDisplayTitle({ key: "design_notes-v2", title: " " })).toBe("Design notes v2");
+ });
+});
diff --git a/ui/src/lib/issue-artifacts.ts b/ui/src/lib/issue-artifacts.ts
new file mode 100644
index 0000000000..7563638c49
--- /dev/null
+++ b/ui/src/lib/issue-artifacts.ts
@@ -0,0 +1,64 @@
+import type { IssueAttachment, IssueDocumentSummary, IssueWorkProduct } from "@paperclipai/shared";
+import { getPromotedOutputAttachmentIds } from "./issue-output";
+
+/**
+ * Selectors for the properties pane's Artifacts tab (PAP-491): which
+ * attachments count as agent-produced artifacts, as opposed to user uploads
+ * that live in the conversation thread.
+ */
+
+/**
+ * An attachment authored by an agent. Rows with no author at all are treated
+ * as agent output when they are not bound to a comment — legacy agent uploads
+ * predate attribution, while user uploads always arrive through a comment.
+ */
+export function isAgentAttachment(
+ attachment: Pick,
+): boolean {
+ if (attachment.createdByAgentId) return true;
+ return !attachment.createdByUserId && !attachment.issueCommentId;
+}
+
+/**
+ * Agent-authored attachments minus the ones already promoted to
+ * attachment-backed work products (`metadata.attachmentId`), so the Artifacts
+ * tab lists each file once.
+ */
+export function selectAgentArtifactAttachments(
+ attachments: IssueAttachment[] | null | undefined,
+ workProducts: IssueWorkProduct[] | null | undefined,
+): IssueAttachment[] {
+ const promoted = getPromotedOutputAttachmentIds(workProducts);
+ return (attachments ?? []).filter(
+ (attachment) => isAgentAttachment(attachment) && !promoted.has(attachment.id),
+ );
+}
+
+/**
+ * Where a work-product row should link. Many rows carry `url: null` with the
+ * usable link only in metadata — `openPath` for attachment-backed artifacts
+ * (same field OutputRow opens) or `url` for provider-specific links — so fall
+ * back to those before rendering the row inert. Expired links are still
+ * returned; titles announce expiry where the producer recorded it.
+ */
+export function workProductHref(
+ workProduct: Pick,
+): string | null {
+ if (workProduct.url) return workProduct.url;
+ const metadata = workProduct.metadata;
+ if (!metadata) return null;
+ for (const key of ["openPath", "url"]) {
+ const value = metadata[key];
+ if (typeof value === "string" && value.trim().length > 0) return value;
+ }
+ return null;
+}
+
+/** Display title for an issue document: its title, else its key humanized. */
+export function documentDisplayTitle(
+ doc: Pick,
+): string {
+ if (doc.title?.trim()) return doc.title;
+ const words = doc.key.replace(/[-_]+/g, " ").trim();
+ return words.charAt(0).toUpperCase() + words.slice(1);
+}