feat(ui): add company Artifacts page, grid, cards, and deep-link anchors

Implements the Artifacts UI from the PAP-10353 plan (PAP-10359):

- Add /{prefix}/artifacts route, unprefixed redirect, and board-route
  prefix handling consistent with Issues/Goals; breadcrumbs + sidebar
  item (Package icon) directly below Goals.
- Add artifactsApi client for GET /companies/:id/artifacts with kind /
  project / search / pagination params and envelope normalization.
- Responsive grid (1/2/3 cols) with stable fixed-aspect preview cards
  for image, video, text/document, file, and empty variants; truncated
  title, issue context, last-edited time, open/download actions.
- Card click-through deep-links to the artifact in its issue context.
  Add stable scroll-mt anchors for work products (#work-product-<id>)
  and direct attachments (#attachment-<id>), plus an IssueDetail scroll
  + highlight handler. Document anchors already handled.
- Tests for routing, API client, card variants, and sidebar ordering;
  Storybook story covering the grid and empty states.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/App.tsx

@@ -22,6 +22,7 @@ import { RoutineDetail } from "./pages/RoutineDetail";
 import { UserProfile } from "./pages/UserProfile";
 import { ExecutionWorkspaceDetail } from "./pages/ExecutionWorkspaceDetail";
 import { Goals } from "./pages/Goals";
+import { Artifacts } from "./pages/Artifacts";
 import { GoalDetail } from "./pages/GoalDetail";
 import { Approvals } from "./pages/Approvals";
 import { ApprovalDetail } from "./pages/ApprovalDetail";
@@ -127,6 +128,7 @@ function boardRoutes() {
       <Route path="execution-workspaces/:workspaceId/routines" element={<ExecutionWorkspaceDetail />} />
       <Route path="goals" element={<Goals />} />
       <Route path="goals/:goalId" element={<GoalDetail />} />
+      <Route path="artifacts" element={<Artifacts />} />
       <Route path="approvals" element={<Navigate to="/approvals/pending" replace />} />
       <Route path="approvals/pending" element={<Approvals />} />
       <Route path="approvals/all" element={<Approvals />} />
@@ -307,6 +309,7 @@ export function App() {
           <Route path="issues/:issueId" element={<UnprefixedBoardRedirect />} />
           <Route path="routines" element={<UnprefixedBoardRedirect />} />
           <Route path="routines/:routineId" element={<UnprefixedBoardRedirect />} />
+          <Route path="artifacts" element={<UnprefixedBoardRedirect />} />
           <Route path="u/:userSlug" element={<UnprefixedBoardRedirect />} />
           <Route path="skills/*" element={<UnprefixedBoardRedirect />} />
           <Route path="settings" element={<LegacySettingsRedirect />} />

ui/src/api/artifacts.test.ts

@@ -0,0 +1,75 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mockApi = vi.hoisted(() => ({
+  get: vi.fn(),
+}));
+
+vi.mock("./client", () => ({
+  api: mockApi,
+}));
+
+import { artifactsApi, type CompanyArtifact } from "./artifacts";
+
+function sampleArtifact(overrides: Partial<CompanyArtifact> = {}): CompanyArtifact {
+  return {
+    id: "wp-1",
+    source: "work_product",
+    mediaKind: "video",
+    title: "Primary cut",
+    previewText: null,
+    contentType: "video/mp4",
+    contentPath: "/files/wp-1.mp4",
+    openPath: "/files/wp-1.mp4",
+    downloadPath: "/files/wp-1.mp4?download=1",
+    issue: { id: "issue-1", identifier: "PAP-10205", title: "Demo reel" },
+    project: { id: "proj-1", name: "Paperclip App" },
+    createdByAgent: { id: "agent-1", name: "ClaudeCoder" },
+    updatedAt: "2026-06-01T00:00:00.000Z",
+    href: "/issues/PAP-10205#work-product-wp-1",
+    ...overrides,
+  };
+}
+
+describe("artifactsApi.list", () => {
+  beforeEach(() => {
+    mockApi.get.mockReset();
+    mockApi.get.mockResolvedValue({ artifacts: [], nextCursor: null });
+  });
+
+  it("calls the company-scoped artifacts endpoint with no params", async () => {
+    await artifactsApi.list("company-1");
+    expect(mockApi.get).toHaveBeenCalledWith("/companies/company-1/artifacts");
+  });
+
+  it("omits the kind param when filtering by all", async () => {
+    await artifactsApi.list("company-1", { kind: "all" });
+    expect(mockApi.get).toHaveBeenCalledWith("/companies/company-1/artifacts");
+  });
+
+  it("serializes kind, project, search, and pagination params", async () => {
+    await artifactsApi.list("company-1", {
+      kind: "video",
+      projectId: "proj-1",
+      q: "demo reel",
+      limit: 24,
+      cursor: "abc",
+    });
+    expect(mockApi.get).toHaveBeenCalledWith(
+      "/companies/company-1/artifacts?kind=video&projectId=proj-1&q=demo+reel&limit=24&cursor=abc",
+    );
+  });
+
+  it("returns the envelope shape from the backend", async () => {
+    const artifact = sampleArtifact();
+    mockApi.get.mockResolvedValue({ artifacts: [artifact], nextCursor: "next" });
+    const result = await artifactsApi.list("company-1");
+    expect(result).toEqual({ artifacts: [artifact], nextCursor: "next" });
+  });
+
+  it("normalizes a bare array response into the envelope shape", async () => {
+    const artifact = sampleArtifact();
+    mockApi.get.mockResolvedValue([artifact]);
+    const result = await artifactsApi.list("company-1");
+    expect(result).toEqual({ artifacts: [artifact], nextCursor: null });
+  });
+});

ui/src/api/artifacts.ts

@@ -0,0 +1,105 @@
+import { api } from "./client";
+
+/**
+ * Company-level Artifacts client (PAP-10359).
+ *
+ * Talks to the company-scoped artifacts projection endpoint
+ * (`GET /api/companies/:companyId/artifacts`) defined by the approved
+ * Artifacts plan (PAP-10353). The endpoint flattens agent-produced issue
+ * documents, direct attachments, and `artifact` work products into a single
+ * card-ready list so the UI never has to stitch issue-specific endpoints
+ * together.
+ *
+ * The `CompanyArtifact` shape below is the shared contract from the plan. The
+ * backend projection task (PAP-10358) is expected to expose the same fields
+ * (and may also publish them through `@paperclipai/shared`); keeping a local
+ * definition lets the frontend build and test against the contract
+ * independently.
+ */
+
+export type ArtifactSource = "document" | "attachment" | "work_product";
+
+export type ArtifactMediaKind = "image" | "video" | "text" | "document" | "file" | "empty";
+
+export interface CompanyArtifactIssue {
+  id: string;
+  identifier: string;
+  title: string;
+}
+
+export interface CompanyArtifactProject {
+  id: string;
+  name: string;
+}
+
+export interface CompanyArtifactAgent {
+  id: string;
+  name: string;
+}
+
+export interface CompanyArtifact {
+  id: string;
+  source: ArtifactSource;
+  mediaKind: ArtifactMediaKind;
+  title: string;
+  previewText: string | null;
+  contentType: string | null;
+  contentPath: string | null;
+  openPath: string | null;
+  downloadPath: string | null;
+  issue: CompanyArtifactIssue;
+  project: CompanyArtifactProject | null;
+  createdByAgent: CompanyArtifactAgent | null;
+  updatedAt: string;
+  /** Board-relative or prefixed link to the artifact inside its issue context. */
+  href: string;
+}
+
+export interface CompanyArtifactsResponse {
+  artifacts: CompanyArtifact[];
+  nextCursor: string | null;
+}
+
+export type ArtifactKindFilter = ArtifactMediaKind | "all";
+
+export interface ListArtifactsParams {
+  kind?: ArtifactKindFilter;
+  projectId?: string;
+  q?: string;
+  limit?: number;
+  cursor?: string;
+}
+
+function buildArtifactsQuery(params?: ListArtifactsParams): string {
+  const search = new URLSearchParams();
+  if (params?.kind && params.kind !== "all") search.set("kind", params.kind);
+  if (params?.projectId) search.set("projectId", params.projectId);
+  if (params?.q) search.set("q", params.q);
+  if (params?.limit != null) search.set("limit", String(params.limit));
+  if (params?.cursor) search.set("cursor", params.cursor);
+  const qs = search.toString();
+  return qs ? `?${qs}` : "";
+}
+
+/**
+ * Normalize the endpoint response. The contract is an envelope
+ * (`{ artifacts, nextCursor }`), but we also tolerate a bare array so the page
+ * keeps working if the backend ships the simpler shape.
+ */
+function normalizeArtifactsResponse(
+  raw: CompanyArtifactsResponse | CompanyArtifact[],
+): CompanyArtifactsResponse {
+  if (Array.isArray(raw)) {
+    return { artifacts: raw, nextCursor: null };
+  }
+  return { artifacts: raw.artifacts ?? [], nextCursor: raw.nextCursor ?? null };
+}
+
+export const artifactsApi = {
+  list: async (companyId: string, params?: ListArtifactsParams): Promise<CompanyArtifactsResponse> => {
+    const raw = await api.get<CompanyArtifactsResponse | CompanyArtifact[]>(
+      `/companies/${companyId}/artifacts${buildArtifactsQuery(params)}`,
+    );
+    return normalizeArtifactsResponse(raw);
+  },
+};

ui/src/components/IssueAttachmentsSection.tsx

@@ -103,7 +103,7 @@ function MarkdownAttachmentCard({
   });
 
   return (
-    <div className="rounded-lg border border-border p-3">
+    <div id={`attachment-${attachment.id}`} className="scroll-mt-20 rounded-lg border border-border p-3">
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0">
           <div className="flex min-w-0 items-center gap-2">
@@ -142,7 +142,7 @@ function VideoAttachmentCard({
 }) {
   const filename = attachmentFilename(attachment);
   return (
-    <div className="overflow-hidden rounded-md border border-border bg-card">
+    <div id={`attachment-${attachment.id}`} className="scroll-mt-20 overflow-hidden rounded-md border border-border bg-card">
       <OutputVideoPlayer src={attachment.contentPath} title={filename} />
       <div className="flex flex-col gap-2 p-3 md:flex-row md:items-center md:justify-between">
         <div className="min-w-0">
@@ -166,7 +166,7 @@ function GenericAttachmentRow({
 }) {
   const filename = attachmentFilename(attachment);
   return (
-    <div className="flex items-center gap-2.5 rounded-md border border-border bg-card p-2">
+    <div id={`attachment-${attachment.id}`} className="flex scroll-mt-20 items-center gap-2.5 rounded-md border border-border bg-card p-2">
       <OutputFileTile contentType={attachment.contentType} />
       <div className="min-w-0 flex-1">
         <a
@@ -257,7 +257,8 @@ export function IssueAttachmentsSection({
           {imageAttachments.map((attachment) => (
             <div
               key={attachment.id}
-              className="group relative aspect-square cursor-pointer overflow-hidden rounded-lg border border-border bg-accent/10"
+              id={`attachment-${attachment.id}`}
+              className="group relative aspect-square cursor-pointer scroll-mt-20 overflow-hidden rounded-lg border border-border bg-accent/10"
               onClick={() => onImageClick(attachment)}
             >
               <img

ui/src/components/Sidebar.test.tsx

@@ -197,6 +197,25 @@ describe("Sidebar", () => {
     });
   });
 
+  it("shows an Artifacts nav item directly below Goals", async () => {
+    mockInstanceSettingsApi.getExperimental.mockResolvedValue({ enableIsolatedWorkspaces: false });
+    const root = await renderSidebar();
+
+    const artifactsLink = [...container.querySelectorAll("a")].find(
+      (anchor) => anchor.textContent === "Artifacts",
+    );
+    expect(artifactsLink?.getAttribute("href")).toBe("/artifacts");
+
+    const navText = container.querySelector("nav")?.textContent ?? "";
+    expect(navText).toContain("Goals");
+    expect(navText).toContain("Artifacts");
+    expect(navText.indexOf("Goals")).toBeLessThan(navText.indexOf("Artifacts"));
+
+    await act(async () => {
+      root.unmount();
+    });
+  });
+
   it("shows the Workspaces link when isolated workspaces are enabled", async () => {
     mockInstanceSettingsApi.getExperimental.mockResolvedValue({ enableIsolatedWorkspaces: true });
     const root = await renderSidebar();

ui/src/components/Sidebar.tsx

@@ -11,6 +11,7 @@ import {
   Boxes,
   Repeat,
   GitBranch,
+  Package,
   Settings,
 } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
@@ -97,6 +98,7 @@ export function Sidebar() {
           <SidebarNavItem to="/issues" label="Issues" icon={CircleDot} />
           <SidebarNavItem to="/routines" label="Routines" icon={Repeat} />
           <SidebarNavItem to="/goals" label="Goals" icon={Target} />
+          <SidebarNavItem to="/artifacts" label="Artifacts" icon={Package} />
           {showWorkspacesLink ? (
             <SidebarNavItem to="/workspaces" label="Workspaces" icon={GitBranch} />
           ) : null}

ui/src/components/artifacts/ArtifactCard.test.tsx

@@ -0,0 +1,109 @@
+import type { ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@/lib/router", () => ({
+  Link: ({ to, children, ...props }: { to: string; children: ReactNode }) => (
+    <a href={to} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+import { ArtifactCard } from "./ArtifactCard";
+import type { CompanyArtifact } from "@/api/artifacts";
+
+function makeArtifact(overrides: Partial<CompanyArtifact> = {}): CompanyArtifact {
+  return {
+    id: "art-1",
+    source: "attachment",
+    mediaKind: "image",
+    title: "Hero shot",
+    previewText: null,
+    contentType: "image/png",
+    contentPath: "/files/art-1.png",
+    openPath: "/files/art-1.png",
+    downloadPath: "/files/art-1.png?download=1",
+    issue: { id: "issue-1", identifier: "PAP-10306", title: "Landing visuals" },
+    project: { id: "proj-1", name: "Paperclip App" },
+    createdByAgent: { id: "agent-1", name: "ClaudeCoder" },
+    updatedAt: "2026-06-01T00:00:00.000Z",
+    href: "/issues/PAP-10306#attachment-art-1",
+    ...overrides,
+  };
+}
+
+describe("ArtifactCard", () => {
+  it("renders an image preview with cover image and links to the issue anchor", () => {
+    const markup = renderToStaticMarkup(<ArtifactCard artifact={makeArtifact()} />);
+    expect(markup).toContain('href="/issues/PAP-10306#attachment-art-1"');
+    expect(markup).toContain('data-media-kind="image"');
+    expect(markup).toContain('src="/files/art-1.png"');
+    expect(markup).toContain("object-cover");
+    expect(markup).toContain("Hero shot");
+    expect(markup).toContain("PAP-10306");
+  });
+
+  it("renders a video preview with a video element and play glyph", () => {
+    const markup = renderToStaticMarkup(
+      <ArtifactCard
+        artifact={makeArtifact({ mediaKind: "video", contentType: "video/mp4", contentPath: "/files/clip.mp4" })}
+      />,
+    );
+    expect(markup).toContain('data-media-kind="video"');
+    expect(markup).toContain("<video");
+    expect(markup).toContain('preload="metadata"');
+  });
+
+  it("renders a falling-back video placeholder when no content path exists", () => {
+    const markup = renderToStaticMarkup(
+      <ArtifactCard artifact={makeArtifact({ mediaKind: "video", contentPath: null })} />,
+    );
+    expect(markup).toContain('data-media-kind="video"');
+    expect(markup).not.toContain("<video");
+  });
+
+  it("renders a document preview excerpt", () => {
+    const markup = renderToStaticMarkup(
+      <ArtifactCard
+        artifact={makeArtifact({
+          source: "document",
+          mediaKind: "document",
+          contentType: "text/markdown",
+          contentPath: null,
+          previewText: "This is the plan preview excerpt.",
+        })}
+      />,
+    );
+    expect(markup).toContain('data-media-kind="document"');
+    expect(markup).toContain("This is the plan preview excerpt.");
+  });
+
+  it("renders a placeholder for empty artifacts without an image or video", () => {
+    const markup = renderToStaticMarkup(
+      <ArtifactCard
+        artifact={makeArtifact({ mediaKind: "empty", contentType: null, contentPath: null, previewText: null })}
+      />,
+    );
+    expect(markup).toContain('data-media-kind="empty"');
+    expect(markup).not.toContain("<img");
+    expect(markup).not.toContain("<video");
+  });
+
+  it("omits open/download actions when no file paths exist (e.g. documents)", () => {
+    const markup = renderToStaticMarkup(
+      <ArtifactCard
+        artifact={makeArtifact({
+          source: "document",
+          mediaKind: "document",
+          contentPath: null,
+          openPath: null,
+          downloadPath: null,
+          previewText: "Plan body",
+        })}
+      />,
+    );
+    expect(markup).not.toContain('aria-label="Download file"');
+    expect(markup).not.toContain('aria-label="Open file in new tab"');
+  });
+});

ui/src/components/artifacts/ArtifactCard.tsx

@@ -0,0 +1,194 @@
+import { useState } from "react";
+import { Download, ExternalLink, FileText, Paperclip, Play } from "lucide-react";
+import type { CompanyArtifact } from "@/api/artifacts";
+import { Link } from "@/lib/router";
+import { cn, relativeTime } from "@/lib/utils";
+
+interface ArtifactCardProps {
+  artifact: CompanyArtifact;
+}
+
+/**
+ * Stable, fixed-height preview region shared by every card variant. The fixed
+ * aspect ratio is what keeps image / video / text / placeholder cards from
+ * shifting layout as previews load (or fail to load).
+ */
+function PreviewFrame({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <div className={cn("relative aspect-video w-full overflow-hidden bg-accent/20", className)}>
+      {children}
+    </div>
+  );
+}
+
+function PlaceholderPreview({ label }: { label?: string }) {
+  return (
+    <PreviewFrame className="flex items-center justify-center">
+      <div className="flex flex-col items-center gap-1.5 text-muted-foreground/50">
+        <Paperclip className="h-7 w-7" aria-hidden="true" />
+        {label ? <span className="text-[11px] font-medium uppercase tracking-wide">{label}</span> : null}
+      </div>
+    </PreviewFrame>
+  );
+}
+
+function ImagePreview({ artifact }: { artifact: CompanyArtifact }) {
+  const [errored, setErrored] = useState(false);
+  if (errored || !artifact.contentPath) {
+    return <PlaceholderPreview label="Image" />;
+  }
+  return (
+    <PreviewFrame>
+      <img
+        src={artifact.contentPath}
+        alt={artifact.title}
+        loading="lazy"
+        className="h-full w-full object-cover"
+        onError={() => setErrored(true)}
+      />
+    </PreviewFrame>
+  );
+}
+
+function VideoPreview({ artifact }: { artifact: CompanyArtifact }) {
+  const [errored, setErrored] = useState(false);
+  if (errored || !artifact.contentPath) {
+    return (
+      <PreviewFrame className="flex items-center justify-center bg-black/80">
+        <div className="flex h-11 w-11 items-center justify-center rounded-full bg-white/15">
+          <Play className="h-5 w-5 translate-x-0.5 text-white" aria-hidden="true" />
+        </div>
+      </PreviewFrame>
+    );
+  }
+  return (
+    <PreviewFrame className="bg-black">
+      <video
+        src={artifact.contentPath}
+        preload="metadata"
+        muted
+        playsInline
+        className="h-full w-full object-contain"
+        onError={() => setErrored(true)}
+      />
+      <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+        <div className="flex h-11 w-11 items-center justify-center rounded-full bg-black/55">
+          <Play className="h-5 w-5 translate-x-0.5 text-white" aria-hidden="true" />
+        </div>
+      </div>
+    </PreviewFrame>
+  );
+}
+
+function TextPreview({ artifact }: { artifact: CompanyArtifact }) {
+  const preview = artifact.previewText?.trim();
+  if (!preview) {
+    return <PlaceholderPreview label={artifact.source === "document" ? "Document" : "Text"} />;
+  }
+  return (
+    <PreviewFrame className="bg-card">
+      <div className="absolute inset-0 overflow-hidden p-3">
+        <p className="whitespace-pre-wrap break-words text-[11px] leading-5 text-muted-foreground">
+          {preview}
+        </p>
+      </div>
+      <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-card to-transparent" />
+      <div className="absolute left-2 top-2 flex h-6 w-6 items-center justify-center rounded bg-accent/40">
+        <FileText className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
+      </div>
+    </PreviewFrame>
+  );
+}
+
+function ArtifactPreview({ artifact }: { artifact: CompanyArtifact }) {
+  switch (artifact.mediaKind) {
+    case "image":
+      return <ImagePreview artifact={artifact} />;
+    case "video":
+      return <VideoPreview artifact={artifact} />;
+    case "text":
+    case "document":
+      return <TextPreview artifact={artifact} />;
+    case "file":
+      return <PlaceholderPreview label="File" />;
+    case "empty":
+    default:
+      return <PlaceholderPreview />;
+  }
+}
+
+function SecondaryAction({
+  href,
+  download,
+  title,
+  children,
+}: {
+  href: string;
+  download?: boolean;
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <a
+      href={href}
+      {...(download ? { download: "" } : { target: "_blank", rel: "noreferrer" })}
+      title={title}
+      aria-label={title}
+      onClick={(event) => event.stopPropagation()}
+      className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+    >
+      {children}
+    </a>
+  );
+}
+
+export function ArtifactCard({ artifact }: ArtifactCardProps) {
+  return (
+    <Link
+      to={artifact.href}
+      data-testid="artifact-card"
+      data-media-kind={artifact.mediaKind}
+      className="group flex flex-col overflow-hidden rounded-lg border border-border bg-card transition-colors hover:border-foreground/20"
+    >
+      <ArtifactPreview artifact={artifact} />
+
+      <div className="flex flex-1 flex-col gap-1 p-3">
+        <div className="flex items-start justify-between gap-2">
+          <h3 className="truncate text-sm font-medium text-foreground" title={artifact.title}>
+            {artifact.title}
+          </h3>
+          <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
+            {artifact.openPath ? (
+              <SecondaryAction href={artifact.openPath} title="Open file in new tab">
+                <ExternalLink className="h-3.5 w-3.5" />
+              </SecondaryAction>
+            ) : null}
+            {artifact.downloadPath ? (
+              <SecondaryAction href={artifact.downloadPath} download title="Download file">
+                <Download className="h-3.5 w-3.5" />
+              </SecondaryAction>
+            ) : null}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
+          <span className="shrink-0 font-medium text-muted-foreground">{artifact.issue.identifier}</span>
+          <span className="text-muted-foreground/50">·</span>
+          <span className="truncate" title={artifact.issue.title}>
+            {artifact.issue.title}
+          </span>
+        </div>
+
+        <div className="mt-0.5 flex items-center gap-1.5 text-[11px] text-muted-foreground/80">
+          <span>Edited {relativeTime(artifact.updatedAt)}</span>
+          {artifact.createdByAgent ? (
+            <>
+              <span className="text-muted-foreground/50">·</span>
+              <span className="truncate">{artifact.createdByAgent.name}</span>
+            </>
+          ) : null}
+        </div>
+      </div>
+    </Link>
+  );
+}

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

@@ -34,13 +34,19 @@ export function IssueOutputSection({ workProducts, resolveCreatorName }: IssueOu
         <span className="text-xs text-muted-foreground">{count}</span>
       </div>
 
-      <OutputPrimaryCard item={primary} creatorName={creatorFor(primary)} />
+      {/* 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)} />
+      </div>
 
       {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 key={item.id} id={`work-product-${item.id}`} className="scroll-mt-20">
+              <OutputRow item={item} creatorName={creatorFor(item)} />
+            </div>
           ))}
         </div>
       )}

ui/src/lib/company-routes.test.ts

@@ -64,4 +64,22 @@ describe("company routes", () => {
       "/teams-catalog/core-exec-team",
     );
   });
+
+  it("treats /artifacts as a board route that needs a company prefix", () => {
+    expect(isBoardPathWithoutPrefix("/artifacts")).toBe(true);
+    expect(extractCompanyPrefixFromPath("/artifacts")).toBeNull();
+    expect(applyCompanyPrefix("/artifacts", "PAP")).toBe("/PAP/artifacts");
+    expect(toCompanyRelativePath("/PAP/artifacts")).toBe("/artifacts");
+  });
+
+  it("preserves artifact deep-link anchors when applying the company prefix", () => {
+    expect(applyCompanyPrefix("/issues/PAP-10205#work-product-wp-1", "PAP")).toBe(
+      "/PAP/issues/PAP-10205#work-product-wp-1",
+    );
+    expect(applyCompanyPrefix("/issues/PAP-10306#attachment-att-1", "PAP")).toBe(
+      "/PAP/issues/PAP-10306#attachment-att-1",
+    );
+    // Already-prefixed paths are returned untouched.
+    expect(applyCompanyPrefix("/PAP/artifacts", "PAP")).toBe("/PAP/artifacts");
+  });
 });

ui/src/lib/company-routes.ts

@@ -12,6 +12,7 @@ const BOARD_ROUTE_ROOTS = new Set([
   "issues",
   "routines",
   "goals",
+  "artifacts",
   "approvals",
   "costs",
   "usage",

ui/src/lib/queryKeys.ts

@@ -116,6 +116,10 @@ export const queryKeys = {
     list: (companyId: string) => ["goals", companyId] as const,
     detail: (id: string) => ["goals", "detail", id] as const,
   },
+  artifacts: {
+    list: (companyId: string, kind?: string, q?: string) =>
+      ["artifacts", companyId, kind ?? "all", q ?? ""] as const,
+  },
   budgets: {
     overview: (companyId: string) => ["budgets", "overview", companyId] as const,
   },

ui/src/pages/Artifacts.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Package } from "lucide-react";
+import { artifactsApi, type ArtifactKindFilter } from "../api/artifacts";
+import { useCompany } from "../context/CompanyContext";
+import { useBreadcrumbs } from "../context/BreadcrumbContext";
+import { queryKeys } from "../lib/queryKeys";
+import { EmptyState } from "../components/EmptyState";
+import { PageSkeleton } from "../components/PageSkeleton";
+import { ArtifactCard } from "../components/artifacts/ArtifactCard";
+import { cn } from "@/lib/utils";
+
+const KIND_FILTERS: { value: ArtifactKindFilter; label: string }[] = [
+  { value: "all", label: "All" },
+  { value: "image", label: "Images" },
+  { value: "video", label: "Videos" },
+  { value: "document", label: "Documents" },
+  { value: "text", label: "Text" },
+  { value: "file", label: "Files" },
+];
+
+export function Artifacts() {
+  const { selectedCompanyId } = useCompany();
+  const { setBreadcrumbs } = useBreadcrumbs();
+  const [kind, setKind] = useState<ArtifactKindFilter>("all");
+
+  useEffect(() => {
+    setBreadcrumbs([{ label: "Artifacts" }]);
+  }, [setBreadcrumbs]);
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: queryKeys.artifacts.list(selectedCompanyId!, kind),
+    queryFn: () => artifactsApi.list(selectedCompanyId!, { kind }),
+    enabled: !!selectedCompanyId,
+  });
+
+  if (!selectedCompanyId) {
+    return <EmptyState icon={Package} message="Select a company to view artifacts." />;
+  }
+
+  const artifacts = data?.artifacts ?? [];
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-1">
+        <p className="text-sm text-muted-foreground">
+          Work your agents have produced — documents, media, and files — across this company's issues.
+        </p>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-1.5" role="tablist" aria-label="Filter artifacts by type">
+        {KIND_FILTERS.map((filter) => (
+          <button
+            key={filter.value}
+            type="button"
+            role="tab"
+            aria-selected={kind === filter.value}
+            onClick={() => setKind(filter.value)}
+            className={cn(
+              "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
+              kind === filter.value
+                ? "bg-accent text-foreground"
+                : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+            )}
+          >
+            {filter.label}
+          </button>
+        ))}
+      </div>
+
+      {error && <p className="text-sm text-destructive">{error.message}</p>}
+
+      {isLoading ? (
+        <PageSkeleton variant="list" />
+      ) : artifacts.length === 0 ? (
+        <EmptyState
+          icon={Package}
+          message={
+            kind === "all"
+              ? "No artifacts yet. Agent-produced documents, media, and files will appear here."
+              : "No artifacts of this type yet."
+          }
+        />
+      ) : (
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {artifacts.map((artifact) => (
+            <ArtifactCard key={`${artifact.source}:${artifact.id}`} artifact={artifact} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

ui/src/pages/IssueDetail.tsx

@@ -2872,6 +2872,37 @@ export function IssueDetail() {
     setHandoffFocusSignal((current) => current + 1);
   }, [location.hash]);
 
+  // Scroll + briefly highlight work-product / direct-attachment anchors so the
+  // company Artifacts page (PAP-10359) can deep-link to a specific artifact in
+  // its issue context. Retries while the section data loads in.
+  useEffect(() => {
+    const match = location.hash.match(/^#(work-product|attachment)-(.+)$/);
+    if (!match) return;
+    const targetId = `${match[1]}-${decodeURIComponent(match[2]!)}`;
+    let cancelled = false;
+    let attempts = 0;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const tryScroll = () => {
+      if (cancelled) return;
+      const element = document.getElementById(targetId);
+      if (!element) {
+        if (attempts < 30) {
+          attempts += 1;
+          timer = setTimeout(tryScroll, 100);
+        }
+        return;
+      }
+      element.scrollIntoView({ behavior: "smooth", block: "center" });
+      element.classList.add("ring-2", "ring-primary/50", "transition-shadow");
+      timer = setTimeout(() => element.classList.remove("ring-2", "ring-primary/50"), 3000);
+    };
+    tryScroll();
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+    };
+  }, [location.hash, workProducts, attachments]);
+
   useEffect(() => {
     if (pendingCommentComposerFocusKey === 0) return;
     if (detailTab !== "chat") return;

ui/storybook/stories/artifacts.stories.tsx

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Package } from "lucide-react";
+import { ArtifactCard } from "@/components/artifacts/ArtifactCard";
+import { EmptyState } from "@/components/EmptyState";
+import type { CompanyArtifact } from "@/api/artifacts";
+
+/**
+ * Storybook coverage for the company Artifacts page (PAP-10359). Renders the
+ * responsive three-column grid and every preview card variant with mock data so
+ * UX/QA can review the layout and capture desktop/mobile screenshots without a
+ * live backend.
+ */
+
+const SAMPLE_IMAGE =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent(
+    `<svg xmlns='http://www.w3.org/2000/svg' width='480' height='270'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#6366f1'/><stop offset='1' stop-color='#22d3ee'/></linearGradient></defs><rect width='480' height='270' fill='url(#g)'/><text x='50%' y='52%' font-family='sans-serif' font-size='28' fill='white' text-anchor='middle'>Hero render.png</text></svg>`,
+  );
+
+function makeArtifact(overrides: Partial<CompanyArtifact>): CompanyArtifact {
+  return {
+    id: "art",
+    source: "attachment",
+    mediaKind: "image",
+    title: "Artifact",
+    previewText: null,
+    contentType: null,
+    contentPath: null,
+    openPath: null,
+    downloadPath: null,
+    issue: { id: "issue-1", identifier: "PAP-10306", title: "Landing visuals refresh" },
+    project: { id: "proj-1", name: "Paperclip App" },
+    createdByAgent: { id: "agent-1", name: "ClaudeCoder" },
+    updatedAt: new Date("2026-06-04T12:00:00Z").toISOString(),
+    href: "/issues/PAP-10306#attachment-art",
+    ...overrides,
+  };
+}
+
+const ARTIFACTS: CompanyArtifact[] = [
+  makeArtifact({
+    id: "wp-video",
+    source: "work_product",
+    mediaKind: "video",
+    title: "Product demo — primary cut.mp4",
+    contentType: "video/mp4",
+    contentPath: null, // exercises the calm video placeholder + play glyph
+    openPath: "/files/demo.mp4",
+    downloadPath: "/files/demo.mp4?download=1",
+    issue: { id: "issue-2", identifier: "PAP-10205", title: "Record the launch walkthrough" },
+    href: "/issues/PAP-10205#work-product-wp-video",
+  }),
+  makeArtifact({
+    id: "img-hero",
+    mediaKind: "image",
+    title: "Hero render.png",
+    contentType: "image/png",
+    contentPath: SAMPLE_IMAGE,
+    openPath: SAMPLE_IMAGE,
+    downloadPath: SAMPLE_IMAGE,
+  }),
+  makeArtifact({
+    id: "doc-plan",
+    source: "document",
+    mediaKind: "document",
+    title: "Artifacts Page Plan",
+    previewText:
+      "Build a company-level Artifacts page at /{companyPrefix}/artifacts, with a sidebar item below Goals and a three-column artifact grid. The page should make agent-produced work easy to find without becoming another attachment dump.",
+    contentType: "text/markdown",
+    issue: { id: "issue-3", identifier: "PAP-10341", title: "Draft the rollout plan" },
+    createdByAgent: { id: "agent-2", name: "CodexCoder" },
+    href: "/issues/PAP-10341#document-plan",
+  }),
+  makeArtifact({
+    id: "txt-notes",
+    mediaKind: "text",
+    title: "review-notes.txt",
+    previewText:
+      "Reviewed the primary cut. Color grade looks good; trim the first 1.2s of dead air. Re-export at 1080p and attach the final to the issue.",
+    contentType: "text/plain",
+    openPath: "/files/review-notes.txt",
+    downloadPath: "/files/review-notes.txt?download=1",
+    issue: { id: "issue-2", identifier: "PAP-10205", title: "Record the launch walkthrough" },
+  }),
+  makeArtifact({
+    id: "file-zip",
+    mediaKind: "file",
+    title: "design-assets.zip",
+    contentType: "application/zip",
+    openPath: "/files/design-assets.zip",
+    downloadPath: "/files/design-assets.zip?download=1",
+    issue: { id: "issue-1", identifier: "PAP-10306", title: "Landing visuals refresh" },
+  }),
+  makeArtifact({
+    id: "img-broken",
+    mediaKind: "image",
+    title: "missing-preview.png (broken source)",
+    contentType: "image/png",
+    contentPath: "/files/does-not-exist.png", // exercises the onError image fallback
+    openPath: "/files/does-not-exist.png",
+    downloadPath: "/files/does-not-exist.png?download=1",
+  }),
+];
+
+function ArtifactsGrid({ artifacts }: { artifacts: CompanyArtifact[] }) {
+  return (
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {artifacts.map((artifact) => (
+        <ArtifactCard key={`${artifact.source}:${artifact.id}`} artifact={artifact} />
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta = {
+  title: "Pages/Artifacts",
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Grid: Story = {
+  render: () => (
+    <div className="mx-auto max-w-6xl space-y-4 p-6">
+      <p className="text-sm text-muted-foreground">
+        Work your agents have produced — documents, media, and files — across this company's issues.
+      </p>
+      <ArtifactsGrid artifacts={ARTIFACTS} />
+    </div>
+  ),
+};
+
+export const Empty: Story = {
+  render: () => (
+    <div className="mx-auto max-w-6xl p-6">
+      <EmptyState
+        icon={Package}
+        message="No artifacts yet. Agent-produced documents, media, and files will appear here."
+      />
+    </div>
+  ),
+};