fix(search): hybrid search fallback and scroll containment (#101)

- Allow keyword-only searching while semantic model loads in hybrid mode
- Add status badge showing "Loading semantic model..." during download
- Fix scroll containment in semantic/hybrid results with overscroll-behavior
- Call initHybridSearch/initVectorSearch on first modal open

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.5 <[email protected]>

Author: johnlarkin1

_includes/search-modal.html

@@ -129,6 +129,9 @@ <h2 id="search-modal-title" class="search-modal__title">Search</h2>
           >
         </div>
 
+        <!-- Status badge for model loading/fallback -->
+        <div class="hybrid-search__status" style="display: none;"></div>
+
         <!-- Results -->
         <div class="hybrid-search__results"></div>
 

_js/scripts.js

@@ -1664,36 +1664,41 @@ function renderVectorResults(results) {
 }
 
 function initHybridSearch() {
+  var $status = $(".hybrid-search__status");
+  var $inputWrapper = $(".hybrid-search__input").closest(".vector-search__input-wrapper");
+  var $loading = $(".hybrid-search__loading");
+
   if (window.VectorSearch.isAvailable()) {
-    // Already initialized, focus input
-    $(".hybrid-search__loading").hide();
-    $(".hybrid-search__input").closest(".vector-search__input-wrapper").show();
+    // Model ready - hide loading/status, show input
+    $loading.hide();
+    $inputWrapper.show();
+    $status.hide();
     $(".hybrid-search__input").focus();
     return;
   }
 
-  if (window.VectorSearch.isLoading()) {
-    return; // Already loading
-  }
-
-  // Show loading state
-  $(".hybrid-search__loading").show();
-  $(".hybrid-search__input").closest(".vector-search__input-wrapper").hide();
+  // Always show input immediately (allow keyword-only search while model loads)
+  $loading.hide();
+  $inputWrapper.show();
   $(".hybrid-search__results").empty();
   $(".hybrid-search__empty").hide();
+  $(".hybrid-search__input").focus();
+
+  // Show status badge indicating model is loading
+  $status.html('<span class="hybrid-search__status-spinner"></span> Loading semantic model...').show();
+
+  if (window.VectorSearch.isLoading()) {
+    return; // Already loading, status badge is showing
+  }
 
   // Initialize with progress callback
   window.VectorSearch.initialize(function (info) {
-    $(".hybrid-search__loading .vector-search__loading-message").text(info.message);
-    $(".hybrid-search__loading .vector-search__loading-progress").css("width", info.progress + "%");
-
     if (info.stage === "ready") {
-      $(".hybrid-search__loading").hide();
-      $(".hybrid-search__input").closest(".vector-search__input-wrapper").show();
-      $(".hybrid-search__input").focus();
+      // Model ready - hide status badge
+      $status.hide();
     } else if (info.stage === "error") {
-      $(".hybrid-search__loading .vector-search__loading-message").text("Failed to load: " + info.message);
-      $(".hybrid-search__loading .vector-search__loading-spinner").hide();
+      // Model failed - show keyword-only status
+      $status.html('Keyword only (semantic unavailable)').show();
     }
   });
 }
@@ -1950,15 +1955,15 @@ function openSearch() {
     window.pagefindInitialized = true;
   }
 
-  // Focus appropriate input based on mode
+  // Initialize and focus appropriate input based on mode
   setTimeout(function () {
     if (searchMode === "keyword") {
       var input = $modal.find(".pagefind-ui__search-input")[0];
       if (input) input.focus();
     } else if (searchMode === "semantic") {
-      $(".vector-search__input").focus();
+      initVectorSearch();
     } else if (searchMode === "hybrid") {
-      $(".hybrid-search__input").focus();
+      initHybridSearch();
     }
   }, 150);
 

_sass/components/_search.scss

@@ -771,6 +771,7 @@ mark.pagefind-ui__result-highlight {
     max-height: 420px;
     overflow-y: auto;
     overflow-x: hidden;
+    overscroll-behavior: contain;
 
     // Refined scrollbar
     &::-webkit-scrollbar {
@@ -1035,6 +1036,7 @@ mark.pagefind-ui__result-highlight {
     max-height: 420px;
     overflow-y: auto;
     overflow-x: hidden;
+    overscroll-behavior: contain;
 
     // Match scrollbar styling
     &::-webkit-scrollbar {
@@ -1101,4 +1103,30 @@ mark.pagefind-ui__result-highlight {
     padding: 3rem 1.5rem;
     gap: 1rem;
   }
+
+  // Status badge for model loading/fallback
+  &__status {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    margin: 0 0.5rem 0.5rem;
+    font-family: "SF Mono", "JetBrains Mono", monospace;
+    font-size: 0.6875rem;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    color: rgba(255, 180, 50, 0.9);
+    background: rgba(255, 180, 50, 0.1);
+    border-radius: 6px;
+  }
+
+  &__status-spinner {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border: 1.5px solid rgba(255, 180, 50, 0.3);
+    border-top-color: rgba(255, 180, 50, 0.9);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
 }