Add company artifacts page (#7621)

## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work.
> - Operators need a way to inspect files and work products created by
agents across a company without opening each issue one by one.
> - The existing issue detail surfaces already show attachments and
outputs, but there was no company-level artifacts index or search-result
affordance for artifact-like records.
> - The backend needed a company-scoped artifacts projection API that
preserves issue/run attribution and safe links back to source records.
> - The UI needed a first-class Artifacts page, sidebar entry, reusable
artifact cards, and deep-link handling that keeps company prefixes
intact.
> - This pull request adds the company artifacts API and page, then
wires artifacts into search and issue output surfaces.
> - The benefit is a single place to browse, filter, and open generated
work products and attachments while preserving company boundaries.

## Linked Issues or Issue Description

Fixes #7622.

Feature request fields:

- Problem/motivation: company operators need a consolidated artifacts
surface for attachments and work products produced by agents.
- Proposed solution: add a company-scoped artifacts projection endpoint,
a board Artifacts route, reusable cards, sidebar navigation, and
artifact search integration.
- Alternatives considered: keep artifact discovery only on individual
issue pages; that forces operators to know the source issue before
finding generated outputs.
- Roadmap alignment: checked `ROADMAP.md`; this is a focused board
UI/API improvement and does not duplicate a listed roadmap item.

## What Changed

- Added shared artifact types and validators.
- Added a company-scoped artifact projection service/API with tests for
attachment/work-product attribution.
- Added Artifacts board UI route, API client, sidebar link, cards,
filters, and storybook coverage.
- Added artifact result handling to company search and issue
output/deep-link flows.
- Rebased the branch onto the latest `public-gh/master` state and
resolved the route-test conflict by preserving both upstream
team-catalog coverage and artifact route coverage.
- Fixed a local Sidebar test helper so it no longer depends on a
runtime-undefined `React.act` export in this dependency install.

## Verification

- `pnpm --filter @paperclipai/ui exec vitest run
src/components/artifacts/ArtifactCard.test.tsx src/api/artifacts.test.ts
src/lib/company-routes.test.ts`
- `pnpm --filter @paperclipai/ui exec vitest run
src/pages/Artifacts.test.tsx src/pages/Search.test.tsx
src/components/Sidebar.test.tsx`
- `pnpm exec vitest run
server/src/__tests__/company-artifacts-service.test.ts
server/src/__tests__/company-search-service.test.ts
server/src/__tests__/company-search-rate-limit-routes.test.ts
server/src/__tests__/issue-agent-mutation-ownership-routes.test.ts`
- Confirmed the PR diff does not include `pnpm-lock.yaml` or
`.github/workflows/*`.
- Duplicate search: no open PRs or issues found for `artifact page
ArtifactCard` in `paperclipai/paperclip`.

Screenshots are intentionally omitted per the internal task instruction
not to add design screenshots or images to this PR unless they are
specifically part of the work. I also attempted browser capture in this
runner, but `agent-browser` failed to launch Chrome and Playwright
Chromium is missing `libatk-1.0.so.0`.

## Risks

- Low-to-medium risk: this adds a new API projection and UI surface, so
attribution/link regressions could affect artifact navigation.
- Company scoping is covered in the new service/API tests.
- No database migrations are included.
- No lockfile or workflow changes are included.

> 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 with tool use and local command
execution. Exact hosted model identifier is not exposed in this 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 run tests locally and they pass
- [x] I have added or updated tests where applicable
- [ ] If this change affects the UI, I have included before/after
screenshots (intentionally omitted per task instruction; browser capture
unavailable in this runner)
- [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

---------

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,71 @@
+import { api } from "./client";
+import type {
+  CompanyArtifact,
+  CompanyArtifactMediaKind,
+  CompanyArtifactsResponse,
+} from "@paperclipai/shared";
+
+export type {
+  CompanyArtifact,
+  CompanyArtifactMediaKind as ArtifactMediaKind,
+  CompanyArtifactsResponse,
+  CompanyArtifactSource as ArtifactSource,
+} from "@paperclipai/shared";
+
+/**
+ * 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 is imported from `@paperclipai/shared` so the
+ * frontend and server stay synchronized as the contract evolves.
+ */
+
+export type ArtifactKindFilter = Exclude<CompanyArtifactMediaKind, "empty"> | "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

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 
-import { act } from "react";
 import type { ReactNode } from "react";
+import { flushSync } from "react-dom";
 import { createRoot } from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
@@ -90,14 +90,12 @@ vi.mock("./SidebarAgents", () => ({
   SidebarAgents: () => null,
 }));
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
-
 async function flushReact() {
-  await act(async () => {
+  for (let index = 0; index < 5; index += 1) {
     await Promise.resolve();
     await new Promise((resolve) => window.setTimeout(resolve, 0));
-  });
+  }
+  flushSync(() => {});
 }
 
 describe("Sidebar", () => {
@@ -109,7 +107,7 @@ describe("Sidebar", () => {
       defaultOptions: { queries: { retry: false } },
     });
 
-    await act(async () => {
+    flushSync(() => {
       root.render(
         <QueryClientProvider client={queryClient}>
           <Sidebar />
@@ -142,7 +140,7 @@ describe("Sidebar", () => {
     const workLinks = [...container.querySelectorAll("nav a")].map((anchor) => anchor.textContent?.trim());
     expect(workLinks).not.toContain("Search");
 
-    await act(async () => {
+    flushSync(() => {
       root.unmount();
     });
   });
@@ -159,7 +157,7 @@ describe("Sidebar", () => {
     expect(workSectionContainer?.textContent).toContain("Issues");
     expect(workSectionContainer?.textContent).toContain("Goals");
 
-    await act(async () => {
+    flushSync(() => {
       root.unmount();
     });
   });
@@ -181,7 +179,7 @@ describe("Sidebar", () => {
     expect(primaryNavText).toContain("Inbox");
     expect(primaryNavText).not.toContain("Plugin slot outlet");
 
-    await act(async () => {
+    flushSync(() => {
       root.unmount();
     });
   });
@@ -192,7 +190,26 @@ describe("Sidebar", () => {
 
     expect(container.textContent).not.toContain("Workspaces");
 
-    await act(async () => {
+    flushSync(() => {
+      root.unmount();
+    });
+  });
+
+  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"));
+
+    flushSync(() => {
       root.unmount();
     });
   });
@@ -204,7 +221,7 @@ describe("Sidebar", () => {
     const link = [...container.querySelectorAll("a")].find((anchor) => anchor.textContent === "Workspaces");
     expect(link?.getAttribute("href")).toBe("/workspaces");
 
-    await act(async () => {
+    flushSync(() => {
       root.unmount();
     });
   });

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,165 @@
+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,
+    disableIssueQuicklook,
+    ...props
+  }: {
+    to: string;
+    children: ReactNode;
+    disableIssueQuicklook?: boolean;
+  }) => (
+    <a href={to} data-disable-issue-quicklook={disableIssueQuicklook ? "true" : undefined} {...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-disable-issue-quicklook="true"');
+    expect(markup).toContain('data-media-kind="image"');
+    expect(markup).toContain("rounded-[8px]");
+    expect(markup).toContain('src="/files/art-1.png"');
+    expect(markup).toContain("object-cover");
+    expect(markup).toContain("Hero shot");
+    expect(markup).toContain("flex h-7 items-start justify-between gap-2");
+    expect(markup).toContain("leading-7");
+    expect(markup).toContain("Last edited Jun 1, 2026");
+    expect(markup).not.toContain("Landing visuals");
+    expect(markup).not.toContain("Edited ");
+  });
+
+  it("renders only the artifact subject and absolute metadata under the preview", () => {
+    const markup = renderToStaticMarkup(
+      <ArtifactCard
+        artifact={makeArtifact({
+          title: "Social launch clip",
+          issue: { id: "issue-2", identifier: "PAP-10370", title: "Make artifact page look like this" },
+          updatedAt: "2025-10-08T12:00:00.000Z",
+          createdByAgent: null,
+        })}
+      />,
+    );
+
+    expect(markup).toContain("Social launch clip");
+    expect(markup).toContain("Last edited Oct 8, 2025");
+    expect(markup).not.toContain("Make artifact page look like this");
+    expect(markup).not.toContain(">PAP-10370<");
+  });
+
+  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.");
+    expect(markup).toContain("text-base");
+    expect(markup).toContain("leading-6");
+    expect(markup).toContain("max-h-full");
+    expect(markup).toContain("overflow-hidden");
+    expect(markup).not.toContain('data-lucide="file-text"');
+  });
+
+  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"');
+  });
+
+  it("reserves the same title row height when file actions are absent", () => {
+    const markup = renderToStaticMarkup(
+      <ArtifactCard
+        artifact={makeArtifact({
+          openPath: null,
+          downloadPath: null,
+          createdByAgent: null,
+        })}
+      />,
+    );
+
+    expect(markup).toContain("flex h-7 items-start justify-between gap-2");
+    expect(markup).toContain("leading-7");
+    expect(markup).toContain("Last edited Jun 1, 2026");
+    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,187 @@
+import { useState } from "react";
+import { Download, ExternalLink, Paperclip, Play } from "lucide-react";
+import type { CompanyArtifact } from "@/api/artifacts";
+import { Link } from "@/lib/router";
+import { cn, formatDate } 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="max-h-full overflow-hidden whitespace-pre-wrap break-words text-base leading-6 text-muted-foreground/75">
+          {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" />
+    </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}
+      disableIssueQuicklook
+      data-testid="artifact-card"
+      data-media-kind={artifact.mediaKind}
+      className="group flex flex-col overflow-hidden rounded-[8px] 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 h-7 items-start justify-between gap-2">
+          <h3
+            className="min-w-0 flex-1 truncate text-sm font-medium leading-7 text-foreground/85"
+            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="mt-0.5 flex items-center gap-1.5 text-[11px] text-muted-foreground/65">
+          <span>Last edited {formatDate(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/components/search/SearchResultRow.tsx

@@ -1,5 +1,5 @@
 import { memo, type ComponentType, type SVGProps } from "react";
-import { Bot, FileText, Hexagon, MessageSquare, Quote } from "lucide-react";
+import { Bot, FileText, Hexagon, MessageSquare, Paperclip, Quote } from "lucide-react";
 import type { Agent, CompanySearchResult } from "@paperclipai/shared";
 import { Link } from "@/lib/router";
 import { cn } from "@/lib/utils";
@@ -15,6 +15,7 @@ type SnippetStyle = {
 const SNIPPET_STYLES: Record<string, SnippetStyle> = {
   comment: { Icon: MessageSquare, label: "Comment" },
   document: { Icon: FileText, label: "Doc" },
+  artifact: { Icon: Paperclip, label: "Artifact" },
   description: { Icon: Quote, label: "Description" },
 };
 
@@ -109,6 +110,55 @@ function SearchResultRowImpl({
     );
   }
 
+  if (result.type === "artifact") {
+    const artifact = result.artifact;
+    if (!artifact) return null;
+    const updated = formatRelativeTime(result.updatedAt ?? artifact.updatedAt);
+    return (
+      <Link
+        to={result.href}
+        disableIssueQuicklook
+        className={cn(ROW_BASE, "py-4", isActive && "bg-muted/40", className)}
+        data-result-type="artifact"
+      >
+        <Paperclip className="mt-1 h-4 w-4 shrink-0 text-muted-foreground" />
+        <div className="min-w-0 flex-1">
+          <div className="flex min-w-0 flex-wrap items-baseline gap-x-2.5 gap-y-1">
+            <span className="truncate text-sm font-medium text-foreground">{result.title}</span>
+            <span className="shrink-0 text-xs text-muted-foreground">
+              {artifact.issueIdentifier}
+            </span>
+          </div>
+          {result.snippet ? (
+            <SnippetLine
+              text={result.snippets[0]?.text ?? result.snippet}
+              highlights={result.snippets[0]?.highlights}
+              field="artifact"
+              fallbackLabel={result.sourceLabel ?? "Artifact"}
+              multiline
+            />
+          ) : null}
+          <div className="mt-1.5 flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground sm:hidden">
+            <span className="truncate">{artifact.issueTitle}</span>
+            {updated ? <span className="ml-auto shrink-0 tabular-nums">{updated}</span> : null}
+          </div>
+        </div>
+        <div className="ml-2 hidden shrink-0 flex-col items-end gap-2 sm:flex">
+          {updated ? <span className="text-xs tabular-nums text-muted-foreground">{updated}</span> : null}
+          {result.previewImageUrl ? (
+            <img
+              src={result.previewImageUrl}
+              alt=""
+              loading="lazy"
+              decoding="async"
+              className="h-[88px] w-[88px] shrink-0 rounded-md border border-border bg-muted object-cover"
+            />
+          ) : null}
+        </div>
+      </Link>
+    );
+  }
+
   const issue = result.issue;
   if (!issue) return null;
   const assigneeName = issue.assigneeAgentId

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

@@ -0,0 +1,231 @@
+// @vitest-environment jsdom
+
+import { flushSync } from "react-dom";
+import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Artifacts } from "./Artifacts";
+import type { CompanyArtifact } from "../api/artifacts";
+
+const companyState = vi.hoisted(() => ({
+  selectedCompanyId: "company-1",
+}));
+
+const breadcrumbState = vi.hoisted(() => ({
+  setBreadcrumbs: vi.fn(),
+}));
+
+const artifactsApiMock = vi.hoisted(() => ({
+  list: vi.fn(),
+}));
+
+vi.mock("../context/CompanyContext", () => ({
+  useCompany: () => companyState,
+}));
+
+vi.mock("../context/BreadcrumbContext", () => ({
+  useBreadcrumbs: () => breadcrumbState,
+}));
+
+vi.mock("../api/artifacts", () => ({
+  artifactsApi: artifactsApiMock,
+}));
+
+vi.mock("../components/artifacts/ArtifactCard", () => ({
+  ArtifactCard: ({ artifact }: { artifact: CompanyArtifact }) => (
+    <article data-testid="artifact-card">{artifact.title}</article>
+  ),
+}));
+
+type ObserverCallback = IntersectionObserverCallback;
+
+let latestObserverCallback: ObserverCallback | null = null;
+
+class MockIntersectionObserver {
+  readonly root = null;
+  readonly rootMargin = "";
+  readonly thresholds = [];
+
+  constructor(callback: ObserverCallback) {
+    latestObserverCallback = callback;
+  }
+
+  observe = vi.fn();
+  unobserve = vi.fn();
+  disconnect = vi.fn();
+  takeRecords = vi.fn(() => []);
+}
+
+function sampleArtifact(overrides: Partial<CompanyArtifact> = {}): CompanyArtifact {
+  return {
+    id: "artifact-1",
+    source: "document",
+    mediaKind: "document",
+    title: "Launch Brief",
+    previewText: "launch brief preview",
+    contentType: "text/markdown",
+    contentPath: null,
+    openPath: null,
+    downloadPath: null,
+    issue: { id: "issue-1", identifier: "PAP-42", title: "Ship launch" },
+    project: null,
+    createdByAgent: null,
+    updatedAt: "2026-06-01T00:00:00.000Z",
+    href: "/PAP/issues/PAP-42#document-brief",
+    ...overrides,
+  };
+}
+
+async function flush() {
+  await Promise.resolve();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+async function waitForAssertion(assertion: () => void, attempts = 50) {
+  let lastError: unknown;
+  for (let attempt = 0; attempt < attempts; attempt += 1) {
+    try {
+      assertion();
+      return;
+    } catch (error) {
+      lastError = error;
+      await flush();
+    }
+  }
+  throw lastError;
+}
+
+function renderArtifacts(container: HTMLDivElement) {
+  const root = createRoot(container);
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  flushSync(() => {
+    root.render(
+      <QueryClientProvider client={queryClient}>
+        <Artifacts />
+      </QueryClientProvider>,
+    );
+  });
+  return { root, queryClient };
+}
+
+describe("Artifacts page", () => {
+  let container: HTMLDivElement;
+  let originalIntersectionObserver: typeof IntersectionObserver | undefined;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    breadcrumbState.setBreadcrumbs.mockReset();
+    artifactsApiMock.list.mockReset();
+    latestObserverCallback = null;
+    originalIntersectionObserver = window.IntersectionObserver;
+    window.IntersectionObserver = MockIntersectionObserver as unknown as typeof IntersectionObserver;
+  });
+
+  afterEach(() => {
+    window.IntersectionObserver = originalIntersectionObserver as typeof IntersectionObserver;
+    container.remove();
+  });
+
+  it("debounces artifact search into the artifacts API", async () => {
+    artifactsApiMock.list
+      .mockResolvedValueOnce({ artifacts: [sampleArtifact()], nextCursor: null })
+      .mockResolvedValueOnce({ artifacts: [], nextCursor: null });
+
+    const { root } = renderArtifacts(container);
+
+    await waitForAssertion(() => {
+      expect(artifactsApiMock.list).toHaveBeenCalledWith("company-1", {
+        kind: "all",
+        q: undefined,
+        limit: 30,
+        cursor: undefined,
+      });
+    });
+
+    const input = container.querySelector('input[aria-label="Search artifacts"]') as HTMLInputElement;
+    expect(input).not.toBeNull();
+
+    flushSync(() => {
+      const nativeSetter = Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        "value",
+      )!.set!;
+      nativeSetter.call(input, "launch");
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+
+    await new Promise((resolve) => setTimeout(resolve, 300));
+
+    await waitForAssertion(() => {
+      expect(artifactsApiMock.list).toHaveBeenLastCalledWith("company-1", {
+        kind: "all",
+        q: "launch",
+        limit: 30,
+        cursor: undefined,
+      });
+    });
+
+    flushSync(() => {
+      root.unmount();
+    });
+  });
+
+  it("keeps the artifacts grid max-width constrained and left aligned", async () => {
+    artifactsApiMock.list.mockResolvedValue({ artifacts: [sampleArtifact()], nextCursor: null });
+
+    const { root } = renderArtifacts(container);
+
+    await waitForAssertion(() => {
+      expect(container.querySelector('[data-testid="artifact-card"]')).not.toBeNull();
+    });
+
+    const pageShell = container.firstElementChild as HTMLElement | null;
+    expect(pageShell?.className).toContain("max-w-6xl");
+    expect(pageShell?.className).not.toContain("mx-auto");
+
+    flushSync(() => {
+      root.unmount();
+    });
+  });
+
+  it("fetches the next artifact page when the sentinel intersects", async () => {
+    artifactsApiMock.list
+      .mockResolvedValueOnce({
+        artifacts: [sampleArtifact({ id: "artifact-1", title: "First Artifact" })],
+        nextCursor: "cursor-2",
+      })
+      .mockResolvedValueOnce({
+        artifacts: [sampleArtifact({ id: "artifact-2", title: "Second Artifact" })],
+        nextCursor: null,
+      });
+
+    const { root } = renderArtifacts(container);
+
+    await waitForAssertion(() => {
+      expect(container.textContent).toContain("First Artifact");
+      expect(latestObserverCallback).not.toBeNull();
+    });
+
+    latestObserverCallback?.(
+      [{ isIntersecting: true } as IntersectionObserverEntry],
+      {} as IntersectionObserver,
+    );
+
+    await waitForAssertion(() => {
+      expect(artifactsApiMock.list).toHaveBeenLastCalledWith("company-1", {
+        kind: "all",
+        q: undefined,
+        limit: 30,
+        cursor: "cursor-2",
+      });
+      expect(container.textContent).toContain("Second Artifact");
+    });
+
+    flushSync(() => {
+      root.unmount();
+    });
+  });
+});

ui/src/pages/Artifacts.tsx

@@ -0,0 +1,164 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { Package, Search, X } 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";
+import { Input } from "@/components/ui/input";
+
+const ARTIFACTS_PAGE_SIZE = 30;
+const SEARCH_DEBOUNCE_MS = 250;
+
+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");
+  const [draftQuery, setDraftQuery] = useState("");
+  const [query, setQuery] = useState("");
+  const loadMoreRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    setBreadcrumbs([{ label: "Artifacts" }]);
+  }, [setBreadcrumbs]);
+
+  useEffect(() => {
+    const handle = window.setTimeout(() => setQuery(draftQuery.trim()), SEARCH_DEBOUNCE_MS);
+    return () => window.clearTimeout(handle);
+  }, [draftQuery]);
+
+  const {
+    data,
+    isLoading,
+    isFetching,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage,
+    error,
+  } = useInfiniteQuery({
+    queryKey: queryKeys.artifacts.list(selectedCompanyId!, kind, query),
+    queryFn: ({ pageParam }) =>
+      artifactsApi.list(selectedCompanyId!, {
+        kind,
+        q: query || undefined,
+        limit: ARTIFACTS_PAGE_SIZE,
+        cursor: pageParam,
+      }),
+    enabled: !!selectedCompanyId,
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
+  });
+
+  useEffect(() => {
+    const target = loadMoreRef.current;
+    if (!target || !hasNextPage || isFetchingNextPage) return;
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        void fetchNextPage();
+      }
+    }, { rootMargin: "320px 0px" });
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
+
+  const artifacts = useMemo(() => data?.pages.flatMap((page) => page.artifacts) ?? [], [data]);
+  const searching = query.length > 0;
+
+  if (!selectedCompanyId) {
+    return <EmptyState icon={Package} message="Select a company to view artifacts." />;
+  }
+
+  return (
+    <div className="w-full max-w-6xl space-y-5">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="relative w-full sm:max-w-sm">
+          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={draftQuery}
+            onChange={(event) => setDraftQuery(event.currentTarget.value)}
+            placeholder="Search artifacts..."
+            aria-label="Search artifacts"
+            className="h-9 pl-9 pr-9 text-sm"
+          />
+          {draftQuery.length > 0 ? (
+            <button
+              type="button"
+              onClick={() => setDraftQuery("")}
+              aria-label="Clear artifact search"
+              className="absolute right-2 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          ) : null}
+        </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>
+      </div>
+
+      {error && <p className="text-sm text-destructive">{error.message}</p>}
+
+      {isLoading ? (
+        <PageSkeleton variant="list" />
+      ) : artifacts.length === 0 ? (
+        <EmptyState
+          icon={Package}
+          message={
+            searching
+              ? "No artifacts match this search."
+              : kind === "all"
+                ? "No artifacts yet. Outputs attached to issues will appear here."
+                : "No artifacts of this type yet."
+          }
+        />
+      ) : (
+        <>
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+            {artifacts.map((artifact) => (
+              <ArtifactCard key={`${artifact.source}:${artifact.id}`} artifact={artifact} />
+            ))}
+          </div>
+          <div ref={loadMoreRef} className="flex min-h-10 items-center justify-center pb-2 text-xs text-muted-foreground">
+            {isFetchingNextPage
+              ? "Loading more artifacts..."
+              : hasNextPage
+                ? null
+                : isFetching
+                  ? "Updating artifacts..."
+                  : null}
+          </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", "transition-shadow"), 3000);
+    };
+    tryScroll();
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+    };
+  }, [location.hash, workProducts, attachments]);
+
   useEffect(() => {
     if (pendingCommentComposerFocusKey === 0) return;
     if (detailTab !== "chat") return;

ui/src/pages/Search.test.tsx

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 
-import { act } from "react";
 import type { ReactNode } from "react";
+import { flushSync } from "react-dom";
 import { createRoot } from "react-dom/client";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -86,9 +86,8 @@ vi.mock("../components/Identity", () => ({
 (globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
 
 async function flush() {
-  await act(async () => {
-    await Promise.resolve();
-  });
+  await Promise.resolve();
+  await new Promise((resolve) => setTimeout(resolve, 0));
 }
 
 async function waitForAssertion(assertion: () => void, attempts = 50) {
@@ -110,7 +109,7 @@ function renderSearch(initialPath: string, container: HTMLDivElement, node?: Rea
   const queryClient = new QueryClient({
     defaultOptions: { queries: { retry: false } },
   });
-  act(() => {
+  flushSync(() => {
     root.render(
       <QueryClientProvider client={queryClient}>
         <MemoryRouter initialEntries={[initialPath]}>
@@ -170,7 +169,7 @@ describe("Search page", () => {
       scope: "all",
       limit: 20,
       offset: 0,
-      countsByType: { issue: 1, agent: 0, project: 0 },
+      countsByType: { issue: 1, artifact: 0, agent: 0, project: 0 },
       hasMore: false,
       results: [
         {
@@ -228,7 +227,72 @@ describe("Search page", () => {
       expect(container.textContent).toContain("1 result");
     });
 
-    act(() => {
+    flushSync(() => {
+      root.unmount();
+    });
+  });
+
+  it("renders artifact search results in the company search surface", async () => {
+    searchApiMock.search.mockResolvedValueOnce({
+      query: "launch brief",
+      normalizedQuery: "launch brief",
+      scope: "artifacts",
+      limit: 20,
+      offset: 0,
+      countsByType: { issue: 0, artifact: 1, agent: 0, project: 0 },
+      hasMore: false,
+      results: [
+        {
+          id: "document:artifact-1",
+          type: "artifact",
+          score: 140,
+          title: "Launch Artifact Brief",
+          href: "/PAP/issues/PAP-42#document-brief",
+          matchedFields: ["artifact"],
+          sourceLabel: "Artifact",
+          snippet: "launch brief preview text",
+          snippets: [
+            {
+              field: "artifact",
+              label: "Artifact",
+              text: "launch brief preview text",
+              highlights: [{ start: 0, end: 6 }],
+            },
+          ],
+          artifact: {
+            id: "document:artifact-1",
+            source: "document",
+            mediaKind: "document",
+            issueId: "issue-42",
+            issueIdentifier: "PAP-42",
+            issueTitle: "Ship launch artifacts",
+            projectId: null,
+            projectName: null,
+            updatedAt: new Date().toISOString(),
+          },
+          updatedAt: new Date().toISOString(),
+          previewImageUrl: null,
+        },
+      ],
+    });
+
+    const { root } = renderSearch("/search?q=launch+brief&scope=artifacts", container);
+
+    await waitForAssertion(() => {
+      expect(searchApiMock.search).toHaveBeenCalledWith("company-1", {
+        q: "launch brief",
+        scope: "artifacts",
+        limit: 20,
+      });
+    });
+
+    await waitForAssertion(() => {
+      expect(container.textContent).toContain("Launch Artifact Brief");
+      expect(container.textContent).toContain("PAP-42");
+      expect(container.textContent).toContain("launch brief preview text");
+    });
+
+    flushSync(() => {
       root.unmount();
     });
   });
@@ -240,7 +304,7 @@ describe("Search page", () => {
       scope: "all",
       limit: 20,
       offset: 0,
-      countsByType: { issue: 0, agent: 0, project: 0 },
+      countsByType: { issue: 0, artifact: 0, agent: 0, project: 0 },
       hasMore: false,
       results: [],
     });
@@ -250,7 +314,7 @@ describe("Search page", () => {
     const input = container.querySelector('input[aria-label="Search query"]') as HTMLInputElement;
     expect(input).not.toBeNull();
 
-    act(() => {
+    flushSync(() => {
       const nativeSetter = Object.getOwnPropertyDescriptor(
         HTMLInputElement.prototype,
         "value",
@@ -272,7 +336,7 @@ describe("Search page", () => {
       });
     });
 
-    act(() => {
+    flushSync(() => {
       root.unmount();
     });
   });
@@ -284,7 +348,7 @@ describe("Search page", () => {
       scope: "all",
       limit: 20,
       offset: 0,
-      countsByType: { issue: 1, agent: 0, project: 0 },
+      countsByType: { issue: 1, artifact: 0, agent: 0, project: 0 },
       hasMore: false,
       results: [
         {
@@ -326,7 +390,7 @@ describe("Search page", () => {
       expect(navigateMock).toHaveBeenCalledWith("/PAP/issues/PAP-3366", { replace: true });
     });
 
-    act(() => {
+    flushSync(() => {
       root.unmount();
     });
   });
@@ -338,7 +402,7 @@ describe("Search page", () => {
       scope: "comments",
       limit: 20,
       offset: 0,
-      countsByType: { issue: 0, agent: 0, project: 0 },
+      countsByType: { issue: 0, artifact: 0, agent: 0, project: 0 },
       hasMore: false,
       results: [],
     });
@@ -351,7 +415,7 @@ describe("Search page", () => {
       expect(container.textContent).toContain("Search all scopes");
     });
 
-    act(() => {
+    flushSync(() => {
       root.unmount();
     });
   });

ui/src/pages/Search.tsx

@@ -35,23 +35,26 @@ const SCOPE_LABELS: Record<CompanySearchScope, string> = {
   issues: "Issues",
   comments: "Comments",
   documents: "Documents",
+  artifacts: "Artifacts",
   agents: "Agents",
   projects: "Projects",
 };
 
-type SubGroupKey = "issues" | "comments" | "documents" | "agents" | "projects";
+type SubGroupKey = "issues" | "comments" | "documents" | "artifacts" | "agents" | "projects";
 
-const SUBGROUP_ORDER: SubGroupKey[] = ["issues", "comments", "documents", "agents", "projects"];
+const SUBGROUP_ORDER: SubGroupKey[] = ["issues", "comments", "documents", "artifacts", "agents", "projects"];
 
 const SUBGROUP_LABELS: Record<SubGroupKey, string> = {
   issues: "Issues",
   comments: "Comments",
   documents: "Documents",
+  artifacts: "Artifacts",
   agents: "Agents",
   projects: "Projects",
 };
 
 function classifyResult(result: CompanySearchResult): SubGroupKey {
+  if (result.type === "artifact") return "artifacts";
   if (result.type === "agent") return "agents";
   if (result.type === "project") return "projects";
   const matched = new Set(result.matchedFields);
@@ -261,7 +264,7 @@ export function Search() {
     return () => window.removeEventListener("keydown", handler);
   }, [focusInput]);
 
-  const counts = data?.countsByType ?? { issue: 0, agent: 0, project: 0 };
+  const counts = data?.countsByType ?? { issue: 0, artifact: 0, agent: 0, project: 0 };
   const totalResults = data?.results.length ?? 0;
 
   const tabItems = useMemo<PageTabItem[]>(() => {
@@ -276,8 +279,9 @@ export function Search() {
     const issuesTotal = counts.issue ?? 0;
     return COMPANY_SEARCH_SCOPES.map((value) => {
       let count: number | null = null;
-      if (value === "all") count = (counts.issue ?? 0) + (counts.agent ?? 0) + (counts.project ?? 0);
+      if (value === "all") count = (counts.issue ?? 0) + (counts.artifact ?? 0) + (counts.agent ?? 0) + (counts.project ?? 0);
       else if (value === "issues") count = issuesTotal;
+      else if (value === "artifacts") count = counts.artifact ?? 0;
       else if (value === "agents") count = counts.agent ?? 0;
       else if (value === "projects") count = counts.project ?? 0;
       return {
@@ -342,7 +346,7 @@ export function Search() {
                 }
               }
             }}
-            placeholder="Search issues, comments, documents, agents, projects…"
+            placeholder="Search issues, comments, documents, artifacts, agents, projects…"
             aria-label="Search query"
             className="h-10 pl-9 pr-20 text-sm"
           />
@@ -452,7 +456,7 @@ function SearchTabContent({
         <div>
           <h2 className="text-lg font-semibold">Type to search company memory.</h2>
           <p className="mt-1 text-sm text-muted-foreground">
-            Issues, comments, plan documents, agents, projects — same surface, ranked by relevance.
+            Issues, comments, plan documents, artifacts, agents, projects — same surface, ranked by relevance.
           </p>
         </div>
         {recentSearches.length > 0 ? (