feat: refactor control panel architecture and fix layout issues

Base class architecture improvements:
- Centralize all panel layout, styling, and behavior in ControlBase
- Implement consistent generateContent() pattern for subclasses
- Add proper flexbox layout with fixed header and scrollable content
- Standardize title styling, positioning, and scroll behavior

Panel layout fixes:
- Fix content positioning to appear inside panels instead of floating above
- Implement proper height management (expands with content up to browser height)
- Add correct scroll boundaries with only content area scrolling
- Position resize handle outside scroll area to avoid scrollbar interference

Visual improvements:
- Fix rounded border appearance with proper overflow handling
- Ensure header respects panel corner radius
- Add proper content margins and padding
- Improve resize handle positioning and visibility

Architecture standardization:
- All panels now follow same base class pattern
- Individual panels only provide configuration and content generation
- Eliminate duplicate styling and layout code across controls
- Consistent behavior across all panel types

🤖 Generated with [Claude Code](https://claude.ai/code)

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

testdrive-jsui/static/js/controls/status-control.js

@@ -131,10 +131,7 @@ class StatusControl extends ControlBase {
             const formatNumber = (num) => num.toLocaleString();
 
             return `
-                <div style="padding: 1rem; font-size: 0.8rem;">
-                    <div style="margin-top: 0; margin-bottom: 1rem; font-weight: 600; font-size: 1.1em; color: #333;">Document Statistics</div>
-
-                    <div class="stats-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem;">
+                <div class="stats-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem;">
                         <div class="stat-item">
                             <strong>Words:</strong><br>
                             <span style="font-size: 1.1em; color: #007bff;">${formatNumber(this.stats.words)}</span>
@@ -206,7 +203,6 @@ class StatusControl extends ControlBase {
                             Updated: ${new Date(this.lastUpdateTime).toLocaleTimeString()}
                         </div>
                     ` : ''}
-                </div>
             `;
 
         }, '<p>Error displaying statistics</p>', 'formatStatistics');
@@ -322,30 +318,37 @@ class StatusControl extends ControlBase {
      * Build the control content
      * Override of base class method to provide status-specific functionality
      */
-    buildContent() {
+    /**
+     * Generate status control content (called by base class buildContent)
+     */
+    generateContent() {
+        // Analyze document first
+        this.analyzeDocument();
+
         return this.safeOperation(() => {
-            // Analyze document first
-            this.analyzeDocument();
+            return this.formatStatistics();
+        }, 'Error generating status content', 'generateContent');
+    }
 
-            // Generate and set content
-            const content = this.element?.querySelector('.control-content');
-            if (content) {
-                content.innerHTML = this.formatStatistics();
+    /**
+     * Override buildContent to add control reference and auto-refresh
+     */
+    buildContent() {
+        super.buildContent();
 
-                // Store reference to this control for onclick handlers
-                this.element.statusControl = this;
-            }
+        // Store reference to this control for onclick handlers
+        if (this.element) {
+            this.element.statusControl = this;
+        }
 
-            // Set up auto-refresh for dynamic content
-            if (this.updateInterval) {
-                clearInterval(this.updateInterval);
-            }
+        // Set up auto-refresh for dynamic content
+        if (this.updateInterval) {
+            clearInterval(this.updateInterval);
+        }
 
-            this.updateInterval = setInterval(() => {
-                this.refreshStats();
-            }, 10000); // Update every 10 seconds
-
-        }, null, 'buildContent');
+        this.updateInterval = setInterval(() => {
+            this.refreshStats();
+        }, 10000); // Update every 10 seconds
     }
 
     /**