Polish artifacts card metadata

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

@@ -3,8 +3,17 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it, vi } from "vitest";
 
 vi.mock("@/lib/router", () => ({
-  Link: ({ to, children, ...props }: { to: string; children: ReactNode }) => (
-    <a href={to} {...props}>
+  Link: ({
+    to,
+    children,
+    disableIssueQuicklook,
+    ...props
+  }: {
+    to: string;
+    children: ReactNode;
+    disableIssueQuicklook?: boolean;
+  }) => (
+    <a href={to} data-disable-issue-quicklook={disableIssueQuicklook ? "true" : undefined} {...props}>
       {children}
     </a>
   ),
@@ -37,11 +46,33 @@ 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("PAP-10306");
+    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", () => {
@@ -77,6 +108,11 @@ describe("ArtifactCard", () => {
     );
     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", () => {

ui/src/components/artifacts/ArtifactCard.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
-import { Download, ExternalLink, FileText, Paperclip, Play } from "lucide-react";
+import { Download, ExternalLink, Paperclip, Play } from "lucide-react";
 import type { CompanyArtifact } from "@/api/artifacts";
 import { Link } from "@/lib/router";
-import { cn, relativeTime } from "@/lib/utils";
+import { cn, formatDate } from "@/lib/utils";
 
 interface ArtifactCardProps {
   artifact: CompanyArtifact;
@@ -88,14 +88,11 @@ function TextPreview({ artifact }: { artifact: CompanyArtifact }) {
   return (
     <PreviewFrame className="bg-card">
       <div className="absolute inset-0 overflow-hidden p-3">
-        <p className="whitespace-pre-wrap break-words text-[11px] leading-5 text-muted-foreground">
+        <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" />
-      <div className="absolute left-2 top-2 flex h-6 w-6 items-center justify-center rounded bg-accent/40">
-        <FileText className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
-      </div>
     </PreviewFrame>
   );
 }
@@ -146,15 +143,16 @@ 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-lg border border-border bg-card transition-colors hover:border-foreground/20"
+      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 items-start justify-between gap-2">
-          <h3 className="truncate text-sm font-medium text-foreground" title={artifact.title}>
+          <h3 className="truncate text-sm font-medium 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">
@@ -171,16 +169,8 @@ export function ArtifactCard({ artifact }: ArtifactCardProps) {
           </div>
         </div>
 
-        <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
-          <span className="shrink-0 font-medium text-muted-foreground">{artifact.issue.identifier}</span>
-          <span className="text-muted-foreground/50">·</span>
-          <span className="truncate" title={artifact.issue.title}>
-            {artifact.issue.title}
-          </span>
-        </div>
-
-        <div className="mt-0.5 flex items-center gap-1.5 text-[11px] text-muted-foreground/80">
-          <span>Edited {relativeTime(artifact.updatedAt)}</span>
+        <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>

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

@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { Package } from "lucide-react";
+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";
@@ -9,6 +9,10 @@ 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" },
@@ -23,49 +27,103 @@ 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]);
 
-  const { data, isLoading, error } = useQuery({
-    queryKey: queryKeys.artifacts.list(selectedCompanyId!, kind),
-    queryFn: () => artifactsApi.list(selectedCompanyId!, { kind }),
+  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." />;
   }
 
-  const artifacts = data?.artifacts ?? [];
-
   return (
-    <div className="space-y-4">
-      <div className="space-y-1">
-        <p className="text-sm text-muted-foreground">
-          Work your agents have produced — documents, media, and files — across this company's issues.
-        </p>
-      </div>
+    <div className="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 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>}
@@ -76,17 +134,30 @@ export function Artifacts() {
         <EmptyState
           icon={Package}
           message={
-            kind === "all"
-              ? "No artifacts yet. Agent-produced documents, media, and files will appear here."
-              : "No artifacts of this type yet."
+            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-4 md:grid-cols-2 lg:grid-cols-3">
-          {artifacts.map((artifact) => (
-            <ArtifactCard key={`${artifact.source}:${artifact.id}`} artifact={artifact} />
-          ))}
-        </div>
+        <>
+          <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>
   );