[codex] Unify issue media attachment gallery (#8785)
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work > - Issue detail pages and run output cards both render user-facing attachment previews > - Media attachments were handled through separate gallery entry points, so attachments from issue comments and issue output did not share one consistent viewing path > - A shared gallery path makes image browsing more predictable across the issue surface > - This pull request unifies the issue media attachment gallery behavior across attachments, output cards, and issue detail rendering > - The benefit is a more consistent image preview experience with focused regression coverage around the affected UI paths ## Linked Issues or Issue Description Refs #8788 This PR fixes inconsistent issue media preview behavior across attachment and output surfaces. ## What Changed - Unified issue media attachment gallery behavior across issue attachments, issue output, output primary cards, and issue detail rendering. - Added image gallery modal coverage and regression tests for attachments, output image handling, keyboard navigation, and issue detail interactions. - Preserved the primary video output Open action while still allowing gallery browsing when a gallery handler is available. - Updated issue attachment and issue output helper logic to preserve shared image gallery metadata. ## Verification - `pnpm --filter @paperclipai/ui exec vitest run src/components/ImageGalleryModal.test.tsx src/components/issue-output/IssueOutputSection.test.tsx src/components/IssueAttachmentsSection.test.tsx src/pages/IssueDetail.test.tsx` - Result: 4 files passed, 47 tests passed. ## Risks Low to medium risk. The change is UI-scoped but touches shared issue attachment/output rendering paths, so regressions would most likely appear as image/video preview ordering, missing gallery entries, or incorrect non-image attachment behavior. > 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 Codex, GPT-5 coding agent session with shell and git/GitHub CLI tool use. Exact serving revision and context window were not exposed by the runtime. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have not referenced internal/instance-local Paperclip issues or links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip` URLs) - [x] My branch name describes the change (e.g. `docs/...`, `fix/...`) and contains no internal Paperclip ticket id or instance-derived details - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [ ] All Paperclip CI gates are green - [ ] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge
This commit is contained in:
Dotta
GitHub
parent
3e31bf09bc
commit
b4fccaa8c4
|
|
@ -0,0 +1,134 @@
|
|||
// @vitest-environment jsdom
|
||||
|
||||
import { createRoot, type Root } from "react-dom/client";
|
||||
import { flushSync } from "react-dom";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { ImageGalleryModal, type GalleryMediaItem } from "./ImageGalleryModal";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
|
||||
|
||||
async function act(callback: () => void | Promise<void>) {
|
||||
let result: void | Promise<void> = undefined;
|
||||
flushSync(() => {
|
||||
result = callback();
|
||||
});
|
||||
await result;
|
||||
}
|
||||
|
||||
async function flushReact() {
|
||||
await act(async () => {
|
||||
await Promise.resolve();
|
||||
await new Promise((resolve) => window.setTimeout(resolve, 0));
|
||||
});
|
||||
}
|
||||
|
||||
function makeMediaItem(overrides: Partial<GalleryMediaItem> = {}): GalleryMediaItem {
|
||||
return {
|
||||
id: "media-1",
|
||||
contentPath: "/api/attachments/media-1/content",
|
||||
openPath: "/api/attachments/media-1/content",
|
||||
downloadPath: "/api/attachments/media-1/content?download=1",
|
||||
contentType: "image/png",
|
||||
originalFilename: "screenshot.png",
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
describe("ImageGalleryModal", () => {
|
||||
let container: HTMLDivElement;
|
||||
let root: Root;
|
||||
|
||||
beforeEach(() => {
|
||||
container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
document.body.innerHTML = "";
|
||||
});
|
||||
|
||||
it("renders video media with a download link in the gallery", async () => {
|
||||
const video = makeMediaItem({
|
||||
id: "video-1",
|
||||
contentPath: "/api/attachments/video-1/content",
|
||||
downloadPath: "/api/attachments/video-1/content?download=1",
|
||||
contentType: "video/webm",
|
||||
originalFilename: "demo.webm",
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<ImageGalleryModal
|
||||
items={[video]}
|
||||
initialIndex={0}
|
||||
open
|
||||
onOpenChange={() => undefined}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
|
||||
const renderedVideo = document.body.querySelector("video");
|
||||
expect(renderedVideo?.getAttribute("src")).toBe("/api/attachments/video-1/content");
|
||||
expect(renderedVideo?.getAttribute("controls")).not.toBeNull();
|
||||
expect(
|
||||
document.body.querySelector('a[aria-label="Download demo.webm"]')?.getAttribute("href"),
|
||||
).toBe("/api/attachments/video-1/content?download=1");
|
||||
});
|
||||
|
||||
it("supports keyboard navigation and Escape close", async () => {
|
||||
const onOpenChange = vi.fn();
|
||||
const first = makeMediaItem({
|
||||
id: "first",
|
||||
contentPath: "/api/attachments/first/content",
|
||||
originalFilename: "first.png",
|
||||
});
|
||||
const second = makeMediaItem({
|
||||
id: "second",
|
||||
contentPath: "/api/attachments/second/content",
|
||||
originalFilename: "second.png",
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<ImageGalleryModal
|
||||
items={[first, second]}
|
||||
initialIndex={0}
|
||||
open
|
||||
onOpenChange={onOpenChange}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
|
||||
expect(document.body.textContent).toContain("first.png");
|
||||
expect(document.body.textContent).toContain("1 / 2");
|
||||
|
||||
await act(async () => {
|
||||
window.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight" }));
|
||||
});
|
||||
await flushReact();
|
||||
|
||||
expect(document.body.textContent).toContain("second.png");
|
||||
expect(document.body.textContent).toContain("2 / 2");
|
||||
|
||||
await act(async () => {
|
||||
window.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft" }));
|
||||
});
|
||||
await flushReact();
|
||||
|
||||
expect(document.body.textContent).toContain("first.png");
|
||||
expect(document.body.textContent).toContain("1 / 2");
|
||||
|
||||
await act(async () => {
|
||||
window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
|
||||
});
|
||||
|
||||
expect(onOpenChange).toHaveBeenCalledWith(false);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,35 +1,53 @@
|
|||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { Dialog as DialogPrimitive } from "radix-ui";
|
||||
import { ChevronLeft, ChevronRight, Download, X } from "lucide-react";
|
||||
import type { IssueAttachment } from "@paperclipai/shared";
|
||||
import { attachmentDownloadPath, attachmentFilename } from "@/lib/issue-attachments";
|
||||
import { isVideoLikeOutput } from "@/lib/issue-output";
|
||||
|
||||
export interface GalleryMediaItem {
|
||||
id: string;
|
||||
contentPath: string;
|
||||
openPath?: string;
|
||||
downloadPath?: string;
|
||||
contentType: string;
|
||||
originalFilename: string | null;
|
||||
}
|
||||
|
||||
interface ImageGalleryModalProps {
|
||||
images: IssueAttachment[];
|
||||
items: GalleryMediaItem[];
|
||||
initialIndex: number;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export function ImageGalleryModal({
|
||||
images,
|
||||
items,
|
||||
initialIndex,
|
||||
open,
|
||||
onOpenChange,
|
||||
}: ImageGalleryModalProps) {
|
||||
const [currentIndex, setCurrentIndex] = useState(initialIndex);
|
||||
const imageRef = useRef<HTMLImageElement>(null);
|
||||
const mediaRef = useRef<HTMLImageElement | HTMLVideoElement | null>(null);
|
||||
const setMediaRef = useCallback((node: HTMLImageElement | HTMLVideoElement | null) => {
|
||||
mediaRef.current = node;
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) setCurrentIndex(initialIndex);
|
||||
}, [open, initialIndex]);
|
||||
|
||||
const goNext = useCallback(() => {
|
||||
setCurrentIndex((i) => (i + 1) % images.length);
|
||||
}, [images.length]);
|
||||
setCurrentIndex((i) => (i + 1) % items.length);
|
||||
}, [items.length]);
|
||||
|
||||
const goPrev = useCallback(() => {
|
||||
setCurrentIndex((i) => (i - 1 + images.length) % images.length);
|
||||
}, [images.length]);
|
||||
setCurrentIndex((i) => (i - 1 + items.length) % items.length);
|
||||
}, [items.length]);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentIndex < items.length) return;
|
||||
setCurrentIndex(0);
|
||||
}, [currentIndex, items.length]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
|
|
@ -49,7 +67,7 @@ export function ImageGalleryModal({
|
|||
if (
|
||||
target.closest("button") ||
|
||||
target.closest("a") ||
|
||||
target === imageRef.current
|
||||
target === mediaRef.current
|
||||
)
|
||||
return;
|
||||
onOpenChange(false);
|
||||
|
|
@ -57,10 +75,12 @@ export function ImageGalleryModal({
|
|||
[onOpenChange],
|
||||
);
|
||||
|
||||
if (images.length === 0) return null;
|
||||
if (items.length === 0) return null;
|
||||
|
||||
const current = images[currentIndex];
|
||||
const current = items[currentIndex];
|
||||
if (!current) return null;
|
||||
const filename = attachmentFilename(current);
|
||||
const isVideo = isVideoLikeOutput(current.contentType, current.originalFilename);
|
||||
|
||||
return (
|
||||
<DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
|
||||
|
|
@ -73,18 +93,19 @@ export function ImageGalleryModal({
|
|||
>
|
||||
{/* Top bar */}
|
||||
<div className="flex items-center justify-between px-5 py-3 text-white/80 text-sm shrink-0">
|
||||
<span className="truncate max-w-[50%] font-medium" title={current.originalFilename ?? undefined}>
|
||||
{current.originalFilename ?? "Image"}
|
||||
<span className="truncate max-w-[50%] font-medium" title={filename}>
|
||||
{filename}
|
||||
</span>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-white/40 tabular-nums text-xs">
|
||||
{currentIndex + 1} / {images.length}
|
||||
{currentIndex + 1} / {items.length}
|
||||
</span>
|
||||
<a
|
||||
href={current.contentPath}
|
||||
download={current.originalFilename ?? "image"}
|
||||
href={attachmentDownloadPath(current)}
|
||||
download={filename}
|
||||
className="text-white/50 hover:text-white transition-colors"
|
||||
title="Download"
|
||||
aria-label={`Download ${filename}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Download className="h-4.5 w-4.5" />
|
||||
|
|
@ -104,7 +125,7 @@ export function ImageGalleryModal({
|
|||
<div className="flex-1 flex items-center min-h-0">
|
||||
{/* Left nav zone */}
|
||||
<div className="w-16 md:w-24 shrink-0 flex items-center justify-center h-full">
|
||||
{images.length > 1 && (
|
||||
{items.length > 1 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={goPrev}
|
||||
|
|
@ -116,20 +137,30 @@ export function ImageGalleryModal({
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Image */}
|
||||
{/* Media */}
|
||||
<div className="flex-1 flex items-center justify-center min-w-0 min-h-0 h-full px-2">
|
||||
<img
|
||||
ref={imageRef}
|
||||
src={current.contentPath}
|
||||
alt={current.originalFilename ?? "attachment"}
|
||||
className="max-w-full max-h-full object-contain select-none rounded-lg"
|
||||
draggable={false}
|
||||
/>
|
||||
{isVideo ? (
|
||||
<video
|
||||
ref={setMediaRef}
|
||||
src={current.contentPath}
|
||||
className="max-w-full max-h-full rounded-lg"
|
||||
controls
|
||||
playsInline
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
ref={setMediaRef}
|
||||
src={current.contentPath}
|
||||
alt={filename}
|
||||
className="max-w-full max-h-full object-contain select-none rounded-lg"
|
||||
draggable={false}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right nav zone */}
|
||||
<div className="w-16 md:w-24 shrink-0 flex items-center justify-center h-full">
|
||||
{images.length > 1 && (
|
||||
{items.length > 1 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={goNext}
|
||||
|
|
|
|||
|
|
@ -207,6 +207,40 @@ describe("IssueAttachmentsSection", () => {
|
|||
expect(fetchSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("lets video attachments open the shared media gallery", async () => {
|
||||
const attachment = makeAttachment({
|
||||
id: "video-attachment",
|
||||
originalFilename: "demo.webm",
|
||||
contentType: "video/webm",
|
||||
contentPath: "/api/attachments/video-attachment/content",
|
||||
});
|
||||
const onImageClick = vi.fn();
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<IssueAttachmentsSection
|
||||
attachments={[attachment]}
|
||||
onDelete={vi.fn()}
|
||||
onImageClick={onImageClick}
|
||||
/>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
|
||||
const browse = container.querySelector<HTMLButtonElement>(
|
||||
'button[aria-label="Browse demo.webm in gallery"]',
|
||||
);
|
||||
expect(browse).toBeTruthy();
|
||||
|
||||
await act(async () => {
|
||||
browse?.click();
|
||||
});
|
||||
|
||||
expect(onImageClick).toHaveBeenCalledWith(attachment);
|
||||
});
|
||||
|
||||
it("treats mp4 filenames as playable videos even with a generic binary content type", async () => {
|
||||
const attachment = makeAttachment({
|
||||
id: "misclassified-mp4",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useMemo, useState, type DragEvent, type ReactNode } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import type { IssueAttachment } from "@paperclipai/shared";
|
||||
import { Download, ExternalLink, FileText, Paperclip, Trash2 } from "lucide-react";
|
||||
import { Download, ExternalLink, FileText, Maximize2, Paperclip, Trash2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { FoldCurtain } from "./FoldCurtain";
|
||||
import { MarkdownBody } from "./MarkdownBody";
|
||||
|
|
@ -47,14 +47,27 @@ function AttachmentActions({
|
|||
attachment,
|
||||
onDelete,
|
||||
deletePending,
|
||||
onPreview,
|
||||
}: {
|
||||
attachment: IssueAttachment;
|
||||
onDelete: (attachmentId: string) => void;
|
||||
deletePending?: boolean;
|
||||
onPreview?: (attachment: IssueAttachment) => void;
|
||||
}) {
|
||||
const filename = attachmentFilename(attachment);
|
||||
return (
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
{onPreview ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
title="Browse gallery"
|
||||
aria-label={`Browse ${filename} in gallery`}
|
||||
onClick={() => onPreview(attachment)}
|
||||
>
|
||||
<Maximize2 className="h-4 w-4" />
|
||||
</Button>
|
||||
) : null}
|
||||
<Button asChild variant="ghost" size="icon-sm" title="Open in new tab">
|
||||
<a href={attachmentOpenPath(attachment)} target="_blank" rel="noreferrer" aria-label={`Open ${filename}`}>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
|
|
@ -135,10 +148,12 @@ function VideoAttachmentCard({
|
|||
attachment,
|
||||
onDelete,
|
||||
deletePending,
|
||||
onPreview,
|
||||
}: {
|
||||
attachment: IssueAttachment;
|
||||
onDelete: (attachmentId: string) => void;
|
||||
deletePending?: boolean;
|
||||
onPreview?: (attachment: IssueAttachment) => void;
|
||||
}) {
|
||||
const filename = attachmentFilename(attachment);
|
||||
return (
|
||||
|
|
@ -149,7 +164,12 @@ function VideoAttachmentCard({
|
|||
<p className="break-words text-sm font-semibold text-foreground">{filename}</p>
|
||||
<AttachmentMeta attachment={attachment} />
|
||||
</div>
|
||||
<AttachmentActions attachment={attachment} onDelete={onDelete} deletePending={deletePending} />
|
||||
<AttachmentActions
|
||||
attachment={attachment}
|
||||
onDelete={onDelete}
|
||||
deletePending={deletePending}
|
||||
onPreview={onPreview}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -337,6 +357,7 @@ export function IssueAttachmentsSection({
|
|||
attachment={attachment}
|
||||
onDelete={requestDelete}
|
||||
deletePending={deletePending}
|
||||
onPreview={onImageClick}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,6 +32,8 @@ const UUIDS: Record<string, string> = {
|
|||
"att-1": "11111111-1111-4111-8111-111111111111",
|
||||
"att-vid": "22222222-2222-4222-8222-222222222222",
|
||||
"att-pdf": "33333333-3333-4333-8333-333333333333",
|
||||
"att-img": "44444444-4444-4444-8444-444444444444",
|
||||
"att-webm": "55555555-5555-4555-8555-555555555555",
|
||||
};
|
||||
|
||||
function metadata(key: string, contentType: string, filename: string) {
|
||||
|
|
@ -76,6 +78,27 @@ describe("IssueOutputSection", () => {
|
|||
expect(markup).toContain("18.4 MB");
|
||||
});
|
||||
|
||||
it("keeps the open action for primary videos when gallery browsing is enabled", () => {
|
||||
const markup = renderToStaticMarkup(
|
||||
<IssueOutputSection
|
||||
workProducts={[
|
||||
makeWorkProduct({
|
||||
id: "wp-video",
|
||||
title: "Demo walkthrough",
|
||||
isPrimary: true,
|
||||
metadata: metadata("att-1", "video/mp4", "demo.mp4"),
|
||||
}),
|
||||
]}
|
||||
onMediaClick={() => undefined}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(markup).toContain("Browse");
|
||||
expect(markup).toContain("Open");
|
||||
expect(markup).toContain(`href="/api/attachments/${UUIDS["att-1"]}/content"`);
|
||||
expect(markup).toContain("Download");
|
||||
});
|
||||
|
||||
it("renders nothing when the issue has no artifact outputs (empty state)", () => {
|
||||
const markup = renderToStaticMarkup(
|
||||
<IssueOutputSection
|
||||
|
|
@ -130,6 +153,38 @@ describe("IssueOutputSection", () => {
|
|||
expect(markup).toContain("PDF");
|
||||
});
|
||||
|
||||
it("renders secondary image and video outputs as preview tiles", () => {
|
||||
const markup = renderToStaticMarkup(
|
||||
<IssueOutputSection
|
||||
workProducts={[
|
||||
makeWorkProduct({
|
||||
id: "wp-primary",
|
||||
isPrimary: true,
|
||||
metadata: metadata("att-pdf", "application/pdf", "brief.pdf"),
|
||||
}),
|
||||
makeWorkProduct({
|
||||
id: "wp-image",
|
||||
createdAt: new Date("2026-05-30T11:00:00Z"),
|
||||
metadata: metadata("att-img", "image/png", "screenshot.png"),
|
||||
}),
|
||||
makeWorkProduct({
|
||||
id: "wp-video",
|
||||
createdAt: new Date("2026-05-30T10:00:00Z"),
|
||||
metadata: metadata("att-webm", "video/webm", "clip.webm"),
|
||||
}),
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(markup).toContain("Also produced");
|
||||
expect(markup).toContain("screenshot.png");
|
||||
expect(markup).toContain("clip.webm");
|
||||
expect(markup).toContain("<img");
|
||||
expect(markup).toContain("<video");
|
||||
expect(markup).toContain("Open screenshot.png");
|
||||
expect(markup).toContain("Open clip.webm");
|
||||
});
|
||||
|
||||
it("surfaces an output with failed/invalid attachment metadata without crashing", () => {
|
||||
const markup = renderToStaticMarkup(
|
||||
<IssueOutputSection
|
||||
|
|
|
|||
|
|
@ -1,13 +1,104 @@
|
|||
import { Play } from "lucide-react";
|
||||
import type { IssueWorkProduct } from "@paperclipai/shared";
|
||||
import { getIssueOutputs, type IssueOutputItem } from "@/lib/issue-output";
|
||||
import {
|
||||
formatBytes,
|
||||
getIssueOutputs,
|
||||
isImageContentType,
|
||||
isVideoLikeOutput,
|
||||
outputFilename,
|
||||
type IssueOutputItem,
|
||||
} from "@/lib/issue-output";
|
||||
import { OutputPrimaryCard } from "./OutputPrimaryCard";
|
||||
import { OutputRow } from "./OutputRow";
|
||||
import { cn, relativeTime } from "@/lib/utils";
|
||||
|
||||
interface IssueOutputSectionProps {
|
||||
workProducts: IssueWorkProduct[] | null | undefined;
|
||||
/** Optional resolver for the artifact creator's display name. */
|
||||
resolveCreatorName?: (item: IssueOutputItem) => string | null;
|
||||
onMediaClick?: (item: IssueOutputItem) => void;
|
||||
}
|
||||
|
||||
function isMediaOutput(item: IssueOutputItem) {
|
||||
const meta = item.metadata;
|
||||
return Boolean(meta && (
|
||||
isImageContentType(meta.contentType) ||
|
||||
isVideoLikeOutput(meta.contentType, meta.originalFilename)
|
||||
));
|
||||
}
|
||||
|
||||
function OutputMediaPreview({
|
||||
item,
|
||||
creatorName,
|
||||
onMediaClick,
|
||||
}: {
|
||||
item: IssueOutputItem;
|
||||
creatorName?: string | null;
|
||||
onMediaClick?: (item: IssueOutputItem) => void;
|
||||
}) {
|
||||
const meta = item.metadata;
|
||||
if (!meta) return null;
|
||||
|
||||
const filename = outputFilename(item);
|
||||
const isVideo = isVideoLikeOutput(meta.contentType, meta.originalFilename);
|
||||
const metaBits = [meta.contentType, formatBytes(meta.byteSize)];
|
||||
if (creatorName) metaBits.push(creatorName);
|
||||
metaBits.push(relativeTime(item.createdAt));
|
||||
|
||||
const preview = (
|
||||
<>
|
||||
{isVideo ? (
|
||||
<video
|
||||
src={meta.contentPath}
|
||||
className="h-full w-full object-cover"
|
||||
muted
|
||||
playsInline
|
||||
preload="metadata"
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src={meta.contentPath}
|
||||
alt={filename}
|
||||
className="h-full w-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
)}
|
||||
<div className="absolute inset-x-0 bottom-0 bg-black/65 px-2 py-1.5 text-left">
|
||||
<p className="truncate text-xs font-medium text-white" title={filename}>{filename}</p>
|
||||
<p className="truncate text-[10px] text-white/65">{metaBits.join(" · ")}</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
const className = cn(
|
||||
"group relative block aspect-square overflow-hidden rounded-md border border-border bg-accent/10",
|
||||
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
||||
);
|
||||
|
||||
if (onMediaClick) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={className}
|
||||
aria-label={`Browse ${filename} in gallery`}
|
||||
onClick={() => onMediaClick(item)}
|
||||
>
|
||||
{preview}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<a
|
||||
href={meta.openPath}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className={className}
|
||||
aria-label={`Open ${filename}`}
|
||||
>
|
||||
{preview}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -19,12 +110,14 @@ interface IssueOutputSectionProps {
|
|||
* omitted entirely when the issue has produced no outputs — we never show a
|
||||
* permanent empty card.
|
||||
*/
|
||||
export function IssueOutputSection({ workProducts, resolveCreatorName }: IssueOutputSectionProps) {
|
||||
export function IssueOutputSection({ workProducts, resolveCreatorName, onMediaClick }: IssueOutputSectionProps) {
|
||||
const { primary, rest, count } = getIssueOutputs(workProducts);
|
||||
|
||||
if (!primary) return null;
|
||||
|
||||
const creatorFor = (item: IssueOutputItem) => resolveCreatorName?.(item) ?? null;
|
||||
const mediaRest = rest.filter(isMediaOutput);
|
||||
const fileRest = rest.filter((item) => !isMediaOutput(item));
|
||||
|
||||
return (
|
||||
<section className="space-y-3" aria-label="Task outputs">
|
||||
|
|
@ -37,19 +130,32 @@ export function IssueOutputSection({ workProducts, resolveCreatorName }: IssueOu
|
|||
{/* Stable anchor target so company Artifacts cards can deep-link to a
|
||||
specific work product inside its issue context (PAP-10359). */}
|
||||
<div id={`work-product-${primary.id}`} className="scroll-mt-20">
|
||||
<OutputPrimaryCard item={primary} creatorName={creatorFor(primary)} />
|
||||
<OutputPrimaryCard item={primary} creatorName={creatorFor(primary)} onMediaClick={onMediaClick} />
|
||||
</div>
|
||||
|
||||
{rest.length > 0 && (
|
||||
{rest.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">Also produced</p>
|
||||
{rest.map((item) => (
|
||||
{mediaRest.length > 0 ? (
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{mediaRest.map((item) => (
|
||||
<div key={item.id} id={`work-product-${item.id}`} className="scroll-mt-20">
|
||||
<OutputMediaPreview
|
||||
item={item}
|
||||
creatorName={creatorFor(item)}
|
||||
onMediaClick={onMediaClick}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
{fileRest.map((item) => (
|
||||
<div key={item.id} id={`work-product-${item.id}`} className="scroll-mt-20">
|
||||
<OutputRow item={item} creatorName={creatorFor(item)} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { Download, ExternalLink } from "lucide-react";
|
||||
import { Download, ExternalLink, Maximize2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn, relativeTime } from "@/lib/utils";
|
||||
import {
|
||||
formatBytes,
|
||||
isImageContentType,
|
||||
isVideoContentType,
|
||||
isVideoLikeOutput,
|
||||
outputFilename,
|
||||
type IssueOutputItem,
|
||||
} from "@/lib/issue-output";
|
||||
|
|
@ -15,6 +15,7 @@ import { OutputFileTile } from "./OutputFileTile";
|
|||
interface OutputPrimaryCardProps {
|
||||
item: IssueOutputItem;
|
||||
creatorName?: string | null;
|
||||
onMediaClick?: (item: IssueOutputItem) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -22,26 +23,42 @@ interface OutputPrimaryCardProps {
|
|||
* over a metadata strip with Open + Download actions. The layout stacks on
|
||||
* mobile and uses a single horizontal meta row on desktop.
|
||||
*/
|
||||
export function OutputPrimaryCard({ item, creatorName }: OutputPrimaryCardProps) {
|
||||
export function OutputPrimaryCard({ item, creatorName, onMediaClick }: OutputPrimaryCardProps) {
|
||||
const meta = item.metadata;
|
||||
const filename = outputFilename(item);
|
||||
const contentType = meta?.contentType;
|
||||
const isMedia = Boolean(meta && (
|
||||
isImageContentType(contentType) ||
|
||||
isVideoLikeOutput(contentType, meta.originalFilename)
|
||||
));
|
||||
const isVideo = Boolean(meta && isVideoLikeOutput(contentType, meta.originalFilename));
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-md border border-border bg-card">
|
||||
{/* Media region */}
|
||||
{meta && isVideoContentType(contentType) ? (
|
||||
{isVideo && meta ? (
|
||||
<OutputVideoPlayer src={meta.contentPath} title={filename} />
|
||||
) : meta && isImageContentType(contentType) ? (
|
||||
<a
|
||||
href={meta.openPath}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="block aspect-video w-full overflow-hidden bg-black"
|
||||
aria-label={`Open ${filename}`}
|
||||
>
|
||||
<img src={meta.contentPath} alt={filename} className="h-full w-full object-contain" />
|
||||
</a>
|
||||
onMediaClick ? (
|
||||
<button
|
||||
type="button"
|
||||
className="block aspect-video w-full overflow-hidden bg-black"
|
||||
aria-label={`Browse ${filename} in gallery`}
|
||||
onClick={() => onMediaClick(item)}
|
||||
>
|
||||
<img src={meta.contentPath} alt={filename} className="h-full w-full object-contain" />
|
||||
</button>
|
||||
) : (
|
||||
<a
|
||||
href={meta.openPath}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="block aspect-video w-full overflow-hidden bg-black"
|
||||
aria-label={`Open ${filename}`}
|
||||
>
|
||||
<img src={meta.contentPath} alt={filename} className="h-full w-full object-contain" />
|
||||
</a>
|
||||
)
|
||||
) : (
|
||||
<div className="flex aspect-video w-full items-center justify-center bg-muted/30">
|
||||
<OutputFileTile contentType={contentType} sizeClassName="h-16 w-16 text-base" />
|
||||
|
|
@ -76,12 +93,25 @@ export function OutputPrimaryCard({ item, creatorName }: OutputPrimaryCardProps)
|
|||
|
||||
{meta ? (
|
||||
<div className={cn("flex shrink-0 items-center gap-2", "max-md:w-full")}>
|
||||
<Button asChild variant="outline" size="sm" className="max-md:flex-1">
|
||||
<a href={meta.openPath} target="_blank" rel="noreferrer">
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
Open
|
||||
</a>
|
||||
</Button>
|
||||
{isMedia && onMediaClick ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="max-md:flex-1"
|
||||
onClick={() => onMediaClick(item)}
|
||||
>
|
||||
<Maximize2 className="h-4 w-4" />
|
||||
Browse
|
||||
</Button>
|
||||
) : null}
|
||||
{!isMedia || !onMediaClick || isVideo ? (
|
||||
<Button asChild variant="outline" size="sm" className="max-md:flex-1">
|
||||
<a href={meta.openPath} target="_blank" rel="noreferrer">
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
Open
|
||||
</a>
|
||||
</Button>
|
||||
) : null}
|
||||
<Button asChild size="sm" className="max-md:flex-1">
|
||||
<a href={meta.downloadPath} aria-label={`Download ${filename}`}>
|
||||
<Download className="h-4 w-4" />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import type { IssueAttachment } from "@paperclipai/shared";
|
||||
import { isVideoContentType } from "./issue-output";
|
||||
import { isVideoLikeOutput } from "./issue-output";
|
||||
|
||||
const GENERIC_ATTACHMENT_CONTENT_TYPES = new Set([
|
||||
"application/octet-stream",
|
||||
|
|
@ -36,19 +36,7 @@ export function isImageAttachment(attachment: Pick<IssueAttachment, "contentType
|
|||
export function isVideoAttachment(
|
||||
attachment: Pick<IssueAttachment, "contentType" | "originalFilename">,
|
||||
) {
|
||||
const contentType = normalizedContentType(attachment);
|
||||
if (isVideoContentType(contentType)) return true;
|
||||
if (!GENERIC_ATTACHMENT_CONTENT_TYPES.has(contentType)) return false;
|
||||
|
||||
const filename = (attachment.originalFilename ?? "").toLowerCase();
|
||||
return (
|
||||
filename.endsWith(".mp4") ||
|
||||
filename.endsWith(".m4v") ||
|
||||
filename.endsWith(".webm") ||
|
||||
filename.endsWith(".mov") ||
|
||||
filename.endsWith(".qt") ||
|
||||
filename.endsWith(".quicktime")
|
||||
);
|
||||
return isVideoLikeOutput(attachment.contentType, attachment.originalFilename);
|
||||
}
|
||||
|
||||
export function isMarkdownAttachment(
|
||||
|
|
|
|||
|
|
@ -64,6 +64,15 @@ const GENERIC_BINARY_CONTENT_TYPES = new Set([
|
|||
"application/x-binary",
|
||||
]);
|
||||
|
||||
const VIDEO_FILENAME_EXTENSIONS = [
|
||||
".mp4",
|
||||
".m4v",
|
||||
".webm",
|
||||
".mov",
|
||||
".qt",
|
||||
".quicktime",
|
||||
];
|
||||
|
||||
const BINARY_OUTPUT_APPLICATION_TYPES = new Set([
|
||||
"application/wasm",
|
||||
]);
|
||||
|
|
@ -201,6 +210,18 @@ export function isVideoContentType(contentType: string | null | undefined): bool
|
|||
return normalizeOutputContentType(contentType).startsWith("video/");
|
||||
}
|
||||
|
||||
export function isVideoLikeOutput(
|
||||
contentType: string | null | undefined,
|
||||
originalFilename?: string | null | undefined,
|
||||
): boolean {
|
||||
const type = normalizeOutputContentType(contentType);
|
||||
if (type.startsWith("video/")) return true;
|
||||
if (!GENERIC_BINARY_CONTENT_TYPES.has(type)) return false;
|
||||
|
||||
const filename = (originalFilename ?? "").trim().toLowerCase();
|
||||
return VIDEO_FILENAME_EXTENSIONS.some((extension) => filename.endsWith(extension));
|
||||
}
|
||||
|
||||
export function isImageContentType(contentType: string | null | undefined): boolean {
|
||||
return normalizeOutputContentType(contentType).startsWith("image/");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -291,7 +291,7 @@ vi.mock("../components/IssueWorkspaceCard", () => ({
|
|||
}));
|
||||
|
||||
vi.mock("../components/ImageGalleryModal", () => ({
|
||||
ImageGalleryModal: (props: { images: IssueAttachment[]; initialIndex: number; open: boolean }) => {
|
||||
ImageGalleryModal: (props: { items: IssueAttachment[]; initialIndex: number; open: boolean }) => {
|
||||
mockImageGalleryRender(props);
|
||||
return null;
|
||||
},
|
||||
|
|
@ -1998,7 +1998,8 @@ describe("IssueDetail", () => {
|
|||
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([
|
||||
expect(mockImageGalleryRender.mock.calls.at(-1)?.[0].items.map((attachment: IssueAttachment) => attachment.id)).toEqual([
|
||||
videoAttachment.id,
|
||||
imageAttachment.id,
|
||||
]);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -74,8 +74,13 @@ import { IssueAttachmentsSection } from "../components/IssueAttachmentsSection";
|
|||
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 { isImageAttachment, isVideoAttachment } from "../lib/issue-attachments";
|
||||
import {
|
||||
getIssueOutputs,
|
||||
getPromotedOutputAttachmentIds,
|
||||
isImageContentType,
|
||||
isVideoLikeOutput,
|
||||
} from "../lib/issue-output";
|
||||
import { IssueSiblingNavigation } from "../components/IssueSiblingNavigation";
|
||||
import type { MarkdownExternalReferenceMap } from "../components/MarkdownBody";
|
||||
import { IssuesList } from "../components/IssuesList";
|
||||
|
|
@ -91,7 +96,7 @@ import { useIssueExternalObjects } from "../hooks/useIssueExternalObjects";
|
|||
import { IssueRunLedger } from "../components/IssueRunLedger";
|
||||
import { IssueWorkspaceCard } from "../components/IssueWorkspaceCard";
|
||||
import type { MentionOption } from "../components/MarkdownEditor";
|
||||
import { ImageGalleryModal } from "../components/ImageGalleryModal";
|
||||
import { ImageGalleryModal, type GalleryMediaItem } from "../components/ImageGalleryModal";
|
||||
import { FileViewerProvider, useRequiredFileViewer } from "../context/FileViewerContext";
|
||||
import { FileViewerSheet } from "../components/FileViewerSheet";
|
||||
import { ArtifactFileChip } from "../components/ArtifactFileChip";
|
||||
|
|
@ -3114,17 +3119,55 @@ export function IssueDetail() {
|
|||
() => (attachments ?? []).filter((attachment) => !promotedOutputAttachmentIds.has(attachment.id)),
|
||||
[attachments, promotedOutputAttachmentIds],
|
||||
);
|
||||
const imageAttachments = useMemo(() => (attachments ?? []).filter(isImageAttachment), [attachments]);
|
||||
const mediaGalleryItems = useMemo<GalleryMediaItem[]>(() => {
|
||||
const items: GalleryMediaItem[] = [];
|
||||
const seen = new Set<string>();
|
||||
|
||||
const mark = (attachmentId: string | null | undefined, contentPath: string) => {
|
||||
if (attachmentId) seen.add(`attachment:${attachmentId}`);
|
||||
seen.add(`content:${contentPath}`);
|
||||
};
|
||||
|
||||
const hasSeen = (attachmentId: string | null | undefined, contentPath: string) => (
|
||||
Boolean(attachmentId && seen.has(`attachment:${attachmentId}`)) ||
|
||||
seen.has(`content:${contentPath}`)
|
||||
);
|
||||
|
||||
for (const attachment of attachments ?? []) {
|
||||
if (!isImageAttachment(attachment) && !isVideoAttachment(attachment)) continue;
|
||||
items.push(attachment);
|
||||
mark(attachment.id, attachment.contentPath);
|
||||
}
|
||||
|
||||
for (const item of getIssueOutputs(workProducts).items) {
|
||||
const meta = item.metadata;
|
||||
if (!meta) continue;
|
||||
const isMedia = isImageContentType(meta.contentType) ||
|
||||
isVideoLikeOutput(meta.contentType, meta.originalFilename);
|
||||
if (!isMedia || hasSeen(meta.attachmentId, meta.contentPath)) continue;
|
||||
items.push({
|
||||
id: `work-product-${item.id}`,
|
||||
contentPath: meta.contentPath,
|
||||
openPath: meta.openPath,
|
||||
downloadPath: meta.downloadPath,
|
||||
contentType: meta.contentType,
|
||||
originalFilename: meta.originalFilename ?? item.title,
|
||||
});
|
||||
mark(meta.attachmentId, meta.contentPath);
|
||||
}
|
||||
|
||||
return items;
|
||||
}, [attachments, workProducts]);
|
||||
|
||||
const handleChatImageClick = useCallback(
|
||||
(src: string) => {
|
||||
// Try exact contentPath match first
|
||||
let idx = imageAttachments.findIndex((a) => a.contentPath === src);
|
||||
let idx = mediaGalleryItems.findIndex((a) => a.contentPath === src);
|
||||
if (idx < 0) {
|
||||
// Try matching by asset ID extracted from /api/assets/{assetId}/content URLs
|
||||
const assetMatch = src.match(/\/api\/assets\/([^/]+)\/content/);
|
||||
if (assetMatch) {
|
||||
idx = imageAttachments.findIndex((a) => a.assetId === assetMatch[1]);
|
||||
idx = mediaGalleryItems.findIndex((a) => "assetId" in a && a.assetId === assetMatch[1]);
|
||||
}
|
||||
}
|
||||
if (idx >= 0) {
|
||||
|
|
@ -3135,7 +3178,7 @@ export function IssueDetail() {
|
|||
window.open(src, "_blank");
|
||||
}
|
||||
},
|
||||
[imageAttachments],
|
||||
[mediaGalleryItems],
|
||||
);
|
||||
|
||||
const copyIssueToClipboard = async () => {
|
||||
|
|
@ -4123,7 +4166,20 @@ export function IssueDetail() {
|
|||
userProfileMap={userProfileMap}
|
||||
/>
|
||||
|
||||
<IssueOutputSection workProducts={workProducts} />
|
||||
<IssueOutputSection
|
||||
workProducts={workProducts}
|
||||
onMediaClick={(item) => {
|
||||
const meta = item.metadata;
|
||||
if (!meta) return;
|
||||
const idx = mediaGalleryItems.findIndex((galleryItem) => (
|
||||
galleryItem.contentPath === meta.contentPath ||
|
||||
galleryItem.id === `work-product-${item.id}` ||
|
||||
galleryItem.id === meta.attachmentId
|
||||
));
|
||||
setGalleryIndex(idx >= 0 ? idx : 0);
|
||||
setGalleryOpen(true);
|
||||
}}
|
||||
/>
|
||||
|
||||
{attachmentsInitialLoading ? (
|
||||
<IssueSectionSkeleton titleWidth="w-24" rows={2} />
|
||||
|
|
@ -4136,7 +4192,7 @@ export function IssueDetail() {
|
|||
deletePending={deleteAttachment.isPending}
|
||||
onDelete={(attachmentId) => deleteAttachment.mutate(attachmentId)}
|
||||
onImageClick={(attachment) => {
|
||||
const idx = imageAttachments.findIndex((a) => a.id === attachment.id);
|
||||
const idx = mediaGalleryItems.findIndex((a) => a.id === attachment.id);
|
||||
setGalleryIndex(idx >= 0 ? idx : 0);
|
||||
setGalleryOpen(true);
|
||||
}}
|
||||
|
|
@ -4157,7 +4213,7 @@ export function IssueDetail() {
|
|||
) : null}
|
||||
|
||||
<ImageGalleryModal
|
||||
images={imageAttachments}
|
||||
items={mediaGalleryItems}
|
||||
initialIndex={galleryIndex}
|
||||
open={galleryOpen}
|
||||
onOpenChange={setGalleryOpen}
|
||||
|
|
|
|||
|
|
@ -686,7 +686,7 @@ function ImageGalleryModalStory() {
|
|||
description="The image gallery opens full-screen with attachment metadata, download action, and previous/next navigation."
|
||||
badges={["full-screen", "navigation", "visual attachment"]}
|
||||
>
|
||||
<ImageGalleryModal images={galleryImages} initialIndex={0} open onOpenChange={() => undefined} />
|
||||
<ImageGalleryModal items={galleryImages} initialIndex={0} open onOpenChange={() => undefined} />
|
||||
</DialogStory>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue