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
+2 -1
View File
@@ -78,5 +78,6 @@ export const defaultSettings = {
cha: 10
},
lastDiceRoll: null, // Store last dice roll result
collapsedInventoryLocations: [] // Array of collapsed storage location names
collapsedInventoryLocations: [], // Array of collapsed storage location names
debugMode: false // Enable debug logging visible in UI (for mobile debugging)
};
+29
View File
@@ -123,6 +123,12 @@ export const FEATURE_FLAGS = {
useNewInventory: true // Enable v2 inventory system with categorized storage
};
/**
* Debug logs storage for mobile-friendly debugging
* Stores parser logs that can be viewed in UI
*/
export let debugLogs = [];
/**
* Fallback avatar image (base64-encoded SVG with "?" icon)
* Using base64 to avoid quote-encoding issues in HTML attributes
@@ -204,3 +210,26 @@ export function setThoughtsContainer($element) {
export function setInventoryContainer($element) {
$inventoryContainer = $element;
}
export function addDebugLog(message, data = null) {
const timestamp = new Date().toISOString().split('T')[1].split('.')[0]; // HH:MM:SS
const logEntry = {
timestamp,
message,
data: data ? JSON.stringify(data, null, 2) : null
};
debugLogs.push(logEntry);
// Keep only last 100 entries to avoid memory issues
if (debugLogs.length > 100) {
debugLogs.shift();
}
}
export function clearDebugLogs() {
debugLogs = [];
}
export function getDebugLogs() {
return debugLogs;
}