feat(replay): per-row match indicator + move status above tabs

Co-authored-by: Junie <junie@jetbrains.com>

Author: tsemachh

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on Keep a Changelog,
 and this project adheres to Semantic Versioning.
 
+## [1.0.14] - 2026-05-03
+### Changed
+- Replay status indicator moved above the Record/Replay tab buttons so the current state is visible regardless of the active tab.
+- Per-request match indicator: each row in the API requests list now shows a green ● when it has been matched at least once during the current replay (gray when not yet matched, faded when not replaying). Matched rows are highlighted with a subtle green tint. Replaces the previous reliance on the global Matched/Unmatched stats which under-counted because of de-duplication by path.
+
 ## [1.0.13] - 2026-05-03
 ### Changed
 - Replay stats now only count requests within the recording's URL filter (e.g. `/api`). Out-of-scope analytics calls (e.g. `/ingest/*`) no longer pollute Matched/Unmatched counters.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "apireplay",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "private": true,
   "type": "module",
   "scripts": {

src/background/replayer.ts

@@ -97,7 +97,7 @@ export async function startReplaying(
   }
 
   await chrome.storage.local.set({ replayedRequests: {} });
-  await chrome.storage.session.set({ replayStats: { matched: 0, unmatched: 0, unmatchedUrls: [], hitCount: {} } });
+  await chrome.storage.session.set({ replayStats: { matched: 0, unmatched: 0, unmatchedUrls: [], hitCount: {}, matchedKeys: {} } });
   await chrome.debugger.attach({ tabId: tabs[0].id }, '1.0');
   await chrome.debugger.sendCommand({ tabId: tabs[0].id }, 'Network.enable');
   await chrome.debugger.sendCommand({ tabId: tabs[0].id }, 'Fetch.enable', {
@@ -176,7 +176,7 @@ export async function onReplayerEvent(store: StateStore, tabId: number, message:
   }
 
   const requests = state.recordedData?.requests || state.recordedData || {};
-  const requestValues = Object.values(requests) as Array<any>;
+  const requestEntries = Object.entries(requests) as Array<[string, any]>;
 
   const requestUrl = getEventRequestUrl(params);
   if (!requestUrl) {
@@ -199,18 +199,21 @@ export async function onReplayerEvent(store: StateStore, tabId: number, message:
     return;
   }
 
-  let matched = requestValues.find(
-    (item) => methodsMatch(item.method, incomingMethod) && getPathname(item.url) === incomingPathname
+  let matchedEntry = requestEntries.find(
+    ([, item]) => methodsMatch(item.method, incomingMethod) && getPathname(item.url) === incomingPathname
   );
 
-  if (!matched && state.fallbackMatchingEnabled) {
-    matched = requestValues.find((item) => {
+  if (!matchedEntry && state.fallbackMatchingEnabled) {
+    matchedEntry = requestEntries.find(([, item]) => {
       if (!methodsMatch(item.method, incomingMethod)) return false;
       const candidatePath = getPathname(item.url);
       return candidatePath.split('/').filter(Boolean).length === incomingPathname.split('/').filter(Boolean).length;
     });
   }
 
+  const matched = matchedEntry?.[1];
+  const matchedKey = matchedEntry?.[0];
+
   if (!matched) {
     const replayStatsData = await chrome.storage.session.get('replayStats');
     const replayStats = replayStatsData.replayStats || { matched: 0, unmatched: 0, unmatchedUrls: [], hitCount: {} };
@@ -233,10 +236,14 @@ export async function onReplayerEvent(store: StateStore, tabId: number, message:
   await chrome.storage.local.set({ replayedRequests });
 
   const replayStatsData = await chrome.storage.session.get(['replayStats', 'replayOptions']);
-  const replayStats = replayStatsData.replayStats || { matched: 0, unmatched: 0, unmatchedUrls: [], hitCount: {} };
+  const replayStats = replayStatsData.replayStats || { matched: 0, unmatched: 0, unmatchedUrls: [], hitCount: {}, matchedKeys: {} };
   replayStats.matched += 1;
   replayStats.hitCount = replayStats.hitCount || {};
   replayStats.hitCount[path] = (replayStats.hitCount[path] || 0) + 1;
+  if (matchedKey) {
+    replayStats.matchedKeys = replayStats.matchedKeys || {};
+    replayStats.matchedKeys[matchedKey] = (replayStats.matchedKeys[matchedKey] || 0) + 1;
+  }
   await chrome.storage.session.set({ replayStats });
 
   const latency = resolveLatency(replayStatsData.replayOptions);

src/popup.html

@@ -18,13 +18,13 @@ <h2 class="text-xl font-bold">API Replay</h2>
             </button>
         </div>
 
+        <div id="statusIndicator" class="mb-2 p-1 bg-gray-200 dark:bg-gray-700 rounded text-center text-sm font-semibold"></div>
+
         <div class="mb-3 flex gap-2">
             <button id="recordTabButton" class="tab-button tab-button-active px-3 py-1 rounded text-sm font-semibold" type="button">Record</button>
             <button id="replayTabButton" class="tab-button px-3 py-1 rounded text-sm font-semibold" type="button">Replay &amp; Preview</button>
         </div>
 
-        <div id="statusIndicator" class="mb-2 p-1 bg-gray-200 dark:bg-gray-700 rounded text-center text-sm font-semibold"></div>
-
         <div id="recordTabPanel" class="tab-panel">
             <div class="mb-4">
                 <div class="grid grid-cols-1 gap-2 mt-2">

src/popup/components/ApiPreview.ts

@@ -6,8 +6,11 @@ export function renderApiPaths(
   requestHitCounts: Record<string, number>,
   onSelectPath: (path: string) => void,
   onToggleEnabled: (requestKey: string, enabled: boolean) => void,
-  onUpdateStatus: (requestKey: string, status: number | undefined) => void
+  onUpdateStatus: (requestKey: string, status: number | undefined) => void,
+  options: { matchedKeys?: Record<string, number>; isReplaying?: boolean } = {}
 ) {
+  const matchedKeys = options.matchedKeys || {};
+  const isReplaying = options.isReplaying === true;
   const rows = Object.entries(requests).sort(([a], [b]) => a.localeCompare(b));
 
   container.innerHTML = `
@@ -17,7 +20,8 @@ export function renderApiPaths(
         <table class="w-full text-xs">
           <thead class="bg-gray-200 dark:bg-gray-800">
             <tr>
-              <th class="text-left p-1">Replay</th>
+              <th class="text-left p-1" title="Include this request when replaying">Replay</th>
+              <th class="text-left p-1" title="${isReplaying ? 'Green = matched at least once during replay; gray = not yet matched' : 'Match indicator is shown during replay'}">●</th>
               <th class="text-left p-1">Method</th>
               <th class="text-left p-1">Path</th>
               <th class="text-left p-1">Status</th>
@@ -33,11 +37,23 @@ export function renderApiPaths(
                 const replayCount = requestHitCounts[pathWithoutQuery] || 0;
                 const statusValue = typeof request.status === 'number' ? String(request.status) : '';
                 const enabled = request.enabled !== false;
+                const matchHits = matchedKeys[key] || 0;
+                const matchColor = !isReplaying
+                  ? 'text-gray-300 dark:text-gray-600'
+                  : matchHits > 0
+                    ? 'text-green-500'
+                    : 'text-gray-400 dark:text-gray-500';
+                const matchTitle = !isReplaying
+                  ? 'Match indicator is shown during replay'
+                  : matchHits > 0
+                    ? `Matched ${matchHits} time(s) during current replay`
+                    : 'Not matched yet during current replay';
                 return `
-                  <tr class="border-t border-gray-200 dark:border-gray-700">
+                  <tr class="border-t border-gray-200 dark:border-gray-700${isReplaying && matchHits > 0 ? ' bg-green-50 dark:bg-green-900/20' : ''}">
                     <td class="p-1">
                       <input type="checkbox" class="request-enabled-toggle" data-request-key="${encodeURIComponent(key)}" ${enabled ? 'checked' : ''}>
                     </td>
+                    <td class="p-1 text-center ${matchColor}" title="${matchTitle}">●</td>
                     <td class="p-1">${request.method}</td>
                     <td class="p-1 cursor-pointer hover:text-blue-500" data-path="${path}">${path}</td>
                     <td class="p-1">

src/popup/main.ts

@@ -472,7 +472,7 @@ document.addEventListener('DOMContentLoaded', () => {
         return (requestSearchInput?.value || '').trim().toLowerCase();
     }
 
-    function renderPreviewList(container, recordingName, requests, requestHitCounts) {
+    function renderPreviewList(container, recordingName, requests, requestHitCounts, matchedKeys = {}) {
         if (!container) {
             return;
         }
@@ -499,7 +499,8 @@ document.addEventListener('DOMContentLoaded', () => {
                     }
                     updateApiPreview();
                 });
-            }
+            },
+            { matchedKeys, isReplaying }
         );
     }
 
@@ -555,9 +556,10 @@ document.addEventListener('DOMContentLoaded', () => {
                         ...replayedRequests,
                         ...replayStatsHitCount
                     };
+                    const matchedKeys = replaySessionData.replayStats?.matchedKeys || {};
 
-                    renderPreviewList(apiPreviewDiv, name, filteredRequests, requestHitCounts);
-                    renderPreviewList(recordApiPreviewDiv, name, allRequests, requestHitCounts);
+                    renderPreviewList(apiPreviewDiv, name, filteredRequests, requestHitCounts, matchedKeys);
+                    renderPreviewList(recordApiPreviewDiv, name, allRequests, requestHitCounts, matchedKeys);
                 })
                 .catch((error) => {
                     console.error('Load recording error:', error);