The sidebar box searches page text, not just page titles

Filtering the tree by title only finds a page if you already remember what
it is called. Every page of a project is a named fragment of the one Yjs
document the tab already syncs, so the text to search is in memory before
the first keystroke — no endpoint, no per-page fetch, and no permission
logic to re-derive, since the socket handshake already decided access. The
index is built from the live CRDT, so it follows a collaborator's typing.

A match now shows its occurrences as snippets under the page, each labelled
with the heading it sits under, and clicking one opens that page scrolled to
that occurrence and no other. Hits in the open document are marked in amber
— not the accent green, which on this page always means somebody said
something about the text. The query lives in the URL (?q=&n=), so a search
is a link you can send someone.

Titles and slugs still match from the first character; searching text waits
for a second one, or one letter highlights half the prose.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

client/app.css

@@ -94,6 +94,7 @@
   --tint-strong: rgba(0, 0, 0, 0.12);
   --hl-weak: rgba(29, 92, 69, 0.06);  /* accent washes: nav hover, strips, bars */
   --hl-edge: rgba(29, 92, 69, 0.55);  /* the rule beside quoted/commented text */
+  --find: #ffe08a;                    /* search hits — amber, not accent: see mark.search-hl */
   --scrim: rgba(18, 18, 24, 0.4);
   --danger: #b03030;
   --chip-bg: #f0f0f3;
@@ -385,6 +386,19 @@ textarea { resize: vertical; }
 .tiptap hr { border: none; border-top: 1px solid var(--doc-rule); margin: 0.75em 0; }
 .tiptap img { max-width: 100%; border-radius: 8px; display: block; margin: 0.4em 0; }
 .tiptap img.ProseMirror-selectednode { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
+/* Search hits inside the open document, live for as long as the sidebar box has
+   a query in it. Amber, not the accent green: every other mark on the text means
+   somebody said something about it (a comment, a suggestion, a pending
+   selection), and a search hit means nothing of the sort — it has to read as a
+   different kind of thing at a glance. The document's own ink is left alone, the
+   way find-in-page does it, so a highlighted link is still visibly a link.
+   box-decoration-break keeps a hit that wraps across a line from losing its
+   corners mid-word. */
+.tiptap mark.search-hl {
+  background: var(--find); color: inherit;
+  border-radius: 2px; padding: 0 1px; margin: 0 -1px;
+  -webkit-box-decoration-break: clone; box-decoration-break: clone;
+}
 .tiptap .comment-hl { background: var(--hl); border-bottom: 1.5px solid var(--hl-edge); cursor: pointer; }
 .tiptap .comment-hl.active { background: var(--hl-active); }
 /* What the open composer is about. The browser drops its own selection
@@ -612,6 +626,9 @@ body.suggesting .tiptap { caret-color: transparent; cursor: default; }
   --hl-active: rgba(116, 194, 160, 0.32);
   --hl-weak: rgba(116, 194, 160, 0.09);
   --hl-edge: rgba(116, 194, 160, 0.6);
+  /* a wash rather than the light theme's solid amber: on the dark page a filled
+     block would out-shout the text it is supposed to be pointing at */
+  --find: rgba(255, 205, 90, 0.34);
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
   --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
   --page-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.55);
@@ -840,6 +857,43 @@ body.suggesting .tiptap { caret-color: transparent; cursor: default; }
   background: var(--surface); color: var(--text); font: inherit; font-size: 13px;
 }
 #page-tree .unfiled-label { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 10px 0 2px; }
+
+/* --- what a search looks like in the tree ----------------------------------
+   Only ever present while the box has a query in it, which is why none of this
+   touches the row rules above: the unfiltered tree renders exactly as before.
+
+   The title line becomes a flex line when it carries a hit count, so the count
+   keeps its width and the title is the part that ellipses. */
+#page-tree a:has(.tree-hit-count) { display: flex; align-items: baseline; gap: 5px; }
+#page-tree .tree-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* the matched substring, in a title and in a snippet alike */
+#page-tree a b { color: var(--accent); font-weight: 600; }
+/* The page's true number of hits, not the number of snippets shown below it. */
+#page-tree .tree-hit-count {
+  flex: 0 0 auto; padding: 0 5px; border-radius: 8px; background: var(--accent-soft);
+  color: var(--accent); font-size: 9.5px; line-height: 15px; font-weight: 600;
+  font-family: var(--mono, ui-monospace, monospace);
+}
+/* One row per occurrence, indented under its page and ruled on the left so a
+   long list still reads as belonging to the page above it. */
+#page-tree .tree-hits { margin: 1px 0 4px 25px; }
+#page-tree .tree-hit {
+  display: block; padding: 2px 6px; border-left: 2px solid var(--line); border-radius: 0 4px 4px 0;
+  color: var(--text-3); font-size: 11px; line-height: 1.4; text-decoration: none;
+  white-space: normal; overflow: visible; text-overflow: clip;
+  transition: background .12s, border-color .12s, color .12s;
+}
+#page-tree .tree-hit:hover { background: var(--hl-weak); border-left-color: var(--accent); color: var(--text-2); }
+/* The heading the hit sits under. rl-wiki put this in the URL as an anchor;
+   cowrite opens an editor, which has no heading anchors, so the heading earns
+   its keep as the visible answer to "where in the page is this?". */
+#page-tree .tree-hit-sec {
+  display: block; color: var(--text-3); font-size: 9.5px; text-transform: uppercase;
+  letter-spacing: 0.05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+#page-tree .tree-hit.more { font-style: italic; color: var(--text-3); border-left-color: transparent; }
+#page-tree .tree-hit.more:hover { background: none; }
+#page-tree .tree-empty { color: var(--text-3); font-size: 11.5px; font-style: italic; padding: 8px 2px; }
 .sidebar-toast {
   position: fixed; left: 16px; bottom: 16px; z-index: 90; max-width: min(380px, calc(100vw - 32px));
   padding: 8px 12px; border-radius: 999px; background: var(--tooltip-bg); color: #fff;

client/doc.html

@@ -123,8 +123,8 @@
       <div id="sidebar-sticky-head">
         <div id="sidebar-head">
           <div id="sidebar-search-wrap">
-            <input id="sidebar-search" type="text" placeholder="Filter pages…" autocomplete="off" aria-label="Filter pages by title" />
-            <button id="sidebar-search-key" type="button" aria-label="Focus page filter">⌘K</button>
+            <input id="sidebar-search" type="text" placeholder="Search pages…" autocomplete="off" aria-label="Search page titles and text" />
+            <button id="sidebar-search-key" type="button" aria-label="Focus search">⌘K</button>
           </div>
           <div class="sidebar-actions">
             <button class="iconbtn" id="page-add" title="New page" aria-label="New page"></button>

client/src/doc.js

@@ -195,7 +195,7 @@ const HtmlBlock = Node.create({
 // IMPORTANT: use tiptap's y-prosemirror fork — the Collaboration extension registers
 // its sync plugin from @tiptap/y-tiptap, so y-prosemirror's ySyncPluginKey is a
 // *different* PluginKey instance and getState() would return undefined.
-import { ySyncPluginKey, yUndoPluginKey, absolutePositionToRelativePosition, relativePositionToAbsolutePosition } from '@tiptap/y-tiptap'
+import { ySyncPluginKey, yUndoPluginKey, absolutePositionToRelativePosition, relativePositionToAbsolutePosition, yXmlFragmentToProsemirrorJSON } from '@tiptap/y-tiptap'
 import { markdownToBlocks } from '../../server/md.js'
 import { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state'
 import { Decoration, DecorationSet } from '@tiptap/pm/view'
@@ -325,10 +325,16 @@ async function main() {
     document.getElementById('m-more').classList.remove('on')
   })
 
-  // back/forward navigates between pages client-side
+  // back/forward navigates between pages client-side, and carries the search
+  // that page was found through (?q=) back with it
   window.addEventListener('popstate', () => {
     const slug = location.pathname.split('/').filter(Boolean)[2] || 'home'
-    if (slug !== pageSlug) openPage(slug, { push: false })
+    const searchChanged = adoptSearchFromUrl()
+    if (slug !== pageSlug) return openPage(slug, { push: false })
+    if (!searchChanged) return
+    if (sidebarSnapshot) renderStructure(sidebarSnapshot)
+    refreshDocHighlights()
+    settleDeepLinkQuery()
   })
 
   // in flight while the document syncs, not after it. Every refresh of it also
@@ -502,6 +508,14 @@ async function initPage() {
   }
 
   renderMargin(editor)
+  // A search survives a page switch, and a ?q= deep link starts one before this
+  // editor existed: repaint the hit list against this page's text, mark it, and
+  // — for a deep link only — scroll to the hit it named.
+  if (sidebarFilter) {
+    if (sidebarSnapshot) renderStructure(sidebarSnapshot)
+    refreshDocHighlights()
+    settleDeepLinkQuery()
+  }
   setTimeout(() => isLive(editor) && updateTitle(editor), 600)
 
   // a ghost page appears in the tree as soon as its record lands
@@ -545,7 +559,7 @@ async function openPage(slug, { push = true } = {}) {
   // the tab's page part until the new editor reports its own first line; the
   // sidebar already knows it, and keeping the previous page's name would be wrong
   paintTitles(state.pageTitles?.[slug] || '')
-  if (push) history.pushState({}, '', slug === 'home' ? `/d/${docId}` : `/d/${docId}/${slug}`)
+  if (push) history.pushState({}, '', searchHref(slug))
   await initPage()
   loadStructure().finally(() => paintTitles())
 }
@@ -1239,6 +1253,339 @@ let sidebarFilter = ''
 let pendingSidebarRename = null
 let sidebarToastTimer = null
 
+/* ============================================================
+   SEARCH — the sidebar box searches page titles AND page text.
+   ============================================================
+   Where the index comes from. Every page of a project is a named fragment of
+   the ONE Yjs document this tab already syncs (see initProjectCollaboration),
+   so the text of every page the reader is allowed to see is sitting in memory
+   before the first keystroke. That makes a client-side index the cheap option
+   here rather than the expensive one: no endpoint, no per-page fetch, no
+   permission logic to re-derive (the socket handshake already decided access),
+   and the index follows a collaborator's typing because it is built from the
+   live CRDT, not from a snapshot the server took.
+
+   Two walks read that content, and they MUST enumerate matchable text in the
+   same order, because the sidebar identifies a hit by its ordinal within the
+   page and the jump then reveals the Nth <mark> in the document:
+     - indexBlocks() walks the Yjs->ProseMirror JSON of any page, current or not;
+     - docHitRanges() walks the live ProseMirror doc of the open page.
+   The invariant that keeps them in step: only text nodes contribute characters,
+   every other inline node contributes exactly one character that no query can
+   match, and text blocks are separated by a newline that no (trimmed,
+   single-line) query can span. */
+
+// One character per non-text inline node. Same width as the node's ProseMirror
+// position, so an offset in the text we index is also an offset in the
+// document; U+FFFC is the object-replacement character, which the search box
+// strips from the query (see paintFilter) and so can never be part of a hit.
+const INLINE_ATOM = '\uFFFC'
+// Below this, the box is the title filter it has always been: one letter matches
+// half the prose, which buries the tree in snippets and marks that point at
+// nothing in particular. A page called "R" is still worth finding by name, so
+// titles and slugs keep matching from the first character — it is searching the
+// *text* that waits for a second one, and it waits in all three places at once
+// (which pages match, which snippets show, what the document marks).
+const MIN_TEXT_QUERY = 2
+// Snippets per page. rl-wiki showed 20; this sidebar is 220px wide, where a
+// snippet is two or three wrapped lines, so 20 of them bury the rest of the tree.
+const SNIPPET_CAP = 8
+
+// Blocks of a page as { text, heading }: the plain text of every text-bearing
+// block, tagged with the nearest heading at or above it. In rl-wiki this had to
+// re-implement the renderer's slugify to guess an anchor id from markdown
+// source; here the heading is simply the heading node we last walked past, and
+// it is shown next to the hit rather than encoded into a URL — cowrite renders
+// an editor, which has positions but no heading anchors.
+function indexBlocks(json) {
+  const blocks = []
+  let heading = ''
+  const visit = node => {
+    const content = node.content
+    if (!Array.isArray(content) || !content.length) return
+    // A ProseMirror node's children are either all blocks or all inline, so one
+    // text child means this node is a text block and recursion stops here.
+    if (!content.some(c => c.type === 'text')) {
+      for (const child of content) visit(child)
+      return
+    }
+    let text = ''
+    for (const child of content) {
+      if (child.type === 'text') text += child.text || ''
+      else text += child.type === 'hardBreak' ? ' ' : INLINE_ATOM
+    }
+    if (node.type === 'heading') heading = text
+    blocks.push({ text, heading })
+  }
+  visit(json)
+  return blocks
+}
+
+// slug -> { lc, blocks } for every page of the project, built lazily and dropped
+// again when that page's fragment changes. `lc` is the whole page lowercased,
+// blocks joined by a newline, so "does this page match at all?" is one
+// String.includes before anything walks the blocks. Kept across page switches:
+// the sidebar it feeds is part of the shell, not of the open document.
+const searchIndex = new Map()
+const searchWatched = new Set()
+
+function pageSearchEntry(slug) {
+  const cached = searchIndex.get(slug)
+  if (cached) return cached
+  if (!ydoc) return null
+  const fragment = ydoc.getXmlFragment(pageField(slug))
+  if (!searchWatched.has(slug)) {
+    searchWatched.add(slug)
+    // Precise invalidation, one observer per page: a keystroke anywhere in the
+    // project would otherwise rebuild every page's text.
+    fragment.observeDeep(() => {
+      searchIndex.delete(slug)
+      if (sidebarFilter) scheduleSearchRefresh()
+    })
+  }
+  let blocks = []
+  try {
+    blocks = indexBlocks(yXmlFragmentToProsemirrorJSON(fragment))
+  } catch {
+    blocks = [] // an unreadable page must not take the search down with it
+  }
+  const entry = { lc: blocks.map(b => b.text).join('\n').toLocaleLowerCase(), blocks }
+  searchIndex.set(slug, entry)
+  return entry
+}
+
+// Every occurrence of q in a page: a snippet with its surrounding words, the
+// heading it sits under, and its ordinal so the document can be scrolled to
+// this hit and no other. `total` is the true count even when the list is capped.
+function pageHits(slug, q) {
+  if (q.length < MIN_TEXT_QUERY) return { hits: [], total: 0 }
+  const entry = pageSearchEntry(slug)
+  if (!entry || !entry.lc.includes(q)) return { hits: [], total: 0 }
+  const hits = []
+  let total = 0
+  for (const block of entry.blocks) {
+    const lc = block.text.toLocaleLowerCase()
+    for (let i = lc.indexOf(q); i >= 0; i = lc.indexOf(q, i + q.length)) {
+      if (hits.length < SNIPPET_CAP) {
+        // 30 before / 40 after: enough of the sentence to tell two hits apart,
+        // and about two wrapped lines in a 220px sidebar. The text is already
+        // plain — no markdown syntax to strip out of it, unlike rl-wiki, which
+        // indexed the source.
+        //
+        // Cut in three pieces around THIS occurrence instead of excerpting and
+        // then searching the excerpt again: two hits in one sentence produce
+        // near-identical excerpts, and re-finding the query in one of those
+        // bolds whichever occurrence comes first — so the second hit would point
+        // at the first hit's words.
+        const from = Math.max(0, i - 30)
+        const to = i + q.length + 40
+        const flat = s => s.replace(/\s+/g, ' ')
+        hits.push({
+          before: (from > 0 ? '…' : '') + flat(block.text.slice(from, i)).trimStart(),
+          match: flat(block.text.slice(i, i + q.length)),
+          after: flat(block.text.slice(i + q.length, to)).trimEnd() + (to < block.text.length ? '…' : ''),
+          heading: block.heading,
+          ordinal: total,
+        })
+      }
+      total++
+    }
+  }
+  return { hits, total }
+}
+
+// A page matches on its title, its slug, or anywhere in its text.
+function pageMatches(slug, title, q) {
+  if ((title || '').toLocaleLowerCase().includes(q) || slug.toLocaleLowerCase().includes(q)) return true
+  if (q.length < MIN_TEXT_QUERY) return false
+  const entry = pageSearchEntry(slug)
+  return !!entry && entry.lc.includes(q)
+}
+
+// Bold the matched substring of a page title. Returns HTML, so everything around
+// the <b> is escaped. (Snippets already know where their match is — see pageHits.)
+function highlightMatch(text, q) {
+  const i = q ? text.toLocaleLowerCase().indexOf(q) : -1
+  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))
+}
+
+// Ranges of the active query in a live ProseMirror doc, in document order — the
+// same order pageHits() counts in, so hit N here is hit N there.
+function docHitRanges(doc, q) {
+  const ranges = []
+  if (!q) return ranges
+  doc.descendants((node, pos) => {
+    if (!node.isTextblock) return true
+    let text = ''
+    const spans = [] // where each child's characters start, in text and in the doc
+    node.forEach((child, offset) => {
+      spans.push({ at: text.length, from: pos + 1 + offset })
+      if (child.isText) text += child.text || ''
+      else text += child.type.name === 'hardBreak' ? ' ' : INLINE_ATOM
+    })
+    const lc = text.toLocaleLowerCase()
+    const docPos = off => {
+      let span = spans[0]
+      for (const s of spans) if (s.at <= off) span = s
+      return span ? span.from + (off - span.at) : pos + 1
+    }
+    for (let i = lc.indexOf(q); i >= 0; i = lc.indexOf(q, i + q.length)) {
+      ranges.push({ from: docPos(i), to: docPos(i + q.length) })
+    }
+    return false
+  })
+  return ranges
+}
+
+// Highlighting the open document is the expensive half of the search: it runs
+// on every editor transaction, including every keystroke. Memoised on the doc
+// and the query, both of which are immutable, so an unrelated transaction (a
+// selection move, a decoration poke) costs one comparison.
+let hitRangeMemo = { doc: null, q: '', ranges: [] }
+function memoHitRanges(doc, q) {
+  if (hitRangeMemo.doc !== doc || hitRangeMemo.q !== q) {
+    hitRangeMemo = { doc, q, ranges: docHitRanges(doc, q) }
+  }
+  return hitRangeMemo.ranges
+}
+
+// Poke the open editor so buildDecorations runs again: the query changed but the
+// document did not, and nothing else would ask for fresh decorations.
+function refreshDocHighlights() {
+  const editor = window.__editor
+  if (editor && !editor.isDestroyed) poke(editor)
+}
+
+// Scroll the nth mark of the open document into view. Waits for it: a page
+// switch remounts the editor and a deep link lands before the socket has
+// synced, so the mark is not in the DOM on the next line. Bounded in frames
+// rather than milliseconds, which also means a background tab spends none of
+// its budget — rAF does not fire there, and there is nothing to scroll anyway.
+async function scrollToMark(ordinal, frames) {
+  for (let frame = 0; frame < frames; frame++) {
+    const marks = document.querySelectorAll('#editor mark.search-hl')
+    if (marks.length > ordinal) {
+      marks[ordinal].scrollIntoView({ block: 'center', behavior: 'smooth' })
+      return true
+    }
+    await new Promise(done => requestAnimationFrame(done))
+  }
+  return false // the text went away between the render and the click
+}
+
+// Reveal one hit: the page it is on, scrolled to that hit and no other. The
+// document's marks are in the same order pageHits() counted in, so the ordinal
+// picks one out.
+async function revealHit(slug, ordinal) {
+  if (slug !== pageSlug) await openPage(slug)
+  reflectSearchInUrl(ordinal)
+  await scrollToMark(ordinal, 30)
+}
+
+// The hit a deep link arrived at, spent once. The page it names scrolls to that
+// hit as soon as the text has synced; every later page switch keeps the search
+// running but must not yank the reader to a mark they did not ask for.
+let pendingDeepLinkHit = -1
+function settleDeepLinkQuery() {
+  if (pendingDeepLinkHit < 0) return
+  const ordinal = pendingDeepLinkHit
+  pendingDeepLinkHit = -1
+  scrollToMark(ordinal, 600) // ~10s of frames: a cold load has to sync first
+}
+
+// Take the query from the URL — on load, and again when back/forward lands on a
+// history entry with a different one.
+function adoptSearchFromUrl() {
+  const { q, hit } = urlSearchQuery()
+  if (q === sidebarFilter) return false
+  sidebarFilter = q
+  const box = document.getElementById('sidebar-search')
+  if (box) box.value = q
+  pendingDeepLinkHit = q ? hit : -1
+  return true
+}
+
+// Throttled tree re-render, for when the index is invalidated under an active
+// search — a collaborator typing on another page changes what matches.
+let searchRefreshTimer = null
+function scheduleSearchRefresh() {
+  if (searchRefreshTimer) return
+  searchRefreshTimer = setTimeout(() => {
+    searchRefreshTimer = null
+    if (!sidebarFilter || !sidebarSnapshot) return
+    renderStructure(sidebarSnapshot)
+  }, 200)
+}
+
+// The active query lives in the URL so that what you are looking at is what you
+// can send someone: /d/<id>/<page>?q=<term>[&n=<hit>] opens the page with the
+// search already running and jumps to that hit.
+function searchHref(slug, ordinal = 0) {
+  const base = slug === 'home' ? `/d/${docId}` : `/d/${docId}/${slug}`
+  if (!sidebarFilter) return base
+  return base + `?q=${encodeURIComponent(sidebarFilter)}` + (ordinal ? `&n=${ordinal}` : '')
+}
+
+// replaceState, not pushState — a query is typed one character at a time, and
+// back should leave the page rather than walk backwards through the letters.
+function reflectSearchInUrl(ordinal = 0) {
+  const want = searchHref(pageSlug, ordinal)
+  if (location.pathname + location.search !== want) history.replaceState({}, '', want)
+}
+
+function urlSearchQuery() {
+  try {
+    const params = new URLSearchParams(location.search)
+    const q = (params.get('q') || '').trim().replaceAll(INLINE_ATOM, '').toLocaleLowerCase()
+    const n = Number.parseInt(params.get('n') || '0', 10)
+    return { q, hit: q && Number.isInteger(n) && n > 0 ? n : 0 }
+  } catch {
+    return { q: '', hit: 0 }
+  }
+}
+
+// --- what a search looks like in the sidebar ---------------------------------
+
+// The query bolded inside a page's title, plus the page's true hit count. Only
+// under an active search: without one the row keeps the plain text label it has
+// always had, so nothing about the unfiltered tree changes.
+function paintPageLabel(a, title, total) {
+  if (!sidebarFilter) return
+  const label = el('span', { class: 'tree-title' })
+  label.innerHTML = highlightMatch(title, sidebarFilter)
+  a.replaceChildren(label)
+  if (total > 1) a.appendChild(el('span', { class: 'tree-hit-count' }, String(total)))
+}
+
+// The hit list under a page row: one clickable snippet per occurrence in the
+// page, each labelled with the heading it sits under. A page that matched on its
+// title alone gets no list — that is how a title match stays quiet.
+function pageHitList(slug) {
+  const { hits, total } = pageHits(slug, sidebarFilter)
+  if (!hits.length) return { list: null, total }
+  const list = el('div', { class: 'tree-hits' })
+  for (const hit of hits) {
+    // A real link, so a middle-click or ⌘-click opens the hit in its own tab and
+    // the context menu can copy it. n= is the hit's ordinal, dropped for the
+    // first one: ?q= alone already lands there.
+    const row = el('a', { class: 'tree-hit', href: searchHref(slug, hit.ordinal) })
+    if (hit.heading) row.appendChild(el('span', { class: 'tree-hit-sec' }, hit.heading))
+    const text = el('span', { class: 'tree-hit-text' })
+    text.append(hit.before, el('b', {}, hit.match), hit.after)
+    row.appendChild(text)
+    row.addEventListener('click', e => {
+      if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey) return
+      e.preventDefault()
+      revealHit(slug, hit.ordinal)
+    })
+    list.appendChild(row)
+  }
+  const rest = total - hits.length
+  if (rest > 0) list.appendChild(el('div', { class: 'tree-hit more' }, `+${rest} more match${rest === 1 ? '' : 'es'}`))
+  return { list, total }
+}
+
 function showSidebarToast(message) {
   let toast = document.querySelector('.sidebar-toast')
   if (!toast) {
@@ -1357,15 +1704,30 @@ function wireSidebar() {
   })
   const search = document.getElementById('sidebar-search')
   const searchKey = document.getElementById('sidebar-search-key')
+  // A keystroke now repaints the tree AND the document's marks, but it is not
+  // news about the structure: it renders from the snapshot we already hold
+  // rather than asking the server again, which is what the box used to do on
+  // every character.
+  const applyFilter = () => {
+    sidebarFilter = search.value.trim().replaceAll(INLINE_ATOM, '').toLocaleLowerCase()
+    if (sidebarSnapshot) renderStructure(sidebarSnapshot)
+    else loadStructure()
+    reflectSearchInUrl()
+    refreshDocHighlights()
+  }
+  // 120ms, as rl-wiki used: typing "suggestion" would otherwise rebuild the tree
+  // and re-scan the open document ten times on the way to the word. The box
+  // itself does not wait on this — its ✕ badge is CSS — so it still feels live.
+  let filterPaintTimer = null
   const paintFilter = () => {
-    sidebarFilter = search.value.trim().toLocaleLowerCase()
-    loadStructure()
+    clearTimeout(filterPaintTimer)
+    filterPaintTimer = setTimeout(applyFilter, 120)
   }
   const clearFilter = () => {
     search.value = ''
-    sidebarFilter = ''
     search.blur()
-    loadStructure()
+    clearTimeout(filterPaintTimer)
+    applyFilter()
   }
   search.addEventListener('input', paintFilter)
   search.addEventListener('keydown', e => {
@@ -1377,6 +1739,10 @@ function wireSidebar() {
     if (search.value) clearFilter()
     else search.focus()
   })
+  // A ?q= deep link arrives with the shell, before the socket has synced — the
+  // hit list and the marks can only be painted once the text is here, so seed
+  // the box now and let initPage do the rest once it is.
+  adoptSearchFromUrl()
   document.addEventListener('keydown', e => {
     if ((e.metaKey || e.ctrlKey) && e.key.toLocaleLowerCase() === 'k') {
       e.preventDefault()
@@ -1419,12 +1785,17 @@ async function loadStructure() {
   const s = await api(`/api/docs/${docId}/structure`)
   if (s?.error) return showSidebarToast(s.error)
   sidebarSnapshot = s
+  renderStructure(s)
+}
+
+// Painting the tree is split from fetching it because the search box repaints on
+// every keystroke, and the structure has not changed just because someone typed.
+function renderStructure(s) {
   state.pageTitles = s.titles || {}
   renderSlugLegend(s)
   const container = document.getElementById('page-tree')
   const known = new Set(Object.keys(s.titles || {}))
   known.add(pageSlug) // visiting auto-creates, so the current page is never a ghost
-  const pageHref = slug => (slug === 'home' ? `/d/${docId}` : `/d/${docId}/${slug}`)
   const deletablePage = slug => slug !== 'home' && slug !== '_structure' && known.has(slug)
   const pageDeleteBtn = slug => {
     const title = s.titles?.[slug] || slug
@@ -1485,8 +1856,9 @@ async function loadStructure() {
   for (const key of sidebarSelection) if (!everyKey.has(key)) sidebarSelection.delete(key)
   if (sidebarSelectionAnchor && !everyKey.has(sidebarSelectionAnchor)) sidebarSelectionAnchor = null
 
-  // Filtering is title-only. Non-matching ancestors remain so the location of
-  // each result is legible, but unrelated descendants do not.
+  // A page is kept if the query is in its title, its slug, or its text; a group
+  // or a proposed page only has a label to go on. Non-matching ancestors remain
+  // so the location of each result is legible, but unrelated descendants do not.
   const filterNodes = (nodes, path = []) => {
     if (!sidebarFilter) return nodes || []
     const kept = []
@@ -1497,7 +1869,11 @@ async function loadStructure() {
         : node.group != null
           ? node.group
           : s.titles?.[node.slug] || node.slug
-      if (label.toLocaleLowerCase().includes(sidebarFilter) || children.length) kept.push({ ...node, children })
+      const self =
+        node.proposal || node.group != null
+          ? label.toLocaleLowerCase().includes(sidebarFilter)
+          : pageMatches(node.slug, label, sidebarFilter)
+      if (self || children.length) kept.push({ ...node, children })
     }
     return kept
   }
@@ -1635,6 +2011,7 @@ async function loadStructure() {
       const hasChildren = Boolean(node.children?.length)
       const isCollapsed = !sidebarFilter && hasChildren && collapsed.has(key) && !forcedOpen.has(key)
       const li = el('li', { class: group ? 'nav-cat' : '' })
+      let hits = null
       if (node.proposal) {
         // not a line in the structure yaml yet, so it takes no drag attributes:
         // there is nothing to move until it is accepted
@@ -1694,7 +2071,9 @@ async function loadStructure() {
         const a = el(
           'a',
           {
-            href: pageHref(node.slug),
+            // searchHref, so opening a row in its own tab arrives with the
+            // search that found it
+            href: searchHref(node.slug),
             class: (node.slug === pageSlug ? 'current' : '') + (known.has(node.slug) ? '' : ' ghost-page'),
             title: known.has(node.slug) ? '' : `no page "${node.slug}" yet — create it or fix the structure yaml`,
           },
@@ -1733,8 +2112,14 @@ async function loadStructure() {
           row.appendChild(star)
         }
         if (deletablePage(node.slug)) row.appendChild(pageDeleteBtn(node.slug))
+        hits = sidebarFilter ? pageHitList(node.slug) : null
+        paintPageLabel(a, pageTitle, hits?.total || 0)
       }
       li.appendChild(row)
+      // The hit list hangs off the <li>, not the row: the row is a flex line
+      // with an absolutely-positioned trash can, and snippets belong under the
+      // whole thing, above any child pages.
+      if (hits?.list) li.appendChild(hits.list)
       if (hasChildren && !isCollapsed) li.appendChild(renderNodes(node.children, refPath, key, depth + 1))
       ul.appendChild(li)
     })
@@ -1743,7 +2128,7 @@ async function loadStructure() {
   container.innerHTML = ''
   container.appendChild(renderNodes(visibleTree))
   const visibleUnfiled = sidebarFilter
-    ? (s.unfiled || []).filter(slug => (s.titles?.[slug] || slug).toLocaleLowerCase().includes(sidebarFilter))
+    ? (s.unfiled || []).filter(slug => pageMatches(slug, s.titles?.[slug] || slug, sidebarFilter))
     : (s.unfiled || [])
   if (visibleUnfiled.length) {
     container.appendChild(el('div', { class: 'unfiled-label' }, 'unfiled'))
@@ -1757,7 +2142,7 @@ async function loadStructure() {
       row.className = 'tree-row page-row unfiled-row'
       row.appendChild(el('span', { class: 'tree-caret-spacer', 'aria-hidden': 'true' }))
       const pageTitle = s.titles?.[slug] || slug
-      const a = el('a', { href: pageHref(slug), class: slug === pageSlug ? 'current' : '' }, pageTitle)
+      const a = el('a', { href: searchHref(slug), class: slug === pageSlug ? 'current' : '' }, pageTitle)
       let clickTimer = null
       a.addEventListener('click', e => {
         if (e.button !== 0) return
@@ -1779,12 +2164,19 @@ async function loadStructure() {
       })
       row.appendChild(a)
       if (deletablePage(slug)) row.appendChild(pageDeleteBtn(slug))
+      const hits = sidebarFilter ? pageHitList(slug) : null
+      paintPageLabel(a, pageTitle, hits?.total || 0)
       li.appendChild(row)
+      if (hits?.list) li.appendChild(hits.list)
       ul.appendChild(li)
     }
     if (ul.children.length) container.appendChild(ul)
   }
-
+  // Searching text can come up empty where filtering titles rarely did, and an
+  // empty tree on its own reads as "the sidebar broke", not as "no matches".
+  if (sidebarFilter && !container.querySelector('.tree-row')) {
+    container.appendChild(el('div', { class: 'tree-empty' }, `Nothing matches “${sidebarFilter}”`))
+  }
 }
 
 // --- new-page proposal preview ------------------------------------------------
@@ -2088,6 +2480,16 @@ function buildDecorations(pmState) {
     } catch {}
   }
 
+  // Search hits, last so a mark inside commented or suggested text is the
+  // innermost span and its fill is the one you see. A real <mark> rather than a
+  // styled span: it is what the element is for, and it is what a screen reader
+  // announces as marked text.
+  if (sidebarFilter.length >= MIN_TEXT_QUERY) {
+    for (const range of memoHitRanges(pmState.doc, sidebarFilter)) {
+      decos.push(Decoration.inline(range.from, range.to, { nodeName: 'mark', class: 'search-hl' }))
+    }
+  }
+
   return DecorationSet.create(pmState.doc, decos)
 }
 

test/browser.js

@@ -1299,6 +1299,139 @@ async function main() {
     'returning home keeps the same project collaboration connection')
   console.log('✓ page switches reuse one synced project document')
 
+  // --- search: page text, not just titles -------------------------------------
+  // The sidebar box indexes every page of the project out of the one synced Yjs
+  // document, so "suggestion" (which is in the prose, not in any title) has to
+  // find home, list each occurrence with the heading it sits under, and mark
+  // them in the open document.
+  const playgroundHome = page.url()
+  // hits under one page's row — by default the open one, whose marks we can also
+  // count in the document; '*' for every page, since more than one of them
+  // mentions "suggestion"
+  const hitRows = (scope = 'li:has(> .page-row > a.current)') =>
+    page.$$eval(`#page-tree ${scope} > .tree-hits .tree-hit:not(.more)`, rs => rs.map(r => ({
+      heading: r.querySelector('.tree-hit-sec')?.textContent || '',
+      snippet: r.querySelector('.tree-hit-text')?.textContent || '',
+      href: r.getAttribute('href'),
+    })))
+  await page.fill('#sidebar-search', 'suggestion')
+  await waitFor(async () => (await hitRows()).length > 0, 'typing text finds hits inside a page body')
+  const suggestionHits = await hitRows()
+  const marked = await page.$$eval('#editor mark.search-hl', ms => ms.map(m => m.textContent))
+  assert.ok(marked.length >= 5, `every occurrence is marked in the document (${marked.length}): ` + JSON.stringify(marked))
+  assert.ok(marked.every(t => t.toLowerCase() === 'suggestion'), 'marks cover the query and nothing else: ' + JSON.stringify(marked))
+  // the pill is the page's TRUE count, which is more than the snippets listed
+  const trueCount = Number(await page.$eval('#page-tree .page-row:has(a.current) .tree-hit-count', n => n.textContent))
+  assert.strictEqual(trueCount, marked.length, `the count on the row is the real number of hits (${trueCount} vs ${marked.length} marks)`)
+  assert.ok(suggestionHits.every(h => /suggestion/i.test(h.snippet)), 'each snippet quotes the match in context: ' + JSON.stringify(suggestionHits))
+  assert.ok(suggestionHits.some(h => h.heading === 'Checklist') && suggestionHits.some(h => h.heading === 'Table'),
+    'each hit is tagged with the heading it sits under: ' + JSON.stringify(suggestionHits.map(h => h.heading)))
+  // hits are links: /d/<id>/<page>?q=<term>&n=<hit>, shareable and openable in a tab
+  assert.match(suggestionHits[0].href, /\?q=suggestion$/, 'the first hit links to the plain query: ' + suggestionHits[0].href)
+  assert.match(suggestionHits[1].href, /\?q=suggestion&n=1$/, 'later hits carry their ordinal: ' + suggestionHits[1].href)
+  // a common word overruns the per-page snippet list, and the ones it did not
+  // print are still counted — the pill and the "+n more" row have to add up
+  await page.fill('#sidebar-search', 'the')
+  await waitFor(async () => !!(await page.$('#page-tree .tree-hit.more')), 'a common word overruns the snippet list')
+  const capped = await page.evaluate(() => {
+    const li = document.querySelector('#page-tree li:has(> .page-row > a.current)')
+    return {
+      count: Number(li.querySelector('.tree-hit-count').textContent),
+      listed: li.querySelectorAll(':scope > .tree-hits .tree-hit:not(.more)').length,
+      more: li.querySelector(':scope > .tree-hits .tree-hit.more').textContent,
+      marks: document.querySelectorAll('#editor mark.search-hl').length,
+    }
+  })
+  assert.ok(capped.listed < capped.count, `the snippet list is capped (${capped.listed}) where the count is not (${capped.count})`)
+  assert.strictEqual(capped.count, capped.marks, 'the count still matches what is marked in the document: ' + JSON.stringify(capped))
+  assert.strictEqual(capped.more, `+${capped.count - capped.listed} more matches`, 'the unlisted hits are accounted for: ' + JSON.stringify(capped))
+  // Two occurrences in one sentence produce the same excerpt, and each must bold
+  // its OWN one — re-finding the query inside the excerpt would bold the first
+  // occurrence twice and send the second hit to the first hit's words.
+  const bolded = await page.$$eval('#page-tree .tree-hit-text', ts => ts.map(t => ({
+    text: t.textContent,
+    at: t.firstChild.textContent.length, // the excerpt is [before, <b>, after]
+  })))
+  const twins = bolded.filter(a => bolded.some(b => b !== a && b.text === a.text))
+  assert.ok(twins.length >= 2, 'the fixture has two hits sharing one excerpt: ' + JSON.stringify(bolded.map(b => b.text)))
+  assert.ok(new Set(twins.map(t => t.at)).size >= 2, 'they bold their own occurrence, not the same one twice: ' + JSON.stringify(twins))
+  console.log('✓ search: body hits with per-hit headings, true counts, in-document marks')
+
+  // a title match bolds the matched part of the title and stays quiet otherwise:
+  // there is no body hit to list for it
+  await page.fill('#sidebar-search', 'note')
+  await waitFor(async () => !!(await page.$('#page-tree .page-row a b')), 'a title query bolds what it matched')
+  const titleMatches = await page.$$eval('#page-tree .page-row a:has(b)', as => as.map(a => ({
+    title: a.querySelector('.tree-title')?.textContent,
+    bold: a.querySelector('b')?.textContent,
+  })))
+  assert.ok(titleMatches.some(m => m.title === 'Notes' && m.bold === 'Note'),
+    'the matched part of the title is bolded: ' + JSON.stringify(titleMatches))
+
+  // a query that only exists on another page pulls that page up, and clicking the
+  // hit navigates there and scrolls to it
+  await page.fill('#sidebar-search', 'defines the tree')
+  await waitFor(async () => (await hitRows('*')).length === 1, 'a phrase only on the Notes page finds only that page')
+  assert.deepStrictEqual(
+    await page.$$eval('#page-tree .page-row a .tree-title', ts => ts.map(t => t.textContent.trim())),
+    ['Notes'],
+    'the tree is filtered down to the page that contains the phrase'
+  )
+  await page.click('#page-tree .tree-hit')
+  await page.waitForURL(u => /\/notes\?q=/.test(u.toString()), { timeout: 15000 })
+  await waitFor(async () => (await page.$$('#editor mark.search-hl')).length === 1, 'the hit is marked on the page it navigated to')
+  const onScreen = await page.evaluate(() => {
+    const m = document.querySelector('#editor mark.search-hl')
+    const r = m.getBoundingClientRect()
+    return r.top > 0 && r.bottom < window.innerHeight
+  })
+  assert.ok(onScreen, 'the clicked hit is scrolled into view')
+  console.log('✓ search: clicking a hit on another page navigates and lands on it')
+
+  // ?q= is a deep link: it starts the search, marks the document and jumps to the
+  // named hit — this is what the hrefs above resolve to for someone you send one to
+  await page.goto(`${playgroundHome}?q=greet`, { waitUntil: 'domcontentloaded' })
+  await page.waitForSelector('.tiptap')
+  await waitFor(async () => (await page.inputValue('#sidebar-search')) === 'greet', 'a ?q= link arrives with the search box filled in')
+  await waitFor(async () => (await page.$$('#editor mark.search-hl')).length > 0, 'a ?q= link marks the document once it has synced')
+  // the hit list can only fill in once the socket has synced the text, which on a
+  // cold load lands after the shell has already painted the tree
+  await waitFor(async () => JSON.stringify((await hitRows()).map(h => h.heading)) === '["Code"]',
+    'the deep-linked hit is listed under its heading')
+  await waitFor(
+    async () => page.evaluate(() => {
+      const r = document.querySelector('#editor mark.search-hl').getBoundingClientRect()
+      return r.top > 0 && r.bottom < window.innerHeight
+    }),
+    'a ?q= link scrolls its first hit into view'
+  )
+
+  // The index is the live CRDT, not a snapshot the server took: text typed now is
+  // searchable now. Done on Notes, which carries none of home's seeded
+  // suggestions — typing into a block one of those is anchored to is a different
+  // test, and not this one's business.
+  await page.goto(`${playgroundHome}/notes`, { waitUntil: 'domcontentloaded' })
+  await page.waitForSelector('.tiptap')
+  await page.fill('#sidebar-search', 'quokka')
+  await waitFor(async () => !!(await page.$('#page-tree .tree-empty')), 'a query that matches nothing says so instead of emptying the sidebar')
+  await page.evaluate(() => window.__editor.chain().focus('end').insertContent(' quokka ').run())
+  await waitFor(async () => (await hitRows()).length === 1, 'text typed while the search is running becomes a hit')
+  await waitFor(async () => (await page.$$('#editor mark.search-hl')).length === 1, 'and is marked as it is typed')
+  await page.evaluate(() => window.__editor.commands.undo())
+  await waitFor(async () => (await page.$$('#editor mark.search-hl')).length === 0, 'undoing the text takes its hit away again')
+
+  // clearing puts everything back, including drag-and-drop
+  await page.click('#sidebar-search-key')
+  await waitFor(async () => (await page.$$('#editor mark.search-hl')).length === 0, 'clearing the box drops the marks')
+  assert.strictEqual(await page.inputValue('#sidebar-search'), '', 'the ✕ badge empties the box')
+  assert.ok(!/\?q=/.test(page.url()), 'and takes ?q= out of the URL: ' + page.url())
+  assert.ok(await page.evaluate(() => document.querySelectorAll('#page-tree [data-td-row]').length > 0), 'rows are draggable again')
+  console.log('✓ search: ?q= deep links, live index, empty state, clear restores the tree')
+
+  // back where the rest of the playground sub-tests expect to be
+  await page.goto(playgroundHome, { waitUntil: 'domcontentloaded' })
+  await waitFor(async () => (await page.$$('.card.suggestion')).length >= 1, 'back on the playground home page')
+
   // revision chain: ‹ 2/3 shows generation two inline
   assert.ok(await page.$('.chain-nav'), 'chain nav present')
   assert.equal(await page.textContent('.chain-pos'), '3/3', 'chain defaults to latest')