[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

ui/src/components/issue-output/IssueOutputSection.test.tsx

@@ -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

ui/src/components/issue-output/IssueOutputSection.tsx

@@ -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>
   );
 }

ui/src/components/issue-output/OutputPrimaryCard.tsx

@@ -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" />