feat(web): add Cmd+F find in thread

[colonelpanic8]

What Changed

Adds in-thread find to the chat timeline, on the new chat.find keybinding command (mod+f, when: !terminalFocus, so it stays out of the terminal's own find). Enter / Shift+Enter step forward and back, Esc closes.

Scope is deliberately narrow: conversation content only — user messages, assistant messages and proposed plans. Work-log/tool rows are not searched.

• apps/web/src/components/chat/threadFind.ts — pure match model over timeline entries
• apps/web/src/components/chat/threadFindHighlights.ts — CSS Custom Highlight API painting
• apps/web/src/components/chat/FindInThreadBar.tsx — the bar
• apps/web/src/lib/visibleMessageText.ts — the "what does this user message display?" derivation, extracted from MessagesTimeline so the row and find share one source

Why

Requested in #1486. Three earlier attempts (#1501, #3539, #3779) stalled; #1501 was closed with "it should restart as a smaller focused change". This is that smaller change, built to avoid the specific defects reviewers found in the earlier ones:

Highlighting never touches the DOM. Earlier attempts injected <mark> tags into message text before markdown parsing, which rendered literal <mark class=...> inside fenced code blocks and corrupted copied source, and desynchronized the AST offsets that task-list checkbox toggling derives from message text. This uses the CSS Custom Highlight API instead: ranges are painted, the DOM is unmodified. Code blocks keep their syntax highlighting and their exact copy text. Browsers without the API render no highlights but keep working counting and navigation.

Matches are counted against timeline entries, not rendered nodes. LegendList virtualizes the timeline, so DOM-derived counts change as you scroll. Counting from entries keeps the total stable, and navigation uses scrollToIndex on the row model rather than document.querySelector, so a match in an unmounted row is reachable.

Folded turns unfold on navigation. A settled turn hides everything but its terminal assistant message. Those hidden messages are still counted, and stepping to one expands its turn first, then scrolls (screenshot below).

Only one occurrence is ever active. The active style applies to a single range, not to the whole row, so advancing within a long message moves the marker instead of lighting up every match in it.

The counter cannot show an impossible position. The index is clamped against the live match count on every render, so a streaming edit that removes matches cannot leave 5/2 on screen. Occurrence scanning advances by the needle length, so aa in aaa counts once — the count matches what a left-to-right highlighter can actually paint.

Find searches what the timeline shows. User prompts carry appended <terminal_context> / <element_context> / preview-annotation blocks that are stripped before rendering. Searching raw message.text counted invisible text; the display derivation is now shared between the row and the search index, so they cannot drift.

Known limitation, called out rather than hidden: an occurrence split across text nodes by inline markup (**bo**ld) is counted but not painted. The row is authoritative for navigation and the occurrence index within a row is clamped, so this degrades to "scrolls to the right message, paints fewer highlights than it counts" rather than breaking.

UI Changes

Find bar with match count, live highlighting across markdown, inline code and fenced code blocks (light):

Dark:

Stepping onto a match inside a folded turn unfolds the turn and reveals it (the "Worked for 2m" fold above has expanded, and the commentary message it was hiding now shows the active match):

No results:

Verification

Unit tests:

vp test run apps/web/src/components/chat/threadFind.test.ts apps/web/src/components/chat/threadFindHighlights.test.ts
# 17 passed

vp test run apps/web/src/keybindings.test.ts \
  apps/web/src/components/settings/KeybindingsSettings.logic.test.ts \
  apps/web/src/components/chat/MessagesTimeline.test.tsx \
  apps/web/src/components/chat/MessagesTimeline.logic.test.ts \
  packages/contracts/src/settings.test.ts
# 116 passed

Static checks:

vp check apps/web/src packages/contracts/src packages/shared/src   # 0 errors
pnpm --filter @t3tools/web run typecheck                           # clean
pnpm --filter @t3tools/contracts run typecheck                     # clean
pnpm --filter @t3tools/shared run typecheck                        # clean

Driven in a real browser against an isolated local environment seeded with a 17-turn thread (folded turns, a fenced code block, and enough filler to force virtualization). Confirmed there: Ctrl+F opens and focuses; deploy reports 1/12, matching a hand count that includes the folded commentary and the code block; Enter at 1/12 unfolds the folded turn and mounts the hidden message; wrap-around forward and back (12/12 → 1/12); the code block's textContent is unchanged with zero <mark> elements in the DOM; a no-match query reports 0/0 and paints nothing; Esc closes and unregisters both highlights.

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Medium Risk
Touches large chat UI (ChatView, MessagesTimeline) with scroll/live-follow and virtualization interactions; highlights degrade gracefully where the Custom Highlight API is missing.

Overview
Adds in-thread find to the chat timeline via a new chat.find command (mod+f when terminal and preview are not focused).

ChatView owns per-thread find state (query, active match, navigation) and renders FindInThreadBar over the timeline. MessagesTimeline builds matches from timeline entries (user/assistant messages and proposed plans—not work logs), reports counts to the bar, unfolds folded turns and scrolls to the active row, and auto-expands collapsed user messages and plan cards while find is active.

Highlights use the CSS Custom Highlight API (threadFindHighlights) on data-thread-find-text regions so markdown and copy text stay untouched. Shared deriveDisplayedUserMessageContent keeps search text aligned with what the UI shows (stripped contexts). Unit tests cover matching, navigation, and highlight partitioning.

^{Reviewed by Cursor Bugbot for commit ba5a3b3. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add Cmd+F find-in-thread search to the chat view

• Adds a FindInThreadBar overlay triggered by Mod+F (when not in terminal or preview focus) via the new chat.find keybinding command.
• Searches assistant messages, user messages, and proposed plan content; work-log/tool entries are excluded. Match scanning is case-insensitive with UTF-16-safe offsets.
• Highlights are painted using the CSS Custom Highlight API with theme-aware colors; the active match is styled distinctly from inactive ones.
• Collapsed user message bodies and proposed plan cards expand automatically during find and restore collapse controls when find closes.
• Navigation scrolls the active match into view, unfolding turns as needed, and resets state when switching threads.
• Risk: CSS Custom Highlight API is not universally supported; the hook falls back silently when unavailable, leaving matches unhighlighted on unsupported browsers.

^{Macroscope summarized ba5a3b3.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 0eaf8d10-a018-4f99-b521-5e8e1947775d

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Needs human review

This PR introduces a new user-facing feature (Cmd+F find in thread) with new UI components, matching logic, and highlight painting infrastructure. New features with this scope of new behavior and components warrant human review.

^{You can customize Macroscope's approvability policy. Learn more.}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 2 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit f625827. Configure here.}