feat(search): answer intents and repositories in the search box (#440)

* feat(registry): understand search intents and repository refs

The search box promises skills or repos, but a repo ref fell through to a
semantic search and called its own Skills loose matches, and a sentence was
searched word by word. A new internal /api/skills/search classifies the query
first: a URL or owner/repo answers with that Repository and its Skills, @login
with that owner, and a sentence passes through a small Workers AI model that
turns it into search terms and soft boosts before the existing hybrid search.

The model is cached per normalised query for a month, abandoned after 800ms,
skipped for names, refs and URLs, and gated by the guest rate limiter. The
frozen v1 skills.search answer is unchanged.

* feat(search): show run commands and repositories in the search box

Each Skill row now carries its run chip, and a Repository the registry holds
gets its own row, so the box answers both halves of its placeholder. The
panel becomes a grid because an option cannot contain a control: arrow
right moves to the run chip and Enter copies it.

The hero and header boxes share one composable for keys, selection and
navigation, so they stop disagreeing about what Enter does. The header
field widens while open, rows keep their names readable at phone width,
and the preview pane with its empty half is gone.

* fix(skills): name the meaning search without AI copy

COPY.md bans AI as a modifier on skilld. The search box now sends sentences
to this mode, so its label says what the mode does.

Author: harlan-zw

app/components/HomeSearch.vue

@@ -1,109 +1,28 @@
 <script setup lang="ts">
-import type { SearchRow } from '../composables/useSkillSearch'
 import { onClickOutside, onKeyStroke } from '@vueuse/core'
 
 const route = useRoute()
+const container = useTemplateRef<HTMLElement>('container')
+const input = useTemplateRef<{ inputRef?: HTMLInputElement }>('input')
+
+// Behaviour lives in the shared box composable, so the hero and the header
+// search answer, select, and navigate the same way.
 const {
   query,
   trimmedQuery,
   state,
   open,
-  rows,
-  activeIndex,
-  activeRow,
   close,
-  reset,
-  rememberQuery,
-  loadTypeaheadIndex,
-  submitRepository,
-} = useSkillSearch()
-
-const container = useTemplateRef<HTMLElement>('container')
-const input = useTemplateRef<{ inputRef?: HTMLInputElement }>('input')
-const keyboardSelection = ref(false)
-
-function clearSelection(): void {
-  keyboardSelection.value = false
-  activeIndex.value = -1
-}
-
-watch([trimmedQuery, rows], clearSelection, { flush: 'sync', immediate: true })
-watch(open, (visible) => {
-  if (!visible)
-    clearSelection()
-}, { flush: 'sync' })
-onBeforeUnmount(() => {
-  activeIndex.value = 0
-})
-
-function openPanel(): void {
-  if (!open.value)
-    clearSelection()
-  open.value = true
-  void loadTypeaheadIndex()
-}
-
-function dismiss(): void {
-  close()
-  input.value?.inputRef?.blur()
-}
-
-async function goToResults(): Promise<void> {
-  const term = trimmedQuery.value
-  rememberQuery(term)
-  dismiss()
-  await navigateTo(term ? { path: '/skills', query: { q: term } } : '/skills')
-}
-
-async function select(row: SearchRow): Promise<void> {
-  if (row._tag === 'repository') {
-    await submitRepository(row.repository)
-    return
-  }
-  if (row._tag === 'all') {
-    await goToResults()
-    return
-  }
-  if (state.value._tag !== 'repository')
-    rememberQuery(trimmedQuery.value)
-  dismiss()
-  reset()
-  await navigateTo(row.skill.registryPath)
-}
-
-function submitQuery(): void {
-  if (state.value._tag === 'repository') {
-    if (state.value.status._tag === 'idle')
-      void submitRepository(state.value.repository)
-    return
-  }
-  void goToResults()
-}
-
-function onEnter(event: KeyboardEvent): void {
-  if (event.isComposing || event.keyCode === 229)
-    return
-  event.preventDefault()
-  if (open.value && keyboardSelection.value && activeRow.value) {
-    void select(activeRow.value)
-    return
-  }
-  submitQuery()
-}
-
-function onArrow(event: KeyboardEvent, delta: number): void {
-  if (event.isComposing || event.keyCode === 229)
-    return
-  event.preventDefault()
-  openPanel()
-  const count = rows.value.length
-  if (!count)
-    return
-  activeIndex.value = keyboardSelection.value
-    ? (activeIndex.value + delta + count) % count
-    : delta > 0 ? 0 : count - 1
-  keyboardSelection.value = true
-}
+  openPanel,
+  dismiss,
+  select,
+  submitQuery,
+  onEnter,
+  onArrow,
+  onColumn,
+  gridId,
+  activeDescendant,
+} = useSkillSearchBox({ inputs: () => [input.value?.inputRef] })
 
 function onFocusOut(event: FocusEvent): void {
   if (!container.value?.contains(event.relatedTarget as Node | null))
@@ -124,10 +43,6 @@ watch(() => route.fullPath, () => {
   close()
 })
 
-const listboxId = computed(() => (open.value && rows.value.length ? 'skill-search-listbox' : undefined))
-const activeDescendant = computed(() =>
-  open.value && keyboardSelection.value && activeRow.value ? `skill-search-row-${activeIndex.value}` : undefined,
-)
 const submitDisabled = computed(() => state.value._tag === 'repository' && state.value.status._tag !== 'idle')
 const submitLabel = computed(() => (state.value._tag === 'repository' ? 'Index repository' : 'Search'))
 </script>
@@ -150,8 +65,9 @@ const submitLabel = computed(() => (state.value._tag === 'repository' ? 'Index r
         autocomplete="off"
         role="combobox"
         aria-label="Search skills or index a GitHub repository"
+        aria-haspopup="grid"
         :aria-expanded="open"
-        :aria-controls="listboxId"
+        :aria-controls="gridId"
         :aria-activedescendant="activeDescendant"
         class="w-full"
         :ui="{
@@ -164,6 +80,8 @@ const submitLabel = computed(() => (state.value._tag === 'repository' ? 'Index r
         @input="openPanel"
         @keydown.down="onArrow($event, 1)"
         @keydown.up="onArrow($event, -1)"
+        @keydown.left="onColumn($event, 0)"
+        @keydown.right="onColumn($event, 1)"
         @keydown.enter="onEnter"
       >
         <template #trailing>
@@ -185,7 +103,7 @@ const submitLabel = computed(() => (state.value._tag === 'repository' ? 'Index r
     <Transition name="home-search-panel">
       <div v-if="open" class="absolute inset-x-0 top-full z-30 mt-2">
         <!-- Lazy, as in SkillSearchTrigger: nothing renders it until search opens. -->
-        <LazySkillSearchPanel :show-preview="false" @select="(row) => { void select(row) }" />
+        <LazySkillSearchPanel @select="(row) => { void select(row) }" />
       </div>
     </Transition>