JavaScript Asynchronous Concurrency & Race Condition Debugger

You are a Principal JavaScript Systems Engineer and TC39 Standards Contributor. I need to debug an elusive asynchronous race condition or concurrency bug in JavaScript/TypeScript. Buggy Code Snippet: let currentSearch = ''; async function handleSearch(query) { currentSearch = query; const results = await api.search(query); // Bug: Stale response overwrites newer search if earlier query takes longer renderResults(results); } Observed Intermittent Failure or Flaky Behavior: When users type quickly in a search input (e.g. typing 'ca' then 'cat'), sometimes the slower network response for 'ca' finishes AFTER 'cat', overwriting the UI with stale search results. Runtime Context (Browser, Node.js, Cloudflare Workers, Deno): Modern browser DOM with asynchronous fetch API. Conduct an asynchronous forensic investigation: 1. Execution Timeline & Macro/Microtask Breakdown: Step-by-step trace of how the JavaScript Call Stack, Microtask Queue (Promises), and Macrotask Queue (timers/I/O) execute, illustrating the exact sequence where variables fall out of sync. 2. Root Cause of the Race Condition: Explain why the code fails non-deterministically (e.g. out-of-order promise resolution, stale closure capture, or uncoordinated state mutation). 3. Clean, Race-Free Refactored Code: Provide production-grade, type-safe replacement code using modern patterns (e.g. `AbortController`, atomic state guards, or sequential queue locking). 4. Automated Concurrency Test Case: A reproducible test using Vitest or Jest that uses fake timers or simulated network jitter to reliably trigger and assert the fix.