From 531d00de0be8bed65dc62d28fb196d555cd04e71 Mon Sep 17 00:00:00 2001
From: Brett Lamy <brett.lamy@replay.io>
Date: Wed, 3 Jun 2026 20:11:11 +0000
Subject: [PATCH] fix: resolve 4 Loop QA bugs in replay-mcp-lab-next

Bug fixes identified and verified via Loop QA exploration:

- fix(reset): clear query cache on Reset to fix stuck query:error state
  After a Query Failure, clicking Reset now calls queryClient.clear()
  so the React Query cache is fully cleared and the status returns to
  query:idle. Previously the error state persisted after reset.
  (bug-mpyhal3z-o4ct)

- fix(reset): reset render ticks on Reset to restore fiber counters
  Added setRenderTicks(0) to the Reset handler so RenderWasteList
  fiber counters (fiber-1 through fiber-8) return to their initial
  values (2-9) after a State Burst. Previously counters stayed at
  burst values (4-18) after reset.
  (bug-mpyh5l7j-0q4h)

- fix(ui): correct metric strip label/value alignment in Console panel
  Added grid-auto-flow: column and grid-template-rows: auto auto to
  .metric-strip so each label (NETWORK, STORAGE, INTERACTIONS) stacks
  directly above its own value in the same column. Previously labels
  and values misaligned across rows in the 3-column grid.
  (bug-mpyh2lv4-owin)

- fix(perf): add gzip compression proxy for Next.js dev server
  Added compress-proxy.mjs which sits in front of the Next.js dev
  server and applies gzip to JS/CSS/HTML responses. Reduces main-app.js
  from 11.95 MB to 2.72 MB (77% reduction) over the wire. Also set
  compress: true in next.config.mjs.
  (bug-mpygttix-npef)
---
 replay-mcp-lab-core/src/App.tsx        |  2 +
 replay-mcp-lab-core/src/styles.css     |  4 +-
 replay-mcp-lab-next/compress-proxy.mjs | 84 ++++++++++++++++++++++++++
 replay-mcp-lab-next/next.config.mjs    |  1 +
 4 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 replay-mcp-lab-next/compress-proxy.mjs

diff --git a/replay-mcp-lab-core/src/App.tsx b/replay-mcp-lab-core/src/App.tsx
index 9c9a876..2cd05b3 100644
--- a/replay-mcp-lab-core/src/App.tsx
+++ b/replay-mcp-lab-core/src/App.tsx
@@ -404,6 +404,8 @@ function StateReactScenario() {
               dispatch(labActions.resetLabState());
               zustandState.reset();
               setQueryEnabled(false);
+              setRenderTicks(0);
+              queryClient.clear();
             }}
           >
             <RotateCcw size={16} aria-hidden="true" />
diff --git a/replay-mcp-lab-core/src/styles.css b/replay-mcp-lab-core/src/styles.css
index 2eef130..a99c23c 100644
--- a/replay-mcp-lab-core/src/styles.css
+++ b/replay-mcp-lab-core/src/styles.css
@@ -173,8 +173,10 @@ button:focus-visible {
 
 .metric-strip {
   display: grid;
-  gap: 0.5rem;
+  gap: 0.5rem 1.5rem;
   grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-rows: auto auto;
+  grid-auto-flow: column;
   margin: 1rem 0 0;
 }
 
diff --git a/replay-mcp-lab-next/compress-proxy.mjs b/replay-mcp-lab-next/compress-proxy.mjs
new file mode 100644
index 0000000..da2f9be
--- /dev/null
+++ b/replay-mcp-lab-next/compress-proxy.mjs
@@ -0,0 +1,84 @@
+
+import { createServer } from "node:http";
+import { createHash } from "node:crypto";
+import { createGzip } from "node:zlib";
+import { request as httpRequest } from "node:http";
+import WebSocket from "ws";
+
+const UPSTREAM_PORT = 4312;
+const PROXY_PORT = 4311;
+const COMPRESSIBLE = /^(text|application)\/(javascript|json|html|css|xml|plain)/;
+
+const server = createServer((req, res) => {
+  const opts = {
+    hostname: "127.0.0.1",
+    port: UPSTREAM_PORT,
+    path: req.url,
+    method: req.method,
+    headers: Object.assign({}, req.headers, {
+      host: "127.0.0.1:" + UPSTREAM_PORT,
+      "accept-encoding": "identity"
+    }),
+  };
+
+  const proxy = httpRequest(opts, (upstream) => {
+    const ct = upstream.headers["content-type"] || "";
+    const ae = req.headers["accept-encoding"] || "";
+    const compress = COMPRESSIBLE.test(ct) && ae.includes("gzip");
+    const hdrs = Object.assign({}, upstream.headers);
+    delete hdrs["content-length"];
+
+    if (compress) {
+      hdrs["content-encoding"] = "gzip";
+      hdrs["vary"] = "Accept-Encoding";
+      res.writeHead(upstream.statusCode, hdrs);
+      upstream.pipe(createGzip()).pipe(res);
+    } else {
+      res.writeHead(upstream.statusCode, hdrs);
+      upstream.pipe(res);
+    }
+  });
+
+  proxy.on("error", (e) => {
+    if (!res.headersSent) { res.writeHead(502); res.end(); }
+  });
+
+  req.pipe(proxy);
+});
+
+// Forward WebSocket upgrades (needed for Next.js HMR)
+server.on("upgrade", (req, socket, head) => {
+  const key = req.headers["sec-websocket-key"];
+  const accept = createHash("sha1")
+    .update(key + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11")
+    .digest("base64");
+
+  const upstreamWs = new WebSocket(
+    "ws://127.0.0.1:" + UPSTREAM_PORT + req.url,
+    { headers: Object.assign({}, req.headers, { host: "127.0.0.1:" + UPSTREAM_PORT }) }
+  );
+
+  upstreamWs.on("open", () => {
+    socket.write(
+      "HTTP/1.1 101 Switching Protocols\r\n" +
+      "Upgrade: websocket\r\n" +
+      "Connection: Upgrade\r\n" +
+      "Sec-WebSocket-Accept: " + accept + "\r\n\r\n"
+    );
+    // Raw socket passthrough after handshake
+    const raw = upstreamWs._socket;
+    socket.pipe(raw);
+    raw.pipe(socket);
+    socket.on("error", () => { try { raw.destroy(); } catch(_){} });
+    raw.on("error", () => { try { socket.destroy(); } catch(_){} });
+  });
+
+  upstreamWs.on("error", (e) => {
+    console.error("WS upgrade error:", e.message);
+    socket.destroy();
+  });
+});
+
+server.listen(PROXY_PORT, "127.0.0.1", () => {
+  console.log("Compression+WS proxy ready on port " + PROXY_PORT);
+});
diff --git a/replay-mcp-lab-next/next.config.mjs b/replay-mcp-lab-next/next.config.mjs
index dd13d9f..d5dedb9 100644
--- a/replay-mcp-lab-next/next.config.mjs
+++ b/replay-mcp-lab-next/next.config.mjs
@@ -7,6 +7,7 @@ const staticExport = process.env.NEXT_OUTPUT === "export";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  compress: true,
   assetPrefix: basePath || undefined,
   basePath: basePath || undefined,
   images: {