fix(logs): use monotonic _id key to prevent O(n) DOM mutations on scroll

key={idx} with a shifting .slice(-300) window meant every new log arrival
caused React to update all 300 existing DOM nodes (index 1 became 0, 2
became 1, etc.), even though only one entry actually changed.

The proposed content-hash fix (timestamp + containerName + message.substring)
carries a real collision risk: chatty containers emitting identical lines at
the same millisecond produce duplicate keys, triggering undefined React
reconciliation behaviour.

Fix: add a _id: number field to LogEntry, stamped client-side with a
monotonic counter (logIdRef) at the point of ingestion — once in the SSE
onmessage handler and once in the polling setLogs path. React now tracks
data identity rather than position, so the slice window can shift without
touching the 299 unchanged DOM nodes.

CHANGELOG.md

@@ -5,7 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
-- **Fixed:** Browser Out of Memory crash in `GlobalObservabilityView` (Logs view) — the component rendered all log entries (up to 1,859+) as real DOM nodes with no virtualization, causing ~9,600 DOM nodes and ~25 MB of GC pressure every 5-second poll cycle. On RAM-constrained hosts (host system was at 97% usage) the browser renderer process OOMed within minutes. Fixed by capping DOM rendering to the last 300 entries (`MAX_DISPLAY_ROWS`), reducing the in-memory SSE log cap from 10,000 to 2,000 entries (`MAX_LOG_ENTRIES`), switching auto-scroll from `behavior: 'smooth'` (stacked layout animations) to `behavior: 'instant'`, and reducing the backend polling response limit from 2,000 to 500 lines.
+- **Fixed:** Browser Out of Memory crash in `GlobalObservabilityView` (Logs view) — the component rendered all log entries (up to 1,859+) as real DOM nodes with no virtualization, causing ~9,600 DOM nodes and ~25 MB of GC pressure every 5-second poll cycle. On RAM-constrained hosts (host system was at 97% usage) the browser renderer process OOMed within minutes. Fixed by capping DOM rendering to the last 300 entries (`MAX_DISPLAY_ROWS`), reducing the in-memory SSE log cap from 10,000 to 2,000 entries (`MAX_LOG_ENTRIES`), switching auto-scroll from `behavior: 'smooth'` (stacked layout animations) to `behavior: 'instant'`, and reducing the backend polling response limit from 2,000 to 500 lines. Also replaced `key={idx}` (array index) with a monotonic `_id` counter stamped at ingestion time so the slice window shifting no longer forces O(n) DOM mutations per new log line — React now only reconciles the one entry that actually changed.
 - **Fixed:** LogViewer (container SSE log stream) returning 404 on remote nodes — the `?nodeId=` query param was forwarded by `remoteNodeProxy` to the remote server, where `nodeContextMiddleware` rejected it with `Node X not found` because the gateway's node IDs don't exist on the remote instance. Fixed by stripping `nodeId` from `proxyReq.path` in `onProxyReq`, mirroring the existing `x-node-id` header removal.
 - **Fixed:** Terminal logs and container stats WebSockets failing with "HTTP Authentication failed" on remote nodes — the WebSocket upgrade proxy was forwarding the browser's `cookie` header to the remote Sencho instance. The remote's `authMiddleware` picks `cookieToken` before `bearerToken`, and the cookie (signed with the local JWT secret) fails verification on the remote, returning 401. Fixed by deleting the `cookie` header before `wsProxyServer.ws()`, mirroring the `proxyReq.removeHeader('cookie')` already present in the HTTP proxy. Also strips the gateway's `nodeId` query param from the forwarded URL so the remote defaults cleanly to its own local node.
 - **Fixed:** `streamStats` Docker stats stream leaking after WebSocket client disconnect — the Docker daemon stream was never destroyed when the WS closed, causing orphaned streams to poll the daemon indefinitely. Fixed by adding a `ws.on('close')` handler that calls `stats.destroy()`. Also guards all `ws.send()` calls with a `readyState === OPEN` check to prevent silent errors on a closed socket.

frontend/src/components/GlobalObservabilityView.tsx

@@ -21,6 +21,9 @@ interface LogEntry {
     level: string;
     message: string;
     timestampMs: number;
+    // Assigned client-side at ingestion. Gives React a stable, collision-free
+    // key so the slice window can shift without touching existing DOM nodes.
+    _id: number;
 }
 
 export function GlobalObservabilityView() {
@@ -43,6 +46,9 @@ export function GlobalObservabilityView() {
 
     // SSE throttle buffer
     const bufferRef = useRef<LogEntry[]>([]);
+    // Monotonic counter for stable React keys. Incremented once per log entry
+    // at ingestion so duplicate-content lines never share a key.
+    const logIdRef = useRef(0);
 
     // Fetch settings on mount
     useEffect(() => {
@@ -87,6 +93,7 @@ export function GlobalObservabilityView() {
             eventSource.onmessage = (event) => {
                 try {
                     const entry: LogEntry = JSON.parse(event.data);
+                    entry._id = ++logIdRef.current;
                     bufferRef.current.push(entry);
                 } catch (e) { /* ignore parse errors */ }
             };
@@ -121,7 +128,11 @@ export function GlobalObservabilityView() {
                 try {
                     const logsRes = await apiFetch('/logs/global');
                     if (logsRes.ok) {
-                        setLogs(await logsRes.json());
+                        const data: LogEntry[] = await logsRes.json();
+                        // Stamp each entry with a monotonic _id at ingestion so React
+                        // has a stable, collision-free key for every log line.
+                        data.forEach(entry => { entry._id = ++logIdRef.current; });
+                        setLogs(data);
                     }
                 } catch (error) {
                     console.error('Failed to fetch global logs:', error);
@@ -271,8 +282,8 @@ export function GlobalObservabilityView() {
                                 Showing last {MAX_DISPLAY_ROWS} of {filteredLogs.length} matching entries. Use filters or clear logs to see earlier entries.
                             </div>
                         )}
-                        {filteredLogs.slice(-MAX_DISPLAY_ROWS).map((log, idx) => (
-                            <div key={idx} className="mb-1 leading-relaxed whitespace-pre-wrap break-all hover:bg-white/5 px-2 py-0.5 rounded -mx-2 font-mono text-xs">
+                        {filteredLogs.slice(-MAX_DISPLAY_ROWS).map((log) => (
+                            <div key={log._id} className="mb-1 leading-relaxed whitespace-pre-wrap break-all hover:bg-white/5 px-2 py-0.5 rounded -mx-2 font-mono text-xs">
                                 <span className="text-gray-500 mr-2">[{new Date(log.timestampMs).toLocaleTimeString([], { hour12: true })}]</span>
                                 <span className="text-blue-400 font-semibold mr-2">[{log.containerName}]</span>
                                 <span className={`mr-2 font-bold ${log.level === 'ERROR' ? 'text-red-500' : log.level === 'WARN' ? 'text-yellow-500' : 'text-green-500'}`}>{log.level}:</span>