From 70157c5725c397e90872f2a54f0e39d96cf5b0b4 Mon Sep 17 00:00:00 2001
From: John Smith <john@solrevdev.com>
Date: Thu, 26 Feb 2026 22:31:59 +0000
Subject: [PATCH] feat: improve frontend search and document remaining backlog
 [skip ci]

---
 IMPROVEMENTS.md     |  63 ++++++++
 extract_packages.py |  10 +-
 index.html          | 370 +++++++++++++++++++++++++++++++++++++-------
 3 files changed, 375 insertions(+), 68 deletions(-)

diff --git a/IMPROVEMENTS.md b/IMPROVEMENTS.md
index 7907ca4..7d0d47d 100644
--- a/IMPROVEMENTS.md
+++ b/IMPROVEMENTS.md
@@ -6,6 +6,69 @@ It is intended as a starting point for new contributors or an LLM asked to find
 Each item notes which file(s) are affected, the effort involved, and whether the change is
 backend-only (Python / CI), frontend-only (index.html), or both.
 
+## Branch Progress Update (2026-02-26)
+
+This section tracks what is already implemented on branch `codex/frontend-search-improvements`
+so future contributors/LLMs can continue from the remaining items.
+
+### Completed In This Branch
+
+- `#1` Regex crash fix in `highlightMatch()` (escaped regex input)
+- `#5` Minified JSON output in `extract_packages.py` (`separators=(",", ":")`)
+- `#6` Ranked/weighted search scoring in frontend
+- `#7` `shortDescription` fallback in result rendering
+- `#8` Incremental result rendering with `Load more` paging
+- `#9` URL search state support (`?q=`) + back/forward handling
+- `#10` Homepage link + license badge shown in cards
+- `#11` Click-to-filter for publisher and tags
+- `#26` Removed unused `re` import and unused `is_english_manifest()` helper
+
+### Current Status By Item
+
+| # | Status on this branch | Notes / next step |
+|---|---|---|
+| 1 | Done | `highlightMatch()` now escapes regex tokens before `RegExp` creation. |
+| 2 | Open | CI cache key still uses `${{ github.run_id }}` and misses cache reuse. |
+| 3 | Open | Footer still has `YOUR_USERNAME/YOUR_REPO_NAME` placeholder URL. |
+| 4 | Open | README still has duplicated summary/malformed opening heading block. |
+| 5 | Done | `packages.json` output no longer pretty-printed. |
+| 6 | Done | Weighted ranking added; exact/prefix/id/name matches now rank higher. |
+| 7 | Done | Description fallback now uses `pkg.description || pkg.shortDescription`. |
+| 8 | Done | Results render in pages of 25 with a `Load more` button. |
+| 9 | Done | Search query is read/written from URL query string. |
+| 10 | Done | Homepage and license are rendered in result cards. |
+| 11 | Done | Publisher/tags are interactive filters feeding back into search. |
+| 12 | Open | No compact/expandable details modal yet. |
+| 13 | Open | No copy-command variants UI yet. |
+| 14 | Open | No fuzzy/typo-tolerant search dependency integrated yet. |
+| 15 | Open | No pre-built backend search index artifact yet. |
+| 16 | Open | No inferred package categories generated/displayed yet. |
+| 17 | Open | Template leftover config files still present. |
+| 18 | Open | `license.txt` still has placeholder copyright holder. |
+| 19 | Open | 404 redirect path is still hardcoded in workflow. |
+| 20 | Open | Cached winget update still resets to `origin/master`. |
+| 21 | Open | `force_pages_update.sh` still assumes return branch `master`. |
+| 22 | Open | README license link/file mismatch still unresolved. |
+| 23 | Open | README still describes stricter locale behavior than extractor implements. |
+| 24 | Open | Version fallback logic still collapses non-PEP440 versions to `0.0.0`. |
+| 25 | Open | `packages.json` tracking policy remains ambiguous. |
+| 26 | Done | Dead code/import cleanup completed in extractor. |
+
+### Suggested Next Low-Risk Work (Recommended Order)
+
+1. `#3` Replace placeholder repository URL in footer (`index.html`).
+2. `#4` Clean up duplicate README summary + malformed heading.
+3. `#22` Fix README license link mismatch (`LICENSE` vs `license.txt`).
+4. `#2` Improve CI cache key strategy (date-based key + restore keys).
+5. `#20` Make cached winget reset use detected default branch.
+6. `#19` Remove hardcoded 404 redirect repo path.
+7. `#21` Make `force_pages_update.sh` restore original branch.
+
+### Workflow Safety Note For This Branch
+
+`github_workflows_build.yml` runs on push to `main`/`master`, on schedule, and via manual dispatch.
+Pushing `codex/frontend-search-improvements` should not trigger that workflow automatically.
+
 ---
 
 ## Bugs
diff --git a/extract_packages.py b/extract_packages.py
index d15bfde..784cc18 100644
--- a/extract_packages.py
+++ b/extract_packages.py
@@ -4,7 +4,6 @@
 import json
 import datetime
 from packaging import version
-import re
 
 class EnhancedJSONEncoder(json.JSONEncoder):
     def default(self, obj):
@@ -20,11 +19,6 @@ def parse_version(ver_str):
         # Fallback for non-standard versions
         return version.parse("0.0.0")
 
-def is_english_manifest(filepath):
-    """Check if manifest is English or default (no locale specified)"""
-    # Default manifests (no locale) or English manifests
-    return '.locale.' not in filepath or '.locale.en-US.' in filepath
-
 def extract_package_info(manifest_dir):
     """Extract comprehensive package info from a manifest directory"""
     package_info = {
@@ -164,7 +158,7 @@ def main(manifests_dir, out_path):
                 "extracted_at": datetime.datetime.utcnow().isoformat(),
                 "source": "microsoft/winget-pkgs"
             }
-        }, out, indent=2, ensure_ascii=False, cls=EnhancedJSONEncoder)
+        }, out, separators=(",", ":"), ensure_ascii=False, cls=EnhancedJSONEncoder)
     
     print(f"Output written to: {out_path}")
 
@@ -172,4 +166,4 @@ def main(manifests_dir, out_path):
     if len(sys.argv) != 3:
         print("Usage: python extract_packages.py <manifests_dir> <output_json>")
         sys.exit(1)
-    main(sys.argv[1], sys.argv[2])
\ No newline at end of file
+    main(sys.argv[1], sys.argv[2])
diff --git a/index.html b/index.html
index ac86490..4a383e6 100644
--- a/index.html
+++ b/index.html
@@ -154,6 +154,22 @@
       border-radius: 12px;
     }
 
+    .pkg-badges {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    .license-badge {
+      font-size: 0.8em;
+      color: var(--text-secondary);
+      background-color: var(--bg-primary);
+      border: 1px solid var(--border-color);
+      padding: 2px 8px;
+      border-radius: 12px;
+    }
+
     .pkg-desc {
       color: var(--text-secondary);
       margin: 8px 0;
@@ -181,6 +197,44 @@
       margin-bottom: 4px;
     }
 
+    .tag-filter {
+      border: 1px solid var(--border-color);
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .tag-filter:hover {
+      color: var(--accent-color);
+      border-color: var(--accent-color);
+    }
+
+    .meta-filter {
+      border: none;
+      background: none;
+      color: var(--accent-color);
+      font: inherit;
+      padding: 0;
+      cursor: pointer;
+    }
+
+    .meta-filter:hover {
+      text-decoration: underline;
+    }
+
+    .pkg-links {
+      margin-top: 8px;
+      font-size: 0.9em;
+    }
+
+    .pkg-link {
+      color: var(--accent-color);
+      text-decoration: none;
+    }
+
+    .pkg-link:hover {
+      text-decoration: underline;
+    }
+
     .copy-section {
       display: flex;
       gap: 8px;
@@ -257,6 +311,27 @@
       margin-top: 4px;
     }
 
+    .load-more-wrap {
+      text-align: center;
+      margin: 16px 0;
+    }
+
+    .load-more-btn {
+      padding: 8px 14px;
+      border: 1px solid var(--border-color);
+      border-radius: 8px;
+      background-color: var(--bg-secondary);
+      color: var(--text-primary);
+      cursor: pointer;
+      font-size: 0.9em;
+      transition: all 0.2s;
+    }
+
+    .load-more-btn:hover {
+      border-color: var(--accent-color);
+      color: var(--accent-color);
+    }
+
     @media (max-width: 600px) {
       body {
         padding: 12px;
@@ -320,7 +395,13 @@ <h1>
 
   <script>
     let packages = [];
+    let currentResults = [];
+    let lastMatchCount = 0;
+    let visibleCount = 0;
     let searchTimeout;
+    const DEFAULT_RESULTS_LIMIT = 50;
+    const MAX_SEARCH_RESULTS = 200;
+    const PAGE_SIZE = 25;
     const resultsDiv = document.getElementById('results');
     const searchInput = document.getElementById('search');
     const loadingDiv = document.getElementById('loading');
@@ -339,6 +420,13 @@ <h1>
       }
     });
 
+    window.addEventListener('popstate', () => {
+      if (!packages.length) return;
+      const query = new URLSearchParams(window.location.search).get('q') || '';
+      searchInput.value = query;
+      showResults(query, { updateHistory: false });
+    });
+
     // Load packages
     fetch('packages.json')
       .then(response => {
@@ -358,8 +446,11 @@ <h1>
         }
         
         loadingDiv.style.display = 'none';
-        statsDiv.textContent = `${packages.length.toLocaleString()} packages available`;
-        showResults('');
+        const initialQuery = new URLSearchParams(window.location.search).get('q') || '';
+        if (initialQuery) {
+          searchInput.value = initialQuery;
+        }
+        showResults(initialQuery, { updateHistory: false });
       })
       .catch(error => {
         console.error('Error loading packages:', error);
@@ -382,76 +473,235 @@ <h1>
       return div.innerHTML;
     }
 
+    function escapeRegex(text) {
+      return String(text || '').replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+
+    function escapeForSingleQuotedJs(text) {
+      return String(text || '')
+        .replace(/\\/g, '\\\\')
+        .replace(/'/g, "\\'")
+        .replace(/\r/g, '')
+        .replace(/\n/g, '\\n');
+    }
+
+    function sanitizeUrl(url) {
+      if (!url) return null;
+      try {
+        const parsed = new URL(url);
+        if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
+          return parsed.href;
+        }
+      } catch (_) {
+        return null;
+      }
+      return null;
+    }
+
+    function tokenizeQuery(query) {
+      return String(query || '')
+        .toLowerCase()
+        .split(/\s+/)
+        .filter(Boolean);
+    }
+
     function highlightMatch(text, query) {
-      if (!query || !text) return escapeHtml(text);
-      
-      const escaped = escapeHtml(text);
-      const regex = new RegExp(`(${escapeHtml(query)})`, 'gi');
-      return escaped.replace(regex, '<mark>$1</mark>');
-    }
-
-    function showResults(query) {
-      const q = query.trim().toLowerCase();
-      
-      let results;
-      if (!q) {
-        results = packages.slice(0, 50);
+      if (!text) return '';
+      const escapedText = escapeHtml(text);
+      const tokens = tokenizeQuery(query).map(escapeRegex);
+      if (!tokens.length) return escapedText;
+
+      const regex = new RegExp(`(${tokens.join('|')})`, 'gi');
+      return escapedText.replace(regex, '<mark>$1</mark>');
+    }
+
+    function updateSearchUrl(query) {
+      const url = new URL(window.location.href);
+      if (query) {
+        url.searchParams.set('q', query);
       } else {
-        results = packages.filter(pkg => {
-          const idMatch = pkg.id?.toLowerCase().includes(q);
-          const nameMatch = pkg.name?.toLowerCase().includes(q);
-          const descMatch = pkg.description?.toLowerCase().includes(q);
-          const publisherMatch = pkg.publisher?.toLowerCase().includes(q);
-          const tagMatch = pkg.tags?.some(tag => 
-            tag && typeof tag === 'string' && tag.toLowerCase().includes(q)
-          );
-          
-          return idMatch || nameMatch || descMatch || publisherMatch || tagMatch;
-        }).slice(0, 100);
+        url.searchParams.delete('q');
+      }
+      const next = `${url.pathname}${url.search}${url.hash}`;
+      history.replaceState({ query }, '', next);
+    }
+
+    function updateStats(query, totalMatches, showingCount, truncated) {
+      if (!query) {
+        statsDiv.textContent = `${packages.length.toLocaleString()} packages available • showing ${showingCount.toLocaleString()} starter results`;
+        return;
+      }
+
+      if (!totalMatches) {
+        statsDiv.textContent = `0 matches for "${query}"`;
+        return;
+      }
+
+      if (truncated) {
+        statsDiv.textContent = `${totalMatches.toLocaleString()} matches • showing ${showingCount.toLocaleString()} of top ${MAX_SEARCH_RESULTS.toLocaleString()}`;
+        return;
+      }
+
+      statsDiv.textContent = `${totalMatches.toLocaleString()} matches • showing ${showingCount.toLocaleString()}`;
+    }
+
+    function scorePackage(pkg, queryLower, tokens) {
+      const id = (pkg.id || '').toLowerCase();
+      const name = (pkg.name || '').toLowerCase();
+      const publisher = (pkg.publisher || '').toLowerCase();
+      const description = (pkg.description || pkg.shortDescription || '').toLowerCase();
+      const tags = Array.isArray(pkg.tags)
+        ? pkg.tags.filter(tag => typeof tag === 'string').map(tag => tag.toLowerCase())
+        : [];
+
+      const searchable = `${id} ${name} ${publisher} ${description} ${tags.join(' ')}`;
+      if (!tokens.every(token => searchable.includes(token))) {
+        return 0;
+      }
+
+      let score = 0;
+
+      if (id === queryLower) score += 120;
+      else if (id.startsWith(queryLower)) score += 90;
+      else if (id.includes(queryLower)) score += 60;
+
+      if (name === queryLower) score += 90;
+      else if (name.startsWith(queryLower)) score += 70;
+      else if (name.includes(queryLower)) score += 40;
+
+      if (publisher.includes(queryLower)) score += 18;
+      if (description.includes(queryLower)) score += 14;
+      if (tags.some(tag => tag === queryLower)) score += 25;
+      else if (tags.some(tag => tag.includes(queryLower))) score += 12;
+
+      for (const token of tokens) {
+        if (id.startsWith(token)) score += 8;
+        else if (id.includes(token)) score += 4;
+        if (name.includes(token)) score += 4;
+        if (publisher.includes(token)) score += 2;
+        if (description.includes(token)) score += 1;
+        if (tags.some(tag => tag.includes(token))) score += 2;
       }
 
-      if (results.length === 0) {
+      return score;
+    }
+
+    function renderPackage(pkg, query) {
+      const command = `winget install -e --id ${pkg.id}`;
+      const description = pkg.description || pkg.shortDescription || '';
+      const tags = Array.isArray(pkg.tags)
+        ? pkg.tags.filter(tag => tag && typeof tag === 'string')
+        : [];
+      const tagsHtml = tags.length
+        ? tags
+          .map(tag => `<button type="button" class="tag tag-filter" onclick="filterBy('${escapeForSingleQuotedJs(tag)}')">${highlightMatch(tag, query)}</button>`)
+          .join('')
+        : '';
+      const safeHomepage = sanitizeUrl(pkg.homepage);
+      const safeCommand = escapeForSingleQuotedJs(command);
+
+      return `
+        <div class="pkg">
+          <div class="pkg-header">
+            <div>
+              <span class="pkg-name">${highlightMatch(pkg.name || pkg.id, query)}</span>
+              <span class="pkg-id">${highlightMatch(pkg.id, query)}</span>
+            </div>
+            <div class="pkg-badges">
+              ${pkg.version ? `<span class="pkg-version">v${escapeHtml(pkg.version)}</span>` : ''}
+              ${pkg.license ? `<span class="license-badge">${escapeHtml(pkg.license)}</span>` : ''}
+            </div>
+          </div>
+          ${description ? `<div class="pkg-desc">${highlightMatch(description, query)}</div>` : ''}
+          ${pkg.publisher ? `<div class="pkg-meta">Publisher: <button type="button" class="meta-filter" onclick="filterBy('${escapeForSingleQuotedJs(pkg.publisher)}')">${highlightMatch(pkg.publisher, query)}</button></div>` : ''}
+          ${tagsHtml ? `<div class="pkg-tags">${tagsHtml}</div>` : ''}
+          ${safeHomepage ? `<div class="pkg-links"><a class="pkg-link" href="${escapeHtml(safeHomepage)}" target="_blank" rel="noopener noreferrer">Homepage</a></div>` : ''}
+          <div class="copy-section">
+            <code class="command">${escapeHtml(command)}</code>
+            <button class="copy-btn" onclick="copyCommand(this, '${safeCommand}')">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+                <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
+              </svg>
+              Copy
+            </button>
+          </div>
+        </div>
+      `;
+    }
+
+    function renderResults(query) {
+      if (!currentResults.length) {
         resultsDiv.innerHTML = `
           <div class="no-results">
             <p>No packages found matching "${escapeHtml(query)}"</p>
-            <p>Try searching with different keywords</p>
+            <p>Try searching by package ID, name, publisher, or tag</p>
           </div>
         `;
         return;
       }
 
-      resultsDiv.innerHTML = results.map(pkg => {
-        const command = `winget install -e --id ${pkg.id}`;
-        const tags = pkg.tags?.length ? pkg.tags
-          .filter(tag => tag && typeof tag === 'string')
-          .map(tag => `<span class="tag">${escapeHtml(tag)}</span>`)
-          .join('') : '';
-        
-        return `
-          <div class="pkg">
-            <div class="pkg-header">
-              <div>
-                <span class="pkg-name">${highlightMatch(pkg.name || pkg.id, q)}</span>
-                <span class="pkg-id">${highlightMatch(pkg.id, q)}</span>
-              </div>
-              ${pkg.version ? `<span class="pkg-version">v${escapeHtml(pkg.version)}</span>` : ''}
-            </div>
-            ${pkg.description ? `<div class="pkg-desc">${highlightMatch(pkg.description, q)}</div>` : ''}
-            ${pkg.publisher ? `<div class="pkg-meta">Publisher: ${highlightMatch(pkg.publisher, q)}</div>` : ''}
-            ${tags ? `<div class="pkg-tags">${tags}</div>` : ''}
-            <div class="copy-section">
-              <code class="command">${escapeHtml(command)}</code>
-              <button class="copy-btn" onclick="copyCommand(this, '${escapeHtml(command).replace(/'/g, "\\'")}')">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
-                  <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
-                </svg>
-                Copy
-              </button>
-            </div>
+      const visible = currentResults.slice(0, visibleCount);
+      resultsDiv.innerHTML = visible.map(pkg => renderPackage(pkg, query)).join('');
+
+      if (visibleCount < currentResults.length) {
+        const remaining = currentResults.length - visibleCount;
+        resultsDiv.insertAdjacentHTML('beforeend', `
+          <div class="load-more-wrap">
+            <button type="button" class="load-more-btn" onclick="loadMoreResults()">
+              Load more (${remaining.toLocaleString()} remaining)
+            </button>
           </div>
-        `;
-      }).join('');
+        `);
+      }
+    }
+
+    function showResults(query, options = {}) {
+      if (!packages.length) return;
+
+      const trimmedQuery = String(query || '').trim();
+      const q = trimmedQuery.toLowerCase();
+      const tokens = tokenizeQuery(trimmedQuery);
+      const updateHistory = options.updateHistory !== false;
+
+      if (updateHistory) {
+        updateSearchUrl(trimmedQuery);
+      }
+
+      if (!tokens.length) {
+        currentResults = packages.slice(0, DEFAULT_RESULTS_LIMIT);
+        lastMatchCount = packages.length;
+        visibleCount = currentResults.length;
+        updateStats('', lastMatchCount, visibleCount, lastMatchCount > visibleCount);
+        renderResults(trimmedQuery);
+        return;
+      }
+
+      const scoredResults = packages
+        .map(pkg => ({ pkg, score: scorePackage(pkg, q, tokens) }))
+        .filter(entry => entry.score > 0)
+        .sort((a, b) => b.score - a.score || (a.pkg.id || '').localeCompare(b.pkg.id || ''));
+
+      lastMatchCount = scoredResults.length;
+      currentResults = scoredResults.slice(0, MAX_SEARCH_RESULTS).map(entry => entry.pkg);
+      visibleCount = Math.min(PAGE_SIZE, currentResults.length);
+
+      updateStats(trimmedQuery, lastMatchCount, visibleCount, lastMatchCount > visibleCount);
+      renderResults(trimmedQuery);
+    }
+
+    function loadMoreResults() {
+      visibleCount = Math.min(visibleCount + PAGE_SIZE, currentResults.length);
+      updateStats(searchInput.value.trim(), lastMatchCount, visibleCount, lastMatchCount > visibleCount);
+      renderResults(searchInput.value.trim());
+    }
+
+    function filterBy(value) {
+      const query = String(value || '').trim();
+      if (!query) return;
+      searchInput.value = query;
+      showResults(query);
+      searchInput.focus();
     }
 
     function copyCommand(button, cmd) {
@@ -476,4 +726,4 @@ <h1>
     }
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>