perf: optimize WebUI rendering and CSS performance

Frontend JS:
- Add render debouncing for renderInnerStatePanel (50ms)
- Add render debouncing for renderTaskPanel (100ms)
- Add render debouncing for renderScreenSessions (100ms)
- Store timeout references for cleanup

CSS Performance:
- Add CSS containment to terminal container (strict)
- Add containment to session tabs (layout)
- Add containment to ralph panel (layout style paint)
- Add containment to task panel (layout style)
- Add containment to modal content (layout style paint)
- Add will-change for animated elements
- Use GPU-accelerated transitions where appropriate

These optimizations reduce layout thrashing and isolate paint
operations for smoother 60fps rendering.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/web/public/app.js

@@ -29,6 +29,9 @@ class ClaudemanApp {
 
     // Render debouncing
     this.renderSessionTabsTimeout = null;
+    this.renderInnerStatePanelTimeout = null;
+    this.renderTaskPanelTimeout = null;
+    this.renderScreenSessionsTimeout = null;
 
     // System stats polling
     this.systemStatsInterval = null;
@@ -1912,6 +1915,16 @@ class ClaudemanApp {
   }
 
   renderTaskPanel() {
+    // Debounce renders at 100ms to prevent excessive DOM updates
+    if (this.renderTaskPanelTimeout) {
+      clearTimeout(this.renderTaskPanelTimeout);
+    }
+    this.renderTaskPanelTimeout = setTimeout(() => {
+      this._renderTaskPanelImmediate();
+    }, 100);
+  }
+
+  _renderTaskPanelImmediate() {
     const session = this.sessions.get(this.activeSessionId);
     const body = document.getElementById('backgroundTasksBody');
     const stats = document.getElementById('taskPanelStats');
@@ -2128,6 +2141,16 @@ class ClaudemanApp {
   }
 
   renderInnerStatePanel() {
+    // Debounce renders at 50ms to prevent excessive DOM updates
+    if (this.renderInnerStatePanelTimeout) {
+      clearTimeout(this.renderInnerStatePanelTimeout);
+    }
+    this.renderInnerStatePanelTimeout = setTimeout(() => {
+      this._renderInnerStatePanelImmediate();
+    }, 50);
+  }
+
+  _renderInnerStatePanelImmediate() {
     const panel = this.$('innerStatePanel');
     const toggle = this.$('ralphToggle');
 
@@ -2462,6 +2485,16 @@ class ClaudemanApp {
   }
 
   renderScreenSessions() {
+    // Debounce renders at 100ms to prevent excessive DOM updates
+    if (this.renderScreenSessionsTimeout) {
+      clearTimeout(this.renderScreenSessionsTimeout);
+    }
+    this.renderScreenSessionsTimeout = setTimeout(() => {
+      this._renderScreenSessionsImmediate();
+    }, 100);
+  }
+
+  _renderScreenSessionsImmediate() {
     const body = document.getElementById('screenSessionsBody');
 
     if (!this.screenSessions || this.screenSessions.length === 0) {