daangn
diff --git a/‎.changeset/network-search.md‎
Lines changed: 5 additions & 0 deletions b/‎.changeset/network-search.md‎
Lines changed: 5 additions & 0 deletions
diff --git a/‎package/src/components/HighlightText.tsx‎
Lines changed: 132 additions & 0 deletions b/‎package/src/components/HighlightText.tsx‎
Lines changed: 132 additions & 0 deletions
diff --git a/‎package/src/components/NetworkDetailSection.tsx‎
Lines changed: 108 additions & 45 deletions b/‎package/src/components/NetworkDetailSection.tsx‎
Lines changed: 108 additions & 45 deletions
@@ -0,0 +1,5 @@
+---
+"lynx-console": minor
+---
+
+Add search to the Network panel. The search box matches against the request URL, request/response headers, and request/response bodies. Matching requests auto-expand to the tab that contains the hit, the matched text is highlighted, and the list scrolls to the match. Use the ▲/▼ buttons (or Enter) to jump between matches. Request/response headers are collapsed by default and expand on tap or when a match is inside them.
@@ -0,0 +1,132 @@
+import { useThemeColors } from "../styles/ThemeContext";
+import { fontWeight } from "../styles/theme";
+
+interface HighlightSegment {
+  text: string;
+  match: boolean;
+  // 일치 세그먼트일 때 해당 텍스트 안에서의 0-based 등장 순번
+  occurrence?: number;
+}
+
+// query가 등장하는 시작 인덱스들을 대소문자 구분 없이 반환한다.
+// 강조(splitHighlight)와 카운트(countOccurrences)가 같은 매치 정의를
+// 공유하도록 하는 단일 출처. 한쪽만 바뀌어 어긋나는 일을 막는다.
+function matchIndices(text: string, query: string): number[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return [];
+  const lower = text.toLowerCase();
+  const indices: number[] = [];
+  let from = 0;
+  while (true) {
+    const idx = lower.indexOf(q, from);
+    if (idx === -1) break;
+    indices.push(idx);
+    from = idx + q.length;
+  }
+  return indices;
+}
+
+// query에 일치하는 부분을 대소문자 구분 없이 잘라 세그먼트로 반환
+export function splitHighlight(
+  text: string,
+  query: string,
+): HighlightSegment[] {
+  const q = query.trim().toLowerCase();
+  const indices = matchIndices(text, query);
+  if (indices.length === 0) return [{ text, match: false }];
+
+  const segments: HighlightSegment[] = [];
+  let cursor = 0;
+  indices.forEach((idx, occurrence) => {
+    if (idx > cursor) {
+      segments.push({ text: text.slice(cursor, idx), match: false });
+    }
+    segments.push({
+      text: text.slice(idx, idx + q.length),
+      match: true,
+      occurrence,
+    });
+    cursor = idx + q.length;
+  });
+  if (cursor < text.length) {
+    segments.push({ text: text.slice(cursor), match: false });
+  }
+
+  return segments;
+}
+
+export function textIncludes(text: string | undefined, query: string): boolean {
+  if (!text) return false;
+  const q = query.trim().toLowerCase();
+  if (!q) return false;
+  return text.toLowerCase().includes(q);
+}
+
+// text 안에 query가 몇 번 등장하는지 센다(대소문자 무시)
+export function countOccurrences(
+  text: string | undefined,
+  query: string,
+): number {
+  if (!text) return 0;
+  return matchIndices(text, query).length;
+}
+
+interface HighlightTextProps {
+  text: string;
+  query: string;
+  // 이 텍스트 안에서 "현재 선택된" 매치의 등장 순번(없으면 -1)
+  activeOccurrence?: number | undefined;
+  className?: string | undefined;
+  style?: Record<string, unknown> | undefined;
+}
+
+/**
+ * query에 일치하는 부분을 강조 표시하는 텍스트.
+ * 일치하지 않는 부분은 부모 <text>의 스타일을 그대로 상속하고,
+ * 일치하는 부분만 중첩 <text>로 감싸 하이라이트 배경을 입힌다.
+ * activeOccurrence와 순번이 같은 매치는 "현재 선택" 스타일로 강조한다.
+ */
+export const HighlightText = ({
+  text,
+  query,
+  activeOccurrence = -1,
+  className,
+  style,
+}: HighlightTextProps) => {
+  const colors = useThemeColors();
+  const segments = splitHighlight(text, query);
+
+  if (segments.length === 1 && !segments[0]?.match) {
+    return (
+      <text className={className} style={style}>
+        {text}
+      </text>
+    );
+  }
+
+  return (
+    <text className={className} style={style}>
+      {segments.map((segment, index) => {
+        if (!segment.match) return segment.text;
+        const isActive = segment.occurrence === activeOccurrence;
+        return (
+          <text
+            // biome-ignore lint: 세그먼트는 텍스트 순서로 안정적
+            key={`hl-${index}`}
+            style={{
+              backgroundColor: isActive
+                ? colors.highlight.activeBg
+                : colors.highlight.matchBg,
+              color: isActive
+                ? colors.highlight.activeText
+                : colors.highlight.matchText,
+              fontWeight: fontWeight.bold,
+            }}
+          >
+            {segment.text}
+          </text>
+        );
+      })}
+    </text>
+  );
+};
@@ -1,74 +1,136 @@
+import { type RefObject, useState } from "@lynx-js/react";
+import type { NodesRef } from "@lynx-js/types";
+import { matchNode } from "../hooks/useNetworkSearch";
 import { useThemeColors } from "../styles/ThemeContext";
 import { fontWeight } from "../styles/theme";
+import { HighlightText, textIncludes } from "./HighlightText";
 import "./NetworkPanel.css";
 
 interface NetworkDetailSectionProps {
+  section: "request" | "response";
   headers?: Record<string, string> | undefined;
   body?: string | undefined;
   error?: string | undefined;
+  highlightQuery?: string | undefined;
+  // 이 항목 안에서 nodeKey에 해당하는 노드의 활성 매치 등장 순번(없으면 -1)
+  getActiveOccurrence?: ((nodeKey: string) => number) | undefined;
+  // 활성 매치 노드면 스크롤용 ref를 돌려준다(아니면 undefined)
+  getNodeRef?:
+    | ((nodeKey: string) => RefObject<NodesRef> | undefined)
+    | undefined;
 }
 
 export const NetworkDetailSection = ({
+  section,
   headers = {},
   body = "",
   error = "",
+  highlightQuery = "",
+  getActiveOccurrence = () => -1,
+  getNodeRef = () => undefined,
 }: NetworkDetailSectionProps) => {
   const colors = useThemeColors();
 
+  // 헤더 행 안의 key 또는 value가 활성 매치면 그 행에 스크롤 ref를 단다
+  const rowRef = (name: string) =>
+    getNodeRef(matchNode.headerKey(section, name)) ??
+    getNodeRef(matchNode.headerValue(section, name));
+
+  const headerEntries = Object.entries(headers);
+  const headerHasMatch = headerEntries.some(
+    ([key, value]) =>
+      textIncludes(key, highlightQuery) || textIncludes(value, highlightQuery),
+  );
+  // 헤더는 기본 접힘. 검색 결과가 헤더에 있으면 자동으로 펼치고, 탭하면 수동 토글
+  const [manualOpen, setManualOpen] = useState<boolean | null>(null);
+  // 검색어가 바뀌면 수동 상태를 초기화해 새 매치 여부를 자동으로 반영한다.
+  // effect 대신 렌더 단계에서 직접 리셋(추가 페인트·깜빡임 없음 — React 권장 패턴)
+  const [prevQuery, setPrevQuery] = useState(highlightQuery);
+  if (prevQuery !== highlightQuery) {
+    setPrevQuery(highlightQuery);
+    setManualOpen(null);
+  }
+  const headersOpen = manualOpen ?? headerHasMatch;
+
   return (
     <>
-      {/* Headers */}
+      {/* Headers (토글) */}
       <view className={"np-detailSection"}>
-        <text
-          className={"np-detailSectionTitle t3"}
-          style={{ fontWeight: fontWeight.bold, color: colors.fg.neutral }}
+        <view
+          className={"np-detailSectionHeader"}
+          bindtap={() => setManualOpen(!headersOpen)}
         >
-          Headers
-        </text>
-        {headers && Object.keys(headers).length > 0 ? (
-          <view className={"np-table"}>
-            {Object.entries(headers).map(([key, value]) => (
-              <view
-                key={key}
-                className={"np-tableRow"}
-                style={{ backgroundColor: colors.bg.neutralWeak }}
-              >
-                <text
-                  className={"np-tableKey t3"}
-                  style={{
-                    fontWeight: fontWeight.bold,
-                    color: colors.fg.neutralSubtle,
-                  }}
-                >
-                  {key}
-                </text>
-                <text
-                  className={"np-tableValue t3"}
-                  style={{
-                    fontWeight: fontWeight.regular,
-                    color: colors.fg.neutral,
-                  }}
-                >
-                  {value}
-                </text>
-              </view>
-            ))}
-          </view>
-        ) : (
           <text
-            className={"np-emptyText t3"}
+            className={"t2"}
             style={{
               fontWeight: fontWeight.regular,
-              color: colors.fg.disabled,
+              color: colors.fg.neutralSubtle,
             }}
           >
-            No headers
+            {headersOpen ? "▼" : "▶"}
           </text>
-        )}
+          <text
+            className={"t3"}
+            style={{ fontWeight: fontWeight.bold, color: colors.fg.neutral }}
+          >
+            Headers
+          </text>
+        </view>
+        {headersOpen &&
+          (headerEntries.length > 0 ? (
+            <view className={"np-table"}>
+              {headerEntries.map(([key, value]) => (
+                <view
+                  key={key}
+                  ref={rowRef(key)}
+                  className={"np-tableRow"}
+                  style={{ backgroundColor: colors.bg.neutralWeak }}
+                >
+                  <HighlightText
+                    text={key}
+                    query={highlightQuery}
+                    activeOccurrence={getActiveOccurrence(
+                      matchNode.headerKey(section, key),
+                    )}
+                    className={"np-tableKey t3"}
+                    style={{
+                      fontWeight: fontWeight.bold,
+                      color: colors.fg.neutralSubtle,
+                    }}
+                  />
+                  <HighlightText
+                    text={value}
+                    query={highlightQuery}
+                    activeOccurrence={getActiveOccurrence(
+                      matchNode.headerValue(section, key),
+                    )}
+                    className={"np-tableValue t3"}
+                    style={{
+                      fontWeight: fontWeight.regular,
+                      color: colors.fg.neutral,
+                    }}
+                  />
+                </view>
+              ))}
+            </view>
+          ) : (
+            <text
+              className={"np-emptyText t3"}
+              style={{
+                fontWeight: fontWeight.regular,
+                color: colors.fg.disabled,
+              }}
+            >
+              No headers
+            </text>
+          ))}
       </view>
 
       {/* Body */}
-      <view className={"np-detailSection"}>
+      <view
+        className={"np-detailSection"}
+        ref={getNodeRef(matchNode.body(section))}
+      >
         <text
           className={"np-detailSectionTitle t3"}
           style={{ fontWeight: fontWeight.bold, color: colors.fg.neutral }}
@@ -88,16 +150,17 @@ export const NetworkDetailSection = ({
           </text>
         )}
         {body && (
-          <text
+          <HighlightText
+            text={body}
+            query={highlightQuery}
+            activeOccurrence={getActiveOccurrence(matchNode.body(section))}
             className={"np-bodyText t3"}
             style={{
               fontWeight: fontWeight.regular,
               color: colors.fg.neutral,
               backgroundColor: colors.bg.neutralWeak,
             }}
-          >
-            {body}
-          </text>
+          />
         )}
         {!error && !body && (
           <text
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"lynx-console": minor
 +---
++
 +Add search to the Network panel. The search box matches against the request URL, request/response headers, and request/response bodies. Matching requests auto-expand to the tab that contains the hit, the matched text is highlighted, and the list scrolls to the match. Use the ▲/▼ buttons (or Enter) to jump between matches. Request/response headers are collapsed by default and expand on tap or when a match is inside them.