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>
This commit is contained in:
Dotta
@@ -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>
|
||||
),
|
||||
};
|
||||
@@ -192,6 +192,7 @@ const fixtureResponse: CompanySearchResponse = {
|
||||
results: [...fixtureResults, ...fixtureAgents, ...fixtureProjects],
|
||||
countsByType: {
|
||||
issue: fixtureResults.length,
|
||||
artifact: 0,
|
||||
agent: fixtureAgents.length,
|
||||
project: fixtureProjects.length,
|
||||
},
|
||||
@@ -202,11 +203,12 @@ function ScopeTabsPreview({
|
||||
active,
|
||||
response,
|
||||
}: {
|
||||
active: "all" | "issues" | "comments" | "documents" | "agents" | "projects";
|
||||
active: "all" | "issues" | "comments" | "documents" | "artifacts" | "agents" | "projects";
|
||||
response: CompanySearchResponse;
|
||||
}) {
|
||||
const total =
|
||||
(response.countsByType.issue ?? 0) +
|
||||
(response.countsByType.artifact ?? 0) +
|
||||
(response.countsByType.agent ?? 0) +
|
||||
(response.countsByType.project ?? 0);
|
||||
const items: PageTabItem[] = [
|
||||
@@ -214,6 +216,7 @@ function ScopeTabsPreview({
|
||||
{ value: "issues", label: <ScopeTabLabel label="Issues" count={response.countsByType.issue} /> },
|
||||
{ value: "comments", label: <ScopeTabLabel label="Comments" count={response.results.filter((result) => result.matchedFields.includes("comment")).length} /> },
|
||||
{ value: "documents", label: <ScopeTabLabel label="Documents" count={response.results.filter((result) => result.matchedFields.includes("document")).length} /> },
|
||||
{ value: "artifacts", label: <ScopeTabLabel label="Artifacts" count={response.countsByType.artifact} /> },
|
||||
{ value: "agents", label: <ScopeTabLabel label="Agents" count={response.countsByType.agent} /> },
|
||||
{ value: "projects", label: <ScopeTabLabel label="Projects" count={response.countsByType.project} /> },
|
||||
];
|
||||
@@ -534,7 +537,7 @@ function SearchStories() {
|
||||
<div className="paperclip-story__label">/search</div>
|
||||
<h2 className="mt-1 text-lg font-semibold">No results state</h2>
|
||||
</div>
|
||||
<SearchPagePreview response={{ ...fixtureResponse, results: [], countsByType: { issue: 0, agent: 0, project: 0 } }} state="empty" query="ghostbuster" />
|
||||
<SearchPagePreview response={{ ...fixtureResponse, results: [], countsByType: { issue: 0, artifact: 0, agent: 0, project: 0 } }} state="empty" query="ghostbuster" />
|
||||
</section>
|
||||
|
||||
<section className="paperclip-story__frame overflow-hidden p-4">
|
||||
|
||||
Reference in New Issue
Block a user