[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.test.tsx

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