Add full search page and Command K handoff

- New /search board route with debounced query, scope tabs, and grouped results
- searchApi client + react-query hooks for the company search endpoint
- SearchResultRow / MatchSourceChip / HighlightedText components reusing
  existing primitives (StatusIcon, StatusBadge, Identity, IssueGroupHeader)
- Match-source chip design tokens (--chip-match-*) for light and dark
- Command K palette: persistent "Search all for ..." item + empty-result
  Enter handoff to /search?q=
- Sidebar nav item "Search"
- Recent searches stored in localStorage (max 5) per company
- Tests: buildSearchUrl, debounced query, no-results state with scope-all
  fallback, Search-all command, Enter-on-empty handoff

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/App.tsx

@@ -13,6 +13,7 @@ import { ProjectDetail } from "./pages/ProjectDetail";
 import { ProjectWorkspaceDetail } from "./pages/ProjectWorkspaceDetail";
 import { Workspaces } from "./pages/Workspaces";
 import { Issues } from "./pages/Issues";
+import { Search } from "./pages/Search";
 import { IssueDetail } from "./pages/IssueDetail";
 import { IssueChatLongThreadPerf } from "./pages/IssueChatLongThreadPerf";
 import { Routines } from "./pages/Routines";
@@ -95,6 +96,7 @@ function boardRoutes() {
       <Route path="projects/:projectId/budget" element={<ProjectDetail />} />
       <Route path="workspaces" element={<Workspaces />} />
       <Route path="issues" element={<Issues />} />
+      <Route path="search" element={<Search />} />
       <Route path="issues/all" element={<Navigate to="/issues" replace />} />
       <Route path="issues/active" element={<Navigate to="/issues" replace />} />
       <Route path="issues/backlog" element={<Navigate to="/issues" replace />} />

ui/src/api/search.ts

@@ -0,0 +1,23 @@
+import type { CompanySearchResponse, CompanySearchScope } from "@paperclipai/shared";
+import { api } from "./client";
+
+export interface CompanySearchParams {
+  q: string;
+  scope?: CompanySearchScope;
+  limit?: number;
+  offset?: number;
+}
+
+export const searchApi = {
+  search: (companyId: string, params: CompanySearchParams) => {
+    const search = new URLSearchParams();
+    search.set("q", params.q);
+    if (params.scope) search.set("scope", params.scope);
+    if (params.limit !== undefined) search.set("limit", String(params.limit));
+    if (params.offset !== undefined) search.set("offset", String(params.offset));
+    const qs = search.toString();
+    return api.get<CompanySearchResponse>(
+      `/companies/${companyId}/search${qs ? `?${qs}` : ""}`,
+    );
+  },
+};

ui/src/components/CommandPalette.test.tsx

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 
 import { act } from "react";
-import type { ReactNode } from "react";
+import type { KeyboardEventHandler, ReactNode } from "react";
 import { createRoot } from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
@@ -46,8 +46,12 @@ vi.mock("../context/SidebarContext", () => ({
   useSidebar: () => sidebarState,
 }));
 
+const navigateState = vi.hoisted(() => ({
+  navigate: vi.fn(),
+}));
+
 vi.mock("@/lib/router", () => ({
-  useNavigate: () => vi.fn(),
+  useNavigate: () => navigateState.navigate,
 }));
 
 vi.mock("../api/issues", () => ({
@@ -73,15 +77,18 @@ vi.mock("@/components/ui/command", () => ({
   CommandInput: ({
     value,
     onValueChange,
+    onKeyDown,
   }: {
     value: string;
     onValueChange: (value: string) => void;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
   }) => (
     <div>
       <input
         aria-label="Command search"
         value={value}
         onChange={(event) => onValueChange(event.currentTarget.value)}
+        onKeyDown={onKeyDown}
       />
       <button type="button" aria-label="Set query" onClick={() => onValueChange("pull/3303")} />
     </div>
@@ -89,10 +96,16 @@ vi.mock("@/components/ui/command", () => ({
   CommandItem: ({
     children,
     onSelect,
+    "data-testid": testId,
   }: {
     children: ReactNode;
     onSelect?: () => void;
-  }) => <button onClick={onSelect}>{children}</button>,
+    "data-testid"?: string;
+  }) => (
+    <button data-testid={testId} onClick={onSelect}>
+      {children}
+    </button>
+  ),
   CommandList: ({ children }: { children: ReactNode }) => <div>{children}</div>,
   CommandSeparator: () => <hr />,
 }));
@@ -153,6 +166,7 @@ describe("CommandPalette", () => {
     mockIssuesApi.list.mockReset();
     mockAgentsApi.list.mockReset();
     mockProjectsApi.list.mockReset();
+    navigateState.navigate.mockReset();
     mockIssuesApi.list.mockResolvedValue([]);
     mockAgentsApi.list.mockResolvedValue([]);
     mockProjectsApi.list.mockResolvedValue([]);
@@ -188,4 +202,78 @@ describe("CommandPalette", () => {
       root.unmount();
     });
   });
+
+  it("offers a Search-all command when the query is non-empty and routes Enter to /search when no issues match", async () => {
+    mockIssuesApi.list.mockResolvedValue([]);
+    const { root } = renderWithQueryClient(<CommandPalette />, container);
+
+    act(() => {
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: "k", metaKey: true, bubbles: true }));
+    });
+
+    const input = container.querySelector('input[aria-label="Command search"]') as HTMLInputElement;
+    expect(input).not.toBeNull();
+
+    act(() => {
+      const nativeSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!;
+      nativeSetter.call(input, "auth flake");
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+
+    await waitForAssertion(() => {
+      const searchAllButton = container.querySelector(
+        'button[data-testid="command-search-all"]',
+      ) as HTMLButtonElement | null;
+      expect(searchAllButton).not.toBeNull();
+      expect(searchAllButton!.textContent).toContain("auth flake");
+    });
+
+    act(() => {
+      input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    });
+
+    await waitForAssertion(() => {
+      expect(navigateState.navigate).toHaveBeenCalledWith("/search?q=auth%20flake");
+    });
+
+    act(() => {
+      root.unmount();
+    });
+  });
+
+  it("navigates to /search when the user clicks the Search-all command", async () => {
+    mockIssuesApi.list.mockResolvedValue([]);
+    const { root } = renderWithQueryClient(<CommandPalette />, container);
+
+    act(() => {
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: "k", metaKey: true, bubbles: true }));
+    });
+
+    const input = container.querySelector('input[aria-label="Command search"]') as HTMLInputElement;
+    act(() => {
+      const nativeSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!;
+      nativeSetter.call(input, "deflake");
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+
+    let searchAllButton: HTMLButtonElement | null = null;
+    await waitForAssertion(() => {
+      searchAllButton = container.querySelector(
+        'button[data-testid="command-search-all"]',
+      ) as HTMLButtonElement | null;
+      expect(searchAllButton).not.toBeNull();
+    });
+
+    act(() => {
+      searchAllButton!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    await waitForAssertion(() => {
+      expect(navigateState.navigate).toHaveBeenCalledWith("/search?q=deflake");
+    });
+
+    act(() => {
+      root.unmount();
+    });
+  });
 });

ui/src/components/CommandPalette.tsx

@@ -28,10 +28,18 @@ import {
   History,
   SquarePen,
   Plus,
+  Search,
 } from "lucide-react";
 import { Identity } from "./Identity";
 import { agentUrl, projectUrl } from "../lib/utils";
 
+const SEARCH_ALL_VALUE = "__paperclip-search-all__";
+
+export function buildFullSearchPath(query: string) {
+  const trimmed = query.trim();
+  return trimmed.length === 0 ? "/search" : `/search?q=${encodeURIComponent(trimmed)}`;
+}
+
 export function CommandPalette() {
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
@@ -90,6 +98,10 @@ export function CommandPalette() {
     navigate(path);
   }
 
+  function goFullSearch() {
+    go(buildFullSearchPath(searchQuery));
+  }
+
   const agentName = (id: string | null) => {
     if (!id) return null;
     return agents.find((a) => a.id === id)?.name ?? null;
@@ -100,6 +112,9 @@ export function CommandPalette() {
     [issues, searchedIssues, searchQuery],
   );
 
+  const showSearchAll = searchQuery.length > 0;
+  const showEmptyHint = showSearchAll && visibleIssues.length === 0;
+
   return (
     <CommandDialog open={open} onOpenChange={(v) => {
         setOpen(v);
@@ -109,9 +124,47 @@ export function CommandPalette() {
         placeholder="Search issues, agents, projects..."
         value={query}
         onValueChange={setQuery}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" && showEmptyHint) {
+            event.preventDefault();
+            goFullSearch();
+          }
+        }}
       />
       <CommandList>
-        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandEmpty>
+          {showSearchAll ? (
+            <span>
+              No quick issue matches. Press{" "}
+              <kbd className="rounded border border-border bg-muted px-1 py-0.5 text-[10px]">↵</kbd>{" "}
+              to <span className="font-medium">search all</span> or keep typing to refine.
+            </span>
+          ) : (
+            "No results found."
+          )}
+        </CommandEmpty>
+
+        {showSearchAll ? (
+          <CommandGroup heading="Search">
+            <CommandItem
+              value={`${SEARCH_ALL_VALUE} ${searchQuery}`}
+              onSelect={goFullSearch}
+              className="bg-accent/40 border border-accent data-[selected=true]:bg-accent/60"
+              data-testid="command-search-all"
+            >
+              <Search className="mr-2 h-4 w-4" />
+              <span className="flex-1 truncate">
+                Search all for <span className="font-semibold">&ldquo;{searchQuery}&rdquo;</span>
+              </span>
+              <span className="ml-auto inline-flex items-center gap-1 text-xs text-muted-foreground">
+                <span>open full search</span>
+                <kbd className="rounded border border-border bg-background px-1 py-0.5 text-[10px]">↵</kbd>
+              </span>
+            </CommandItem>
+          </CommandGroup>
+        ) : null}
+
+        {showSearchAll ? <CommandSeparator /> : null}
 
         <CommandGroup heading="Actions">
           <CommandItem

ui/src/components/Sidebar.tsx

@@ -99,6 +99,7 @@ export function Sidebar() {
 
         <SidebarSection label="Work">
           <SidebarNavItem to="/issues" label="Issues" icon={CircleDot} />
+          <SidebarNavItem to="/search" label="Search" icon={Search} />
           <SidebarNavItem to="/routines" label="Routines" icon={Repeat} />
           <SidebarNavItem to="/goals" label="Goals" icon={Target} />
           {showWorkspacesLink ? (

ui/src/components/search/HighlightedText.tsx

@@ -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>
+  );
+}

ui/src/components/search/MatchSourceChip.tsx

@@ -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>
+  );
+}

ui/src/components/search/SearchResultRow.tsx

@@ -0,0 +1,223 @@
+import { useMemo } from "react";
+import { Bot, Hexagon } from "lucide-react";
+import type { Agent, CompanySearchResult, Project } from "@paperclipai/shared";
+import { Link } from "@/lib/router";
+import { cn } from "@/lib/utils";
+import { StatusIcon } from "../StatusIcon";
+import { StatusBadge } from "../StatusBadge";
+import { Identity } from "../Identity";
+import { HighlightedText } from "./HighlightedText";
+import { MatchSourceChip, type MatchSourceChipKind } from "./MatchSourceChip";
+
+const SNIPPET_FIELD_LABEL: Record<string, string> = {
+  comment: "COMMENT",
+  document: "DOC",
+  identifier: "IDENTIFIER",
+  description: "DESCRIPTION",
+  title: "TITLE",
+};
+
+function deriveChips(matchedFields: string[]): Array<{ kind: MatchSourceChipKind; count?: number }> {
+  const counts = new Map<MatchSourceChipKind, number>();
+  for (const field of matchedFields) {
+    let kind: MatchSourceChipKind | null = null;
+    if (field === "title" || field === "description") kind = "title";
+    else if (field === "identifier") kind = "identifier";
+    else if (field === "comment") kind = "comment";
+    else if (field === "document") kind = "document";
+    if (!kind) continue;
+    counts.set(kind, (counts.get(kind) ?? 0) + 1);
+  }
+  const order: MatchSourceChipKind[] = ["title", "identifier", "comment", "document"];
+  return order
+    .filter((kind) => counts.has(kind))
+    .map((kind) => ({ kind, count: counts.get(kind) ?? 1 }));
+}
+
+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">>;
+  projectsById?: ReadonlyMap<string, Pick<Project, "id" | "name">>;
+  isActive?: boolean;
+  className?: string;
+}
+
+export function SearchResultRow({
+  result,
+  agentsById,
+  projectsById,
+  isActive,
+  className,
+}: SearchResultRowProps) {
+  const chips = useMemo(() => deriveChips(result.matchedFields), [result.matchedFields]);
+
+  if (result.type === "agent") {
+    return (
+      <Link
+        to={result.href}
+        className={cn(
+          "group flex items-start gap-3 px-3 py-2 hover:bg-accent/40",
+          isActive && "bg-accent/40",
+          className,
+        )}
+        data-result-type="agent"
+      >
+        <span className="mt-0.5 flex h-4 w-4 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 ? (
+            <div className="mt-0.5 flex min-w-0 items-baseline gap-2">
+              <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
+                {result.sourceLabel ?? "Agent"}
+              </span>
+              <HighlightedText
+                text={result.snippets[0]?.text ?? result.snippet}
+                highlights={result.snippets[0]?.highlights}
+                className="truncate text-xs text-muted-foreground"
+              />
+            </div>
+          ) : null}
+        </div>
+      </Link>
+    );
+  }
+
+  if (result.type === "project") {
+    return (
+      <Link
+        to={result.href}
+        className={cn(
+          "group flex items-start gap-3 px-3 py-2 hover:bg-accent/40",
+          isActive && "bg-accent/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 ? (
+            <div className="mt-0.5 flex min-w-0 items-baseline gap-2">
+              <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
+                {result.sourceLabel ?? "Project"}
+              </span>
+              <HighlightedText
+                text={result.snippets[0]?.text ?? result.snippet}
+                highlights={result.snippets[0]?.highlights}
+                className="truncate text-xs text-muted-foreground"
+              />
+            </div>
+          ) : null}
+        </div>
+      </Link>
+    );
+  }
+
+  const issue = result.issue;
+  if (!issue) return null;
+  const assigneeName = issue.assigneeAgentId
+    ? agentsById?.get(issue.assigneeAgentId)?.name ?? null
+    : null;
+  const projectName = issue.projectId ? projectsById?.get(issue.projectId)?.name ?? null : null;
+  const updated = formatRelativeTime(result.updatedAt ?? issue.updatedAt);
+  const titleHighlights = result.snippets.find((snippet) => snippet.field === "title")?.highlights;
+
+  return (
+    <Link
+      to={result.href}
+      className={cn(
+        "group flex items-start gap-3 px-3 py-2 hover:bg-accent/40",
+        isActive && "bg-accent/40",
+        className,
+      )}
+      data-result-type="issue"
+    >
+      <div className="mt-0.5 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 gap-y-1">
+          {issue.identifier ? (
+            <span className="font-mono text-xs text-muted-foreground tabular-nums">
+              {issue.identifier}
+            </span>
+          ) : null}
+          <HighlightedText
+            text={issue.title}
+            highlights={titleHighlights}
+            className="line-clamp-2 min-w-0 flex-1 text-sm leading-snug"
+          />
+          <div className="ml-auto hidden items-center gap-2 sm:flex">
+            <StatusBadge status={issue.status} />
+            {assigneeName ? <Identity name={assigneeName} size="sm" /> : null}
+            {projectName ? (
+              <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+                <Hexagon className="h-3 w-3" />
+                <span className="max-w-[10ch] truncate">{projectName}</span>
+              </span>
+            ) : null}
+            {updated ? (
+              <span className="text-xs text-muted-foreground tabular-nums">{updated}</span>
+            ) : null}
+          </div>
+        </div>
+        {chips.length > 0 ? (
+          <div className="mt-1 flex flex-wrap items-center gap-1">
+            {chips.map((chip) => (
+              <MatchSourceChip key={chip.kind} kind={chip.kind} count={chip.count} />
+            ))}
+          </div>
+        ) : null}
+        {result.snippets
+          .filter((snippet) => snippet.field !== "title")
+          .slice(0, 2)
+          .map((snippet, index) => (
+            <div
+              key={`${snippet.field}-${index}`}
+              className="mt-1 flex min-w-0 items-baseline gap-2"
+            >
+              <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
+                {SNIPPET_FIELD_LABEL[snippet.field] ?? snippet.label.toUpperCase()}
+              </span>
+              <HighlightedText
+                text={snippet.text}
+                highlights={snippet.highlights}
+                className="line-clamp-1 truncate text-xs text-muted-foreground"
+              />
+            </div>
+          ))}
+        <div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground sm:hidden">
+          <StatusBadge status={issue.status} />
+          {assigneeName ? <span className="truncate">{assigneeName}</span> : null}
+          {projectName ? <span className="truncate">· {projectName}</span> : null}
+          {updated ? <span className="ml-auto tabular-nums">{updated}</span> : null}
+        </div>
+      </div>
+    </Link>
+  );
+}

ui/src/index.css

@@ -77,6 +77,18 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+  --chip-match-title-bg: oklch(0.97 0.02 265);
+  --chip-match-title-fg: oklch(0.4 0.13 265);
+  --chip-match-title-border: oklch(0.85 0.05 265);
+  --chip-match-comment-bg: oklch(0.97 0.02 145);
+  --chip-match-comment-fg: oklch(0.4 0.10 145);
+  --chip-match-comment-border: oklch(0.85 0.05 145);
+  --chip-match-document-bg: oklch(0.97 0.02 295);
+  --chip-match-document-fg: oklch(0.4 0.10 295);
+  --chip-match-document-border: oklch(0.85 0.05 295);
+  --chip-match-identifier-bg: var(--muted);
+  --chip-match-identifier-fg: var(--muted-foreground);
+  --chip-match-identifier-border: var(--border);
 }
 
 .dark {
@@ -112,6 +124,18 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(0.269 0 0);
   --sidebar-ring: oklch(0.439 0 0);
+  --chip-match-title-bg: oklch(0.27 0.04 265 / 0.5);
+  --chip-match-title-fg: oklch(0.78 0.10 265);
+  --chip-match-title-border: oklch(0.4 0.06 265);
+  --chip-match-comment-bg: oklch(0.27 0.04 145 / 0.5);
+  --chip-match-comment-fg: oklch(0.78 0.08 145);
+  --chip-match-comment-border: oklch(0.4 0.05 145);
+  --chip-match-document-bg: oklch(0.27 0.04 295 / 0.5);
+  --chip-match-document-fg: oklch(0.78 0.08 295);
+  --chip-match-document-border: oklch(0.4 0.05 295);
+  --chip-match-identifier-bg: var(--muted);
+  --chip-match-identifier-fg: var(--muted-foreground);
+  --chip-match-identifier-border: var(--border);
 }
 
 @layer base {

ui/src/lib/queryKeys.ts

@@ -130,6 +130,10 @@ export const queryKeys = {
     list: (companyId: string) => ["secrets", companyId] as const,
     providers: (companyId: string) => ["secret-providers", companyId] as const,
   },
+  companySearch: {
+    search: (companyId: string, q: string, scope: string, limit: number, offset: number) =>
+      ["company-search", companyId, q, scope, limit, offset] as const,
+  },
   dashboard: (companyId: string) => ["dashboard", companyId] as const,
   userProfile: (companyId: string, userSlug: string) =>
     ["user-profile", companyId, userSlug] as const,

ui/src/lib/recent-searches.ts

@@ -0,0 +1,57 @@
+const STORAGE_PREFIX = "paperclip:recent-searches:";
+const MAX_RECENT_SEARCHES = 5;
+
+function storageKey(companyId: string) {
+  return `${STORAGE_PREFIX}${companyId}`;
+}
+
+function isStorageAvailable() {
+  return typeof window !== "undefined" && typeof window.localStorage !== "undefined";
+}
+
+export function loadRecentSearches(companyId: string): string[] {
+  if (!isStorageAvailable() || !companyId) return [];
+  try {
+    const raw = window.localStorage.getItem(storageKey(companyId));
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    const cleaned: string[] = [];
+    for (const value of parsed) {
+      if (typeof value !== "string") continue;
+      const trimmed = value.trim();
+      if (!trimmed) continue;
+      cleaned.push(trimmed);
+      if (cleaned.length >= MAX_RECENT_SEARCHES) break;
+    }
+    return cleaned;
+  } catch {
+    return [];
+  }
+}
+
+export function pushRecentSearch(companyId: string, query: string): string[] {
+  if (!isStorageAvailable() || !companyId) return [];
+  const trimmed = query.trim();
+  if (!trimmed) return loadRecentSearches(companyId);
+  const existing = loadRecentSearches(companyId);
+  const filtered = existing.filter((entry) => entry.toLowerCase() !== trimmed.toLowerCase());
+  const next = [trimmed, ...filtered].slice(0, MAX_RECENT_SEARCHES);
+  try {
+    window.localStorage.setItem(storageKey(companyId), JSON.stringify(next));
+  } catch {
+    // ignore
+  }
+  return next;
+}
+
+export function clearRecentSearches(companyId: string): void {
+  if (!isStorageAvailable() || !companyId) return;
+  try {
+    window.localStorage.removeItem(storageKey(companyId));
+  } catch {
+    // ignore
+  }
+}
+
+export const RECENT_SEARCHES_LIMIT = MAX_RECENT_SEARCHES;

ui/src/pages/Search.test.tsx

@@ -0,0 +1,304 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import type { ReactNode } from "react";
+import { createRoot } from "react-dom/client";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Search, buildSearchUrl } from "./Search";
+
+const companyState = vi.hoisted(() => ({
+  selectedCompanyId: "company-1",
+}));
+
+const breadcrumbState = vi.hoisted(() => ({
+  setBreadcrumbs: vi.fn(),
+}));
+
+const dialogState = vi.hoisted(() => ({
+  openNewIssue: vi.fn(),
+}));
+
+const navigateMock = vi.hoisted(() => vi.fn());
+
+const searchApiMock = vi.hoisted(() => ({
+  search: vi.fn(),
+}));
+
+const agentsApiMock = vi.hoisted(() => ({
+  list: vi.fn(),
+}));
+
+const projectsApiMock = vi.hoisted(() => ({
+  list: vi.fn(),
+}));
+
+vi.mock("../context/CompanyContext", () => ({
+  useCompany: () => companyState,
+}));
+
+vi.mock("../context/BreadcrumbContext", () => ({
+  useBreadcrumbs: () => breadcrumbState,
+}));
+
+vi.mock("../context/DialogContext", () => ({
+  useDialogActions: () => dialogState,
+}));
+
+vi.mock("../context/SidebarContext", () => ({
+  useSidebar: () => ({ isMobile: false, setSidebarOpen: vi.fn() }),
+}));
+
+vi.mock("../api/search", () => ({
+  searchApi: searchApiMock,
+}));
+
+vi.mock("../api/agents", () => ({
+  agentsApi: agentsApiMock,
+}));
+
+vi.mock("../api/projects", () => ({
+  projectsApi: projectsApiMock,
+}));
+
+vi.mock("@/lib/router", async () => {
+  const actual = await vi.importActual<typeof import("react-router-dom")>("react-router-dom");
+  return {
+    ...actual,
+    useNavigate: () => navigateMock,
+  };
+});
+
+vi.mock("../components/StatusIcon", () => ({
+  StatusIcon: ({ status }: { status: string }) => <span data-status={status} />,
+}));
+
+vi.mock("../components/StatusBadge", () => ({
+  StatusBadge: ({ status }: { status: string }) => <span data-status-badge={status}>{status}</span>,
+}));
+
+vi.mock("../components/Identity", () => ({
+  Identity: ({ name }: { name: string }) => <span>{name}</span>,
+}));
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+async function flush() {
+  await act(async () => {
+    await Promise.resolve();
+  });
+}
+
+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 renderSearch(initialPath: string, container: HTMLDivElement, node?: ReactNode) {
+  const root = createRoot(container);
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  act(() => {
+    root.render(
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={[initialPath]}>
+          <Routes>
+            <Route path="/search" element={node ?? <Search />} />
+          </Routes>
+        </MemoryRouter>
+      </QueryClientProvider>,
+    );
+  });
+  return { root, queryClient };
+}
+
+describe("buildSearchUrl", () => {
+  it("writes q and scope when provided", () => {
+    expect(buildSearchUrl("http://x/search", "auth flake", "comments")).toBe(
+      "/search?q=auth+flake&scope=comments",
+    );
+  });
+
+  it("clears q when empty and omits scope when scope=all", () => {
+    expect(buildSearchUrl("http://x/search?q=stale&scope=issues", "", "all")).toBe("/search");
+  });
+
+  it("preserves the existing pathname and hash", () => {
+    expect(buildSearchUrl("http://x/PAP/search?q=x#anchor", "y", "issues")).toBe(
+      "/PAP/search?q=y&scope=issues#anchor",
+    );
+  });
+});
+
+describe("Search page", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    breadcrumbState.setBreadcrumbs.mockReset();
+    dialogState.openNewIssue.mockReset();
+    navigateMock.mockReset();
+    searchApiMock.search.mockReset();
+    agentsApiMock.list.mockReset();
+    projectsApiMock.list.mockReset();
+    agentsApiMock.list.mockResolvedValue([]);
+    projectsApiMock.list.mockResolvedValue([]);
+    window.localStorage.clear();
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  it("issues a search request when ?q is in the URL and renders the result", async () => {
+    searchApiMock.search.mockResolvedValueOnce({
+      query: "auth flake",
+      normalizedQuery: "auth flake",
+      scope: "all",
+      limit: 20,
+      offset: 0,
+      countsByType: { issue: 1, agent: 0, project: 0 },
+      hasMore: false,
+      results: [
+        {
+          id: "issue-1",
+          type: "issue",
+          score: 100,
+          title: "PAP-3142 Auth middleware flakes",
+          href: "/PAP/issues/PAP-3142",
+          matchedFields: ["title", "comment"],
+          sourceLabel: "Comment",
+          snippet: "we hit another flake",
+          snippets: [
+            {
+              field: "title",
+              label: "Title",
+              text: "Auth middleware flakes",
+              highlights: [{ start: 0, end: 4 }],
+            },
+            {
+              field: "comment",
+              label: "Comment",
+              text: "we hit another flake in the morning batch",
+              highlights: [{ start: 16, end: 21 }],
+            },
+          ],
+          issue: {
+            id: "issue-1",
+            identifier: "PAP-3142",
+            title: "Auth middleware flakes",
+            status: "in_progress",
+            priority: "medium",
+            assigneeAgentId: null,
+            assigneeUserId: null,
+            projectId: null,
+            updatedAt: new Date().toISOString(),
+          },
+          updatedAt: new Date().toISOString(),
+        },
+      ],
+    });
+
+    const { root } = renderSearch("/search?q=auth+flake", container);
+
+    await waitForAssertion(() => {
+      expect(searchApiMock.search).toHaveBeenCalledWith("company-1", {
+        q: "auth flake",
+        scope: "all",
+        limit: 20,
+      });
+    });
+
+    await waitForAssertion(() => {
+      expect(container.textContent).toContain("PAP-3142");
+      expect(container.textContent).toContain("Auth middleware flakes");
+      expect(container.textContent).toContain("1 result");
+    });
+
+    act(() => {
+      root.unmount();
+    });
+  });
+
+  it("debounces typing into the input and dispatches a search after the debounce window", async () => {
+    searchApiMock.search.mockResolvedValue({
+      query: "deflake",
+      normalizedQuery: "deflake",
+      scope: "all",
+      limit: 20,
+      offset: 0,
+      countsByType: { issue: 0, agent: 0, project: 0 },
+      hasMore: false,
+      results: [],
+    });
+
+    const { root } = renderSearch("/search", container);
+
+    const input = container.querySelector('input[aria-label="Search query"]') as HTMLInputElement;
+    expect(input).not.toBeNull();
+
+    act(() => {
+      const nativeSetter = Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        "value",
+      )!.set!;
+      nativeSetter.call(input, "deflake");
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+
+    // The debounce hasn't fired yet, so no API call should be made synchronously.
+    expect(searchApiMock.search).not.toHaveBeenCalled();
+
+    await new Promise((resolve) => setTimeout(resolve, 350));
+
+    await waitForAssertion(() => {
+      expect(searchApiMock.search).toHaveBeenCalledWith("company-1", {
+        q: "deflake",
+        scope: "all",
+        limit: 20,
+      });
+    });
+
+    act(() => {
+      root.unmount();
+    });
+  });
+
+  it("renders the no-results state with a Search-all action when scope is non-default", async () => {
+    searchApiMock.search.mockResolvedValueOnce({
+      query: "ghost",
+      normalizedQuery: "ghost",
+      scope: "comments",
+      limit: 20,
+      offset: 0,
+      countsByType: { issue: 0, agent: 0, project: 0 },
+      hasMore: false,
+      results: [],
+    });
+
+    const { root } = renderSearch("/search?q=ghost&scope=comments", container);
+
+    await waitForAssertion(() => {
+      expect(container.textContent).toContain("No results for");
+      expect(container.textContent).toContain("ghost");
+      expect(container.textContent).toContain("Search all scopes");
+    });
+
+    act(() => {
+      root.unmount();
+    });
+  });
+});

ui/src/pages/Search.tsx

@@ -0,0 +1,640 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Search as SearchIcon, AlertTriangle, FileQuestion, Plus, X } from "lucide-react";
+import {
+  COMPANY_SEARCH_DEFAULT_LIMIT,
+  COMPANY_SEARCH_SCOPES,
+  type CompanySearchResponse,
+  type CompanySearchResult,
+  type CompanySearchScope,
+} from "@paperclipai/shared";
+import { Tabs, TabsContent } from "@/components/ui/tabs";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Badge } from "@/components/ui/badge";
+import { useNavigate, useSearchParams } from "@/lib/router";
+import { useCompany } from "../context/CompanyContext";
+import { useBreadcrumbs } from "../context/BreadcrumbContext";
+import { useDialogActions } from "../context/DialogContext";
+import { searchApi } from "../api/search";
+import { agentsApi } from "../api/agents";
+import { projectsApi } from "../api/projects";
+import { queryKeys } from "../lib/queryKeys";
+import { loadRecentSearches, pushRecentSearch } from "../lib/recent-searches";
+import { PageTabBar, type PageTabItem } from "../components/PageTabBar";
+import { IssueGroupHeader } from "../components/IssueGroupHeader";
+import { SearchResultRow } from "../components/search/SearchResultRow";
+import type { Agent, Project } from "@paperclipai/shared";
+
+const SEARCH_DEBOUNCE_MS = 250;
+const IDENTIFIER_PATTERN = /^[A-Z]+-\d+$/;
+
+const SCOPE_LABELS: Record<CompanySearchScope, string> = {
+  all: "All",
+  issues: "Issues",
+  comments: "Comments",
+  documents: "Documents",
+  agents: "Agents",
+  projects: "Projects",
+};
+
+type SubGroupKey = "issues" | "comments" | "documents" | "agents" | "projects";
+
+const SUBGROUP_ORDER: SubGroupKey[] = ["issues", "comments", "documents", "agents", "projects"];
+
+const SUBGROUP_LABELS: Record<SubGroupKey, string> = {
+  issues: "Issues",
+  comments: "Comments",
+  documents: "Documents",
+  agents: "Agents",
+  projects: "Projects",
+};
+
+function classifyResult(result: CompanySearchResult): SubGroupKey {
+  if (result.type === "agent") return "agents";
+  if (result.type === "project") return "projects";
+  const matched = new Set(result.matchedFields);
+  if (matched.has("title") || matched.has("identifier") || matched.has("description")) return "issues";
+  if (matched.has("comment")) return "comments";
+  if (matched.has("document")) return "documents";
+  return "issues";
+}
+
+function buildSubgroups(results: CompanySearchResult[]): Array<{ key: SubGroupKey; results: CompanySearchResult[] }> {
+  const buckets = new Map<SubGroupKey, CompanySearchResult[]>();
+  for (const result of results) {
+    const key = classifyResult(result);
+    const list = buckets.get(key) ?? [];
+    list.push(result);
+    buckets.set(key, list);
+  }
+  return SUBGROUP_ORDER.filter((key) => (buckets.get(key)?.length ?? 0) > 0).map((key) => ({
+    key,
+    results: buckets.get(key) ?? [],
+  }));
+}
+
+function isCompanySearchScope(value: string | null): value is CompanySearchScope {
+  return Boolean(value) && (COMPANY_SEARCH_SCOPES as readonly string[]).includes(value as string);
+}
+
+function describeScope(scope: CompanySearchScope) {
+  if (scope === "all") return "All scopes";
+  return SCOPE_LABELS[scope];
+}
+
+export function buildSearchUrl(href: string, query: string, scope: CompanySearchScope): string {
+  const url = new URL(href);
+  if (query.length === 0) {
+    url.searchParams.delete("q");
+  } else {
+    url.searchParams.set("q", query);
+  }
+  if (scope === "all") {
+    url.searchParams.delete("scope");
+  } else {
+    url.searchParams.set("scope", scope);
+  }
+  return `${url.pathname}${url.search}${url.hash}`;
+}
+
+function shapeError(error: unknown): { message: string; status?: number } {
+  if (!error) return { message: "Unknown error" };
+  if (error instanceof Error) {
+    const status = (error as Error & { status?: number }).status;
+    return { message: error.message, status: typeof status === "number" ? status : undefined };
+  }
+  return { message: String(error) };
+}
+
+export function Search() {
+  const { selectedCompanyId } = useCompany();
+  const { setBreadcrumbs } = useBreadcrumbs();
+  const { openNewIssue } = useDialogActions();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  const urlQuery = searchParams.get("q") ?? "";
+  const urlScopeRaw = searchParams.get("scope");
+  const urlScope: CompanySearchScope = isCompanySearchScope(urlScopeRaw) ? urlScopeRaw : "all";
+
+  const [draftQuery, setDraftQuery] = useState(urlQuery);
+  const [committedQuery, setCommittedQuery] = useState(urlQuery);
+  const [scope, setScope] = useState<CompanySearchScope>(urlScope);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const lastUrlSyncRef = useRef<string>("");
+  const lastIdentifierRedirectRef = useRef<string>("");
+  const [recentSearches, setRecentSearches] = useState<string[]>([]);
+
+  useEffect(() => {
+    setBreadcrumbs([{ label: "Search" }]);
+  }, [setBreadcrumbs]);
+
+  useEffect(() => {
+    if (!selectedCompanyId) return;
+    setRecentSearches(loadRecentSearches(selectedCompanyId));
+  }, [selectedCompanyId]);
+
+  // Pull URL changes back into local state (e.g. browser back/forward).
+  useEffect(() => {
+    setDraftQuery(urlQuery);
+    setCommittedQuery(urlQuery);
+  }, [urlQuery]);
+
+  useEffect(() => {
+    setScope(urlScope);
+  }, [urlScope]);
+
+  // Debounce the draft query into committedQuery and write to URL via replaceState.
+  useEffect(() => {
+    if (draftQuery === committedQuery) return;
+    const handle = window.setTimeout(() => {
+      setCommittedQuery(draftQuery);
+      if (typeof window !== "undefined") {
+        const next = buildSearchUrl(window.location.href, draftQuery, scope);
+        if (next !== `${window.location.pathname}${window.location.search}${window.location.hash}` && next !== lastUrlSyncRef.current) {
+          lastUrlSyncRef.current = next;
+          window.history.replaceState(window.history.state, "", next);
+        }
+      }
+    }, SEARCH_DEBOUNCE_MS);
+    return () => window.clearTimeout(handle);
+  }, [draftQuery, committedQuery, scope]);
+
+  const handleScopeChange = useCallback(
+    (next: string) => {
+      if (!isCompanySearchScope(next) || next === scope) return;
+      setScope(next);
+      if (typeof window !== "undefined") {
+        const url = buildSearchUrl(window.location.href, committedQuery, next);
+        window.history.pushState(window.history.state, "", url);
+      }
+    },
+    [committedQuery, scope],
+  );
+
+  const trimmedQuery = committedQuery.trim();
+  const queryEnabled = !!selectedCompanyId && trimmedQuery.length > 0;
+
+  const { data, isFetching, error, refetch } = useQuery<CompanySearchResponse>({
+    queryKey: queryKeys.companySearch.search(
+      selectedCompanyId ?? "__no-company__",
+      trimmedQuery,
+      scope,
+      COMPANY_SEARCH_DEFAULT_LIMIT,
+      0,
+    ),
+    queryFn: () =>
+      searchApi.search(selectedCompanyId!, {
+        q: trimmedQuery,
+        scope,
+        limit: COMPANY_SEARCH_DEFAULT_LIMIT,
+      }),
+    enabled: queryEnabled,
+    placeholderData: (previousData) => previousData,
+  });
+
+  const { data: agents } = useQuery({
+    queryKey: queryKeys.agents.list(selectedCompanyId!),
+    queryFn: () => agentsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const { data: projects } = useQuery({
+    queryKey: queryKeys.projects.list(selectedCompanyId!),
+    queryFn: () => projectsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const agentsById = useMemo<ReadonlyMap<string, Pick<Agent, "id" | "name">>>(() => {
+    const map = new Map<string, Pick<Agent, "id" | "name">>();
+    for (const agent of agents ?? []) map.set(agent.id, agent);
+    return map;
+  }, [agents]);
+
+  const projectsById = useMemo<ReadonlyMap<string, Pick<Project, "id" | "name">>>(() => {
+    const map = new Map<string, Pick<Project, "id" | "name">>();
+    for (const project of projects ?? []) map.set(project.id, project);
+    return map;
+  }, [projects]);
+
+  // Persist recent searches once we have a successful response with a non-empty query.
+  useEffect(() => {
+    if (!selectedCompanyId) return;
+    if (!data || !trimmedQuery) return;
+    const next = pushRecentSearch(selectedCompanyId, trimmedQuery);
+    setRecentSearches(next);
+  }, [data, trimmedQuery, selectedCompanyId]);
+
+  // Identifier shortcut: when q matches PAP-123 and the API returns an exact identifier match, redirect to it.
+  useEffect(() => {
+    if (!data) return;
+    const upper = trimmedQuery.toUpperCase();
+    if (!IDENTIFIER_PATTERN.test(upper)) return;
+    if (lastIdentifierRedirectRef.current === upper) return;
+    const exact = data.results.find(
+      (result) => result.type === "issue" && result.issue?.identifier?.toUpperCase() === upper,
+    );
+    if (!exact?.issue) return;
+    lastIdentifierRedirectRef.current = upper;
+    navigate(exact.href.startsWith("/") ? exact.href : `/${exact.href}`, { replace: true });
+  }, [data, navigate, trimmedQuery]);
+
+  const handleClear = useCallback(() => {
+    setDraftQuery("");
+    setCommittedQuery("");
+    inputRef.current?.focus();
+    if (typeof window !== "undefined") {
+      const next = buildSearchUrl(window.location.href, "", scope);
+      window.history.replaceState(window.history.state, "", next);
+    }
+  }, [scope]);
+
+  const focusInput = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  // Global "/" focus shortcut.
+  useEffect(() => {
+    function handler(event: KeyboardEvent) {
+      if (event.key !== "/" || event.metaKey || event.ctrlKey || event.altKey) return;
+      const target = event.target as HTMLElement | null;
+      const tag = target?.tagName?.toLowerCase();
+      if (target?.isContentEditable || tag === "input" || tag === "textarea") return;
+      event.preventDefault();
+      focusInput();
+    }
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [focusInput]);
+
+  const counts = data?.countsByType ?? { issue: 0, agent: 0, project: 0 };
+  const totalResults = data?.results.length ?? 0;
+
+  const tabItems = useMemo<PageTabItem[]>(() => {
+    function pill(value: number) {
+      if (!data) return null;
+      return (
+        <Badge variant="outline" className="ml-1.5 px-1.5 py-0 text-[10px] tabular-nums font-normal">
+          {value}
+        </Badge>
+      );
+    }
+    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);
+      else if (value === "issues") count = issuesTotal;
+      else if (value === "agents") count = counts.agent ?? 0;
+      else if (value === "projects") count = counts.project ?? 0;
+      return {
+        value,
+        label: (
+          <span className="flex items-center">
+            {SCOPE_LABELS[value as CompanySearchScope]}
+            {count !== null ? pill(count) : null}
+          </span>
+        ),
+      } satisfies PageTabItem;
+    });
+  }, [counts, data]);
+
+  const subgroups = useMemo(() => buildSubgroups(data?.results ?? []), [data?.results]);
+
+  const showInitialState = !trimmedQuery;
+  const isLoading = queryEnabled && isFetching && !data;
+  const hasResults = !!data && totalResults > 0;
+  const isEmpty = !!data && !isFetching && totalResults === 0;
+  const hasError = !!error && !isLoading;
+  const apiError = hasError ? shapeError(error) : null;
+  const apiMessage = data?.results === undefined && data ? null : null;
+  void apiMessage;
+
+  function navigateIssuesFallback() {
+    navigate(`/issues?q=${encodeURIComponent(trimmedQuery)}`);
+  }
+
+  function handleRecentClick(value: string) {
+    setDraftQuery(value);
+    setCommittedQuery(value);
+    if (typeof window !== "undefined") {
+      const next = buildSearchUrl(window.location.href, value, scope);
+      window.history.replaceState(window.history.state, "", next);
+    }
+  }
+
+  function showAllScope() {
+    if (scope === "all") return;
+    handleScopeChange("all");
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col" data-page="search">
+      <div className="border-b border-border px-4 py-3 sm:px-6">
+        <h1 className="sr-only">Search</h1>
+        <div className="relative">
+          <SearchIcon className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            ref={inputRef}
+            autoFocus
+            value={draftQuery}
+            onChange={(event) => setDraftQuery(event.currentTarget.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Escape") {
+                if (draftQuery.length > 0) {
+                  event.preventDefault();
+                  handleClear();
+                } else {
+                  event.currentTarget.blur();
+                }
+              }
+            }}
+            placeholder="Search issues, comments, documents, agents, projects…"
+            aria-label="Search query"
+            className="h-10 pl-9 pr-20 text-sm"
+          />
+          {draftQuery.length > 0 ? (
+            <button
+              type="button"
+              onClick={handleClear}
+              aria-label="Clear search"
+              className="absolute right-12 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground hover:bg-accent/50"
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          ) : null}
+          <kbd
+            aria-hidden
+            className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground"
+          >
+            ⌘K
+          </kbd>
+        </div>
+      </div>
+
+      <Tabs value={scope} onValueChange={handleScopeChange} className="flex h-full min-h-0 flex-col">
+        <div className="border-b border-border px-2 sm:px-4">
+          <PageTabBar items={tabItems} value={scope} onValueChange={handleScopeChange} align="start" />
+        </div>
+
+        {COMPANY_SEARCH_SCOPES.map((scopeValue) => (
+          <TabsContent
+            key={scopeValue}
+            value={scopeValue}
+            className="flex h-full min-h-0 flex-col overflow-y-auto"
+          >
+            {scopeValue === scope ? (
+              <SearchTabContent
+                showInitialState={showInitialState}
+                isLoading={isLoading}
+                hasResults={hasResults}
+                hasError={hasError}
+                apiError={apiError}
+                isEmpty={isEmpty}
+                trimmedQuery={trimmedQuery}
+                scope={scope}
+                showAllScope={showAllScope}
+                navigateIssuesFallback={navigateIssuesFallback}
+                openNewIssue={() => openNewIssue({ title: trimmedQuery })}
+                refetch={() => void refetch()}
+                recentSearches={recentSearches}
+                onRecentClick={handleRecentClick}
+                subgroups={subgroups}
+                totalResults={totalResults}
+                isFetching={isFetching && !!data}
+                agentsById={agentsById}
+                projectsById={projectsById}
+              />
+            ) : null}
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  );
+}
+
+interface SearchTabContentProps {
+  showInitialState: boolean;
+  isLoading: boolean;
+  hasResults: boolean;
+  hasError: boolean;
+  apiError: { message: string; status?: number } | null;
+  isEmpty: boolean;
+  trimmedQuery: string;
+  scope: CompanySearchScope;
+  showAllScope: () => void;
+  navigateIssuesFallback: () => void;
+  openNewIssue: () => void;
+  refetch: () => void;
+  recentSearches: string[];
+  onRecentClick: (query: string) => void;
+  subgroups: Array<{ key: SubGroupKey; results: CompanySearchResult[] }>;
+  totalResults: number;
+  isFetching: boolean;
+  agentsById: ReadonlyMap<string, Pick<Agent, "id" | "name">>;
+  projectsById: ReadonlyMap<string, Pick<Project, "id" | "name">>;
+}
+
+function SearchTabContent({
+  showInitialState,
+  isLoading,
+  hasResults,
+  hasError,
+  apiError,
+  isEmpty,
+  trimmedQuery,
+  scope,
+  showAllScope,
+  navigateIssuesFallback,
+  openNewIssue,
+  refetch,
+  recentSearches,
+  onRecentClick,
+  subgroups,
+  totalResults,
+  isFetching,
+  agentsById,
+  projectsById,
+}: SearchTabContentProps) {
+  if (showInitialState) {
+    return (
+      <div className="mx-auto flex w-full max-w-2xl flex-col gap-4 px-4 py-10 sm:px-6">
+        <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.
+          </p>
+        </div>
+        {recentSearches.length > 0 ? (
+          <div>
+            <div className="mb-2 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+              Recent searches
+            </div>
+            <ul className="flex flex-col divide-y divide-border rounded-md border border-border">
+              {recentSearches.map((entry) => (
+                <li key={entry}>
+                  <button
+                    type="button"
+                    onClick={() => onRecentClick(entry)}
+                    className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-accent/40"
+                  >
+                    <SearchIcon className="h-3.5 w-3.5 text-muted-foreground" />
+                    <span className="flex-1 truncate">{entry}</span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : null}
+        <ul className="space-y-1 text-xs text-muted-foreground">
+          <li>
+            <span className="font-medium text-foreground">Identifier lookup:</span> type{" "}
+            <code className="rounded bg-muted px-1 py-0.5 text-[11px]">PAP-123</code> to jump straight to an issue.
+          </li>
+          <li>
+            <span className="font-medium text-foreground">Quoted phrases:</span> wrap a phrase in quotes to match the
+            exact sequence.
+          </li>
+          <li>
+            <span className="font-medium text-foreground">⌘K:</span> reopens the command palette pre-seeded with your
+            current query.
+          </li>
+        </ul>
+      </div>
+    );
+  }
+
+  if (hasError) {
+    const status = apiError?.status;
+    return (
+      <div className="mx-auto flex w-full max-w-xl flex-col items-center justify-center gap-3 px-4 py-12 text-center">
+        <AlertTriangle className="h-10 w-10 text-destructive" aria-hidden />
+        <div className="text-base font-semibold">Couldn’t run that search</div>
+        <p className="text-sm text-muted-foreground">
+          {status ? `The server returned ${status}.` : "The request failed."} Your input and filters are still here, so
+          you can retry or fall back to the Issues filter.
+        </p>
+        <div className="flex flex-wrap items-center justify-center gap-2">
+          <Button onClick={refetch} variant="default" size="sm">
+            Retry
+          </Button>
+          <Button onClick={navigateIssuesFallback} variant="outline" size="sm">
+            Open Issues filter view
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col gap-2 px-2 py-3 sm:px-4">
+        <div className="px-3 text-xs text-muted-foreground" data-testid="search-loading">
+          Searching for &ldquo;{trimmedQuery}&rdquo;…
+        </div>
+        <div className="flex flex-col">
+          <div className="px-3 py-2">
+            <Skeleton className="h-3 w-24" />
+          </div>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <div key={index} className="flex items-start gap-3 px-3 py-2">
+              <Skeleton className="mt-1 h-4 w-4 rounded-full" />
+              <div className="flex flex-1 flex-col gap-1.5">
+                <Skeleton className="h-3 w-3/4" />
+                <Skeleton className="h-3 w-1/2" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (isEmpty) {
+    return (
+      <div className="mx-auto flex w-full max-w-xl flex-col items-center justify-center gap-3 px-4 py-12 text-center">
+        <FileQuestion className="h-10 w-10 text-muted-foreground" aria-hidden />
+        <div className="text-base font-semibold">No results for &ldquo;{trimmedQuery}&rdquo;</div>
+        <p className="text-sm text-muted-foreground">
+          We couldn’t find a match in {describeScope(scope).toLowerCase()}. Try widening the scope or rephrasing your
+          query.
+        </p>
+        <div className="flex flex-wrap items-center justify-center gap-2">
+          {scope !== "all" ? (
+            <Button onClick={showAllScope} size="sm" variant="outline">
+              Search all scopes
+            </Button>
+          ) : null}
+          <Button onClick={openNewIssue} size="sm" variant="default">
+            <Plus className="mr-1.5 h-4 w-4" />
+            Create issue from this query
+          </Button>
+          <Button onClick={navigateIssuesFallback} size="sm" variant="ghost">
+            Open Issues filter view
+          </Button>
+        </div>
+        <ul className="mt-2 space-y-0.5 text-xs text-muted-foreground">
+          <li>Try fewer tokens or a single distinctive term.</li>
+          <li>
+            Use an identifier shortcut like <code className="rounded bg-muted px-1 py-0.5">PAP-123</code>.
+          </li>
+          <li>Wrap multi-word phrases in quotes.</li>
+        </ul>
+      </div>
+    );
+  }
+
+  if (!hasResults) return null;
+
+  return (
+    <div className="flex flex-col" data-testid="search-results">
+      <div className="flex items-center justify-between border-b border-border px-3 py-1.5 text-xs text-muted-foreground">
+        <span>
+          {totalResults === 1 ? "1 result" : `${totalResults} results`} · sorted by relevance
+        </span>
+        {isFetching ? <span aria-live="polite">Updating…</span> : null}
+      </div>
+      <div className="flex flex-col">
+        {scope === "all" ? (
+          subgroups.map((group) => (
+            <section key={group.key} aria-label={SUBGROUP_LABELS[group.key]} className="flex flex-col">
+              <IssueGroupHeader
+                label={SUBGROUP_LABELS[group.key]}
+                trailing={
+                  <span className="text-xs font-normal tabular-nums text-muted-foreground">
+                    {group.results.length}
+                  </span>
+                }
+                className="border-b border-border bg-muted/30"
+              />
+              <div className="flex flex-col divide-y divide-border">
+                {group.results.map((result) => (
+                  <SearchResultRow
+                    key={`${result.type}:${result.id}:${result.href}`}
+                    result={result}
+                    agentsById={agentsById}
+                    projectsById={projectsById}
+                  />
+                ))}
+              </div>
+            </section>
+          ))
+        ) : (
+          <div className="flex flex-col divide-y divide-border">
+            {subgroups
+              .flatMap((group) => group.results)
+              .map((result) => (
+                <SearchResultRow
+                  key={`${result.type}:${result.id}:${result.href}`}
+                  result={result}
+                  agentsById={agentsById}
+                  projectsById={projectsById}
+                />
+              ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}