perf(web): precompute command palette search indexes (#7)

Precompute normalized search terms and haystacks for project and thread command palette entries so each search keystroke reuses indexed data instead of repeatedly normalizing large item lists.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: ronak-guliani

apps/web/src/components/CommandPalette.logic.test.ts

@@ -1,7 +1,9 @@
 import { describe, expect, it, vi } from "vitest";
 import { EnvironmentId, ProjectId, ProviderInstanceId, ThreadId } from "@t3tools/contracts";
-import type { Thread } from "../types";
+import type { Project, Thread } from "../types";
 import {
+  buildCommandPaletteSearchIndex,
+  buildProjectActionItems,
   buildThreadActionItems,
   filterCommandPaletteGroups,
   type CommandPaletteGroup,
@@ -10,6 +12,19 @@ import {
 const LOCAL_ENVIRONMENT_ID = EnvironmentId.make("environment-local");
 const PROJECT_ID = ProjectId.make("project-1");
 
+function makeProject(overrides: Partial<Project> = {}): Project {
+  return {
+    id: PROJECT_ID,
+    environmentId: LOCAL_ENVIRONMENT_ID,
+    name: "Project",
+    cwd: "/Users/example/project",
+    repositoryIdentity: null,
+    defaultModelSelection: null,
+    scripts: [],
+    ...overrides,
+  };
+}
+
 function makeThread(overrides: Partial<Thread> = {}): Thread {
   return {
     id: ThreadId.make("thread-1"),
@@ -37,6 +52,48 @@ function makeThread(overrides: Partial<Thread> = {}): Thread {
   };
 }
 
+describe("buildCommandPaletteSearchIndex", () => {
+  it("normalizes terms once for filtering and ranking", () => {
+    expect(buildCommandPaletteSearchIndex(["  Fix   Navbar  ", "", "Feature/Branch"])).toEqual({
+      normalizedTerms: ["fix navbar", "feature/branch"],
+      haystack: "fix navbar feature/branch",
+    });
+  });
+});
+
+describe("buildProjectActionItems", () => {
+  it("precomputes search indexes for project results", () => {
+    const items = buildProjectActionItems({
+      projects: [
+        makeProject({
+          name: "Web App",
+          cwd: "/Users/example/large project",
+        }),
+      ],
+      valuePrefix: "project",
+      icon: () => null,
+      runProject: async (_project) => undefined,
+    });
+
+    expect(items[0]?.searchIndex).toEqual({
+      normalizedTerms: ["web app", "/users/example/large project"],
+      haystack: "web app /users/example/large project",
+    });
+
+    const groups = filterCommandPaletteGroups({
+      activeGroups: [],
+      query: "large project",
+      isInSubmenu: false,
+      projectSearchItems: items,
+      threadSearchItems: [],
+    });
+
+    expect(groups[0]?.items.map((item) => item.value)).toEqual([
+      "project:environment-local:project-1",
+    ]);
+  });
+});
+
 describe("buildThreadActionItems", () => {
   it("orders threads by most recent activity and formats timestamps from updatedAt", () => {
     vi.useFakeTimers();

apps/web/src/components/CommandPalette.logic.ts

@@ -13,6 +13,7 @@ export interface CommandPaletteItem {
   readonly kind: "action" | "submenu";
   readonly value: string;
   readonly searchTerms: ReadonlyArray<string>;
+  readonly searchIndex?: CommandPaletteSearchIndex;
   readonly title: ReactNode;
   readonly description?: string;
   readonly timestamp?: string;
@@ -24,6 +25,11 @@ export interface CommandPaletteItem {
   readonly shortcutCommand?: KeybindingCommand;
 }
 
+export interface CommandPaletteSearchIndex {
+  readonly normalizedTerms: ReadonlyArray<string>;
+  readonly haystack: string;
+}
+
 export interface CommandPaletteActionItem extends CommandPaletteItem {
   readonly kind: "action";
   readonly keepOpen?: boolean;
@@ -87,23 +93,39 @@ export function normalizeSearchText(value: string): string {
   return value.trim().toLowerCase().replace(/\s+/g, " ");
 }
 
+export function buildCommandPaletteSearchIndex(
+  searchTerms: ReadonlyArray<string>,
+): CommandPaletteSearchIndex {
+  return {
+    normalizedTerms: searchTerms
+      .filter((term) => term.length > 0)
+      .map((term) => normalizeSearchText(term)),
+    haystack: normalizeSearchText(searchTerms.join(" ")),
+  };
+}
+
 export function buildProjectActionItems(input: {
   projects: ReadonlyArray<Project>;
   valuePrefix: string;
   icon: (project: Project) => ReactNode;
   runProject: (project: Project) => Promise<void>;
 }): CommandPaletteActionItem[] {
-  return input.projects.map((project) => ({
-    kind: "action",
-    value: `${input.valuePrefix}:${project.environmentId}:${project.id}`,
-    searchTerms: [project.name, project.cwd],
-    title: project.name,
-    description: project.cwd,
-    icon: input.icon(project),
-    run: async () => {
-      await input.runProject(project);
-    },
-  }));
+  return input.projects.map((project) => {
+    const searchTerms = [project.name, project.cwd];
+
+    return {
+      kind: "action",
+      value: `${input.valuePrefix}:${project.environmentId}:${project.id}`,
+      searchTerms,
+      searchIndex: buildCommandPaletteSearchIndex(searchTerms),
+      title: project.name,
+      description: project.cwd,
+      icon: input.icon(project),
+      run: async () => {
+        await input.runProject(project);
+      },
+    };
+  });
 }
 
 export type BuildThreadActionItemsThread = Pick<
@@ -150,12 +172,14 @@ export function buildThreadActionItems<TThread extends BuildThreadActionItemsThr
 
     const leadingContent = input.renderLeadingContent?.(thread);
     const trailingContent = input.renderTrailingContent?.(thread);
+    const searchTerms = [thread.title, projectTitle ?? ``, thread.branch ?? ``];
 
     return Object.assign(
       {
         kind: "action" as const,
         value: `thread:${thread.id}`,
-        searchTerms: [thread.title, projectTitle ?? ``, thread.branch ?? ``],
+        searchTerms,
+        searchIndex: buildCommandPaletteSearchIndex(searchTerms),
         title: thread.title,
         description: descriptionParts.join(` · `),
         timestamp: formatRelativeTimeLabel(
@@ -174,8 +198,7 @@ export function buildThreadActionItems<TThread extends BuildThreadActionItemsThr
   });
 }
 
-function rankSearchFieldMatch(field: string, normalizedQuery: string): number {
-  const normalizedField = normalizeSearchText(field);
+function rankNormalizedSearchFieldMatch(normalizedField: string, normalizedQuery: string): number {
   if (normalizedField.length === 0 || !normalizedField.includes(normalizedQuery)) {
     return Number.NEGATIVE_INFINITY;
   }
@@ -188,19 +211,24 @@ function rankSearchFieldMatch(field: string, normalizedQuery: string): number {
   return 1;
 }
 
-function rankCommandPaletteItemMatch(
+function getCommandPaletteSearchIndex(
   item: CommandPaletteActionItem | CommandPaletteSubmenuItem,
+): CommandPaletteSearchIndex {
+  return item.searchIndex ?? buildCommandPaletteSearchIndex(item.searchTerms);
+}
+
+function rankCommandPaletteSearchIndexMatch(
+  index: CommandPaletteSearchIndex,
   normalizedQuery: string,
 ): number {
-  const terms = item.searchTerms.filter((term) => term.length > 0);
-  if (terms.length === 0) {
+  if (index.normalizedTerms.length === 0) {
     return 0;
   }
 
-  for (const [index, field] of terms.entries()) {
-    const fieldRank = rankSearchFieldMatch(field, normalizedQuery);
+  for (const [termIndex, normalizedField] of index.normalizedTerms.entries()) {
+    const fieldRank = rankNormalizedSearchFieldMatch(normalizedField, normalizedQuery);
     if (fieldRank !== Number.NEGATIVE_INFINITY) {
-      return 1_000 - index * 100 + fieldRank;
+      return 1_000 - termIndex * 100 + fieldRank;
     }
   }
 
@@ -253,15 +281,15 @@ export function filterCommandPaletteGroups(input: {
   return searchableGroups.flatMap((group) => {
     const items = group.items
       .map((item, index) => {
-        const haystack = normalizeSearchText(item.searchTerms.join(" "));
-        if (!haystack.includes(normalizedQuery)) {
+        const searchIndex = getCommandPaletteSearchIndex(item);
+        if (!searchIndex.haystack.includes(normalizedQuery)) {
           return null;
         }
 
         return {
           item,
           index,
-          rank: rankCommandPaletteItemMatch(item, normalizedQuery),
+          rank: rankCommandPaletteSearchIndexMatch(searchIndex, normalizedQuery),
         };
       })
       .filter(