feat(admin): Add trace log visualization to RPC endpoints (#6473)

This change enhances the RPC endpoints admin interface by adding trace
log visualization capabilities. Key changes include:

- Add new trace log formatter with syntax highlighting and improved
readability
- Introduce a toggle switch to alternate between query metadata and
trace logs view
- Add new types for better TypeScript support
- Improve styling of response containers with proper scrolling
- Reset debug mode when switching endpoints
- Add proper monospace font styling for trace logs

The trace log visualization includes:
- Color-coded components (host, thread ID, query ID, log levels)
- Text wrapping for better readability
- Proper HTML escaping for security

This enhancement will help to better understand query execution and
debug issues more effectively on EAP endpoints.



<img width="1728" alt="Screenshot 2024-10-29 at 11 04 12 AM"
src="https://github.com/user-attachments/assets/1476c740-03e8-4448-af5e-fccc484e2510">

.vscode/settings.json

@@ -26,21 +26,25 @@
   },
 
   "[javascript]": {
-    "editor.formatOnSave": true
+    "editor.formatOnSave": true,
+    "editor.tabSize": 2
   },
 
   "[javascriptreact]": {
-    "editor.formatOnSave": true
+    "editor.formatOnSave": true,
+    "editor.tabSize": 2
   },
 
   "[typescript]": {
     "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.tabSize": 2
   },
 
   "[typescriptreact]": {
     "editor.formatOnSave": true,
-    "editor.defaultFormatter": "vscode.typescript-language-features"
+    "editor.defaultFormatter": "vscode.typescript-language-features",
+    "editor.tabSize": 2
   },
 
   "[less]": {