perf(search): cap Cmd-K result groups so typing isn't blocked by reshuffle

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx

@@ -70,7 +70,7 @@ import type {
   WorkflowItem,
   WorkspaceItem,
 } from './utils'
-import { filterAndSort } from './utils'
+import { filterAndCap, filterAndSort } from './utils'
 
 const logger = createLogger('SearchModal')
 
@@ -575,60 +575,69 @@ export function SearchModal({
   }, [actions, isOnWorkflowPage, isOnIntegrationsPage, deferredSearch])
 
   /**
-   * Ranking matches against clean, human-meaningful text only (names, types,
-   * aliases, folder paths) — never the structural `<type>-<id>`/uuid tokens used
-   * for cmdk row identity. Those tokens carry letters (e.g. "block", "tool") that
-   * would otherwise let short fuzzy queries scatter-match unrelated items.
+   * Blocks and tools rank by name first, with `searchValue` (type + option
+   * labels) as a lower-tier fallback, so an exact name match wins while a block
+   * stays findable by an option label.
    */
   const filteredBlocks = useMemo(() => {
     if (!isOnWorkflowPage) return []
-    return filterAndSort(blocks, (b) => b.searchValue ?? b.name, deferredSearch)
+    return filterAndCap(
+      blocks,
+      (b) => b.name,
+      deferredSearch,
+      (b) => b.searchValue
+    )
   }, [isOnWorkflowPage, blocks, deferredSearch])
 
   const filteredTools = useMemo(() => {
     if (!isOnWorkflowPage) return []
-    return filterAndSort(tools, (t) => t.searchValue ?? t.name, deferredSearch)
+    return filterAndCap(
+      tools,
+      (t) => t.name,
+      deferredSearch,
+      (t) => t.searchValue
+    )
   }, [isOnWorkflowPage, tools, deferredSearch])
 
   const filteredTriggers = useMemo(() => {
     if (!isOnWorkflowPage) return []
-    return filterAndSort(triggers, (t) => `${t.name} ${t.id}`, deferredSearch)
+    return filterAndCap(triggers, (t) => `${t.name} ${t.id}`, deferredSearch)
   }, [isOnWorkflowPage, triggers, deferredSearch])
 
   const filteredToolOps = useMemo(() => {
     if (!isOnWorkflowPage) return []
-    return filterAndSort(toolOperations, (op) => op.searchValue, deferredSearch)
+    return filterAndCap(toolOperations, (op) => op.searchValue, deferredSearch)
   }, [isOnWorkflowPage, toolOperations, deferredSearch])
 
   const filteredDocs = useMemo(() => {
     if (!isOnWorkflowPage) return []
-    return filterAndSort(docs, (d) => `${d.name} docs documentation`, deferredSearch)
+    return filterAndCap(docs, (d) => `${d.name} docs documentation`, deferredSearch)
   }, [isOnWorkflowPage, docs, deferredSearch])
 
   const filteredTables = useMemo(
-    () => filterAndSort(tables, (t) => t.name, deferredSearch),
+    () => filterAndCap(tables, (t) => t.name, deferredSearch),
     [tables, deferredSearch]
   )
   const filteredFiles = useMemo(
-    () => filterAndSort(files, (f) => `${f.name} ${f.folderPath?.join(' ') ?? ''}`, deferredSearch),
+    () => filterAndCap(files, (f) => `${f.name} ${f.folderPath?.join(' ') ?? ''}`, deferredSearch),
     [files, deferredSearch]
   )
   const filteredKnowledgeBases = useMemo(
-    () => filterAndSort(knowledgeBases, (kb) => kb.name, deferredSearch),
+    () => filterAndCap(knowledgeBases, (kb) => kb.name, deferredSearch),
     [knowledgeBases, deferredSearch]
   )
 
   const filteredWorkflows = useMemo(
     () =>
-      filterAndSort(workflows, (w) => `${w.name} ${w.folderPath?.join(' ') ?? ''}`, deferredSearch),
+      filterAndCap(workflows, (w) => `${w.name} ${w.folderPath?.join(' ') ?? ''}`, deferredSearch),
     [workflows, deferredSearch]
   )
   const filteredChats = useMemo(
-    () => filterAndSort(chats, (t) => t.name, deferredSearch),
+    () => filterAndCap(chats, (t) => t.name, deferredSearch),
     [chats, deferredSearch]
   )
   const filteredWorkspaces = useMemo(
-    () => filterAndSort(workspaces, (w) => w.name, deferredSearch),
+    () => filterAndCap(workspaces, (w) => w.name, deferredSearch),
     [workspaces, deferredSearch]
   )
   const filteredPages = useMemo(
@@ -639,13 +648,13 @@ export function SearchModal({
   /** Connected accounts: visible on the integrations page even with empty input. */
   const filteredConnectedAccounts = useMemo(() => {
     if (!isOnIntegrationsPage) return []
-    return filterAndSort(connectedAccounts, (a) => a.name, deferredSearch)
+    return filterAndCap(connectedAccounts, (a) => a.name, deferredSearch)
   }, [isOnIntegrationsPage, connectedAccounts, deferredSearch])
 
   /** Catalog integrations: only shown once the user has typed something. */
   const filteredIntegrations = useMemo(() => {
-    if (!isOnIntegrationsPage || !deferredSearch) return []
-    return filterAndSort(integrations, (i) => i.name, deferredSearch)
+    if (!isOnIntegrationsPage || !deferredSearch.trim()) return []
+    return filterAndCap(integrations, (i) => i.name, deferredSearch)
   }, [isOnIntegrationsPage, deferredSearch, integrations])
 
   if (!mounted) return null

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.test.ts

@@ -2,7 +2,7 @@
  * @vitest-environment node
  */
 import { describe, expect, it } from 'vitest'
-import { filterAndSort, fuzzyMatch } from './utils'
+import { filterAndCap, filterAndSort, fuzzyMatch, MAX_RESULTS_PER_GROUP } from './utils'
 
 /**
  * The matcher that shipped before fuzzy matching was introduced. Re-implemented
@@ -241,3 +241,77 @@ describe('fuzzyMatch — positions for highlighting', () => {
     expect(result.matched).toBe(true)
   })
 })
+
+describe('filterAndSort — name ranked above secondary text', () => {
+  interface Item {
+    name: string
+    searchValue: string
+  }
+  const toName = (i: Item) => i.name
+  const toExtra = (i: Item) => i.searchValue
+
+  it('ranks an exact name match above a substring buried in another item’s option text', () => {
+    const items: Item[] = [
+      // Matches "agent" only inside a long secondary string (its model catalog).
+      { name: 'Pi Coding Agent', searchValue: `Pi Coding Agent pi ${'model-x '.repeat(60)}` },
+      // Exact name match, but an even longer secondary string.
+      { name: 'Agent', searchValue: `Agent agent ${'claude-sonnet gpt-4o '.repeat(60)}` },
+    ]
+    const sorted = filterAndSort(items, toName, 'agent', toExtra)
+    expect(sorted[0].name).toBe('Agent')
+  })
+
+  it('keeps every name match above every secondary-only match', () => {
+    const items: Item[] = [
+      { name: 'Zeta', searchValue: 'Zeta agent agent agent' }, // strong secondary hit, no name hit
+      { name: 'Agent', searchValue: 'Agent agent' }, // name hit
+    ]
+    const sorted = filterAndSort(items, toName, 'agent', toExtra)
+    expect(sorted[0].name).toBe('Agent')
+  })
+
+  it('still surfaces an item matched only by its secondary text', () => {
+    const items: Item[] = [{ name: 'Agent', searchValue: 'Agent agent claude-sonnet gpt-4o' }]
+    expect(filterAndSort(items, toName, 'gpt-4o', toExtra)).toHaveLength(1)
+  })
+
+  it('is byte-identical to single-field ranking when no secondary accessor is given', () => {
+    const items = ['Slack message', 'Send message to Slack']
+    expect(filterAndSort(items, (s) => s, 'slack')).toEqual(
+      filterAndSort(items, (s) => s, 'slack', undefined)
+    )
+  })
+})
+
+describe('filterAndCap', () => {
+  const id = (s: string) => s
+
+  it('caps an active search to MAX_RESULTS_PER_GROUP', () => {
+    const items = Array.from({ length: MAX_RESULTS_PER_GROUP + 25 }, (_, i) => `item ${i}`)
+    expect(filterAndCap(items, id, 'item')).toHaveLength(MAX_RESULTS_PER_GROUP)
+  })
+
+  it('never caps the empty (browse) state, even above the cap', () => {
+    const items = Array.from({ length: MAX_RESULTS_PER_GROUP + 25 }, (_, i) => `item ${i}`)
+    const result = filterAndCap(items, id, '')
+    expect(result).toHaveLength(items.length)
+    expect(result).toBe(items)
+  })
+
+  it('treats whitespace-only input as browse: unfiltered and uncapped', () => {
+    const items = Array.from({ length: MAX_RESULTS_PER_GROUP + 25 }, (_, i) => `item ${i}`)
+    const result = filterAndCap(items, id, '   ')
+    expect(result).toBe(items)
+  })
+
+  it('returns every match untrimmed when under the cap', () => {
+    const items = ['Slack', 'Slate', 'Slalom']
+    expect(filterAndCap(items, id, 'sl')).toHaveLength(3)
+  })
+
+  it('caps to the top-ranked matches, preserving filterAndSort order', () => {
+    const items = Array.from({ length: MAX_RESULTS_PER_GROUP + 5 }, (_, i) => `item ${i}`)
+    const capped = filterAndCap(items, id, 'item')
+    expect(capped).toEqual(filterAndSort(items, id, 'item').slice(0, MAX_RESULTS_PER_GROUP))
+  })
+})

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts

@@ -243,17 +243,65 @@ export function fuzzyMatch(text: string, query: string): FuzzyResult {
   return tokenFallback(lowerText, lowerQuery)
 }
 
+/** Rank offset that lifts every name match above any secondary-text match. */
+const NAME_MATCH_TIER = 1_000_000
+
 /**
- * Filters items whose value fuzzy-matches the search, ordered by descending
- * score. Returns the input untouched when the search is empty.
+ * Ranks an item by its name first, falling back to secondary text (ids, aliases,
+ * option labels) only when the name doesn't match — a name match always wins, so
+ * an exact name hit isn't diluted by a long secondary string ("Agent" beats
+ * "Pi Coding Agent" for the query "agent").
  */
-export function filterAndSort<T>(items: T[], toValue: (item: T) => string, search: string): T[] {
-  if (!search) return items
+function scoreItem(name: string, extra: string | undefined, search: string): FuzzyResult {
+  const byName = fuzzyMatch(name, search)
+  if (!extra) return byName
+  if (byName.matched) {
+    return { matched: true, score: byName.score + NAME_MATCH_TIER, positions: byName.positions }
+  }
+  const byExtra = fuzzyMatch(extra, search)
+  return byExtra.matched ? byExtra : NO_MATCH
+}
+
+/**
+ * Filters and ranks items by fuzzy match, highest score first; returns the input
+ * unchanged when the search is empty or whitespace-only. Pass `toExtra` to rank
+ * the name first and fall back to secondary text.
+ */
+export function filterAndSort<T>(
+  items: T[],
+  toValue: (item: T) => string,
+  search: string,
+  toExtra?: (item: T) => string | undefined
+): T[] {
+  const query = search.trim()
+  if (!query) return items
   const scored: Array<{ item: T; score: number }> = []
   for (const item of items) {
-    const { matched, score } = fuzzyMatch(toValue(item), search)
+    const { matched, score } = scoreItem(toValue(item), toExtra?.(item), query)
     if (matched) scored.push({ item, score })
   }
   scored.sort((a, b) => b.score - a.score)
   return scored.map((entry) => entry.item)
 }
+
+/**
+ * Max rows rendered per group while searching. Re-rendering an unbounded,
+ * reshuffling match set every keystroke is what stalls typing; results are
+ * score-sorted, so the cap only drops the low-relevance tail.
+ */
+export const MAX_RESULTS_PER_GROUP = 50
+
+/**
+ * {@link filterAndSort} bounded to {@link MAX_RESULTS_PER_GROUP} while searching,
+ * so the per-keystroke render can't block typing. The empty browse state is
+ * returned in full.
+ */
+export function filterAndCap<T>(
+  items: T[],
+  toValue: (item: T) => string,
+  search: string,
+  toExtra?: (item: T) => string | undefined
+): T[] {
+  const results = filterAndSort(items, toValue, search, toExtra)
+  return search.trim() ? results.slice(0, MAX_RESULTS_PER_GROUP) : results
+}