feat(inspector-ui): expose pendingCount for X-new badge during pause (R5-9)

src/app/(dashboard)/dashboard/tools/traffic-inspector/components/TopBarControls.tsx

@@ -27,6 +27,7 @@ interface TopBarControlsProps {
   connected: boolean;
   total: number;
   maxSize?: number;
+  pendingCount?: number;
   // session recorder
   recording: boolean;
   session: SessionInfo | null;
@@ -53,6 +54,7 @@ export function TopBarControls({
   connected,
   total,
   maxSize = 1000,
+  pendingCount = 0,
   recording,
   session,
   elapsed,
@@ -188,6 +190,11 @@ export function TopBarControls({
           <span className="text-text-muted font-mono">
             {total}/{maxSize}
           </span>
+          {paused && pendingCount > 0 && (
+            <span className="inline-flex items-center rounded bg-yellow-500/20 px-1.5 py-0.5 text-[10px] font-semibold text-yellow-400 border border-yellow-500/40">
+              {t("pausedNewBadge", { count: pendingCount })}
+            </span>
+          )}
         </div>
       </div>
     </div>

src/i18n/messages/en.json

@@ -7488,6 +7488,8 @@
     "timingMethod": "Method",
     "timingStatus": "Status",
     "timingRequestSize": "Request size",
-    "timingResponseSize": "Response size"
+    "timingResponseSize": "Response size",
+    "pausedNewBadge": "{count} new",
+    "clearContextFilter": "clear"
   }
 }

src/i18n/messages/pt-BR.json

@@ -7478,6 +7478,8 @@
     "timingMethod": "Método",
     "timingStatus": "Status",
     "timingRequestSize": "Tamanho da requisição",
-    "timingResponseSize": "Tamanho da resposta"
+    "timingResponseSize": "Tamanho da resposta",
+    "pausedNewBadge": "{count} novos",
+    "clearContextFilter": "limpar"
   }
 }

tests/unit/ui/use-traffic-stream.test.tsx

@@ -3,6 +3,18 @@
  */
 import { describe, it, before, after, mock } from "node:test";
 import assert from "node:assert/strict";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const HOOK_SRC = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../../src/app/(dashboard)/dashboard/tools/traffic-inspector/hooks/useTrafficStream.ts"
+  ),
+  "utf8"
+);
 
 // Minimal EventEmitter-based mock WebSocket
 class MockWebSocket {
@@ -165,4 +177,26 @@ describe("useTrafficStream core logic", () => {
     assert.equal(pending.length, 1);
     assert.equal(pending[0].id, "3");
   });
+
+  it("TrafficStreamState interface includes pendingCount field (R5-9)", () => {
+    assert.ok(
+      HOOK_SRC.includes("pendingCount"),
+      "TrafficStreamState should expose pendingCount"
+    );
+  });
+
+  it("pendingCount increments when paused and new event arrives (R5-9)", () => {
+    // Verify the source contains the setPendingCount call when pushing to pendingRef
+    assert.ok(
+      HOOK_SRC.includes("setPendingCount(pendingRef.current.length)"),
+      "should call setPendingCount when adding to pendingRef"
+    );
+  });
+
+  it("pendingCount resets to 0 on resume (R5-9)", () => {
+    assert.ok(
+      HOOK_SRC.includes("setPendingCount(0)"),
+      "should reset pendingCount to 0 on resume and clear"
+    );
+  });
 });