[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/ImageGalleryModal.tsx

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