Add issue Output UI for artifact playback (PAP-10168)
Surface attachment-backed artifact work products as a first-class Output section on the issue detail page so cloud users can watch and download agent-generated videos without host filesystem access. - ui/src/lib/issue-output.ts: formatBytes/formatDuration/getOutputFileGlyph helpers + getIssueOutputs selector that validates the Phase-2 attachment artifact metadata contract and tolerates malformed metadata (degraded). - issue-output components: IssueOutputSection, OutputPrimaryCard (native <video>/image/generic), OutputRow, OutputVideoPlayer, OutputFileTile. - IssueDetail: fetch work products and render the Output section between Documents and Attachments; reuse formatBytes in the attachments list. - DesignGuide: showcase multiple-output, degraded, and empty states. - Focused tests for video output, empty state, multiple outputs, and failed attachment metadata (15 tests). Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
@@ -0,0 +1,137 @@
|
||||
import { renderToStaticMarkup } from "react-dom/server";
|
||||
import { describe, expect, it } from "vitest";
|
||||
import type { IssueWorkProduct } from "@paperclipai/shared";
|
||||
import { IssueOutputSection } from "./IssueOutputSection";
|
||||
|
||||
function makeWorkProduct(overrides: Partial<IssueWorkProduct> & { id: string }): IssueWorkProduct {
|
||||
return {
|
||||
companyId: "company-1",
|
||||
projectId: null,
|
||||
issueId: "issue-1",
|
||||
executionWorkspaceId: null,
|
||||
runtimeServiceId: null,
|
||||
type: "artifact",
|
||||
provider: "paperclip",
|
||||
externalId: null,
|
||||
title: "output",
|
||||
url: null,
|
||||
status: "active",
|
||||
reviewState: "none",
|
||||
isPrimary: false,
|
||||
healthStatus: "unknown",
|
||||
summary: null,
|
||||
metadata: null,
|
||||
createdByRunId: null,
|
||||
createdAt: new Date("2026-05-30T12:00:00Z"),
|
||||
updatedAt: new Date("2026-05-30T12:00:00Z"),
|
||||
...overrides,
|
||||
} as IssueWorkProduct;
|
||||
}
|
||||
|
||||
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",
|
||||
};
|
||||
|
||||
function metadata(key: string, contentType: string, filename: string) {
|
||||
const attachmentId = UUIDS[key] ?? key;
|
||||
return {
|
||||
attachmentId,
|
||||
contentType,
|
||||
byteSize: 19_293_798,
|
||||
contentPath: `/api/attachments/${attachmentId}/content`,
|
||||
openPath: `/api/attachments/${attachmentId}/content`,
|
||||
downloadPath: `/api/attachments/${attachmentId}/content?download=1`,
|
||||
originalFilename: filename,
|
||||
};
|
||||
}
|
||||
|
||||
describe("IssueOutputSection", () => {
|
||||
it("renders a playable, downloadable video as the primary output", () => {
|
||||
const markup = renderToStaticMarkup(
|
||||
<IssueOutputSection
|
||||
workProducts={[
|
||||
makeWorkProduct({
|
||||
id: "wp-1",
|
||||
title: "Demo walkthrough",
|
||||
isPrimary: true,
|
||||
metadata: metadata("att-1", "video/mp4", "demo.mp4"),
|
||||
}),
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
|
||||
// Native video player present
|
||||
expect(markup).toContain("<video");
|
||||
expect(markup).toContain("controls");
|
||||
expect(markup).toContain(`/api/attachments/${UUIDS["att-1"]}/content`);
|
||||
// Filename surfaced and download/open wired
|
||||
expect(markup).toContain("demo.mp4");
|
||||
expect(markup).toContain(`/api/attachments/${UUIDS["att-1"]}/content?download=1`);
|
||||
expect(markup).toContain("Download");
|
||||
expect(markup).toContain("Open");
|
||||
// Section header + size formatting
|
||||
expect(markup).toContain("Output");
|
||||
expect(markup).toContain("18.4 MB");
|
||||
});
|
||||
|
||||
it("renders nothing when the issue has no artifact outputs (empty state)", () => {
|
||||
const markup = renderToStaticMarkup(
|
||||
<IssueOutputSection
|
||||
workProducts={[
|
||||
makeWorkProduct({ id: "pr-1", type: "pull_request" }),
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
expect(markup).toBe("");
|
||||
});
|
||||
|
||||
it("renders the primary card plus an Also produced list for multiple outputs", () => {
|
||||
const markup = renderToStaticMarkup(
|
||||
<IssueOutputSection
|
||||
workProducts={[
|
||||
makeWorkProduct({
|
||||
id: "wp-primary",
|
||||
isPrimary: true,
|
||||
createdAt: new Date("2026-05-30T12:00:00Z"),
|
||||
metadata: metadata("att-vid", "video/mp4", "summary.mp4"),
|
||||
}),
|
||||
makeWorkProduct({
|
||||
id: "wp-pdf",
|
||||
createdAt: new Date("2026-05-30T11:00:00Z"),
|
||||
metadata: metadata("att-pdf", "application/pdf", "talking-points.pdf"),
|
||||
}),
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(markup).toContain("Also produced");
|
||||
expect(markup).toContain("summary.mp4");
|
||||
expect(markup).toContain("talking-points.pdf");
|
||||
// PDF glyph tile label appears for the secondary row
|
||||
expect(markup).toContain("PDF");
|
||||
});
|
||||
|
||||
it("surfaces an output with failed/invalid attachment metadata without crashing", () => {
|
||||
const markup = renderToStaticMarkup(
|
||||
<IssueOutputSection
|
||||
workProducts={[
|
||||
makeWorkProduct({
|
||||
id: "wp-broken",
|
||||
title: "broken-output.mp4",
|
||||
isPrimary: true,
|
||||
// Missing required path fields → fails the shared metadata schema
|
||||
metadata: { attachmentId: "att-x", contentType: "video/mp4" } as Record<string, unknown>,
|
||||
}),
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(markup).toContain("broken-output.mp4");
|
||||
expect(markup).toContain("metadata is unavailable");
|
||||
// No video element and no download link can be built from invalid metadata
|
||||
expect(markup).not.toContain("<video");
|
||||
expect(markup).not.toContain("download=1");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,49 @@
|
||||
import { Play } from "lucide-react";
|
||||
import type { IssueWorkProduct } from "@paperclipai/shared";
|
||||
import { getIssueOutputs, type IssueOutputItem } from "@/lib/issue-output";
|
||||
import { OutputPrimaryCard } from "./OutputPrimaryCard";
|
||||
import { OutputRow } from "./OutputRow";
|
||||
|
||||
interface IssueOutputSectionProps {
|
||||
workProducts: IssueWorkProduct[] | null | undefined;
|
||||
/** Optional resolver for the artifact creator's display name. */
|
||||
resolveCreatorName?: (item: IssueOutputItem) => string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Issue Output surface (PAP-10162 Phase 3).
|
||||
*
|
||||
* Renders attachment-backed artifact work products as first-class issue
|
||||
* outputs: a full-width primary card (video player / image / generic file) with
|
||||
* Open + Download, plus compact rows for any additional outputs. The section is
|
||||
* omitted entirely when the issue has produced no outputs — we never show a
|
||||
* permanent empty card.
|
||||
*/
|
||||
export function IssueOutputSection({ workProducts, resolveCreatorName }: IssueOutputSectionProps) {
|
||||
const { primary, rest, count } = getIssueOutputs(workProducts);
|
||||
|
||||
if (!primary) return null;
|
||||
|
||||
const creatorFor = (item: IssueOutputItem) => resolveCreatorName?.(item) ?? null;
|
||||
|
||||
return (
|
||||
<section className="space-y-3" aria-label="Issue outputs">
|
||||
<div className="flex items-center gap-2">
|
||||
<Play className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
|
||||
<h3 className="text-sm font-medium text-muted-foreground">Output</h3>
|
||||
<span className="text-xs text-muted-foreground">{count}</span>
|
||||
</div>
|
||||
|
||||
<OutputPrimaryCard item={primary} creatorName={creatorFor(primary)} />
|
||||
|
||||
{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) => (
|
||||
<OutputRow key={item.id} item={item} creatorName={creatorFor(item)} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { getOutputFileGlyph, type OutputFileTone } from "@/lib/issue-output";
|
||||
|
||||
const TONE_CLASSES: Record<OutputFileTone, string> = {
|
||||
video: "bg-indigo-500/15 text-indigo-300",
|
||||
pdf: "bg-red-500/15 text-red-300",
|
||||
zip: "bg-amber-500/15 text-amber-300",
|
||||
image: "bg-emerald-500/15 text-emerald-300",
|
||||
bin: "bg-muted text-muted-foreground",
|
||||
};
|
||||
|
||||
interface OutputFileTileProps {
|
||||
contentType: string | null | undefined;
|
||||
className?: string;
|
||||
/** Tailwind size classes for the square tile. Defaults to a 32×32 tile. */
|
||||
sizeClassName?: string;
|
||||
}
|
||||
|
||||
/** Square file-type tile showing a short MIME-derived label, colorised by tone. */
|
||||
export function OutputFileTile({ contentType, className, sizeClassName = "h-8 w-8" }: OutputFileTileProps) {
|
||||
const glyph = getOutputFileGlyph(contentType);
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"flex shrink-0 items-center justify-center rounded-md text-[10px] font-semibold tabular-nums",
|
||||
sizeClassName,
|
||||
TONE_CLASSES[glyph.tone],
|
||||
className,
|
||||
)}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{glyph.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import { Download, ExternalLink } 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,
|
||||
outputFilename,
|
||||
type IssueOutputItem,
|
||||
} from "@/lib/issue-output";
|
||||
import { OutputVideoPlayer } from "./OutputVideoPlayer";
|
||||
import { OutputFileTile } from "./OutputFileTile";
|
||||
|
||||
interface OutputPrimaryCardProps {
|
||||
item: IssueOutputItem;
|
||||
creatorName?: string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Full-width primary output card: media region (video / image / generic file)
|
||||
* 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) {
|
||||
const meta = item.metadata;
|
||||
const filename = outputFilename(item);
|
||||
const contentType = meta?.contentType;
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-md border border-border bg-card">
|
||||
{/* Media region */}
|
||||
{meta && isVideoContentType(contentType) ? (
|
||||
<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>
|
||||
) : (
|
||||
<div className="flex aspect-video w-full items-center justify-center bg-muted/30">
|
||||
<OutputFileTile contentType={contentType} sizeClassName="h-16 w-16 text-base" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Metadata strip */}
|
||||
<div className="flex flex-col gap-2 p-3 md:flex-row md:items-center md:justify-between">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="break-words text-sm font-semibold text-foreground">{filename}</p>
|
||||
{item.degraded ? (
|
||||
<p className="mt-0.5 text-[11px] text-destructive">
|
||||
Output metadata is unavailable — this file can’t be played or downloaded here.
|
||||
</p>
|
||||
) : (
|
||||
<div className="mt-0.5 flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[11px] text-muted-foreground">
|
||||
{item.isPrimary && (
|
||||
<Badge variant="secondary" className="px-1.5 py-0 text-[10px]">
|
||||
Primary
|
||||
</Badge>
|
||||
)}
|
||||
{meta && <span>{meta.contentType}</span>}
|
||||
{meta && <span aria-hidden="true">·</span>}
|
||||
{meta && <span>{formatBytes(meta.byteSize)}</span>}
|
||||
{creatorName && <span aria-hidden="true">·</span>}
|
||||
{creatorName && <span>{creatorName}</span>}
|
||||
<span aria-hidden="true">·</span>
|
||||
<span>{relativeTime(item.createdAt)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{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>
|
||||
<Button asChild size="sm" className="max-md:flex-1">
|
||||
<a href={meta.downloadPath} aria-label={`Download ${filename}`}>
|
||||
<Download className="h-4 w-4" />
|
||||
Download
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import { Download, ExternalLink } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn, relativeTime } from "@/lib/utils";
|
||||
import { formatBytes, outputFilename, type IssueOutputItem } from "@/lib/issue-output";
|
||||
import { OutputFileTile } from "./OutputFileTile";
|
||||
|
||||
interface OutputRowProps {
|
||||
item: IssueOutputItem;
|
||||
creatorName?: string | null;
|
||||
}
|
||||
|
||||
/** Compact row for a non-primary output ("ALSO PRODUCED"). */
|
||||
export function OutputRow({ item, creatorName }: OutputRowProps) {
|
||||
const filename = outputFilename(item);
|
||||
const meta = item.metadata;
|
||||
|
||||
const metaBits: string[] = [];
|
||||
if (meta) {
|
||||
metaBits.push(meta.contentType);
|
||||
metaBits.push(formatBytes(meta.byteSize));
|
||||
}
|
||||
if (creatorName) metaBits.push(creatorName);
|
||||
metaBits.push(relativeTime(item.createdAt));
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2.5 rounded-md border border-border bg-card p-2">
|
||||
<OutputFileTile contentType={meta?.contentType} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium text-foreground" title={filename}>
|
||||
{filename}
|
||||
</p>
|
||||
<p
|
||||
className={cn(
|
||||
"truncate text-[11px]",
|
||||
item.degraded ? "text-destructive" : "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{item.degraded ? "File details unavailable" : metaBits.join(" · ")}
|
||||
</p>
|
||||
</div>
|
||||
{meta ? (
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<Button asChild variant="ghost" size="icon-sm" title="Open in new tab">
|
||||
<a href={meta.openPath} target="_blank" rel="noreferrer" aria-label={`Open ${filename}`}>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button asChild variant="ghost" size="icon-sm" title="Download">
|
||||
<a href={meta.downloadPath} aria-label={`Download ${filename}`}>
|
||||
<Download className="h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface OutputVideoPlayerProps {
|
||||
src: string;
|
||||
poster?: string | null;
|
||||
className?: string;
|
||||
/** Accessible label, typically the filename. */
|
||||
title?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Thin wrapper around the native HTML5 `<video>` element with sensible
|
||||
* defaults for issue outputs. We deliberately rely on the browser's native
|
||||
* controls (play/pause/scrub/fullscreen/PiP) rather than building a custom
|
||||
* scrubber — the backend serves byte ranges so seeking works.
|
||||
*
|
||||
* A fixed 16:9 box reserves height before metadata loads to avoid layout jump.
|
||||
*/
|
||||
export function OutputVideoPlayer({ src, poster, className, title }: OutputVideoPlayerProps) {
|
||||
return (
|
||||
<div className={cn("relative w-full overflow-hidden rounded-md bg-black aspect-video", className)}>
|
||||
<video
|
||||
src={src}
|
||||
poster={poster ?? undefined}
|
||||
controls
|
||||
preload="metadata"
|
||||
playsInline
|
||||
aria-label={title ? `Video output: ${title}` : "Video output"}
|
||||
className="absolute inset-0 h-full w-full"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user