From 3d2f73e8e2dd37ca5be64b97e0211c94e51b053a Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Mon, 1 Sep 2025 14:42:32 +0100
Subject: [PATCH 1/7] ai search test

---
 _components/SearchInput.tsx | 192 ++++++++----
 search.client.ts            | 565 ++++++++++++++++++++++++++++++------
 2 files changed, 618 insertions(+), 139 deletions(-)

diff --git a/_components/SearchInput.tsx b/_components/SearchInput.tsx
index defcdd96d..65692c1d8 100644
--- a/_components/SearchInput.tsx
+++ b/_components/SearchInput.tsx
@@ -1,76 +1,162 @@
 export default function SearchInput() {
   return (
-    <div className="md:relative w-full">
-      {/* ☝️ That md:relative class is crucial for making the search bar pop up in the right place. Don't change it, or add any other positioning classes, unless you're ready to account for positioning across all breakpoints. */}
-      <div className="relative">
-        <input
-          type="search"
-          placeholder="Search"
-          id="orama-search-input"
-          className="w-full min-w-24 rounded-lg placeholder:text-sm text-base leading-normal p-1 pl-8 border transition-all duration-150
-          text-foreground-primary border-foreground-secondary hover:bg-background-secondary focus:bg-background-secondary focus:outline-offset-1"
-          style="background: url(/img/search.svg) no-repeat 0.5em 50%; background-size: 1.25em; background-color: var(--color-background-raw);"
-        />
-        <kbd
-          id="search-key"
-          className="hidden xs:flex pointer-events-none absolute font-sans rounded-sm top-1 right-1 bottom-1 w-auto border-1 border-foreground-tertiary border-b-2 border-r-2 bg-background-primary text-foreground-secondary text-center text-xs font-bold p-2 items-center justify-center dark:bg-background-secondary dark:border-gray-700"
-        >
-          ⌘K
-        </kbd>
-        <div
-          id="orama-search-loading"
-          className="absolute left-2 top-1/2 transform -translate-y-1/2 hidden bg-background-raw"
-        >
-          <div className="animate-spin rounded-full h-4 w-4 border-2 border-transparent border-r-foreground-primary bg-background-raw" />
-        </div>
-        <div
-          className="sr-only"
-          aria-live="polite"
-          id="orama-results-announcer"
-        >
-          {/* Text updated by JavaScript. */}
+    <>
+      {/* Search Input Trigger */}
+      <div className="md:relative w-full">
+        <div className="relative">
+          <input
+            type="search"
+            placeholder="Search documentation..."
+            id="orama-search-input"
+            className="w-full min-w-24 rounded-lg placeholder:text-sm text-base leading-normal p-1 pl-8 pr-16 border transition-all duration-150
+            text-foreground-primary border-foreground-secondary hover:bg-background-secondary focus:bg-background-secondary focus:outline-offset-1
+            ai-mode:border-primary ai-mode:bg-primary/5 cursor-pointer"
+            style="background: url(/img/search.svg) no-repeat 0.5em 50%; background-size: 1.25em; background-color: var(--color-background-raw);"
+            readOnly
+          />
+          <kbd
+            id="search-key"
+            className="hidden xs:flex pointer-events-none absolute font-sans rounded-sm top-1 right-1 bottom-1 w-auto border-1 border-foreground-tertiary border-b-2 border-r-2 bg-background-primary text-foreground-secondary text-center text-xs font-bold p-2 items-center justify-center dark:bg-background-secondary dark:border-gray-700"
+          >
+            ⌘K
+          </kbd>
         </div>
       </div>
 
-      {/* Enhanced Popover for Search Results */}
+      {/* Modal Backdrop */}
       <div
-        id="orama-search-results"
-        className="absolute inset-2 left-2 right-2 h-[calc(100vh-8rem)] top-10 md:top-full md:left-auto md:right-0 mt-2 bg-background-raw border border-foreground-tertiary rounded-xl shadow-2xl z-50 md:max-h-128 overflow-hidden hidden md:min-w-160 max-w-2xl"
+        id="search-backdrop"
+        className="fixed inset-0 bg-black/50 backdrop-blur-sm z-40 hidden"
+        aria-hidden="true"
+      />
+
+      {/* Search Modal */}
+      <div
+        id="orama-search-modal"
+        className="fixed inset-0 z-50 hidden overflow-y-auto p-4 sm:p-6 md:p-20"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="search-title"
       >
-        <div
-          id="orama-search-results-content"
-          className="overflow-y-auto h-full"
-        >
-          {/* Results will be populated via JavaScript */}
-        </div>
+        <div className="mx-auto max-w-2xl transform divide-y divide-gray-200 overflow-hidden rounded-xl bg-background-raw shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+          {/* Search Header */}
+          <div className="relative">
+            <input
+              type="search"
+              id="orama-search-input-modal"
+              className="h-12 w-full border-0 bg-transparent pl-10 pr-20 text-foreground-primary placeholder:text-foreground-secondary focus:ring-0 text-base"
+              placeholder="Search documentation..."
+              autoFocus
+              autoComplete="off"
+              autoCorrect="off"
+              spellcheck={false}
+              style="background: url(/img/search.svg) no-repeat 0.5em 50%; background-size: 1.25em; background-color: var(--color-background-raw);"
+            />
 
-        {/* Footer with search tips */}
-        <div className="border-t border-foreground-tertiary bg-background-secondary px-4 py-2 sticky bottom-0">
-          <div className="flex items-center gap-6 text-xs text-foreground-secondary">
+            {/* Mode Toggle */}
+            <div className="absolute inset-y-0 right-0 flex items-center pr-3">
+              <button
+                type="button"
+                id="search-mode-toggle"
+                className="flex items-center space-x-1 px-2 py-1 text-xs font-medium text-foreground-secondary hover:text-foreground-primary transition-colors"
+                title="Toggle AI search mode (Ctrl+Shift+K)"
+              >
+                <span id="search-mode-text">Toggle search mode</span>
+              </button>
+            </div>
+
+            {/* Loading Indicator */}
+            <div
+              id="orama-search-loading"
+              className="absolute left-3 top-1/2 transform -translate-y-1/2 hidden"
+            >
+              <div className="animate-spin rounded-full h-4 w-4 border-2 border-transparent border-r-foreground-primary" />
+            </div>
+          </div>
+
+          {/* Search Results */}
+          <div
+            id="orama-search-results"
+            className="max-h-80 scroll-py-2 overflow-y-auto py-2 text-sm"
+          >
+            <div
+              id="orama-search-results-content"
+              className="space-y-1"
+            >
+              {/* Results will be populated via JavaScript */}
+            </div>
+          </div>
+
+          {/* Footer with keyboard shortcuts */}
+          <div className="flex flex-wrap gap-6 items-center bg-background-secondary px-4 py-3 text-xs text-foreground-secondary">
             <span>
-              <kbd className="px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
+              <kbd class="px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
                 <span aria-hidden="true">↑↓</span>
-                <span className="sr-only">Up or down to</span>
-              </kbd>
-              navigate
+                <span class="sr-only">Up or down to</span>
+              </kbd>navigate
             </span>
             <span>
-              <kbd className="px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
+              <kbd class="px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
                 <span aria-hidden="true">↵</span>
-                <span className="sr-only">Enter to</span>
-              </kbd>
-              select
+                <span class="sr-only">Enter to</span>
+              </kbd>select
             </span>
             <span>
-              <kbd className="px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
+              <kbd class="px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
                 <span aria-hidden="true">ESC</span>
-                <span className="sr-only">Escape to</span>
+                <span class="sr-only">Escape to</span>
+              </kbd>close
+            </span>
+            <span className="flex items-center ml-auto">
+              <kbd className="px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
+                ⌘⇧K
               </kbd>
-              close
+              <span className="hidden sm:inline">Toggle AI</span>
+              <span className="sm:hidden">AI</span>
             </span>
           </div>
         </div>
+
+        {/* Screen reader announcements */}
+        <div
+          className="sr-only"
+          aria-live="polite"
+          id="orama-results-announcer"
+        >
+          {/* Text updated by JavaScript */}
+        </div>
       </div>
-    </div>
+
+      <style jsx>
+        {`
+        .ai-mode #orama-search-input-modal {
+          border-left: 3px solid var(--color-primary);
+        }
+        
+        .ai-mode #search-mode-icon::before {
+          content: "💡";
+        }
+        
+        .ai-mode #search-mode-text::before {
+          content: "AI ";
+        }
+
+        /* Smooth transitions */
+        #orama-search-modal {
+          transition: opacity 150ms ease-out, transform 150ms ease-out;
+        }
+        
+        #orama-search-modal.show {
+          opacity: 1;
+          transform: scale(1);
+        }
+        
+        #orama-search-modal.hide {
+          opacity: 0;
+          transform: scale(0.95);
+        }
+      `}
+      </style>
+    </>
   );
 }
diff --git a/search.client.ts b/search.client.ts
index d9d297b41..749d430eb 100644
--- a/search.client.ts
+++ b/search.client.ts
@@ -1,5 +1,5 @@
 // Orama Search Client
-// This handles the client-side search functionality for the Deno docs
+// This handles the client-side search functionality for the Deno docs with AI Context Engineering
 
 import type { Hit, OramaCloud, SearchResult } from "jsr:@orama/core@1.2.4";
 
@@ -14,6 +14,13 @@ interface OramaDocument {
   command?: string;
 }
 
+interface AISession {
+  answer: (params: { query: string }) => Promise<string>;
+  answerStream: (params: { query: string }) => AsyncIterable<string>;
+  state: unknown[];
+  abort: () => void | Promise<void>;
+}
+
 // Configuration - Replace these with your actual Orama Cloud credentials
 const ORAMA_CONFIG = {
   projectId: "c9394670-656a-4f78-a551-c2603ee119e7",
@@ -23,12 +30,18 @@ const ORAMA_CONFIG = {
 class OramaSearch {
   private client: OramaCloud | null = null;
   private searchInput: HTMLInputElement | null = null;
+  private searchInputModal: HTMLInputElement | null = null;
+  private searchModal: HTMLElement | null = null;
+  private searchBackdrop: HTMLElement | null = null;
   private searchResults: HTMLElement | null = null;
   private searchLoading: HTMLElement | null = null;
   private ariaLiveRegion: HTMLElement | null = null;
   private searchTimeout: number | null = null;
-  private isResultsOpen = false;
+  private isModalOpen = false;
   private selectedIndex = -1; // Track selected result for keyboard navigation
+  private aiSession: AISession | null = null;
+  private currentAiSearch: AbortController | null = null;
+  private isAiMode = false; // Toggle between regular and AI search
 
   constructor() {
     this.init();
@@ -50,28 +63,77 @@ class OramaSearch {
     this.searchInput = document.getElementById(
       "orama-search-input",
     ) as HTMLInputElement;
+    this.searchInputModal = document.getElementById(
+      "orama-search-input-modal",
+    ) as HTMLInputElement;
+    this.searchModal = document.getElementById("orama-search-modal");
+    this.searchBackdrop = document.getElementById("search-backdrop");
     this.searchResults = document.getElementById(
       "orama-search-results-content",
-    ); // Target the scrollable container
+    );
     this.searchLoading = document.getElementById("orama-search-loading");
     this.ariaLiveRegion = document.getElementById("orama-results-announcer");
 
-    if (!this.searchInput) {
-      console.warn("Orama search input not found");
+    if (!this.searchInput || !this.searchInputModal) {
+      console.warn("Orama search inputs not found");
       return;
     }
 
-    // Bind event listeners
-    this.searchInput.addEventListener("input", this.handleInput.bind(this));
-    this.searchInput.addEventListener("focus", this.handleFocus.bind(this));
-    this.searchInput.addEventListener("keydown", this.handleKeyDown.bind(this));
-    this.searchResults?.addEventListener("keyup", (event) => {
-      if (event.key === "Escape") this.handleEscape();
+    // Initialize search mode UI
+    this.updateSearchMode();
+
+    // Make the trigger input readonly and add click handler to open modal
+    this.searchInput.setAttribute("readonly", "true");
+    this.searchInput.addEventListener("click", () => {
+      this.openSearchModal();
+    });
+
+    // Set up modal input handlers
+    this.searchInputModal.addEventListener(
+      "input",
+      this.handleInput.bind(this),
+    );
+    this.searchInputModal.addEventListener(
+      "keydown",
+      this.handleKeyDown.bind(this),
+    );
+
+    // Add backdrop click handler to close modal
+    this.searchBackdrop?.addEventListener("click", () => {
+      this.hideResults();
+    });
+
+    // Add click handler to mode toggle button
+    const modeToggle = document.getElementById("search-mode-toggle");
+    modeToggle?.addEventListener("click", () => {
+      this.toggleSearchMode();
     });
+
+    // Finish setting up global handlers
+    this.finishElementSetup();
+  }
+
+  openSearchModal() {
+    this.showResults();
+    // Focus the modal input
+    setTimeout(() => {
+      this.searchInputModal?.focus();
+    }, 100);
+  }
+
+  finishElementSetup() {
+    // Set up global keyboard handlers
     document.addEventListener("keydown", (event) => {
       if ((event.metaKey || event.ctrlKey) && event.key === "k") {
         event.preventDefault();
-        this.searchInput?.focus();
+        this.openSearchModal();
+      }
+      // Add shortcut for AI mode toggle (Ctrl+Shift+K or Cmd+Shift+K)
+      if (
+        (event.metaKey || event.ctrlKey) && event.shiftKey && event.key === "K"
+      ) {
+        event.preventDefault();
+        this.toggleSearchMode();
       }
     });
 
@@ -119,6 +181,9 @@ class OramaSearch {
         apiKey: ORAMA_CONFIG.apiKey,
       });
 
+      // Initialize AI session for context engineering
+      await this.initAISession();
+
       console.log("Orama search client initialized successfully");
     } catch (error) {
       console.error("Failed to initialize Orama client:", error);
@@ -126,6 +191,29 @@ class OramaSearch {
     }
   }
 
+  async initAISession() {
+    if (!this.client) return;
+
+    try {
+      // Create AI session with context engineering capabilities
+      this.aiSession = await this.client.ai.createAISession({
+        events: {
+          onStateChange: (state) => {
+            console.log("AI Session state changed:", state);
+          },
+        },
+        LLMConfig: {
+          provider: "openai",
+          model: "gpt-4o-mini", // Use a fast, efficient model for search assistance
+        },
+      }) as AISession;
+      console.log("AI session initialized for context engineering");
+    } catch (error) {
+      console.warn("AI session initialization failed:", error);
+      // Continue without AI features if they fail to initialize
+    }
+  }
+
   handleInput(event: Event) {
     const value = (event.target as HTMLInputElement).value;
 
@@ -134,7 +222,10 @@ class OramaSearch {
     }
 
     if (!value.trim()) {
-      this.hideResults();
+      // Clear results but keep modal open
+      if (this.searchResults) {
+        this.searchResults.innerHTML = "";
+      }
       return;
     }
 
@@ -148,22 +239,19 @@ class OramaSearch {
   }
 
   handleFocus() {
-    if (this.searchInput?.value.trim() && this.searchResults?.children.length) {
-      this.showResults();
-    }
+    // No longer needed since we use modal
   }
 
   handleEscape() {
     this.hideResults();
-    if (this.searchInput) {
-      this.searchInput.value = ""; // Clears input when escape is triggered from within the list rather than on the input
-      this.searchInput.focus();
+    if (this.searchInputModal) {
+      this.searchInputModal.value = ""; // Clear modal input when escape is triggered
     }
     this.selectedIndex = -1;
   }
 
   handleKeyDown(event: KeyboardEvent) {
-    if (!this.isResultsOpen) {
+    if (!this.isModalOpen) {
       return;
     }
 
@@ -212,9 +300,19 @@ class OramaSearch {
 
     // Remove previous selection
     resultsLinks.forEach((link, index) => {
-      link.classList.remove("bg-blue-50", "dark:bg-blue-900/20");
+      link.classList.remove(
+        "bg-gray-50",
+        "dark:bg-gray-800",
+        "text-gray-900",
+        "dark:text-white",
+      );
       if (index === this.selectedIndex) {
-        link.classList.add("bg-blue-50", "dark:bg-blue-900/20");
+        link.classList.add(
+          "bg-gray-50",
+          "dark:bg-gray-800",
+          "text-gray-900",
+          "dark:text-white",
+        );
         // Scroll the selected item into view
         link.scrollIntoView({ block: "nearest", behavior: "smooth" });
       }
@@ -224,17 +322,16 @@ class OramaSearch {
   handleClickOutside(event: MouseEvent) {
     const target = event.target as Element;
 
-    // Don't hide results if clicking on a search result link
+    // Don't hide modal if clicking on a search result link
     if (target.closest(".search-result-link")) {
       return;
     }
 
-    // Check if click is outside the search container
-    const searchContainer = document.getElementById("orama-search-results");
-    if (
-      !this.searchInput?.parentElement?.contains(target) &&
-      !searchContainer?.contains(target)
-    ) {
+    // Check if click is outside the search modal content
+    const searchModal = document.getElementById("orama-search-modal");
+    const modalContent = searchModal?.querySelector("div"); // The inner content div
+
+    if (this.isModalOpen && modalContent && !modalContent.contains(target)) {
       this.hideResults();
     }
   }
@@ -248,25 +345,11 @@ class OramaSearch {
     this.showLoading(true);
 
     try {
-      const results = await this.client.search({
-        term,
-        mode: "fulltext",
-        limit: 8,
-        threshold: 1,
-        properties: ["title", "content", "description"],
-        datasources: ["0fe1e86b-60c9-4715-8bba-0c4686a58e7e"],
-        boost: {
-          title: 12,
-          content: 4,
-          description: 2,
-        },
-      });
-
-      this.renderResults(
-        results as unknown as SearchResult<OramaDocument>,
-        term,
-      );
-      this.showResults();
+      if (this.isAiMode && this.aiSession) {
+        await this.performAISearch(term);
+      } else {
+        await this.performRegularSearch(term);
+      }
     } catch (error) {
       console.error("Search error:", error);
       this.showErrorMessage("Search failed. Please try again.");
@@ -275,16 +358,95 @@ class OramaSearch {
     }
   }
 
+  async performRegularSearch(term: string) {
+    const results = await this.client!.search({
+      term,
+      mode: "fulltext",
+      limit: 8,
+      threshold: 1,
+      properties: ["title", "content", "description"],
+      datasources: ["0fe1e86b-60c9-4715-8bba-0c4686a58e7e"],
+      boost: {
+        title: 12,
+        content: 4,
+        description: 2,
+      },
+    });
+
+    this.renderResults(
+      results as unknown as SearchResult<OramaDocument>,
+      term,
+    );
+    this.showResults();
+  }
+
+  async performAISearch(term: string) {
+    if (!this.aiSession) {
+      await this.performRegularSearch(term);
+      return;
+    }
+
+    // Show AI loading state
+    this.renderAILoading(term);
+    this.showResults();
+
+    try {
+      // Abort any existing AI search
+      if (this.currentAiSearch) {
+        this.currentAiSearch.abort();
+      }
+      this.currentAiSearch = new AbortController();
+
+      let response = "";
+      let sources: OramaDocument[] = [];
+      let lastResponse = "";
+
+      // Stream the AI response
+      for await (const chunk of this.aiSession.answerStream({ query: term })) {
+        if (this.currentAiSearch.signal.aborted) {
+          break;
+        }
+
+        // Chunks from Orama are cumulative (contain full response so far)
+        response = String(chunk);
+
+        // Only re-render if response has actually changed
+        if (response !== lastResponse) {
+          this.renderAIResponse(term, response, sources, true);
+          lastResponse = response;
+        }
+      }
+
+      // Get the final state to extract sources
+      const sessionState = this.aiSession.state;
+      if (sessionState && sessionState.length > 0) {
+        const latestInteraction = sessionState[sessionState.length - 1] as {
+          sources?: OramaDocument[];
+        };
+        sources = latestInteraction.sources || [];
+      }
+
+      // Render final result
+      this.renderAIResponse(term, response, sources, false);
+    } catch (error) {
+      if ((error as Error).name !== "AbortError") {
+        console.error("AI search error:", error);
+        this.renderAIError(
+          term,
+          "AI search failed. Falling back to regular search.",
+        );
+        await this.performRegularSearch(term);
+      }
+    }
+  }
+
   renderResults(results: SearchResult<OramaDocument>, searchTerm: string) {
     if (!this.searchResults) return;
 
     if (results.hits.length === 0) {
       this.searchResults.innerHTML = `
-        <div class="p-4 border-b border-foreground-tertiary bg-background-secondary">
-          <h3 class="text-sm font-semibold text-foreground-primary">Search Results</h3>
-        </div>
-        <div class="p-8 text-center">
-          <div class="w-16 h-16 mx-auto mb-4 text-foreground-tertiary">
+        <div class="px-4 py-8 text-center">
+          <div class="w-12 h-12 mx-auto mb-4 text-foreground-tertiary">
             <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-full h-full">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
             </svg>
@@ -321,23 +483,15 @@ class OramaSearch {
       });
 
     const resultsHtml = `
-      <div class="p-4 border-b border-foreground-tertiary bg-background-secondary">
-        <div class="flex items-center justify-between">
-          <h2 class="text-sm font-semibold text-foreground-primary" id="search-results__heading">Search Results</h2>
-          <span class="text-xs text-foreground-secondary">${validResults.length} result${
-      validResults.length !== 1 ? "s" : ""
-    }</span>
-        </div>
-      </div>
-      <ul aria-labelledby="search-results__heading">
-        ${
-      validResults.map((hit) => `
-        <li>
-          <a
-            href="${this.escapeHtml(this.formatUrl(hit.document.url, hit))}"
-            class="flex flex-col px-4 py-3 hover:bg-foreground-quaternary transition-colors duration-150 border-b border-foreground-quaternary last:border-b-0 search-result-link group"
-          >
-            <div class="font-bold text-foreground-primary text-sm mb-2 group-hover:text-primary transition-colors">
+      ${
+      validResults.map((hit, index) => `
+        <a
+          href="${this.escapeHtml(this.formatUrl(hit.document.url, hit))}"
+          class="group flex cursor-default select-none items-center rounded-md px-3 py-2 text-sm search-result-link hover:bg-gray-50 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-white"
+          id="search-result-${index}"
+        >
+          <div class="flex-auto">
+            <div class="font-medium text-foreground-primary mb-1">
               ${
         this.highlightMatch(
           this.escapeHtml(this.cleanTitle(hit.document.title)),
@@ -345,25 +499,34 @@ class OramaSearch {
         )
       }
             </div>
-            <div class="pl-3 border-l border-foreground-quaternary text-sm text-foreground-secondary leading-relaxed mb-2 line-clamp-3">
+            <div class="text-xs text-foreground-secondary line-clamp-2">
               ${
         this.highlightMatch(
-          this.escapeHtml(hit.document.content.slice(0, 200)) + "...",
+          this.escapeHtml(hit.document.content.slice(0, 120)) + "...",
           searchTerm,
         )
       }
             </div>
-            <div class="flex items-center text-xs text-gray-500 dark:color-gray-600">
-              <svg class="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div class="flex items-center text-xs text-foreground-tertiary mt-1">
+              <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
               </svg>
-              ${this.escapeHtml(this.formatUrl(hit.document.url, hit))}
+              ${
+        this.escapeHtml(
+          this.formatUrl(hit.document.url, hit).replace(
+            /^https?:\/\/[^\/]+/,
+            "",
+          ),
+        )
+      }
             </div>
-          </a>
-        </li>
+          </div>
+          <div class="ml-3 flex-none text-xs font-semibold text-foreground-tertiary">
+            ↵
+          </div>
+        </a>
       `).join("")
     }
-      </ul>
     `;
 
     this.searchResults.innerHTML = resultsHtml;
@@ -397,6 +560,228 @@ class OramaSearch {
     this.showResults();
   }
 
+  renderAILoading(searchTerm: string) {
+    if (!this.searchResults) return;
+
+    this.searchResults.innerHTML = `
+      <div class="p-4 border-b border-foreground-tertiary bg-background-secondary">
+        <div class="flex items-center justify-between">
+          <h2 class="text-sm font-semibold text-foreground-primary flex items-center gap-2">
+            <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
+            </svg>
+            AI Search Results
+          </h2>
+        </div>
+      </div>
+      <div class="p-6">
+        <div class="flex items-center gap-3 mb-4">
+          <div class="animate-spin rounded-full h-5 w-5 border-2 border-transparent border-r-primary"></div>
+          <div class="text-sm text-foreground-secondary">
+            Analyzing your query with AI context engineering...
+          </div>
+        </div>
+        <div class="bg-background-secondary rounded-lg p-4 border-l-4 border-primary">
+          <p class="text-sm text-foreground-secondary mb-2">
+            <strong>Query:</strong> ${this.escapeHtml(searchTerm)}
+          </p>
+          <p class="text-xs text-foreground-tertiary">
+            Using advanced context engineering to provide the most relevant and helpful response.
+          </p>
+        </div>
+      </div>
+    `;
+  }
+
+  renderAIResponse(
+    searchTerm: string,
+    response: string,
+    sources: OramaDocument[],
+    isStreaming: boolean,
+  ) {
+    if (!this.searchResults) return;
+
+    const streamingIndicator = isStreaming
+      ? `<div class="animate-pulse inline-block w-2 h-4 bg-primary rounded ml-1"></div>`
+      : "";
+
+    const sourcesHtml = sources.length > 0
+      ? `
+      <div class="mt-6 border-t border-foreground-quaternary pt-4">
+        <h3 class="text-sm font-semibold text-foreground-primary mb-3 flex items-center gap-2">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+          </svg>
+          Sources (${sources.length})
+        </h3>
+        <div class="grid gap-2">
+          ${
+        sources.slice(0, 3).map((source) => `
+            <a href="${
+          this.escapeHtml(
+            this.formatUrl(
+              source.url,
+              { document: source } as Hit<OramaDocument>,
+            ),
+          )
+        }" 
+               class="block p-3 rounded-lg bg-background-secondary hover:bg-foreground-quaternary transition-colors border border-foreground-quaternary group">
+              <div class="text-sm font-medium text-foreground-primary group-hover:text-primary transition-colors">
+                ${this.escapeHtml(source.title || "Untitled")}
+              </div>
+              <div class="text-xs text-foreground-secondary mt-1 line-clamp-2">
+                ${this.escapeHtml(source.content?.slice(0, 120) || "")}...
+              </div>
+            </a>
+          `).join("")
+      }
+        </div>
+      </div>
+    `
+      : "";
+
+    this.searchResults.innerHTML = `
+      <div class="p-4 border-b border-foreground-tertiary bg-background-secondary">
+        <div class="flex items-center justify-between">
+          <h2 class="text-sm font-semibold text-foreground-primary flex items-center gap-2">
+            <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
+            </svg>
+            AI Search Results
+          </h2>
+          <span class="text-xs text-primary">Powered by Context Engineering</span>
+        </div>
+      </div>
+      <div class="p-6">
+        <div class="bg-background-secondary rounded-lg p-4 border-l-4 border-primary mb-4">
+          <p class="text-sm text-foreground-secondary mb-2">
+            <strong>Your Question:</strong> ${this.escapeHtml(searchTerm)}
+          </p>
+        </div>
+        <div class="prose prose-sm max-w-none text-foreground-primary">
+          <div class="whitespace-pre-wrap leading-relaxed">
+            ${this.escapeHtml(response)}${streamingIndicator}
+          </div>
+        </div>
+        ${sourcesHtml}
+        <div class="mt-4 pt-4 border-t border-foreground-quaternary">
+          <button onclick="oramaSearch.toggleSearchMode()" class="text-xs text-primary hover:text-primary-dark transition-colors">
+            ← Switch to regular search
+          </button>
+        </div>
+      </div>
+    `;
+
+    // Reset selection for new results
+    this.selectedIndex = -1;
+
+    if (this.ariaLiveRegion) {
+      this.ariaLiveRegion.textContent =
+        `AI response provided for "${searchTerm}"`;
+    }
+  }
+
+  renderAIError(_searchTerm: string, errorMessage: string) {
+    if (!this.searchResults) return;
+
+    this.searchResults.innerHTML = `
+      <div class="p-4 border-b border-foreground-tertiary bg-background-secondary">
+        <div class="flex items-center justify-between">
+          <h2 class="text-sm font-semibold text-foreground-primary flex items-center gap-2">
+            <svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            AI Search Error
+          </h2>
+        </div>
+      </div>
+      <div class="p-6">
+        <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-4 border-l-4 border-red-500 mb-4">
+          <p class="text-sm text-red-700 dark:text-red-300">
+            ${this.escapeHtml(errorMessage)}
+          </p>
+        </div>
+        <button onclick="oramaSearch.toggleSearchMode()" class="text-xs text-primary hover:text-primary-dark transition-colors">
+          ← Switch to regular search
+        </button>
+      </div>
+    `;
+  }
+
+  toggleSearchMode() {
+    this.isAiMode = !this.isAiMode;
+
+    // Abort any ongoing AI search
+    if (this.currentAiSearch) {
+      this.currentAiSearch.abort();
+      this.currentAiSearch = null;
+    }
+
+    // Update UI to reflect the mode change
+    this.updateSearchMode();
+
+    // If there's a current search term, re-run the search with the new mode
+    if (this.searchInput?.value.trim()) {
+      this.performSearch(this.searchInput.value.trim());
+    }
+  }
+
+  updateSearchMode() {
+    // Update trigger input
+    if (this.searchInput) {
+      if (this.isAiMode) {
+        this.searchInput.placeholder = "Ask AI about Deno docs...";
+        this.searchInput.classList.add("ai-mode");
+      } else {
+        this.searchInput.placeholder = "Search documentation...";
+        this.searchInput.classList.remove("ai-mode");
+      }
+    }
+
+    // Update modal input
+    if (this.searchInputModal) {
+      if (this.isAiMode) {
+        this.searchInputModal.placeholder = "Ask AI about Deno docs...";
+      } else {
+        this.searchInputModal.placeholder = "Search documentation...";
+      }
+    }
+
+    // Update modal UI elements
+    this.updateModalSearchMode();
+  }
+
+  updateModalSearchMode() {
+    const modal = document.getElementById("orama-search-modal");
+    const modeIcon = document.getElementById("search-mode-icon");
+    const modeText = document.getElementById("search-mode-text");
+    const toggleButton = document.getElementById("search-mode-toggle");
+
+    if (modal) {
+      if (this.isAiMode) {
+        modal.classList.add("ai-mode");
+      } else {
+        modal.classList.remove("ai-mode");
+      }
+    }
+
+    if (modeIcon && modeText) {
+      if (this.isAiMode) {
+        modeIcon.textContent = "💡";
+        modeText.textContent = "AI Search";
+      } else {
+        modeIcon.textContent = "🔍";
+        modeText.textContent = "Search";
+      }
+    }
+
+    if (toggleButton) {
+      toggleButton.title = this.isAiMode
+        ? "Switch to regular search (Ctrl+Shift+K)"
+        : "Switch to AI search (Ctrl+Shift+K)";
+    }
+  }
+
   showErrorMessage(message: string) {
     if (!this.searchResults) return;
 
@@ -420,19 +805,27 @@ class OramaSearch {
   }
 
   showResults() {
-    const resultsContainer = document.getElementById("orama-search-results");
-    if (resultsContainer) {
-      resultsContainer.classList.remove("hidden");
-      this.isResultsOpen = true;
+    const modal = document.getElementById("orama-search-modal");
+    const backdrop = document.getElementById("search-backdrop");
+    if (modal && backdrop) {
+      modal.classList.remove("hidden");
+      backdrop.classList.remove("hidden");
+      this.isModalOpen = true;
+      // Prevent body scrolling when modal is open
+      document.body.style.overflow = "hidden";
     }
   }
 
   hideResults() {
-    const resultsContainer = document.getElementById("orama-search-results");
-    if (resultsContainer) {
-      resultsContainer.classList.add("hidden");
-      this.isResultsOpen = false;
+    const modal = document.getElementById("orama-search-modal");
+    const backdrop = document.getElementById("search-backdrop");
+    if (modal && backdrop) {
+      modal.classList.add("hidden");
+      backdrop.classList.add("hidden");
+      this.isModalOpen = false;
       this.selectedIndex = -1; // Reset selection when hiding
+      // Restore body scrolling
+      document.body.style.overflow = "";
     }
   }
 

From 30fedc5d6118c1519433cc954f8e89de8d0c9ce1 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Mon, 1 Sep 2025 20:34:56 +0100
Subject: [PATCH 2/7] update search

---
 _components/SearchInput.tsx |  7 +--
 search.client.ts            | 89 +++++++++++++++++++++++++------------
 2 files changed, 62 insertions(+), 34 deletions(-)

diff --git a/_components/SearchInput.tsx b/_components/SearchInput.tsx
index 65692c1d8..7436011b3 100644
--- a/_components/SearchInput.tsx
+++ b/_components/SearchInput.tsx
@@ -61,7 +61,8 @@ export default function SearchInput() {
                 className="flex items-center space-x-1 px-2 py-1 text-xs font-medium text-foreground-secondary hover:text-foreground-primary transition-colors"
                 title="Toggle AI search mode (Ctrl+Shift+K)"
               >
-                <span id="search-mode-text">Toggle search mode</span>
+                <span id="search-mode-icon">🔍</span>
+                <span id="search-mode-text">AI Off</span>
               </button>
             </div>
 
@@ -136,10 +137,6 @@ export default function SearchInput() {
         .ai-mode #search-mode-icon::before {
           content: "💡";
         }
-        
-        .ai-mode #search-mode-text::before {
-          content: "AI ";
-        }
 
         /* Smooth transitions */
         #orama-search-modal {
diff --git a/search.client.ts b/search.client.ts
index 749d430eb..bd020fc57 100644
--- a/search.client.ts
+++ b/search.client.ts
@@ -217,10 +217,17 @@ class OramaSearch {
   handleInput(event: Event) {
     const value = (event.target as HTMLInputElement).value;
 
+    // Clear any existing timeout
     if (this.searchTimeout) {
       clearTimeout(this.searchTimeout);
     }
 
+    // Abort any ongoing AI search immediately when user types
+    if (this.currentAiSearch) {
+      this.currentAiSearch.abort();
+      this.currentAiSearch = null;
+    }
+
     if (!value.trim()) {
       // Clear results but keep modal open
       if (this.searchResults) {
@@ -232,10 +239,13 @@ class OramaSearch {
     // Reset selection when user types
     this.selectedIndex = -1;
 
-    // Debounce search by 300ms
+    // Use longer debounce for AI mode since it's more expensive
+    // Regular search: 300ms, AI search: 500ms to prevent flashing results
+    const debounceTime = this.isAiMode ? 500 : 300;
+
     this.searchTimeout = setTimeout(() => {
       this.performSearch(value);
-    }, 300);
+    }, debounceTime);
   }
 
   handleFocus() {
@@ -386,48 +396,52 @@ class OramaSearch {
       return;
     }
 
+    // Abort any existing AI search before starting new one
+    if (this.currentAiSearch) {
+      this.currentAiSearch.abort();
+    }
+    this.currentAiSearch = new AbortController();
+
     // Show AI loading state
     this.renderAILoading(term);
     this.showResults();
 
     try {
-      // Abort any existing AI search
-      if (this.currentAiSearch) {
-        this.currentAiSearch.abort();
-      }
-      this.currentAiSearch = new AbortController();
-
       let response = "";
       let sources: OramaDocument[] = [];
       let lastResponse = "";
 
-      // Stream the AI response
+      // Stream the AI response with abort check
       for await (const chunk of this.aiSession.answerStream({ query: term })) {
+        // Check if search was aborted
         if (this.currentAiSearch.signal.aborted) {
-          break;
+          return; // Exit early if aborted
         }
 
         // Chunks from Orama are cumulative (contain full response so far)
         response = String(chunk);
 
-        // Only re-render if response has actually changed
-        if (response !== lastResponse) {
+        // Only re-render if response has actually changed and not aborted
+        if (response !== lastResponse && !this.currentAiSearch.signal.aborted) {
           this.renderAIResponse(term, response, sources, true);
           lastResponse = response;
         }
       }
 
-      // Get the final state to extract sources
-      const sessionState = this.aiSession.state;
-      if (sessionState && sessionState.length > 0) {
-        const latestInteraction = sessionState[sessionState.length - 1] as {
-          sources?: OramaDocument[];
-        };
-        sources = latestInteraction.sources || [];
-      }
+      // Only proceed with final rendering if not aborted
+      if (!this.currentAiSearch.signal.aborted) {
+        // Get the final state to extract sources
+        const sessionState = this.aiSession.state;
+        if (sessionState && sessionState.length > 0) {
+          const latestInteraction = sessionState[sessionState.length - 1] as {
+            sources?: OramaDocument[];
+          };
+          sources = latestInteraction.sources || [];
+        }
 
-      // Render final result
-      this.renderAIResponse(term, response, sources, false);
+        // Render final result
+        this.renderAIResponse(term, response, sources, false);
+      }
     } catch (error) {
       if ((error as Error).name !== "AbortError") {
         console.error("AI search error:", error);
@@ -649,7 +663,6 @@ class OramaSearch {
             </svg>
             AI Search Results
           </h2>
-          <span class="text-xs text-primary">Powered by Context Engineering</span>
         </div>
       </div>
       <div class="p-6">
@@ -659,7 +672,7 @@ class OramaSearch {
           </p>
         </div>
         <div class="prose prose-sm max-w-none text-foreground-primary">
-          <div class="whitespace-pre-wrap leading-relaxed">
+          <div class="leading-relaxed">
             ${this.escapeHtml(response)}${streamingIndicator}
           </div>
         </div>
@@ -711,6 +724,12 @@ class OramaSearch {
   toggleSearchMode() {
     this.isAiMode = !this.isAiMode;
 
+    // Clear any pending search timeout
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+      this.searchTimeout = null;
+    }
+
     // Abort any ongoing AI search
     if (this.currentAiSearch) {
       this.currentAiSearch.abort();
@@ -721,8 +740,8 @@ class OramaSearch {
     this.updateSearchMode();
 
     // If there's a current search term, re-run the search with the new mode
-    if (this.searchInput?.value.trim()) {
-      this.performSearch(this.searchInput.value.trim());
+    if (this.searchInputModal?.value.trim()) {
+      this.performSearch(this.searchInputModal.value.trim());
     }
   }
 
@@ -768,10 +787,10 @@ class OramaSearch {
     if (modeIcon && modeText) {
       if (this.isAiMode) {
         modeIcon.textContent = "💡";
-        modeText.textContent = "AI Search";
+        modeText.textContent = "AI On";
       } else {
-        modeIcon.textContent = "🔍";
-        modeText.textContent = "Search";
+        modeIcon.textContent = "🚫";
+        modeText.textContent = "AI Off";
       }
     }
 
@@ -824,6 +843,18 @@ class OramaSearch {
       backdrop.classList.add("hidden");
       this.isModalOpen = false;
       this.selectedIndex = -1; // Reset selection when hiding
+
+      // Clean up any ongoing operations
+      if (this.searchTimeout) {
+        clearTimeout(this.searchTimeout);
+        this.searchTimeout = null;
+      }
+
+      if (this.currentAiSearch) {
+        this.currentAiSearch.abort();
+        this.currentAiSearch = null;
+      }
+
       // Restore body scrolling
       document.body.style.overflow = "";
     }

From 08b09d3577d0b8a981115baae8eefc2e8c44c9e8 Mon Sep 17 00:00:00 2001
From: Josh Collinsworth <joshuajcollinsworth@gmail.com>
Date: Tue, 2 Sep 2025 15:04:19 -0500
Subject: [PATCH 3/7] Initial style pass

---
 _components/SearchInput.tsx | 10 +++---
 search.client.ts            | 72 +++++++++++++++++--------------------
 styles.css                  |  5 +++
 3 files changed, 43 insertions(+), 44 deletions(-)

diff --git a/_components/SearchInput.tsx b/_components/SearchInput.tsx
index 7436011b3..2ce51bc45 100644
--- a/_components/SearchInput.tsx
+++ b/_components/SearchInput.tsx
@@ -38,7 +38,7 @@ export default function SearchInput() {
         aria-modal="true"
         aria-labelledby="search-title"
       >
-        <div className="mx-auto max-w-2xl transform divide-y divide-gray-200 overflow-hidden rounded-xl bg-background-raw shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+        <div className="mx-auto max-w-2xl transform divide-y divide-gray-200 overflow-hidden rounded-xl bg-background-raw shadow-2xl border border-foreground-primary transition-all">
           {/* Search Header */}
           <div className="relative">
             <input
@@ -78,7 +78,7 @@ export default function SearchInput() {
           {/* Search Results */}
           <div
             id="orama-search-results"
-            className="max-h-80 scroll-py-2 overflow-y-auto py-2 text-sm"
+            className="max-h-80 scroll-py-2 overflow-y-auto text-sm"
           >
             <div
               id="orama-search-results-content"
@@ -133,7 +133,7 @@ export default function SearchInput() {
         .ai-mode #orama-search-input-modal {
           border-left: 3px solid var(--color-primary);
         }
-        
+
         .ai-mode #search-mode-icon::before {
           content: "💡";
         }
@@ -142,12 +142,12 @@ export default function SearchInput() {
         #orama-search-modal {
           transition: opacity 150ms ease-out, transform 150ms ease-out;
         }
-        
+
         #orama-search-modal.show {
           opacity: 1;
           transform: scale(1);
         }
-        
+
         #orama-search-modal.hide {
           opacity: 0;
           transform: scale(0.95);
diff --git a/search.client.ts b/search.client.ts
index bd020fc57..63f573fdb 100644
--- a/search.client.ts
+++ b/search.client.ts
@@ -521,7 +521,7 @@ class OramaSearch {
         )
       }
             </div>
-            <div class="flex items-center text-xs text-foreground-tertiary mt-1">
+            <div class="flex items-center text-xs text-foreground-secondary mt-1">
               <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
               </svg>
@@ -535,7 +535,7 @@ class OramaSearch {
       }
             </div>
           </div>
-          <div class="ml-3 flex-none text-xs font-semibold text-foreground-tertiary">
+          <div class="ml-3 flex-none text-xs font-semibold text-foreground-secondary">
             ↵
           </div>
         </a>
@@ -574,20 +574,30 @@ class OramaSearch {
     this.showResults();
   }
 
-  renderAILoading(searchTerm: string) {
-    if (!this.searchResults) return;
-
-    this.searchResults.innerHTML = `
-      <div class="p-4 border-b border-foreground-tertiary bg-background-secondary">
+  renderAiSearchResultsHeading({ error = false }) {
+    return `<div class="p-4 py-2 border-b border-foreground-tertiary bg-background-tertiary">
         <div class="flex items-center justify-between">
           <h2 class="text-sm font-semibold text-foreground-primary flex items-center gap-2">
-            <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
-            </svg>
-            AI Search Results
+          ${
+      error
+        ? `<svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+              </svg>`
+        : `<svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
+              </svg>`
+    }
+            AI Search ${error ? "Error" : "Results"}
           </h2>
         </div>
-      </div>
+      </div>`;
+  }
+
+  renderAILoading(searchTerm: string) {
+    if (!this.searchResults) return;
+
+    this.searchResults.innerHTML = `
+      ${this.renderAiSearchResultsHeading({ error: false })}
       <div class="p-6">
         <div class="flex items-center gap-3 mb-4">
           <div class="animate-spin rounded-full h-5 w-5 border-2 border-transparent border-r-primary"></div>
@@ -595,8 +605,8 @@ class OramaSearch {
             Analyzing your query with AI context engineering...
           </div>
         </div>
-        <div class="bg-background-secondary rounded-lg p-4 border-l-4 border-primary">
-          <p class="text-sm text-foreground-secondary mb-2">
+        <div class="p-2 border-l-4 border-primary">
+          <p class="text-sm text-foreground-secondary">
             <strong>Query:</strong> ${this.escapeHtml(searchTerm)}
           </p>
           <p class="text-xs text-foreground-tertiary">
@@ -638,7 +648,7 @@ class OramaSearch {
               { document: source } as Hit<OramaDocument>,
             ),
           )
-        }" 
+        }"
                class="block p-3 rounded-lg bg-background-secondary hover:bg-foreground-quaternary transition-colors border border-foreground-quaternary group">
               <div class="text-sm font-medium text-foreground-primary group-hover:text-primary transition-colors">
                 ${this.escapeHtml(source.title || "Untitled")}
@@ -655,20 +665,13 @@ class OramaSearch {
       : "";
 
     this.searchResults.innerHTML = `
-      <div class="p-4 border-b border-foreground-tertiary bg-background-secondary">
-        <div class="flex items-center justify-between">
-          <h2 class="text-sm font-semibold text-foreground-primary flex items-center gap-2">
-            <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
-            </svg>
-            AI Search Results
-          </h2>
-        </div>
-      </div>
+      ${this.renderAiSearchResultsHeading({ error: false })}
       <div class="p-6">
-        <div class="bg-background-secondary rounded-lg p-4 border-l-4 border-primary mb-4">
-          <p class="text-sm text-foreground-secondary mb-2">
-            <strong>Your Question:</strong> ${this.escapeHtml(searchTerm)}
+        <div class="p-2 border-l-4  border-primary mb-4">
+          <p class="text-sm">
+            <strong>Your Question:</strong> <i>${
+      this.escapeHtml(searchTerm)
+    }</i>
           </p>
         </div>
         <div class="prose prose-sm max-w-none text-foreground-primary">
@@ -678,7 +681,7 @@ class OramaSearch {
         </div>
         ${sourcesHtml}
         <div class="mt-4 pt-4 border-t border-foreground-quaternary">
-          <button onclick="oramaSearch.toggleSearchMode()" class="text-xs text-primary hover:text-primary-dark transition-colors">
+          <button onclick="oramaSearch.toggleSearchMode()" class="text-xs text-primary hover:text-primary-dark transition-colors cursor-pointer underline">
             ← Switch to regular search
           </button>
         </div>
@@ -698,16 +701,7 @@ class OramaSearch {
     if (!this.searchResults) return;
 
     this.searchResults.innerHTML = `
-      <div class="p-4 border-b border-foreground-tertiary bg-background-secondary">
-        <div class="flex items-center justify-between">
-          <h2 class="text-sm font-semibold text-foreground-primary flex items-center gap-2">
-            <svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-            </svg>
-            AI Search Error
-          </h2>
-        </div>
-      </div>
+      ${this.renderAiSearchResultsHeading({ error: true })}
       <div class="p-6">
         <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-4 border-l-4 border-red-500 mb-4">
           <p class="text-sm text-red-700 dark:text-red-300">
diff --git a/styles.css b/styles.css
index 0a2cde330..ee3e3a010 100644
--- a/styles.css
+++ b/styles.css
@@ -1615,6 +1615,11 @@
       width: 1px;
     }
   }
+
+  #orama-search-results:has(#orama-search-results-content:empty),
+  #orama-search-results:has(#orama-search-results-content:empty) + div {
+    display: none !important;
+  }
 }
 
 @layer utilities {

From 843d45dc8af3b06ace2f2e03a754c9a32cbfd58b Mon Sep 17 00:00:00 2001
From: Josh Collinsworth <joshuajcollinsworth@gmail.com>
Date: Tue, 2 Sep 2025 16:26:05 -0500
Subject: [PATCH 4/7] Further style and a11y updates

---
 _components/SearchInput.tsx | 71 ++++++++++---------------------------
 search.client.ts            | 63 +++++++++++++-------------------
 styles.css                  |  8 +++++
 3 files changed, 50 insertions(+), 92 deletions(-)

diff --git a/_components/SearchInput.tsx b/_components/SearchInput.tsx
index 2ce51bc45..c50b38235 100644
--- a/_components/SearchInput.tsx
+++ b/_components/SearchInput.tsx
@@ -8,9 +8,9 @@ export default function SearchInput() {
             type="search"
             placeholder="Search documentation..."
             id="orama-search-input"
-            className="w-full min-w-24 rounded-lg placeholder:text-sm text-base leading-normal p-1 pl-8 pr-16 border transition-all duration-150
+            className="w-full min-w-24 rounded-lg placeholder:text-sm text-base leading-normal p-1 pl-8 pr-16 border transition-colors duration-200
             text-foreground-primary border-foreground-secondary hover:bg-background-secondary focus:bg-background-secondary focus:outline-offset-1
-            ai-mode:border-primary ai-mode:bg-primary/5 cursor-pointer"
+            cursor-pointer"
             style="background: url(/img/search.svg) no-repeat 0.5em 50%; background-size: 1.25em; background-color: var(--color-background-raw);"
             readOnly
           />
@@ -23,28 +23,19 @@ export default function SearchInput() {
         </div>
       </div>
 
-      {/* Modal Backdrop */}
-      <div
-        id="search-backdrop"
-        className="fixed inset-0 bg-black/50 backdrop-blur-sm z-40 hidden"
-        aria-hidden="true"
-      />
-
       {/* Search Modal */}
-      <div
+      <dialog
         id="orama-search-modal"
-        className="fixed inset-0 z-50 hidden overflow-y-auto p-4 sm:p-6 md:p-20"
+        className="w-full h-full bg-black/50 backdrop-blur-sm fixed inset-0 max-w-none max-h-none z-50 overflow-y-auto p-4 sm:p-6 md:p-20"
         role="dialog"
-        aria-modal="true"
-        aria-labelledby="search-title"
       >
-        <div className="mx-auto max-w-2xl transform divide-y divide-gray-200 overflow-hidden rounded-xl bg-background-raw shadow-2xl border border-foreground-primary transition-all">
+        <div className="mx-auto max-w-2xl w-full transform divide-y divide-gray-200 overflow-hidden rounded-xl bg-background-raw shadow-2xl border border-foreground-primary transition-all">
           {/* Search Header */}
-          <div className="relative">
+          <div className="relative flex items-center justify-between px-2">
             <input
               type="search"
               id="orama-search-input-modal"
-              className="h-12 w-full border-0 bg-transparent pl-10 pr-20 text-foreground-primary placeholder:text-foreground-secondary focus:ring-0 text-base"
+              className="h-12 w-full border-0 bg-transparent text-foreground-primary placeholder:text-foreground-secondary focus:ring-0 text-base focus-visible:outline-none"
               placeholder="Search documentation..."
               autoFocus
               autoComplete="off"
@@ -54,22 +45,26 @@ export default function SearchInput() {
             />
 
             {/* Mode Toggle */}
-            <div className="absolute inset-y-0 right-0 flex items-center pr-3">
+            <div className="inset-y-0 right-0 flex items-center shrink-0">
               <button
                 type="button"
                 id="search-mode-toggle"
-                className="flex items-center space-x-1 px-2 py-1 text-xs font-medium text-foreground-secondary hover:text-foreground-primary transition-colors"
+                className="flex items-center space-x-1 px-2 py-1 text-xs font-medium text-foreground-secondary hover:text-foreground-primary transition-colors cursor-pointer"
                 title="Toggle AI search mode (Ctrl+Shift+K)"
+                aria-pressed="false"
               >
-                <span id="search-mode-icon">🔍</span>
-                <span id="search-mode-text">AI Off</span>
+                <div
+                  id="search-mode-toggle__indicator"
+                  className="flex items-center w-6 h-4 rounded-full bg-foreground-tertiary p-0.5 relative before:aspect-square before:h-3 before:bg-background-raw before:rounded-full before:transition-transform before:duration-200"
+                />
+                <span>Use AI</span>
               </button>
             </div>
 
             {/* Loading Indicator */}
             <div
               id="orama-search-loading"
-              className="absolute left-3 top-1/2 transform -translate-y-1/2 hidden"
+              className="absolute left-2 px-px top-1/2 transform -translate-y-1/2 hidden bg-background-raw"
             >
               <div className="animate-spin rounded-full h-4 w-4 border-2 border-transparent border-r-foreground-primary" />
             </div>
@@ -80,10 +75,7 @@ export default function SearchInput() {
             id="orama-search-results"
             className="max-h-80 scroll-py-2 overflow-y-auto text-sm"
           >
-            <div
-              id="orama-search-results-content"
-              className="space-y-1"
-            >
+            <div id="orama-search-results-content">
               {/* Results will be populated via JavaScript */}
             </div>
           </div>
@@ -126,34 +118,7 @@ export default function SearchInput() {
         >
           {/* Text updated by JavaScript */}
         </div>
-      </div>
-
-      <style jsx>
-        {`
-        .ai-mode #orama-search-input-modal {
-          border-left: 3px solid var(--color-primary);
-        }
-
-        .ai-mode #search-mode-icon::before {
-          content: "💡";
-        }
-
-        /* Smooth transitions */
-        #orama-search-modal {
-          transition: opacity 150ms ease-out, transform 150ms ease-out;
-        }
-
-        #orama-search-modal.show {
-          opacity: 1;
-          transform: scale(1);
-        }
-
-        #orama-search-modal.hide {
-          opacity: 0;
-          transform: scale(0.95);
-        }
-      `}
-      </style>
+      </dialog>
     </>
   );
 }
diff --git a/search.client.ts b/search.client.ts
index 63f573fdb..6ac0ae745 100644
--- a/search.client.ts
+++ b/search.client.ts
@@ -32,7 +32,6 @@ class OramaSearch {
   private searchInput: HTMLInputElement | null = null;
   private searchInputModal: HTMLInputElement | null = null;
   private searchModal: HTMLElement | null = null;
-  private searchBackdrop: HTMLElement | null = null;
   private searchResults: HTMLElement | null = null;
   private searchLoading: HTMLElement | null = null;
   private ariaLiveRegion: HTMLElement | null = null;
@@ -67,7 +66,6 @@ class OramaSearch {
       "orama-search-input-modal",
     ) as HTMLInputElement;
     this.searchModal = document.getElementById("orama-search-modal");
-    this.searchBackdrop = document.getElementById("search-backdrop");
     this.searchResults = document.getElementById(
       "orama-search-results-content",
     );
@@ -98,11 +96,6 @@ class OramaSearch {
       this.handleKeyDown.bind(this),
     );
 
-    // Add backdrop click handler to close modal
-    this.searchBackdrop?.addEventListener("click", () => {
-      this.hideResults();
-    });
-
     // Add click handler to mode toggle button
     const modeToggle = document.getElementById("search-mode-toggle");
     modeToggle?.addEventListener("click", () => {
@@ -115,25 +108,20 @@ class OramaSearch {
 
   openSearchModal() {
     this.showResults();
-    // Focus the modal input
-    setTimeout(() => {
-      this.searchInputModal?.focus();
-    }, 100);
   }
 
   finishElementSetup() {
     // Set up global keyboard handlers
     document.addEventListener("keydown", (event) => {
       if ((event.metaKey || event.ctrlKey) && event.key === "k") {
-        event.preventDefault();
-        this.openSearchModal();
-      }
-      // Add shortcut for AI mode toggle (Ctrl+Shift+K or Cmd+Shift+K)
-      if (
-        (event.metaKey || event.ctrlKey) && event.shiftKey && event.key === "K"
-      ) {
-        event.preventDefault();
-        this.toggleSearchMode();
+        if (event.shiftKey) {
+          console.log("TRIGGEREDDD");
+          event.preventDefault();
+          this.toggleSearchMode();
+        } else {
+          event.preventDefault();
+          this.openSearchModal();
+        }
       }
     });
 
@@ -766,8 +754,7 @@ class OramaSearch {
 
   updateModalSearchMode() {
     const modal = document.getElementById("orama-search-modal");
-    const modeIcon = document.getElementById("search-mode-icon");
-    const modeText = document.getElementById("search-mode-text");
+    const indicator = document.getElementById("search-mode-toggle__indicator");
     const toggleButton = document.getElementById("search-mode-toggle");
 
     if (modal) {
@@ -778,14 +765,11 @@ class OramaSearch {
       }
     }
 
-    if (modeIcon && modeText) {
-      if (this.isAiMode) {
-        modeIcon.textContent = "💡";
-        modeText.textContent = "AI On";
-      } else {
-        modeIcon.textContent = "🚫";
-        modeText.textContent = "AI Off";
-      }
+    if (toggleButton) {
+      toggleButton.setAttribute(
+        "aria-pressed",
+        this.isAiMode ? "true" : "false",
+      );
     }
 
     if (toggleButton) {
@@ -818,11 +802,12 @@ class OramaSearch {
   }
 
   showResults() {
-    const modal = document.getElementById("orama-search-modal");
-    const backdrop = document.getElementById("search-backdrop");
-    if (modal && backdrop) {
+    const modal = document.getElementById(
+      "orama-search-modal",
+    ) as HTMLDialogElement;
+    if (modal) {
       modal.classList.remove("hidden");
-      backdrop.classList.remove("hidden");
+      modal.showModal();
       this.isModalOpen = true;
       // Prevent body scrolling when modal is open
       document.body.style.overflow = "hidden";
@@ -830,11 +815,11 @@ class OramaSearch {
   }
 
   hideResults() {
-    const modal = document.getElementById("orama-search-modal");
-    const backdrop = document.getElementById("search-backdrop");
-    if (modal && backdrop) {
-      modal.classList.add("hidden");
-      backdrop.classList.add("hidden");
+    const modal = document.getElementById(
+      "orama-search-modal",
+    ) as HTMLDialogElement;
+    if (modal) {
+      modal.close();
       this.isModalOpen = false;
       this.selectedIndex = -1; // Reset selection when hiding
 
diff --git a/styles.css b/styles.css
index ee3e3a010..95f2c8e22 100644
--- a/styles.css
+++ b/styles.css
@@ -1620,6 +1620,14 @@
   #orama-search-results:has(#orama-search-results-content:empty) + div {
     display: none !important;
   }
+
+  #search-mode-toggle[aria-pressed="true"] #search-mode-toggle__indicator {
+    background-color: var(--color-primary) !important;
+
+    &::before {
+      transform: translateX(0.5rem);
+    }
+  }
 }
 
 @layer utilities {

From e1af135e85b2b0bba9dd8a80524c999ffdea09c0 Mon Sep 17 00:00:00 2001
From: Josh Collinsworth <joshuajcollinsworth@gmail.com>
Date: Wed, 3 Sep 2025 11:47:29 -0500
Subject: [PATCH 5/7] More styling updates; fix Safari not showing results

---
 _components/SearchInput.tsx | 25 ++++++++++++++-----------
 search.client.ts            |  8 +++++---
 styles.css                  |  5 ++---
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/_components/SearchInput.tsx b/_components/SearchInput.tsx
index c50b38235..782d38baf 100644
--- a/_components/SearchInput.tsx
+++ b/_components/SearchInput.tsx
@@ -29,7 +29,7 @@ export default function SearchInput() {
         className="w-full h-full bg-black/50 backdrop-blur-sm fixed inset-0 max-w-none max-h-none z-50 overflow-y-auto p-4 sm:p-6 md:p-20"
         role="dialog"
       >
-        <div className="mx-auto max-w-2xl w-full transform divide-y divide-gray-200 overflow-hidden rounded-xl bg-background-raw shadow-2xl border border-foreground-primary transition-all">
+        <div className="mx-auto max-w-2xl w-full transform overflow-hidden rounded-xl bg-background-raw shadow-2xl border border-foreground-primary transition-all">
           {/* Search Header */}
           <div className="relative flex items-center justify-between px-2">
             <input
@@ -55,16 +55,16 @@ export default function SearchInput() {
               >
                 <div
                   id="search-mode-toggle__indicator"
-                  className="flex items-center w-6 h-4 rounded-full bg-foreground-tertiary p-0.5 relative before:aspect-square before:h-3 before:bg-background-raw before:rounded-full before:transition-transform before:duration-200"
+                  className="flex items-center w-6 h-4 rounded-full bg-foreground-tertiary p-0.5 relative dark:bg-gray-600 before:aspect-square before:h-3 before:bg-background-raw before:rounded-full before:transition-transform before:duration-200"
                 />
-                <span>Use AI</span>
+                <span>Ask AI</span>
               </button>
             </div>
 
             {/* Loading Indicator */}
             <div
               id="orama-search-loading"
-              className="absolute left-2 px-px top-1/2 transform -translate-y-1/2 hidden bg-background-raw"
+              className="absolute left-4 px-px top-1/2 transform -translate-y-1/2 hidden bg-background-raw"
             >
               <div className="animate-spin rounded-full h-4 w-4 border-2 border-transparent border-r-foreground-primary" />
             </div>
@@ -75,39 +75,42 @@ export default function SearchInput() {
             id="orama-search-results"
             className="max-h-80 scroll-py-2 overflow-y-auto text-sm"
           >
-            <div id="orama-search-results-content">
+            <div
+              id="orama-search-results-content"
+              style="scrollbar-gutter: stable;"
+            >
               {/* Results will be populated via JavaScript */}
             </div>
           </div>
 
           {/* Footer with keyboard shortcuts */}
-          <div className="flex flex-wrap gap-6 items-center bg-background-secondary px-4 py-3 text-xs text-foreground-secondary">
+          <footer className="flex flex-wrap gap-6 items-center bg-background-secondary px-4 py-3 text-xs text-foreground-secondary">
             <span>
-              <kbd class="px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
+              <kbd class="font-sans px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
                 <span aria-hidden="true">↑↓</span>
                 <span class="sr-only">Up or down to</span>
               </kbd>navigate
             </span>
             <span>
-              <kbd class="px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
+              <kbd class="font-sans px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
                 <span aria-hidden="true">↵</span>
                 <span class="sr-only">Enter to</span>
               </kbd>select
             </span>
             <span>
-              <kbd class="px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
+              <kbd class="font-sans px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
                 <span aria-hidden="true">ESC</span>
                 <span class="sr-only">Escape to</span>
               </kbd>close
             </span>
             <span className="flex items-center ml-auto">
-              <kbd className="px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
+              <kbd class="font-sans px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
                 ⌘⇧K
               </kbd>
               <span className="hidden sm:inline">Toggle AI</span>
               <span className="sm:hidden">AI</span>
             </span>
-          </div>
+          </footer>
         </div>
 
         {/* Screen reader announcements */}
diff --git a/search.client.ts b/search.client.ts
index 6ac0ae745..4e502ab27 100644
--- a/search.client.ts
+++ b/search.client.ts
@@ -563,7 +563,7 @@ class OramaSearch {
   }
 
   renderAiSearchResultsHeading({ error = false }) {
-    return `<div class="p-4 py-2 border-b border-foreground-tertiary bg-background-tertiary">
+    return `<div class="p-4 py-2 border-b border-foreground-tertiary bg-background-secondary">
         <div class="flex items-center justify-between">
           <h2 class="text-sm font-semibold text-foreground-primary flex items-center gap-2">
           ${
@@ -597,7 +597,7 @@ class OramaSearch {
           <p class="text-sm text-foreground-secondary">
             <strong>Query:</strong> ${this.escapeHtml(searchTerm)}
           </p>
-          <p class="text-xs text-foreground-tertiary">
+          <p class="text-xs text-foreground-secondary">
             Using advanced context engineering to provide the most relevant and helpful response.
           </p>
         </div>
@@ -655,7 +655,7 @@ class OramaSearch {
     this.searchResults.innerHTML = `
       ${this.renderAiSearchResultsHeading({ error: false })}
       <div class="p-6">
-        <div class="p-2 border-l-4  border-primary mb-4">
+        <div class="p-2 border-l-4 text-foreground-secondary border-primary mb-4">
           <p class="text-sm">
             <strong>Your Question:</strong> <i>${
       this.escapeHtml(searchTerm)
@@ -821,6 +821,8 @@ class OramaSearch {
     if (modal) {
       modal.close();
       this.isModalOpen = false;
+      this.searchInputModal!.value = ""; // Clear modal input when hiding
+      this.searchResults!.innerHTML = ""; // Clear results when hiding
       this.selectedIndex = -1; // Reset selection when hiding
 
       // Clean up any ongoing operations
diff --git a/styles.css b/styles.css
index 95f2c8e22..9d669ae2f 100644
--- a/styles.css
+++ b/styles.css
@@ -1616,9 +1616,8 @@
     }
   }
 
-  #orama-search-results:has(#orama-search-results-content:empty),
-  #orama-search-results:has(#orama-search-results-content:empty) + div {
-    display: none !important;
+  #orama-search-modal ::-webkit-search-cancel-button {
+    display: none;
   }
 
   #search-mode-toggle[aria-pressed="true"] #search-mode-toggle__indicator {

From 9b37b40b97c2689140c36d396850eb8edb5db76c Mon Sep 17 00:00:00 2001
From: Josh Collinsworth <joshuajcollinsworth@gmail.com>
Date: Wed, 3 Sep 2025 14:16:40 -0500
Subject: [PATCH 6/7] More style updates

---
 _components/SearchInput.tsx | 18 ++++++++++--------
 styles.css                  | 33 ++++++++++++++++++++++++++++++++-
 2 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/_components/SearchInput.tsx b/_components/SearchInput.tsx
index 782d38baf..415464cbd 100644
--- a/_components/SearchInput.tsx
+++ b/_components/SearchInput.tsx
@@ -8,7 +8,7 @@ export default function SearchInput() {
             type="search"
             placeholder="Search documentation..."
             id="orama-search-input"
-            className="w-full min-w-24 rounded-lg placeholder:text-sm text-base leading-normal p-1 pl-8 pr-16 border transition-colors duration-200
+            className="w-full min-w-24 rounded-lg placeholder:text-sm text-base leading-normal p-1 px-8 border transition-colors duration-200
             text-foreground-primary border-foreground-secondary hover:bg-background-secondary focus:bg-background-secondary focus:outline-offset-1
             cursor-pointer"
             style="background: url(/img/search.svg) no-repeat 0.5em 50%; background-size: 1.25em; background-color: var(--color-background-raw);"
@@ -26,10 +26,10 @@ export default function SearchInput() {
       {/* Search Modal */}
       <dialog
         id="orama-search-modal"
-        className="w-full h-full bg-black/50 backdrop-blur-sm fixed inset-0 max-w-none max-h-none z-50 overflow-y-auto p-4 sm:p-6 md:p-20"
+        className="w-full h-dvh bg-black/30 backdrop-blur-sm fixed inset-0 max-w-none max-h-none z-50 overflow-y-auto p-4 sm:p-6 md:p-20 transition-all duration-200"
         role="dialog"
       >
-        <div className="mx-auto max-w-2xl w-full transform overflow-hidden rounded-xl bg-background-raw shadow-2xl border border-foreground-primary transition-all">
+        <div className="flex flex-col justify-between mx-auto max-w-2xl w-full transform overflow-hidden rounded-xl bg-background-raw shadow-2xl border border-foreground-primary dark:border-gray-700">
           {/* Search Header */}
           <div className="relative flex items-center justify-between px-2">
             <input
@@ -49,14 +49,16 @@ export default function SearchInput() {
               <button
                 type="button"
                 id="search-mode-toggle"
-                className="flex items-center space-x-1 px-2 py-1 text-xs font-medium text-foreground-secondary hover:text-foreground-primary transition-colors cursor-pointer"
+                className="flex items-center px-2 py-1 gap-x-1 text-xs font-medium text-foreground-secondary hover:text-foreground-primary transition-colors cursor-pointer"
                 title="Toggle AI search mode (Ctrl+Shift+K)"
                 aria-pressed="false"
               >
                 <div
                   id="search-mode-toggle__indicator"
-                  className="flex items-center w-6 h-4 rounded-full bg-foreground-tertiary p-0.5 relative dark:bg-gray-600 before:aspect-square before:h-3 before:bg-background-raw before:rounded-full before:transition-transform before:duration-200"
-                />
+                  className="flex items-center w-6 h-4 rounded-full bg-foreground-tertiary p-0.5 relative dark:bg-gray-600"
+                >
+                  <div class="aspect-square h-3 bg-background-raw rounded-full transition-transform duration-200" />
+                </div>
                 <span>Ask AI</span>
               </button>
             </div>
@@ -73,7 +75,7 @@ export default function SearchInput() {
           {/* Search Results */}
           <div
             id="orama-search-results"
-            className="max-h-80 scroll-py-2 overflow-y-auto text-sm"
+            className="max-h-[calc(100vh-18rem)] lg:max-h-80 scroll-py-2 overflow-y-auto text-sm"
           >
             <div
               id="orama-search-results-content"
@@ -84,7 +86,7 @@ export default function SearchInput() {
           </div>
 
           {/* Footer with keyboard shortcuts */}
-          <footer className="flex flex-wrap gap-6 items-center bg-background-secondary px-4 py-3 text-xs text-foreground-secondary">
+          <footer className="hidden xs:flex flex-wrap gap-x-6 gap-y-2 items-center bg-background-secondary px-4 py-3 text-xs text-foreground-secondary">
             <span>
               <kbd class="font-sans px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
                 <span aria-hidden="true">↑↓</span>
diff --git a/styles.css b/styles.css
index 9d669ae2f..f23c2ac4a 100644
--- a/styles.css
+++ b/styles.css
@@ -1623,9 +1623,40 @@
   #search-mode-toggle[aria-pressed="true"] #search-mode-toggle__indicator {
     background-color: var(--color-primary) !important;
 
-    &::before {
+    & > div {
       transform: translateX(0.5rem);
     }
+
+    + span {
+      color: var(--color-primary);
+    }
+  }
+
+  @keyframes fade_in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide_up {
+    0% {
+      transform: translateY(24px);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  /* Styles when the dialog is open */
+  #orama-search-modal[open] {
+    animation: fade_in 0.2s ease-out forwards;
+
+    & > div {
+      animation: slide_up 0.15s cubic-bezier(0, 0, 0.2, 1) forwards;
+    }
   }
 }
 

From e7d813a7bb9d238909c3994698242643dffebb41 Mon Sep 17 00:00:00 2001
From: Josh Collinsworth <joshuajcollinsworth@gmail.com>
Date: Wed, 3 Sep 2025 15:00:43 -0500
Subject: [PATCH 7/7] iOS adjustments

---
 _components/SearchInput.tsx |  2 +-
 styles.css                  | 24 +++++++++++++++---------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/_components/SearchInput.tsx b/_components/SearchInput.tsx
index 415464cbd..958b3bb6b 100644
--- a/_components/SearchInput.tsx
+++ b/_components/SearchInput.tsx
@@ -26,7 +26,7 @@ export default function SearchInput() {
       {/* Search Modal */}
       <dialog
         id="orama-search-modal"
-        className="w-full h-dvh bg-black/30 backdrop-blur-sm fixed inset-0 max-w-none max-h-none z-50 overflow-y-auto p-4 sm:p-6 md:p-20 transition-all duration-200"
+        className="w-full h-full min-h-dvh bg-black/30 [-webkit-backdrop-filter:blur(10px)] backdrop-blur-sm fixed inset-0 max-w-none max-h-none z-50 overflow-y-auto p-4 sm:p-6 md:p-20 transition-all duration-200"
         role="dialog"
       >
         <div className="flex flex-col justify-between mx-auto max-w-2xl w-full transform overflow-hidden rounded-xl bg-background-raw shadow-2xl border border-foreground-primary dark:border-gray-700">
diff --git a/styles.css b/styles.css
index f23c2ac4a..89fcd336d 100644
--- a/styles.css
+++ b/styles.css
@@ -1616,10 +1616,6 @@
     }
   }
 
-  #orama-search-modal ::-webkit-search-cancel-button {
-    display: none;
-  }
-
   #search-mode-toggle[aria-pressed="true"] #search-mode-toggle__indicator {
     background-color: var(--color-primary) !important;
 
@@ -1650,12 +1646,22 @@
     }
   }
 
-  /* Styles when the dialog is open */
-  #orama-search-modal[open] {
-    animation: fade_in 0.2s ease-out forwards;
+  #orama-search-modal {
+    ::-webkit-search-cancel-button {
+      display: none;
+    }
 
-    & > div {
-      animation: slide_up 0.15s cubic-bezier(0, 0, 0.2, 1) forwards;
+    &::backdrop {
+      display: none;
+    }
+
+    /* Styles when the dialog is open */
+    &[open] {
+      animation: fade_in 0.2s ease-out forwards;
+
+      & > div {
+        animation: slide_up 0.15s cubic-bezier(0, 0, 0.2, 1) forwards;
+      }
     }
   }
 }