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,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();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
+10
-6
@@ -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 ? (
|
||||
|
||||
Reference in New Issue
Block a user