group search results by library

Refs: DOCS-12518

Render search results as library groups, with each library shown once and matching document hits nested below it.

Preserve concise document rows with title, path, source link, description, and deduplicated snippets without repeating library metadata for every hit.

Verification: npm run build; npm test -- --run; git diff --check.

Co-authored-by: Codex <noreply@openai.com>

Author: 2 people

web/src/views/pages.tsx

@@ -1694,6 +1694,7 @@ export function SearchView() {
   const [librariesLoading, setLibrariesLoading] = useState(libraries.length === 0);
   const [filtersOpen, setFiltersOpen] = useState(false);
   const [results, setResults] = useState<SearchResult[]>([]);
+  const groupedResults = groupSearchResults(results);
 
   useEffect(() => {
     void apiGet<Library[]>("/api/v1/libraries")
@@ -1784,52 +1785,81 @@ export function SearchView() {
           ) : null}
         </CardHeader>
         <CardContent className="space-y-3">
-          {results.map((result) => {
-            const snippets = resultSnippets(result);
-            const displayPath = resultDisplayPath(result);
-            return (
-              <div key={`${result.library}-${result.path || result.title}-${result.score}`} className="rounded-lg border border-border p-4">
-                <div className="min-w-0">
-                  <div className="flex flex-wrap items-start justify-between gap-3">
-                    <div className="min-w-0">
-                      <h3 className="text-base font-semibold leading-6 tracking-normal">{result.title}</h3>
-                      <div className="mt-1 truncate text-xs text-muted-foreground">
-                        <Link to="/catalog/$slug" params={{ slug: result.library }} className="font-medium text-foreground hover:underline">
-                          {result.library}
-                        </Link>
-                        {result.source && <span className="whitespace-nowrap"> /{result.source}</span>}
+          {groupedResults.map((group) => (
+            <div key={group.library} className="overflow-hidden rounded-lg border border-border">
+              <div className="flex flex-wrap items-center justify-between gap-3 bg-muted/50 px-4 py-3">
+                <div className="min-w-0 truncate text-sm">
+                  <Link to="/catalog/$slug" params={{ slug: group.library }} className="font-semibold text-foreground hover:underline">
+                    {group.library}
+                  </Link>
+                  {group.sources.length === 1 && <span className="whitespace-nowrap text-muted-foreground"> /{group.sources[0]}</span>}
+                  {group.sources.length > 1 && <span className="text-muted-foreground"> /{group.sources.join(", ")}</span>}
+                </div>
+                <span className="shrink-0 text-xs text-muted-foreground">{group.results.length} {group.results.length === 1 ? "match" : "matches"}</span>
+              </div>
+              {group.results.map((result) => {
+                const snippets = resultSnippets(result);
+                const displayPath = resultDisplayPath(result);
+                return (
+                  <div key={`${result.library}-${result.path || result.title}-${result.score}`} className="border-t border-border p-4 first:border-t-0">
+                    <div className="flex flex-wrap items-start justify-between gap-3">
+                      <div className="min-w-0">
+                        <h3 className="text-base font-semibold leading-6 tracking-normal">{result.title}</h3>
+                        {group.sources.length > 1 && result.source && <p className="mt-1 text-xs text-muted-foreground">{result.source}</p>}
                       </div>
+                      {result.source_url && (
+                        <a className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground" href={result.source_url} target="_blank" rel="noreferrer">
+                          Source <ExternalLink className="h-3 w-3" />
+                        </a>
+                      )}
                     </div>
-                    {result.source_url && (
-                      <a className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground" href={result.source_url} target="_blank" rel="noreferrer">
-                        Source <ExternalLink className="h-3 w-3" />
-                      </a>
+                    {displayPath && (
+                      <p className="mt-2 truncate font-mono text-xs text-muted-foreground">{displayPath}</p>
+                    )}
+                    {result.description && <p className="mt-3 line-clamp-2 text-sm text-muted-foreground">{result.description}</p>}
+                    {snippets.length > 0 ? (
+                      <div className="mt-3 space-y-2 text-sm leading-6">
+                        {snippets.map((match, index) => (
+                          <p key={`${result.title}-${index}`} className="line-clamp-3">{renderMarked(match)}</p>
+                        ))}
+                      </div>
+                    ) : (
+                      result.snippet && <p className="mt-3 line-clamp-3 text-sm leading-6 text-muted-foreground">{result.snippet}</p>
                     )}
                   </div>
-                  {displayPath && (
-                    <p className="mt-2 truncate font-mono text-xs text-muted-foreground">{displayPath}</p>
-                  )}
-                  {result.description && <p className="mt-3 line-clamp-2 text-sm text-muted-foreground">{result.description}</p>}
-                  {snippets.length > 0 ? (
-                    <div className="mt-3 space-y-2 text-sm leading-6">
-                      {snippets.map((match, index) => (
-                        <p key={`${result.title}-${index}`} className="line-clamp-3">{renderMarked(match)}</p>
-                      ))}
-                    </div>
-                  ) : (
-                    result.snippet && <p className="mt-3 line-clamp-3 text-sm leading-6 text-muted-foreground">{result.snippet}</p>
-                  )}
-                </div>
-              </div>
-            );
-          })}
-          {results.length === 0 && <p className="text-sm text-muted-foreground">No results found.</p>}
+                );
+              })}
+            </div>
+          ))}
+          {groupedResults.length === 0 && <p className="text-sm text-muted-foreground">No results found.</p>}
         </CardContent>
       </Card>
     </section>
   );
 }
 
+type SearchResultGroup = {
+  library: string;
+  sources: string[];
+  results: SearchResult[];
+};
+
+function groupSearchResults(results: SearchResult[]): SearchResultGroup[] {
+  const groups = new Map<string, SearchResultGroup>();
+  for (const result of results) {
+    let group = groups.get(result.library);
+    if (!group) {
+      group = { library: result.library, sources: [], results: [] };
+      groups.set(result.library, group);
+    }
+    group.results.push(result);
+    if (result.source && !group.sources.includes(result.source)) {
+      group.sources.push(result.source);
+    }
+  }
+  return [...groups.values()];
+}
+
 function resultDisplayPath(result: SearchResult) {
   const path = result.path || "";
   if (!path) return "";