From 961b40ed0355bbe17b7ef04e0de88a98cf7d1e09 Mon Sep 17 00:00:00 2001
From: David Pine <7679720+IEvangelist@users.noreply.github.com>
Date: Fri, 18 Sep 2026 16:08:35 -0500
Subject: [PATCH 1/6] Fix release hub navigation and unify search recovery UX

Preserve Astro ClientRouter lifecycle and history ownership, restore deferred artwork after navigation, and align search controls and contextual recovery across the hub, API reference and galleries.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
---
 .../CatalogSearchActiveFilters.astro          |  35 ++
 .../src/components/Integrations.astro         | 242 +++++----
 src/frontend/src/components/SampleGrid.astro  | 258 +++++-----
 src/frontend/src/components/SessionGrid.astro | 209 +++-----
 .../api-reference/ApiSearchBar.astro          | 174 +------
 .../api-reference/InpageSearch.astro          | 196 +-------
 .../api-reference/VersionFilter.astro         |  31 +-
 .../api-reference/inpage-search-sync.ts       |   2 +
 .../dev-center/BrowseDropdown.astro           |   3 +-
 .../dev-center/GlossaryBrowser.astro          |  37 +-
 .../components/dev-center/GlossaryBrowser.ts  |  50 +-
 .../{DevLayout.astro => HubLayout.astro}      |   2 +-
 .../dev-center/ResourceBrowser.astro          |  49 +-
 .../components/dev-center/ResourceBrowser.ts  |  87 ++--
 .../components/dev-center/empty-results.ts    |  20 +
 .../components/dev-center/filter-history.ts   |  93 ++++
 .../components/search/SearchEmptyState.astro  |  21 +
 .../src/components/search/SearchField.astro   |  47 ++
 .../components/search/search-empty-state.ts   |  59 +++
 .../src/components/starlight/Search.astro     |  97 +++-
 .../src/components/starlight/Sidebar.astro    | 274 +++-------
 .../docs/community/contributor-guide.mdx      |   8 +
 src/frontend/src/content/i18n/en.json         |  35 ++
 src/frontend/src/pages/hub/browse/index.astro |   6 +-
 .../src/pages/hub/glossary/[term].astro       |   6 +-
 .../src/pages/hub/glossary/index.astro        |   6 +-
 src/frontend/src/pages/hub/index.astro        |   8 +-
 .../reference/api/_search-presentation.ts     |  97 ++++
 .../api/csharp/[package]/[type]/index.astro   |  47 +-
 .../api/csharp/[package]/index.astro          |  45 +-
 .../pages/reference/api/csharp/index.astro    |  72 ++-
 .../typescript/[module]/[item]/index.astro    |  47 +-
 .../api/typescript/[module]/index.astro       |  45 +-
 .../reference/api/typescript/index.astro      |  73 ++-
 src/frontend/src/styles/dev-hub.css           |  19 +-
 src/frontend/src/styles/search-controls.css   | 149 ++++++
 .../utils/dev-center/resource-card-html.ts    |   9 +-
 .../tests/e2e/api-search-contract.spec.ts     | 302 +++++++++++
 src/frontend/tests/e2e/dev-browse.spec.ts     |  40 +-
 .../tests/e2e/dev-empty-recovery.spec.ts      | 148 ++++++
 src/frontend/tests/e2e/dev-glossary.spec.ts   |  39 +-
 src/frontend/tests/e2e/dev-grain.spec.ts      |  59 +++
 src/frontend/tests/e2e/dev-navigation.spec.ts | 138 +++++
 .../tests/e2e/filter-navigation.spec.ts       |   2 +-
 .../tests/e2e/gallery-search-contract.spec.ts | 472 ++++++++++++++++++
 .../tests/e2e/search-visual-parity.spec.ts    |  80 +++
 src/frontend/tests/e2e/site-search.spec.ts    | 149 ++++++
 .../typecheck/component-props.contracts.ts    |  15 +
 .../unit/api-search-lifecycle.vitest.test.ts  |  24 +-
 .../unit/api-search-recovery.vitest.test.ts   |  95 ++++
 .../unit/custom-components.vitest.test.ts     |  48 +-
 .../tests/unit/dev-glossary.vitest.test.ts    |   9 +-
 .../tests/unit/filter-history.vitest.test.ts  | 164 ++++++
 .../unit/resource-browser.vitest.test.ts      |  10 +-
 .../unit/search-presentation.vitest.test.ts   | 191 +++++++
 .../tests/unit/search-recovery.vitest.test.ts |  32 ++
 56 files changed, 3439 insertions(+), 1236 deletions(-)
 create mode 100644 src/frontend/src/components/CatalogSearchActiveFilters.astro
 rename src/frontend/src/components/dev-center/{DevLayout.astro => HubLayout.astro} (94%)
 create mode 100644 src/frontend/src/components/dev-center/empty-results.ts
 create mode 100644 src/frontend/src/components/dev-center/filter-history.ts
 create mode 100644 src/frontend/src/components/search/SearchEmptyState.astro
 create mode 100644 src/frontend/src/components/search/SearchField.astro
 create mode 100644 src/frontend/src/components/search/search-empty-state.ts
 create mode 100644 src/frontend/src/pages/reference/api/_search-presentation.ts
 create mode 100644 src/frontend/src/styles/search-controls.css
 create mode 100644 src/frontend/tests/e2e/api-search-contract.spec.ts
 create mode 100644 src/frontend/tests/e2e/dev-empty-recovery.spec.ts
 create mode 100644 src/frontend/tests/e2e/dev-navigation.spec.ts
 create mode 100644 src/frontend/tests/e2e/gallery-search-contract.spec.ts
 create mode 100644 src/frontend/tests/e2e/search-visual-parity.spec.ts
 create mode 100644 src/frontend/tests/unit/api-search-recovery.vitest.test.ts
 create mode 100644 src/frontend/tests/unit/filter-history.vitest.test.ts
 create mode 100644 src/frontend/tests/unit/search-presentation.vitest.test.ts
 create mode 100644 src/frontend/tests/unit/search-recovery.vitest.test.ts

diff --git a/src/frontend/src/components/CatalogSearchActiveFilters.astro b/src/frontend/src/components/CatalogSearchActiveFilters.astro
new file mode 100644
index 000000000..16d6dd96e
--- /dev/null
+++ b/src/frontend/src/components/CatalogSearchActiveFilters.astro
@@ -0,0 +1,35 @@
+---
+interface Props {
+  label: string;
+}
+const { label } = Astro.props;
+---
+
+<catalog-search-active-filters data-label={label} data-labels="[]" hidden />
+
+<script>
+  import { setSearchActiveFilters } from '@components/search/search-empty-state';
+
+  // Attribute updates bridge synchronous gallery controllers and bundled helpers.
+  class CatalogSearchActiveFilters extends HTMLElement {
+    static observedAttributes = ['data-labels'];
+
+    connectedCallback() {
+      this.renderFilters();
+    }
+
+    attributeChangedCallback() {
+      this.renderFilters();
+    }
+
+    private renderFilters() {
+      if (!this.isConnected || !this.parentElement) return;
+      const labels: string[] = JSON.parse(this.dataset.labels ?? '[]');
+      setSearchActiveFilters(this.parentElement, labels, this.dataset.label);
+    }
+  }
+
+  if (!customElements.get('catalog-search-active-filters')) {
+    customElements.define('catalog-search-active-filters', CatalogSearchActiveFilters);
+  }
+</script>
diff --git a/src/frontend/src/components/Integrations.astro b/src/frontend/src/components/Integrations.astro
index 5fb1b023d..17cba62de 100644
--- a/src/frontend/src/components/Integrations.astro
+++ b/src/frontend/src/components/Integrations.astro
@@ -1,7 +1,10 @@
 ---
-import { CardGrid, Card } from '@astrojs/starlight/components';
+import { CardGrid } from '@astrojs/starlight/components';
 import IntegrationCard from '@components/IntegrationCard.astro';
 import IntegrationTotals from '@components/IntegrationTotals.astro';
+import '../styles/search-controls.css';
+import SearchField from '@components/search/SearchField.astro';
+import CatalogSearchActiveFilters from '@components/CatalogSearchActiveFilters.astro';
 
 interface Props {
   integrations: Integrations;
@@ -9,6 +12,21 @@ interface Props {
 }
 
 const { integrations, availableDocs } = Astro.props;
+const messages = {
+  clearSearch: Astro.locals.t('catalogSearch.clearSearch'),
+  clearFilters: Astro.locals.t('catalogSearch.clearFilters'),
+  resetAll: Astro.locals.t('catalogSearch.resetAll'),
+  count: Astro.locals.t('catalogSearch.integrationsCount'),
+  empty: Astro.locals.t('catalogSearch.integrationsEmpty'),
+  queryEmpty: Astro.locals.t('catalogSearch.integrationsQueryEmpty'),
+  filteredQueryEmpty: Astro.locals.t('catalogSearch.integrationsFilteredQueryEmpty'),
+  queryGuidance: Astro.locals.t('catalogSearch.queryGuidance'),
+  preserveFiltersGuidance: Astro.locals.t('catalogSearch.preserveFiltersGuidance'),
+  preserveQueryGuidance: Astro.locals.t('catalogSearch.preserveQueryGuidance'),
+  filtersGuidance: Astro.locals.t('catalogSearch.filtersGuidance'),
+  resetGuidance: Astro.locals.t('catalogSearch.resetGuidance'),
+  excludedFilter: Astro.locals.t('catalogSearch.excludedFilter'),
+};
 
 interface Integration {
   title: string;
@@ -49,35 +67,19 @@ const sortedIntegrations = visibleIntegrations.sort((a, b) => {
 
 <div class="sl-mb-4 search-wrapper not-content">
   <div class="search-container">
-    <svg
-      class="search-icon"
-      aria-hidden="true"
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <circle cx="11" cy="11" r="8"></circle>
-      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-    </svg>
-    <input
-      autocomplete="off"
-      spellcheck="false"
-      type="text"
-      class="search-box filter"
+    <SearchField
+      id="integrations-search-input"
+      label={Astro.locals.t('integrations.search')}
       placeholder={Astro.locals.t('integrations.search')}
+      inputClass="search-box filter"
+      clearClass="clear-button"
+      clearLabel={messages.clearSearch}
     />
-    <button class="clear-button" aria-label="Clear search" type="button">
-      {Astro.locals.t('integrations.clear')}
-    </button>
   </div>
   <div class="type-toggle-group">
     <button
       class="type-toggle active"
+      aria-pressed="true"
       data-type="official"
       title={Astro.locals.t('integrations.officialTooltip')}
       data-tooltip-placement="top"
@@ -88,6 +90,7 @@ const sortedIntegrations = visibleIntegrations.sort((a, b) => {
     </button>
     <button
       class="type-toggle active"
+      aria-pressed="true"
       data-type="community"
       title={Astro.locals.t('integrations.communityTooltip')}
       data-tooltip-placement="top"
@@ -102,6 +105,7 @@ const sortedIntegrations = visibleIntegrations.sort((a, b) => {
       <div class="type-toggle-group">
         <button
           class="type-toggle active"
+          aria-pressed="true"
           data-type="hosting"
           title={Astro.locals.t('integrations.hostingTooltip')}
           data-tooltip-placement="top"
@@ -125,6 +129,7 @@ const sortedIntegrations = visibleIntegrations.sort((a, b) => {
         </button>
         <button
           class="type-toggle active"
+          aria-pressed="true"
           data-type="client"
           title={Astro.locals.t('integrations.clientTooltip')}
           data-tooltip-placement="top"
@@ -154,6 +159,12 @@ const sortedIntegrations = visibleIntegrations.sort((a, b) => {
   }
 </div>
 
+<div class="search-results-bar not-content">
+  <span class="search-results-summary" data-integration-count role="status" aria-live="polite" aria-atomic="true"></span>
+  <button type="button" class="search-action" data-integration-clear-filters hidden>{messages.clearFilters}</button>
+  <button type="button" class="search-action" data-integration-reset hidden>{messages.resetAll}</button>
+</div>
+
 {
   sortedIntegrations.length > 0 && (
     <section>
@@ -179,21 +190,38 @@ const sortedIntegrations = visibleIntegrations.sort((a, b) => {
         </CardGrid>
       </div>
 
-      <div class="no-results">
-        <Card title="No integrations found" icon="magnifier">
-          {Astro.locals.t('integrations.noResults')}
-        </Card>
+      <div class="no-results search-empty">
+        <p class="search-empty-title">{Astro.locals.t('catalogSearch.integrationsEmpty')}</p>
+        <p class="search-empty-hint">{Astro.locals.t('integrations.noResults')}</p>
+        <CatalogSearchActiveFilters label={Astro.locals.t('catalogSearch.activeFilters')} />
+        <button type="button" class="search-action" data-integration-recover>{messages.clearSearch}</button>
       </div>
     </section>
   )
 }
+{sortedIntegrations.length === 0 && <p>{Astro.locals.t('catalogSearch.integrationsUnavailable')}</p>}
 
 <style>
   .no-results {
-    margin-top: 0;
+    margin-block: 1rem;
     display: none; /* Hidden by default */
   }
 
+  .search-results-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+    margin-block: 0.75rem;
+  }
+
+  button:focus-visible {
+    outline: 2px solid var(--sl-color-text-accent);
+    outline-offset: 2px;
+  }
+
+  button[hidden] { display: none; }
+
   .integration-stats {
     margin-bottom: 1rem;
     display: none; /* Hidden by default on mobile */
@@ -308,61 +336,8 @@ const sortedIntegrations = visibleIntegrations.sort((a, b) => {
     align-items: center;
   }
 
-  input.filter {
-    padding-inline-start: 2.5rem;
-    padding-inline-end: 4.5rem;
-    background-color: var(--sl-color-black);
-    color: var(--sl-color-text);
-    font-size: var(--sl-text);
-    width: 100%;
-    height: 2.5rem;
-    border: 1px solid var(--sl-color-gray-5);
-    border-radius: 0.5rem;
-    font-size: calc(21px * var(--pagefind-ui-scale));
-    position: relative;
-    display: flex;
-    box-sizing: border-box;
-  }
-
-  .search-icon {
-    position: absolute;
-    left: 0.75rem;
-    top: 50%;
-    transform: translateY(-50%);
-    color: var(--sl-color-gray-4);
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  .clear-button {
-    position: absolute;
-    right: 0.375rem;
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: var(--sl-color-gray-6);
-    border: 1px solid var(--sl-color-gray-5);
-    color: var(--sl-color-gray-3);
-    cursor: pointer;
-    padding: 0.125rem 0.5rem;
-    display: none;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.25rem;
-    font-size: 0.75rem;
-    line-height: 1.5;
-    transition:
-      color 0.2s ease,
-      background-color 0.2s ease;
-    z-index: 1;
-  }
-
-  .clear-button:hover {
-    color: var(--sl-color-text);
-    background-color: var(--sl-color-gray-5);
-  }
-
-  .clear-button.visible {
-    display: flex;
+  @media (pointer: coarse) {
+    .type-toggle-group { min-height: 2.75rem; }
   }
 
   .type-toggle-group {
@@ -442,7 +417,7 @@ const sortedIntegrations = visibleIntegrations.sort((a, b) => {
   }
 </style>
 
-<script is:inline data-astro-rerun define:vars={{ showClientIntegrations }}>
+<script is:inline data-astro-rerun define:vars={{ showClientIntegrations, messages }}>
 (function initializeIntegrations() {
   const searchBox = document.querySelector('.search-box');
   if (!document.querySelector('.integration-stats') || !searchBox) return;
@@ -464,6 +439,11 @@ const sortedIntegrations = visibleIntegrations.sort((a, b) => {
   const cards = document.querySelectorAll('.card-grid .card');
   const noResults = document.querySelector('.no-results');
   const statsSection = document.querySelector('.integration-stats');
+  const count = document.querySelector('[data-integration-count]');
+  const clearFiltersButton = document.querySelector('[data-integration-clear-filters]');
+  const resetButton = document.querySelector('[data-integration-reset]');
+  const recoveryButton = document.querySelector('[data-integration-recover]');
+  let recoveryAction = 'clearSearch';
 
   let activeTags = new Set();
   let showOfficial = true;
@@ -505,6 +485,7 @@ const sortedIntegrations = visibleIntegrations.sort((a, b) => {
   }
 
   function updateClearButton() {
+    clearButton.style.display = searchBox.value.length > 0 ? '' : 'none';
     if (searchBox.value.length > 0) {
       clearButton.classList.add('visible');
     } else {
@@ -513,7 +494,9 @@ const sortedIntegrations = visibleIntegrations.sort((a, b) => {
   }
 
   function updateURL() {
-    const params = new URLSearchParams();
+    if (signal.aborted || !searchBox.isConnected) return;
+    const params = new URLSearchParams(window.location.search);
+    ['tags', 'search', 'official', 'community', 'hosting', 'client'].forEach((key) => params.delete(key));
     if (activeTags.size > 0) params.set('tags', [...activeTags].join(','));
     if (searchBox.value.trim()) params.set('search', searchBox.value.trim());
     if (!showOfficial) params.set('official', 'false');
@@ -522,17 +505,38 @@ const sortedIntegrations = visibleIntegrations.sort((a, b) => {
       if (!showHosting) params.set('hosting', 'false');
       if (!showClient) params.set('client', 'false');
     }
-    const newUrl = `${window.location.pathname}?${params.toString()}`;
-    history.pushState(history.state, '', newUrl);
+    const query = params.toString();
+    const newUrl = `${window.location.pathname}${query ? `?${query}` : ''}${window.location.hash}`;
+    history.replaceState(history.state, '', newUrl);
   }
 
   function clearSearch() {
+    clearTimeout(filterTimer);
     searchBox.value = '';
     updateClearButton();
     filterCards();
     searchBox.focus();
   }
 
+  function hasFacets() {
+    return activeTags.size > 0 || !showOfficial || !showCommunity ||
+      (showClientIntegrations && (!showHosting || !showClient));
+  }
+
+  function clearFilters() {
+    clearTimeout(filterTimer);
+    activeTags.clear();
+    showOfficial = showCommunity = showHosting = showClient = true;
+    filterCards();
+    searchBox.focus();
+  }
+
+  function resetAll() {
+    searchBox.value = '';
+    updateClearButton();
+    clearFilters();
+  }
+
   function updateTotals(visibleCards) {
     // Get the IntegrationTotals component
     const totalsComponent = document.querySelector('.integration-totals');
@@ -578,6 +582,7 @@ const sortedIntegrations = visibleIntegrations.sort((a, b) => {
   }
 
   function filterCards(updateUrl = true) {
+    if (signal.aborted || !searchBox.isConnected) return;
     const searchTerm = searchBox.value.toLowerCase().trim();
     let visibleCount = 0;
     const visibleCards = [];
@@ -585,7 +590,7 @@ const sortedIntegrations = visibleIntegrations.sort((a, b) => {
     // Split search term by spaces to support multiple keywords
     const searchTerms = searchTerm ? searchTerm.split(/\s+/).filter((term) => term.length > 0) : [];
 
-    cards.forEach((card) => {
+    function matchesCard(card) {
       const cardTags = card.dataset.tags ? card.dataset.tags.split(',') : [];
       const cardTitle = card.dataset.title ? card.dataset.title.toLowerCase() : '';
       const cardDescription = card.dataset.description
@@ -620,7 +625,12 @@ const sortedIntegrations = visibleIntegrations.sort((a, b) => {
         (!isHosting && (cardTitle.startsWith('aspire.') || /\.aspire\./i.test(cardTitle)));
       const matchesType = (showHosting || !isHosting) && (showClient || !isClient);
 
-      const visible = matchesTags && matchesSearch && matchesSource && matchesType;
+      return { matchesSearch, matchesFilters: matchesTags && matchesSource && matchesType };
+    }
+
+    cards.forEach((card) => {
+      const { matchesSearch, matchesFilters } = matchesCard(card);
+      const visible = matchesSearch && matchesFilters;
       card.style.display = visible ? '' : 'none';
 
       if (visible) {
@@ -631,6 +641,47 @@ const sortedIntegrations = visibleIntegrations.sort((a, b) => {
 
     // Show/hide the no results message based on visible count
     noResults.style.display = visibleCount === 0 ? 'block' : 'none';
+    const facets = hasFacets();
+    clearFiltersButton.hidden = visibleCount === 0 || !facets || Boolean(searchTerm);
+    resetButton.hidden = visibleCount === 0 || !facets || !searchTerm;
+    if (visibleCount === 0) {
+      let withoutQuery = 0;
+      let withoutFilters = 0;
+      if (searchTerm && facets) {
+        cards.forEach((card) => {
+          const { matchesSearch, matchesFilters } = matchesCard(card);
+          if (matchesSearch) withoutFilters++;
+          if (matchesFilters) withoutQuery++;
+        });
+      }
+      recoveryAction = searchTerm && facets
+        ? (withoutFilters > 0 ? 'clearFilters' : withoutQuery > 0 ? 'clearSearch' : 'resetAll')
+        : facets ? 'clearFilters' : 'clearSearch';
+      recoveryButton.textContent = messages[recoveryAction];
+      const title = searchTerm
+        ? (withoutFilters > 0 ? messages.filteredQueryEmpty : messages.queryEmpty)
+        : messages.empty;
+      noResults.querySelector('.search-empty-title').textContent = title.replace('{{query}}', () => searchBox.value.trim());
+      const guidance = recoveryAction === 'clearFilters'
+        ? (searchTerm ? messages.preserveQueryGuidance : messages.filtersGuidance)
+        : recoveryAction === 'clearSearch'
+          ? (facets ? messages.preserveFiltersGuidance : messages.queryGuidance)
+          : messages.resetGuidance;
+      const excluded = [[officialToggle, showOfficial], [communityToggle, showCommunity],
+        [hostingToggle, showHosting], [clientToggle, showClient]]
+        .filter(([button, selected]) => button && !selected)
+        .map(([button]) => button.textContent.trim());
+      noResults.querySelector('.search-empty-hint').textContent = guidance;
+      noResults.querySelector('catalog-search-active-filters').dataset.labels = JSON.stringify(
+        excluded.map((label) => messages.excludedFilter.replace('{{filter}}', () => label)),
+      );
+    }
+    count.textContent = messages.count.replace('{{count}}', String(visibleCount)).replace('{{total}}', String(cards.length));
+    [[officialToggle, showOfficial], [communityToggle, showCommunity],
+      [hostingToggle, showHosting], [clientToggle, showClient]].forEach(([button, selected]) => {
+        button?.classList.toggle('active', selected);
+        button?.setAttribute('aria-pressed', String(selected));
+      });
 
     // Show/hide the stats based on visible count
     statsSection.style.display = visibleCount === 0 ? 'none' : 'block';
@@ -660,6 +711,16 @@ const sortedIntegrations = visibleIntegrations.sort((a, b) => {
   }, { signal });
 
   clearButton.addEventListener('click', clearSearch, { signal });
+  clearFiltersButton.addEventListener('click', clearFilters, { signal });
+  resetButton.addEventListener('click', resetAll, { signal });
+  recoveryButton.addEventListener('click', () => {
+    // Flush a pending query edit before choosing the action shown for this state.
+    clearTimeout(filterTimer);
+    filterCards(false);
+    if (recoveryAction === 'resetAll') resetAll();
+    else if (recoveryAction === 'clearFilters') clearFilters();
+    else clearSearch();
+  }, { signal });
 
   officialToggle.addEventListener('click', () => {
     showOfficial = !showOfficial;
@@ -719,6 +780,5 @@ const sortedIntegrations = visibleIntegrations.sort((a, b) => {
 
   filterCards(false); // Initial render must not create another history entry.
   updateClearButton();
-  searchBox.focus();
 })();
 </script>
diff --git a/src/frontend/src/components/SampleGrid.astro b/src/frontend/src/components/SampleGrid.astro
index 8c03c98f2..30c6d9c69 100644
--- a/src/frontend/src/components/SampleGrid.astro
+++ b/src/frontend/src/components/SampleGrid.astro
@@ -1,5 +1,7 @@
 ---
 import SampleCard from '@components/SampleCard.astro';
+import CatalogSearchActiveFilters from '@components/CatalogSearchActiveFilters.astro';
+import '../styles/search-controls.css';
 import { tagLabel } from '@utils/sample-tags';
 import {
   isThemeAwareSampleImage,
@@ -15,6 +17,20 @@ interface Props {
 }
 
 const { samples } = Astro.props;
+const messages = {
+  clearSearch: Astro.locals.t('catalogSearch.clearSearch'),
+  clearFilters: Astro.locals.t('catalogSearch.clearFilters'),
+  resetAll: Astro.locals.t('catalogSearch.resetAll'),
+  count: Astro.locals.t('catalogSearch.samplesCount'),
+  empty: Astro.locals.t('catalogSearch.samplesEmpty'),
+  queryEmpty: Astro.locals.t('catalogSearch.samplesQueryEmpty'),
+  filteredQueryEmpty: Astro.locals.t('catalogSearch.samplesFilteredQueryEmpty'),
+  queryGuidance: Astro.locals.t('catalogSearch.queryGuidance'),
+  preserveFiltersGuidance: Astro.locals.t('catalogSearch.preserveFiltersGuidance'),
+  preserveQueryGuidance: Astro.locals.t('catalogSearch.preserveQueryGuidance'),
+  filtersGuidance: Astro.locals.t('catalogSearch.filtersGuidance'),
+  resetGuidance: Astro.locals.t('catalogSearch.resetGuidance'),
+};
 const base = import.meta.env.BASE_URL.replace(/\/$/, '');
 
 // Eagerly import all sample images at build time
@@ -62,12 +78,10 @@ const tagCounts = new Map(
 
 <div class="samples-browser not-content" data-samples-browser>
   <!-- Search bar with embedded clear icon -->
-  <div class="search-container">
+  <div class="search-container search-field search-field-wrap">
     <svg
-      class="search-icon"
+      class="search-field-icon"
       aria-hidden="true"
-      width="16"
-      height="16"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -76,23 +90,22 @@ const tagCounts = new Map(
       stroke-linejoin="round"
     >
       <circle cx="11" cy="11" r="8"></circle>
-      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+      <path d="m21 21-4.35-4.35"></path>
     </svg>
-    <label class="sr-only" for="samples-search-input">Search samples</label>
+    <label class="sr-only" for="samples-search-input">{Astro.locals.t('catalogSearch.samplesLabel')}</label>
     <input
       autocomplete="off"
       spellcheck="false"
       type="search"
+      name="q"
       id="samples-search-input"
-      class="search-box"
-      placeholder="Search samples..."
+      class="search-box search-field-input"
+      placeholder={Astro.locals.t('catalogSearch.samplesPlaceholder')}
       data-search-input
     />
-    <button type="button" class="search-clear" aria-label="Clear search" data-clear-btn hidden>
+    <button type="button" class="search-clear search-field-clear" aria-label={messages.clearSearch} data-clear-btn hidden>
       <svg
         aria-hidden="true"
-        width="14"
-        height="14"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
@@ -100,8 +113,7 @@ const tagCounts = new Map(
         stroke-linecap="round"
         stroke-linejoin="round"
       >
-        <line x1="18" y1="6" x2="6" y2="18"></line>
-        <line x1="6" y1="6" x2="18" y2="18"></line>
+        <path d="m18 6-12 12M6 6l12 12"></path>
       </svg>
     </button>
   </div>
@@ -110,7 +122,7 @@ const tagCounts = new Map(
        chips fill with the accent color so they read as the only "loud" item
        in the row. On mobile the row collapses to a two-row max-height with a
        "Show all" expander to avoid the overwhelming 28-tag wall. -->
-  <div class="tag-filters" data-tag-filters data-collapsed="true">
+  <div class="tag-filters" id="sample-tags" data-tag-filters data-collapsed="true">
     {
       allTags.map((tag) => (
         <button
@@ -131,7 +143,7 @@ const tagCounts = new Map(
       ))
     }
   </div>
-  <button class="tag-toggle" type="button" data-tag-toggle hidden>
+  <button class="tag-toggle" type="button" data-tag-toggle aria-controls="sample-tags" aria-expanded="false" hidden>
     <span data-tag-toggle-label>Show all {allTags.length} tags</span>
     <svg
       class="tag-toggle-caret"
@@ -149,15 +161,14 @@ const tagCounts = new Map(
     </svg>
   </button>
 
-  <!-- Results header: count + subtle clear-all text link (only when filters
-       are active). The active state of the chips themselves is the source of
-       truth for "what's filtered" — no separate "Filtered by" bar. -->
+  <!-- Query and facet recovery stay independent; chip states show active tags. -->
   <div class="results-bar">
-    <span class="results-count" data-results-count>
+    <span class="results-count search-results-summary" data-results-count role="status" aria-live="polite" aria-atomic="true">
       {samples.length}
       {samples.length === 1 ? 'sample' : 'samples'}
     </span>
-    <button class="clear-all" type="button" data-clear-all hidden>Clear all</button>
+    <button class="clear-all search-action" type="button" data-clear-filters hidden>{messages.clearFilters}</button>
+    <button class="clear-all search-action" type="button" data-clear-all hidden>{messages.resetAll}</button>
   </div>
 
   <!-- Card grid -->
@@ -172,31 +183,18 @@ const tagCounts = new Map(
   </div>
 
   <!-- Empty state -->
-  <div class="empty-state" data-empty-state style="display: none;">
-    <svg
-      width="48"
-      height="48"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <circle cx="11" cy="11" r="8"></circle>
-      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-      <line x1="8" y1="11" x2="14" y2="11"></line>
-    </svg>
-    <p>No samples match your filters.</p>
-    <p class="empty-state-detail">Try removing a filter or adjusting your search.</p>
-    <button class="reset-btn" data-reset-btn type="button">Reset all filters</button>
+  <div class="empty-state search-empty" data-empty-state style="display: none;">
+    <p class="search-empty-title">{Astro.locals.t(samples.length ? 'catalogSearch.samplesEmpty' : 'catalogSearch.samplesUnavailable')}</p>
+    {samples.length > 0 && <p class="empty-state-detail search-empty-hint">{Astro.locals.t('catalogSearch.guidance')}</p>}
+    <CatalogSearchActiveFilters label={Astro.locals.t('catalogSearch.activeFilters')} />
+    <button class="reset-btn search-action" data-reset-btn type="button" hidden={samples.length === 0}>{messages.resetAll}</button>
   </div>
 </div>
 
 <!-- is:inline is required so the filter/search logic runs synchronously in the
      page rather than being bundled and deferred by Astro's script processing.
      This ensures the grid is interactive immediately on page load. -->
-<script is:inline data-astro-rerun>
+<script is:inline data-astro-rerun define:vars={{ messages }}>
   (function initializeSampleGrid() {
     const browser = document.querySelector('[data-samples-browser]');
     if (!browser) return;
@@ -219,11 +217,13 @@ const tagCounts = new Map(
     const cardItems = browser.querySelectorAll('[data-sample-item]');
     const resultsCount = browser.querySelector('[data-results-count]');
     const clearAllBtn = browser.querySelector('[data-clear-all]');
+    const clearFiltersBtn = browser.querySelector('[data-clear-filters]');
     const emptyState = browser.querySelector('[data-empty-state]');
     const resetBtn = browser.querySelector('[data-reset-btn]');
 
     let activeTags = new Set();
     let searchQuery = '';
+    let recoveryAction = 'clearSearch';
     const validTagSlugs = new Set([...tagChips].map((chip) => chip.dataset.tag).filter(Boolean));
     const SEARCH_PARAM = 'q';
     const TAGS_PARAM = 'tags';
@@ -264,9 +264,12 @@ const tagCounts = new Map(
     // `history.replaceState` (not `pushState`) so the back/forward stack
     // is unaffected and the URL stays shareable.
     function syncUrl() {
+      if (signal.aborted || !browser.isConnected) return;
       let nextSearch = '';
       try {
-        const params = new URLSearchParams();
+        const params = new URLSearchParams(window.location.search);
+        params.delete(SEARCH_PARAM);
+        params.delete(TAGS_PARAM);
         const query = searchQuery.trim();
         if (query) params.set(SEARCH_PARAM, query);
         if (activeTags.size > 0) {
@@ -291,9 +294,9 @@ const tagCounts = new Map(
       let visible = 0;
       const query = searchQuery.toLowerCase().trim();
 
-      cardItems.forEach((item) => {
+      function matchesItem(item) {
         const card = item.querySelector('.sample-card');
-        if (!card) return;
+        if (!card) return { matchesSearch: false, matchesTags: false };
 
         const title = card.dataset.title || '';
         const name = card.dataset.name || '';
@@ -316,6 +319,11 @@ const tagCounts = new Map(
           matchesTags = [...activeTags].every((tag) => tags.includes(tag));
         }
 
+        return { matchesSearch, matchesTags };
+      }
+
+      cardItems.forEach((item) => {
+        const { matchesSearch, matchesTags } = matchesItem(item);
         if (matchesSearch && matchesTags) {
           item.style.display = '';
           visible++;
@@ -325,15 +333,42 @@ const tagCounts = new Map(
       });
 
       const total = cardItems.length;
-      const hasFilters = query || activeTags.size > 0;
-      resultsCount.textContent = hasFilters
-        ? `${visible} of ${total} ${total === 1 ? 'sample' : 'samples'}`
-        : `${visible} ${visible === 1 ? 'sample' : 'samples'}`;
+      const hasFilters = activeTags.size > 0;
+      resultsCount.textContent = messages.count.replace('{{count}}', String(visible)).replace('{{total}}', String(total));
 
       cardGrid.style.display = visible === 0 ? 'none' : '';
       emptyState.style.display = visible === 0 ? '' : 'none';
       clearBtn.hidden = !query;
-      clearAllBtn.hidden = !hasFilters;
+      clearAllBtn.hidden = visible === 0 || !hasFilters || !query;
+      clearFiltersBtn.hidden = visible === 0 || !hasFilters || Boolean(query);
+      if (visible === 0 && total > 0) {
+        let withoutQuery = 0;
+        let withoutFilters = 0;
+        if (query && activeTags.size > 0) {
+          cardItems.forEach((item) => {
+            const { matchesSearch, matchesTags } = matchesItem(item);
+            if (matchesSearch) withoutFilters++;
+            if (matchesTags) withoutQuery++;
+          });
+        }
+        recoveryAction = query && activeTags.size > 0
+          ? (withoutFilters > 0 ? 'clearFilters' : withoutQuery > 0 ? 'clearSearch' : 'resetAll')
+          : activeTags.size > 0 ? 'clearFilters' : 'clearSearch';
+        resetBtn.textContent = messages[recoveryAction];
+        const title = query
+          ? (withoutFilters > 0 ? messages.filteredQueryEmpty : messages.queryEmpty)
+          : messages.empty;
+        emptyState.querySelector('.search-empty-title').textContent = title.replace('{{query}}', () => searchQuery.trim());
+        const guidance = recoveryAction === 'clearFilters'
+          ? (query ? messages.preserveQueryGuidance : messages.filtersGuidance)
+          : recoveryAction === 'clearSearch'
+            ? (activeTags.size > 0 ? messages.preserveFiltersGuidance : messages.queryGuidance)
+            : messages.resetGuidance;
+        const selectedLabels = [...tagChips].filter((chip) => activeTags.has(chip.dataset.tag))
+          .map((chip) => chip.dataset.tagLabel);
+        emptyState.querySelector('.search-empty-hint').textContent = guidance;
+        emptyState.querySelector('catalog-search-active-filters').dataset.labels = JSON.stringify(selectedLabels);
+      }
 
       syncUrl();
     }
@@ -344,11 +379,15 @@ const tagCounts = new Map(
       applyFilters();
     }, { signal });
 
-    clearBtn.addEventListener('click', () => {
+    function clearSearch() {
       searchInput.value = '';
       searchQuery = '';
       applyFilters();
       searchInput.focus();
+    }
+    clearBtn.addEventListener('click', clearSearch, { signal });
+    searchInput.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') clearSearch();
     }, { signal });
 
     // Tag chips
@@ -368,20 +407,30 @@ const tagCounts = new Map(
       }, { signal });
     });
 
-    // Clear all
-    function resetAll() {
-      searchInput.value = '';
-      searchQuery = '';
+    // Restore facet defaults without changing the query.
+    function clearFilters() {
       activeTags.clear();
       tagChips.forEach((chip) => {
         chip.classList.remove('active');
         chip.setAttribute('aria-pressed', 'false');
       });
       applyFilters();
+      searchInput.focus();
+    }
+
+    function resetAll() {
+      searchInput.value = '';
+      searchQuery = '';
+      clearFilters();
     }
 
     if (clearAllBtn) clearAllBtn.addEventListener('click', resetAll, { signal });
-    if (resetBtn) resetBtn.addEventListener('click', resetAll, { signal });
+    clearFiltersBtn.addEventListener('click', clearFilters, { signal });
+    if (resetBtn) resetBtn.addEventListener('click', () => {
+      if (recoveryAction === 'resetAll') resetAll();
+      else if (recoveryAction === 'clearFilters') clearFilters();
+      else clearSearch();
+    }, { signal });
 
     // Mobile "Show all N tags" expander — only meaningful when there are
     // enough tags that the wall would feel overwhelming. The toggle button
@@ -398,6 +447,7 @@ const tagCounts = new Map(
         .some((chip) => chip.classList.contains('active'));
       if (visibleHiddenActive) {
         tagFilters.setAttribute('data-collapsed', 'false');
+        tagToggle.setAttribute('aria-expanded', 'true');
         if (tagToggleLabel) tagToggleLabel.textContent = 'Show fewer tags';
       }
 
@@ -447,77 +497,15 @@ const tagCounts = new Map(
     width: 100%;
   }
 
-  .search-icon {
-    position: absolute;
-    left: 0.75rem;
-    color: var(--sl-color-gray-3);
-    pointer-events: none;
-  }
-
-  .search-box {
-    width: 100%;
-    padding: 0.625rem 2.5rem 0.625rem 2.25rem;
-    border: 1px solid var(--sl-color-gray-5);
-    border-radius: 0.5rem;
-    background: var(--sl-color-gray-6);
-    color: var(--sl-color-white);
-    font-size: 0.95rem;
-    outline: none;
-    transition:
-      border-color 0.15s ease,
-      box-shadow 0.15s ease;
-  }
-
-  .search-box::placeholder {
-    color: var(--sl-color-gray-3);
-  }
-
-  .search-box:focus {
-    border-color: var(--sl-color-text-accent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sl-color-text-accent) 18%, transparent);
-  }
-
-  /* Hide the UA-provided "x" inside `type="search"` — we render our own. */
-  .search-box::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-    appearance: none;
-  }
-
-  .search-clear {
-    position: absolute;
-    right: 0.5rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.5rem;
-    height: 1.5rem;
-    padding: 0;
-    border: none;
-    border-radius: 999px;
-    background: transparent;
-    color: var(--sl-color-gray-3);
-    cursor: pointer;
-    transition:
-      background 0.15s ease,
-      color 0.15s ease;
-  }
-
-  .search-clear:hover,
-  .search-clear:focus-visible {
-    background: var(--sl-color-gray-5);
-    color: var(--sl-color-white);
-    outline: none;
-  }
-
   /* ---- Tag chips: quiet by default, accent-filled when active ---- */
   .tag-filters {
     display: flex;
     flex-wrap: wrap;
     gap: 0.375rem;
-    transition: max-height 0.25s ease;
   }
 
   .tag-chip {
+    min-height: 2rem;
     display: inline-flex;
     align-items: baseline;
     gap: 0.4rem;
@@ -611,6 +599,7 @@ const tagCounts = new Map(
   /* ---- Results header ---- */
   .results-bar {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 0.75rem;
@@ -618,12 +607,6 @@ const tagCounts = new Map(
     border-top: 1px solid color-mix(in srgb, var(--sl-color-gray-5) 60%, transparent);
   }
 
-  .results-count {
-    font-size: 0.85rem;
-    color: var(--sl-color-gray-2);
-    font-weight: 500;
-  }
-
   .clear-all {
     border: none;
     background: none;
@@ -663,15 +646,13 @@ const tagCounts = new Map(
   .empty-state {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
     gap: 0.75rem;
-    padding: 3rem 1rem;
-    border: 1px dashed var(--sl-color-gray-4);
-    border-radius: 0.5rem;
-    background: color-mix(in srgb, var(--sl-color-gray-6) 88%, var(--sl-color-accent));
+    padding: 1rem;
+    background: var(--sl-color-gray-6);
     color: var(--sl-color-gray-3);
-    text-align: center;
+    text-align: start;
   }
 
   .empty-state p {
@@ -685,22 +666,17 @@ const tagCounts = new Map(
   }
 
   .reset-btn {
-    background: var(--sl-color-accent-high);
-    border: 1px solid var(--sl-color-accent-high);
-    border-radius: 0.5rem;
-    color: var(--sl-color-black);
-    padding: 0.5rem 1rem;
-    font-size: 0.9rem;
-    font-weight: 700;
-    cursor: pointer;
-    transition:
-      filter 0.2s,
-      transform 0.2s;
+    align-self: flex-start;
+  }
+
+  button[hidden] { display: none; }
+  button:focus-visible {
+    outline: 2px solid var(--sl-color-text-accent);
+    outline-offset: 2px;
   }
 
   .reset-btn:hover {
-    filter: brightness(1.05);
-    transform: translateY(-1px);
+    color: var(--sl-color-text);
   }
 
   /* ---- Even tighter chips on very narrow screens ---- */
diff --git a/src/frontend/src/components/SessionGrid.astro b/src/frontend/src/components/SessionGrid.astro
index ee1b5b61c..48cc93e28 100644
--- a/src/frontend/src/components/SessionGrid.astro
+++ b/src/frontend/src/components/SessionGrid.astro
@@ -1,5 +1,6 @@
 ---
 import SessionCard, { type Props as SessionProps } from './SessionCard.astro';
+import '../styles/search-controls.css';
 
 interface Props {
   sessions: SessionProps[];
@@ -28,24 +29,25 @@ for (const session of sessions) {
 let globalIndex = 0;
 ---
 
-<div class="session-controls not-content">
+<div class="session-controls not-content" data-count-template={Astro.locals.t('catalogSearch.sessionsCount')}>
   <div class="controls-row">
-    <div class="search-wrapper">
-      <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <div class="search-wrapper search-field search-field-wrap">
+      <svg class="search-field-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
         <circle cx="11" cy="11" r="8" />
-        <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        <path d="m21 21-4.35-4.35" />
       </svg>
       <input
-        type="text"
-        class="session-search"
-        placeholder="Search sessions or speakers…"
-        aria-label="Search sessions"
+        type="search"
+        name="session-search"
+        spellcheck="false"
+        class="session-search search-field-input"
+        placeholder={Astro.locals.t('catalogSearch.sessionsPlaceholder')}
+        aria-label={Astro.locals.t('catalogSearch.sessionsLabel')}
         autocomplete="off"
       />
-      <button class="clear-search" aria-label="Clear search" hidden>
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <line x1="18" y1="6" x2="6" y2="18" />
-          <line x1="6" y1="6" x2="18" y2="18" />
+      <button type="button" class="clear-search search-field-clear" aria-label={Astro.locals.t('catalogSearch.clearSearch')} hidden>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+          <path d="m18 6-12 12M6 6l12 12" />
         </svg>
       </button>
     </div>
@@ -67,8 +69,13 @@ let globalIndex = 0;
       </button>
     </div>
   </div>
-  <div class="active-filters" hidden>
-    <span class="filter-summary"></span>
+  <div class="active-filters">
+    <span class="filter-summary search-results-summary" role="status" aria-live="polite" aria-atomic="true"></span>
+  </div>
+  <div class="no-results-msg search-empty" data-query-title={Astro.locals.t('catalogSearch.sessionsQueryEmpty')} hidden>
+    <p class="search-empty-title">{Astro.locals.t(sessions.length ? 'catalogSearch.sessionsEmpty' : 'catalogSearch.sessionsUnavailable')}</p>
+    {sessions.length > 0 && <p class="search-empty-hint">{Astro.locals.t('catalogSearch.queryGuidance')}</p>}
+    {sessions.length > 0 && <button type="button" class="search-action" data-session-recover>{Astro.locals.t('catalogSearch.clearSearch')}</button>}
   </div>
 </div>
 
@@ -130,64 +137,6 @@ let globalIndex = 0;
     min-width: 180px;
   }
 
-  .search-icon {
-    position: absolute;
-    left: 0.75rem;
-    top: 50%;
-    transform: translateY(-50%);
-    color: var(--sl-color-gray-3);
-    pointer-events: none;
-    width: 16px;
-    height: 16px;
-    display: block;
-    flex-shrink: 0;
-  }
-
-  .session-search {
-    width: 100%;
-    padding: 0.55rem 2.25rem 0.55rem 2.25rem;
-    border-radius: 0.5rem;
-    border: 1px solid var(--sl-color-gray-5);
-    background: var(--sl-color-gray-6);
-    color: var(--sl-color-white);
-    font-size: 0.875rem;
-    outline: none;
-    transition: border-color 0.2s ease, box-shadow 0.2s ease;
-  }
-
-  .session-search::placeholder {
-    color: var(--sl-color-gray-3);
-  }
-
-  .session-search:focus {
-    border-color: var(--sl-color-accent);
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sl-color-accent) 25%, transparent);
-  }
-
-  .clear-search {
-    position: absolute;
-    right: 0.5rem;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.5rem;
-    height: 1.5rem;
-    border: none;
-    border-radius: 50%;
-    background: color-mix(in srgb, var(--sl-color-gray-3) 25%, transparent);
-    color: var(--sl-color-gray-2);
-    cursor: pointer;
-    padding: 0;
-    transition: background 0.2s ease, color 0.2s ease;
-  }
-
-  .clear-search:hover {
-    background: color-mix(in srgb, var(--sl-color-accent) 30%, transparent);
-    color: var(--sl-color-white);
-  }
-
   .clear-search[hidden] {
     display: none;
   }
@@ -212,7 +161,7 @@ let globalIndex = 0;
     font-size: 0.8rem;
     font-weight: 500;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
     white-space: nowrap;
   }
 
@@ -240,18 +189,12 @@ let globalIndex = 0;
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    font-size: 0.8rem;
-    color: var(--sl-color-gray-3);
   }
 
   .active-filters[hidden] {
     display: none;
   }
 
-  .filter-summary {
-    font-style: italic;
-  }
-
   /* Hidden card via filter */
   :global(.session-card.filtered-out) {
     display: none !important;
@@ -263,24 +206,18 @@ let globalIndex = 0;
   }
 
   .no-results-msg {
-    text-align: center;
-    padding: 2rem 1rem;
-    color: var(--sl-color-gray-3);
-    font-size: 0.95rem;
-  }
-
-  /* ── Light theme ── */
-  :global([data-theme='light']) .session-search {
-    background: var(--sl-color-gray-7);
-    border-color: var(--sl-color-gray-5);
-    color: var(--sl-color-white);
+    text-align: start;
+    padding: 1rem;
+    background: var(--sl-color-gray-6);
   }
 
-  :global([data-theme='light']) .session-search:focus {
-    border-color: var(--sl-color-accent);
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sl-color-accent) 20%, transparent);
+  .no-results-msg[hidden] { display: none; }
+  .session-controls button:focus-visible {
+    outline: 2px solid var(--sl-color-text-accent);
+    outline-offset: 2px;
   }
 
+  /* ── Light theme ── */
   :global([data-theme='light']) .filter-btn,
   :global([data-theme='light']) .tz-toggle,
   :global([data-theme='light']) .clock-toggle {
@@ -304,16 +241,6 @@ let globalIndex = 0;
     color: var(--sl-color-text-accent);
   }
 
-  :global([data-theme='light']) .clear-search {
-    background: color-mix(in srgb, var(--sl-color-gray-3) 20%, transparent);
-    color: var(--sl-color-gray-2);
-  }
-
-  :global([data-theme='light']) .clear-search:hover {
-    background: color-mix(in srgb, var(--sl-color-accent) 25%, transparent);
-    color: var(--sl-color-text-accent);
-  }
-
   @media (max-width: 768px) {
     .controls-row {
       flex-direction: column;
@@ -538,8 +465,19 @@ let globalIndex = 0;
 <script>
   // Conference date for timezone conversion (March 23, 2026)
   const CONF_DATE = '2026-03-23';
+  let cleanupSessionGrid: (() => void) | undefined;
 
   function initSessionGrid() {
+    cleanupSessionGrid?.();
+    const controls = document.querySelector<HTMLElement>('.session-controls');
+    if (!controls) return;
+    const controller = new AbortController();
+    const { signal } = controller;
+    const animations = new Set<Animation>();
+    cleanupSessionGrid = () => {
+      controller.abort();
+      animations.forEach((animation) => animation.cancel());
+    };
     // ── Collapsible time groups ──
     const groups = document.querySelectorAll<HTMLDetailsElement>('.time-group');
 
@@ -552,7 +490,12 @@ let globalIndex = 0;
 
       summary.addEventListener('click', (e) => {
         e.preventDefault();
+        if (animation) animations.delete(animation);
         animation?.cancel();
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+          details.open = !details.open;
+          return;
+        }
 
         if (details.open) {
           const startHeight = wrapper.offsetHeight;
@@ -565,6 +508,7 @@ let globalIndex = 0;
             { duration: 250, easing: 'ease-in-out' }
           );
           animation.onfinish = () => {
+            if (animation) animations.delete(animation);
             details.open = false;
             wrapper.style.overflow = '';
             wrapper.style.height = '';
@@ -582,12 +526,14 @@ let globalIndex = 0;
             { duration: 250, easing: 'ease-in-out' }
           );
           animation.onfinish = () => {
+            if (animation) animations.delete(animation);
             wrapper.style.overflow = '';
             wrapper.style.height = '';
             animation = null;
           };
         }
-      });
+        if (animation) animations.add(animation);
+      }, { signal });
     }
 
     // ── Filter state ──
@@ -597,9 +543,8 @@ let globalIndex = 0;
     const tzLabel = tzBtn?.querySelector<HTMLSpanElement>('.tz-label');
     const clockBtn = document.querySelector<HTMLButtonElement>('.clock-toggle');
     const clockLabel = clockBtn?.querySelector<HTMLSpanElement>('.clock-label');
-    const activeFilters = document.querySelector<HTMLDivElement>('.active-filters');
     const filterSummary = document.querySelector<HTMLSpanElement>('.filter-summary');
-    const timeline = document.querySelector<HTMLDivElement>('.session-timeline');
+    const emptyState = controls.querySelector<HTMLElement>('.no-results-msg');
     const cards = document.querySelectorAll<HTMLElement>('.session-card');
 
     let searchQuery = '';
@@ -730,24 +675,21 @@ let globalIndex = 0;
 
       updateGroupVisibility();
       updateFilterStatus(visibleCount, totalCount);
+      if (visibleCount === 0 && searchQuery && emptyState) {
+        const title = emptyState.querySelector('.search-empty-title');
+        if (title) title.textContent = (emptyState.dataset.queryTitle ?? '')
+          .replace('{{query}}', () => searchInput?.value.trim() ?? '');
+      }
     }
 
     function updateGroupVisibility() {
-      // Remove existing no-results message
-      const existingMsg = timeline?.querySelector('.no-results-msg');
-      existingMsg?.remove();
-
-      let anyVisible = false;
-
       for (const group of groups) {
-        const groupCards = group.querySelectorAll('.session-card');
         const visibleCards = group.querySelectorAll('.session-card:not(.filtered-out)');
 
         if (visibleCards.length === 0) {
           group.classList.add('group-hidden');
         } else {
           group.classList.remove('group-hidden');
-          anyVisible = true;
         }
 
         // Update collapsed-info pill count
@@ -758,26 +700,12 @@ let globalIndex = 0;
         }
       }
 
-      if (!anyVisible && timeline) {
-        const msg = document.createElement('p');
-        msg.className = 'no-results-msg';
-        msg.textContent = 'No sessions match your filters.';
-        timeline.appendChild(msg);
-      }
+      if (emptyState) emptyState.hidden = [...cards].some((card) => !card.classList.contains('filtered-out'));
     }
 
     function updateFilterStatus(visible: number, total: number) {
-      const hasFilters = !!searchQuery;
-
-      if (activeFilters) {
-        activeFilters.hidden = !hasFilters;
-      }
-
-      if (filterSummary && hasFilters) {
-        const parts: string[] = [];
-        if (searchQuery) parts.push(`"${searchQuery}"`);
-        filterSummary.textContent = `Showing ${visible} of ${total} — ${parts.join(', ')}`;
-      }
+      if (filterSummary) filterSummary.textContent = (controls?.dataset.countTemplate ?? '')
+        .replace('{{count}}', String(visible)).replace('{{total}}', String(total));
     }
 
     // ── Event listeners ──
@@ -787,15 +715,20 @@ let globalIndex = 0;
         clearSearchBtn.hidden = !searchQuery;
       }
       applyFilters();
-    });
+    }, { signal });
 
-    clearSearchBtn?.addEventListener('click', () => {
+    function clearSearch() {
       searchQuery = '';
       if (searchInput) searchInput.value = '';
-      clearSearchBtn.hidden = true;
+      if (clearSearchBtn) clearSearchBtn.hidden = true;
       searchInput?.focus();
       applyFilters();
-    });
+    }
+    clearSearchBtn?.addEventListener('click', clearSearch, { signal });
+    controls.querySelector('[data-session-recover]')?.addEventListener('click', clearSearch, { signal });
+    searchInput?.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') clearSearch();
+    }, { signal });
 
     function setTooltip(el: HTMLElement, text: string) {
       const tippy = (el as any)._tippy;
@@ -832,7 +765,7 @@ let globalIndex = 0;
 
       updateTzTitle();
       updateTimezoneDisplay();
-    });
+    }, { signal });
 
     // ── Clock format toggle ──
     function updateClockTitle() {
@@ -852,7 +785,7 @@ let globalIndex = 0;
       }
       updateClockTitle();
       updateTimezoneDisplay();
-    });
+    }, { signal });
 
     // Initialize clock toggle state
     if (clockBtn) {
@@ -879,9 +812,11 @@ let globalIndex = 0;
     }
     updateTzTitle();
     updateTimezoneDisplay();
+    applyFilters();
   }
 
   // Run on initial load and on Astro view transitions
   initSessionGrid();
   document.addEventListener('astro:after-swap', initSessionGrid);
+  document.addEventListener('astro:before-swap', () => cleanupSessionGrid?.());
 </script>
diff --git a/src/frontend/src/components/api-reference/ApiSearchBar.astro b/src/frontend/src/components/api-reference/ApiSearchBar.astro
index bbb6c0426..673ae99b5 100644
--- a/src/frontend/src/components/api-reference/ApiSearchBar.astro
+++ b/src/frontend/src/components/api-reference/ApiSearchBar.astro
@@ -3,9 +3,10 @@
  * ApiSearchBar — unified search bar with kind filters, version dropdown,
  * stats line, no-results state, and search results container.
  *
- * Composes InpageSearch and VersionFilter into a single coordinated UI.
+ * Composes SearchField and VersionFilter into a single coordinated UI.
  * On tablet/desktop the version dropdown sits to the right of the search input.
- * On mobile they stack. The "Clear filters" button resets both kind and version filters.
+ * On mobile they stack. Clear search affects only the query; Clear filters
+ * resets kinds and versions. Reset all clears both without changing sort preferences.
  *
  * Usage:
  * ```astro
@@ -19,13 +20,16 @@
  * />
  * ```
  */
-import VersionFilter from './VersionFilter.astro';
+import VersionFilter from '@components/api-reference/VersionFilter.astro';
+import SearchField from '@components/search/SearchField.astro';
 
 interface Props {
   /** Unique prefix for element IDs (e.g. "api" or "ts-api") */
   id: string;
   /** Placeholder text for the search input */
   placeholder: string;
+  /** Stable accessible name; defaults to the contextual placeholder. */
+  label?: string;
   /** Unique kind strings to render as filter chips */
   kinds: string[];
   /** Version strings for the version dropdown (empty array to hide) */
@@ -36,7 +40,7 @@ interface Props {
   size?: 'lg' | 'sm';
 }
 
-const { id, placeholder, kinds, versions = [], defaultStatsText, size = 'lg' } = Astro.props;
+const { id, placeholder, label = placeholder, kinds, versions = [], defaultStatsText, size = 'lg' } = Astro.props;
 const hasVersions = versions.length > 0;
 const searchInputId = id + '-search-input';
 const searchStatusId = id + '-search-status';
@@ -51,33 +55,10 @@ const getKindClassName = (kind: string) => 'api-filter-dot kind-' + kind.replace
 <div class="api-search-bar-unified inpage-search" data-size={size}>
   <!-- Top row: search input + version dropdown -->
   <div class="asb-top-row">
-    <div class="asb-input-wrap">
-      <svg class="asb-search-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <circle cx="11" cy="11" r="8"></circle>
-        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-      </svg>
-      <label class="sr-only" for={searchInputId}>{placeholder}</label>
-      <input
-        type="search"
-        id={searchInputId}
-        class="asb-search-input"
-        placeholder={placeholder}
-        autocomplete="off"
-        aria-describedby={searchStatusId}
-      />
-      <button
-        type="button"
-        class="asb-search-clear"
-        id={searchClearId}
-        aria-label="Clear search"
-        style="display: none;"
-      >
-        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <line x1="18" y1="6" x2="6" y2="18"></line>
-          <line x1="6" y1="6" x2="18" y2="18"></line>
-        </svg>
-      </button>
-    </div>
+    <SearchField id={searchInputId} label={label} placeholder={placeholder}
+      clearId={searchClearId} describedBy={searchStatusId} size={size}
+      inputClass="asb-search-input" clearClass="asb-search-clear"
+      containerClass="asb-input-wrap" iconClass="asb-search-icon" />
 
     {hasVersions && (
       <div class="asb-version-slot">
@@ -90,7 +71,7 @@ const getKindClassName = (kind: string) => 'api-filter-dot kind-' + kind.replace
   <div class="inpage-kind-filters" id={kindFiltersId}>
     {kinds.map(kind => (
       <button
-        class="api-filter-chip"
+        class="api-filter-chip search-filter-chip"
         data-kind={kind}
         type="button"
         aria-pressed="false"
@@ -105,8 +86,11 @@ const getKindClassName = (kind: string) => 'api-filter-dot kind-' + kind.replace
 
   <!-- Stats line + clear filters -->
   <div class="inpage-search-stats">
-    <span id={searchCountId}>{defaultStatsText}</span>
-    <button class="inpage-clear-filters" id={clearFiltersId} type="button" style="display: none;">Clear filters</button>
+    <span id={searchCountId} class="search-results-summary">{defaultStatsText}</span>
+    <div class="inpage-search-actions">
+      <button class="inpage-clear-filters search-action" id={clearFiltersId} type="button" style="display: none;">Clear filters</button>
+      <button class="search-action" id={`${id}-reset-all`} type="button" style="display: none;">Reset all</button>
+    </div>
   </div>
 
   <!-- Search results (populated by the page's controller script) -->
@@ -135,89 +119,7 @@ const getKindClassName = (kind: string) => 'api-filter-dot kind-' + kind.replace
     margin-bottom: 0.25rem;
   }
 
-  .asb-input-wrap {
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex: 1;
-    min-width: 0;
-  }
-
-  .asb-search-icon {
-    position: absolute;
-    left: 0.75rem;
-    width: 1.25rem;
-    height: 1.25rem;
-    color: var(--sl-color-gray-1);
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  .asb-search-input {
-    width: 100%;
-    padding: 0.5rem 2.5rem 0.5rem 2.5rem;
-    border: 1px solid var(--sl-color-gray-5);
-    border-radius: 0.625rem;
-    background: var(--sl-color-bg-nav);
-    color: var(--sl-color-text);
-    font-size: var(--sl-text-sm);
-    font-family: inherit;
-    outline: none;
-    transition: border-color 0.15s;
-    box-sizing: border-box;
-  }
-
-  .asb-search-input::placeholder {
-    color: var(--sl-color-gray-1);
-  }
-
-  .asb-search-input::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-    appearance: none;
-  }
-
-  .asb-search-input:focus {
-    border-color: var(--sl-color-accent);
-    box-shadow: 0 0 0 1px var(--sl-color-accent);
-  }
-
-  [data-size="sm"] .asb-search-input {
-    padding: 0.4375rem 2.25rem 0.4375rem 2.25rem;
-    font-size: var(--sl-text-sm);
-    border-radius: 0.5rem;
-  }
-
-  [data-size="sm"] .asb-search-icon {
-    width: 1rem;
-    height: 1rem;
-    left: 0.625rem;
-  }
-
-  .asb-search-clear {
-    position: absolute;
-    right: 0.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.5rem;
-    height: 1.5rem;
-    border: none;
-    background: none;
-    color: var(--sl-color-gray-3);
-    cursor: pointer;
-    border-radius: 50%;
-    padding: 0;
-  }
-
-  .asb-search-clear svg {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  .asb-search-clear:hover {
-    color: var(--sl-color-text);
-    background: var(--sl-color-gray-6);
-  }
+  .inpage-search-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; }
 
   /* Version slot aligns with the search bar */
   .asb-version-slot {
@@ -249,6 +151,7 @@ const getKindClassName = (kind: string) => 'api-filter-dot kind-' + kind.replace
   }
 
   .api-search-bar-unified .api-filter-chip {
+    min-height: 2.25rem;
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
@@ -271,6 +174,11 @@ const getKindClassName = (kind: string) => 'api-filter-dot kind-' + kind.replace
     background: var(--sl-color-gray-6);
   }
 
+  .api-search-bar-unified .api-filter-chip:focus-visible {
+    outline: 2px solid var(--search-control-focus);
+    outline-offset: 2px;
+  }
+
   .api-search-bar-unified .api-filter-chip.active {
     border-color: currentColor;
     background: color-mix(in srgb, currentColor 12%, transparent);
@@ -323,27 +231,11 @@ const getKindClassName = (kind: string) => 'api-filter-dot kind-' + kind.replace
   /* ── Stats line ─────────────────────────────────────────────── */
   .api-search-bar-unified .inpage-search-stats {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 0.5rem;
     padding: 0.4rem 0 0.15rem;
-    font-size: var(--api-text-sm, 0.875rem);
-    color: var(--sl-color-gray-3);
-  }
-
-  .api-search-bar-unified .inpage-clear-filters {
-    background: none;
-    border: none;
-    color: var(--sl-color-text-accent);
-    font-size: 0.82rem;
-    cursor: pointer;
-    padding: 0;
-    text-decoration: underline;
-    white-space: nowrap;
-  }
-
-  .api-search-bar-unified .inpage-clear-filters:hover {
-    color: var(--sl-color-white);
   }
 
   /* ── Search result items (dynamically injected by controllers) ── */
@@ -452,20 +344,6 @@ const getKindClassName = (kind: string) => 'api-filter-dot kind-' + kind.replace
     text-decoration-thickness: 2px;
   }
 
-  .api-search-bar-unified .api-search-empty {
-    padding: 2.5rem 1.5rem;
-    text-align: center;
-    background: var(--api-surface, var(--sl-color-gray-6));
-    border-radius: var(--api-radius-lg, 0.75rem);
-    color: var(--sl-color-gray-2);
-  }
-
-  .api-search-bar-unified .api-search-empty-hint {
-    margin-top: 0.5rem;
-    font-size: var(--api-text-sm, 0.875rem);
-    color: var(--sl-color-gray-3);
-  }
-
   .api-search-bar-unified .api-load-more {
     display: block;
     width: 100%;
diff --git a/src/frontend/src/components/api-reference/InpageSearch.astro b/src/frontend/src/components/api-reference/InpageSearch.astro
index 1ca6d31da..413cb606f 100644
--- a/src/frontend/src/components/api-reference/InpageSearch.astro
+++ b/src/frontend/src/components/api-reference/InpageSearch.astro
@@ -10,6 +10,7 @@
  * Each page still provides its own `<script>` with a controller class
  * that drives the search logic and result rendering.
  */
+import SearchField from '@components/search/SearchField.astro';
 interface Props {
   /** Unique prefix for element IDs (e.g. "api" or "pkg") */
   id: string;
@@ -23,7 +24,7 @@ interface Props {
   kindColors?: Record<string, string>;
   /** Text shown beneath the search bar before any query */
   defaultStatsText: string;
-  /** Size variant: "lg" (index page) or "sm" (package page) */
+  /** Use "lg" for full-size search surfaces; "sm" is reserved for compact contexts. */
   size?: 'lg' | 'sm';
 }
 
@@ -41,41 +42,17 @@ const showKindFilters = kinds.length > 1;
 
 <div class="inpage-search" data-size={size} data-has-kind-filters={showKindFilters ? 'true' : 'false'}>
   <!-- Search bar -->
-  <div class="inpage-search-bar">
-    <label class:list={[label ? 'inpage-search-label' : 'sr-only']} for={searchInputId}>{label ?? placeholder}</label>
-    <div class="inpage-search-input-wrap">
-      <svg class="inpage-search-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <circle cx="11" cy="11" r="8"></circle>
-        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-      </svg>
-      <input
-        type="search"
-        id={searchInputId}
-        class="inpage-search-input"
-        placeholder={placeholder}
-        autocomplete="off"
-        aria-describedby={searchStatusId}
-      />
-      <button
-        type="button"
-        class="inpage-search-clear"
-        id={searchClearId}
-        aria-label="Clear search"
-        style="display: none;"
-      >
-        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <line x1="18" y1="6" x2="6" y2="18"></line>
-          <line x1="6" y1="6" x2="18" y2="18"></line>
-        </svg>
-      </button>
-    </div>
-  </div>
+  <SearchField id={searchInputId} label={label ?? placeholder} visibleLabel={!!label}
+    placeholder={placeholder} clearId={searchClearId} describedBy={searchStatusId}
+    size={size} inputClass="inpage-search-input" clearClass="inpage-search-clear"
+    containerClass="inpage-search-bar" labelClass={label ? 'inpage-search-label' : 'sr-only'}
+    wrapClass="inpage-search-input-wrap" iconClass="inpage-search-icon" />
 
   <!-- Kind filter chips -->
   <div class="inpage-kind-filters" id={kindFiltersId}>
     {showKindFilters && kinds.map(kind => (
       <button
-        class="api-filter-chip"
+        class="api-filter-chip search-filter-chip"
         data-kind={kind}
         type="button"
         aria-pressed="false"
@@ -92,8 +69,11 @@ const showKindFilters = kinds.length > 1;
 
   <!-- Stats line -->
   <div class="inpage-search-stats">
-    <span id={searchCountId}>{defaultStatsText}</span>
-    <button class="inpage-clear-filters" id={clearFiltersId} type="button" style="display: none;">Clear filters</button>
+    <span id={searchCountId} class="search-results-summary">{defaultStatsText}</span>
+    <div class="inpage-search-actions">
+      <button class="inpage-clear-filters search-action" id={clearFiltersId} type="button" style="display: none;">Clear filters</button>
+      <button class="search-action" id={`${id}-reset-all`} type="button" style="display: none;">Reset all</button>
+    </div>
   </div>
 
   <!-- Search results (populated by the page's controller script) -->
@@ -114,107 +94,7 @@ const showKindFilters = kinds.length > 1;
     border: 0;
   }
 
-  /* ── Search bar ─────────────────────────────────────────────── */
-  .inpage-search-bar {
-    margin-bottom: 0.25rem;
-  }
-
-  .inpage-search-label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: 600; }
-
-  .inpage-search-input-wrap {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-
-  .inpage-search-icon {
-    position: absolute;
-    left: 0.85rem;
-    color: var(--sl-color-gray-1);
-    pointer-events: none;
-  }
-
-  /* Size tokens — set by data-size on the container */
-  .inpage-search[data-size='lg'] .inpage-search-icon {
-    width: 18px;
-    height: 18px;
-  }
-  .inpage-search[data-size='sm'] .inpage-search-icon {
-    width: 16px;
-    height: 16px;
-  }
-
-  .inpage-search-input {
-    width: 100%;
-    background-color: var(--sl-color-black);
-    color: var(--sl-color-text);
-    border: 1px solid var(--sl-color-gray-5);
-    box-sizing: border-box;
-    transition: border-color 0.15s, box-shadow 0.15s;
-  }
-
-  .inpage-search[data-size='lg'] .inpage-search-input {
-    padding: 0.75rem 2.5rem 0.75rem 2.75rem;
-    font-size: 1rem;
-    height: 3rem;
-    border-radius: 0.75rem;
-  }
-  .inpage-search[data-size='sm'] .inpage-search-input {
-    padding: 0.6rem 2.25rem 0.6rem 2.5rem;
-    font-size: 0.9rem;
-    height: 2.5rem;
-    border-radius: 0.5rem;
-  }
-
-  .inpage-search-input::placeholder {
-    color: var(--sl-color-gray-1);
-  }
-
-  .inpage-search-input::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-    appearance: none;
-  }
-
-  /* ── Clear button (embedded in input) ────────────────────────── */
-  .inpage-search-clear {
-    position: absolute;
-    right: 0.6rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.5rem;
-    height: 1.5rem;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    background: var(--sl-color-gray-5);
-    color: var(--sl-color-gray-2);
-    cursor: pointer;
-    transition: background 0.15s, color 0.15s;
-  }
-
-  .inpage-search-clear svg {
-    width: 14px;
-    height: 14px;
-  }
-
-  .inpage-search-clear:hover {
-    background: var(--sl-color-gray-4);
-    color: var(--sl-color-white);
-  }
-
-  .inpage-search-input:focus {
-    outline: none;
-    border-color: var(--sl-color-text-accent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sl-color-text-accent) 20%, transparent);
-  }
-
-  @media (forced-colors: active) {
-    .inpage-search-input:focus-visible {
-      outline: 2px solid Highlight;
-      outline-offset: 2px;
-    }
-  }
+  .inpage-search-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; }
 
   /* ── Kind filter chips ──────────────────────────────────────── */
   .inpage-kind-filters {
@@ -230,6 +110,7 @@ const showKindFilters = kinds.length > 1;
   }
 
   .api-filter-chip {
+    min-height: 2.25rem;
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
@@ -252,6 +133,11 @@ const showKindFilters = kinds.length > 1;
     background: var(--sl-color-gray-6);
   }
 
+  .api-filter-chip:focus-visible {
+    outline: 2px solid var(--search-control-focus);
+    outline-offset: 2px;
+  }
+
   .api-filter-chip.active {
     border-color: currentColor;
     background: color-mix(in srgb, currentColor 12%, transparent);
@@ -314,41 +200,15 @@ const showKindFilters = kinds.length > 1;
   /* ── Stats line ─────────────────────────────────────────────── */
   .inpage-search-stats {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 0.5rem;
     padding: 0.4rem 0 0.15rem;
-    font-size: var(--api-text-sm, 0.875rem);
-    color: var(--sl-color-gray-3);
-  }
-
-  .inpage-clear-filters {
-    background: none;
-    border: none;
-    color: var(--sl-color-text-accent);
-    font-size: 0.82rem;
-    cursor: pointer;
-    padding: 0;
-    text-decoration: underline;
-    white-space: nowrap;
-  }
-
-  .inpage-clear-filters:hover {
-    color: var(--sl-color-white);
   }
 
   /* ── Responsive ─────────────────────────────────────────────── */
   @media (max-width: 480px) {
-    .inpage-search[data-size='lg'] .inpage-search-input {
-      height: 2.5rem;
-      font-size: 0.9rem;
-      border-radius: 0.5rem;
-    }
-    .inpage-search[data-size='lg'] .inpage-search-icon {
-      width: 16px;
-      height: 16px;
-      left: 0.75rem;
-    }
     .inpage-search[data-size='sm'] .inpage-search-input {
       font-size: 0.85rem;
       height: 2.25rem;
@@ -506,20 +366,6 @@ const showKindFilters = kinds.length > 1;
   }
 
   /* ── Empty state ──────────────────────────────────────────────── */
-  .inpage-search .api-search-empty {
-    padding: 2.5rem 1.5rem;
-    text-align: center;
-    background: var(--api-surface, var(--sl-color-gray-6));
-    border-radius: var(--api-radius-lg, 0.75rem);
-    color: var(--sl-color-gray-2);
-  }
-
-  .inpage-search .api-search-empty-hint {
-    margin-top: 0.5rem;
-    font-size: var(--api-text-sm, 0.875rem);
-    color: var(--sl-color-gray-3);
-  }
-
   /* ── Load more button ─────────────────────────────────────────── */
   .inpage-search .api-load-more {
     display: block;
diff --git a/src/frontend/src/components/api-reference/VersionFilter.astro b/src/frontend/src/components/api-reference/VersionFilter.astro
index 22b1170a0..5d3f42bc2 100644
--- a/src/frontend/src/components/api-reference/VersionFilter.astro
+++ b/src/frontend/src/components/api-reference/VersionFilter.astro
@@ -68,7 +68,7 @@ const sorted = [...versions].sort((a, b) => {
     </svg>
   </button>
 
-  <div class="version-filter-dropdown" id={`${filterId}-dropdown`} role="listbox" aria-label="Version selection">
+  <div class="version-filter-dropdown" id={`${filterId}-dropdown`} role="group" aria-label="Version selection">
     {/* Select all toggle */}
     <label class="version-filter-item version-filter-all">
       <input
@@ -146,7 +146,17 @@ const sorted = [...versions].sort((a, b) => {
       }, { signal });
 
       this.container.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape') this.close();
+        if (e.key === 'Escape' && this.btn.getAttribute('aria-expanded') === 'true') {
+          e.stopPropagation();
+          this.close();
+          this.btn.focus();
+        }
+      }, { signal });
+
+      this.container.addEventListener('version-filter-reset', () => {
+        for (const cb of this.checkboxes) cb.checked = true;
+        this.close();
+        this.onChange();
       }, { signal });
 
       if (this.allCheckbox) {
@@ -195,6 +205,7 @@ const sorted = [...versions].sort((a, b) => {
     private updateUI() {
       const checkedCount = this.checkboxes.filter(cb => cb.checked).length;
       const total = this.checkboxes.length;
+      this.btn.setAttribute('aria-label', `${this.container.querySelector('.version-filter-label')?.textContent ?? 'Versions'}: ${checkedCount} of ${total} selected`);
       if (this.countEl) {
         this.countEl.textContent = `${checkedCount}/${total}`;
       }
@@ -222,12 +233,15 @@ const sorted = [...versions].sort((a, b) => {
       const urlVersions = url.searchParams.get('versions');
 
       let selected: string[] | null = null;
-      if (urlVersions) {
+      if (urlVersions !== null) {
         selected = urlVersions.split(',').filter(v => this.versions.includes(v));
       } else {
         try {
           const stored = localStorage.getItem(this.storageKey);
-          if (stored) selected = JSON.parse(stored);
+          if (stored) {
+            const parsed: unknown = JSON.parse(stored);
+            if (Array.isArray(parsed)) selected = parsed.filter((v): v is string => typeof v === 'string' && this.versions.includes(v));
+          }
         } catch {}
       }
 
@@ -282,12 +296,13 @@ const sorted = [...versions].sort((a, b) => {
   /* ── Button ──────────────────────────────────────────────────── */
 
   .version-filter-btn {
+    min-height: var(--search-control-height, 3rem);
     display: inline-flex;
     align-items: center;
     gap: 0.625rem;
     padding: 0.5rem 1rem;
     border: 1px solid var(--sl-color-gray-5);
-    border-radius: 0.625rem;
+    border-radius: var(--search-control-radius, 0.625rem);
     background: var(--sl-color-bg-nav);
     color: var(--sl-color-text);
     font-size: var(--sl-text-sm);
@@ -304,6 +319,11 @@ const sorted = [...versions].sort((a, b) => {
     background: var(--sl-color-gray-6);
   }
 
+  .version-filter-btn:focus-visible {
+    outline: 2px solid var(--search-control-focus, var(--sl-color-text-accent));
+    outline-offset: 2px;
+  }
+
   .version-filter-btn.filtered {
     border-color: var(--sl-color-accent);
     background: color-mix(in srgb, var(--sl-color-accent) 8%, transparent);
@@ -371,6 +391,7 @@ const sorted = [...versions].sort((a, b) => {
   /* ── Checkbox items ──────────────────────────────────────────── */
 
   .version-filter-item {
+    min-height: 2.25rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
diff --git a/src/frontend/src/components/api-reference/inpage-search-sync.ts b/src/frontend/src/components/api-reference/inpage-search-sync.ts
index ce606258d..e34c2407a 100644
--- a/src/frontend/src/components/api-reference/inpage-search-sync.ts
+++ b/src/frontend/src/components/api-reference/inpage-search-sync.ts
@@ -35,6 +35,8 @@ export class InpageSearchSync {
       this.input.focus();
       this.onClear();
     }, { signal });
+    // Text can be entered or restored before the controller attaches its listeners.
+    this.updateClearButton();
   }
 
   readQuery(): string {
diff --git a/src/frontend/src/components/dev-center/BrowseDropdown.astro b/src/frontend/src/components/dev-center/BrowseDropdown.astro
index dd0e85173..ea23ef05e 100644
--- a/src/frontend/src/components/dev-center/BrowseDropdown.astro
+++ b/src/frontend/src/components/dev-center/BrowseDropdown.astro
@@ -61,7 +61,7 @@ const { name, label, multiple = true, options } = Astro.props;
   summary {
     display: flex; align-items: center; gap: 0.3rem; min-height: 3rem;
     padding: 0.5rem 0.75rem; border: 1px solid var(--sl-color-gray-5); border-radius: 0.4rem;
-    background: var(--dev-control-bg); color: var(--sl-color-text); font-size: 0.85rem;
+    background: var(--search-control-bg); color: var(--sl-color-text); font-size: 0.85rem;
     cursor: pointer; list-style: none; white-space: nowrap;
   }
   summary::-webkit-details-marker { display: none; }
@@ -71,7 +71,6 @@ const { name, label, multiple = true, options } = Astro.props;
   .browse-filter-active { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--sl-color-text-accent); flex-shrink: 0; }
   .browse-filter-group[open] > summary, .browse-filter-group:not([data-filter-group='sort']):has(input:checked:not([value=''])) > summary {
     border-color: var(--sl-color-text-accent);
-    background: color-mix(in srgb, var(--sl-color-text-accent) 7%, var(--dev-control-bg));
   }
   .browse-filter-panel {
     position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 2;
diff --git a/src/frontend/src/components/dev-center/GlossaryBrowser.astro b/src/frontend/src/components/dev-center/GlossaryBrowser.astro
index e61e0eb24..2c7c12b7c 100644
--- a/src/frontend/src/components/dev-center/GlossaryBrowser.astro
+++ b/src/frontend/src/components/dev-center/GlossaryBrowser.astro
@@ -11,8 +11,8 @@ const availableTopics = topics.filter((topic) => terms.some((term) => term.data.
 const firstGroupTerms = new Set(legacyGroups.map(([id]) => terms.find((term) => term.data.legacyGroup === id)?.id));
 ---
 
-<glossary-browser class="not-content">
-  <div class="glossary-filter-panel">
+<glossary-browser class="not-content" data-filter-path={Astro.url.pathname}>
+  <div class="glossary-filter-panel hub-grain">
     <form class="glossary-controls" role="search" aria-label="Search the glossary" hidden>
       <InpageSearch
         id="glossary"
@@ -34,12 +34,10 @@ const firstGroupTerms = new Set(legacyGroups.map(([id]) => terms.find((term) =>
   </div>
   <noscript><p>Search and filters require JavaScript. All terms and their practical examples are available below; use the letters to jump to a section.</p></noscript>
   <div id="glossary-results"></div>
-  <div data-glossary-empty hidden>
-    <div>
-      <h2>No matching terms</h2>
-      <p>Try a different search or reset your filters.</p>
-    </div>
-    <button type="button" data-clear-glossary>Show all terms</button>
+  <div class="search-empty" data-glossary-empty hidden>
+    <h2 class="search-empty-title">{terms.length ? 'No matching terms' : 'No terms available'}</h2>
+    <p class="search-empty-hint">{terms.length ? 'Try a different search or reset your filters.' : 'Glossary terms will appear here when they are available.'}</p>
+    <button type="button" class="search-action" data-clear-glossary hidden={!terms.length}>Reset all</button>
   </div>
   {letters.map((letter) => (
     <section class="glossary-group" data-glossary-group aria-labelledby={`glossary-${letter}`}>
@@ -75,10 +73,6 @@ const firstGroupTerms = new Set(legacyGroups.map(([id]) => terms.find((term) =>
     position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
     overflow: hidden; clip-path: inset(50%); white-space: nowrap;
   }
-  .glossary-controls :global(.inpage-search[data-size] .inpage-search-input) {
-    height: 2.75rem; border-radius: 0.5rem; background-color: var(--dev-control-bg); font-size: 1rem;
-  }
-  .glossary-controls :global(.inpage-search-input::placeholder) { color: var(--sl-color-gray-2); }
   .glossary-controls :global(.inpage-kind-filters) { grid-column: 1 / -1; grid-row: 2; gap: 0.25rem; margin: 0; }
   .glossary-controls :global(.api-filter-chip[data-colored]) {
     min-height: 2.25rem; padding: 0.35rem 0.65rem; border-color: transparent;
@@ -94,21 +88,14 @@ const firstGroupTerms = new Set(legacyGroups.map(([id]) => terms.find((term) =>
   }
   .glossary-controls :global(.api-filter-dot) { display: none; }
   .glossary-controls :global(.inpage-search-stats) {
-    grid-column: 2; grid-row: 1; align-self: end; min-height: 2.75rem; min-width: 12rem;
+    grid-column: 2; grid-row: 1; align-self: end; min-height: 2.75rem; min-width: 13rem;
     justify-content: flex-start; flex-wrap: wrap; gap: 0.25rem 1rem;
-    padding: 0; font-size: 0.8125rem; color: var(--sl-color-gray-2);
+    padding: 0;
   }
   .glossary-controls :global(.inpage-clear-filters) { min-height: 2.25rem; }
   .glossary-controls :global(button:focus-visible), .glossary-alphabet a:focus-visible {
     outline: 2px solid var(--sl-color-text-accent); outline-offset: 2px;
   }
-  [data-clear-glossary] {
-    min-height: 3rem; border: 1px solid var(--sl-color-gray-4); border-radius: 0.5rem;
-    background: var(--sl-color-bg); color: var(--sl-color-text); padding: 0.65rem 1rem;
-    flex-shrink: 0; font: inherit; font-weight: 600; cursor: pointer;
-  }
-  [data-clear-glossary]:hover { border-color: var(--sl-color-text-accent); color: var(--sl-color-text-accent); }
-  [data-clear-glossary]:focus-visible { outline: 2px solid var(--sl-color-text-accent); outline-offset: 3px; }
   .glossary-alphabet {
     display: grid; grid-template-columns: 2.75rem repeat(26, minmax(1.5rem, 1fr));
     gap: 0.125rem; padding: 1rem 0 0;
@@ -126,13 +113,6 @@ const firstGroupTerms = new Set(legacyGroups.map(([id]) => terms.find((term) =>
   #see-also { margin-top: 1.5rem; scroll-margin-top: 7rem; }
   .glossary-group h2 { scroll-margin-top: 7rem; margin-bottom: 1rem; color: var(--sl-color-text-accent); }
   .glossary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
-  [data-glossary-empty]:not([hidden]) {
-    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
-    padding: 1.5rem; border: 1px solid var(--sl-color-gray-5); border-radius: 0.75rem;
-    background: color-mix(in srgb, var(--sl-color-gray-6) 50%, var(--sl-color-bg));
-  }
-  [data-glossary-empty] h2 { margin: 0; font-size: 1.25rem; }
-  [data-glossary-empty] p { margin: 0.5rem 0 0; color: var(--sl-color-gray-2); }
   @media (min-width: 1200px) {
     .glossary-controls :global(.inpage-search) { display: flex; align-items: center; }
     .glossary-controls :global(.inpage-search-bar) { flex: 1; max-width: 32rem; }
@@ -152,6 +132,5 @@ const firstGroupTerms = new Set(legacyGroups.map(([id]) => terms.find((term) =>
   }
   @media (max-width: 767px) {
     .glossary-grid { grid-template-columns: 1fr; }
-    [data-glossary-empty]:not([hidden]) { flex-direction: column; align-items: flex-start; padding: 1.25rem; gap: 1rem; }
   }
 </style>
diff --git a/src/frontend/src/components/dev-center/GlossaryBrowser.ts b/src/frontend/src/components/dev-center/GlossaryBrowser.ts
index 07f26c94b..4d95a23fe 100644
--- a/src/frontend/src/components/dev-center/GlossaryBrowser.ts
+++ b/src/frontend/src/components/dev-center/GlossaryBrowser.ts
@@ -1,5 +1,8 @@
 import { matchesGlossaryQuery } from '../../utils/dev-center/glossary';
 import { topics } from '../../utils/dev-center/topics';
+import { createFilterHistory } from './filter-history';
+import { emptyResultsMessage } from './empty-results';
+import { setSearchActiveFilters } from '../search/search-empty-state';
 
 class GlossaryBrowser extends HTMLElement {
   private controller?: AbortController;
@@ -21,6 +24,7 @@ class GlossaryBrowser extends HTMLElement {
     const letters = [...this.querySelectorAll<HTMLAnchorElement>('[data-letter-filter]')];
     const timers = new Map<HTMLElement, ReturnType<typeof setTimeout>>();
     let letter = '';
+    let recoveryAction: ReturnType<typeof emptyResultsMessage>['action'] = 'Clear search';
 
     const close = (card: HTMLElement) => {
       clearTimeout(timers.get(card));
@@ -35,13 +39,13 @@ class GlossaryBrowser extends HTMLElement {
       card.querySelector('[data-context-label]')!.textContent = 'In practice';
     };
     const closeAll = () => cards.forEach(close);
+    const matchesFilters = (card: HTMLElement) => (!letter || card.dataset.letter === letter)
+      && (selectedTopics.size === 0 || card.dataset.topics?.split(' ').some((topic) => selectedTopics.has(topic)));
     const update = () => {
       closeAll();
       let count = 0;
       for (const card of cards) {
-        card.hidden = !matchesGlossaryQuery(card.dataset.search ?? '', query.value)
-          || Boolean(letter && card.dataset.letter !== letter)
-          || (selectedTopics.size > 0 && !card.dataset.topics?.split(' ').some((topic) => selectedTopics.has(topic)));
+        card.hidden = !matchesGlossaryQuery(card.dataset.search ?? '', query.value) || !matchesFilters(card);
         if (!card.hidden) count++;
       }
       this.querySelectorAll<HTMLElement>('[data-glossary-group]').forEach((group) => {
@@ -61,8 +65,23 @@ class GlossaryBrowser extends HTMLElement {
       this.querySelector('#glossary-search-count')!.textContent = filters.length ? `${count} of ${cards.length} terms` : `${cards.length} terms`;
       this.querySelector('#glossary-search-status')!.textContent = summary;
       clearSearch.style.display = query.value ? 'flex' : 'none';
-      clearFilters.style.display = filters.length && count > 0 ? 'inline-block' : 'none';
+      const hasFilters = selectedTopics.size > 0 || Boolean(letter);
+      clearFilters.style.display = hasFilters && count > 0 ? 'inline-block' : 'none';
+      clearFilters.textContent = query.value.trim() ? 'Reset all' : 'Clear filters';
       this.querySelector<HTMLElement>('[data-glossary-empty]')!.hidden = count > 0;
+      if (!count && cards.length) {
+        const activeFilters = topicButtons.filter(({ topic }) => selectedTopics.has(topic.id)).map(({ topic }) => `Topic: ${topic.title}`);
+        if (letter) activeFilters.push(`Letter: ${letter}`);
+        const message = emptyResultsMessage('terms', query.value, activeFilters, {
+          withoutQuery: cards.filter(matchesFilters).length,
+          withoutFilters: cards.filter((card) => matchesGlossaryQuery(card.dataset.search ?? '', query.value)).length,
+        });
+        recoveryAction = message.action;
+        this.querySelector('[data-glossary-empty] .search-empty-title')!.textContent = message.title;
+        this.querySelector('[data-glossary-empty] .search-empty-hint')!.textContent = message.hint;
+        setSearchActiveFilters(this.querySelector<HTMLElement>('[data-glossary-empty]')!, activeFilters);
+        this.querySelector('[data-clear-glossary]')!.textContent = message.action;
+      }
     };
     const save = (replace: boolean) => {
       const url = new URL(window.location.href);
@@ -73,8 +92,7 @@ class GlossaryBrowser extends HTMLElement {
       }
       if (letter) url.searchParams.set('letter', letter);
       url.hash = '';
-      if (replace) window.history.replaceState(null, '', url);
-      else if (url.href !== window.location.href) window.history.pushState(null, '', url);
+      historySync.write(url, replace);
       const returnTo = `${url.pathname}${url.search}`;
       this.querySelectorAll<HTMLAnchorElement>('[data-term-link]').forEach((link) => {
         const target = new URL(link.href);
@@ -102,19 +120,20 @@ class GlossaryBrowser extends HTMLElement {
         link.href = target.href;
       });
     };
-    const clear = () => {
-      query.value = '';
+    const clear = (filtersOnly = false) => {
+      if (!filtersOnly) query.value = '';
       selectedTopics.clear();
       letter = '';
       update();
       save(false);
     };
+    const clearQuery = () => { query.value = ''; update(); save(true); query.focus(); };
     form.hidden = false;
     form.addEventListener('submit', (event) => { event.preventDefault(); update(); save(false); }, { signal });
     form.addEventListener('reset', (event) => { event.preventDefault(); clear(); }, { signal });
     query.addEventListener('input', () => { update(); save(true); }, { signal });
-    clearSearch.addEventListener('click', () => { query.value = ''; update(); save(true); query.focus(); }, { signal });
-    clearFilters.addEventListener('click', () => { clear(); query.focus(); }, { signal });
+    clearSearch.addEventListener('click', clearQuery, { signal });
+    clearFilters.addEventListener('click', () => { clear(!query.value.trim()); query.focus(); }, { signal });
     for (const { button, topic } of topicButtons) {
       button.addEventListener('click', () => {
         if (selectedTopics.has(topic.id)) selectedTopics.delete(topic.id);
@@ -123,7 +142,10 @@ class GlossaryBrowser extends HTMLElement {
         save(false);
       }, { signal });
     }
-    this.querySelector('[data-clear-glossary]')!.addEventListener('click', () => { clear(); query.focus(); }, { signal });
+    this.querySelector('[data-clear-glossary]')!.addEventListener('click', () => {
+      if (recoveryAction === 'Clear search') clearQuery();
+      else { clear(recoveryAction === 'Clear filters'); query.focus(); }
+    }, { signal });
     for (const link of letters) {
       link.addEventListener('click', (event) => {
         event.preventDefault();
@@ -132,9 +154,6 @@ class GlossaryBrowser extends HTMLElement {
         save(false);
       }, { signal });
     }
-    window.addEventListener('popstate', restore, { signal });
-    // Reconnected elements see the previous URL until Astro finishes swapping.
-    document.addEventListener('astro:page-load', restore, { signal });
 
     const finePointer = window.matchMedia('(hover: hover) and (pointer: fine)');
     for (const card of cards) {
@@ -179,7 +198,8 @@ class GlossaryBrowser extends HTMLElement {
       }
     }, { signal });
     signal.addEventListener('abort', () => timers.forEach(clearTimeout), { once: true });
-    restore();
+    const historySync = createFilterHistory(this, ['q', 'topic', 'letter'], restore, signal);
+    historySync.initialize();
   }
 
   disconnectedCallback() {
diff --git a/src/frontend/src/components/dev-center/DevLayout.astro b/src/frontend/src/components/dev-center/HubLayout.astro
similarity index 94%
rename from src/frontend/src/components/dev-center/DevLayout.astro
rename to src/frontend/src/components/dev-center/HubLayout.astro
index b909768a2..8fc706719 100644
--- a/src/frontend/src/components/dev-center/DevLayout.astro
+++ b/src/frontend/src/components/dev-center/HubLayout.astro
@@ -83,7 +83,7 @@ const path = Astro.url.pathname.replace(/\/$/, '');
     text-underline-offset: 0.2em;
   }
 
-  .dev-center :where(a, button, input, select, summary):focus-visible {
+  .dev-center :where(a, button, input, select, summary):not(.search-field-input, .search-field-clear, .search-action):focus-visible {
     outline: 3px solid var(--aspire-action-focus);
     outline-offset: 4px;
   }
diff --git a/src/frontend/src/components/dev-center/ResourceBrowser.astro b/src/frontend/src/components/dev-center/ResourceBrowser.astro
index a96ceaafc..d8a4d5dc4 100644
--- a/src/frontend/src/components/dev-center/ResourceBrowser.astro
+++ b/src/frontend/src/components/dev-center/ResourceBrowser.astro
@@ -25,23 +25,25 @@ const groups = [
 ];
 ---
 
-<resource-browser class="not-content">
-  <script is:inline>
+<resource-browser class="not-content" data-filter-path={Astro.url.pathname}>
+  <script is:inline data-astro-rerun>
     {
       const browser = document.currentScript.parentElement;
       // Run before the catalog can paint, without hiding links when JavaScript is disabled.
       if (!browser.hasAttribute('data-ready')) {
+        const controller = new AbortController();
+        const { signal } = controller;
         const materialize = (card) => {
-          card.querySelectorAll('noscript[data-resource-image]').forEach((source) => {
-            const template = document.createElement('template');
-            template.innerHTML = source.textContent;
-            source.replaceWith(template.content);
+          card.querySelectorAll('template[data-resource-image]').forEach((source) => {
+            source.replaceWith(source.content);
           });
         };
         browser.setAttribute('data-loading', '');
         browser.setAttribute('aria-busy', 'true');
-        window.addEventListener('load', () => {
-          if (!browser.hasAttribute('data-loading')) return;
+        const finish = () => queueMicrotask(() => {
+          if (signal.aborted) return;
+          controller.abort();
+          if (!browser.isConnected || !browser.hasAttribute('data-loading')) return;
           const note = browser.querySelector('[data-browse-static]');
           note.textContent = 'Interactive browsing could not load. All resource links are listed below.';
           note.hidden = false;
@@ -51,11 +53,14 @@ const groups = [
           });
           browser.removeAttribute('data-loading');
           browser.removeAttribute('aria-busy');
-        }, { once: true });
+        });
+        window.addEventListener('load', finish, { once: true, signal });
+        document.addEventListener('astro:page-load', finish, { once: true, signal });
+        document.addEventListener('astro:before-swap', () => controller.abort(), { once: true, signal });
       }
     }
   </script>
-  <div class="browse-controls">
+  <div class="browse-controls hub-grain">
     <form role="search" aria-label="Search resources" class="browse-search" hidden>
       <InpageSearch id="browse" placeholder="Search resources..." kinds={[]} defaultStatsText={`${resources.length} resources`} />
     </form>
@@ -87,13 +92,14 @@ const groups = [
   <div class="browse-layout">
     <section class="browse-results" aria-labelledby="browse-results-heading">
       <div class="browse-results-toolbar">
-        <h2 id="browse-results-heading" tabindex="-1" data-results-summary>{resources.length} resources</h2>
-        <button type="button" class="browse-clear" data-reset-filters hidden>Clear all</button>
+        <h2 id="browse-results-heading" class="search-results-summary" tabindex="-1" data-results-summary>{resources.length} resources</h2>
+        <button type="button" class="search-action" data-reset-filters hidden>Clear filters</button>
+        <button type="button" class="search-action" data-reset-all hidden>Reset all</button>
       </div>
-      <div class="browse-empty" hidden>
-        <h3>No matching resources</h3>
-        <p>Try a broader search or remove a filter.</p>
-        <button type="button" data-reset-search>Show all resources</button>
+      <div class="browse-empty search-empty" hidden>
+        <h3 class="search-empty-title">{resources.length ? 'No matching resources' : 'No resources available'}</h3>
+        <p class="search-empty-hint">{resources.length ? 'Try a broader search or remove a filter.' : 'Resources will appear here when they are available.'}</p>
+        <button type="button" class="search-action" data-reset-search hidden={!resources.length}>Reset all</button>
       </div>
       <ul class="browse-grid" set:html={cardHtml} />
       <nav class="browse-pagination" aria-label="Resource pages" hidden>
@@ -141,26 +147,18 @@ const groups = [
   .browse-skeleton-copy span:first-child { width: 75%; height: 1.25rem; margin-bottom: 0.5rem; }
   .browse-skeleton-copy span:last-child { width: 60%; }
   .browse-controls {
+    z-index: 1;
     display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem;
     padding: 1rem; border: 1px solid var(--sl-color-gray-5); border-radius: 0.75rem;
     background: color-mix(in srgb, var(--sl-color-text-accent) 4%, var(--sl-color-bg));
   }
   .browse-search { flex: 1 1 20rem; min-width: 0; }
-  :global(resource-browser .inpage-search-input) { background-color: var(--dev-control-bg); }
   .browse-layout { margin-top: 1.25rem; }
   .browse-filters { min-width: 0; }
   .browse-filter-content { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
-  .browse-clear { padding: 0.4rem 0; background: none; border: 0; color: var(--sl-color-text-accent); font-size: 0.85rem; text-decoration: underline; text-underline-offset: 0.2em; }
-  .browse-results h2 { font-size: 1.1rem; line-height: 1.5; }
   .browse-results { min-width: 0; }
   .browse-results-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; min-height: 2.5rem; margin-bottom: 1.25rem; }
-  .browse-results-toolbar h2 { font-size: 0.875rem; font-weight: 400; color: var(--sl-color-gray-2); }
   .browse-grid, .browse-loading-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 0; }
-  .browse-empty { padding: 2rem; border: 1px solid var(--sl-color-gray-5); border-radius: 0.65rem; }
-  .browse-empty h3 { font-size: 1.25rem; }
-  .browse-empty p { margin-block: 0.5rem 1.25rem; color: var(--sl-color-gray-2); }
-  .browse-empty button { min-height: 2.75rem; padding: 0.6rem 1rem; border: 1px solid var(--sl-color-gray-5); border-radius: 0.4rem; background: var(--sl-color-bg); color: var(--sl-color-text); }
-  .browse-empty button:hover { border-color: var(--sl-color-text-accent); color: var(--sl-color-text-accent); }
   .browse-pagination { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--sl-color-gray-5); font-size: 0.875rem; }
   .browse-page-numbers { display: flex; align-items: center; gap: 0.25rem; }
   .browse-page-edge span { width: 1.125rem; height: 1.125rem; }
@@ -183,7 +181,6 @@ const groups = [
     .browse-filters { width: 100%; }
     .browse-filter-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
     .browse-grid, .browse-loading-grid { grid-template-columns: minmax(0, 1fr); }
-    .browse-empty { padding: 1.25rem; }
     .browse-pagination { gap: 0.25rem; }
     .browse-page-numbers { gap: 0.125rem; }
     .browse-pagination :global(button) { height: 2.25rem; min-width: 2rem; padding-inline: 0.25rem; }
diff --git a/src/frontend/src/components/dev-center/ResourceBrowser.ts b/src/frontend/src/components/dev-center/ResourceBrowser.ts
index 7decf54dc..84f374a62 100644
--- a/src/frontend/src/components/dev-center/ResourceBrowser.ts
+++ b/src/frontend/src/components/dev-center/ResourceBrowser.ts
@@ -2,6 +2,9 @@ import {
   browsePageItems, facetNames, filterResources, matchesResource, readBrowseState, resourceFacets, resourceMatchRanges,
   RESOURCE_PAGE_SIZE, writeBrowseState, type ResourceSearchEntry,
 } from '../../utils/dev-center/resource-search';
+import { createFilterHistory } from './filter-history';
+import { emptyResultsMessage } from './empty-results';
+import { setSearchActiveFilters } from '../search/search-empty-state';
 
 const checkboxFacetNames = ['type', 'topic', 'language'] as const;
 
@@ -22,10 +25,8 @@ class ResourceBrowser extends HTMLElement {
     const entries = cards.map((card) => JSON.parse(card.dataset.resourceEntry!) as ResourceSearchEntry);
     const byId = new Map(cards.map((card, index) => [entries[index].id, card]));
     const materializeImage = (card: HTMLLIElement) => {
-      for (const source of card.querySelectorAll<HTMLElement>('noscript[data-resource-image]')) {
-        const template = document.createElement('template');
-        template.innerHTML = source.textContent ?? '';
-        source.replaceWith(template.content);
+      for (const source of card.querySelectorAll<HTMLTemplateElement>('template[data-resource-image]')) {
+        source.replaceWith(source.content);
       }
     };
     const available = resourceFacets(entries);
@@ -33,6 +34,7 @@ class ResourceBrowser extends HTMLElement {
     const radios = [...filters.querySelectorAll<HTMLInputElement>('input[type="radio"]')];
     const clearSearch = this.querySelector<HTMLButtonElement>('#browse-search-clear')!;
     const clearFilters = this.querySelector<HTMLButtonElement>('[data-reset-filters]')!;
+    const resetAll = this.querySelector<HTMLButtonElement>('[data-reset-all]')!;
     const pagination = this.querySelector<HTMLElement>('.browse-pagination')!;
     const pageNumbers = this.querySelector<HTMLElement>('[data-page-numbers]')!;
     const first = this.querySelector<HTMLButtonElement>('[data-page-first]')!;
@@ -40,6 +42,7 @@ class ResourceBrowser extends HTMLElement {
     const previous = this.querySelector<HTMLButtonElement>('[data-page-previous]')!;
     const next = this.querySelector<HTMLButtonElement>('[data-page-next]')!;
     const empty = this.querySelector<HTMLElement>('.browse-empty')!;
+    let recoveryAction: ReturnType<typeof emptyResultsMessage>['action'] = 'Clear search';
     let state = readBrowseState(new URLSearchParams(location.search), available);
     let pages = 1;
     const highlighted = new Set<HTMLElement>();
@@ -93,7 +96,28 @@ class ResourceBrowser extends HTMLElement {
       this.querySelector('#browse-search-status')!.textContent = summary;
       this.querySelector('#browse-search-count')!.textContent = summary;
       clearSearch.style.display = input.value ? 'flex' : 'none';
-      clearFilters.hidden = !state.q && !facetNames.some((name) => state[name].length);
+      const hasFilters = facetNames.some((name) => state[name].length);
+      const hasQuery = Boolean(state.q.trim());
+      clearFilters.hidden = !hasFilters || hasQuery || matches.length === 0;
+      resetAll.hidden = !hasFilters || !hasQuery || matches.length === 0;
+      if (!matches.length && entries.length) {
+        const defaultState = readBrowseState(new URLSearchParams(), available);
+        const activeFilters = facetNames.flatMap((name) => state[name].map((value) => {
+          const option = [...checkboxes, ...radios].find((control) => control.name === name && control.value === value)!;
+          const label = option.closest<HTMLElement>('[data-option-label]')!.dataset.optionLabel;
+          const group = option.closest('[data-filter-group]')!.querySelector('legend')!.textContent;
+          return `${group}: ${label}`;
+        }));
+        const message = emptyResultsMessage('resources', state.q, activeFilters, {
+          withoutQuery: entries.filter((entry) => matchesResource(entry, { ...state, q: '' })).length,
+          withoutFilters: entries.filter((entry) => matchesResource(entry, { ...defaultState, q: state.q })).length,
+        });
+        recoveryAction = message.action;
+        empty.querySelector('.search-empty-title')!.textContent = message.title;
+        empty.querySelector('.search-empty-hint')!.textContent = message.hint;
+        setSearchActiveFilters(empty, activeFilters);
+        empty.querySelector('button')!.textContent = message.action;
+      }
       for (const name of checkboxFacetNames) {
         const indicator = this.querySelector<HTMLElement>(`[data-filter-active="${name}"]`);
         if (indicator) indicator.hidden = state[name].length === 0;
@@ -156,9 +180,7 @@ class ResourceBrowser extends HTMLElement {
     };
     const save = (replace = false) => {
       const url = writeBrowseState(new URL(location.href), state);
-      if (url.href === location.href) return;
-      if (replace) history.replaceState(null, '', url);
-      else history.pushState(null, '', url);
+      historySync.write(url, replace);
     };
     const restore = () => {
       // History can replace the pager or hide the currently focused control.
@@ -180,10 +202,25 @@ class ResourceBrowser extends HTMLElement {
           ?? (focused.isConnected && focused.getClientRects().length ? focused : input);
         target.focus({ preventScroll: true });
       }
+      this.setAttribute('data-ready', '');
+      this.removeAttribute('data-loading');
+      this.removeAttribute('aria-busy');
+    };
+    const reset = (filtersOnly = false) => {
+      state = {
+        ...readBrowseState(new URLSearchParams(), available),
+        q: filtersOnly ? state.q : '',
+        sort: state.sort,
+        titleSort: state.titleSort,
+      };
+      input.value = state.q;
+      render();
+      save();
+      input.focus();
     };
-    const reset = () => {
-      state = readBrowseState(new URLSearchParams(), available);
+    const clearQuery = () => {
       input.value = '';
+      setQuery();
       render();
       save();
       input.focus();
@@ -279,13 +316,7 @@ class ResourceBrowser extends HTMLElement {
       render();
       save(true);
     }, { signal });
-    clearSearch.addEventListener('click', () => {
-      input.value = '';
-      setQuery();
-      render();
-      save();
-      input.focus();
-    }, { signal });
+    clearSearch.addEventListener('click', clearQuery, { signal });
     filters.addEventListener('change', (event) => {
       const control = event.target;
       if (!(control instanceof HTMLInputElement) || !['checkbox', 'radio'].includes(control.type)) return;
@@ -306,8 +337,12 @@ class ResourceBrowser extends HTMLElement {
         control.closest('[data-filter-group]')!.querySelector('summary')!.focus();
       }, { signal });
     }
-    clearFilters.addEventListener('click', reset, { signal });
-    this.querySelector('[data-reset-search]')!.addEventListener('click', reset, { signal });
+    clearFilters.addEventListener('click', () => reset(true), { signal });
+    resetAll.addEventListener('click', () => reset(), { signal });
+    this.querySelector('[data-reset-search]')!.addEventListener('click', () => {
+      if (recoveryAction === 'Clear search') clearQuery();
+      else reset(recoveryAction === 'Clear filters');
+    }, { signal });
     previous.addEventListener('click', () => changePage(state.page - 1, previous), { signal });
     next.addEventListener('click', () => changePage(state.page + 1, next), { signal });
     first.addEventListener('click', () => changePage(1, first), { signal });
@@ -318,18 +353,8 @@ class ResourceBrowser extends HTMLElement {
         if (button) changePage(Number(button.dataset.page), button);
       }
     }, { signal });
-    window.addEventListener('popstate', restore, { signal });
-    document.addEventListener('astro:before-swap', (event) => {
-      // Query-only history is restored locally; swapping the page would discard focus.
-      if (event.navigationType === 'traverse' && event.from.pathname === event.to.pathname) {
-        event.swap = () => {};
-      }
-    }, { signal });
-    document.addEventListener('astro:page-load', restore, { signal });
-    restore();
-    this.setAttribute('data-ready', '');
-    this.removeAttribute('data-loading');
-    this.removeAttribute('aria-busy');
+    const historySync = createFilterHistory(this, ['q', ...facetNames, 'sort', 'title', 'page'], restore, signal);
+    historySync.initialize();
   }
 
   disconnectedCallback() {
diff --git a/src/frontend/src/components/dev-center/empty-results.ts b/src/frontend/src/components/dev-center/empty-results.ts
new file mode 100644
index 000000000..65721de8a
--- /dev/null
+++ b/src/frontend/src/components/dev-center/empty-results.ts
@@ -0,0 +1,20 @@
+import { searchRecoveryAction } from '../search/search-empty-state';
+
+export function emptyResultsMessage(
+  items: 'resources' | 'terms',
+  query: string,
+  filters: string[],
+  counts: { withoutQuery: number; withoutFilters: number },
+) {
+  const text = query.trim();
+  const action = searchRecoveryAction(Boolean(text), filters.length > 0, counts);
+  const title = text
+    ? `No ${items} match "${text}"${action === 'Clear filters' ? ' with these filters' : ''}`
+    : `No ${items} match these filters`;
+  const hint = action === 'Clear filters'
+    ? `${text ? 'Keep your search and clear filters to see matching' : 'Clear filters to browse all'} ${items}.`
+    : action === 'Clear search'
+      ? `Try another term, or clear your search${filters.length ? ' while keeping your filters' : ` to browse all ${items}`}.`
+      : 'Try another term or adjust your filters. Reset all clears both your search and filters.';
+  return { action, title, hint };
+}
diff --git a/src/frontend/src/components/dev-center/filter-history.ts b/src/frontend/src/components/dev-center/filter-history.ts
new file mode 100644
index 000000000..e096749db
--- /dev/null
+++ b/src/frontend/src/components/dev-center/filter-history.ts
@@ -0,0 +1,93 @@
+import { navigate } from 'astro:transitions/client';
+
+const historyKey = 'aspireFilterPath';
+
+function isOwnedEntry(path: string): boolean {
+  const state: unknown = history.state;
+  return typeof state === 'object' && state !== null
+    && historyKey in state && state[historyKey] === path;
+}
+
+export function isFilterNavigation(from: URL, to: URL, parameters: readonly string[]): boolean {
+  if (from.origin !== to.origin || from.pathname !== to.pathname) return false;
+  const unrelated = (url: URL) => {
+    const query = new URLSearchParams(url.search);
+    for (const name of parameters) query.delete(name);
+    query.sort();
+    return query.toString();
+  };
+  return unrelated(from) === unrelated(to);
+}
+
+/** Keep query-only controls in place while Astro owns history indexes and traversal. */
+export function createFilterHistory(
+  root: HTMLElement,
+  parameters: readonly string[],
+  restore: () => void,
+  signal: AbortSignal,
+) {
+  const path = root.dataset.filterPath!;
+  let localSwap: { traverse: boolean; x: number; y: number } | undefined;
+  let restoredAfterSwap = false;
+  let pending = false;
+  let revision = 0;
+  const markEntry = () => {
+    if (!isOwnedEntry(path)) {
+      history.replaceState({ ...history.state, [historyKey]: path }, '');
+    }
+  };
+  const restoreCurrent = () => {
+    if (!root.isConnected || location.pathname !== path) return;
+    markEntry();
+    restore();
+  };
+
+  document.addEventListener('astro:before-swap', (event) => {
+    const owned = event.info === root
+      || (event.navigationType === 'traverse' && isOwnedEntry(path));
+    if (!owned || event.to.pathname !== path || !isFilterNavigation(event.from, event.to, parameters)) return;
+    localSwap = { traverse: event.navigationType === 'traverse', x: scrollX, y: scrollY };
+    event.viewTransition.skipTransition();
+    // The loader (including deployment checks) still runs; only these local results stay mounted.
+    event.swap = () => {};
+  }, { signal });
+  document.addEventListener('astro:after-swap', () => {
+    restoredAfterSwap = true;
+    if (localSwap && !localSwap.traverse) {
+      markEntry();
+      window.scrollTo({ left: localSwap.x, top: localSwap.y, behavior: 'instant' });
+    } else {
+      restoreCurrent();
+    }
+    localSwap = undefined;
+  }, { signal });
+  document.addEventListener('astro:page-load', () => {
+    if (!restoredAfterSwap) restoreCurrent();
+    restoredAfterSwap = false;
+  }, { signal });
+
+  return {
+    initialize() {
+      // Connected callbacks run inside a swap, before Astro updates location.
+      if (!document.documentElement.hasAttribute('data-astro-transition')) restoreCurrent();
+    },
+    write(url: URL, replace: boolean) {
+      if (signal.aborted || !root.isConnected || location.pathname !== path) return;
+      markEntry();
+      if (url.href === location.href && !pending) return;
+      if (replace && !pending) {
+        history.replaceState(history.state, '', url);
+      } else {
+        pending = true;
+        const currentRevision = ++revision;
+        void navigate(url.href, {
+          info: root,
+          state: { [historyKey]: path },
+          history: replace ? 'replace' : 'push',
+        }).finally(() => {
+          if (currentRevision === revision) pending = false;
+        });
+      }
+    },
+  };
+}
diff --git a/src/frontend/src/components/search/SearchEmptyState.astro b/src/frontend/src/components/search/SearchEmptyState.astro
new file mode 100644
index 000000000..85f40b8f5
--- /dev/null
+++ b/src/frontend/src/components/search/SearchEmptyState.astro
@@ -0,0 +1,21 @@
+---
+/** Compact empty-state presentation; the consumer supplies localized copy and actions. */
+import '../../styles/search-controls.css';
+
+interface Props {
+  id?: string;
+  title: string;
+  hint?: string;
+  actionLabel?: string;
+  actionId?: string;
+  hidden?: boolean;
+}
+
+const { id, title, hint, actionLabel, actionId, hidden = false } = Astro.props;
+---
+
+<div id={id} class="search-empty" hidden={hidden}>
+  <p class="search-empty-title">{title}</p>
+  {hint && <p class="search-empty-hint">{hint}</p>}
+  {actionLabel && <button id={actionId} class="search-action" type="button">{actionLabel}</button>}
+</div>
diff --git a/src/frontend/src/components/search/SearchField.astro b/src/frontend/src/components/search/SearchField.astro
new file mode 100644
index 000000000..c729ef064
--- /dev/null
+++ b/src/frontend/src/components/search/SearchField.astro
@@ -0,0 +1,47 @@
+---
+/**
+ * Presentation only: the consuming controller owns query state and clear behavior.
+ * Keep the accessible label stable; placeholders may offer contextual examples.
+ */
+import '../../styles/search-controls.css';
+
+interface Props {
+  id: string;
+  label: string;
+  placeholder?: string;
+  clearId?: string;
+  clearLabel?: string;
+  describedBy?: string;
+  size?: 'lg' | 'sm';
+  inputClass?: string;
+  clearClass?: string;
+  /** Contextual layout hooks retained by consumers extracting existing controls. */
+  containerClass?: string;
+  labelClass?: string;
+  wrapClass?: string;
+  iconClass?: string;
+  visibleLabel?: boolean;
+}
+
+const {
+  id, label, placeholder, clearId, clearLabel = 'Clear search', describedBy,
+  size = 'lg', inputClass, clearClass, visibleLabel = false,
+  containerClass, labelClass, wrapClass, iconClass,
+} = Astro.props;
+---
+
+<div class:list={['search-field', containerClass]} data-search-size={size}>
+  <label class:list={[visibleLabel ? 'search-field-label' : 'search-sr-only', labelClass]} for={id}>{label}</label>
+  <div class:list={['search-field-wrap', wrapClass]}>
+    <svg class:list={['search-field-icon', iconClass]} aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+      <circle cx="11" cy="11" r="8"></circle>
+      <path d="m21 21-4.35-4.35"></path>
+    </svg>
+    <input id={id} type="search" class:list={['search-field-input', inputClass]} placeholder={placeholder} autocomplete="off" aria-describedby={describedBy} />
+    <button type="button" id={clearId} class:list={['search-field-clear', clearClass]} aria-label={clearLabel} style="display: none;">
+      <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+        <path d="m18 6-12 12M6 6l12 12"></path>
+      </svg>
+    </button>
+  </div>
+</div>
diff --git a/src/frontend/src/components/search/search-empty-state.ts b/src/frontend/src/components/search/search-empty-state.ts
new file mode 100644
index 000000000..a511e6f18
--- /dev/null
+++ b/src/frontend/src/components/search/search-empty-state.ts
@@ -0,0 +1,59 @@
+/** DOM equivalent of SearchEmptyState for controllers that render result batches. */
+export function createSearchEmptyState(options: {
+  title: string;
+  hint: string;
+  activeFilters?: string[];
+  activeFiltersLabel?: string;
+  action?: { label: string; run: () => void };
+}): HTMLElement {
+  const region = document.createElement('div');
+  region.className = 'search-empty';
+  const title = document.createElement('p');
+  title.className = 'search-empty-title';
+  title.textContent = options.title;
+  const hint = document.createElement('p');
+  hint.className = 'search-empty-hint';
+  hint.textContent = options.hint;
+  region.append(title, hint);
+  setSearchActiveFilters(region, options.activeFilters ?? [], options.activeFiltersLabel);
+  if (options.action) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'search-action';
+    button.textContent = options.action.label;
+    button.addEventListener('click', options.action.run, { once: true });
+    region.append(button);
+  }
+  return region;
+}
+
+export function setSearchActiveFilters(region: HTMLElement, labels: string[], label = 'Active filters') {
+  let list = region.querySelector<HTMLUListElement>('.search-active-filters');
+  if (!list && !labels.length) return;
+  if (!list) {
+    list = document.createElement('ul');
+    list.className = 'search-active-filters';
+    list.setAttribute('role', 'list');
+    region.insertBefore(list, region.querySelector('.search-action'));
+  }
+  list.setAttribute('aria-label', label);
+  list.hidden = labels.length === 0;
+  list.replaceChildren(...labels.map((text) => {
+    const item = document.createElement('li');
+    item.textContent = text;
+    return item;
+  }));
+}
+
+export function searchRecoveryAction(
+  hasQuery: boolean,
+  hasFilters: boolean,
+  counts: { withoutQuery: number; withoutFilters: number },
+) {
+  if (hasQuery && hasFilters) {
+    if (counts.withoutFilters > 0) return 'Clear filters';
+    if (counts.withoutQuery > 0) return 'Clear search';
+    return 'Reset all';
+  }
+  return hasFilters ? 'Clear filters' : 'Clear search';
+}
diff --git a/src/frontend/src/components/starlight/Search.astro b/src/frontend/src/components/starlight/Search.astro
index 21037fc77..1338c689b 100644
--- a/src/frontend/src/components/starlight/Search.astro
+++ b/src/frontend/src/components/starlight/Search.astro
@@ -3,6 +3,7 @@ import DefaultSearch from "@astrojs/starlight/components/Search.astro";
 import { Image } from 'astro:assets';
 import csharpIcon from '@assets/icons/csharp.svg';
 import typescriptIcon from '@assets/icons/typescript.svg';
+import '../../styles/search-controls.css';
 
 const routeData = Astro.locals.starlightRoute;
 const pageId = routeData?.id ?? '';
@@ -15,7 +16,7 @@ const typescriptHref = `${base}/reference/api/typescript/`;
 
 { hideSearch ? <></> : <DefaultSearch><slot /></DefaultSearch> }
 
-<template id="api-search-notice-tpl">
+<template id="api-search-notice-tpl" data-clear-search={Astro.locals.t('catalogSearch.clearSearch')}>
   <div class="api-search-notice">
     <p class="api-search-notice-text">API references are intentionally omitted from this search. To find API references, please search these dedicated API pages instead:</p>
     <div class="api-search-notice-buttons">
@@ -71,6 +72,8 @@ const typescriptHref = `${base}/reference/api/typescript/`;
    *   4. Forwards the typed query into the API notice buttons as `?q=`,
    *      so a user who searches and falls back to the API listings keeps
    *      their query.
+   *   5. Aligns clear/search status presentation without replacing Pagefind's
+   *      localized loading, result, or failure states.
    *
    * Pagefind UI is rendered lazily (and not at all in `astro dev`), so we
    * use a single MutationObserver on the <site-search> custom element to
@@ -414,7 +417,22 @@ const typescriptHref = `${base}/reference/api/typescript/`;
       injectTemplate(dialogFrame, 'search-keyboard-footer-tpl', '.search-keyboard-footer');
       nav.refresh();
       linker.refresh();
+      const message = dialog.querySelector<HTMLElement>('.pagefind-ui__message');
+      message?.setAttribute('role', 'status');
+      message?.setAttribute('aria-live', 'polite');
+      message?.setAttribute('aria-atomic', 'true');
+      const clear = dialog.querySelector<HTMLButtonElement>('.pagefind-ui__search-clear');
+      const clearLabel = document.querySelector<HTMLTemplateElement>('#api-search-notice-tpl')?.dataset.clearSearch;
+      if (clear && clearLabel && document.documentElement.lang.startsWith('en')) {
+        if (clear.getAttribute('aria-label') !== clearLabel) clear.setAttribute('aria-label', clearLabel);
+      }
+    };
+    const focusAfterClear = (event: MouseEvent) => {
+      if ((event.target as Element)?.closest('.pagefind-ui__search-clear')) {
+        dialog.querySelector<HTMLInputElement>('.pagefind-ui__search-input')?.focus();
+      }
     };
+    dialog.addEventListener('click', focusAfterClear);
 
     setup();
 
@@ -439,14 +457,91 @@ const typescriptHref = `${base}/reference/api/typescript/`;
       if (hubTrigger) hubTrigger.disabled = true;
       nav.destroy();
       linker.destroy();
+      dialog.removeEventListener('click', focusAfterClear);
     };
   }
 
   initSearchEnhancements();
   document.addEventListener('astro:after-swap', initSearchEnhancements);
+  document.addEventListener('astro:before-swap', () => cleanup?.());
 </script>
 
 <style is:global>
+  #starlight__search .pagefind-ui__search-input {
+    height: var(--search-control-height);
+    padding: 0.5rem 2.75rem;
+    border: 1px solid var(--search-control-border);
+    border-radius: var(--search-control-radius);
+    background: var(--search-control-bg);
+    color: var(--sl-color-text);
+    font: inherit;
+    font-size: 1rem;
+    box-sizing: border-box;
+  }
+  #starlight__search .pagefind-ui__search-input::placeholder {
+    color: var(--sl-color-gray-1);
+    opacity: 1;
+  }
+  #starlight__search .pagefind-ui__search-input:focus {
+    outline: 2px solid var(--search-control-focus);
+    outline-offset: 2px;
+    border-color: var(--search-control-focus);
+    box-shadow: none;
+  }
+  #starlight__search .pagefind-ui__form::before {
+    top: calc((var(--search-control-height) - 1.125rem) / 2);
+    left: 0.85rem;
+    width: 1.125rem;
+    height: 1.125rem;
+    background-color: var(--sl-color-gray-1);
+    opacity: 1;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+  #starlight__search .pagefind-ui__search-clear:focus-visible {
+    outline: 2px solid var(--search-control-focus);
+    outline-offset: 2px;
+  }
+  #starlight__search .pagefind-ui__message {
+    font-size: 0.875rem;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 1.5;
+    color: var(--sl-color-gray-2);
+    padding-block: 0.75rem;
+  }
+  #starlight__search .pagefind-ui__search-clear {
+    top: calc((var(--search-control-height) - 2.25rem) / 2);
+    inset-inline-end: calc(var(--sl-search-cancel-space, 0px) + 0.25rem);
+    width: 2.25rem;
+    height: 2.25rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    border-radius: var(--search-control-radius);
+    background: transparent;
+    color: var(--sl-color-text);
+    /* Keep Pagefind's translated button text as its accessible name. */
+    font-size: 0;
+  }
+  #starlight__search .pagefind-ui__search-clear::before {
+    width: 1rem;
+    height: 1rem;
+    margin: auto;
+    background-color: currentColor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m18 6-12 12M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+  #starlight__search .pagefind-ui__search-clear:hover {
+    background: var(--sl-color-gray-6);
+  }
+  @media (pointer: coarse) {
+    #starlight__search .pagefind-ui__search-clear {
+      top: calc((var(--search-control-height) - 2.75rem) / 2);
+      width: 2.75rem;
+      height: 2.75rem;
+    }
+  }
   body:has(.dev-home) site-search > button[data-open-modal] {
     display: none;
   }
diff --git a/src/frontend/src/components/starlight/Sidebar.astro b/src/frontend/src/components/starlight/Sidebar.astro
index 2474a52c4..603a0e2e6 100644
--- a/src/frontend/src/components/starlight/Sidebar.astro
+++ b/src/frontend/src/components/starlight/Sidebar.astro
@@ -5,6 +5,7 @@ import SidebarSublist from '@astrojs/starlight/components/SidebarSublist.astro';
 import { Badge, Icon, LinkButton } from '@astrojs/starlight/components';
 import { sidebarTopics } from '../../../config/sidebar/sidebar.topics.js';
 import { referenceTopics } from '../../../config/sidebar/reference.topics.js';
+import '../../styles/search-controls.css';
 
 const routeData = Astro.locals.starlightRoute;
 const topicState = Astro.locals.starlightSidebarTopics;
@@ -159,12 +160,10 @@ const hasTopicsList = Boolean(currentTopic && effectiveTopics.length > 0);
             </ul>
           )}
           <div class="sidebar-filter sidebar-filter-row">
-            <div class="sidebar-filter-wrap">
+            <div class="sidebar-filter-wrap search-field search-field-wrap" data-search-size="sm">
               <svg
-                class="sidebar-filter-icon"
+                class="search-field-icon"
                 aria-hidden="true"
-                width="14"
-                height="14"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
@@ -175,54 +174,55 @@ const hasTopicsList = Boolean(currentTopic && effectiveTopics.length > 0);
                 <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
               </svg>
               <label class="sr-only" for="sidebar-filter-input">
-                Filter sidebar
+                {Astro.locals.t('catalogSearch.sidebarLabel')}
               </label>
               <input
-                type="text"
+                type="search"
+                name="sidebar-search"
+                spellcheck="false"
                 id="sidebar-filter-input"
-                class="sidebar-filter-input"
-                placeholder="Filter sidebar…"
+                class="sidebar-filter-input search-field-input"
+                placeholder={Astro.locals.t('catalogSearch.sidebarPlaceholder')}
                 autocomplete="off"
-                aria-label="Filter sidebar entries"
+                aria-label={Astro.locals.t('catalogSearch.sidebarLabel')}
               />
               <button
                 type="button"
                 id="sidebar-filter-clear"
-                class="sidebar-filter-clear"
-                aria-label="Clear filter"
+                class="sidebar-filter-clear search-field-clear"
+                aria-label={Astro.locals.t('catalogSearch.clearSearch')}
                 hidden
               >
                 <svg
                   aria-hidden="true"
-                  width="14"
-                  height="14"
                   viewBox="0 0 24 24"
                   fill="none"
                   stroke="currentColor"
-                  stroke-width="2.5"
+                  stroke-width="2"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                 >
-                  <line x1="18" y1="6" x2="6" y2="18" />
-                  <line x1="6" y1="6" x2="18" y2="18" />
+                  <path d="m18 6-12 12M6 6l12 12" />
                 </svg>
               </button>
             </div>
-            <div id="sidebar-filter-status" class="sr-only" aria-live="polite" />
+            <div id="sidebar-filter-status" class="sr-only" role="status" aria-live="polite" aria-atomic="true" data-count-template={Astro.locals.t('catalogSearch.sidebarCount')} />
           </div>
           <div
-            class="sidebar-filter-empty"
+            class="sidebar-filter-empty search-empty"
             id="sidebar-filter-empty"
+            data-message={Astro.locals.t('catalogSearch.sidebarEmpty')}
             aria-labelledby="sidebar-filter-empty-copy"
             hidden
           >
-            <p class="sidebar-filter-empty-copy" id="sidebar-filter-empty-copy" />
+            <p class="sidebar-filter-empty-copy search-empty-title" id="sidebar-filter-empty-copy" />
+            <p class="search-empty-hint">{Astro.locals.t('catalogSearch.queryGuidance')}</p>
             <button
               type="button"
-              class="sidebar-filter-empty-action"
+              class="sidebar-filter-empty-action search-action"
               id="sidebar-filter-empty-action"
             >
-              Clear filter
+              {Astro.locals.t('catalogSearch.clearSearch')}
             </button>
           </div>
         </div>
@@ -266,12 +266,10 @@ const hasTopicsList = Boolean(currentTopic && effectiveTopics.length > 0);
             ))}
           </ul>
           <div class="sidebar-filter sidebar-filter-row">
-            <div class="sidebar-filter-wrap">
+            <div class="sidebar-filter-wrap search-field search-field-wrap" data-search-size="sm">
               <svg
-                class="sidebar-filter-icon"
+                class="search-field-icon"
                 aria-hidden="true"
-                width="14"
-                height="14"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
@@ -282,54 +280,55 @@ const hasTopicsList = Boolean(currentTopic && effectiveTopics.length > 0);
                 <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
               </svg>
               <label class="sr-only" for="sidebar-filter-input">
-                Filter sidebar
+                {Astro.locals.t('catalogSearch.sidebarLabel')}
               </label>
               <input
-                type="text"
+                type="search"
+                name="sidebar-search"
+                spellcheck="false"
                 id="sidebar-filter-input"
-                class="sidebar-filter-input"
-                placeholder="Filter sidebar…"
+                class="sidebar-filter-input search-field-input"
+                placeholder={Astro.locals.t('catalogSearch.sidebarPlaceholder')}
                 autocomplete="off"
-                aria-label="Filter sidebar entries"
+                aria-label={Astro.locals.t('catalogSearch.sidebarLabel')}
               />
               <button
                 type="button"
                 id="sidebar-filter-clear"
-                class="sidebar-filter-clear"
-                aria-label="Clear filter"
+                class="sidebar-filter-clear search-field-clear"
+                aria-label={Astro.locals.t('catalogSearch.clearSearch')}
                 hidden
               >
                 <svg
                   aria-hidden="true"
-                  width="14"
-                  height="14"
                   viewBox="0 0 24 24"
                   fill="none"
                   stroke="currentColor"
-                  stroke-width="2.5"
+                  stroke-width="2"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                 >
-                  <line x1="18" y1="6" x2="6" y2="18" />
-                  <line x1="6" y1="6" x2="18" y2="18" />
+                  <path d="m18 6-12 12M6 6l12 12" />
                 </svg>
               </button>
             </div>
-            <div id="sidebar-filter-status" class="sr-only" aria-live="polite" />
+            <div id="sidebar-filter-status" class="sr-only" role="status" aria-live="polite" aria-atomic="true" data-count-template={Astro.locals.t('catalogSearch.sidebarCount')} />
           </div>
           <div
-            class="sidebar-filter-empty"
+            class="sidebar-filter-empty search-empty"
             id="sidebar-filter-empty"
+            data-message={Astro.locals.t('catalogSearch.sidebarEmpty')}
             aria-labelledby="sidebar-filter-empty-copy"
             hidden
           >
-            <p class="sidebar-filter-empty-copy" id="sidebar-filter-empty-copy" />
+            <p class="sidebar-filter-empty-copy search-empty-title" id="sidebar-filter-empty-copy" />
+            <p class="search-empty-hint">{Astro.locals.t('catalogSearch.queryGuidance')}</p>
             <button
               type="button"
-              class="sidebar-filter-empty-action"
+              class="sidebar-filter-empty-action search-action"
               id="sidebar-filter-empty-action"
             >
-              Clear filter
+              {Astro.locals.t('catalogSearch.clearSearch')}
             </button>
           </div>
         </div>
@@ -519,26 +518,6 @@ const hasTopicsList = Boolean(currentTopic && effectiveTopics.length > 0);
       transparent
     );
     --sidebar-dropdown-code-color: var(--sl-color-text);
-    --sidebar-empty-bg: color-mix(
-      in srgb,
-      var(--sl-color-bg-sidebar) 90%,
-      var(--sl-color-text-accent) 10%
-    );
-    --sidebar-empty-border: color-mix(
-      in srgb,
-      var(--sl-color-gray-4) 72%,
-      var(--sl-color-text-accent) 28%
-    );
-    --sidebar-empty-action-bg-hover: color-mix(
-      in srgb,
-      var(--sl-color-text-accent) 12%,
-      transparent
-    );
-    --sidebar-empty-action-border: color-mix(
-      in srgb,
-      var(--sl-color-gray-4) 76%,
-      var(--sl-color-text-accent) 24%
-    );
     --sidebar-control-pad-x: 0.8rem;
     --sidebar-control-icon-size: 1.25rem;
     --sidebar-control-gap: 0.75rem;
@@ -851,148 +830,25 @@ const hasTopicsList = Boolean(currentTopic && effectiveTopics.length > 0);
   }
 
   .sidebar-filter-wrap {
+    --search-control-bg: var(--sidebar-dropdown-trigger-bg);
     position: relative;
     display: flex;
     align-items: center;
   }
 
-  .sidebar-filter-icon {
-    position: absolute;
-    left: var(--sidebar-control-pad-x);
-    width: var(--sidebar-control-icon-size);
-    height: var(--sidebar-control-icon-size);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--sidebar-dropdown-muted);
-    pointer-events: none;
-    flex-shrink: 0;
-  }
-
-  .sidebar-filter-input {
-    width: 100%;
-    min-height: var(--sidebar-control-height);
-    padding: 0.45rem 2rem 0.45rem
-      calc(
-        var(--sidebar-control-pad-x) + var(--sidebar-control-icon-size) + var(--sidebar-control-gap)
-      );
-    background: var(--sidebar-dropdown-trigger-bg);
-    color: var(--sl-color-text);
-    font-size: var(--sl-text-sm, 0.875rem);
-    border: 1px solid var(--sidebar-dropdown-trigger-border);
-    border-radius: 0.5rem;
-    line-height: 1.4;
-    box-sizing: border-box;
-    transition:
-      border-color 0.15s,
-      box-shadow 0.15s,
-      background-color 0.15s,
-      color 0.15s;
-  }
-
-  .sidebar-filter-input::placeholder {
-    color: var(--sidebar-dropdown-muted);
-    opacity: 1;
-  }
-
-  .sidebar-filter-input:hover {
-    border-color: var(--sl-color-gray-4);
-    box-shadow: var(--sl-shadow-md);
-  }
-
-  .sidebar-filter-input:focus {
-    outline: none;
-    border-color: var(--sl-color-text-accent);
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sl-color-text-accent) 20%, transparent);
-  }
-
-  .sidebar-filter-clear {
-    position: absolute;
-    right: 0.25rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.5rem;
-    height: 1.5rem;
-    padding: 0;
-    background: none;
-    border: none;
-    border-radius: 0.25rem;
-    color: var(--sl-color-gray-3);
-    cursor: pointer;
-    transition:
-      color 0.15s,
-      background 0.15s;
-  }
-
-  .sidebar-filter-clear:hover {
-    color: var(--sl-color-white);
-    background: color-mix(in srgb, var(--sl-color-gray-4) 40%, transparent);
-  }
-
   .sidebar-filter-clear[hidden] {
     display: none;
   }
 
   .sidebar-filter-empty {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    justify-content: flex-start;
-    gap: 0.75rem;
     margin-top: 0.35rem;
     margin-bottom: 0.75rem;
-    padding: 0.7rem 0.8rem;
-    border: 1px solid var(--sidebar-empty-border);
-    border-radius: 0.5rem;
-    background: var(--sidebar-empty-bg);
-    color: var(--sl-color-text);
   }
 
   .sidebar-filter-empty[hidden] {
     display: none;
   }
 
-  .sidebar-filter-empty-copy {
-    flex: 1 1 12rem;
-    margin: 0;
-    color: var(--sl-color-text);
-    font-size: var(--sl-text-sm, 0.875rem);
-    line-height: 1.45;
-  }
-
-  .sidebar-filter-empty-action {
-    flex-shrink: 0;
-    align-self: center;
-    padding: 0.42rem 0.7rem;
-    border: 1px solid var(--sidebar-empty-action-border);
-    border-radius: 0.375rem;
-    background: transparent;
-    color: var(--sl-color-text-accent);
-    font-size: var(--sl-text-xs, 0.75rem);
-    font-weight: 700;
-    cursor: pointer;
-    transition:
-      background-color 0.15s ease,
-      border-color 0.15s ease,
-      color 0.15s ease;
-  }
-
-  .sidebar-filter-empty-action:hover,
-  .sidebar-filter-empty-action:focus-visible {
-    background: var(--sidebar-empty-action-bg-hover);
-    border-color: color-mix(
-      in srgb,
-      var(--sl-color-text-accent) 40%,
-      var(--sidebar-empty-action-border)
-    );
-    outline: none;
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sl-color-text-accent) 16%, transparent);
-  }
-
-  :global([data-theme='light']) .sidebar-filter-input {
-    border-color: var(--sl-color-gray-5);
-  }
   :global([data-theme='light']) .topics-sidebar {
     --sidebar-dropdown-trigger-bg: var(--sl-color-bg);
     --sidebar-dropdown-trigger-border: var(--sl-color-gray-5);
@@ -1012,22 +868,6 @@ const hasTopicsList = Boolean(currentTopic && effectiveTopics.length > 0);
     );
     --sidebar-dropdown-code-border: color-mix(in srgb, var(--sl-color-gray-6) 82%, transparent);
     --sidebar-dropdown-code-color: var(--aspire-color-muted-strong, var(--sl-color-gray-2));
-    --sidebar-empty-bg: color-mix(in srgb, var(--sl-color-bg) 92%, var(--aspire-color-primary) 8%);
-    --sidebar-empty-border: color-mix(
-      in srgb,
-      var(--sl-color-gray-5) 72%,
-      var(--aspire-color-primary) 28%
-    );
-    --sidebar-empty-action-bg-hover: color-mix(in srgb, var(--aspire-color-primary) 10%, white);
-    --sidebar-empty-action-border: color-mix(
-      in srgb,
-      var(--sl-color-gray-5) 74%,
-      var(--aspire-color-primary) 26%
-    );
-  }
-  :global([data-theme='light']) .sidebar-filter-clear:hover {
-    color: var(--sl-color-white);
-    background: color-mix(in srgb, var(--sl-color-gray-5) 60%, transparent);
   }
   /* Sidebar filter highlight */
   :global(mark.sb-hl) {
@@ -1325,6 +1165,7 @@ const hasTopicsList = Boolean(currentTopic && effectiveTopics.length > 0);
    * Filters sidebar entries by matching their label text against user input.
    */
   class SidebarFilterController {
+    private controller = new AbortController();
     private input: HTMLInputElement | null = null;
     private clearBtn: HTMLButtonElement | null = null;
     private statusEl: HTMLElement | null = null;
@@ -1346,6 +1187,12 @@ const hasTopicsList = Boolean(currentTopic && effectiveTopics.length > 0);
       if (!container) return;
       if (container.dataset.filterBound === 'true') return;
       container.dataset.filterBound = 'true';
+      const { signal } = this.controller;
+      document.addEventListener('astro:before-swap', () => {
+        this.controller.abort();
+        if (this.debounceTimer) clearTimeout(this.debounceTimer);
+        delete container.dataset.filterBound;
+      }, { once: true });
 
       this.input = container.querySelector('#sidebar-filter-input');
       this.clearBtn = container.querySelector('#sidebar-filter-clear');
@@ -1361,23 +1208,23 @@ const hasTopicsList = Boolean(currentTopic && effectiveTopics.length > 0);
       }
       if (!this.input) return;
 
-      this.input.addEventListener('input', () => this.handleInput());
+      this.input.addEventListener('input', () => this.handleInput(), { signal });
       this.input.addEventListener('keydown', (e) => {
         if (e.key === 'Escape') {
           this.clear();
-          this.input?.blur();
+          this.input?.focus();
         }
-      });
+      }, { signal });
 
       this.clearBtn?.addEventListener('click', () => {
         this.clear();
         this.input?.focus();
-      });
+      }, { signal });
 
       this.emptyActionBtn?.addEventListener('click', () => {
         this.clear();
         this.input?.focus();
-      });
+      }, { signal });
     }
 
     private handleInput(): void {
@@ -1389,11 +1236,13 @@ const hasTopicsList = Boolean(currentTopic && effectiveTopics.length > 0);
     }
 
     private clear(): void {
+      if (this.debounceTimer) clearTimeout(this.debounceTimer);
       if (this.input) this.input.value = '';
       this.applyFilter();
     }
 
     private applyFilter(): void {
+      if (this.controller.signal.aborted) return;
       const query = this.input?.value.trim().toLowerCase() ?? '';
       const hasQuery = query.length > 0;
 
@@ -1407,7 +1256,8 @@ const hasTopicsList = Boolean(currentTopic && effectiveTopics.length > 0);
 
       if (!hasQuery) {
         this.resetAll(topList);
-        this.updateStatus('');
+        this.updateStatus((this.statusEl?.dataset.countTemplate ?? '')
+          .replace('{{count}}', String(topList.querySelectorAll('a').length)));
         this.updateEmptyState(false, '');
         return;
       }
@@ -1420,10 +1270,9 @@ const hasTopicsList = Boolean(currentTopic && effectiveTopics.length > 0);
       }
 
       if (visibleCount === 0) {
-        this.updateStatus('No matching sidebar article titles');
         this.updateEmptyState(true, this.input?.value.trim() ?? '');
       } else {
-        this.updateStatus(`${visibleCount} matching ${visibleCount === 1 ? 'entry' : 'entries'}`);
+        this.updateStatus((this.statusEl?.dataset.countTemplate ?? '').replace('{{count}}', String(visibleCount)));
         this.updateEmptyState(false, '');
       }
     }
@@ -1610,9 +1459,8 @@ const hasTopicsList = Boolean(currentTopic && effectiveTopics.length > 0);
         return;
       }
 
-      const message = query
-        ? `No sidebar article titles match "${query}".`
-        : 'No matching sidebar article titles.';
+      const title = this.emptyEl.dataset.message ?? '';
+      const message = query ? `${title} — “${query}”.` : title;
       this.emptyCopyEl.textContent = message;
       // Also surface the message through the polite live region so screen
       // readers hear *why* the list is empty, not just "0 matches".
diff --git a/src/frontend/src/content/docs/community/contributor-guide.mdx b/src/frontend/src/content/docs/community/contributor-guide.mdx
index aaa211857..d638d64da 100644
--- a/src/frontend/src/content/docs/community/contributor-guide.mdx
+++ b/src/frontend/src/content/docs/community/contributor-guide.mdx
@@ -864,6 +864,14 @@ Glossary definitions and examples live in `src/content/glossary/`. Follow an exi
 
 To refresh the official blog archive used by Browse, run `pnpm update:blogs` from `src/frontend`. The Hub's featured posts remain curated separately in `src/data/dev-hub.ts`.
 
+When changing interactive search components, reuse `SearchField` and the shared search styles rather than overriding input heights, typography, colors, or clear icons per page. Keep contextual layouts, but use the same full-size input treatment; compact navigation controls can use the shared small variant.
+
+Empty-state recovery should preserve useful search intent: clear filters when that restores matches for the query, otherwise clear the query when the selected filters still have results. Reset both only when neither change alone restores results. Use the existing matching rules and facet defaults, preserve sorting, and keep unavailable data distinct from zero matches.
+
+Show one recovery action in the empty state, without competing toolbar reset links. When results exist, show one toolbar action: **Clear filters** for filters alone, or **Reset all** for a query combined with filters. A query alone only needs the input's clear icon. Keep individual filter controls editable in every state.
+
+Test hub controls through client navigation as well as direct page loads. Astro removes `noscript` elements from incoming pages, so deferred resource images use inert templates with separate no-JavaScript markup. Preserve router-owned history state and dispose listeners when leaving a page.
+
 ## 🆘 Getting help
 
 - **Issues** - Report bugs or request features via [GitHub Issues](https://github.com/microsoft/aspire.dev/issues)
diff --git a/src/frontend/src/content/i18n/en.json b/src/frontend/src/content/i18n/en.json
index 603483371..752b45cac 100644
--- a/src/frontend/src/content/i18n/en.json
+++ b/src/frontend/src/content/i18n/en.json
@@ -1,4 +1,39 @@
 {
+  "catalogSearch": {
+    "clearSearch": "Clear search",
+    "clearFilters": "Clear filters",
+    "resetAll": "Reset all",
+    "guidance": "Try another search or clear the active filters.",
+    "queryGuidance": "Try another term, or clear your search to browse all results.",
+    "preserveFiltersGuidance": "Try another term, or clear your search to browse results matching your selected filters.",
+    "preserveQueryGuidance": "Clear your filters to see results matching your search.",
+    "filtersGuidance": "Clear your filters to browse all results.",
+    "resetGuidance": "Try another term or reset your search and filters to browse all results.",
+    "activeFilters": "Active filters",
+    "excludedFilter": "Excluded: {{filter}}",
+    "integrationsQueryEmpty": "No integrations match “{{query}}”",
+    "integrationsFilteredQueryEmpty": "No integrations match “{{query}}” with your selected filters",
+    "integrationsEmpty": "No matching integrations",
+    "integrationsUnavailable": "No integrations available.",
+    "integrationsCount": "{{count}} of {{total}} integrations",
+    "samplesLabel": "Search samples",
+    "samplesPlaceholder": "Search samples…",
+    "samplesEmpty": "No matching samples",
+    "samplesQueryEmpty": "No samples match “{{query}}”",
+    "samplesFilteredQueryEmpty": "No samples match “{{query}}” with your selected filters",
+    "samplesUnavailable": "No samples available.",
+    "samplesCount": "{{count}} of {{total}} samples",
+    "sessionsLabel": "Search sessions",
+    "sessionsPlaceholder": "Search sessions or speakers…",
+    "sessionsEmpty": "No matching sessions",
+    "sessionsQueryEmpty": "No sessions match “{{query}}”",
+    "sessionsUnavailable": "No sessions available.",
+    "sessionsCount": "{{count}} of {{total}} sessions",
+    "sidebarLabel": "Search sidebar article titles",
+    "sidebarPlaceholder": "Filter by title...",
+    "sidebarEmpty": "No matching sidebar article titles",
+    "sidebarCount": "{{count}} matching entries"
+  },
   "landing": {
     "freeAndOSS": "Free and open source",
     "aspirePromise": "Aspire is a developer-first, always-free, open-source platform. Join a thriving community and help shape the future of modern development.",
diff --git a/src/frontend/src/pages/hub/browse/index.astro b/src/frontend/src/pages/hub/browse/index.astro
index 7be4b371c..121724aec 100644
--- a/src/frontend/src/pages/hub/browse/index.astro
+++ b/src/frontend/src/pages/hub/browse/index.astro
@@ -1,11 +1,11 @@
 ---
-import DevLayout from '../../../components/dev-center/DevLayout.astro';
+import HubLayout from '../../../components/dev-center/HubLayout.astro';
 import ResourceBrowser from '../../../components/dev-center/ResourceBrowser.astro';
 import { getResourceCatalog } from '../../../utils/dev-center/catalog';
 
 const resources = await getResourceCatalog();
 ---
 
-<DevLayout title="Browse resources" description="Explore the Aspire library by topic, format, or technology." showDescription={false} pageActions={false} pagefind={false}>
+<HubLayout title="Browse resources" description="Explore the Aspire library by topic, format, or technology." showDescription={false} pageActions={false} pagefind={false}>
   <ResourceBrowser resources={resources} />
-</DevLayout>
+</HubLayout>
diff --git a/src/frontend/src/pages/hub/glossary/[term].astro b/src/frontend/src/pages/hub/glossary/[term].astro
index b5fbe1c17..481ab96c3 100644
--- a/src/frontend/src/pages/hub/glossary/[term].astro
+++ b/src/frontend/src/pages/hub/glossary/[term].astro
@@ -1,7 +1,7 @@
 ---
 import { getCollection, render } from 'astro:content';
 import { Icon } from '@astrojs/starlight/components';
-import DevLayout from '@components/dev-center/DevLayout.astro';
+import HubLayout from '@components/dev-center/HubLayout.astro';
 import Breadcrumb from '@components/Breadcrumb.astro';
 import LearnMore from '@components/LearnMore.astro';
 import { glossaryHref, sortGlossary } from '../../../utils/dev-center/glossary';
@@ -23,7 +23,7 @@ const { term, related, prev, next } = Astro.props;
 const { Content } = await render(term);
 ---
 
-<DevLayout title={term.data.title} description={term.data.description} layout="article" pagefind={true} {prev} {next}>
+<HubLayout title={term.data.title} description={term.data.description} layout="article" pagefind={true} {prev} {next}>
   <div class="dev-breadcrumbs">
     <Breadcrumb crumbs={[
       { label: 'Dev Hub', href: '/hub/', icon: 'dev-hub' },
@@ -78,7 +78,7 @@ const { Content } = await render(term);
       </aside>
     )}
   </article>
-</DevLayout>
+</HubLayout>
 
 <script>
   import { glossaryReturnHref } from '../../../utils/dev-center/glossary';
diff --git a/src/frontend/src/pages/hub/glossary/index.astro b/src/frontend/src/pages/hub/glossary/index.astro
index 10abbe42d..9e06f5ed3 100644
--- a/src/frontend/src/pages/hub/glossary/index.astro
+++ b/src/frontend/src/pages/hub/glossary/index.astro
@@ -1,10 +1,10 @@
 ---
 import { getCollection } from 'astro:content';
-import DevLayout from '../../../components/dev-center/DevLayout.astro';
+import HubLayout from '../../../components/dev-center/HubLayout.astro';
 import GlossaryBrowser from '../../../components/dev-center/GlossaryBrowser.astro';
 const terms = await getCollection('glossary');
 ---
 
-<DevLayout title="Aspire glossary" description="Search for a term, or filter by topic and first letter." pageActions={false} pagefind={false}>
+<HubLayout title="Aspire glossary" description="Search for a term, or filter by topic and first letter." showDescription={false} pageActions={false} pagefind={false}>
   <GlossaryBrowser terms={terms} />
-</DevLayout>
+</HubLayout>
diff --git a/src/frontend/src/pages/hub/index.astro b/src/frontend/src/pages/hub/index.astro
index 246e93923..4e56ebe74 100644
--- a/src/frontend/src/pages/hub/index.astro
+++ b/src/frontend/src/pages/hub/index.astro
@@ -1,5 +1,5 @@
 ---
-import DevLayout from '@components/dev-center/DevLayout.astro';
+import HubLayout from '@components/dev-center/HubLayout.astro';
 import '../../styles/link-underline.css';
 import { Icon } from '@astrojs/starlight/components';
 import ThemeImage from '@components/ThemeImage.astro';
@@ -43,9 +43,9 @@ const onboardingIcons = ['open-book', 'puzzle', 'rocket', 'notes'] as const;
 const blogDateFormat = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium', timeZone: 'UTC' });
 ---
 
-<DevLayout title={devTitle} description={devDescription} showDescription={false} pageActions={false} pagefind={false}>
+<HubLayout title={devTitle} description={devDescription} showDescription={false} pageActions={false} pagefind={false}>
   <div class="dev-home not-content">
-    <section class="hub-intro" aria-label="Find resources and get started">
+    <section class="hub-intro hub-grain" aria-label="Find resources and get started">
       <div class="dev-discovery">
         <p class="dev-description">{devDescription}</p>
         <button class="dev-search" type="button" data-open-site-search aria-haspopup="dialog" disabled>
@@ -248,4 +248,4 @@ const blogDateFormat = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium', t
       </ul>
     </section>
   </div>
-</DevLayout>
+</HubLayout>
diff --git a/src/frontend/src/pages/reference/api/_search-presentation.ts b/src/frontend/src/pages/reference/api/_search-presentation.ts
new file mode 100644
index 000000000..d74bed54b
--- /dev/null
+++ b/src/frontend/src/pages/reference/api/_search-presentation.ts
@@ -0,0 +1,97 @@
+import { createSearchEmptyState, searchRecoveryAction } from '@components/search/search-empty-state';
+
+/** A corrupt/unavailable embedded index is not a valid zero-result response. */
+export function withApiSearchFallback(mount: (root: HTMLElement, signal: AbortSignal) => void) {
+  return (root: HTMLElement, signal: AbortSignal) => {
+    const controller = new AbortController();
+    signal.addEventListener('abort', () => controller.abort(), { once: true });
+    try {
+      mount(root, controller.signal);
+    } catch (error) {
+      controller.abort();
+      console.error('API search unavailable', error);
+      const results = root.querySelector<HTMLElement>('[id$="-search-results"]');
+      if (!results) return;
+      results.style.display = '';
+      results.replaceChildren(createSearchEmptyState({
+        title: 'Search unavailable',
+        hint: 'Reload this page to try again. You can still browse the API reference below.',
+        action: { label: 'Reload page', run: () => { if (!signal.aborted) window.location.reload(); } },
+      }));
+      root.querySelectorAll<HTMLElement>('[id$="-search-status"], [id$="-search-count"]')
+        .forEach(element => { element.textContent = 'Search unavailable'; });
+      root.querySelectorAll<HTMLInputElement | HTMLButtonElement>('.inpage-search input, .inpage-search button')
+        .forEach(element => { if (!results.contains(element)) element.disabled = true; });
+    }
+  };
+}
+
+/** Shared recovery presentation; each API controller still owns matching and facet defaults. */
+export class ApiSearchPresentation {
+  private reset: HTMLButtonElement | null;
+  private clearFilters: HTMLButtonElement;
+
+  constructor(
+    root: HTMLElement,
+    private input: HTMLInputElement,
+    private clearQuery: () => void,
+    private signal: AbortSignal,
+  ) {
+    this.reset = root.querySelector('[id$="-reset-all"]');
+    this.clearFilters = root.querySelector('[id$="-clear-filters"]')!;
+    this.reset?.addEventListener('click', () => this.recover(true, true), { signal });
+  }
+
+  update(hasFilters: boolean, hasResults = true): void {
+    const hasQuery = !!this.input.value.trim();
+    this.clearFilters.style.display = hasResults && hasFilters && !hasQuery ? '' : 'none';
+    if (this.reset) this.reset.style.display = hasResults && hasFilters && hasQuery ? '' : 'none';
+  }
+
+  renderEmpty(
+    container: HTMLElement,
+    hasFilters: boolean,
+    emptyDataset: boolean,
+    counts: { withoutQuery: number; withoutFilters: number },
+    kinds: ReadonlySet<string>,
+    versions: ReadonlySet<string> | null = null,
+  ): void {
+    this.update(hasFilters, false);
+    const query = this.input.value.trim();
+    const hasQuery = !!query;
+    const action = searchRecoveryAction(hasQuery, hasFilters, counts);
+    const filterLabels = [
+      ...[...kinds].map(kind => `Kind: ${kind}`),
+      ...(versions !== null
+        ? versions.size ? [...versions].map(version => `Version: ${version}`) : ['Versions: none selected']
+        : []),
+    ];
+    const guidance = action === 'Clear filters'
+      ? 'Restore the default filters and keep your search text.'
+      : action === 'Clear search'
+        ? `Clear your search text${hasFilters ? ' and keep the selected filters' : ''}.`
+        : 'Neither change alone returns results. Clear your search text and restore the default filters.';
+    container.replaceChildren(createSearchEmptyState({
+      title: emptyDataset
+        ? 'No API entries available'
+        : hasQuery
+          ? `No API entries match "${query}"${hasFilters ? ' with these filters' : ''}`
+          : 'No API entries match these filters',
+      hint: emptyDataset
+        ? 'This API reference has no searchable entries.'
+        : guidance,
+      activeFilters: emptyDataset ? [] : filterLabels,
+      action: emptyDataset ? undefined : {
+        label: action,
+        run: () => this.recover(action !== 'Clear filters', action !== 'Clear search'),
+      },
+    }));
+  }
+
+  private recover(query: boolean, filters: boolean): void {
+    if (this.signal.aborted) return;
+    if (query) this.clearQuery();
+    if (filters) this.clearFilters.click();
+    this.input.focus();
+  }
+}
diff --git a/src/frontend/src/pages/reference/api/csharp/[package]/[type]/index.astro b/src/frontend/src/pages/reference/api/csharp/[package]/[type]/index.astro
index b62b035e8..0f0c8d095 100644
--- a/src/frontend/src/pages/reference/api/csharp/[package]/[type]/index.astro
+++ b/src/frontend/src/pages/reference/api/csharp/[package]/[type]/index.astro
@@ -347,7 +347,7 @@ const hasSearchableMembers = !isEnum && typeIndex.length >= 5;
         placeholder={`Search members of ${type.name}...`}
         kinds={typeSearchKinds}
         defaultStatsText={`${typeMemberCount.toLocaleString()} member${typeMemberCount !== 1 ? 's' : ''}`}
-        size="sm"
+        size="lg"
       />
     </div>
   )}
@@ -533,6 +533,7 @@ const hasSearchableMembers = !isEnum && typeIndex.length >= 5;
 <script>
   import { InpageSearchSync } from '@components/api-reference/inpage-search-sync';
   import { readApiSearchIndex, registerApiSearch } from '@components/api-reference/search-lifecycle';
+  import { ApiSearchPresentation, withApiSearchFallback } from '../../../_search-presentation';
 
   interface TypeIndexEntry {
     n: string;
@@ -573,6 +574,7 @@ const hasSearchableMembers = !isEnum && typeIndex.length >= 5;
     private lastTokens: string[] = [];
     private visibleCount = 0;
     private sync: InpageSearchSync;
+    private presentation: ApiSearchPresentation;
 
     constructor(root: HTMLElement, private signal: AbortSignal) {
       this.input = root.querySelector<HTMLInputElement>('#type-search-input')!;
@@ -585,6 +587,7 @@ const hasSearchableMembers = !isEnum && typeIndex.length >= 5;
       this.memberCount = Number(root.dataset.memberCount ?? 0);
 
       this.sync = new InpageSearchSync('type', () => this.clear(), root, signal);
+      this.presentation = new ApiSearchPresentation(root, this.input, () => this.clear(), signal);
       signal.addEventListener('abort', () => {
         if (this.debounceTimer !== null) clearTimeout(this.debounceTimer);
         this.highlightTimers.forEach(timer => clearTimeout(timer));
@@ -628,6 +631,7 @@ const hasSearchableMembers = !isEnum && typeIndex.length >= 5;
         this.clearFiltersBtn.style.display = 'none';
         this.syncUrl();
         this.applySearch();
+        this.input.focus();
       }, { signal: this.signal });
 
       // When clicking a search result, scroll to the anchor in the content below
@@ -647,7 +651,7 @@ const hasSearchableMembers = !isEnum && typeIndex.length >= 5;
             this.highlightTimers.delete(timer);
           }, 1500);
           this.highlightTimers.add(timer);
-          history.replaceState(null, '', href);
+          history.replaceState(history.state, '', href);
         }
       }, { signal: this.signal });
     }
@@ -656,17 +660,19 @@ const hasSearchableMembers = !isEnum && typeIndex.length >= 5;
       this.input.value = '';
       this.sync.updateClearButton();
       this.syncUrl();
-      this.showContent();
+      this.applySearch();
+      this.input.focus();
     }
 
     private showContent(): void {
-      if (this.activeKinds.size > 0) {
+      if (this.activeKinds.size > 0 || this.index.length === 0) {
         this.search('');
         return;
       }
       this.resultsEl.style.display = 'none';
       this.resultsEl.innerHTML = '';
       this.countEl.textContent = `${fmtNum(this.memberCount)} member${this.memberCount !== 1 ? 's' : ''}`;
+      this.status.textContent = this.countEl.textContent;
     }
 
     private handleInput(): void {
@@ -706,12 +712,12 @@ const hasSearchableMembers = !isEnum && typeIndex.length >= 5;
         this.clearFiltersBtn.style.display = '';
       }
 
-      if (q || kinds.size > 0) {
-        this.applySearch();
-      }
+      this.applySearch();
     }
 
     private applySearch(): void {
+      if (this.debounceTimer !== null) clearTimeout(this.debounceTimer);
+      this.presentation.update(this.activeKinds.size > 0);
       const q = this.input.value.trim();
       if (!q && this.activeKinds.size === 0) {
         this.showContent();
@@ -720,15 +726,15 @@ const hasSearchableMembers = !isEnum && typeIndex.length >= 5;
       this.search(q);
     }
 
-    private search(query: string): void {
+    private findMatches(query: string, kinds = this.activeKinds) {
       const tokens = query.toLowerCase().split(/\s+/).filter(Boolean);
-      const hasKindFilter = this.activeKinds.size > 0;
+      const hasKindFilter = kinds.size > 0;
 
       type Scored = { entry: TypeIndexEntry; score: number };
       const scored: Scored[] = [];
 
       for (const entry of this.index) {
-        if (hasKindFilter && !this.activeKinds.has(entry.k)) continue;
+        if (hasKindFilter && !kinds.has(entry.k)) continue;
 
         if (tokens.length === 0) {
           scored.push({ entry, score: 50 });
@@ -762,6 +768,13 @@ const hasSearchableMembers = !isEnum && typeIndex.length >= 5;
         if (score > 0) scored.push({ entry, score });
       }
 
+      return scored;
+    }
+
+    private search(query: string): void {
+      const tokens = query.toLowerCase().split(/\s+/).filter(Boolean);
+      const hasKindFilter = this.activeKinds.size > 0;
+      const scored = this.findMatches(query);
       scored.sort((a, b) => b.score - a.score || a.entry.n.localeCompare(b.entry.n));
 
       this.lastScored = scored;
@@ -773,14 +786,10 @@ const hasSearchableMembers = !isEnum && typeIndex.length >= 5;
       this.resultsEl.style.display = '';
 
       if (total === 0) {
-        const hint = query
-          ? `No results for "<strong>${this.esc(query)}</strong>"`
-          : 'No results match the selected filters';
-        this.resultsEl.innerHTML = `
-          <div class="api-search-empty">
-            <p>${hint}</p>
-            <p class="api-search-empty-hint">Try a different name or keyword.</p>
-          </div>`;
+        this.presentation.renderEmpty(this.resultsEl, hasKindFilter, this.index.length === 0, {
+          withoutQuery: this.findMatches('').length,
+          withoutFilters: this.findMatches(query, new Set()).length,
+        }, this.activeKinds);
         this.countEl.textContent = '0 results';
         this.status.textContent = 'No results';
         return;
@@ -874,7 +883,7 @@ const hasSearchableMembers = !isEnum && typeIndex.length >= 5;
     }
   }
 
-  registerApiSearch('csharp', 'type', (root, signal) => new TypeSearchController(root, signal));
+  registerApiSearch('csharp', 'type', withApiSearchFallback((root, signal) => new TypeSearchController(root, signal)));
 </script>
 
 <style>
diff --git a/src/frontend/src/pages/reference/api/csharp/[package]/index.astro b/src/frontend/src/pages/reference/api/csharp/[package]/index.astro
index 30e67d451..fe2d5c85e 100644
--- a/src/frontend/src/pages/reference/api/csharp/[package]/index.astro
+++ b/src/frontend/src/pages/reference/api/csharp/[package]/index.astro
@@ -217,7 +217,7 @@ const packageSourceHref = pkg.package.sourceRepository && pkg.package.sourceComm
       placeholder={`Search types, methods, properties in ${pkg.package.name}...`}
       kinds={allKinds}
       defaultStatsText={`${validTypes.length.toLocaleString()} types and ${memberCount.toLocaleString()} members`}
-      size="sm"
+      size="lg"
     />
   </div>
 
@@ -256,6 +256,7 @@ const packageSourceHref = pkg.package.sourceRepository && pkg.package.sourceComm
 <script>
   import { InpageSearchSync } from '@components/api-reference/inpage-search-sync';
   import { readApiSearchIndex, registerApiSearch } from '@components/api-reference/search-lifecycle';
+  import { ApiSearchPresentation, withApiSearchFallback } from '../../_search-presentation';
 
   interface PkgIndexEntry {
     n: string;
@@ -323,6 +324,7 @@ const packageSourceHref = pkg.package.sourceRepository && pkg.package.sourceComm
     private lastTokens: string[] = [];
     private visibleCount = 0;
     private sync: InpageSearchSync;
+    private presentation: ApiSearchPresentation;
 
     constructor(root: HTMLElement, private signal: AbortSignal) {
       this.input = root.querySelector<HTMLInputElement>('#pkg-search-input')!;
@@ -339,6 +341,7 @@ const packageSourceHref = pkg.package.sourceRepository && pkg.package.sourceComm
       this.memberCount = Number(root.dataset.memberCount ?? 0);
 
       this.sync = new InpageSearchSync('pkg', () => this.clear(), root, signal);
+      this.presentation = new ApiSearchPresentation(root, this.input, () => this.clear(), signal);
       signal.addEventListener('abort', () => {
         if (this.debounceTimer !== null) clearTimeout(this.debounceTimer);
       }, { once: true });
@@ -380,6 +383,7 @@ const packageSourceHref = pkg.package.sourceRepository && pkg.package.sourceComm
         this.clearFiltersBtn.style.display = 'none';
         this.syncUrl();
         this.applySearch();
+        this.input.focus();
       }, { signal: this.signal });
     }
 
@@ -387,11 +391,12 @@ const packageSourceHref = pkg.package.sourceRepository && pkg.package.sourceComm
       this.input.value = '';
       this.sync.updateClearButton();
       this.syncUrl();
-      this.showNamespaces();
+      this.applySearch();
+      this.input.focus();
     }
 
     private showNamespaces(): void {
-      if (this.activeKinds.size > 0) {
+      if (this.activeKinds.size > 0 || this.index.length === 0) {
         this.search('');
         return;
       }
@@ -399,6 +404,7 @@ const packageSourceHref = pkg.package.sourceRepository && pkg.package.sourceComm
       this.resultsEl.innerHTML = '';
       this.nsList.style.display = '';
       this.countEl.textContent = `${fmtNum(this.typeCount)} types and ${fmtNum(this.memberCount)} members`;
+      this.status.textContent = this.countEl.textContent;
     }
 
     private handleInput(): void {
@@ -438,12 +444,12 @@ const packageSourceHref = pkg.package.sourceRepository && pkg.package.sourceComm
         this.clearFiltersBtn.style.display = '';
       }
 
-      if (q || kinds.size > 0) {
-        this.applySearch();
-      }
+      this.applySearch();
     }
 
     private applySearch(): void {
+      if (this.debounceTimer !== null) clearTimeout(this.debounceTimer);
+      this.presentation.update(this.activeKinds.size > 0);
       const q = this.input.value.trim();
       if (!q && this.activeKinds.size === 0) {
         this.showNamespaces();
@@ -452,15 +458,15 @@ const packageSourceHref = pkg.package.sourceRepository && pkg.package.sourceComm
       this.search(q);
     }
 
-    private search(query: string): void {
+    private findMatches(query: string, kinds = this.activeKinds) {
       const tokens = query.toLowerCase().split(/\s+/).filter(Boolean);
-      const hasKindFilter = this.activeKinds.size > 0;
+      const hasKindFilter = kinds.size > 0;
 
       type Scored = { entry: PkgIndexEntry; score: number };
       const scored: Scored[] = [];
 
       for (const entry of this.index) {
-        if (hasKindFilter && !this.activeKinds.has(entry.k)) continue;
+        if (hasKindFilter && !kinds.has(entry.k)) continue;
 
         if (tokens.length === 0) {
           scored.push({ entry, score: 50 });
@@ -501,6 +507,13 @@ const packageSourceHref = pkg.package.sourceRepository && pkg.package.sourceComm
         if (score > 0) scored.push({ entry, score });
       }
 
+      return scored;
+    }
+
+    private search(query: string): void {
+      const tokens = query.toLowerCase().split(/\s+/).filter(Boolean);
+      const hasKindFilter = this.activeKinds.size > 0;
+      const scored = this.findMatches(query);
       scored.sort((a, b) => b.score - a.score || a.entry.n.localeCompare(b.entry.n));
 
       this.lastScored = scored;
@@ -513,14 +526,10 @@ const packageSourceHref = pkg.package.sourceRepository && pkg.package.sourceComm
       this.resultsEl.style.display = '';
 
       if (total === 0) {
-        const hint = query
-          ? `No results for "<strong>${this.esc(query)}</strong>"`
-          : 'No results match the selected filters';
-        this.resultsEl.innerHTML = `
-          <div class="api-search-empty">
-            <p>${hint}</p>
-            <p class="api-search-empty-hint">Try a different name, namespace, or keyword.</p>
-          </div>`;
+        this.presentation.renderEmpty(this.resultsEl, hasKindFilter, this.index.length === 0, {
+          withoutQuery: this.findMatches('').length,
+          withoutFilters: this.findMatches(query, new Set()).length,
+        }, this.activeKinds);
         this.countEl.textContent = '0 results';
         this.status.textContent = 'No results';
         return;
@@ -617,7 +626,7 @@ const packageSourceHref = pkg.package.sourceRepository && pkg.package.sourceComm
     }
   }
 
-  registerApiSearch('csharp', 'package', (root, signal) => new PkgSearchController(root, signal));
+  registerApiSearch('csharp', 'package', withApiSearchFallback((root, signal) => new PkgSearchController(root, signal)));
 </script>
 
 <style>
diff --git a/src/frontend/src/pages/reference/api/csharp/index.astro b/src/frontend/src/pages/reference/api/csharp/index.astro
index b795b4d70..bca2b1f6a 100644
--- a/src/frontend/src/pages/reference/api/csharp/index.astro
+++ b/src/frontend/src/pages/reference/api/csharp/index.astro
@@ -170,6 +170,7 @@ const indexJson = JSON.stringify(index);
 <script>
   import { InpageSearchSync } from '@components/api-reference/inpage-search-sync';
   import { readApiSearchIndex, registerApiSearch } from '@components/api-reference/search-lifecycle';
+  import { ApiSearchPresentation, withApiSearchFallback } from '../_search-presentation';
 
   interface IndexEntry {
     n: string;
@@ -243,6 +244,7 @@ const indexJson = JSON.stringify(index);
     private lastTokens: string[] = [];
     private visibleCount = 0;
     private sync: InpageSearchSync;
+    private presentation: ApiSearchPresentation;
 
     constructor(private root: HTMLElement, private signal: AbortSignal) {
       this.input = root.querySelector<HTMLInputElement>('#api-search-input')!;
@@ -259,6 +261,7 @@ const indexJson = JSON.stringify(index);
       this.packageCount = new Set(this.index.map(e => e.p)).size;
 
       this.sync = new InpageSearchSync('api', () => this.clear(), root, signal);
+      this.presentation = new ApiSearchPresentation(root, this.input, () => this.clear(), signal);
       signal.addEventListener('abort', () => {
         if (this.debounceTimer !== null) clearTimeout(this.debounceTimer);
       }, { once: true });
@@ -270,7 +273,7 @@ const indexJson = JSON.stringify(index);
       this.applySearch();
 
       // Listen for version filter changes
-      document.addEventListener('version-filter-change', (e: Event) => {
+      root.addEventListener('version-filter-change', (e: Event) => {
         const detail = (e as CustomEvent).detail;
         if (detail.all) {
           this.activeVersions = null;
@@ -358,24 +361,16 @@ const indexJson = JSON.stringify(index);
           c.setAttribute('aria-pressed', 'false');
         });
 
-        // Reset version filter — check all checkboxes
+        // Let the version controller restore and persist its own defaults.
         this.activeVersions = null;
         const vfContainer = this.root.querySelector('.version-filter');
-        if (vfContainer) {
-          vfContainer.querySelectorAll<HTMLInputElement>('.version-filter-cb').forEach(cb => { cb.checked = true; });
-          const allCb = vfContainer.querySelector<HTMLInputElement>('.version-filter-cb[data-version="__all__"]');
-          if (allCb) { allCb.checked = true; allCb.indeterminate = false; }
-          const countEl = vfContainer.querySelector('[id$="-count"]');
-          const total = vfContainer.querySelectorAll('.version-filter-cb:not([data-version="__all__"])').length;
-          if (countEl) countEl.textContent = `${total}/${total}`;
-          const btn = vfContainer.querySelector('.version-filter-btn');
-          if (btn) { btn.classList.remove('filtered', 'none-selected'); }
-        }
+        vfContainer?.dispatchEvent(new Event('version-filter-reset'));
         this.filterPackageList();
 
         this.clearFiltersBtn.style.display = 'none';
         this.syncUrl();
         this.applySearch();
+        this.input.focus();
       }, { signal: this.signal });
     }
 
@@ -383,11 +378,12 @@ const indexJson = JSON.stringify(index);
       this.input.value = '';
       this.sync.updateClearButton();
       this.syncUrl();
-      this.showPackages();
+      this.applySearch();
+      this.input.focus();
     }
 
     private showPackages(): void {
-      if (this.activeKinds.size > 0) {
+      if (this.activeKinds.size > 0 || this.getVisiblePackageStats().packageCount === 0) {
         // Kind filters active but no text: show filtered results
         this.search('');
         return;
@@ -398,6 +394,7 @@ const indexJson = JSON.stringify(index);
 
       const stats = this.getVisiblePackageStats();
       this.countEl.textContent = `${fmtNum(stats.typeCount)} types and ${fmtNum(stats.memberCount)} members across ${fmtNum(stats.packageCount)} packages`;
+      this.status.textContent = this.countEl.textContent;
     }
 
     private handleInput(): void {
@@ -440,6 +437,8 @@ const indexJson = JSON.stringify(index);
     }
 
     private applySearch(): void {
+      if (this.debounceTimer !== null) clearTimeout(this.debounceTimer);
+      this.presentation.update(this.activeKinds.size > 0 || this.activeVersions !== null);
       const q = this.input.value.trim();
       if (!q && this.activeKinds.size === 0) {
         this.showPackages();
@@ -468,20 +467,20 @@ const indexJson = JSON.stringify(index);
       }
     }
 
-    private search(query: string): void {
+    private findMatches(query: string, kinds = this.activeKinds, versions = this.activeVersions) {
       const tokens = query.toLowerCase().split(/\s+/).filter(Boolean);
-      const hasKindFilter = this.activeKinds.size > 0;
-      const hasVersionFilter = this.activeVersions !== null;
+      const hasKindFilter = kinds.size > 0;
+      const hasVersionFilter = versions !== null;
 
       type Scored = { entry: IndexEntry; score: number };
       const scored: Scored[] = [];
 
       for (const entry of this.index) {
         // Kind filter
-        if (hasKindFilter && !this.activeKinds.has(entry.k)) continue;
+        if (hasKindFilter && !kinds.has(entry.k)) continue;
 
         // Version filter
-        if (hasVersionFilter && entry.v && !this.activeVersions!.has(entry.v)) continue;
+        if (hasVersionFilter && entry.v && !versions!.has(entry.v)) continue;
 
         // If no text query, include everything that passes kind filter
         if (tokens.length === 0) {
@@ -530,6 +529,14 @@ const indexJson = JSON.stringify(index);
         }
       }
 
+      return scored;
+    }
+
+    private search(query: string): void {
+      const tokens = query.toLowerCase().split(/\s+/).filter(Boolean);
+      const hasKindFilter = this.activeKinds.size > 0;
+      const hasVersionFilter = this.activeVersions !== null;
+      const scored = this.findMatches(query);
       scored.sort((a, b) => b.score - a.score || a.entry.n.localeCompare(b.entry.n));
 
       // Store for "Load more"
@@ -544,24 +551,11 @@ const indexJson = JSON.stringify(index);
       this.resultsEl.style.display = '';
 
       if (total === 0) {
-        const noVersions = this.activeVersions !== null && this.activeVersions.size === 0;
-        let hint: string;
-        let sub: string;
-        if (noVersions) {
-          hint = 'No versions selected';
-          sub = 'Select at least one version to see results.';
-        } else if (query) {
-          hint = `No results for &ldquo;<strong>${this.esc(query)}</strong>&rdquo;`;
-          sub = 'Try a different name, namespace, or keyword.';
-        } else {
-          hint = 'No results match the selected filters';
-          sub = 'Try adjusting the version or kind filters.';
-        }
-        this.resultsEl.innerHTML = `
-          <div class="api-search-empty">
-            <p>${hint}</p>
-            <p class="api-search-empty-hint">${sub}</p>
-          </div>`;
+        this.presentation.renderEmpty(this.resultsEl, hasKindFilter || hasVersionFilter, this.index.length === 0, {
+          withoutQuery: this.findMatches('').length,
+          // Clear filters restores the version controller's all-supported-versions default.
+          withoutFilters: this.findMatches(query, new Set(), null).length,
+        }, this.activeKinds, this.activeVersions);
         this.countEl.textContent = '0 results';
         this.status.textContent = `No results`;
         return;
@@ -666,11 +660,11 @@ const indexJson = JSON.stringify(index);
     }
   }
 
-  registerApiSearch('csharp', 'landing', (root, signal) => {
+  registerApiSearch('csharp', 'landing', withApiSearchFallback((root, signal) => {
     new ApiSearchController(root, signal);
     const input = root.querySelector<HTMLInputElement>('#api-search-input');
     input?.focus();
-  });
+  }));
 </script>
 
 <style>
diff --git a/src/frontend/src/pages/reference/api/typescript/[module]/[item]/index.astro b/src/frontend/src/pages/reference/api/typescript/[module]/[item]/index.astro
index 797bf00b3..c2b1f5b85 100644
--- a/src/frontend/src/pages/reference/api/typescript/[module]/[item]/index.astro
+++ b/src/frontend/src/pages/reference/api/typescript/[module]/[item]/index.astro
@@ -279,7 +279,7 @@ if (itemKind === 'handle') {
           placeholder={`Search members of ${item.name}…`}
           kinds={typeSearchKinds}
           defaultStatsText={`${memberCount} member${memberCount !== 1 ? 's' : ''}`}
-          size="sm"
+          size="lg"
         />
       </div>
     )}
@@ -428,6 +428,7 @@ if (itemKind === 'handle') {
   <script>
     import { InpageSearchSync } from '@components/api-reference/inpage-search-sync';
     import { readApiSearchIndex, registerApiSearch } from '@components/api-reference/search-lifecycle';
+    import { ApiSearchPresentation, withApiSearchFallback } from '../../../_search-presentation';
 
     interface TypeIndexEntry {
       n: string;
@@ -465,6 +466,7 @@ if (itemKind === 'handle') {
       private lastTokens: string[] = [];
       private visibleCount = 0;
       private sync: InpageSearchSync;
+      private presentation: ApiSearchPresentation;
 
       constructor(root: HTMLElement, private signal: AbortSignal) {
         this.input = root.querySelector<HTMLInputElement>('#type-search-input')!;
@@ -477,6 +479,7 @@ if (itemKind === 'handle') {
         this.memberCount = Number(root.dataset.memberCount ?? 0);
 
         this.sync = new InpageSearchSync('type', () => this.clear(), root, signal);
+        this.presentation = new ApiSearchPresentation(root, this.input, () => this.clear(), signal);
         signal.addEventListener('abort', () => {
           if (this.debounceTimer !== null) clearTimeout(this.debounceTimer);
           this.highlightTimers.forEach(timer => clearTimeout(timer));
@@ -520,6 +523,7 @@ if (itemKind === 'handle') {
           this.clearFiltersBtn.style.display = 'none';
           this.syncUrl();
           this.applySearch();
+          this.input.focus();
         }, { signal: this.signal });
 
         this.resultsEl.addEventListener('click', (e) => {
@@ -537,7 +541,7 @@ if (itemKind === 'handle') {
               this.highlightTimers.delete(timer);
             }, 1500);
             this.highlightTimers.add(timer);
-            history.replaceState(null, '', href);
+            history.replaceState(history.state, '', href);
           }
         }, { signal: this.signal });
       }
@@ -546,17 +550,19 @@ if (itemKind === 'handle') {
         this.input.value = '';
         this.sync.updateClearButton();
         this.syncUrl();
-        this.showContent();
+        this.applySearch();
+        this.input.focus();
       }
 
       private showContent(): void {
-        if (this.activeKinds.size > 0) {
+        if (this.activeKinds.size > 0 || this.index.length === 0) {
           this.search('');
           return;
         }
         this.resultsEl.style.display = 'none';
         this.resultsEl.innerHTML = '';
         this.countEl.textContent = `${fmtNum(this.memberCount)} member${this.memberCount !== 1 ? 's' : ''}`;
+        this.status.textContent = this.countEl.textContent;
       }
 
       private handleInput(): void {
@@ -596,12 +602,12 @@ if (itemKind === 'handle') {
           this.clearFiltersBtn.style.display = '';
         }
 
-        if (q || kinds.size > 0) {
-          this.applySearch();
-        }
+        this.applySearch();
       }
 
       private applySearch(): void {
+        if (this.debounceTimer !== null) clearTimeout(this.debounceTimer);
+        this.presentation.update(this.activeKinds.size > 0);
         const q = this.input.value.trim();
         if (!q && this.activeKinds.size === 0) {
           this.showContent();
@@ -610,15 +616,15 @@ if (itemKind === 'handle') {
         this.search(q);
       }
 
-      private search(query: string): void {
+      private findMatches(query: string, kinds = this.activeKinds) {
         const tokens = query.toLowerCase().split(/\s+/).filter(Boolean);
-        const hasKindFilter = this.activeKinds.size > 0;
+        const hasKindFilter = kinds.size > 0;
 
         type Scored = { entry: TypeIndexEntry; score: number };
         const scored: Scored[] = [];
 
         for (const entry of this.index) {
-          if (hasKindFilter && !this.activeKinds.has(entry.k)) continue;
+          if (hasKindFilter && !kinds.has(entry.k)) continue;
 
           if (tokens.length === 0) {
             scored.push({ entry, score: 50 });
@@ -652,6 +658,13 @@ if (itemKind === 'handle') {
           if (score > 0) scored.push({ entry, score });
         }
 
+        return scored;
+      }
+
+      private search(query: string): void {
+        const tokens = query.toLowerCase().split(/\s+/).filter(Boolean);
+        const hasKindFilter = this.activeKinds.size > 0;
+        const scored = this.findMatches(query);
         scored.sort((a, b) => b.score - a.score || a.entry.n.localeCompare(b.entry.n));
 
         this.lastScored = scored;
@@ -663,14 +676,10 @@ if (itemKind === 'handle') {
         this.resultsEl.style.display = '';
 
         if (total === 0) {
-          const hint = query
-            ? `No results for "<strong>${this.esc(query)}</strong>"`
-            : 'No results match the selected filters';
-          this.resultsEl.innerHTML = `
-            <div class="api-search-empty">
-              <p>${hint}</p>
-              <p class="api-search-empty-hint">Try a different name or keyword.</p>
-            </div>`;
+          this.presentation.renderEmpty(this.resultsEl, hasKindFilter, this.index.length === 0, {
+            withoutQuery: this.findMatches('').length,
+            withoutFilters: this.findMatches(query, new Set()).length,
+          }, this.activeKinds);
           this.countEl.textContent = '0 results';
           this.status.textContent = 'No results';
           return;
@@ -753,7 +762,7 @@ if (itemKind === 'handle') {
       }
     }
 
-    registerApiSearch('typescript', 'item', (root, signal) => new TypeSearchController(root, signal));
+    registerApiSearch('typescript', 'item', withApiSearchFallback((root, signal) => new TypeSearchController(root, signal)));
   </script>
 
 <style>
diff --git a/src/frontend/src/pages/reference/api/typescript/[module]/index.astro b/src/frontend/src/pages/reference/api/typescript/[module]/index.astro
index 778ee0208..9fa3fc035 100644
--- a/src/frontend/src/pages/reference/api/typescript/[module]/index.astro
+++ b/src/frontend/src/pages/reference/api/typescript/[module]/index.astro
@@ -239,7 +239,7 @@ const pkgName = pkg.package.name;
       placeholder={`Search types, functions, members in ${pkg.package.name}...`}
       kinds={allKinds}
       defaultStatsText={`${totalTypeCount.toLocaleString()} types and ${memberCount.toLocaleString()} members`}
-      size="sm"
+      size="lg"
     />
   </div>
 
@@ -317,6 +317,7 @@ const pkgName = pkg.package.name;
 <script>
   import { InpageSearchSync } from '@components/api-reference/inpage-search-sync';
   import { readApiSearchIndex, registerApiSearch } from '@components/api-reference/search-lifecycle';
+  import { ApiSearchPresentation, withApiSearchFallback } from '../../_search-presentation';
 
   interface PkgIndexEntry {
     n: string;
@@ -365,6 +366,7 @@ const pkgName = pkg.package.name;
     private lastTokens: string[] = [];
     private visibleCount = 0;
     private sync: InpageSearchSync;
+    private presentation: ApiSearchPresentation;
 
     constructor(root: HTMLElement, private signal: AbortSignal) {
       this.input = root.querySelector<HTMLInputElement>('#pkg-search-input')!;
@@ -381,6 +383,7 @@ const pkgName = pkg.package.name;
       this.memberCount = Number(root.dataset.memberCount ?? 0);
 
       this.sync = new InpageSearchSync('pkg', () => this.clear(), root, signal);
+      this.presentation = new ApiSearchPresentation(root, this.input, () => this.clear(), signal);
       signal.addEventListener('abort', () => {
         if (this.debounceTimer !== null) clearTimeout(this.debounceTimer);
       }, { once: true });
@@ -422,6 +425,7 @@ const pkgName = pkg.package.name;
         this.clearFiltersBtn.style.display = 'none';
         this.syncUrl();
         this.applySearch();
+        this.input.focus();
       }, { signal: this.signal });
     }
 
@@ -429,11 +433,12 @@ const pkgName = pkg.package.name;
       this.input.value = '';
       this.sync.updateClearButton();
       this.syncUrl();
-      this.showNamespaces();
+      this.applySearch();
+      this.input.focus();
     }
 
     private showNamespaces(): void {
-      if (this.activeKinds.size > 0) {
+      if (this.activeKinds.size > 0 || this.index.length === 0) {
         this.search('');
         return;
       }
@@ -441,6 +446,7 @@ const pkgName = pkg.package.name;
       this.resultsEl.innerHTML = '';
       this.nsList.style.display = '';
       this.countEl.textContent = `${fmtNum(this.typeCount)} types and ${fmtNum(this.memberCount)} members`;
+      this.status.textContent = this.countEl.textContent;
     }
 
     private handleInput(): void {
@@ -480,12 +486,12 @@ const pkgName = pkg.package.name;
         this.clearFiltersBtn.style.display = '';
       }
 
-      if (q || kinds.size > 0) {
-        this.applySearch();
-      }
+      this.applySearch();
     }
 
     private applySearch(): void {
+      if (this.debounceTimer !== null) clearTimeout(this.debounceTimer);
+      this.presentation.update(this.activeKinds.size > 0);
       const q = this.input.value.trim();
       if (!q && this.activeKinds.size === 0) {
         this.showNamespaces();
@@ -494,15 +500,15 @@ const pkgName = pkg.package.name;
       this.search(q);
     }
 
-    private search(query: string): void {
+    private findMatches(query: string, kinds = this.activeKinds) {
       const tokens = query.toLowerCase().split(/\s+/).filter(Boolean);
-      const hasKindFilter = this.activeKinds.size > 0;
+      const hasKindFilter = kinds.size > 0;
 
       type Scored = { entry: PkgIndexEntry; score: number };
       const scored: Scored[] = [];
 
       for (const entry of this.index) {
-        if (hasKindFilter && !this.activeKinds.has(entry.k)) continue;
+        if (hasKindFilter && !kinds.has(entry.k)) continue;
 
         if (tokens.length === 0) {
           scored.push({ entry, score: 50 });
@@ -543,6 +549,13 @@ const pkgName = pkg.package.name;
         if (score > 0) scored.push({ entry, score });
       }
 
+      return scored;
+    }
+
+    private search(query: string): void {
+      const tokens = query.toLowerCase().split(/\s+/).filter(Boolean);
+      const hasKindFilter = this.activeKinds.size > 0;
+      const scored = this.findMatches(query);
       scored.sort((a, b) => b.score - a.score || a.entry.n.localeCompare(b.entry.n));
 
       this.lastScored = scored;
@@ -555,14 +568,10 @@ const pkgName = pkg.package.name;
       this.resultsEl.style.display = '';
 
       if (total === 0) {
-        const hint = query
-          ? `No results for "<strong>${this.esc(query)}</strong>"`
-          : 'No results match the selected filters';
-        this.resultsEl.innerHTML = `
-          <div class="api-search-empty">
-            <p>${hint}</p>
-            <p class="api-search-empty-hint">Try a different name, module, or keyword.</p>
-          </div>`;
+        this.presentation.renderEmpty(this.resultsEl, hasKindFilter, this.index.length === 0, {
+          withoutQuery: this.findMatches('').length,
+          withoutFilters: this.findMatches(query, new Set()).length,
+        }, this.activeKinds);
         this.countEl.textContent = '0 results';
         this.status.textContent = 'No results';
         return;
@@ -655,7 +664,7 @@ const pkgName = pkg.package.name;
     }
   }
 
-  registerApiSearch('typescript', 'module', (root, signal) => new PkgSearchController(root, signal));
+  registerApiSearch('typescript', 'module', withApiSearchFallback((root, signal) => new PkgSearchController(root, signal)));
 </script>
 
 <style>
diff --git a/src/frontend/src/pages/reference/api/typescript/index.astro b/src/frontend/src/pages/reference/api/typescript/index.astro
index 69b640942..29a1570fc 100644
--- a/src/frontend/src/pages/reference/api/typescript/index.astro
+++ b/src/frontend/src/pages/reference/api/typescript/index.astro
@@ -98,6 +98,7 @@ const indexJson = JSON.stringify(index);
 <script>
   import { InpageSearchSync } from '@components/api-reference/inpage-search-sync';
   import { readApiSearchIndex, registerApiSearch } from '@components/api-reference/search-lifecycle';
+  import { ApiSearchPresentation, withApiSearchFallback } from '../_search-presentation';
   import { formatTsApiSearchStats, getTsApiSearchStats } from '@utils/ts-api-search-stats';
 
   interface IndexEntry {
@@ -142,6 +143,7 @@ const indexJson = JSON.stringify(index);
     private lastTokens: string[] = [];
     private visibleCount = 0;
     private sync: InpageSearchSync;
+    private presentation: ApiSearchPresentation;
 
     constructor(private root: HTMLElement, private signal: AbortSignal) {
       this.input = root.querySelector<HTMLInputElement>('#ts-api-search-input')!;
@@ -154,6 +156,7 @@ const indexJson = JSON.stringify(index);
       this.index = readApiSearchIndex<IndexEntry>(root);
 
       this.sync = new InpageSearchSync('ts-api', () => this.clear(), root, signal);
+      this.presentation = new ApiSearchPresentation(root, this.input, () => this.clear(), signal);
       signal.addEventListener('abort', () => {
         if (this.debounceTimer !== null) clearTimeout(this.debounceTimer);
       }, { once: true });
@@ -165,7 +168,7 @@ const indexJson = JSON.stringify(index);
       this.applySearch();
 
       // Listen for version filter changes
-      document.addEventListener('version-filter-change', (e: Event) => {
+      root.addEventListener('version-filter-change', (e: Event) => {
         const detail = (e as CustomEvent).detail;
         if (detail.all) {
           this.activeVersions = null;
@@ -244,24 +247,16 @@ const indexJson = JSON.stringify(index);
           c.setAttribute('aria-pressed', 'false');
         });
 
-        // Reset version filter
+        // Let the version controller restore and persist its own defaults.
         this.activeVersions = null;
         const vfContainer = this.root.querySelector('.version-filter');
-        if (vfContainer) {
-          vfContainer.querySelectorAll<HTMLInputElement>('.version-filter-cb').forEach(cb => { cb.checked = true; });
-          const allCb = vfContainer.querySelector<HTMLInputElement>('.version-filter-cb[data-version="__all__"]');
-          if (allCb) { allCb.checked = true; allCb.indeterminate = false; }
-          const countEl = vfContainer.querySelector('[id$="-count"]');
-          const total = vfContainer.querySelectorAll('.version-filter-cb:not([data-version="__all__"])').length;
-          if (countEl) countEl.textContent = `${total}/${total}`;
-          const btn = vfContainer.querySelector('.version-filter-btn');
-          if (btn) { btn.classList.remove('filtered', 'none-selected'); }
-        }
+        vfContainer?.dispatchEvent(new Event('version-filter-reset'));
         this.filterPackageList();
 
         this.clearFiltersBtn.style.display = 'none';
         this.syncUrl();
         this.applySearch();
+        this.input.focus();
       }, { signal: this.signal });
     }
 
@@ -269,11 +264,12 @@ const indexJson = JSON.stringify(index);
       this.input.value = '';
       this.sync.updateClearButton();
       this.syncUrl();
-      this.showPackages();
+      this.applySearch();
+      this.input.focus();
     }
 
     private showPackages(): void {
-      if (this.activeKinds.size > 0) {
+      if (this.activeKinds.size > 0 || this.getVisiblePackageStats().packageCount === 0) {
         this.search('');
         return;
       }
@@ -282,6 +278,7 @@ const indexJson = JSON.stringify(index);
       this.packageList.style.display = '';
 
       this.countEl.textContent = formatTsApiSearchStats(this.getVisiblePackageStats());
+      this.status.textContent = this.countEl.textContent;
     }
 
     private handleInput(): void {
@@ -324,6 +321,8 @@ const indexJson = JSON.stringify(index);
     }
 
     private applySearch(): void {
+      if (this.debounceTimer !== null) clearTimeout(this.debounceTimer);
+      this.presentation.update(this.activeKinds.size > 0 || this.activeVersions !== null);
       const q = this.input.value.trim();
       if (!q && this.activeKinds.size === 0) {
         this.showPackages();
@@ -351,15 +350,15 @@ const indexJson = JSON.stringify(index);
       }
     }
 
-    private search(query: string): void {
+    private findMatches(query: string, kinds = this.activeKinds, versions = this.activeVersions) {
       const tokens = query.toLowerCase().split(/\s+/).filter(Boolean);
-      const hasKindFilter = this.activeKinds.size > 0;
-      const hasVersionFilter = this.activeVersions !== null;
+      const hasKindFilter = kinds.size > 0;
+      const hasVersionFilter = versions !== null;
       const scored: { entry: IndexEntry; score: number }[] = [];
 
       for (const entry of this.index) {
-        if (hasKindFilter && !this.activeKinds.has(entry.k)) continue;
-        if (hasVersionFilter && (entry as any).v && !this.activeVersions!.has((entry as any).v)) continue;
+        if (hasKindFilter && !kinds.has(entry.k)) continue;
+        if (hasVersionFilter && (entry as any).v && !versions!.has((entry as any).v)) continue;
 
         if (tokens.length === 0) {
           scored.push({ entry, score: 50 });
@@ -388,6 +387,14 @@ const indexJson = JSON.stringify(index);
         if (score > 0) scored.push({ entry, score });
       }
 
+      return scored;
+    }
+
+    private search(query: string): void {
+      const tokens = query.toLowerCase().split(/\s+/).filter(Boolean);
+      const hasKindFilter = this.activeKinds.size > 0;
+      const hasVersionFilter = this.activeVersions !== null;
+      const scored = this.findMatches(query);
       scored.sort((a, b) => b.score - a.score || a.entry.n.localeCompare(b.entry.n));
 
       this.lastScored = scored;
@@ -398,25 +405,13 @@ const indexJson = JSON.stringify(index);
       this.resultsEl.style.display = '';
 
       if (scored.length === 0) {
-        const noVersions = this.activeVersions !== null && this.activeVersions.size === 0;
-        let hint: string;
-        let sub: string;
-        if (noVersions) {
-          hint = 'No versions selected';
-          sub = 'Select at least one version to see results.';
-        } else if (query) {
-          hint = `No results for &ldquo;<strong>${this.esc(query)}</strong>&rdquo;`;
-          sub = 'Try a different name or keyword.';
-        } else {
-          hint = 'No results match the selected filters';
-          sub = 'Try adjusting the version or kind filters.';
-        }
-        this.resultsEl.innerHTML = `
-          <div class="api-search-empty">
-            <p>${hint}</p>
-            <p class="api-search-empty-hint">${sub}</p>
-          </div>`;
+        this.presentation.renderEmpty(this.resultsEl, hasKindFilter || hasVersionFilter, this.index.length === 0, {
+          withoutQuery: this.findMatches('').length,
+          // Clear filters restores the version controller's all-supported-versions default.
+          withoutFilters: this.findMatches(query, new Set(), null).length,
+        }, this.activeKinds, this.activeVersions);
         this.countEl.textContent = '0 results';
+        this.status.textContent = this.countEl.textContent;
         return;
       }
 
@@ -494,11 +489,11 @@ const indexJson = JSON.stringify(index);
     }
   }
 
-  registerApiSearch('typescript', 'landing', (root, signal) => {
+  registerApiSearch('typescript', 'landing', withApiSearchFallback((root, signal) => {
     new TsApiSearchController(root, signal);
     const input = root.querySelector<HTMLInputElement>('#ts-api-search-input');
     input?.focus();
-  });
+  }));
 </script>
 
 <style>
diff --git a/src/frontend/src/styles/dev-hub.css b/src/frontend/src/styles/dev-hub.css
index e97719bdd..fc1f06d5d 100644
--- a/src/frontend/src/styles/dev-hub.css
+++ b/src/frontend/src/styles/dev-hub.css
@@ -9,6 +9,17 @@
 :root { --dev-rust-icon-filter: none; }
 :root[data-theme='dark'] { --dev-rust-icon-filter: invert(1); }
 
+.hub-grain { position: relative; isolation: isolate; }
+.hub-grain::before {
+  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
+  border-radius: inherit;
+  background: var(--dev-texture); color: var(--sl-color-text-accent); opacity: 0.11;
+  background-size: 137% 173%, 191% 149%; background-position: 17% 31%, 83% 67%; background-repeat: no-repeat;
+}
+@media (forced-colors: active) {
+  .hub-grain::before { display: none; }
+}
+
 body:has(.dev-home) .hero {
   display: block;
   padding-block: 1.5rem 0;
@@ -29,16 +40,11 @@ body:has(.dev-home) .hero {
   a { color: var(--sl-color-text); text-decoration: none; }
   svg { flex-shrink: 0; }
   .hub-intro {
-    position: relative; isolation: isolate; overflow: hidden;
+    overflow: hidden;
     padding: clamp(1.25rem, 3vw, 2rem);
     border: 1px solid var(--sl-color-gray-5); border-radius: 0.75rem;
     background: color-mix(in srgb, var(--sl-color-text-accent) 4%, var(--sl-color-bg));
   }
-  .hub-intro::before {
-    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
-    background: var(--dev-texture); color: var(--sl-color-text-accent); opacity: 0.11;
-    background-size: 137% 173%, 191% 149%; background-position: 17% 31%, 83% 67%; background-repeat: no-repeat;
-  }
   .hub-intro .dev-description { max-width: 65ch; margin-bottom: 0; }
   .dev-search {
     display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.25rem;
@@ -200,7 +206,6 @@ body:has(.dev-home) .hero {
     .video-links a:hover img { transform: scale(1.025); }
   }
   @media (forced-colors: active) {
-    .hub-intro::before { display: none; }
     .onboarding-cta { border-color: ButtonText; }
   }
   @media (max-width: 1023px) {
diff --git a/src/frontend/src/styles/search-controls.css b/src/frontend/src/styles/search-controls.css
new file mode 100644
index 000000000..d369907e4
--- /dev/null
+++ b/src/frontend/src/styles/search-controls.css
@@ -0,0 +1,149 @@
+/* Neutral presentation shared by full-size and compact in-page search surfaces. */
+:root {
+  --search-control-radius: 0.625rem;
+  --search-control-height: 3rem;
+  --search-control-bg: var(--sl-color-bg-nav);
+  --search-control-border: var(--sl-color-gray-5);
+  --search-control-focus: var(--sl-color-text-accent);
+}
+
+.search-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.search-field { flex: 1; min-width: 0; }
+.search-field[data-search-size='sm'] { --search-control-height: 2.5rem; }
+.search-field-label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: 600; }
+.search-field-wrap { position: relative; display: flex; align-items: center; }
+.search-field-icon { position: absolute; left: 0.85rem; width: 1.125rem; height: 1.125rem; color: var(--sl-color-gray-1); pointer-events: none; }
+.search-field-input {
+  width: 100%;
+  min-width: 0;
+  height: var(--search-control-height);
+  min-height: 2.5rem;
+  padding: 0.5rem 2.75rem;
+  border: 1px solid var(--search-control-border);
+  border-radius: var(--search-control-radius);
+  background: var(--search-control-bg);
+  color: var(--sl-color-text);
+  font: inherit;
+  font-size: 1rem;
+  box-sizing: border-box;
+}
+.search-field-input::placeholder { color: var(--sl-color-gray-1); }
+.search-field-input::-webkit-search-cancel-button { appearance: none; }
+.search-field-clear {
+  position: absolute;
+  right: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--search-control-radius);
+  background: transparent;
+  color: var(--sl-color-text);
+  cursor: pointer;
+}
+.search-field-clear svg { width: 1rem; height: 1rem; }
+.search-field-clear:hover { background: var(--sl-color-gray-6); }
+.search-field-input:disabled,
+.search-field-clear:disabled,
+.search-filter-chip:disabled,
+.search-action:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+.search-field-input:focus {
+  outline: 2px solid var(--search-control-focus);
+  outline-offset: 2px;
+  border-color: var(--search-control-focus);
+  box-shadow: none;
+}
+.search-field-clear:focus-visible,
+.search-action:focus-visible {
+  outline: 2px solid var(--search-control-focus);
+  outline-offset: 2px;
+}
+.search-action {
+  min-height: 2.25rem;
+  padding: 0;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--sl-color-text-accent);
+  font: inherit;
+  font-size: 0.875rem;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+  cursor: pointer;
+}
+.search-action:hover { text-decoration-thickness: 2px; }
+:root[data-theme] button.search-filter-chip[aria-pressed='true'] {
+  color: var(--sl-color-text);
+  border-color: var(--sl-color-text-accent);
+  background: var(--sl-color-accent-low);
+}
+@media (pointer: coarse) {
+  button.search-filter-chip { min-height: 2.75rem; }
+}
+.search-empty {
+  padding: 1rem;
+  border: 1px dashed var(--sl-color-gray-4);
+  border-radius: var(--search-control-radius);
+  background: color-mix(in srgb, var(--sl-color-gray-6) 50%, var(--sl-color-bg));
+  color: var(--sl-color-text);
+}
+.search-empty[hidden] { display: none; }
+:root .search-results-summary {
+  font-size: 0.875rem;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1.5;
+  color: var(--sl-color-gray-2);
+}
+.search-empty .search-empty-title { margin: 0; color: var(--sl-color-text); font-size: 1rem; font-weight: 600; font-style: normal; line-height: 1.5; overflow-wrap: anywhere; }
+.search-empty .search-empty-hint { margin: 0.25rem 0 0; font-size: 0.875rem; font-weight: 400; font-style: normal; line-height: 1.5; color: var(--sl-color-gray-2); overflow-wrap: anywhere; }
+.search-empty .search-active-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin: 0.75rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+.search-empty .search-active-filters[hidden] { display: none; }
+.search-empty .search-active-filters > li {
+  max-width: 100%;
+  margin: 0;
+  padding: 0.125rem 0.5rem;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0.25rem;
+  background: var(--search-control-bg);
+  color: var(--sl-color-text);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+.search-empty .search-action { margin-top: 0.5rem; font-size: 0.875rem; font-weight: 400; font-style: normal; line-height: 1.5; }
+@media (pointer: coarse) {
+  .search-field-clear { min-width: 2.75rem; min-height: 2.75rem; }
+  .search-field-input { min-height: 2.75rem; }
+  .search-field { --search-control-height: 3rem !important; }
+  .search-action { min-height: 2.75rem; }
+}
+@media (forced-colors: active) {
+  .search-field-input:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
+}
diff --git a/src/frontend/src/utils/dev-center/resource-card-html.ts b/src/frontend/src/utils/dev-center/resource-card-html.ts
index ae2f9a7ed..3bd036413 100644
--- a/src/frontend/src/utils/dev-center/resource-card-html.ts
+++ b/src/frontend/src/utils/dev-center/resource-card-html.ts
@@ -71,10 +71,11 @@ export function resourceCardHtml(resource: DevResource, image?: ResourceImages):
 
 function imageHtml(image: ResourceImages, width: number, height: number, className = ''): string {
   const classes = ['resource-image', className].filter(Boolean).join(' ');
-  if (image.light === image.dark) {
-    return `<noscript data-resource-image><img class="${classes}" src="${attribute(image.light)}" alt="" width="${width}" height="${height}" loading="lazy" decoding="async"></noscript>`;
-  }
-  return `<noscript data-resource-image><img class="${classes} browse-image-light" src="${attribute(image.light)}" alt="" width="${width}" height="${height}" loading="lazy" decoding="async"><img class="${classes} browse-image-dark" src="${attribute(image.dark)}" alt="" width="${width}" height="${height}" loading="lazy" decoding="async"></noscript>`;
+  const markup = image.light === image.dark
+    ? `<img class="${classes}" src="${attribute(image.light)}" alt="" width="${width}" height="${height}" loading="lazy" decoding="async">`
+    : `<img class="${classes} browse-image-light" src="${attribute(image.light)}" alt="" width="${width}" height="${height}" loading="lazy" decoding="async"><img class="${classes} browse-image-dark" src="${attribute(image.dark)}" alt="" width="${width}" height="${height}" loading="lazy" decoding="async">`;
+  // Astro removes noscript nodes from incoming pages before a client-side swap.
+  return `<template data-resource-image>${markup}</template><noscript>${markup}</noscript>`;
 }
 
 function iconHtml(name: string, className: string): string {
diff --git a/src/frontend/tests/e2e/api-search-contract.spec.ts b/src/frontend/tests/e2e/api-search-contract.spec.ts
new file mode 100644
index 000000000..d3b658d45
--- /dev/null
+++ b/src/frontend/tests/e2e/api-search-contract.spec.ts
@@ -0,0 +1,302 @@
+import { expect, test, type Page } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+import { dismissCookieConsentIfVisible } from '@tests/e2e/helpers';
+
+test.setTimeout(120_000);
+
+const surfaces = [
+  { path: 'csharp/', prefix: 'api' },
+  { path: 'csharp/aspire.hosting.redis/', prefix: 'pkg' },
+  { path: 'csharp/aspire.hosting.redis/redisresource/', prefix: 'type' },
+  { path: 'typescript/', prefix: 'ts-api' },
+  { path: 'typescript/aspire.hosting/', prefix: 'pkg' },
+  { path: 'typescript/aspire.hosting/idistributedapplicationbuilder/', prefix: 'type' },
+];
+
+async function navigateAwayAndBack(page: Page) {
+  await page.evaluate(() => {
+    Reflect.set(window, '__apiSearchContractVisit', true);
+    const link = document.createElement('a');
+    link.href = '/reference/overview/';
+    document.body.append(link);
+    link.click();
+  });
+  await expect(page).toHaveURL(/\/reference\/overview\/$/);
+  await page.goBack();
+  await expect.poll(() => page.evaluate(() => Reflect.get(window, '__apiSearchContractVisit'))).toBe(true);
+}
+
+for (const { path, prefix } of surfaces) {
+  test(`API full-size input visual parity: ${path}`, async ({ page }) => {
+    await page.goto(`/reference/api/${path}?q=Redis`);
+    await dismissCookieConsentIfVisible(page);
+    const input = page.locator(`#${prefix}-search-input`);
+    const field = input.locator('..');
+    const clear = page.locator(`#${prefix}-search-clear`);
+
+    for (const theme of ['light', 'dark']) {
+      await page.evaluate(value => document.documentElement.dataset.theme = value, theme);
+      await input.evaluate(element => element.blur());
+      await expect(input).toHaveCSS('height', '48px');
+      await expect(input).toHaveCSS('font-size', '16px');
+      await expect(field.locator('.search-field-icon')).toHaveCSS('width', '18px');
+      await expect(field.locator('.search-field-icon')).toHaveCSS('height', '18px');
+      await expect.poll(() => input.evaluate(element => {
+        const probe = document.createElement('span');
+        probe.style.background = 'var(--search-control-bg)';
+        probe.style.borderColor = 'var(--search-control-border)';
+        probe.style.borderRadius = 'var(--search-control-radius)';
+        probe.style.color = 'var(--sl-color-gray-1)';
+        element.parentElement!.append(probe);
+        const expected = getComputedStyle(probe);
+        const actual = getComputedStyle(element);
+        const icon = getComputedStyle(element.parentElement!.querySelector('.search-field-icon')!);
+        const result = {
+          background: actual.backgroundColor === expected.backgroundColor,
+          border: actual.borderColor === expected.borderColor,
+          radius: actual.borderRadius === expected.borderRadius,
+          icon: icon.color === expected.color,
+        };
+        probe.remove();
+        return result;
+      })).toEqual({ background: true, border: true, radius: true, icon: true });
+      await expect(clear).toBeVisible();
+      await expect(clear).toHaveAccessibleName('Clear search');
+      await expect(clear).toHaveText('');
+      await expect(clear.locator('svg')).toBeVisible();
+    }
+  });
+
+  test(`API clear/reset contract: ${path}`, async ({ page, isMobile }) => {
+    if (isMobile) await page.addInitScript(() => {
+      Object.defineProperty(document, 'startViewTransition', { configurable: true, value: undefined });
+    });
+    await page.goto(`/reference/api/${path}?keep=1&sort=name`);
+    await dismissCookieConsentIfVisible(page);
+    const input = page.locator(`#${prefix}-search-input`);
+    const results = page.locator(`#${prefix}-search-results`);
+    const empty = results.locator('.search-empty');
+    const clear = page.locator(`#${prefix}-search-clear`);
+    const filters = page.locator(`#${prefix}-clear-filters`);
+    const toolbar = filters.locator('..');
+    const chip = page.locator(`#${prefix}-kind-filters .api-filter-chip`).first();
+    const query = 'zzzz-no-api-matches';
+
+    await expect(input).toHaveAccessibleName(/search/i);
+    await input.fill(query);
+    await expect(empty).toContainText(`No API entries match "${query}"`);
+    await expect(empty.getByRole('button')).toHaveCount(1);
+    await expect(toolbar.locator('button:visible')).toHaveCount(0);
+    await empty.getByRole('button', { name: 'Clear search', exact: true }).click();
+    await expect(input).toBeFocused();
+    await expect(input).toHaveValue('');
+
+    await chip.click();
+    await input.fill(query);
+    await expect(empty.getByRole('button', { name: 'Clear search', exact: true })).toBeVisible();
+    await expect(toolbar.locator('button:visible')).toHaveCount(0);
+    await clear.click();
+    await expect(chip).toHaveAttribute('aria-pressed', 'true');
+    await expect(input).toBeFocused();
+    await expect(page).not.toHaveURL(/[?&]q=/);
+    await expect(page).toHaveURL(/kinds=/);
+
+    await filters.click();
+    await input.fill(query);
+    await expect(input).toHaveValue(query);
+    await expect(input).toBeFocused();
+    await expect(chip).toHaveAttribute('aria-pressed', 'false');
+    await expect(empty.getByRole('button', { name: 'Clear search', exact: true })).toBeVisible();
+
+    await chip.click();
+    await expect(empty.getByRole('button', { name: 'Clear search', exact: true })).toBeVisible();
+    await navigateAwayAndBack(page);
+    await expect(input).toHaveValue(query);
+    await expect(chip).toHaveAttribute('aria-pressed', 'true');
+    await empty.getByRole('button', { name: 'Clear search', exact: true }).click();
+    await expect(input).toHaveValue('');
+    await expect(input).toBeFocused();
+    await expect(chip).toHaveAttribute('aria-pressed', 'true');
+    await filters.click();
+    await expect(chip).toHaveAttribute('aria-pressed', 'false');
+    await expect(page).not.toHaveURL(/[?&](q|kinds)=/);
+    await expect(page).toHaveURL(/keep=1&sort=name/);
+    await expect(empty).toHaveCount(0);
+
+  });
+
+  test(`API recovery preserves a useful query outside the selected kinds: ${path}`, async ({ page }) => {
+    let otherKind = '';
+    await page.route(`**/reference/api/${path}?recovery-fixture=1`, async route => {
+      const response = await route.fetch();
+      const body = (await response.text()).replace(
+        /(<script[^>]*data-api-search-index[^>]*>)([\s\S]*?)(<\/script>)/,
+        (_match: string, open: string, serialized: string, close: string) => {
+          const entries = JSON.parse(serialized) as { k: string; v?: string }[];
+          const kinds = [...new Set(entries.map(entry => entry.k))];
+          expect(kinds.length).toBeGreaterThan(1);
+          otherKind = kinds[1];
+          const entry = {
+            f: 'Example.RecoveryNeedle', ns: 'Example', p: 'Package', s: '', r: '',
+            v: entries[0].v, h: '/reference/overview/',
+          };
+          return `${open}${JSON.stringify([
+            { ...entry, n: 'RecoveryNeedle', k: kinds[0] },
+            { ...entry, n: 'OtherEntry', f: 'Example.OtherEntry', k: otherKind },
+          ])}${close}`;
+        },
+      );
+      await route.fulfill({ response, body });
+    });
+    await page.goto(`/reference/api/${path}?recovery-fixture=1`);
+    await dismissCookieConsentIfVisible(page);
+    const input = page.locator(`#${prefix}-search-input`);
+    const chip = page.locator(`#${prefix}-kind-filters .api-filter-chip`).filter({ hasText: new RegExp(`^${otherKind}$`, 'i') });
+    const filters = page.locator(`#${prefix}-clear-filters`);
+    const reset = page.locator(`#${prefix}-reset-all`);
+    const toolbar = filters.locator('..');
+    const results = page.locator(`#${prefix}-search-results`);
+    await expect(toolbar.locator('button:visible')).toHaveCount(0);
+    await chip.click();
+    await expect(filters).toBeVisible();
+    await expect(reset).toBeHidden();
+    await input.fill('OtherEntry');
+    await expect(results.locator('.api-search-result')).toHaveCount(1);
+    await expect(reset).toBeVisible();
+    await expect(filters).toBeHidden();
+    await expect(toolbar.locator('button:visible')).toHaveCount(1);
+    await reset.click();
+    await expect(input).toHaveValue('');
+    await expect(chip).toHaveAttribute('aria-pressed', 'false');
+    await expect(toolbar.locator('button:visible')).toHaveCount(0);
+    await chip.click();
+    await input.fill('RecoveryNeedle');
+    const empty = results.locator('.search-empty');
+    await expect(empty).toContainText('No API entries match "RecoveryNeedle" with these filters');
+    await expect(empty.getByRole('list', { name: 'Active filters' }).getByRole('listitem')).toContainText([`Kind: ${otherKind}`]);
+    await expect(empty.locator('.search-empty-hint')).not.toContainText('Kind:');
+    await expect(empty).toContainText('keep your search text');
+    await expect(empty.getByRole('button')).toHaveCount(1);
+    await expect(toolbar.locator('button:visible')).toHaveCount(0);
+    await expect(page.locator(`#${prefix}-search-clear`)).toBeVisible();
+    await empty.getByRole('button', { name: 'Clear filters', exact: true }).click();
+    await expect(input).toHaveValue('RecoveryNeedle');
+    await expect(input).toBeFocused();
+    await expect(chip).toHaveAttribute('aria-pressed', 'false');
+    await expect(results.locator('.api-search-result')).toHaveCount(1);
+    await expect(toolbar.locator('button:visible')).toHaveCount(0);
+    await expect(page).toHaveURL(/q=RecoveryNeedle/);
+    await expect(page).not.toHaveURL(/[?&]kinds=/);
+  });
+}
+
+for (const { path, prefix } of [surfaces[0], surfaces[3]]) {
+  test(`API version-only empty recovery persists defaults: ${path}`, async ({ page }) => {
+    await page.goto(`/reference/api/${path}?versions=&keep=1`);
+    await dismissCookieConsentIfVisible(page);
+    const empty = page.locator(`#${prefix}-search-results .search-empty`);
+    await expect(empty.getByRole('button', { name: 'Clear filters', exact: true })).toBeVisible();
+    await expect(page.locator('.version-filter-btn')).toHaveClass(/none-selected/);
+    await empty.getByRole('button', { name: 'Clear filters', exact: true }).click();
+    await expect(page).not.toHaveURL(/[?&]versions=/);
+    await page.reload();
+    await expect(page.locator('.version-filter-btn')).not.toHaveClass(/filtered/);
+    await expect(page.locator(`#${prefix}-search-count`)).not.toHaveText(/^0 /);
+
+    const button = page.locator('.version-filter-btn');
+    await button.click();
+    const checkbox = page.locator('.version-filter-cb:not([data-version="__all__"])').first();
+    await checkbox.focus();
+    await page.keyboard.press('Escape');
+    await expect(button).toBeFocused();
+    await expect(button).toHaveAttribute('aria-expanded', 'false');
+
+    const input = page.locator(`#${prefix}-search-input`);
+    await button.click();
+    await page.locator('.version-filter-all').click();
+    await page.keyboard.press('Escape');
+    await input.fill('Redis');
+    await expect(empty.getByRole('button', { name: 'Clear filters', exact: true })).toBeVisible();
+    await page.locator(`#${prefix}-search-clear`).click();
+    await expect(button).toHaveClass(/none-selected/);
+    await expect(empty.getByRole('button', { name: 'Clear filters', exact: true })).toBeVisible();
+    await input.fill('Redis');
+    await empty.getByRole('button', { name: 'Clear filters', exact: true }).click();
+    await expect(input).toHaveValue('Redis');
+    await expect(button).not.toHaveClass(/filtered/);
+    await expect(page).not.toHaveURL(/[?&]versions=/);
+
+    await button.click();
+    await page.locator('.version-filter-all').click();
+    await page.keyboard.press('Escape');
+    await input.fill('zzzz-no-api-matches');
+    await expect(empty.getByRole('list', { name: 'Active filters' }).getByRole('listitem')).toContainText(['Versions: none selected']);
+    await expect(empty).toContainText('Neither change alone returns results');
+    await empty.getByRole('button', { name: 'Reset all', exact: true }).click();
+    await expect(input).toHaveValue('');
+    await expect(input).toBeFocused();
+    await expect(button).not.toHaveClass(/filtered/);
+    await expect(page).not.toHaveURL(/[?&](q|versions)=/);
+  });
+}
+
+test('API clear remains available when text is entered before controller mounting', async ({ page }) => {
+  let releaseController!: () => void;
+  const controllerGate = new Promise<void>(resolve => { releaseController = resolve; });
+  await page.route('**/*', async route => {
+    if (route.request().resourceType() === 'script') await controllerGate;
+    await route.continue();
+  });
+  await page.goto('/reference/api/typescript/?versions=&keep=1', { waitUntil: 'commit' });
+  const input = page.locator('#ts-api-search-input');
+  try {
+    await input.fill('Redis');
+  } finally {
+    releaseController();
+  }
+  await page.waitForLoadState('load');
+  const empty = page.locator('#ts-api-search-results .search-empty');
+  await expect(empty).toContainText('No API entries match "Redis" with these filters');
+  await expect(empty.getByRole('button', { name: 'Clear filters', exact: true })).toBeVisible();
+  await expect(page.locator('#ts-api-search-clear')).toBeVisible();
+  await page.locator('#ts-api-search-clear').click();
+  await expect(input).toHaveValue('');
+  await expect(page.locator('.version-filter-btn')).toHaveClass(/none-selected/);
+  await expect(empty.getByRole('button', { name: 'Clear filters', exact: true })).toBeVisible();
+  await expect(page).toHaveURL(/[?&]keep=1/);
+});
+
+test('shared API controls reflow and retain accessible states in both themes', async ({ page }, testInfo) => {
+  await page.goto('/reference/api/typescript/?q=zzzz-no-api-matches&kinds=method');
+  await dismissCookieConsentIfVisible(page);
+  const controls = page.locator('.api-search-bar-unified');
+  for (const theme of ['light', 'dark']) {
+    await page.evaluate(value => document.documentElement.dataset.theme = value, theme);
+    await expect(controls.locator('.search-empty')).toBeVisible();
+    const violations = await new AxeBuilder({ page }).include('.api-search-bar-unified')
+      .withTags(['wcag2a', 'wcag2aa']).analyze();
+    expect(violations.violations).toEqual([]);
+    const fits = await controls.evaluate(element => element.scrollWidth <= element.clientWidth + 1);
+    expect(fits).toBe(true);
+    await controls.screenshot({ path: testInfo.outputPath(`api-search-${theme}.png`) });
+  }
+});
+
+test('an unavailable API index has an error/reload state, not zero-match recovery', async ({ page }) => {
+  await page.route('**/reference/api/typescript/?broken-index=1', async route => {
+    const response = await route.fetch();
+    const body = (await response.text()).replace(
+      /(<script[^>]*data-api-search-index[^>]*>)[\s\S]*?(<\/script>)/,
+      '$1invalid-index$2',
+    );
+    await route.fulfill({ response, body });
+  });
+  await page.goto('/reference/api/typescript/?broken-index=1');
+  await dismissCookieConsentIfVisible(page);
+  const state = page.locator('#ts-api-search-results .search-empty');
+  await expect(state).toContainText('Search unavailable');
+  await expect(state.getByRole('button')).toHaveCount(1);
+  await expect(state.getByRole('button', { name: 'Reload page', exact: true })).toBeVisible();
+  await expect(page.locator('#ts-api-search-input')).toBeDisabled();
+  await expect(page.locator('#ts-api-package-list')).toBeVisible();
+});
diff --git a/src/frontend/tests/e2e/dev-browse.spec.ts b/src/frontend/tests/e2e/dev-browse.spec.ts
index 8bc047f35..52c5a44b3 100644
--- a/src/frontend/tests/e2e/dev-browse.spec.ts
+++ b/src/frontend/tests/e2e/dev-browse.spec.ts
@@ -192,7 +192,7 @@ test('resource links remain usable if the browser controller fails to load', asy
   await expect(page.getByText('Interactive browsing could not load. All resource links are listed below.')).toBeVisible();
   await expect(page.locator('.browse-loading')).toBeHidden();
   expect(await page.locator('.browse-result:visible').count()).toBeGreaterThan(100);
-  await expect(page.locator('noscript[data-resource-image]')).toHaveCount(0);
+  await expect(page.locator('template[data-resource-image]')).toHaveCount(0);
   await expect(page.locator('resource-browser')).not.toHaveAttribute('aria-busy');
 });
 
@@ -203,8 +203,8 @@ test('only displayed resource artwork is materialized on first load', async ({ p
   const visibleCards = cards.filter({ visible: true });
   expect(await cards.count()).toBeGreaterThan(100);
   await expect(visibleCards).toHaveCount(24);
-  await expect(visibleCards.locator('noscript[data-resource-image]')).toHaveCount(0);
-  expect(await cards.filter({ has: page.locator('noscript[data-resource-image]') }).count()).toBeGreaterThan(0);
+  await expect(visibleCards.locator('template[data-resource-image]')).toHaveCount(0);
+  expect(await cards.filter({ has: page.locator('template[data-resource-image]') }).count()).toBeGreaterThan(0);
   expect(await cards.locator('img').count()).toBeLessThan(75);
 });
 
@@ -286,6 +286,8 @@ test('search highlights card matches through typing, pagination, reload and hist
   await assertHighlights('redis');
   await input.fill('<img src=x onerror=alert(1)>');
   await expect(page.locator('.browse-empty')).toBeVisible();
+  await expect(page.locator('.browse-empty .search-empty-title')).toContainText('<img src=x onerror=alert(1)>');
+  await expect(page.locator('.browse-empty img')).toHaveCount(0);
   await expect(marks).toHaveCount(0);
   await expect(page.locator('[data-search-highlight] img')).toHaveCount(0);
   await input.fill('   ');
@@ -364,13 +366,14 @@ test('reference identities and release imagery stay distinct in both themes', as
   }
 });
 
-test('empty results reset completely and unknown URL state is normalized', async ({ page }) => {
+test('empty results preserve useful filters and unknown URL state is normalized', async ({ page }) => {
   await page.goto('/hub/browse/?q=not-a-real-resource-555&type=glossary');
-  await expect(page.getByRole('heading', { name: 'No matching resources' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'No resources match "not-a-real-resource-555"' })).toBeVisible();
   await expect(results(page)).toHaveCount(0);
-  await page.getByRole('button', { name: 'Show all resources' }).click();
-  await expect(page).toHaveURL(/\/hub\/browse\/$/);
+  await page.locator('.browse-empty').getByRole('button', { name: 'Clear search', exact: true }).click();
+  await expect(page).toHaveURL(/\/hub\/browse\/\?type=glossary$/);
   await expect(results(page)).toHaveCount(24);
+  await expect(page.locator('.browse-result:not([hidden])[data-resource-type="glossary"]')).toHaveCount(24);
   await expect(page.getByRole('searchbox', { name: 'Search resources...' })).toBeFocused();
   await page.goto('/hub/browse/?type=unknown&topic=unknown&page=999999999&sort=unknown');
   await expect(results(page).first()).toBeVisible();
@@ -393,7 +396,7 @@ test('provider, multi-type filters and sorting reflect their URL state', async (
     const value = await option.getAttribute('value');
     expect(value).toBeTruthy();
     await option.check();
-    expect(new URL(page.url()).searchParams.get(name)).toBe(value);
+    await expect.poll(() => new URL(page.url()).searchParams.get(name)).toBe(value);
     expect(await results(page).count()).toBeGreaterThan(0);
     const entries = await results(page).evaluateAll((cards) =>
       cards.map((card) => JSON.parse(card.getAttribute('data-resource-entry')!) as Record<string, string[]>));
@@ -425,12 +428,12 @@ test('multiple languages combine with other filters and survive reload, history,
   await csharp.focus();
   await csharp.press('Space');
   await expect(csharp).not.toBeChecked();
-  expect(new URL(page.url()).searchParams.getAll('language')).toEqual(['typescript']);
+  await expect.poll(() => new URL(page.url()).searchParams.getAll('language')).toEqual(['typescript']);
   await page.goBack();
   await expect(csharp).toBeChecked();
   await expect(typescript).toBeChecked();
   await expect(page.locator('[data-filter-group="language"]')).not.toHaveAttribute('open');
-  await page.getByRole('button', { name: 'Clear all', exact: true }).click();
+  await page.getByRole('button', { name: 'Clear filters', exact: true }).click();
   await expect(csharp).not.toBeChecked();
   await expect(typescript).not.toBeChecked();
   await expect(page.locator('[data-filter-active="language"]')).toBeHidden();
@@ -675,7 +678,7 @@ test('filter changes preserve control and result positions', async ({ page }) =>
   await page.getByRole('radio', { name: 'Azure', exact: true }).check();
   expect(await measure()).toEqual(before);
   await page.keyboard.press('Escape');
-  await page.getByRole('button', { name: 'Clear all', exact: true }).click();
+  await page.getByRole('button', { name: 'Clear filters', exact: true }).click();
   expect(await measure()).toEqual(before);
   await page.getByRole('searchbox', { name: 'Search resources...' }).fill('no-results-555');
   const emptyPositions = await measure();
@@ -701,7 +704,7 @@ test('filtered selections persist, including single-select history and clearing'
   await openFacet(page, 'language');
   const group = page.locator('[data-filter-group="language"]');
   await group.getByRole('checkbox', { name: 'TypeScript', exact: true }).check();
-  expect(new URL(page.url()).searchParams.getAll('language')).toEqual(['csharp', 'typescript']);
+  await expect.poll(() => new URL(page.url()).searchParams.getAll('language')).toEqual(['csharp', 'typescript']);
   await openFacet(page, 'provider');
   const provider = page.locator('[data-filter-group="provider"]');
   await provider.getByRole('radio', { name: 'Azure', exact: true }).check();
@@ -715,7 +718,7 @@ test('filtered selections persist, including single-select history and clearing'
   await expect(page.locator('[data-filter-group="sort"] summary')).toHaveAccessibleName('Sort by: Date Newest first, then Title A-Z');
   await page.reload();
   await expect(provider.locator('summary')).toHaveText('Azure');
-  await page.getByRole('button', { name: 'Clear all', exact: true }).click();
+  await page.getByRole('button', { name: 'Clear filters', exact: true }).click();
   await expect(provider.locator('summary')).toHaveText('Provider');
   await expect(page).toHaveURL(/\/hub\/browse\/$/);
 });
@@ -767,6 +770,7 @@ test('date and title directions persist across searches, reloads and history', a
   await expect(page.getByRole('radio', { name: 'Title (Z-A)', exact: true })).toBeChecked();
   await checkOrder('newest', 'desc');
   await page.getByRole('radio', { name: 'Oldest first', exact: true }).check();
+  await expect(page).toHaveURL(/sort=oldest/);
   await page.reload();
   await expect(sort.locator('summary')).toHaveAccessibleName('Sort by: Date Oldest first, then Title Z-A');
   await openFacet(page, 'sort');
@@ -783,9 +787,9 @@ test('date and title directions persist across searches, reloads and history', a
   await page.goForward();
   await expect(sort.locator('summary')).toHaveAccessibleName('Sort by: Date Oldest first, then Title Z-A');
   await expect(page.getByRole('searchbox', { name: 'Search resources...' })).toHaveValue('aspire');
-  await page.getByRole('button', { name: 'Clear all', exact: true }).click();
-  await expect(page).toHaveURL(/\/hub\/browse\/$/);
-  await expect(sort.locator('summary')).toHaveAccessibleName('Sort by: Date Newest first, then Title A-Z');
+  await page.getByRole('button', { name: 'Reset all', exact: true }).click();
+  await expect(page).toHaveURL(/\/hub\/browse\/\?sort=oldest&title=desc$/);
+  await expect(sort.locator('summary')).toHaveAccessibleName('Sort by: Date Oldest first, then Title Z-A');
 });
 
 test('history returns focus from hidden pagination and closed filter options without stealing it', async ({ page }) => {
@@ -794,9 +798,11 @@ test('history returns focus from hidden pagination and closed filter options wit
   const nav = page.getByRole('navigation', { name: 'Resource pages' });
   await openFacet(page, 'type');
   await page.getByRole('checkbox', { name: 'Quickstart', exact: true }).check();
+  await expect(page).toHaveURL(/type=quickstart/);
   await page.keyboard.press('Escape');
   await expect(nav).toBeHidden();
-  await page.getByRole('button', { name: 'Clear all', exact: true }).click();
+  await page.getByRole('button', { name: 'Clear filters', exact: true }).click();
+  await expect(page).toHaveURL(/\/hub\/browse\/$/);
   await nav.locator('[aria-current="page"]').focus();
   await page.goBack();
   await expect(nav).toBeHidden();
diff --git a/src/frontend/tests/e2e/dev-empty-recovery.spec.ts b/src/frontend/tests/e2e/dev-empty-recovery.spec.ts
new file mode 100644
index 000000000..fac03ba9e
--- /dev/null
+++ b/src/frontend/tests/e2e/dev-empty-recovery.spec.ts
@@ -0,0 +1,148 @@
+import { expect, test } from '@playwright/test';
+
+test.beforeEach(async ({ page, isMobile }) => {
+  await page.addInitScript((swap) => {
+    localStorage.setItem('aspireConsentRequired', 'false');
+    if (swap) Object.defineProperty(document, 'startViewTransition', { value: undefined, configurable: true });
+  }, isMobile);
+});
+
+for (const surface of [
+  {
+    route: '/hub/browse/?type=blog&sort=oldest', root: 'resource-browser', query: 'aspire',
+    input: '#browse-search-input', empty: '.browse-empty', facet: 'type', value: 'blog',
+    toolbar: '[data-reset-filters], [data-reset-all]',
+  },
+  {
+    route: '/hub/glossary/?topic=foundations', root: 'glossary-browser', query: 'apphost',
+    input: '#glossary-search-input', empty: '[data-glossary-empty]', facet: 'topic', value: 'foundations',
+    toolbar: '#glossary-clear-filters',
+  },
+]) {
+  test(`${surface.root} shows one contextual recovery action without competing toolbar links`, async ({ page }) => {
+    await page.goto(surface.route);
+    const root = page.locator(surface.root);
+    const input = root.locator(surface.input);
+    const toolbar = root.locator(surface.toolbar).filter({ visible: true });
+    const empty = root.locator(surface.empty);
+    await expect(toolbar).toHaveCount(1);
+    await expect(toolbar).toHaveText('Clear filters');
+    await input.fill(surface.query);
+    await expect(empty).toBeHidden();
+    await expect(toolbar).toHaveCount(1);
+    await expect(toolbar).toHaveText('Reset all');
+
+    await input.fill('zzzz-no-match');
+    await expect(empty).toBeVisible();
+    await expect(toolbar).toHaveCount(0);
+    await expect(empty.getByRole('button')).toHaveCount(1);
+    await expect(empty.getByRole('button')).toHaveText('Clear search');
+    await empty.getByRole('button').click();
+    await expect(empty).toBeHidden();
+    await expect(input).toBeFocused();
+    await expect.poll(() => new URL(page.url()).searchParams.get(surface.facet)).toBe(surface.value);
+    await expect(toolbar).toHaveText('Clear filters');
+
+    await input.fill(surface.query);
+    await expect(toolbar).toHaveText('Reset all');
+    await toolbar.click();
+    await expect(input).toHaveValue('');
+    await expect(input).toBeFocused();
+    await expect(toolbar).toHaveCount(0);
+    await expect.poll(() => new URL(page.url()).searchParams.has(surface.facet)).toBe(false);
+    if (surface.route.includes('sort=')) expect(new URL(page.url()).searchParams.get('sort')).toBe('oldest');
+
+    await input.fill(surface.query);
+    await expect(empty).toBeHidden();
+    await expect(toolbar).toHaveCount(0);
+    await root.getByRole('button', { name: 'Clear search', exact: true }).click();
+    await expect(input).toHaveValue('');
+  });
+}
+
+for (const scenario of [
+  {
+    route: '/hub/browse/?q=ASPIRE001&type=blog&sort=oldest', input: '#browse-search-input',
+    empty: '.browse-empty', results: '[data-resource-entry]:not([hidden])', query: 'ASPIRE001',
+  },
+  {
+    route: '/hub/glossary/?q=WaitForCompletion&letter=A', input: '#glossary-search-input',
+    empty: '[data-glossary-empty]', results: '[data-glossary-card]:not([hidden])', query: 'WaitForCompletion',
+  },
+]) {
+  test(`${scenario.input} keeps the query when filters exclude its matches`, async ({ page }) => {
+    await page.goto(scenario.route);
+    const empty = page.locator(scenario.empty);
+    await expect(empty).toBeVisible();
+    await expect(empty.locator('.search-empty-title')).toContainText(`"${scenario.query}" with these filters`);
+    await empty.getByRole('button', { name: 'Clear filters', exact: true }).click();
+    await expect(empty).toBeHidden();
+    await expect(page.locator(scenario.input)).toHaveValue(scenario.query);
+    await expect(page.locator(scenario.input)).toBeFocused();
+    await expect(page.locator(scenario.results).first()).toBeVisible();
+    await expect.poll(() => new URL(page.url()).searchParams.get('q')).toBe(scenario.query);
+    await expect.poll(() => new URL(page.url()).searchParams.has('type') || new URL(page.url()).searchParams.has('letter')).toBe(false);
+    if (scenario.route.includes('sort=')) expect(new URL(page.url()).searchParams.get('sort')).toBe('oldest');
+    await page.goBack();
+    await expect(empty).toBeVisible();
+    await expect(page.locator(scenario.input)).toHaveValue(scenario.query);
+  });
+}
+
+test('browse clears an unmatched query while keeping Foundations and sort preferences', async ({ page }) => {
+  await page.goto('/hub/browse/?q=zzzz-no-match&topic=foundations&sort=oldest&title=desc');
+  const empty = page.locator('.browse-empty');
+  await expect(empty.locator('.search-empty-title')).toHaveText('No resources match "zzzz-no-match"');
+  await expect(empty.getByRole('list', { name: 'Active filters' }).getByRole('listitem')).toHaveText(['Topic: Foundations']);
+  await expect(empty.locator('.search-empty-hint')).not.toContainText('Topic: Foundations');
+  await empty.getByRole('button', { name: 'Clear search', exact: true }).click();
+  await expect(empty).toBeHidden();
+  await expect(page).toHaveURL(/\?topic=foundations&sort=oldest&title=desc$/);
+  await expect(page.locator('#browse-search-input')).toBeFocused();
+});
+
+test('browse resets both only when neither individual relaxation restores results', async ({ page }) => {
+  await page.goto('/hub/browse/?q=zzzz-no-match&type=diagnostic&provider=aws&sort=oldest');
+  const empty = page.locator('.browse-empty');
+  await expect(empty.getByRole('button')).toHaveText('Reset all');
+  await expect(empty.getByRole('list', { name: 'Active filters' }).getByRole('listitem')).toHaveText(['Type: Diagnostic', 'Provider: AWS']);
+  await expect(empty.locator('.search-empty-hint')).toContainText('clears both');
+  await empty.getByRole('button').click();
+  await expect(page).toHaveURL(/\?sort=oldest$/);
+  await expect(empty).toBeHidden();
+});
+
+test('glossary resets query and an incompatible topic/letter combination', async ({ page }) => {
+  await page.goto('/hub/glossary/');
+  const combination = await page.locator('[data-glossary-card]').evaluateAll((cards) => {
+    const entries = cards.map((card) => ({
+      letter: card.getAttribute('data-letter')!,
+      topics: card.getAttribute('data-topics')!.split(' '),
+    }));
+    for (const topic of new Set(entries.flatMap((entry) => entry.topics))) {
+      for (const letter of new Set(entries.map((entry) => entry.letter))) {
+        if (!entries.some((entry) => entry.letter === letter && entry.topics.includes(topic))) return { topic, letter };
+      }
+    }
+    return undefined;
+  });
+  expect(combination).toBeDefined();
+  await page.goto(`/hub/glossary/?q=zzzz-no-match&topic=${combination!.topic}&letter=${combination!.letter}`);
+  const empty = page.locator('[data-glossary-empty]');
+  await expect(empty.getByRole('button')).toHaveText('Reset all');
+  await empty.getByRole('button').click();
+  await expect(page).toHaveURL(/\/hub\/glossary\/$/);
+  await expect(page.locator('#glossary-search-input')).toHaveValue('');
+  await expect(empty).toBeHidden();
+});
+
+test('long query text wraps safely within the compact empty state', async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 900 });
+  await page.goto('/hub/browse/');
+  const query = '<img src=x onerror=alert(1)>' + 'z'.repeat(160);
+  await page.locator('#browse-search-input').fill(query);
+  const empty = page.locator('.browse-empty');
+  await expect(empty.locator('.search-empty-title')).toContainText(query);
+  await expect(empty.locator('img')).toHaveCount(0);
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
+});
diff --git a/src/frontend/tests/e2e/dev-glossary.spec.ts b/src/frontend/tests/e2e/dev-glossary.spec.ts
index 285494be2..b1b21b0ef 100644
--- a/src/frontend/tests/e2e/dev-glossary.spec.ts
+++ b/src/frontend/tests/e2e/dev-glossary.spec.ts
@@ -105,7 +105,7 @@ test('glossary toolbar keeps search compact and every letter reachable in both t
       }
       const search = (await page.getByRole('searchbox', { name: 'Find a term' }).boundingBox())!;
       expect(search.width).toBeLessThanOrEqual(512);
-      expect(search.height).toBe(44);
+      expect(search.height).toBe(48);
       const topics = (await page.locator('#glossary-kind-filters').boundingBox())!;
       const stats = (await page.locator('.glossary-controls .inpage-search-stats').boundingBox())!;
       if (width >= 1200) {
@@ -181,24 +181,25 @@ test('searches aliases, definitions, and context with combined letter/topic filt
   await expect(cards).toHaveCount(40);
   await search.fill('OTEL');
   await expect(page.locator('[data-glossary-card]:visible h3')).toContainText(['OpenTelemetry']);
-  await page.getByRole('button', { name: 'Clear filters', exact: true }).click();
+  await page.getByRole('button', { name: 'Clear search', exact: true }).click();
   await search.fill('configured readiness');
   await expect(page.locator('[data-glossary-card]:visible h3')).toContainText(['WaitFor']);
-  await page.getByRole('button', { name: 'Clear filters', exact: true }).click();
+  await page.getByRole('button', { name: 'Clear search', exact: true }).click();
   await page.getByRole('button', { name: 'Reference', exact: true }).click();
   await page.getByRole('navigation', { name: 'Glossary letters' }).getByRole('link', { name: 'W', exact: true }).click();
   await expect(cards).toHaveCount(5);
   await expect(page).toHaveURL(/topic=reference&letter=W/);
   await search.fill('no-such-term');
-  await expect(page.getByRole('heading', { name: 'No matching terms' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'No terms match "no-such-term"' })).toBeVisible();
   await expect(cards).toHaveCount(0);
   await expect(page.getByRole('button', { name: 'Clear filters', exact: true })).toBeHidden();
-  await page.getByRole('button', { name: 'Show all terms', exact: true }).click();
-  await expect(cards).toHaveCount(40);
+  await page.locator('[data-glossary-empty]').getByRole('button', { name: 'Clear search', exact: true }).click();
+  await expect(cards).toHaveCount(5);
+  await expect(page).toHaveURL(/topic=reference&letter=W/);
   await expect(search).toBeFocused();
 });
 
-test('empty results stay compact and offer one reset action in both themes', async ({ page }) => {
+test('empty results stay compact and offer one intent-preserving action in both themes', async ({ page }) => {
   await page.emulateMedia({ reducedMotion: 'reduce' });
   await page.goto('/hub/glossary/?q=abd&topic=reference&letter=W');
   for (const width of [390, 768, 1440]) {
@@ -212,16 +213,27 @@ test('empty results stay compact and offer one reset action in both themes', asy
       const filterPanel = (await page.locator('.glossary-filter-panel').boundingBox())!;
       expect(bounds.y - (filterPanel.y + filterPanel.height)).toBeGreaterThanOrEqual(0);
       expect(bounds.y - (filterPanel.y + filterPanel.height)).toBeLessThanOrEqual(16);
-      expect(bounds.height).toBeLessThan(width >= 768 ? 160 : 240);
+      expect(bounds.height).toBeLessThan(width >= 768 ? 176 : 240);
+      const parts = await empty.locator('.search-empty-title, .search-empty-hint, .search-active-filters, .search-action').evaluateAll(
+        (elements) => elements.map((element) => {
+          const bounds = element.getBoundingClientRect();
+          return { x: bounds.x, y: bounds.y, bottom: bounds.bottom };
+        }),
+      );
+      expect(parts).toHaveLength(4);
+      for (let index = 1; index < parts.length; index++) {
+        expect(parts[index].x).toBeCloseTo(parts[0].x, 0);
+        expect(parts[index].y).toBeGreaterThanOrEqual(parts[index - 1].bottom);
+      }
       expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
       const result = await new AxeBuilder({ page }).include('glossary-browser').analyze();
       expect(result.violations).toEqual([]);
     }
   }
-  await page.getByRole('button', { name: 'Show all terms', exact: true }).press('Enter');
+  await page.locator('[data-glossary-empty]').getByRole('button', { name: 'Clear search', exact: true }).press('Enter');
   await expect(page.getByRole('searchbox', { name: 'Find a term' })).toBeFocused();
-  await expect(page.locator('[data-glossary-card]:visible')).toHaveCount(40);
-  await expect(page).toHaveURL(/\/hub\/glossary\/$/);
+  await expect(page.locator('[data-glossary-card]:visible')).toHaveCount(5);
+  await expect(page).toHaveURL(/\/hub\/glossary\/\?topic=reference&letter=W$/);
   await expect(page.locator('[data-glossary-empty]')).toBeHidden();
 });
 
@@ -231,12 +243,13 @@ test('restores filters on reload and Back, and supports keyboard return to the s
   await page.reload();
   await expect(page.getByRole('searchbox')).toHaveValue('wait');
   await page.getByRole('button', { name: 'Foundations', exact: true }).click();
+  await expect(page).toHaveURL(/topic=foundations/);
   await page.goBack();
   await expect(page.getByRole('button', { name: 'Reference', exact: true })).toHaveAttribute('aria-pressed', 'true');
   await expect(page.getByRole('button', { name: 'Foundations', exact: true })).toHaveAttribute('aria-pressed', 'false');
   await page.getByRole('heading', { name: 'WaitFor', exact: true }).getByRole('link').click();
   await expect(page.getByRole('heading', { level: 1, name: 'WaitFor', exact: true })).toBeVisible();
-  await expect(page.locator('h1')).toHaveCount(1);
+  await expect(page.locator('main h1')).toHaveCount(1);
   const collapsedBreadcrumb = page.locator('.bc-collapse summary');
   if (await collapsedBreadcrumb.isVisible()) await collapsedBreadcrumb.press('Enter');
   await page.getByRole('link', { name: 'Back to your glossary results' }).press('Enter');
@@ -687,7 +700,7 @@ test('topic pills support multiple selections, keyboard toggling, and persistent
   await expect(reference).toHaveAttribute('aria-pressed', 'true');
   await expect(foundations).toHaveAttribute('aria-pressed', 'true');
   await expect(cards).toHaveCount(expected);
-  expect(new URL(page.url()).searchParams.getAll('topic')).toEqual(['foundations', 'reference']);
+  await expect.poll(() => new URL(page.url()).searchParams.getAll('topic')).toEqual(['foundations', 'reference']);
   await page.reload();
   await expect(cards).toHaveCount(expected);
   await expect(reference).toHaveClass(/active/);
diff --git a/src/frontend/tests/e2e/dev-grain.spec.ts b/src/frontend/tests/e2e/dev-grain.spec.ts
index b4778f423..8efe3dc07 100644
--- a/src/frontend/tests/e2e/dev-grain.spec.ts
+++ b/src/frontend/tests/e2e/dev-grain.spec.ts
@@ -1,6 +1,65 @@
 import { expect, test } from '@playwright/test';
 import sharp from 'sharp';
 
+for (const route of ['/hub/browse/', '/hub/glossary/']) {
+  test(`${route} controls container reuses passive static Hub grain`, async ({ page }) => {
+    await page.addInitScript(() => localStorage.setItem('aspireConsentRequired', 'false'));
+    await page.goto(`${route}?q=zzzz-no-match&topic=foundations`);
+    const empty = page.locator('.search-empty:visible');
+    const controls = page.locator('.browse-controls, .glossary-filter-panel');
+    await expect(empty).toBeVisible();
+    await expect(empty).not.toHaveClass(/hub-grain/);
+    await page.evaluate(() => document.fonts.ready);
+    for (const theme of ['light', 'dark']) {
+      await page.locator('html').evaluate((html, value) => html.dataset.theme = value, theme);
+      const texture = await controls.evaluate((element) => {
+        const style = getComputedStyle(element, '::before');
+        return { image: style.backgroundImage, opacity: style.opacity, pointerEvents: style.pointerEvents, animation: style.animationName };
+      });
+      expect(texture.image).toContain('repeating-conic-gradient');
+      expect(texture.opacity).toBe('0.11');
+      expect(texture.pointerEvents).toBe('none');
+      expect(texture.animation).toBe('none');
+      const options = { animations: 'disabled', scale: 'css' } as const;
+      const image = await controls.screenshot(options);
+      const { width } = await sharp(image).metadata();
+      // Measure exposed background, not text, focus, or rounded-border rasterization.
+      const strip = { left: 16, top: 3, width: width! - 32, height: 10 };
+      const pixels = await sharp(image).extract(strip).removeAlpha().raw().toBuffer();
+      const nextPixels = await sharp(await controls.screenshot(options)).extract(strip).removeAlpha().raw().toBuffer();
+      expect(pixels.equals(nextPixels)).toBe(true);
+      const hidden = await page.addStyleTag({ content: '.hub-grain::before { opacity: 0 !important; }' });
+      const baselineImage = await controls.screenshot(options);
+      await hidden.evaluate((element) => element.remove());
+      const baseline = await sharp(baselineImage).extract(strip).removeAlpha().raw().toBuffer();
+      let difference = 0;
+      for (let index = 0; index < pixels.length; index++) difference += Math.abs(pixels[index] - baseline[index]);
+      const meanDifference = difference / pixels.length;
+      expect(meanDifference, 'The grain must actually render').toBeGreaterThan(0.02);
+      expect(meanDifference, 'The texture must remain subtle behind the text').toBeLessThan(8);
+    }
+    await page.emulateMedia({ forcedColors: 'active' });
+    expect(await controls.evaluate((element) => getComputedStyle(element, '::before').display)).toBe('none');
+    await page.emulateMedia({ forcedColors: 'none' });
+    await empty.getByRole('button', { name: 'Clear search', exact: true }).click();
+    await expect(empty).toBeHidden();
+    await expect(page.locator('main .search-field-input')).toBeFocused();
+    await expect(page).toHaveURL(/topic=foundations/);
+    await expect.poll(() => new URL(page.url()).searchParams.has('q')).toBe(false);
+    if (route === '/hub/browse/') {
+      await page.locator('[data-filter-group="type"] summary').click();
+      if (page.viewportSize()!.width < 600) {
+        expect(await page.evaluate(() => {
+          const headerBottom = document.querySelector('header')!.getBoundingClientRect().bottom;
+          return document.elementFromPoint(4, Math.ceil(headerBottom + 1))?.classList.contains('browse-filter-backdrop');
+        })).toBe(true);
+      }
+      await page.locator('[data-filter-group="type"] input[value="glossary"]').check();
+      await expect(page).toHaveURL(/type=glossary/);
+    }
+  });
+}
+
 function textureStats(pixels: number[], size: number) {
   const mean = pixels.reduce((sum, value) => sum + value, 0) / pixels.length;
   const centered = pixels.map((value) => value - mean);
diff --git a/src/frontend/tests/e2e/dev-navigation.spec.ts b/src/frontend/tests/e2e/dev-navigation.spec.ts
new file mode 100644
index 000000000..72a220233
--- /dev/null
+++ b/src/frontend/tests/e2e/dev-navigation.spec.ts
@@ -0,0 +1,138 @@
+import { expect, test, type Page } from '@playwright/test';
+
+async function navigate(page: Page, href: string) {
+  await page.evaluate((destination) => {
+    Reflect.set(window, '__devNavigationLoaded', false);
+    document.addEventListener('astro:page-load', () => {
+      Reflect.set(window, '__devNavigationLoaded', true);
+    }, { once: true });
+    const link = document.createElement('a');
+    link.href = destination;
+    document.body.append(link);
+    link.click();
+  }, href);
+  await expect.poll(() => page.evaluate(() => Reflect.get(window, '__devNavigationLoaded')), { timeout: 60_000 }).toBe(true);
+  expect(await page.evaluate(() => Reflect.get(window, '__devNavigationSession'))).toBe(true);
+}
+
+for (const fallback of [false, true]) {
+  test.describe(fallback ? 'hub swap fallback' : 'hub native transitions', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.addInitScript((swap) => {
+        localStorage.setItem('aspireConsentRequired', 'false');
+        if (swap) Object.defineProperty(document, 'startViewTransition', { value: undefined, configurable: true });
+      }, fallback);
+      await page.goto('/hub/');
+      await page.evaluate(() => Reflect.set(window, '__devNavigationSession', true));
+    });
+
+    test('browse artwork survives client entry, paging and returning from another route', async ({ page }) => {
+      test.setTimeout(120_000);
+      await navigate(page, '/hub/browse/?q=redis');
+      const browser = page.locator('resource-browser');
+      const images = browser.locator('[data-resource-entry]:not([hidden]) img');
+      await expect(browser).toHaveAttribute('data-ready', '');
+      expect(await images.count()).toBeGreaterThan(0);
+      for (const theme of ['light', 'dark']) {
+        await page.locator('html').evaluate((html, value) => { html.dataset.theme = value; }, theme);
+        const first = images.filter({ visible: true }).first();
+        await first.scrollIntoViewIfNeeded();
+        await expect.poll(() => first.evaluate((image: HTMLImageElement) => image.complete && image.naturalWidth > 0)).toBe(true);
+      }
+      expect(await browser.locator('template[data-resource-image]').count()).toBeGreaterThan(0);
+      await navigate(page, '/hub/glossary/');
+      await page.goBack();
+      await expect(page.locator('#browse-search-input')).toHaveValue('redis');
+      expect(await images.count()).toBeGreaterThan(0);
+      expect(await page.evaluate(() => Reflect.get(window, '__devNavigationSession'))).toBe(true);
+      await page.locator('#browse-search-clear').click();
+      await page.getByRole('button', { name: 'Next', exact: true }).click();
+      await expect(page.locator('[data-page-label]')).toHaveText(/Page 2 of/);
+      expect(await images.count()).toBeGreaterThan(0);
+      await expect(browser.locator('[data-resource-entry]:not([hidden]) template[data-resource-image]')).toHaveCount(0);
+    });
+
+    for (const [route, input] of [
+      ['/hub/browse/', '#browse-search-input'],
+      ['/hub/glossary/', '#glossary-search-input'],
+    ]) {
+      test(`${route} preserves router history after typing and leaving`, async ({ page }) => {
+        await navigate(page, route);
+        await page.locator(input).fill('redis');
+        const state = await page.evaluate(() => history.state);
+        expect(state).toMatchObject({ index: expect.any(Number), scrollX: expect.any(Number), scrollY: expect.any(Number) });
+        await navigate(page, '/hub/');
+        await page.goBack();
+        await expect(page.locator(input)).toHaveValue('redis');
+        await expect(page).toHaveURL(new RegExp(`${route}\\?q=redis$`));
+        await page.goForward();
+        await expect(page.locator('.dev-home')).toBeVisible();
+        expect(await page.evaluate(() => Reflect.get(window, '__devNavigationSession'))).toBe(true);
+      });
+    }
+
+    test('browse failure on client entry exposes static images and links', async ({ page }) => {
+      await page.route('**/*ResourceBrowser*', (route) => route.request().resourceType() === 'script' ? route.abort() : route.continue());
+      await navigate(page, '/hub/browse/');
+      const browser = page.locator('resource-browser');
+      await expect(browser).not.toHaveAttribute('aria-busy');
+      await expect(browser.locator('[data-browse-static]')).toContainText('Interactive browsing could not load');
+      expect(await browser.locator('[data-resource-entry]:visible').count()).toBeGreaterThan(24);
+      expect(await browser.locator('img').count()).toBeGreaterThan(0);
+    });
+
+    test('browse also enhances after leaving API documentation', async ({ page }) => {
+      await navigate(page, '/reference/api/typescript/');
+      await navigate(page, '/hub/browse/?q=redis');
+      await expect(page.locator('resource-browser')).toHaveAttribute('data-ready', '');
+      await expect(page.locator('#browse-search-input')).toHaveValue('redis');
+      await expect(page.locator('main h1')).toHaveText('Browse resources');
+      expect(await page.locator('[data-resource-entry]:not([hidden]) img').count()).toBeGreaterThan(0);
+    });
+
+    test('browse clear actions preserve query, facets and sorting independently', async ({ page }) => {
+      await navigate(page, '/hub/browse/?q=aspire&type=blog&sort=oldest&title=desc');
+      await page.locator('#browse-search-clear').click();
+      await expect(page).toHaveURL(/\?type=blog&sort=oldest&title=desc$/);
+      await page.locator('[data-reset-filters]').click();
+      await expect(page).toHaveURL(/\?sort=oldest&title=desc$/);
+      await navigate(page, '/hub/browse/?q=zzzz-no-match&type=blog&sort=oldest');
+      await expect(page.locator('.browse-empty')).toBeVisible();
+      await expect(page.locator('.browse-empty button')).toHaveText('Clear search');
+      await page.locator('.browse-empty button').click();
+      await expect(page).toHaveURL(/\?type=blog&sort=oldest$/);
+      await expect(page.locator('#browse-search-input')).toBeFocused();
+    });
+
+    test('glossary clear actions distinguish text from topic filters', async ({ page }) => {
+      await navigate(page, '/hub/glossary/?q=apphost&topic=foundations');
+      await page.locator('#glossary-search-clear').click();
+      await expect(page).toHaveURL(/\?topic=foundations$/);
+      await page.locator('#glossary-clear-filters').click();
+      await expect(page).toHaveURL(/\/hub\/glossary\/$/);
+      await expect(page.locator('#glossary-search-input')).toHaveValue('');
+      await navigate(page, '/hub/glossary/?q=zzzz-no-match');
+      await expect(page.locator('[data-clear-glossary]')).toHaveText('Clear search');
+      await page.locator('[data-clear-glossary]').click();
+      await expect(page).toHaveURL(/\/hub\/glossary\/$/);
+      await expect(page.locator('#glossary-search-input')).toBeFocused();
+    });
+
+    test('typing during a pending glossary filter navigation keeps the latest query', async ({ page }) => {
+      await navigate(page, '/hub/glossary/');
+      await page.route('**/hub/glossary/?*', async (route) => {
+        await new Promise((resolve) => setTimeout(resolve, 150));
+        await route.continue();
+      });
+      await page.getByRole('button', { name: 'Foundations', exact: true }).click();
+      await page.locator('#glossary-search-input').fill('apphost');
+      await expect(page).toHaveURL(/\?q=apphost&topic=foundations$/);
+      await expect(page.locator('#glossary-search-input')).toHaveValue('apphost');
+      await expect(page.getByRole('button', { name: 'Foundations', exact: true })).toHaveAttribute('aria-pressed', 'true');
+      await navigate(page, '/hub/');
+      await page.goBack();
+      await expect(page.locator('#glossary-search-input')).toHaveValue('apphost');
+      await expect(page.getByRole('button', { name: 'Foundations', exact: true })).toHaveAttribute('aria-pressed', 'true');
+    });
+  });
+}
diff --git a/src/frontend/tests/e2e/filter-navigation.spec.ts b/src/frontend/tests/e2e/filter-navigation.spec.ts
index c0e7a6d2f..fceda7c04 100644
--- a/src/frontend/tests/e2e/filter-navigation.spec.ts
+++ b/src/frontend/tests/e2e/filter-navigation.spec.ts
@@ -147,7 +147,7 @@ test('sample search, tags and reset survive repeated navigation', async ({ page
     await chip.click();
     await expect(chip).toHaveAttribute('aria-pressed', 'true');
     await expect(page).toHaveURL(/tags=/);
-    await page.locator('[data-clear-all]').click();
+    await page.locator('[data-clear-filters]').click();
     await expect(chip).toHaveAttribute('aria-pressed', 'false');
     await expect(page).not.toHaveURL(/tags=/);
   }
diff --git a/src/frontend/tests/e2e/gallery-search-contract.spec.ts b/src/frontend/tests/e2e/gallery-search-contract.spec.ts
new file mode 100644
index 000000000..59e0d814a
--- /dev/null
+++ b/src/frontend/tests/e2e/gallery-search-contract.spec.ts
@@ -0,0 +1,472 @@
+import { expect, test, type Page } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+import { dismissCookieConsentIfVisible } from '@tests/e2e/helpers';
+
+test.beforeEach(async ({ page, isMobile }) => {
+  if (isMobile) await page.addInitScript(() => {
+    Object.defineProperty(document, 'startViewTransition', { configurable: true, value: undefined });
+  });
+});
+
+async function start(page: Page, path: string) {
+  await page.goto(path);
+  await dismissCookieConsentIfVisible(page);
+}
+
+test('integration query, facets and recovery have independent scopes', async ({ page }) => {
+  await start(page, '/integrations/gallery/?keep=1#catalog');
+  const input = page.locator('input.filter');
+  const official = page.locator('[data-type="official"]');
+  const community = page.locator('[data-type="community"]');
+  const recovery = page.locator('[data-integration-recover]');
+  await expect(input).toHaveAccessibleName(/search/i);
+  await input.fill('asfd');
+  await expect(recovery).toHaveText('Clear search');
+  await official.click();
+  await expect(official).toHaveAttribute('aria-pressed', 'false');
+  await expect(community).toHaveAttribute('aria-pressed', 'true');
+  await expect(page.locator('.search-results-bar .search-action:visible')).toHaveCount(0);
+  await expect(page.locator('.no-results .search-action:visible')).toHaveCount(1);
+  await expect(recovery).toHaveText('Clear search');
+  await expect(page.locator('.no-results .search-empty-title')).toHaveText('No integrations match “asfd”');
+  await expect(page.locator('.no-results .search-empty-hint')).toContainText('matching your selected filters');
+  const activeFilters = page.locator('.no-results .search-active-filters');
+  await expect(activeFilters).toHaveAccessibleName('Active filters');
+  await expect(activeFilters.locator('li')).toHaveText([`Excluded: ${(await official.textContent())!.trim()}`]);
+  await expect(activeFilters.locator('button, a, input')).toHaveCount(0);
+  await expect(page.locator('.no-results .search-empty-hint')).not.toContainText('Excluded:');
+  await page.locator('.clear-button').click();
+  await expect(input).toBeFocused();
+  await expect(input).toHaveValue('');
+  await expect(official).toHaveAttribute('aria-pressed', 'false');
+  await community.click();
+  await expect(recovery).toHaveText('Clear filters');
+  await recovery.click();
+  await expect(official).toHaveAttribute('aria-pressed', 'true');
+  await expect(community).toHaveAttribute('aria-pressed', 'true');
+  await input.fill('zzzznonexistent');
+  await official.click();
+  await expect(page.locator('.search-results-bar .search-action:visible')).toHaveCount(0);
+  await official.click();
+  await expect(input).toHaveValue('zzzznonexistent');
+  await expect(activeFilters).toBeHidden();
+  await expect(recovery).toHaveText('Clear search');
+  await official.click();
+  await recovery.click();
+  await expect(input).toHaveValue('');
+  await expect(input).toBeFocused();
+  await expect(official).toHaveAttribute('aria-pressed', 'false');
+  await page.locator('[data-integration-clear-filters]').click();
+  await expect(page.locator('[data-integration-count]')).not.toHaveText(/^0 of/);
+  await expect(page).toHaveURL(/keep=1#catalog$/);
+});
+
+for (const catalog of [
+  { name: 'integration', path: '/integrations/gallery/', input: 'input.filter', facet: '[data-type="community"]', clear: '.clear-button', toolbar: '.search-results-bar', empty: '.no-results' },
+  { name: 'sample', path: '/reference/samples/', input: '#samples-search-input', facet: '[data-tag]', clear: '[data-clear-btn]', toolbar: '.results-bar', empty: '[data-empty-state]' },
+]) {
+  test(`${catalog.name} recovery actions follow one contextual hierarchy`, async ({ page }) => {
+    await start(page, catalog.path);
+    const input = page.locator(catalog.input);
+    const facet = page.locator(catalog.facet).first();
+    const toolbar = page.locator(`${catalog.toolbar} .search-action:visible`);
+    const empty = page.locator(catalog.empty);
+    const query = catalog.name === 'sample' ? (await facet.getAttribute('data-tag'))! : 'aspire';
+    const tagToggle = page.locator('[data-tag-toggle]');
+    if (await tagToggle.isVisible() && await tagToggle.getAttribute('aria-expanded') === 'false') {
+      await tagToggle.click();
+    }
+    await expect(toolbar).toHaveCount(0);
+    await facet.click();
+    await expect(toolbar).toHaveCount(1);
+    await expect(toolbar).toHaveText('Clear filters');
+    await input.fill(query);
+    await expect(empty).toBeHidden();
+    await expect(toolbar).toHaveCount(1);
+    await expect(toolbar).toHaveText('Reset all');
+    await page.locator(catalog.clear).click();
+    await expect(toolbar).toHaveCount(1);
+    await expect(toolbar).toHaveText('Clear filters');
+    await input.fill(query);
+    await expect(toolbar).toHaveText('Reset all');
+    await toolbar.click();
+    await expect(input).toHaveValue('');
+    await expect(toolbar).toHaveCount(0);
+    await input.fill(query);
+    await expect(empty).toBeHidden();
+    await expect(toolbar).toHaveCount(0);
+    await input.fill('zzzznonexistent');
+    await expect(empty).toBeVisible();
+    await expect(toolbar).toHaveCount(0);
+    await expect(empty.locator('.search-action:visible')).toHaveCount(1);
+    await facet.click();
+    await expect(toolbar).toHaveCount(0);
+    await expect(empty.locator('.search-action:visible')).toHaveCount(1);
+    await expect(empty.locator('.search-action')).toHaveText('Clear search');
+    await expect(page.locator(catalog.clear)).toBeVisible();
+    await expect(facet).toBeEnabled();
+    await empty.locator('.search-action').click();
+    await expect(input).toHaveValue('');
+    await expect(toolbar).toHaveCount(1);
+    await expect(toolbar).toHaveText('Clear filters');
+  });
+}
+
+test('sample facet-only zero matches recover without changing the query', async ({ page }) => {
+  await start(page, '/reference/samples/');
+  const pair = await page.locator('[data-sample-item] .sample-card').evaluateAll((cards) => {
+    const sets = cards.map((card) => (card.getAttribute('data-tags') ?? '').split(','));
+    const tags = [...new Set(sets.flat())].filter(Boolean);
+    for (const first of tags) {
+      for (const second of tags) {
+        if (first !== second && !sets.some((set) => set.includes(first) && set.includes(second))) {
+          return [first, second];
+        }
+      }
+    }
+    return [];
+  });
+  expect(pair).toHaveLength(2);
+  const toggle = page.locator('[data-tag-toggle]');
+  if (await toggle.isVisible()) await toggle.click();
+  for (const tag of pair) await page.locator(`[data-tag="${tag}"]`).click();
+  const recovery = page.locator('[data-reset-btn]');
+  await expect(recovery).toHaveText('Clear filters');
+  await expect(page.locator('.results-bar .search-action:visible')).toHaveCount(0);
+  await recovery.click();
+  await expect(page.locator('#samples-search-input')).toHaveValue('');
+  await expect(page.locator('[data-tag][aria-pressed="true"]')).toHaveCount(0);
+  await expect(page.locator('[data-empty-state]')).toBeHidden();
+  // A real query can be recovered by resetting facets, even if the facet
+  // combination itself is empty. Prefer preserving that query.
+  for (const tag of pair) await page.locator(`[data-tag="${tag}"]`).click();
+  const input = page.locator('#samples-search-input');
+  await input.fill(pair[0]);
+  await expect(recovery).toHaveText('Clear filters');
+  await expect(page.locator('[data-empty-state] .search-empty-title'))
+    .toHaveText(`No samples match “${pair[0]}” with your selected filters`);
+  const selectedLabels = await page.locator('[data-tag][aria-pressed="true"]').evaluateAll(
+    (chips) => chips.map((chip) => chip.getAttribute('data-tag-label')!),
+  );
+  const activeFilters = page.locator('[data-empty-state] .search-active-filters');
+  await expect(activeFilters).toHaveAccessibleName('Active filters');
+  await expect(activeFilters.locator('li')).toHaveText(selectedLabels);
+  await expect(activeFilters.locator('button, a, input')).toHaveCount(0);
+  await expect(page.locator('[data-empty-state] .search-empty-hint')).not.toContainText('Selected filters:');
+  await recovery.click();
+  await expect(input).toHaveValue(pair[0]);
+  await expect(input).toBeFocused();
+  await expect(page.locator('[data-empty-state]')).toBeHidden();
+
+  // Neither removing the query nor removing the facets can recover this state.
+  for (const tag of pair) await page.locator(`[data-tag="${tag}"]`).click();
+  await input.fill('zzzznonexistent');
+  await expect(recovery).toHaveText('Reset all');
+  await expect(page.locator('.results-bar .search-action:visible')).toHaveCount(0);
+  await expect(page.locator('[data-empty-state] .search-empty-hint')).toContainText('reset your search and filters');
+  await recovery.click();
+  await expect(input).toHaveValue('');
+  await expect(page.locator('[data-tag][aria-pressed="true"]')).toHaveCount(0);
+  await expect(page.locator('[data-empty-state]')).toBeHidden();
+});
+
+test('integration recovery distinguishes a blocked query from an impossible combination', async ({ page }) => {
+  await start(page, '/integrations/gallery/');
+  const query = await page.locator('.card-grid .card').first().getAttribute('data-title');
+  expect(query).toBeTruthy();
+  const input = page.locator('input.filter');
+  const recovery = page.locator('[data-integration-recover]');
+  await page.locator('[data-type="official"]').click();
+  await page.locator('[data-type="community"]').click();
+  await input.fill(query!);
+  await expect(recovery).toHaveText('Clear filters');
+  await expect(page.locator('.search-results-bar .search-action:visible')).toHaveCount(0);
+  await expect(page.locator('.no-results .search-empty-title'))
+    .toHaveText(`No integrations match “${query}” with your selected filters`);
+  await recovery.click();
+  await expect(input).toHaveValue(query!);
+  await expect(input).toBeFocused();
+  await expect(page.locator('.no-results')).toBeHidden();
+  await page.locator('[data-type="official"]').click();
+  await page.locator('[data-type="community"]').click();
+  await input.fill('zzzznonexistent');
+  await expect(recovery).toHaveText('Reset all');
+  await expect(page.locator('.search-results-bar .search-action:visible')).toHaveCount(0);
+  await recovery.click();
+  await expect(input).toHaveValue('');
+  await expect(page.locator('[data-type="official"]')).toHaveAttribute('aria-pressed', 'true');
+  await expect(page.locator('[data-type="community"]')).toHaveAttribute('aria-pressed', 'true');
+  await expect(page.locator('.no-results')).toBeHidden();
+});
+
+for (const [path, inputSelector, emptySelector] of [
+  ['/integrations/gallery/', 'input.filter', '.no-results'],
+  ['/reference/samples/', '#samples-search-input', '[data-empty-state]'],
+  ['/aspireconf/', '.session-search', '.no-results-msg'],
+]) {
+  test(`${path} contextual query remains literal text`, async ({ page }) => {
+    await start(page, path);
+    const query = '<svg/onload=alert(1)>$&';
+    await page.locator(inputSelector).fill(query);
+    const empty = page.locator(emptySelector);
+    await expect(empty).toBeVisible();
+    await expect(empty.locator('.search-empty-title')).toContainText(query);
+    await expect(empty.locator('.search-empty-title svg')).toHaveCount(0);
+    await expect(empty.getByRole('button', { name: 'Clear search', exact: true })).toBeVisible();
+  });
+}
+
+test('sample query, tags and recovery have independent scopes', async ({ page }) => {
+  await start(page, '/reference/samples/?keep=1#catalog');
+  const input = page.locator('#samples-search-input');
+  const chip = page.locator('[data-tag]').first();
+  const recovery = page.locator('[data-reset-btn]');
+  await input.fill('zzzznonexistent');
+  await expect(recovery).toHaveText('Clear search');
+  await chip.click();
+  await expect(recovery).toHaveText('Clear search');
+  await expect(page.locator('[data-empty-state] .search-empty-title')).toHaveText('No samples match “zzzznonexistent”');
+  await expect(page.locator('[data-empty-state] .search-empty-hint')).toContainText('matching your selected filters');
+  await page.locator('[data-clear-btn]').click();
+  await expect(input).toBeFocused();
+  await expect(chip).toHaveAttribute('aria-pressed', 'true');
+  await input.fill('zzzznonexistent');
+  await expect(page.locator('.results-bar .search-action:visible')).toHaveCount(0);
+  await chip.click();
+  await expect(input).toHaveValue('zzzznonexistent');
+  await expect(page.locator('[data-empty-state] .search-active-filters')).toBeHidden();
+  await expect(chip).toHaveAttribute('aria-pressed', 'false');
+  await chip.click();
+  await recovery.click();
+  await expect(input).toHaveValue('');
+  await expect(input).toBeFocused();
+  await expect(chip).toHaveAttribute('aria-pressed', 'true');
+  await page.locator('[data-clear-filters]').click();
+  await expect(chip).toHaveAttribute('aria-pressed', 'false');
+  await expect(page.locator('[data-results-count]')).not.toHaveText(/^0 of/);
+  await expect(page).toHaveURL(/keep=1#catalog$/);
+});
+
+test('session recovery preserves clock and timezone preferences on repeated visits', async ({ page }) => {
+  await start(page, '/aspireconf/');
+  await page.evaluate(() => Reflect.set(window, '__sessionSearchNavigation', true));
+  for (let visit = 0; visit < 2; visit++) {
+    const input = page.locator('.session-search');
+    const clock = page.locator('.clock-toggle');
+    await clock.click();
+    const preference = await clock.getAttribute('data-active');
+    const timezone = await page.locator('.tz-toggle').getAttribute('data-active');
+    await input.fill('zzzznonexistent');
+    await expect(page.locator('.no-results-msg')).toBeVisible();
+    await expect(page.locator('.no-results-msg .search-empty-title')).toHaveText('No sessions match “zzzznonexistent”');
+    await expect(page.locator('.filter-summary')).toHaveText(/^0 of \d+ sessions$/);
+    await page.locator('[data-session-recover]').click();
+    await expect(input).toHaveValue('');
+    await expect(input).toBeFocused();
+    await expect(clock).toHaveAttribute('data-active', preference!);
+    await expect(page.locator('.tz-toggle')).toHaveAttribute('data-active', timezone!);
+    await expect(page.locator('.no-results-msg')).toBeHidden();
+    await page.evaluate(() => {
+      const link = document.createElement('a');
+      link.href = '/reference/overview/';
+      document.body.append(link);
+      link.click();
+    });
+    await expect(page).toHaveURL(/\/reference\/overview\/$/);
+    await page.goBack();
+    await expect(input).toBeVisible();
+    expect(await page.evaluate(() => Reflect.get(window, '__sessionSearchNavigation'))).toBe(true);
+  }
+});
+
+test('gallery and conference result summaries use regular shared typography', async ({ page }) => {
+  for (const [path, inputSelector, summarySelector] of [
+    ['/integrations/gallery/', 'input.filter', '[data-integration-count]'],
+    ['/reference/samples/', '#samples-search-input', '[data-results-count]'],
+    ['/aspireconf/', '.session-search', '.filter-summary'],
+  ]) {
+    await start(page, path);
+    const summary = page.locator(summarySelector);
+    await expect(summary).toHaveClass(/search-results-summary/);
+    await expect(summary).toHaveCSS('font-size', '14px');
+    await expect(summary).toHaveCSS('font-weight', '400');
+    await expect(summary).toHaveCSS('font-style', 'normal');
+    await expect(summary).toHaveCSS('line-height', '21px');
+    await page.locator(inputSelector).fill('zzzznonexistent');
+    await expect(summary).toHaveText(/^0 of \d+ (integrations|samples|sessions)$/);
+    await expect(summary).toHaveCSS('font-style', 'normal');
+  }
+});
+
+test('sidebar zero matches have one query recovery and retain focus', async ({ page, isMobile }) => {
+  await start(page, '/reference/api/csharp/');
+  if (isMobile) await page.locator('starlight-menu-button button').click();
+  const input = page.locator('#sidebar-filter-input');
+  await expect(input).toHaveAttribute('placeholder', 'Filter by title...');
+  const field = input.locator('..');
+  await expect(field).toHaveAttribute('data-search-size', 'sm');
+  const coarse = await page.evaluate(() => matchMedia('(pointer: coarse)').matches);
+  await expect(input).toHaveCSS('height', coarse ? '48px' : '40px');
+  await expect(input).toHaveCSS('font-size', '16px');
+  await expect(field.locator('.search-field-icon')).toHaveCSS('width', '18px');
+  await expect(field.locator('.search-field-icon polygon')).toHaveAttribute(
+    'points', '22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3',
+  );
+  await expect(field.locator('.search-field-icon circle')).toHaveCount(0);
+  for (const theme of ['light', 'dark']) {
+    await page.locator('html').evaluate((html, value) => { html.dataset.theme = value; }, theme);
+    const background = await input.evaluate((element) => {
+      const probe = document.createElement('span');
+      probe.style.backgroundColor = 'var(--sidebar-dropdown-trigger-bg)';
+      element.parentElement!.append(probe);
+      const color = getComputedStyle(probe).backgroundColor;
+      probe.remove();
+      element.blur();
+      return color;
+    });
+    await expect(input).toHaveCSS('background-color', background);
+    await input.focus();
+    await expect(input).toHaveCSS('background-color', background);
+  }
+  await input.fill('zzzznonexistent');
+  await expect(field.locator('.search-field-clear')).toHaveAccessibleName('Clear search');
+  await expect(field.locator('.search-field-clear')).toHaveText('');
+  await expect(page.locator('#sidebar-filter-empty')).toBeVisible();
+  const empty = page.locator('#sidebar-filter-empty');
+  await expect(empty).toHaveCSS('border-top-style', 'dashed');
+  await expect(empty).toHaveCSS('padding', '16px');
+  await expect(empty).toHaveCSS('background-image', 'none');
+  await expect(page.locator('#sidebar-filter-empty-copy')).toHaveClass(/search-empty-title/);
+  await expect(page.locator('#sidebar-filter-empty-copy')).toHaveCSS('font-size', '16px');
+  await expect(page.locator('#sidebar-filter-empty-copy')).toHaveCSS('font-weight', '600');
+  await expect(page.locator('#sidebar-filter-empty-copy')).toHaveCSS('line-height', '24px');
+  await expect(empty.locator('.search-empty-hint')).toHaveText('Try another term, or clear your search to browse all results.');
+  await expect(empty.locator('.search-empty-hint')).toHaveCSS('font-size', '14px');
+  await expect(empty.locator('.search-empty-hint')).toHaveCSS('font-weight', '400');
+  await expect(empty.locator('.search-empty-hint')).toHaveCSS('line-height', '21px');
+  await expect(page.locator('#sidebar-filter-empty-action')).toHaveCSS('font-size', '14px');
+  await expect(page.locator('#sidebar-filter-empty-action')).toHaveCSS('font-weight', '400');
+  await expect(page.locator('#sidebar-filter-empty-action')).toHaveCSS('line-height', '21px');
+  await expect(page.locator('#sidebar-filter-empty button')).toHaveCount(1);
+  const literalQuery = '<img src=x onerror=alert(1)>zzzznonexistent';
+  await input.fill(literalQuery);
+  await expect(page.locator('#sidebar-filter-empty-copy')).toContainText(literalQuery);
+  await expect(empty.locator('img')).toHaveCount(0);
+  expect(await empty.evaluate((region) => region.scrollWidth <= region.clientWidth + 1)).toBe(true);
+  await page.keyboard.press('Tab');
+  await page.locator('#sidebar-filter-empty-action').focus();
+  await expect(page.locator('#sidebar-filter-empty-action')).toHaveCSS('outline-style', 'solid');
+  await page.locator('#sidebar-filter-empty-action').click();
+  await expect(input).toHaveValue('');
+  await expect(input).toBeFocused();
+  await expect(page.locator('#sidebar-filter-empty')).toBeHidden();
+});
+
+for (const theme of ['light', 'dark']) {
+  test(`full-size search input geometry and icon-only clear match in ${theme}`, async ({ page }) => {
+    await page.addInitScript((value) => localStorage.setItem('starlight-theme', value), theme);
+    let baseline: Record<string, string | number> | undefined;
+    let emptyTitleColor: string | undefined;
+    for (const [path, selector] of [
+      ['/hub/browse/', '#browse-search-input'],
+      ['/reference/api/csharp/', '#api-search-input'],
+      ['/integrations/gallery/', 'input.filter'],
+      ['/reference/samples/', '#samples-search-input'],
+      ['/aspireconf/', '.session-search'],
+    ]) {
+      await start(page, path);
+      await page.evaluate((value) => { document.documentElement.dataset.theme = value; }, theme);
+      const input = page.locator(selector);
+      await input.blur();
+      const metrics = await input.evaluate((element) => {
+        const style = getComputedStyle(element);
+        const icon = element.parentElement!.querySelector('.search-field-icon')!;
+        const iconStyle = getComputedStyle(icon);
+        return {
+          height: element.getBoundingClientRect().height,
+          fontSize: style.fontSize,
+          background: style.backgroundColor,
+          color: style.color,
+          borderColor: style.borderColor,
+          borderRadius: style.borderRadius,
+          padding: style.padding,
+          iconWidth: icon.getBoundingClientRect().width,
+          iconHeight: icon.getBoundingClientRect().height,
+          iconColor: iconStyle.color,
+        };
+      });
+      expect(metrics.height, path).toBe(48);
+      expect(metrics.fontSize, path).toBe('16px');
+      expect(metrics.iconWidth, path).toBe(18);
+      expect(metrics.iconHeight, path).toBe(18);
+      if (baseline) expect(metrics, path).toEqual(baseline);
+      else baseline = metrics;
+
+      await input.fill('zzzznonexistent');
+      const emptyTitle = page.locator('.search-empty:visible .search-empty-title').first();
+      await expect(emptyTitle).toBeVisible();
+      if (emptyTitleColor) await expect(emptyTitle).toHaveCSS('color', emptyTitleColor);
+      else emptyTitleColor = await emptyTitle.evaluate((title) => getComputedStyle(title).color);
+      const clear = input.locator('..').locator('.search-field-clear');
+      await expect(clear).toBeVisible();
+      await expect(clear).toHaveAccessibleName('Clear search');
+      await expect(clear).toHaveText('');
+      await expect(clear.locator('svg path')).toHaveAttribute('d', 'm18 6-12 12M6 6l12 12');
+      const bounds = (await clear.boundingBox())!;
+      const coarse = await page.evaluate(() => matchMedia('(pointer: coarse)').matches);
+      expect(bounds.width, path).toBeGreaterThanOrEqual(coarse ? 44 : 36);
+      expect(bounds.height, path).toBeGreaterThanOrEqual(coarse ? 44 : 36);
+      await clear.focus();
+      await expect(clear).toHaveCSS('outline-style', 'solid');
+      await clear.press('Enter');
+      await expect(input).toHaveValue('');
+      await expect(input).toBeFocused();
+    }
+  });
+
+  test(`sample controls reflow in ${theme} theme`, async ({ page }) => {
+    await start(page, '/reference/samples/');
+    await page.evaluate((value) => document.documentElement.dataset.theme = value, theme);
+    await page.locator('#samples-search-input').fill('zzzznonexistent');
+    const empty = page.locator('[data-empty-state]');
+    await expect(empty).toBeVisible();
+    await expect(empty.locator('button')).toHaveCount(1);
+    expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+  });
+}
+
+for (const [name, path, inputSelector, emptySelector] of [
+  ['browse', '/hub/browse/', '#browse-search-input', '.browse-empty'],
+  ['integrations', '/integrations/gallery/', 'input.filter', '.no-results'],
+]) {
+  test(`${name} empty state uses a dashed border and aligned text recovery`, async ({ page }, testInfo) => {
+    await start(page, path);
+    const input = page.locator(inputSelector);
+    const empty = page.locator(emptySelector);
+    await input.fill('zzzznonexistent');
+    await expect(empty).toBeVisible();
+    const action = empty.getByRole('button', { name: 'Clear search', exact: true });
+    for (const theme of ['light', 'dark']) {
+      await page.evaluate((value) => { document.documentElement.dataset.theme = value; }, theme);
+      await expect(empty).toHaveCSS('border-top-style', 'dashed');
+      await expect(empty).not.toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
+      await expect(action).toHaveCSS('padding', '0px');
+      await action.hover();
+      await expect(action).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
+      const titleBounds = (await empty.locator('.search-empty-title').boundingBox())!;
+      const actionBounds = (await action.boundingBox())!;
+      expect(actionBounds.x).toBeCloseTo(titleBounds.x, 0);
+      const coarsePointer = await page.evaluate(() => matchMedia('(pointer: coarse)').matches);
+      expect(actionBounds.height).toBeGreaterThanOrEqual(coarsePointer ? 44 : 36);
+      await action.focus();
+      await expect(action).toHaveCSS('outline-style', 'solid');
+      expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
+      expect((await new AxeBuilder({ page }).include(emptySelector).analyze()).violations).toEqual([]);
+      await empty.screenshot({ path: testInfo.outputPath(`${name}-empty-${theme}.png`) });
+    }
+    await action.press('Enter');
+    await expect(input).toHaveValue('');
+    await expect(input).toBeFocused();
+    await expect(empty).toBeHidden();
+  });
+}
diff --git a/src/frontend/tests/e2e/search-visual-parity.spec.ts b/src/frontend/tests/e2e/search-visual-parity.spec.ts
new file mode 100644
index 000000000..1ec3780e6
--- /dev/null
+++ b/src/frontend/tests/e2e/search-visual-parity.spec.ts
@@ -0,0 +1,80 @@
+import { expect, test } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.addInitScript(() => localStorage.setItem('aspireConsentRequired', 'false'));
+});
+
+for (const route of [
+  '/reference/api/typescript/',
+  '/reference/api/csharp/',
+  '/integrations/gallery/',
+  '/reference/samples/',
+  '/hub/glossary/',
+  '/hub/browse/',
+  '/aspireconf/',
+]) {
+  test(`${route} uses shared focus and empty-state typography`, async ({ page }) => {
+    await page.goto(route === '/hub/browse/' ? `${route}?topic=foundations` : route);
+    const input = page.locator('main .search-field-input');
+    await expect(input).toBeEnabled();
+    await input.fill('zzzz-no-match');
+    const empty = page.locator('.search-empty:visible');
+    await expect(empty).toBeVisible();
+
+    for (const theme of ['light', 'dark']) {
+      await page.locator('html').evaluate((html, value) => html.dataset.theme = value, theme);
+      await input.focus();
+      await expect(input).toBeFocused();
+      await expect(input).toHaveCSS('outline-style', 'solid');
+      await expect(input).toHaveCSS('outline-width', '2px');
+      await expect(input).toHaveCSS('outline-offset', '2px');
+      await expect(input).toHaveCSS('outline-color', theme === 'light' ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)');
+      await expect(input).toHaveCSS('box-shadow', 'none');
+      if (route === '/hub/browse/') {
+        const background = await input.evaluate((element) => getComputedStyle(element).backgroundColor);
+        const dropdowns = page.locator('.browse-filter-group > summary');
+        for (const dropdown of await dropdowns.all()) await expect(dropdown).toHaveCSS('background-color', background);
+        const topic = page.locator('[data-filter-group="topic"] > summary');
+        await topic.click();
+        await expect(topic).toHaveCSS('background-color', background);
+        await topic.press('Escape');
+      }
+
+      const colors = await empty.evaluate((element) => {
+        const probe = document.createElement('span');
+        probe.hidden = true;
+        element.append(probe);
+        const resolve = (token: string) => {
+          probe.style.color = `var(${token})`;
+          return getComputedStyle(probe).color;
+        };
+        const colors = {
+          title: resolve('--sl-color-text'),
+          hint: resolve('--sl-color-gray-2'),
+          action: resolve('--sl-color-text-accent'),
+        };
+        probe.remove();
+        return colors;
+      });
+      await expect(empty.locator('.search-empty-title')).toHaveCSS('color', colors.title);
+      await expect(empty.locator('.search-empty-hint')).toHaveCSS('color', colors.hint);
+      await expect(empty.locator('.search-action')).toHaveCSS('color', colors.action);
+      await expect(empty.locator('.search-empty-title')).toHaveCSS('font-weight', '600');
+      await expect(empty.locator('.search-empty-title')).toHaveCSS('font-size', '16px');
+      await expect(empty.locator('.search-empty-title')).toHaveCSS('line-height', '24px');
+      for (const selector of ['.search-empty-hint', '.search-action']) {
+        await expect(empty.locator(selector)).toHaveCSS('font-size', '14px');
+        await expect(empty.locator(selector)).toHaveCSS('line-height', '21px');
+        await expect(empty.locator(selector)).toHaveCSS('font-weight', '400');
+        await expect(empty.locator(selector)).toHaveCSS('font-style', 'normal');
+      }
+      const summary = page.locator('main .search-results-summary:visible');
+      await expect(summary).toHaveCount(1);
+      await expect(summary).toHaveCSS('font-size', '14px');
+      await expect(summary).toHaveCSS('line-height', '21px');
+      await expect(summary).toHaveCSS('font-weight', '400');
+      await expect(summary).toHaveCSS('font-style', 'normal');
+      await expect(summary).toHaveCSS('color', colors.hint);
+    }
+  });
+}
diff --git a/src/frontend/tests/e2e/site-search.spec.ts b/src/frontend/tests/e2e/site-search.spec.ts
index d7c4c9c17..9c49e2fe5 100644
--- a/src/frontend/tests/e2e/site-search.spec.ts
+++ b/src/frontend/tests/e2e/site-search.spec.ts
@@ -1,5 +1,10 @@
 import { expect, test, type Page } from '@playwright/test';
 import { dismissCookieConsentIfVisible } from '@tests/e2e/helpers';
+import { createRequire } from 'node:module';
+import { readFileSync } from 'node:fs';
+
+const require = createRequire(import.meta.url);
+const pagefindRequire = createRequire(require.resolve('@astrojs/starlight'));
 
 // Exercise native transitions on desktop and the supported swap fallback on
 // touch projects, matching the other client-navigation regression suites.
@@ -59,6 +64,150 @@ async function navigateClient(page: Page, navigate: () => Promise<unknown>): Pro
 }
 
 test.describe('site search dialog', () => {
+  for (const theme of ['light', 'dark']) {
+    test(`native Pagefind input presentation matches browse in ${theme}`, async ({ page }, testInfo) => {
+      await page.addInitScript((value) => localStorage.setItem('starlight-theme', value), theme);
+      await page.goto('/hub/browse/');
+      await dismissCookieConsentIfVisible(page);
+      const presentation = (element: Element) => {
+        const style = getComputedStyle(element);
+        return {
+          height: element.getBoundingClientRect().height,
+          fontSize: style.fontSize,
+          background: style.backgroundColor,
+          color: style.color,
+          borderColor: style.borderColor,
+          borderRadius: style.borderRadius,
+          padding: style.padding,
+        };
+      };
+      const expected = await page.locator('#browse-search-input').evaluate(presentation);
+      const iconColor = await page.locator('#browse-search-input').locator('..').locator('.search-field-icon').evaluate(
+        (icon) => getComputedStyle(icon).color,
+      );
+      const focusPresentation = (element: Element) => {
+        const style = getComputedStyle(element);
+        return {
+          outlineStyle: style.outlineStyle,
+          outlineWidth: style.outlineWidth,
+          outlineOffset: style.outlineOffset,
+          outlineColor: style.outlineColor,
+          borderColor: style.borderColor,
+          boxShadow: style.boxShadow,
+        };
+      };
+      await page.locator('#browse-search-input').focus();
+      const expectedFocus = await page.locator('#browse-search-input').evaluate(focusPresentation);
+      expect(expectedFocus).toMatchObject({
+        outlineStyle: 'solid',
+        outlineWidth: '2px',
+        outlineOffset: '2px',
+        boxShadow: 'none',
+      });
+      await page.goto('/');
+      const ready = await openSearchDialog(page);
+      if (!ready) {
+        testInfo.annotations.push({
+          type: 'presentation-only',
+          description: 'Mounts installed native Pagefind UI with an empty-result backend fixture; production index behavior is tested separately.',
+        });
+        await page.route('**/__pagefind-presentation__/pagefind.js', (route) => route.fulfill({
+          contentType: 'text/javascript',
+          body: `
+            export async function options() {}
+            export async function filters() { return {}; }
+            export async function preload() {}
+            export async function search() { return { results: [], filters: {}, unfilteredResultCount: 0 }; }
+          `,
+        }));
+        const nativeModule = readFileSync(
+          pagefindRequire.resolve('@pagefind/default-ui/npm_dist/mjs/ui-core.mjs'), 'utf8',
+        );
+        await page.addScriptTag({
+          type: 'module',
+          content: `${nativeModule}\nwindow.PagefindUI = PagefindUI;`,
+        });
+        await page.evaluate(() => {
+          const container = document.createElement('div');
+          container.className = 'search-container';
+          const root = document.createElement('div');
+          root.id = 'starlight__search';
+          const frame = document.querySelector('site-search .dialog-frame')!;
+          // Match the production wrapper's Astro-scoped styles, including
+          // reserved mobile Cancel space, when mounting the native UI in dev.
+          for (const element of [container, root]) {
+            element.classList.add(...[...frame.classList].filter((name) => name.startsWith('astro-')));
+            for (const name of frame.getAttributeNames().filter((name) => name.startsWith('data-astro-cid-'))) {
+              element.setAttribute(name, '');
+            }
+          }
+          container.append(root);
+          frame.prepend(container);
+          const PagefindUI = Reflect.get(window, 'PagefindUI') as new (options: {
+            element: string;
+            autofocus: boolean;
+            bundlePath: string;
+          }) => unknown;
+          new PagefindUI({ element: '#starlight__search', autofocus: false, bundlePath: '/__pagefind-presentation__/' });
+        });
+      }
+      const input = page.locator('#starlight__search .pagefind-ui__search-input');
+      await input.blur();
+      await expect(input).toBeVisible();
+      expect(await input.evaluate(presentation)).toEqual(expected);
+      await input.focus();
+      expect(await input.evaluate(focusPresentation)).toEqual(expectedFocus);
+      const icon = await page.locator('#starlight__search .pagefind-ui__form').evaluate((form) => {
+        const style = getComputedStyle(form, '::before');
+        return { width: style.width, height: style.height, color: style.backgroundColor, mask: style.maskImage };
+      });
+      expect(icon).toMatchObject({ width: '18px', height: '18px', color: iconColor });
+      expect(decodeURIComponent(icon.mask)).toContain('m21 21-4.35-4.35');
+      const clear = page.locator('#starlight__search .pagefind-ui__search-clear');
+      await expect(clear).toHaveAccessibleName('Clear search');
+      await expect(clear).toHaveCSS('font-size', '0px');
+      await expect(clear).toHaveText('Clear');
+      const coarse = await page.evaluate(() => matchMedia('(pointer: coarse)').matches);
+      await expect(clear).toHaveCSS('width', coarse ? '44px' : '36px');
+      await expect(clear).toHaveCSS('height', coarse ? '44px' : '36px');
+      const clearIcon = await clear.evaluate((button) => {
+        const style = getComputedStyle(button, '::before');
+        return { width: style.width, height: style.height, mask: style.maskImage };
+      });
+      expect(clearIcon).toMatchObject({ width: '16px', height: '16px' });
+      expect(decodeURIComponent(clearIcon.mask)).toContain('m18 6-12 12M6 6l12 12');
+      await input.fill('zzzznonexistentcatalogquery');
+      const message = page.locator('#starlight__search .pagefind-ui__message');
+      await expect(message).toContainText(/no results|0 results/i);
+      await expect(message).toHaveCSS('font-size', '14px');
+      await expect(message).toHaveCSS('font-weight', '400');
+      await expect(message).toHaveCSS('font-style', 'normal');
+      await expect(message).toHaveCSS('line-height', '21px');
+      await clear.click();
+      await expect(input).toHaveValue('');
+      await expect(input).toBeFocused();
+    });
+  }
+
+  test('zero matches retain one native clear action and return focus to the query', async ({ page }) => {
+    await page.goto('/');
+    await dismissCookieConsentIfVisible(page);
+    const ready = await openSearchDialog(page);
+    test.skip(!ready, 'Pagefind requires the existing CI production artifact; no local build.');
+    const dialog = page.locator('site-search dialog[open]');
+    const input = dialog.locator('.pagefind-ui__search-input');
+    await input.fill('zzzznonexistentcatalogquery');
+    await expect(dialog.locator('.pagefind-ui__message')).toContainText(/no results|0 results/i);
+    await expect(dialog.locator('.pagefind-ui__message')).toHaveAttribute('aria-live', 'polite');
+    const clear = dialog.locator('.pagefind-ui__search-clear');
+    await expect(clear).toHaveCount(1);
+    await expect(clear).toHaveAccessibleName('Clear search');
+    await clear.click();
+    await expect(input).toHaveValue('');
+    await expect(input).toBeFocused();
+    await expect(dialog.locator('a[data-api-lang="csharp"]')).toHaveAttribute('href', /\/reference\/api\/csharp\/$/);
+  });
+
   for (const openWith of ['button', 'shortcut'] as const) {
     test(`docs search survives client navigation and history when opened by ${openWith}`, async ({
       page,
diff --git a/src/frontend/tests/typecheck/component-props.contracts.ts b/src/frontend/tests/typecheck/component-props.contracts.ts
index 97f448688..fee071c26 100644
--- a/src/frontend/tests/typecheck/component-props.contracts.ts
+++ b/src/frontend/tests/typecheck/component-props.contracts.ts
@@ -17,6 +17,8 @@ import IconLinkCard from '@components/IconLinkCard.astro';
 import ImageShowcase from '@components/ImageShowcase.astro';
 import Include from '@components/Include.astro';
 import InpageSearch from '@components/api-reference/InpageSearch.astro';
+import SearchField from '@components/search/SearchField.astro';
+import SearchEmptyState from '@components/search/SearchEmptyState.astro';
 import InstallCliModal from '@components/InstallCliModal.astro';
 import InstallDotNetPackage from '@components/InstallDotNetPackage.astro';
 import InstallPackage from '@components/InstallPackage.astro';
@@ -52,6 +54,19 @@ import YouTubeGrid from '@components/YouTubeGrid.astro';
 
 type PropsOf<T extends (...args: never[]) => unknown> = ComponentProps<T>;
 
+const validSearchFieldProps = {
+  id: 'api-query', label: 'Search API entries', placeholder: 'Try Redis',
+  clearId: 'api-clear', describedBy: 'api-status', size: 'sm', visibleLabel: true,
+  containerClass: 'inpage-search-bar', labelClass: 'inpage-search-label',
+  wrapClass: 'inpage-search-input-wrap', iconClass: 'inpage-search-icon',
+} satisfies PropsOf<typeof SearchField>;
+const validSearchEmptyProps = {
+  title: 'No matching API entries', hint: 'Try another keyword.',
+  actionLabel: 'Clear search', actionId: 'api-recover', hidden: true,
+} satisfies PropsOf<typeof SearchEmptyState>;
+void validSearchFieldProps;
+void validSearchEmptyProps;
+
 const validInpageSearchProps = {
   id: 'glossary',
   label: 'Find a term',
diff --git a/src/frontend/tests/unit/api-search-lifecycle.vitest.test.ts b/src/frontend/tests/unit/api-search-lifecycle.vitest.test.ts
index f02cf811e..d98db58fc 100644
--- a/src/frontend/tests/unit/api-search-lifecycle.vitest.test.ts
+++ b/src/frontend/tests/unit/api-search-lifecycle.vitest.test.ts
@@ -9,6 +9,7 @@ import rehypeParse from 'rehype-parse';
 import { unified } from 'unified';
 import { readApiSearchIndex, registerApiSearch } from '@components/api-reference/search-lifecycle';
 import * as searchStats from '@utils/ts-api-search-stats';
+import { ApiSearchPresentation, withApiSearchFallback } from '../../src/pages/reference/api/_search-presentation';
 
 const surfaces = [
   ['csharp', 'landing'],
@@ -75,8 +76,9 @@ describe('API search navigation lifecycle', () => {
 
     afterEach(() => vi.unstubAllGlobals());
 
-    async function createSync() {
+    async function createSync(initialValue = '') {
       const input = new SearchInput();
+      input.value = initialValue;
       const clear = Object.assign(new EventTarget(), { style: { display: 'none' } });
       const replaceState = vi.fn();
       const state = { index: 3, scrollX: 0, scrollY: 120 };
@@ -106,6 +108,15 @@ describe('API search navigation lifecycle', () => {
       );
     });
 
+    it('initializes clear visibility for text entered before controller mounting', async () => {
+      const { input, clear, onClear } = await createSync('Redis');
+      expect(clear.style.display).toBe('');
+      clear.dispatchEvent(new Event('click'));
+      expect(input.value).toBe('');
+      expect(clear.style.display).toBe('none');
+      expect(onClear).toHaveBeenCalledOnce();
+    });
+
     it('removes clear/input handlers and refuses stale URL writes after abort', async () => {
       const { sync, abort, input, clear, onClear, replaceState } = await createSync();
       input.value = 'redis';
@@ -143,8 +154,11 @@ describe('API search navigation lifecycle', () => {
       innerHTML = '';
       dataset: Record<string, string> = {};
       children = new Map<string, SearchElement>();
+      rendered: SearchElement[] = [];
       querySelector(selector: string) { return this.children.get(selector) ?? null; }
       querySelectorAll() { return []; }
+      append(...children: SearchElement[]) { this.rendered.push(...children); }
+      replaceChildren(...children: SearchElement[]) { this.rendered = children; }
       focus() {}
     }
 
@@ -170,8 +184,10 @@ describe('API search navigation lifecycle', () => {
       const index = new SearchElement();
       index.textContent = '[]';
       root.children.set('[data-api-search-index]', index);
+      root.children.set('[id$="-clear-filters"]', root.children.get(`#${prefix}-clear-filters`)!);
       const selector = `[data-api-search-language="${language}"][data-api-search-kind="${kind}"]`;
       const document = {
+        createElement: () => new SearchElement(),
         querySelector: (query: string) => query === selector ? root : null,
         getElementById: () => new SearchElement(),
         addEventListener: events.addEventListener.bind(events),
@@ -210,11 +226,17 @@ describe('API search navigation lifecycle', () => {
           },
         },
         '@utils/ts-api-search-stats': searchStats,
+        '../_search-presentation': { ApiSearchPresentation, withApiSearchFallback },
+        '../../_search-presentation': { ApiSearchPresentation, withApiSearchFallback },
+        '../../../_search-presentation': { ApiSearchPresentation, withApiSearchFallback },
       };
       runInNewContext(outputText, {
         exports: {}, require: (id: string) => modules[id], document, window, clearTimeout,
       });
       events.dispatchEvent(new Event('astro:page-load'));
+      const results = root.querySelector(`#${prefix}-search-results`)!;
+      expect(results.rendered[0].rendered[0].textContent).toBe('No API entries available');
+      expect(results.rendered[0].rendered).toHaveLength(2);
       const input = root.querySelector(`#${prefix}-search-input`)!;
       input.value = 'pending';
       input.dispatchEvent(new Event('input'));
diff --git a/src/frontend/tests/unit/api-search-recovery.vitest.test.ts b/src/frontend/tests/unit/api-search-recovery.vitest.test.ts
new file mode 100644
index 000000000..e5c0251e2
--- /dev/null
+++ b/src/frontend/tests/unit/api-search-recovery.vitest.test.ts
@@ -0,0 +1,95 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { runInNewContext } from 'node:vm';
+import ts from 'typescript';
+import { describe, expect, it, vi } from 'vitest';
+
+const routes = [
+  'csharp/index.astro',
+  'csharp/[package]/index.astro',
+  'csharp/[package]/[type]/index.astro',
+  'typescript/index.astro',
+  'typescript/[module]/index.astro',
+  'typescript/[module]/[item]/index.astro',
+];
+
+interface Entry {
+  n: string; f: string; ns: string; p: string; s: string; r: string; k: string; v: string;
+}
+interface Controller {
+  index: Entry[];
+  activeKinds: Set<string>;
+  activeVersions: Set<string> | null;
+  findMatches(query: string, kinds?: Set<string>, versions?: Set<string> | null): { entry: Entry; score: number }[];
+  search(query: string): void;
+}
+
+function createController(route: string) {
+  const source = readFileSync(resolve('src/pages/reference/api', route), 'utf8');
+  const script = source.slice(source.lastIndexOf('<script>') + '<script>'.length).split('</script>')[0];
+  const ast = ts.createSourceFile('controller.ts', script, ts.ScriptTarget.Latest, true);
+  const declaration = ast.statements.find(ts.isClassDeclaration)!;
+  const { outputText } = ts.transpileModule(
+    `${ts.createPrinter().printNode(ts.EmitHint.Unspecified, declaration, ast)}\nexports.Controller = ${declaration.name!.text};`,
+    { compilerOptions: { target: ts.ScriptTarget.ES2022, module: ts.ModuleKind.CommonJS } },
+  );
+  const exports: { Controller?: { prototype: Controller } } = {};
+  runInNewContext(outputText, { exports });
+  const controller = Object.create(exports.Controller!.prototype) as Controller;
+  const renderEmpty = vi.fn();
+  const element = () => ({ style: { display: '' }, textContent: '', innerHTML: '' });
+  Object.assign(controller, {
+    index: [
+      { n: 'RedisNeedle', f: 'Example.RedisNeedle', ns: 'Example', p: 'Package', s: 'Cache', r: 'void', k: 'method', v: '13.6.0' },
+      { n: 'MongoOther', f: 'Example.MongoOther', ns: 'Example', p: 'Package', s: 'Database', r: 'void', k: 'property', v: '13.5.0' },
+    ],
+    activeKinds: new Set(['property']),
+    activeVersions: null,
+    presentation: { renderEmpty },
+    resultsEl: element(), packageList: element(), nsList: element(), countEl: element(), status: element(),
+    loadMore: vi.fn(),
+  });
+  return { controller, renderEmpty };
+}
+
+describe.each(routes)('API recovery uses actual matching predicates: %s', route => {
+  it('preserves query token AND matching and reports alternatives only for zero results', () => {
+    const { controller, renderEmpty } = createController(route);
+    const find = vi.spyOn(controller, 'findMatches');
+    controller.search('RedisNeedle');
+    expect(renderEmpty).toHaveBeenCalledOnce();
+    expect(renderEmpty.mock.calls[0][3]).toEqual({ withoutQuery: 1, withoutFilters: 1 });
+    expect(find).toHaveBeenCalledTimes(3);
+    expect(controller.findMatches('RedisNeedle nonexistent', new Set())).toHaveLength(0);
+    find.mockClear();
+    renderEmpty.mockClear();
+    controller.search('MongoOther');
+    expect(find).toHaveBeenCalledOnce();
+    expect(renderEmpty).not.toHaveBeenCalled();
+  });
+
+  it('keeps useful facets when the query is globally absent', () => {
+    const { controller, renderEmpty } = createController(route);
+    controller.search('absent-query');
+    expect(renderEmpty.mock.calls[0][3]).toEqual({ withoutQuery: 1, withoutFilters: 0 });
+    expect(controller.activeKinds).toEqual(new Set(['property']));
+  });
+
+  if (route === 'csharp/index.astro' || route === 'typescript/index.astro') {
+    it('restores the supported catalog version default instead of retaining selected versions', () => {
+      const { controller, renderEmpty } = createController(route);
+      controller.activeVersions = new Set(['13.5.0']);
+      controller.activeKinds.clear();
+      controller.search('RedisNeedle');
+      expect(renderEmpty.mock.calls[0][3]).toEqual({ withoutQuery: 1, withoutFilters: 1 });
+      expect(controller.activeVersions).toEqual(new Set(['13.5.0']));
+    });
+
+    it('requires resetting both when no versions and a globally absent query are selected', () => {
+      const { controller, renderEmpty } = createController(route);
+      controller.activeVersions = new Set();
+      controller.search('absent-query');
+      expect(renderEmpty.mock.calls[0][3]).toEqual({ withoutQuery: 0, withoutFilters: 0 });
+    });
+  }
+});
diff --git a/src/frontend/tests/unit/custom-components.vitest.test.ts b/src/frontend/tests/unit/custom-components.vitest.test.ts
index 542661b4a..2cf8910c3 100644
--- a/src/frontend/tests/unit/custom-components.vitest.test.ts
+++ b/src/frontend/tests/unit/custom-components.vitest.test.ts
@@ -8,6 +8,7 @@ import AsciinemaPlayer from '@components/AsciinemaPlayer.astro';
 import Breadcrumb from '@components/Breadcrumb.astro';
 import CTABanner from '@components/CTABanner.astro';
 import CapabilityGrid from '@components/CapabilityGrid.astro';
+import CatalogSearchActiveFilters from '@components/CatalogSearchActiveFilters.astro';
 import CodespacesButton from '@components/CodespacesButton.astro';
 import ContainerImages from '@components/ContainerImages.astro';
 import ContainerRuntimeChoices from '@components/ContainerRuntimeChoices.astro';
@@ -263,11 +264,17 @@ const basicRenderCases: BasicRenderCase[] = [
     slots: { default: 'Expanded body' },
     includes: ['<details', 'Expandable summary', 'Expanded body'],
   },
+  {
+    name: 'CatalogSearchActiveFilters preserves the localized label for its bundled renderer',
+    Component: CatalogSearchActiveFilters,
+    props: { label: 'Filtres actifs' },
+    includes: ['<catalog-search-active-filters', 'data-label="Filtres actifs"', 'data-labels="[]"', 'hidden'],
+  },
   {
     name: 'InpageSearch keeps its API defaults',
     Component: InpageSearch,
     props: { id: 'api', placeholder: 'Search API', kinds: ['class', 'interface'], defaultStatsText: '20 types' },
-    includes: ['id="api-search-input"', '<label class="sr-only', 'Search API', 'data-kind="class"', '20 types'],
+    includes: ['id="api-search-input"', '<label class="search-sr-only', 'Search API', 'data-kind="class"', '20 types'],
   },
   {
     name: 'InpageSearch supports labeled discovery search and colored topic toggles',
@@ -277,7 +284,7 @@ const basicRenderCases: BasicRenderCase[] = [
       kinds: ['Foundations', 'Reference'], kindColors: { Foundations: 'var(--sl-color-purple)' },
       defaultStatsText: '32 terms',
     },
-    includes: ['<label class="inpage-search-label', 'Find a term', 'data-kind="Foundations"', '--filter-color: var(--sl-color-purple)', 'aria-pressed="false"'],
+    includes: ['<label class="search-field-label', 'Find a term', 'data-kind="Foundations"', '--filter-color: var(--sl-color-purple)', 'aria-pressed="false"'],
   },
   {
     name: 'CTABanner renders calls to action',
@@ -1176,7 +1183,12 @@ describe('custom Astro component render coverage', () => {
 
   it('renders SampleGrid controls and sample cards', async () => {
     const html = normalizeHtml(
-      await renderComponent(SampleGrid, { props: { samples: sampleGridSamples } })
+      await renderComponent(SampleGrid, {
+        props: { samples: sampleGridSamples },
+        locals: { t: Object.assign((key: string) =>
+          enTranslations.catalogSearch[key.replace('catalogSearch.', '') as keyof typeof enTranslations.catalogSearch] ?? key,
+          { dir: () => 'ltr' as const }) },
+      })
     );
 
     expect(html).toContain('data-samples-browser');
@@ -1191,17 +1203,14 @@ describe('custom Astro component render coverage', () => {
     expect(html).toContain('theme-image');
     expect(html).toContain('data-light=');
     expect(html).toContain('data-dark=');
-    expect(html).toContain('Try removing a filter or adjusting your search.');
+    expect(html).toContain(enTranslations.catalogSearch.guidance);
 
-    // The redesigned filter UI replaces the boxy "Filtered by" bar with a
-    // single subtle "Clear all" text link in the results header, and an
-    // embedded `X` icon button inside the search input — the same compact
-    // pattern used by the in-page API search component.
     expect(html).not.toContain('data-active-filter-bar');
-    expect(html).not.toContain('Clear filters');
+    expect(html).toContain('Clear filters');
     expect(html).toContain('data-clear-all');
-    expect(html).toContain('Clear all');
+    expect(html).toContain('Reset all');
     expect(html).toContain('aria-label="Clear search"');
+    expect(html).toContain('aria-live="polite"');
 
     // The browse view persists the active search and tag filters in the
     // URL so a link like `/reference/samples/?q=redis&tags=cache` lands on a
@@ -1440,12 +1449,29 @@ describe('custom Astro component render coverage', () => {
   it('renders SessionGrid grouped by timeslot with search controls', async () => {
     const html = normalizeHtml(await renderComponent(SessionGrid, { props: { sessions } }));
 
-    expect(html).toContain('Search sessions');
+    expect(html).toContain('catalogSearch.sessionsLabel');
+    expect(html).toContain('catalogSearch.sessionsEmpty');
+    expect(html).toContain('data-session-recover');
+    expect(html).toContain('aria-live="polite"');
     expect(html).toContain('Shipping distributed apps');
     expect(html).toContain('Observability by default');
     expect(html).toContain('09:00 AM');
   });
 
+  it('distinguishes empty gallery datasets from zero search matches', async () => {
+    const integrations = await renderComponent(Integrations, {
+      props: { integrations: [], availableDocs: [] },
+    });
+    expect(integrations).toContain('catalogSearch.integrationsUnavailable');
+    expect(integrations).not.toMatch(/<button[^>]*data-integration-recover/);
+    const samples = await renderComponent(SampleGrid, { props: { samples: [] } });
+    expect(samples).toContain('catalogSearch.samplesUnavailable');
+    expect(samples).not.toMatch(/<p[^>]*>catalogSearch.samplesEmpty<\/p>/);
+    const emptySessions = await renderComponent(SessionGrid, { props: { sessions: [] } });
+    expect(emptySessions).toContain('catalogSearch.sessionsUnavailable');
+    expect(emptySessions).not.toContain('catalogSearch.sessionsEmpty');
+  });
+
   it('calculates IntegrationTotals targets from package data', async () => {
     const html = normalizeHtml(
       await renderComponent(IntegrationTotals, { props: { integrations: integrationsFixture } })
diff --git a/src/frontend/tests/unit/dev-glossary.vitest.test.ts b/src/frontend/tests/unit/dev-glossary.vitest.test.ts
index b86b6e9dc..bad01921b 100644
--- a/src/frontend/tests/unit/dev-glossary.vitest.test.ts
+++ b/src/frontend/tests/unit/dev-glossary.vitest.test.ts
@@ -20,6 +20,13 @@ const terms: GlossaryTerm[] = readdirSync(directory).filter((file) => /\.mdx?$/.
 });
 const getTerm = (id: string) => terms.find((term) => term.id === id)!;
 
+it('distinguishes an empty glossary from filtered zero matches', async () => {
+  const html = await renderComponent(GlossaryBrowser, { props: { terms: [] } });
+  expect(html).toContain('No terms available');
+  expect(html).not.toContain('No matching terms');
+  expect(html).toMatch(/<button\b[^>]*data-clear-glossary[^>]*\bhidden\b/);
+});
+
 describe('glossary content migration', () => {
   it('migrates every original term and all API reference table entries', () => {
     expect(terms.map((term) => term.id)).toEqual(expect.arrayContaining([
@@ -214,7 +221,7 @@ describe('glossary component rendering', () => {
     expect(html).toContain('href="#glossary-A"');
     expect(html).toContain('aria-live="polite"');
     expect(html).toContain(`${terms.length} terms`);
-    expect(html).toContain('Show all terms');
+    expect(html).toContain('Reset all');
     expect(html).toContain('<noscript>');
   });
 
diff --git a/src/frontend/tests/unit/filter-history.vitest.test.ts b/src/frontend/tests/unit/filter-history.vitest.test.ts
new file mode 100644
index 000000000..ece6abe46
--- /dev/null
+++ b/src/frontend/tests/unit/filter-history.vitest.test.ts
@@ -0,0 +1,164 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { createFilterHistory, isFilterNavigation } from '../../src/components/dev-center/filter-history';
+
+const { navigate } = vi.hoisted(() => ({ navigate: vi.fn() }));
+vi.mock('astro:transitions/client', () => ({ navigate }));
+
+describe('filter history lifecycle', () => {
+  let root: HTMLElement;
+  let events: EventTarget;
+  let controller: AbortController;
+  let restore: ReturnType<typeof vi.fn>;
+  let history: { state: Record<string, unknown>; replaceState: ReturnType<typeof vi.fn> };
+  let scrollTo: ReturnType<typeof vi.fn>;
+  let transitioning: boolean;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    navigate.mockResolvedValue(undefined);
+    transitioning = false;
+    events = new EventTarget();
+    controller = new AbortController();
+    restore = vi.fn();
+    scrollTo = vi.fn();
+    root = { dataset: { filterPath: '/hub/browse/' }, isConnected: true } as HTMLElement;
+    history = {
+      state: { index: 4, scrollX: 0, scrollY: 300, custom: 'preserved' },
+      replaceState: vi.fn((state: Record<string, unknown>) => { history.state = state; }),
+    };
+    vi.stubGlobal('history', history);
+    vi.stubGlobal('location', new URL('https://aspire.dev/hub/browse/'));
+    vi.stubGlobal('scrollX', 0);
+    vi.stubGlobal('scrollY', 300);
+    vi.stubGlobal('window', { scrollTo });
+    vi.stubGlobal('document', Object.assign(events, {
+      documentElement: { hasAttribute: () => transitioning },
+    }));
+  });
+
+  afterEach(() => {
+    controller.abort();
+    vi.unstubAllGlobals();
+  });
+
+  const parameters = ['q', 'type', 'page'];
+  const swap = (to: string, info?: unknown, navigationType = 'push') => {
+    const event = Object.assign(new Event('astro:before-swap'), {
+      from: new URL('https://aspire.dev/hub/browse/'),
+      to: new URL(to, 'https://aspire.dev'),
+      info,
+      navigationType,
+      viewTransition: { skipTransition: vi.fn() },
+      swap: vi.fn(),
+    });
+    events.dispatchEvent(event);
+    return event;
+  };
+
+  it('preserves all router metadata when replacing query state', () => {
+    const sync = createFilterHistory(root, parameters, restore, controller.signal);
+    sync.initialize();
+    const url = new URL('https://aspire.dev/hub/browse/?q=redis');
+    sync.write(url, true);
+    expect(history.replaceState).toHaveBeenLastCalledWith({
+      index: 4, scrollX: 0, scrollY: 300, custom: 'preserved', aspireFilterPath: '/hub/browse/',
+    }, '', url);
+    expect(navigate).not.toHaveBeenCalled();
+  });
+
+  it('lets Astro allocate indexes for new filter entries', () => {
+    const sync = createFilterHistory(root, parameters, restore, controller.signal);
+    sync.write(new URL('https://aspire.dev/hub/browse/?type=sample'), false);
+    expect(navigate).toHaveBeenCalledWith('https://aspire.dev/hub/browse/?type=sample', {
+      info: root, state: { aspireFilterPath: '/hub/browse/' }, history: 'push',
+    });
+  });
+
+  it('supersedes pending filter navigation when the user types again', async () => {
+    let finishFirst!: () => void;
+    let finishLatest!: () => void;
+    navigate.mockImplementationOnce(() => new Promise<void>((resolve) => { finishFirst = resolve; }));
+    navigate.mockImplementationOnce(() => new Promise<void>((resolve) => { finishLatest = resolve; }));
+    const sync = createFilterHistory(root, parameters, restore, controller.signal);
+    sync.write(new URL('https://aspire.dev/hub/browse/?type=sample'), false);
+    sync.write(new URL('https://aspire.dev/hub/browse/?type=sample&q=redis'), true);
+    expect(navigate).toHaveBeenLastCalledWith('https://aspire.dev/hub/browse/?type=sample&q=redis', {
+      info: root, state: { aspireFilterPath: '/hub/browse/' }, history: 'replace',
+    });
+    finishFirst();
+    await Promise.resolve();
+    finishLatest();
+    await Promise.resolve();
+    sync.write(new URL('https://aspire.dev/hub/browse/?type=sample&q=redis2'), true);
+    expect(navigate).toHaveBeenCalledTimes(2);
+    expect(history.replaceState).toHaveBeenLastCalledWith(history.state, '', new URL('https://aspire.dev/hub/browse/?type=sample&q=redis2'));
+  });
+
+  it('does not read or normalize the outgoing URL during connection inside a swap', () => {
+    transitioning = true;
+    const sync = createFilterHistory(root, parameters, restore, controller.signal);
+    sync.initialize();
+    expect(restore).not.toHaveBeenCalled();
+    events.dispatchEvent(new Event('astro:after-swap'));
+    events.dispatchEvent(new Event('astro:page-load'));
+    expect(restore).toHaveBeenCalledTimes(1);
+  });
+
+  it('restores a module first loaded after swapping on page-load', () => {
+    transitioning = true;
+    createFilterHistory(root, parameters, restore, controller.signal).initialize();
+    events.dispatchEvent(new Event('astro:page-load'));
+    expect(restore).toHaveBeenCalledOnce();
+  });
+
+  it('keeps local pushes mounted and preserves scroll without resetting focused controls', () => {
+    createFilterHistory(root, parameters, restore, controller.signal);
+    const event = swap('/hub/browse/?page=2', root);
+    expect(vi.isMockFunction(event.swap)).toBe(false);
+    expect(event.viewTransition.skipTransition).toHaveBeenCalledOnce();
+    events.dispatchEvent(new Event('astro:after-swap'));
+    events.dispatchEvent(new Event('astro:page-load'));
+    expect(restore).not.toHaveBeenCalled();
+    expect(scrollTo).toHaveBeenCalledWith({ left: 0, top: 300, behavior: 'instant' });
+  });
+
+  it('restores owned filter traversals without overriding Astro scroll restoration', () => {
+    createFilterHistory(root, parameters, restore, controller.signal).initialize();
+    restore.mockClear();
+    const event = swap('/hub/browse/?type=sample', undefined, 'traverse');
+    expect(vi.isMockFunction(event.swap)).toBe(false);
+    events.dispatchEvent(new Event('astro:after-swap'));
+    events.dispatchEvent(new Event('astro:page-load'));
+    expect(restore).toHaveBeenCalledOnce();
+    expect(scrollTo).not.toHaveBeenCalled();
+  });
+
+  it('does not override unrelated links, routes or query parameters', () => {
+    createFilterHistory(root, parameters, restore, controller.signal).initialize();
+    for (const event of [
+      swap('/hub/browse/?q=redis'),
+      swap('/hub/glossary/?q=redis', root),
+      swap('/hub/browse/?aspire-lang=csharp', root),
+    ]) {
+      expect(vi.isMockFunction(event.swap)).toBe(true);
+    }
+  });
+
+  it('disposes all callbacks and ignores stale writes when disconnected', () => {
+    const sync = createFilterHistory(root, parameters, restore, controller.signal);
+    controller.abort();
+    sync.write(new URL('https://aspire.dev/hub/browse/?q=stale'), false);
+    events.dispatchEvent(new Event('astro:after-swap'));
+    events.dispatchEvent(new Event('astro:page-load'));
+    expect(navigate).not.toHaveBeenCalled();
+    expect(restore).not.toHaveBeenCalled();
+    expect(history.replaceState).not.toHaveBeenCalled();
+  });
+
+  it('compares only unrelated query parameters for local filter navigation', () => {
+    const url = (query: string) => new URL(`https://aspire.dev/hub/browse/${query}`);
+    expect(isFilterNavigation(url('?keep=1&q=old'), url('?q=new&keep=1&page=2'), parameters)).toBe(true);
+    expect(isFilterNavigation(url('?keep=1'), url('?keep=2'), parameters)).toBe(false);
+    expect(isFilterNavigation(url(''), new URL('https://example.com/hub/browse/'), parameters)).toBe(false);
+  });
+});
diff --git a/src/frontend/tests/unit/resource-browser.vitest.test.ts b/src/frontend/tests/unit/resource-browser.vitest.test.ts
index a8e5b9bdb..1dcb22b91 100644
--- a/src/frontend/tests/unit/resource-browser.vitest.test.ts
+++ b/src/frontend/tests/unit/resource-browser.vitest.test.ts
@@ -16,6 +16,13 @@ const base: DevResource = {
 };
 
 describe('resource browser rendering', () => {
+  it('distinguishes an empty catalog from filtered zero matches', async () => {
+    const html = await renderComponent(ResourceBrowser, { props: { resources: [] } });
+    expect(html).toContain('No resources available');
+    expect(html).not.toContain('No matching resources');
+    expect(html).toMatch(/<button\b[^>]*data-reset-search[^>]*\bhidden\b/);
+  });
+
   it('uses Devicons for Hub languages and local theme-aware Rust artwork', () => {
     expect(languages.map(({ icon }) => icon)).toEqual([
       'devicon:csharp',
@@ -125,7 +132,8 @@ describe('resource browser rendering', () => {
     } } });
     expect(html).toContain('src="/feature.png"');
     expect(html).toContain('width="640" height="360"');
-    expect(html).toContain('<noscript data-resource-image>');
+    expect(html).toContain('<template data-resource-image>');
+    expect(html).toContain('<noscript><img');
     expect(html).not.toContain('class="browse-artwork-symbol');
   });
 
diff --git a/src/frontend/tests/unit/search-presentation.vitest.test.ts b/src/frontend/tests/unit/search-presentation.vitest.test.ts
new file mode 100644
index 000000000..9edc095ee
--- /dev/null
+++ b/src/frontend/tests/unit/search-presentation.vitest.test.ts
@@ -0,0 +1,191 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { select, selectAll } from 'hast-util-select';
+import rehypeParse from 'rehype-parse';
+import { unified } from 'unified';
+import SearchField from '@components/search/SearchField.astro';
+import SearchEmptyState from '@components/search/SearchEmptyState.astro';
+import InpageSearch from '@components/api-reference/InpageSearch.astro';
+import ApiSearchBar from '@components/api-reference/ApiSearchBar.astro';
+import VersionFilter from '@components/api-reference/VersionFilter.astro';
+import { createSearchEmptyState, searchRecoveryAction } from '@components/search/search-empty-state';
+import { renderComponent } from './astro-test-utils';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import ts from 'typescript';
+import { ApiSearchPresentation } from '../../src/pages/reference/api/_search-presentation';
+
+const parse = (html: string) => unified().use(rehypeParse, { fragment: true }).parse(html);
+
+describe('neutral search presentation', () => {
+  it('type-checks the actual neutral component prop declarations', () => {
+    const declarations = ['SearchField', 'SearchEmptyState'].map(name => {
+      const frontmatter = readFileSync(resolve(`src/components/search/${name}.astro`), 'utf8').split('---')[1];
+      const source = ts.createSourceFile(`${name}.ts`, frontmatter, ts.ScriptTarget.Latest, true);
+      const props = source.statements.find(ts.isInterfaceDeclaration)!;
+      return ts.createPrinter().printNode(ts.EmitHint.Unspecified, props, source).replace('interface Props', `interface ${name}Props`);
+    }).join('\n');
+    const contract = `${declarations}
+      const field: SearchFieldProps = { id: 'api', label: 'Search API', size: 'sm', clearId: 'clear' };
+      const empty: SearchEmptyStateProps = { title: 'No matching entries', hidden: true, actionLabel: 'Clear search' };
+      // @ts-expect-error Accessible labels are required.
+      const missingLabel: SearchFieldProps = { id: 'api' };
+      // @ts-expect-error Size is an intentional two-value union.
+      const invalidSize: SearchFieldProps = { id: 'api', label: 'Search API', size: 'wide' };
+      // @ts-expect-error Visibility is boolean.
+      const invalidHidden: SearchEmptyStateProps = { title: 'Empty', hidden: 'yes' };
+    `;
+    const file = resolve('tests/typecheck/search-presentation.virtual.ts').replaceAll('\\', '/');
+    const options: ts.CompilerOptions = { noEmit: true, strict: true, types: [], target: ts.ScriptTarget.ES2022 };
+    const host = ts.createCompilerHost(options);
+    const original = host.getSourceFile.bind(host);
+    host.getSourceFile = (name, languageVersion, onError, shouldCreateNewSourceFile) => name.replaceAll('\\', '/') === file
+      ? ts.createSourceFile(name, contract, languageVersion, true)
+      : original(name, languageVersion, onError, shouldCreateNewSourceFile);
+    const program = ts.createProgram([file], options, host);
+    expect(ts.getPreEmitDiagnostics(program).map(diagnostic => ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n'))).toEqual([]);
+  });
+
+  it.each(['lg', 'sm'])('renders a labeled %s input with a query-only clear affordance', async (size) => {
+    const tree = parse(await renderComponent(SearchField, {
+      props: { id: 'find-input', label: 'Search API entries', placeholder: 'Try Redis', clearId: 'find-clear', describedBy: 'find-status', size },
+    }));
+    expect(select('label', tree)?.properties.htmlFor).toEqual(['find-input']);
+    expect(select('input', tree)?.properties).toMatchObject({
+      id: 'find-input', type: 'search', ariaDescribedBy: ['find-status'],
+    });
+    expect(select('button', tree)?.properties).toMatchObject({
+      id: 'find-clear', type: 'button', ariaLabel: 'Clear search', style: 'display: none;',
+    });
+  });
+
+  it.each([InpageSearch, ApiSearchBar])('retains API hooks and separate facet/reset actions', async (component) => {
+    const tree = parse(await renderComponent(component, {
+      props: { id: 'api', label: 'Search API entries', placeholder: 'Try Redis', kinds: ['class', 'method'], defaultStatsText: '2 entries' },
+    }));
+    for (const id of ['search-input', 'search-clear', 'search-status', 'search-results', 'clear-filters', 'reset-all']) {
+      expect(select(`#api-${id}`, tree)).toBeDefined();
+    }
+    expect(selectAll('.search-field-input', tree)).toHaveLength(1);
+    expect(select('#api-search-count.search-results-summary', tree)).toBeDefined();
+    expect(selectAll('.api-filter-chip[aria-pressed="false"]', tree)).toHaveLength(2);
+  });
+
+  it('preserves contextual in-page layout hooks after extracting the search field', async () => {
+    const tree = parse(await renderComponent(InpageSearch, {
+      props: { id: 'glossary', label: 'Find a term', placeholder: 'Try AppHost', kinds: [], defaultStatsText: '32 terms' },
+    }));
+    expect(select('.inpage-search-bar .inpage-search-label[for="glossary-search-input"]', tree)).toBeDefined();
+    expect(select('.inpage-search-input-wrap .inpage-search-input', tree)).toBeDefined();
+    expect(select('.inpage-search-input-wrap .inpage-search-icon', tree)).toBeDefined();
+    expect(select('.inpage-search-input-wrap .inpage-search-clear', tree)).toBeDefined();
+  });
+
+  it('renders compact empty state copy safely with just one recovery action', async () => {
+    const html = await renderComponent(SearchEmptyState, {
+      props: { title: 'No matching entries', hint: '<script>not markup</script>', actionLabel: 'Reset all', actionId: 'recover' },
+    });
+    const tree = parse(html);
+    expect(selectAll('button', tree)).toHaveLength(1);
+    expect(select('script', tree)).toBeUndefined();
+    expect(select('.search-empty-title', tree)).toBeDefined();
+  });
+
+  it('uses checkbox-group semantics rather than an incomplete listbox', async () => {
+    const tree = parse(await renderComponent(VersionFilter, { props: { id: 'api', versions: ['13.6.0'] } }));
+    expect(select('[role="group"]', tree)?.properties.ariaLabel).toBe('Version selection');
+    expect(select('[role="listbox"]', tree)).toBeUndefined();
+  });
+
+  it.each([
+    [true, false, 3, 0, 'Clear search'],
+    [false, true, 0, 3, 'Clear filters'],
+    [true, true, 3, 2, 'Clear filters'],
+    [true, true, 3, 0, 'Clear search'],
+    [true, true, 0, 0, 'Reset all'],
+  ] as const)('selects recovery for query=%s filters=%s alternative counts %s/%s', (query, filters, withoutQuery, withoutFilters, label) => {
+    expect(searchRecoveryAction(query, filters, { withoutQuery, withoutFilters })).toBe(label);
+  });
+
+  afterEach(() => vi.unstubAllGlobals());
+  it.each([
+    ['', false, true, 'none', 'none'],
+    ['Redis', false, true, 'none', 'none'],
+    ['', true, true, '', 'none'],
+    ['Redis', true, true, 'none', ''],
+    ['', true, false, 'none', 'none'],
+    ['Redis', true, false, 'none', 'none'],
+  ] as const)('shows only the appropriate toolbar action for query=%s filters=%s results=%s', (query, hasFilters, hasResults, clearDisplay, resetDisplay) => {
+    const clearFilters = { style: { display: '' } };
+    const reset = Object.assign(new EventTarget(), { style: { display: '' } });
+    const root = { querySelector: (selector: string) => selector.includes('reset-all') ? reset : clearFilters } as unknown as HTMLElement;
+    const presentation = new ApiSearchPresentation(root, { value: query } as HTMLInputElement, vi.fn(), new AbortController().signal);
+    presentation.update(hasFilters, hasResults);
+    expect(clearFilters.style.display).toBe(clearDisplay);
+    expect(reset.style.display).toBe(resetDisplay);
+  });
+
+  it.each([
+    [2, 3, 'Clear filters', false, true, 'keep your search text'],
+    [2, 0, 'Clear search', true, false, 'keep the selected filters'],
+    [0, 0, 'Reset all', true, true, 'Neither change alone returns results'],
+  ] as const)('renders a contextual API recovery action for %s/%s alternatives', (withoutQuery, withoutFilters, label, clearsQuery, clearsFilters, hint) => {
+    class Element extends EventTarget {
+      textContent = '';
+      className = '';
+      type = '';
+      value = '';
+      style = { display: '' };
+      attributes: Record<string, string> = {};
+      children: Element[] = [];
+      setAttribute(name: string, value: string) { this.attributes[name] = value; }
+      insertBefore(child: Element, reference: Element | null) {
+        if (reference === null) this.children.push(child);
+        else this.children.splice(this.children.indexOf(reference), 0, child);
+      }
+      append(...children: Element[]) { this.children.push(...children); }
+      replaceChildren(...children: Element[]) { this.children = children; }
+      querySelector() { return null; }
+      click() { this.dispatchEvent(new Event('click')); }
+      focus = vi.fn();
+    }
+    vi.stubGlobal('document', { createElement: () => new Element() });
+    const input = new Element();
+    input.value = '<img src=x onerror=alert(1)>';
+    const filters = new Element();
+    const reset = new Element();
+    const clearFilters = vi.fn();
+    filters.addEventListener('click', clearFilters);
+    const clearQuery = vi.fn();
+    const root = { querySelector: (selector: string) => selector.includes('reset-all') ? reset : filters } as unknown as HTMLElement;
+    const presentation = new ApiSearchPresentation(root, input as unknown as HTMLInputElement, clearQuery, new AbortController().signal);
+    const results = new Element();
+    presentation.renderEmpty(results as unknown as HTMLElement, true, false, { withoutQuery, withoutFilters }, new Set(['method']), new Set(['13.6.0']));
+    expect(filters.style.display).toBe('none');
+    expect(reset.style.display).toBe('none');
+    const [title, guidance, activeFilters, button] = results.children[0].children;
+    expect(title.textContent).toBe(`No API entries match "${input.value}" with these filters`);
+    expect(activeFilters.className).toBe('search-active-filters');
+    expect(activeFilters.attributes).toEqual({ role: 'list', 'aria-label': 'Active filters' });
+    expect(activeFilters.children.map(item => item.textContent)).toEqual(['Kind: method', 'Version: 13.6.0']);
+    expect(guidance.textContent).not.toMatch(/Kind:|Version:/);
+    expect(guidance.textContent).toContain(hint);
+    expect(button.textContent).toBe(label);
+    button.click();
+    expect(clearQuery).toHaveBeenCalledTimes(clearsQuery ? 1 : 0);
+    expect(clearFilters).toHaveBeenCalledTimes(clearsFilters ? 1 : 0);
+    expect(input.focus).toHaveBeenCalledOnce();
+  });
+
+  it('creates a dataset-empty state with no misleading recovery button', () => {
+    const elements: { tag: string; textContent: string; children: unknown[]; append: (...children: unknown[]) => void }[] = [];
+    vi.stubGlobal('document', {
+      createElement: (tag: string) => {
+        const element = { tag, textContent: '', children: [] as unknown[], querySelector() { return null; }, append(...children: unknown[]) { this.children.push(...children); } };
+        elements.push(element);
+        return element;
+      },
+    });
+    createSearchEmptyState({ title: 'No API entries available', hint: 'There are no searchable entries.' });
+    expect(elements.map(element => element.tag)).toEqual(['div', 'p', 'p']);
+  });
+});
diff --git a/src/frontend/tests/unit/search-recovery.vitest.test.ts b/src/frontend/tests/unit/search-recovery.vitest.test.ts
new file mode 100644
index 000000000..a292c4ac6
--- /dev/null
+++ b/src/frontend/tests/unit/search-recovery.vitest.test.ts
@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { searchRecoveryAction } from '../../src/components/search/search-empty-state';
+import { emptyResultsMessage } from '../../src/components/dev-center/empty-results';
+
+describe('intent-preserving empty recovery', () => {
+  it.each([
+    [true, true, 3, 5, 'Clear filters'],
+    [true, true, 0, 5, 'Clear filters'],
+    [true, true, 3, 0, 'Clear search'],
+    [true, true, 0, 0, 'Reset all'],
+    [true, false, 3, 0, 'Clear search'],
+    [false, true, 0, 3, 'Clear filters'],
+  ] as const)('selects useful recovery for query=%s filters=%s counts=%s/%s', (query, filters, withoutQuery, withoutFilters, action) => {
+    expect(searchRecoveryAction(query, filters, { withoutQuery, withoutFilters })).toBe(action);
+  });
+
+  it('explains that an unmatched query can be cleared without discarding the selected topic', () => {
+    expect(emptyResultsMessage('resources', ' asd ', ['Topic: Foundations'], { withoutQuery: 12, withoutFilters: 0 })).toEqual({
+      action: 'Clear search',
+      title: 'No resources match "asd"',
+      hint: 'Try another term, or clear your search while keeping your filters.',
+    });
+  });
+
+  it('identifies filter restrictions only when the query has matches elsewhere', () => {
+    const message = emptyResultsMessage('terms', 'redis', ['Topic: Foundations', 'Letter: A'], { withoutQuery: 2, withoutFilters: 1 });
+    expect(message.action).toBe('Clear filters');
+    expect(message.title).toBe('No terms match "redis" with these filters');
+    expect(message.hint).toContain('Keep your search');
+    expect(message.hint).not.toContain('Active filters:');
+  });
+});

From 63c71e4f285cc72969ffa0ca146d32477e8e2ed2 Mon Sep 17 00:00:00 2001
From: David Pine <7679720+IEvangelist@users.noreply.github.com>
Date: Fri, 18 Sep 2026 16:13:14 -0500
Subject: [PATCH 2/6] Use theme text colors for header wordmark and controls

Retain brand artwork, button backgrounds and visible focus indicators while removing accent-colored header text and icons.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
---
 .../src/components/starlight/Header.astro     |  6 ++---
 .../src/components/starlight/Search.astro     |  2 +-
 src/frontend/src/styles/site.css              |  4 ++--
 src/frontend/tests/e2e/dev-layout.spec.ts     | 22 +++++++++++++++++--
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/components/starlight/Header.astro b/src/frontend/src/components/starlight/Header.astro
index f885f766a..81e351d3c 100644
--- a/src/frontend/src/components/starlight/Header.astro
+++ b/src/frontend/src/components/starlight/Header.astro
@@ -209,7 +209,7 @@ const tryLabel = t('header.try' as any);
       border: none;
       cursor: pointer;
       padding: 0.5rem;
-      color: var(--sl-color-text-accent);
+      color: var(--sl-color-text);
       transition:
         opacity 0.2s ease,
         transform 0.15s ease;
@@ -428,7 +428,7 @@ const tryLabel = t('header.try' as any);
       background: var(--sl-color-text-accent);
       border: 1px solid var(--sl-color-text-accent);
       border-radius: 0.5rem;
-      color: var(--sl-color-bg);
+      color: var(--sl-color-text);
       opacity: 1;
       transform: none;
     }
@@ -438,7 +438,7 @@ const tryLabel = t('header.try' as any);
       background: var(--sl-color-accent-low);
       border-color: var(--sl-color-accent-low);
       border-radius: 0.5rem;
-      color: var(--aspire-color-purple);
+      color: var(--sl-color-text);
       opacity: 1;
     }
 
diff --git a/src/frontend/src/components/starlight/Search.astro b/src/frontend/src/components/starlight/Search.astro
index 1338c689b..61e043c72 100644
--- a/src/frontend/src/components/starlight/Search.astro
+++ b/src/frontend/src/components/starlight/Search.astro
@@ -547,7 +547,7 @@ const typescriptHref = `${base}/reference/api/typescript/`;
   }
 
   site-search button[data-open-modal] {
-    color: var(--sl-color-gray-1) !important;
+    color: var(--sl-color-text) !important;
   }
 
   site-search button[data-open-modal] :where(svg, span) {
diff --git a/src/frontend/src/styles/site.css b/src/frontend/src/styles/site.css
index a296429e1..05280e41b 100644
--- a/src/frontend/src/styles/site.css
+++ b/src/frontend/src/styles/site.css
@@ -65,7 +65,7 @@
   --sl-color-text-accent: var(--aspire-color-secondary);
 
   .site-title span {
-    color: var(--aspire-color-light);
+    color: var(--sl-color-text);
   }
 
   .sl-link-card .description {
@@ -169,7 +169,7 @@
   --sl-color-text-accent: var(--aspire-color-primary);
 
   .site-title span {
-    color: var(--aspire-color);
+    color: var(--sl-color-text);
   }
 
   .sl-link-card > svg.icon,
diff --git a/src/frontend/tests/e2e/dev-layout.spec.ts b/src/frontend/tests/e2e/dev-layout.spec.ts
index 3b9855567..f55a216db 100644
--- a/src/frontend/tests/e2e/dev-layout.spec.ts
+++ b/src/frontend/tests/e2e/dev-layout.spec.ts
@@ -491,6 +491,24 @@ test('Dev Hub has a distinct active header button on hub and browse routes in bo
       await page.mouse.move(0, 0);
       await hub.evaluate((element) => element.blur());
       await page.evaluate((value) => document.documentElement.setAttribute('data-theme', value), theme);
+      const foreground = await hub.evaluate((element) => {
+        const probe = document.createElement('span');
+        probe.style.color = 'var(--sl-color-text)';
+        element.append(probe);
+        const color = getComputedStyle(probe).color;
+        probe.remove();
+        return color;
+      });
+      await expect(page.locator('header .site-title span')).toHaveCSS('color', foreground);
+      for (const control of await page.locator('header :is(.header-icon-btn, .docs-btn, .docs-btn-mobile, site-search > button[data-open-modal]):visible').all()) {
+        await expect(control).toHaveCSS('color', foreground);
+        await control.hover();
+        await expect(control).toHaveCSS('color', foreground);
+        await control.focus();
+        await expect(control).toHaveCSS('color', foreground);
+        await control.evaluate((element) => element.blur());
+      }
+      await page.mouse.move(0, 0);
       await expect(hub).toBeVisible();
       if (route === '/') {
         await expect(hub).not.toHaveAttribute('aria-current');
@@ -508,7 +526,7 @@ test('Dev Hub has a distinct active header button on hub and browse routes in bo
         expect(colors.foreground).not.toBe(colors.background);
         if (theme === 'light') {
           expect(colors.background).toBe('rgb(213, 210, 246)');
-          expect(colors.foreground).toBe('rgb(81, 43, 212)');
+          expect(colors.foreground).toBe(foreground);
         }
         await hub.focus();
         await expect(hub).not.toHaveCSS('outline-style', 'none');
@@ -520,7 +538,7 @@ test('Dev Hub has a distinct active header button on hub and browse routes in bo
         for (const control of await page.locator('header :is(.dev-center-btn, .dev-center-btn-mobile, .install-cli-btn):visible').all()) {
           await control.hover();
           await expect(control).toHaveCSS('background-color', 'rgb(213, 210, 246)');
-          await expect(control).toHaveCSS('color', 'rgb(81, 43, 212)');
+          await expect(control).toHaveCSS('color', foreground);
           await control.focus();
           await expect(control).toHaveCSS('outline-style', 'solid');
           await control.evaluate((element) => element.blur());

From 977c70994b72354c750c447f4ab7a207543bfc82 Mon Sep 17 00:00:00 2001
From: David Pine <7679720+IEvangelist@users.noreply.github.com>
Date: Fri, 18 Sep 2026 16:17:06 -0500
Subject: [PATCH 3/6] Use dark icon text on the selected Hub button

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
---
 src/frontend/src/components/starlight/Header.astro | 2 +-
 src/frontend/tests/e2e/dev-layout.spec.ts          | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/starlight/Header.astro b/src/frontend/src/components/starlight/Header.astro
index 81e351d3c..04304a200 100644
--- a/src/frontend/src/components/starlight/Header.astro
+++ b/src/frontend/src/components/starlight/Header.astro
@@ -428,7 +428,7 @@ const tryLabel = t('header.try' as any);
       background: var(--sl-color-text-accent);
       border: 1px solid var(--sl-color-text-accent);
       border-radius: 0.5rem;
-      color: var(--sl-color-text);
+      color: var(--aspire-color-black);
       opacity: 1;
       transform: none;
     }
diff --git a/src/frontend/tests/e2e/dev-layout.spec.ts b/src/frontend/tests/e2e/dev-layout.spec.ts
index f55a216db..812ed8394 100644
--- a/src/frontend/tests/e2e/dev-layout.spec.ts
+++ b/src/frontend/tests/e2e/dev-layout.spec.ts
@@ -501,11 +501,12 @@ test('Dev Hub has a distinct active header button on hub and browse routes in bo
       });
       await expect(page.locator('header .site-title span')).toHaveCSS('color', foreground);
       for (const control of await page.locator('header :is(.header-icon-btn, .docs-btn, .docs-btn-mobile, site-search > button[data-open-modal]):visible').all()) {
-        await expect(control).toHaveCSS('color', foreground);
+        const expectedColor = await control.getAttribute('aria-current') === 'page' ? 'rgb(31, 30, 51)' : foreground;
+        await expect(control).toHaveCSS('color', expectedColor);
         await control.hover();
-        await expect(control).toHaveCSS('color', foreground);
+        await expect(control).toHaveCSS('color', expectedColor);
         await control.focus();
-        await expect(control).toHaveCSS('color', foreground);
+        await expect(control).toHaveCSS('color', expectedColor);
         await control.evaluate((element) => element.blur());
       }
       await page.mouse.move(0, 0);
@@ -524,6 +525,7 @@ test('Dev Hub has a distinct active header button on hub and browse routes in bo
           return { foreground: style.color, background: style.backgroundColor };
         });
         expect(colors.foreground).not.toBe(colors.background);
+        expect(colors.foreground).toBe('rgb(31, 30, 51)');
         if (theme === 'light') {
           expect(colors.background).toBe('rgb(213, 210, 246)');
           expect(colors.foreground).toBe(foreground);

From 3ffdfa8882b4083adc09d5a061d0333627f2df0b Mon Sep 17 00:00:00 2001
From: David Pine <7679720+IEvangelist@users.noreply.github.com>
Date: Fri, 18 Sep 2026 16:21:08 -0500
Subject: [PATCH 4/6] Order header actions and highlight the selected Videos
 destination

Keep Install CLI, Videos, Hub and Cookies in DOM order on both layouts; share the selected Hub treatment with Videos and cover route changes, focus and responsive geometry.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
---
 .../src/components/starlight/Header.astro     | 101 +++++++++---------
 src/frontend/tests/e2e/dev-layout.spec.ts     |  44 ++++++++
 src/frontend/tests/e2e/ui-regressions.spec.ts |  10 +-
 3 files changed, 101 insertions(+), 54 deletions(-)

diff --git a/src/frontend/src/components/starlight/Header.astro b/src/frontend/src/components/starlight/Header.astro
index 04304a200..412c90efd 100644
--- a/src/frontend/src/components/starlight/Header.astro
+++ b/src/frontend/src/components/starlight/Header.astro
@@ -29,21 +29,16 @@ const tryLabel = t('header.try' as any);
     <Search />
   </div>
   <div class="sl-hidden md:sl-flex print:hidden right-group">
-    {
-      isSiteTourEnabled && (
-        <button
-          type="button"
-          class="header-icon-btn tour-help-btn"
-          data-tour-trigger
-          data-tour-target="tour-help"
-          data-tour-step="tour-help"
-          aria-label="Start site tour"
-        >
-          <span class="sr-only">Start site tour</span>
-          <SiteNavHelpSvg />
-        </button>
-      )
-    }
+    <button
+      class="header-icon-btn install-cli-btn"
+      data-open-install-modal
+      data-tour-target="install-cli"
+      data-tour-step="install-cli"
+      aria-label="Open install Aspire CLI dialog"
+    >
+      <span class="sr-only">Install Aspire CLI</span>
+      <Icon name="download" />
+    </button>
     <a
       href="/community/videos/"
       class="header-icon-btn live-btn"
@@ -51,11 +46,15 @@ const tryLabel = t('header.try' as any);
       data-source="none"
       data-tour-target="live-status"
       aria-label="Watch Aspire live streams"
+      aria-current={Astro.url.pathname === '/community/videos/' ? 'page' : undefined}
     >
       <span class="sr-only">Watch Aspire live streams</span>
       <LiveSvg />
       <span class="live-dot" aria-hidden="true"></span>
     </a>
+    <a href="/hub/" class="header-icon-btn dev-center-btn" aria-label={devCenterLabel} title={devCenterLabel} aria-current={Astro.url.pathname.startsWith('/hub/') ? 'page' : undefined}>
+      <DevHubSvg aria-hidden="true" />
+    </a>
     <button
       type="button"
       class="header-icon-btn cookie-consent-btn"
@@ -67,23 +66,6 @@ const tryLabel = t('header.try' as any);
       <span class="sr-only">Cookie Preferences</span>
       <CookiesSvg />
     </button>
-    <button
-      class="header-icon-btn install-cli-btn"
-      data-open-install-modal
-      data-tour-target="install-cli"
-      data-tour-step="install-cli"
-      aria-label="Open install Aspire CLI dialog"
-    >
-      <span class="sr-only">Install Aspire CLI</span>
-      <Icon name="download" />
-    </button>
-    <a href="/hub/" class="header-icon-btn dev-center-btn" aria-label={devCenterLabel} title={devCenterLabel} aria-current={Astro.url.pathname.startsWith('/hub/') ? 'page' : undefined}>
-      <DevHubSvg aria-hidden="true" />
-    </a>
-    <a href={docsUrl} class="docs-btn">{docsLabel}</a>
-    <a href={tryAspireUrl} class="try-aspire-btn">{tryAspireLabel}</a>
-  </div>
-  <div class="sl-flex md:sl-hidden print:hidden right-group-mobile">
     {
       isSiteTourEnabled && (
         <button
@@ -99,6 +81,20 @@ const tryLabel = t('header.try' as any);
         </button>
       )
     }
+    <a href={docsUrl} class="docs-btn">{docsLabel}</a>
+    <a href={tryAspireUrl} class="try-aspire-btn">{tryAspireLabel}</a>
+  </div>
+  <div class="sl-flex md:sl-hidden print:hidden right-group-mobile">
+    <button
+      class="header-icon-btn install-cli-btn"
+      data-open-install-modal
+      data-tour-target="install-cli"
+      data-tour-step="install-cli"
+      aria-label="Open install Aspire CLI dialog"
+    >
+      <span class="sr-only">Install Aspire CLI</span>
+      <Icon name="download" />
+    </button>
     <a
       href="/community/videos/"
       class="header-icon-btn live-btn"
@@ -106,11 +102,15 @@ const tryLabel = t('header.try' as any);
       data-source="none"
       data-tour-target="live-status"
       aria-label="Watch Aspire live streams"
+      aria-current={Astro.url.pathname === '/community/videos/' ? 'page' : undefined}
     >
       <span class="sr-only">Watch Aspire live streams</span>
       <LiveSvg />
       <span class="live-dot" aria-hidden="true"></span>
     </a>
+    <a href="/hub/" class="header-icon-btn dev-center-btn-mobile" aria-label={devCenterLabel} title={devCenterLabel} aria-current={Astro.url.pathname.startsWith('/hub/') ? 'page' : undefined}>
+      <DevHubSvg aria-hidden="true" />
+    </a>
     <button
       type="button"
       class="header-icon-btn cookie-consent-btn"
@@ -122,19 +122,21 @@ const tryLabel = t('header.try' as any);
       <span class="sr-only">Cookie Preferences</span>
       <CookiesSvg />
     </button>
-    <button
-      class="header-icon-btn install-cli-btn"
-      data-open-install-modal
-      data-tour-target="install-cli"
-      data-tour-step="install-cli"
-      aria-label="Open install Aspire CLI dialog"
-    >
-      <span class="sr-only">Install Aspire CLI</span>
-      <Icon name="download" />
-    </button>
-    <a href="/hub/" class="header-icon-btn dev-center-btn-mobile" aria-label={devCenterLabel} title={devCenterLabel} aria-current={Astro.url.pathname.startsWith('/hub/') ? 'page' : undefined}>
-      <DevHubSvg aria-hidden="true" />
-    </a>
+    {
+      isSiteTourEnabled && (
+        <button
+          type="button"
+          class="header-icon-btn tour-help-btn"
+          data-tour-trigger
+          data-tour-target="tour-help"
+          data-tour-step="tour-help"
+          aria-label="Start site tour"
+        >
+          <span class="sr-only">Start site tour</span>
+          <SiteNavHelpSvg />
+        </button>
+      )
+    }
     <a href={docsUrl} class="docs-btn-mobile">{docsLabel}</a>
     <a href={tryAspireUrl} class="try-aspire-btn-mobile" aria-label={tryAspireLabel}>{tryLabel}</a>
   </div>
@@ -358,7 +360,7 @@ const tryLabel = t('header.try' as any);
     }
 
     .header
-      :is(.docs-btn, .dev-center-btn, .install-cli-btn, .try-aspire-btn, .docs-btn-mobile, .dev-center-btn-mobile, .try-aspire-btn-mobile):focus-visible {
+      :is(.docs-btn, .dev-center-btn, .live-btn, .install-cli-btn, .try-aspire-btn, .docs-btn-mobile, .dev-center-btn-mobile, .try-aspire-btn-mobile):focus-visible {
       outline: 0.1875rem solid var(--aspire-action-focus, #7455dd);
       outline-offset: 0.1875rem;
     }
@@ -410,7 +412,8 @@ const tryLabel = t('header.try' as any);
       color: var(--aspire-action-primary-text, #ffffff);
     }
 
-    .dev-center-btn {
+    .dev-center-btn,
+    .live-btn {
       width: 2.5rem;
       height: 2.5rem;
     }
@@ -424,7 +427,7 @@ const tryLabel = t('header.try' as any);
       border: 0;
     }
 
-    .header :is(.dev-center-btn, .dev-center-btn-mobile)[aria-current='page'] {
+    .header :is(.dev-center-btn, .dev-center-btn-mobile, .live-btn)[aria-current='page'] {
       background: var(--sl-color-text-accent);
       border: 1px solid var(--sl-color-text-accent);
       border-radius: 0.5rem;
@@ -434,7 +437,7 @@ const tryLabel = t('header.try' as any);
     }
 
     :global([data-theme='light'])
-      .header :is(.dev-center-btn, .dev-center-btn-mobile, .install-cli-btn):is([aria-current='page'], :hover, :focus-visible) {
+      .header :is(.dev-center-btn, .dev-center-btn-mobile, .live-btn, .install-cli-btn):is([aria-current='page'], :hover, :focus-visible) {
       background: var(--sl-color-accent-low);
       border-color: var(--sl-color-accent-low);
       border-radius: 0.5rem;
diff --git a/src/frontend/tests/e2e/dev-layout.spec.ts b/src/frontend/tests/e2e/dev-layout.spec.ts
index 812ed8394..f12459ac0 100644
--- a/src/frontend/tests/e2e/dev-layout.spec.ts
+++ b/src/frontend/tests/e2e/dev-layout.spec.ts
@@ -475,7 +475,10 @@ test('desktop header actions use consistent spacing', async ({ page }) => {
     expect(hubIcon.width).toBeCloseTo(20, 0);
     expect(hubIcon.height).toBeCloseTo(20, 0);
     const docs = (await banner.getByRole('link', { name: 'Docs', exact: true }).boundingBox())!;
+    const videos = (await banner.locator('.live-btn:visible').boundingBox())!;
     const start = (await banner.getByRole('link', { name: 'Try Aspire', exact: true }).boundingBox())!;
+    expect(videos.x - install.x - install.width).toBeCloseTo(8, 0);
+    expect(dev.x - videos.x - videos.width).toBeCloseTo(8, 0);
     expect(docs.x - dev.x - dev.width).toBeCloseTo(8, 0);
     expect(start.x - docs.x - docs.width).toBeCloseTo(8, 0);
   }
@@ -483,6 +486,47 @@ test('desktop header actions use consistent spacing', async ({ page }) => {
   await expect(page.getByRole('tooltip')).toContainText('Dev Hub');
 });
 
+test('header icon order and Videos selected effect survive client navigation', async ({ page }) => {
+  for (const theme of ['light', 'dark']) {
+    await page.goto('/hub/');
+    await page.evaluate((value) => {
+      localStorage.setItem('starlight-theme', value);
+      document.documentElement.dataset.theme = value;
+    }, theme);
+    const hub = page.getByRole('banner').getByRole('link', { name: 'Dev Hub', exact: true });
+    const videos = page.locator('header .live-btn:visible');
+    const selectedStyle = await hub.evaluate((element) => {
+      const style = getComputedStyle(element);
+      return { color: style.color, background: style.backgroundColor, radius: style.borderRadius };
+    });
+    await expect(videos).not.toHaveAttribute('aria-current');
+    for (const group of ['.right-group', '.right-group-mobile']) {
+      await expect(page.locator(`header ${group} > .header-icon-btn`).nth(0)).toHaveClass(/install-cli-btn/);
+      await expect(page.locator(`header ${group} > .header-icon-btn`).nth(1)).toHaveClass(/live-btn/);
+      await expect(page.locator(`header ${group} > .header-icon-btn`).nth(2)).toHaveClass(/dev-center-btn/);
+      await expect(page.locator(`header ${group} > .header-icon-btn`).nth(3)).toHaveClass(/cookie-consent-btn/);
+    }
+    const hubBox = (await hub.boundingBox())!;
+    const videoBox = (await videos.boundingBox())!;
+    expect(hubBox.x - videoBox.x - videoBox.width).toBeCloseTo(8, 0);
+    await videos.click();
+    await expect(page).toHaveURL(/\/community\/videos\/$/);
+    await expect(videos).toHaveAttribute('aria-current', 'page');
+    await expect(hub).not.toHaveAttribute('aria-current');
+    await expect(videos).toHaveCSS('color', selectedStyle.color);
+    await expect(videos).toHaveCSS('background-color', selectedStyle.background);
+    await expect(videos).toHaveCSS('border-radius', selectedStyle.radius);
+    await page.keyboard.press('Tab');
+    await videos.focus();
+    await expect(videos).toHaveCSS('outline-style', 'solid');
+    await expect(videos).toHaveCSS('color', 'rgb(31, 30, 51)');
+    await hub.click();
+    await expect(page).toHaveURL(/\/hub\/$/);
+    await expect(hub).toHaveAttribute('aria-current', 'page');
+    await expect(videos).not.toHaveAttribute('aria-current');
+  }
+});
+
 test('Dev Hub has a distinct active header button on hub and browse routes in both themes', async ({ page }) => {
   for (const route of ['/hub/', '/hub/browse/', '/']) {
     await page.goto(route);
diff --git a/src/frontend/tests/e2e/ui-regressions.spec.ts b/src/frontend/tests/e2e/ui-regressions.spec.ts
index 44703af6f..16b294ed5 100644
--- a/src/frontend/tests/e2e/ui-regressions.spec.ts
+++ b/src/frontend/tests/e2e/ui-regressions.spec.ts
@@ -381,11 +381,11 @@ test('mobile docs chrome prioritizes reading and keeps navigation geometry consi
       )
       .toBe(2);
 
-    for (const control of [topics.locator('a').first(), filter]) {
-      const box = await control.boundingBox();
-      expect(box).not.toBeNull();
-      expect(box?.height ?? 0).toBeGreaterThanOrEqual(44);
-    }
+    const topicBox = await topics.locator('a').first().boundingBox();
+    expect(topicBox).not.toBeNull();
+    expect(topicBox?.height ?? 0).toBeGreaterThanOrEqual(44);
+    const coarse = await page.evaluate(() => matchMedia('(pointer: coarse)').matches);
+    await expect(filter).toHaveCSS('height', coarse ? '48px' : '40px');
 
     for (const control of [groupSummary, nestedLink]) {
       const box = await control.boundingBox();

From bcdd2dee7ba67bb13d26e15ec5ecf9e46a0d5a1e Mon Sep 17 00:00:00 2001
From: David Pine <7679720+IEvangelist@users.noreply.github.com>
Date: Fri, 18 Sep 2026 17:22:28 -0500
Subject: [PATCH 5/6] Fix touch toolbar layout shift and stale search
 regression contracts

Reserve room for touch-sized reset actions before filters activate. Align glossary and surface assertions with the requested UX, and use an exact Pagefind phrase to test zero results without prefix fallback matches.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
---
 .../components/dev-center/ResourceBrowser.astro   |  1 +
 src/frontend/tests/e2e/dev-glossary.spec.ts       |  7 ++++---
 src/frontend/tests/e2e/dev-layout.spec.ts         | 15 ++++++++++-----
 src/frontend/tests/e2e/site-search.spec.ts        |  9 +++++++--
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/components/dev-center/ResourceBrowser.astro b/src/frontend/src/components/dev-center/ResourceBrowser.astro
index d8a4d5dc4..543c24047 100644
--- a/src/frontend/src/components/dev-center/ResourceBrowser.astro
+++ b/src/frontend/src/components/dev-center/ResourceBrowser.astro
@@ -158,6 +158,7 @@ const groups = [
   .browse-filter-content { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
   .browse-results { min-width: 0; }
   .browse-results-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; min-height: 2.5rem; margin-bottom: 1.25rem; }
+  @media (pointer: coarse) { .browse-results-toolbar { min-height: 2.75rem; } }
   .browse-grid, .browse-loading-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 0; }
   .browse-pagination { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--sl-color-gray-5); font-size: 0.875rem; }
   .browse-page-numbers { display: flex; align-items: center; gap: 0.25rem; }
diff --git a/src/frontend/tests/e2e/dev-glossary.spec.ts b/src/frontend/tests/e2e/dev-glossary.spec.ts
index b1b21b0ef..ab4d96f5d 100644
--- a/src/frontend/tests/e2e/dev-glossary.spec.ts
+++ b/src/frontend/tests/e2e/dev-glossary.spec.ts
@@ -69,16 +69,17 @@ test('glossary toolbar keeps search compact and every letter reachable in both t
   await expect(filterPanel.getByRole('search', { name: 'Search the glossary' })).toBeVisible();
   await expect(filterPanel.getByRole('navigation', { name: 'Glossary letters' })).toBeVisible();
   await expect(page.getByRole('searchbox', { name: 'Find a term' })).toHaveAttribute('placeholder', 'Search glossary');
-  await expect(page.locator('.dev-description')).toHaveText('Search for a term, or filter by topic and first letter.');
+  await expect(page.locator('.dev-description')).toHaveCount(0);
+  await expect(page.locator('meta[name="description"]')).toHaveAttribute('content', 'Search for a term, or filter by topic and first letter.');
   const label = page.locator('label[for="glossary-search-input"]');
   await expect(label).toHaveCSS('clip-path', 'inset(50%)');
   for (const width of [320, 390, 768, 1024, 1199, 1200, 1440]) {
     await page.setViewportSize({ width, height: 1000 });
     const titleBox = (await heading.boundingBox())!;
     const breadcrumbBox = (await page.getByRole('navigation', { name: 'Breadcrumb', exact: true }).boundingBox())!;
-    const introductionBox = (await page.locator('.dev-description').boundingBox())!;
+    const filterPanelBox = (await filterPanel.boundingBox())!;
     expect(breadcrumbBox.y).toBeGreaterThanOrEqual(titleBox.y + titleBox.height);
-    expect(introductionBox.y).toBeGreaterThanOrEqual(breadcrumbBox.y + breadcrumbBox.height);
+    expect(filterPanelBox.y).toBeGreaterThanOrEqual(breadcrumbBox.y + breadcrumbBox.height);
     for (const theme of ['light', 'dark']) {
       await page.locator('html').evaluate((html, value) => html.dataset.theme = value, theme);
       await page.mouse.move(0, 0);
diff --git a/src/frontend/tests/e2e/dev-layout.spec.ts b/src/frontend/tests/e2e/dev-layout.spec.ts
index f12459ac0..d1087981a 100644
--- a/src/frontend/tests/e2e/dev-layout.spec.ts
+++ b/src/frontend/tests/e2e/dev-layout.spec.ts
@@ -687,7 +687,7 @@ test('Developer Hub typography and glossary controls reflow in both themes', asy
       });
       expect(layout.overflow).toBe(false);
       expect(layout.headingSize).toBeGreaterThanOrEqual(32);
-      expect(layout.hasTagline).toBe(true);
+      expect(layout.hasTagline).toBe(false);
       expect(layout.pillHeights.every((height) => height >= (width <= 600 ? 44 : 36))).toBe(true);
       expect(layout.searchClass).toContain('inpage-search-input');
       await expect(page.locator('glossary-browser select')).toHaveCount(0);
@@ -968,21 +968,26 @@ test('Hub search surfaces stay consistent inside tinted control panels', async (
   await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
   const hubSearchBackground = await page.locator('.dev-search').evaluate((element) => getComputedStyle(element).backgroundColor);
 
+  await page.goto('/integrations/gallery/');
+  await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
+  const inputBackground = await page.locator('main .search-field-input').evaluate((element) => getComputedStyle(element).backgroundColor);
+
   await page.goto('/hub/browse/');
   await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
   await expect(page.locator('.browse-search')).toBeVisible();
   const browseBackgrounds = await page.locator('.inpage-search-input, .browse-filter-group summary')
     .evaluateAll((elements) => elements.map((element) => getComputedStyle(element).backgroundColor));
-  expect(browseBackgrounds.every((background) => background === hubSearchBackground)).toBe(true);
-  expect(await page.locator('.browse-controls').evaluate((element) => getComputedStyle(element).backgroundColor)).not.toBe(hubSearchBackground);
+  expect(browseBackgrounds.every((background) => background === inputBackground)).toBe(true);
+  expect(await page.locator('.browse-controls').evaluate((element) => getComputedStyle(element).backgroundColor)).not.toBe(inputBackground);
 
   await page.goto('/hub/glossary/');
   await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
   await expect(page.locator('.glossary-controls')).toBeVisible();
-  const glossaryBackgrounds = await page.locator('.glossary-controls .inpage-search-input, .glossary-controls .api-filter-chip:not(.active)')
+  await expect(page.locator('.glossary-controls .inpage-search-input')).toHaveCSS('background-color', inputBackground);
+  const glossaryBackgrounds = await page.locator('.glossary-controls .api-filter-chip:not(.active)')
     .evaluateAll((elements) => elements.map((element) => getComputedStyle(element).backgroundColor));
   expect(glossaryBackgrounds.every((background) => background === hubSearchBackground)).toBe(true);
-  expect(await page.locator('.glossary-filter-panel').evaluate((element) => getComputedStyle(element).backgroundColor)).not.toBe(hubSearchBackground);
+  expect(await page.locator('.glossary-filter-panel').evaluate((element) => getComputedStyle(element).backgroundColor)).not.toBe(inputBackground);
 });
 
 test('AWS discovery opens a first-party overview with provider guidance', async ({ page }) => {
diff --git a/src/frontend/tests/e2e/site-search.spec.ts b/src/frontend/tests/e2e/site-search.spec.ts
index 9c49e2fe5..48323df0a 100644
--- a/src/frontend/tests/e2e/site-search.spec.ts
+++ b/src/frontend/tests/e2e/site-search.spec.ts
@@ -5,6 +5,9 @@ import { readFileSync } from 'node:fs';
 
 const require = createRequire(import.meta.url);
 const pagefindRequire = createRequire(require.resolve('@astrojs/starlight'));
+// Native prefix expansion can match an indexed "Z" for an unquoted nonsense
+// term. Exact-phrase syntax makes these tests exercise a genuinely empty search.
+const missingSearchQuery = '"zzzznonexistentcatalogquery"';
 
 // Exercise native transitions on desktop and the supported swap fallback on
 // touch projects, matching the other client-navigation regression suites.
@@ -176,9 +179,10 @@ test.describe('site search dialog', () => {
       });
       expect(clearIcon).toMatchObject({ width: '16px', height: '16px' });
       expect(decodeURIComponent(clearIcon.mask)).toContain('m18 6-12 12M6 6l12 12');
-      await input.fill('zzzznonexistentcatalogquery');
+      await input.fill(missingSearchQuery);
       const message = page.locator('#starlight__search .pagefind-ui__message');
       await expect(message).toContainText(/no results|0 results/i);
+      await expect(page.locator('#starlight__search .pagefind-ui__result-link')).toHaveCount(0);
       await expect(message).toHaveCSS('font-size', '14px');
       await expect(message).toHaveCSS('font-weight', '400');
       await expect(message).toHaveCSS('font-style', 'normal');
@@ -196,8 +200,9 @@ test.describe('site search dialog', () => {
     test.skip(!ready, 'Pagefind requires the existing CI production artifact; no local build.');
     const dialog = page.locator('site-search dialog[open]');
     const input = dialog.locator('.pagefind-ui__search-input');
-    await input.fill('zzzznonexistentcatalogquery');
+    await input.fill(missingSearchQuery);
     await expect(dialog.locator('.pagefind-ui__message')).toContainText(/no results|0 results/i);
+    await expect(dialog.locator('.pagefind-ui__result-link')).toHaveCount(0);
     await expect(dialog.locator('.pagefind-ui__message')).toHaveAttribute('aria-live', 'polite');
     const clear = dialog.locator('.pagefind-ui__search-clear');
     await expect(clear).toHaveCount(1);

From f43c9f67036539147c482a32ef1d122024ed2855 Mon Sep 17 00:00:00 2001
From: David Pine <7679720+IEvangelist@users.noreply.github.com>
Date: Fri, 18 Sep 2026 18:22:26 -0500
Subject: [PATCH 6/6] Synchronize API shortcuts after native Pagefind clear

Refresh query URLs even when shortcut nodes are unchanged. Reproduce native clear behavior in both themes across the browser matrix, retaining production-index coverage.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
---
 .../src/components/starlight/Search.astro     | 19 ++++++++++---------
 .../docs/community/contributor-guide.mdx      |  2 ++
 src/frontend/tests/e2e/site-search.spec.ts    | 11 +++++++++++
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/components/starlight/Search.astro b/src/frontend/src/components/starlight/Search.astro
index 61e043c72..5107286cc 100644
--- a/src/frontend/src/components/starlight/Search.astro
+++ b/src/frontend/src/components/starlight/Search.astro
@@ -360,16 +360,17 @@ const typescriptHref = `${base}/reference/api/typescript/`;
 
       const sameLength = buttons.length === this.buttons.length;
       const sameNodes = sameLength && buttons.every((b, i) => b === this.buttons[i]);
-      if (sameNodes && this.buttons.length > 0) return;
-
-      for (const stale of this.buttons) {
-        stale.removeEventListener('mousedown', this.clickHandler);
-      }
-      this.buttons = buttons;
-      for (const btn of this.buttons) {
-        // Recompute href on mousedown so middle-click / right-click → "Open in new tab" use the latest query.
-        btn.addEventListener('mousedown', this.clickHandler);
+      if (!sameNodes) {
+        for (const stale of this.buttons) {
+          stale.removeEventListener('mousedown', this.clickHandler);
+        }
+        this.buttons = buttons;
+        for (const btn of this.buttons) {
+          // Recompute href on mousedown so middle-click / right-click → "Open in new tab" use the latest query.
+          btn.addEventListener('mousedown', this.clickHandler);
+        }
       }
+      // Pagefind's native clear updates the input without emitting an input event.
       this.update();
     }
 
diff --git a/src/frontend/src/content/docs/community/contributor-guide.mdx b/src/frontend/src/content/docs/community/contributor-guide.mdx
index d638d64da..03e327e57 100644
--- a/src/frontend/src/content/docs/community/contributor-guide.mdx
+++ b/src/frontend/src/content/docs/community/contributor-guide.mdx
@@ -866,6 +866,8 @@ To refresh the official blog archive used by Browse, run `pnpm update:blogs` fro
 
 When changing interactive search components, reuse `SearchField` and the shared search styles rather than overriding input heights, typography, colors, or clear icons per page. Keep contextual layouts, but use the same full-size input treatment; compact navigation controls can use the shared small variant.
 
+Pagefind's native clear action does not emit an `input` event. Keep the dialog's API shortcut URLs synchronized during result refreshes too.
+
 Empty-state recovery should preserve useful search intent: clear filters when that restores matches for the query, otherwise clear the query when the selected filters still have results. Reset both only when neither change alone restores results. Use the existing matching rules and facet defaults, preserve sorting, and keep unavailable data distinct from zero matches.
 
 Show one recovery action in the empty state, without competing toolbar reset links. When results exist, show one toolbar action: **Clear filters** for filters alone, or **Reset all** for a query combined with filters. A query alone only needs the input's clear icon. Keep individual filter controls editable in every state.
diff --git a/src/frontend/tests/e2e/site-search.spec.ts b/src/frontend/tests/e2e/site-search.spec.ts
index 48323df0a..d8a139a32 100644
--- a/src/frontend/tests/e2e/site-search.spec.ts
+++ b/src/frontend/tests/e2e/site-search.spec.ts
@@ -187,9 +187,20 @@ test.describe('site search dialog', () => {
       await expect(message).toHaveCSS('font-weight', '400');
       await expect(message).toHaveCSS('font-style', 'normal');
       await expect(message).toHaveCSS('line-height', '21px');
+      const apiLinks = page.locator('site-search dialog[open]');
+      for (const language of ['csharp', 'typescript']) {
+        await expect(apiLinks.locator(`a[data-api-lang="${language}"]`)).toHaveAttribute(
+          'href', `/reference/api/${language}/?q=${encodeURIComponent(missingSearchQuery)}`,
+        );
+      }
       await clear.click();
       await expect(input).toHaveValue('');
       await expect(input).toBeFocused();
+      for (const language of ['csharp', 'typescript']) {
+        await expect(apiLinks.locator(`a[data-api-lang="${language}"]`)).toHaveAttribute(
+          'href', `/reference/api/${language}/`,
+        );
+      }
     });
   }