feat(popup): collapsible advanced replay settings, compact fit-to-display table, status/hits as colored icon badges with tooltips

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

Author: tsemachh

CHANGELOG.md

@@ -5,6 +5,14 @@ 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.15] - 2026-05-03
+### Changed
+- Removed the Replay stats panel (Matched / Unmatched / Recent unmatched). The per-row green ● match indicator on the API requests list is now the single source of truth.
+- Replay configuration (fallback matching, latency, latency range, URL mappings) is collapsed under a toggleable **Advanced settings** `<details>` block in the Replay tab to reduce vertical clutter.
+- Captured Requests table is now fixed-layout: long URLs are truncated in the **Path** cell with the full URL shown on hover via a `title` tooltip.
+- **Status** column is now a colored circular badge (green 2xx / blue 3xx / amber 4xx / red 5xx / gray for none); click the badge to edit the status. The numeric value is in the tooltip.
+- **Hits** column is now a small colored pill badge with the hit count and a descriptive tooltip.
+
 ## [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.

package.json

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

src/popup.html

@@ -98,22 +98,23 @@ <h3 class="text-base font-semibold">Select Recording</h3>
                 </div>
             </div>
 
-            <div class="mb-4">
-                <label class="flex items-center space-x-2" title="If enabled, replay can match by method + path/query even when host differs">
-                    <input type="checkbox" id="fallbackMatching" class="form-checkbox" title="Match requests by method and path/query when exact URL host does not match">
-                    <span>Enable fallback matching for similar paths</span>
-                </label>
-                <div class="grid grid-cols-2 gap-2 mt-2">
-                    <input id="latencyMs" type="number" min="0" placeholder="Latency ms" class="p-1 text-sm border rounded dark:bg-gray-700" title="Optional fixed delay in milliseconds before each mocked response is returned">
-                    <input id="latencyRange" type="text" placeholder="Range: min,max" class="p-1 text-sm border rounded dark:bg-gray-700" title="Optional random delay range in milliseconds as min,max (for example: 100,500)">
-                </div>
-                <div class="mt-2">
-                    <label class="block text-xs font-semibold mb-1" for="urlMappings" title="Map recorded URL prefixes to different prefixes during replay. One mapping per line in the format: /from -> /to (for example: /microservice1/api -> /api)">URL Mappings (one per line: /from -&gt; /to)</label>
-                    <textarea id="urlMappings" rows="3" placeholder="/microservice1/api -> /api" class="w-full p-1 text-sm border rounded dark:bg-gray-700 font-mono" title="Map recorded URL path prefixes to replay path prefixes. Format: /recorded-prefix -> /replay-prefix. Example: /microservice1/api -> /api"></textarea>
+            <details class="mb-4 mt-3 border border-gray-300 dark:border-gray-600 rounded">
+                <summary class="cursor-pointer px-2 py-1 text-sm font-semibold bg-gray-100 dark:bg-gray-800 rounded" title="Toggle advanced replay configuration">Advanced settings</summary>
+                <div class="p-2">
+                    <label class="flex items-center space-x-2" title="If enabled, replay can match by method + path/query even when host differs">
+                        <input type="checkbox" id="fallbackMatching" class="form-checkbox" title="Match requests by method and path/query when exact URL host does not match">
+                        <span>Enable fallback matching for similar paths</span>
+                    </label>
+                    <div class="grid grid-cols-2 gap-2 mt-2">
+                        <input id="latencyMs" type="number" min="0" placeholder="Latency ms" class="p-1 text-sm border rounded dark:bg-gray-700" title="Optional fixed delay in milliseconds before each mocked response is returned">
+                        <input id="latencyRange" type="text" placeholder="Range: min,max" class="p-1 text-sm border rounded dark:bg-gray-700" title="Optional random delay range in milliseconds as min,max (for example: 100,500)">
+                    </div>
+                    <div class="mt-2">
+                        <label class="block text-xs font-semibold mb-1" for="urlMappings" title="Map recorded URL prefixes to different prefixes during replay. One mapping per line in the format: /from -> /to (for example: /microservice1/api -> /api)">URL Mappings (one per line: /from -&gt; /to)</label>
+                        <textarea id="urlMappings" rows="3" placeholder="/microservice1/api -> /api" class="w-full p-1 text-sm border rounded dark:bg-gray-700 font-mono" title="Map recorded URL path prefixes to replay path prefixes. Format: /recorded-prefix -> /replay-prefix. Example: /microservice1/api -> /api"></textarea>
+                    </div>
                 </div>
-            </div>
-
-            <div id="replayStatsPanel" class="mb-4 p-2 rounded bg-gray-200 dark:bg-gray-700 text-xs hidden"></div>
+            </details>
 
             <div>
                 <h3 class="text-base font-semibold mb-1">Captured Requests</h3>

src/popup/components/ApiPreview.ts

@@ -13,19 +13,36 @@ export function renderApiPaths(
   const isReplaying = options.isReplaying === true;
   const rows = Object.entries(requests).sort(([a], [b]) => a.localeCompare(b));
 
+  function statusColorClass(status: number | undefined): string {
+    if (typeof status !== 'number') return 'bg-gray-300 dark:bg-gray-600';
+    if (status >= 500) return 'bg-red-500';
+    if (status >= 400) return 'bg-amber-500';
+    if (status >= 300) return 'bg-blue-500';
+    if (status >= 200) return 'bg-green-500';
+    return 'bg-gray-400';
+  }
+
   container.innerHTML = `
     <h4 class="font-semibold mb-1 text-xs">API Requests:</h4>
     ${rows.length === 0 ? '<div class="text-xs opacity-70">No matching requests.</div>' : `
-      <div class="overflow-auto border border-gray-300 dark:border-gray-600 rounded">
-        <table class="w-full text-xs">
+      <div class="border border-gray-300 dark:border-gray-600 rounded">
+        <table class="w-full text-xs table-fixed">
+          <colgroup>
+            <col style="width: 2.2rem">
+            <col style="width: 1.4rem">
+            <col style="width: 3.2rem">
+            <col>
+            <col style="width: 1.6rem">
+            <col style="width: 1.6rem">
+          </colgroup>
           <thead class="bg-gray-200 dark:bg-gray-800">
             <tr>
-              <th class="text-left p-1" title="Include this request when replaying">Replay</th>
+              <th class="text-left p-1" title="Include this request when replaying">▶</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>
-              <th class="text-left p-1">Hits</th>
+              <th class="text-left p-1" title="HTTP response status (color-coded). Click to edit.">St</th>
+              <th class="text-left p-1" title="Replay hits for this recorded path">#</th>
             </tr>
           </thead>
           <tbody>
@@ -35,7 +52,8 @@ export function renderApiPaths(
                 const path = url.pathname + url.search;
                 const pathWithoutQuery = path.split('?')[0];
                 const replayCount = requestHitCounts[pathWithoutQuery] || 0;
-                const statusValue = typeof request.status === 'number' ? String(request.status) : '';
+                const statusNum = typeof request.status === 'number' ? request.status : undefined;
+                const statusText = statusNum !== undefined ? String(statusNum) : '—';
                 const enabled = request.enabled !== false;
                 const matchHits = matchedKeys[key] || 0;
                 const matchColor = !isReplaying
@@ -48,26 +66,40 @@ export function renderApiPaths(
                   : matchHits > 0
                     ? `Matched ${matchHits} time(s) during current replay`
                     : 'Not matched yet during current replay';
+                const fullUrlAttr = request.url.replace(/"/g, '&quot;');
+                const pathAttr = path.replace(/"/g, '&quot;');
+                const statusTitle = statusNum !== undefined
+                  ? `Response status: ${statusNum} (click to edit)`
+                  : 'No status recorded (click to set)';
+                const hitsTitle = replayCount > 0
+                  ? `${replayCount} replay hit(s) on this path`
+                  : 'No replay hits yet on this path';
+                const hitsClass = replayCount > 0
+                  ? 'bg-green-500 text-white'
+                  : 'bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-300';
                 return `
                   <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">
-                      <input
-                        type="number"
-                        min="100"
-                        max="599"
-                        class="request-status-input w-16 px-1 py-0.5 rounded border border-gray-300 dark:border-gray-600 bg-transparent"
+                    <td class="p-1 cursor-pointer hover:text-blue-500 truncate" data-path="${pathAttr}" title="${fullUrlAttr}">${path}</td>
+                    <td class="p-1 text-center">
+                      <button
+                        type="button"
+                        class="request-status-icon inline-flex items-center justify-center w-5 h-5 rounded-full text-[9px] font-bold text-white ${statusColorClass(statusNum)}"
                         data-request-key="${encodeURIComponent(key)}"
-                        value="${statusValue}"
-                        placeholder="-"
-                      >
+                        data-status="${statusNum ?? ''}"
+                        title="${statusTitle}"
+                      >${statusText}</button>
+                    </td>
+                    <td class="p-1 text-center">
+                      <span
+                        class="inline-flex items-center justify-center min-w-[1.1rem] h-5 px-1 rounded-full text-[10px] font-semibold ${hitsClass}"
+                        title="${hitsTitle}"
+                      >${replayCount}</span>
                     </td>
-                    <td class="p-1">${replayCount}</td>
                   </tr>
                 `;
               })
@@ -98,37 +130,30 @@ export function renderApiPaths(
     });
   });
 
-  container.querySelectorAll('.request-status-input').forEach((element) => {
-    const input = element as HTMLInputElement;
-    const applyStatusUpdate = () => {
-      const encodedKey = input.getAttribute('data-request-key');
+  container.querySelectorAll('.request-status-icon').forEach((element) => {
+    const button = element as HTMLButtonElement;
+    button.addEventListener('click', (event) => {
+      event.stopPropagation();
+      const encodedKey = button.getAttribute('data-request-key');
       if (!encodedKey) {
         return;
       }
-
-      const trimmed = input.value.trim();
+      const current = button.getAttribute('data-status') || '';
+      const input = window.prompt('Set response status (100-599, empty to clear):', current);
+      if (input === null) {
+        return;
+      }
+      const trimmed = input.trim();
       if (trimmed.length === 0) {
         onUpdateStatus(decodeURIComponent(encodedKey), undefined);
         return;
       }
-
       const parsed = Number(trimmed);
       if (!Number.isFinite(parsed) || parsed < 100 || parsed > 599) {
-        input.classList.add('border-red-500');
+        alert('Status must be a number between 100 and 599.');
         return;
       }
-
-      input.classList.remove('border-red-500');
       onUpdateStatus(decodeURIComponent(encodedKey), Math.floor(parsed));
-    };
-
-    input.addEventListener('blur', applyStatusUpdate);
-    input.addEventListener('keydown', (event) => {
-      if (event.key === 'Enter') {
-        event.preventDefault();
-        applyStatusUpdate();
-        input.blur();
-      }
     });
   });
 }

src/popup/main.ts

@@ -46,7 +46,6 @@ document.addEventListener('DOMContentLoaded', () => {
     const presetsList = document.getElementById('presetsList');
     const savePresetBtn = document.getElementById('savePreset');
     const closePresetsBtn = document.getElementById('closePresets');
-    const replayStatsPanel = document.getElementById('replayStatsPanel');
     const latencyMsInput = document.getElementById('latencyMs');
     const latencyRangeInput = document.getElementById('latencyRange');
     const urlMappingsInput = document.getElementById('urlMappings') as HTMLTextAreaElement | null;
@@ -131,18 +130,11 @@ document.addEventListener('DOMContentLoaded', () => {
             recordingSelect.value = response.currentRecordingName;
             setActiveTab('replay');
             document.body.classList.add('is-replaying');
-            replayStatsPanel?.classList.remove('hidden');
-            void refreshReplayStats();
         }
     });
 
     loadRecordings();
     void loadPresets();
-    setInterval(() => {
-        if (isReplaying) {
-            void refreshReplayStats();
-        }
-    }, 1000);
 
     recordButton.addEventListener('click', () => {
         if (isRecording) {
@@ -262,10 +254,8 @@ document.addEventListener('DOMContentLoaded', () => {
                 isReplaying = true;
                 updateButtonStates();
                 updateStatusIndicator();
-                replayStatsPanel.classList.remove('hidden');
                 document.body.classList.add('is-replaying');
                 setActiveTab('replay');
-                void refreshReplayStats();
             } else {
                 alert('Failed to start replaying: ' + (response ? response.error : 'Unknown error'));
             }
@@ -281,7 +271,6 @@ document.addEventListener('DOMContentLoaded', () => {
                 isReplaying = false;
                 updateButtonStates();
                 updateStatusIndicator();
-                replayStatsPanel.classList.add('hidden');
                 document.body.classList.remove('is-replaying');
                 console.log('Replaying stopped successfully');
             } else {
@@ -816,22 +805,6 @@ document.addEventListener('DOMContentLoaded', () => {
         await loadPresets();
     });
 
-    async function refreshReplayStats() {
-        chrome.runtime.sendMessage({ action: 'getReplayStats' }, (response) => {
-            if (!response?.success || !response.replayStats) {
-                return;
-            }
-            const stats = response.replayStats;
-            const unmatched = stats.unmatched || 0;
-            const recent = (stats.unmatchedUrls || []).slice(-5).join(' | ');
-            replayStatsPanel.innerHTML = `
-              <div><strong>Replay stats</strong> <span class="opacity-60 text-xs">(only requests within the recording's URL filter are counted)</span></div>
-              <div>Matched: <strong>${stats.matched || 0}</strong></div>
-              <div class="opacity-70 text-xs">Unmatched (in-scope only): ${unmatched}</div>
-              ${unmatched > 0 && recent ? `<div class="opacity-60 text-xs">Recent unmatched: ${recent}</div>` : ''}
-            `;
-        });
-    }
 
 
     exportImportDropdown.addEventListener('click', () => {