@cleocode/cleo 2026.5.86 → 2026.5.88

package/assets/viewer/index.html

@@ -10,9 +10,11 @@
   <header class="topbar">
     <h1>CLEO Docs</h1>
     <input id="filter" type="search" placeholder="Filter by slug, title, type..." autocomplete="off" />
+    <input id="search" type="search" placeholder="Search content (ranked)..." autocomplete="off" aria-label="Search docs by content" />
   </header>
   <main class="layout">
     <aside id="sidebar">
+      <div id="search-results" aria-live="polite" hidden></div>
       <div id="doc-list" aria-live="polite">Loading docs...</div>
     </aside>
     <section id="content">

package/assets/viewer/styles.css

@@ -130,3 +130,67 @@ html, body {
 
 .hint { color: var(--text-muted); }
 .error { color: #ff7f7f; }
+
+/* T9647 — search results UI */
+#search {
+  flex: 1;
+  max-width: 360px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 0.45rem 0.75rem;
+  border-radius: 6px;
+  font: inherit;
+}
+#search:focus { outline: 2px solid var(--accent); outline-offset: 0; }
+
+#search-results {
+  padding: 0.25rem 0;
+  border-bottom: 1px solid var(--border);
+}
+#search-results .result {
+  display: block;
+  padding: 0.55rem 1rem;
+  color: var(--text);
+  text-decoration: none;
+  border-left: 3px solid transparent;
+}
+#search-results .result:hover {
+  background: var(--surface-2);
+  border-left-color: var(--accent);
+}
+#search-results .result-head {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  font-size: 0.9rem;
+}
+#search-results .result-name {
+  font-weight: 600;
+  color: var(--accent);
+  flex: 1;
+  word-break: break-word;
+}
+#search-results .result-type {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+#search-results .result-score {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+}
+#search-results .result-snippet {
+  color: var(--text-muted);
+  font-size: 0.8rem;
+  line-height: 1.4;
+  margin-top: 0.2rem;
+}
+#search-results mark {
+  background: rgba(106, 167, 255, 0.25);
+  color: inherit;
+  padding: 0 2px;
+  border-radius: 2px;
+}

package/assets/viewer/viewer.js

@@ -6,10 +6,13 @@
 const $list = document.getElementById('doc-list');
 const $render = document.getElementById('doc-render');
 const $filter = document.getElementById('filter');
+const $search = document.getElementById('search');
+const $searchResults = document.getElementById('search-results');
 
 const state = {
   docs: [],
   activeSlug: null,
+  searchSeq: 0,
 };
 
 function escapeHtml(str) {
@@ -287,6 +290,100 @@ function slugFromPath(pathname) {
 
 $filter.addEventListener('input', (e) => applyFilter(e.target.value));
 
+// ── Search (T9647) — debounced /api/search with ranked results ──────────────
+
+function debounce(fn, ms) {
+  let timer = null;
+  return function debounced(...args) {
+    if (timer !== null) clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = null;
+      fn.apply(this, args);
+    }, ms);
+  };
+}
+
+function highlightMatches(snippet, query) {
+  if (!query) return escapeHtml(snippet);
+  const terms = query
+    .toLowerCase()
+    .split(/\s+/)
+    .filter((t) => t.length >= 2);
+  if (terms.length === 0) return escapeHtml(snippet);
+  // Build a regex that matches any term, case-insensitive. Escape regex metachars.
+  const pattern = terms
+    .map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+    .join('|');
+  const re = new RegExp(`(${pattern})`, 'gi');
+  const escaped = escapeHtml(snippet);
+  return escaped.replace(re, '<mark>$1</mark>');
+}
+
+function renderSearchResults(query, payload) {
+  if (!payload || !payload.hits || payload.hits.length === 0) {
+    $searchResults.innerHTML =
+      `<p class="hint">No results for <code>${escapeHtml(query)}</code>.</p>`;
+    $searchResults.hidden = false;
+    $list.hidden = true;
+    return;
+  }
+  const html = payload.hits
+    .map((h) => {
+      const slug = escapeHtml(h.slug || h.id);
+      const name = escapeHtml(h.name || h.slug || h.id);
+      const type = h.type ? `<span class="result-type">${escapeHtml(h.type)}</span>` : '';
+      const score = typeof h.score === 'number' ? h.score.toFixed(3) : '—';
+      const snippet = highlightMatches(h.snippet || '', query);
+      return [
+        `<a href="/docs/${slug}" data-slug="${slug}" class="result">`,
+        `<div class="result-head"><span class="result-name">${name}</span>${type}<span class="result-score">${score}</span></div>`,
+        `<div class="result-snippet">${snippet}</div>`,
+        `</a>`,
+      ].join('');
+    })
+    .join('');
+  $searchResults.innerHTML = html;
+  $searchResults.hidden = false;
+  $list.hidden = true;
+  $searchResults.querySelectorAll('a.result').forEach((a) => {
+    a.addEventListener('click', (e) => {
+      e.preventDefault();
+      const slug = a.getAttribute('data-slug');
+      navigate(slug);
+    });
+  });
+}
+
+function clearSearchResults() {
+  $searchResults.hidden = true;
+  $searchResults.innerHTML = '';
+  $list.hidden = false;
+}
+
+async function runSearch(query) {
+  const q = query.trim();
+  if (q.length === 0) {
+    clearSearchResults();
+    return;
+  }
+  const seq = ++state.searchSeq;
+  try {
+    const url = `/api/search?q=${encodeURIComponent(q)}&limit=20`;
+    const data = await fetchJson(url);
+    // Drop stale responses if a newer query has fired.
+    if (seq !== state.searchSeq) return;
+    renderSearchResults(q, data);
+  } catch (err) {
+    if (seq !== state.searchSeq) return;
+    $searchResults.innerHTML = `<p class="error">${escapeHtml(String(err.message || err))}</p>`;
+    $searchResults.hidden = false;
+    $list.hidden = true;
+  }
+}
+
+const debouncedSearch = debounce(runSearch, 300);
+$search.addEventListener('input', (e) => debouncedSearch(e.target.value));
+
 (async function init() {
   try {
     const data = await fetchJson('/api/docs');