Add custom HTML prompt editor, skills blur handler, and include skills in separate mode

src/systems/features/plotProgression.js

@@ -5,6 +5,7 @@
 
 import { togglePlotButtons } from '../ui/layout.js';
 import { extensionSettings, setIsPlotProgression } from '../../core/state.js';
+import { DEFAULT_HTML_PROMPT } from '../generation/promptBuilder.js';
 import { Generate } from '../../../../../../../script.js';
 
 /**
@@ -94,7 +95,9 @@ export async function sendPlotProgression(type) {
 
         // Add HTML prompt if enabled
         if (extensionSettings.enableHtmlPrompt) {
-            prompt += '\n\n' + `If appropriate, include inline HTML, CSS, and JS segments whenever they enhance visual storytelling (e.g., for in-world screens, posters, books, letters, signs, crests, labels, etc.). Style them to match the setting's theme (e.g., fantasy, sci-fi), keep the text readable, and embed all assets directly (using inline SVGs only with no external scripts, libraries, or fonts). Use these elements freely and naturally within the narrative as characters would encounter them, including animations, 3D effects, pop-ups, dropdowns, websites, and so on. Do not wrap the HTML/CSS/JS in code fences!`;
+            // Use custom HTML prompt if set, otherwise use default
+            const htmlPromptText = extensionSettings.customHtmlPrompt || DEFAULT_HTML_PROMPT;
+            prompt += '\n\n' + htmlPromptText;
         }
 
         // Set flag to indicate we're doing plot progression

src/systems/generation/injector.js

@@ -18,7 +18,8 @@ import { parseUserStats } from './parser.js';
 import {
     generateTrackerExample,
     generateTrackerInstructions,
-    generateContextualSummary
+    generateContextualSummary,
+    DEFAULT_HTML_PROMPT
 } from './promptBuilder.js';
 
 /**
@@ -214,7 +215,9 @@ export function onGenerationStarted(type, data) {
 
         // Inject HTML prompt separately at depth 0 if enabled (prevents duplication on swipes)
         if (extensionSettings.enableHtmlPrompt && !shouldSuppress) {
-            const htmlPrompt = `\nIf appropriate, include inline HTML, CSS, and JS segments whenever they enhance visual storytelling (e.g., for in-world screens, posters, books, letters, signs, crests, labels, etc.). Style them to match the setting's theme (e.g., fantasy, sci-fi), keep the text readable, and embed all assets directly (using inline SVGs only with no external scripts, libraries, or fonts). Use these elements freely and naturally within the narrative as characters would encounter them, including animations, 3D effects, pop-ups, dropdowns, websites, and so on. Do not wrap the HTML/CSS/JS in code fences!`;
+            // Use custom HTML prompt if set, otherwise use default
+            const htmlPromptText = extensionSettings.customHtmlPrompt || DEFAULT_HTML_PROMPT;
+            const htmlPrompt = `\n${htmlPromptText}`;
 
             setExtensionPrompt('rpg-companion-html', htmlPrompt, extension_prompt_types.IN_CHAT, 0, false);
             // console.log('[RPG Companion] Injected HTML prompt at depth 0 for together mode');
@@ -247,7 +250,9 @@ Ensure these details naturally reflect and influence the narrative. Character be
 
         // Inject HTML prompt separately at depth 0 if enabled (same as together mode pattern)
         if (extensionSettings.enableHtmlPrompt && !shouldSuppress) {
-            const htmlPrompt = `\nIf appropriate, include inline HTML, CSS, and JS segments whenever they enhance visual storytelling (e.g., for in-world screens, posters, books, letters, signs, crests, labels, etc.). Style them to match the setting's theme (e.g., fantasy, sci-fi), keep the text readable, and embed all assets directly (using inline SVGs only with no external scripts, libraries, or fonts). Use these elements freely and naturally within the narrative as characters would encounter them, including animations, 3D effects, pop-ups, dropdowns, websites, and so on. Do not wrap the HTML/CSS/JS in code fences!`;
+            // Use custom HTML prompt if set, otherwise use default
+            const htmlPromptText = extensionSettings.customHtmlPrompt || DEFAULT_HTML_PROMPT;
+            const htmlPrompt = `\n${htmlPromptText}`;
 
             setExtensionPrompt('rpg-companion-html', htmlPrompt, extension_prompt_types.IN_CHAT, 0, false);
             // console.log('[RPG Companion] Injected HTML prompt at depth 0 for separate mode');

src/systems/generation/promptBuilder.js

@@ -10,6 +10,11 @@ import { extensionSettings, committedTrackerData, FEATURE_FLAGS } from '../../co
 // Type imports
 /** @typedef {import('../../types/inventory.js').InventoryV2} InventoryV2 */
 
+/**
+ * Default HTML prompt text
+ */
+export const DEFAULT_HTML_PROMPT = `If appropriate, include inline HTML, CSS, and JS segments whenever they enhance visual storytelling (e.g., for in-world screens, posters, books, letters, signs, crests, labels, etc.). Style them to match the setting's theme (e.g., fantasy, sci-fi), keep the text readable, and embed all assets directly (using inline SVGs only with no external scripts, libraries, or fonts). Use these elements freely and naturally within the narrative as characters would encounter them, including animations, 3D effects, pop-ups, dropdowns, websites, and so on. Do not wrap the HTML/CSS/JS in code fences!`;
+
 /**
  * Builds a formatted inventory summary for AI context injection.
  * Converts v2 inventory structure to multi-line plaintext format.
@@ -313,7 +318,9 @@ export function generateTrackerInstructions(includeHtmlPrompt = true, includeCon
             instructions += `\n`;
         }
 
-        instructions += `If appropriate, include inline HTML, CSS, and JS segments whenever they enhance visual storytelling (e.g., for in-world screens, posters, books, letters, signs, crests, labels, etc.). Style them to match the setting's theme (e.g., fantasy, sci-fi), keep the text readable, and embed all assets directly (using inline SVGs only with no external scripts, libraries, or fonts). Use these elements freely and naturally within the narrative as characters would encounter them, including animations, 3D effects, pop-ups, dropdowns, websites, and so on. Do not wrap the HTML/CSS/JS in code fences!`;
+        // Use custom HTML prompt if set, otherwise use default
+        const htmlPrompt = extensionSettings.customHtmlPrompt || DEFAULT_HTML_PROMPT;
+        instructions += htmlPrompt;
     }
 
     return instructions;
@@ -423,6 +430,13 @@ export function generateRPGPromptText() {
             }
             promptText += `\n`;
         }
+
+        // Add current skills to the previous data context
+        const skillsSection = extensionSettings.trackerConfig?.userStats?.skillsSection;
+        if (skillsSection?.enabled && skillsSection.customFields && skillsSection.customFields.length > 0) {
+            const skillsList = skillsSection.customFields.join(', ');
+            promptText += `Skills: ${skillsList}\n\n`;
+        }
     }
 
     if (extensionSettings.showInfoBox) {

src/systems/rendering/userStats.js

@@ -293,6 +293,23 @@ export function renderUserStats() {
         updateMessageSwipeData();
     });
 
+    // Add event listener for skills editing
+    $('.rpg-skills-value.rpg-editable').on('blur', function() {
+        const value = $(this).text().trim();
+        extensionSettings.userStats.skills = value || 'None';
+
+        // Rebuild userStats text
+        const statsText = buildUserStatsText();
+
+        // Update BOTH lastGeneratedData AND committedTrackerData
+        lastGeneratedData.userStats = statsText;
+        committedTrackerData.userStats = statsText;
+
+        saveSettings();
+        saveChatData();
+        updateMessageSwipeData();
+    });
+
     // Add event listeners for stat name editing
     $('.rpg-editable-stat-name').on('blur', function() {
         const field = $(this).data('field');

src/systems/ui/trackerEditor.js

@@ -419,11 +419,13 @@ function setupUserStatsListeners() {
 
     $('#rpg-skills-label').off('blur').on('blur', function() {
         extensionSettings.trackerConfig.userStats.skillsSection.label = $(this).val();
+        saveSettings();
     });
 
     $('#rpg-skills-fields').off('blur').on('blur', function() {
         const fields = $(this).val().split(',').map(f => f.trim()).filter(f => f);
         extensionSettings.trackerConfig.userStats.skillsSection.customFields = fields;
+        saveSettings();
     });
 }