diff --git a/packages/diffs/src/components/CodeView.ts b/packages/diffs/src/components/CodeView.ts
index db35c8083..3cae47435 100644
--- a/packages/diffs/src/components/CodeView.ts
+++ b/packages/diffs/src/components/CodeView.ts
@@ -10,11 +10,20 @@ import {
   THEME_CSS_ATTRIBUTE,
   UNSAFE_CSS_ATTRIBUTE,
 } from '../constants';
+import { resolveFindAgainShortcut } from '../editor/command';
+import { isPrimaryModifier } from '../editor/platform';
+import { SearchPanelWidget } from '../editor/searchPanel';
 import type { SelectionWriteOptions } from '../managers/InteractionManager';
 import {
   dequeueRender,
   queueRender,
 } from '../managers/UniversalRenderingManager';
+import {
+  type LineByLineSearchDocument,
+  MAX_FIND_MATCHES,
+  searchLineByLine,
+  type SearchParams,
+} from '../search';
 import type {
   CodeViewCreateEditorOptions,
   CodeViewDiffItem,
@@ -28,11 +37,13 @@ import type {
   CodeViewScrollBehavior,
   CodeViewScrollTarget,
   DiffLineAnnotation,
+  DiffSearchLineDecoration,
   DiffsEditor,
   FileContents,
   HunkSeparators,
   LineAnnotation,
   PendingCodeViewLayoutReset,
+  SearchLineDecoration,
   SelectedLineRange,
   SelectionSide,
   SmoothScrollSettings,
@@ -44,10 +55,13 @@ import { areObjectsEqual } from '../utils/areObjectsEqual';
 import { areOptionsEqual } from '../utils/areOptionsEqual';
 import { areSelectionsEqual } from '../utils/areSelectionsEqual';
 import { areThemesEqual } from '../utils/areThemesEqual';
+import { linesFromFileContents } from '../utils/computeFileOffsets';
 import { createCodeViewHeaderFooterHostElement } from '../utils/createCodeViewHeaderFooterHostElement';
 import { createWindowFromScrollPosition } from '../utils/createWindowFromScrollPosition';
 import { finishEditSessionForDiff } from '../utils/editSessionHunks';
 import { isStyleNode } from '../utils/isStyleNode';
+import type { DiffLineMetadata } from '../utils/iterateOverDiff';
+import { iterateOverDiff } from '../utils/iterateOverDiff';
 import { prefersReducedMotion } from '../utils/prefersReducedMotion';
 import { roundToDevicePixel } from '../utils/roundToDevicePixel';
 import type { WorkerPoolManager } from '../worker';
@@ -108,6 +122,33 @@ interface PagedScrollPosition {
   scrollPageOffset: number;
 }
 
+interface CodeViewSearchLineMetadata {
+  itemId: string;
+  itemIndex: number;
+  itemType: CodeViewItem['type'];
+  side: SelectionSide | undefined;
+  lineNumber: number;
+  lineIndex: number;
+  renderedLineIndex: number;
+}
+
+interface CodeViewSearchLine {
+  text: string;
+  metadata: CodeViewSearchLineMetadata;
+}
+
+interface CodeViewSearchMatch extends CodeViewSearchLineMetadata {
+  startCharacter: number;
+  endCharacter: number;
+}
+
+interface CodeViewSearchState {
+  params: SearchParams | undefined;
+  matches: CodeViewSearchMatch[];
+  matchesByItem: Map<string, CodeViewSearchMatch[]>;
+  current: CodeViewSearchMatch | undefined;
+}
+
 interface AdvancedVirtualizedBaseItem {
   /** Current index of this record in the ordered items array. */
   index: number;
@@ -122,6 +163,8 @@ interface AdvancedVirtualizedBaseItem {
   version: number | undefined;
   /** Last CodeView option revision this item rendered with. */
   renderedOptionsRevision: number;
+  /** Last CodeView search-highlight revision this item rendered with. */
+  renderedSearchRevision: number;
 }
 
 interface CodeViewDiffItemContext<
@@ -739,6 +782,15 @@ export class CodeView<LAnnotation = undefined> {
 
   private root: HTMLElement | undefined;
   private resizeObserver: ResizeObserver | undefined;
+  private searchPanel: SearchPanelWidget<CodeViewSearchMatch> | undefined;
+  private searchState: CodeViewSearchState = {
+    params: undefined,
+    matches: [],
+    matchesByItem: new Map(),
+    current: undefined,
+  };
+  private searchMatchesDirty = false;
+  private searchRenderRevision = 0;
 
   private container: HTMLDivElement | undefined = document.createElement('div');
   private stickyContainer = document.createElement('div');
@@ -1123,6 +1175,7 @@ export class CodeView<LAnnotation = undefined> {
     this.root.addEventListener('pointerdown', this.clearPendingScroll, {
       passive: true,
     });
+    this.root.addEventListener('keydown', this.handleSearchKeyDown);
     this.root.addEventListener('keydown', this.clearPendingScroll, {
       passive: true,
     });
@@ -1160,6 +1213,7 @@ export class CodeView<LAnnotation = undefined> {
   public reset(): void {
     dequeueRender(this.computeRenderRangeAndEmit);
     this.clearReadySubscription();
+    this.closeSearchPanel();
     this.restoreScrollInteractions();
     this.cleanAllRenderedItems();
     // Rendered-item cleanup above already detached mounted editors; cleaning
@@ -1198,7 +1252,9 @@ export class CodeView<LAnnotation = undefined> {
   }
 
   public cleanUp(): void {
+    dequeueRender(this.computeRenderRangeAndEmit);
     this.reset();
+    dequeueRender(this.computeRenderRangeAndEmit);
     this.clearElementPool();
     this.restoreScrollInteractions();
     this.workerManager?.unsubscribeToThemeChanges(this);
@@ -1208,6 +1264,7 @@ export class CodeView<LAnnotation = undefined> {
     this.root?.removeEventListener('wheel', this.clearPendingScroll);
     this.root?.removeEventListener('touchstart', this.clearPendingScroll);
     this.root?.removeEventListener('pointerdown', this.clearPendingScroll);
+    this.root?.removeEventListener('keydown', this.handleSearchKeyDown);
     this.root?.removeEventListener('keydown', this.clearPendingScroll);
     this.root?.style.removeProperty('overflow-anchor');
     this.container?.remove();
@@ -1226,6 +1283,338 @@ export class CodeView<LAnnotation = undefined> {
     this.container = undefined;
   }
 
+  private openSearchPanel(): void {
+    const container = this.container;
+    if (container === undefined) {
+      return;
+    }
+
+    if (this.searchPanel !== undefined) {
+      this.searchPanel.setMode('find');
+      this.searchPanel.focus();
+      return;
+    }
+
+    this.searchPanel = new SearchPanelWidget<CodeViewSearchMatch>({
+      containerElement: container,
+      defaultQuery: '',
+      mode: 'find',
+      search: (searchParams) => {
+        const matches = this.searchCodeView(searchParams);
+        this.searchState.params = searchParams;
+        return matches;
+      },
+      isSameMatch: areCodeViewSearchMatchesEqual,
+      scrollToMatch: (match) => {
+        this.scrollToSearchMatch(match);
+      },
+      onUpdate: (matches, options) => {
+        const current = this.searchState.current;
+        if (current !== undefined) {
+          const nextCurrent = matches.find((match) =>
+            areCodeViewSearchMatchesEqual(match, current)
+          );
+          if (nextCurrent !== undefined) {
+            this.setSearchResults(matches, nextCurrent);
+            return nextCurrent;
+          }
+        }
+        if (matches.length === 0 || options?.syncSelection === false) {
+          this.setSearchResults(matches, undefined);
+          return undefined;
+        }
+
+        const nextCurrent = matches[0];
+        this.setSearchResults(matches, nextCurrent);
+        this.scrollToSearchMatch(nextCurrent);
+        return nextCurrent;
+      },
+      onClose: () => {
+        this.searchPanel = undefined;
+        this.resetSearchState();
+      },
+    });
+    this.applySearchPanelOverlayStyles();
+    this.searchPanel.focus();
+  }
+
+  private closeSearchPanel(): void {
+    this.searchPanel?.cleanup();
+    this.searchPanel = undefined;
+    this.resetSearchState();
+  }
+
+  private resetSearchState(): void {
+    const hadSearchDecorations =
+      this.searchState.matches.length > 0 ||
+      this.searchState.current !== undefined;
+    this.searchState.params = undefined;
+    this.searchState.matches = [];
+    this.searchState.matchesByItem = new Map();
+    this.searchState.current = undefined;
+    this.searchMatchesDirty = false;
+    if (hadSearchDecorations) {
+      this.invalidateSearchDecorations();
+    }
+  }
+
+  private scrollToSearchMatch(match: CodeViewSearchMatch): void {
+    this.setCurrentSearchMatch(match);
+    this.scrollTo({
+      type: 'line',
+      id: match.itemId,
+      lineNumber: match.lineNumber,
+      side: match.side,
+      align: 'center',
+      behavior: 'smooth-auto',
+    });
+  }
+
+  private markSearchMatchesDirty(): void {
+    if (
+      this.searchPanel === undefined ||
+      this.searchState.params === undefined
+    ) {
+      return;
+    }
+
+    this.searchMatchesDirty = true;
+    this.render();
+  }
+
+  private flushSearchMatches(): void {
+    if (!this.searchMatchesDirty) {
+      return;
+    }
+
+    this.searchMatchesDirty = false;
+    if (
+      this.searchPanel === undefined ||
+      this.searchState.params === undefined
+    ) {
+      return;
+    }
+
+    this.searchPanel.updateMatches({ syncSelection: false });
+  }
+
+  private setSearchResults(
+    matches: CodeViewSearchMatch[],
+    current: CodeViewSearchMatch | undefined
+  ): void {
+    const matchesChanged = !areCodeViewSearchMatchArraysEqual(
+      this.searchState.matches,
+      matches
+    );
+    const currentChanged = !areOptionalCodeViewSearchMatchesEqual(
+      this.searchState.current,
+      current
+    );
+
+    if (matchesChanged) {
+      this.searchState.matches = matches;
+      this.searchState.matchesByItem =
+        groupCodeViewSearchMatchesByItem(matches);
+    }
+    this.searchState.current = current;
+
+    if (matchesChanged || currentChanged) {
+      this.invalidateSearchDecorations();
+    }
+  }
+
+  private setCurrentSearchMatch(match: CodeViewSearchMatch): void {
+    if (
+      areOptionalCodeViewSearchMatchesEqual(this.searchState.current, match)
+    ) {
+      return;
+    }
+
+    this.searchState.current = match;
+    this.invalidateSearchDecorations();
+  }
+
+  private invalidateSearchDecorations(): void {
+    this.searchRenderRevision++;
+    this.render();
+  }
+
+  private getSearchDecorationsForItem(
+    item: CodeViewContextItem<LAnnotation>
+  ):
+    | readonly SearchLineDecoration[]
+    | readonly DiffSearchLineDecoration[]
+    | undefined {
+    const matches = this.searchState.matchesByItem.get(item.item.id);
+    if (matches == null || matches.length === 0) {
+      return undefined;
+    }
+
+    const current = this.searchState.current;
+    if (item.type === 'file') {
+      return matches.map(
+        (match): SearchLineDecoration => ({
+          lineIndex: match.lineIndex,
+          startCharacter: match.startCharacter,
+          endCharacter: match.endCharacter,
+          current:
+            current !== undefined &&
+            areCodeViewSearchMatchesEqual(match, current),
+        })
+      );
+    }
+
+    return matches.flatMap((match): DiffSearchLineDecoration[] => {
+      if (match.side === undefined) {
+        return [];
+      }
+      return [
+        {
+          side: match.side,
+          lineIndex: match.lineIndex,
+          startCharacter: match.startCharacter,
+          endCharacter: match.endCharacter,
+          current:
+            current !== undefined &&
+            areCodeViewSearchMatchesEqual(match, current),
+        },
+      ];
+    });
+  }
+
+  private searchCodeView(searchParams: SearchParams): CodeViewSearchMatch[] {
+    const matches: CodeViewSearchMatch[] = [];
+    for (const item of this.items) {
+      const remaining = MAX_FIND_MATCHES - matches.length;
+      if (remaining <= 0) {
+        break;
+      }
+
+      const nextMatches =
+        item.type === 'file'
+          ? this.searchFileItem(item, searchParams, remaining)
+          : this.searchDiffItem(item, searchParams, remaining);
+      matches.push(...nextMatches);
+    }
+    return matches;
+  }
+
+  private searchFileItem(
+    item: CodeViewFileItemContext<LAnnotation>,
+    searchParams: SearchParams,
+    limit: number
+  ): CodeViewSearchMatch[] {
+    if (item.item.collapsed === true) {
+      return [];
+    }
+
+    const lines = linesFromFileContents(item.item.file.contents).map(
+      (text, lineIndex): CodeViewSearchLine => ({
+        text,
+        metadata: {
+          itemId: item.item.id,
+          itemIndex: item.index,
+          itemType: 'file',
+          side: undefined,
+          lineNumber: lineIndex + 1,
+          lineIndex,
+          renderedLineIndex: lineIndex,
+        },
+      })
+    );
+
+    return collectCodeViewLineMatches(lines, searchParams, limit);
+  }
+
+  private searchDiffItem(
+    item: CodeViewDiffItemContext<LAnnotation>,
+    searchParams: SearchParams,
+    limit: number
+  ): CodeViewSearchMatch[] {
+    if (item.item.collapsed === true) {
+      return [];
+    }
+
+    const fileDiff = item.item.fileDiff;
+    const diffStyle = this.options.diffStyle ?? 'split';
+    const expandedHunks =
+      this.options.expandUnchanged === true
+        ? true
+        : item.instance.getExpandedHunksForSearch();
+    const lines: CodeViewSearchLine[] = [];
+
+    const addLine = (
+      side: SelectionSide,
+      line: DiffLineMetadata | undefined
+    ): void => {
+      if (line === undefined) {
+        return;
+      }
+
+      const sourceLines =
+        side === 'additions' ? fileDiff.additionLines : fileDiff.deletionLines;
+      const text = sourceLines[line.lineIndex];
+      if (text === undefined) {
+        return;
+      }
+
+      lines.push({
+        text,
+        metadata: {
+          itemId: item.item.id,
+          itemIndex: item.index,
+          itemType: 'diff',
+          side,
+          lineNumber: line.lineNumber,
+          lineIndex: line.lineIndex,
+          renderedLineIndex:
+            diffStyle === 'unified'
+              ? line.unifiedLineIndex
+              : line.splitLineIndex,
+        },
+      });
+    };
+
+    iterateOverDiff({
+      diff: fileDiff,
+      diffStyle,
+      expandedHunks,
+      collapsedContextThreshold:
+        this.options.collapsedContextThreshold ??
+        DEFAULT_COLLAPSED_CONTEXT_THRESHOLD,
+      callback: ({ additionLine, deletionLine }) => {
+        if (diffStyle === 'unified') {
+          if (
+            additionLine !== undefined &&
+            fileDiff.additionLines[additionLine.lineIndex] !== undefined
+          ) {
+            addLine('additions', additionLine);
+          } else {
+            addLine('deletions', deletionLine);
+          }
+          return;
+        }
+
+        addLine('deletions', deletionLine);
+        addLine('additions', additionLine);
+      },
+    });
+
+    return collectCodeViewLineMatches(lines, searchParams, limit);
+  }
+
+  private applySearchPanelOverlayStyles(): void {
+    const panelElement = this.container?.previousElementSibling;
+    if (
+      !(panelElement instanceof HTMLElement) ||
+      panelElement.dataset.searchPanel === undefined
+    ) {
+      return;
+    }
+
+    panelElement.dataset.searchPanelOverlay = '';
+  }
+
   private cleanAllRenderedItems() {
     if (this.renderState.firstIndex === -1) {
       return;
@@ -1504,6 +1893,7 @@ export class CodeView<LAnnotation = undefined> {
     this.render();
     this.syncItemEditors();
     this.syncSelection();
+    this.markSearchMatchesDirty();
     return true;
   }
 
@@ -1543,6 +1933,7 @@ export class CodeView<LAnnotation = undefined> {
     }
     this.renamePendingScrollTarget(oldId, newId);
     this.renamePendingLayoutAnchor(oldId, newId);
+    this.markSearchMatchesDirty();
     this.render();
     return true;
   }
@@ -1555,6 +1946,7 @@ export class CodeView<LAnnotation = undefined> {
     this.appendItemsInternal(inputs);
     this.syncItemEditors();
     this.syncSelection();
+    this.markSearchMatchesDirty();
   }
 
   public removeItem(itemId: string): boolean {
@@ -1583,6 +1975,7 @@ export class CodeView<LAnnotation = undefined> {
     }
     this.syncItemEditors(removedItemsById);
     this.syncSelection();
+    this.markSearchMatchesDirty();
   }
 
   /**
@@ -1707,6 +2100,9 @@ export class CodeView<LAnnotation = undefined> {
     ) {
       this.render();
     }
+    if (hasSearchIndexOptionChanged(prevOptions, options)) {
+      this.markSearchMatchesDirty();
+    }
   }
 
   public capturePendingLayoutAnchor(
@@ -1796,6 +2192,7 @@ export class CodeView<LAnnotation = undefined> {
     if (layoutDirty) {
       this.markItemLayoutDirty(item);
     }
+    this.markSearchMatchesDirty();
     this.render();
   }
 
@@ -1941,6 +2338,7 @@ export class CodeView<LAnnotation = undefined> {
         height: 0,
         element: undefined,
         renderedOptionsRevision: this.renderOptionsRevision,
+        renderedSearchRevision: this.searchRenderRevision,
         instance,
       } satisfies CodeViewDiffItemContext<LAnnotation>;
     }
@@ -1961,6 +2359,7 @@ export class CodeView<LAnnotation = undefined> {
       height: 0,
       element: undefined,
       renderedOptionsRevision: this.renderOptionsRevision,
+      renderedSearchRevision: this.searchRenderRevision,
       instance,
     } satisfies CodeViewFileItemContext<LAnnotation>;
   }
@@ -3147,6 +3546,8 @@ export class CodeView<LAnnotation = undefined> {
       this.syncContainerHeight();
     }
 
+    this.flushSearchMatches();
+
     // Resolve the logical scrollTop this render frame should target. The paged
     // root scrollTop is derived later only if the scaffold needs to move.
     const targetScrollTop = this.computeTargetScrollTopForFrame(
@@ -3243,8 +3644,16 @@ export class CodeView<LAnnotation = undefined> {
         item.element = this.acquireElement();
         syncRenderedItemOrder(this.stickyContainer, item.element, prevElement);
         instance.virtualizedSetup();
-        if (renderItem(item, item.element)) {
+        if (
+          renderItem(
+            item,
+            item.element,
+            false,
+            this.getSearchDecorationsForItem(item)
+          )
+        ) {
           item.renderedOptionsRevision = this.renderOptionsRevision;
+          item.renderedSearchRevision = this.searchRenderRevision;
           updatedItems.add(item);
         }
         prevElement = item.element;
@@ -3253,9 +3662,18 @@ export class CodeView<LAnnotation = undefined> {
       else {
         syncRenderedItemOrder(this.stickyContainer, item.element, prevElement);
         const forceRender =
-          item.renderedOptionsRevision !== this.renderOptionsRevision;
-        if (renderItem(item, undefined, forceRender)) {
+          item.renderedOptionsRevision !== this.renderOptionsRevision ||
+          item.renderedSearchRevision !== this.searchRenderRevision;
+        if (
+          renderItem(
+            item,
+            undefined,
+            forceRender,
+            this.getSearchDecorationsForItem(item)
+          )
+        ) {
           item.renderedOptionsRevision = this.renderOptionsRevision;
+          item.renderedSearchRevision = this.searchRenderRevision;
           updatedItems.add(item);
         }
         prevElement = item.element;
@@ -3537,15 +3955,48 @@ export class CodeView<LAnnotation = undefined> {
     this.render();
   };
 
-  // Abort any in-flight programmatic scroll when the user takes over.
-  // Attached to root as a passive listener for wheel / touchstart /
-  // pointerdown / keydown; we never mutate the event, just drop our state.
-  private clearPendingScroll = (): void => {
+  // Abort any in-flight programmatic scroll when the user takes over. Handled
+  // shortcuts may start their own programmatic scroll, so leave those intact.
+  private clearPendingScroll = (event?: Event): void => {
+    if (event?.defaultPrevented === true) {
+      return;
+    }
     this.pendingScrollTarget = undefined;
     this.pendingLayoutAnchor = undefined;
     this.scrollAnimation = undefined;
   };
 
+  private handleSearchKeyDown = (event: KeyboardEvent): void => {
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    if (event.key === 'Escape' && this.searchPanel !== undefined) {
+      event.preventDefault();
+      this.closeSearchPanel();
+      return;
+    }
+
+    if (this.searchPanel !== undefined) {
+      const findAgain = resolveFindAgainShortcut(event);
+      if (findAgain !== undefined) {
+        event.preventDefault();
+        this.searchPanel.navigate(findAgain === 'previous');
+        return;
+      }
+    }
+
+    if (
+      isPrimaryModifier(event) &&
+      (event.key === 'f' || event.code === 'KeyF')
+    ) {
+      // Prevent the browser find UI and open CodeView's find-only panel.
+      event.preventDefault();
+      this.openSearchPanel();
+      this.searchPanel?.setMode(event.altKey ? 'replace' : 'find');
+    }
+  };
+
   private handleResize = (entries: ResizeObserverEntry[]) => {
     let shouldRender = false;
     for (const entry of entries) {
@@ -4070,6 +4521,178 @@ export class CodeView<LAnnotation = undefined> {
   }
 }
 
+class CodeViewLineSearchDocument implements LineByLineSearchDocument {
+  readonly lines: CodeViewSearchLine[];
+  readonly lineStarts: number[] = [];
+  readonly textLength: number;
+
+  constructor(lines: readonly CodeViewSearchLine[]) {
+    this.lines = lines.map(({ text, metadata }) => ({
+      text: trimLineEnding(text),
+      metadata,
+    }));
+
+    let offset = 0;
+    for (const line of this.lines) {
+      this.lineStarts.push(offset);
+      offset += line.text.length + 1;
+    }
+
+    this.textLength = this.lines.length === 0 ? 0 : offset - 1;
+  }
+
+  get lineCount(): number {
+    return this.lines.length;
+  }
+
+  getLineText(line: number): string {
+    return this.lines[line]?.text ?? '';
+  }
+
+  getLineStartOffset(line: number): number {
+    return this.lineStarts[line] ?? this.textLength;
+  }
+
+  getMetadata(line: number): CodeViewSearchLineMetadata {
+    const metadata = this.lines[line]?.metadata;
+    if (metadata === undefined) {
+      throw new Error('CodeViewLineSearchDocument.getMetadata: invalid line');
+    }
+    return metadata;
+  }
+
+  charAt(offset: number): string {
+    if (offset < 0 || offset >= this.textLength || this.lines.length === 0) {
+      return '';
+    }
+
+    const lineIndex = this.getLineIndexAtOffset(offset);
+    const line = this.lines[lineIndex];
+    const lineStart = this.getLineStartOffset(lineIndex);
+    if (line === undefined) {
+      return '';
+    }
+
+    const character = offset - lineStart;
+    return character < line.text.length ? line.text.charAt(character) : '\n';
+  }
+
+  getLineIndexAtOffset(offset: number): number {
+    let low = 0;
+    let high = this.lineStarts.length - 1;
+    let result = 0;
+
+    while (low <= high) {
+      const mid = (low + high) >> 1;
+      const lineStart = this.lineStarts[mid] ?? 0;
+      if (lineStart <= offset) {
+        result = mid;
+        low = mid + 1;
+      } else {
+        high = mid - 1;
+      }
+    }
+
+    return result;
+  }
+}
+
+function collectCodeViewLineMatches(
+  lines: readonly CodeViewSearchLine[],
+  searchParams: SearchParams,
+  limit: number
+): CodeViewSearchMatch[] {
+  if (lines.length === 0 || limit <= 0) {
+    return [];
+  }
+
+  const document = new CodeViewLineSearchDocument(lines);
+  const ranges = searchLineByLine(document, searchParams, limit);
+  return ranges.map(([startOffset, endOffset]) => {
+    const lineIndex = document.getLineIndexAtOffset(startOffset);
+    const lineStart = document.getLineStartOffset(lineIndex);
+    return {
+      ...document.getMetadata(lineIndex),
+      startCharacter: startOffset - lineStart,
+      endCharacter: endOffset - lineStart,
+    };
+  });
+}
+
+function trimLineEnding(text: string): string {
+  let end = text.length;
+  while (end > 0) {
+    const charCode = text.charCodeAt(end - 1);
+    if (charCode !== 10 && charCode !== 13) {
+      break;
+    }
+    end--;
+  }
+  return end === text.length ? text : text.slice(0, end);
+}
+
+function areCodeViewSearchMatchesEqual(
+  a: CodeViewSearchMatch,
+  b: CodeViewSearchMatch
+): boolean {
+  return (
+    a.itemId === b.itemId &&
+    a.itemType === b.itemType &&
+    a.side === b.side &&
+    a.lineNumber === b.lineNumber &&
+    a.lineIndex === b.lineIndex &&
+    a.renderedLineIndex === b.renderedLineIndex &&
+    a.startCharacter === b.startCharacter &&
+    a.endCharacter === b.endCharacter
+  );
+}
+
+function areOptionalCodeViewSearchMatchesEqual(
+  a: CodeViewSearchMatch | undefined,
+  b: CodeViewSearchMatch | undefined
+): boolean {
+  if (a === undefined || b === undefined) {
+    return a === b;
+  }
+  return areCodeViewSearchMatchesEqual(a, b);
+}
+
+function areCodeViewSearchMatchArraysEqual(
+  a: readonly CodeViewSearchMatch[],
+  b: readonly CodeViewSearchMatch[]
+): boolean {
+  if (a === b) {
+    return true;
+  }
+  if (a.length !== b.length) {
+    return false;
+  }
+  for (let index = 0; index < a.length; index++) {
+    const aMatch = a[index];
+    const bMatch = b[index];
+    if (
+      aMatch === undefined ||
+      bMatch === undefined ||
+      !areCodeViewSearchMatchesEqual(aMatch, bMatch)
+    ) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function groupCodeViewSearchMatchesByItem(
+  matches: readonly CodeViewSearchMatch[]
+): Map<string, CodeViewSearchMatch[]> {
+  const grouped = new Map<string, CodeViewSearchMatch[]>();
+  for (const match of matches) {
+    const itemMatches = grouped.get(match.itemId) ?? [];
+    itemMatches.push(match);
+    grouped.set(match.itemId, itemMatches);
+  }
+  return grouped;
+}
+
 function prepareItemInstance<LAnnotation>(
   item: CodeViewContextItem<LAnnotation>
 ): number {
@@ -4133,6 +4756,22 @@ function hasItemLayoutOptionChanged<LAnnotation>(
   );
 }
 
+function hasSearchIndexOptionChanged<LAnnotation>(
+  previousOptions: CodeViewOptions<LAnnotation>,
+  nextOptions: CodeViewOptions<LAnnotation>
+): boolean {
+  return (
+    (previousOptions.diffStyle ?? 'split') !==
+      (nextOptions.diffStyle ?? 'split') ||
+    (previousOptions.expandUnchanged ?? false) !==
+      (nextOptions.expandUnchanged ?? false) ||
+    (previousOptions.collapsedContextThreshold ??
+      DEFAULT_COLLAPSED_CONTEXT_THRESHOLD) !==
+      (nextOptions.collapsedContextThreshold ??
+        DEFAULT_COLLAPSED_CONTEXT_THRESHOLD)
+  );
+}
+
 function hasCodeViewDiffEstimateOptionChanged<LAnnotation>(
   previousOptions: CodeViewOptions<LAnnotation>,
   nextOptions: CodeViewOptions<LAnnotation>
@@ -4183,7 +4822,10 @@ function formatSelectedLinePoint(
 function renderItem<LAnnotation>(
   item: CodeViewContextItem<LAnnotation>,
   fileContainer?: HTMLElement,
-  forceRender = false
+  forceRender = false,
+  searchDecorations?:
+    | readonly SearchLineDecoration[]
+    | readonly DiffSearchLineDecoration[]
 ): boolean {
   if (item.type === 'diff') {
     return item.instance.render({
@@ -4192,6 +4834,9 @@ function renderItem<LAnnotation>(
       fileDiff: item.item.fileDiff,
       forceRender,
       lineAnnotations: item.item.annotations ?? [],
+      searchDecorations: searchDecorations as
+        | readonly DiffSearchLineDecoration[]
+        | undefined,
     });
   } else {
     return item.instance.render({
@@ -4200,6 +4845,9 @@ function renderItem<LAnnotation>(
       file: item.item.file,
       forceRender,
       lineAnnotations: item.item.annotations ?? [],
+      searchDecorations: searchDecorations as
+        | readonly SearchLineDecoration[]
+        | undefined,
     });
   }
 }
diff --git a/packages/diffs/src/components/File.ts b/packages/diffs/src/components/File.ts
index 99fccac34..bc8cd80d6 100644
--- a/packages/diffs/src/components/File.ts
+++ b/packages/diffs/src/components/File.ts
@@ -37,6 +37,7 @@ import type {
   PrePropertiesConfig,
   RenderFileMetadata,
   RenderRange,
+  SearchLineDecoration,
   SelectedLineRange,
   ThemeTypes,
 } from '../types';
@@ -78,6 +79,7 @@ export interface FileRenderProps<LAnnotation> {
   preventEmit?: boolean;
   lineAnnotations?: LineAnnotation<LAnnotation>[];
   renderRange?: RenderRange;
+  searchDecorations?: readonly SearchLineDecoration[];
 }
 
 export interface FileHydrateProps<LAnnotation> extends Omit<
@@ -633,6 +635,7 @@ export class File<
     deferManagers = false,
     lineAnnotations,
     renderRange,
+    searchDecorations,
   }: FileRenderProps<LAnnotation>): boolean {
     // postpone background tokenizing to next frame for avoiding UI freeze
     // during render
@@ -672,6 +675,7 @@ export class File<
       this.setLineAnnotations(lineAnnotations);
     }
     this.fileRenderer.setLineAnnotations(this.lineAnnotations);
+    this.fileRenderer.setSearchDecorations(searchDecorations);
 
     const { disableErrorHandling = false, disableFileHeader = false } =
       this.options;
diff --git a/packages/diffs/src/components/FileDiff.ts b/packages/diffs/src/components/FileDiff.ts
index 294926785..f58fd9d0a 100644
--- a/packages/diffs/src/components/FileDiff.ts
+++ b/packages/diffs/src/components/FileDiff.ts
@@ -40,6 +40,7 @@ import type {
   BaseDiffOptions,
   CustomPreProperties,
   DiffLineAnnotation,
+  DiffSearchLineDecoration,
   DiffsEditableComponent,
   DiffsEditor,
   DiffsTextDocument,
@@ -140,6 +141,7 @@ export interface FileDiffRenderBaseProps<LAnnotation> {
   containerWrapper?: HTMLElement;
   lineAnnotations?: DiffLineAnnotation<LAnnotation>[];
   renderRange?: RenderRange;
+  searchDecorations?: readonly DiffSearchLineDecoration[];
 }
 
 export type FileDiffRenderProps<LAnnotation> =
@@ -987,6 +989,7 @@ export class FileDiff<
     fileContainer,
     containerWrapper,
     renderRange,
+    searchDecorations,
     ...fileInputProps
   }: FileDiffRenderProps<LAnnotation>): boolean {
     const fileInput = getDiffFileInput(fileInputProps, 'FileDiff.render');
@@ -1107,6 +1110,7 @@ export class FileDiff<
     this.syncInteractionOptions();
 
     this.hunksRenderer.setLineAnnotations(this.lineAnnotations);
+    this.hunksRenderer.setSearchDecorations(searchDecorations);
 
     const { disableErrorHandling = false, disableFileHeader = false } =
       this.options;
diff --git a/packages/diffs/src/components/VirtualizedFileDiff.ts b/packages/diffs/src/components/VirtualizedFileDiff.ts
index 76b20e160..197740135 100644
--- a/packages/diffs/src/components/VirtualizedFileDiff.ts
+++ b/packages/diffs/src/components/VirtualizedFileDiff.ts
@@ -7,6 +7,7 @@ import type {
   FileContents,
   FileDiffMetadata,
   Hunk,
+  HunkExpansionRegion,
   HunkSeparators,
   NumericScrollLineAnchor,
   PendingCodeViewLayoutReset,
@@ -991,6 +992,10 @@ export class VirtualizedFileDiff<
     return !this.isAdvancedMode() && super.shouldSelfHealEditSession();
   }
 
+  public getExpandedHunksForSearch(): Map<number, HunkExpansionRegion> {
+    return this.hunksRenderer.getExpandedHunksMap();
+  }
+
   public setVisibility(visible: boolean): void {
     if (this.isAdvancedMode() || this.fileContainer == null) {
       return;
diff --git a/packages/diffs/src/editor/editor.css b/packages/diffs/src/editor/editor.css
index a65a8bf78..c4660871f 100644
--- a/packages/diffs/src/editor/editor.css
+++ b/packages/diffs/src/editor/editor.css
@@ -115,10 +115,14 @@
 }
 [data-match-range] {
   z-index: -10;
+  border: 0;
+  border-radius: 3px;
   background-color: var(
     --diffs-editor-match-bg,
     var(--diffs-editor-selection-bg)
   );
+  outline: none;
+  box-decoration-break: clone;
 }
 [data-match-range]:not([data-focus]) {
   background-color: var(
@@ -305,219 +309,3 @@
   padding: 4px;
   pointer-events: auto;
 }
-
-/* Search Panel Widget */
-[data-search-panel] {
-  position: sticky;
-  top: 16px;
-  right: 16px;
-  z-index: 100;
-  display: flex;
-  justify-content: right;
-  flex-direction: column;
-  width: 100%;
-  /* Zero height ensures panel appears stickied immediately */
-  height: 0;
-  container: search-panel / inline-size;
-
-  [data-editor-widget] {
-    position: relative;
-    z-index: 100;
-    display: flex;
-    flex-shrink: 0;
-    align-items: stretch;
-    gap: 8px;
-    padding: 4px;
-    max-width: 100%;
-    min-width: 260px;
-    margin-inline: auto 16px;
-  }
-
-  svg {
-    display: block;
-    fill: currentColor;
-    width: 12px;
-    height: 12px;
-  }
-}
-
-[data-search-grid] {
-  display: grid;
-  grid-template-columns: auto auto auto;
-  grid-template-areas:
-    'find    matches nav'
-    'replace actions .';
-  align-items: center;
-  gap: 4px 6px;
-  width: 100%;
-}
-[data-input-box][data-find] {
-  grid-area: find;
-}
-[data-search-nav] {
-  grid-area: nav;
-}
-[data-input-box][data-replace] {
-  grid-area: replace;
-}
-[data-replace-actions] {
-  grid-area: actions;
-}
-[data-search-grid][data-mode='find'] {
-  grid-template-areas: 'find matches nav';
-}
-[data-search-grid][data-mode='find'] [data-replace-cell] {
-  display: none;
-}
-
-@container search-panel (width < 400px) {
-  [data-search-panel] [data-editor-widget] {
-    padding: 10px;
-  }
-  [data-search-grid][data-mode='replace'] {
-    grid-template-columns: auto 1fr auto;
-    grid-template-areas:
-      'find    find    find'
-      'replace replace replace'
-      'nav     matches actions';
-  }
-  [data-search-grid][data-mode='find'] {
-    grid-template-columns: auto 1fr auto;
-    grid-template-areas:
-      'find find    find'
-      'nav  matches matches';
-  }
-  [data-replace-actions] {
-    justify-self: end;
-  }
-  [data-search-grid] [data-input-box] {
-    width: auto;
-  }
-}
-
-[data-input-box] {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 200px;
-
-  input {
-    flex-grow: 1;
-    width: 100%;
-    min-width: 0;
-    font-size: 13px;
-    line-height: 24px;
-    padding-inline: 6px;
-    color: var(--diffs-fg);
-    background-color: var(--diffs-bg);
-    border: 1px solid color-mix(in lab, var(--diffs-fg) 12%, var(--diffs-bg));
-    border-radius: 6px;
-    outline: none;
-
-    &::selection {
-      background-color: color-mix(in lab, var(--diffs-fg) 8%, var(--diffs-bg));
-    }
-
-    &:focus-visible {
-      outline: 1px solid var(--diffs-modified-base);
-    }
-  }
-
-  &[data-find] input {
-    /* Space for overlaid search icon toggles */
-    padding-inline-end: 72px;
-  }
-
-  [data-search-icon] {
-    --diffs-search-icon-size: 20px;
-  }
-}
-
-[data-search-toggles] {
-  position: absolute;
-  top: 50%;
-  right: 4px;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  gap: 1px;
-}
-
-[data-matches] {
-  grid-area: matches;
-  flex-shrink: 0;
-  min-width: 50px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 20px;
-  white-space: nowrap;
-  color: color-mix(in lab, var(--diffs-fg) 50%, var(--diffs-bg));
-
-  &[data-no-matches] {
-    color: color-mix(in lab, var(--diffs-fg) 35%, var(--diffs-bg));
-  }
-}
-
-[data-replace-actions],
-[data-search-nav] {
-  display: flex;
-  align-items: center;
-}
-
-/* Every clickable control is a real <button> tagged with data-search-icon;
-   strip the UA chrome here so this single rule is the source of their
-   appearance. */
-[data-search-icon] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  appearance: none;
-  flex-shrink: 0;
-  width: var(--diffs-search-icon-size, 24px);
-  height: var(--diffs-search-icon-size, 24px);
-  margin: 0;
-  padding: 0;
-  color: color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg));
-  border: 0;
-  border-radius: var(--diffs-search-icon-radius, 4px);
-  background: none;
-  cursor: pointer;
-  transition:
-    background-color 0.1s ease-in-out,
-    color 0.1s ease-in-out;
-
-  &:disabled {
-    opacity: 0.25;
-    cursor: default;
-  }
-  &:not(:disabled):hover {
-    color: var(--diffs-fg);
-  }
-  &:focus-visible {
-    outline: 1px solid var(--diffs-modified-base);
-  }
-  &[aria-pressed='true'] {
-    color: var(--diffs-modified-base);
-  }
-}
-
-[data-search-close] {
-  --diffs-search-icon-size: 20px;
-  --diffs-search-icon-radius: 50%;
-  position: absolute;
-  top: 0;
-  right: 0;
-  transform: translate(50%, -50%);
-  color: var(--diffs-widget-bg);
-  background-color: color-mix(
-    in lab,
-    var(--diffs-widget-fg) 50%,
-    var(--diffs-bg)
-  );
-
-  &:not(:disabled):hover {
-    opacity: 1;
-    color: var(--diffs-widget-bg);
-    background-color: var(--diffs-widget-fg);
-  }
-}
diff --git a/packages/diffs/src/editor/editor.ts b/packages/diffs/src/editor/editor.ts
index c703dd2e5..fc4d5dc99 100644
--- a/packages/diffs/src/editor/editor.ts
+++ b/packages/diffs/src/editor/editor.ts
@@ -2,6 +2,7 @@ import {
   dequeueRender,
   queueRender,
 } from '../managers/UniversalRenderingManager';
+import { buildSearchReplacementText, type MatchRange } from '../search';
 import type {
   DiffLineAnnotation,
   DiffsEditableComponent,
@@ -54,11 +55,7 @@ import {
   PopoverManager,
   type PopoverPlacementBounds,
 } from './popover';
-import {
-  type MatchRange,
-  type SearchPanelMode,
-  SearchPanelWidget,
-} from './searchPanel';
+import { type SearchPanelMode, SearchPanelWidget } from './searchPanel';
 import type {
   AutoSurround,
   CursorMoveOptions,
@@ -839,7 +836,7 @@ export class Editor<LAnnotation> implements DiffsEditor<LAnnotation> {
     const tokenizer = this.#tokenizer;
     if (tokenizer !== undefined) {
       tokenizer.pauseBackgroundTokenize();
-      requestAnimationFrame(() => {
+      queueRender(() => {
         tokenizer.resumeBackgroundTokenize();
       });
     }
@@ -4790,36 +4787,70 @@ export class Editor<LAnnotation> implements DiffsEditor<LAnnotation> {
       this.#retainSearchPanelFocus = retainFocus;
     };
 
+    const buildReplacementEdit = (
+      searchParams: Parameters<typeof textDocument.search>[0],
+      matchStart: number,
+      matchEnd: number
+    ): ResolvedTextEdit => ({
+      start: matchStart,
+      end: matchEnd,
+      text: buildSearchReplacementText(
+        (offset) => textDocument.positionAt(offset),
+        (position) => textDocument.offsetAt(position),
+        (line) => textDocument.getLineText(line),
+        searchParams,
+        matchStart,
+        matchEnd
+      ),
+    });
+
+    const applyReplace = (edits: ResolvedTextEdit[]) => {
+      if (edits.length === 0) {
+        return;
+      }
+      const change = textDocument.applyEdits(
+        edits.map((edit) => ({
+          range: {
+            start: textDocument.positionAt(edit.start),
+            end: textDocument.positionAt(edit.end),
+          },
+          newText: edit.text,
+        })),
+        true,
+        this.#selections
+      );
+      if (change !== undefined) {
+        this.#applyChange(
+          change,
+          undefined,
+          this.#applyChangeToLineAnnotations(change),
+          { skipSearchRefresh: true }
+        );
+      }
+    };
+
     const searchPanel = new SearchPanelWidget({
-      textDocument,
       containerElement: preElement,
       defaultQuery,
       mode,
       initialMatch,
+      search: (searchParams) => textDocument.search(searchParams),
+      isSameMatch: ([aStart, aEnd], [bStart, bEnd]) =>
+        aStart === bStart && aEnd === bEnd,
       scrollToMatch,
-      applyReplace: (edits: ResolvedTextEdit[]) => {
-        if (edits.length === 0) {
-          return;
-        }
-        const change = textDocument.applyEdits(
-          edits.map((edit) => ({
-            range: {
-              start: textDocument.positionAt(edit.start),
-              end: textDocument.positionAt(edit.end),
-            },
-            newText: edit.text,
-          })),
-          true,
-          this.#selections
-        );
-        if (change !== undefined) {
-          this.#applyChange(
-            change,
-            undefined,
-            this.#applyChangeToLineAnnotations(change),
-            { skipSearchRefresh: true }
+      replace: {
+        replaceMatch: ([start, end], searchParams): MatchRange => {
+          const edit = buildReplacementEdit(searchParams, start, end);
+          applyReplace([edit]);
+          return [start + edit.text.length, start + edit.text.length];
+        },
+        replaceAll: (matches, searchParams) => {
+          applyReplace(
+            matches.map(([start, end]) =>
+              buildReplacementEdit(searchParams, start, end)
+            )
           );
-        }
+        },
       },
       onUpdate: (
         allMatches: MatchRange[],
diff --git a/packages/diffs/src/editor/pieceTable.ts b/packages/diffs/src/editor/pieceTable.ts
index d06f15c92..37f35087a 100644
--- a/packages/diffs/src/editor/pieceTable.ts
+++ b/packages/diffs/src/editor/pieceTable.ts
@@ -1,13 +1,13 @@
+import {
+  type MatchRange,
+  searchLineByLine,
+  type SearchParams,
+} from '../search';
 import type { Position, Range, ResolvedTextEdit } from '../types';
 import { computeLineOffsets } from '../utils/computeFileOffsets';
-import type { SearchParams } from './searchPanel';
 
-const MAX_FIND_MATCHES = 100000;
 const LINE_FEED = 10;
 const CARRIAGE_RETURN = 13;
-// TODO(ije): use Intl.Segmenter instead of regex for word separators
-const WORD_SEPARATORS = '`~!@#$%^&*()-=+[{]}\\|;:\'",.<>/?' as const;
-
 // A piece is a segment of text that is either original or added.
 class Piece {
   static Original = 0;
@@ -328,90 +328,28 @@ export class PieceTable {
     return foundOffset ?? wrappedOffset;
   }
 
-  search(searchParams: SearchParams): [start: number, end: number][] {
-    if (searchParams.text.length === 0 || this.#length === 0) {
-      return [];
-    }
-
-    // Search currently operates line-by-line, so newline-spanning patterns are unsupported.
-    if (
-      searchParams.text.includes('\n') ||
-      searchParams.text.includes('\r') ||
-      (searchParams.regex &&
-        (searchParams.text.includes('\\n') ||
-          searchParams.text.includes('\\r')))
-    ) {
-      return [];
-    }
-
-    let pattern: RegExp;
-    try {
-      pattern = compileSearchRegExp(
-        searchParams.text,
-        searchParams.regex,
-        searchParams.caseSensitive
-      );
-    } catch {
-      return [];
-    }
-
-    return this.#collectSearchMatchesLineByLine(
-      pattern,
-      searchParams.wholeWord,
-      MAX_FIND_MATCHES
-    );
-  }
-
-  #collectSearchMatchesLineByLine(
-    pattern: RegExp,
-    wholeWord: boolean,
-    limit: number
-  ): [number, number][] {
-    const out: [number, number][] = [];
-    // Search visits the whole document, so flatten it once instead of making
-    // several treap descents for every line and whole-word boundary.
+  search(searchParams: SearchParams): MatchRange[] {
+    // Search scans the whole document, so flatten the treap once instead of
+    // descending it again for every line and whole-word boundary.
     const documentText = this.#textFromPieces();
-    const docLength = documentText.length;
     const lineOffsets = computeLineOffsets(documentText);
-
-    // Reuse the single compiled pattern across every line, resetting its
-    // lastIndex before each line, instead of allocating a fresh RegExp per
-    // line. The pattern is global, so lastIndex tracks progress within a line.
-    for (let line = 0; line < lineOffsets.length; line++) {
-      const lineStart = lineOffsets[line];
-      let lineEnd = lineOffsets[line + 1] ?? docLength;
-      while (
-        lineEnd > lineStart &&
-        isEOL(documentText.charCodeAt(lineEnd - 1))
-      ) {
-        lineEnd--;
-      }
-      const lineText = documentText.slice(lineStart, lineEnd);
-      pattern.lastIndex = 0;
-      let match: RegExpExecArray | null;
-      while ((match = pattern.exec(lineText)) !== null) {
-        const rel = match.index;
-        const fragment = match[0];
-        if (fragment.length === 0) {
-          pattern.lastIndex = advancePastEmptyMatch(lineText, rel);
-          continue;
-        }
-        const docStart = lineStart + rel;
-        if (
-          !wholeWord ||
-          isWholeWordAtDocOffsets(documentText, docStart, fragment.length)
-        ) {
-          out.push([docStart, docStart + fragment.length]);
-          if (out.length >= limit) {
-            return out;
+    return searchLineByLine(
+      {
+        textLength: documentText.length,
+        lineCount: lineOffsets.length,
+        getLineText: (line) => {
+          const start = lineOffsets[line] ?? documentText.length;
+          let end = lineOffsets[line + 1] ?? documentText.length;
+          while (end > start && isEOL(documentText.charCodeAt(end - 1))) {
+            end--;
           }
-        }
-        if (rel === pattern.lastIndex) {
-          pattern.lastIndex = advancePastEmptyMatch(lineText, rel);
-        }
-      }
-    }
-    return out;
+          return documentText.slice(start, end);
+        },
+        getLineStartOffset: (line) => lineOffsets[line] ?? documentText.length,
+        charAt: (offset) => documentText.charAt(offset),
+      },
+      searchParams
+    );
   }
 
   insert(text: string, offset: number): void {
@@ -1107,119 +1045,3 @@ function upperBound(values: number[], target: number): number {
   }
   return lo;
 }
-
-function escapeRegExp(text: string): string {
-  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-
-function isWordSeparatorCharCode(charCode: number): boolean {
-  if (charCode <= 32 || charCode === 127) {
-    return true;
-  }
-  const ch = String.fromCharCode(charCode);
-  return WORD_SEPARATORS.includes(ch);
-}
-
-// Checks if the given text is a whole word by checking if the
-// characters before and after are word separators.
-function isWholeWordAtDocOffsets(
-  text: string,
-  docStart: number,
-  length: number
-): boolean {
-  const beforeOk =
-    docStart <= 0 || isWordSeparatorCharCode(text.charCodeAt(docStart - 1));
-  const afterOk =
-    docStart + length >= text.length ||
-    isWordSeparatorCharCode(text.charCodeAt(docStart + length));
-  return beforeOk && afterOk;
-}
-
-function compileSearchRegExp(
-  source: string,
-  isRegex: boolean,
-  caseSensitive: boolean
-): RegExp {
-  const body = isRegex ? source : escapeRegExp(source);
-  const flags = `g${caseSensitive ? '' : 'i'}${isRegex ? 'm' : ''}`;
-  return new RegExp(body, flags);
-}
-
-/** Expands `$&`, `$1`, `$$`, etc. in a regex replace string using a match. */
-function expandReplaceString(
-  replacement: string,
-  match: RegExpExecArray
-): string {
-  return replacement.replace(/\$([$&]|\d+)/g, (_token, group: string) => {
-    if (group === '$') {
-      return '$';
-    }
-    if (group === '&') {
-      return match[0] ?? '';
-    }
-    const index = Number(group);
-    return match[index] ?? '';
-  });
-}
-
-/**
- * Builds the text to insert for one search match, including regex capture
- * substitution when regex mode is enabled.
- */
-export function buildSearchReplacementText(
-  positionAt: (offset: number) => Position,
-  offsetAt: (position: Position) => number,
-  getLineText: (line: number) => string,
-  searchParams: SearchParams,
-  matchStart: number,
-  matchEnd: number
-): string {
-  if (!searchParams.regex) {
-    return searchParams.replaceText;
-  }
-
-  const position = positionAt(matchStart);
-  const lineText = getLineText(position.line);
-  const lineStart = offsetAt({ line: position.line, character: 0 });
-  const relStart = matchStart - lineStart;
-
-  let pattern: RegExp;
-  try {
-    pattern = compileSearchRegExp(
-      searchParams.text,
-      true,
-      searchParams.caseSensitive
-    );
-  } catch {
-    return searchParams.replaceText;
-  }
-
-  // Re-run at the original line offset so lookaround can inspect context
-  // outside the matched range while captures still come from this exact hit.
-  pattern.lastIndex = relStart;
-  const match = pattern.exec(lineText);
-  if (
-    match === null ||
-    match.index !== relStart ||
-    match[0].length !== matchEnd - matchStart
-  ) {
-    return searchParams.replaceText;
-  }
-  return expandReplaceString(searchParams.replaceText, match);
-}
-
-function advancePastEmptyMatch(text: string, index: number): number {
-  if (index + 1 < text.length) {
-    const first = text.charCodeAt(index);
-    const second = text.charCodeAt(index + 1);
-    if (
-      first >= 0xd800 &&
-      first <= 0xdbff &&
-      second >= 0xdc00 &&
-      second <= 0xdfff
-    ) {
-      return index + 2;
-    }
-  }
-  return index + 1;
-}
diff --git a/packages/diffs/src/editor/searchPanel.css b/packages/diffs/src/editor/searchPanel.css
new file mode 100644
index 000000000..e4c9ab547
--- /dev/null
+++ b/packages/diffs/src/editor/searchPanel.css
@@ -0,0 +1,300 @@
+:host {
+  --diffs-search-panel-fg: var(--diffs-fg, light-dark(#000, #fff));
+  --diffs-search-panel-bg: var(--diffs-bg, light-dark(#fff, #000));
+  --diffs-search-panel-modified: var(
+    --diffs-modified-base,
+    light-dark(
+      var(--diffs-modified-light, #009fff),
+      var(--diffs-modified-dark, #69b1ff)
+    )
+  );
+  color-scheme: light dark;
+  position: sticky;
+  top: 16px;
+  right: 16px;
+  z-index: 100;
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  height: 0;
+  box-sizing: border-box;
+}
+
+:host([data-search-panel-overlay]) {
+  pointer-events: none;
+}
+
+[data-search-panel] {
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+  width: 100%;
+  height: fit-content;
+  container: search-panel / inline-size;
+}
+
+[data-editor-widget] {
+  --diffs-widget-fg: var(--diffs-search-panel-fg);
+  --diffs-widget-bg: color-mix(
+    in lab,
+    var(--diffs-search-panel-fg) 4%,
+    var(--diffs-search-panel-bg)
+  );
+  --diffs-widget-border: color-mix(
+    in lab,
+    var(--diffs-search-panel-fg) 20%,
+    transparent
+  );
+  --diffs-widget-shadow:
+    inset 0 0 0 1px var(--diffs-search-panel-bg), 0 4px 8px rgb(0 0 0 / 0.075),
+    0 6px 18px rgb(0 0 0 / 0.075);
+  position: relative;
+  z-index: 100;
+  width: fit-content;
+  display: flex;
+  flex-shrink: 0;
+  align-items: stretch;
+  gap: 8px;
+  padding: 4px;
+  max-width: 100%;
+  min-width: 260px;
+  margin-inline: auto 16px;
+  border: 1px solid var(--diffs-widget-border);
+  border-radius: 9px;
+  background-color: var(--diffs-widget-bg);
+  background-clip: padding-box;
+  box-shadow: var(--diffs-widget-shadow);
+  font-family: var(
+    --diffs-header-font-fallback,
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif
+  );
+  font-size: 14px;
+}
+
+:host([data-search-panel-overlay]) [data-editor-widget] {
+  pointer-events: auto;
+}
+
+svg {
+  display: block;
+  fill: currentColor;
+  width: 12px;
+  height: 12px;
+}
+
+[data-search-grid] {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  grid-template-areas:
+    'find    matches nav'
+    'replace actions .';
+  align-items: center;
+  gap: 4px 6px;
+  width: 100%;
+}
+
+[data-input-box][data-find] {
+  grid-area: find;
+}
+
+[data-search-nav] {
+  grid-area: nav;
+}
+
+[data-input-box][data-replace] {
+  grid-area: replace;
+}
+
+[data-replace-actions] {
+  grid-area: actions;
+}
+
+[data-search-grid][data-mode='find'] {
+  grid-template-areas: 'find matches nav';
+}
+
+[data-search-grid][data-mode='find'] [data-replace-cell] {
+  display: none;
+}
+
+@container search-panel (width < 400px) {
+  [data-editor-widget] {
+    padding: 10px;
+  }
+
+  [data-search-grid][data-mode='replace'] {
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas:
+      'find    find    find'
+      'replace replace replace'
+      'nav     matches actions';
+  }
+
+  [data-search-grid][data-mode='find'] {
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas:
+      'find find    find'
+      'nav  matches matches';
+  }
+
+  [data-replace-actions] {
+    justify-self: end;
+  }
+
+  [data-search-grid] [data-input-box] {
+    width: auto;
+  }
+}
+
+[data-input-box] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 200px;
+}
+
+[data-input-box] input {
+  flex-grow: 1;
+  width: 100%;
+  min-width: 0;
+  font-size: 13px;
+  line-height: 24px;
+  padding-inline: 6px;
+  color: var(--diffs-search-panel-fg);
+  background-color: var(--diffs-search-panel-bg);
+  border: 1px solid
+    color-mix(
+      in lab,
+      var(--diffs-search-panel-fg) 12%,
+      var(--diffs-search-panel-bg)
+    );
+  border-radius: 6px;
+  outline: none;
+}
+
+[data-input-box] input::selection {
+  background-color: color-mix(
+    in lab,
+    var(--diffs-search-panel-fg) 8%,
+    var(--diffs-search-panel-bg)
+  );
+}
+
+[data-input-box] input:focus-visible {
+  outline: 1px solid var(--diffs-search-panel-modified);
+}
+
+[data-input-box][data-find] input {
+  padding-inline-end: 72px;
+}
+
+[data-input-box] [data-search-icon] {
+  --diffs-search-icon-size: 20px;
+}
+
+[data-search-toggles] {
+  position: absolute;
+  top: 50%;
+  right: 4px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 1px;
+}
+
+[data-matches] {
+  grid-area: matches;
+  flex-shrink: 0;
+  min-width: 50px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
+  white-space: nowrap;
+  color: color-mix(
+    in lab,
+    var(--diffs-search-panel-fg) 50%,
+    var(--diffs-search-panel-bg)
+  );
+}
+
+[data-matches][data-no-matches] {
+  color: color-mix(
+    in lab,
+    var(--diffs-search-panel-fg) 35%,
+    var(--diffs-search-panel-bg)
+  );
+}
+
+[data-replace-actions],
+[data-search-nav] {
+  display: flex;
+  align-items: center;
+}
+
+[data-search-icon] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  appearance: none;
+  flex-shrink: 0;
+  width: var(--diffs-search-icon-size, 24px);
+  height: var(--diffs-search-icon-size, 24px);
+  margin: 0;
+  padding: 0;
+  color: color-mix(
+    in lab,
+    var(--diffs-search-panel-fg) 65%,
+    var(--diffs-search-panel-bg)
+  );
+  border: 0;
+  border-radius: var(--diffs-search-icon-radius, 4px);
+  background: none;
+  cursor: pointer;
+  transition:
+    background-color 0.1s ease-in-out,
+    color 0.1s ease-in-out;
+}
+
+[data-search-icon]:disabled {
+  opacity: 0.25;
+  cursor: default;
+}
+
+[data-search-icon]:not(:disabled):hover {
+  color: var(--diffs-search-panel-fg);
+}
+
+[data-search-icon]:focus-visible {
+  outline: 1px solid var(--diffs-search-panel-modified);
+}
+
+[data-search-icon][aria-pressed='true'] {
+  color: var(--diffs-search-panel-modified);
+}
+
+[data-search-close] {
+  --diffs-search-icon-size: 20px;
+  --diffs-search-icon-radius: 50%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  color: var(--diffs-widget-bg);
+  background-color: color-mix(
+    in lab,
+    var(--diffs-widget-fg) 50%,
+    var(--diffs-search-panel-bg)
+  );
+}
+
+[data-search-close]:not(:disabled):hover {
+  opacity: 1;
+  color: var(--diffs-widget-bg);
+  background-color: var(--diffs-widget-fg);
+}
diff --git a/packages/diffs/src/editor/searchPanel.ts b/packages/diffs/src/editor/searchPanel.ts
index 2c96a6dd5..ab579bcc4 100644
--- a/packages/diffs/src/editor/searchPanel.ts
+++ b/packages/diffs/src/editor/searchPanel.ts
@@ -1,59 +1,68 @@
-import type { ResolvedTextEdit } from '../types';
+import { type MatchRange, type SearchParams } from '../search';
 import { resolveFindAgainShortcut } from './command';
-import { buildSearchReplacementText } from './pieceTable';
 import { isPrimaryModifier } from './platform';
-import { getEditorIconSvg, type SVGSpriteNames } from './sprite';
-import type { TextDocument } from './textDocument';
+import searchPanelCSS from './searchPanel.css?inline';
+import {
+  getEditorIconSvg,
+  type SVGSpriteNames,
+  SVGSpriteSheet,
+} from './sprite';
 import { h } from './utils';
 
-export type MatchRange = [startOffset: number, endOffset: number];
-
 export type SearchPanelMode = 'find' | 'replace';
 
-export interface SearchParams {
-  text: string;
-  replaceText: string;
-  caseSensitive: boolean;
-  wholeWord: boolean;
-  regex: boolean;
+export type { MatchRange, SearchParams } from '../search';
+
+export interface SearchPanelReplaceHandlers<TMatch> {
+  replaceMatch: (
+    match: TMatch,
+    searchParams: SearchParams
+  ) => TMatch | undefined;
+  replaceAll: (matches: TMatch[], searchParams: SearchParams) => void;
 }
 
-export interface SearchPanelOptions {
-  textDocument: TextDocument<unknown>;
+export interface SearchPanelOptions<TMatch = MatchRange> {
   containerElement: HTMLElement;
   defaultQuery: string;
   mode?: SearchPanelMode;
-  initialMatch?: MatchRange;
-  scrollToMatch: (nextMatch: MatchRange, retainFocus: boolean) => void;
-  applyReplace: (edits: ResolvedTextEdit[]) => void;
+  initialMatch?: TMatch;
+  search: (searchParams: SearchParams) => TMatch[];
+  isSameMatch?: (a: TMatch, b: TMatch) => boolean;
+  scrollToMatch: (nextMatch: TMatch, retainFocus: boolean) => void;
+  replace?: SearchPanelReplaceHandlers<TMatch>;
   onUpdate: (
-    matches: MatchRange[],
+    matches: TMatch[],
     options?: { syncSelection?: boolean }
-  ) => MatchRange | undefined;
+  ) => TMatch | undefined;
   onClose: () => void;
 }
 
-export class SearchPanelWidget {
-  #container: HTMLDivElement;
+export class SearchPanelWidget<TMatch = MatchRange> {
+  #host: HTMLDivElement;
   #inputElement: HTMLInputElement;
   #updateMatches?: (options?: { syncSelection?: boolean }) => void;
   #applyMode?: (mode: SearchPanelMode) => void;
   #navigate?: (findPrevious: boolean) => void;
   #close?: () => void;
 
-  constructor(options: SearchPanelOptions) {
+  constructor(options: SearchPanelOptions<TMatch>) {
     const {
-      textDocument,
       containerElement,
       defaultQuery,
       mode = 'find',
       initialMatch,
+      search,
+      isSameMatch = Object.is,
       scrollToMatch,
-      applyReplace,
+      replace,
       onUpdate,
       onClose,
     } = options;
 
+    const canReplace = replace !== undefined;
+    const normalizeMode = (nextMode: SearchPanelMode): SearchPanelMode =>
+      canReplace ? nextMode : 'find';
+
     const searchParams: SearchParams = {
       text: defaultQuery,
       replaceText: '',
@@ -63,19 +72,34 @@ export class SearchPanelWidget {
     };
 
     const matches = {
-      all: [] as MatchRange[],
-      current: undefined as MatchRange | undefined,
+      all: [] as TMatch[],
+      current: undefined as TMatch | undefined,
     };
 
+    const getSearchParamsSnapshot = (): SearchParams => ({ ...searchParams });
+    const getMatchIndex = (match: TMatch): number =>
+      matches.all.findIndex((candidate) => isSameMatch(candidate, match));
+
     // Default to the empty-query "no results" state so it shows on open before
     // any search runs.
     const matchResultElement = h('div', {
       dataset: { matches: '', noMatches: '' },
       textContent: 'No results',
     });
+
+    const updateCurrentMatch = (currentMatch: TMatch | undefined) => {
+      if (currentMatch === undefined) {
+        matchResultElement.textContent = `${matches.all.length} results`;
+      } else {
+        const index = getMatchIndex(currentMatch);
+        matchResultElement.textContent = `${index + 1} of ${matches.all.length}`;
+      }
+      matches.current = currentMatch;
+    };
+
     const updateMatches = (options?: { syncSelection?: boolean }) => {
       matches.all =
-        searchParams.text !== '' ? textDocument.search(searchParams) : [];
+        searchParams.text !== '' ? search(getSearchParamsSnapshot()) : [];
       const noMatches = matches.all.length === 0;
       prevButton.disabled = noMatches;
       nextButton.disabled = noMatches;
@@ -102,19 +126,6 @@ export class SearchPanelWidget {
     };
     this.#updateMatches = updateMatches;
 
-    const updateCurrentMatch = (currentMatch: MatchRange | undefined) => {
-      if (currentMatch === undefined) {
-        matchResultElement.textContent = `${matches.all.length} results`;
-      } else {
-        const [start, end] = currentMatch;
-        const index = matches.all.findIndex(
-          (m) => m[0] === start && m[1] === end
-        );
-        matchResultElement.textContent = `${index + 1} of ${matches.all.length}`;
-      }
-      matches.current = currentMatch;
-    };
-
     const updateSearchParam = <K extends keyof SearchParams>(
       key: K,
       value: SearchParams[K]
@@ -128,26 +139,19 @@ export class SearchPanelWidget {
       retainFocus: boolean = false
     ) => {
       const allMatches = matches.all;
-      let nextMatch: MatchRange | undefined = allMatches[0];
+      let nextMatch: TMatch | undefined = allMatches[0];
       if (allMatches.length > 0) {
-        if (findPrevious) {
-          const searchOffset = matches.current?.[0] ?? 0;
+        const currentIndex =
+          matches.current !== undefined ? getMatchIndex(matches.current) : -1;
+        if (findPrevious && currentIndex === -1) {
           nextMatch = allMatches.at(-1);
-          for (const m of allMatches) {
-            if (m[1] <= searchOffset) {
-              nextMatch = m;
-            } else {
-              break;
-            }
-          }
+        } else if (findPrevious) {
+          nextMatch = allMatches.at(currentIndex - 1);
+          nextMatch ??= allMatches.at(-1);
+        } else if (currentIndex === -1) {
+          nextMatch = allMatches[0];
         } else {
-          const searchOffset = matches.current?.[1] ?? 0;
-          for (const m of allMatches) {
-            if (m[0] >= searchOffset) {
-              nextMatch = m;
-              break;
-            }
-          }
+          nextMatch = allMatches[currentIndex + 1] ?? allMatches[0];
         }
       }
       if (nextMatch !== undefined) {
@@ -160,24 +164,12 @@ export class SearchPanelWidget {
     this.#navigate = (findPrevious: boolean) =>
       findNextMatch(findPrevious, true);
 
-    const buildReplacementEdit = (
-      matchStart: number,
-      matchEnd: number
-    ): ResolvedTextEdit => ({
-      start: matchStart,
-      end: matchEnd,
-      text: buildSearchReplacementText(
-        (offset) => textDocument.positionAt(offset),
-        (position) => textDocument.offsetAt(position),
-        (line) => textDocument.getLineText(line),
-        searchParams,
-        matchStart,
-        matchEnd
-      ),
-    });
-
-    const replace = () => {
-      if (searchParams.text === '' || matches.all.length === 0) {
+    const replaceCurrentMatch = () => {
+      if (
+        replace === undefined ||
+        searchParams.text === '' ||
+        matches.all.length === 0
+      ) {
         return;
       }
 
@@ -190,24 +182,29 @@ export class SearchPanelWidget {
         }
       }
 
-      const [start, end] = currentMatch;
-      const edit = buildReplacementEdit(start, end);
-      applyReplace([edit]);
+      const nextMatch = replace.replaceMatch(
+        currentMatch,
+        getSearchParamsSnapshot()
+      );
 
       // Collapse after the replacement so the next search pass advances.
-      scrollToMatch([start + edit.text.length, start + edit.text.length], true);
+      if (nextMatch !== undefined) {
+        scrollToMatch(nextMatch, true);
+      }
       matches.current = undefined;
       updateMatches();
     };
 
-    const replaceAll = () => {
-      if (searchParams.text === '' || matches.all.length === 0) {
+    const replaceAllMatches = () => {
+      if (
+        replace === undefined ||
+        searchParams.text === '' ||
+        matches.all.length === 0
+      ) {
         return;
       }
 
-      applyReplace(
-        matches.all.map(([start, end]) => buildReplacementEdit(start, end))
-      );
+      replace.replaceAll(matches.all.slice(), getSearchParamsSnapshot());
       matches.current = undefined;
       updateMatches();
     };
@@ -269,32 +266,6 @@ export class SearchPanelWidget {
     const wholeWordToggle = makeToggle('whole-word', 'Whole Word', 'wholeWord');
     const regexToggle = makeToggle('regex', 'Regexp', 'regex');
 
-    const replaceInputElement = h('input', {
-      type: 'text',
-      placeholder: 'Replace',
-      dataset: 'replace',
-      value: '',
-      oninput: (e: Event) => {
-        searchParams.replaceText = (e.target as HTMLInputElement).value;
-      },
-      onkeydown: (e: KeyboardEvent) => {
-        if (e.isComposing) {
-          return;
-        }
-        const findAgain = resolveFindAgainShortcut(e);
-        if (e.key === 'Escape') {
-          e.preventDefault();
-          close();
-        } else if (e.key === 'Enter') {
-          e.preventDefault();
-          replace();
-        } else if (findAgain !== undefined) {
-          e.preventDefault();
-          findNextMatch(findAgain === 'previous', true);
-        }
-      },
-    });
-
     this.#inputElement = h('input', {
       type: 'text',
       placeholder: 'Search',
@@ -342,25 +313,6 @@ export class SearchPanelWidget {
       children: [this.#inputElement, searchTogglesElement],
     });
 
-    // The replace input and its action buttons are tagged as replace cells so
-    // they can be hidden together when the panel is in find-only mode.
-    const replaceInputBox = h('div', {
-      dataset: { inputBox: '', replace: '', replaceCell: '' },
-      children: [replaceInputElement],
-    });
-
-    const replaceActionsElement = h('div', {
-      dataset: { replaceActions: '', replaceCell: '' },
-      children: [
-        iconButton({ icon: 'replace', label: 'Replace', onClick: replace }),
-        iconButton({
-          icon: 'replace-all',
-          label: 'Replace All',
-          onClick: replaceAll,
-        }),
-      ],
-    });
-
     // Held so the no-results state can toggle their native disabled flag.
     const prevButton = iconButton({
       icon: 'arrow-up',
@@ -391,43 +343,108 @@ export class SearchPanelWidget {
       dataset: { searchClose: '' },
     });
 
+    const gridChildren: Node[] = [findInputBox];
+    if (canReplace) {
+      const replaceInputElement = h('input', {
+        type: 'text',
+        placeholder: 'Replace',
+        dataset: 'replace',
+        value: '',
+        oninput: (e: Event) => {
+          searchParams.replaceText = (e.target as HTMLInputElement).value;
+        },
+        onkeydown: (e: KeyboardEvent) => {
+          if (e.isComposing) {
+            return;
+          }
+          const findAgain = resolveFindAgainShortcut(e);
+          if (e.key === 'Escape') {
+            e.preventDefault();
+            close();
+          } else if (e.key === 'Enter') {
+            e.preventDefault();
+            replaceCurrentMatch();
+          } else if (findAgain !== undefined) {
+            e.preventDefault();
+            findNextMatch(findAgain === 'previous', true);
+          }
+        },
+      });
+
+      // The replace input and its action buttons are tagged as replace cells so
+      // they can be hidden together when the panel is in find-only mode.
+      const replaceInputBox = h('div', {
+        dataset: { inputBox: '', replace: '', replaceCell: '' },
+        children: [replaceInputElement],
+      });
+
+      const replaceActionsElement = h('div', {
+        dataset: { replaceActions: '', replaceCell: '' },
+        children: [
+          iconButton({
+            icon: 'replace',
+            label: 'Replace',
+            onClick: replaceCurrentMatch,
+          }),
+          iconButton({
+            icon: 'replace-all',
+            label: 'Replace All',
+            onClick: replaceAllMatches,
+          }),
+        ],
+      });
+
+      gridChildren.push(replaceInputBox, replaceActionsElement);
+    }
+
+    gridChildren.push(matchResultElement, navElement, closeElement);
+
     // Cells are positioned by CSS grid-template-areas (see editor.css), so DOM
     // order here only drives tab/reading order, not layout. Keep the replace
     // input directly after the find input (and its toggles) so Tab walks
     // find -> replace before reaching the nav arrows and close button.
     const gridElement = h('div', {
-      dataset: { searchGrid: '', mode },
-      children: [
-        findInputBox,
-        replaceInputBox,
-        replaceActionsElement,
-        matchResultElement,
-        navElement,
-        closeElement,
-      ],
+      dataset: { searchGrid: '', mode: normalizeMode(mode) },
+      children: gridChildren,
     });
 
     // Toggles the panel between find and find/replace modes by showing or
     // hiding the replace cells, then returns focus to the find input.
     const applyMode = (next: SearchPanelMode) => {
-      gridElement.dataset.mode = next;
+      gridElement.dataset.mode = normalizeMode(next);
       this.#inputElement.focus();
       this.#inputElement.select();
     };
     this.#applyMode = applyMode;
 
-    this.#container = h('div', {
+    this.#host = h('div', {
       dataset: 'searchPanel',
-      children: [
-        h('div', {
-          dataset: 'editorWidget',
-          children: [gridElement],
-        }),
-      ],
     });
+    const shadowRoot = this.#host.attachShadow({ mode: 'open' });
+    const spriteContainer = document.createElement('div');
+    spriteContainer.innerHTML = SVGSpriteSheet;
+    const spriteElement = spriteContainer.firstElementChild;
+    if (spriteElement instanceof SVGElement) {
+      shadowRoot.appendChild(spriteElement);
+    }
+    h('style', { textContent: searchPanelCSS }, shadowRoot);
+
+    h(
+      'div',
+      {
+        dataset: 'searchPanel',
+        children: [
+          h('div', {
+            dataset: 'editorWidget',
+            children: [gridElement],
+          }),
+        ],
+      },
+      shadowRoot
+    );
 
     matches.current = initialMatch;
-    containerElement.before(this.#container);
+    containerElement.before(this.#host);
 
     requestAnimationFrame(() => {
       if (initialMatch !== undefined) {
@@ -466,6 +483,6 @@ export class SearchPanelWidget {
   // highlights in place; only use it when the caller clears that state itself
   // (e.g. a full editor reset). User-initiated dismissals should call close().
   cleanup(): void {
-    this.#container.remove();
+    this.#host.remove();
   }
 }
diff --git a/packages/diffs/src/editor/textDocument.ts b/packages/diffs/src/editor/textDocument.ts
index 0738a6253..fb533b651 100644
--- a/packages/diffs/src/editor/textDocument.ts
+++ b/packages/diffs/src/editor/textDocument.ts
@@ -1,3 +1,4 @@
+import type { MatchRange, SearchParams } from '../search';
 import type {
   DiffLineAnnotation,
   EditorChange,
@@ -15,7 +16,6 @@ import {
   shouldCoalesceEditStackEntry,
 } from './editStack';
 import { PieceTable } from './pieceTable';
-import type { SearchParams } from './searchPanel';
 
 export type { Position, Range, TextEdit } from '../types';
 
@@ -193,7 +193,7 @@ export class TextDocument<LAnnotation> {
     return this.#pieceTable.findNextNonOverlappingSubstring(needle, occupied);
   }
 
-  search(searchParams: SearchParams): [start: number, end: number][] {
+  search(searchParams: SearchParams): MatchRange[] {
     return this.#pieceTable.search(searchParams);
   }
 
diff --git a/packages/diffs/src/renderers/DiffHunksRenderer.ts b/packages/diffs/src/renderers/DiffHunksRenderer.ts
index 6daaed9f0..ff6885f64 100644
--- a/packages/diffs/src/renderers/DiffHunksRenderer.ts
+++ b/packages/diffs/src/renderers/DiffHunksRenderer.ts
@@ -23,6 +23,7 @@ import type {
   CodeColumnType,
   CustomPreProperties,
   DiffLineAnnotation,
+  DiffSearchLineDecoration,
   DiffsHighlighter,
   DiffsTextDocument,
   ExpansionDirections,
@@ -41,6 +42,7 @@ import type {
   ThemedDiffResult,
 } from '../types';
 import { applyLineTextWithNewline } from '../utils/applyLineTextWithNewline';
+import { applySearchDecorationsToLine } from '../utils/applySearchDecorations';
 import { areDiffRenderOptionsEqual } from '../utils/areDiffRenderOptionsEqual';
 import { areDiffTargetsEqual } from '../utils/areDiffTargetsEqual';
 import { areRenderRangesEqual } from '../utils/areRenderRangesEqual';
@@ -233,6 +235,13 @@ export class DiffHunksRenderer<LAnnotation = undefined> {
 
   private deletionAnnotations: AnnotationLineMap<LAnnotation> = {};
   private additionAnnotations: AnnotationLineMap<LAnnotation> = {};
+  private searchDecorations: Record<
+    'deletions' | 'additions',
+    Map<number, DiffSearchLineDecoration[]>
+  > = {
+    deletions: new Map(),
+    additions: new Map(),
+  };
 
   private computedLang: SupportedLanguages = 'text';
   private renderCache: RenderedDiffASTCache | undefined;
@@ -270,6 +279,7 @@ export class DiffHunksRenderer<LAnnotation = undefined> {
     this.clearRenderCache();
     this.additionAnnotations = {};
     this.deletionAnnotations = {};
+    this.setSearchDecorations(undefined);
     this.workerManager?.cleanUpTasks(this);
     // Session hunks and the metadata dirty marker survive recycle in the
     // shared FileDiffMetadata; the renderer-local state re-seeds on the next
@@ -377,6 +387,12 @@ export class DiffHunksRenderer<LAnnotation = undefined> {
     this.onRenderUpdate?.();
   }
 
+  public setSearchDecorations(
+    decorations: readonly DiffSearchLineDecoration[] | undefined
+  ): void {
+    this.searchDecorations = groupDiffSearchDecorationsBySide(decorations);
+  }
+
   public get diffCache(): FileDiffMetadata | undefined {
     return this.renderCache?.diff ?? this.diff;
   }
@@ -1410,7 +1426,7 @@ export class DiffHunksRenderer<LAnnotation = undefined> {
             lineDecoration.gutterProperties
           );
           if (additionLineContent != null) {
-            additionLineContent = withContentProperties(
+            const decoratedLine = withContentProperties(
               additionLineContent,
               lineDecoration.contentProperties,
               isRenderCacheDirty && additionLine != null
@@ -1420,8 +1436,16 @@ export class DiffHunksRenderer<LAnnotation = undefined> {
                   }
                 : undefined
             );
+            if (decoratedLine != null) {
+              additionLineContent = applySearchDecorationsToLine(
+                decoratedLine,
+                additionLine != null
+                  ? this.searchDecorations.additions.get(additionLine.lineIndex)
+                  : undefined
+              );
+            }
           } else if (deletionLineContent != null) {
-            deletionLineContent = withContentProperties(
+            const decoratedLine = withContentProperties(
               deletionLineContent,
               lineDecoration.contentProperties,
               isRenderCacheDirty && deletionLine != null
@@ -1431,6 +1455,14 @@ export class DiffHunksRenderer<LAnnotation = undefined> {
                   }
                 : undefined
             );
+            if (decoratedLine != null) {
+              deletionLineContent = applySearchDecorationsToLine(
+                decoratedLine,
+                deletionLine != null
+                  ? this.searchDecorations.deletions.get(deletionLine.lineIndex)
+                  : undefined
+              );
+            }
           }
           pushLineWithAnnotation({
             diffStyle: 'unified',
@@ -1545,7 +1577,10 @@ export class DiffHunksRenderer<LAnnotation = undefined> {
               deletionLineDecoration.gutterProperties
             );
             if (deletionLineDecorated != null) {
-              deletionLineContent = deletionLineDecorated;
+              deletionLineContent = applySearchDecorationsToLine(
+                deletionLineDecorated,
+                this.searchDecorations.deletions.get(deletionLine.lineIndex)
+              );
             }
           }
           if (additionLine != null) {
@@ -1567,7 +1602,10 @@ export class DiffHunksRenderer<LAnnotation = undefined> {
               additionLineDecoration.gutterProperties
             );
             if (additionLineDecorated != null) {
-              additionLineContent = additionLineDecorated;
+              additionLineContent = applySearchDecorationsToLine(
+                additionLineDecorated,
+                this.searchDecorations.additions.get(additionLine.lineIndex)
+              );
             }
           }
           pushLineWithAnnotation({
@@ -2000,6 +2038,26 @@ export class DiffHunksRenderer<LAnnotation = undefined> {
   }
 }
 
+function groupDiffSearchDecorationsBySide(
+  decorations: readonly DiffSearchLineDecoration[] | undefined
+): Record<'deletions' | 'additions', Map<number, DiffSearchLineDecoration[]>> {
+  const grouped = {
+    deletions: new Map<number, DiffSearchLineDecoration[]>(),
+    additions: new Map<number, DiffSearchLineDecoration[]>(),
+  };
+  if (decorations == null) {
+    return grouped;
+  }
+
+  for (const decoration of decorations) {
+    const sideDecorations = grouped[decoration.side];
+    const lineDecorations = sideDecorations.get(decoration.lineIndex) ?? [];
+    lineDecorations.push(decoration);
+    sideDecorations.set(decoration.lineIndex, lineDecorations);
+  }
+  return grouped;
+}
+
 function getAnnotationNames<LAnnotation>(
   annotations: DiffLineAnnotation<LAnnotation>[] | undefined
 ): string[] {
diff --git a/packages/diffs/src/renderers/FileRenderer.ts b/packages/diffs/src/renderers/FileRenderer.ts
index fed6a00c9..c3d38a9eb 100644
--- a/packages/diffs/src/renderers/FileRenderer.ts
+++ b/packages/diffs/src/renderers/FileRenderer.ts
@@ -25,10 +25,12 @@ import type {
   RenderFileOptions,
   RenderFileResult,
   RenderRange,
+  SearchLineDecoration,
   SupportedLanguages,
   ThemedFileResult,
 } from '../types';
 import { applyLineTextWithNewline } from '../utils/applyLineTextWithNewline';
+import { applySearchDecorationsToLine } from '../utils/applySearchDecorations';
 import { areFileRenderOptionsEqual } from '../utils/areFileRenderOptionsEqual';
 import { areFilesEqual } from '../utils/areFilesEqual';
 import { areRenderRangesEqual } from '../utils/areRenderRangesEqual';
@@ -109,6 +111,7 @@ export class FileRenderer<LAnnotation = undefined> {
   private renderCache: RenderedFileASTCache | undefined;
   private computedLang: SupportedLanguages = 'text';
   private lineAnnotations: AnnotationLineMap<LAnnotation> = {};
+  private searchDecorations = new Map<number, SearchLineDecoration[]>();
   private lineCache: LineCache | undefined;
   private pendingStructuralRows: Map<number, HASTElement> | undefined;
   private textDocumentCache = new WeakMap<FileContents, DiffsTextDocument>();
@@ -151,6 +154,12 @@ export class FileRenderer<LAnnotation = undefined> {
     }
   }
 
+  public setSearchDecorations(
+    decorations: readonly SearchLineDecoration[] | undefined
+  ): void {
+    this.searchDecorations = groupSearchDecorationsByLine(decorations);
+  }
+
   public cleanUp(): void {
     this.recycle();
     this.workerManager = undefined;
@@ -196,6 +205,7 @@ export class FileRenderer<LAnnotation = undefined> {
     // a result rebuilt from the file's own contents, which processFileResult
     // treats as a missing-line error.
     this.textDocumentCache = new WeakMap();
+    this.setSearchDecorations(undefined);
   }
 
   // An edit session patches the render caches in place but never rewrites
@@ -801,7 +811,12 @@ export class FileRenderer<LAnnotation = undefined> {
       gutter.children.push(
         createGutterItem('context', lineNumber, `${lineIndex}`)
       );
-      contentArray.push(line);
+      contentArray.push(
+        applySearchDecorationsToLine(
+          line,
+          this.searchDecorations.get(lineIndex)
+        )
+      );
       rowCount++;
 
       // Check annotations using ACTUAL line number from file
@@ -993,6 +1008,22 @@ export class FileRenderer<LAnnotation = undefined> {
   }
 }
 
+function groupSearchDecorationsByLine(
+  decorations: readonly SearchLineDecoration[] | undefined
+): Map<number, SearchLineDecoration[]> {
+  const grouped = new Map<number, SearchLineDecoration[]>();
+  if (decorations == null) {
+    return grouped;
+  }
+
+  for (const decoration of decorations) {
+    const lineDecorations = grouped.get(decoration.lineIndex) ?? [];
+    lineDecorations.push(decoration);
+    grouped.set(decoration.lineIndex, lineDecorations);
+  }
+  return grouped;
+}
+
 function isFileMassive(lineCount: number, tokenizeMaxLength: number): boolean {
   return lineCount > tokenizeMaxLength;
 }
diff --git a/packages/diffs/src/search.ts b/packages/diffs/src/search.ts
new file mode 100644
index 000000000..94ad5648a
--- /dev/null
+++ b/packages/diffs/src/search.ts
@@ -0,0 +1,237 @@
+export type MatchRange = [startOffset: number, endOffset: number];
+
+export interface SearchParams {
+  text: string;
+  replaceText: string;
+  caseSensitive: boolean;
+  wholeWord: boolean;
+  regex: boolean;
+}
+
+export interface SearchPosition {
+  readonly line: number;
+  readonly character: number;
+}
+
+export interface LineByLineSearchDocument {
+  readonly textLength: number;
+  readonly lineCount: number;
+  getLineText(line: number): string;
+  getLineStartOffset(line: number): number;
+  charAt(offset: number): string;
+}
+
+export const MAX_FIND_MATCHES = 100000;
+
+// TODO(ije): use Intl.Segmenter instead of regex for word separators
+const WORD_SEPARATORS = '`~!@#$%^&*()-=+[{]}\\|;:\'",.<>/?' as const;
+
+export function searchLineByLine(
+  document: LineByLineSearchDocument,
+  searchParams: SearchParams,
+  limit: number = MAX_FIND_MATCHES
+): MatchRange[] {
+  if (searchParams.text.length === 0 || document.textLength === 0) {
+    return [];
+  }
+
+  // Search currently operates line-by-line, so newline-spanning patterns are unsupported.
+  if (isNewlineSpanningSearch(searchParams.text, searchParams.regex)) {
+    return [];
+  }
+
+  let pattern: RegExp;
+  try {
+    pattern = compileSearchRegExp(
+      searchParams.text,
+      searchParams.regex,
+      searchParams.caseSensitive
+    );
+  } catch {
+    return [];
+  }
+
+  return collectSearchMatchesLineByLine(
+    document,
+    pattern,
+    searchParams.wholeWord,
+    limit
+  );
+}
+
+/** Expands `$&`, `$1`, `$$`, etc. in a regex replace string using a match. */
+export function buildSearchReplacementText(
+  positionAt: (offset: number) => SearchPosition,
+  offsetAt: (position: SearchPosition) => number,
+  getLineText: (line: number) => string,
+  searchParams: SearchParams,
+  matchStart: number,
+  matchEnd: number
+): string {
+  if (!searchParams.regex) {
+    return searchParams.replaceText;
+  }
+
+  const position = positionAt(matchStart);
+  const lineText = getLineText(position.line);
+  const lineStart = offsetAt({ line: position.line, character: 0 });
+  const relStart = matchStart - lineStart;
+
+  let pattern: RegExp;
+  try {
+    pattern = compileSearchRegExp(
+      searchParams.text,
+      true,
+      searchParams.caseSensitive
+    );
+  } catch {
+    return searchParams.replaceText;
+  }
+
+  // Re-run at the original line offset so lookaround can inspect context
+  // outside the matched range while captures still come from this exact hit.
+  pattern.lastIndex = relStart;
+  const match = pattern.exec(lineText);
+  if (
+    match === null ||
+    match.index !== relStart ||
+    match[0].length !== matchEnd - matchStart
+  ) {
+    return searchParams.replaceText;
+  }
+  return expandReplaceString(searchParams.replaceText, match);
+}
+
+function isNewlineSpanningSearch(text: string, isRegex: boolean): boolean {
+  return (
+    text.includes('\n') ||
+    text.includes('\r') ||
+    (isRegex && (text.includes('\\n') || text.includes('\\r')))
+  );
+}
+
+function collectSearchMatchesLineByLine(
+  document: LineByLineSearchDocument,
+  pattern: RegExp,
+  wholeWord: boolean,
+  limit: number
+): MatchRange[] {
+  const out: MatchRange[] = [];
+  const charAt = (offset: number) => document.charAt(offset);
+
+  // Reuse the single compiled pattern across every line, resetting its
+  // lastIndex before each line, instead of allocating a fresh RegExp per line.
+  // The pattern is global, so lastIndex tracks progress within a line.
+  for (let line = 0; line < document.lineCount; line++) {
+    const lineText = document.getLineText(line);
+    const lineStart = document.getLineStartOffset(line);
+    pattern.lastIndex = 0;
+    let match: RegExpExecArray | null;
+    while ((match = pattern.exec(lineText)) !== null) {
+      const rel = match.index;
+      const fragment = match[0];
+      if (fragment.length === 0) {
+        pattern.lastIndex = advancePastEmptyMatch(lineText, rel);
+        continue;
+      }
+      const docStart = lineStart + rel;
+      if (
+        !wholeWord ||
+        isWholeWordAtDocOffsets(
+          docStart,
+          fragment.length,
+          document.textLength,
+          charAt
+        )
+      ) {
+        out.push([docStart, docStart + fragment.length]);
+        if (out.length >= limit) {
+          return out;
+        }
+      }
+      if (rel === pattern.lastIndex) {
+        pattern.lastIndex = advancePastEmptyMatch(lineText, rel);
+      }
+    }
+  }
+  return out;
+}
+
+function escapeRegExp(text: string): string {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function compileSearchRegExp(
+  source: string,
+  isRegex: boolean,
+  caseSensitive: boolean
+): RegExp {
+  const body = isRegex ? source : escapeRegExp(source);
+  const flags = `g${caseSensitive ? '' : 'i'}${isRegex ? 'm' : ''}`;
+  return new RegExp(body, flags);
+}
+
+function isWordSeparatorCharCode(charCode: number): boolean {
+  if (charCode <= 32 || charCode === 127) {
+    return true;
+  }
+  const ch = String.fromCharCode(charCode);
+  return WORD_SEPARATORS.includes(ch);
+}
+
+// Checks if the given text is a whole word by checking if the
+// characters before and after are word separators.
+function isWholeWordAtDocOffsets(
+  docStart: number,
+  length: number,
+  docLength: number,
+  charAt: (offset: number) => string
+): boolean {
+  const beforeOk =
+    docStart <= 0 ||
+    isWordSeparatorCharCode(charCodeUnitAt(charAt, docStart - 1));
+  const afterOk =
+    docStart + length >= docLength ||
+    isWordSeparatorCharCode(charCodeUnitAt(charAt, docStart + length));
+  return beforeOk && afterOk;
+}
+
+function charCodeUnitAt(
+  charAt: (offset: number) => string,
+  offset: number
+): number {
+  const unit = charAt(offset);
+  return unit.length === 0 ? 0 : unit.charCodeAt(0);
+}
+
+function expandReplaceString(
+  replacement: string,
+  match: RegExpExecArray
+): string {
+  return replacement.replace(/\$([$&]|\d+)/g, (_token, group: string) => {
+    if (group === '$') {
+      return '$';
+    }
+    if (group === '&') {
+      return match[0] ?? '';
+    }
+    const index = Number(group);
+    return match[index] ?? '';
+  });
+}
+
+function advancePastEmptyMatch(text: string, index: number): number {
+  if (index + 1 < text.length) {
+    const first = text.charCodeAt(index);
+    const second = text.charCodeAt(index + 1);
+    if (
+      first >= 0xd800 &&
+      first <= 0xdbff &&
+      second >= 0xdc00 &&
+      second <= 0xdfff
+    ) {
+      return index + 2;
+    }
+  }
+  return index + 1;
+}
diff --git a/packages/diffs/src/style.css b/packages/diffs/src/style.css
index e796d1b77..dcc6b51ec 100644
--- a/packages/diffs/src/style.css
+++ b/packages/diffs/src/style.css
@@ -1474,6 +1474,28 @@
     box-decoration-break: clone;
   }
 
+  :is([data-line], [data-no-newline]) [data-search-match] {
+    border-radius: 3px;
+    box-decoration-break: clone;
+    background-color: var(
+      --diffs-bg-search-match-override,
+      var(--diffs-editor-match-highlight-bg, light-dark(#ff963288, #ff963266))
+    );
+  }
+
+  :is([data-line], [data-no-newline]) [data-search-match-current] {
+    background-color: var(
+      --diffs-bg-search-match-current-override,
+      var(
+        --diffs-editor-match-bg,
+        var(
+          --diffs-editor-selection-bg,
+          color-mix(in lab, var(--diffs-modified-base) 52%, transparent)
+        )
+      )
+    );
+  }
+
   [data-line-type='change-addition'] [data-diff-span] {
     background-color: var(--diffs-bg-addition-emphasis);
   }
diff --git a/packages/diffs/src/types.ts b/packages/diffs/src/types.ts
index 96f3a87d6..39fa28bbf 100644
--- a/packages/diffs/src/types.ts
+++ b/packages/diffs/src/types.ts
@@ -521,6 +521,17 @@ export type ExtensionFormatMap = Record<string, SupportedLanguages | undefined>;
 export type AnnotationSide = 'deletions' | 'additions';
 export type SelectionSide = 'deletions' | 'additions';
 
+export interface SearchLineDecoration {
+  lineIndex: number;
+  startCharacter: number;
+  endCharacter: number;
+  current?: boolean;
+}
+
+export interface DiffSearchLineDecoration extends SearchLineDecoration {
+  side: SelectionSide;
+}
+
 export interface SelectedLineRange {
   start: number;
   side?: SelectionSide;
diff --git a/packages/diffs/src/utils/applySearchDecorations.ts b/packages/diffs/src/utils/applySearchDecorations.ts
new file mode 100644
index 000000000..11484645e
--- /dev/null
+++ b/packages/diffs/src/utils/applySearchDecorations.ts
@@ -0,0 +1,180 @@
+import type { ElementContent, Element as HASTElement, Text } from 'hast';
+
+import type { SearchLineDecoration } from '../types';
+import { createHastElement, createTextNodeElement } from './hast_utils';
+
+interface SearchDecorationRange {
+  start: number;
+  end: number;
+  current: boolean;
+}
+
+interface DecorationContext {
+  ranges: SearchDecorationRange[];
+  offset: number;
+  rangeIndex: number;
+  changed: boolean;
+}
+
+export function applySearchDecorationsToLine(
+  line: ElementContent,
+  decorations: readonly SearchLineDecoration[] | undefined
+): ElementContent {
+  const ranges = normalizeSearchDecorationRanges(decorations);
+  if (ranges.length === 0 || line.type !== 'element') {
+    return line;
+  }
+
+  const context: DecorationContext = {
+    ranges,
+    offset: 0,
+    rangeIndex: 0,
+    changed: false,
+  };
+  const result = decorateElement(line, context);
+  return context.changed ? result : line;
+}
+
+function normalizeSearchDecorationRanges(
+  decorations: readonly SearchLineDecoration[] | undefined
+): SearchDecorationRange[] {
+  if (decorations == null || decorations.length === 0) {
+    return [];
+  }
+
+  return decorations
+    .filter(({ startCharacter, endCharacter }) => endCharacter > startCharacter)
+    .map(({ startCharacter, endCharacter, current }) => ({
+      start: startCharacter,
+      end: endCharacter,
+      current: current === true,
+    }))
+    .sort((a, b) => {
+      const startDelta = a.start - b.start;
+      return startDelta !== 0 ? startDelta : a.end - b.end;
+    });
+}
+
+function decorateElement(
+  node: HASTElement,
+  context: DecorationContext
+): HASTElement {
+  const children: ElementContent[] = [];
+  let childrenChanged = false;
+
+  for (const child of node.children) {
+    const decorated = decorateNode(child, context);
+    if (Array.isArray(decorated)) {
+      children.push(...decorated);
+      childrenChanged = true;
+    } else {
+      children.push(decorated);
+      childrenChanged ||= decorated !== child;
+    }
+  }
+
+  if (!childrenChanged) {
+    return node;
+  }
+
+  return {
+    ...node,
+    properties: { ...node.properties },
+    children,
+  };
+}
+
+function decorateNode(
+  node: ElementContent,
+  context: DecorationContext
+): ElementContent | ElementContent[] {
+  if (node.type === 'text') {
+    return decorateText(node, context);
+  }
+  if (node.type === 'element') {
+    return decorateElement(node, context);
+  }
+  return node;
+}
+
+function decorateText(
+  node: Text,
+  context: DecorationContext
+): ElementContent | ElementContent[] {
+  const { value } = node;
+  const textStart = context.offset;
+  const textEnd = textStart + value.length;
+  const segments: ElementContent[] = [];
+  let localOffset = 0;
+
+  while (context.rangeIndex < context.ranges.length) {
+    const range = context.ranges[context.rangeIndex];
+    if (range == null) {
+      break;
+    }
+    if (range.end <= textStart + localOffset) {
+      context.rangeIndex++;
+      continue;
+    }
+    if (range.start >= textEnd) {
+      break;
+    }
+
+    if (range.start > textStart + localOffset) {
+      const segmentEnd = range.start - textStart;
+      pushTextSegment(segments, value.slice(localOffset, segmentEnd));
+      localOffset = segmentEnd;
+      continue;
+    }
+
+    const segmentEnd = Math.min(value.length, range.end - textStart);
+    pushSearchSegment(
+      segments,
+      value.slice(localOffset, segmentEnd),
+      range.current
+    );
+    localOffset = segmentEnd;
+    if (textStart + localOffset >= range.end) {
+      context.rangeIndex++;
+    }
+  }
+
+  if (localOffset < value.length) {
+    pushTextSegment(segments, value.slice(localOffset));
+  }
+
+  context.offset = textEnd;
+  if (segments.length === 0) {
+    return node;
+  }
+
+  context.changed = true;
+  return segments;
+}
+
+function pushTextSegment(segments: ElementContent[], value: string): void {
+  if (value.length === 0) {
+    return;
+  }
+  segments.push(createTextNodeElement(value));
+}
+
+function pushSearchSegment(
+  segments: ElementContent[],
+  value: string,
+  current: boolean
+): void {
+  if (value.length === 0) {
+    return;
+  }
+  segments.push(
+    createHastElement({
+      tagName: 'span',
+      properties: {
+        'data-search-match': '',
+        'data-search-match-current': current ? '' : undefined,
+      },
+      children: [createTextNodeElement(value)],
+    })
+  );
+}
diff --git a/packages/diffs/src/utils/getHighlighterThemeStyles.ts b/packages/diffs/src/utils/getHighlighterThemeStyles.ts
index d8aadc093..0de439f0b 100644
--- a/packages/diffs/src/utils/getHighlighterThemeStyles.ts
+++ b/packages/diffs/src/utils/getHighlighterThemeStyles.ts
@@ -38,23 +38,58 @@ export function getHighlighterThemeStyles({
     styles += `background-color:${normalized.bg};`;
     styles += `${formatCSSVariablePrefix('global')}fg:${normalized.fg};`;
     styles += `${formatCSSVariablePrefix('global')}bg:${normalized.bg};`;
+    styles += getEditorSearchVariables(normalized);
     styles += getGitVariables(themeData, prefix);
   } else {
     let themeData = highlighter.getTheme(theme.dark);
     let normalized = normalizeThemeColors(themeData);
     styles += `${formatCSSVariablePrefix('global')}dark:${normalized.fg};`;
     styles += `${formatCSSVariablePrefix('global')}dark-bg:${normalized.bg};`;
+    styles += getEditorSearchVariables(normalized, 'dark');
     styles += getGitVariables(themeData, 'dark');
 
     themeData = highlighter.getTheme(theme.light);
     normalized = normalizeThemeColors(themeData);
     styles += `${formatCSSVariablePrefix('global')}light:${normalized.fg};`;
     styles += `${formatCSSVariablePrefix('global')}light-bg:${normalized.bg};`;
+    styles += getEditorSearchVariables(normalized, 'light');
+    styles += getPairedEditorSearchVariables();
     styles += getGitVariables(themeData, 'light');
   }
   return styles;
 }
 
+function getPairedEditorSearchVariables() {
+  return [
+    '--diffs-editor-selection-bg:light-dark(var(--diffs-light-editor-selection-bg, var(--diffs-line-bg)), var(--diffs-dark-editor-selection-bg, var(--diffs-line-bg)));',
+    '--diffs-editor-match-bg:light-dark(var(--diffs-light-editor-match-bg, var(--diffs-light-editor-selection-bg, var(--diffs-editor-selection-bg))), var(--diffs-dark-editor-match-bg, var(--diffs-dark-editor-selection-bg, var(--diffs-editor-selection-bg))));',
+    '--diffs-editor-match-highlight-bg:light-dark(var(--diffs-light-editor-match-highlight-bg, #ff963288), var(--diffs-dark-editor-match-highlight-bg, #ff963266));',
+  ].join('');
+}
+
+function getEditorSearchVariables(
+  themeData: { colors?: Record<string, string> },
+  modePrefix?: string
+) {
+  modePrefix = modePrefix != null ? `${modePrefix}-` : '';
+  let styles = '';
+  const { colors = {} } = themeData;
+  const selectionBackground = colors['editor.selectionBackground'];
+  if (selectionBackground != null) {
+    styles += `${formatCSSVariablePrefix('global')}${modePrefix}editor-selection-bg:${selectionBackground};`;
+  }
+  const findMatchBackground = colors['editor.findMatchBackground'];
+  if (findMatchBackground != null) {
+    styles += `${formatCSSVariablePrefix('global')}${modePrefix}editor-match-bg:${findMatchBackground};`;
+  }
+  const findMatchHighlightBackground =
+    colors['editor.findMatchHighlightBackground'];
+  if (findMatchHighlightBackground != null) {
+    styles += `${formatCSSVariablePrefix('global')}${modePrefix}editor-match-highlight-bg:${findMatchHighlightBackground};`;
+  }
+  return styles;
+}
+
 // Emits the diffs git-status CSS variables (addition/deletion/modified colors)
 // for a resolved theme. This intentionally uses the diffs-local 2-link lookup
 // (gitDecoration.* → terminal.ansi*) and STOPS before the editorGutter.* tail
diff --git a/packages/diffs/test/CodeView.searchPanel.test.ts b/packages/diffs/test/CodeView.searchPanel.test.ts
new file mode 100644
index 000000000..2852445ac
--- /dev/null
+++ b/packages/diffs/test/CodeView.searchPanel.test.ts
@@ -0,0 +1,555 @@
+import { describe, expect, test } from 'bun:test';
+
+import { CodeView } from '../src/components/CodeView';
+import { parseDiffFromFile } from '../src/utils/parseDiffFromFile';
+import { createRoot, installDom, renderItems, wait } from './domHarness';
+
+interface SearchMatchProbe {
+  itemId: string;
+  itemType: 'file' | 'diff';
+  side: 'deletions' | 'additions' | undefined;
+  lineNumber: number;
+  lineIndex: number;
+  renderedLineIndex: number;
+  startCharacter: number;
+  endCharacter: number;
+}
+
+interface SearchStateProbe {
+  searchState: {
+    matches: SearchMatchProbe[];
+    current: SearchMatchProbe | undefined;
+  };
+}
+
+function dispatchPrimaryFind(root: HTMLElement, altKey = false): KeyboardEvent {
+  const attempts = [
+    { metaKey: true, ctrlKey: false },
+    { metaKey: false, ctrlKey: true },
+  ];
+  let lastEvent: KeyboardEvent | undefined;
+  for (const modifiers of attempts) {
+    const event = new window.KeyboardEvent('keydown', {
+      key: 'f',
+      code: 'KeyF',
+      altKey,
+      bubbles: true,
+      cancelable: true,
+      ...modifiers,
+    });
+    root.dispatchEvent(event);
+    lastEvent = event;
+    if (event.defaultPrevented) {
+      return event;
+    }
+  }
+  return lastEvent!;
+}
+
+function dispatchFindAgain(
+  target: EventTarget,
+  options: { previous?: boolean; composed?: boolean } = {}
+): KeyboardEvent {
+  const attempts = [
+    { metaKey: true, ctrlKey: false },
+    { metaKey: false, ctrlKey: true },
+  ];
+  let lastEvent: KeyboardEvent | undefined;
+  for (const modifiers of attempts) {
+    const event = new window.KeyboardEvent('keydown', {
+      key: 'g',
+      code: 'KeyG',
+      shiftKey: options.previous === true,
+      bubbles: true,
+      cancelable: true,
+      composed: options.composed === true,
+      ...modifiers,
+    });
+    target.dispatchEvent(event);
+    lastEvent = event;
+    if (event.defaultPrevented) {
+      return event;
+    }
+  }
+  return lastEvent!;
+}
+
+function dispatchEscape(root: HTMLElement): KeyboardEvent {
+  const event = new window.KeyboardEvent('keydown', {
+    key: 'Escape',
+    code: 'Escape',
+    bubbles: true,
+    cancelable: true,
+  });
+  root.dispatchEvent(event);
+  return event;
+}
+
+function fillSearch(root: HTMLElement, value: string): void {
+  const input = getSearchInput(root);
+  input.value = value;
+  input.dispatchEvent(new window.Event('input', { bubbles: true }));
+}
+
+function getSearchPanelHost(root: HTMLElement): HTMLElement {
+  const host = root.querySelector<HTMLElement>('[data-search-panel]');
+  if (host === null) {
+    throw new Error('Expected CodeView search panel');
+  }
+  return host;
+}
+
+function getSearchPanelRoot(root: HTMLElement): ShadowRoot {
+  const shadowRoot = getSearchPanelHost(root).shadowRoot;
+  if (shadowRoot === null) {
+    throw new Error('Expected CodeView search panel shadow root');
+  }
+  return shadowRoot;
+}
+
+function getSearchInput(root: HTMLElement): HTMLInputElement {
+  const input =
+    getSearchPanelRoot(root).querySelector<HTMLInputElement>(
+      'input[data-search]'
+    );
+  if (input === null) {
+    throw new Error('Expected CodeView search input');
+  }
+  return input;
+}
+
+function pressSearchEnter(root: HTMLElement): KeyboardEvent {
+  const event = new window.KeyboardEvent('keydown', {
+    key: 'Enter',
+    code: 'Enter',
+    bubbles: true,
+    cancelable: true,
+  });
+  getSearchInput(root).dispatchEvent(event);
+  return event;
+}
+
+function makeSearchScrollContents(): string {
+  return Array.from({ length: 600 }, (_, index) => {
+    if (index === 0) {
+      return 'target first';
+    }
+    if (index === 499) {
+      return 'target second';
+    }
+    return `line ${index + 1}`;
+  }).join('\n');
+}
+
+function getSearchState(viewer: CodeView): SearchStateProbe['searchState'] {
+  return (viewer as unknown as SearchStateProbe).searchState;
+}
+
+function getRenderedSearchMatches(root: HTMLElement): HTMLElement[] {
+  return Array.from(root.querySelectorAll<HTMLElement>('*')).flatMap(
+    (element) =>
+      Array.from(
+        element.shadowRoot?.querySelectorAll<HTMLElement>(
+          '[data-search-match]'
+        ) ?? []
+      )
+  );
+}
+
+function getRenderedCurrentSearchMatches(root: HTMLElement): HTMLElement[] {
+  return getRenderedSearchMatches(root).filter(
+    (element) => element.dataset.searchMatchCurrent !== undefined
+  );
+}
+
+function getSearchMatchSide(element: HTMLElement): string | undefined {
+  if (element.closest('[data-deletions]') != null) {
+    return 'deletions';
+  }
+  if (element.closest('[data-additions]') != null) {
+    return 'additions';
+  }
+  if (element.closest('[data-unified]') != null) {
+    return 'unified';
+  }
+  return undefined;
+}
+
+describe('CodeView search panel', () => {
+  test('opens a find-only panel from the primary find shortcut', async () => {
+    const dom = installDom();
+    const viewer = new CodeView();
+    try {
+      const root = createRoot();
+      viewer.setup(root);
+
+      const event = dispatchPrimaryFind(root, true);
+      await wait(0);
+
+      const panel = getSearchPanelHost(root);
+      const panelRoot = getSearchPanelRoot(root);
+      const grid = panelRoot.querySelector<HTMLElement>('[data-search-grid]');
+      const input =
+        panelRoot.querySelector<HTMLInputElement>('input[data-search]');
+
+      expect(event.defaultPrevented).toBe(true);
+      expect(panel).not.toBeNull();
+      expect(panel.dataset.searchPanelOverlay).toBe('');
+      expect(grid?.dataset.mode).toBe('find');
+      expect(panelRoot.querySelector('[data-replace]')).toBeNull();
+      expect(input).not.toBeNull();
+      expect(panelRoot.activeElement).toBe(input ?? null);
+
+      const escapeEvent = dispatchEscape(root);
+
+      expect(escapeEvent.defaultPrevented).toBe(true);
+      expect(root.querySelector('[data-search-panel]')).toBeNull();
+
+      dispatchPrimaryFind(root);
+      await wait(0);
+      expect(root.querySelector('[data-search-panel]')).not.toBeNull();
+
+      viewer.cleanUp();
+      expect(root.querySelector('[data-search-panel]')).toBeNull();
+    } finally {
+      viewer.cleanUp();
+      dom.cleanup();
+    }
+  });
+
+  test('indexes matches in file items from the panel query', async () => {
+    const dom = installDom();
+    const viewer = new CodeView();
+    try {
+      const root = createRoot();
+      viewer.setup(root);
+      await renderItems(viewer, [
+        {
+          id: 'file-a',
+          type: 'file',
+          file: {
+            name: 'file-a.ts',
+            contents: 'alpha hit\nmiss\nHIT again\nhit-end\n',
+          },
+        },
+      ]);
+
+      dispatchPrimaryFind(root);
+      await wait(0);
+      fillSearch(root, 'hit');
+
+      expect(
+        getSearchState(viewer).matches.map(
+          ({ lineNumber, startCharacter, endCharacter }) => ({
+            lineNumber,
+            startCharacter,
+            endCharacter,
+          })
+        )
+      ).toEqual([
+        { lineNumber: 1, startCharacter: 6, endCharacter: 9 },
+        { lineNumber: 3, startCharacter: 0, endCharacter: 3 },
+        { lineNumber: 4, startCharacter: 0, endCharacter: 3 },
+      ]);
+      expect(
+        getSearchPanelRoot(root).querySelector('[data-matches]')?.textContent
+      ).toBe('1 of 3');
+    } finally {
+      viewer.cleanUp();
+      dom.cleanup();
+    }
+  });
+
+  test('renders file match highlights and marks the current match', async () => {
+    const dom = installDom();
+    const viewer = new CodeView();
+    try {
+      const root = createRoot();
+      viewer.setup(root);
+      await renderItems(viewer, [
+        {
+          id: 'file-a',
+          type: 'file',
+          file: {
+            name: 'file-a.ts',
+            contents: 'alpha hit\nmiss\nHIT again\nhit-end\n',
+          },
+        },
+      ]);
+
+      dispatchPrimaryFind(root);
+      await wait(0);
+      fillSearch(root, 'hit');
+      await wait(0);
+      await wait(0);
+
+      expect(
+        getRenderedSearchMatches(root).map((element) => element.textContent)
+      ).toEqual(['hit', 'HIT', 'hit']);
+      expect(
+        getRenderedCurrentSearchMatches(root).map(
+          (element) => element.textContent
+        )
+      ).toEqual(['hit']);
+
+      pressSearchEnter(root);
+      await wait(0);
+      await wait(0);
+
+      expect(
+        getRenderedCurrentSearchMatches(root).map(
+          (element) => element.textContent
+        )
+      ).toEqual(['HIT']);
+
+      dispatchEscape(root);
+      await wait(0);
+      await wait(0);
+
+      expect(getRenderedSearchMatches(root)).toEqual([]);
+    } finally {
+      viewer.cleanUp();
+      dom.cleanup();
+    }
+  });
+
+  test('indexes split diff deletion and addition cells separately', async () => {
+    const dom = installDom();
+    const viewer = new CodeView();
+    try {
+      const root = createRoot();
+      viewer.setup(root);
+      await renderItems(viewer, [
+        {
+          id: 'diff-a',
+          type: 'diff',
+          fileDiff: parseDiffFromFile(
+            { name: 'diff-a.ts', contents: 'same\nonly-old\nsame\n' },
+            { name: 'diff-a.ts', contents: 'same\nonly-new\nsame\n' }
+          ),
+        },
+      ]);
+
+      dispatchPrimaryFind(root);
+      await wait(0);
+      fillSearch(root, 'only');
+
+      expect(
+        getSearchState(viewer).matches.map(
+          ({ side, lineNumber, lineIndex, renderedLineIndex }) => ({
+            side,
+            lineNumber,
+            lineIndex,
+            renderedLineIndex,
+          })
+        )
+      ).toEqual([
+        {
+          side: 'deletions',
+          lineNumber: 2,
+          lineIndex: 1,
+          renderedLineIndex: 1,
+        },
+        {
+          side: 'additions',
+          lineNumber: 2,
+          lineIndex: 1,
+          renderedLineIndex: 1,
+        },
+      ]);
+    } finally {
+      viewer.cleanUp();
+      dom.cleanup();
+    }
+  });
+
+  test('renders split diff match highlights on each side', async () => {
+    const dom = installDom();
+    const viewer = new CodeView();
+    try {
+      const root = createRoot();
+      viewer.setup(root);
+      await renderItems(viewer, [
+        {
+          id: 'diff-a',
+          type: 'diff',
+          fileDiff: parseDiffFromFile(
+            { name: 'diff-a.ts', contents: 'same\nonly-old\nsame\n' },
+            { name: 'diff-a.ts', contents: 'same\nonly-new\nsame\n' }
+          ),
+        },
+      ]);
+
+      dispatchPrimaryFind(root);
+      await wait(0);
+      fillSearch(root, 'only');
+      await wait(0);
+      await wait(0);
+
+      expect(
+        getRenderedSearchMatches(root).map((element) => ({
+          side: getSearchMatchSide(element),
+          text: element.textContent,
+        }))
+      ).toEqual([
+        { side: 'deletions', text: 'only' },
+        { side: 'additions', text: 'only' },
+      ]);
+    } finally {
+      viewer.cleanUp();
+      dom.cleanup();
+    }
+  });
+
+  test('indexes unified diff rows in rendered row order', async () => {
+    const dom = installDom();
+    const viewer = new CodeView({ diffStyle: 'unified' });
+    try {
+      const root = createRoot();
+      viewer.setup(root);
+      await renderItems(viewer, [
+        {
+          id: 'diff-a',
+          type: 'diff',
+          fileDiff: parseDiffFromFile(
+            { name: 'diff-a.ts', contents: 'same\nonly-old\nsame\n' },
+            { name: 'diff-a.ts', contents: 'same\nonly-new\nsame\n' }
+          ),
+        },
+      ]);
+
+      dispatchPrimaryFind(root);
+      await wait(0);
+      fillSearch(root, 'only');
+
+      expect(
+        getSearchState(viewer).matches.map(({ side, renderedLineIndex }) => ({
+          side,
+          renderedLineIndex,
+        }))
+      ).toEqual([
+        { side: 'deletions', renderedLineIndex: 1 },
+        { side: 'additions', renderedLineIndex: 2 },
+      ]);
+    } finally {
+      viewer.cleanUp();
+      dom.cleanup();
+    }
+  });
+
+  test('navigates indexed matches from the search panel', async () => {
+    const dom = installDom();
+    const viewer = new CodeView();
+    try {
+      const root = createRoot();
+      viewer.setup(root);
+      await renderItems(viewer, [
+        {
+          id: 'file-a',
+          type: 'file',
+          file: {
+            name: 'file-a.ts',
+            contents: 'first hit\nmiss\nsecond hit\n',
+          },
+        },
+      ]);
+
+      dispatchPrimaryFind(root);
+      await wait(0);
+      fillSearch(root, 'hit');
+
+      expect(getSearchState(viewer).current?.lineNumber).toBe(1);
+      expect(
+        getSearchPanelRoot(root).querySelector('[data-matches]')?.textContent
+      ).toBe('1 of 2');
+
+      const firstEnter = pressSearchEnter(root);
+      expect(firstEnter.defaultPrevented).toBe(true);
+      expect(getSearchState(viewer).current?.lineNumber).toBe(3);
+      expect(
+        getSearchPanelRoot(root).querySelector('[data-matches]')?.textContent
+      ).toBe('2 of 2');
+
+      pressSearchEnter(root);
+      expect(getSearchState(viewer).current?.lineNumber).toBe(1);
+      expect(
+        getSearchPanelRoot(root).querySelector('[data-matches]')?.textContent
+      ).toBe('1 of 2');
+
+      fillSearch(root, '');
+      expect(getSearchState(viewer).matches).toEqual([]);
+      expect(getSearchState(viewer).current).toBeUndefined();
+    } finally {
+      viewer.cleanUp();
+      dom.cleanup();
+    }
+  });
+
+  test('navigates and scrolls from the root find-again shortcut', async () => {
+    const dom = installDom();
+    const viewer = new CodeView();
+    try {
+      const root = createRoot();
+      viewer.setup(root);
+      await renderItems(viewer, [
+        {
+          id: 'file-a',
+          type: 'file',
+          file: {
+            name: 'file-a.ts',
+            contents: makeSearchScrollContents(),
+          },
+        },
+      ]);
+
+      dispatchPrimaryFind(root);
+      await wait(0);
+      fillSearch(root, 'target');
+      expect(getSearchState(viewer).current?.lineNumber).toBe(1);
+
+      const event = dispatchFindAgain(root);
+      expect(event.defaultPrevented).toBe(true);
+      expect(getSearchState(viewer).current?.lineNumber).toBe(500);
+
+      viewer.render(true);
+      expect(root.scrollTop).toBeGreaterThan(0);
+    } finally {
+      viewer.cleanUp();
+      dom.cleanup();
+    }
+  });
+
+  test('keeps composed input find-again shortcut scrolls pending', async () => {
+    const dom = installDom();
+    const viewer = new CodeView();
+    try {
+      const root = createRoot();
+      viewer.setup(root);
+      await renderItems(viewer, [
+        {
+          id: 'file-a',
+          type: 'file',
+          file: {
+            name: 'file-a.ts',
+            contents: makeSearchScrollContents(),
+          },
+        },
+      ]);
+
+      dispatchPrimaryFind(root);
+      await wait(0);
+      fillSearch(root, 'target');
+      expect(getSearchState(viewer).current?.lineNumber).toBe(1);
+
+      const event = dispatchFindAgain(getSearchInput(root), { composed: true });
+      expect(event.defaultPrevented).toBe(true);
+      expect(getSearchState(viewer).current?.lineNumber).toBe(500);
+
+      viewer.render(true);
+      expect(root.scrollTop).toBeGreaterThan(0);
+    } finally {
+      viewer.cleanUp();
+      dom.cleanup();
+    }
+  });
+});
diff --git a/packages/diffs/test/e2e/find-replace.pw.ts b/packages/diffs/test/e2e/find-replace.pw.ts
index 18633849c..874b5f821 100644
--- a/packages/diffs/test/e2e/find-replace.pw.ts
+++ b/packages/diffs/test/e2e/find-replace.pw.ts
@@ -21,7 +21,6 @@ const contents = (page: Page): Promise<string> =>
 async function openSearchPanel(page: Page): Promise<void> {
   await page.locator(CONTENT).click();
   await page.keyboard.press('ControlOrMeta+f');
-  await expect(page.locator(PANEL)).toHaveCount(1);
   await expect(page.locator(SEARCH_INPUT)).toBeVisible();
 }
 
@@ -114,7 +113,7 @@ test.describe('find and replace', () => {
     // Escape. This is handled by the content-focused keydown handler, a
     // separate teardown path that must clear the highlights too.
     await page.locator(CONTENT).click();
-    await expect(page.locator(PANEL)).toHaveCount(1);
+    await expect(page.locator(SEARCH_INPUT)).toBeVisible();
     await page.keyboard.press('Escape');
 
     await expect(page.locator(PANEL)).toHaveCount(0);
diff --git a/packages/diffs/test/editorCollapsedEdit.test.ts b/packages/diffs/test/editorCollapsedEdit.test.ts
index d2b70a1bd..3cebd9034 100644
--- a/packages/diffs/test/editorCollapsedEdit.test.ts
+++ b/packages/diffs/test/editorCollapsedEdit.test.ts
@@ -251,9 +251,13 @@ describe('diff editor: collapsed regions during edit', () => {
         })
       );
       await wait(0);
-      const input = container.shadowRoot?.querySelector<HTMLInputElement>(
-        '[data-search-panel] input[data-search]'
+      const panel = container.shadowRoot?.querySelector<HTMLElement>(
+        '[data-search-panel]'
       );
+      const input =
+        panel?.shadowRoot?.querySelector<HTMLInputElement>(
+          'input[data-search]'
+        );
       expect(input).not.toBeNull();
       input!.value = 'line';
       input!.dispatchEvent(new window.Event('input', { bubbles: true }));
diff --git a/packages/diffs/test/editorComposition.test.ts b/packages/diffs/test/editorComposition.test.ts
index dc5a4c7ac..76cbcafb5 100644
--- a/packages/diffs/test/editorComposition.test.ts
+++ b/packages/diffs/test/editorComposition.test.ts
@@ -159,7 +159,9 @@ async function openSearchReplacePanel({
 }
 
 function findReplaceInput(panel: HTMLElement): HTMLInputElement {
-  const input = panel.querySelector<HTMLInputElement>('input[data-replace]');
+  const input = panel.shadowRoot?.querySelector<HTMLInputElement>(
+    'input[data-replace]'
+  );
   if (input == null) {
     throw new Error('replace input was not rendered');
   }
diff --git a/packages/diffs/test/editorSearchPanel.test.ts b/packages/diffs/test/editorSearchPanel.test.ts
index da5825eab..edfd5832c 100644
--- a/packages/diffs/test/editorSearchPanel.test.ts
+++ b/packages/diffs/test/editorSearchPanel.test.ts
@@ -1,9 +1,6 @@
 import { describe, expect, test } from 'bun:test';
 
-import {
-  buildSearchReplacementText,
-  PieceTable,
-} from '../src/editor/pieceTable';
+import { PieceTable } from '../src/editor/pieceTable';
 import {
   type MatchRange,
   type SearchPanelOptions,
@@ -11,6 +8,7 @@ import {
   type SearchParams,
 } from '../src/editor/searchPanel';
 import { TextDocument } from '../src/editor/textDocument';
+import { buildSearchReplacementText } from '../src/search';
 import type { ResolvedTextEdit } from '../src/types';
 import { installDom, wait } from './domHarness';
 
@@ -36,6 +34,35 @@ function pressKey(
   return event;
 }
 
+function waitForAnimationFrame(): Promise<void> {
+  return wait(0);
+}
+
+function createContainer(): HTMLElement {
+  const container = document.createElement('pre');
+  document.body.appendChild(container);
+  return container;
+}
+
+function getSearchPanelRoot(): ShadowRoot {
+  const host = document.querySelector<HTMLElement>('[data-search-panel]');
+  if (host?.shadowRoot === undefined || host.shadowRoot === null) {
+    throw new Error('Expected search panel shadow root');
+  }
+  return host.shadowRoot;
+}
+
+function defaultSearchParams(overrides: Partial<SearchParams>): SearchParams {
+  return {
+    text: '',
+    replaceText: '',
+    caseSensitive: false,
+    wholeWord: false,
+    regex: false,
+    ...overrides,
+  };
+}
+
 interface WidgetHarness {
   widget: SearchPanelWidget;
   input: HTMLInputElement;
@@ -76,14 +103,44 @@ function createWidget(
   const applied: ResolvedTextEdit[][] = [];
   const updates: (MatchRange[] | undefined)[] = [];
 
+  const buildReplacementEdit = (
+    [start, end]: MatchRange,
+    searchParams: SearchParams
+  ): ResolvedTextEdit => ({
+    start,
+    end,
+    text: buildSearchReplacementText(
+      (offset) => textDocument.positionAt(offset),
+      (position) => textDocument.offsetAt(position),
+      (line) => textDocument.getLineText(line),
+      searchParams,
+      start,
+      end
+    ),
+  });
+
   let closed = false;
   const widget = new SearchPanelWidget({
-    textDocument,
     containerElement,
     defaultQuery,
     mode,
+    search: (searchParams) => textDocument.search(searchParams),
+    isSameMatch: ([aStart, aEnd], [bStart, bEnd]) =>
+      aStart === bStart && aEnd === bEnd,
     scrollToMatch: (nextMatch) => scrolled.push([...nextMatch]),
-    applyReplace: (edits) => applied.push(edits),
+    replace: {
+      replaceMatch: (match, searchParams): MatchRange => {
+        const edit = buildReplacementEdit(match, searchParams);
+        applied.push([edit]);
+        const nextOffset = edit.start + edit.text.length;
+        return [nextOffset, nextOffset];
+      },
+      replaceAll: (matches, searchParams) => {
+        applied.push(
+          matches.map((match) => buildReplacementEdit(match, searchParams))
+        );
+      },
+    },
     onUpdate: (matches) => {
       updates.push(matches.map((match) => [...match] as MatchRange));
       return selectCurrent ? matches[0] : undefined;
@@ -94,15 +151,15 @@ function createWidget(
   });
 
   const query = (selector: string) =>
-    document.querySelector<HTMLElement>(`[data-search-panel] ${selector}`);
+    getSearchPanelRoot().querySelector<HTMLElement>(selector);
 
   return {
     widget,
     input: query('input[data-search]') as HTMLInputElement,
     replaceInput: query('input[data-replace]') as HTMLInputElement,
     button: (container, index) =>
-      document.querySelectorAll<HTMLButtonElement>(
-        `[data-search-panel] [data-${container}] button`
+      getSearchPanelRoot().querySelectorAll<HTMLButtonElement>(
+        `[data-${container}] button`
       )[index],
     matchesText: () => query('[data-matches]')?.textContent ?? null,
     mode: () => query('[data-search-grid]')?.dataset.mode,
@@ -404,23 +461,55 @@ function mountReplaceHost(contents: string): ReplaceHostHarness {
     scrolled.push([nextMatch[0], nextMatch[1]]);
   };
 
+  const buildReplacementEdit = (
+    [start, end]: MatchRange,
+    searchParams: SearchParams
+  ): ResolvedTextEdit => ({
+    start,
+    end,
+    text: buildSearchReplacementText(
+      (offset) => textDocument.positionAt(offset),
+      (position) => textDocument.offsetAt(position),
+      (line) => textDocument.getLineText(line),
+      searchParams,
+      start,
+      end
+    ),
+  });
+
+  const applyReplace = (edits: ResolvedTextEdit[]) => {
+    appliedBatches.push(edits);
+    textDocument.applyEdits(
+      edits.map((edit) => ({
+        range: {
+          start: textDocument.positionAt(edit.start),
+          end: textDocument.positionAt(edit.end),
+        },
+        newText: edit.text,
+      }))
+    );
+  };
+
   const widget = new SearchPanelWidget({
-    textDocument,
     containerElement,
     defaultQuery: '',
     mode: 'replace',
+    search: (searchParams) => textDocument.search(searchParams),
+    isSameMatch: ([aStart, aEnd], [bStart, bEnd]) =>
+      aStart === bStart && aEnd === bEnd,
     scrollToMatch,
-    applyReplace: (edits) => {
-      appliedBatches.push(edits);
-      textDocument.applyEdits(
-        edits.map((edit) => ({
-          range: {
-            start: textDocument.positionAt(edit.start),
-            end: textDocument.positionAt(edit.end),
-          },
-          newText: edit.text,
-        }))
-      );
+    replace: {
+      replaceMatch: (match, searchParams): MatchRange => {
+        const edit = buildReplacementEdit(match, searchParams);
+        applyReplace([edit]);
+        const nextOffset = edit.start + edit.text.length;
+        return [nextOffset, nextOffset];
+      },
+      replaceAll: (matches, searchParams) => {
+        applyReplace(
+          matches.map((match) => buildReplacementEdit(match, searchParams))
+        );
+      },
     },
     onUpdate: (matches) => {
       for (const match of matches) {
@@ -435,10 +524,10 @@ function mountReplaceHost(contents: string): ReplaceHostHarness {
   });
 
   const panel = (selector: string) =>
-    document.querySelector<HTMLElement>(`[data-search-panel] ${selector}`);
+    getSearchPanelRoot().querySelector<HTMLElement>(selector);
   const buttons = (container: string) =>
-    document.querySelectorAll<HTMLButtonElement>(
-      `[data-search-panel] [data-${container}] button`
+    getSearchPanelRoot().querySelectorAll<HTMLButtonElement>(
+      `[data-${container}] button`
     );
 
   return {
@@ -995,3 +1084,114 @@ describe('search agrees with a string-model oracle under random splices', () =>
     );
   });
 });
+describe('SearchPanelWidget', () => {
+  test('runs in find-only mode without replace handlers', async () => {
+    const dom = installDom();
+    try {
+      const searchCalls: SearchParams[] = [];
+      const updates: MatchRange[][] = [];
+
+      const widget = new SearchPanelWidget<MatchRange>({
+        containerElement: createContainer(),
+        defaultQuery: 'foo',
+        mode: 'replace',
+        initialMatch: [0, 3],
+        search: (params) => {
+          searchCalls.push(params);
+          return [[0, 3]];
+        },
+        scrollToMatch: () => {},
+        onUpdate: (matches) => {
+          updates.push(matches);
+          return matches[0];
+        },
+        onClose: () => {},
+      });
+
+      await waitForAnimationFrame();
+
+      const panel = getSearchPanelRoot();
+      const grid = panel?.querySelector<HTMLElement>('[data-search-grid]');
+
+      expect(searchCalls).toEqual([defaultSearchParams({ text: 'foo' })]);
+      expect(updates).toEqual([[[0, 3]]]);
+      expect(grid?.dataset.mode).toBe('find');
+      expect(panel?.querySelector('[data-replace]')).toBeNull();
+      expect(
+        panel.querySelector('#diffs-editor-icon-arrow-down')
+      ).not.toBeNull();
+
+      widget.setMode('replace');
+      expect(grid?.dataset.mode).toBe('find');
+
+      widget.cleanup();
+    } finally {
+      dom.cleanup();
+    }
+  });
+
+  test('delegates replace actions to optional replace handlers', async () => {
+    const dom = installDom();
+    try {
+      const matches: MatchRange[] = [
+        [0, 3],
+        [4, 7],
+      ];
+      const replacedMatches: [MatchRange, SearchParams][] = [];
+      const scrolledMatches: [MatchRange, boolean][] = [];
+      const replaceAllCalls: [MatchRange[], SearchParams][] = [];
+
+      const widget = new SearchPanelWidget<MatchRange>({
+        containerElement: createContainer(),
+        defaultQuery: 'foo',
+        mode: 'replace',
+        initialMatch: matches[0],
+        search: () => matches,
+        isSameMatch: ([aStart, aEnd], [bStart, bEnd]) =>
+          aStart === bStart && aEnd === bEnd,
+        scrollToMatch: (match, retainFocus) => {
+          scrolledMatches.push([match, retainFocus]);
+        },
+        replace: {
+          replaceMatch: (match, params) => {
+            replacedMatches.push([match, params]);
+            return [11, 11];
+          },
+          replaceAll: (allMatches, params) => {
+            replaceAllCalls.push([allMatches, params]);
+          },
+        },
+        onUpdate: (allMatches) => allMatches[0],
+        onClose: () => {},
+      });
+
+      await waitForAnimationFrame();
+
+      const panel = getSearchPanelRoot();
+      const replaceInput = panel.querySelector<HTMLInputElement>(
+        'input[data-replace]'
+      )!;
+      replaceInput.value = 'bar';
+      replaceInput.dispatchEvent(new Event('input', { bubbles: true }));
+
+      panel
+        .querySelector<HTMLButtonElement>('button[title="Replace"]')!
+        .click();
+      panel
+        .querySelector<HTMLButtonElement>('button[title="Replace All"]')!
+        .click();
+
+      expect(replacedMatches).toEqual([
+        [matches[0], defaultSearchParams({ text: 'foo', replaceText: 'bar' })],
+      ]);
+      expect(scrolledMatches).toContainEqual([[11, 11], true]);
+      expect(replaceAllCalls).toEqual([
+        [matches, defaultSearchParams({ text: 'foo', replaceText: 'bar' })],
+      ]);
+
+      widget.cleanup();
+    } finally {
+      dom.cleanup();
+    }
+  });
+});
diff --git a/packages/diffs/test/editorVirtualizedEdit.test.ts b/packages/diffs/test/editorVirtualizedEdit.test.ts
index 85dd0629a..3dbcc27d6 100644
--- a/packages/diffs/test/editorVirtualizedEdit.test.ts
+++ b/packages/diffs/test/editorVirtualizedEdit.test.ts
@@ -416,9 +416,13 @@ describe('Editor search matches in a virtualized window', () => {
         })
       );
       await wait(0);
-      const input = fileContainer.shadowRoot?.querySelector<HTMLInputElement>(
-        '[data-search-panel] input[data-search]'
+      const panel = fileContainer.shadowRoot?.querySelector<HTMLElement>(
+        '[data-search-panel]'
       );
+      const input =
+        panel?.shadowRoot?.querySelector<HTMLInputElement>(
+          'input[data-search]'
+        );
       expect(input).not.toBeNull();
       input!.value = 'line';
       input!.dispatchEvent(new window.Event('input', { bubbles: true }));
diff --git a/packages/diffs/test/getHighlighterThemeStyles.test.ts b/packages/diffs/test/getHighlighterThemeStyles.test.ts
index e03f1336a..76b63aa78 100644
--- a/packages/diffs/test/getHighlighterThemeStyles.test.ts
+++ b/packages/diffs/test/getHighlighterThemeStyles.test.ts
@@ -7,21 +7,19 @@ import {
 import type { DiffsHighlighter } from '../src/types';
 import { getHighlighterThemeStyles } from '../src/utils/getHighlighterThemeStyles';
 
-// Byte-for-byte parity fixtures. These lock the exact --diffs-* string that the
-// pre-theming getHighlighterThemeStyles produced for the Pierre themes, so the
-// refactor onto normalizeThemeColors cannot drift the output. The values were
-// captured from the legacy implementation. Any change here is a real behavior
-// change and must be intentional.
+// Stable output fixtures. The git-color portion stays byte-identical to the
+// pre-theming implementation, while editor search variables are intentionally
+// included so CodeView can share Editor search colors.
 const SINGLE_DARK =
-  'color:#fafafa;background-color:#0a0a0a;--diffs-fg:#fafafa;--diffs-bg:#0a0a0a;--diffs-addition-color:#07c480;--diffs-deletion-color:#ff2e3f;--diffs-modified-color:#009fff;';
+  'color:#fafafa;background-color:#0a0a0a;--diffs-fg:#fafafa;--diffs-bg:#0a0a0a;--diffs-editor-selection-bg:#009fff4d;--diffs-addition-color:#07c480;--diffs-deletion-color:#ff2e3f;--diffs-modified-color:#009fff;';
 
 const PAIRED_DARK_LIGHT =
-  '--diffs-dark:#fafafa;--diffs-dark-bg:#0a0a0a;--diffs-dark-addition-color:#07c480;--diffs-dark-deletion-color:#ff2e3f;--diffs-dark-modified-color:#009fff;--diffs-light:#0a0a0a;--diffs-light-bg:#ffffff;--diffs-light-addition-color:#18a46c;--diffs-light-deletion-color:#d52c36;--diffs-light-modified-color:#009fff;';
+  '--diffs-dark:#fafafa;--diffs-dark-bg:#0a0a0a;--diffs-dark-editor-selection-bg:#009fff4d;--diffs-dark-addition-color:#07c480;--diffs-dark-deletion-color:#ff2e3f;--diffs-dark-modified-color:#009fff;--diffs-light:#0a0a0a;--diffs-light-bg:#ffffff;--diffs-light-editor-selection-bg:#009fff2e;--diffs-editor-selection-bg:light-dark(var(--diffs-light-editor-selection-bg, var(--diffs-line-bg)), var(--diffs-dark-editor-selection-bg, var(--diffs-line-bg)));--diffs-editor-match-bg:light-dark(var(--diffs-light-editor-match-bg, var(--diffs-light-editor-selection-bg, var(--diffs-editor-selection-bg))), var(--diffs-dark-editor-match-bg, var(--diffs-dark-editor-selection-bg, var(--diffs-editor-selection-bg))));--diffs-editor-match-highlight-bg:light-dark(var(--diffs-light-editor-match-highlight-bg, #ff963288), var(--diffs-dark-editor-match-highlight-bg, #ff963266));--diffs-light-addition-color:#18a46c;--diffs-light-deletion-color:#d52c36;--diffs-light-modified-color:#009fff;';
 
 // A custom `prefix` is applied only to the git-color variables, not to the
 // fg/bg/global vars — this asserts that asymmetry survives the refactor.
 const SINGLE_LIGHT_PREFIXED =
-  'color:#0a0a0a;background-color:#ffffff;--diffs-fg:#0a0a0a;--diffs-bg:#ffffff;--diffs-custom-addition-color:#18a46c;--diffs-custom-deletion-color:#d52c36;--diffs-custom-modified-color:#009fff;';
+  'color:#0a0a0a;background-color:#ffffff;--diffs-fg:#0a0a0a;--diffs-bg:#ffffff;--diffs-editor-selection-bg:#009fff2e;--diffs-custom-addition-color:#18a46c;--diffs-custom-deletion-color:#d52c36;--diffs-custom-modified-color:#009fff;';
 
 let highlighter: DiffsHighlighter;
 
@@ -37,7 +35,7 @@ afterAll(async () => {
   await disposeHighlighter();
 });
 
-describe('getHighlighterThemeStyles --diffs-* parity', () => {
+describe('getHighlighterThemeStyles --diffs-* output', () => {
   test('single theme emits color/bg/global fg/bg and 2-link git colors', () => {
     expect(
       getHighlighterThemeStyles({ theme: 'pierre-dark', highlighter })
@@ -62,4 +60,31 @@ describe('getHighlighterThemeStyles --diffs-* parity', () => {
       })
     ).toBe(SINGLE_LIGHT_PREFIXED);
   });
+
+  test('explicit editor find colors are emitted for CodeView search highlights', () => {
+    const customHighlighter = {
+      getTheme() {
+        return {
+          name: 'custom',
+          type: 'dark',
+          fg: '#ffffff',
+          bg: '#000000',
+          colors: {
+            'editor.selectionBackground': '#111111',
+            'editor.findMatchBackground': '#222222',
+            'editor.findMatchHighlightBackground': '#333333',
+          },
+        };
+      },
+    } as unknown as DiffsHighlighter;
+
+    expect(
+      getHighlighterThemeStyles({
+        theme: 'pierre-dark',
+        highlighter: customHighlighter,
+      })
+    ).toContain(
+      '--diffs-editor-selection-bg:#111111;--diffs-editor-match-bg:#222222;--diffs-editor-match-highlight-bg:#333333;'
+    );
+  });
 });
diff --git a/packages/diffs/test/search.test.ts b/packages/diffs/test/search.test.ts
new file mode 100644
index 000000000..382172c82
--- /dev/null
+++ b/packages/diffs/test/search.test.ts
@@ -0,0 +1,119 @@
+import { describe, expect, test } from 'bun:test';
+
+import {
+  buildSearchReplacementText,
+  type LineByLineSearchDocument,
+  searchLineByLine,
+  type SearchParams,
+} from '../src/search';
+
+function createSearchDocument(text: string): LineByLineSearchDocument {
+  const lineStarts = [0];
+  for (let i = 0; i < text.length; i++) {
+    if (text.charCodeAt(i) === 10) {
+      lineStarts.push(i + 1);
+    }
+  }
+
+  const getLineStartOffset = (line: number) => lineStarts[line] ?? text.length;
+
+  return {
+    textLength: text.length,
+    lineCount: lineStarts.length,
+    getLineStartOffset,
+    getLineText(line) {
+      const start = getLineStartOffset(line);
+      const nextStart = lineStarts[line + 1] ?? text.length;
+      let end = nextStart;
+      while (end > start && isLineEnding(text.charCodeAt(end - 1))) {
+        end--;
+      }
+      return text.slice(start, end);
+    },
+    charAt(offset) {
+      return text.charAt(offset);
+    },
+  };
+}
+
+function searchParams(overrides: Partial<SearchParams>): SearchParams {
+  return {
+    text: '',
+    replaceText: '',
+    caseSensitive: false,
+    wholeWord: false,
+    regex: false,
+    ...overrides,
+  };
+}
+
+function isLineEnding(charCode: number): boolean {
+  return charCode === 10 || charCode === 13;
+}
+
+describe('searchLineByLine', () => {
+  test('searches a string document without TextDocument', () => {
+    const document = createSearchDocument('Alpha beta\nalpha BETA');
+
+    expect(searchLineByLine(document, searchParams({ text: 'alpha' }))).toEqual(
+      [
+        [0, 5],
+        [11, 16],
+      ]
+    );
+  });
+
+  test('supports whole-word matching', () => {
+    const document = createSearchDocument('foo food (foo)');
+
+    expect(
+      searchLineByLine(document, searchParams({ text: 'foo', wholeWord: true }))
+    ).toEqual([
+      [0, 3],
+      [10, 13],
+    ]);
+  });
+
+  test('returns no results for invalid regex input', () => {
+    const document = createSearchDocument('foo');
+
+    expect(
+      searchLineByLine(document, searchParams({ text: '[', regex: true }))
+    ).toEqual([]);
+  });
+
+  test('does not match newline-spanning queries', () => {
+    const document = createSearchDocument('foo\nbar');
+
+    expect(
+      searchLineByLine(document, searchParams({ text: 'foo\nbar' }))
+    ).toEqual([]);
+    expect(
+      searchLineByLine(
+        document,
+        searchParams({ text: 'foo\\nbar', regex: true })
+      )
+    ).toEqual([]);
+  });
+
+  test('expands regex capture replacements', () => {
+    const text = 'const answer = 42';
+    const document = createSearchDocument(text);
+    const positionAt = (offset: number) => ({ line: 0, character: offset });
+
+    expect(
+      buildSearchReplacementText(
+        positionAt,
+        (position) => position.character,
+        (line) => document.getLineText(line),
+        searchParams({
+          text: '(answer) = (\\d+)',
+          replaceText: '$1: $2',
+          regex: true,
+        }),
+        6,
+        text.length
+      )
+    ).toBe('answer: 42');
+  });
+});