Search inside article bodies from the top-left box; ⌘K focuses it

The top-left search now matches article *content*, not just titles.

- matchPage also tests each article's body, indexed for free during the existing ensureCitemap() background pass (state.searchText — no new fetches). A body-only match shows a one-line highlighted snippet under the topic so it's clear why and where it matched.
- Responsive: typing kicks off indexing immediately and results fill in as articles get indexed.
- Cmd/Ctrl-K (and '/') and the Cmd-K badge now just focus the top-left search — one box for everything. The separate command palette (which felt broken) is removed entirely: DOM, JS (paletteResults / renderPalette / fuzzyScore / buildPaletteIndex / open-close-palette / palKeydown), and CSS.

Verified in-browser: 48 article bodies indexed; 'variance' surfaces 19 topics each with a bolded snippet (e.g. MDP Formulation, whose title lacks the word); title search still works; Cmd-K / '/' / badge all focus the box.

app.js

@@ -26,10 +26,8 @@ const state = {
   collapsed: new Set(JSON.parse(localStorage.getItem('viz-collapsed') || '[]')),
   treeCollapsed: new Set(JSON.parse(localStorage.getItem('viz-tree-collapsed') || '[]')),
   srcNs: null,        // selected source-namespace filter (null = all)
-  palItems: [],       // command-palette index
-  palFiltered: [],
-  palSel: 0,
   pageContent: new Map(),   // path -> article markdown (cached)
+  searchText: new Map(),    // topic path -> lowercased body, for nav content search
   citedBy: new Map(),       // sourceId -> Set(topic path) that cite it
   citeCount: new Map(),     // sourceId -> # distinct articles citing it
   wordCount: new Map(),     // topic path -> prose word count
@@ -957,7 +955,9 @@ function renderTopicsNav(list, q) {
     matches.forEach(n => {
       const it = el('div', 'nav-item');
       it.dataset.path = n.page.path;
-      it.innerHTML = `${esc(n.page.title || n.slug)}`;
+      const snip = q && bodyOnlyMatch(n.page, q) ? bodySnippet(n.page.path, q) : '';
+      it.innerHTML = `<span class="nav-item-title">${esc(n.page.title || n.slug)}</span>` +
+        (snip ? `<span class="nav-snippet">${snip}</span>` : '');
       it.addEventListener('click', () => go(`#/topic/${encodeURIComponent(n.page.path)}`));
       body.append(it);
     });
@@ -1049,7 +1049,36 @@ function sortSources(items, mode) {
   else arr.sort((a, b) => (state.citeCount.get(b.id) || 0) - (state.citeCount.get(a.id) || 0) || (a.title || a.id).localeCompare(b.title || b.id));
   return arr;
 }
-const matchPage = (p, q) => (p.title || '').toLowerCase().includes(q) || p.path.toLowerCase().includes(q);
+// A page matches on its title, its path, or anywhere in its (background-indexed)
+// body. `q` is already lowercased by callers.
+const matchPage = (p, q) =>
+  (p.title || '').toLowerCase().includes(q) ||
+  p.path.toLowerCase().includes(q) ||
+  (state.searchText.get(p.path) || '').includes(q);
+// True when *only* the body matched — those items get a snippet so it's clear why.
+const bodyOnlyMatch = (p, q) =>
+  !(p.title || '').toLowerCase().includes(q) && !p.path.toLowerCase().includes(q) &&
+  (state.searchText.get(p.path) || '').includes(q);
+// A one-line excerpt around the first body hit, lightly de-marked, query bolded.
+function bodySnippet(path, q) {
+  const text = state.pageContent.get(path), lc = state.searchText.get(path);
+  if (!text || !lc) return '';
+  const i = lc.indexOf(q);
+  if (i < 0) return '';
+  const start = Math.max(0, i - 30);
+  let clip = text.slice(start, i + q.length + 40)
+    .replace(/\[source:[^\]]*\]/g, ' ')
+    .replace(/[#>*_`~|]+/g, ' ')
+    .replace(/\s+/g, ' ').trim();
+  clip = (start > 0 ? '…' : '') + clip + '…';
+  return highlightMatch(clip, q);
+}
+// Throttled nav re-render, used while background indexing fills in during a search.
+let _navRefreshT = null;
+function scheduleNavRefresh() {
+  if (_navRefreshT) return;
+  _navRefreshT = setTimeout(() => { _navRefreshT = null; if (($('#navSearch').value || '').trim()) renderNav(); }, 200);
+}
 const matchSource = (s, q) => (s.title || '').toLowerCase().includes(q) || s.id.toLowerCase().includes(q);
 function toggleCat(cat) {
   if (state.collapsed.has(cat)) state.collapsed.delete(cat); else state.collapsed.add(cat);
@@ -1071,30 +1100,6 @@ function highlightActive() {
    Filters an in-memory index, so it stays instant at thousands of items.
    ============================================================ */
 // `text` and `q` must already be lowercased (callers pre-lower for speed).
-function fuzzyScore(q, text) {
-  const idx = text.indexOf(q);
-  if (idx === 0) return 1000;            // prefix match — best
-  if (idx > 0) return 700 - Math.min(idx, 300);
-  // subsequence fallback — start at the first occurrence of q[0]; bail cheaply if absent.
-  let start = text.indexOf(q[0]);
-  if (start < 0) return -1;
-  let qi = 1, gaps = 0, last = start;
-  for (let ti = start + 1; ti < text.length && qi < q.length; ti++) {
-    if (text[ti] === q[qi]) { gaps += ti - last - 1; last = ti; qi++; }
-  }
-  return qi === q.length ? 300 - Math.min(gaps, 200) - Math.min(start, 50) : -1;
-}
-function paletteResults(raw) {
-  const q = raw.toLowerCase().trim();
-  if (!q) return state.palItems.slice(0, 40);
-  const scored = [];
-  for (const it of state.palItems) {
-    const s = Math.max(fuzzyScore(q, it._l), fuzzyScore(q, it._s) - 60);
-    if (s > -1) scored.push({ it, s });
-  }
-  scored.sort((a, b) => b.s - a.s || a.it.label.localeCompare(b.it.label));
-  return scored.slice(0, 40).map(x => x.it);
-}
 function highlightMatch(text, raw) {
   const q = raw.trim();
   if (!q) return esc(text);
@@ -1102,37 +1107,6 @@ function highlightMatch(text, raw) {
   if (i < 0) return esc(text);
   return esc(text.slice(0, i)) + '<b>' + esc(text.slice(i, i + q.length)) + '</b>' + esc(text.slice(i + q.length));
 }
-function renderPalette() {
-  const q = $('#palInput').value;
-  state.palFiltered = paletteResults(q);
-  if (state.palSel >= state.palFiltered.length) state.palSel = 0;
-  const box = $('#palResults');
-  if (!state.palFiltered.length) { box.innerHTML = `<div class="pal-empty">No matches for “${esc(q)}”.</div>`; return; }
-  box.innerHTML = state.palFiltered.map((it, i) => `
-    <div class="pal-item${i === state.palSel ? ' sel' : ''}" data-i="${i}">
-      <span class="pal-kind ${it.kind}">${it.kind}</span>
-      <span class="pal-text"><span class="pal-label">${highlightMatch(it.label, q)}</span><span class="pal-sub">${esc(it.sub)}</span></span>
-    </div>`).join('');
-  $$('#palResults .pal-item').forEach(n => {
-    n.addEventListener('mousemove', () => { if (state.palSel !== +n.dataset.i) { state.palSel = +n.dataset.i; markPalSel(); } });
-    n.addEventListener('click', () => choosePal(+n.dataset.i));
-  });
-}
-function markPalSel() { $$('#palResults .pal-item').forEach((n, i) => n.classList.toggle('sel', i === state.palSel)); }
-function scrollPalSel() { $$('#palResults .pal-item')[state.palSel]?.scrollIntoView({ block: 'nearest' }); }
-function choosePal(i) { const it = state.palFiltered[i]; if (it) { closePalette(); go(it.hash); } }
-function openPalette() {
-  const sc = $('#palScrim'); sc.hidden = false;
-  const inp = $('#palInput'); inp.value = ''; state.palSel = 0;
-  renderPalette(); inp.focus();
-}
-function closePalette() { $('#palScrim').hidden = true; }
-function palKeydown(e) {
-  if (e.key === 'ArrowDown') { e.preventDefault(); state.palSel = Math.min(state.palSel + 1, state.palFiltered.length - 1); markPalSel(); scrollPalSel(); }
-  else if (e.key === 'ArrowUp') { e.preventDefault(); state.palSel = Math.max(state.palSel - 1, 0); markPalSel(); scrollPalSel(); }
-  else if (e.key === 'Enter') { e.preventDefault(); choosePal(state.palSel); }
-  else if (e.key === 'Escape') { e.preventDefault(); closePalette(); }
-}
 
 /* ── mobile nav ────────────────────────────────────────── */
 function closeNav() { document.body.classList.remove('nav-open'); }
@@ -1181,7 +1155,6 @@ async function loadCore() {
   }
   try { state.taxonomy = taxT && window.jsyaml ? jsyaml.load(taxT) : null; } catch (e) { state.taxonomy = null; }
   buildTaxonomy();
-  buildPaletteIndex();
 }
 const SOURCES_CACHE_KEY = 'viz-sources-v1';
 function setSources(items) {
@@ -1192,7 +1165,7 @@ function setSources(items) {
   if (items.some(s => s.title)) state.sourceTitlesLoaded = true;   // tree stage has none yet
 }
 function refreshSourceViews() {
-  buildPaletteIndex(); updateCounts();
+  updateCounts();
   softRefresh();          // re-renders the current view (incl. the sources browser), upgrading titles/resolution
 }
 // Reverse the filename sanitization (`:`/`/` → `-`): `arxiv-1707.06347.md` → `arxiv:1707.06347`.
@@ -1273,13 +1246,6 @@ function buildTaxonomy() {
   state.tax = cats;
 }
 
-function buildPaletteIndex() {
-  const mk = (kind, label, sub, hash) => ({ kind, label, sub, hash, _l: label.toLowerCase(), _s: sub.toLowerCase() });
-  state.palItems = [
-    ...state.pages.map(p => mk('topic', p.title || p.path, catLabel(p._cat || p.parent || ''), `#/topic/${encodeURIComponent(p.path)}`)),
-    ...state.sources.map(s => mk('source', s.title || s.id, s.id, `#/source/${encodeURIComponent(s.id)}`)),
-  ];
-}
 const catLabel = (c) => prettyTitle((c || '').replace(/-/g, ' '));
 // Sentence-cased category for headings, e.g. "reward-modeling" → "Reward modeling".
 const catDisplay = (c) => { const s = catLabel(c); return s.charAt(0).toUpperCase() + s.slice(1); };
@@ -1327,6 +1293,8 @@ async function ensureCitemap() {
         ids.forEach(id => { if (!state.citedBy.has(id)) state.citedBy.set(id, new Set()); state.citedBy.get(id).add(path); });
         state.refCount.set(path, refs);
         state.wordCount.set(path, countWords(content));
+        state.searchText.set(path, content.toLowerCase());   // for nav content search
+        if (($('#navSearch').value || '').trim()) scheduleNavRefresh();  // live-fill an in-progress search
       } catch (e) { /* skip unreadable article */ }
     }
   };
@@ -1379,18 +1347,19 @@ async function boot() {
   $('#navScrim').addEventListener('click', closeNav);
   $('#brandHome').addEventListener('click', () => go('#/'));
   let st;
-  $('#navSearch').addEventListener('input', () => { clearTimeout(st); st = setTimeout(renderNav, 120); });
+  $('#navSearch').addEventListener('input', () => {
+    ensureCitemap();   // kick off body indexing on first keystroke so content matches fill in fast
+    clearTimeout(st); st = setTimeout(renderNav, 120);
+  });
   window.addEventListener('hashchange', route);
 
-  // command palette
-  $('#paletteOpen').addEventListener('click', openPalette);
-  $('#palInput').addEventListener('input', renderPalette);
-  $('#palInput').addEventListener('keydown', palKeydown);
-  $('#palScrim').addEventListener('click', (e) => { if (e.target === $('#palScrim')) closePalette(); });
+  // ⌘K (and "/") focus the top-left search — one box that filters titles + bodies.
+  const focusNavSearch = () => { const s = $('#navSearch'); s.focus(); s.select(); };
+  $('#paletteOpen').addEventListener('click', focusNavSearch);
   window.addEventListener('keydown', (e) => {
-    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); $('#palScrim').hidden ? openPalette() : closePalette(); return; }
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); focusNavSearch(); return; }
     const typing = /^(input|textarea)$/i.test(document.activeElement?.tagName || '');
-    if (e.key === '/' && !typing && $('#palScrim').hidden) { e.preventDefault(); openPalette(); }
+    if (e.key === '/' && !typing) { e.preventDefault(); focusNavSearch(); }
   });
   initHovercards();
 

index.html

@@ -63,8 +63,8 @@
   <aside class="sidebar" id="sidebar">
     <div class="side-head">Topics</div>
     <div class="search-wrap">
-      <input class="search" id="navSearch" type="text" placeholder="Search topics…" autocomplete="off">
-      <kbd class="search-k" id="paletteOpen" title="Search everything — topics &amp; sources (⌘K)">⌘K</kbd>
+      <input class="search" id="navSearch" type="text" placeholder="Search topics &amp; text…" autocomplete="off">
+      <kbd class="search-k" id="paletteOpen" title="Focus search (⌘K)">⌘K</kbd>
     </div>
     <nav id="navList"></nav>
   </aside>
@@ -76,19 +76,6 @@
   <aside class="aside" id="aside"></aside>
 </div>
 
-<!-- Command palette: universal jump to any topic or source -->
-<div class="palette-scrim" id="palScrim" hidden>
-  <div class="palette" role="dialog" aria-label="Search">
-    <div class="palette-search">
-      <span class="pal-icon">⌕</span>
-      <input id="palInput" class="palette-input" type="text" placeholder="Jump to a topic or source…" autocomplete="off" spellcheck="false">
-      <kbd class="pal-esc">esc</kbd>
-    </div>
-    <div id="palResults" class="palette-results"></div>
-    <div class="palette-foot"><span><kbd>↑</kbd><kbd>↓</kbd> navigate</span><span><kbd>↵</kbd> open</span><span><span class="pal-dot pal-t"></span> topic <span class="pal-dot pal-s"></span> source</span></div>
-  </div>
-</div>
-
 <script defer src="app.js"></script>
 </body>
 </html>

styles.css

@@ -159,7 +159,7 @@ a:hover { color: var(--accent-deep); }
   content: "⌕"; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
   color: var(--muted-3); font-size: 15px;
 }
-/* the one global-search affordance: click (or ⌘K) → command palette */
+/* the ⌘K badge on the search box: click (or ⌘K) → focus the search input */
 .search-k {
   position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
   font-family: var(--mono); font-size: 10px; padding: 2px 6px; border-radius: 4px;
@@ -191,6 +191,13 @@ a:hover { color: var(--accent-deep); }
   display: block; font-family: var(--mono); font-size: 9.5px;
   color: var(--muted-4); margin-top: 1px; letter-spacing: 0.2px;
 }
+/* content-search: a matched-body excerpt under the topic name, query bolded */
+.nav-item .nav-item-title { display: block; }
+.nav-item .nav-snippet {
+  display: block; margin-top: 2px; font-size: 11px; line-height: 1.4;
+  color: var(--muted-3); font-weight: 400;
+}
+.nav-item .nav-snippet b { color: var(--accent-deep); font-weight: 600; }
 .nav-empty { color: var(--muted-4); font-size: 11.5px; padding: 8px; font-style: italic; }
 .mini-spin { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; margin-right: 4px;
   border: 1.5px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@@ -560,52 +567,6 @@ a:hover { color: var(--accent-deep); }
 }
 @media (min-width: 901px) { .nav-scrim { display: none !important; } }
 
-/* ── command palette ───────────────────────────────────── */
-.palette-foot kbd, .pal-esc {
-  font-family: var(--mono); font-size: 10px; padding: 1.5px 5px; border-radius: 4px;
-  border: 1px solid var(--border); background: var(--bg-soft); color: var(--muted-2); line-height: 1.4;
-}
-
-.palette-scrim {
-  position: fixed; inset: 0; z-index: 200; background: rgba(15,18,22,0.42);
-  backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center;
-  padding: 12vh 16px 16px;
-}
-.palette-scrim[hidden] { display: none; }
-.palette {
-  width: 100%; max-width: 580px; background: var(--bg-card); border: 1px solid var(--border);
-  border-radius: 12px; box-shadow: 0 12px 48px rgba(0,0,0,0.28); overflow: hidden;
-  display: flex; flex-direction: column; max-height: 70vh;
-}
-.palette-search { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--border); }
-.pal-icon { color: var(--muted-3); font-size: 17px; }
-.palette-input {
-  flex: 1; border: none; background: none; outline: none; color: var(--ink);
-  font-family: var(--sans); font-size: 15px; font-weight: 300;
-}
-.palette-results { overflow-y: auto; padding: 6px; }
-.pal-item {
-  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; cursor: pointer;
-}
-.pal-item.sel { background: var(--accent-soft); }
-.pal-kind {
-  flex: 0 0 auto; font-family: var(--mono); font-size: 9px; font-weight: 600; text-transform: uppercase;
-  letter-spacing: 0.5px; padding: 2px 6px; border-radius: 4px; width: 50px; text-align: center;
-}
-.pal-kind.topic { background: var(--accent-soft); color: var(--accent-deep); }
-.pal-kind.source { background: var(--bg-soft); color: var(--muted-2); border: 1px solid var(--border-soft); }
-.pal-text { flex: 1; min-width: 0; }
-.pal-label { font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.pal-label b { color: var(--accent-deep); font-weight: 600; }
-.pal-sub { font-family: var(--mono); font-size: 10px; color: var(--muted-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.pal-empty { padding: 24px; text-align: center; color: var(--muted-3); font-size: 13px; }
-.palette-foot {
-  display: flex; gap: 14px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border-soft);
-  font-size: 10.5px; color: var(--muted-3); font-family: var(--mono); flex-wrap: wrap;
-}
-.pal-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: middle; margin: 0 2px 0 6px; }
-.pal-dot.pal-t { background: var(--accent); }
-.pal-dot.pal-s { background: var(--muted-4); }
 
 /* ── Collapsible taxonomy tree (topics sidebar) ────────── */
 .nav-cat { margin-bottom: 10px; }
@@ -779,7 +740,7 @@ body.book-mode .main { padding: 0; }
 
 /* ── Print (browser "Save as PDF") ─────────────────────── */
 @media print {
-  .topbar, .sidebar, .aside, .nav-scrim, .book-toolbar, .palette-scrim, #hovercard, #toast, .foot, .menu-toggle { display: none !important; }
+  .topbar, .sidebar, .aside, .nav-scrim, .book-toolbar, #hovercard, #toast, .foot, .menu-toggle { display: none !important; }
   html, body { background: #fff; color: #000; }
   .layout, .main, body.book-mode .main { display: block; padding: 0; margin: 0; }
   .book { max-width: none; margin: 0; padding: 0; color: #111; font-size: 10.5pt; }