Developers underestimate performance importance leading to poor user experience

Build a VS Code extension (written in TypeScript) that opens a Webview panel for the live overlay and dashboard. The extension spawns a Node.js runtime agent bundled with the target app via a small npm package (e.g., `perf-agent`). The agent uses the Chrome DevTools Protocol (CDP) for JavaScript/Node apps and the .NET DiagnosticSource for C# apps, exposing a gRPC server (protobuf definitions) on localhost. The extension connects via `@grpc/grpc-js` to stream CPU, heap, and frame‑timing events. For UI timing, inject a tiny script using `@babel/parser` and `@babel/traverse` to wrap React render calls with `performance.mark`/`measure`. The extension forwards the stream to the Webview, which renders charts with `recharts` and overlays suggestions. The recommendation engine runs in a Python FastAPI microservice; the extension posts metric batches to `/analyze` endpoint. The service loads a pre‑trained XGBoost model (trained on a curated anti‑pattern dataset) and uses `pylint` AST visitors to map patterns to source locations, returning suggestions via JSON. The dashboard stores historical runs in a local DuckDB file accessed via the FastAPI `/history` route. All components are containerized with Docker for local development, and the VS Code extension registers a `workspace.onDidChangeTextDocument` listener to correlate code edits with the most recent metric snapshot, enabling contextual hints.

Embedding live performance data and actionable anti‑pattern alerts directly in the IDE turns profiling into a continuous, low‑friction activity, dramatically reducing the time spent on post‑release debugging. By catching regressions early, the tool cuts compute waste from repeated full‑scale load tests and eliminates human error in interpreting raw metrics, leading to consistently snappier user experiences and a measurable uplift in developer productivity.