From da30adf4a03a620fdbe8843fb0bb04cfe16ecc98 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 18 Oct 2025 10:54:43 +0000
Subject: [PATCH 1/5] Initial plan


From 989c8ebd26b3e9282ffcf0320c56f65fff382df4 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 18 Oct 2025 11:03:08 +0000
Subject: [PATCH 2/5] Add search highlighting with colored indicators and match
 summary

Co-authored-by: peckz <18050177+peckz@users.noreply.github.com>
---
 .../pages/utilities/har-file-viewer.test.tsx  |   6 +-
 components/MatchIndicators.tsx                |  67 ++++++
 components/MatchSummaryPills.tsx              |  95 +++++++++
 components/SearchHighlightText.tsx            |  58 ++++++
 components/utils/har-utils.ts                 |  73 +++++++
 pages/utilities/har-file-viewer.tsx           | 190 ++++++++++++------
 6 files changed, 422 insertions(+), 67 deletions(-)
 create mode 100644 components/MatchIndicators.tsx
 create mode 100644 components/MatchSummaryPills.tsx
 create mode 100644 components/SearchHighlightText.tsx

diff --git a/__tests__/pages/utilities/har-file-viewer.test.tsx b/__tests__/pages/utilities/har-file-viewer.test.tsx
index 0924875..60e6c6d 100644
--- a/__tests__/pages/utilities/har-file-viewer.test.tsx
+++ b/__tests__/pages/utilities/har-file-viewer.test.tsx
@@ -151,13 +151,9 @@ describe("HARFileViewer", () => {
     await new Promise((resolve) => setTimeout(resolve, 500));
 
     // Should still see the api request
-    expect(
-      screen.getByText("https://example.com/api/test")
-    ).toBeInTheDocument();
-
-    // Should not see the css request (it should be filtered out)
     const rows = screen.queryAllByTestId("table-row");
     expect(rows.length).toBe(1);
+    expect(rows[0]).toHaveTextContent("https://example.com/api/test");
   });
 
   test("should clear search query when clear button is clicked", async () => {
diff --git a/components/MatchIndicators.tsx b/components/MatchIndicators.tsx
new file mode 100644
index 0000000..cfab50a
--- /dev/null
+++ b/components/MatchIndicators.tsx
@@ -0,0 +1,67 @@
+import { MatchCategory } from "@/components/utils/har-utils";
+
+interface MatchIndicatorsProps {
+  categories: MatchCategory[];
+  className?: string;
+}
+
+/**
+ * Displays colored dots to indicate which parts of an entry matched the search.
+ * Similar to iOS notification indicators.
+ * 
+ * Color scheme:
+ * - Blue: URL match
+ * - Purple: Headers match
+ * - Orange: Request payload match
+ * - Green: Response content match
+ */
+export default function MatchIndicators({
+  categories,
+  className = "",
+}: MatchIndicatorsProps) {
+  if (categories.length === 0) {
+    return null;
+  }
+
+  const getCategoryColor = (category: MatchCategory): string => {
+    switch (category) {
+      case "url":
+        return "bg-blue-500";
+      case "headers":
+        return "bg-purple-500";
+      case "request":
+        return "bg-orange-500";
+      case "response":
+        return "bg-green-500";
+      default:
+        return "bg-gray-500";
+    }
+  };
+
+  const getCategoryTitle = (category: MatchCategory): string => {
+    switch (category) {
+      case "url":
+        return "Match in URL";
+      case "headers":
+        return "Match in headers";
+      case "request":
+        return "Match in request payload";
+      case "response":
+        return "Match in response content";
+      default:
+        return "Match found";
+    }
+  };
+
+  return (
+    <div className={`flex items-center gap-1 ${className}`}>
+      {categories.map((category) => (
+        <div
+          key={category}
+          className={`w-2 h-2 rounded-full ${getCategoryColor(category)}`}
+          title={getCategoryTitle(category)}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/components/MatchSummaryPills.tsx b/components/MatchSummaryPills.tsx
new file mode 100644
index 0000000..de335e5
--- /dev/null
+++ b/components/MatchSummaryPills.tsx
@@ -0,0 +1,95 @@
+import {
+  HarEntry,
+  getMatchCategories,
+  MatchCategory,
+} from "@/components/utils/har-utils";
+
+interface MatchSummaryPillsProps {
+  entries: HarEntry[];
+  searchQuery: string;
+  className?: string;
+}
+
+interface CategoryCount {
+  category: MatchCategory;
+  count: number;
+  label: string;
+  color: string;
+}
+
+/**
+ * Displays pill-shaped badges showing the count of matches by category.
+ * Helps users understand where their search matches are located.
+ */
+export default function MatchSummaryPills({
+  entries,
+  searchQuery,
+  className = "",
+}: MatchSummaryPillsProps) {
+  if (!searchQuery) {
+    return null;
+  }
+
+  // Count matches by category
+  const categoryCounts: Record<MatchCategory, number> = {
+    url: 0,
+    headers: 0,
+    request: 0,
+    response: 0,
+  };
+
+  entries.forEach((entry) => {
+    const matchInfo = getMatchCategories(entry, searchQuery);
+    matchInfo.categories.forEach((category) => {
+      categoryCounts[category]++;
+    });
+  });
+
+  // Build display data
+  const categoryData: CategoryCount[] = [
+    {
+      category: "url",
+      count: categoryCounts.url,
+      label: "URLs",
+      color: "bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-200 dark:border-blue-800",
+    },
+    {
+      category: "headers",
+      count: categoryCounts.headers,
+      label: "Headers",
+      color: "bg-purple-500/10 text-purple-700 dark:text-purple-400 border-purple-200 dark:border-purple-800",
+    },
+    {
+      category: "request",
+      count: categoryCounts.request,
+      label: "Requests",
+      color: "bg-orange-500/10 text-orange-700 dark:text-orange-400 border-orange-200 dark:border-orange-800",
+    },
+    {
+      category: "response",
+      count: categoryCounts.response,
+      label: "Responses",
+      color: "bg-green-500/10 text-green-700 dark:text-green-400 border-green-200 dark:border-green-800",
+    },
+  ];
+
+  // Filter out categories with no matches
+  const activeCategories = categoryData.filter((cat) => cat.count > 0);
+
+  if (activeCategories.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={`flex flex-wrap gap-2 ${className}`}>
+      {activeCategories.map((cat) => (
+        <div
+          key={cat.category}
+          className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium ${cat.color}`}
+        >
+          {cat.label}: {cat.count}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/components/SearchHighlightText.tsx b/components/SearchHighlightText.tsx
new file mode 100644
index 0000000..0f65837
--- /dev/null
+++ b/components/SearchHighlightText.tsx
@@ -0,0 +1,58 @@
+interface SearchHighlightTextProps {
+  text: string;
+  searchQuery: string;
+  className?: string;
+}
+
+/**
+ * Component to highlight search matches in text, similar to Chrome's Cmd+F functionality.
+ * Matches are highlighted with a yellow background.
+ */
+export default function SearchHighlightText({
+  text,
+  searchQuery,
+  className = "",
+}: SearchHighlightTextProps) {
+  if (!searchQuery || !text) {
+    return <span className={className}>{text}</span>;
+  }
+
+  const parts: JSX.Element[] = [];
+  const lowerText = text.toLowerCase();
+  const lowerQuery = searchQuery.toLowerCase();
+  
+  let lastIndex = 0;
+  let currentIndex = 0;
+
+  while ((currentIndex = lowerText.indexOf(lowerQuery, lastIndex)) !== -1) {
+    // Add text before match
+    if (currentIndex > lastIndex) {
+      parts.push(
+        <span key={`text-${lastIndex}`}>
+          {text.slice(lastIndex, currentIndex)}
+        </span>
+      );
+    }
+
+    // Add highlighted match
+    parts.push(
+      <mark
+        key={`match-${currentIndex}`}
+        className="bg-yellow-300 dark:bg-yellow-600 dark:text-black rounded px-0.5"
+      >
+        {text.slice(currentIndex, currentIndex + searchQuery.length)}
+      </mark>
+    );
+
+    lastIndex = currentIndex + searchQuery.length;
+  }
+
+  // Add remaining text
+  if (lastIndex < text.length) {
+    parts.push(
+      <span key={`text-${lastIndex}`}>{text.slice(lastIndex)}</span>
+    );
+  }
+
+  return <span className={className}>{parts}</span>;
+}
diff --git a/components/utils/har-utils.ts b/components/utils/har-utils.ts
index 48c2336..8763327 100644
--- a/components/utils/har-utils.ts
+++ b/components/utils/har-utils.ts
@@ -112,3 +112,76 @@ export function tryParseJSON(str: string) {
     return str;
   }
 }
+
+// Search match categories for visual indicators
+export type MatchCategory = "url" | "headers" | "request" | "response";
+
+export interface MatchInfo {
+  categories: MatchCategory[];
+  hasMatch: boolean;
+}
+
+/**
+ * Determines which categories of content match the search query for a given entry.
+ * Used to display colored indicators showing where matches were found.
+ */
+export function getMatchCategories(
+  entry: HarEntry,
+  searchQuery: string
+): MatchInfo {
+  if (!searchQuery) {
+    return { categories: [], hasMatch: false };
+  }
+
+  const query = searchQuery.toLowerCase();
+  const categories: MatchCategory[] = [];
+
+  // Check URL
+  if (entry.request.url.toLowerCase().includes(query)) {
+    categories.push("url");
+  }
+
+  // Check request and response headers
+  const hasHeaderMatch =
+    entry.request.headers.some(
+      (header) =>
+        header.name.toLowerCase().includes(query) ||
+        header.value.toLowerCase().includes(query)
+    ) ||
+    entry.response.headers.some(
+      (header) =>
+        header.name.toLowerCase().includes(query) ||
+        header.value.toLowerCase().includes(query)
+    );
+
+  if (hasHeaderMatch) {
+    categories.push("headers");
+  }
+
+  // Check request payload
+  if (entry.request.postData?.text) {
+    if (entry.request.postData.text.toLowerCase().includes(query)) {
+      categories.push("request");
+    }
+  }
+
+  // Check response content
+  if (entry.response.content.text) {
+    let contentToSearch = entry.response.content.text;
+    if (isBase64(contentToSearch)) {
+      try {
+        contentToSearch = atob(contentToSearch);
+      } catch (e) {
+        // If decode fails, search in original
+      }
+    }
+    if (contentToSearch.toLowerCase().includes(query)) {
+      categories.push("response");
+    }
+  }
+
+  return {
+    categories,
+    hasMatch: categories.length > 0,
+  };
+}
diff --git a/pages/utilities/har-file-viewer.tsx b/pages/utilities/har-file-viewer.tsx
index 93f01fb..91edb0a 100644
--- a/pages/utilities/har-file-viewer.tsx
+++ b/pages/utilities/har-file-viewer.tsx
@@ -9,6 +9,7 @@ import {
   HarTableProps,
   isBase64,
   tryParseJSON,
+  getMatchCategories,
 } from "@/components/utils/har-utils";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ds/ButtonComponent";
@@ -37,6 +38,9 @@ import {
   CommandList,
 } from "@/components/ds/CommandMenu";
 import { Checkbox } from "@/components/ds/CheckboxComponent";
+import SearchHighlightText from "@/components/SearchHighlightText";
+import MatchIndicators from "@/components/MatchIndicators";
+import MatchSummaryPills from "@/components/MatchSummaryPills";
 
 interface MultiSelectComboboxProps {
   data: { value: string; label: string }[];
@@ -335,6 +339,15 @@ export default function HARFileViewer() {
                     </Button>
                   )}
                 </div>
+                
+                {/* Match Summary Pills */}
+                {debouncedSearchQuery && (
+                  <MatchSummaryPills
+                    entries={harData.log.entries}
+                    searchQuery={debouncedSearchQuery}
+                  />
+                )}
+                
                 {/* Results count */}
                 {(debouncedSearchQuery ||
                   activeFilter !== "All" ||
@@ -595,7 +608,8 @@ const HarTable = ({
       <table className="w-full border-collapse table-fixed">
         <thead>
           <tr>
-            <th className={`${tableHeaderStyles} w-[40%]`}>Name</th>
+            {searchQuery && <th className={`${tableHeaderStyles} w-[40px]`}></th>}
+            <th className={`${tableHeaderStyles} ${searchQuery ? 'w-[38%]' : 'w-[40%]'}`}>Name</th>
             <th className={`${tableHeaderStyles} w-[12%]`}>
               <div className="flex items-center justify-between">
                 <span>Status</span>
@@ -626,74 +640,92 @@ const HarTable = ({
         </thead>
 
         <tbody>
-          {filteredAndSortedEntries.map((entry, index) => (
-            <Fragment key={index}>
-              <tr
-                data-testid="table-row"
-                className={cn(
-                  tableRowStyles,
-                  index % 2 === 0 && tableRowOddStyles,
-                  entry.response.status >= 400 && tableRowErrorStyles
-                )}
-                onClick={() => {
-                  setExpandedRow(expandedRow === index ? null : index);
-                }}
-              >
-                <td
+          {filteredAndSortedEntries.map((entry, index) => {
+            const matchInfo = searchQuery
+              ? getMatchCategories(entry, searchQuery)
+              : { categories: [], hasMatch: false };
+            
+            return (
+              <Fragment key={index}>
+                <tr
+                  data-testid="table-row"
                   className={cn(
-                    tableCellStyles,
-                    "max-w-xs cursor-pointer truncate"
+                    tableRowStyles,
+                    index % 2 === 0 && tableRowOddStyles,
+                    entry.response.status >= 400 && tableRowErrorStyles
                   )}
+                  onClick={() => {
+                    setExpandedRow(expandedRow === index ? null : index);
+                  }}
                 >
-                  {entry.request.url}
-                </td>
-                <td
-                  data-testid="column-status-code"
-                  className={cn(tableCellStyles, "cursor-pointer")}
-                >
-                  {entry.response.status}
-                </td>
-                <td className={cn(tableCellStyles, "cursor-pointer")}>
-                  {entry.response.content.mimeType}
-                </td>
-                <td className={cn(tableCellStyles, "cursor-pointer")}>
-                  {new Date(entry.startedDateTime).toLocaleTimeString()}
-                </td>
-                <td className={cn(tableCellStyles, "cursor-pointer")}>
-                  {(entry.response.content.size / 1024).toFixed(1) + "kB"}
-                </td>
-                <td className={tableCellStyles}>
-                  <div className="relative mb-1 h-2">
-                    <div
-                      className={cn(
-                        "absolute h-[3px] rounded-xl",
-                        getColorForTime(entry.time)
-                      )}
-                      style={{
-                        width: (entry.time / maxTime) * 100 + "%",
-                      }}
-                    />
-                  </div>
-                  {entry.time.toFixed(0) + "ms"}
-                </td>
-              </tr>
-
-              {expandedRow === index && (
-                <tr className={cn(index % 2 === 0 && tableRowOddStyles)}>
-                  <td colSpan={6} className={tableCellStyles}>
-                    <ExpandedDetails entry={entry} />
+                  {searchQuery && (
+                    <td className={cn(tableCellStyles, "cursor-pointer text-center")}>
+                      <MatchIndicators categories={matchInfo.categories} />
+                    </td>
+                  )}
+                  <td
+                    className={cn(
+                      tableCellStyles,
+                      "max-w-xs cursor-pointer truncate"
+                    )}
+                  >
+                    {searchQuery ? (
+                      <SearchHighlightText
+                        text={entry.request.url}
+                        searchQuery={searchQuery}
+                      />
+                    ) : (
+                      entry.request.url
+                    )}
+                  </td>
+                  <td
+                    data-testid="column-status-code"
+                    className={cn(tableCellStyles, "cursor-pointer")}
+                  >
+                    {entry.response.status}
+                  </td>
+                  <td className={cn(tableCellStyles, "cursor-pointer")}>
+                    {entry.response.content.mimeType}
+                  </td>
+                  <td className={cn(tableCellStyles, "cursor-pointer")}>
+                    {new Date(entry.startedDateTime).toLocaleTimeString()}
+                  </td>
+                  <td className={cn(tableCellStyles, "cursor-pointer")}>
+                    {(entry.response.content.size / 1024).toFixed(1) + "kB"}
+                  </td>
+                  <td className={tableCellStyles}>
+                    <div className="relative mb-1 h-2">
+                      <div
+                        className={cn(
+                          "absolute h-[3px] rounded-xl",
+                          getColorForTime(entry.time)
+                        )}
+                        style={{
+                          width: (entry.time / maxTime) * 100 + "%",
+                        }}
+                      />
+                    </div>
+                    {entry.time.toFixed(0) + "ms"}
                   </td>
                 </tr>
-              )}
-            </Fragment>
-          ))}
+
+                {expandedRow === index && (
+                  <tr className={cn(index % 2 === 0 && tableRowOddStyles)}>
+                    <td colSpan={searchQuery ? 7 : 6} className={tableCellStyles}>
+                      <ExpandedDetails entry={entry} searchQuery={searchQuery} />
+                    </td>
+                  </tr>
+                )}
+              </Fragment>
+            );
+          })}
         </tbody>
       </table>
     </div>
   );
 };
 
-const ExpandedDetails = ({ entry }: { entry: HarEntry }) => {
+const ExpandedDetails = ({ entry, searchQuery }: { entry: HarEntry; searchQuery: string }) => {
   const [activeTab, setActiveTab] = useState("headers");
 
   const decodeContent = useCallback((content: string) => {
@@ -788,9 +820,26 @@ const ExpandedDetails = ({ entry }: { entry: HarEntry }) => {
             {entry.response.headers.map((header, index) => (
               <div key={index} className="flex break-all text-[13px]">
                 <span className="flex min-w-[260px] font-medium">
-                  {header.name}:{" "}
+                  {searchQuery ? (
+                    <SearchHighlightText
+                      text={header.name}
+                      searchQuery={searchQuery}
+                    />
+                  ) : (
+                    header.name
+                  )}
+                  :{" "}
+                </span>
+                <span className="flex">
+                  {searchQuery ? (
+                    <SearchHighlightText
+                      text={header.value}
+                      searchQuery={searchQuery}
+                    />
+                  ) : (
+                    header.value
+                  )}
                 </span>
-                <span className="flex">{header.value}</span>
               </div>
             ))}
 
@@ -798,9 +847,26 @@ const ExpandedDetails = ({ entry }: { entry: HarEntry }) => {
             {entry.request.headers.map((header, index) => (
               <div key={index} className="flex break-all text-[13px]">
                 <span className="flex min-w-[260px] font-medium">
-                  {header.name}:{" "}
+                  {searchQuery ? (
+                    <SearchHighlightText
+                      text={header.name}
+                      searchQuery={searchQuery}
+                    />
+                  ) : (
+                    header.name
+                  )}
+                  :{" "}
+                </span>
+                <span className="flex">
+                  {searchQuery ? (
+                    <SearchHighlightText
+                      text={header.value}
+                      searchQuery={searchQuery}
+                    />
+                  ) : (
+                    header.value
+                  )}
                 </span>
-                <span className="flex">{header.value}</span>
               </div>
             ))}
           </div>

From e9d0ddf6e270146ad41e35ae06e880892b020a2a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 18 Oct 2025 11:08:26 +0000
Subject: [PATCH 3/5] Fix code review issues: highlight length and table width
 percentages

Co-authored-by: peckz <18050177+peckz@users.noreply.github.com>
---
 components/SearchHighlightText.tsx  |  4 ++--
 pages/utilities/har-file-viewer.tsx | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/SearchHighlightText.tsx b/components/SearchHighlightText.tsx
index 0f65837..8bdfce3 100644
--- a/components/SearchHighlightText.tsx
+++ b/components/SearchHighlightText.tsx
@@ -40,11 +40,11 @@ export default function SearchHighlightText({
         key={`match-${currentIndex}`}
         className="bg-yellow-300 dark:bg-yellow-600 dark:text-black rounded px-0.5"
       >
-        {text.slice(currentIndex, currentIndex + searchQuery.length)}
+        {text.slice(currentIndex, currentIndex + lowerQuery.length)}
       </mark>
     );
 
-    lastIndex = currentIndex + searchQuery.length;
+    lastIndex = currentIndex + lowerQuery.length;
   }
 
   // Add remaining text
diff --git a/pages/utilities/har-file-viewer.tsx b/pages/utilities/har-file-viewer.tsx
index 91edb0a..f84a027 100644
--- a/pages/utilities/har-file-viewer.tsx
+++ b/pages/utilities/har-file-viewer.tsx
@@ -608,8 +608,8 @@ const HarTable = ({
       <table className="w-full border-collapse table-fixed">
         <thead>
           <tr>
-            {searchQuery && <th className={`${tableHeaderStyles} w-[40px]`}></th>}
-            <th className={`${tableHeaderStyles} ${searchQuery ? 'w-[38%]' : 'w-[40%]'}`}>Name</th>
+            {searchQuery && <th className={`${tableHeaderStyles} w-[50px]`}></th>}
+            <th className={`${tableHeaderStyles} ${searchQuery ? 'w-[35%]' : 'w-[40%]'}`}>Name</th>
             <th className={`${tableHeaderStyles} w-[12%]`}>
               <div className="flex items-center justify-between">
                 <span>Status</span>
@@ -622,8 +622,8 @@ const HarTable = ({
                 </div>
               </div>
             </th>
-            <th className={`${tableHeaderStyles} w-[15%]`}>Type</th>
-            <th className={`${tableHeaderStyles} w-[15%]`}>Started at</th>
+            <th className={`${tableHeaderStyles} ${searchQuery ? 'w-[13%]' : 'w-[15%]'}`}>Type</th>
+            <th className={`${tableHeaderStyles} ${searchQuery ? 'w-[13%]' : 'w-[15%]'}`}>Started at</th>
             <th
               className={`${tableHeaderSortableStyles} w-[8%]`}
               onClick={() => handleSort("size")}
@@ -631,7 +631,7 @@ const HarTable = ({
               Size {sortField === "size" && (sortOrder === "asc" ? " ▲" : " ▼")}
             </th>
             <th
-              className={`${tableHeaderSortableStyles} w-[10%]`}
+              className={`${tableHeaderSortableStyles} ${searchQuery ? 'w-[9%]' : 'w-[10%]'}`}
               onClick={() => handleSort("time")}
             >
               Time {sortField === "time" && (sortOrder === "asc" ? " ▲" : " ▼")}

From 2ec1812cfb74d1d81bcd314a674dcf94e8a30330 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 19 Oct 2025 16:34:22 +0000
Subject: [PATCH 4/5] Add 'Search' column header and notification dots on tabs

Co-authored-by: peckz <18050177+peckz@users.noreply.github.com>
---
 pages/utilities/har-file-viewer.tsx | 56 +++++++++++++++++++++++++----
 1 file changed, 49 insertions(+), 7 deletions(-)

diff --git a/pages/utilities/har-file-viewer.tsx b/pages/utilities/har-file-viewer.tsx
index f84a027..ff3da54 100644
--- a/pages/utilities/har-file-viewer.tsx
+++ b/pages/utilities/har-file-viewer.tsx
@@ -10,6 +10,7 @@ import {
   isBase64,
   tryParseJSON,
   getMatchCategories,
+  MatchCategory,
 } from "@/components/utils/har-utils";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ds/ButtonComponent";
@@ -608,7 +609,7 @@ const HarTable = ({
       <table className="w-full border-collapse table-fixed">
         <thead>
           <tr>
-            {searchQuery && <th className={`${tableHeaderStyles} w-[50px]`}></th>}
+            {searchQuery && <th className={`${tableHeaderStyles} w-[50px]`} title="Search match indicators">Search</th>}
             <th className={`${tableHeaderStyles} ${searchQuery ? 'w-[35%]' : 'w-[40%]'}`}>Name</th>
             <th className={`${tableHeaderStyles} w-[12%]`}>
               <div className="flex items-center justify-between">
@@ -712,7 +713,11 @@ const HarTable = ({
                 {expandedRow === index && (
                   <tr className={cn(index % 2 === 0 && tableRowOddStyles)}>
                     <td colSpan={searchQuery ? 7 : 6} className={tableCellStyles}>
-                      <ExpandedDetails entry={entry} searchQuery={searchQuery} />
+                      <ExpandedDetails 
+                        entry={entry} 
+                        searchQuery={searchQuery}
+                        matchInfo={matchInfo}
+                      />
                     </td>
                   </tr>
                 )}
@@ -725,7 +730,15 @@ const HarTable = ({
   );
 };
 
-const ExpandedDetails = ({ entry, searchQuery }: { entry: HarEntry; searchQuery: string }) => {
+const ExpandedDetails = ({ 
+  entry, 
+  searchQuery,
+  matchInfo 
+}: { 
+  entry: HarEntry; 
+  searchQuery: string;
+  matchInfo: { categories: MatchCategory[]; hasMatch: boolean };
+}) => {
   const [activeTab, setActiveTab] = useState("headers");
 
   const decodeContent = useCallback((content: string) => {
@@ -788,17 +801,32 @@ const ExpandedDetails = ({ entry, searchQuery }: { entry: HarEntry; searchQuery:
     );
   };
 
-  const TabHeader = ({ id, label }: { id: string; label: string }) => {
+  const TabHeader = ({ 
+    id, 
+    label, 
+    hasMatch 
+  }: { 
+    id: string; 
+    label: string;
+    hasMatch?: boolean;
+  }) => {
     return (
       <Button
         size="sm"
         variant="outline"
         className={cn(
+          "relative",
           activeTab === id && "bg-border border hover:bg-border/80"
         )}
         onClick={() => setActiveTab(id)}
       >
         {label}
+        {hasMatch && searchQuery && (
+          <span 
+            className="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-green-500"
+            title="Match found in this section"
+          />
+        )}
       </Button>
     );
   };
@@ -806,10 +834,24 @@ const ExpandedDetails = ({ entry, searchQuery }: { entry: HarEntry; searchQuery:
   return (
     <div>
       <div className="mb-3 flex gap-1 px-4 py-2">
-        <TabHeader id="headers" label="Headers" />
-        {entry.request.postData && <TabHeader id="payload" label="Payload" />}
+        <TabHeader 
+          id="headers" 
+          label="Headers"
+          hasMatch={matchInfo.categories.includes("headers")}
+        />
+        {entry.request.postData && (
+          <TabHeader 
+            id="payload" 
+            label="Payload"
+            hasMatch={matchInfo.categories.includes("request")}
+          />
+        )}
         {entry.response.content.text && (
-          <TabHeader id="response" label="Response" />
+          <TabHeader 
+            id="response" 
+            label="Response"
+            hasMatch={matchInfo.categories.includes("response")}
+          />
         )}
       </div>
 

From 22120afd021c5fdd9106cbf989ad975c62148b3c Mon Sep 17 00:00:00 2001
From: Petar Cirkovic <pekiseven@gmail.com>
Date: Mon, 20 Oct 2025 12:05:53 +0200
Subject: [PATCH 5/5] fix: align pills and search info

---
 components/MatchIndicators.tsx      |   2 +-
 components/MatchSummaryPills.tsx    |  12 ++-
 components/SearchHighlightText.tsx  |   6 +-
 pages/utilities/har-file-viewer.tsx | 111 +++++++++++++++++-----------
 4 files changed, 79 insertions(+), 52 deletions(-)

diff --git a/components/MatchIndicators.tsx b/components/MatchIndicators.tsx
index cfab50a..90682e7 100644
--- a/components/MatchIndicators.tsx
+++ b/components/MatchIndicators.tsx
@@ -8,7 +8,7 @@ interface MatchIndicatorsProps {
 /**
  * Displays colored dots to indicate which parts of an entry matched the search.
  * Similar to iOS notification indicators.
- * 
+ *
  * Color scheme:
  * - Blue: URL match
  * - Purple: Headers match
diff --git a/components/MatchSummaryPills.tsx b/components/MatchSummaryPills.tsx
index de335e5..39d6e0e 100644
--- a/components/MatchSummaryPills.tsx
+++ b/components/MatchSummaryPills.tsx
@@ -51,25 +51,29 @@ export default function MatchSummaryPills({
       category: "url",
       count: categoryCounts.url,
       label: "URLs",
-      color: "bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-200 dark:border-blue-800",
+      color:
+        "bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-200 dark:border-blue-800",
     },
     {
       category: "headers",
       count: categoryCounts.headers,
       label: "Headers",
-      color: "bg-purple-500/10 text-purple-700 dark:text-purple-400 border-purple-200 dark:border-purple-800",
+      color:
+        "bg-purple-500/10 text-purple-700 dark:text-purple-400 border-purple-200 dark:border-purple-800",
     },
     {
       category: "request",
       count: categoryCounts.request,
       label: "Requests",
-      color: "bg-orange-500/10 text-orange-700 dark:text-orange-400 border-orange-200 dark:border-orange-800",
+      color:
+        "bg-orange-500/10 text-orange-700 dark:text-orange-400 border-orange-200 dark:border-orange-800",
     },
     {
       category: "response",
       count: categoryCounts.response,
       label: "Responses",
-      color: "bg-green-500/10 text-green-700 dark:text-green-400 border-green-200 dark:border-green-800",
+      color:
+        "bg-green-500/10 text-green-700 dark:text-green-400 border-green-200 dark:border-green-800",
     },
   ];
 
diff --git a/components/SearchHighlightText.tsx b/components/SearchHighlightText.tsx
index 8bdfce3..16e0ed1 100644
--- a/components/SearchHighlightText.tsx
+++ b/components/SearchHighlightText.tsx
@@ -20,7 +20,7 @@ export default function SearchHighlightText({
   const parts: JSX.Element[] = [];
   const lowerText = text.toLowerCase();
   const lowerQuery = searchQuery.toLowerCase();
-  
+
   let lastIndex = 0;
   let currentIndex = 0;
 
@@ -49,9 +49,7 @@ export default function SearchHighlightText({
 
   // Add remaining text
   if (lastIndex < text.length) {
-    parts.push(
-      <span key={`text-${lastIndex}`}>{text.slice(lastIndex)}</span>
-    );
+    parts.push(<span key={`text-${lastIndex}`}>{text.slice(lastIndex)}</span>);
   }
 
   return <span className={className}>{parts}</span>;
diff --git a/pages/utilities/har-file-viewer.tsx b/pages/utilities/har-file-viewer.tsx
index ff3da54..7586dfa 100644
--- a/pages/utilities/har-file-viewer.tsx
+++ b/pages/utilities/har-file-viewer.tsx
@@ -340,24 +340,22 @@ export default function HARFileViewer() {
                     </Button>
                   )}
                 </div>
-                
-                {/* Match Summary Pills */}
-                {debouncedSearchQuery && (
-                  <MatchSummaryPills
-                    entries={harData.log.entries}
-                    searchQuery={debouncedSearchQuery}
-                  />
-                )}
-                
-                {/* Results count */}
-                {(debouncedSearchQuery ||
-                  activeFilter !== "All" ||
-                  statusFilter.length > 0) && (
+
+                <div className="flex items-center min-h-[32px] gap-4">
+                  {/* Match Summary Pills */}
+                  {debouncedSearchQuery && (
+                    <MatchSummaryPills
+                      entries={harData.log.entries}
+                      searchQuery={debouncedSearchQuery}
+                    />
+                  )}
+
+                  {/* Results count */}
                   <p className="text-sm text-muted-foreground">
                     Showing {getFilteredCount()} of {harData.log.entries.length}{" "}
                     requests
                   </p>
-                )}
+                </div>
               </div>
 
               {/* Filters and View Mode */}
@@ -609,8 +607,19 @@ const HarTable = ({
       <table className="w-full border-collapse table-fixed">
         <thead>
           <tr>
-            {searchQuery && <th className={`${tableHeaderStyles} w-[50px]`} title="Search match indicators">Search</th>}
-            <th className={`${tableHeaderStyles} ${searchQuery ? 'w-[35%]' : 'w-[40%]'}`}>Name</th>
+            {searchQuery && (
+              <th
+                className={`${tableHeaderStyles} w-[50px]`}
+                title="Search match indicators"
+              >
+                Search
+              </th>
+            )}
+            <th
+              className={`${tableHeaderStyles} ${searchQuery ? "w-[35%]" : "w-[40%]"}`}
+            >
+              Name
+            </th>
             <th className={`${tableHeaderStyles} w-[12%]`}>
               <div className="flex items-center justify-between">
                 <span>Status</span>
@@ -623,8 +632,16 @@ const HarTable = ({
                 </div>
               </div>
             </th>
-            <th className={`${tableHeaderStyles} ${searchQuery ? 'w-[13%]' : 'w-[15%]'}`}>Type</th>
-            <th className={`${tableHeaderStyles} ${searchQuery ? 'w-[13%]' : 'w-[15%]'}`}>Started at</th>
+            <th
+              className={`${tableHeaderStyles} ${searchQuery ? "w-[13%]" : "w-[15%]"}`}
+            >
+              Type
+            </th>
+            <th
+              className={`${tableHeaderStyles} ${searchQuery ? "w-[13%]" : "w-[15%]"}`}
+            >
+              Started at
+            </th>
             <th
               className={`${tableHeaderSortableStyles} w-[8%]`}
               onClick={() => handleSort("size")}
@@ -632,7 +649,7 @@ const HarTable = ({
               Size {sortField === "size" && (sortOrder === "asc" ? " ▲" : " ▼")}
             </th>
             <th
-              className={`${tableHeaderSortableStyles} ${searchQuery ? 'w-[9%]' : 'w-[10%]'}`}
+              className={`${tableHeaderSortableStyles} ${searchQuery ? "w-[9%]" : "w-[10%]"}`}
               onClick={() => handleSort("time")}
             >
               Time {sortField === "time" && (sortOrder === "asc" ? " ▲" : " ▼")}
@@ -645,7 +662,7 @@ const HarTable = ({
             const matchInfo = searchQuery
               ? getMatchCategories(entry, searchQuery)
               : { categories: [], hasMatch: false };
-            
+
             return (
               <Fragment key={index}>
                 <tr
@@ -660,7 +677,12 @@ const HarTable = ({
                   }}
                 >
                   {searchQuery && (
-                    <td className={cn(tableCellStyles, "cursor-pointer text-center")}>
+                    <td
+                      className={cn(
+                        tableCellStyles,
+                        "cursor-pointer text-center"
+                      )}
+                    >
                       <MatchIndicators categories={matchInfo.categories} />
                     </td>
                   )}
@@ -712,9 +734,12 @@ const HarTable = ({
 
                 {expandedRow === index && (
                   <tr className={cn(index % 2 === 0 && tableRowOddStyles)}>
-                    <td colSpan={searchQuery ? 7 : 6} className={tableCellStyles}>
-                      <ExpandedDetails 
-                        entry={entry} 
+                    <td
+                      colSpan={searchQuery ? 7 : 6}
+                      className={tableCellStyles}
+                    >
+                      <ExpandedDetails
+                        entry={entry}
                         searchQuery={searchQuery}
                         matchInfo={matchInfo}
                       />
@@ -730,12 +755,12 @@ const HarTable = ({
   );
 };
 
-const ExpandedDetails = ({ 
-  entry, 
+const ExpandedDetails = ({
+  entry,
   searchQuery,
-  matchInfo 
-}: { 
-  entry: HarEntry; 
+  matchInfo,
+}: {
+  entry: HarEntry;
   searchQuery: string;
   matchInfo: { categories: MatchCategory[]; hasMatch: boolean };
 }) => {
@@ -801,12 +826,12 @@ const ExpandedDetails = ({
     );
   };
 
-  const TabHeader = ({ 
-    id, 
-    label, 
-    hasMatch 
-  }: { 
-    id: string; 
+  const TabHeader = ({
+    id,
+    label,
+    hasMatch,
+  }: {
+    id: string;
     label: string;
     hasMatch?: boolean;
   }) => {
@@ -822,8 +847,8 @@ const ExpandedDetails = ({
       >
         {label}
         {hasMatch && searchQuery && (
-          <span 
-            className="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-green-500"
+          <span
+            className="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-yellow-500"
             title="Match found in this section"
           />
         )}
@@ -834,21 +859,21 @@ const ExpandedDetails = ({
   return (
     <div>
       <div className="mb-3 flex gap-1 px-4 py-2">
-        <TabHeader 
-          id="headers" 
+        <TabHeader
+          id="headers"
           label="Headers"
           hasMatch={matchInfo.categories.includes("headers")}
         />
         {entry.request.postData && (
-          <TabHeader 
-            id="payload" 
+          <TabHeader
+            id="payload"
             label="Payload"
             hasMatch={matchInfo.categories.includes("request")}
           />
         )}
         {entry.response.content.text && (
-          <TabHeader 
-            id="response" 
+          <TabHeader
+            id="response"
             label="Response"
             hasMatch={matchInfo.categories.includes("response")}
           />