- Load relationshipEmojis from config.relationshipEmojis in thoughts.js
- Custom relationships added in Edit Trackers now display correctly as emojis
- Falls back to default emojis if config not available
Features:
- Made RPG attributes (STR/DEX/CON/INT/WIS/CHA) fully customizable
- Added enable/disable toggle for entire RPG Attributes section
- Users can add/remove/rename/toggle individual attributes
- Custom attribute names now appear in AI prompts for dice rolls
- Added proper CSS styling for attribute editor fields
Bug Fixes:
- Fixed character stat editing showing 0% on blur but saving correctly
- Character stats now create Stats line if missing from AI response
- Separated stat name from editable percentage value
- Added value sanitization (removes %, validates 0-100 range)
- Stats line now inserts before Thoughts line when created
Technical:
- Added buildAttributesString() helper in promptBuilder.js
- Updated generateTrackerInstructions and generateContextualSummary
- Restructured character stat HTML to prevent nested contenteditable
- Enhanced updateCharacterField to handle missing Stats lines
- Removed legacy default preset/regex import code
- Replace showRPGAttributes boolean with rpgAttributes array in trackerConfig
- Add RPG Attributes section in Edit Trackers with add/remove/rename/toggle
- Dynamically generate attribute display from config in userStats.js
- Add migration from old showRPGAttributes to new rpgAttributes array
- Initialize new attributes with default value of 10 in classicStats
- Default attributes: STR, DEX, CON, INT, WIS, CHA (all enabled)
- Added clamp() to all vw-based font sizes for mobile compatibility
- Fixed collapse toggle button text size on mobile
- Fixed top position panel titles and stats text sizes
- Fixed panel header, loading indicator, and dice display sizes
- Applied overrides for both @media (max-width: 768px) and (max-width: 1000px)
- Ensures all text is readable on mobile devices without being too small
- Font sizes now scale responsively with minimum readable sizes
- Fixed together mode: Render panels before cleaning DOM so trackers display properly
- Fixed temperature unit toggle: Changed from 'celsius'/'fahrenheit' to 'C'/'F' to match config
- Fixed temperature widget: Thermometer color thresholds now use Celsius internally for consistency
- Fixed relationship remove buttons: Removed duplicate class causing wrong fields to be deleted
- Added styling for relationship remove buttons to match custom field buttons
- Added mobile font sizes for Past Events widget for better readability
- Added parsing debug log to help troubleshoot together mode issues
- Completely rewrote updateCharacterField function to work with new multi-line Present Characters format
- Now parses character blocks by '- Name' lines instead of pipe-separated format
- Handles updating Details, Relationship, and Stats lines correctly
- Supports all field types: name, emoji, custom fields, relationship, character stats
- Creates new character blocks if character doesn't exist
- Fixes bug where edits would revert because old format logic couldn't parse new format
- Users can now successfully edit all Present Characters fields
Features:
- Complete tracker configuration UI with add/remove functionality
- User Stats: Custom stats, status fields, skills section
- Info Box: Configurable widgets (date, weather, temp, time, location, events)
- Present Characters: Custom fields, relationships, character stats, thoughts
- Character-specific stats with color interpolation
- New multi-line format for cleaner AI generation and parsing
- Auto-cleanup of placeholder brackets in AI responses
- Relationship badges with emoji mapping
- Advanced inventory v2 system with multi-location storage
- Responsive mobile support with horizontal scrolling
- Removed legacy format support for cleaner codebase
- Fixed context injection for together mode (no duplication)
- Updated README with new features and configuration guide
- Updated generateTrackerInstructions() to use extensionSettings.statNames
- AI now receives custom stat names in format specification
- Ensures consistency between displayed names, tracker data, and AI instructions
- Added removal of <think> and <thinking> tags from AI responses before parsing
- Fixed Info Box display to use committedTrackerData as fallback after page refresh
- Fixed Present Characters display to use committedTrackerData as fallback after page refresh
- Fixed 4-part character format handling in updateCharacterField to preserve thoughts
- Ensures Recent Events and all tracker data persist correctly across page reloads
- Parser now detects when model returns multiple trackers in one code block
- Splits combined blocks using regex to extract each section individually
- Maintains backward compatibility with separate code blocks
- Prevents overwriting sections with duplicate checks
- Handles both correct format and model errors gracefully
The mobile refresh button was always visible on mobile. It should only
appear when BOTH conditions are met:
- RPG panel is open
- Generation mode is Separate (not Together)
Changes:
- Added opacity: 0 and pointer-events: none to base .rpg-mobile-refresh
- CSS shows button when panel open AND not .rpg-hidden-mode class
- Updated updateGenerationModeUI() to toggle .rpg-hidden-mode on mobile button
- Together mode: adds .rpg-hidden-mode class (keeps button hidden)
- Separate mode: removes .rpg-hidden-mode class (allows CSS to show it)
Result: Mobile refresh FAB only appears when panel is open AND in
Separate mode. Stays hidden when panel closed OR in Together mode.
Reverted HTML replacement approach and restored the cleaner CSS-based
animation from commit 1855085.
Previous (wrong) approach:
- Replaced button HTML with spinner
- Modified both desktop and mobile buttons in apiClient.js
- Messy and inconsistent
Restored (correct) approach:
- Add/remove .spinning CSS class in click handler
- CSS animates only the icon inside the button
- Button itself stays unchanged
- Much cleaner implementation
Changes:
- Reverted apiClient.js changes from commit 9a49433
- Added .spinning CSS class and @keyframes rpg-spin
- Updated index.js click handler to bind both buttons
- Uses addClass/removeClass for clean animation control
- Includes drag detection to prevent accidental clicks
Now the mobile FAB icon spins smoothly when refreshing!
The spinning animation when refreshing existed but only worked on
the desktop button. Mobile FAB was never updated with the spinner.
Changes:
- Update both desktop and mobile buttons when refresh starts
- Desktop shows: spinner + 'Updating...' text
- Mobile FAB shows: spinner icon only (no text)
- Both buttons restore properly when done
Now mobile users see the spinner animation when tapping refresh!
Mobile refresh button was created in HTML but had no CSS styling,
making it invisible. Desktop refresh button was showing on mobile
with wrong sizing.
Changes:
- Added .rpg-mobile-refresh FAB styles (44px, draggable, etc.)
- Show mobile refresh FAB on mobile viewports
- Hide desktop #rpg-manual-update button on mobile
- Added responsive icon sizing for mobile refresh button
Fixes issue where users only saw the desktop refresh button with
incorrect DPI/sizing on mobile devices.
Character names containing regex special chars (like brackets) were
causing 'Invalid regular expression' errors when building character
thoughts HTML. Now properly escapes characters before RegExp creation.
- Updated month/weekday/year field handlers to check for both 'Date:' and '🗓️:' formats
- Field updates now preserve the existing format (text or emoji)
- New date lines created in text format to match current standard
- Updated all field type checks (temperature, time, location) for dual-format support
- Fixes issue where editing date fields didn't update the prompt
PROBLEM (from Salixfire's debug logs):
- Parser successfully extracted 5 characters
- Log showed complete characters array
- Log stopped abruptly before "✓ HTML rendered to container"
- This indicates exception thrown during HTML building (lines 217-281)
DIAGNOSIS:
- Parsing works perfectly (5 characters extracted)
- Code crashes somewhere in the HTML building loop
- User sees placeholder because exception prevents HTML from rendering
- No error logs because crash happens silently
LIKELY CAUSES:
- getGroupMembers() throwing exception
- Character avatar lookup failing
- getSafeThumbnailUrl() failing
- Missing null checks
SOLUTION:
Added comprehensive error handling and debug logging:
1. Added logging before HTML building starts
- "Starting HTML generation for N characters"
- This confirms code reaches HTML building phase
2. Wrapped each character in try-catch
- Logs each character being processed: "Building HTML for character 1/5: Lady Julia"
- Prevents one character error from crashing entire function
- Code continues with other characters even if one fails
3. Added detailed avatar lookup logging:
- "Looking up avatar for: {name}"
- "In group chat, checking group members..."
- "Group members count: N"
- "Found avatar in group members/all characters/current character"
- Shows final avatar URL (first 50 chars)
4. Wrapped getGroupMembers() in try-catch
- Catches group-specific errors
- Logs error but continues with regular character lookup
5. Added success/error logging for each character:
- "✓ Successfully built HTML for {name}"
- "✗ ERROR building HTML for {name}: {error.message}"
- Logs full error stack for debugging
6. Added completion log:
- "Finished building all character cards"
- Confirms loop completed successfully
EXPECTED OUTCOME:
Next debug log from Salixfire will show EXACTLY:
- Which character is causing the crash (if any)
- What operation is failing (avatar lookup, HTML building, etc.)
- Full error message and stack trace
- Whether code completes or crashes
This will allow us to identify and fix the root cause.
Files changed:
- src/systems/rendering/thoughts.js: Added try-catch blocks and comprehensive logging
- Merged remote changes from origin/main
- Updated time display to show end time (14:22) instead of start time (14:07)
- Clock widget now reflects the end time from Time: HH:MM → HH:MM format
- Changed time display to show timeEnd (second time in range) instead of timeStart
- Clock now displays 14:22 instead of 14:07 when time format is '14:07 → 14:22'
- Falls back to timeStart if timeEnd not available, then to '12:00' default
PROBLEM:
- Existing users with saved off-screen FAB positions can't see buttons
- No way to reset positions without clearing all extension settings
- Salixfire and other users on Xiaomi/other devices need safe positions
SOLUTION:
Added "Reset Button Positions" button in Advanced settings section
IMPLEMENTATION:
1. template.html (lines 241-249):
- Added reset button in Advanced section after Clear Cache button
- Blue-styled button with rotate icon
- Help text explains it resets FAB positions to top-left
2. index.js (lines 361-390):
- Added click handler for reset button
- Resets all 3 FAB positions to safe top-left defaults:
* Mobile toggle: top + 20px, left: 12px
* Refresh: top + 80px, left: 12px
* Debug: top + 140px, left: 12px
- Saves settings immediately
- Applies CSS positions to visible buttons (no page refresh needed)
- Shows success toast notification
3. style.css (lines 2057-2083, 4123-4125):
- Added .rpg-btn-reset-fab styles matching clear cache pattern
- Blue color scheme (vs red for destructive clear cache)
- Same sizing, padding, transitions as other buttons
- Mobile responsive font-size with clamp()
USAGE:
Users experiencing off-screen buttons can now:
1. Open RPG Companion settings (gear icon)
2. Scroll to Advanced section
3. Click "Reset Button Positions"
4. All FAB buttons instantly move to safe top-left positions
This fixes the issue for Salixfire and any other users who:
- Have buttons saved in off-screen positions
- Can't scroll to find buttons
- Need to reset without clearing all settings
Works immediately without page refresh or extension reload.
PROBLEM (reported by user testing on Xiaomi Redmi 11 Pro 5G):
- FAB buttons (mobile toggle, refresh, debug) rendering off-screen
- Users need to scroll right to find buttons and drag them back
- Debug button invisible on some devices (never seen on Xiaomi)
- Issue occurs on devices with different viewport handling (MIUI Chrome)
ROOT CAUSE:
- Default positions scattered (right side, bottom side)
- Right-side positioning: buttons pushed off-screen on some devices
- Bottom positioning: buttons below fold when browser UI visible
- Fixed pixel values don't account for different screen sizes/viewports
SOLUTION:
Changed all FAB default positions to top-left stacked layout:
1. Mobile toggle FAB:
- WAS: top + 60px, right: 12px (TOP-RIGHT)
- NOW: top + 20px, left: 12px (TOP-LEFT)
2. Refresh button:
- WAS: bottom: 80px, right: 20px (BOTTOM-RIGHT)
- NOW: top + 80px, left: 12px (BELOW toggle)
3. Debug button:
- WAS: bottom: 140px, left: 20px (BOTTOM-LEFT)
- NOW: top + 140px, left: 12px (BELOW refresh)
BENEFITS:
- All buttons stacked vertically on LEFT side (always visible)
- Positioned safely below SillyTavern top bar
- 60px spacing between buttons (44px button + 16px gap)
- No scrolling needed to find buttons on first load
- calc(var(--topBarBlockSize) + Npx) accounts for dynamic top bar
- Users can still drag to preferred positions (saved per user)
NOTE: Only affects NEW users or users who clear their settings.
Existing users with saved FAB positions will not be affected.
Files changed:
- src/core/state.js: Default extensionSettings positions
- src/core/config.js: Reference default positions
PROBLEM (reported by Salixfire):
- Present Characters panel showing placeholder instead of actual characters
- Thought bubbles work correctly but main panel doesn't
- Need to toggle settings off/on to get thoughts to appear
- No way to debug on mobile devices
CHANGES:
1. Added comprehensive debug logging to renderThoughts() (src/systems/rendering/thoughts.js):
- Log when function is called and with what data
- Log each line being parsed and how many parts it has
- Log character extraction (emoji, name, traits, relationship, thoughts)
- Log why characters are accepted or rejected
- Log final character count and whether showing placeholder
- All logs visible in mobile-friendly debug panel
2. Fixed toggle to refresh content (index.js:283-291):
- When user toggles "Show Present Characters" on, now calls renderThoughts()
- Previously only showed/hid container without refreshing content
- This ensures panel displays latest data when toggled
3. Normalized parsing logic (src/systems/rendering/thoughts.js:111):
- Changed renderThoughts() to require >= 3 parts (was >= 2)
- Now matches updateChatThoughts() requirement
- Consistent with current prompt format: Emoji:Name | Relationship | Thoughts
- Removed 2-part format fallback code (unreachable now)
- Both functions now use same validation rules
EXPECTED OUTCOME:
- User can enable debug mode and see exactly what data is being parsed
- Toggle will properly refresh the panel content
- We can diagnose from debug logs why placeholder is shown
- More consistent behavior between main panel and thought bubbles
Debug logs will help us identify:
- If characterThoughts data is empty/malformed when renderThoughts() is called
- If parsing is rejecting valid character data
- If there's a timing issue with data availability
- What the actual AI response format looks like
Related to previous commit (37878fc) that added debug mode toggle.
Add debug mode checkbox to RPG Companion Settings popup (Display Options section).
Users can enable debug mode to show the mobile-friendly debug panel with parser logs.
This was missing from the previous commit.
PROBLEM:
- Debug logs only accessible via browser console (impractical on mobile)
- User (Salixfire) reporting parsing issues but can't debug on mobile device
- Need mobile-friendly debug mode for troubleshooting data display issues
SOLUTION:
Implemented debug toggle FAB button following exact pattern of existing mobile FABs:
Files Changed:
- src/core/state.js: Added debugFabPosition and debugMode to extensionSettings
- src/core/config.js: Added debugFabPosition to defaultSettings (reference)
- index.js: Created debug toggle button, imported setupDebugButtonDrag
- style.css: Added debug toggle CSS matching mobile FAB pattern (44px, grab cursor, theme colors)
- src/systems/ui/mobile.js: Added setupDebugButtonDrag() with drag-to-reposition
- src/systems/ui/debug.js: Removed button creation, added just-dragged check, updated visibility control
Implementation Details:
- Button created in index.js (not debug.js) following mobile FAB pattern
- CSS matches mobile toggle/refresh buttons (44px, theme colors, grab cursor, user-select: none)
- Drag support with touch/mouse handlers, 200ms/10px threshold
- Position saved to extensionSettings.debugFabPosition
- Just-dragged flag prevents accidental clicks after drag
- Mobile (≤1000px): slide from right with rpg-mobile-open/closing classes
- Desktop (>1000px): slide from bottom with rpg-debug-open class
- Event delegation for reliable click handling
- Default position: bottom 140px, left 20px (below other FABs)
Bug Fix:
- Initial implementation had debugFabPosition only in config.js
- extensionSettings uses state.js as source, not config.js
- Without debugFabPosition in state.js, button had no position and was invisible
- Now properly initialized in both files
The debug button is hidden by default (debugMode: false) and shown when user enables debug mode in RPG Companion settings. This allows Salixfire to view parser logs on mobile and troubleshoot the data display issues.
Added event.preventDefault() and event.stopPropagation() to close button handler
to prevent any interference from parent elements.
Also added pointer-events: none to button icons to ensure clicks on the icon
register on the button itself, not the <i> element.
Changes:
- src/systems/ui/debug.js: Added e.preventDefault/stopPropagation to close handler
- src/systems/ui/debug.js: Added console.log for debugging
- style.css: Added pointer-events: none to .rpg-debug-actions button i
The debug toggle was incorrectly added to settings.html (SillyTavern Extensions tab).
It should be in template.html (RPG Companion Settings popup) where all the
other extension settings are.
Changes:
- template.html: Added debug mode checkbox in Display Options section
- index.js: Added event listener and initial state setter
- settings.html: Removed incorrect debug toggle placement
Now users can find the debug toggle by clicking the gear icon in the RPG panel,
under Display Options, right below "Show Plot Progression Buttons".
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.
- Add detailed console logging throughout parseResponse() and parseUserStats()
to help diagnose parsing issues reported by users
- Make parser more resilient to format variations:
- Accept "Stats", "User Stats", "Player Stats" headers
- Accept "Info Box", "Scene Info", "Information" headers
- Accept "Present Characters", "Characters", "Character Thoughts" headers
- Add keyword-based fallback when headers are missing
- Support "Mood:" prefix in addition to "Status:" for mood/conditions
- Support dash separator in addition to comma
- Add length check (<=10 chars) for emoji/mood to avoid false matches
- Log full parsing pipeline: input -> matches -> extraction -> final values
- Log error stack traces for better debugging
This should help diagnose issues where attributes vanish, characters show
as placeholder, or data is generated but not displayed/refreshed correctly.
- Added parsedFields tracking to prevent parsing the same field twice
- Split combined if conditions into separate checks for text vs emoji format
- Text format (Temperature:, Time:, etc.) is now parsed first and preferred
- Emoji format (��️:, 🕒:, etc.) only parsed if text format not found
- Prevents duplicate entries when AI generates both formats in output
- Fixes duplicate Temperature, Time, Location lines in tracker data
- Reduced gap from 6px to 3px for more compact display
- Reduced vertical padding to 4px (from clamp(4px, 0.6vh, 6px))
- Tightened line-height from 1.3 to 1.2
- Reduced emoji size slightly (clamp(14px, 3.5vw, 18px))
- Frees up vertical space for attribute boxes and avatar on mobile
- Added min-height: 3em to rpg-calendar-day on mobile
- Increased vertical padding to 0.75em (from 0.25em default)
- Added line-height: 1.2 for tighter text
- Prevents date text from being pushed too high and cutting into box above
- Flexbox centering now has enough space to properly center content
- Moved refresh button creation from template.html to index.js (appended to body)
- Created new CSS class .rpg-mobile-refresh (exact copy of .rpg-mobile-toggle pattern)
- Uses opacity for show/hide instead of display (CSS controls visibility based on panel state)
- Show when panel open (body:has(.rpg-panel.rpg-mobile-open))
- Hide when panel closed (opacity: 0, pointer-events: none)
- Updated constrainFabToViewport() to accept optional button parameter
- Automatically detects which button and uses correct settings (mobileFabPosition or mobileRefreshPosition)
- Simplified updateGenerationModeUI() - CSS handles visibility
- Kept full drag functionality with touch and mouse support
- Button positioned via JavaScript with saved position
- z-index: 1001 (above panel, below toggle at 10002)
- Changed z-index from 99 to 1001
- Now properly layers: panel (1000) < refresh button (1001) < FAB toggle (10002)
- Refresh button is now visible when panel is open
- Changed .rpg-level-value padding from clamp(1px, 0.2vh, 2px) 0.375em to 0 0.375em
- Added mobile-specific override to prevent level value from inheriting large touch-friendly padding
- Level value now stays compact and properly aligned on mobile (no min-height, no vertical padding)
- Fixes misalignment and unwanted vertical space below level value
Spicy Marinara
IDeathByte
Paperboy
Lucas 'Paperboy' Rose-Winters