fix(response): wire search navigation into the HTML pretty CodeMirror

HtmlEditor previously ignored search state, so hitting Enter in the
SearchBox while pretty HTML was shown did nothing — match counters
updated but the editor never scrolled or highlighted the hit.

Add an activeMatch prop (lineIndex / start / end) and, when it changes,
dispatch a CodeMirror selection + scrollIntoView(range, {y:'center',
x:'center'}). ResponseViewer maps matchAll[activeMatchIndex] into that
prop when rendering the HTML pretty view.

Selection reuses the native read-only highlight, so no extra decoration
plumbing is needed for the basic "jump to match" behaviour.

Author: mertbekci

apps/desktop/src/renderer/src/components/HtmlEditor.tsx

@@ -1,15 +1,29 @@
 import { useEffect, useRef } from 'react';
 import { EditorView, basicSetup } from 'codemirror';
 import { html } from '@codemirror/lang-html';
-import { EditorState } from '@codemirror/state';
+import { EditorSelection, EditorState } from '@codemirror/state';
 import { oneDark } from '@codemirror/theme-one-dark';
 
+export interface HtmlEditorActiveMatch {
+  lineIndex: number;
+  start: number;
+  end: number;
+}
+
 /**
  * Read-only CodeMirror editor for HTML pretty view.
  * Adapts between light and dark themes by watching the `html.dark` class on
  * the document element (same mechanism as the rest of the app's Tailwind theme).
+ * When activeMatch is set, scrolls that range into view and selects it so
+ * the browser's selection highlight doubles as the "active match" cue.
  */
-export function HtmlEditor({ content }: { content: string }): JSX.Element {
+export function HtmlEditor({
+  content,
+  activeMatch,
+}: {
+  content: string;
+  activeMatch?: HtmlEditorActiveMatch | null;
+}): JSX.Element {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const viewRef = useRef<EditorView | null>(null);
   const isDark = document.documentElement.classList.contains('dark');
@@ -69,6 +83,24 @@ export function HtmlEditor({ content }: { content: string }): JSX.Element {
     });
   }, [content]);
 
+  // Follow search navigation from the outer SearchBox: map {lineIndex, start, end}
+  // into a CodeMirror range and scroll + select it.
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view || !activeMatch) return;
+    const totalLines = view.state.doc.lines;
+    // lineIndex is 0-based; CodeMirror lines are 1-based.
+    const lineNumber = Math.min(totalLines, Math.max(1, activeMatch.lineIndex + 1));
+    const line = view.state.doc.line(lineNumber);
+    const from = Math.min(line.to, line.from + activeMatch.start);
+    const to = Math.min(line.to, line.from + activeMatch.end);
+    const range = EditorSelection.range(from, to);
+    view.dispatch({
+      selection: EditorSelection.create([range]),
+      effects: EditorView.scrollIntoView(range, { y: 'center', x: 'center' }),
+    });
+  }, [activeMatch]);
+
   return (
     <div
       ref={containerRef}

apps/desktop/src/renderer/src/components/ResponseViewer.tsx

@@ -764,11 +764,25 @@ function renderBody({
   }
 
   // HTML pretty mode — use CodeMirror for syntax-highlighted rendering.
-  // Search is NOT highlighted inside the editor (CodeMirror has its own search
-  // decorations which would require full editor integration; plain text search
-  // via the SearchBox still counts matches against the raw text).
+  // The outer SearchBox still computes matches against the raw text; when the
+  // user navigates (Enter / Shift+Enter), we map the active match's line/char
+  // into a CodeMirror range and let the editor scroll+select it.
   if (kind === 'html' && mode === 'pretty') {
-    return <HtmlEditor content={text} />;
+    const active = matchAll[activeMatchIndex];
+    return (
+      <HtmlEditor
+        content={text}
+        activeMatch={
+          active
+            ? {
+                lineIndex: active.lineIndex,
+                start: active.start,
+                end: active.end,
+              }
+            : null
+        }
+      />
+    );
   }
 
   // Raw / pretty for all other kinds — virtualized text view.