Add chapter checkpoint UI improvements and separate Quests toggle

- Fix checkpoint button display with expandMessageActions setting
- Add body class observer to update buttons when setting toggles
- Add cleanupCheckpointUI function for extension disable
- Separate Quests from Inventory with independent toggle
- Add horizontal scrolling to Info Box dashboard
- Add divider between Inventory and Quests sections

index.js

@@ -93,7 +93,8 @@ import {
 import {
     initChapterCheckpointUI,
     injectCheckpointButton,
-    updateAllCheckpointIndicators
+    updateAllCheckpointIndicators,
+    cleanupCheckpointUI
 } from './src/systems/ui/checkpointUI.js';
 import { restoreCheckpointOnLoad } from './src/systems/features/chapterCheckpoint.js';
 import {
@@ -197,6 +198,7 @@ async function addExtensionSettings() {
             // Disabling extension - remove UI elements
             clearExtensionPrompts();
             updateChatThoughts(); // Remove thought bubbles
+            cleanupCheckpointUI(); // Remove checkpoint buttons and indicators
 
             // Remove panel and toggle buttons
             $('#rpg-companion-panel').remove();
@@ -204,11 +206,14 @@ async function addExtensionSettings() {
             $('#rpg-collapse-toggle').remove();
             $('#rpg-debug-toggle').remove();
             $('#rpg-debug-panel').remove();
+            $('#rpg-plot-buttons').remove(); // Remove plot buttons
         } else if (extensionSettings.enabled && !wasEnabled) {
             // Enabling extension - initialize UI
             await initUI();
             loadChatData(); // Load chat data for current chat
             updateChatThoughts(); // Create thought bubbles if data exists
+            injectCheckpointButton(); // Re-add checkpoint buttons
+            updateAllCheckpointIndicators(); // Update button states
         }
 
         // Update Memory Recollection button visibility
@@ -332,6 +337,12 @@ async function initUI() {
         updateSectionVisibility();
     });
 
+    $('#rpg-toggle-quests').on('change', function() {
+        extensionSettings.showQuests = $(this).prop('checked');
+        saveSettings();
+        updateSectionVisibility();
+    });
+
     $('#rpg-toggle-thoughts-in-chat').on('change', function() {
         extensionSettings.showThoughtsInChat = $(this).prop('checked');
         // console.log('[RPG Companion] Toggle showThoughtsInChat changed to:', extensionSettings.showThoughtsInChat);
@@ -472,6 +483,7 @@ async function initUI() {
     $('#rpg-toggle-info-box').prop('checked', extensionSettings.showInfoBox);
     $('#rpg-toggle-thoughts').prop('checked', extensionSettings.showCharacterThoughts);
     $('#rpg-toggle-inventory').prop('checked', extensionSettings.showInventory);
+    $('#rpg-toggle-quests').prop('checked', extensionSettings.showQuests);
     $('#rpg-toggle-thoughts-in-chat').prop('checked', extensionSettings.showThoughtsInChat);
     $('#rpg-toggle-always-show-bubble').prop('checked', extensionSettings.alwaysShowThoughtBubble);
     $('#rpg-toggle-html-prompt').prop('checked', extensionSettings.enableHtmlPrompt);

src/core/config.js

@@ -31,6 +31,7 @@ export const defaultSettings = {
     showInfoBox: true,
     showCharacterThoughts: true,
     showInventory: true, // Show inventory section (v2 system)
+    showQuests: true, // Show quests section
     showThoughtsInChat: true, // Show thoughts overlay in chat
     alwaysShowThoughtBubble: false, // Auto-expand thought bubble without clicking icon
     enableHtmlPrompt: false, // Enable immersive HTML prompt injection

src/core/state.js

@@ -19,6 +19,7 @@ export let extensionSettings = {
     showInfoBox: true,
     showCharacterThoughts: true,
     showInventory: true, // Show inventory section (v2 system)
+    showQuests: true, // Show quests section
     showThoughtsInChat: true, // Show thoughts overlay in chat
     enableHtmlPrompt: false, // Enable immersive HTML prompt injection
     customHtmlPrompt: '', // Custom HTML prompt text (empty = use default)

src/i18n/en.json

@@ -30,6 +30,7 @@
     "template.settingsModal.display.showInfoBox": "Show Info Box",
     "template.settingsModal.display.showPresentCharacters": "Show Present Characters",
     "template.settingsModal.display.showInventory": "Show Inventory",
+    "template.settingsModal.display.showQuests": "Show Quests",
     "template.settingsModal.display.showThoughtsInChat": "Show Thoughts in Chat",
     "template.settingsModal.display.showThoughtsInChatNote": "Display character thoughts as overlay bubbles next to their messages",
     "template.settingsModal.display.alwaysShowThoughtBubble": "Always Show Thought Bubble",

src/systems/rendering/quests.js

@@ -160,7 +160,7 @@ export function renderOptionalQuestsView(optionalQuests) {
  * Main render function for quests
  */
 export function renderQuests() {
-    if (!extensionSettings.showInventory || !$questsContainer) {
+    if (!extensionSettings.showQuests || !$questsContainer) {
         return;
     }
 

src/systems/ui/checkpointUI.js

@@ -119,6 +119,9 @@ export function updateAllCheckpointIndicators() {
 
     if (!chat) return;
 
+    // First, remove ALL checkpoint buttons from everywhere
+    document.querySelectorAll('.rpg-checkpoint-button, .rpg-checkpoint-button-expanded').forEach(btn => btn.remove());
+
     // Update all message blocks
     const messageBlocks = document.querySelectorAll('.mes');
     messageBlocks.forEach((block) => {
@@ -129,20 +132,27 @@ export function updateAllCheckpointIndicators() {
 
         addCheckpointIndicator(messageId, block);
 
-        // Update any existing dropdown menu button for this message
+        // Re-add buttons based on current mode
+        processExpandedButton(block);
+
         const dropdownMenu = block.querySelector('.extraMesButtons');
         if (dropdownMenu) {
-            updateCheckpointButtonInMenu(dropdownMenu, messageId);
+            processExtraMesButtons(dropdownMenu);
-        }
-
-        // Update any existing expanded button for this message
-        const mesButtons = block.querySelector('.mes_buttons');
-        if (mesButtons) {
-            updateCheckpointButtonInMenu(mesButtons, messageId);
         }
     });
 }
 
+/**
+ * Removes all checkpoint UI elements
+ */
+export function cleanupCheckpointUI() {
+    // Remove all checkpoint buttons
+    document.querySelectorAll('.rpg-checkpoint-button, .rpg-checkpoint-button-expanded').forEach(btn => btn.remove());
+
+    // Remove all checkpoint indicators (banner)
+    document.querySelectorAll('.rpg-checkpoint-indicator').forEach(indicator => indicator.remove());
+}
+
 /**
  * Initializes the chapter checkpoint UI
  */
@@ -152,6 +162,17 @@ export function initChapterCheckpointUI() {
         updateAllCheckpointIndicators();
     });
 
+    // Listen for expandMessageActions class changes on body
+    const bodyObserver = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                // The expandMessageActions class was toggled, refresh all buttons
+                updateAllCheckpointIndicators();
+            }
+        });
+    });
+    bodyObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+
     // Listen for chat changes to update indicators
     const context = getContext();
     if (context && context.eventSource) {
@@ -205,12 +226,12 @@ export function injectCheckpointButton() {
                         processExtraMesButtons(node);
                     }
 
-                    // Check if message block was added (for expanded mode)
+                    // Check if message block was added (for expanded buttons)
                     if (node.classList && node.classList.contains('mes')) {
                         processExpandedButton(node);
                     }
 
-                    // Also check if either exists within added subtree
+                    // Also check if any exist within added subtree
                     if (node.querySelector) {
                         const extraButtons = node.querySelectorAll('.extraMesButtons');
                         extraButtons.forEach(processExtraMesButtons);
@@ -237,12 +258,15 @@ export function injectCheckpointButton() {
             subtree: true
         });
 
-        // Process any existing menus and messages on initialization
+        // Process any existing dropdown menus and messages on initialization
+        // Use setTimeout to ensure styles are computed
+        setTimeout(() => {
             const existingDropdownMenus = chatContainer.querySelectorAll('.extraMesButtons');
             existingDropdownMenus.forEach(processExtraMesButtons);
 
             const existingMessages = chatContainer.querySelectorAll('.mes');
             existingMessages.forEach(processExpandedButton);
+        }, 100);
     }
 }
 
@@ -257,21 +281,20 @@ function processExtraMesButtons(menu) {
     const messageBlock = menu.closest('.mes');
     if (!messageBlock) return;
 
-    // Check if expanded mode is active - if so, don't add to dropdown
-    const mesButtons = messageBlock.querySelector('.mes_buttons');
-    if (mesButtons && window.getComputedStyle(mesButtons).display !== 'none') {
-        return; // Expanded mode is active, skip dropdown
-    }
-
     // Get the message ID from the mesid attribute (SillyTavern's standard way)
     const messageId = Number(messageBlock.getAttribute('mesid'));
 
     if (isNaN(messageId)) return;
 
+    // Check if expanded mode is active - if so, skip dropdown
+    if (document.body.classList.contains('expandMessageActions')) {
+        return; // Expanded mode is ON, button will be added to mes_buttons instead
+    }
+
     // Check if button already exists in this container
     if (menu.querySelector('.rpg-checkpoint-button')) return;
 
-    // Add checkpoint button for dropdown menu
+    // Add checkpoint button to dropdown menu
     const checkpointBtn = addCheckpointButtonToMessage(messageId, menu, false);
     if (checkpointBtn) {
         checkpointBtn.classList.add('rpg-checkpoint-button');
@@ -280,7 +303,7 @@ function processExtraMesButtons(menu) {
 }
 
 /**
- * Process message to add expanded checkpoint button
+ * Process a message block to add expanded checkpoint button
  * @param {HTMLElement} messageBlock - The message block element
  */
 function processExpandedButton(messageBlock) {
@@ -289,9 +312,9 @@ function processExpandedButton(messageBlock) {
     const mesButtons = messageBlock.querySelector('.mes_buttons');
     if (!mesButtons) return;
 
-    // Only add if mes_buttons is visible (expanded mode is active)
+    // Only add if expanded mode is ON (check body class)
-    if (window.getComputedStyle(mesButtons).display === 'none') {
+    if (!document.body.classList.contains('expandMessageActions')) {
-        return;
+        return; // Expanded mode is OFF, button will be in dropdown instead
     }
 
     const messageId = Number(messageBlock.getAttribute('mesid'));
@@ -304,9 +327,17 @@ function processExpandedButton(messageBlock) {
     const checkpointBtn = addCheckpointButtonToMessage(messageId, mesButtons, true);
     if (checkpointBtn) {
         checkpointBtn.classList.add('rpg-checkpoint-button-expanded');
+
+        // Insert before the edit button if it exists, otherwise append
+        const editButton = mesButtons.querySelector('.mes_edit');
+        if (editButton) {
+            mesButtons.insertBefore(checkpointBtn, editButton);
+        } else {
             mesButtons.appendChild(checkpointBtn);
         }
     }
+}
+
 
 /**
  * Update the checkpoint button in an existing menu
@@ -316,7 +347,7 @@ function processExpandedButton(messageBlock) {
 function updateCheckpointButtonInMenu(menu, messageId) {
     if (!menu) return;
 
-    // Check for both button classes (dropdown and expanded)
+    // Find the checkpoint button (either dropdown or expanded)
     const existingButton = menu.querySelector('.rpg-checkpoint-button, .rpg-checkpoint-button-expanded');
     if (!existingButton) return;
 

src/systems/ui/layout.js

@@ -9,7 +9,8 @@ import {
     $userStatsContainer,
     $infoBoxContainer,
     $thoughtsContainer,
-    $inventoryContainer
+    $inventoryContainer,
+    $questsContainer
 } from '../../core/state.js';
 import { i18n } from '../../core/i18n.js';
 
@@ -230,22 +231,29 @@ export function updateSectionVisibility() {
     if ($inventoryContainer) {
         $inventoryContainer.toggle(extensionSettings.showInventory);
     }
+    if ($questsContainer) {
+        $questsContainer.toggle(extensionSettings.showQuests);
+    }
 
     // Show/hide dividers intelligently
     // Divider after User Stats: shown if User Stats is visible AND at least one section after it is visible
     const showDividerAfterStats = extensionSettings.showUserStats &&
-        (extensionSettings.showInfoBox || extensionSettings.showCharacterThoughts || extensionSettings.showInventory);
+        (extensionSettings.showInfoBox || extensionSettings.showCharacterThoughts || extensionSettings.showInventory || extensionSettings.showQuests);
     $('#rpg-divider-stats').toggle(showDividerAfterStats);
 
     // Divider after Info Box: shown if Info Box is visible AND at least one section after it is visible
     const showDividerAfterInfo = extensionSettings.showInfoBox &&
-        (extensionSettings.showCharacterThoughts || extensionSettings.showInventory);
+        (extensionSettings.showCharacterThoughts || extensionSettings.showInventory || extensionSettings.showQuests);
     $('#rpg-divider-info').toggle(showDividerAfterInfo);
 
-    // Divider after Thoughts: shown if Thoughts is visible AND Inventory is visible
+    // Divider after Thoughts: shown if Thoughts is visible AND at least one section after it is visible
     const showDividerAfterThoughts = extensionSettings.showCharacterThoughts &&
-        extensionSettings.showInventory;
+        (extensionSettings.showInventory || extensionSettings.showQuests);
     $('#rpg-divider-thoughts').toggle(showDividerAfterThoughts);
+
+    // Divider after Inventory: shown if Inventory is visible AND Quests is visible
+    const showDividerAfterInventory = extensionSettings.showInventory && extensionSettings.showQuests;
+    $('#rpg-divider-inventory').toggle(showDividerAfterInventory);
 }
 
 /**

style.css

@@ -1143,6 +1143,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     gap: 0.25em;
     flex: 1;
     min-height: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
 }
 
 /* Row 1: 4 equal-width widgets - more square aspect ratio */

template.html

@@ -53,6 +53,9 @@
                     <!-- Content will be populated by JavaScript -->
                 </div>
 
+                <!-- Divider after Inventory -->
+                <div id="rpg-divider-inventory" class="rpg-divider"></div>
+
                 <!-- Quests Section -->
                 <div id="rpg-quests" class="rpg-section rpg-quests-section">
                     <!-- Content will be populated by JavaScript -->
@@ -182,6 +185,11 @@
                     <span data-i18n-key="template.settingsModal.display.showInventory">Show Inventory</span>
                 </label>
 
+                <label class="checkbox_label">
+                    <input type="checkbox" id="rpg-toggle-quests" />
+                    <span data-i18n-key="template.settingsModal.display.showQuests">Show Quests</span>
+                </label>
+
                 <label class="checkbox_label">
                     <input type="checkbox" id="rpg-toggle-thoughts-in-chat" />
                     <span data-i18n-key="template.settingsModal.display.showThoughtsInChat">Show Thoughts in Chat</span>