From 1ccae464c54e18c7ee2956ca09a4c8aeae61a041 Mon Sep 17 00:00:00 2001 From: Dotta <34892728+cryppadotta@users.noreply.github.com> Date: Tue, 22 Sep 2026 15:03:26 -0500 Subject: [PATCH] feat(ui): add task artifact media gallery and full-row links (#13825) ## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work. > - Tasks collect the files and work products that agents create. > - The Artifacts tab shows these outputs in rows, which makes videos hard to compare. > - Small text links also make artifact rows harder to open. > - This pull request adds image and video tiles with previews and makes the full artifact row clickable. > - Users can compare outputs and open the existing media viewer with one click. ## Linked Issues or Issue Description **What existing behavior does this improve?** The task Artifacts tab and media previews in task chat. **Current behavior** Video outputs appear as file rows or icons. Users must click a small link to open a work product. A task with eight video outputs gives little visual context. **Proposed behavior** Show images and videos in a responsive gallery. Show a paused video frame as the thumbnail. Keep documents, links, and other files in rows whose entire area opens the item. **Reason and benefit** Users can compare generated media without opening each item. Larger click targets also make the sidebar easier to use. **Breaking changes** None. This uses the existing artifact URLs, media viewer, run grouping, and attachment filters. No API or database changes. Related work: #11226 added the task sidebar output surface, and #7361 added rich attachment previews. #3524 concerns a separate reviewed-assets panel. This PR improves the existing task artifact components. The duplicate search found no active PR for this change. This is polish for the shipped Artifacts & Work Products roadmap item. ## What Changed - Add a shared media tile for work products and agent attachments. - Reuse video and image previews in task artifacts and chat. Seek up to one second into videos and reset preview state when the source changes. - Use the existing task gallery for playback and downloads. Preserve grouping and attachment deduplication. - Extend native links and buttons across work-product rows, including keyboard focus indicators. - Add eight offline Storybook examples for video outputs, mixed media, clickable rows, narrow and wide panels, missing previews, empty state, and light mode. - Register the component in the design guide and document its use. ## Verification - 108 focused component tests pass, including thumbnail seeking, source changes, gallery activation, and attachment deduplication. - `pnpm build`, `pnpm -r typecheck`, Storybook build, token gates, and `git diff --check` pass locally. - Reviewed the production components in the embedded browser. Checked all eight video thumbnails, mixed media, narrow layout, light mode, blank-area row clicks, keyboard gallery activation for generic-MIME images, and playback from chat video thumbnails. - Storybook: open **Tasks / Artifact Gallery** and select **Eight Video Outputs**, **Mixed Media And Files**, or **Whole Row Clickable**. The small local clips are synthetic fixtures. - All build, typecheck, unit, runner, and end-to-end CI jobs pass for `b8ace289b5e07df5b9f2c319b159f3923ce427b4`. Greptile gives 5/5 with both review findings resolved. All 54 PR checks pass, including the external security scan. The full test suite passed in CI. The duplicate serial local test run was stopped after CI finished; the 108 focused tests, full build, and recursive typecheck passed locally. ## Risks - Video thumbnails require the browser to load metadata and a frame. A slow server or unsupported codec can leave the fallback visible; opening and downloading still use the existing viewer. - Full-row click targets change pointer interaction with work-product cards. Native link and button semantics remain in place. ## Model Used OpenAI GPT-6 in Codex, with code execution and browser tools. The exact deployment ID and context window are not exposed in this session. ## 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 - [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 --- doc/design/CHANGING-THE-UI.md | 6 ++ .../artifacts/ArtifactCard.test.tsx | 28 +++++ ui/src/components/artifacts/ArtifactCard.tsx | 16 +-- .../artifacts/MediaArtifactCard.tsx | 41 +++++++ .../IssuePropertiesArtifactsTab.tsx | 40 +++++-- ...ssuePropertiesMarkdownWorkProduct.test.tsx | 20 ++++ .../task-chat/RichWorkProductCard.tsx | 42 +++++--- .../task-chat/TaskChatBubble.test.tsx | 27 +++++ .../components/task-chat/TaskChatBubble.tsx | 21 ++-- .../task-chat/TaskChatProtocolCard.test.tsx | 7 +- ui/src/lib/issue-attachments.ts | 6 +- ui/src/lib/issue-output.test.ts | 12 +++ ui/src/lib/issue-output.ts | 14 +++ ui/src/pages/DesignGuide.tsx | 9 ++ ui/src/pages/IssueDetail.tsx | 4 +- .../fixtures/artifact-media/README.md | 1 + .../fixtures/artifact-media/big-type.mp4 | Bin 0 -> 12198 bytes .../fixtures/artifact-media/big-type.png | Bin 0 -> 19372 bytes .../fixtures/artifact-media/manila-ledger.mp4 | Bin 0 -> 13487 bytes .../fixtures/artifact-media/manila-ledger.png | Bin 0 -> 19818 bytes .../fixtures/artifact-media/night-pills.mp4 | Bin 0 -> 12384 bytes .../fixtures/artifact-media/night-pills.png | Bin 0 -> 19317 bytes .../fixtures/artifact-media/paper-trail.mp4 | Bin 0 -> 12350 bytes .../fixtures/artifact-media/paper-trail.png | Bin 0 -> 19172 bytes .../fixtures/artifact-media/ticket-board.mp4 | Bin 0 -> 12993 bytes .../fixtures/artifact-media/ticket-board.png | Bin 0 -> 19648 bytes .../stories/task-artifact-gallery.stories.tsx | 102 ++++++++++++++++++ 27 files changed, 351 insertions(+), 45 deletions(-) create mode 100644 ui/src/components/artifacts/MediaArtifactCard.tsx create mode 100644 ui/storybook/fixtures/artifact-media/README.md create mode 100644 ui/storybook/fixtures/artifact-media/big-type.mp4 create mode 100644 ui/storybook/fixtures/artifact-media/big-type.png create mode 100644 ui/storybook/fixtures/artifact-media/manila-ledger.mp4 create mode 100644 ui/storybook/fixtures/artifact-media/manila-ledger.png create mode 100644 ui/storybook/fixtures/artifact-media/night-pills.mp4 create mode 100644 ui/storybook/fixtures/artifact-media/night-pills.png create mode 100644 ui/storybook/fixtures/artifact-media/paper-trail.mp4 create mode 100644 ui/storybook/fixtures/artifact-media/paper-trail.png create mode 100644 ui/storybook/fixtures/artifact-media/ticket-board.mp4 create mode 100644 ui/storybook/fixtures/artifact-media/ticket-board.png create mode 100644 ui/storybook/stories/task-artifact-gallery.stories.tsx diff --git a/doc/design/CHANGING-THE-UI.md b/doc/design/CHANGING-THE-UI.md index 49ee2a721e..77602f0ae1 100644 --- a/doc/design/CHANGING-THE-UI.md +++ b/doc/design/CHANGING-THE-UI.md @@ -72,3 +72,9 @@ This system was built to be steered by instruction. "Make all running indicators - **ESLint ratchet** — will eventually enforce the token rules at lint time; until then `check:token-gates` is the gate. See `DECISION-SHEET.md` for the full ledger. + +### Task artifact galleries + +The task Artifacts tab renders images and videos with `MediaArtifactCard`, including agent attachments that have not been promoted to work products. Its container-responsive grid preserves run grouping and chronological order; documents and other outputs span the full width. `RichWorkProductCard` supports `gallery` for media and keeps `card`/`compact` rows for other outputs. Rows use a stretched native link or button so titles, thumbnails, metadata, and padding activate the same action, with keyboard focus and normal link modifiers preserved. + +`ArtifactPreview` is shared with the company gallery. Video previews are muted, never autoplay, and seek up to one second into the clip after metadata loads. Changing the source resets preview state. The existing task gallery handles playback and download. Storybook **Tasks → Artifact Gallery** covers eight generated video outputs, mixed images/files, full-row activation, narrow/expanded panels, empty state, unavailable previews, and light mode using small offline fixtures. diff --git a/ui/src/components/artifacts/ArtifactCard.test.tsx b/ui/src/components/artifacts/ArtifactCard.test.tsx index 9046b30ece..f8dc36a591 100644 --- a/ui/src/components/artifacts/ArtifactCard.test.tsx +++ b/ui/src/components/artifacts/ArtifactCard.test.tsx @@ -132,6 +132,34 @@ describe("ArtifactCard", () => { container.remove(); }); + it("seeks into clips and resets thumbnail state when the source changes", () => { + const container = document.createElement("div"); + const root = createRoot(container); + const render = (contentPath: string) => flushSync(() => root.render( + , + )); + try { + render("/first.mp4"); + const first = container.querySelector("video")!; + Object.defineProperty(first, "duration", { value: 8 }); + flushSync(() => first.dispatchEvent(new Event("loadedmetadata"))); + expect(first.currentTime).toBe(1); + flushSync(() => first.dispatchEvent(new Event("seeked"))); + expect(first.dataset.frameReady).toBe("true"); + render("/short.mp4"); + const next = container.querySelector("video")!; + expect(next).not.toBe(first); + expect(next.dataset.frameReady).toBe("false"); + Object.defineProperty(next, "duration", { value: 0.2 }); + flushSync(() => next.dispatchEvent(new Event("loadedmetadata"))); + expect(next.currentTime).toBe(0.05); + expect(next.autoplay).toBe(false); + expect(next.muted).toBe(true); + } finally { + flushSync(() => root.unmount()); + } + }); + it("reveals video previews if the browser does not report seek completion", () => { vi.useFakeTimers(); const container = document.createElement("div"); diff --git a/ui/src/components/artifacts/ArtifactCard.tsx b/ui/src/components/artifacts/ArtifactCard.tsx index 2415d4e729..0fbb5349d9 100644 --- a/ui/src/components/artifacts/ArtifactCard.tsx +++ b/ui/src/components/artifacts/ArtifactCard.tsx @@ -32,7 +32,9 @@ function PlaceholderPreview({ label }: { label?: string }) { ); } -function ImagePreview({ artifact }: { artifact: CompanyArtifact }) { +type PreviewArtifact = Pick & Partial>; + +function ImagePreview({ artifact }: { artifact: PreviewArtifact }) { const [errored, setErrored] = useState(false); if (errored || !artifact.contentPath) { return ; @@ -50,7 +52,7 @@ function ImagePreview({ artifact }: { artifact: CompanyArtifact }) { ); } -function VideoPreview({ artifact }: { artifact: CompanyArtifact }) { +function VideoPreview({ artifact }: { artifact: PreviewArtifact }) { const [errored, setErrored] = useState(false); const [frameReady, setFrameReady] = useState(false); const thumbnailSeekRequested = useRef(false); @@ -90,7 +92,7 @@ function VideoPreview({ artifact }: { artifact: CompanyArtifact }) { thumbnailSeekRequested.current = true; const video = event.currentTarget; const duration = Number.isFinite(video.duration) && video.duration > 0 ? video.duration : 0; - const seekTarget = duration > 0 ? Math.min(0.12, duration / 2) : 0.05; + const seekTarget = duration > 0 ? Math.min(1, duration / 4) : 0.05; try { if (Math.abs(video.currentTime - seekTarget) > 0.001) { video.currentTime = seekTarget; @@ -131,7 +133,7 @@ function VideoPreview({ artifact }: { artifact: CompanyArtifact }) { ); } -function TextPreview({ artifact }: { artifact: CompanyArtifact }) { +function TextPreview({ artifact }: { artifact: PreviewArtifact }) { const preview = artifact.previewText?.trim(); if (!preview) { return ; @@ -148,12 +150,12 @@ function TextPreview({ artifact }: { artifact: CompanyArtifact }) { ); } -export function ArtifactPreview({ artifact }: { artifact: CompanyArtifact }) { +export function ArtifactPreview({ artifact }: { artifact: PreviewArtifact }) { switch (artifact.mediaKind) { case "image": - return ; + return ; case "video": - return ; + return ; case "text": case "document": return ; diff --git a/ui/src/components/artifacts/MediaArtifactCard.tsx b/ui/src/components/artifacts/MediaArtifactCard.tsx new file mode 100644 index 0000000000..9407ab9294 --- /dev/null +++ b/ui/src/components/artifacts/MediaArtifactCard.tsx @@ -0,0 +1,41 @@ +import { useContext, useState, type ReactNode } from "react"; +import { IssueGalleryContext } from "@/context/IssueGalleryContext"; +import { ImageGalleryModal } from "@/components/ImageGalleryModal"; +import { isVideoLikeOutput } from "@/lib/issue-output"; +import { ArtifactPreview } from "./ArtifactCard"; + +/** A media tile shared by uploaded files and attachment-backed work products. */ +export function MediaArtifactCard({ id, title, contentPath, contentType, originalFilename, downloadPath, detail, badge }: { + id: string; + title: string; + contentPath: string; + contentType: string; + originalFilename: string; + downloadPath?: string; + detail?: string; + badge?: ReactNode; +}) { + const openIssueGallery = useContext(IssueGalleryContext); + const [open, setOpen] = useState(false); + const mediaKind = isVideoLikeOutput(contentType, originalFilename) ? "video" : "image"; + return ( + <> + + {open ? : null} + + ); +} diff --git a/ui/src/components/issue-properties/IssuePropertiesArtifactsTab.tsx b/ui/src/components/issue-properties/IssuePropertiesArtifactsTab.tsx index 64e0613ee3..2608e89610 100644 --- a/ui/src/components/issue-properties/IssuePropertiesArtifactsTab.tsx +++ b/ui/src/components/issue-properties/IssuePropertiesArtifactsTab.tsx @@ -32,7 +32,9 @@ import { selectAgentArtifactAttachments, workProductHref, } from "@/lib/issue-artifacts"; -import { attachmentOpenPath } from "@/lib/issue-attachments"; +import { MediaArtifactCard } from "@/components/artifacts/MediaArtifactCard"; +import { isImageLikeOutput, isVideoLikeOutput } from "@/lib/issue-output"; +import { attachmentDownloadPath, attachmentOpenPath } from "@/lib/issue-attachments"; import { MarkdownBody } from "@/components/MarkdownBody"; import { RichWorkProductCard } from "@/components/task-chat/RichWorkProductCard"; import { DocumentAnnotationsCountChip, IssueDocumentAnnotations } from "@/components/IssueDocumentAnnotations"; @@ -75,7 +77,7 @@ function workProductStatusBadge(status: string): { label: string; cssVar: string } const ROW_CLASS = - "flex items-center gap-2 rounded-md border border-border bg-card/50 px-2.5 py-1.5 text-sm"; + "flex items-center gap-2 rounded-md border border-border bg-card/50 px-2.5 py-1.5 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"; /** * Work-product row for an eligible Markdown artifact (LOOA-1533 gap): expands @@ -438,7 +440,7 @@ export function IssuePropertiesArtifactsTab({ issue, documentDeepLink, onOpenDoc } return ( -
+
{groupedRows.map((group) => { const run = group.runId === "other" ? null : runsById.get(group.runId); const agent = run ? agentsById.get(run.agentId) : null; @@ -454,7 +456,7 @@ export function IssuePropertiesArtifactsTab({ issue, documentDeepLink, onOpenDoc ) : null} -