git-reviewer 2.16.0 → 2.17.0

package/README.md

@@ -3,7 +3,7 @@
 [![CI](https://github.com/dheerajjha/reviewer/actions/workflows/ci.yml/badge.svg)](https://github.com/dheerajjha/reviewer/actions/workflows/ci.yml)
 [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 [![Node](https://img.shields.io/badge/node-%3E%3D18-brightgreen.svg)](package.json)
-[![Tests](https://img.shields.io/badge/tests-500-brightgreen.svg)](test/)
+[![Tests](https://img.shields.io/badge/tests-509-brightgreen.svg)](test/)
 [![Dependencies](https://img.shields.io/badge/dependencies-3-brightgreen.svg)](package.json)
 
 **English** · [简体中文](docs/README.zh-CN.md) · [日本語](docs/README.ja.md)
@@ -274,6 +274,32 @@ so the app shows you rather than telling you. **Reviewing, in four moves** opens
 by itself the first time you review anything, and lives behind the `?` in the
 header after that. Each move is a small animation of the gesture itself.
 
+### Search across the change
+
+<kbd>Ctrl</kbd>/<kbd>⌘</kbd>+<kbd>Shift</kbd>+<kbd>F</kbd> searches every changed file at once, the way
+an IDE's find navigator searches a project. Each result says which side of
+the change it is on: added, deleted, unchanged code in a changed file, or,
+with **Whole repository**, code elsewhere that the change did not touch.
+That answers "this function is new: where is it called, and where was it
+called before?" without leaving the review. Filter to **Deleted** for the
+second half.
+
+- **Match** contains, whole word, starts with, ends with, or a regular
+  expression; **Aa** matches case.
+- **Refs** is a references search. Select a name in the diff and press the
+  shortcut. Results are split into the definition and the uses that were
+  added, removed and left unchanged. If the definition changed while some
+  uses didn't, it says so, since that is often where a change breaks
+  something.
+- <kbd>↑</kbd>/<kbd>↓</kbd> and <kbd>Enter</kbd> go to a result,
+  <kbd>⌘</kbd>/<kbd>Ctrl</kbd>+<kbd>G</kbd> steps through them, marks on the
+  diff's edge show the matches in the open file, and **Comment** starts a
+  comment on that line.
+
+Repository search runs `git grep` against the exact tree under review: the
+working tree, the index, or the head of a comparison. Its regular
+expressions are git's extended dialect.
+
 ## What it writes
 
 Two files, both plain text you can read without this app, both in a per-user
@@ -454,6 +480,7 @@ The UI is a client of this; nothing is hidden from you.
 | `POST /api/save-comments` | Persist the current comments. Send back the `lastUpdated` you loaded and the save is conditional: if the file has moved on since, it answers `409` with the current `comments` and `lastUpdated` instead of overwriting them |
 | `GET /api/load-comments/:repoId` | Restore saved comments, with `lastUpdated`, the version token a conditional save sends back |
 | `POST /api/submit-review` | Render the saved comments to a review file |
+| `GET /api/search/:repoId` | Search the review: `q`, `mode` (contains, word, prefix, suffix, regex), `case=1`, `scope` (changes, files, repo) and `symbol=1` for a references search. Each result has its `side` of the change and the `diffIndex` of its line in the file's diff |
 | `GET /api/events/:repoId` | Server-sent events for an open review: `comments` whenever the saved comments change, whoever changed them; `agents` as agents connect, leave or start on a thread; `partial` with an answer still being written |
 | `GET /api/agent/sessions/:repoId` | The Claude Code sessions that ran in this repository, newest first |
 | `POST /api/agent/connect` | `{repoId, sessionId, fork}`: have that session answer the review's comments in the background. `fork` defaults to `true`, a copy of the session |
@@ -528,7 +555,7 @@ rather than a public issue.
 
 ```bash
 npm install           # 3 dependencies, no build step, ~6MB
-npm test              # 500 tests
+npm test              # 509 tests
 npm run test:watch
 npm run test:coverage
 ```

package/lib/search.js

@@ -0,0 +1,319 @@
+'use strict';
+
+const { spawn } = require('child_process');
+
+/**
+ * Finding text across a review: every changed file at once, the way an IDE's
+ * find navigator searches a project rather than the open file.
+ *
+ * The question it is built for is the one a reviewer cannot answer from one
+ * file: "this function is new here -- where is it called, and where was it
+ * called before this change?" So every result says which side of the change
+ * it is on: a line this change added, one it deleted, unchanged code inside a
+ * changed file, or code in the rest of the repository the change did not
+ * touch. A references search goes one step further and tells definitions from
+ * uses, and says when a definition changed but its callers did not.
+ */
+
+// What counts as part of an identifier, for whole-word matching. `$` is in
+// it because JavaScript identifiers use it.
+const IDENT = 'A-Za-z0-9_$';
+const MODES = ['contains', 'word', 'prefix', 'suffix', 'regex'];
+const SCOPES = ['changes', 'files', 'repo'];
+
+const MAX_RESULTS = 2000;
+const MAX_PER_FILE = 300;
+const MAX_LINE = 2000;
+const MAX_RANGES = 20;
+
+/** A search that cannot run as asked; the message is for the person who typed it. */
+class SearchError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'SearchError';
+  }
+}
+
+const escapeRegExp = text => text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+/**
+ * The matcher for a query, as a global regular expression.
+ *
+ * @param {string} query
+ * @param {object} [options]
+ * @param {string} [options.mode] contains, word, prefix, suffix or regex
+ * @param {boolean} [options.caseSensitive]
+ * @returns {RegExp}
+ * @throws {SearchError}
+ */
+function buildMatcher(query, { mode = 'contains', caseSensitive = false } = {}) {
+  if (typeof query !== 'string' || query.trim() === '') throw new SearchError('Type something to search for.');
+  if (query.length > 500) throw new SearchError('That search is longer than 500 characters.');
+  if (!MODES.includes(mode)) throw new SearchError(`Unknown match mode "${mode}".`);
+
+  const literal = escapeRegExp(query);
+  const source = {
+    contains: literal,
+    word: `(?<![${IDENT}])${literal}(?![${IDENT}])`,
+    prefix: `(?<![${IDENT}])${literal}`,
+    suffix: `${literal}(?![${IDENT}])`,
+    regex: query
+  }[mode];
+
+  try {
+    return new RegExp(source, caseSensitive ? 'g' : 'gi');
+  } catch (error) {
+    throw new SearchError(`That is not a valid regular expression: ${error.message.replace(/^Invalid regular expression: /, '')}`);
+  }
+}
+
+/**
+ * Where a matcher matches on one line, as [start, end) pairs, so the page can
+ * mark exactly what matched. Very long lines -- minified bundles -- are
+ * searched only as far as MAX_LINE characters.
+ *
+ * @param {string} text
+ * @param {RegExp} matcher a global RegExp from buildMatcher
+ * @returns {Array<[number, number]>}
+ */
+function matchRanges(text, matcher) {
+  const line = text.length > MAX_LINE ? text.slice(0, MAX_LINE) : text;
+  const ranges = [];
+  matcher.lastIndex = 0;
+  let match;
+  while ((match = matcher.exec(line)) !== null) {
+    if (match[0].length === 0) {
+      matcher.lastIndex += 1; // an empty regex match would never advance
+      continue;
+    }
+    ranges.push([match.index, match.index + match[0].length]);
+    if (ranges.length >= MAX_RANGES) break;
+  }
+  return ranges;
+}
+
+/**
+ * Whether a line defines `name`, as far as one line can show it, in the
+ * languages people most often review: a function, class, method, type or
+ * variable declared under that name. A heuristic, and labelled as one in the
+ * page: a references search sorts by it, never hides by it.
+ *
+ * @param {string} text
+ * @param {string} name
+ * @returns {boolean}
+ */
+function definesName(text, name) {
+  const n = escapeRegExp(name);
+  const end = `(?![${IDENT}])`;
+  const declared = new RegExp(
+    `(?:^|[^${IDENT}.])(?:function\\*?|def|class|interface|type|struct|enum|trait|fn|func|const|let|var|val|module)\\s+${n}${end}`
+  );
+  const assigned = new RegExp(
+    `(?:^|[\\s{,;(])${n}\\s*[:=]\\s*(?:async\\s+)?(?:function\\b|\\([^)]*\\)\\s*=>|[A-Za-z_$][\\w$]*\\s*=>)`
+  );
+  const method = new RegExp(
+    `^\\s*(?:(?:public|private|protected|static|async|override|export|default|get|set)\\s+)*\\*?${n}\\s*\\([^)]*\\)\\s*(?::\\s*[^{]+)?\\{\\s*$`
+  );
+  return declared.test(text) || assigned.test(text) || method.test(text);
+}
+
+/**
+ * The side of the change a diff line is on.
+ *
+ * @param {'add'|'delete'|'unchanged'} type
+ * @returns {'added'|'deleted'|'context'}
+ */
+function sideOf(type) {
+  return type === 'add' ? 'added' : type === 'delete' ? 'deleted' : 'context';
+}
+
+/**
+ * Search the changed files of a review.
+ *
+ * @param {Array<{path: string, lines: Array<{type: string, oldLine: number|null, newLine: number|null, content: string}>}>} files
+ *   each changed file's diff, as the page draws it: every line of the file,
+ *   with what was added and deleted marked
+ * @param {RegExp} matcher
+ * @param {object} [options]
+ * @param {boolean} [options.changedOnly] only lines the change added or deleted
+ * @returns {{results: object[], truncated: boolean}}
+ */
+function searchDiffs(files, matcher, { changedOnly = false } = {}) {
+  const results = [];
+  let truncated = false;
+
+  for (const file of files) {
+    let inFile = 0;
+    for (let index = 0; index < file.lines.length; index++) {
+      const line = file.lines[index];
+      if (changedOnly && line.type !== 'add' && line.type !== 'delete') continue;
+      const ranges = matchRanges(line.content, matcher);
+      if (ranges.length === 0) continue;
+
+      if (results.length >= MAX_RESULTS || inFile >= MAX_PER_FILE) {
+        truncated = true;
+        if (results.length >= MAX_RESULTS) return { results, truncated };
+        break;
+      }
+      results.push({
+        file: file.path,
+        side: sideOf(line.type),
+        line: line.newLine ?? line.oldLine,
+        oldLine: line.oldLine,
+        newLine: line.newLine,
+        diffIndex: index,
+        text: line.content.slice(0, MAX_LINE),
+        ranges
+      });
+      inFile += 1;
+    }
+  }
+
+  return { results, truncated };
+}
+
+/**
+ * The git grep arguments for a query, as close to the matcher as git's own
+ * dialect allows. Whatever git finds is filtered through the real matcher
+ * afterwards, so git only has to be no narrower than it.
+ *
+ * @param {string} query
+ * @param {{mode: string, caseSensitive: boolean}} options
+ * @returns {string[]}
+ */
+function grepPattern(query, { mode, caseSensitive }) {
+  const literal = query.replace(/[.^$*+?()[\]{}|\\]/g, '\\$&');
+  const args = caseSensitive ? [] : ['-i'];
+  if (mode === 'contains' || mode === 'word' || mode === 'prefix' || mode === 'suffix') {
+    // A fixed-string search for the text is never narrower than any of
+    // these, and git does it fastest; the boundaries are checked in JS.
+    return [...args, '-F', '-e', query];
+  }
+  return [...args, '-E', '-e', mode === 'regex' ? query : literal];
+}
+
+/**
+ * Lines matching the query in the repository's files, on the reviewed side.
+ *
+ * Runs `git grep` against the exact tree under review -- the working tree, the
+ * index, or the head commit of a comparison -- and stops reading once it has
+ * enough, so a match in every file of a large repository costs the first
+ * MAX_RESULTS lines and no more.
+ *
+ * @param {object} options
+ * @param {string} options.repoPath
+ * @param {{mode: string, range: {head: string}|null}} options.session
+ * @param {string} options.query
+ * @param {{mode: string, caseSensitive: boolean}} options.match
+ * @param {RegExp} options.matcher
+ * @param {Set<string>} options.exclude paths already searched through their diff
+ * @param {number} [options.limit]
+ * @returns {Promise<{results: object[], truncated: boolean}>}
+ */
+function grepRepository({ repoPath, session, query, match, matcher, exclude, limit = MAX_RESULTS }) {
+  const where = session.mode === 'staged' ? ['--cached']
+    : session.range ? [session.range.head]
+      : [];
+  const rev = session.range && session.mode !== 'staged' ? session.range.head : null;
+  const args = ['grep', '-z', '-n', '-I', '--no-color', ...grepPattern(query, match), ...where, '--'];
+
+  return new Promise((resolve, reject) => {
+    const child = spawn('git', args, { cwd: repoPath, windowsHide: true });
+    const results = [];
+    const perFile = new Map();
+    let buffered = '';
+    let truncated = false;
+    let done = false;
+
+    const finish = () => {
+      if (done) return;
+      done = true;
+      resolve({ results, truncated });
+    };
+
+    child.stdout.setEncoding('utf-8');
+    child.stdout.on('data', chunk => {
+      if (done) return;
+      buffered += chunk;
+      let newline;
+      while ((newline = buffered.indexOf('\n')) >= 0) {
+        const record = buffered.slice(0, newline);
+        buffered = buffered.slice(newline + 1);
+        const [location, lineNumber, ...rest] = record.split('\0');
+        if (lineNumber === undefined) continue;
+        const file = rev && location.startsWith(`${rev}:`) ? location.slice(rev.length + 1) : location;
+        if (exclude.has(file)) continue;
+        const text = rest.join('\0');
+        const ranges = matchRanges(text, matcher);
+        if (ranges.length === 0) continue;
+
+        const count = perFile.get(file) ?? 0;
+        if (count >= MAX_PER_FILE) {
+          truncated = true;
+          continue;
+        }
+        perFile.set(file, count + 1);
+        results.push({
+          file,
+          side: 'untouched',
+          line: Number(lineNumber),
+          oldLine: null,
+          newLine: Number(lineNumber),
+          diffIndex: null,
+          text: text.slice(0, MAX_LINE),
+          ranges
+        });
+        if (results.length >= limit) {
+          truncated = true;
+          child.kill();
+          finish();
+          return;
+        }
+      }
+    });
+    child.on('error', error => {
+      if (!done) {
+        done = true;
+        reject(error);
+      }
+    });
+    // git grep exits 1 when nothing matched, which is an answer, not a failure.
+    child.on('close', finish);
+  });
+}
+
+/**
+ * What a references search found, in the terms a reviewer asks it.
+ *
+ * @param {object[]} results with `role` set
+ * @returns {{definitions: number, added: number, removed: number, unchanged: number, warning: string|null}}
+ */
+function summarizeReferences(results) {
+  const uses = results.filter(result => result.role === 'reference');
+  const definitions = results.filter(result => result.role === 'definition');
+  const summary = {
+    definitions: definitions.length,
+    added: uses.filter(result => result.side === 'added').length,
+    removed: uses.filter(result => result.side === 'deleted').length,
+    unchanged: uses.filter(result => result.side === 'context' || result.side === 'untouched').length,
+    warning: null
+  };
+  const definitionChanged = definitions.some(result => result.side === 'added' || result.side === 'deleted');
+  if (definitionChanged && summary.unchanged > 0) {
+    summary.warning = `The definition changed, and ${summary.unchanged} ${summary.unchanged === 1 ? 'use was' : 'uses were'} left as they were. Check that they still fit.`;
+  }
+  return summary;
+}
+
+module.exports = {
+  buildMatcher,
+  matchRanges,
+  definesName,
+  searchDiffs,
+  grepRepository,
+  summarizeReferences,
+  SearchError,
+  MODES,
+  SCOPES,
+  MAX_RESULTS
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "git-reviewer",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "description": "Review your coding agent's changes like a pull request — locally, with inline comments and threaded follow-ups, then hand the marked-up review back to the agent",
   "author": "Dheeraj Jha",
   "license": "MIT",

package/public/app.js

@@ -1169,6 +1169,8 @@ async function loadRepo(scope = {}) {
     // From here on, comments written anywhere else -- another tab, an agent
     // answering in a thread -- arrive as they are written.
     openReviewEvents(currentRepoId);
+    document.getElementById('searchButton')?.classList.remove('hidden');
+    if (searchState.open) runSearch();
 
     // Open something. A loaded repository used to sit behind an empty pane
     // until a file was clicked, which reads as a failure rather than as a
@@ -1524,6 +1526,7 @@ function displayCode(filePath, diffLines, binary) {
 
   codeViewer.innerHTML = html;
   codeSection.classList.remove('hidden');
+  renderSearchMinimap();
 
   // Add text selection handler
   codeViewer.removeEventListener('mousedown', trackShiftKeyDown);
@@ -2219,6 +2222,8 @@ async function cleanupRepo() {
 // Reset application
 function resetApp() {
   closeReviewEvents();
+  closeSearch();
+  document.getElementById('searchButton')?.classList.add('hidden');
   currentRepoId = null;
   currentFiles = [];
   currentFile = null;
@@ -2887,9 +2892,17 @@ function showPartialAnswer(key) {
   else box.querySelector('.comment-text')?.insertAdjacentHTML('afterend', html);
 }
 
+// What the threads last showed about agents, so a report that changes
+// nothing a reader can see -- the first one on connecting, say -- does not
+// redraw the code (and throw away a scroll, a flash or a selection).
+let pendingSignature = '';
+
 /** Redraw every thread's pending state after who-is-answering-what changed. */
 function refreshPendingAnswers() {
   renderAgentButton();
+  const signature = JSON.stringify([agentConnected(), [...threadsBeingAnswered()].sort()]);
+  if (signature === pendingSignature) return;
+  pendingSignature = signature;
   updateCommentsSidebar();
   commentsPaneStale = true;
   redrawCommentsPane();
@@ -3099,6 +3112,371 @@ async function copyConnectCommand(index) {
   }
 }
 
+/*
+ * Search across the change.
+ *
+ * Every changed file at once, and with "Whole repository" the code around
+ * the change too, so "this function is new -- where is it called, and where
+ * was it called before?" has an answer without leaving the review. Each
+ * result says which side of the change it is on; a references search also
+ * tells the definition from the uses. The server does the searching (see
+ * lib/search.js); this is the find navigator around it.
+ */
+
+const searchState = {
+  open: false,
+  results: [],
+  summary: null,
+  side: 'all',
+  selected: -1,
+  collapsed: new Set(),
+  previews: new Map(),
+  timer: null,
+  controller: null,
+  query: ''
+};
+
+const SEARCH_HISTORY_KEY = 'reviewer.searchHistory';
+
+function searchHistory() {
+  try {
+    const stored = JSON.parse(localStorage.getItem(SEARCH_HISTORY_KEY) || '[]');
+    return Array.isArray(stored) ? stored.filter(item => typeof item === 'string').slice(0, 10) : [];
+  } catch {
+    return [];
+  }
+}
+
+function rememberSearch(query) {
+  const history = [query, ...searchHistory().filter(item => item !== query)].slice(0, 10);
+  try {
+    localStorage.setItem(SEARCH_HISTORY_KEY, JSON.stringify(history));
+  } catch {
+    /* a private window: history is a convenience */
+  }
+  renderSearchHistory();
+}
+
+function renderSearchHistory() {
+  const list = document.getElementById('searchHistory');
+  if (!list) return;
+  list.replaceChildren(...searchHistory().map(item => Object.assign(document.createElement('option'), { value: item })));
+}
+
+/**
+ * Open the search, taking the sidebar's place. With code selected in the
+ * diff, the selection becomes the query and a references search runs for
+ * it: select a function's name, press Ctrl+Shift+F, see where it is used.
+ */
+function openSearch(prefill = null) {
+  if (!currentRepoId) return;
+  const sidebar = document.getElementById('sidebar');
+  document.getElementById('searchPanel').classList.remove('hidden');
+  sidebar.classList.add('searching');
+  searchState.open = true;
+  renderSearchHistory();
+
+  const input = document.getElementById('searchInput');
+  if (prefill) {
+    input.value = prefill;
+    const identifier = /^[A-Za-z_$][\w$]*$/.test(prefill);
+    document.getElementById('searchRefs').setAttribute('aria-pressed', identifier ? 'true' : 'false');
+    runSearch();
+  }
+  input.focus();
+  input.select();
+}
+
+function closeSearch() {
+  document.getElementById('searchPanel').classList.add('hidden');
+  document.getElementById('sidebar').classList.remove('searching');
+  searchState.open = false;
+  renderSearchMinimap();
+}
+
+function scheduleSearch() {
+  clearTimeout(searchState.timer);
+  searchState.timer = setTimeout(runSearch, 160);
+}
+
+/** Ask the server, abandoning whatever search this one replaces. */
+async function runSearch() {
+  const query = document.getElementById('searchInput').value;
+  const summary = document.getElementById('searchSummary');
+  searchState.controller?.abort();
+  if (!currentRepoId || query.trim() === '') {
+    searchState.results = [];
+    searchState.summary = null;
+    searchState.query = '';
+    summary.textContent = '';
+    renderSearchResults();
+    return;
+  }
+
+  const symbol = document.getElementById('searchRefs').getAttribute('aria-pressed') === 'true';
+  const params = new URLSearchParams({
+    q: query,
+    mode: document.getElementById('searchMode').value,
+    scope: document.getElementById('searchScope').value,
+    case: document.getElementById('searchCase').getAttribute('aria-pressed') === 'true' ? '1' : '0',
+    ...(symbol ? { symbol: '1' } : {})
+  });
+  const controller = new AbortController();
+  searchState.controller = controller;
+  summary.textContent = 'Searching…';
+
+  try {
+    const response = await fetch(`${API_BASE}/search/${currentRepoId}?${params}`, { signal: controller.signal });
+    const data = await response.json();
+    if (controller.signal.aborted) return;
+    if (!response.ok) {
+      summary.replaceChildren(Object.assign(document.createElement('span'), { className: 'search-error', textContent: data.error || 'Search failed.' }));
+      searchState.results = [];
+      renderSearchResults();
+      return;
+    }
+    searchState.results = data.results;
+    searchState.summary = data;
+    searchState.query = query;
+    searchState.selected = data.results.length > 0 ? 0 : -1;
+    searchState.previews.clear();
+    renderSearchSummary();
+    renderSearchResults();
+  } catch (error) {
+    if (error.name !== 'AbortError') summary.textContent = `Search failed: ${error.message}`;
+  }
+}
+
+function sideMatches(result) {
+  const side = searchState.side;
+  if (side === 'all') return true;
+  if (side === 'unchanged') return result.side === 'context' || result.side === 'untouched';
+  return result.side === side;
+}
+
+function visibleResults() {
+  return searchState.results.filter(sideMatches);
+}
+
+function renderSearchSummary() {
+  const data = searchState.summary;
+  const summary = document.getElementById('searchSummary');
+  if (!data) return;
+  const shown = visibleResults().length;
+  const parts = [`${shown} ${shown === 1 ? 'result' : 'results'} in ${data.files} ${data.files === 1 ? 'file' : 'files'}`];
+  if (data.truncated) parts.push('more not shown');
+  parts.push(`${data.ms} ms`);
+  summary.replaceChildren(document.createTextNode(parts.join(' · ')));
+  if (data.summary) {
+    const s = data.summary;
+    summary.append(document.createElement('br'), document.createTextNode(
+      `${s.definitions} ${s.definitions === 1 ? 'definition' : 'definitions'} · ${s.added} added · ${s.removed} removed · ${s.unchanged} unchanged ${s.unchanged === 1 ? 'use' : 'uses'}`
+    ));
+    if (s.warning) summary.append(Object.assign(document.createElement('span'), { className: 'search-warning', textContent: s.warning }));
+  }
+}
+
+/** A result's line, with what matched marked. Each piece is escaped on its own. */
+function markedText(result) {
+  let html = '';
+  let at = 0;
+  for (const [start, end] of result.ranges) {
+    html += escapeHtml(result.text.slice(at, start)) + `<mark>${escapeHtml(result.text.slice(start, end))}</mark>`;
+    at = end;
+  }
+  return html + escapeHtml(result.text.slice(at));
+}
+
+const SIDE_MARK = { added: '+', deleted: '−', context: '·', untouched: '·' };
+const SIDE_NAME = { added: 'added', deleted: 'deleted', context: 'unchanged', untouched: 'outside the change' };
+
+function renderSearchResults() {
+  const container = document.getElementById('searchResults');
+  const results = visibleResults();
+  const groups = new Map();
+  results.forEach((result, index) => {
+    if (!groups.has(result.file)) groups.set(result.file, []);
+    groups.get(result.file).push({ result, index });
+  });
+
+  let html = '';
+  for (const [file, hits] of groups) {
+    const expanded = !searchState.collapsed.has(file);
+    const reviewed = currentFiles.some(f => f.path === file);
+    html += `<button type="button" class="search-file" data-file="${escapeHtml(file)}" aria-expanded="${expanded}">` +
+      `<span>${escapeHtml(file)}${reviewed ? '' : ' <span class="elsewhere">not in this review</span>'}</span>` +
+      `<span class="count">${hits.length}</span></button><div class="search-group">`;
+    for (const { result, index } of hits) {
+      const canComment = reviewed && result.diffIndex !== null;
+      html += `<div class="search-hit${index === searchState.selected ? ' selected' : ''}" role="option" data-index="${index}" data-side="${result.side}"` +
+        ` title="Line ${result.line}, ${SIDE_NAME[result.side]}">` +
+        `<span class="side">${SIDE_MARK[result.side]}</span><span class="num">${Number(result.line)}</span>` +
+        `<span class="text">${result.role === 'definition' ? '<span class="role">def </span>' : ''}${markedText(result)}</span>` +
+        `${canComment ? `<button type="button" class="hit-comment" data-comment="${index}" title="Comment on this line">Comment</button>` : ''}</div>`;
+      const preview = searchState.previews.get(index);
+      if (preview) html += `<div class="search-preview">${preview}</div>`;
+    }
+    html += '</div>';
+  }
+  if (searchState.query && results.length === 0) {
+    html = '<div class="search-summary" style="padding: 8px 14px">Nothing matches on this side of the change.</div>';
+  }
+  container.innerHTML = html;
+  container.querySelector('.search-hit.selected')?.scrollIntoView({ block: 'nearest' });
+  renderSearchMinimap();
+}
+
+function moveSearchSelection(delta) {
+  const count = visibleResults().length;
+  if (count === 0) return;
+  searchState.selected = (searchState.selected + delta + count) % count;
+  renderSearchResults();
+}
+
+/**
+ * Go to a result: open its file in the diff and bring the line into view.
+ * A line outside the review has no diff to show, so its neighbourhood opens
+ * under it instead.
+ */
+async function openSearchResult(index, { comment = false } = {}) {
+  const result = visibleResults()[index];
+  if (!result) return;
+  searchState.selected = index;
+
+  const fileIndex = currentFiles.findIndex(f => f.path === result.file);
+  if (fileIndex === -1 || result.diffIndex === null) {
+    await togglePreview(index, result);
+    return;
+  }
+
+  if (currentFile !== result.file) await loadFile(result.file, fileIndex);
+  renderSearchResults();
+  const line = document.querySelector(`.line[data-diff-index="${Number(result.diffIndex)}"]`);
+  if (!line) return;
+  line.scrollIntoView({ block: 'center' });
+  line.classList.remove('search-flash');
+  void line.offsetWidth;
+  line.classList.add('search-flash');
+  if (comment) {
+    const [start, end] = result.ranges[0] ?? [0, 0];
+    toggleCommentInputWithSelection(result.diffIndex, end > start ? result.text.slice(start, end) : null);
+  }
+}
+
+async function togglePreview(index, result) {
+  if (searchState.previews.has(index)) {
+    searchState.previews.delete(index);
+    renderSearchResults();
+    return;
+  }
+  try {
+    const response = await fetch(`${API_BASE}/file-full/${currentRepoId}/${result.file}`);
+    const data = await response.json();
+    if (!response.ok) throw new Error(data.error);
+    const from = Math.max(0, result.line - 4);
+    const lines = data.lines.slice(from, result.line + 3).map((text, i) => {
+      const number = from + i + 1;
+      const row = `${String(number).padStart(5)}  ${escapeHtml(text)}`;
+      return number === result.line ? `<span class="focus">${row}</span>` : row;
+    });
+    searchState.previews.set(index, lines.join('\n'));
+  } catch (error) {
+    searchState.previews.set(index, escapeHtml(`Could not read ${result.file}: ${error.message}`));
+  }
+  renderSearchResults();
+}
+
+/** Marks on the diff's edge for every result in the open file. */
+function renderSearchMinimap() {
+  const strip = document.getElementById('searchMinimap');
+  if (!strip) return;
+  const total = currentDiffLines.length;
+  const here = searchState.open && total > 0
+    ? visibleResults().map((result, index) => ({ result, index })).filter(({ result }) => result.file === currentFile && result.diffIndex !== null)
+    : [];
+  strip.classList.toggle('hidden', here.length === 0);
+  strip.innerHTML = here.map(({ result, index }) =>
+    `<span data-index="${index}" data-side="${result.side}" style="top: ${((result.diffIndex / total) * 100).toFixed(2)}%" title="Line ${Number(result.line)}"></span>`
+  ).join('');
+}
+
+function initSearch() {
+  const input = document.getElementById('searchInput');
+  input.addEventListener('input', scheduleSearch);
+  input.addEventListener('keydown', event => {
+    if (event.key === 'ArrowDown') { event.preventDefault(); moveSearchSelection(1); }
+    if (event.key === 'ArrowUp') { event.preventDefault(); moveSearchSelection(-1); }
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      const query = input.value.trim();
+      if (query) rememberSearch(query);
+      if (searchState.query !== input.value) runSearch();
+      else openSearchResult(Math.max(0, searchState.selected));
+    }
+    if (event.key === 'Escape') { event.preventDefault(); closeSearch(); }
+  });
+  for (const id of ['searchCase', 'searchRefs']) {
+    document.getElementById(id).addEventListener('click', event => {
+      const button = event.currentTarget;
+      button.setAttribute('aria-pressed', button.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');
+      runSearch();
+      input.focus(); // the arrow keys and Enter keep working on the results
+    });
+  }
+  for (const id of ['searchMode', 'searchScope']) {
+    document.getElementById(id).addEventListener('change', () => {
+      runSearch();
+      input.focus();
+    });
+  }
+  document.querySelector('.search-sides').addEventListener('click', event => {
+    const button = event.target.closest('button[data-side]');
+    if (!button) return;
+    searchState.side = button.dataset.side;
+    document.querySelectorAll('.search-sides button').forEach(b => b.classList.toggle('active', b === button));
+    searchState.selected = visibleResults().length > 0 ? 0 : -1;
+    renderSearchSummary();
+    renderSearchResults();
+  });
+  document.getElementById('searchResults').addEventListener('click', event => {
+    const commentButton = event.target.closest('[data-comment]');
+    if (commentButton) {
+      event.stopPropagation();
+      openSearchResult(Number(commentButton.dataset.comment), { comment: true });
+      return;
+    }
+    const header = event.target.closest('.search-file');
+    if (header) {
+      const file = header.dataset.file;
+      if (searchState.collapsed.has(file)) searchState.collapsed.delete(file);
+      else searchState.collapsed.add(file);
+      renderSearchResults();
+      return;
+    }
+    const hit = event.target.closest('.search-hit');
+    if (hit) openSearchResult(Number(hit.dataset.index));
+  });
+  document.getElementById('searchMinimap').addEventListener('click', event => {
+    const mark = event.target.closest('span[data-index]');
+    if (mark) openSearchResult(Number(mark.dataset.index));
+  });
+
+  // Ctrl/Cmd+Shift+F from anywhere; Ctrl/Cmd+G and Shift+Ctrl/Cmd+G step
+  // through the results while the search is open, as in an IDE.
+  document.addEventListener('keydown', event => {
+    const mod = event.metaKey || event.ctrlKey;
+    if (mod && event.shiftKey && event.key.toLowerCase() === 'f') {
+      event.preventDefault();
+      const selection = window.getSelection?.().toString().trim();
+      openSearch(selection && !selection.includes('\n') && selection.length <= 200 ? selection : null);
+    } else if (mod && event.key.toLowerCase() === 'g' && searchState.open && visibleResults().length > 0) {
+      event.preventDefault();
+      moveSearchSelection(event.shiftKey ? -1 : 1);
+      openSearchResult(searchState.selected);
+    }
+  });
+}
+
 // Allow Enter key to load repo
 /**
  * Tell the server this tab exists, by holding a connection open for as long
@@ -3137,6 +3515,7 @@ function stopWatchingFromThisTab() {
 
 document.addEventListener('DOMContentLoaded', () => {
   watchFromThisTab();
+  initSearch();
 
   // A tab you were only reading catches up on other tabs' comments when it
   // comes back into view. See refreshCommentsFromElsewhere.

package/public/index.html

@@ -25,6 +25,13 @@
           <span id="agentButtonLabel">Ask Claude Code</span>
         </button>
 
+        <button id="searchButton" class="icon-button hidden" onclick="openSearch()"
+                title="Search the change (Ctrl+Shift+F)" aria-label="Search the change">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <path d="M10.68 11.74a6 6 0 01-7.92-8.98 6 6 0 018.98 7.92l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04zM11.5 7a4.5 4.5 0 10-9 0 4.5 4.5 0 009 0z"></path>
+          </svg>
+        </button>
+
         <button id="helpButton" class="icon-button" onclick="openHelp()"
                 title="How to review" aria-label="How to review">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
@@ -236,6 +243,45 @@
     </div>
 
     <aside id="sidebar" class="sidebar hidden">
+      <!-- Find across the whole change, the way an IDE's find navigator
+           searches a project: it takes the sidebar's place while open. -->
+      <section id="searchPanel" class="search-panel hidden" aria-label="Search the change">
+        <div class="search-head">
+          <h2>Search</h2>
+          <button class="search-back" type="button" onclick="closeSearch()" title="Back to the files (Esc)">Files</button>
+        </div>
+        <div class="search-box">
+          <input id="searchInput" type="search" list="searchHistory" placeholder="Find in the change"
+                 spellcheck="false" autocomplete="off" aria-label="Find in the change">
+          <datalist id="searchHistory"></datalist>
+          <button id="searchCase" class="search-toggle" type="button" aria-pressed="false" title="Match case">Aa</button>
+          <button id="searchRefs" class="search-toggle" type="button" aria-pressed="false"
+                  title="Find references: the definition, and uses added, removed and left unchanged">Refs</button>
+        </div>
+        <div class="search-options">
+          <select id="searchMode" aria-label="How to match">
+            <option value="contains">Contains</option>
+            <option value="word">Whole word</option>
+            <option value="prefix">Starts with</option>
+            <option value="suffix">Ends with</option>
+            <option value="regex">Regular expression</option>
+          </select>
+          <select id="searchScope" aria-label="Where to search">
+            <option value="changes">Changed lines</option>
+            <option value="files" selected>Changed files</option>
+            <option value="repo">Whole repository</option>
+          </select>
+        </div>
+        <div class="search-sides" role="group" aria-label="Show results">
+          <button type="button" data-side="all" class="active">All</button>
+          <button type="button" data-side="added">Added</button>
+          <button type="button" data-side="deleted">Deleted</button>
+          <button type="button" data-side="unchanged">Unchanged</button>
+        </div>
+        <div id="searchSummary" class="search-summary" role="status" aria-live="polite"></div>
+        <div id="searchResults" class="search-results" role="listbox" aria-label="Search results"></div>
+      </section>
+
       <!-- The commits a review is made of, when it is made of commits. Click
            one to review it on its own; shift-click a second to review the run
            between them -- the same gesture a pull request's commit picker
@@ -270,6 +316,7 @@
         </button>
       </div>
       <div id="codeViewer" class="code-viewer"></div>
+      <div id="searchMinimap" class="search-minimap hidden" aria-hidden="true"></div>
     </main>
 
     <div id="commentsResizeHandle" class="resize-handle hidden"></div>

package/public/style.css

@@ -2493,3 +2493,115 @@ button:disabled {
   .agent-session-actions { flex-direction: row; }
   .agent-button { padding: 7px 9px; }
 }
+
+/* Search across the change
+ *
+ * Results are code, so they are set in the diff's monospace, and each one
+ * says which side of the change it is on with the diff's own colours.
+ */
+.code-section { position: relative; }
+.sidebar.searching > :not(#searchPanel):not(.resize-handle) { display: none !important; }
+.search-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 14px;
+  min-height: 0;
+  flex: 1;
+}
+.search-head { display: flex; align-items: center; justify-content: space-between; }
+.search-head h2 { font-size: 14px; font-weight: 600; color: #24292e; }
+.search-panel .search-back {
+  padding: 3px 9px; border: 1px solid #d1d5da; border-radius: 6px;
+  background: white; color: #24292e; font: inherit; font-size: 12px; cursor: pointer;
+}
+.search-panel .search-back:hover { background: #f3f4f6; }
+.search-box { display: flex; gap: 6px; }
+.search-box input {
+  flex: 1; min-width: 0; padding: 7px 9px;
+  border: 1px solid #d1d5da; border-radius: 6px; font-size: 13px;
+  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+}
+.search-box input:focus { outline: 2px solid #0366d6; outline-offset: -1px; }
+.search-panel .search-toggle {
+  padding: 0 8px; border: 1px solid #d1d5da; border-radius: 6px;
+  background: white; color: #57606a; cursor: pointer;
+  font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1;
+}
+.search-panel .search-toggle:hover { background: #f3f4f6; }
+.search-panel .search-toggle[aria-pressed="true"] { background: #0366d6; border-color: #0366d6; color: white; }
+.search-options { display: flex; gap: 6px; }
+.search-options select {
+  flex: 1; min-width: 0; padding: 5px 6px; font-size: 12px;
+  border: 1px solid #d1d5da; border-radius: 6px; background: white;
+}
+.search-sides { display: flex; gap: 4px; flex-wrap: wrap; }
+.search-panel .search-sides button {
+  padding: 3px 9px; border: 1px solid #d1d5da; border-radius: 999px;
+  background: white; color: #57606a; font-size: 11.5px; font-weight: 500; cursor: pointer;
+}
+.search-panel .search-sides button:hover { background: #f3f4f6; }
+.search-panel .search-sides button.active { background: #24292e; border-color: #24292e; color: white; }
+.search-summary { font-size: 12px; color: #57606a; line-height: 1.45; }
+.search-summary .search-warning { display: block; margin-top: 4px; color: #9a6700; }
+.search-summary .search-error { color: #cf222e; }
+.search-results { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -14px; }
+.search-panel .search-file {
+  display: flex; align-items: center; gap: 6px; width: 100%;
+  padding: 6px 14px; border: none; border-radius: 0; background: #f6f8fa; cursor: pointer;
+  font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; color: #24292e; text-align: left;
+  white-space: normal; position: sticky; top: 0; transform: none;
+}
+.search-panel .search-file:hover { background: #eef1f4; }
+.search-file .count {
+  margin-left: auto; padding: 1px 7px; border-radius: 999px;
+  background: #e1e4e8; color: #57606a; font-weight: 500; font-size: 11px;
+}
+.search-file .elsewhere { font-weight: 400; color: #8b949e; }
+.search-file[aria-expanded="false"] + .search-group { display: none; }
+.search-hit {
+  position: relative;
+  display: grid; grid-template-columns: 14px 34px minmax(0, 1fr); gap: 6px; align-items: baseline;
+  padding: 3px 14px; cursor: pointer;
+  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 11.5px;
+}
+.search-hit:hover { background: #f3f6fa; }
+.search-hit.selected { background: #ddf4ff; }
+.search-hit .side { text-align: center; font-weight: 700; }
+.search-hit[data-side="added"] .side { color: #1a7f37; }
+.search-hit[data-side="deleted"] .side { color: #cf222e; }
+.search-hit[data-side="context"] .side { color: #8b949e; }
+.search-hit[data-side="untouched"] .side { color: #0969da; }
+.search-hit .num { color: #8b949e; text-align: right; font-variant-numeric: tabular-nums; }
+.search-hit .text { white-space: pre; overflow: hidden; text-overflow: ellipsis; color: #24292e; }
+.search-hit[data-side="deleted"] .text { color: #82071e; }
+.search-hit mark { background: #fff8c5; color: inherit; border-radius: 2px; box-shadow: 0 0 0 1px #d4a72c; }
+.search-hit .role {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 10.5px; color: #8250df; font-weight: 600;
+}
+.search-panel .hit-comment {
+  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
+  visibility: hidden; padding: 1px 6px; border: 1px solid #d1d5da; border-radius: 4px;
+  background: white; color: #24292e; font: 11px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; cursor: pointer;
+}
+.search-panel .hit-comment:hover { background: #f3f4f6; }
+.search-hit:hover .hit-comment, .search-hit.selected .hit-comment { visibility: visible; }
+.search-preview {
+  margin: 2px 14px 6px 34px; padding: 6px 8px; border-left: 2px solid #0969da;
+  background: #f6f8fa; font: 11px/1.5 SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  white-space: pre; overflow-x: auto; color: #24292e;
+}
+.search-preview .focus { background: #fff8c5; display: inline-block; min-width: 100%; }
+.line.search-flash { animation: search-flash 1.6s ease-out; }
+@keyframes search-flash { 0%, 30% { box-shadow: inset 4px 0 0 #0969da; background: #ddf4ff; } }
+@media (prefers-reduced-motion: reduce) { .line.search-flash { animation: none; box-shadow: inset 4px 0 0 #0969da; } }
+.search-minimap {
+  position: absolute; top: 58px; right: 2px; bottom: 6px; width: 8px; pointer-events: none;
+}
+.search-minimap span {
+  position: absolute; right: 0; width: 8px; height: 3px; border-radius: 1px;
+  background: #d4a72c; pointer-events: auto; cursor: pointer;
+}
+.search-minimap span[data-side="added"] { background: #2da44e; }
+.search-minimap span[data-side="deleted"] { background: #cf222e; }

package/server.js

@@ -30,6 +30,9 @@ const { listClaudeSessions, findClaudeSession } = require('./lib/claude-sessions
 const { BackgroundSession } = require('./lib/claude-background');
 const { Answerer } = require('./lib/answerer');
 const { resolveClaudeCommand } = require('./lib/claude-command');
+const {
+  buildMatcher, searchDiffs, grepRepository, definesName, summarizeReferences, SearchError, SCOPES, MAX_RESULTS
+} = require('./lib/search');
 
 const DEFAULT_PORT = 4500;
 const DEFAULT_HOST = '127.0.0.1';
@@ -988,6 +991,11 @@ function createApp(options = {}) {
       sessions.get(repoId).foldedDirectories = new Map(
         files.filter(file => file.directory).map(file => [file.path, file.fileCount])
       );
+      // What a search of the review looks through: the files it shows, less
+      // folded directories and binaries, which have no lines to match.
+      sessions.get(repoId).files = files
+        .filter(file => !file.directory && file.status !== 'B')
+        .map(file => file.path);
       // stderr, not stdout. `reviewer | claude -p ...` puts the finished
       // review on stdout, and anything else written there lands in the middle
       // of it. Progress is for the person watching; stdout is for the pipe.
@@ -1429,6 +1437,122 @@ function createApp(options = {}) {
     res.json({ disconnected: Boolean(answerer) });
   });
 
+  // A review's diffs are built once and searched as the reviewer types; this
+  // long is long enough for a burst of typing and short enough to notice an
+  // edit made since.
+  const SEARCH_CACHE_MS = 15000;
+
+  /**
+   * Every changed file's diff, as the page draws it, for searching.
+   *
+   * @param {object} session
+   * @returns {Promise<Array<{path: string, lines: object[]}>>}
+   */
+  async function diffsForSearch(session) {
+    const cached = session.searchCache;
+    if (cached && Date.now() - cached.at < SEARCH_CACHE_MS) return cached.files;
+
+    const git = gitFactory(session.repoPath);
+    const paths = session.files ?? [];
+    const files = [];
+    // A few at a time: a review of two hundred files should not start two
+    // hundred git processes at once.
+    for (let i = 0; i < paths.length; i += 8) {
+      const batch = await Promise.all(paths.slice(i, i + 8).map(async filePath => {
+        try {
+          const diffText = await diffForFile(git, session, filePath);
+          if (isBinaryDiff(diffText)) return null;
+          const content = await readFileForMode(session, filePath);
+          return { path: filePath, lines: parseDiff(diffText, content) };
+        } catch {
+          return null; // gone since the review was opened
+        }
+      }));
+      files.push(...batch.filter(Boolean));
+    }
+
+    session.searchCache = { at: Date.now(), files };
+    return files;
+  }
+
+  /**
+   * Search the review: every changed file at once, and with `scope=repo` the
+   * rest of the repository at the tree under review.
+   *
+   * `q` is the text; `mode` is contains, word, prefix, suffix or regex;
+   * `case=1` matches case; `scope` is changes (lines the change added or
+   * deleted), files (every line of the changed files) or repo. `symbol=1`
+   * is a references search: whole word, case-sensitive, and each result is
+   * marked as a definition or a use. Results say which side of the change
+   * they are on, and `diffIndex` is the line's position in the diff the
+   * page draws for that file.
+   */
+  app.get('/api/search/:repoId', async (req, res) => {
+    const session = requireSession(res, req.params.repoId);
+    if (!session) return;
+
+    const pick = name => (typeof req.query[name] === 'string' ? req.query[name] : '');
+    const query = pick('q');
+    const symbol = pick('symbol') === '1';
+    const scope = pick('scope') || 'files';
+    const match = { mode: symbol ? 'word' : (pick('mode') || 'contains'), caseSensitive: symbol || pick('case') === '1' };
+    if (!SCOPES.includes(scope)) {
+      return res.status(400).json({ error: `Unknown scope "${scope}".` });
+    }
+
+    let matcher;
+    try {
+      matcher = buildMatcher(query, match);
+    } catch (error) {
+      if (error instanceof SearchError) return res.status(400).json({ error: error.message });
+      throw error;
+    }
+
+    try {
+      const started = Date.now();
+      const files = await diffsForSearch(session);
+      const found = searchDiffs(files, matcher, { changedOnly: scope === 'changes' });
+      let { results, truncated } = found;
+
+      if (scope === 'repo' && results.length < MAX_RESULTS) {
+        const elsewhere = await grepRepository({
+          repoPath: session.repoPath,
+          session,
+          query,
+          match,
+          matcher,
+          exclude: new Set(files.map(file => file.path)),
+          limit: MAX_RESULTS - results.length
+        });
+        results = results.concat(elsewhere.results);
+        truncated = truncated || elsewhere.truncated;
+      }
+
+      let summary = null;
+      if (symbol) {
+        for (const result of results) result.role = definesName(result.text, query) ? 'definition' : 'reference';
+        summary = summarizeReferences(results);
+      }
+
+      res.json({
+        query,
+        scope,
+        mode: match.mode,
+        caseSensitive: match.caseSensitive,
+        symbol,
+        results,
+        truncated,
+        files: new Set(results.map(result => result.file)).size,
+        searched: files.length,
+        ms: Date.now() - started,
+        summary
+      });
+    } catch (error) {
+      console.error('Search error:', error);
+      res.status(500).json({ error: error.message });
+    }
+  });
+
   /** Drop a session. Saved comments on disk are left alone. */
   app.delete('/api/cleanup/:repoId', (req, res) => {
     sessions.delete(req.params.repoId);