From 72049f1ed974f264f05fc06c1d37abb62f57a2dc Mon Sep 17 00:00:00 2001
From: Cosmin Popovici <hellocosmin@gmail.com>
Date: Sat, 15 Aug 2026 15:32:32 +0300
Subject: [PATCH 1/2] perf(serve): cap command palette template results to keep
 it responsive
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rendering every template as a CommandItem froze the palette on the first
keystroke in large projects (1000s of templates) — all instances mounted
at once. Render only the matches, capped at 50, with a "showing N of M"
hint when truncated.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/server/ui/App.vue | 44 ++++++++++++++++++++++++++++---------------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/server/ui/App.vue b/src/server/ui/App.vue
index 7c629d55..ba35205d 100644
--- a/src/server/ui/App.vue
+++ b/src/server/ui/App.vue
@@ -211,21 +211,15 @@ async function copySource() {
   await navigator.clipboard.writeText(el.textContent || '')
 }
 
-const commandGrouped = computed(() => {
-  const groups: Record<string, Template[]> = {}
-
-  for (const t of templates.value) {
-    const parts = t.path.split('/')
-    const dir = parts.length > 1 ? parts.slice(0, -1).join('/') : '.'
-    if (!groups[dir]) groups[dir] = []
-    groups[dir].push(t)
-  }
-
-  return groups
-})
-
 const { contains } = useFilter({ sensitivity: 'base' })
 
+/**
+ * Cap how many template results render at once. Rendering every template as
+ * a CommandItem freezes the palette on the first keystroke in large projects
+ * (100s–1000s of templates), so we only render the matches, up to this many.
+ */
+const MAX_TEMPLATE_RESULTS = 50
+
 const filteredTemplatesCount = computed(() => {
   const tokens = commandSearch.value.split(/\s+/).filter(Boolean)
   if (tokens.length === 0) return 0
@@ -237,6 +231,25 @@ const filteredTemplatesCount = computed(() => {
   return count
 })
 
+/** The matching templates (capped), grouped by directory, for rendering. */
+const filteredCommandGrouped = computed(() => {
+  const groups: Record<string, Template[]> = {}
+  const tokens = commandSearch.value.split(/\s+/).filter(Boolean)
+  if (tokens.length === 0) return groups
+  let count = 0
+  for (const t of templates.value) {
+    const haystack = `${getFileName(t.path)} ${t.path.split('/').join(' ')}`
+    if (!tokens.every(token => contains(haystack, token))) continue
+    const parts = t.path.split('/')
+    const dir = parts.length > 1 ? parts.slice(0, -1).join('/') : '.'
+    ;(groups[dir] ??= []).push(t)
+    if (++count >= MAX_TEMPLATE_RESULTS) break
+  }
+  return groups
+})
+
+const templatesTruncated = computed(() => filteredTemplatesCount.value > MAX_TEMPLATE_RESULTS)
+
 function getFileName(path: string) {
   return path.split('/').pop() || path
 }
@@ -539,7 +552,7 @@ onUnmounted(() => {
 
         <!-- Templates -->
         <template v-if="commandSearch">
-          <CommandGroup v-for="(items, dir) in commandGrouped" :key="dir" :heading="String(dir)">
+          <CommandGroup v-for="(items, dir) in filteredCommandGrouped" :key="dir" :heading="String(dir)">
             <CommandItem
               v-for="t in items"
               :key="t.path"
@@ -568,7 +581,8 @@ onUnmounted(() => {
           Close
         </span>
         <span v-if="commandSearch" class="ml-auto">
-          {{ filteredTemplatesCount }} {{ filteredTemplatesCount === 1 ? 'result' : 'results' }}
+          <template v-if="templatesTruncated">Showing {{ MAX_TEMPLATE_RESULTS }} of {{ filteredTemplatesCount }} — refine to narrow</template>
+          <template v-else>{{ filteredTemplatesCount }} {{ filteredTemplatesCount === 1 ? 'result' : 'results' }}</template>
         </span>
       </div>
     </CommandDialog>

From 45e094835560afc5a3333b8c0b4c1b5a0091b050 Mon Sep 17 00:00:00 2001
From: Cosmin Popovici <hellocosmin@gmail.com>
Date: Sat, 15 Aug 2026 15:42:01 +0300
Subject: [PATCH 2/2] refactor(serve): match palette templates in a single pass

Fold the count and grouping into one computed so the search predicate and
haystack aren't duplicated or evaluated twice per keystroke.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/server/ui/App.vue | 38 +++++++++++++++++---------------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/server/ui/App.vue b/src/server/ui/App.vue
index ba35205d..2d8329c9 100644
--- a/src/server/ui/App.vue
+++ b/src/server/ui/App.vue
@@ -220,35 +220,31 @@ const { contains } = useFilter({ sensitivity: 'base' })
  */
 const MAX_TEMPLATE_RESULTS = 50
 
-const filteredTemplatesCount = computed(() => {
-  const tokens = commandSearch.value.split(/\s+/).filter(Boolean)
-  if (tokens.length === 0) return 0
-  let count = 0
-  for (const t of templates.value) {
-    const haystack = `${getFileName(t.path)} ${t.path.split('/').join(' ')}`
-    if (tokens.every(token => contains(haystack, token))) count++
-  }
-  return count
-})
-
-/** The matching templates (capped), grouped by directory, for rendering. */
-const filteredCommandGrouped = computed(() => {
+/**
+ * Match templates against the search in a single pass: count every match for
+ * the footer, but only group the first MAX_TEMPLATE_RESULTS for rendering.
+ */
+const templateResults = computed(() => {
   const groups: Record<string, Template[]> = {}
   const tokens = commandSearch.value.split(/\s+/).filter(Boolean)
-  if (tokens.length === 0) return groups
-  let count = 0
+  if (tokens.length === 0) return { groups, total: 0 }
+  let total = 0
   for (const t of templates.value) {
     const haystack = `${getFileName(t.path)} ${t.path.split('/').join(' ')}`
     if (!tokens.every(token => contains(haystack, token))) continue
-    const parts = t.path.split('/')
-    const dir = parts.length > 1 ? parts.slice(0, -1).join('/') : '.'
-    ;(groups[dir] ??= []).push(t)
-    if (++count >= MAX_TEMPLATE_RESULTS) break
+    total++
+    if (total <= MAX_TEMPLATE_RESULTS) {
+      const parts = t.path.split('/')
+      const dir = parts.length > 1 ? parts.slice(0, -1).join('/') : '.'
+      ;(groups[dir] ??= []).push(t)
+    }
   }
-  return groups
+  return { groups, total }
 })
 
-const templatesTruncated = computed(() => filteredTemplatesCount.value > MAX_TEMPLATE_RESULTS)
+const filteredCommandGrouped = computed(() => templateResults.value.groups)
+const filteredTemplatesCount = computed(() => templateResults.value.total)
+const templatesTruncated = computed(() => templateResults.value.total > MAX_TEMPLATE_RESULTS)
 
 function getFileName(path: string) {
   return path.split('/').pop() || path