[FE] Log Admin UI: Proposed Optimization Strategy to Fix Performance Issues

Context

Currently, the Log page in the admin UI becomes unresponsive and causes high CPU/memory usage when the log count grows (even at ~1500+ entries).

Observed Behavior

1. Aggressive Polling: The frontend issues high-frequency requests to /api/logs.
2. DOM Bloat: Every new log entry is appended to the UI without a cleanup mechanism. With Svelte 5's fine-grained reactivity, rendering thousands of complex log rows (containing JSON metadata) eventually freezes the browser's main thread.
3. Memory Leak Risk: Since older entries aren't destroyed from the frontend state, memory usage increases linearly over time.

Proposed Optimization Strategy

1. Frontend Buffer Limit (Circular Buffer)

• Problem: Storing an infinite number of log entries in the Svelte store leads to OOM (Out of Memory).
• Solution: Implement a hard cap on the frontend log array (e.g., MAX_LOGS = 500). When the limit is reached, the oldest entries should be shifted out of the array.

2. DOM Virtualization

• Problem: Rendering 1000+ complex components into the DOM is heavy.
• Solution: Replace the standard {#each} loop with a Virtual List component (e.g., svelte-virtuallists). This ensures only the ~20 visible rows are rendered in the DOM, regardless of the total log count in memory.

3. Polling & Throttling Improvements

• Solution:
  • Increase the polling interval to reduce CPU/Network overhead.
  • Add a "Clear UI Logs" button to allow users to manually reset the frontend display without truncating the database.

Environment

• Warpgate Version: [v0.21.1]
• Browser: [146.0.7680.165]
• OS: [Windows 11]