feat: add mobile-friendly debug mode for parser troubleshooting

Add comprehensive debug logging system that's accessible on mobile devices
where browser console is impractical.

**New Features:**
- Debug mode toggle in extension settings (🔍 Debug Mode)
- Mobile-friendly debug panel with slide-up UI
- Red bug FAB button to toggle debug log viewer
- Copy logs to clipboard functionality
- Auto-scrolling log display with timestamps
- Stores last 100 log entries to prevent memory issues

**Parser Enhancements:**
- All parser logs now use debugLog() helper function
- Logs only appear in UI when debug mode is enabled
- Console.log still works for desktop debugging
- Full visibility into parsing pipeline:
  - Raw AI response preview
  - Code blocks found and matched
  - Stats extraction (health, energy, mood, etc.)
  - Inventory parsing (v1 and v2)
  - Final values saved to settings

**UI Components:**
- src/systems/ui/debug.js: Debug panel creation and management
- style.css: Mobile-first debug panel styles (FAB + slide-up panel)
- Desktop view: Smaller panel in bottom-right corner

**Settings:**
- src/core/config.js: Added debugMode default (false)
- src/core/state.js: Added debug logs storage array
- settings.html: Added debug mode checkbox
- index.js: Wire up debug toggle and initialize UI

**Usage for Mobile Users:**
1. Enable "Debug Mode" in RPG Companion settings
2. Red bug button appears (bottom-left)
3. Tap bug button to view logs
4. Use "Copy" to share logs for troubleshooting
5. Logs show exactly what AI generated and how parser handled it

This addresses the issue where users on mobile can't access browser
console to diagnose parsing problems (vanishing attributes, placeholder
characters, etc.). Now they can view and share logs directly.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-22 07:22:28 +11:00
parent 74d6174bb7
commit b5d35ac2b0
7 changed files with 424 additions and 36 deletions
+13
View File
@@ -105,6 +105,9 @@ import {
setupDesktopTabs,
removeDesktopTabs
} from './src/systems/ui/desktop.js';
import {
updateDebugUIVisibility
} from './src/systems/ui/debug.js';
// Feature modules
import { setupPlotButtons, sendPlotProgression } from './src/systems/features/plotProgression.js';
@@ -190,6 +193,13 @@ function addExtensionSettings() {
updateChatThoughts(); // This will re-create the thought bubble if data exists
}
});
// Set up the debug mode toggle
$('#rpg-debug-mode').prop('checked', extensionSettings.debugMode).on('change', function() {
extensionSettings.debugMode = $(this).prop('checked');
saveSettings();
updateDebugUIVisibility();
});
}
/**
@@ -455,6 +465,9 @@ async function initUI() {
setupContentEditableScrolling();
setupRefreshButtonDrag();
initInventoryEventListeners();
// Initialize debug UI if debug mode is enabled
updateDebugUIVisibility();
}