diff --git a/docs/adr/ADR-001-client-side-debug-storage.md b/docs/adr/ADR-001-client-side-debug-storage.md
new file mode 100644
index 00000000..9c329c59
--- /dev/null
+++ b/docs/adr/ADR-001-client-side-debug-storage.md
@@ -0,0 +1,173 @@
+# ADR-001: Client-Side Debug Storage Technology
+
+## Status
+**Accepted** - 2025-11-10
+
+## Context
+
+The Markitect application requires a robust client-side debugging infrastructure to track and display debug messages during document editing operations. The previous implementation relied on a tightly-coupled debug panel that expected specific DOM elements and was integrated into old dialog systems.
+
+### Requirements
+- **Independence**: Debug system must be independent of specific UI components
+- **Persistence**: Debug messages should survive browser refresh/close
+- **Real-time Updates**: UI should reflect new messages immediately
+- **Performance**: Should not block the main thread or impact editor performance
+- **Storage Capacity**: Must handle 1000+ debug messages efficiently
+- **Browser Compatibility**: Work across all modern browsers
+- **Developer Experience**: Easy to integrate and use throughout the codebase
+
+### Problem Statement
+The existing debug infrastructure was failing because:
+1. Tight coupling to specific DOM elements (`debug-messages-container`, `toggle-debug`)
+2. Dependency on old dialog systems
+3. No persistence across browser sessions
+4. Limited to in-memory storage only
+
+## Decision
+
+**We will use IndexedDB as the primary client-side storage technology for the debug system.**
+
+## Alternatives Considered
+
+### Option 1: IndexedDB (Selected)
+**Technology**: Browser-native object store database
+**Implementation**: `window.MarkitectDebugSystem` with async operations
+
+### Option 2: SQLite via SQL.js
+**Technology**: WebAssembly-based SQLite implementation
+**Implementation**: SQL.js library with manual persistence
+
+### Option 3: LocalStorage
+**Technology**: Browser key-value storage
+**Implementation**: JSON serialization with size limits
+
+### Option 4: In-Memory Only
+**Technology**: JavaScript arrays with no persistence
+**Implementation**: Simple message array management
+
+## Decision Matrix
+
+| Criteria | IndexedDB | SQLite | LocalStorage | In-Memory |
+|----------|-----------|---------|--------------|-----------|
+| **Storage Capacity** | ✅ Large (50-100MB+) | ✅ Large | ❌ Limited (5-10MB) | ❌ Session only |
+| **Performance** | ✅ Async/Non-blocking | ⚠️ Can block UI | ✅ Fast | ✅ Fastest |
+| **Persistence** | ✅ Across sessions | ✅ Across sessions | ✅ Across sessions | ❌ Lost on refresh |
+| **Query Capabilities** | ⚠️ Limited | ✅ Full SQL | ❌ None | ❌ JavaScript only |
+| **Dependencies** | ✅ Native | ❌ 1.5MB WebAssembly | ✅ Native | ✅ Native |
+| **Browser Support** | ✅ Universal modern | ✅ Universal | ✅ Universal | ✅ Universal |
+| **API Complexity** | ⚠️ Moderate | ✅ Familiar SQL | ✅ Simple | ✅ Simple |
+| **Use Case Fit** | ✅ Perfect match | ⚠️ Overkill | ❌ Too limited | ❌ Insufficient |
+
+## Rationale
+
+### Why IndexedDB?
+
+1. **Native Browser Support**: No external dependencies or WebAssembly files
+2. **Asynchronous Operations**: Won't block the UI thread during debug operations
+3. **Sufficient Storage**: 50-100MB+ capacity easily handles thousands of debug messages
+4. **Appropriate Complexity**: Matches our simple data model without over-engineering
+5. **Performance Optimized**: Browsers optimize IndexedDB for web applications
+6. **Security**: Runs within browser's security sandbox with proper origin isolation
+
+### Why Not SQLite?
+
+While SQLite offers powerful querying capabilities, it's overkill for our use case:
+
+- **Complexity**: Our data model is simple (timestamp, category, message)
+- **Dependencies**: 1.5MB WebAssembly adds significant overhead
+- **Synchronous Risk**: Large operations can block the UI thread
+- **Manual Persistence**: Requires explicit save/load operations
+- **Over-Engineering**: We don't need JOINs, complex queries, or relational features
+
+### Why Not LocalStorage?
+
+LocalStorage is too limited:
+- **Size Constraints**: 5-10MB limit insufficient for extensive debug logs
+- **Synchronous API**: Blocks main thread during operations
+- **No Structured Data**: JSON serialization/deserialization overhead
+- **Browser Quotas**: Can be evicted under storage pressure
+
+### Why Not In-Memory?
+
+In-memory storage is insufficient:
+- **No Persistence**: Debug context lost on page refresh
+- **Memory Pressure**: Large debug logs consume RAM
+- **Development Workflow**: Debugging often requires page reloads
+
+## Implementation Details
+
+### Data Structure
+```javascript
+{
+  id: auto_increment_id,
+  message: "Debug message text",
+  category: "INFO" | "WARNING" | "ERROR" | "SUCCESS" | "DEBUG",
+  timestamp: "2025-11-10T23:35:53.123Z",
+  displayTime: "11:35:53 PM"
+}
+```
+
+### Database Schema
+- **Store Name**: `messages`
+- **Key Path**: `id` (auto-increment)
+- **Indexes**: `timestamp`, `category`
+- **Version**: 1
+
+### API Design
+```javascript
+// Core operations
+await MarkitectDebugSystem.addMessage(message, category);
+await MarkitectDebugSystem.clearMessages();
+const messages = MarkitectDebugSystem.getMessages(category, limit);
+
+// Advanced features
+const unsubscribe = MarkitectDebugSystem.subscribe(callback);
+const json = MarkitectDebugSystem.exportMessages();
+```
+
+## Consequences
+
+### Positive
+- ✅ **Zero Dependencies**: No external libraries required
+- ✅ **High Performance**: Non-blocking operations maintain UI responsiveness
+- ✅ **Persistent Debugging**: Debug context preserved across browser sessions
+- ✅ **Scalable Storage**: Handles thousands of debug messages efficiently
+- ✅ **Future-Proof**: Can add advanced features without architectural changes
+- ✅ **Developer-Friendly**: Simple API integration throughout codebase
+
+### Negative
+- ⚠️ **Limited Querying**: Complex filtering requires custom JavaScript code
+- ⚠️ **Browser Variations**: Subtle differences in IndexedDB implementations
+- ⚠️ **Learning Curve**: Developers may be less familiar with IndexedDB vs SQL
+
+### Mitigation Strategies
+- **Query Limitations**: Implement helper methods for common filtering operations
+- **Browser Compatibility**: Use feature detection with graceful fallbacks
+- **Developer Experience**: Provide clear API documentation and examples
+
+## Future Considerations
+
+### Potential Enhancements
+1. **Hybrid Approach**: Add optional SQLite mode for advanced users
+2. **Data Export**: Multiple export formats (JSON, CSV, SQL dumps)
+3. **Advanced Filtering**: Web Workers for complex query operations
+4. **Data Visualization**: Charts and analytics for debug patterns
+5. **Remote Sync**: Optional sync to development servers
+
+### Migration Path
+The current IndexedDB implementation provides a foundation that could support:
+- Adding SQLite as an "advanced mode" option
+- Implementing data export to external analysis tools
+- Building analytics dashboards on top of the debug data
+
+## References
+- [IndexedDB API Documentation](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)
+- [SQL.js Documentation](https://sql.js.org/)
+- [Web Storage API Limitations](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#Storage_limits)
+
+## Approval
+
+**Decided by**: Claude Code Development Team
+**Date**: 2025-11-10
+**Context**: Independent debug system redesign
+**Next Review**: When complex querying requirements emerge
\ No newline at end of file
diff --git a/markitect/clean_document_manager.py b/markitect/clean_document_manager.py
index 975bde44..5e66d478 100644
--- a/markitect/clean_document_manager.py
+++ b/markitect/clean_document_manager.py
@@ -1182,9 +1182,13 @@ class CleanDocumentManager:
                 // Abstract control properties
                 element: null,
                 isExpanded: false,
+                isHeaderOnly: false,  // New state for header-only mode
                 isDragging: false,
+                isResizing: false,  // New state for resizing mode
                 dragOffset: {{ x: 0, y: 0 }},
+                resizeStartSize: {{ width: 280, height: 'auto' }},
                 originalPosition: {{ top: '80px', left: '20px' }},
+                defaultSize: {{ width: 280, minWidth: 200, minHeight: 150 }},
 
                 // Configuration properties (to be overridden by subclasses)
                 config: {{
@@ -1266,7 +1270,7 @@ class CleanDocumentManager:
                         <div class="control-panel" style="display: none;">
                             <div class="control-header">
                                 <span class="control-icon">${{this.config.icon}}</span>
-                                <h3>${{this.config.title}}</h3>
+                                <span class="control-title">${{this.config.title}}</span>
                                 <button class="control-close">✕</button>
                             </div>
                             <div class="control-content">Loading...</div>
@@ -1379,7 +1383,7 @@ class CleanDocumentManager:
                         this.setupDragHandlers(icon);
                     }}
 
-                    const title = header.querySelector('h3');
+                    const title = header.querySelector('.control-title');
                     if (title) {{
                         title.style.cssText = `
                             margin: 0;
@@ -1387,7 +1391,14 @@ class CleanDocumentManager:
                             font-weight: 600;
                             flex-grow: 1;
                             line-height: 1;
+                            cursor: pointer;
+                            user-select: none;
                         `;
+
+                        // Add click handler to toggle header-only mode
+                        title.addEventListener('click', () => {{
+                            this.toggleHeaderOnly();
+                        }});
                     }}
 
                     const closeBtn = header.querySelector('.control-close');
@@ -1397,13 +1408,14 @@ class CleanDocumentManager:
                             border: none;
                             font-size: 14px;
                             cursor: pointer;
-                            color: #666;
+                            color: #6c757d;
                             padding: 0;
                             width: 20px;
                             height: 20px;
-                            display: flex;
+                            display: none;
                             align-items: center;
                             justify-content: center;
+                            transition: color 0.2s ease;
                         `;
                     }}
                 }},
@@ -1459,14 +1471,23 @@ class CleanDocumentManager:
 
                     this.styleHeader();
                     this.styleContent();
+                    this.addResizeHandle();
                 }},
 
                 collapse: function() {{
                     this.isExpanded = false;
+                    this.isHeaderOnly = false;  // Reset header-only state
                     const panel = this.element.querySelector('.control-panel');
                     const toggleBtn = this.element.querySelector('.control-toggle');
                     panel.style.display = 'none';
+
+                    // Reset size to default
                     this.element.style.width = '40px';
+                    this.element.style.height = 'auto';
+
+                    // Remove resize handle
+                    this.removeResizeHandle();
+
                     toggleBtn.style.display = 'block';
 
                     // Reset position to original compass location
@@ -1477,6 +1498,28 @@ class CleanDocumentManager:
                     this.element.style.transform = this.originalPosition.transform;
                 }},
 
+                toggleHeaderOnly: function() {{
+                    if (!this.isExpanded) {{
+                        // If collapsed, first expand normally
+                        this.buildContent();
+                        return;
+                    }}
+
+                    const content = this.element.querySelector('.control-content');
+
+                    if (this.isHeaderOnly) {{
+                        // Show content area (go to full expanded mode)
+                        this.isHeaderOnly = false;
+                        content.style.display = 'block';
+                        console.log(`🎛️ ${{this.config.title}} expanded to full view`);
+                    }} else {{
+                        // Hide content area (go to header-only mode)
+                        this.isHeaderOnly = true;
+                        content.style.display = 'none';
+                        console.log(`🎛️ ${{this.config.title}} collapsed to header only`);
+                    }}
+                }},
+
                 setupDragHandlers: function(dragElement) {{
                     dragElement.addEventListener('mousedown', (e) => {{
                         this.isDragging = true;
@@ -1515,6 +1558,128 @@ class CleanDocumentManager:
                             dragElement.style.cursor = 'grab';
                         }}
                     }});
+                }},
+
+                // Add resize handle to expanded control
+                addResizeHandle: function() {{
+                    // Remove existing resize handle if any
+                    this.removeResizeHandle();
+
+                    const resizeHandle = document.createElement('div');
+                    resizeHandle.className = 'control-resize-handle';
+                    // Create small circle for resize handle
+                    resizeHandle.innerHTML = '';
+                    resizeHandle.style.cssText = `
+                        position: absolute;
+                        bottom: 2px;
+                        right: 2px;
+                        width: 8px;
+                        height: 8px;
+                        cursor: nw-resize;
+                        display: none;
+                        user-select: none;
+                        z-index: 1001;
+                        background: #6c757d;
+                        border-radius: 50%;
+                        opacity: 0.6;
+                        transition: opacity 0.2s ease;
+                    `;
+
+                    this.element.appendChild(resizeHandle);
+                    this.setupResizeHandlers(resizeHandle);
+                    this.setupHoverBehavior();
+                }},
+
+                // Setup hover behavior for resize handle and close button
+                setupHoverBehavior: function() {{
+                    const resizeHandle = this.element.querySelector('.control-resize-handle');
+                    const closeBtn = this.element.querySelector('.control-close');
+
+                    if (resizeHandle && closeBtn) {{
+                        // Show/hide on control hover
+                        this.element.addEventListener('mouseenter', () => {{
+                            resizeHandle.style.display = 'flex';
+                            closeBtn.style.display = 'block';
+                        }});
+
+                        this.element.addEventListener('mouseleave', () => {{
+                            resizeHandle.style.display = 'none';
+                            closeBtn.style.display = 'none';
+                        }});
+                    }}
+                }},
+
+                // Remove resize handle
+                removeResizeHandle: function() {{
+                    const existingHandle = this.element.querySelector('.control-resize-handle');
+                    if (existingHandle) {{
+                        existingHandle.remove();
+                    }}
+                }},
+
+                // Set up resize event handlers
+                setupResizeHandlers: function(resizeHandle) {{
+                    resizeHandle.addEventListener('mousedown', (e) => {{
+                        this.isResizing = true;
+                        const rect = this.element.getBoundingClientRect();
+                        this.resizeStartSize = {{
+                            width: rect.width,
+                            height: rect.height,
+                            startX: e.clientX,
+                            startY: e.clientY
+                        }};
+
+                        resizeHandle.style.cursor = 'nw-resize';
+                        resizeHandle.style.color = '#28a745';
+
+                        e.preventDefault();
+                        e.stopPropagation(); // Prevent triggering drag
+                    }});
+
+                    document.addEventListener('mousemove', (e) => {{
+                        if (!this.isResizing || !this.isExpanded) return;
+
+                        const deltaX = e.clientX - this.resizeStartSize.startX;
+                        const deltaY = e.clientY - this.resizeStartSize.startY;
+
+                        const newWidth = Math.max(this.defaultSize.minWidth, this.resizeStartSize.width + deltaX);
+                        const newHeight = Math.max(this.defaultSize.minHeight, this.resizeStartSize.height + deltaY);
+
+                        // Check viewport bounds
+                        const maxWidth = window.innerWidth - this.element.offsetLeft;
+                        const maxHeight = window.innerHeight - this.element.offsetTop;
+
+                        const boundedWidth = Math.min(newWidth, maxWidth - 20);
+                        const boundedHeight = Math.min(newHeight, maxHeight - 20);
+
+                        this.element.style.width = boundedWidth + 'px';
+                        this.element.style.height = boundedHeight + 'px';
+
+                        // Ensure content areas resize properly
+                        this.updateContentSize();
+                    }});
+
+                    document.addEventListener('mouseup', () => {{
+                        if (this.isResizing) {{
+                            this.isResizing = false;
+                            resizeHandle.style.cursor = 'nw-resize';
+                            resizeHandle.style.color = '#6c757d';
+                        }}
+                    }});
+                }},
+
+                // Update content area sizes during resize
+                updateContentSize: function() {{
+                    const content = this.element.querySelector('.control-content');
+                    if (content) {{
+                        // Adjust content height to fit the resized control
+                        const headerHeight = 40; // Header is 40px
+                        const padding = 16; // Account for padding
+                        const controlHeight = this.element.offsetHeight;
+                        const availableHeight = controlHeight - headerHeight - padding;
+
+                        content.style.maxHeight = Math.max(100, availableHeight) + 'px';
+                    }}
                 }}
             }};
 
@@ -1649,9 +1814,13 @@ document.addEventListener('DOMContentLoaded', function() {
         // Abstract control properties
         element: null,
         isExpanded: false,
+        isHeaderOnly: false,  // New state for header-only mode
         isDragging: false,
+        isResizing: false,  // New state for resizing mode
         dragOffset: { x: 0, y: 0 },
+        resizeStartSize: { width: 280, height: 'auto' },
         originalPosition: { top: '80px', left: '20px' },
+        defaultSize: { width: 280, minWidth: 200, minHeight: 150 },
 
         // Configuration properties (to be overridden by subclasses)
         config: {
@@ -1733,7 +1902,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 <div class="control-panel" style="display: none;">
                     <div class="control-header">
                         <span class="control-icon">${this.config.icon}</span>
-                        <h3>${this.config.title}</h3>
+                        <span class="control-title">${this.config.title}</span>
                         <button class="control-close">✕</button>
                     </div>
                     <div class="control-content">Loading...</div>
@@ -1831,7 +2000,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 this.setupDragHandlers(icon);
             }
 
-            const title = header.querySelector('h3');
+            const title = header.querySelector('.control-title');
             if (title) {
                 title.style.cssText = `
                     margin: 0;
@@ -1839,7 +2008,14 @@ document.addEventListener('DOMContentLoaded', function() {
                     font-weight: 600;
                     flex-grow: 1;
                     line-height: 1;
+                    cursor: pointer;
+                    user-select: none;
                 `;
+
+                // Add click handler to toggle header-only mode
+                title.addEventListener('click', () => {
+                    this.toggleHeaderOnly();
+                });
             }
 
             const closeBtn = header.querySelector('.control-close');
@@ -1849,13 +2025,14 @@ document.addEventListener('DOMContentLoaded', function() {
                     border: none;
                     font-size: 14px;
                     cursor: pointer;
-                    color: #666;
+                    color: #6c757d;
                     padding: 0;
                     width: 20px;
                     height: 20px;
-                    display: flex;
+                    display: none;
                     align-items: center;
                     justify-content: center;
+                    transition: color 0.2s ease;
                 `;
             }
         },
@@ -1911,14 +2088,23 @@ document.addEventListener('DOMContentLoaded', function() {
 
             this.styleHeader();
             this.styleContent();
+            this.addResizeHandle();
         },
 
         collapse: function() {
             this.isExpanded = false;
+            this.isHeaderOnly = false;  // Reset header-only state
             const panel = this.element.querySelector('.control-panel');
             const toggleBtn = this.element.querySelector('.control-toggle');
             panel.style.display = 'none';
+
+            // Reset size to default
             this.element.style.width = '40px';
+            this.element.style.height = 'auto';
+
+            // Remove resize handle
+            this.removeResizeHandle();
+
             toggleBtn.style.display = 'block';
 
             // Reset position to original compass location
@@ -1929,6 +2115,28 @@ document.addEventListener('DOMContentLoaded', function() {
             this.element.style.transform = this.originalPosition.transform;
         },
 
+        toggleHeaderOnly: function() {
+            if (!this.isExpanded) {
+                // If collapsed, first expand normally
+                this.buildContent();
+                return;
+            }
+
+            const content = this.element.querySelector('.control-content');
+
+            if (this.isHeaderOnly) {
+                // Show content area (go to full expanded mode)
+                this.isHeaderOnly = false;
+                content.style.display = 'block';
+                console.log(`🎛️ ${this.config.title} expanded to full view`);
+            } else {
+                // Hide content area (go to header-only mode)
+                this.isHeaderOnly = true;
+                content.style.display = 'none';
+                console.log(`🎛️ ${this.config.title} collapsed to header only`);
+            }
+        },
+
         setupDragHandlers: function(dragElement) {
             dragElement.addEventListener('mousedown', (e) => {
                 this.isDragging = true;
@@ -1967,6 +2175,128 @@ document.addEventListener('DOMContentLoaded', function() {
                     dragElement.style.cursor = 'grab';
                 }
             });
+        },
+
+        // Add resize handle to expanded control (same as viewing mode)
+        addResizeHandle: function() {
+            // Remove existing resize handle if any
+            this.removeResizeHandle();
+
+            const resizeHandle = document.createElement('div');
+            resizeHandle.className = 'control-resize-handle';
+            // Create small circle for resize handle
+            resizeHandle.innerHTML = '';
+            resizeHandle.style.cssText = `
+                position: absolute;
+                bottom: 2px;
+                right: 2px;
+                width: 8px;
+                height: 8px;
+                cursor: nw-resize;
+                display: none;
+                user-select: none;
+                z-index: 1001;
+                background: #6c757d;
+                border-radius: 50%;
+                opacity: 0.6;
+                transition: opacity 0.2s ease;
+            `;
+
+            this.element.appendChild(resizeHandle);
+            this.setupResizeHandlers(resizeHandle);
+            this.setupHoverBehavior();
+        },
+
+        // Remove resize handle
+        removeResizeHandle: function() {
+            const existingHandle = this.element.querySelector('.control-resize-handle');
+            if (existingHandle) {
+                existingHandle.remove();
+            }
+        },
+
+        // Set up resize event handlers
+        setupResizeHandlers: function(resizeHandle) {
+            resizeHandle.addEventListener('mousedown', (e) => {
+                this.isResizing = true;
+                const rect = this.element.getBoundingClientRect();
+                this.resizeStartSize = {
+                    width: rect.width,
+                    height: rect.height,
+                    startX: e.clientX,
+                    startY: e.clientY
+                };
+
+                resizeHandle.style.cursor = 'nw-resize';
+                resizeHandle.style.background = 'rgba(40, 167, 69, 0.9)';
+
+                e.preventDefault();
+                e.stopPropagation(); // Prevent triggering drag
+            });
+
+            document.addEventListener('mousemove', (e) => {
+                if (!this.isResizing || !this.isExpanded) return;
+
+                const deltaX = e.clientX - this.resizeStartSize.startX;
+                const deltaY = e.clientY - this.resizeStartSize.startY;
+
+                const newWidth = Math.max(this.defaultSize.minWidth, this.resizeStartSize.width + deltaX);
+                const newHeight = Math.max(this.defaultSize.minHeight, this.resizeStartSize.height + deltaY);
+
+                // Check viewport bounds
+                const maxWidth = window.innerWidth - this.element.offsetLeft;
+                const maxHeight = window.innerHeight - this.element.offsetTop;
+
+                const boundedWidth = Math.min(newWidth, maxWidth - 20);
+                const boundedHeight = Math.min(newHeight, maxHeight - 20);
+
+                this.element.style.width = boundedWidth + 'px';
+                this.element.style.height = boundedHeight + 'px';
+
+                // Ensure content areas resize properly
+                this.updateContentSize();
+            });
+
+            document.addEventListener('mouseup', () => {
+                if (this.isResizing) {
+                    this.isResizing = false;
+                    resizeHandle.style.cursor = 'nw-resize';
+                    resizeHandle.style.color = '#6c757d';
+                }
+            });
+        },
+
+        // Update content area sizes during resize
+        updateContentSize: function() {
+            const content = this.element.querySelector('.control-content');
+            if (content) {
+                // Adjust content height to fit the resized control
+                const headerHeight = 40; // Header is 40px
+                const padding = 16; // Account for padding
+                const controlHeight = this.element.offsetHeight;
+                const availableHeight = controlHeight - headerHeight - padding;
+
+                content.style.maxHeight = Math.max(100, availableHeight) + 'px';
+            }
+        },
+
+        // Setup hover behavior for resize handle and close button
+        setupHoverBehavior: function() {
+            const resizeHandle = this.element.querySelector('.control-resize-handle');
+            const closeBtn = this.element.querySelector('.control-close');
+
+            if (resizeHandle && closeBtn) {
+                // Show/hide on control hover
+                this.element.addEventListener('mouseenter', () => {
+                    resizeHandle.style.display = 'flex';
+                    closeBtn.style.display = 'block';
+                });
+
+                this.element.addEventListener('mouseleave', () => {
+                    resizeHandle.style.display = 'none';
+                    closeBtn.style.display = 'none';
+                });
+            }
         }
     };
 
@@ -2035,6 +2365,559 @@ document.addEventListener('DOMContentLoaded', function() {
         console.error("ContentsControl failed to initialize:", error);
     }
 
+    // Step 7: Initialize Independent Debug System
+    try {
+        // Create independent debug system using IndexedDB for persistence
+        window.MarkitectDebugSystem = {
+            db: null,
+            messages: [],
+            maxMessages: 1000,
+            isEnabled: true,
+            subscribers: [],
+
+            // Selection and filtering system
+            selectionCriteria: {
+                includeDocumentEvents: true,
+                includeSystemEvents: false,
+                includeControlEvents: true,
+                includeEditingEvents: true,
+                includeNavigationEvents: false,
+                includedHeadings: new Set(), // Track which document headings to monitor
+                excludedSources: new Set(['ContentsControl', 'DocumentNavigator'])
+            },
+
+            // Initialize IndexedDB for persistence
+            async init() {
+                return new Promise((resolve, reject) => {
+                    const request = indexedDB.open('MarkitectDebugDB', 1);
+
+                    request.onerror = () => reject(request.error);
+                    request.onsuccess = () => {
+                        this.db = request.result;
+                        this.loadMessages().then(resolve);
+                    };
+
+                    request.onupgradeneeded = (e) => {
+                        const db = e.target.result;
+                        if (!db.objectStoreNames.contains('messages')) {
+                            const store = db.createObjectStore('messages', { keyPath: 'id', autoIncrement: true });
+                            store.createIndex('timestamp', 'timestamp', { unique: false });
+                            store.createIndex('category', 'category', { unique: false });
+                        }
+                    };
+                });
+            },
+
+            // Add a debug message with selection filtering
+            async addMessage(message, category = 'INFO', source = 'System', context = {}) {
+                // Check if this message should be included based on selection criteria
+                if (!this.shouldIncludeMessage(message, category, source, context)) {
+                    return null;
+                }
+
+                const messageObj = {
+                    message: String(message),
+                    category: category.toUpperCase(),
+                    source: source,
+                    context: context,
+                    timestamp: new Date().toISOString(),
+                    displayTime: new Date().toLocaleTimeString()
+                };
+
+                // Add to memory
+                this.messages.push(messageObj);
+
+                // Keep only last maxMessages in memory
+                if (this.messages.length > this.maxMessages) {
+                    this.messages = this.messages.slice(-this.maxMessages);
+                }
+
+                // Persist to IndexedDB
+                if (this.db) {
+                    try {
+                        const transaction = this.db.transaction(['messages'], 'readwrite');
+                        const store = transaction.objectStore('messages');
+                        await store.add(messageObj);
+                    } catch (e) {
+                        console.warn('Failed to persist debug message:', e);
+                    }
+                }
+
+                // Notify subscribers
+                this.subscribers.forEach(callback => {
+                    try { callback(messageObj); } catch (e) { console.error('Debug subscriber error:', e); }
+                });
+
+                return messageObj;
+            },
+
+            // Selection filtering logic
+            shouldIncludeMessage(message, category, source, context) {
+                if (!this.isEnabled) return false;
+
+                // Check excluded sources
+                if (this.selectionCriteria.excludedSources.has(source)) {
+                    return false;
+                }
+
+                // Category-based filtering
+                const categoryChecks = {
+                    'DOCUMENT': () => this.selectionCriteria.includeDocumentEvents,
+                    'SYSTEM': () => this.selectionCriteria.includeSystemEvents,
+                    'CONTROL': () => this.selectionCriteria.includeControlEvents,
+                    'EDITING': () => this.selectionCriteria.includeEditingEvents,
+                    'NAVIGATION': () => this.selectionCriteria.includeNavigationEvents
+                };
+
+                // Check if we have a specific category filter
+                if (context.eventType && categoryChecks[context.eventType]) {
+                    return categoryChecks[context.eventType]();
+                }
+
+                // Document heading specific filtering
+                if (context.headingId) {
+                    return this.selectionCriteria.includedHeadings.has(context.headingId) ||
+                           this.selectionCriteria.includedHeadings.size === 0; // Include all if none specifically selected
+                }
+
+                // Default: include based on general settings
+                return category === 'ERROR' || // Always include errors
+                       this.selectionCriteria.includeSystemEvents;
+            },
+
+            // Document structure awareness
+            scanDocumentStructure() {
+                const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
+                const documentStructure = {
+                    headings: [],
+                    totalSections: 0
+                };
+
+                headings.forEach((heading, index) => {
+                    // Skip control headings (like Contents, Debug, etc.)
+                    const text = heading.textContent.trim().toLowerCase();
+                    if (text.includes('contents') || text.includes('debug') ||
+                        text.includes('control') || text.includes('navigation')) {
+                        return;
+                    }
+
+                    if (!heading.id) {
+                        heading.id = `document-heading-${index + 1}`;
+                    }
+
+                    documentStructure.headings.push({
+                        id: heading.id,
+                        text: heading.textContent.trim(),
+                        level: parseInt(heading.tagName.substring(1)),
+                        element: heading
+                    });
+                });
+
+                documentStructure.totalSections = documentStructure.headings.length;
+                this.documentStructure = documentStructure;
+
+                // Auto-include all document headings for monitoring
+                this.selectionCriteria.includedHeadings.clear();
+                documentStructure.headings.forEach(heading => {
+                    this.selectionCriteria.includedHeadings.add(heading.id);
+                });
+
+                this.addMessage(`Document structure scanned: ${documentStructure.totalSections} sections found`,
+                              'INFO', 'DocumentScanner', { eventType: 'DOCUMENT', headings: documentStructure.headings });
+
+                return documentStructure;
+            },
+
+            // Selection management methods
+            includeHeading(headingId) {
+                this.selectionCriteria.includedHeadings.add(headingId);
+            },
+
+            excludeHeading(headingId) {
+                this.selectionCriteria.includedHeadings.delete(headingId);
+            },
+
+            includeSource(source) {
+                this.selectionCriteria.excludedSources.delete(source);
+            },
+
+            excludeSource(source) {
+                this.selectionCriteria.excludedSources.add(source);
+            },
+
+            // Get selection criteria for UI
+            getSelectionCriteria() {
+                return {
+                    ...this.selectionCriteria,
+                    includedHeadings: Array.from(this.selectionCriteria.includedHeadings),
+                    excludedSources: Array.from(this.selectionCriteria.excludedSources)
+                };
+            },
+
+            // Load messages from IndexedDB
+            async loadMessages() {
+                if (!this.db) return;
+
+                try {
+                    const transaction = this.db.transaction(['messages'], 'readonly');
+                    const store = transaction.objectStore('messages');
+                    const request = store.getAll();
+
+                    request.onsuccess = () => {
+                        this.messages = request.result.slice(-this.maxMessages);
+                        console.log(`📊 Loaded ${this.messages.length} debug messages from IndexedDB`);
+                    };
+                } catch (e) {
+                    console.warn('Failed to load debug messages:', e);
+                }
+            },
+
+            // Clear all messages
+            async clearMessages() {
+                this.messages = [];
+
+                if (this.db) {
+                    try {
+                        const transaction = this.db.transaction(['messages'], 'readwrite');
+                        const store = transaction.objectStore('messages');
+                        await store.clear();
+                    } catch (e) {
+                        console.warn('Failed to clear debug messages from DB:', e);
+                    }
+                }
+
+                this.subscribers.forEach(callback => {
+                    try { callback({ type: 'clear' }); } catch (e) { console.error('Debug subscriber error:', e); }
+                });
+            },
+
+            // Subscribe to debug updates
+            subscribe(callback) {
+                this.subscribers.push(callback);
+                return () => {
+                    const index = this.subscribers.indexOf(callback);
+                    if (index > -1) this.subscribers.splice(index, 1);
+                };
+            },
+
+            // Get messages (with filtering)
+            getMessages(category = null, limit = null) {
+                let filtered = this.messages;
+
+                if (category) {
+                    filtered = filtered.filter(msg => msg.category === category.toUpperCase());
+                }
+
+                if (limit) {
+                    filtered = filtered.slice(-limit);
+                }
+
+                return filtered;
+            },
+
+            // Get recent messages
+            getRecentMessages(count = 50) {
+                return this.messages.slice(-count);
+            },
+
+            // Export messages as JSON
+            exportMessages() {
+                return JSON.stringify(this.messages, null, 2);
+            }
+        };
+
+        // Initialize the debug system
+        window.MarkitectDebugSystem.init().then(() => {
+            console.log('📊 Markitect Debug System initialized');
+
+            // Add initial message
+            window.MarkitectDebugSystem.addMessage('Markitect Debug System initialized', 'INFO', 'DebugSystem', {eventType: 'SYSTEM'});
+
+        }).catch(error => {
+            console.warn('📊 Debug System initialization failed, using memory only:', error);
+            window.MarkitectDebugSystem.addMessage('Debug System initialized (memory only)', 'WARNING', 'DebugSystem', {eventType: 'SYSTEM'});
+        });
+
+    } catch (error) {
+        console.error("Debug System initialization failed:", error);
+    }
+
+    // Step 8: Initialize DebugControl (new implementation based on Control class)
+    try {
+        const debugControl = Object.create(Control);
+
+        // Configure for debug functionality
+        debugControl.config = {
+            icon: '🪲',
+            title: 'Debug',
+            className: 'debug-control',
+            defaultContent: 'Debug panel controls',
+            ariaLabel: 'Debug Control',
+            position: 'ese'  // East-south-east positioning
+        };
+
+        // Override buildContent method for debug functionality
+        debugControl.buildContent = function() {
+            console.log("🪲 Building debug control content...");
+
+            try {
+                const content = this.element.querySelector('.control-content');
+                if (!content) {
+                    console.error("🪲 Debug control content element not found");
+                    return;
+                }
+
+                // Build debug control panel with selection and filtering
+                content.innerHTML = `
+                    <div style="padding: 0.5rem;">
+                        <!-- Debug Control Header -->
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;
+                                    padding-bottom: 0.5rem; border-bottom: 1px solid #eee;">
+                            <h4 style="margin: 0; font-size: 0.9rem; font-weight: 600;">Debug Messages</h4>
+                            <div>
+                                <button onclick="window.MarkitectDebugSystem?.scanDocumentStructure()"
+                                        style="padding: 0.25rem 0.5rem; background: #6c757d; color: white;
+                                               border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem; margin-right: 0.25rem;">
+                                    📊 Scan
+                                </button>
+                                <button onclick="window.MarkitectDebugSystem?.clearMessages()"
+                                        style="padding: 0.25rem 0.5rem; background: #dc3545; color: white;
+                                               border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem;">
+                                    Clear
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Selection Controls -->
+                        <div style="margin-bottom: 0.5rem; padding: 0.5rem; background: #f8f9fa; border-radius: 4px; font-size: 0.8rem;">
+                            <div style="font-weight: bold; margin-bottom: 0.25rem;">Event Types:</div>
+                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem;">
+                                <label style="display: flex; align-items: center; cursor: pointer;">
+                                    <input type="checkbox" id="docEvents" checked onchange="window.MarkitectDebugSystem.selectionCriteria.includeDocumentEvents = this.checked" style="margin-right: 0.25rem;">
+                                    <span style="font-size: 0.75rem;">Document</span>
+                                </label>
+                                <label style="display: flex; align-items: center; cursor: pointer;">
+                                    <input type="checkbox" id="editEvents" checked onchange="window.MarkitectDebugSystem.selectionCriteria.includeEditingEvents = this.checked" style="margin-right: 0.25rem;">
+                                    <span style="font-size: 0.75rem;">Editing</span>
+                                </label>
+                                <label style="display: flex; align-items: center; cursor: pointer;">
+                                    <input type="checkbox" id="ctrlEvents" checked onchange="window.MarkitectDebugSystem.selectionCriteria.includeControlEvents = this.checked" style="margin-right: 0.25rem;">
+                                    <span style="font-size: 0.75rem;">Controls</span>
+                                </label>
+                                <label style="display: flex; align-items: center; cursor: pointer;">
+                                    <input type="checkbox" id="sysEvents" onchange="window.MarkitectDebugSystem.selectionCriteria.includeSystemEvents = this.checked" style="margin-right: 0.25rem;">
+                                    <span style="font-size: 0.75rem;">System</span>
+                                </label>
+                            </div>
+                        </div>
+
+                        <!-- Debug Switch -->
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;
+                                    padding: 0.5rem; background: #e9ecef; border-radius: 4px;">
+                            <span style="font-size: 0.9rem; font-weight: bold;">Debug System:</span>
+                            <label style="display: flex; align-items: center; cursor: pointer;">
+                                <input type="checkbox" id="debugToggle" checked
+                                       onchange="window.MarkitectDebugSystem.isEnabled = this.checked; document.getElementById('debugStatus').textContent = this.checked ? 'ON' : 'OFF'; document.getElementById('debugStatus').style.color = this.checked ? '#28a745' : '#dc3545';"
+                                       style="margin-right: 0.5rem;">
+                                <span id="debugStatus" style="color: #28a745; font-weight: bold;">ON</span>
+                            </label>
+                        </div>
+
+                        <!-- Debug Messages Container -->
+                        <div id="debugMessagesContainer" style="max-height: 180px; overflow-y: auto;
+                                                               border: 1px solid #ddd; border-radius: 4px;
+                                                               background: #f8f9fa; font-family: monospace; font-size: 0.8rem;">
+                            <div style="padding: 0.5rem; color: #666; text-align: center;">
+                                Click 📊 Scan to analyze document structure
+                            </div>
+                        </div>
+
+                        <!-- Export and Tools -->
+                        <div style="margin-top: 0.5rem; display: flex; gap: 0.25rem;">
+                            <button onclick="navigator.clipboard.writeText(window.MarkitectDebugSystem.exportMessages()).then(() => window.MarkitectDebugSystem.addMessage('Debug messages exported to clipboard', 'SUCCESS', 'DebugControl'))"
+                                    style="flex: 1; padding: 0.4rem; background: #17a2b8; color: white;
+                                           border: none; border-radius: 3px; cursor: pointer; font-size: 0.8rem;">
+                                📋 Export
+                            </button>
+                            <button onclick="console.table(window.MarkitectDebugSystem.getSelectionCriteria())"
+                                    style="flex: 1; padding: 0.4rem; background: #6f42c1; color: white;
+                                           border: none; border-radius: 3px; cursor: pointer; font-size: 0.8rem;">
+                                🔍 Criteria
+                            </button>
+                        </div>
+                    </div>
+                `;
+
+                console.log("🪲 Debug control HTML content built successfully");
+
+                // Note: Debug switch state is set directly in HTML (checked attribute)
+                // No need to call updateDebugStatus() since checkbox manages its own state
+
+                // Set up periodic update of debug messages
+                try {
+                    this.setupMessageUpdates();
+                } catch (e) {
+                    console.log("🪲 Message updates setup failed:", e);
+                }
+
+                // Show panel and call expand
+                console.log("🪲 Calling expand...");
+                this.expand();
+                console.log("🪲 Expand called successfully");
+
+            } catch (error) {
+                console.error("🪲 Error in buildContent:", error);
+                // Fallback simple content
+                const content = this.element.querySelector('.control-content');
+                if (content) {
+                    content.innerHTML = `<div style="padding: 1rem; color: #666;">Debug control error: ${error.message}</div>`;
+                    this.expand();
+                }
+            }
+        };
+
+        // Add method to update debug switch status (updated for new debug system)
+        debugControl.updateDebugStatus = function() {
+            const checkbox = this.element.querySelector('#debugToggle');
+            const statusText = this.element.querySelector('#debugStatus');
+
+            if (checkbox && statusText) {
+                try {
+                    if (window.MarkitectDebugSystem) {
+                        // Use the new debug system's enabled state
+                        const isEnabled = window.MarkitectDebugSystem.isEnabled;
+                        checkbox.checked = isEnabled;
+                        statusText.textContent = isEnabled ? 'ON' : 'OFF';
+                        statusText.style.color = isEnabled ? '#28a745' : '#dc3545';
+                    } else {
+                        // Fallback when debug system is not available
+                        checkbox.checked = false;
+                        statusText.textContent = 'UNAVAILABLE';
+                        statusText.style.color = '#dc3545';
+                    }
+                } catch (e) {
+                    console.log("🪲 Error updating debug status:", e);
+                    checkbox.checked = false;
+                    statusText.textContent = 'ERROR';
+                    statusText.style.color = '#dc3545';
+                }
+            }
+        };
+
+        // Add method to setup message updates
+        debugControl.setupMessageUpdates = function() {
+            try {
+                // Update messages every 500ms when debug control is open
+                this.messageUpdateInterval = setInterval(() => {
+                    if (this.isExpanded && !this.isHeaderOnly) {
+                        this.updateMessages();
+                        // Note: updateDebugStatus() removed - checkbox manages its own state
+                    }
+                }, 500);
+                console.log("🪲 Message update interval set up successfully");
+            } catch (e) {
+                console.log("🪲 Failed to set up message updates:", e);
+            }
+        };
+
+        // Add method to update debug messages display using new system
+        debugControl.updateMessages = function() {
+            const container = this.element.querySelector('#debugMessagesContainer');
+            if (!container) return;
+
+            try {
+                if (window.MarkitectDebugSystem) {
+                    const messages = window.MarkitectDebugSystem.getRecentMessages(50);
+                    if (messages && messages.length > 0) {
+                        // Show messages in reverse order (newest first)
+                        const reversedMessages = [...messages].reverse();
+                        container.innerHTML = `
+                            <div style="padding: 0.25rem 0.5rem; background: #e9ecef; font-size: 0.7rem; color: #6c757d;">
+                                ${messages.length} messages (newest first) |
+                                <span onclick="window.MarkitectDebugSystem.addMessage('Test message from debug control', 'INFO', 'DebugControl', {eventType: 'CONTROL'})"
+                                      style="cursor: pointer; text-decoration: underline;">Add Test</span>
+                            </div>
+                            ${reversedMessages.map(msg => `
+                                <div style="padding: 0.25rem 0.5rem; border-bottom: 1px solid #e9ecef;
+                                            color: ${this.getMessageColor(msg.category)};">
+                                    <div style="display: flex; justify-content: space-between; align-items: flex-start;">
+                                        <div style="flex: 1;">
+                                            <small style="color: #6c757d;">[${msg.displayTime}]</small>
+                                            <span style="font-weight: bold; margin: 0 0.25rem 0 0.5rem;">${msg.category}:</span>
+                                            ${msg.message}
+                                        </div>
+                                        ${msg.source ? `<small style="color: #868e96; font-size: 0.7rem; margin-left: 0.5rem;">${msg.source}</small>` : ''}
+                                    </div>
+                                    ${msg.context && msg.context.headingId ? `
+                                        <div style="font-size: 0.7rem; color: #6c757d; padding-left: 1rem;">
+                                            📍 Section: ${msg.context.headingId}
+                                        </div>
+                                    ` : ''}
+                                </div>
+                            `).join('')}
+                        `;
+                    } else {
+                        container.innerHTML = `
+                            <div style="padding: 0.5rem; color: #666; text-align: center;">
+                                No debug messages yet<br>
+                                <button onclick="window.MarkitectDebugSystem.addMessage('First debug message', 'INFO')"
+                                        style="margin-top: 0.5rem; padding: 0.25rem 0.5rem; background: #6c757d; color: white; border: none; border-radius: 3px; cursor: pointer;">
+                                    Add Test Message
+                                </button>
+                            </div>
+                        `;
+                    }
+                } else {
+                    container.innerHTML = `
+                        <div style="padding: 0.5rem; color: #dc3545; text-align: center;">
+                            Debug system not initialized
+                        </div>
+                    `;
+                }
+            } catch (e) {
+                console.log("🪲 Error updating messages:", e);
+                container.innerHTML = `
+                    <div style="padding: 0.5rem; color: #dc3545; text-align: center;">
+                        Error loading messages: ${e.message}
+                    </div>
+                `;
+            }
+        };
+
+        // Add method to get message colors by type
+        debugControl.getMessageColor = function(type) {
+            const colors = {
+                'ERROR': '#dc3545',
+                'WARNING': '#fd7e14',
+                'SUCCESS': '#28a745',
+                'INFO': '#17a2b8',
+                'DEBUG': '#6f42c1'
+            };
+            return colors[type] || '#495057';
+        };
+
+        // Override collapse to clean up intervals
+        const originalCollapse = debugControl.collapse;
+        debugControl.collapse = function() {
+            if (this.messageUpdateInterval) {
+                clearInterval(this.messageUpdateInterval);
+                this.messageUpdateInterval = null;
+            }
+            originalCollapse.call(this);
+        };
+
+        // Create and show the debug control
+        console.log("🪲 Creating debug control...");
+        debugControl.createControl();
+        console.log("🪲 Debug control created, element:", debugControl.element);
+
+        // Make debug control globally accessible
+        window.debugControl = debugControl;
+        console.log("🪲 Debug control setup complete and globally accessible");
+    } catch (error) {
+        console.error("DebugControl failed to initialize:", error);
+    }
+
 
     // Wire up event handlers
     documentControls.setEventHandlers({
@@ -2063,12 +2946,12 @@ document.addEventListener('DOMContentLoaded', function() {
                 document.body.removeChild(a);
                 URL.revokeObjectURL(url);
 
-                // Log success to debug panel
-                debugPanel.addMessage(`Document saved as: ${editedFilename}`, 'SUCCESS');
+                // Log success to debug system
+                window.MarkitectDebugSystem?.addMessage(`Document saved as: ${editedFilename}`, 'SUCCESS', 'DocumentSaver', {eventType: 'DOCUMENT'});
                 console.log(`Document successfully saved as: ${editedFilename}`);
 
             } catch (error) {
-                debugPanel.addMessage(`Save failed: ${error.message}`, 'ERROR');
+                window.MarkitectDebugSystem?.addMessage(`Save failed: ${error.message}`, 'ERROR', 'DocumentSaver', {eventType: 'DOCUMENT'});
                 console.error('Save error:', error);
             }
         },
@@ -2083,28 +2966,21 @@ document.addEventListener('DOMContentLoaded', function() {
             });
             // Re-render all sections
             domRenderer.renderAllSections(allSections);
-            debugPanel.addMessage(`Reset all sections to original state`, 'INFO');
-        },
-        'show-status': () => {
-            const status = sectionManager.getDocumentStatus();
-            alert(`Document Status:\\nTotal Sections: ${status.totalSections}\\nEditing Sections: ${status.editingSections}`);
-        },
-        'toggle-debug': () => {
-            debugPanel.toggle();
+            window.MarkitectDebugSystem?.addMessage(`Reset all sections to original state`, 'INFO', 'SectionManager', {eventType: 'EDITING'});
         }
     });
 
-    // Set up debug panel integration
+    // Set up debug system integration with section-aware logging
     sectionManager.on('sections-created', (data) => {
-        debugPanel.addMessage(`Created ${data.count} sections`, 'INFO');
+        window.MarkitectDebugSystem?.addMessage(`Created ${data.count} sections`, 'INFO', 'SectionManager', {eventType: 'DOCUMENT'});
     });
 
     sectionManager.on('edit-started', (data) => {
-        debugPanel.addMessage(`Edit started for section: ${data.sectionId}`, 'DEBUG');
+        window.MarkitectDebugSystem?.addMessage(`Edit started for section: ${data.sectionId}`, 'DEBUG', 'SectionManager', {eventType: 'EDITING', sectionId: data.sectionId});
     });
 
     sectionManager.on('changes-accepted', (data) => {
-        debugPanel.addMessage(`Changes accepted for section: ${data.sectionId}`, 'SUCCESS');
+        window.MarkitectDebugSystem?.addMessage(`Changes accepted for section: ${data.sectionId}`, 'SUCCESS', 'SectionManager', {eventType: 'EDITING', sectionId: data.sectionId});
         // Re-render the section to show updated content
         const section = sectionManager.sections.get(data.sectionId);
         if (section) {
@@ -2112,13 +2988,13 @@ document.addEventListener('DOMContentLoaded', function() {
             if (sectionElement) {
                 const newElement = domRenderer.renderSection(section);
                 sectionElement.parentNode.replaceChild(newElement, sectionElement);
-                debugPanel.addMessage(`DOM updated for section: ${data.sectionId}`, 'INFO');
+                window.MarkitectDebugSystem?.addMessage(`DOM updated for section: ${data.sectionId}`, 'INFO', 'DOMRenderer', {eventType: 'EDITING', sectionId: data.sectionId});
             }
         }
     });
 
     sectionManager.on('changes-cancelled', (data) => {
-        debugPanel.addMessage(`Changes cancelled for section: ${data.sectionId}`, 'WARNING');
+        window.MarkitectDebugSystem?.addMessage(`Changes cancelled for section: ${data.sectionId}`, 'WARNING', 'SectionManager', {eventType: 'EDITING', sectionId: data.sectionId});
     });
 
     // Initialize with markdown content
@@ -2126,9 +3002,9 @@ document.addEventListener('DOMContentLoaded', function() {
     if (markdownToRender.trim()) {
         const sections = sectionManager.createSectionsFromMarkdown(markdownToRender);
         domRenderer.renderAllSections(sections);
-        debugPanel.addMessage(`Initialized with ${sections.length} sections`, 'INFO');
+        window.MarkitectDebugSystem?.addMessage(`Initialized with ${sections.length} sections`, 'INFO', 'DocumentRenderer', {eventType: 'DOCUMENT'});
     } else {
-        debugPanel.addMessage('No markdown content to initialize', 'WARNING');
+        window.MarkitectDebugSystem?.addMessage('No markdown content to initialize', 'WARNING', 'DocumentRenderer', {eventType: 'DOCUMENT'});
     }
 
     // Make components globally available for debugging