forked from farhoodlabs/paperclip
Add full company search page (#5293)
## Thinking Path > - Paperclip orchestrates AI agents for zero-human companies. > - Operators need to find work, documents, agents, projects, comments, and activity across a company without jumping through separate surfaces. > - The existing Command-K flow was useful for fast navigation but not enough for deeper company-wide discovery. > - Search also needs company-scoped backend contracts, query cost controls, and indexed document matching so it stays safe as company data grows. > - This pull request adds a full company search API and a dedicated board search page that Command-K can hand off to. > - The benefit is a single searchable control-plane surface with richer result context, recents, highlights, and test coverage across server and UI behavior. ## What Changed - Added a company-scoped search endpoint/service with query validation, rate limiting, text matching, fuzzy title matching, and result typing shared through `@paperclipai/shared`. - Added idempotent search migrations for document search indexes and fuzzy matching support. - Added the full `/companies/:companyKey/search` UI, search result row components, highlighted snippets, recent searches, and sidebar/Command-K handoff. - Added Storybook coverage for search surfaces and Vitest coverage for server search behavior, rate limiting, route generation, Command-K behavior, and the search page. - Addressed Greptile findings by renaming the no-match SQL helper, applying search pagination after cross-type merge sorting, and lazy-initializing the default search service so unrelated route-test mocks do not need to know about it. - Merged current `public-gh/master` and renumbered the search migrations behind upstream `0078_white_darwin`: search indexes are now `0079_company_search_document_indexes` and fuzzy matching is `0080_company_search_fuzzystrmatch`. ## Verification - `git fetch public-gh master` - `git diff --check public-gh/master...HEAD` - `git diff --name-only public-gh/master...HEAD | rg '^pnpm-lock\.yaml$' || true` produced no output before opening the PR. - `pnpm run preflight:workspace-links && pnpm exec vitest run server/src/__tests__/company-search-service.test.ts server/src/__tests__/company-search-rate-limit-routes.test.ts ui/src/pages/Search.test.tsx ui/src/components/CommandPalette.test.tsx ui/src/lib/company-routes.test.ts` passed: 5 files, 25 tests. - `pnpm --filter @paperclipai/shared typecheck && pnpm --filter @paperclipai/db typecheck && pnpm --filter @paperclipai/server typecheck && pnpm --filter @paperclipai/ui typecheck` passed. - `pnpm exec vitest run server/src/__tests__/company-search-service.test.ts server/src/__tests__/company-search-rate-limit-routes.test.ts && pnpm --filter @paperclipai/server typecheck` passed after Greptile pagination fixes. - `pnpm exec vitest run server/src/__tests__/issue-agent-mutation-ownership-routes.test.ts server/src/__tests__/company-search-rate-limit-routes.test.ts server/src/__tests__/company-search-service.test.ts && pnpm --filter @paperclipai/server typecheck` passed after the CI mock fix. - After resolving the migration conflict with current `public-gh/master`: `pnpm --filter @paperclipai/db typecheck && pnpm exec vitest run server/src/__tests__/company-search-service.test.ts server/src/__tests__/company-search-rate-limit-routes.test.ts && pnpm --filter @paperclipai/server typecheck` passed. - DB migration numbering check passed as part of `@paperclipai/db` typecheck. - UI states are covered by the added Storybook stories in `ui/storybook/stories/search.stories.tsx`. - GitHub reports the PR merge state as `CLEAN` on head `18e54fa8`. - GitHub PR checks are green on head `18e54fa8`: policy, verify, serialized server shards 1/4 through 4/4, e2e, canary dry run, Snyk, and Greptile Review. ## Risks - Search ranking and snippets are new user-facing behavior, so reviewers should check whether result ordering feels right on real company data. - Search touches broad company data, so company scoping and query cost/rate-limit behavior should be reviewed carefully. - The migrations add search indexes/extensions; they are idempotent with `IF NOT EXISTS` for users who may have applied an earlier branch migration number. > ROADMAP.md checked. This PR adds a focused board search surface and does not duplicate an open roadmap item. ## Model Used - OpenAI Codex, GPT-5 coding agent, tool-enabled shell/git/GitHub CLI session with medium reasoning effort. Existing branch commits were produced across prior agent sessions; this packaging pass verified, opened the PR, addressed Greptile findings, resolved migration conflicts after upstream PRs landed, and got PR checks green. ## 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 run tests locally and they pass - [x] I have added or updated tests where applicable - [x] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing> Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Dotta
@@ -0,0 +1,68 @@
|
||||
import type { CompanySearchHighlight } from "@paperclipai/shared";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface HighlightedTextProps {
|
||||
text: string;
|
||||
highlights?: readonly CompanySearchHighlight[] | null;
|
||||
className?: string;
|
||||
markClassName?: string;
|
||||
}
|
||||
|
||||
function clampedRanges(text: string, highlights: readonly CompanySearchHighlight[]) {
|
||||
const result: Array<{ start: number; end: number }> = [];
|
||||
for (const range of highlights) {
|
||||
const start = Math.max(0, Math.min(text.length, range.start));
|
||||
const end = Math.max(start, Math.min(text.length, range.end));
|
||||
if (end <= start) continue;
|
||||
result.push({ start, end });
|
||||
}
|
||||
result.sort((a, b) => a.start - b.start);
|
||||
const merged: Array<{ start: number; end: number }> = [];
|
||||
for (const range of result) {
|
||||
const last = merged[merged.length - 1];
|
||||
if (last && range.start <= last.end) {
|
||||
last.end = Math.max(last.end, range.end);
|
||||
} else {
|
||||
merged.push({ ...range });
|
||||
}
|
||||
}
|
||||
return merged;
|
||||
}
|
||||
|
||||
export function HighlightedText({ text, highlights, className, markClassName }: HighlightedTextProps) {
|
||||
const ranges = highlights && highlights.length > 0 ? clampedRanges(text, highlights) : [];
|
||||
if (ranges.length === 0) {
|
||||
return <span className={className}>{text}</span>;
|
||||
}
|
||||
const segments: Array<{ key: string; text: string; highlight: boolean }> = [];
|
||||
let cursor = 0;
|
||||
ranges.forEach((range, index) => {
|
||||
if (range.start > cursor) {
|
||||
segments.push({ key: `t-${index}`, text: text.slice(cursor, range.start), highlight: false });
|
||||
}
|
||||
segments.push({ key: `m-${index}`, text: text.slice(range.start, range.end), highlight: true });
|
||||
cursor = range.end;
|
||||
});
|
||||
if (cursor < text.length) {
|
||||
segments.push({ key: "t-end", text: text.slice(cursor), highlight: false });
|
||||
}
|
||||
return (
|
||||
<span className={className}>
|
||||
{segments.map((segment) =>
|
||||
segment.highlight ? (
|
||||
<mark
|
||||
key={segment.key}
|
||||
className={cn(
|
||||
"rounded-sm bg-yellow-200/60 px-0.5 text-foreground dark:bg-yellow-300/30",
|
||||
markClassName,
|
||||
)}
|
||||
>
|
||||
{segment.text}
|
||||
</mark>
|
||||
) : (
|
||||
<span key={segment.key}>{segment.text}</span>
|
||||
),
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type MatchSourceChipKind = "title" | "identifier" | "comment" | "document";
|
||||
|
||||
const chipStyles: Record<MatchSourceChipKind, string> = {
|
||||
title:
|
||||
"bg-[var(--chip-match-title-bg)] text-[var(--chip-match-title-fg)] border-[var(--chip-match-title-border)]",
|
||||
identifier:
|
||||
"bg-[var(--chip-match-identifier-bg)] text-[var(--chip-match-identifier-fg)] border-[var(--chip-match-identifier-border)]",
|
||||
comment:
|
||||
"bg-[var(--chip-match-comment-bg)] text-[var(--chip-match-comment-fg)] border-[var(--chip-match-comment-border)]",
|
||||
document:
|
||||
"bg-[var(--chip-match-document-bg)] text-[var(--chip-match-document-fg)] border-[var(--chip-match-document-border)]",
|
||||
};
|
||||
|
||||
const chipLabels: Record<MatchSourceChipKind, string> = {
|
||||
title: "Title",
|
||||
identifier: "Identifier",
|
||||
comment: "Comment",
|
||||
document: "Doc",
|
||||
};
|
||||
|
||||
export interface MatchSourceChipProps {
|
||||
kind: MatchSourceChipKind;
|
||||
count?: number;
|
||||
label?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function MatchSourceChip({ kind, count, label, className }: MatchSourceChipProps) {
|
||||
const text = label ?? chipLabels[kind];
|
||||
const showCount = typeof count === "number" && count > 1;
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1 rounded-full border px-2 py-px text-[11px] font-medium leading-none whitespace-nowrap",
|
||||
chipStyles[kind],
|
||||
className,
|
||||
)}
|
||||
data-kind={kind}
|
||||
>
|
||||
{text}
|
||||
{showCount ? <span className="opacity-80">×{count}</span> : null}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,217 @@
|
||||
import { memo, type ComponentType, type SVGProps } from "react";
|
||||
import { Bot, FileText, Hexagon, MessageSquare, Quote } from "lucide-react";
|
||||
import type { Agent, CompanySearchResult } from "@paperclipai/shared";
|
||||
import { Link } from "@/lib/router";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { StatusIcon } from "../StatusIcon";
|
||||
import { Identity } from "../Identity";
|
||||
import { HighlightedText, type HighlightedTextProps } from "./HighlightedText";
|
||||
|
||||
type SnippetStyle = {
|
||||
Icon: ComponentType<SVGProps<SVGSVGElement>>;
|
||||
label: string;
|
||||
};
|
||||
|
||||
const SNIPPET_STYLES: Record<string, SnippetStyle> = {
|
||||
comment: { Icon: MessageSquare, label: "Comment" },
|
||||
document: { Icon: FileText, label: "Doc" },
|
||||
description: { Icon: Quote, label: "Description" },
|
||||
};
|
||||
|
||||
function snippetStyle(field: string, fallbackLabel: string): SnippetStyle {
|
||||
return SNIPPET_STYLES[field] ?? { Icon: Quote, label: fallbackLabel };
|
||||
}
|
||||
|
||||
function formatRelativeTime(input: string | null): string {
|
||||
if (!input) return "";
|
||||
const value = new Date(input);
|
||||
if (Number.isNaN(value.getTime())) return "";
|
||||
const diffMs = Date.now() - value.getTime();
|
||||
const seconds = Math.round(diffMs / 1000);
|
||||
if (seconds < 60) return "just now";
|
||||
const minutes = Math.round(seconds / 60);
|
||||
if (minutes < 60) return `${minutes}m`;
|
||||
const hours = Math.round(minutes / 60);
|
||||
if (hours < 24) return `${hours}h`;
|
||||
const days = Math.round(hours / 24);
|
||||
if (days < 7) return `${days}d`;
|
||||
const weeks = Math.round(days / 7);
|
||||
if (weeks < 5) return `${weeks}w`;
|
||||
const months = Math.round(days / 30);
|
||||
if (months < 12) return `${months}mo`;
|
||||
const years = Math.round(days / 365);
|
||||
return `${years}y`;
|
||||
}
|
||||
|
||||
export interface SearchResultRowProps {
|
||||
result: CompanySearchResult;
|
||||
agentsById?: ReadonlyMap<string, Pick<Agent, "id" | "name">>;
|
||||
isActive?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const ROW_BASE =
|
||||
"group flex items-start gap-3 rounded-md px-3 transition-colors no-underline text-inherit hover:bg-muted/40";
|
||||
|
||||
function SearchResultRowImpl({
|
||||
result,
|
||||
agentsById,
|
||||
isActive,
|
||||
className,
|
||||
}: SearchResultRowProps) {
|
||||
if (result.type === "agent") {
|
||||
return (
|
||||
<Link
|
||||
to={result.href}
|
||||
className={cn(ROW_BASE, "py-3", isActive && "bg-muted/40", className)}
|
||||
data-result-type="agent"
|
||||
>
|
||||
<span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
|
||||
<Bot className="h-3 w-3" />
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<span className="truncate text-sm font-medium">{result.title}</span>
|
||||
</div>
|
||||
{result.snippet ? (
|
||||
<SnippetLine
|
||||
text={result.snippets[0]?.text ?? result.snippet}
|
||||
highlights={result.snippets[0]?.highlights}
|
||||
field="agent"
|
||||
fallbackLabel={result.sourceLabel ?? "Agent"}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
if (result.type === "project") {
|
||||
return (
|
||||
<Link
|
||||
to={result.href}
|
||||
className={cn(ROW_BASE, "py-3", isActive && "bg-muted/40", className)}
|
||||
data-result-type="project"
|
||||
>
|
||||
<Hexagon className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<span className="truncate text-sm font-medium">{result.title}</span>
|
||||
{result.snippet ? (
|
||||
<SnippetLine
|
||||
text={result.snippets[0]?.text ?? result.snippet}
|
||||
highlights={result.snippets[0]?.highlights}
|
||||
field="project"
|
||||
fallbackLabel={result.sourceLabel ?? "Project"}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
const issue = result.issue;
|
||||
if (!issue) return null;
|
||||
const assigneeName = issue.assigneeAgentId
|
||||
? agentsById?.get(issue.assigneeAgentId)?.name ?? null
|
||||
: null;
|
||||
const updated = formatRelativeTime(result.updatedAt ?? issue.updatedAt);
|
||||
const titleHighlights = result.snippets.find((snippet) => snippet.field === "title")?.highlights;
|
||||
const bodySnippets = result.snippets.filter((snippet) => snippet.field !== "title").slice(0, 2);
|
||||
const previewImageUrl = result.previewImageUrl;
|
||||
const hasRightRail = previewImageUrl || assigneeName || updated;
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={result.href}
|
||||
disableIssueQuicklook
|
||||
className={cn(ROW_BASE, "py-4", isActive && "bg-muted/40", className)}
|
||||
data-result-type="issue"
|
||||
>
|
||||
<div className="mt-1 shrink-0">
|
||||
<StatusIcon status={issue.status} />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex min-w-0 flex-wrap items-baseline gap-x-2.5 gap-y-1">
|
||||
{issue.identifier ? (
|
||||
<span className="shrink-0 font-mono text-xs text-muted-foreground tabular-nums">
|
||||
{issue.identifier}
|
||||
</span>
|
||||
) : null}
|
||||
<HighlightedText
|
||||
text={issue.title}
|
||||
highlights={titleHighlights}
|
||||
className="min-w-0 flex-1 text-sm font-medium leading-snug text-foreground"
|
||||
/>
|
||||
</div>
|
||||
{bodySnippets.map((snippet, index) => (
|
||||
<SnippetLine
|
||||
key={`${snippet.field}-${index}`}
|
||||
text={snippet.text}
|
||||
highlights={snippet.highlights}
|
||||
field={snippet.field}
|
||||
fallbackLabel={snippet.label}
|
||||
multiline
|
||||
/>
|
||||
))}
|
||||
{hasRightRail ? (
|
||||
<div className="mt-1.5 flex items-center gap-2 text-xs text-muted-foreground sm:hidden">
|
||||
{assigneeName ? <span className="truncate">{assigneeName}</span> : null}
|
||||
{updated ? <span className="ml-auto tabular-nums">{updated}</span> : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{hasRightRail ? (
|
||||
<div className="ml-2 hidden shrink-0 flex-col items-end gap-2 sm:flex">
|
||||
{assigneeName || updated ? (
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
{assigneeName ? <Identity name={assigneeName} size="sm" /> : null}
|
||||
{updated ? <span className="tabular-nums">{updated}</span> : null}
|
||||
</div>
|
||||
) : null}
|
||||
{previewImageUrl ? (
|
||||
<img
|
||||
src={previewImageUrl}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
className="h-[88px] w-[88px] shrink-0 rounded-md border border-border bg-muted object-cover"
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export const SearchResultRow = memo(SearchResultRowImpl);
|
||||
|
||||
interface SnippetLineProps {
|
||||
text: string;
|
||||
highlights?: HighlightedTextProps["highlights"];
|
||||
field: string;
|
||||
fallbackLabel: string;
|
||||
multiline?: boolean;
|
||||
}
|
||||
|
||||
function SnippetLine({ text, highlights, field, fallbackLabel, multiline = false }: SnippetLineProps) {
|
||||
const { Icon, label } = snippetStyle(field, fallbackLabel);
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"mt-2.5 flex min-w-0 gap-1.5 text-xs text-muted-foreground",
|
||||
multiline ? "items-start" : "items-center",
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
className={cn("h-3.5 w-3.5 shrink-0 text-muted-foreground/60", multiline && "mt-0.5")}
|
||||
aria-hidden
|
||||
/>
|
||||
<span className="sr-only">{label}: </span>
|
||||
<HighlightedText
|
||||
text={text}
|
||||
highlights={highlights}
|
||||
className={multiline ? "line-clamp-2 leading-relaxed" : "line-clamp-1 truncate"}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user