diff --git a/public/index.html b/public/index.html
index ec9b8f7a1..c8b505ea6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3886,9 +3886,9 @@
                             </label>
 
                         </div>
-                        <h4><span data-i18n="Miscellaneous">Miscellaneous</span></h4>
 
-                        <div>
+                        <div name="MiscellaneousToggles">
+                            <h4><span data-i18n="Miscellaneous">Miscellaneous</span></h4>
                             <div data-newbie-hidden class="flex-container">
                                 <div id="reload_chat" class="menu_button whitespacenowrap" data-i18n="[title]Reload and redraw the currently open chat" title="Reload and redraw the currently open chat.">
                                     <small data-i18n="Reload Chat">Reload Chat</small>
@@ -3963,8 +3963,8 @@
                                     <span data-i18n="Custom CSS">Custom CSS</span>
                                     <i class="editor_maximize fa-solid fa-maximize right_menu_button" data-for="customCSS" title="Expand the editor"></i>
                                 </h4>
-                                <div class="flex-container flexnowrap alignitemscenter">
-                                    <textarea id="customCSS" class="text_pole margin0 margin-r5 textarea_compact monospace"></textarea>
+                                <div id="CustomCSS-textAreaBlock" class="flex-container flexnowrap alignitemscenter">
+                                    <textarea id="customCSS" class="text_pole margin0 margin-r5 textarea_compact monospace" rows="8"></textarea>
                                 </div>
                             </div>
                         </div>
@@ -4114,7 +4114,76 @@
                                     </div>
                                 </div>
                             </div>
-
+                            <div name="AutoCompleteToggle">
+                                <h4 data-i18n="AutoComplete Settings">AutoComplete Settings</h4>
+                                <div class="flex-container">
+                                    <div class="flex1" title="Determines how entries are found for autocomplete." data-i18n="[title]Determines how entries are found for autocomplete.">
+                                        <label for="stscript_matching" data-i18n="Autocomplete Matching"><small>Matching</small></label>
+                                        <select id="stscript_matching">
+                                            <option data-i18n="Starts with" value="strict">Starts with</option>
+                                            <option data-i18n="Includes" value="includes">Includes</option>
+                                            <option data-i18n="Fuzzy" value="fuzzy">Fuzzy</option>
+                                        </select>
+                                    </div>
+                                    <div class="flex1" title="Sets the style of the autocomplete." data-i18n="[title]Sets the style of the autocomplete.">
+                                        <label for="stscript_autocomplete_style" data-i18n="Autocomplete Style"><small>Style</small></label>
+                                        <div class="flex-container flexFlowRow alignItemsBaseline">
+                                            <select id="stscript_autocomplete_style">
+                                                <option data-i18n="Follow Theme" value="theme">Follow Theme</option>
+                                                <option data-i18n="Dark" value="dark">Dark</option>
+                                                <option data-i18n="Light" value="light">Light</option>
+                                            </select>
+                                            <!-- <div class="menu_button fa-solid fa-pen-to-square" title="Customize colors"></div> -->
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex-container flexFlowColumn gap0" title="Sets the font size of the autocomplete." data-i18n="[title]Sets the font size of the autocomplete.">
+                                    <label for="stscript_autocomplete_font_scale"><small>Font Scale</small></label>
+                                    <input class="neo-range-slider" type="range" id="stscript_autocomplete_font_scale" min="0.5" max="2" step="0.01">
+                                    <input class="neo-range-input" type="number" min="0.5" max="2" step="0.01" data-for="stscript_autocomplete_font_scale" id="stscript_autocomplete_font_scale_counter">
+                                </div>
+                                <div title="Sets the width of the autocomplete." data-i18n="[title]Sets the width of the autocomplete.">
+                                    <label for="stscript_autocomplete_width" data-i18n="Autocomplete Width"><small>Width</small></label>
+                                    <div class="doubleRangeContainer">
+                                        <div class="doubleRangeInputContainer">
+                                            <input type="range" id="stscript_autocomplete_width_left" min="0" max="2" step="1">
+                                            <datalist id="stscript_autocomplete_width_left_values">
+                                                <option value="0" label="input" title="chat input box"></option>
+                                                <option value="1" label="chat" title="entire chat width"></option>
+                                                <option value="2" label="full" title="full window width"></option>
+                                            </datalist>
+                                        </div>
+                                        <div class="doubleRangeInputContainer">
+                                            <input type="range" id="stscript_autocomplete_width_right" min="0" max="2" step="1">
+                                            <datalist id="stscript_autocomplete_width_right_values">
+                                                <option value="0" label="input" title="chat input box"></option>
+                                                <option value="1" label="chat" title="entire chat width"></option>
+                                                <option value="2" label="full" title="full window width"></option>
+                                            </datalist>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div name="STscriptToggles">
+                                <h4 data-i18n="STscript Settings">STscript Settings</h4>
+                                <div title="Sets default flags for the STscript parser." data-i18n="[title]Sets default flags for the STscript parser.">
+                                    <label data-i18n="Parser Flags"><small>Parser Flags</small></label>
+                                    <label class="checkbox_label" title="Switch to stricter escaping, allowing all delimiting characters to be escaped with a backslash, and backslashes to be escaped as well." data-i18n="[title]Switch to stricter escaping, allowing all dellimiting characters to be escaped with a backslash, and backslashes to be escaped as well.">
+                                        <input id="stscript_parser_flag_strict_escaping" type="checkbox" />
+                                        <span data-i18n="STRICT_ESCAPING"><small>STRICT_ESCAPING</small></span>
+                                        <a href="https://docs.sillytavern.app/" target="_blank" class="notes-link">
+                                            <span class="fa-solid fa-circle-question note-link-span"></span>
+                                        </a>
+                                    </label>
+                                    <label class="checkbox_label" title="Replace all {{getvar::}} and {{getglobalvar::}} macros with scoped variables to avoid double macro substitution." data-i18n="[title]Replace all {{getvar::}} and {{getglobalvar::}} macros with scoped variables to avoid double macro substitution.">
+                                        <input id="stscript_parser_flag_replace_getvar" type="checkbox" />
+                                        <span data-i18n="REPLACE_GETVAR"><small>REPLACE_GETVAR</small></span>
+                                        <a href="https://docs.sillytavern.app/" target="_blank" class="notes-link">
+                                            <span class="fa-solid fa-circle-question note-link-span"></span>
+                                        </a>
+                                    </label>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -6045,6 +6114,15 @@
                     </div>
                     <textarea id="send_textarea" name="text" data-i18n="[no_connection_text]Not connected to API!;[connected_text]Type a message, or /? for help" placeholder="Not connected to API!" no_connection_text="Not connected to API!" connected_text="Type a message, or /? for help"></textarea>
                     <div id="rightSendForm" class="alignContentCenter">
+                        <div id="stscript_continue" title="Continue script execution" class="stscript_btn stscript_continue" data-i18n="[title]Continue script execution">
+                            <i class="fa-solid fa-play"></i>
+                        </div>
+                        <div id="stscript_pause" title="Pause script execution" class="stscript_btn stscript_pause" data-i18n="[title]Pause script execution">
+                            <i class="fa-solid fa-pause"></i>
+                        </div>
+                        <div id="stscript_stop" title="Abort script execution" class="stscript_btn stscript_stop" data-i18n="[title]Abort script execution">
+                            <i class="fa-solid fa-stop"></i>
+                        </div>
                         <div id="mes_stop" title="Abort request" class="mes_stop" data-i18n="[title]Abort request">
                             <i class="fa-solid fa-circle-stop"></i>
                         </div>
@@ -6208,31 +6286,8 @@
     <script type="module" src="lib/structured-clone/monkey-patch.js"></script>
     <script type="module" src="lib/swiped-events.js"></script>
     <script type="module" src="lib/eventemitter.js"></script>
-    <script type="module" src="scripts/power-user.js"></script>
     <script type="module" src="scripts/i18n.js"></script>
     <script type="module" src="script.js"></script>
-    <script type="module" src="scripts/world-info.js"></script>
-    <script type="module" src="scripts/group-chats.js"></script>
-    <script type="module" src="scripts/kai-settings.js"></script>
-    <script type="module" src="scripts/textgen-settings.js"></script>
-    <script type="module" src="scripts/textgen-models.js"></script>
-    <script type="module" src="scripts/bookmarks.js"></script>
-    <script type="module" src="scripts/horde.js"></script>
-    <script type="module" src="scripts/RossAscends-mods.js"></script>
-    <script type="module" src="scripts/slash-commands.js"></script>
-    <script type="module" src="scripts/tags.js"></script>
-    <script type="module" src="scripts/secrets.js"></script>
-    <script type="module" src="scripts/extensions.js"></script>
-    <script type="module" src="scripts/authors-note.js"></script>
-    <script type="module" src="scripts/preset-manager.js"></script>
-    <script type="module" src="scripts/filters.js"></script>
-    <script type="module" src="scripts/personas.js"></script>
-    <script type="module" src="scripts/server-history.js"></script>
-    <script type="module" src="scripts/setting-search.js"></script>
-    <script type="module" src="scripts/bulk-edit.js"></script>
-    <script type="module" src="scripts/cfg-scale.js"></script>
-    <script type="module" src="scripts/chats.js"></script>
-    <script type="module" src="scripts/user.js"></script>
     <script>
         // Configure toast library:
         toastr.options.escapeHtml = true; // Prevent raw HTML inserts
diff --git a/public/script.js b/public/script.js
index eccac9c0c..12fc87cd0 100644
--- a/public/script.js
+++ b/public/script.js
@@ -158,7 +158,7 @@ import {
 import { debounce_timeout } from './scripts/constants.js';
 
 import { ModuleWorkerWrapper, doDailyExtensionUpdatesCheck, extension_settings, getContext, loadExtensionSettings, renderExtensionTemplate, renderExtensionTemplateAsync, runGenerationInterceptors, saveMetadataDebounced, writeExtensionField } from './scripts/extensions.js';
-import { COMMENT_NAME_DEFAULT, executeSlashCommands, getSlashCommandsHelp, processChatSlashCommands, registerSlashCommand } from './scripts/slash-commands.js';
+import { COMMENT_NAME_DEFAULT, executeSlashCommands, executeSlashCommandsOnChatInput, getSlashCommandsHelp, isExecutingCommandsFromChatInput, pauseScriptExecution, processChatSlashCommands, registerSlashCommand, stopScriptExecution } from './scripts/slash-commands.js';
 import {
     tag_map,
     tags,
@@ -227,6 +227,10 @@ import { currentUser, setUserControls } from './scripts/user.js';
 import { callGenericPopup } from './scripts/popup.js';
 import { renderTemplate, renderTemplateAsync } from './scripts/templates.js';
 import { ScraperManager } from './scripts/scrapers.js';
+import { SlashCommandParser } from './scripts/slash-commands/SlashCommandParser.js';
+import { SlashCommand } from './scripts/slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument } from './scripts/slash-commands/SlashCommandArgument.js';
+import { SlashCommandBrowser } from './scripts/slash-commands/SlashCommandBrowser.js';
 
 //exporting functions and vars for mods
 export {
@@ -1716,6 +1720,7 @@ export async function reloadCurrentChat() {
  */
 export function sendTextareaMessage() {
     if (is_send_press) return;
+    if (isExecutingCommandsFromChatInput) return;
 
     let generateType;
     // "Continue on send" is activated when the user hits "send" (or presses enter) on an empty chat box, and the last
@@ -2397,30 +2402,14 @@ export async function generateQuietPrompt(quiet_prompt, quietToLoud, skipWIAN, q
  * @param {string} message Text to be sent
  * @returns {Promise<boolean>} Whether the message sending was interrupted
  */
-async function processCommands(message) {
+export async function processCommands(message) {
     if (!message || !message.trim().startsWith('/')) {
         return false;
     }
-
-    const previousText = String($('#send_textarea').val());
-    const result = await executeSlashCommands(message);
-
-    if (!result || typeof result !== 'object') {
-        return false;
-    }
-
-    const currentText = String($('#send_textarea').val());
-
-    if (previousText === currentText) {
-        $('#send_textarea').val(result.newText).trigger('input');
-    }
-
-    // interrupt generation if the input was nothing but a command
-    if (message.length > 0 && result?.newText.length === 0) {
-        return true;
-    }
-
-    return result?.interrupt;
+    await executeSlashCommandsOnChatInput(message, {
+        clearChatInput: true,
+    });
+    return true;
 }
 
 export function sendSystemMessage(type, text, extra = {}) {
@@ -2450,6 +2439,14 @@ export function sendSystemMessage(type, text, extra = {}) {
     chat.push(newMessage);
     addOneMessage(newMessage);
     is_send_press = false;
+    if (type == system_message_types.SLASH_COMMANDS) {
+        const browser = new SlashCommandBrowser();
+        const spinner = document.querySelector('#chat .last_mes .custom-slashHelp');
+        const parent = spinner.parentElement;
+        spinner.remove();
+        browser.renderInto(parent);
+        browser.search.focus();
+    }
 }
 
 /**
@@ -2697,7 +2694,7 @@ class StreamingProcessor {
         let messageId = -1;
 
         if (this.type == 'impersonate') {
-            $('#send_textarea').val('').trigger('input');
+            $('#send_textarea').val('')[0].dispatchEvent(new Event('input', { bubbles:true }));
         }
         else {
             await saveReply(this.type, text, true);
@@ -2733,7 +2730,7 @@ class StreamingProcessor {
         }
 
         if (isImpersonate) {
-            $('#send_textarea').val(processedText).trigger('input');
+            $('#send_textarea').val(processedText)[0].dispatchEvent(new Event('input', { bubbles:true }));
         }
         else {
             let currentTime = new Date();
@@ -3080,7 +3077,7 @@ export async function Generate(type, { automatic_trigger, force_name2, quiet_pro
         const interruptedByCommand = await processCommands(String($('#send_textarea').val()));
 
         if (interruptedByCommand) {
-            //$("#send_textarea").val('').trigger('input');
+            //$("#send_textarea").val('')[0].dispatchEvent(new Event('input', { bubbles:true }));
             unblockGeneration(type);
             return Promise.resolve();
         }
@@ -3175,7 +3172,7 @@ export async function Generate(type, { automatic_trigger, force_name2, quiet_pro
     if (type !== 'regenerate' && type !== 'swipe' && type !== 'quiet' && !isImpersonate && !dryRun) {
         is_send_press = true;
         textareaText = String($('#send_textarea').val());
-        $('#send_textarea').val('').trigger('input');
+        $('#send_textarea').val('')[0].dispatchEvent(new Event('input', { bubbles:true }));
     } else {
         textareaText = '';
         if (chat.length && chat[chat.length - 1]['is_user']) {
@@ -4137,7 +4134,7 @@ export async function Generate(type, { automatic_trigger, force_name2, quiet_pro
 
         if (getMessage.length > 0) {
             if (isImpersonate) {
-                $('#send_textarea').val(getMessage).trigger('input');
+                $('#send_textarea').val(getMessage)[0].dispatchEvent(new Event('input', { bubbles:true }));
                 generatedPromptCache = '';
                 await eventSource.emit(event_types.IMPERSONATE_READY, getMessage);
             }
@@ -8477,19 +8474,123 @@ jQuery(async function () {
         toastr.success('Chat and settings saved.');
     }
 
-    registerSlashCommand('dupe', DupeChar, [], '– duplicates the currently selected character', true, true);
-    registerSlashCommand('api', connectAPISlash, [], `<span class="monospace">(${Object.keys(CONNECT_API_MAP).join(', ')})</span> – connect to an API`, true, true);
-    registerSlashCommand('impersonate', doImpersonate, ['imp'], '<span class="monospace">[prompt]</span> – calls an impersonation response, with an optional additional prompt', true, true);
-    registerSlashCommand('delchat', doDeleteChat, [], '– deletes the current chat', true, true);
-    registerSlashCommand('getchatname', doGetChatName, [], '– returns the name of the current chat file into the pipe', false, true);
-    registerSlashCommand('closechat', doCloseChat, [], '– closes the current chat', true, true);
-    registerSlashCommand('panels', doTogglePanels, ['togglepanels'], '– toggle UI panels on/off', true, true);
-    registerSlashCommand('forcesave', doForceSave, [], '– forces a save of the current chat and settings', true, true);
-    registerSlashCommand('instruct', selectInstructCallback, [], '<span class="monospace">(name)</span> – selects instruct mode preset by name. Gets the current instruct if no name is provided', true, true);
-    registerSlashCommand('instruct-on', enableInstructCallback, [], '– enables instruct mode', true, true);
-    registerSlashCommand('instruct-off', disableInstructCallback, [], '– disables instruct mode', true, true);
-    registerSlashCommand('context', selectContextCallback, [], '<span class="monospace">(name)</span> – selects context template by name. Gets the current template if no name is provided', true, true);
-    registerSlashCommand('chat-manager', () => $('#option_select_chat').trigger('click'), ['chat-history', 'manage-chats'], '– opens the chat manager for the current character/group', true, true);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'dupe',
+        callback: DupeChar,
+        helpString: 'Duplicates the currently selected character.',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'api',
+        callback: connectAPISlash,
+        namedArgumentList: [],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'API to connect to',
+                [ARGUMENT_TYPE.STRING],
+                true,
+                false,
+                null,
+                Object.keys(CONNECT_API_MAP),
+            ),
+        ],
+        helpString: `
+            <div>
+                Connect to an API.
+            </div>
+            <div>
+                <strong>Available APIs:</strong>
+                <pre><code>${Object.keys(CONNECT_API_MAP).join(', ')}</code></pre>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'impersonate',
+        callback: doImpersonate,
+        aliases: ['imp'],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'prompt', [ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        helpString: `
+            <div>
+                Calls an impersonation response, with an optional additional prompt.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/impersonate What is the meaning of life?</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'delchat',
+        callback: doDeleteChat,
+        helpString: 'Deletes the current chat.',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'getchatname',
+        callback: doGetChatName,
+        returns: 'chat file name',
+        helpString: 'Returns the name of the current chat file into the pipe.',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'closechat',
+        callback: doCloseChat,
+        helpString: 'Closes the current chat.',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'panels',
+        callback: doTogglePanels,
+        aliases: ['togglepanels'],
+        helpString: 'Toggle UI panels on/off',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'forcesave',
+        callback: doForceSave,
+        helpString: 'Forces a save of the current chat and settings',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'instruct',
+        callback: selectInstructCallback,
+        returns: 'current preset',
+        namedArgumentList: [],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'name', [ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        helpString: `
+            <div>
+                Selects instruct mode preset by name. Gets the current instruct if no name is provided.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/instruct creative</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'instruct-on',
+        callback: enableInstructCallback,
+        helpString: 'Enables instruct mode.',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'instruct-off',
+        callback: disableInstructCallback,
+        helpString: 'Disables instruct mode',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'context',
+        callback: selectContextCallback,
+        returns: 'template name',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'name', [ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        helpString: 'Selects context template by name. Gets the current template if no name is provided',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'chat-manager',
+        callback: () => $('#option_select_chat').trigger('click'),
+        aliases: ['chat-history', 'manage-chats'],
+        helpString: 'Opens the chat manager for the current character/group.',
+    }));
 
     setTimeout(function () {
         $('#groupControlsToggle').trigger('click');
@@ -9867,11 +9968,22 @@ jQuery(async function () {
             streamingProcessor = null;
         }
         if (abortController) {
-            abortController.abort();
+            abortController.abort('Clicked stop button');
             hideStopButton();
         }
         eventSource.emit(event_types.GENERATION_STOPPED);
-        activateSendButtons();
+    });
+
+    $(document).on('click', '#form_sheld .stscript_continue', function () {
+        pauseScriptExecution();
+    });
+
+    $(document).on('click', '#form_sheld .stscript_pause', function () {
+        pauseScriptExecution();
+    });
+
+    $(document).on('click', '#form_sheld .stscript_stop', function () {
+        stopScriptExecution();
     });
 
     $('.drawer-toggle').on('click', function () {
diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js
index 33699b995..5239b71c3 100644
--- a/public/scripts/RossAscends-mods.js
+++ b/public/scripts/RossAscends-mods.js
@@ -424,7 +424,7 @@ function restoreUserInput() {
 
     const userInput = LoadLocal('userInput');
     if (userInput) {
-        $('#send_textarea').val(userInput).trigger('input');
+        $('#send_textarea').val(userInput)[0].dispatchEvent(new Event('input', { bubbles:true }));
     }
 }
 
@@ -702,12 +702,12 @@ const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
  */
 function autoFitSendTextArea() {
     const originalScrollBottom = chatBlock.scrollHeight - (chatBlock.scrollTop + chatBlock.offsetHeight);
-    if (sendTextArea.scrollHeight == sendTextArea.offsetHeight) {
+    if (sendTextArea.scrollHeight + 3 == sendTextArea.offsetHeight) {
         // Needs to be pulled dynamically because it is affected by font size changes
         const sendTextAreaMinHeight = window.getComputedStyle(sendTextArea).getPropertyValue('min-height');
         sendTextArea.style.height = sendTextAreaMinHeight;
     }
-    sendTextArea.style.height = sendTextArea.scrollHeight + 0.3 + 'px';
+    sendTextArea.style.height = sendTextArea.scrollHeight + 3 + 'px';
 
     if (!isFirefox) {
         const newScrollTop = Math.round(chatBlock.scrollHeight - (chatBlock.offsetHeight + originalScrollBottom));
diff --git a/public/scripts/authors-note.js b/public/scripts/authors-note.js
index 167cf5446..f9643a8d6 100644
--- a/public/scripts/authors-note.js
+++ b/public/scripts/authors-note.js
@@ -9,10 +9,12 @@ import {
 } from '../script.js';
 import { selected_group } from './group-chats.js';
 import { extension_settings, getContext, saveMetadataDebounced } from './extensions.js';
-import { registerSlashCommand } from './slash-commands.js';
 import { getCharaFilename, debounce, delay } from './utils.js';
 import { getTokenCountAsync } from './tokenizers.js';
 import { debounce_timeout } from './constants.js';
+import { SlashCommandParser } from './slash-commands/SlashCommandParser.js';
+import { SlashCommand } from './slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument } from './slash-commands/SlashCommandArgument.js';
 export { MODULE_NAME as NOTE_MODULE_NAME };
 
 const MODULE_NAME = '2_floating_prompt'; // <= Deliberate, for sorting lower than memory
@@ -455,9 +457,59 @@ export function initAuthorsNote() {
     });
     $('#option_toggle_AN').on('click', onANMenuItemClick);
 
-    registerSlashCommand('note', setNoteTextCommand, [], '<span class=\'monospace\'>(text)</span> – sets an author\'s note for the currently selected chat', true, true);
-    registerSlashCommand('depth', setNoteDepthCommand, [], '<span class=\'monospace\'>(number)</span> – sets an author\'s note depth for in-chat positioning', true, true);
-    registerSlashCommand('freq', setNoteIntervalCommand, ['interval'], '<span class=\'monospace\'>(number)</span> – sets an author\'s note insertion frequency', true, true);
-    registerSlashCommand('pos', setNotePositionCommand, ['position'], '(<span class=\'monospace\'>chat</span> or <span class=\'monospace\'>scenario</span>) – sets an author\'s note position', true, true);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'note',
+        callback: setNoteTextCommand,
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'text', [ARGUMENT_TYPE.STRING], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Sets an author's note for the currently selected chat.
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'depth',
+        callback: setNoteDepthCommand,
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'number', [ARGUMENT_TYPE.NUMBER], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Sets an author's note depth for in-chat positioning.
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'freq',
+        callback: setNoteIntervalCommand,
+        namedArgumentList: [],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'number', [ARGUMENT_TYPE.NUMBER], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Sets an author's note insertion frequency.
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'pos',
+        callback: setNotePositionCommand,
+        namedArgumentList: [],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'position', [ARGUMENT_TYPE.STRING], true, false, null, ['chat', 'scenario'],
+            ),
+        ],
+        helpString: `
+            <div>
+                Sets an author's note position.
+            </div>
+        `,
+    }));
     eventSource.on(event_types.CHAT_CHANGED, onChatChanged);
 }
diff --git a/public/scripts/autocomplete/AutoComplete.js b/public/scripts/autocomplete/AutoComplete.js
new file mode 100644
index 000000000..d1205f6e8
--- /dev/null
+++ b/public/scripts/autocomplete/AutoComplete.js
@@ -0,0 +1,745 @@
+import { power_user } from '../power-user.js';
+import { debounce, escapeRegex } from '../utils.js';
+import { AutoCompleteOption } from './AutoCompleteOption.js';
+import { AutoCompleteFuzzyScore } from './AutoCompleteFuzzyScore.js';
+import { BlankAutoCompleteOption } from './BlankAutoCompleteOption.js';
+// eslint-disable-next-line no-unused-vars
+import { AutoCompleteNameResult } from './AutoCompleteNameResult.js';
+import { AutoCompleteSecondaryNameResult } from './AutoCompleteSecondaryNameResult.js';
+
+/**@readonly*/
+/**@enum {Number}*/
+export const AUTOCOMPLETE_WIDTH = {
+    'INPUT': 0,
+    'CHAT': 1,
+    'FULL': 2,
+};
+
+export class AutoComplete {
+    /**@type {HTMLTextAreaElement}*/ textarea;
+    /**@type {boolean}*/ isFloating = false;
+    /**@type {()=>boolean}*/ checkIfActivate;
+    /**@type {(text:string, index:number) => Promise<AutoCompleteNameResult>}*/ getNameAt;
+
+    /**@type {boolean}*/ isActive = false;
+    /**@type {boolean}*/ isReplaceable = false;
+    /**@type {boolean}*/ isShowingDetails = false;
+    /**@type {boolean}*/ wasForced = false;
+
+    /**@type {string}*/ text;
+    /**@type {AutoCompleteNameResult}*/ parserResult;
+    /**@type {AutoCompleteSecondaryNameResult}*/ secondaryParserResult;
+    get effectiveParserResult() { return this.secondaryParserResult ?? this.parserResult; }
+    /**@type {string}*/ name;
+
+    /**@type {boolean}*/ startQuote;
+    /**@type {boolean}*/ endQuote;
+    /**@type {number}*/ selectionStart;
+
+    /**@type {RegExp}*/ fuzzyRegex;
+
+    /**@type {AutoCompleteOption[]}*/ result = [];
+    /**@type {AutoCompleteOption}*/ selectedItem = null;
+
+    /**@type {HTMLElement}*/ clone;
+    /**@type {HTMLElement}*/ domWrap;
+    /**@type {HTMLElement}*/ dom;
+    /**@type {HTMLElement}*/ detailsWrap;
+    /**@type {HTMLElement}*/ detailsDom;
+
+    /**@type {function}*/ renderDebounced;
+    /**@type {function}*/ renderDetailsDebounced;
+    /**@type {function}*/ updatePositionDebounced;
+    /**@type {function}*/ updateDetailsPositionDebounced;
+    /**@type {function}*/ updateFloatingPositionDebounced;
+
+    get matchType() {
+        return power_user.stscript.matching ?? 'fuzzy';
+    }
+
+
+
+
+    /**
+     * @param {HTMLTextAreaElement} textarea The textarea to receive autocomplete.
+     * @param {() => boolean} checkIfActivate Function should return true only if under the current conditions, autocomplete should display (e.g., for slash commands: autoComplete.text[0] == '/')
+     * @param {(text: string, index: number) => Promise<AutoCompleteNameResult>} getNameAt Function should return (unfiltered, matching against input is done in AutoComplete) information about name options at index in text.
+     * @param {boolean} isFloating Whether autocomplete should float at the keyboard cursor.
+     */
+    constructor(textarea, checkIfActivate, getNameAt, isFloating = false) {
+        this.textarea = textarea;
+        this.checkIfActivate = checkIfActivate;
+        this.getNameAt = getNameAt;
+        this.isFloating = isFloating;
+
+        this.domWrap = document.createElement('div'); {
+            this.domWrap.classList.add('autoComplete-wrap');
+            if (isFloating) this.domWrap.classList.add('isFloating');
+        }
+        this.dom = document.createElement('ul'); {
+            this.dom.classList.add('autoComplete');
+            this.domWrap.append(this.dom);
+        }
+        this.detailsWrap = document.createElement('div'); {
+            this.detailsWrap.classList.add('autoComplete-detailsWrap');
+            if (isFloating) this.detailsWrap.classList.add('isFloating');
+        }
+        this.detailsDom = document.createElement('div'); {
+            this.detailsDom.classList.add('autoComplete-details');
+            this.detailsWrap.append(this.detailsDom);
+        }
+
+        this.renderDebounced = debounce(this.render.bind(this), 10);
+        this.renderDetailsDebounced = debounce(this.renderDetails.bind(this), 10);
+        this.updatePositionDebounced = debounce(this.updatePosition.bind(this), 10);
+        this.updateDetailsPositionDebounced = debounce(this.updateDetailsPosition.bind(this), 10);
+        this.updateFloatingPositionDebounced = debounce(this.updateFloatingPosition.bind(this), 10);
+
+        textarea.addEventListener('input', ()=>this.text != this.textarea.value && this.show(true, this.wasForced));
+        textarea.addEventListener('keydown', (evt)=>this.handleKeyDown(evt));
+        textarea.addEventListener('click', ()=>this.isActive ? this.show() : null);
+        textarea.addEventListener('selectionchange', ()=>this.show());
+        textarea.addEventListener('blur', ()=>this.hide());
+        if (isFloating) {
+            textarea.addEventListener('scroll', ()=>this.updateFloatingPositionDebounced());
+        }
+        window.addEventListener('resize', ()=>this.updatePositionDebounced());
+    }
+
+    /**
+     *
+     * @param {AutoCompleteOption} option
+     */
+    makeItem(option) {
+        const li = option.renderItem();
+        // gotta listen to pointerdown (happens before textarea-blur)
+        li.addEventListener('pointerdown', (evt)=>{
+            evt.preventDefault();
+            this.selectedItem = this.result.find(it=>it.name == li.getAttribute('data-name'));
+            this.select();
+        });
+        return li;
+    }
+
+
+    /**
+     *
+     * @param {AutoCompleteOption} item
+     */
+    updateName(item) {
+        const chars = Array.from(item.dom.querySelector('.name').children);
+        switch (this.matchType) {
+            case 'strict': {
+                chars.forEach((it, idx)=>{
+                    if (idx + item.nameOffset < item.name.length) {
+                        it.classList.add('matched');
+                    } else {
+                        it.classList.remove('matched');
+                    }
+                });
+                break;
+            }
+            case 'includes': {
+                const start = item.name.toLowerCase().search(this.name);
+                chars.forEach((it, idx)=>{
+                    if (idx + item.nameOffset < start) {
+                        it.classList.remove('matched');
+                    } else if (idx + item.nameOffset < start + item.name.length) {
+                        it.classList.add('matched');
+                    } else {
+                        it.classList.remove('matched');
+                    }
+                });
+                break;
+            }
+            case 'fuzzy': {
+                item.name.replace(this.fuzzyRegex, (_, ...parts)=>{
+                    parts.splice(-2, 2);
+                    if (parts.length == 2) {
+                        chars.forEach(c=>c.classList.remove('matched'));
+                    } else {
+                        let cIdx = item.nameOffset;
+                        parts.forEach((it, idx)=>{
+                            if (it === null || it.length == 0) return '';
+                            if (idx % 2 == 1) {
+                                chars.slice(cIdx, cIdx + it.length).forEach(c=>c.classList.add('matched'));
+                            } else {
+                                chars.slice(cIdx, cIdx + it.length).forEach(c=>c.classList.remove('matched'));
+                            }
+                            cIdx += it.length;
+                        });
+                    }
+                    return '';
+                });
+            }
+        }
+        return item;
+    }
+
+    /**
+     * Calculate score for the fuzzy match.
+     * @param {AutoCompleteOption} option
+     * @returns The option.
+     */
+    fuzzyScore(option) {
+        const parts = this.fuzzyRegex.exec(option.name).slice(1, -1);
+        let start = null;
+        let consecutive = [];
+        let current = '';
+        let offset = 0;
+        parts.forEach((part, idx) => {
+            if (idx % 2 == 0) {
+                if (part.length > 0) {
+                    if (current.length > 0) {
+                        consecutive.push(current);
+                    }
+                    current = '';
+                }
+            } else {
+                if (start === null) {
+                    start = offset;
+                }
+                current += part;
+            }
+            offset += part.length;
+        });
+        if (current.length > 0) {
+            consecutive.push(current);
+        }
+        consecutive.sort((a,b)=>b.length - a.length);
+        option.score = new AutoCompleteFuzzyScore(start, consecutive[0]?.length ?? 0);
+        return option;
+    }
+
+    /**
+     * Compare two auto complete options by their fuzzy score.
+     * @param {AutoCompleteOption} a
+     * @param {AutoCompleteOption} b
+     */
+    fuzzyScoreCompare(a, b) {
+        if (a.score.start < b.score.start) return -1;
+        if (a.score.start > b.score.start) return 1;
+        if (a.score.longestConsecutive > b.score.longestConsecutive) return -1;
+        if (a.score.longestConsecutive < b.score.longestConsecutive) return 1;
+        return a.name.localeCompare(b.name);
+    }
+
+    /**
+     * Show the autocomplete.
+     * @param {boolean} isInput Whether triggered by input.
+     * @param {boolean} isForced Whether force-showing (ctrl+space).
+     * @param {boolean} isSelect Whether an autocomplete option was just selected.
+     */
+    async show(isInput = false, isForced = false, isSelect = false) {
+        //TODO check if isInput and isForced are both required
+        this.text = this.textarea.value;
+        this.isReplaceable = false;
+
+        if (document.activeElement != this.textarea) {
+            // only show with textarea in focus
+            return this.hide();
+        }
+        if (!this.checkIfActivate()) {
+            // only show if provider wants to
+            return this.hide();
+        }
+
+        // request provider to get name result (potentially "incomplete", i.e. not an actual existing name) for
+        // cursor position
+        this.parserResult = await this.getNameAt(this.text, this.textarea.selectionStart);
+        this.secondaryParserResult = null;
+
+        if (!this.parserResult) {
+            // don't show if no name result found, e.g., cursor's area is not a command
+            return this.hide();
+        }
+
+        // need to know if name can be inside quotes, and then check if quotes are already there
+        if (this.parserResult.canBeQuoted) {
+            this.startQuote = this.text[this.parserResult.start] == '"';
+            this.endQuote = this.startQuote && this.text[this.parserResult.start + this.parserResult.name.length + 1] == '"';
+        } else {
+            this.startQuote = false;
+            this.endQuote = false;
+        }
+
+        // use lowercase name for matching
+        this.name = this.parserResult.name.toLowerCase() ?? '';
+
+        const isCursorInNamePart = this.textarea.selectionStart >= this.parserResult.start && this.textarea.selectionStart <= this.parserResult.start + this.parserResult.name.length + (this.startQuote ? 1 : 0);
+        if (isForced || isInput) {
+            // if forced (ctrl+space) or user input...
+            if (isCursorInNamePart) {
+                // ...and cursor is somewhere in the name part (including right behind the final char)
+                // -> show autocomplete for the (partial if cursor in the middle) name
+                this.name = this.name.slice(0, this.textarea.selectionStart - (this.parserResult.start) - (this.startQuote ? 1 : 0));
+                this.parserResult.name = this.name;
+                this.isReplaceable = true;
+            } else {
+                this.isReplaceable = false;
+            }
+        } else {
+            // if not forced and no user input -> just show details
+            this.isReplaceable = false;
+        }
+
+        if (isForced || isInput || isSelect) {
+            // is forced or user input or just selected autocomplete option...
+            if (!isCursorInNamePart) {
+                // ...and cursor is not somwehere in the main name part -> check for secondary options (e.g., named arguments)
+                const result = this.parserResult.getSecondaryNameAt(this.text, this.textarea.selectionStart, isSelect);
+                if (result && (isForced || result.isRequired)) {
+                    this.secondaryParserResult = result;
+                    this.name = this.secondaryParserResult.name;
+                    this.isReplaceable = isForced || this.secondaryParserResult.isRequired;
+                } else {
+                    this.isReplaceable = false;
+                }
+            }
+        }
+
+        if (this.matchType == 'fuzzy') {
+            // only build the fuzzy regex if match type is set to fuzzy
+            this.fuzzyRegex = new RegExp(`^(.*?)${this.name.split('').map(char=>`(${escapeRegex(char)})`).join('(.*?)')}(.*?)$`, 'i');
+        }
+
+        //TODO maybe move the matchers somewhere else; a single match function? matchType is available as property
+        const matchers = {
+            'strict': (name) => name.toLowerCase().startsWith(this.name),
+            'includes': (name) => name.toLowerCase().includes(this.name),
+            'fuzzy': (name) => this.fuzzyRegex.test(name),
+        };
+
+        this.result = this.effectiveParserResult.optionList
+            // filter the list of options by the partial name according to the matching type
+            .filter(it => this.isReplaceable || it.name == '' ? matchers[this.matchType](it.name) : it.name.toLowerCase() == this.name)
+            // remove aliases
+            .filter((it,idx,list) => list.findIndex(opt=>opt.value == it.value) == idx)
+            // update remaining options
+            .map(option => {
+                // build element
+                option.dom = this.makeItem(option);
+                // update replacer and add quotes if necessary
+                if (this.effectiveParserResult.canBeQuoted) {
+                    option.replacer = option.name.includes(' ') || this.startQuote || this.endQuote ? `"${option.name}"` : `${option.name}`;
+                } else {
+                    option.replacer = option.name;
+                }
+                // calculate fuzzy score if matching is fuzzy
+                if (this.matchType == 'fuzzy') this.fuzzyScore(option);
+                // update the name to highlight the matched chars
+                this.updateName(option);
+                return option;
+            })
+            // sort by fuzzy score or alphabetical
+            .toSorted(this.matchType == 'fuzzy' ? this.fuzzyScoreCompare : (a, b) => a.name.localeCompare(b.name))
+        ;
+
+
+        if (this.result.length == 0) {
+            if (!isInput) {
+                // no result and no input? hide autocomplete
+                return this.hide();
+            }
+            // otherwise add "no match" notice
+            const option = new BlankAutoCompleteOption(
+                this.name.length ?
+                    this.effectiveParserResult.makeNoMatchText()
+                    : this.effectiveParserResult.makeNoOptionstext()
+                ,
+            );
+            this.result.push(option);
+        } else if (this.result.length == 1 && this.effectiveParserResult && this.result[0].name == this.effectiveParserResult.name) {
+            // only one result that is exactly the current value? just show hint, no autocomplete
+            this.isReplaceable = false;
+            this.isShowingDetails = false;
+        } else if (!this.isReplaceable && this.result.length > 1) {
+            return this.hide();
+        }
+        this.selectedItem = this.result[0];
+        this.isActive = true;
+        this.wasForced = isForced;
+        this.renderDebounced();
+    }
+
+    /**
+     * Hide autocomplete.
+     */
+    hide() {
+        this.domWrap?.remove();
+        this.detailsWrap?.remove();
+        this.isActive = false;
+        this.isShowingDetails = false;
+        this.wasForced = false;
+    }
+
+
+
+    /**
+     * Create updated DOM.
+     */
+    render() {
+        if (!this.isActive) return this.domWrap.remove();
+        if (this.isReplaceable) {
+            this.dom.innerHTML = '';
+            const frag = document.createDocumentFragment();
+            for (const item of this.result) {
+                if (item == this.selectedItem) {
+                    item.dom.classList.add('selected');
+                } else {
+                    item.dom.classList.remove('selected');
+                }
+                frag.append(item.dom);
+            }
+            this.dom.append(frag);
+            this.updatePosition();
+            document.body.append(this.domWrap);
+        } else {
+            this.domWrap.remove();
+        }
+        this.renderDetailsDebounced();
+    }
+
+    /**
+     * Create updated DOM for details.
+     */
+    renderDetails() {
+        if (!this.isActive) return this.detailsWrap.remove();
+        if (!this.isShowingDetails && this.isReplaceable) return this.detailsWrap.remove();
+        this.detailsDom.innerHTML = '';
+        this.detailsDom.append(this.selectedItem?.renderDetails() ?? 'NO ITEM');
+        document.body.append(this.detailsWrap);
+        this.updateDetailsPositionDebounced();
+    }
+
+
+
+    /**
+     * Update position of DOM.
+     */
+    updatePosition() {
+        if (this.isFloating) {
+            this.updateFloatingPosition();
+        } else {
+            const rect = {};
+            rect[AUTOCOMPLETE_WIDTH.INPUT] = this.textarea.getBoundingClientRect();
+            rect[AUTOCOMPLETE_WIDTH.CHAT] = document.querySelector('#sheld').getBoundingClientRect();
+            rect[AUTOCOMPLETE_WIDTH.FULL] = document.body.getBoundingClientRect();
+            this.domWrap.style.setProperty('--bottom', `${window.innerHeight - rect[AUTOCOMPLETE_WIDTH.INPUT].top}px`);
+            this.dom.style.setProperty('--bottom', `${window.innerHeight - rect[AUTOCOMPLETE_WIDTH.INPUT].top}px`);
+            this.domWrap.style.bottom = `${window.innerHeight - rect[AUTOCOMPLETE_WIDTH.INPUT].top}px`;
+            if (this.isShowingDetails) {
+                this.domWrap.style.setProperty('--leftOffset', '1vw');
+                this.domWrap.style.setProperty('--leftOffset', `max(1vw, ${rect[power_user.stscript.autocomplete.width.left].left}px)`);
+                this.domWrap.style.setProperty('--rightOffset', `calc(100vw - min(${rect[power_user.stscript.autocomplete.width.right].right}px, ${this.isShowingDetails ? 74 : 0}vw)`);
+            } else {
+                this.domWrap.style.setProperty('--leftOffset', `max(1vw, ${rect[power_user.stscript.autocomplete.width.left].left}px)`);
+                this.domWrap.style.setProperty('--rightOffset', `calc(100vw - min(99vw, ${rect[power_user.stscript.autocomplete.width.right].right}px)`);
+            }
+            this.updateDetailsPosition();
+        }
+    }
+
+    /**
+     * Update position of details DOM.
+     */
+    updateDetailsPosition() {
+        if (this.isShowingDetails || !this.isReplaceable) {
+            if (this.isFloating) {
+                this.updateFloatingDetailsPosition();
+            } else {
+                const rect = {};
+                rect[AUTOCOMPLETE_WIDTH.INPUT] = this.textarea.getBoundingClientRect();
+                rect[AUTOCOMPLETE_WIDTH.CHAT] = document.querySelector('#sheld').getBoundingClientRect();
+                rect[AUTOCOMPLETE_WIDTH.FULL] = document.body.getBoundingClientRect();
+                if (this.isReplaceable) {
+                    this.detailsWrap.classList.remove('full');
+                    const selRect = this.selectedItem.dom.children[0].getBoundingClientRect();
+                    this.detailsWrap.style.setProperty('--targetOffset', `${selRect.top}`);
+                    this.detailsWrap.style.setProperty('--rightOffset', '1vw');
+                    this.detailsWrap.style.setProperty('--bottomOffset', `calc(100vh - ${rect[AUTOCOMPLETE_WIDTH.INPUT].top}px)`);
+                    this.detailsWrap.style.setProperty('--leftOffset', `calc(100vw - ${this.domWrap.style.getPropertyValue('--rightOffset')}`);
+                } else {
+                    this.detailsWrap.classList.add('full');
+                    this.detailsWrap.style.setProperty('--targetOffset', `${rect[AUTOCOMPLETE_WIDTH.INPUT].top}`);
+                    this.detailsWrap.style.setProperty('--bottomOffset', `calc(100vh - ${rect[AUTOCOMPLETE_WIDTH.INPUT].top}px)`);
+                    this.detailsWrap.style.setProperty('--leftOffset', `${rect[power_user.stscript.autocomplete.width.left].left}px`);
+                    this.detailsWrap.style.setProperty('--rightOffset', `calc(100vw - ${rect[power_user.stscript.autocomplete.width.right].right}px)`);
+                }
+            }
+        }
+    }
+
+
+    /**
+     * Update position of floating autocomplete.
+     */
+    updateFloatingPosition() {
+        const location = this.getCursorPosition();
+        const rect = this.textarea.getBoundingClientRect();
+        // cursor is out of view -> hide
+        if (location.bottom < rect.top || location.top > rect.bottom || location.left < rect.left || location.left > rect.right) {
+            return this.hide();
+        }
+        const left = Math.max(rect.left, location.left);
+        this.domWrap.style.setProperty('--targetOffset', `${left}`);
+        if (location.top <= window.innerHeight / 2) {
+            // if cursor is in lower half of window, show list above line
+            this.domWrap.style.top = `${location.bottom}px`;
+            this.domWrap.style.bottom = 'auto';
+            this.domWrap.style.maxHeight = `calc(${location.bottom}px - 1vh)`;
+        } else {
+            // if cursor is in upper half of window, show list below line
+            this.domWrap.style.top = 'auto';
+            this.domWrap.style.bottom = `calc(100vh - ${location.top}px)`;
+            this.domWrap.style.maxHeight = `calc(${location.top}px - 1vh)`;
+        }
+    }
+
+    updateFloatingDetailsPosition(location = null) {
+        if (!location) location = this.getCursorPosition();
+        const rect = this.textarea.getBoundingClientRect();
+        if (location.bottom < rect.top || location.top > rect.bottom || location.left < rect.left || location.left > rect.right) {
+            return this.hide();
+        }
+        const left = Math.max(rect.left, location.left);
+        this.detailsWrap.style.setProperty('--targetOffset', `${left}`);
+        if (this.isReplaceable) {
+            this.detailsWrap.classList.remove('full');
+            if (left < window.innerWidth / 4) {
+                // if cursor is in left part of screen, show details on right of list
+                this.detailsWrap.classList.add('right');
+                this.detailsWrap.classList.remove('left');
+            } else {
+                // if cursor is in right part of screen, show details on left of list
+                this.detailsWrap.classList.remove('right');
+                this.detailsWrap.classList.add('left');
+            }
+        } else {
+            this.detailsWrap.classList.remove('left');
+            this.detailsWrap.classList.remove('right');
+            this.detailsWrap.classList.add('full');
+        }
+        if (location.top <= window.innerHeight / 2) {
+            // if cursor is in lower half of window, show list above line
+            this.detailsWrap.style.top = `${location.bottom}px`;
+            this.detailsWrap.style.bottom = 'auto';
+            this.detailsWrap.style.maxHeight = `calc(${location.bottom}px - 1vh)`;
+        } else {
+            // if cursor is in upper half of window, show list below line
+            this.detailsWrap.style.top = 'auto';
+            this.detailsWrap.style.bottom = `calc(100vh - ${location.top}px)`;
+            this.detailsWrap.style.maxHeight = `calc(${location.top}px - 1vh)`;
+        }
+    }
+
+    /**
+     * Calculate (keyboard) cursor coordinates within textarea.
+     * @returns {{left:number, top:number, bottom:number}}
+     */
+    getCursorPosition() {
+        const inputRect = this.textarea.getBoundingClientRect();
+        const style = window.getComputedStyle(this.textarea);
+        if (!this.clone) {
+            this.clone = document.createElement('div');
+            for (const key of style) {
+                this.clone.style[key] = style[key];
+            }
+            this.clone.style.position = 'fixed';
+            this.clone.style.visibility = 'hidden';
+            document.body.append(this.clone);
+            const mo = new MutationObserver(muts=>{
+                if (muts.find(it=>Array.from(it.removedNodes).includes(this.textarea))) {
+                    this.clone.remove();
+                }
+            });
+            mo.observe(this.textarea.parentElement, { childList:true });
+        }
+        this.clone.style.height = `${inputRect.height}px`;
+        this.clone.style.left = `${inputRect.left}px`;
+        this.clone.style.top = `${inputRect.top}px`;
+        this.clone.style.whiteSpace = style.whiteSpace;
+        this.clone.style.tabSize = style.tabSize;
+        const text = this.textarea.value;
+        const before = text.slice(0, this.textarea.selectionStart);
+        this.clone.textContent = before;
+        const locator = document.createElement('span');
+        locator.textContent = text[this.textarea.selectionStart];
+        this.clone.append(locator);
+        this.clone.append(text.slice(this.textarea.selectionStart + 1));
+        this.clone.scrollTop = this.textarea.scrollTop;
+        this.clone.scrollLeft = this.textarea.scrollLeft;
+        const locatorRect = locator.getBoundingClientRect();
+        const location = {
+            left: locatorRect.left,
+            top: locatorRect.top,
+            bottom: locatorRect.bottom,
+        };
+        return location;
+    }
+
+
+    /**
+     * Toggle details view alongside autocomplete list.
+     */
+    toggleDetails() {
+        this.isShowingDetails = !this.isShowingDetails;
+        this.renderDetailsDebounced();
+        this.updatePosition();
+    }
+
+
+    /**
+     * Select an item for autocomplete and put text into textarea.
+     */
+    async select() {
+        if (this.isReplaceable && this.selectedItem.value !== null) {
+            this.textarea.value = `${this.text.slice(0, this.effectiveParserResult.start)}${this.selectedItem.replacer}${this.text.slice(this.effectiveParserResult.start + this.effectiveParserResult.name.length + (this.startQuote ? 1 : 0) + (this.endQuote ? 1 : 0))}`;
+            this.textarea.selectionStart = this.effectiveParserResult.start + this.selectedItem.replacer.length;
+            this.textarea.selectionEnd = this.textarea.selectionStart;
+            this.show(false, false, true);
+        } else {
+            const selectionStart = this.textarea.selectionStart;
+            const selectionEnd = this.textarea.selectionDirection;
+            this.textarea.selectionStart = selectionStart;
+            this.textarea.selectionDirection = selectionEnd;
+        }
+        this.wasForced = false;
+        this.textarea.dispatchEvent(new Event('input', { bubbles:true }));
+    }
+
+
+    /**
+     * Mark the item at newIdx in the autocomplete list as selected.
+     * @param {number} newIdx
+     */
+    selectItemAtIndex(newIdx) {
+        this.selectedItem.dom.classList.remove('selected');
+        this.selectedItem = this.result[newIdx];
+        this.selectedItem.dom.classList.add('selected');
+        const rect = this.selectedItem.dom.children[0].getBoundingClientRect();
+        const rectParent = this.dom.getBoundingClientRect();
+        if (rect.top < rectParent.top || rect.bottom > rectParent.bottom ) {
+            this.dom.scrollTop += rect.top < rectParent.top ? rect.top - rectParent.top : rect.bottom - rectParent.bottom;
+        }
+        this.renderDetailsDebounced();
+    }
+
+    /**
+     * Handle keyboard events.
+     * @param {KeyboardEvent} evt The event.
+     */
+    async handleKeyDown(evt) {
+        // autocomplete is shown and cursor at end of current command name (or inside name and typed or forced)
+        if (this.isActive && this.isReplaceable) {
+            // actions in the list
+            switch (evt.key) {
+                case 'ArrowUp': {
+                    // select previous item
+                    if (evt.ctrlKey || evt.altKey || evt.shiftKey) return;
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                    const idx = this.result.indexOf(this.selectedItem);
+                    let newIdx;
+                    if (idx == 0) newIdx = this.result.length - 1;
+                    else newIdx = idx - 1;
+                    this.selectItemAtIndex(newIdx);
+                    return;
+                }
+                case 'ArrowDown': {
+                    // select next item
+                    if (evt.ctrlKey || evt.altKey || evt.shiftKey) return;
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                    const idx = this.result.indexOf(this.selectedItem);
+                    const newIdx = (idx + 1) % this.result.length;
+                    this.selectItemAtIndex(newIdx);
+                    return;
+                }
+                case 'Enter': {
+                    // pick the selected item to autocomplete
+                    if (evt.ctrlKey || evt.altKey || evt.shiftKey || this.selectedItem.value == '') break;
+                    if (this.selectedItem.name == this.name) break;
+                    evt.preventDefault();
+                    evt.stopImmediatePropagation();
+                    this.select();
+                    return;
+                }
+                case 'Tab': {
+                    // pick the selected item to autocomplete
+                    if (evt.ctrlKey || evt.altKey || evt.shiftKey || this.selectedItem.value == '') break;
+                    evt.preventDefault();
+                    evt.stopImmediatePropagation();
+                    this.select();
+                    return;
+                }
+            }
+        }
+        // details are shown, cursor can be anywhere
+        if (this.isActive) {
+            switch (evt.key) {
+                case 'Escape': {
+                    // close autocomplete
+                    if (evt.ctrlKey || evt.altKey || evt.shiftKey) return;
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                    this.hide();
+                    return;
+                }
+                case 'Enter': {
+                    // hide autocomplete on enter (send, execute, ...)
+                    if (!evt.shiftKey) {
+                        this.hide();
+                        return;
+                    }
+                    break;
+                }
+            }
+        }
+        // autocomplete shown or not, cursor anywhere
+        switch (evt.key) {
+            case ' ': {
+                if (evt.ctrlKey) {
+                    if (this.isActive && this.isReplaceable) {
+                        // ctrl-space to toggle details for selected item
+                        this.toggleDetails();
+                    } else {
+                        // ctrl-space to force show autocomplete
+                        this.show(false, true);
+                    }
+                    return;
+                }
+                break;
+            }
+        }
+        if (['Control', 'Shift', 'Alt'].includes(evt.key)) {
+            // ignore keydown on modifier keys
+            return;
+        }
+        switch (evt.key) {
+            case 'ArrowUp':
+            case 'ArrowDown':
+            case 'ArrowRight':
+            case 'ArrowLeft': {
+                if (this.isActive) {
+                    // keyboard navigation, wait for keyup to complete cursor move
+                    const oldText = this.textarea.value;
+                    await new Promise(resolve=>{
+                        window.addEventListener('keyup', resolve, { once:true });
+                    });
+                    if (this.selectionStart != this.textarea.selectionStart) {
+                        this.selectionStart = this.textarea.selectionStart;
+                        this.show(this.isReplaceable || oldText != this.textarea.value);
+                    }
+                }
+                break;
+            }
+            default: {
+                if (this.isActive) {
+                    this.text != this.textarea.value && this.show(this.isReplaceable);
+                }
+                break;
+            }
+        }
+    }
+}
diff --git a/public/scripts/autocomplete/AutoCompleteFuzzyScore.js b/public/scripts/autocomplete/AutoCompleteFuzzyScore.js
new file mode 100644
index 000000000..550fbe6a2
--- /dev/null
+++ b/public/scripts/autocomplete/AutoCompleteFuzzyScore.js
@@ -0,0 +1,16 @@
+
+
+
+export class AutoCompleteFuzzyScore {
+    /**@type {number}*/ start;
+    /**@type {number}*/ longestConsecutive;
+
+    /**
+     * @param {number} start
+     * @param {number} longestConsecutive
+     */
+    constructor(start, longestConsecutive) {
+        this.start = start;
+        this.longestConsecutive = longestConsecutive;
+    }
+}
diff --git a/public/scripts/autocomplete/AutoCompleteNameResult.js b/public/scripts/autocomplete/AutoCompleteNameResult.js
new file mode 100644
index 000000000..ffe6a0ed7
--- /dev/null
+++ b/public/scripts/autocomplete/AutoCompleteNameResult.js
@@ -0,0 +1,44 @@
+import { SlashCommandNamedArgumentAutoCompleteOption } from '../slash-commands/SlashCommandNamedArgumentAutoCompleteOption.js';
+import { AutoCompleteOption } from './AutoCompleteOption.js';
+// import { AutoCompleteSecondaryNameResult } from './AutoCompleteSecondaryNameResult.js';
+
+
+
+export class AutoCompleteNameResult {
+    /**@type {string} */ name;
+    /**@type {number} */ start;
+    /**@type {AutoCompleteOption[]} */ optionList = [];
+    /**@type {boolean} */ canBeQuoted = false;
+    /**@type {()=>string} */ makeNoMatchText = ()=>`No matches found for "${this.name}"`;
+    /**@type {()=>string} */ makeNoOptionstext = ()=>'No options';
+
+
+    /**
+     * @param {string} name Name (potentially partial) of the name at the requested index.
+     * @param {number} start Index where the name starts.
+     * @param {AutoCompleteOption[]} optionList A list of autocomplete options found in the current scope.
+     * @param {boolean} canBeQuoted Whether the name can be inside quotes.
+     * @param {()=>string} makeNoMatchText Function that returns text to show when no matches where found.
+     * @param {()=>string} makeNoOptionsText Function that returns text to show when no options are available to match against.
+     */
+    constructor(name, start, optionList = [], canBeQuoted = false, makeNoMatchText = null, makeNoOptionsText = null) {
+        this.name = name;
+        this.start = start;
+        this.optionList = optionList;
+        this.canBeQuoted = canBeQuoted;
+        this.noMatchText = makeNoMatchText ?? this.makeNoMatchText;
+        this.noOptionstext = makeNoOptionsText ?? this.makeNoOptionstext;
+    }
+
+
+    /**
+     *
+     * @param {string} text The whole text
+     * @param {number} index Cursor index within text
+     * @param {boolean} isSelect Whether autocomplete was triggered by selecting an autocomplete option
+     * @returns {AutoCompleteSecondaryNameResult}
+     */
+    getSecondaryNameAt(text, index, isSelect) {
+        return null;
+    }
+}
diff --git a/public/scripts/autocomplete/AutoCompleteOption.js b/public/scripts/autocomplete/AutoCompleteOption.js
new file mode 100644
index 000000000..c3c9e497a
--- /dev/null
+++ b/public/scripts/autocomplete/AutoCompleteOption.js
@@ -0,0 +1,206 @@
+import { SlashCommand } from '../slash-commands/SlashCommand.js';
+import { AutoCompleteFuzzyScore } from './AutoCompleteFuzzyScore.js';
+
+
+
+export class AutoCompleteOption {
+    /**@type {string}*/ name;
+    /**@type {string}*/ typeIcon;
+    /**@type {number}*/ nameOffset = 0;
+    /**@type {AutoCompleteFuzzyScore}*/ score;
+    /**@type {string}*/ replacer;
+    /**@type {HTMLElement}*/ dom;
+
+
+    /**
+     * Used as a comparison value when removing duplicates (e.g., when a SlashCommand has aliases).
+     * @type {any}
+     * */
+    get value() {
+        return this.name;
+    }
+
+
+    /**
+     * @param {string} name
+     */
+    constructor(name, typeIcon = ' ') {
+        this.name = name;
+        this.typeIcon = typeIcon;
+    }
+
+
+    makeItem(key, typeIcon, noSlash, namedArguments = [], unnamedArguments = [], returnType = 'void', helpString = '', aliasList = []) {
+        const li = document.createElement('li'); {
+            li.classList.add('item');
+            const type = document.createElement('span'); {
+                type.classList.add('type');
+                type.classList.add('monospace');
+                type.textContent = typeIcon;
+                li.append(type);
+            }
+            const specs = document.createElement('span'); {
+                specs.classList.add('specs');
+                const name = document.createElement('span'); {
+                    name.classList.add('name');
+                    name.classList.add('monospace');
+                    name.textContent = noSlash ? '' : '/';
+                    key.split('').forEach(char=>{
+                        const span = document.createElement('span'); {
+                            span.textContent = char;
+                            name.append(span);
+                        }
+                    });
+                    specs.append(name);
+                }
+                const body = document.createElement('span'); {
+                    body.classList.add('body');
+                    const args = document.createElement('span'); {
+                        args.classList.add('arguments');
+                        for (const arg of namedArguments) {
+                            const argItem = document.createElement('span'); {
+                                argItem.classList.add('argument');
+                                argItem.classList.add('namedArgument');
+                                if (!arg.isRequired || (arg.defaultValue ?? false)) argItem.classList.add('optional');
+                                if (arg.acceptsMultiple) argItem.classList.add('multiple');
+                                const name = document.createElement('span'); {
+                                    name.classList.add('argument-name');
+                                    name.textContent = arg.name;
+                                    argItem.append(name);
+                                }
+                                if (arg.enumList.length > 0) {
+                                    const enums = document.createElement('span'); {
+                                        enums.classList.add('argument-enums');
+                                        for (const e of arg.enumList) {
+                                            const enumItem = document.createElement('span'); {
+                                                enumItem.classList.add('argument-enum');
+                                                enumItem.textContent = e;
+                                                enums.append(enumItem);
+                                            }
+                                        }
+                                        argItem.append(enums);
+                                    }
+                                } else {
+                                    const types = document.createElement('span'); {
+                                        types.classList.add('argument-types');
+                                        for (const t of arg.typeList) {
+                                            const type = document.createElement('span'); {
+                                                type.classList.add('argument-type');
+                                                type.textContent = t;
+                                                types.append(type);
+                                            }
+                                        }
+                                        argItem.append(types);
+                                    }
+                                }
+                                args.append(argItem);
+                            }
+                        }
+                        for (const arg of unnamedArguments) {
+                            const argItem = document.createElement('span'); {
+                                argItem.classList.add('argument');
+                                argItem.classList.add('unnamedArgument');
+                                if (!arg.isRequired || (arg.defaultValue ?? false)) argItem.classList.add('optional');
+                                if (arg.acceptsMultiple) argItem.classList.add('multiple');
+                                if (arg.enumList.length > 0) {
+                                    const enums = document.createElement('span'); {
+                                        enums.classList.add('argument-enums');
+                                        for (const e of arg.enumList) {
+                                            const enumItem = document.createElement('span'); {
+                                                enumItem.classList.add('argument-enum');
+                                                enumItem.textContent = e;
+                                                enums.append(enumItem);
+                                            }
+                                        }
+                                        argItem.append(enums);
+                                    }
+                                } else {
+                                    const types = document.createElement('span'); {
+                                        types.classList.add('argument-types');
+                                        for (const t of arg.typeList) {
+                                            const type = document.createElement('span'); {
+                                                type.classList.add('argument-type');
+                                                type.textContent = t;
+                                                types.append(type);
+                                            }
+                                        }
+                                        argItem.append(types);
+                                    }
+                                }
+                                args.append(argItem);
+                            }
+                        }
+                        body.append(args);
+                    }
+                    const returns = document.createElement('span'); {
+                        returns.classList.add('returns');
+                        returns.textContent = returnType ?? 'void';
+                        // body.append(returns);
+                    }
+                    specs.append(body);
+                }
+                li.append(specs);
+            }
+            const help = document.createElement('span'); {
+                help.classList.add('help');
+                const content = document.createElement('span'); {
+                    content.classList.add('helpContent');
+                    content.innerHTML = helpString;
+                    const text = content.textContent;
+                    content.innerHTML = '';
+                    content.textContent = text;
+                    help.append(content);
+                }
+                li.append(help);
+            }
+            if (aliasList.length > 0) {
+                const aliases = document.createElement('span'); {
+                    aliases.classList.add('aliases');
+                    aliases.append(' (alias: ');
+                    for (const aliasName of aliasList) {
+                        const alias = document.createElement('span'); {
+                            alias.classList.add('monospace');
+                            alias.textContent = `/${aliasName}`;
+                            aliases.append(alias);
+                        }
+                    }
+                    aliases.append(')');
+                    // li.append(aliases);
+                }
+            }
+        }
+        return li;
+    }
+
+
+    /**
+     * @returns {HTMLElement}
+     */
+    renderItem() {
+        // throw new Error(`${this.constructor.name}.renderItem() is not implemented`);
+        let li;
+        li = this.makeItem(this.name, this.typeIcon, true);
+        li.setAttribute('data-name', this.name);
+        return li;
+    }
+
+
+    /**
+     * @returns {DocumentFragment}
+     */
+    renderDetails() {
+        // throw new Error(`${this.constructor.name}.renderDetails() is not implemented`);
+        const frag = document.createDocumentFragment();
+        const specs = document.createElement('div'); {
+            specs.classList.add('specs');
+            const name = document.createElement('div'); {
+                name.classList.add('name');
+                name.classList.add('monospace');
+                name.textContent = this.name;
+                specs.append(name);
+            }
+            frag.append(specs);
+        }
+        return frag;
+    }
+}
diff --git a/public/scripts/autocomplete/AutoCompleteSecondaryNameResult.js b/public/scripts/autocomplete/AutoCompleteSecondaryNameResult.js
new file mode 100644
index 000000000..f9fe6382d
--- /dev/null
+++ b/public/scripts/autocomplete/AutoCompleteSecondaryNameResult.js
@@ -0,0 +1,5 @@
+import { AutoCompleteNameResult } from './AutoCompleteNameResult.js';
+
+export class AutoCompleteSecondaryNameResult extends AutoCompleteNameResult {
+    /**@type {boolean}*/ isRequired = false;
+}
diff --git a/public/scripts/autocomplete/BlankAutoCompleteOption.js b/public/scripts/autocomplete/BlankAutoCompleteOption.js
new file mode 100644
index 000000000..12b1da95b
--- /dev/null
+++ b/public/scripts/autocomplete/BlankAutoCompleteOption.js
@@ -0,0 +1,29 @@
+import { AutoCompleteOption } from './AutoCompleteOption.js';
+
+export class BlankAutoCompleteOption extends AutoCompleteOption {
+    /**
+     * @param {string} name
+     */
+    constructor(name) {
+        super(name);
+        this.dom = this.renderItem();
+    }
+
+    get value() { return null; }
+
+
+    renderItem() {
+        const li = document.createElement('li'); {
+            li.classList.add('item');
+            li.classList.add('blank');
+            li.textContent = this.name;
+        }
+        return li;
+    }
+
+
+    renderDetails() {
+        const frag = document.createDocumentFragment();
+        return frag;
+    }
+}
diff --git a/public/scripts/autocomplete/MacroAutoCompleteOption.js b/public/scripts/autocomplete/MacroAutoCompleteOption.js
new file mode 100644
index 000000000..c87110887
--- /dev/null
+++ b/public/scripts/autocomplete/MacroAutoCompleteOption.js
@@ -0,0 +1,44 @@
+import { AutoCompleteOption } from './AutoCompleteOption.js';
+
+export class MacroAutoCompleteOption extends AutoCompleteOption {
+    /**@type {string}*/ fullName;
+    /**@type {string}*/ description;
+
+
+    constructor(name, fullName, description) {
+        super(name, '{}');
+        this.fullName = fullName;
+        this.description = description;
+        this.nameOffset = 2;
+    }
+
+
+    renderItem() {
+        let li;
+        li = this.makeItem(`${this.fullName}`, '{}', true, [], [], null, this.description);
+        li.setAttribute('data-name', this.name);
+        li.setAttribute('data-option-type', 'macro');
+        return li;
+    }
+
+
+    renderDetails() {
+        const frag = document.createDocumentFragment();
+        const specs = document.createElement('div'); {
+            specs.classList.add('specs');
+            const name = document.createElement('div'); {
+                name.classList.add('name');
+                name.classList.add('monospace');
+                name.textContent = this.fullName;
+                specs.append(name);
+            }
+            frag.append(specs);
+        }
+        const help = document.createElement('span'); {
+            help.classList.add('help');
+            help.innerHTML = this.description;
+            frag.append(help);
+        }
+        return frag;
+    }
+}
diff --git a/public/scripts/backgrounds.js b/public/scripts/backgrounds.js
index 494bd18b2..8a3979c45 100644
--- a/public/scripts/backgrounds.js
+++ b/public/scripts/backgrounds.js
@@ -1,6 +1,7 @@
 import { callPopup, chat_metadata, eventSource, event_types, generateQuietPrompt, getCurrentChatId, getRequestHeaders, getThumbnailUrl, saveSettingsDebounced } from '../script.js';
 import { saveMetadataDebounced } from './extensions.js';
-import { registerSlashCommand } from './slash-commands.js';
+import { SlashCommand } from './slash-commands/SlashCommand.js';
+import { SlashCommandParser } from './slash-commands/SlashCommandParser.js';
 import { flashHighlight, stringFormat } from './utils.js';
 
 const BG_METADATA_KEY = 'custom_background';
@@ -480,7 +481,20 @@ export function initBackgrounds() {
     $('#auto_background').on('click', autoBackgroundCommand);
     $('#add_bg_button').on('change', onBackgroundUploadSelected);
     $('#bg-filter').on('input', onBackgroundFilterInput);
-    registerSlashCommand('lockbg', onLockBackgroundClick, ['bglock'], '– locks a background for the currently selected chat', true, true);
-    registerSlashCommand('unlockbg', onUnlockBackgroundClick, ['bgunlock'], '– unlocks a background for the currently selected chat', true, true);
-    registerSlashCommand('autobg', autoBackgroundCommand, ['bgauto'], '– automatically changes the background based on the chat context using the AI request prompt', true, true);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'lockbg',
+        callback: onLockBackgroundClick,
+        aliases: ['bglock'],
+        helpString: 'Locks a background for the currently selected chat',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'unlockbg',
+        callback: onUnlockBackgroundClick,
+        aliases: ['bgunlock'],
+        helpString: 'Unlocks a background for the currently selected chat',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'autobg',
+        callback: autoBackgroundCommand,
+        aliases: ['bgauto'],
+        helpString: 'Automatically changes the background based on the chat context using the AI request prompt',
+    }));
+
 }
diff --git a/public/scripts/extensions/attachments/index.js b/public/scripts/extensions/attachments/index.js
index ab3db9419..7c9a7a824 100644
--- a/public/scripts/extensions/attachments/index.js
+++ b/public/scripts/extensions/attachments/index.js
@@ -1,9 +1,15 @@
 import { renderExtensionTemplateAsync } from '../../extensions.js';
-import { registerSlashCommand } from '../../slash-commands.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
 
 jQuery(async () => {
     const buttons = await renderExtensionTemplateAsync('attachments', 'buttons', {});
     $('#extensionsMenu').prepend(buttons);
 
-    registerSlashCommand('db', () => document.getElementById('manageAttachments')?.click(), ['databank', 'data-bank'], '– open the data bank', true, true);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'db',
+        callback: () => document.getElementById('manageAttachments')?.click(),
+        aliases: ['databank', 'data-bank'],
+        helpString: 'Open the data bank',
+    }));
+
 });
diff --git a/public/scripts/extensions/caption/index.js b/public/scripts/extensions/caption/index.js
index 572d02217..98ac565a2 100644
--- a/public/scripts/extensions/caption/index.js
+++ b/public/scripts/extensions/caption/index.js
@@ -5,7 +5,9 @@ import { getMessageTimeStamp } from '../../RossAscends-mods.js';
 import { SECRET_KEYS, secret_state } from '../../secrets.js';
 import { getMultimodalCaption } from '../shared.js';
 import { textgen_types, textgenerationwebui_settings } from '../../textgen-settings.js';
-import { registerSlashCommand } from '../../slash-commands.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
 export { MODULE_NAME };
 
 const MODULE_NAME = 'caption';
@@ -254,6 +256,19 @@ async function onSelectImage(e, prompt, quiet) {
         return '';
     }
 
+    const caption = await getCaptionForFile(file, prompt, quiet);
+    form && form.reset();
+    return caption;
+}
+
+/**
+ * Gets a caption for an image file.
+ * @param {File} file Input file
+ * @param {string} prompt Caption prompt
+ * @param {boolean} quiet Suppresses sending a message
+ * @returns {Promise<string>} Generated caption
+ */
+async function getCaptionForFile(file, prompt, quiet) {
     try {
         setSpinnerIcon();
         const context = getContext();
@@ -273,7 +288,6 @@ async function onSelectImage(e, prompt, quiet) {
         return '';
     }
     finally {
-        form && form.reset();
         setImageIcon();
     }
 }
@@ -288,9 +302,26 @@ function onRefineModeInput() {
  * @param {object} args Named parameters
  * @param {string} prompt Caption prompt
  */
-function captionCommandCallback(args, prompt) {
+async function captionCommandCallback(args, prompt) {
+    const quiet = isTrueBoolean(args?.quiet);
+    const id = args?.id;
+
+    if (!isNaN(Number(id))) {
+        const message = getContext().chat[id];
+        if (message?.extra?.image) {
+            try {
+                const fetchResult = await fetch(message.extra.image);
+                const blob = await fetchResult.blob();
+                const file = new File([blob], 'image.jpg', { type: blob.type });
+                return await getCaptionForFile(file, prompt, quiet);
+            } catch (error) {
+                toastr.error('Failed to get image from the message. Make sure the image is accessible.');
+                return '';
+            }
+        }
+    }
+
     return new Promise(resolve => {
-        const quiet = isTrueBoolean(args?.quiet);
         const input = document.createElement('input');
         input.type = 'file';
         input.accept = 'image/*';
@@ -492,5 +523,35 @@ jQuery(function () {
         saveSettingsDebounced();
     });
 
-    registerSlashCommand('caption', captionCommandCallback, [], '<span class="monospace">quiet=true/false [prompt]</span> - caption an image with an optional prompt and passes the caption down the pipe. Only multimodal sources support custom prompts. Set the "quiet" argument to true to suppress sending a captioned message, default: false.', true, true);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'caption',
+        callback: captionCommandCallback,
+        returns: 'caption',
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'quiet', 'suppress sending a captioned message', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false', ['true', 'false'],
+            ),
+            new SlashCommandNamedArgument(
+                'id', 'get image from a message with this ID', [ARGUMENT_TYPE.NUMBER], false, false,
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'prompt', [ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        helpString: `
+            <div>
+                Caption an image with an optional prompt and passes the caption down the pipe.
+            </div>
+            <div>
+                Only multimodal sources support custom prompts.
+            </div>
+            <div>
+                Provide a message ID to get an image from a message instead of uploading one.
+            </div>
+            <div>
+                Set the "quiet" argument to true to suppress sending a captioned message, default: false.
+            </div>
+        `,
+    }));
 });
diff --git a/public/scripts/extensions/expressions/index.js b/public/scripts/extensions/expressions/index.js
index 263947d30..2cca2ea70 100644
--- a/public/scripts/extensions/expressions/index.js
+++ b/public/scripts/extensions/expressions/index.js
@@ -2,11 +2,13 @@ import { callPopup, eventSource, event_types, generateQuietPrompt, getRequestHea
 import { dragElement, isMobile } from '../../RossAscends-mods.js';
 import { getContext, getApiUrl, modules, extension_settings, ModuleWorkerWrapper, doExtrasFetch, renderExtensionTemplateAsync } from '../../extensions.js';
 import { loadMovingUIState, power_user } from '../../power-user.js';
-import { registerSlashCommand } from '../../slash-commands.js';
 import { onlyUnique, debounce, getCharaFilename, trimToEndSentence, trimToStartSentence } from '../../utils.js';
 import { hideMutedSprites } from '../../group-chats.js';
 import { isJsonSchemaSupported } from '../../textgen-settings.js';
 import { debounce_timeout } from '../../constants.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument } from '../../slash-commands/SlashCommandArgument.js';
 export { MODULE_NAME };
 
 const MODULE_NAME = 'expressions';
@@ -906,8 +908,10 @@ async function setSpriteSetCommand(_, folder) {
 
     $('#expression_override').val(folder.trim());
     onClickExpressionOverrideButton();
-    removeExpression();
-    moduleWorker();
+    // removeExpression();
+    // moduleWorker();
+    const vnMode = isVisualNovelMode();
+    await sendExpressionCall(folder, lastExpression, true, vnMode);
 }
 
 async function classifyCommand(_, text) {
@@ -1967,9 +1971,61 @@ function migrateSettings() {
     });
     eventSource.on(event_types.MOVABLE_PANELS_RESET, updateVisualNovelModeDebounced);
     eventSource.on(event_types.GROUP_UPDATED, updateVisualNovelModeDebounced);
-    registerSlashCommand('sprite', setSpriteSlashCommand, ['emote'], '<span class="monospace">(spriteId)</span> – force sets the sprite for the current character', true, true);
-    registerSlashCommand('spriteoverride', setSpriteSetCommand, ['costume'], '<span class="monospace">(optional folder)</span> – sets an override sprite folder for the current character. If the name starts with a slash or a backslash, selects a sub-folder in the character-named folder. Empty value to reset to default.', true, true);
-    registerSlashCommand('lastsprite', (_, value) => lastExpression[value.trim()] ?? '', [], '<span class="monospace">(charName)</span> – Returns the last set sprite / expression for the named character.', true, true);
-    registerSlashCommand('th', toggleTalkingHeadCommand, ['talkinghead'], '– Character Expressions: toggles <i>Image Type - talkinghead (extras)</i> on/off.', true, true);
-    registerSlashCommand('classify', classifyCommand, [], '<span class="monospace">(text)</span> – performs an emotion classification of the given text and returns a label.', true, true);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'sprite',
+        aliases: ['emote'],
+        callback: setSpriteSlashCommand,
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'spriteId', [ARGUMENT_TYPE.STRING], true,
+            ),
+        ],
+        helpString: 'Force sets the sprite for the current character.',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'spriteoverride',
+        aliases: ['costume'],
+        callback: setSpriteSetCommand,
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'optional folder', [ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        helpString: 'Sets an override sprite folder for the current character. If the name starts with a slash or a backslash, selects a sub-folder in the character-named folder. Empty value to reset to default.',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'lastsprite',
+        callback: (_, value) => lastExpression[value.trim()] ?? '',
+        returns: 'sprite',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'charName', [ARGUMENT_TYPE.STRING], true,
+            ),
+        ],
+        helpString: 'Returns the last set sprite / expression for the named character.',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'th',
+        callback: toggleTalkingHeadCommand,
+        aliases: ['talkinghead'],
+        helpString: 'Character Expressions: toggles <i>Image Type - talkinghead (extras)</i> on/off.',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'classify',
+        callback: classifyCommand,
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'text', [ARGUMENT_TYPE.STRING], true,
+            ),
+        ],
+        returns: 'emotion classification label for the given text',
+        helpString: `
+            <div>
+                Performs an emotion classification of the given text and returns a label.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code>/classify I am so happy today!</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
 })();
diff --git a/public/scripts/extensions/gallery/index.js b/public/scripts/extensions/gallery/index.js
index 06d62d0a4..dbb40363a 100644
--- a/public/scripts/extensions/gallery/index.js
+++ b/public/scripts/extensions/gallery/index.js
@@ -8,7 +8,9 @@ import { groups, selected_group } from '../../group-chats.js';
 import { loadFileToDocument, delay } from '../../utils.js';
 import { loadMovingUIState } from '../../power-user.js';
 import { dragElement } from '../../RossAscends-mods.js';
-import { registerSlashCommand } from '../../slash-commands.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
 
 const extensionName = 'gallery';
 const extensionFolderPath = `scripts/extensions/${extensionName}/`;
@@ -415,8 +417,26 @@ function viewWithDragbox(items) {
 
 
 // Registers a simple command for opening the char gallery.
-registerSlashCommand('show-gallery', showGalleryCommand, ['sg'], '– shows the gallery', true, true);
-registerSlashCommand('list-gallery', listGalleryCommand, ['lg'], '<span class="monospace">[optional char=charName] [optional group=groupName]</span> – list images in the gallery of the current char / group or a specified char / group', true, true);
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'show-gallery',
+    aliases: ['sg'],
+    callback: showGalleryCommand,
+    helpString: 'Shows the gallery.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'list-gallery',
+    aliases: ['lg'],
+    callback: listGalleryCommand,
+    returns: 'list of images',
+    namedArgumentList: [
+        new SlashCommandNamedArgument(
+            'char', 'character name', [ARGUMENT_TYPE.STRING], false,
+        ),
+        new SlashCommandNamedArgument(
+            'group', 'group name', [ARGUMENT_TYPE.STRING], false,
+        ),
+    ],
+    helpString: 'List images in the gallery of the current char / group or a specified char / group.',
+}));
+
 
 function showGalleryCommand(args) {
     showCharGallery();
diff --git a/public/scripts/extensions/memory/index.js b/public/scripts/extensions/memory/index.js
index 3cd1d97e5..f5be30b03 100644
--- a/public/scripts/extensions/memory/index.js
+++ b/public/scripts/extensions/memory/index.js
@@ -16,11 +16,14 @@ import {
     getMaxContextSize,
 } from '../../../script.js';
 import { is_group_generating, selected_group } from '../../group-chats.js';
-import { registerSlashCommand } from '../../slash-commands.js';
 import { loadMovingUIState } from '../../power-user.js';
 import { dragElement } from '../../RossAscends-mods.js';
 import { getTextTokens, getTokenCountAsync, tokenizers } from '../../tokenizers.js';
 import { debounce_timeout } from '../../constants.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
+import { resolveVariable } from '../../variables.js';
 export { MODULE_NAME };
 
 const MODULE_NAME = '1_memory';
@@ -416,7 +419,7 @@ async function forceSummarizeChat() {
     console.log(`Skipping WIAN? ${skipWIAN}`);
     if (!context.chatId) {
         toastr.warning('No chat selected');
-        return;
+        return '';
     }
 
     toastr.info('Summarizing chat...', 'Please wait');
@@ -424,7 +427,42 @@ async function forceSummarizeChat() {
 
     if (!value) {
         toastr.warning('Failed to summarize chat');
-        return;
+        return '';
+    }
+
+    return value;
+}
+
+/**
+ * Callback for the summarize command.
+ * @param {object} args Command arguments
+ * @param {string} text Text to summarize
+ */
+async function summarizeCallback(args, text) {
+    text = text.trim();
+
+    // Using forceSummarizeChat to summarize the current chat
+    if (!text) {
+        return await forceSummarizeChat();
+    }
+
+    const source = args.source || extension_settings.memory.source;
+    const prompt = substituteParams((resolveVariable(args.prompt) || extension_settings.memory.prompt)?.replace(/{{words}}/gi, extension_settings.memory.promptWords));
+
+    try {
+        switch (source) {
+            case summary_sources.extras:
+                return await callExtrasSummarizeAPI(text);
+            case summary_sources.main:
+                return await generateRaw(text, '', false, false, prompt, extension_settings.memory.overrideResponseLength);
+            default:
+                toastr.warning('Invalid summarization source specified');
+                return '';
+        }
+    } catch (error) {
+        toastr.error(String(error), 'Failed to summarize text');
+        console.log(error);
+        return '';
     }
 }
 
@@ -668,37 +706,18 @@ async function summarizeChatExtras(context) {
     // perform the summarization API call
     try {
         inApiCall = true;
-        const url = new URL(getApiUrl());
-        url.pathname = '/api/summarize';
+        const summary = await callExtrasSummarizeAPI(resultingString);
+        const newContext = getContext();
 
-        const apiResult = await doExtrasFetch(url, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Bypass-Tunnel-Reminder': 'bypass',
-            },
-            body: JSON.stringify({
-                text: resultingString,
-                params: {},
-            }),
-        });
-
-        if (apiResult.ok) {
-            const data = await apiResult.json();
-            const summary = data.summary;
-
-            const newContext = getContext();
-
-            // something changed during summarization request
-            if (newContext.groupId !== context.groupId
-                || newContext.chatId !== context.chatId
-                || (!newContext.groupId && (newContext.characterId !== context.characterId))) {
-                console.log('Context changed, summary discarded');
-                return;
-            }
-
-            setMemoryContext(summary, true);
+        // something changed during summarization request
+        if (newContext.groupId !== context.groupId
+            || newContext.chatId !== context.chatId
+            || (!newContext.groupId && (newContext.characterId !== context.characterId))) {
+            console.log('Context changed, summary discarded');
+            return;
         }
+
+        setMemoryContext(summary, true);
     }
     catch (error) {
         console.log(error);
@@ -708,6 +727,40 @@ async function summarizeChatExtras(context) {
     }
 }
 
+/**
+ * Call the Extras API to summarize the provided text.
+ * @param {string} text Text to summarize
+ * @returns {Promise<string>} Summarized text
+ */
+async function callExtrasSummarizeAPI(text) {
+    if (!modules.includes('summarize')) {
+        throw new Error('Summarize module is not enabled in Extras API');
+    }
+
+    const url = new URL(getApiUrl());
+    url.pathname = '/api/summarize';
+
+    const apiResult = await doExtrasFetch(url, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Bypass-Tunnel-Reminder': 'bypass',
+        },
+        body: JSON.stringify({
+            text: text,
+            params: {},
+        }),
+    });
+
+    if (apiResult.ok) {
+        const data = await apiResult.json();
+        const summary = data.summary;
+        return summary;
+    }
+
+    throw new Error('Extras API call failed');
+}
+
 function onMemoryRestoreClick() {
     const context = getContext();
     const content = $('#memory_contents').val();
@@ -865,5 +918,16 @@ jQuery(async function () {
     eventSource.on(event_types.MESSAGE_EDITED, onChatEvent);
     eventSource.on(event_types.MESSAGE_SWIPED, onChatEvent);
     eventSource.on(event_types.CHAT_CHANGED, onChatEvent);
-    registerSlashCommand('summarize', forceSummarizeChat, [], '– forces the summarization of the current chat using the Main API', true, true);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'summarize',
+        callback: summarizeCallback,
+        namedArgumentList: [
+            new SlashCommandNamedArgument('source', 'API to use for summarization', [ARGUMENT_TYPE.STRING], false, false, '', ['main', 'extras']),
+            new SlashCommandNamedArgument('prompt', 'prompt to use for summarization', [ARGUMENT_TYPE.STRING, ARGUMENT_TYPE.VARIABLE_NAME], false, false, ''),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument('text to summarize', [ARGUMENT_TYPE.STRING], false, false, ''),
+        ],
+        helpString: 'Summarizes the given text. If no text is provided, the current chat will be summarized. Can specify the source and the prompt to use.',
+    }));
 });
diff --git a/public/scripts/extensions/quick-reply/html/qrEditor.html b/public/scripts/extensions/quick-reply/html/qrEditor.html
index 8ed195520..40b4e8db5 100644
--- a/public/scripts/extensions/quick-reply/html/qrEditor.html
+++ b/public/scripts/extensions/quick-reply/html/qrEditor.html
@@ -30,7 +30,10 @@
 					<span>Ctrl+Enter to execute</span>
 				</label>
 			</div>
-			<textarea class="monospace" id="qr--modal-message"></textarea>
+			<div id="qr--modal-messageHolder">
+				<pre id="qr--modal-messageSyntax"><code id="qr--modal-messageSyntaxInner" class="hljs language-stscript"></code></pre>
+				<textarea class="monospace" id="qr--modal-message" spellcheck="false"></textarea>
+			</div>
 		</div>
 	</div>
 
@@ -94,14 +97,27 @@
 
 
 		<h3>Testing</h3>
-		<div id="qr--modal-execute" class="menu_button" title="Execute the quick reply now">
-			<i class="fa-solid fa-play"></i>
-			Execute
+		<div id="qr--modal-executeButtons">
+			<div id="qr--modal-execute" class="qr--modal-executeButton menu_button" title="Execute the quick reply now">
+				<i class="fa-solid fa-play"></i>
+				Execute
+			</div>
+			<div id="qr--modal-pause" class="qr--modal-executeButton menu_button" title="Pause / continue execution">
+				<span class="qr--modal-executeComboIcon">
+					<i class="fa-solid fa-play"></i>
+					<i class="fa-solid fa-pause"></i>
+				</span>
+			</div>
+			<div id="qr--modal-stop" class="qr--modal-executeButton menu_button" title="Abort execution">
+				<i class="fa-solid fa-stop"></i>
+			</div>
 		</div>
+		<div id="qr--modal-executeProgress"></div>
 		<label class="checkbox_label">
 			<input type="checkbox" id="qr--modal-executeHide">
 			<span> Hide editor while executing</span>
 		</label>
 		<div id="qr--modal-executeErrors"></div>
+		<div id="qr--modal-executeResult"></div>
 	</div>
 </div>
diff --git a/public/scripts/extensions/quick-reply/index.js b/public/scripts/extensions/quick-reply/index.js
index 74cdbeb78..019a8cec3 100644
--- a/public/scripts/extensions/quick-reply/index.js
+++ b/public/scripts/extensions/quick-reply/index.js
@@ -183,14 +183,16 @@ const init = async () => {
             ;
         if (!qr) {
             let [setName, ...qrName] = name.split('.');
-            name = qrName.join('.');
+            qrName = qrName.join('.');
             let qrs = QuickReplySet.get(setName);
             if (qrs) {
-                qr = qrs.qrList.find(it=>it.label == name);
+                qr = qrs.qrList.find(it=>it.label == qrName);
             }
         }
         if (qr && qr.onExecute) {
-            return await qr.execute(args);
+            return await qr.execute(args, false, true);
+        } else {
+            throw new Error(`No Quick Reply found for "${name}".`);
         }
     };
 
diff --git a/public/scripts/extensions/quick-reply/src/QuickReply.js b/public/scripts/extensions/quick-reply/src/QuickReply.js
index 33a1d05f6..fed9bc1cf 100644
--- a/public/scripts/extensions/quick-reply/src/QuickReply.js
+++ b/public/scripts/extensions/quick-reply/src/QuickReply.js
@@ -1,5 +1,9 @@
 import { POPUP_TYPE, Popup } from '../../../popup.js';
-import { getSortableDelay } from '../../../utils.js';
+import { setSlashCommandAutoComplete } from '../../../slash-commands.js';
+import { SlashCommandAbortController } from '../../../slash-commands/SlashCommandAbortController.js';
+import { SlashCommandParserError } from '../../../slash-commands/SlashCommandParserError.js';
+import { SlashCommandScope } from '../../../slash-commands/SlashCommandScope.js';
+import { debounce, getSortableDelay } from '../../../utils.js';
 import { log, warn } from '../index.js';
 import { QuickReplyContextLink } from './QuickReplyContextLink.js';
 import { QuickReplySet } from './QuickReplySet.js';
@@ -47,9 +51,14 @@ export class QuickReply {
     /**@type {Popup}*/ editorPopup;
 
     /**@type {HTMLElement}*/ editorExecuteBtn;
+    /**@type {HTMLElement}*/ editorExecuteBtnPause;
+    /**@type {HTMLElement}*/ editorExecuteBtnStop;
+    /**@type {HTMLElement}*/ editorExecuteProgress;
     /**@type {HTMLElement}*/ editorExecuteErrors;
+    /**@type {HTMLElement}*/ editorExecuteResult;
     /**@type {HTMLInputElement}*/ editorExecuteHide;
     /**@type {Promise}*/ editorExecutePromise;
+    /**@type {SlashCommandAbortController}*/ abortController;
 
 
     get hasContext() {
@@ -225,15 +234,43 @@ export class QuickReply {
             const updateWrap = () => {
                 if (wrap.checked) {
                     message.style.whiteSpace = 'pre-wrap';
+                    messageSyntaxInner.style.whiteSpace = 'pre-wrap';
                 } else {
                     message.style.whiteSpace = 'pre';
+                    messageSyntaxInner.style.whiteSpace = 'pre';
                 }
+                updateScrollDebounced();
+            };
+            const updateScroll = (evt) => {
+                let left = message.scrollLeft;
+                let top = message.scrollTop;
+                if (evt) {
+                    evt.preventDefault();
+                    left = message.scrollLeft + evt.deltaX;
+                    top = message.scrollTop + evt.deltaY;
+                    message.scrollTo({
+                        behavior: 'instant',
+                        left,
+                        top,
+                    });
+                }
+                messageSyntaxInner.scrollTo({
+                    behavior: 'instant',
+                    left,
+                    top,
+                });
+            };
+            const updateScrollDebounced = updateScroll;
+            const updateSyntax = ()=>{
+                messageSyntaxInner.innerHTML = hljs.highlight(`${message.value}${message.value.slice(-1) == '\n' ? ' ' : ''}`, { language:'stscript', ignoreIllegals:true })?.value;
             };
             /**@type {HTMLInputElement}*/
             const tabSize = dom.querySelector('#qr--modal-tabSize');
             tabSize.value = JSON.parse(localStorage.getItem('qr--tabSize') ?? '4');
             const updateTabSize = () => {
                 message.style.tabSize = tabSize.value;
+                messageSyntaxInner.style.tabSize = tabSize.value;
+                updateScrollDebounced();
             };
             tabSize.addEventListener('change', () => {
                 localStorage.setItem('qr--tabSize', JSON.stringify(Number(tabSize.value)));
@@ -247,14 +284,15 @@ export class QuickReply {
             });
             /**@type {HTMLTextAreaElement}*/
             const message = dom.querySelector('#qr--modal-message');
-            updateWrap();
-            updateTabSize();
             message.value = this.message;
             message.addEventListener('input', () => {
+                updateSyntax();
                 this.updateMessage(message.value);
+                updateScrollDebounced();
             });
+            setSlashCommandAutoComplete(message, true);
             //TODO move tab support for textarea into its own helper(?) and use for both this and .editor_maximize
-            message.addEventListener('keydown', (evt) => {
+            message.addEventListener('keydown', async(evt) => {
                 if (evt.key == 'Tab' && !evt.shiftKey && !evt.ctrlKey && !evt.altKey) {
                     evt.preventDefault();
                     const start = message.selectionStart;
@@ -265,12 +303,12 @@ export class QuickReply {
                         message.value = `${message.value.substring(0, lineStart)}${message.value.substring(lineStart, end).replace(/\n/g, '\n\t')}${message.value.substring(end)}`;
                         message.selectionStart = start + 1;
                         message.selectionEnd = end + count;
-                        this.updateMessage(message.value);
+                        updateSyntax();
                     } else {
                         message.value = `${message.value.substring(0, start)}\t${message.value.substring(end)}`;
                         message.selectionStart = start + 1;
                         message.selectionEnd = end + 1;
-                        this.updateMessage(message.value);
+                        updateSyntax();
                     }
                 } else if (evt.key == 'Tab' && evt.shiftKey && !evt.ctrlKey && !evt.altKey) {
                     evt.preventDefault();
@@ -281,15 +319,37 @@ export class QuickReply {
                     message.value = `${message.value.substring(0, lineStart)}${message.value.substring(lineStart, end).replace(/\n\t/g, '\n')}${message.value.substring(end)}`;
                     message.selectionStart = start - 1;
                     message.selectionEnd = end - count;
-                    this.updateMessage(message.value);
+                    updateSyntax();
                 } else if (evt.key == 'Enter' && evt.ctrlKey && !evt.shiftKey && !evt.altKey) {
                     evt.stopPropagation();
                     evt.preventDefault();
                     if (executeShortcut.checked) {
-                        this.executeFromEditor();
+                        const selectionStart = message.selectionStart;
+                        const selectionEnd = message.selectionEnd;
+                        message.blur();
+                        await this.executeFromEditor();
+                        if (document.activeElement != message) {
+                            message.focus();
+                            message.selectionStart = selectionStart;
+                            message.selectionEnd = selectionEnd;
+                        }
                     }
                 }
             });
+            message.addEventListener('wheel', (evt)=>{
+                updateScrollDebounced(evt);
+            });
+            message.addEventListener('scroll', (evt)=>{
+                updateScrollDebounced();
+            });
+            message.style.color = 'transparent';
+            message.style.background = 'transparent';
+            message.style.setProperty('text-shadow', 'none', 'important');
+            /**@type {HTMLElement}*/
+            const messageSyntaxInner = dom.querySelector('#qr--modal-messageSyntaxInner');
+            updateSyntax();
+            updateWrap();
+            updateTabSize();
 
             // context menu
             /**@type {HTMLTemplateElement}*/
@@ -414,9 +474,15 @@ export class QuickReply {
                 this.updateContext();
             });
 
+            /**@type {HTMLElement}*/
+            const executeProgress = dom.querySelector('#qr--modal-executeProgress');
+            this.editorExecuteProgress = executeProgress;
             /**@type {HTMLElement}*/
             const executeErrors = dom.querySelector('#qr--modal-executeErrors');
             this.editorExecuteErrors = executeErrors;
+            /**@type {HTMLElement}*/
+            const executeResult = dom.querySelector('#qr--modal-executeResult');
+            this.editorExecuteResult = executeResult;
             /**@type {HTMLInputElement}*/
             const executeHide = dom.querySelector('#qr--modal-executeHide');
             this.editorExecuteHide = executeHide;
@@ -426,6 +492,26 @@ export class QuickReply {
             executeBtn.addEventListener('click', async()=>{
                 await this.executeFromEditor();
             });
+            /**@type {HTMLElement}*/
+            const executeBtnPause = dom.querySelector('#qr--modal-pause');
+            this.editorExecuteBtnPause = executeBtnPause;
+            executeBtnPause.addEventListener('click', async()=>{
+                if (this.abortController) {
+                    if (this.abortController.signal.paused) {
+                        this.abortController.continue('Continue button clicked');
+                        this.editorExecuteProgress.classList.remove('qr--paused');
+                    } else {
+                        this.abortController.pause('Pause button clicked');
+                        this.editorExecuteProgress.classList.add('qr--paused');
+                    }
+                }
+            });
+            /**@type {HTMLElement}*/
+            const executeBtnStop = dom.querySelector('#qr--modal-stop');
+            this.editorExecuteBtnStop = executeBtnStop;
+            executeBtnStop.addEventListener('click', async()=>{
+                this.abortController?.abort('Stop button clicked');
+            });
 
             await popupResult;
         } else {
@@ -436,21 +522,54 @@ export class QuickReply {
     async executeFromEditor() {
         if (this.editorExecutePromise) return;
         this.editorExecuteBtn.classList.add('qr--busy');
+        this.editorExecuteProgress.style.setProperty('--prog', '0');
+        this.editorExecuteErrors.classList.remove('qr--hasErrors');
+        this.editorExecuteResult.classList.remove('qr--hasResult');
+        this.editorExecuteProgress.classList.remove('qr--error');
+        this.editorExecuteProgress.classList.remove('qr--success');
+        this.editorExecuteProgress.classList.remove('qr--paused');
+        this.editorExecuteProgress.classList.remove('qr--aborted');
         this.editorExecuteErrors.innerHTML = '';
+        this.editorExecuteResult.innerHTML = '';
         if (this.editorExecuteHide.checked) {
             this.editorPopup.dom.classList.add('qr--hide');
         }
         try {
-            this.editorExecutePromise = this.execute();
-            await this.editorExecutePromise;
+            this.editorExecutePromise = this.execute({}, true);
+            const result = await this.editorExecutePromise;
+            if (this.abortController?.signal?.aborted) {
+                this.editorExecuteProgress.classList.add('qr--aborted');
+            } else {
+                this.editorExecuteResult.textContent = result?.toString();
+                this.editorExecuteResult.classList.add('qr--hasResult');
+                this.editorExecuteProgress.classList.add('qr--success');
+            }
+            this.editorExecuteProgress.classList.remove('qr--paused');
         } catch (ex) {
-            this.editorExecuteErrors.textContent = ex.message;
+            this.editorExecuteErrors.classList.add('qr--hasErrors');
+            this.editorExecuteProgress.classList.add('qr--error');
+            this.editorExecuteProgress.classList.remove('qr--paused');
+            if (ex instanceof SlashCommandParserError) {
+                this.editorExecuteErrors.innerHTML = `
+                    <div>${ex.message}</div>
+                    <div>Line: ${ex.line} Column: ${ex.column}</div>
+                    <pre style="text-align:left;">${ex.hint}</pre>
+                `;
+            } else {
+                this.editorExecuteErrors.innerHTML = `
+                    <div>${ex.message}</div>
+                `;
+            }
         }
         this.editorExecutePromise = null;
         this.editorExecuteBtn.classList.remove('qr--busy');
         this.editorPopup.dom.classList.remove('qr--hide');
     }
 
+    updateEditorProgress(done, total) {
+        this.editorExecuteProgress.style.setProperty('--prog', `${done / total * 100}`);
+    }
+
 
 
 
@@ -526,12 +645,22 @@ export class QuickReply {
     }
 
 
-    async execute(args = {}) {
+    async execute(args = {}, isEditor = false, isRun = false) {
         if (this.message?.length > 0 && this.onExecute) {
-            const message = this.message.replace(/\{\{arg::([^}]+)\}\}/g, (_, key) => {
-                return args[key] ?? '';
+            const scope = new SlashCommandScope();
+            for (const key of Object.keys(args)) {
+                scope.setMacro(`arg::${key}`, args[key]);
+            }
+            if (isEditor) {
+                this.abortController = new SlashCommandAbortController();
+            }
+            return await this.onExecute(this, {
+                message:this.message,
+                isAutoExecute: args.isAutoExecute ?? false,
+                isEditor,
+                isRun,
+                scope,
             });
-            return await this.onExecute(this, message, args.isAutoExecute ?? false);
         }
     }
 
diff --git a/public/scripts/extensions/quick-reply/src/QuickReplySet.js b/public/scripts/extensions/quick-reply/src/QuickReplySet.js
index 848466452..106084081 100644
--- a/public/scripts/extensions/quick-reply/src/QuickReplySet.js
+++ b/public/scripts/extensions/quick-reply/src/QuickReplySet.js
@@ -1,5 +1,6 @@
 import { getRequestHeaders, substituteParams } from '../../../../script.js';
-import { executeSlashCommands } from '../../../slash-commands.js';
+import { executeSlashCommands, executeSlashCommandsOnChatInput, executeSlashCommandsWithOptions } from '../../../slash-commands.js';
+import { SlashCommandScope } from '../../../slash-commands/SlashCommandScope.js';
 import { debounceAsync, warn } from '../index.js';
 import { QuickReply } from './QuickReply.js';
 
@@ -100,15 +101,29 @@ export class QuickReplySet {
 
 
     /**
-     * @param {QuickReply} qr
-     * @param {String} [message] - optional altered message to be used
+     *
+     * @param {QuickReply} qr The QR to execute.
+     * @param {object} options
+     * @param {string} [options.message] (null) altered message to be used
+     * @param {boolean} [options.isAutoExecute] (false) whether the execution is triggered by auto execute
+     * @param {boolean} [options.isEditor] (false) whether the execution is triggered by the QR editor
+     * @param {boolean} [options.isRun] (false) whether the execution is triggered by /run or /: (window.executeQuickReplyByName)
+     * @param {SlashCommandScope} [options.scope] (null) scope to be used when running the command
+     * @returns
      */
-    async execute(qr, message = null, isAutoExecute = false) {
+    async executeWithOptions(qr, options = {}) {
+        options = Object.assign({
+            message:null,
+            isAutoExecute:false,
+            isEditor:false,
+            isRun:false,
+            scope:null,
+        }, options);
         /**@type {HTMLTextAreaElement}*/
         const ta = document.querySelector('#send_textarea');
-        const finalMessage = message ?? qr.message;
+        const finalMessage = options.message ?? qr.message;
         let input = ta.value;
-        if (!isAutoExecute && this.injectInput && input.length > 0) {
+        if (!options.isAutoExecute && !options.isEditor && !options.isRun && this.injectInput && input.length > 0) {
             if (this.placeBeforeInput) {
                 input = `${finalMessage} ${input}`;
             } else {
@@ -119,7 +134,24 @@ export class QuickReplySet {
         }
 
         if (input[0] == '/' && !this.disableSend) {
-            const result = await executeSlashCommands(input);
+            let result;
+            if (options.isAutoExecute || options.isRun) {
+                result = await executeSlashCommandsWithOptions(input, {
+                    handleParserErrors: true,
+                    scope: options.scope,
+                });
+            } else if (options.isEditor) {
+                result = await executeSlashCommandsWithOptions(input, {
+                    handleParserErrors: false,
+                    scope: options.scope,
+                    abortController: qr.abortController,
+                    onProgress: (done, total) => qr.updateEditorProgress(done, total),
+                });
+            } else {
+                result = await executeSlashCommandsOnChatInput(input, {
+                    scope: options.scope,
+                });
+            }
             return typeof result === 'object' ? result?.pipe : '';
         }
 
@@ -131,6 +163,18 @@ export class QuickReplySet {
             document.querySelector('#send_but').click();
         }
     }
+    /**
+     * @param {QuickReply} qr
+     * @param {String} [message] - optional altered message to be used
+     * @param {SlashCommandScope} [scope] - optional scope to be used when running the command
+     */
+    async execute(qr, message = null, isAutoExecute = false, scope = null) {
+        return this.executeWithOptions(qr, {
+            message,
+            isAutoExecute,
+            scope,
+        });
+    }
 
 
 
@@ -152,7 +196,7 @@ export class QuickReplySet {
     }
 
     hookQuickReply(qr) {
-        qr.onExecute = (_, message, isAutoExecute)=>this.execute(qr, message, isAutoExecute);
+        qr.onExecute = (_, options)=>this.executeWithOptions(qr, options);
         qr.onDelete = ()=>this.removeQuickReply(qr);
         qr.onUpdate = ()=>this.save();
     }
diff --git a/public/scripts/extensions/quick-reply/src/SlashCommandHandler.js b/public/scripts/extensions/quick-reply/src/SlashCommandHandler.js
index 45c120dcf..f5877086d 100644
--- a/public/scripts/extensions/quick-reply/src/SlashCommandHandler.js
+++ b/public/scripts/extensions/quick-reply/src/SlashCommandHandler.js
@@ -1,4 +1,6 @@
-import { registerSlashCommand } from '../../../slash-commands.js';
+import { SlashCommand } from '../../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../../slash-commands/SlashCommandArgument.js';
+import { SlashCommandParser } from '../../../slash-commands/SlashCommandParser.js';
 import { isTrueBoolean } from '../../../utils.js';
 // eslint-disable-next-line no-unused-vars
 import { QuickReplyApi } from '../api/QuickReplyApi.js';
@@ -17,46 +19,331 @@ export class SlashCommandHandler {
 
 
     init() {
-        registerSlashCommand('qr', (_, value) => this.executeQuickReplyByIndex(Number(value)), [], '<span class="monospace">(number)</span> – activates the specified Quick Reply', true, true);
-        registerSlashCommand('qrset', ()=>toastr.warning('The command /qrset has been deprecated. Use /qr-set, /qr-set-on, and /qr-set-off instead.'), [], '<strong>DEPRECATED</strong> – The command /qrset has been deprecated. Use /qr-set, /qr-set-on, and /qr-set-off instead.', true, true);
-        registerSlashCommand('qr-set', (args, value)=>this.toggleGlobalSet(value, args), [], '<span class="monospace">[visible=true] (number)</span> – toggle global QR set', true, true);
-        registerSlashCommand('qr-set-on', (args, value)=>this.addGlobalSet(value, args), [], '<span class="monospace">[visible=true] (number)</span> – activate global QR set', true, true);
-        registerSlashCommand('qr-set-off', (_, value)=>this.removeGlobalSet(value), [], '<span class="monospace">(number)</span> – deactivate global QR set', true, true);
-        registerSlashCommand('qr-chat-set', (args, value)=>this.toggleChatSet(value, args), [], '<span class="monospace">[visible=true] (number)</span> – toggle chat QR set', true, true);
-        registerSlashCommand('qr-chat-set-on', (args, value)=>this.addChatSet(value, args), [], '<span class="monospace">[visible=true] (number)</span> – activate chat QR set', true, true);
-        registerSlashCommand('qr-chat-set-off', (_, value)=>this.removeChatSet(value), [], '<span class="monospace">(number)</span> – deactivate chat QR set', true, true);
-        registerSlashCommand('qr-set-list', (_, value)=>this.listSets(value ?? 'all'), [], '(all|global|chat) – gets a list of the names of all quick reply sets', true, true);
-        registerSlashCommand('qr-list', (_, value)=>this.listQuickReplies(value), [], '(set name) – gets a list of the names of all quick replies in this quick reply set', true, true);
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr',
+            callback: (_, value) => this.executeQuickReplyByIndex(Number(value)),
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'number', [ARGUMENT_TYPE.NUMBER], true,
+                ),
+            ],
+            helpString: 'Activates the specified Quick Reply',
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qrset',
+            callback: () => toastr.warning('The command /qrset has been deprecated. Use /qr-set, /qr-set-on, and /qr-set-off instead.'),
+            helpString: '<strong>DEPRECATED</strong> – The command /qrset has been deprecated. Use /qr-set, /qr-set-on, and /qr-set-off instead.',
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set',
+            callback: (args, value) => this.toggleGlobalSet(value, args),
+            namedArgumentList: [
+                new SlashCommandNamedArgument(
+                    'visible', 'set visibility', [ARGUMENT_TYPE.BOOLEAN], false, false, 'true',
+                ),
+            ],
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'QR set name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: 'Toggle global QR set',
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set-on',
+            callback: (args, value) => this.addGlobalSet(value, args),
+            namedArgumentList: [
+                new SlashCommandNamedArgument(
+                    'visible', 'set visibility', [ARGUMENT_TYPE.BOOLEAN], false, false, 'true',
+                ),
+            ],
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'QR set name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: 'Activate global QR set',
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set-off',
+            callback: (_, value) => this.removeGlobalSet(value),
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'QR set name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: 'Deactivate global QR set',
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-chat-set',
+            callback: (args, value) => this.toggleChatSet(value, args),
+            namedArgumentList: [
+                new SlashCommandNamedArgument(
+                    'visible', 'set visibility', [ARGUMENT_TYPE.BOOLEAN], false, false, 'true',
+                ),
+            ],
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'QR set name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: 'Toggle chat QR set',
+        }));
 
-        const qrArgs = `
-        label    - string - text on the button, e.g., label=MyButton
-        set      - string - name of the QR set, e.g., set=PresetName1
-        hidden   - bool   - whether the button should be hidden, e.g., hidden=true
-        startup  - bool   - auto execute on app startup, e.g., startup=true
-        user     - bool   - auto execute on user message, e.g., user=true
-        bot      - bool   - auto execute on AI message, e.g., bot=true
-        load     - bool   - auto execute on chat load, e.g., load=true
-        group    - bool   - auto execute on group member selection, e.g., group=true
-        title    - string - title / tooltip to be shown on button, e.g., title="My Fancy Button"
-        `.trim();
-        const qrUpdateArgs = `
-        newlabel - string - new text for the button, e.g. newlabel=MyRenamedButton
-        ${qrArgs}
-        `.trim();
-        registerSlashCommand('qr-create', (args, message)=>this.createQuickReply(args, message), [], `<span class="monospace" style="white-space:pre-line;">[arguments] (message)\n  arguments:\n    ${qrArgs}</span> – creates a new Quick Reply, example: <tt>/qr-create set=MyPreset label=MyButton /echo 123</tt>`, true, true);
-        registerSlashCommand('qr-update', (args, message)=>this.updateQuickReply(args, message), [], `<span class="monospace" style="white-space:pre-line;">[arguments] (message)\n  arguments:\n    ${qrUpdateArgs}</span> – updates Quick Reply, example: <tt>/qr-update set=MyPreset label=MyButton newlabel=MyRenamedButton /echo 123</tt>`, true, true);
-        registerSlashCommand('qr-delete', (args, name)=>this.deleteQuickReply(args, name), [], '<span class="monospace">set=string [label]</span> – deletes Quick Reply', true, true);
-        registerSlashCommand('qr-contextadd', (args, name)=>this.createContextItem(args, name), [], '<span class="monospace">set=string label=string [chain=false] (preset name)</span> – add context menu preset to a QR, example: <tt>/qr-contextadd set=MyPreset label=MyButton chain=true MyOtherPreset</tt>', true, true);
-        registerSlashCommand('qr-contextdel', (args, name)=>this.deleteContextItem(args, name), [], '<span class="monospace">set=string label=string (preset name)</span> – remove context menu preset from a QR, example: <tt>/qr-contextdel set=MyPreset label=MyButton MyOtherPreset</tt>', true, true);
-        registerSlashCommand('qr-contextclear', (args, label)=>this.clearContextMenu(args, label), [], '<span class="monospace">set=string (label)</span> – remove all context menu presets from a QR, example: <tt>/qr-contextclear set=MyPreset MyButton</tt>', true, true);
-        const presetArgs = `
-        nosend  - bool - disable send / insert in user input (invalid for slash commands)
-        before  - bool - place QR before user input
-        inject  - bool - inject user input automatically (if disabled use {{input}})
-        `.trim();
-        registerSlashCommand('qr-set-create', (args, name)=>this.createSet(name, args), ['qr-presetadd'], `<span class="monospace" style="white-space:pre-line;">[arguments] (name)\n  arguments:\n    ${presetArgs}</span> – create a new preset (overrides existing ones), example: <tt>/qr-set-add MyNewPreset</tt>`, true, true);
-        registerSlashCommand('qr-set-update', (args, name)=>this.updateSet(name, args), ['qr-presetupdate'], `<span class="monospace" style="white-space:pre-line;">[arguments] (name)\n  arguments:\n    ${presetArgs}</span> – update an existing preset, example: <tt>/qr-set-update enabled=false MyPreset</tt>`, true, true);
-        registerSlashCommand('qr-set-delete', (args, name)=>this.deleteSet(name), ['qr-presetdelete'], `<span class="monospace" style="white-space:pre-line;">(name)\n  arguments:\n    ${presetArgs}</span> – delete an existing preset, example: <tt>/qr-set-delete MyPreset</tt>`, true, true);
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-chat-set-on',
+            callback: (args, value) => this.addChatSet(value, args),
+            namedArgumentList: [
+                new SlashCommandNamedArgument(
+                    'visible', 'whether the QR set should be visible', [ARGUMENT_TYPE.BOOLEAN], false, false, 'true', ['true', 'false'],
+                ),
+            ],
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'QR set name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: 'Activate chat QR set',
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-chat-set-off',
+            callback: (_, value) => this.removeChatSet(value),
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'QR set name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: 'Deactivate chat QR set',
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set-list',
+            callback: (_, value) => this.listSets(value ?? 'all'),
+            returns: 'list of QR sets',
+            namedArgumentList: [],
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'set type', [ARGUMENT_TYPE.STRING], false, false, null, ['all', 'global', 'chat'],
+                ),
+            ],
+            helpString: 'Gets a list of the names of all quick reply sets.',
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-list',
+            callback: (_, value) => this.listQuickReplies(value),
+            returns: 'list of QRs',
+            namedArgumentList: [],
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'set name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: 'Gets a list of the names of all quick replies in this quick reply set.',
+        }));
+
+        const qrArgs = [
+            new SlashCommandNamedArgument('label', 'text on the button, e.g., label=MyButton', [ARGUMENT_TYPE.STRING]),
+            new SlashCommandNamedArgument('set', 'name of the QR set, e.g., set=PresetName1', [ARGUMENT_TYPE.STRING]),
+            new SlashCommandNamedArgument('hidden', 'whether the button should be hidden, e.g., hidden=true', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false'),
+            new SlashCommandNamedArgument('startup', 'auto execute on app startup, e.g., startup=true', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false'),
+            new SlashCommandNamedArgument('user', 'auto execute on user message, e.g., user=true', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false'),
+            new SlashCommandNamedArgument('bot', 'auto execute on AI message, e.g., bot=true', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false'),
+            new SlashCommandNamedArgument('load', 'auto execute on chat load, e.g., load=true', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false'),
+            new SlashCommandNamedArgument('group', 'auto execute on group member selection, e.g., group=true', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false'),
+            new SlashCommandNamedArgument('title', 'title / tooltip to be shown on button, e.g., title="My Fancy Button"', [ARGUMENT_TYPE.STRING], false),
+        ];
+        const qrUpdateArgs = [
+            new SlashCommandNamedArgument('newlabel', 'new text for the button', [ARGUMENT_TYPE.STRING], false),
+        ];
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-create',
+            callback: (args, message) => this.createQuickReply(args, message),
+            namedArgumentList: qrArgs,
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'command', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: `
+                <div>Creates a new Quick Reply.</div>
+                <div>
+                    <strong>Example:</strong>
+                    <ul>
+                        <li>
+                            <pre><code>/qr-create set=MyPreset label=MyButton /echo 123</code></pre>
+                        </li>
+                    </ul>
+                </div>
+            `,
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-update',
+            callback: (args, message) => this.updateQuickReply(args, message),
+            returns: 'updated quick reply',
+            namedArgumentList: [...qrUpdateArgs, ...qrArgs],
+            helpString: `
+                <div>
+                    Updates Quick Reply.
+                </div>
+                <div>
+                    <strong>Example:</strong>
+                    <ul>
+                        <li>
+                            <pre><code>/qr-update set=MyPreset label=MyButton newlabel=MyRenamedButton /echo 123</code></pre>
+                        </li>
+                    </ul>
+                </div>
+            `,
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-delete',
+            callback: (args, name) => this.deleteQuickReply(args, name),
+            namedArgumentList: [
+                new SlashCommandNamedArgument(
+                    'set', 'Quick Reply set', [ARGUMENT_TYPE.STRING], true,
+                ),
+                new SlashCommandNamedArgument(
+                    'label', 'Quick Reply label', [ARGUMENT_TYPE.STRING], false,
+                ),
+            ],
+            helpString: 'Deletes a Quick Reply from the specified set. If no label is provided, the entire set is deleted.',
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-contextadd',
+            callback: (args, name) => this.createContextItem(args, name),
+            namedArgumentList: [
+                new SlashCommandNamedArgument(
+                    'set', 'string', [ARGUMENT_TYPE.STRING], true,
+                ),
+                new SlashCommandNamedArgument(
+                    'label', 'string', [ARGUMENT_TYPE.STRING], true,
+                ),
+                new SlashCommandNamedArgument(
+                    'chain', 'boolean', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false',
+                ),
+            ],
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'preset name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: `
+                <div>
+                    Add context menu preset to a QR.
+                </div>
+                <div>
+                    <strong>Example:</strong>
+                    <ul>
+                        <li>
+                            <pre><code>/qr-contextadd set=MyPreset label=MyButton chain=true MyOtherPreset</code></pre>
+                        </li>
+                    </ul>
+                </div>
+            `,
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-contextdel',
+            callback: (args, name) => this.deleteContextItem(args, name),
+            namedArgumentList: [
+                new SlashCommandNamedArgument(
+                    'set', 'string', [ARGUMENT_TYPE.STRING], true,
+                ),
+                new SlashCommandNamedArgument(
+                    'label', 'string', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'preset name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: `
+                <div>
+                    Remove context menu preset from a QR.
+                </div>
+                <div>
+                    <strong>Example:</strong>
+                    <ul>
+                        <li>
+                            <pre><code>/qr-contextdel set=MyPreset label=MyButton MyOtherPreset</code></pre>
+                        </li>
+                    </ul>
+                </div>
+            `,
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-contextclear',
+            callback: (args, label) => this.clearContextMenu(args, label),
+            namedArgumentList: [
+                new SlashCommandNamedArgument(
+                    'set', 'context menu preset name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'label', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: `
+                <div>
+                    Remove all context menu presets from a QR.
+                </div>
+                <div>
+                    <strong>Example:</strong>
+                    <ul>
+                        <li>
+                            <pre><code>/qr-contextclear set=MyPreset MyButton</code></pre>
+                        </li>
+                    </ul>
+                </div>
+            `,
+        }));
+
+        const presetArgs = [
+            new SlashCommandNamedArgument('nosend', 'disable send / insert in user input (invalid for slash commands)', [ARGUMENT_TYPE.BOOLEAN], false),
+            new SlashCommandNamedArgument('before', 'place QR before user input', [ARGUMENT_TYPE.BOOLEAN], false),
+            new SlashCommandNamedArgument('inject', 'inject user input automatically (if disabled use {{input}})', [ARGUMENT_TYPE.BOOLEAN], false),
+        ];
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set-create',
+            callback: (args, name) => this.createSet(name, args),
+            aliases: ['qr-presetadd'],
+            namedArgumentList: presetArgs,
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: `
+                <div>
+                    Create a new preset (overrides existing ones).
+                </div>
+                <div>
+                    <strong>Example:</strong>
+                    <ul>
+                        <li>
+                            <pre><code>/qr-set-add MyNewPreset</code></pre>
+                        </li>
+                    </ul>
+                </div>
+            `,
+        }));
+
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set-update',
+            callback: (args, name) => this.updateSet(name, args),
+            aliases: ['qr-presetupdate'],
+            namedArgumentList: presetArgs,
+            unnamedArgumentList: [
+                new SlashCommandArgument('name', [ARGUMENT_TYPE.STRING], true),
+            ],
+            helpString: `
+                <div>
+                    Update an existing preset.
+                </div>
+                <div>
+                    <strong>Example:</strong>
+                    <pre><code>/qr-set-update enabled=false MyPreset</code></pre>
+                </div>
+            `,
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set-delete',
+            callback: (args, name) => this.deleteSet(name),
+            aliases: ['qr-presetdelete'],
+            unnamedArgumentList: [
+                new SlashCommandArgument('name', [ARGUMENT_TYPE.STRING], true),
+            ],
+            helpString: `
+                <div>
+                    Delete an existing preset.
+                </div>
+                <div>
+                    <strong>Example:</strong>
+                    <pre><code>/qr-set-delete MyPreset</code></pre>
+                </div>
+            `,
+        }));
     }
 
 
diff --git a/public/scripts/extensions/quick-reply/style.css b/public/scripts/extensions/quick-reply/style.css
index bff6ee067..1afd83ce4 100644
--- a/public/scripts/extensions/quick-reply/style.css
+++ b/public/scripts/extensions/quick-reply/style.css
@@ -238,11 +238,13 @@
   display: flex;
   flex-direction: row;
   gap: 1em;
+  overflow: hidden;
 }
 .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels {
   flex: 0 0 auto;
@@ -268,6 +270,7 @@
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings {
   display: flex;
@@ -283,17 +286,167 @@
 .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label > input {
   font-size: inherit;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-message {
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
   flex: 1 1 auto;
+  display: grid;
+  text-align: left;
+  overflow: hidden;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-execute {
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-messageSyntax {
+  grid-column: 1;
+  grid-row: 1;
+  padding: 0;
+  margin: 0;
+  border: none;
+  overflow: hidden;
+  min-width: 100%;
+  width: 0;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-messageSyntax > #qr--modal-messageSyntaxInner {
+  height: 100%;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message {
+  grid-column: 1;
+  grid-row: 1;
+  caret-color: white;
+  mix-blend-mode: difference;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::-webkit-scrollbar,
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::-webkit-scrollbar-thumb {
+  visibility: hidden;
+  cursor: default;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder #qr--modal-message,
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder #qr--modal-messageSyntaxInner {
+  padding: 0.75em;
+  margin: 0;
+  border: none;
+  resize: none;
+  line-height: 1.2;
+  border: 1px solid var(--SmartThemeBorderColor);
+  border-radius: 5px;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons {
+  display: flex;
+  gap: 1em;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--modal-executeButton {
+  border-width: 2px;
+  border-style: solid;
   display: flex;
   flex-direction: row;
   gap: 0.5em;
+  padding: 0.5em 0.75em;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-execute.qr--busy {
-  opacity: 0.5;
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--modal-executeButton .qr--modal-executeComboIcon {
+  display: flex;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute {
+  transition: 200ms;
+  filter: grayscale(0);
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute.qr--busy {
   cursor: wait;
+  opacity: 0.5;
+  filter: grayscale(1);
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute {
+  border-color: #51a351;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-pause,
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-stop {
+  cursor: default;
+  opacity: 0.5;
+  filter: grayscale(1);
+  pointer-events: none;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--busy ~ #qr--modal-pause,
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--busy ~ #qr--modal-stop {
+  cursor: pointer;
+  opacity: 1;
+  filter: grayscale(0);
+  pointer-events: all;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-pause {
+  border-color: #92befc;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-stop {
+  border-color: #d78872;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress {
+  --prog: 0;
+  --progColor: #92befc;
+  --progFlashColor: #d78872;
+  --progSuccessColor: #51a351;
+  --progErrorColor: #bd362f;
+  --progAbortedColor: #d78872;
+  height: 0.5em;
+  background-color: var(--black50a);
+  position: relative;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress:after {
+  content: '';
+  background-color: var(--progColor);
+  position: absolute;
+  inset: 0;
+  right: calc(100% - var(--prog) * 1%);
+  transition: 200ms;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--paused:after {
+  animation-name: qr--progressPulse;
+  animation-duration: 1500ms;
+  animation-timing-function: ease-in-out;
+  animation-delay: 0s;
+  animation-iteration-count: infinite;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--aborted:after {
+  background-color: var(--progAbortedColor);
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--success:after {
+  background-color: var(--progSuccessColor);
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--error:after {
+  background-color: var(--progErrorColor);
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeErrors {
+  display: none;
+  text-align: left;
+  font-size: smaller;
+  background-color: #bd362f;
+  color: white;
+  padding: 0.5em;
+  overflow: auto;
+  min-width: 100%;
+  width: 0;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeErrors.qr--hasErrors {
+  display: block;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeResult {
+  display: none;
+  text-align: left;
+  font-size: smaller;
+  background-color: #51a351;
+  color: white;
+  padding: 0.5em;
+  overflow: auto;
+  min-width: 100%;
+  width: 0;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeResult.qr--hasResult {
+  display: block;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeResult:before {
+  content: 'Result: ';
+}
+@keyframes qr--progressPulse {
+  0%,
+  100% {
+    background-color: var(--progColor);
+  }
+  50% {
+    background-color: var(--progFlashColor);
+  }
 }
 .shadow_popup.qr--hide {
   opacity: 0 !important;
diff --git a/public/scripts/extensions/quick-reply/style.less b/public/scripts/extensions/quick-reply/style.less
index b91d7b444..ca4f385ba 100644
--- a/public/scripts/extensions/quick-reply/style.less
+++ b/public/scripts/extensions/quick-reply/style.less
@@ -264,11 +264,13 @@
 			display: flex;
 			flex-direction: row;
 			gap: 1em;
+			overflow: hidden;
 
 			> #qr--main {
 				flex: 1 1 auto;
 				display: flex;
 				flex-direction: column;
+				overflow: hidden;
 				> .qr--labels {
 					flex: 0 0 auto;
 					display: flex;
@@ -293,6 +295,7 @@
 					flex: 1 1 auto;
 					display: flex;
 					flex-direction: column;
+					overflow: hidden;
 					> .qr--modal-editorSettings {
 						display: flex;
 						flex-direction: row;
@@ -307,24 +310,169 @@
 							}
 						}
 					}
-					> #qr--modal-message {
+					> #qr--modal-messageHolder {
 						flex: 1 1 auto;
+						display: grid;
+						text-align: left;
+						overflow: hidden;
+						> #qr--modal-messageSyntax {
+							grid-column: 1;
+							grid-row: 1;
+							padding: 0;
+							margin: 0;
+							border: none;
+							overflow: hidden;
+							min-width: 100%;
+							width: 0;
+							> #qr--modal-messageSyntaxInner {
+								height: 100%;
+							}
+						}
+						> #qr--modal-message {
+							grid-column: 1;
+							grid-row: 1;
+							caret-color: white;
+							mix-blend-mode: difference;
+							&::-webkit-scrollbar, &::-webkit-scrollbar-thumb {
+								visibility: hidden;
+								cursor: default;
+							}
+						}
+						#qr--modal-message, #qr--modal-messageSyntaxInner {
+							padding: 0.75em;
+							margin: 0;
+							border: none;
+							resize: none;
+							line-height: 1.2;
+							border: 1px solid var(--SmartThemeBorderColor);
+							border-radius: 5px;
+						}
 					}
 				}
 			}
 
-			#qr--modal-execute {
+			#qr--modal-executeButtons {
 				display: flex;
-				flex-direction: row;
-				gap: 0.5em;
-				&.qr--busy {
-					opacity: 0.5;
-					cursor: wait;
+				gap: 1em;
+				.qr--modal-executeButton {
+					border-width: 2px;
+					border-style: solid;
+					display: flex;
+					flex-direction: row;
+					gap: 0.5em;
+					padding: 0.5em 0.75em;
+					.qr--modal-executeComboIcon {
+						display: flex;
+					}
 				}
+				#qr--modal-execute {
+					transition: 200ms;
+					filter: grayscale(0);
+					&.qr--busy {
+						cursor: wait;
+						opacity: 0.5;
+						filter: grayscale(1);
+					}
+				}
+				#qr--modal-execute {
+					border-color: rgb(81, 163, 81);
+				}
+				#qr--modal-pause, #qr--modal-stop {
+					cursor: default;
+					opacity: 0.5;
+					filter: grayscale(1);
+					pointer-events: none;
+				}
+				.qr--busy {
+					~ #qr--modal-pause, ~ #qr--modal-stop {
+						cursor: pointer;
+						opacity: 1;
+						filter: grayscale(0);
+						pointer-events: all;
+					}
+				}
+				#qr--modal-pause {
+					border-color: rgb(146, 190, 252);
+				}
+				#qr--modal-stop {
+					border-color: rgb(215, 136, 114);
+				}
+			}
+			#qr--modal-executeProgress {
+				--prog: 0;
+				--progColor: rgb(146, 190, 252);
+				--progFlashColor: rgb(215, 136, 114);
+				--progSuccessColor: rgb(81, 163, 81);
+				--progErrorColor: rgb(189, 54, 47);
+				--progAbortedColor: rgb(215, 136, 114);
+				height: 0.5em;
+				background-color: var(--black50a);
+				position: relative;
+				&:after {
+					content: '';
+					background-color: var(--progColor);
+					position: absolute;
+					inset: 0;
+					right: calc(100% - var(--prog) * 1%);
+					transition: 200ms;
+				}
+				&.qr--paused:after {
+					animation-name: qr--progressPulse;
+					animation-duration: 1500ms;
+					animation-timing-function: ease-in-out;
+					animation-delay: 0s;
+					animation-iteration-count: infinite;
+				}
+				&.qr--aborted:after {
+					background-color: var(--progAbortedColor);
+				}
+				&.qr--success:after {
+					background-color: var(--progSuccessColor);
+				}
+				&.qr--error:after {
+					background-color: var(--progErrorColor);
+				}
+			}
+			#qr--modal-executeErrors {
+				display: none;
+				&.qr--hasErrors {
+					display: block;
+				}
+				text-align: left;
+				font-size: smaller;
+				background-color: rgb(189, 54, 47);
+				color: white;
+				padding: 0.5em;
+				overflow: auto;
+				min-width: 100%;
+				width: 0;
+			}
+			#qr--modal-executeResult {
+				display: none;
+				&.qr--hasResult {
+					display: block;
+				}
+				&:before { content: 'Result: '; }
+				text-align: left;
+				font-size: smaller;
+				background-color: rgb(81, 163, 81);
+				color: white;
+				padding: 0.5em;
+				overflow: auto;
+				min-width: 100%;
+				width: 0;
 			}
 		}
 	}
 }
+@keyframes qr--progressPulse {
+    0%, 100% {
+        background-color: var(--progColor);
+    }
+    50% {
+        background-color: var(--progFlashColor);
+    }
+}
 
 .shadow_popup.qr--hide {
 	opacity: 0 !important;
diff --git a/public/scripts/extensions/regex/index.js b/public/scripts/extensions/regex/index.js
index 98e66fd5f..6f7ec799e 100644
--- a/public/scripts/extensions/regex/index.js
+++ b/public/scripts/extensions/regex/index.js
@@ -1,6 +1,8 @@
 import { callPopup, getCurrentChatId, reloadCurrentChat, saveSettingsDebounced } from '../../../script.js';
 import { extension_settings, renderExtensionTemplateAsync } from '../../extensions.js';
-import { registerSlashCommand } from '../../slash-commands.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
 import { download, getFileText, getSortableDelay, uuidv4 } from '../../utils.js';
 import { resolveVariable } from '../../variables.js';
 import { regex_placement, runRegexScript } from './engine.js';
@@ -353,5 +355,20 @@ jQuery(async () => {
     await loadRegexScripts();
     $('#saved_regex_scripts').sortable('enable');
 
-    registerSlashCommand('regex', runRegexCallback, [], '(name=scriptName [input]) – runs a Regex extension script by name on the provided string. The script must be enabled.', true, true);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'regex',
+        callback: runRegexCallback,
+        returns: 'replaced text',
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'name', 'script name', [ARGUMENT_TYPE.STRING], true,
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'input', [ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        helpString: 'Runs a Regex extension script by name on the provided string. The script must be enabled.',
+    }));
+
 });
diff --git a/public/scripts/extensions/stable-diffusion/index.js b/public/scripts/extensions/stable-diffusion/index.js
index 288e45aaf..577a5db3b 100644
--- a/public/scripts/extensions/stable-diffusion/index.js
+++ b/public/scripts/extensions/stable-diffusion/index.js
@@ -25,7 +25,9 @@ import { getMessageTimeStamp, humanizedDateTime } from '../../RossAscends-mods.j
 import { SECRET_KEYS, secret_state } from '../../secrets.js';
 import { getNovelUnlimitedImageGeneration, getNovelAnlas, loadNovelSubscriptionData } from '../../nai-settings.js';
 import { getMultimodalCaption } from '../shared.js';
-import { registerSlashCommand } from '../../slash-commands.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
 import { resolveVariable } from '../../variables.js';
 export { MODULE_NAME };
 
@@ -3055,8 +3057,43 @@ $('#sd_dropdown [id]').on('click', function () {
 });
 
 jQuery(async () => {
-    registerSlashCommand('imagine', generatePicture, ['sd', 'img', 'image'], helpString, true, true);
-    registerSlashCommand('imagine-comfy-workflow', changeComfyWorkflow, ['icw'], '(workflowName) - change the workflow to be used for image generation with ComfyUI, e.g. <tt>/imagine-comfy-workflow MyWorkflow</tt>');
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'imagine',
+        callback: generatePicture,
+        aliases: ['sd', 'img', 'image'],
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'quiet', 'whether to post the generated image to chat', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false', ['false', 'true'],
+            ),
+            new SlashCommandNamedArgument(
+                'negative', 'negative prompt prefix', [ARGUMENT_TYPE.STRING], false, false, '',
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'argument', [ARGUMENT_TYPE.STRING], false, false, null, Object.values(triggerWords).flat(),
+            ),
+        ],
+        helpString: `
+            <div>
+                Requests to generate an image and posts it to chat (unless quiet=true argument is specified). Supported arguments: <code>${Object.values(triggerWords).flat().join(', ')}</code>.
+            </div>
+            <div>
+                Anything else would trigger a "free mode" to make generate whatever you prompted. Example: <code>/imagine apple tree</code> would generate a picture of an apple tree. Returns a link to the generated image.
+            </div>
+        `,
+    }));
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'imagine-comfy-workflow',
+        callback: changeComfyWorkflow,
+        aliases: ['icw'],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'workflowName', [ARGUMENT_TYPE.STRING], true,
+            ),
+        ],
+        helpString: '(workflowName) - change the workflow to be used for image generation with ComfyUI, e.g. <pre><code>/imagine-comfy-workflow MyWorkflow</code></pre>',
+    }));
+
 
     const template = await renderExtensionTemplateAsync('stable-diffusion', 'settings', defaultSettings);
     $('#extensions_settings').append(template);
diff --git a/public/scripts/extensions/token-counter/index.js b/public/scripts/extensions/token-counter/index.js
index 0594ff4a9..f93a20e9b 100644
--- a/public/scripts/extensions/token-counter/index.js
+++ b/public/scripts/extensions/token-counter/index.js
@@ -1,6 +1,7 @@
 import { callPopup, main_api } from '../../../script.js';
 import { getContext } from '../../extensions.js';
-import { registerSlashCommand } from '../../slash-commands.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
 import { getFriendlyTokenizerName, getTextTokens, getTokenCountAsync, tokenizers } from '../../tokenizers.js';
 import { resetScrollHeight, debounce } from '../../utils.js';
 import { debounce_timeout } from '../../constants.js';
@@ -132,5 +133,10 @@ jQuery(() => {
         </div>`;
     $('#extensionsMenu').prepend(buttonHtml);
     $('#token_counter').on('click', doTokenCounter);
-    registerSlashCommand('count', doCount, [], '– counts the number of tokens in the current chat', true, false);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'count',
+        callback: doCount,
+        returns: 'number of tokens',
+        helpString: 'Counts the number of tokens in the current chat.',
+    }));
+
 });
diff --git a/public/scripts/extensions/tts/index.js b/public/scripts/extensions/tts/index.js
index 6203bd213..3d5765eff 100644
--- a/public/scripts/extensions/tts/index.js
+++ b/public/scripts/extensions/tts/index.js
@@ -8,11 +8,13 @@ import { CoquiTtsProvider } from './coqui.js';
 import { SystemTtsProvider } from './system.js';
 import { NovelTtsProvider } from './novel.js';
 import { power_user } from '../../power-user.js';
-import { registerSlashCommand } from '../../slash-commands.js';
 import { OpenAITtsProvider } from './openai.js';
 import { XTTSTtsProvider } from './xtts.js';
 import { AllTalkTtsProvider } from './alltalk.js';
 import { SpeechT5TtsProvider } from './speecht5.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
 export { talkingAnimation };
 
 const UPDATE_INTERVAL = 1000;
@@ -1063,6 +1065,36 @@ $(document).ready(function () {
     eventSource.on(event_types.GROUP_UPDATED, onChatChanged);
     eventSource.on(event_types.MESSAGE_SENT, onMessageEvent);
     eventSource.on(event_types.MESSAGE_RECEIVED, onMessageEvent);
-    registerSlashCommand('speak', onNarrateText, ['narrate', 'tts'], '<span class="monospace">(text)</span>  – narrate any text using currently selected character\'s voice. Use voice="Character Name" argument to set other voice from the voice map, example: <tt>/speak voice="Donald Duck" Quack!</tt>', true, true);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'speak',
+        callback: onNarrateText,
+        aliases: ['narrate', 'tts'],
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'voice', 'character voice name', [ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'text', [ARGUMENT_TYPE.STRING], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Narrate any text using currently selected character's voice.
+            </div>
+            <div>
+                Use <code>voice="Character Name"</code> argument to set other voice from the voice map.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code>/speak voice="Donald Duck" Quack!</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+
     document.body.appendChild(audioElement);
 });
diff --git a/public/scripts/group-chats.js b/public/scripts/group-chats.js
index 99165f519..672ac32a0 100644
--- a/public/scripts/group-chats.js
+++ b/public/scripts/group-chats.js
@@ -804,7 +804,7 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
             const bias = getBiasStrings(userInput, type);
             await sendMessageAsUser(userInput, bias.messageBias);
             await saveChatConditional();
-            $('#send_textarea').val('').trigger('input');
+            $('#send_textarea').val('')[0].dispatchEvent(new Event('input', { bubbles:true }));
         }
 
         // now the real generation begins: cycle through every activated character
diff --git a/public/scripts/openai.js b/public/scripts/openai.js
index 5d19cd30a..a148616a8 100644
--- a/public/scripts/openai.js
+++ b/public/scripts/openai.js
@@ -32,7 +32,6 @@ import {
     this_chid,
 } from '../script.js';
 import { selected_group } from './group-chats.js';
-import { registerSlashCommand } from './slash-commands.js';
 
 import {
     chatCompletionDefaultPrompts,
@@ -66,6 +65,9 @@ import {
 } from './instruct-mode.js';
 import { isMobile } from './RossAscends-mods.js';
 import { saveLogprobsForActiveMessage } from './logprobs.js';
+import { SlashCommandParser } from './slash-commands/SlashCommandParser.js';
+import { SlashCommand } from './slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument } from './slash-commands/SlashCommandArgument.js';
 
 export {
     openai_messages_count,
@@ -4383,7 +4385,18 @@ function runProxyCallback(_, value) {
     return foundName;
 }
 
-registerSlashCommand('proxy', runProxyCallback, [], '<span class="monospace">(name)</span> – sets a proxy preset by name');
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'proxy',
+    callback: runProxyCallback,
+    returns: 'current proxy',
+    namedArgumentList: [],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'name', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: 'Sets a proxy preset by name.',
+}));
+
 
 $(document).ready(async function () {
     $('#test_api_button').on('click', testApiConnection);
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index ec2a5868e..d05160915 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -35,7 +35,6 @@ import {
     selectInstructPreset,
 } from './instruct-mode.js';
 
-import { registerSlashCommand } from './slash-commands.js';
 import { getTagsList, tag_map, tags } from './tags.js';
 import { tokenizers } from './tokenizers.js';
 import { BIAS_CACHE } from './logit-bias.js';
@@ -43,6 +42,10 @@ import { renderTemplateAsync } from './templates.js';
 
 import { countOccurrences, debounce, delay, download, getFileText, isOdd, onlyUnique, resetScrollHeight, shuffle, sortMoments, stringToRange, timestampToMoment } from './utils.js';
 import { FILTER_TYPES } from './filters.js';
+import { PARSER_FLAG, SlashCommandParser } from './slash-commands/SlashCommandParser.js';
+import { SlashCommand } from './slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument } from './slash-commands/SlashCommandArgument.js';
+import { AUTOCOMPLETE_WIDTH } from './autocomplete/AutoComplete.js';
 
 export {
     loadPowerUserSettings,
@@ -253,6 +256,23 @@ let power_user = {
     zoomed_avatar_magnification: false,
     show_tag_filters: false,
     aux_field: 'character_version',
+    stscript: {
+        matching: 'fuzzy',
+        autocomplete: {
+            style: 'theme',
+            font: {
+                scale: 0.8,
+            },
+            width: {
+                left: AUTOCOMPLETE_WIDTH.CHAT,
+                right: AUTOCOMPLETE_WIDTH.CHAT,
+            },
+        },
+        parser: {
+            /**@type {Object.<PARSER_FLAG,boolean>} */
+            flags: {},
+        },
+    },
     restore_user_input: true,
     reduced_motion: false,
     compact_input_area: true,
@@ -1430,11 +1450,32 @@ function getExampleMessagesBehavior() {
 }
 
 function loadPowerUserSettings(settings, data) {
+    const defaultStscript = JSON.parse(JSON.stringify(power_user.stscript));
     // Load from settings.json
     if (settings.power_user !== undefined) {
         Object.assign(power_user, settings.power_user);
     }
 
+    if (power_user.stscript === undefined) {
+        power_user.stscript = defaultStscript;
+    } else {
+        if (power_user.stscript.autocomplete === undefined) {
+            power_user.stscript.autocomplete = defaultStscript.autocomplete;
+        } else {
+            if (power_user.stscript.autocomplete.width === undefined) {
+                power_user.stscript.autocomplete.width = defaultStscript.autocomplete.width;
+            }
+            if (power_user.stscript.autocomplete.font === undefined) {
+                power_user.stscript.autocomplete.font = defaultStscript.autocomplete.font;
+            }
+        }
+        if (power_user.stscript.parser === undefined) {
+            power_user.stscript.parser = defaultStscript.parser;
+        } else if (power_user.stscript.parser.flags === undefined) {
+            power_user.stscript.parser.flags = defaultStscript.parser.flags;
+        }
+    }
+
     if (data.themes !== undefined) {
         themes = data.themes;
     }
@@ -1576,6 +1617,20 @@ function loadPowerUserSettings(settings, data) {
     $('#chat_width_slider').val(power_user.chat_width);
     $('#token_padding').val(power_user.token_padding);
     $('#aux_field').val(power_user.aux_field);
+
+    $('#stscript_matching').val(power_user.stscript.matching ?? 'fuzzy');
+    $('#stscript_autocomplete_style').val(power_user.stscript.autocomplete_style ?? 'theme');
+    document.body.setAttribute('data-stscript-style', power_user.stscript.autocomplete_style);
+    $('#stscript_parser_flag_strict_escaping').prop('checked', power_user.stscript.parser.flags[PARSER_FLAG.STRICT_ESCAPING] ?? false);
+    $('#stscript_parser_flag_replace_getvar').prop('checked', power_user.stscript.parser.flags[PARSER_FLAG.REPLACE_GETVAR] ?? false);
+    $('#stscript_autocomplete_font_scale').val(power_user.stscript.autocomplete.font.scale ?? defaultStscript.autocomplete.font.scale);
+    $('#stscript_autocomplete_font_scale_counter').val(power_user.stscript.autocomplete.font.scale ?? defaultStscript.autocomplete.font.scale);
+    document.body.style.setProperty('--ac-font-scale', power_user.stscript.autocomplete.font.scale ?? defaultStscript.autocomplete.font.scale.toString());
+    $('#stscript_autocomplete_width_left').val(power_user.stscript.autocomplete.width.left ?? AUTOCOMPLETE_WIDTH.CHAT);
+    document.querySelector('#stscript_autocomplete_width_left').dispatchEvent(new Event('input', { bubbles:true }));
+    $('#stscript_autocomplete_width_right').val(power_user.stscript.autocomplete.width.right ?? AUTOCOMPLETE_WIDTH.CHAT);
+    document.querySelector('#stscript_autocomplete_width_right').dispatchEvent(new Event('input', { bubbles:true }));
+
     $('#restore_user_input').prop('checked', power_user.restore_user_input);
 
     $('#chat_truncation').val(power_user.chat_truncation);
@@ -3591,6 +3646,64 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
+    $('#stscript_matching').on('change', function () {
+        const value = $(this).find(':selected').val();
+        power_user.stscript.matching = String(value);
+        saveSettingsDebounced();
+    });
+
+    $('#stscript_autocomplete_style').on('change', function () {
+        const value = $(this).find(':selected').val();
+        power_user.stscript.autocomplete_style = String(value);
+        document.body.setAttribute('data-stscript-style', power_user.stscript.autocomplete_style);
+        saveSettingsDebounced();
+    });
+
+    $('#stscript_autocomplete_font_scale').on('input', function () {
+        const value = $(this).val();
+        $('#stscript_autocomplete_font_scale_counter').val(value);
+        power_user.stscript.autocomplete.font.scale = Number(value);
+        document.body.style.setProperty('--ac-font-scale', value.toString());
+        window.dispatchEvent(new Event('resize', { bubbles:true }));
+        saveSettingsDebounced();
+    });
+    $('#stscript_autocomplete_font_scale_counter').on('input', function () {
+        const value = $(this).val();
+        $('#stscript_autocomplete_font_scale').val(value);
+        power_user.stscript.autocomplete.font.scale = Number(value);
+        document.body.style.setProperty('--ac-font-scale', value.toString());
+        window.dispatchEvent(new Event('resize', { bubbles:true }));
+        saveSettingsDebounced();
+    });
+
+    $('#stscript_autocomplete_width_left').on('input', function () {
+        const value = $(this).val();
+        power_user.stscript.autocomplete.width.left = Number(value);
+        /**@type {HTMLElement}*/(this.closest('.doubleRangeInputContainer')).style.setProperty('--value', value.toString());
+        window.dispatchEvent(new Event('resize', { bubbles:true }));
+        saveSettingsDebounced();
+    });
+
+    $('#stscript_autocomplete_width_right').on('input', function () {
+        const value = $(this).val();
+        power_user.stscript.autocomplete.width.right = Number(value);
+        /**@type {HTMLElement}*/(this.closest('.doubleRangeInputContainer')).style.setProperty('--value', value.toString());
+        window.dispatchEvent(new Event('resize', { bubbles:true }));
+        saveSettingsDebounced();
+    });
+
+    $('#stscript_parser_flag_strict_escaping').on('click', function () {
+        const value = $(this).prop('checked');
+        power_user.stscript.parser.flags[PARSER_FLAG.STRICT_ESCAPING] = value;
+        saveSettingsDebounced();
+    });
+
+    $('#stscript_parser_flag_replace_getvar').on('click', function () {
+        const value = $(this).prop('checked');
+        power_user.stscript.parser.flags[PARSER_FLAG.REPLACE_GETVAR] = value;
+        saveSettingsDebounced();
+    });
+
     $('#restore_user_input').on('input', function () {
         power_user.restore_user_input = !!$(this).prop('checked');
         saveSettingsDebounced();
@@ -3669,13 +3782,84 @@ $(document).ready(() => {
         browser_has_focus = false;
     });
 
-    registerSlashCommand('vn', toggleWaifu, [], '– swaps Visual Novel Mode On/Off', false, true);
-    registerSlashCommand('newchat', doNewChat, [], '– start a new chat with current character', true, true);
-    registerSlashCommand('random', doRandomChat, [], '<span class="monospace">(optional tag name)</span> – start a new chat with a random character. If an argument is provided, only considers characters that have the specified tag.', true, true);
-    registerSlashCommand('delmode', doDelMode, ['del'], '<span class="monospace">(optional number)</span> – enter message deletion mode, and auto-deletes last N messages if numeric argument is provided', true, true);
-    registerSlashCommand('cut', doMesCut, [], '<span class="monospace">(number or range)</span> – cuts the specified message or continuous chunk from the chat, e.g. <tt>/cut 0-10</tt>. Ranges are inclusive! Returns the text of cut messages separated by a newline.', true, true);
-    registerSlashCommand('resetpanels', doResetPanels, ['resetui'], '– resets UI panels to original state.', true, true);
-    registerSlashCommand('bgcol', setAvgBG, [], '– WIP test of auto-bg avg coloring', true, true);
-    registerSlashCommand('theme', setThemeCallback, [], '<span class="monospace">(name)</span> – sets a UI theme by name', true, true);
-    registerSlashCommand('movingui', setmovingUIPreset, [], '<span class="monospace">(name)</span> – activates a movingUI preset by name', true, true);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'vn',
+        callback: toggleWaifu,
+        helpString: 'Swaps Visual Novel Mode On/Off',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'newchat',
+        callback: doNewChat,
+        helpString: 'Start a new chat with the current character',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'random',
+        callback: doRandomChat,
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'optional tag name', [ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        helpString: 'Start a new chat with a random character. If an argument is provided, only considers characters that have the specified tag.',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'delmode',
+        callback: doDelMode,
+        aliases: ['del'],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'optional number', [ARGUMENT_TYPE.NUMBER], false,
+            ),
+        ],
+        helpString: 'Enter message deletion mode, and auto-deletes last N messages if numeric argument is provided.',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'cut',
+        callback: doMesCut,
+        returns: 'the text of cut messages separated by a newline',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'number or range', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.RANGE], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Cuts the specified message or continuous chunk from the chat.
+            </div>
+            <div>
+                Ranges are inclusive!
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code>/cut 0-10</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+        aliases: [],
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'resetpanels',
+        callback: doResetPanels,
+        helpString: 'resets UI panels to original state',
+        aliases: ['resetui'],
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'bgcol',
+        callback: setAvgBG,
+        helpString: '– WIP test of auto-bg avg coloring',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'theme',
+        callback: setThemeCallback,
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'name', [ARGUMENT_TYPE.STRING], true,
+            ),
+        ],
+        helpString: 'sets a UI theme by name',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'movingui',
+        callback: setmovingUIPreset,
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'name', [ARGUMENT_TYPE.STRING], true,
+            ),
+        ],
+        helpString: 'activates a movingUI preset by name',
+    }));
 });
diff --git a/public/scripts/preset-manager.js b/public/scripts/preset-manager.js
index e846fd1d0..d5c311d16 100644
--- a/public/scripts/preset-manager.js
+++ b/public/scripts/preset-manager.js
@@ -20,7 +20,9 @@ import { groups, selected_group } from './group-chats.js';
 import { instruct_presets } from './instruct-mode.js';
 import { kai_settings } from './kai-settings.js';
 import { context_presets, getContextSettings, power_user } from './power-user.js';
-import { registerSlashCommand } from './slash-commands.js';
+import { SlashCommand } from './slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument } from './slash-commands/SlashCommandArgument.js';
+import { SlashCommandParser } from './slash-commands/SlashCommandParser.js';
 import {
     textgenerationwebui_preset_names,
     textgenerationwebui_presets,
@@ -472,7 +474,33 @@ async function waitForConnection() {
 export async function initPresetManager() {
     eventSource.on(event_types.CHAT_CHANGED, autoSelectPreset);
     registerPresetManagers();
-    registerSlashCommand('preset', presetCommandCallback, [], '<span class="monospace">(name)</span> – sets a preset by name for the current API. Gets the current preset if no name is provided', true, true);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'preset',
+        callback: presetCommandCallback,
+        returns: 'current preset',
+        namedArgumentList: [],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'name', [ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        helpString: `
+            <div>
+                Sets a preset by name for the current API. Gets the current preset if no name is provided.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code>/preset myPreset</code></pre>
+                    </li>
+                    <li>
+                        <pre><code>/preset</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+
 
     $(document).on('click', '[data-preset-manager-update]', async function () {
         const apiId = $(this).data('preset-manager-update');
diff --git a/public/scripts/slash-commands.js b/public/scripts/slash-commands.js
index 3f9d24115..166c72596 100644
--- a/public/scripts/slash-commands.js
+++ b/public/scripts/slash-commands.js
@@ -37,6 +37,8 @@ import {
     system_message_types,
     this_chid,
 } from '../script.js';
+import { PARSER_FLAG, SlashCommandParser } from './slash-commands/SlashCommandParser.js';
+import { SlashCommandParserError } from './slash-commands/SlashCommandParserError.js';
 import { getMessageTimeStamp } from './RossAscends-mods.js';
 import { hideChatMessageRange } from './chats.js';
 import { getContext, saveMetadataDebounced } from './extensions.js';
@@ -50,247 +52,1027 @@ import { decodeTextTokens, getFriendlyTokenizerName, getTextTokens, getTokenCoun
 import { debounce, delay, isFalseBoolean, isTrueBoolean, stringToRange, trimToEndSentence, trimToStartSentence, waitUntilCondition } from './utils.js';
 import { registerVariableCommands, resolveVariable } from './variables.js';
 import { background_settings } from './backgrounds.js';
+import { SlashCommandScope } from './slash-commands/SlashCommandScope.js';
+import { SlashCommandClosure } from './slash-commands/SlashCommandClosure.js';
+import { SlashCommandClosureResult } from './slash-commands/SlashCommandClosureResult.js';
+import { AutoCompleteNameResult } from './autocomplete/AutoCompleteNameResult.js';
+import { AutoCompleteOption } from './autocomplete/AutoCompleteOption.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from './slash-commands/SlashCommandArgument.js';
+import { AutoComplete } from './autocomplete/AutoComplete.js';
+import { SlashCommand } from './slash-commands/SlashCommand.js';
+import { SlashCommandAbortController } from './slash-commands/SlashCommandAbortController.js';
+import { SlashCommandNamedArgumentAssignment } from './slash-commands/SlashCommandNamedArgumentAssignment.js';
+export {
+    executeSlashCommands, executeSlashCommandsWithOptions, getSlashCommandsHelp, registerSlashCommand,
+};
 
+export const parser = new SlashCommandParser();
 /**
- * @typedef {object} SlashCommand
- * @property {function} callback - The callback function to execute
- * @property {string} helpString - The help string for the command
- * @property {boolean} interruptsGeneration - Whether the command interrupts message generation
- * @property {boolean} purgeFromMessage - Whether the command should be purged from the message
+ * @deprecated Use SlashCommandParser.addCommandObject() instead
  */
+const registerSlashCommand = SlashCommandParser.addCommand.bind(SlashCommandParser);
+const getSlashCommandsHelp = parser.getHelpString.bind(parser);
 
-/**
- * Provides a parser for slash commands.
- */
-class SlashCommandParser {
-    static COMMENT_KEYWORDS = ['#', '/'];
-    static RESERVED_KEYWORDS = [
-        ...this.COMMENT_KEYWORDS,
-    ];
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: '?',
+    callback: helpCommandCallback,
+    aliases: ['help'],
+    unnamedArgumentList: [new SlashCommandArgument(
+        'help topic', ARGUMENT_TYPE.STRING, false, false, null, ['slash', 'format', 'hotkeys', 'macros'],
+    )],
+    helpString: 'Get help on macros, chat formatting and commands.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'name',
+    callback: setNameCallback,
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'persona', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: 'Sets user name and persona avatar (if set).',
+    aliases: ['persona'],
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'sync',
+    callback: syncCallback,
+    helpString: 'Syncs the user persona in user-attributed messages in the current chat.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'lock',
+    callback: bindCallback,
+    aliases: ['bind'],
+    helpString: 'Locks/unlocks a persona (name and avatar) to the current chat',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'bg',
+    callback: setBackgroundCallback,
+    aliases: ['background'],
+    returns: 'the current background',
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'filename', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: `
+        <div>
+            Sets a background according to the provided filename. Partial names allowed.
+        </div>
+        <div>
+            <strong>Example:</strong>
+            <ul>
+                <li>
+                    <pre><code>/bg beach.jpg</code></pre>
+                </li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'sendas',
+    callback: sendMessageAs,
+    namedArgumentList: [
+        new SlashCommandNamedArgument(
+            'name', 'Character name', [ARGUMENT_TYPE.STRING], true,
+        ),
+        new SlashCommandNamedArgument(
+            'compact', 'Use compact layout', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false', ['true', 'false'],
+        ),
+        SlashCommandNamedArgument.fromProps({
+            name: 'at',
+            description: 'position to insert the message',
+            typeList: [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME],
+        }),
+    ],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'text', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: `
+        <div>
+            Sends a message as a specific character. Uses the character avatar if it exists in the characters list.
+        </div>
+        <div>
+            <strong>Example:</strong>
+            <ul>
+                <li>
+                    <pre><code>/sendas name="Chloe" Hello, guys!</code></pre>
+                    will send "Hello, guys!" from "Chloe".
+                </li>
+            </ul>
+        </div>
+        <div>
+            If "compact" is set to true, the message is sent using a compact layout.
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'sys',
+    callback: sendNarratorMessage,
+    aliases: ['nar'],
+    namedArgumentList: [
+        new SlashCommandNamedArgument(
+            'compact',
+            'compact layout',
+            [ARGUMENT_TYPE.BOOLEAN],
+            false,
+            false,
+            'false',
+        ),
+        SlashCommandNamedArgument.fromProps({
+            name: 'at',
+            description: 'position to insert the message',
+            typeList: [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME],
+        }),
+    ],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'text', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: `
+        <div>
+            Sends a message as a system narrator.
+        </div>
+        <div>
+            If <code>compact</code> is set to <code>true</code>, the message is sent using a compact layout.
+        </div>
+        <div>
+            <strong>Example:</strong>
+            <ul>
+                <li>
+                    <pre><code>/sys The sun sets in the west.</code></pre>
+                </li>
+                <li>
+                    <pre><code>/sys compact=true A brief note.</code></pre>
+                </li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'sysname',
+    callback: setNarratorName,
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'name', [ARGUMENT_TYPE.STRING], false,
+        ),
+    ],
+    helpString: 'Sets a name for future system narrator messages in this chat (display only). Default: System. Leave empty to reset.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'comment',
+    callback: sendCommentMessage,
+    namedArgumentList: [
+        new SlashCommandNamedArgument(
+            'compact',
+            'Whether to use a compact layout',
+            [ARGUMENT_TYPE.BOOLEAN],
+            false,
+            false,
+            'false',
+        ),
+        SlashCommandNamedArgument.fromProps({
+            name: 'at',
+            description: 'position to insert the message',
+            typeList: [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME],
+        }),
+    ],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'text',
+            [ARGUMENT_TYPE.STRING],
+            true,
+        ),
+    ],
+    helpString: `
+        <div>
+            Adds a note/comment message not part of the chat.
+        </div>
+        <div>
+            If <code>compact</code> is set to <code>true</code>, the message is sent using a compact layout.
+        </div>
+        <div>
+            <strong>Example:</strong>
+            <ul>
+                <li>
+                    <pre><code>/comment This is a comment</code></pre>
+                </li>
+                <li>
+                    <pre><code>/comment compact=true This is a compact comment</code></pre>
+                </li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'single',
+    callback: setStoryModeCallback,
+    aliases: ['story'],
+    helpString: 'Sets the message style to single document mode without names or avatars visible.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'bubble',
+    callback: setBubbleModeCallback,
+    aliases: ['bubbles'],
+    helpString: 'Sets the message style to bubble chat mode.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'flat',
+    callback: setFlatModeCallback,
+    aliases: ['default'],
+    helpString: 'Sets the message style to flat chat mode.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'continue',
+    callback: continueChatCallback,
+    aliases: ['cont'],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'prompt', [ARGUMENT_TYPE.STRING], false,
+        ),
+    ],
+    helpString: `
+        <div>
+            Continues the last message in the chat, with an optional additional prompt.
+        </div>
+        <div>
+            <strong>Example:</strong>
+            <ul>
+                <li>
+                    <pre><code>/continue</code></pre>
+                    Continues the chat with no additional prompt.
+                </li>
+                <li>
+                    <pre><code>/continue Let's explore this further...</code></pre>
+                    Continues the chat with the provided prompt.
+                </li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'go',
+    callback: goToCharacterCallback,
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'name', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: 'Opens up a chat with the character or group by its name',
+    aliases: ['char'],
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'sysgen',
+    callback: generateSystemMessage,
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'prompt', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: 'Generates a system message using a specified prompt.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'ask',
+    callback: askCharacter,
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'character name', [ARGUMENT_TYPE.STRING], true,
+        ),
+        new SlashCommandArgument(
+            'prompt', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: 'Asks a specified character card a prompt. Character name and prompt have to be separated by a new line.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'delname',
+    callback: deleteMessagesByNameCallback,
+    namedArgumentList: [],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'name', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    aliases: ['cancel'],
+    helpString: `
+        <div>
+            Deletes all messages attributed to a specified name.
+        </div>
+        <div>
+            <strong>Example:</strong>
+            <ul>
+                <li>
+                    <pre><code>/delname John</code></pre>
+                </li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'send',
+    callback: sendUserMessageCallback,
+    namedArgumentList: [
+        new SlashCommandNamedArgument(
+            'compact',
+            'whether to use a compact layout',
+            [ARGUMENT_TYPE.BOOLEAN],
+            false,
+            false,
+            'false',
+        ),
+        SlashCommandNamedArgument.fromProps({
+            name: 'at',
+            description: 'position to insert the message',
+            typeList: [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME],
+        }),
+        new SlashCommandNamedArgument(
+            'name',
+            'display name',
+            [ARGUMENT_TYPE.STRING, ARGUMENT_TYPE.VARIABLE_NAME],
+            false,
+            false,
+            '{{user}}',
+        ),
+    ],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'text',
+            [ARGUMENT_TYPE.STRING],
+            true,
+        ),
+    ],
+    helpString: `
+        <div>
+            Adds a user message to the chat log without triggering a generation.
+        </div>
+        <div>
+            If <code>compact</code> is set to <code>true</code>, the message is sent using a compact layout.
+        </div>
+        <div>
+            If <code>name</code> is set, it will be displayed as the message sender. Can be an empty for no name.
+        </div>
+        <div>
+            <strong>Example:</strong>
+            <ul>
+                <li>
+                    <pre><code>/send Hello there!</code></pre>
+                </li>
+                <li>
+                    <pre><code>/send compact=true Hi</code></pre>
+                </li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'trigger',
+    callback: triggerGenerationCallback,
+    namedArgumentList: [
+        new SlashCommandNamedArgument(
+            'await',
+            'Whether to await for the triggered generation before continuing',
+            [ARGUMENT_TYPE.BOOLEAN],
+            false,
+            false,
+            'false',
+        ),
+    ],
+    helpString: `
+        <div>
+            Triggers a message generation. If in group, can trigger a message for the specified group member index or name.
+        </div>
+        <div>
+            If <code>await=true</code> named argument is passed, the command will await for the triggered generation before continuing.
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'hide',
+    callback: hideMessageCallback,
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'message index or range', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.RANGE], true,
+        ),
+    ],
+    helpString: 'Hides a chat message from the prompt.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'unhide',
+    callback: unhideMessageCallback,
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'message index or range', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.RANGE], true,
+        ),
+    ],
+    helpString: 'Unhides a message from the prompt.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'disable',
+    callback: disableGroupMemberCallback,
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'member index or name', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: 'Disables a group member from being drafted for replies.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'enable',
+    callback: enableGroupMemberCallback,
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'member index or name', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: 'Enables a group member to be drafted for replies.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'memberadd',
+    callback: addGroupMemberCallback,
+    aliases: ['addmember'],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'character name', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: `
+        <div>
+            Adds a new group member to the group chat.
+        </div>
+        <div>
+            <strong>Example:</strong>
+            <ul>
+                <li>
+                    <pre><code>/memberadd John Doe</code></pre>
+                </li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'memberremove',
+    callback: removeGroupMemberCallback,
+    aliases: ['removemember'],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'member index or name', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: `
+        <div>
+            Removes a group member from the group chat.
+        </div>
+        <div>
+            <strong>Example:</strong>
+            <ul>
+                <li>
+                    <pre><code>/memberremove 2</code></pre>
+                    <pre><code>/memberremove John Doe</code></pre>
+                </li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'memberup',
+    callback: moveGroupMemberUpCallback,
+    aliases: ['upmember'],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'member index or name', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: 'Moves a group member up in the group chat list.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'memberdown',
+    callback: moveGroupMemberDownCallback,
+    aliases: ['downmember'],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'member index or name', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: 'Moves a group member down in the group chat list.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'peek',
+    callback: peekCallback,
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'message index or range', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.RANGE], false, true,
+        ),
+    ],
+    helpString: `
+        <div>
+            Shows a group member character card without switching chats.
+        </div>
+        <div>
+            <strong>Examples:</strong>
+            <ul>
+                <li>
+                    <pre><code>/peek 5</code></pre>
+                    Shows the character card for the 5th message.
+                </li>
+                <li>
+                    <pre><code>/peek 2-5</code></pre>
+                    Shows the character cards for messages 2 through 5.
+                </li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'delswipe',
+    callback: deleteSwipeCallback,
+    aliases: ['swipedel'],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            '1-based swipe id', [ARGUMENT_TYPE.NUMBER],
+        ),
+    ],
+    helpString: `
+        <div>
+            Deletes a swipe from the last chat message. If swipe id is not provided, it deletes the current swipe.
+        </div>
+        <div>
+            <strong>Example:</strong>
+            <ul>
+                <li>
+                    <pre><code>/delswipe</code></pre>
+                    Deletes the current swipe.
+                </li>
+                <li>
+                    <pre><code>/delswipe 2</code></pre>
+                    Deletes the second swipe from the last chat message.
+                </li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'echo',
+    callback: echoCallback,
+    returns: 'the text',
+    namedArgumentList: [
+        new SlashCommandNamedArgument(
+            'title', 'title of the toast message', [ARGUMENT_TYPE.STRING], false,
+        ),
+        new SlashCommandNamedArgument(
+            'severity', 'severity level of the toast message', [ARGUMENT_TYPE.STRING], false, false, null, ['info', 'warning', 'error', 'success'],
+        ),
+    ],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'text', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: `
+        <div>
+            Echoes the provided text to a toast message. Useful for pipes debugging.
+        </div>
+        <div>
+            <strong>Example:</strong>
+            <ul>
+                <li>
+                    <pre><code>/echo title="My Message" severity=info This is an info message</code></pre>
+                </li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'gen',
+    callback: generateCallback,
+    returns: 'generated text',
+    namedArgumentList: [
+        new SlashCommandNamedArgument(
+            'lock', 'lock user input during generation', [ARGUMENT_TYPE.BOOLEAN], false, false, null, ['on', 'off'],
+        ),
+        new SlashCommandNamedArgument(
+            'name', 'in-prompt name for instruct mode', [ARGUMENT_TYPE.STRING], false, false, 'System',
+        ),
+        new SlashCommandNamedArgument(
+            'length', 'API response length in tokens', [ARGUMENT_TYPE.NUMBER], false,
+        ),
+        new SlashCommandNamedArgument(
+            'as', 'role of the output prompt', [ARGUMENT_TYPE.STRING], false, false, 'system', ['system', 'char'],
+        ),
+    ],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'prompt', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: `
+        <div>
+            Generates text using the provided prompt and passes it to the next command through the pipe, optionally locking user input while generating and allowing to configure the in-prompt name for instruct mode (default = "System").
+        </div>
+        <div>
+            "as" argument controls the role of the output prompt: system (default) or char. If "length" argument is provided as a number in tokens, allows to temporarily override an API response length.
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'genraw',
+    callback: generateRawCallback,
+    returns: 'generated text',
+    namedArgumentList: [
+        new SlashCommandNamedArgument(
+            'lock', 'lock user input during generation', [ARGUMENT_TYPE.BOOLEAN], false, false, null, ['on', 'off'],
+        ),
+        new SlashCommandNamedArgument(
+            'instruct', 'use instruct mode', [ARGUMENT_TYPE.BOOLEAN], false, false, 'on', ['on', 'off'],
+        ),
+        new SlashCommandNamedArgument(
+            'stop', 'one-time custom stop strings', [ARGUMENT_TYPE.LIST], false,
+        ),
+        new SlashCommandNamedArgument(
+            'as', 'role of the output prompt', [ARGUMENT_TYPE.STRING], false, false, 'system', ['system', 'char'],
+        ),
+        new SlashCommandNamedArgument(
+            'system', 'system prompt at the start', [ARGUMENT_TYPE.STRING], false,
+        ),
+        new SlashCommandNamedArgument(
+            'length', 'API response length in tokens', [ARGUMENT_TYPE.NUMBER], false,
+        ),
+    ],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'prompt', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: `
+        <div>
+            Generates text using the provided prompt and passes it to the next command through the pipe, optionally locking user input while generating. Does not include chat history or character card.
+        </div>
+        <div>
+            Use instruct=off to skip instruct formatting, e.g. <pre><code>/genraw instruct=off Why is the sky blue?</code></pre>
+        </div>
+        <div>
+            Use stop=... with a JSON-serialized array to add one-time custom stop strings, e.g. <pre><code>/genraw stop=["\\n"] Say hi</code></pre>
+        </div>
+        <div>
+            "as" argument controls the role of the output prompt: system (default) or char. "system" argument adds an (optional) system prompt at the start.
+        </div>
+        <div>
+            If "length" argument is provided as a number in tokens, allows to temporarily override an API response length.
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'addswipe',
+    callback: addSwipeCallback,
+    aliases: ['swipeadd'],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'text', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: 'Adds a swipe to the last chat message.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'abort',
+    callback: abortCallback,
+    helpString: 'Aborts the slash command batch execution.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'fuzzy',
+    callback: fuzzyCallback,
+    returns: 'first matching item',
+    namedArgumentList: [
+        new SlashCommandNamedArgument(
+            'list', 'list of items to match against', [ARGUMENT_TYPE.LIST], true,
+        ),
+        new SlashCommandNamedArgument(
+            'threshold', 'fuzzy match threshold (0.0 to 1.0)', [ARGUMENT_TYPE.NUMBER], false, false, '0.4',
+        ),
+    ],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'text to search', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: `
+        <div>
+            Performs a fuzzy match of each item in the <code>list</code> against the <code>text to search</code>.
+            If any item matches, then its name is returned. If no item matches the text, no value is returned.
+        </div>
+        <div>
+            The optional <code>threshold</code> (default is 0.4) allows control over the match strictness.
+            A low value (min 0.0) means the match is very strict.
+            At 1.0 (max) the match is very loose and will match anything.
+        </div>
+        <div>
+            The returned value passes to the next command through the pipe.
+        </div>
+        <div>
+            <strong>Example:</strong>
+            <ul>
+                <li>
+                    <pre><code>/fuzzy list=["a","b","c"] threshold=0.4 abc</code></pre>
+                </li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'pass',
+    callback: (_, arg) => arg,
+    returns: 'the provided value',
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'text', [ARGUMENT_TYPE.STRING, ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.BOOLEAN, ARGUMENT_TYPE.LIST, ARGUMENT_TYPE.DICTIONARY, ARGUMENT_TYPE.CLOSURE], true,
+        ),
+    ],
+    aliases: ['return'],
+    helpString: `
+        <div>
+            <pre><span class="monospace">/pass (text)</span> – passes the text to the next command through the pipe.</pre>
+        </div>
+        <div>
+            <strong>Example:</strong>
+            <ul>
+                <li><pre><code>/pass Hello world</code></pre></li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'delay',
+    callback: delayCallback,
+    aliases: ['wait', 'sleep'],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'milliseconds', [ARGUMENT_TYPE.NUMBER], true,
+        ),
+    ],
+    helpString: `
+        <div>
+            Delays the next command in the pipe by the specified number of milliseconds.
+        </div>
+        <div>
+            <strong>Example:</strong>
+            <ul>
+                <li>
+                    <pre><code>/delay 1000</code></pre>
+                </li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'input',
+    aliases: ['prompt'],
+    callback: inputCallback,
+    returns: 'user input',
+    namedArgumentList: [
+        new SlashCommandNamedArgument(
+            'default', 'default value of the input field', [ARGUMENT_TYPE.STRING], false, false, '"string"',
+        ),
+        new SlashCommandNamedArgument(
+            'large', 'show large input field', [ARGUMENT_TYPE.BOOLEAN], false, false, 'off', ['on', 'off'],
+        ),
+        new SlashCommandNamedArgument(
+            'wide', 'show wide input field', [ARGUMENT_TYPE.BOOLEAN], false, false, 'off', ['on', 'off'],
+        ),
+        new SlashCommandNamedArgument(
+            'okButton', 'text for the ok button', [ARGUMENT_TYPE.STRING], false,
+        ),
+        new SlashCommandNamedArgument(
+            'rows', 'number of rows for the input field', [ARGUMENT_TYPE.NUMBER], false,
+        ),
+    ],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'text to display', [ARGUMENT_TYPE.STRING], false,
+        ),
+    ],
+    helpString: `
+        <div>
+            Shows a popup with the provided text and an input field.
+            The <code>default</code> argument is the default value of the input field, and the text argument is the text to display.
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'run',
+    aliases: ['call', 'exec'],
+    callback: runCallback,
+    returns: 'result of the executed closure of QR',
+    namedArgumentList: [
+        new SlashCommandNamedArgument(
+            'args', 'named arguments', [ARGUMENT_TYPE.STRING, ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.BOOLEAN, ARGUMENT_TYPE.LIST, ARGUMENT_TYPE.DICTIONARY], false, true,
+        ),
+    ],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'scoped variable or qr label', [ARGUMENT_TYPE.VARIABLE_NAME, ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: `
+        <div>
+            Runs a closure from a scoped variable, or a Quick Reply with the specified name from a currently active preset or from another preset.
+            Named arguments can be referenced in a QR with <code>{{arg::key}}</code>.
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'messages',
+    callback: getMessagesCallback,
+    aliases: ['message'],
+    namedArgumentList: [
+        new SlashCommandNamedArgument(
+            'names', 'show message author names', [ARGUMENT_TYPE.BOOLEAN], false, false, 'off', ['off', 'on'],
+        ),
+    ],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'message index or range', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.RANGE], false, true,
+        ),
+    ],
+    returns: 'the specified message or range of messages as a string',
+    helpString: `
+        <div>
+            Returns the specified message or range of messages as a string.
+        </div>
+        <div>
+            <strong>Examples:</strong>
+            <ul>
+                <li>
+                    <pre><code>/messages 10</code></pre>
+                    Returns the 10th message.
+                </li>
+                <li>
+                    <pre><code>/messages names=on 5-10</code></pre>
+                    Returns messages 5 through 10 with author names.
+                </li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'setinput',
+    callback: setInputCallback,
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'text', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: `
+        <div>
+            Sets the user input to the specified text and passes it to the next command through the pipe.
+        </div>
+        <div>
+            <strong>Example:</strong>
+            <ul>
+                <li>
+                    <pre><code>/setinput Hello world</code></pre>
+                </li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'popup',
+    callback: popupCallback,
+    returns: 'popup text',
+    namedArgumentList: [
+        new SlashCommandNamedArgument(
+            'large', 'show large popup', [ARGUMENT_TYPE.BOOLEAN], false, false, null, ['on', 'off'],
+        ),
+        new SlashCommandNamedArgument(
+            'wide', 'show wide popup', [ARGUMENT_TYPE.BOOLEAN], false, false, null, ['on', 'off'],
+        ),
+        new SlashCommandNamedArgument(
+            'okButton', 'text for the OK button', [ARGUMENT_TYPE.STRING], false,
+        ),
+    ],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'text', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: `
+        <div>
+            Shows a blocking popup with the specified text and buttons.
+            Returns the popup text.
+        </div>
+        <div>
+            <strong>Example:</strong>
+            <ul>
+                <li>
+                    <pre><code>/popup large=on wide=on okButton="Submit" Enter some text:</code></pre>
+                </li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'buttons',
+    callback: buttonsCallback,
+    returns: 'clicked button label',
+    namedArgumentList: [
+        new SlashCommandNamedArgument(
+            'labels', 'button labels', [ARGUMENT_TYPE.LIST], true,
+        ),
+    ],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'text', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: `
+        <div>
+            Shows a blocking popup with the specified text and buttons.
+            Returns the clicked button label into the pipe or empty string if canceled.
+        </div>
+        <div>
+            <strong>Example:</strong>
+            <ul>
+                <li>
+                    <pre><code>/buttons labels=["Yes","No"] Do you want to continue?</code></pre>
+                </li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'trimtokens',
+    callback: trimTokensCallback,
+    returns: 'trimmed text',
+    namedArgumentList: [
+        new SlashCommandNamedArgument(
+            'limit', 'number of tokens to keep', [ARGUMENT_TYPE.NUMBER], true,
+        ),
+        new SlashCommandNamedArgument(
+            'direction', 'trim direction', [ARGUMENT_TYPE.STRING], true, false, null, ['start', 'end'],
+        ),
+    ],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'text', [ARGUMENT_TYPE.STRING], false,
+        ),
+    ],
+    helpString: `
+        <div>
+            Trims the start or end of text to the specified number of tokens.
+        </div>
+        <div>
+            <strong>Example:</strong>
+            <ul>
+                <li>
+                    <pre><code>/trimtokens limit=5 direction=start This is a long sentence with many words</code></pre>
+                </li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'trimstart',
+    callback: trimStartCallback,
+    returns: 'trimmed text',
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'text', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: `
+        <div>
+            Trims the text to the start of the first full sentence.
+        </div>
+        <div>
+            <strong>Example:</strong>
+            <ul>
+                <li>
+                    <pre><code>/trimstart This is a sentence. And here is another sentence.</code></pre>
+                </li>
+            </ul>
+        </div>
+    `,
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'trimend',
+    callback: trimEndCallback,
+    returns: 'trimmed text',
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'text', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: 'Trims the text to the end of the last full sentence.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'inject',
+    callback: injectCallback,
+    namedArgumentList: [
+        new SlashCommandNamedArgument(
+            'id', 'injection ID', [ARGUMENT_TYPE.STRING], true,
+        ),
+        new SlashCommandNamedArgument(
+            'position', 'injection position', [ARGUMENT_TYPE.STRING], false, false, 'after', ['before', 'after', 'chat'],
+        ),
+        new SlashCommandNamedArgument(
+            'depth', 'injection depth', [ARGUMENT_TYPE.NUMBER], false, false, '4',
+        ),
+        new SlashCommandNamedArgument(
+            'scan', 'include injection content into World Info scans', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false',
+        ),
+        new SlashCommandNamedArgument(
+            'role', 'role for in-chat injections', [ARGUMENT_TYPE.STRING], false, false, 'system', ['system', 'user', 'assistant'],
+        ),
+    ],
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'text', [ARGUMENT_TYPE.STRING], false,
+        ),
+    ],
+    helpString: 'Injects a text into the LLM prompt for the current chat. Requires a unique injection ID. Positions: "before" main prompt, "after" main prompt, in-"chat" (default: after). Depth: injection depth for the prompt (default: 4). Role: role for in-chat injections (default: system). Scan: include injection content into World Info scans (default: false).',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'listinjects',
+    callback: listInjectsCallback,
+    helpString: 'Lists all script injections for the current chat.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'flushinjects',
+    callback: flushInjectsCallback,
+    helpString: 'Removes all script injections for the current chat.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'tokens',
+    callback: (_, text) => getTokenCountAsync(text),
+    returns: 'number of tokens',
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'text', [ARGUMENT_TYPE.STRING], true,
+        ),
+    ],
+    helpString: 'Counts the number of tokens in the provided text.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'model',
+    callback: modelCallback,
+    returns: 'current model',
+    unnamedArgumentList: [
+        new SlashCommandArgument(
+            'model name', [ARGUMENT_TYPE.STRING], false,
+        ),
+    ],
+    helpString: 'Sets the model for the current API. Gets the current model name if no argument is provided.',
+}));
 
-    constructor() {
-        /**
-         * @type {Record<string, SlashCommand>} - Slash commands registered in the parser
-         */
-        this.commands = {};
-        /**
-         * @type {Record<string, string>} - Help strings for each command
-         */
-        this.helpStrings = {};
-    }
-
-    /**
-     * Adds a slash command to the parser.
-     * @param {string} command - The command name
-     * @param {function} callback - The callback function to execute
-     * @param {string[]} aliases - The command aliases
-     * @param {string} helpString - The help string for the command
-     * @param {boolean} [interruptsGeneration] - Whether the command interrupts message generation
-     * @param {boolean} [purgeFromMessage] - Whether the command should be purged from the message
-     * @returns {void}
-     */
-    addCommand(command, callback, aliases, helpString = '', interruptsGeneration = false, purgeFromMessage = true) {
-        const fnObj = { callback, helpString, interruptsGeneration, purgeFromMessage };
-
-        if ([command, ...aliases].some(x => SlashCommandParser.RESERVED_KEYWORDS.includes(x))) {
-            console.error('ERROR: Reserved slash command keyword used!');
-            return;
-        }
-
-        if ([command, ...aliases].some(x => Object.hasOwn(this.commands, x))) {
-            console.trace('WARN: Duplicate slash command registered!');
-        }
-
-        this.commands[command] = fnObj;
-
-        if (Array.isArray(aliases)) {
-            aliases.forEach((alias) => {
-                this.commands[alias] = fnObj;
-            });
-        }
-
-        let stringBuilder = `<span class="monospace">/${command}</span> ${helpString} `;
-        if (Array.isArray(aliases) && aliases.length) {
-            let aliasesString = `(alias: ${aliases.map(x => `<span class="monospace">/${x}</span>`).join(', ')})`;
-            stringBuilder += aliasesString;
-        }
-        this.helpStrings[command] = stringBuilder;
-    }
-
-    /**
-     * Parses a slash command to extract the command name, the (named) arguments and the remaining text
-     * @param {string} text - Slash command text
-     * @returns {{command: SlashCommand, args: object, value: string, commandName: string}} - The parsed command, its arguments and the remaining text
-     */
-    parse(text) {
-        // Parses a command even when spaces are present in arguments
-        // /buttons labels=["OK","I do not accept"] some text
-        // /fuzzy list=[ "red pink" , "yellow" ] threshold=" 0.6 " he yelled when the color was reddish and not pink | /echo
-        const excludedFromRegex = ['sendas'];
-        let command = '';
-        const argObj = {};
-        let unnamedArg = '';
-
-        // extract the command " /fuzzy   " => "fuzzy"
-        text = text.trim();
-        let remainingText = '';
-        const commandArgPattern = /^\/([^\s]+)\s*(.*)$/s;
-        let match = commandArgPattern.exec(text);
-        if (match !== null && match[1].length > 0) {
-            command = match[1];
-            remainingText = match[2];
-            console.debug('command:' + command);
-        }
-
-        if (SlashCommandParser.COMMENT_KEYWORDS.includes(command)) {
-            return {
-                commandName: command,
-                command: {
-                    callback: () => { },
-                    helpString: '',
-                    interruptsGeneration: false,
-                    purgeFromMessage: true,
-                },
-                args: {},
-                value: '',
-            };
-        }
-
-        // parse the rest of the string to extract named arguments, the remainder is the "unnamedArg" which is usually text, like the prompt to send
-        while (remainingText.length > 0) {
-            // does the remaining text is like     nameArg=[value]   or  nameArg=[value,value] or  nameArg=[  value , value , value]
-            // where value can be a string like   " this is some text "  , note previously it was not possible to have have spaces
-            // where value can be a scalar like   AScalar
-            // where value can be a number like   +9   -1005.44
-            // where value can be a macro like    {{getvar::name}}
-            const namedArrayArgPattern = /^(\w+)=\[\s*(((?<quote>["'])[^"]*(\k<quote>)|{{[^}]*}}|[+-]?\d*\.?\d+|\w*)\s*,?\s*)+\]/s;
-            match = namedArrayArgPattern.exec(remainingText);
-            if (match !== null && match[0].length > 0) {
-                //console.log(`matching: ${match[0]}`);
-                const posFirstEqual = match[0].indexOf('=');
-                const key = match[0].substring(0, posFirstEqual).trim();
-                const value = match[0].substring(posFirstEqual + 1).trim();
-
-                // Remove the quotes around the value, if any
-                argObj[key] = value.replace(/(^")|("$)/g, '');
-                remainingText = remainingText.slice(match[0].length + 1).trim();
-                continue;
-            }
-
-            // does the remaining text is like     nameArg=value
-            // where value can be a string like   " this is some text "  , note previously it was not possible to have have spaces
-            // where value can be a scalar like   AScalar
-            // where value can be a number like   +9   -1005.44
-            // where value can be a macro like    {{getvar::name}}
-            const namedScalarArgPattern = /^(\w+)=(((?<quote>["'])[^"]*(\k<quote>)|{{[^}]*}}|[+-]?\d*\.?\d+|\w*))/s;
-            match = namedScalarArgPattern.exec(remainingText);
-            if (match !== null && match[0].length > 0) {
-                //console.log(`matching: ${match[0]}`);
-                const posFirstEqual = match[0].indexOf('=');
-                const key = match[0].substring(0, posFirstEqual).trim();
-                const value = match[0].substring(posFirstEqual + 1).trim();
-
-                // Remove the quotes around the value, if any
-                argObj[key] = value.replace(/(^")|("$)/g, '');
-                remainingText = remainingText.slice(match[0].length + 1).trim();
-                continue;
-            }
-
-            // the remainder that matches no named argument is the "unamedArg" previously mentioned
-            unnamedArg = remainingText.trim();
-            remainingText = '';
-        }
-
-        // Excluded commands format in their own function
-        if (!excludedFromRegex.includes(command)) {
-            unnamedArg = getRegexedString(
-                unnamedArg,
-                regex_placement.SLASH_COMMAND,
-            );
-        }
-
-        // your weird complex command is now transformed into a juicy tiny text or something useful :)
-        if (this.commands[command]) {
-            return { command: this.commands[command], args: argObj, value: unnamedArg, commandName: command };
-        }
-
-        return null;
-    }
-
-    getHelpString() {
-        const listItems = Object
-            .entries(this.helpStrings)
-            .sort((a, b) => a[0].localeCompare(b[0]))
-            .map(x => x[1])
-            .map(x => `<li>${x}</li>`)
-            .join('\n');
-        return `<p>Slash commands:</p><ol>${listItems}</ol>
-        <small>Slash commands can be batched into a single input by adding a pipe character | at the end, and then writing a new slash command.</small>
-        <ul><li><small>Example:</small><code>/cut 1 | /sys Hello, | /continue</code></li>
-        <li>This will remove the first message in chat, send a system message that starts with 'Hello,', and then ask the AI to continue the message.</li></ul>`;
-    }
-}
-
-const parser = new SlashCommandParser();
-
-/**
- * Registers a slash command in the parser.
-* @type {(command: string, callback: function, aliases: string[], helpString: string, interruptsGeneration?: boolean, purgeFromMessage?: boolean) => void}
-*/
-export const registerSlashCommand = parser.addCommand.bind(parser);
-export const getSlashCommandsHelp = parser.getHelpString.bind(parser);
-
-parser.addCommand('?', helpCommandCallback, ['help'], ' – get help on macros, chat formatting and commands', true, true);
-parser.addCommand('name', setNameCallback, ['persona'], '<span class="monospace">(name)</span> – sets user name and persona avatar (if set)', true, true);
-parser.addCommand('sync', syncCallback, [], ' – syncs the user persona in user-attributed messages in the current chat', true, true);
-parser.addCommand('lock', bindCallback, ['bind'], ' – locks/unlocks a persona (name and avatar) to the current chat', true, true);
-parser.addCommand('bg', setBackgroundCallback, ['background'], '<span class="monospace">(filename)</span> – sets a background according to filename, partial names allowed', false, true);
-parser.addCommand('sendas', sendMessageAs, [], '<span class="monospace">[name=CharName compact=true/false (text)] – sends message as a specific character. Uses character avatar if it exists in the characters list. Example that will send "Hello, guys!" from "Chloe": <tt>/sendas name="Chloe" Hello, guys!</tt>. If "compact" is set to true, the message is sent using a compact layout.', true, true);
-parser.addCommand('sys', sendNarratorMessage, ['nar'], '<span class="monospace">[compact=true/false (text)]</span> – sends message as a system narrator. If "compact" is set to true, the message is sent using a compact layout.', false, true);
-parser.addCommand('sysname', setNarratorName, [], '<span class="monospace">(name)</span> – sets a name for future system narrator messages in this chat (display only). Default: System. Leave empty to reset.', true, true);
-parser.addCommand('comment', sendCommentMessage, [], '<span class="monospace">[compact=true/false (text)]</span> – adds a note/comment message not part of the chat. If "compact" is set to true, the message is sent using a compact layout.', false, true);
-parser.addCommand('single', setStoryModeCallback, ['story'], ' – sets the message style to single document mode without names or avatars visible', true, true);
-parser.addCommand('bubble', setBubbleModeCallback, ['bubbles'], ' – sets the message style to bubble chat mode', true, true);
-parser.addCommand('flat', setFlatModeCallback, ['default'], ' – sets the message style to flat chat mode', true, true);
-parser.addCommand('continue', continueChatCallback, ['cont'], '<span class="monospace">[prompt]</span> – continues the last message in the chat, with an optional additional prompt', true, true);
-parser.addCommand('go', goToCharacterCallback, ['char'], '<span class="monospace">(name)</span> – opens up a chat with the character or group by its name', true, true);
-parser.addCommand('sysgen', generateSystemMessage, [], '<span class="monospace">(prompt)</span> – generates a system message using a specified prompt', true, true);
-parser.addCommand('ask', askCharacter, [], '<span class="monospace">(prompt)</span> – asks a specified character card a prompt', true, true);
-parser.addCommand('delname', deleteMessagesByNameCallback, ['cancel'], '<span class="monospace">(name)</span> – deletes all messages attributed to a specified name', true, true);
-parser.addCommand('send', sendUserMessageCallback, [], '<span class="monospace">[compact=true/false (text)]</span> – adds a user message to the chat log without triggering a generation. If "compact" is set to true, the message is sent using a compact layout.', true, true);
-parser.addCommand('trigger', triggerGenerationCallback, [], ' <span class="monospace">await=true/false</span> – triggers a message generation. If in group, can trigger a message for the specified group member index or name. If <code>await=true</code> named argument passed, the command will await for the triggered generation before continuing.', true, true);
-parser.addCommand('hide', hideMessageCallback, [], '<span class="monospace">(message index or range)</span> – hides a chat message from the prompt', true, true);
-parser.addCommand('unhide', unhideMessageCallback, [], '<span class="monospace">(message index or range)</span> – unhides a message from the prompt', true, true);
-parser.addCommand('disable', disableGroupMemberCallback, [], '<span class="monospace">(member index or name)</span> – disables a group member from being drafted for replies', true, true);
-parser.addCommand('enable', enableGroupMemberCallback, [], '<span class="monospace">(member index or name)</span> – enables a group member to be drafted for replies', true, true);
-parser.addCommand('memberadd', addGroupMemberCallback, ['addmember'], '<span class="monospace">(character name)</span> – adds a new group member to the group chat', true, true);
-parser.addCommand('memberremove', removeGroupMemberCallback, ['removemember'], '<span class="monospace">(member index or name)</span> – removes a group member from the group chat', true, true);
-parser.addCommand('memberup', moveGroupMemberUpCallback, ['upmember'], '<span class="monospace">(member index or name)</span> – moves a group member up in the group chat list', true, true);
-parser.addCommand('memberdown', moveGroupMemberDownCallback, ['downmember'], '<span class="monospace">(member index or name)</span> – moves a group member down in the group chat list', true, true);
-parser.addCommand('peek', peekCallback, [], '<span class="monospace">(message index or range)</span> – shows a group member character card without switching chats', true, true);
-parser.addCommand('delswipe', deleteSwipeCallback, ['swipedel'], '<span class="monospace">(optional 1-based id)</span> – deletes a swipe from the last chat message. If swipe id not provided - deletes the current swipe.', true, true);
-parser.addCommand('echo', echoCallback, [], '<span class="monospace">(title=string severity=info/warning/error/success [text])</span> – echoes the text to toast message. Useful for pipes debugging.', true, true);
-//parser.addCommand('#', (_, value) => '', [], ' – a comment, does nothing, e.g. <tt>/# the next three commands switch variables a and b</tt>', true, true);
-parser.addCommand('gen', generateCallback, [], '<span class="monospace">(lock=on/off name="System" length=123 [prompt])</span> – generates text using the provided prompt and passes it to the next command through the pipe, optionally locking user input while generating and allowing to configure the in-prompt name for instruct mode (default = "System"). "as" argument controls the role of the output prompt: system (default) or char. If "length" argument is provided as a number in tokens, allows to temporarily override an API response length.', true, true);
-parser.addCommand('genraw', generateRawCallback, [], '<span class="monospace">(lock=on/off instruct=on/off stop=[] as=system/char system="system prompt" length=123 [prompt])</span> – generates text using the provided prompt and passes it to the next command through the pipe, optionally locking user input while generating. Does not include chat history or character card. Use instruct=off to skip instruct formatting, e.g. <tt>/genraw instruct=off Why is the sky blue?</tt>. Use stop=... with a JSON-serialized array to add one-time custom stop strings, e.g. <tt>/genraw stop=["\\n"] Say hi</tt>. "as" argument controls the role of the output prompt: system (default) or char. "system" argument adds an (optional) system prompt at the start. If "length" argument is provided as a number in tokens, allows to temporarily override an API response length.', true, true);
-parser.addCommand('addswipe', addSwipeCallback, ['swipeadd'], '<span class="monospace">(text)</span> – adds a swipe to the last chat message.', true, true);
-parser.addCommand('abort', abortCallback, [], ' – aborts the slash command batch execution', true, true);
-parser.addCommand('fuzzy', fuzzyCallback, [], 'list=["a","b","c"] threshold=0.4 (text to search) – performs a fuzzy match of each items of list within the text to search. If any item matches then its name is returned. If no item list matches the text to search then no value is returned. The optional threshold (default is 0.4) allows some control over the matching. A low value (min 0.0) means the match is very strict. At 1.0 (max) the match is very loose and probably matches anything. The returned value passes to the next command through the pipe.', true, true); parser.addCommand('pass', (_, arg) => arg, ['return'], '<span class="monospace">(text)</span> – passes the text to the next command through the pipe.', true, true);
-parser.addCommand('delay', delayCallback, ['wait', 'sleep'], '<span class="monospace">(milliseconds)</span> – delays the next command in the pipe by the specified number of milliseconds.', true, true);
-parser.addCommand('input', inputCallback, ['prompt'], '<span class="monospace">(default="string" large=on/off wide=on/off okButton="string" rows=number [text])</span> – Shows a popup with the provided text and an input field. The default argument is the default value of the input field, and the text argument is the text to display.', true, true);
-parser.addCommand('run', runCallback, ['call', 'exec'], '<span class="monospace">[key1=value key2=value ...] ([qrSet.]qrLabel)</span> – runs a Quick Reply with the specified name from a currently active preset or from another preset, named arguments can be referenced in a QR with {{arg::key}}.', true, true);
-parser.addCommand('messages', getMessagesCallback, ['message'], '<span class="monospace">(names=off/on [message index or range])</span> – returns the specified message or range of messages as a string.', true, true);
-parser.addCommand('setinput', setInputCallback, [], '<span class="monospace">(text)</span> – sets the user input to the specified text and passes it to the next command through the pipe.', true, true);
-parser.addCommand('popup', popupCallback, [], '<span class="monospace">(large=on/off wide=on/off okButton="string" text)</span> – shows a blocking popup with the specified text and buttons. Returns the input value into the pipe or empty string if canceled.', true, true);
-parser.addCommand('buttons', buttonsCallback, [], '<span class="monospace">labels=["a","b"] (text)</span> – shows a blocking popup with the specified text and buttons. Returns the clicked button label into the pipe or empty string if canceled.', true, true);
-parser.addCommand('trimtokens', trimTokensCallback, [], '<span class="monospace">limit=number (direction=start/end [text])</span> – trims the start or end of text to the specified number of tokens.', true, true);
-parser.addCommand('trimstart', trimStartCallback, [], '<span class="monospace">(text)</span> – trims the text to the start of the first full sentence.', true, true);
-parser.addCommand('trimend', trimEndCallback, [], '<span class="monospace">(text)</span> – trims the text to the end of the last full sentence.', true, true);
-parser.addCommand('inject', injectCallback, [], '<span class="monospace">id=injectId (position=before/after/chat depth=number scan=true/false role=system/user/assistant [text])</span> – injects a text into the LLM prompt for the current chat. Requires a unique injection ID. Positions: "before" main prompt, "after" main prompt, in-"chat" (default: after). Depth: injection depth for the prompt (default: 4). Role: role for in-chat injections (default: system). Scan: include injection content into World Info scans (default: false).', true, true);
-parser.addCommand('listinjects', listInjectsCallback, [], ' – lists all script injections for the current chat.', true, true);
-parser.addCommand('flushinjects', flushInjectsCallback, [], ' – removes all script injections for the current chat.', true, true);
-parser.addCommand('tokens', (_, text) => getTokenCountAsync(text), [], '<span class="monospace">(text)</span> – counts the number of tokens in the text.', true, true);
-parser.addCommand('model', modelCallback, [], '<span class="monospace">(model name)</span> – sets the model for the current API. Gets the current model name if no argument is provided.', true, true);
 registerVariableCommands();
 
 const NARRATOR_NAME_KEY = 'narrator_name';
@@ -407,7 +1189,7 @@ export function processChatSlashCommands() {
 }
 
 function setInputCallback(_, value) {
-    $('#send_textarea').val(value || '').trigger('input');
+    $('#send_textarea').val(value || '')[0].dispatchEvent(new Event('input', { bubbles:true }));
     return value;
 }
 
@@ -560,26 +1342,43 @@ function getMessagesCallback(args, value) {
 
 async function runCallback(args, name) {
     if (!name) {
-        toastr.warning('No name provided for /run command');
-        return '';
+        throw new Error('No name provided for /run command');
+    }
+
+    /**@type {SlashCommandScope} */
+    const scope = args._scope;
+    if (scope.existsVariable(name)) {
+        const closure = scope.getVariable(name);
+        if (!(closure instanceof SlashCommandClosure)) {
+            throw new Error(`"${name}" is not callable.`);
+        }
+        closure.scope.parent = scope;
+        closure.argumentList.forEach(arg=>{
+            if (Object.keys(args).includes(arg.name)) {
+                const providedArg = new SlashCommandNamedArgumentAssignment();
+                providedArg.name = arg.name;
+                providedArg.value = args[arg.name];
+                closure.providedArgumentList.push(providedArg);
+            }
+        });
+        const result = await closure.execute();
+        return result.pipe;
     }
 
     if (typeof window['executeQuickReplyByName'] !== 'function') {
-        toastr.warning('Quick Reply extension is not loaded');
-        return '';
+        throw new Error('Quick Reply extension is not loaded');
     }
 
     try {
         name = name.trim();
         return await window['executeQuickReplyByName'](name, args);
     } catch (error) {
-        toastr.error(`Error running Quick Reply "${name}": ${error.message}`, 'Error');
-        return '';
+        throw new Error(`Error running Quick Reply "${name}": ${error.message}`, 'Error');
     }
 }
 
 function abortCallback() {
-    $('#send_textarea').val('').trigger('input');
+    $('#send_textarea').val('')[0].dispatchEvent(new Event('input', { bubbles:true }));
     throw new Error('/abort command executed');
 }
 
@@ -697,7 +1496,7 @@ async function generateRawCallback(args, value) {
     }
 
     // Prevent generate recursion
-    $('#send_textarea').val('').trigger('input');
+    $('#send_textarea').val('')[0].dispatchEvent(new Event('input', { bubbles:true }));
     const lock = isTrueBoolean(args?.lock);
     const as = args?.as || 'system';
     const quietToLoud = as === 'char';
@@ -727,7 +1526,7 @@ async function generateCallback(args, value) {
     }
 
     // Prevent generate recursion
-    $('#send_textarea').val('').trigger('input');
+    $('#send_textarea').val('')[0].dispatchEvent(new Event('input', { bubbles:true }));
     const lock = isTrueBoolean(args?.lock);
     const as = args?.as || 'system';
     const quietToLoud = as === 'char';
@@ -863,7 +1662,7 @@ async function deleteSwipeCallback(_, arg) {
 
 async function askCharacter(_, text) {
     // Prevent generate recursion
-    $('#send_textarea').val('').trigger('input');
+    $('#send_textarea').val('')[0].dispatchEvent(new Event('input', { bubbles:true }));
 
     // Not supported in group chats
     // TODO: Maybe support group chats?
@@ -1174,7 +1973,7 @@ async function triggerGenerationCallback(args, value) {
         }
 
         // Prevent generate recursion
-        $('#send_textarea').val('').trigger('input');
+        $('#send_textarea').val('')[0].dispatchEvent(new Event('input', { bubbles:true }));
 
         let chid = undefined;
 
@@ -1340,7 +2139,7 @@ function continueChatCallback(_, prompt) {
         }
 
         // Prevent infinite recursion
-        $('#send_textarea').val('').trigger('input');
+        $('#send_textarea').val('')[0].dispatchEvent(new Event('input', { bubbles:true }));
         $('#option_continue').trigger('click', { fromSlashCommand: true, additionalPrompt: prompt });
     }, 1);
 
@@ -1348,7 +2147,7 @@ function continueChatCallback(_, prompt) {
 }
 
 export async function generateSystemMessage(_, prompt) {
-    $('#send_textarea').val('').trigger('input');
+    $('#send_textarea').val('')[0].dispatchEvent(new Event('input', { bubbles:true }));
 
     if (!prompt) {
         console.warn('WARN: No prompt provided for /sysgen command');
@@ -1777,164 +2576,257 @@ function modelCallback(_, model) {
     }
 }
 
+
+export let isExecutingCommandsFromChatInput = false;
+export let commandsFromChatInputAbortController;
+
+/**
+ * Show command execution pause/stop buttons next to chat input.
+ */
+export function activateScriptButtons() {
+    document.querySelector('#form_sheld').classList.add('isExecutingCommandsFromChatInput');
+}
+
+/**
+ * Hide command execution pause/stop buttons next to chat input.
+ */
+export function deactivateScriptButtons() {
+    document.querySelector('#form_sheld').classList.remove('isExecutingCommandsFromChatInput');
+}
+
+/**
+ * Toggle pause/continue command execution. Only for commands executed via chat input.
+ */
+export function pauseScriptExecution() {
+    if (commandsFromChatInputAbortController) {
+        if (commandsFromChatInputAbortController.signal.paused) {
+            commandsFromChatInputAbortController.continue('Clicked pause button');
+            document.querySelector('#form_sheld').classList.remove('script_paused');
+        } else {
+            commandsFromChatInputAbortController.pause('Clicked pause button');
+            document.querySelector('#form_sheld').classList.add('script_paused');
+        }
+    }
+}
+
+/**
+ * Stop command execution. Only for commands executed via chat input.
+ */
+export function stopScriptExecution() {
+    commandsFromChatInputAbortController?.abort('Clicked stop button');
+}
+
+/**
+ * Clear up command execution progress bar above chat input.
+ * @returns Promise<void>
+ */
+async function clearCommandProgress() {
+    if (isExecutingCommandsFromChatInput) return;
+    document.querySelector('#send_textarea').style.setProperty('--progDone', '1');
+    await delay(250);
+    if (isExecutingCommandsFromChatInput) return;
+    document.querySelector('#send_textarea').style.transition = 'none';
+    await delay(1);
+    document.querySelector('#send_textarea').style.setProperty('--prog', '0%');
+    document.querySelector('#send_textarea').style.setProperty('--progDone', '0');
+    document.querySelector('#form_sheld').classList.remove('script_success');
+    document.querySelector('#form_sheld').classList.remove('script_error');
+    document.querySelector('#form_sheld').classList.remove('script_aborted');
+    await delay(1);
+    document.querySelector('#send_textarea').style.transition = null;
+}
+/**
+ * Debounced version of clearCommandProgress.
+ */
+const clearCommandProgressDebounced = debounce(clearCommandProgress);
+
+/**
+ * @typedef ExecuteSlashCommandsOptions
+ * @prop {boolean} [handleParserErrors] (true) Whether to handle parser errors (show toast on error) or throw.
+ * @prop {SlashCommandScope} [scope] (null) The scope to be used when executing the commands.
+ * @prop {boolean} [handleExecutionErrors] (false) Whether to handle execution errors (show toast on error) or throw
+ * @prop {PARSER_FLAG[]} [parserFlags] (null) Parser flags to apply
+ * @prop {SlashCommandAbortController} [abortController] (null) Controller used to abort or pause command execution
+ * @prop {(done:number, total:number)=>void} [onProgress] (null) Callback to handle progress events
+ */
+
+/**
+ * @typedef ExecuteSlashCommandsOnChatInputOptions
+ * @prop {SlashCommandScope} [scope] (null) The scope to be used when executing the commands.
+ * @prop {PARSER_FLAG[]} [parserFlags] (null) Parser flags to apply
+ * @prop {boolean} [clearChatInput] (false) Whether to clear the chat input textarea
+ */
+
+/**
+ * Execute slash commands while showing progress indicator and pause/stop buttons on
+ * chat input.
+ * @param {string} text Slash command text
+ * @param {ExecuteSlashCommandsOnChatInputOptions} options
+ */
+export async function executeSlashCommandsOnChatInput(text, options = {}) {
+    if (isExecutingCommandsFromChatInput) return null;
+
+    options = Object.assign({
+        scope: null,
+        parserFlags: null,
+        clearChatInput: false,
+    }, options);
+
+    isExecutingCommandsFromChatInput = true;
+    commandsFromChatInputAbortController?.abort('processCommands was called');
+    activateScriptButtons();
+
+    /**@type {HTMLTextAreaElement}*/
+    const ta = document.querySelector('#send_textarea');
+
+    if (options.clearChatInput) {
+        ta.value = '';
+        ta.dispatchEvent(new Event('input', { bubbles:true }));
+    }
+
+    document.querySelector('#send_textarea').style.setProperty('--prog', '0%');
+    document.querySelector('#send_textarea').style.setProperty('--progDone', '0');
+    document.querySelector('#form_sheld').classList.remove('script_success');
+    document.querySelector('#form_sheld').classList.remove('script_error');
+    document.querySelector('#form_sheld').classList.remove('script_aborted');
+
+    /**@type {SlashCommandClosureResult} */
+    let result = null;
+    try {
+        commandsFromChatInputAbortController = new SlashCommandAbortController();
+        result = await executeSlashCommandsWithOptions(text, {
+            abortController: commandsFromChatInputAbortController,
+            onProgress: (done, total)=>ta.style.setProperty('--prog', `${done / total * 100}%`),
+        });
+        if (commandsFromChatInputAbortController.signal.aborted) {
+            document.querySelector('#form_sheld').classList.add('script_aborted');
+        } else {
+            document.querySelector('#form_sheld').classList.add('script_success');
+        }
+    } catch (e) {
+        document.querySelector('#form_sheld').classList.add('script_error');
+        toastr.error(e.message);
+        result = new SlashCommandClosureResult();
+        result.isError = true;
+        result.errorMessage = e.message;
+    } finally {
+        delay(1000).then(()=>clearCommandProgressDebounced());
+
+        commandsFromChatInputAbortController = null;
+        deactivateScriptButtons();
+        isExecutingCommandsFromChatInput = false;
+    }
+    return result;
+}
+
+/**
+ *
+ * @param {string} text Slash command text
+ * @param {ExecuteSlashCommandsOptions} [options]
+ * @returns {Promise<SlashCommandClosureResult>}
+ */
+async function executeSlashCommandsWithOptions(text, options = {}) {
+    if (!text) {
+        return null;
+    }
+    options = Object.assign({
+        handleParserErrors: true,
+        scope: null,
+        handleExecutionErrors: false,
+        parserFlags: null,
+        abortController: null,
+        onProgress: null,
+    }, options);
+
+    let closure;
+    try {
+        closure = parser.parse(text, true, options.parserFlags, options.abortController);
+        closure.scope.parent = options.scope;
+        closure.onProgress = options.onProgress;
+    } catch (e) {
+        if (options.handleParserErrors && e instanceof SlashCommandParserError) {
+            /**@type {SlashCommandParserError}*/
+            const ex = e;
+            const toast = `
+                <div>${ex.message}</div>
+                <div>Line: ${ex.line} Column: ${ex.column}</div>
+                <pre style="text-align:left;">${ex.hint}</pre>
+                `;
+            const clickHint = '<p>Click to see details</p>';
+            toastr.error(
+                `${toast}${clickHint}`,
+                'SlashCommandParserError',
+                { escapeHtml:false, timeOut: 10000, onclick:()=>callPopup(toast, 'text') },
+            );
+            const result = new SlashCommandClosureResult();
+            return result;
+        } else {
+            throw e;
+        }
+    }
+
+    try {
+        const result = await closure.execute();
+        if (result.isAborted) {
+            toastr.warning(result.abortReason, 'Command execution aborted');
+        }
+        return result;
+    } catch (e) {
+        if (options.handleExecutionErrors) {
+            toastr.error(e.message);
+            const result = new SlashCommandClosureResult();
+            result.isError = true;
+            result.errorMessage = e.message;
+            return result;
+        } else {
+            throw e;
+        }
+    }
+}
 /**
  * Executes slash commands in the provided text
+ * @deprecated Use executeSlashCommandWithOptions instead
  * @param {string} text Slash command text
- * @param {boolean} unescape Whether to unescape the batch separator
- * @returns {Promise<{interrupt: boolean, newText: string, pipe: string} | boolean>}
+ * @param {boolean} handleParserErrors Whether to handle parser errors (show toast on error) or throw
+ * @param {SlashCommandScope} scope The scope to be used when executing the commands.
+ * @param {boolean} handleExecutionErrors Whether to handle execution errors (show toast on error) or throw
+ * @param {PARSER_FLAG[]} parserFlags Parser flags to apply
+ * @param {SlashCommandAbortController} abortController Controller used to abort or pause command execution
+ * @param {(done:number, total:number)=>void} onProgress Callback to handle progress events
+ * @returns {Promise<SlashCommandClosureResult>}
  */
-export async function executeSlashCommands(text, unescape = false) {
-    if (!text) {
-        return false;
-    }
-
-    // Unescape the pipe character and macro braces
-    if (unescape) {
-        text = text.replace(/\\\|/g, '|');
-        text = text.replace(/\\\{/g, '{');
-        text = text.replace(/\\\}/g, '}');
-    }
-
-    // Hack to allow multi-line slash commands
-    // All slash command messages should begin with a slash
-    const placeholder = '\u200B'; // Use a zero-width space as a placeholder
-    const chars = text.split('');
-    for (let i = 1; i < chars.length; i++) {
-        if (chars[i] === '|' && chars[i - 1] !== '\\') {
-            chars[i] = placeholder;
-        }
-    }
-    const lines = chars.join('').split(placeholder).map(line => line.trim());
-    const linesToRemove = [];
-
-    let interrupt = false;
-    let pipeResult = '';
-
-    for (let index = 0; index < lines.length; index++) {
-        const trimmedLine = lines[index].trim();
-
-        if (!trimmedLine.startsWith('/')) {
-            continue;
-        }
-
-        const result = parser.parse(trimmedLine);
-
-        if (!result) {
-            continue;
-        }
-
-        // Skip comment commands. They don't run macros or interrupt pipes.
-        if (SlashCommandParser.COMMENT_KEYWORDS.includes(result.commandName)) {
-            result.command.purgeFromMessage && linesToRemove.push(lines[index]);
-            continue;
-        }
-
-        if (result.value && typeof result.value === 'string') {
-            result.value = substituteParams(result.value.trim());
-        }
-
-        console.debug('Slash command executing:', result);
-        let unnamedArg = result.value || pipeResult;
-
-        if (typeof result.args === 'object') {
-            for (let [key, value] of Object.entries(result.args)) {
-                if (typeof value === 'string') {
-                    value = substituteParams(value.trim());
-
-                    if (/{{pipe}}/i.test(value)) {
-                        value = value.replace(/{{pipe}}/i, pipeResult ?? '');
-                    }
-
-                    result.args[key] = value;
-                }
-            }
-        }
-
-        if (typeof unnamedArg === 'string') {
-            if (/{{pipe}}/i.test(unnamedArg)) {
-                unnamedArg = unnamedArg.replace(/{{pipe}}/i, pipeResult ?? '');
-            }
-
-            unnamedArg = unnamedArg
-                ?.replace(/\\\|/g, '|')
-                ?.replace(/\\\{/g, '{')
-                ?.replace(/\\\}/g, '}');
-        }
-
-        for (const [key, value] of Object.entries(result.args)) {
-            if (typeof value === 'string') {
-                result.args[key] = value
-                    .replace(/\\\|/g, '|')
-                    .replace(/\\\{/g, '{')
-                    .replace(/\\\}/g, '}');
-            }
-        }
-
-        pipeResult = await result.command.callback(result.args, unnamedArg);
-
-        if (result.command.interruptsGeneration) {
-            interrupt = true;
-        }
-
-        if (result.command.purgeFromMessage) {
-            linesToRemove.push(lines[index]);
-        }
-    }
-
-    const newText = lines.filter(x => linesToRemove.indexOf(x) === -1).join('\n');
-
-    return { interrupt, newText, pipe: pipeResult };
+async function executeSlashCommands(text, handleParserErrors = true, scope = null, handleExecutionErrors = false, parserFlags = null, abortController = null, onProgress = null) {
+    return executeSlashCommandsWithOptions(text, {
+        handleParserErrors,
+        scope,
+        handleExecutionErrors,
+        parserFlags,
+        abortController,
+        onProgress,
+    });
 }
 
 /**
- * @param {JQuery<HTMLElement>} textarea
+ *
+ * @param {HTMLTextAreaElement} textarea The textarea to receive autocomplete
+ * @param {Boolean} isFloating Whether to show the auto complete as a floating window (e.g., large QR editor)
  */
-function setSlashCommandAutocomplete(textarea) {
-    const nativeElement = textarea.get(0);
-    let width = 0;
-
-    function setItemWidth() {
-        width = nativeElement.offsetWidth - 5;
-    }
-
-    const setWidthDebounced = debounce(setItemWidth);
-    $(window).on('resize', () => setWidthDebounced());
-
-    textarea.autocomplete({
-        source: (input, output) => {
-            // Only show for slash commands (requiring at least 1 letter after the slash) and if there's no space
-            if (!input.term.startsWith('/') || input.term.includes(' ')) {
-                output([]);
-                return;
-            }
-
-            const slashCommand = input.term.toLowerCase().substring(1); // Remove the slash
-            const result = Object
-                .keys(parser.helpStrings) // Get all slash commands
-                .filter(x => x.startsWith(slashCommand)) // Filter by the input
-                .sort((a, b) => a.localeCompare(b)) // Sort alphabetically
-                .slice(0, 50) // Limit to 50 results
-                .map(x => ({ label: parser.helpStrings[x], value: `/${x} ` })); // Map to the help string
-
-            output(result); // Return the results
-        },
-        select: (e, u) => {
-            // unfocus the input
-            $(e.target).val(u.item.value);
-        },
-        minLength: 1,
-        position: { my: 'left bottom', at: 'left top', collision: 'none' },
-    });
-
-    textarea.autocomplete('instance')._renderItem = function (ul, item) {
-        const content = $('<div></div>').html(item.label);
-        return $('<li>').width(width).append(content).appendTo(ul);
-    };
-
-    setItemWidth();
+export async function setSlashCommandAutoComplete(textarea, isFloating = false) {
+    const parser = new SlashCommandParser();
+    const ac = new AutoComplete(
+        textarea,
+        () => ac.text[0] == '/',
+        async(text, index) => await parser.getNameAt(text, index),
+        isFloating,
+    );
 }
-
-jQuery(function () {
-    const textarea = $('#send_textarea');
-    setSlashCommandAutocomplete(textarea);
+/**@type {HTMLTextAreaElement} */
+const sendTextarea = document.querySelector('#send_textarea');
+setSlashCommandAutoComplete(sendTextarea);
+sendTextarea.addEventListener('input', () => {
+    if (sendTextarea.value[0] == '/') {
+        sendTextarea.style.fontFamily = 'monospace';
+    } else {
+        sendTextarea.style.fontFamily = null;
+    }
 });
diff --git a/public/scripts/slash-commands/SlashCommand.js b/public/scripts/slash-commands/SlashCommand.js
new file mode 100644
index 000000000..905967373
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommand.js
@@ -0,0 +1,359 @@
+import { SlashCommandArgument, SlashCommandNamedArgument } from './SlashCommandArgument.js';
+import { SlashCommandClosure } from './SlashCommandClosure.js';
+
+
+
+export class SlashCommand {
+    /**
+     * Creates a SlashCommand from a properties object.
+     * @param {Object} props
+     * @param {string} [props.name]
+     * @param {(namedArguments:Object.<string,string|SlashCommandClosure>, unnamedArguments:string|SlashCommandClosure|(string|SlashCommandClosure)[])=>string|SlashCommandClosure|void|Promise<string|SlashCommandClosure|void>} [props.callback]
+     * @param {string} [props.helpString]
+     * @param {boolean} [props.splitUnnamedArgument]
+     * @param {string[]} [props.aliases]
+     * @param {string} [props.returns]
+     * @param {SlashCommandNamedArgument[]} [props.namedArgumentList]
+     * @param {SlashCommandArgument[]} [props.unnamedArgumentList]
+     */
+    static fromProps(props) {
+        const instance = Object.assign(new this(), props);
+        return instance;
+    }
+
+
+
+
+    /**@type {string}*/ name;
+    /**@type {(namedArguments:Object<string, string|SlashCommandClosure>, unnamedArguments:string|SlashCommandClosure|(string|SlashCommandClosure)[])=>string|SlashCommandClosure|Promise<string|SlashCommandClosure>}*/ callback;
+    /**@type {string}*/ helpString;
+    /**@type {boolean}*/ splitUnnamedArgument = false;
+    /**@type {string[]}*/ aliases = [];
+    /**@type {string}*/ returns;
+    /**@type {SlashCommandNamedArgument[]}*/ namedArgumentList = [];
+    /**@type {SlashCommandArgument[]}*/ unnamedArgumentList = [];
+
+    /**@type {Object.<string, HTMLElement>}*/ helpCache = {};
+    /**@type {Object.<string, DocumentFragment>}*/ helpDetailsCache = {};
+
+    renderHelpItem(key = null) {
+        key = key ?? this.name;
+        if (!this.helpCache[key]) {
+            const typeIcon = '[/]';
+            const li = document.createElement('li'); {
+                li.classList.add('item');
+                const type = document.createElement('span'); {
+                    type.classList.add('type');
+                    type.classList.add('monospace');
+                    type.textContent = typeIcon;
+                    li.append(type);
+                }
+                const specs = document.createElement('span'); {
+                    specs.classList.add('specs');
+                    const name = document.createElement('span'); {
+                        name.classList.add('name');
+                        name.classList.add('monospace');
+                        name.textContent = '/';
+                        key.split('').forEach(char=>{
+                            const span = document.createElement('span'); {
+                                span.textContent = char;
+                                name.append(span);
+                            }
+                        });
+                        specs.append(name);
+                    }
+                    const body = document.createElement('span'); {
+                        body.classList.add('body');
+                        const args = document.createElement('span'); {
+                            args.classList.add('arguments');
+                            for (const arg of this.namedArgumentList) {
+                                const argItem = document.createElement('span'); {
+                                    argItem.classList.add('argument');
+                                    argItem.classList.add('namedArgument');
+                                    if (!arg.isRequired || (arg.defaultValue ?? false)) argItem.classList.add('optional');
+                                    if (arg.acceptsMultiple) argItem.classList.add('multiple');
+                                    const name = document.createElement('span'); {
+                                        name.classList.add('argument-name');
+                                        name.textContent = arg.name;
+                                        argItem.append(name);
+                                    }
+                                    if (arg.enumList.length > 0) {
+                                        const enums = document.createElement('span'); {
+                                            enums.classList.add('argument-enums');
+                                            for (const e of arg.enumList) {
+                                                const enumItem = document.createElement('span'); {
+                                                    enumItem.classList.add('argument-enum');
+                                                    enumItem.textContent = e.value;
+                                                    enums.append(enumItem);
+                                                }
+                                            }
+                                            argItem.append(enums);
+                                        }
+                                    } else {
+                                        const types = document.createElement('span'); {
+                                            types.classList.add('argument-types');
+                                            for (const t of arg.typeList) {
+                                                const type = document.createElement('span'); {
+                                                    type.classList.add('argument-type');
+                                                    type.textContent = t;
+                                                    types.append(type);
+                                                }
+                                            }
+                                            argItem.append(types);
+                                        }
+                                    }
+                                    args.append(argItem);
+                                }
+                            }
+                            for (const arg of this.unnamedArgumentList) {
+                                const argItem = document.createElement('span'); {
+                                    argItem.classList.add('argument');
+                                    argItem.classList.add('unnamedArgument');
+                                    if (!arg.isRequired || (arg.defaultValue ?? false)) argItem.classList.add('optional');
+                                    if (arg.acceptsMultiple) argItem.classList.add('multiple');
+                                    if (arg.enumList.length > 0) {
+                                        const enums = document.createElement('span'); {
+                                            enums.classList.add('argument-enums');
+                                            for (const e of arg.enumList) {
+                                                const enumItem = document.createElement('span'); {
+                                                    enumItem.classList.add('argument-enum');
+                                                    enumItem.textContent = e.value;
+                                                    enums.append(enumItem);
+                                                }
+                                            }
+                                            argItem.append(enums);
+                                        }
+                                    } else {
+                                        const types = document.createElement('span'); {
+                                            types.classList.add('argument-types');
+                                            for (const t of arg.typeList) {
+                                                const type = document.createElement('span'); {
+                                                    type.classList.add('argument-type');
+                                                    type.textContent = t;
+                                                    types.append(type);
+                                                }
+                                            }
+                                            argItem.append(types);
+                                        }
+                                    }
+                                    args.append(argItem);
+                                }
+                            }
+                            body.append(args);
+                        }
+                        const returns = document.createElement('span'); {
+                            returns.classList.add('returns');
+                            returns.textContent = this.returns ?? 'void';
+                            body.append(returns);
+                        }
+                        specs.append(body);
+                    }
+                    li.append(specs);
+                }
+                const help = document.createElement('span'); {
+                    help.classList.add('help');
+                    const content = document.createElement('span'); {
+                        content.classList.add('helpContent');
+                        content.innerHTML = this.helpString;
+                        const text = content.textContent;
+                        content.innerHTML = '';
+                        content.textContent = text;
+                        help.append(content);
+                    }
+                    li.append(help);
+                }
+                if (this.aliases.length > 0) {
+                    const aliases = document.createElement('span'); {
+                        aliases.classList.add('aliases');
+                        aliases.append(' (alias: ');
+                        for (const aliasName of this.aliases) {
+                            const alias = document.createElement('span'); {
+                                alias.classList.add('monospace');
+                                alias.textContent = `/${aliasName}`;
+                                aliases.append(alias);
+                            }
+                        }
+                        aliases.append(')');
+                        // li.append(aliases);
+                    }
+                }
+            }
+            this.helpCache[key] = li;
+        }
+        return /**@type {HTMLElement}*/(this.helpCache[key].cloneNode(true));
+    }
+
+    renderHelpDetails(key = null) {
+        key = key ?? this.name;
+        if (!this.helpDetailsCache[key]) {
+            const frag = document.createDocumentFragment();
+            const cmd = this;
+            const namedArguments = cmd.namedArgumentList ?? [];
+            const unnamedArguments = cmd.unnamedArgumentList ?? [];
+            const returnType = cmd.returns ?? 'void';
+            const helpString = cmd.helpString ?? 'NO DETAILS';
+            const aliasList = [cmd.name, ...(cmd.aliases ?? [])].filter(it=>it != key);
+            const specs = document.createElement('div'); {
+                specs.classList.add('specs');
+                const name = document.createElement('div'); {
+                    name.classList.add('name');
+                    name.classList.add('monospace');
+                    name.title = 'command name';
+                    name.textContent = `/${key}`;
+                    specs.append(name);
+                }
+                const body = document.createElement('div'); {
+                    body.classList.add('body');
+                    const args = document.createElement('ul'); {
+                        args.classList.add('arguments');
+                        for (const arg of namedArguments) {
+                            const listItem = document.createElement('li'); {
+                                listItem.classList.add('argumentItem');
+                                const argSpec = document.createElement('div'); {
+                                    argSpec.classList.add('argumentSpec');
+                                    const argItem = document.createElement('div'); {
+                                        argItem.classList.add('argument');
+                                        argItem.classList.add('namedArgument');
+                                        argItem.title = `${arg.isRequired ? '' : 'optional '}named argument`;
+                                        if (!arg.isRequired || (arg.defaultValue ?? false)) argItem.classList.add('optional');
+                                        if (arg.acceptsMultiple) argItem.classList.add('multiple');
+                                        const name = document.createElement('span'); {
+                                            name.classList.add('argument-name');
+                                            name.title = `${argItem.title} - name`;
+                                            name.textContent = arg.name;
+                                            argItem.append(name);
+                                        }
+                                        if (arg.enumList.length > 0) {
+                                            const enums = document.createElement('span'); {
+                                                enums.classList.add('argument-enums');
+                                                enums.title = `${argItem.title} - accepted values`;
+                                                for (const e of arg.enumList) {
+                                                    const enumItem = document.createElement('span'); {
+                                                        enumItem.classList.add('argument-enum');
+                                                        enumItem.textContent = e.value;
+                                                        enums.append(enumItem);
+                                                    }
+                                                }
+                                                argItem.append(enums);
+                                            }
+                                        } else {
+                                            const types = document.createElement('span'); {
+                                                types.classList.add('argument-types');
+                                                types.title = `${argItem.title} - accepted types`;
+                                                for (const t of arg.typeList) {
+                                                    const type = document.createElement('span'); {
+                                                        type.classList.add('argument-type');
+                                                        type.textContent = t;
+                                                        types.append(type);
+                                                    }
+                                                }
+                                                argItem.append(types);
+                                            }
+                                        }
+                                        argSpec.append(argItem);
+                                    }
+                                    if (arg.defaultValue !== null) {
+                                        const argDefault = document.createElement('div'); {
+                                            argDefault.classList.add('argument-default');
+                                            argDefault.title = 'default value';
+                                            argDefault.textContent = arg.defaultValue.toString();
+                                            argSpec.append(argDefault);
+                                        }
+                                    }
+                                    listItem.append(argSpec);
+                                }
+                                const desc = document.createElement('div'); {
+                                    desc.classList.add('argument-description');
+                                    desc.innerHTML = arg.description;
+                                    listItem.append(desc);
+                                }
+                                args.append(listItem);
+                            }
+                        }
+                        for (const arg of unnamedArguments) {
+                            const listItem = document.createElement('li'); {
+                                listItem.classList.add('argumentItem');
+                                const argItem = document.createElement('div'); {
+                                    argItem.classList.add('argument');
+                                    argItem.classList.add('unnamedArgument');
+                                    argItem.title = `${arg.isRequired ? '' : 'optional '}unnamed argument`;
+                                    if (!arg.isRequired || (arg.defaultValue ?? false)) argItem.classList.add('optional');
+                                    if (arg.acceptsMultiple) argItem.classList.add('multiple');
+                                    if (arg.enumList.length > 0) {
+                                        const enums = document.createElement('span'); {
+                                            enums.classList.add('argument-enums');
+                                            enums.title = `${argItem.title} - accepted values`;
+                                            for (const e of arg.enumList) {
+                                                const enumItem = document.createElement('span'); {
+                                                    enumItem.classList.add('argument-enum');
+                                                    enumItem.textContent = e.value;
+                                                    enums.append(enumItem);
+                                                }
+                                            }
+                                            argItem.append(enums);
+                                        }
+                                    } else {
+                                        const types = document.createElement('span'); {
+                                            types.classList.add('argument-types');
+                                            types.title = `${argItem.title} - accepted types`;
+                                            for (const t of arg.typeList) {
+                                                const type = document.createElement('span'); {
+                                                    type.classList.add('argument-type');
+                                                    type.textContent = t;
+                                                    types.append(type);
+                                                }
+                                            }
+                                            argItem.append(types);
+                                        }
+                                    }
+                                    listItem.append(argItem);
+                                }
+                                const desc = document.createElement('div'); {
+                                    desc.classList.add('argument-description');
+                                    desc.innerHTML = arg.description;
+                                    listItem.append(desc);
+                                }
+                                args.append(listItem);
+                            }
+                        }
+                        body.append(args);
+                    }
+                    const returns = document.createElement('span'); {
+                        returns.classList.add('returns');
+                        returns.title = [null, undefined, 'void'].includes(returnType) ? 'command does not return anything' : 'return value';
+                        returns.textContent = returnType ?? 'void';
+                        body.append(returns);
+                    }
+                    specs.append(body);
+                }
+                frag.append(specs);
+            }
+            const help = document.createElement('span'); {
+                help.classList.add('help');
+                help.innerHTML = helpString;
+                for (const code of help.querySelectorAll('pre > code')) {
+                    code.classList.add('language-stscript');
+                    hljs.highlightElement(code);
+                }
+                frag.append(help);
+            }
+            if (aliasList.length > 0) {
+                const aliases = document.createElement('span'); {
+                    aliases.classList.add('aliases');
+                    for (const aliasName of aliasList) {
+                        const alias = document.createElement('span'); {
+                            alias.classList.add('alias');
+                            alias.textContent = `/${aliasName}`;
+                            aliases.append(alias);
+                        }
+                    }
+                    frag.append(aliases);
+                }
+            }
+            this.helpDetailsCache[key] = frag;
+        }
+        const frag = document.createDocumentFragment();
+        frag.append(this.helpDetailsCache[key].cloneNode(true));
+        return frag;
+    }
+}
diff --git a/public/scripts/slash-commands/SlashCommandAbortController.js b/public/scripts/slash-commands/SlashCommandAbortController.js
new file mode 100644
index 000000000..f65bbb14d
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommandAbortController.js
@@ -0,0 +1,27 @@
+export class SlashCommandAbortController {
+    /**@type {SlashCommandAbortSignal}*/ signal;
+
+
+    constructor() {
+        this.signal = new SlashCommandAbortSignal();
+    }
+    abort(reason = 'No reason.') {
+        this.signal.aborted = true;
+        this.signal.reason = reason;
+    }
+    pause(reason = 'No reason.') {
+        this.signal.paused = true;
+        this.signal.reason = reason;
+    }
+    continue(reason = 'No reason.') {
+        this.signal.paused = false;
+        this.signal.reason = reason;
+    }
+}
+
+export class SlashCommandAbortSignal {
+    /**@type {boolean}*/ paused = false;
+    /**@type {boolean}*/ aborted = false;
+    /**@type {string}*/ reason = null;
+
+}
diff --git a/public/scripts/slash-commands/SlashCommandArgument.js b/public/scripts/slash-commands/SlashCommandArgument.js
new file mode 100644
index 000000000..21985b9a5
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommandArgument.js
@@ -0,0 +1,121 @@
+import { SlashCommandClosure } from './SlashCommandClosure.js';
+import { SlashCommandEnumValue } from './SlashCommandEnumValue.js';
+
+
+
+/**@readonly*/
+/**@enum {string}*/
+export const ARGUMENT_TYPE = {
+    'STRING': 'string',
+    'NUMBER': 'number',
+    'RANGE': 'range',
+    'BOOLEAN': 'bool',
+    'VARIABLE_NAME': 'varname',
+    'CLOSURE': 'closure',
+    'SUBCOMMAND': 'subcommand',
+    'LIST': 'list',
+    'DICTIONARY': 'dictionary',
+};
+
+
+
+export class SlashCommandArgument {
+    /**
+     * Creates an unnamed argument from a poperties object.
+     * @param {Object} props
+     * @param {string} props.description description of the argument
+     * @param {ARGUMENT_TYPE|ARGUMENT_TYPE[]} props.typeList default: ARGUMENT_TYPE.STRING - list of accepted types (from ARGUMENT_TYPE)
+     * @param {boolean} [props.isRequired] default: false - whether the argument is required (false = optional argument)
+     * @param {boolean} [props.acceptsMultiple] default: false - whether argument accepts multiple values
+     * @param {string|SlashCommandClosure} [props.defaultValue] default value if no value is provided
+     * @param {string|SlashCommandEnumValue|(string|SlashCommandEnumValue)[]} [props.enumList] list of accepted values
+     */
+    static fromProps(props) {
+        return new SlashCommandArgument(
+            props.description,
+            props.typeList ?? [ARGUMENT_TYPE.STRING],
+            props.isRequired ?? false,
+            props.acceptsMultiple ?? false,
+            props.defaultValue ?? null,
+            props.enumList ?? [],
+        );
+    }
+
+
+
+
+    /**@type {string}*/ description;
+    /**@type {ARGUMENT_TYPE[]}*/ typeList = [];
+    /**@type {boolean}*/ isRequired = false;
+    /**@type {boolean}*/ acceptsMultiple = false;
+    /**@type {string|SlashCommandClosure}*/ defaultValue;
+    /**@type {SlashCommandEnumValue[]}*/ enumList = [];
+
+
+    /**
+     * @param {string} description
+     * @param {ARGUMENT_TYPE|ARGUMENT_TYPE[]} types
+     * @param {string|SlashCommandClosure} defaultValue
+     * @param {string|SlashCommandEnumValue|(string|SlashCommandEnumValue)[]} enums
+     */
+    constructor(description, types, isRequired = false, acceptsMultiple = false, defaultValue = null, enums = []) {
+        this.description = description;
+        this.typeList = types ? Array.isArray(types) ? types : [types] : [];
+        this.isRequired = isRequired ?? false;
+        this.acceptsMultiple = acceptsMultiple ?? false;
+        this.defaultValue = defaultValue;
+        this.enumList = (enums ? Array.isArray(enums) ? enums : [enums] : []).map(it=>{
+            if (it instanceof SlashCommandEnumValue) return it;
+            return new SlashCommandEnumValue(it);
+        });
+    }
+}
+
+
+
+export class SlashCommandNamedArgument extends SlashCommandArgument {
+    /**
+     * Creates an unnamed argument from a poperties object.
+     * @param {Object} props
+     * @param {string} props.name the argument's name
+     * @param {string[]} [props.aliasList] list of aliases
+     * @param {string} props.description description of the argument
+     * @param {ARGUMENT_TYPE|ARGUMENT_TYPE[]} props.typeList default: ARGUMENT_TYPE.STRING - list of accepted types (from ARGUMENT_TYPE)
+     * @param {boolean} [props.isRequired] default: false - whether the argument is required (false = optional argument)
+     * @param {boolean} [props.acceptsMultiple] default: false - whether argument accepts multiple values
+     * @param {string|SlashCommandClosure} [props.defaultValue] default value if no value is provided
+     * @param {string|SlashCommandEnumValue|(string|SlashCommandEnumValue)[]} [props.enumList] list of accepted values
+     */
+    static fromProps(props) {
+        return new SlashCommandNamedArgument(
+            props.name,
+            props.description,
+            props.typeList ?? [ARGUMENT_TYPE.STRING],
+            props.isRequired ?? false,
+            props.acceptsMultiple ?? false,
+            props.defaultValue ?? null,
+            props.enumList ?? [],
+            props.aliasList ?? [],
+        );
+    }
+
+
+
+
+    /**@type {string}*/ name;
+    /**@type {string[]}*/ aliasList = [];
+
+
+    /**
+     * @param {string} name
+     * @param {string} description
+     * @param {ARGUMENT_TYPE|ARGUMENT_TYPE[]} types
+     * @param {string|SlashCommandClosure} defaultValue
+     * @param {string|SlashCommandEnumValue|(string|SlashCommandEnumValue)[]} enums
+     */
+    constructor(name, description, types, isRequired = false, acceptsMultiple = false, defaultValue = null, enums = [], aliases = []) {
+        super(description, types, isRequired, acceptsMultiple, defaultValue, enums);
+        this.name = name;
+        this.aliasList = aliases ? Array.isArray(aliases) ? aliases : [aliases] : [];
+    }
+}
diff --git a/public/scripts/slash-commands/SlashCommandAutoCompleteNameResult.js b/public/scripts/slash-commands/SlashCommandAutoCompleteNameResult.js
new file mode 100644
index 000000000..c6bd0d1fb
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommandAutoCompleteNameResult.js
@@ -0,0 +1,165 @@
+import { AutoCompleteNameResult } from '../autocomplete/AutoCompleteNameResult.js';
+import { AutoCompleteOption } from '../autocomplete/AutoCompleteOption.js';
+import { AutoCompleteSecondaryNameResult } from '../autocomplete/AutoCompleteSecondaryNameResult.js';
+import { SlashCommand } from './SlashCommand.js';
+import { SlashCommandNamedArgument } from './SlashCommandArgument.js';
+import { SlashCommandClosure } from './SlashCommandClosure.js';
+import { SlashCommandCommandAutoCompleteOption } from './SlashCommandCommandAutoCompleteOption.js';
+import { SlashCommandEnumAutoCompleteOption } from './SlashCommandEnumAutoCompleteOption.js';
+import { SlashCommandExecutor } from './SlashCommandExecutor.js';
+import { SlashCommandNamedArgumentAutoCompleteOption } from './SlashCommandNamedArgumentAutoCompleteOption.js';
+
+export class SlashCommandAutoCompleteNameResult extends AutoCompleteNameResult {
+    /**@type {SlashCommandExecutor}*/ executor;
+
+    /**
+     * @param {SlashCommandExecutor} executor
+     * @param {Object.<string,SlashCommand>} commands
+     */
+    constructor(executor, commands) {
+        super(
+            executor.name,
+            executor.start,
+            Object
+                .keys(commands)
+                .map(key=>new SlashCommandCommandAutoCompleteOption(commands[key], key))
+            ,
+            false,
+            ()=>`No matching slash commands for "/${this.name}"`,
+            ()=>'No slash commands found!',
+        );
+        this.executor = executor;
+    }
+
+    getSecondaryNameAt(text, index, isSelect) {
+        const namedResult = this.getNamedArgumentAt(text, index, isSelect);
+        if (!namedResult || namedResult.optionList.length == 0 || !namedResult.isRequired) {
+            const unnamedResult = this.getUnnamedArgumentAt(text, index, isSelect);
+            if (!namedResult) return unnamedResult;
+            if (namedResult && unnamedResult) {
+                const combinedResult = new AutoCompleteSecondaryNameResult(
+                    namedResult.name,
+                    namedResult.start,
+                    [...namedResult.optionList, ...unnamedResult.optionList],
+                );
+                combinedResult.isRequired = namedResult.isRequired || unnamedResult.isRequired;
+                return combinedResult;
+            }
+        }
+        return namedResult;
+    }
+
+    getNamedArgumentAt(text, index, isSelect) {
+        const notProvidedNamedArguments = this.executor.command.namedArgumentList.filter(arg=>!this.executor.namedArgumentList.find(it=>it.name == arg.name));
+        let name;
+        let value;
+        let start;
+        let cmdArg;
+        let argAssign;
+        const unamedArgLength = this.executor.endUnnamedArgs - this.executor.startUnnamedArgs;
+        const namedArgsFollowedBySpace = text[this.executor.endNamedArgs] == ' ';
+        if (this.executor.startNamedArgs <= index && this.executor.endNamedArgs + (namedArgsFollowedBySpace ? 1 : 0) >= index) {
+            // cursor is somewhere within the named arguments (including final space)
+            argAssign = this.executor.namedArgumentList.find(it=>it.start <= index && it.end >= index);
+            if (argAssign) {
+                const [argName, ...v] = text.slice(argAssign.start, index).split(/(?<==)/);
+                name = argName;
+                value = v.join('');
+                start = argAssign.start;
+                cmdArg = this.executor.command.namedArgumentList.find(it=>[it.name, `${it.name}=`].includes(argAssign.name));
+                if (cmdArg) notProvidedNamedArguments.push(cmdArg);
+            } else {
+                name = '';
+                start = index;
+            }
+        } else if (unamedArgLength > 0 && index >= this.executor.startUnnamedArgs && index <= this.executor.endUnnamedArgs) {
+            // cursor is somewhere within the unnamed arguments
+            //TODO if index is in first array item and that is a string, treat it as an unfinished named arg
+            if (typeof this.executor.unnamedArgumentList[0].value == 'string') {
+                if (index <= this.executor.startUnnamedArgs + this.executor.unnamedArgumentList[0].value.length) {
+                    name = this.executor.unnamedArgumentList[0].value.slice(0, index - this.executor.startUnnamedArgs);
+                    start = this.executor.startUnnamedArgs;
+                } else {
+                    return null;
+                }
+            } else {
+                return null;
+            }
+        } else {
+            return null;
+        }
+
+        if (name.includes('=') && cmdArg) {
+            // if cursor is already behind "=" check for enums
+            /**@type {SlashCommandNamedArgument} */
+            if (cmdArg && cmdArg.enumList?.length) {
+                if (isSelect && cmdArg.enumList.includes(value) && argAssign && argAssign.end == index) {
+                    return null;
+                }
+                const result = new AutoCompleteSecondaryNameResult(
+                    value,
+                    start + name.length,
+                    cmdArg.enumList.map(it=>new SlashCommandEnumAutoCompleteOption(it)),
+                    true,
+                );
+                result.isRequired = true;
+                return result;
+            }
+        }
+
+        if (notProvidedNamedArguments.length > 0) {
+            const result = new AutoCompleteSecondaryNameResult(
+                name,
+                start,
+                notProvidedNamedArguments.map(it=>new SlashCommandNamedArgumentAutoCompleteOption(it, this.executor.command)),
+                false,
+            );
+            result.isRequired = notProvidedNamedArguments.find(it=>it.isRequired) != null;
+            return result;
+        }
+
+        return null;
+    }
+
+    getUnnamedArgumentAt(text, index, isSelect) {
+        const lastArgIsBlank = this.executor.unnamedArgumentList.slice(-1)[0]?.value == '';
+        const notProvidedArguments = this.executor.command.unnamedArgumentList.slice(this.executor.unnamedArgumentList.length - (lastArgIsBlank ? 1 : 0));
+        let value;
+        let start;
+        let cmdArg;
+        let argAssign;
+        if (this.executor.startUnnamedArgs <= index && this.executor.endUnnamedArgs + 1 >= index) {
+            // cursor is somwehere in the unnamed args
+            const idx = this.executor.unnamedArgumentList.findIndex(it=>it.start <= index && it.end >= index);
+            if (idx > -1) {
+                argAssign = this.executor.unnamedArgumentList[idx];
+                cmdArg = this.executor.command.unnamedArgumentList[idx];
+                if (cmdArg && cmdArg.enumList.length > 0) {
+                    value = argAssign.value.toString().slice(0, index - argAssign.start);
+                    start = argAssign.start;
+                } else {
+                    return null;
+                }
+            } else {
+                value = '';
+                start = index;
+                cmdArg = notProvidedArguments[0];
+            }
+        } else {
+            return null;
+        }
+
+        if (cmdArg == null || cmdArg.enumList.length == 0) return null;
+
+        const result = new AutoCompleteSecondaryNameResult(
+            value,
+            start,
+            cmdArg.enumList.map(it=>new SlashCommandEnumAutoCompleteOption(it)),
+            false,
+        );
+        const isCompleteValue = cmdArg.enumList.find(it=>it.value == value);
+        const isSelectedValue = isSelect && isCompleteValue;
+        result.isRequired = cmdArg.isRequired && !isSelectedValue && !isCompleteValue;
+        return result;
+    }
+}
diff --git a/public/scripts/slash-commands/SlashCommandBrowser.js b/public/scripts/slash-commands/SlashCommandBrowser.js
new file mode 100644
index 000000000..51b0bac1b
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommandBrowser.js
@@ -0,0 +1,148 @@
+import { escapeRegex } from '../utils.js';
+import { SlashCommand } from './SlashCommand.js';
+import { SlashCommandParser } from './SlashCommandParser.js';
+
+export class SlashCommandBrowser {
+    /**@type {SlashCommand[]}*/ cmdList;
+    /**@type {HTMLElement}*/ dom;
+    /**@type {HTMLElement}*/ search;
+    /**@type {HTMLElement}*/ details;
+    /**@type {Object.<string,HTMLElement>}*/ itemMap = {};
+    /**@type {MutationObserver}*/ mo;
+
+    renderInto(parent) {
+        if (!this.dom) {
+            const queryRegex = /(?:(?:^|\s+)([^\s"][^\s]*?)(?:\s+|$))|(?:(?:^|\s+)"(.*?)(?:"|$)(?:\s+|$))/;
+            const root = document.createElement('div'); {
+                this.dom = root;
+                const search = document.createElement('div'); {
+                    search.classList.add('search');
+                    const lbl = document.createElement('label'); {
+                        lbl.classList.add('searchLabel');
+                        lbl.textContent = 'Search: ';
+                        const inp = document.createElement('input'); {
+                            this.search = inp;
+                            inp.classList.add('searchInput');
+                            inp.classList.add('text_pole');
+                            inp.type = 'search';
+                            inp.placeholder = 'Search slash commands - use quotes to search "literal" instead of fuzzy';
+                            inp.addEventListener('input', ()=>{
+                                this.details?.remove();
+                                this.details = null;
+                                let query = inp.value.trim();
+                                if (query.slice(-1) == '"' && !/(?:^|\s+)"/.test(query)) {
+                                    query = `"${query}`;
+                                }
+                                let fuzzyList = [];
+                                let quotedList = [];
+                                while (query.length > 0) {
+                                    const match = queryRegex.exec(query);
+                                    if (!match) break;
+                                    if (match[1] !== undefined) {
+                                        fuzzyList.push(new RegExp(`^(.*?)${match[1].split('').map(char=>`(${escapeRegex(char)})`).join('(.*?)')}(.*?)$`, 'i'));
+                                    } else if (match[2] !== undefined) {
+                                        quotedList.push(match[2]);
+                                    }
+                                    query = query.slice(match.index + match[0].length);
+                                }
+                                for (const cmd of this.cmdList) {
+                                    const targets = [
+                                        cmd.name,
+                                        ...cmd.namedArgumentList.map(it=>it.name),
+                                        ...cmd.namedArgumentList.map(it=>it.description),
+                                        ...cmd.namedArgumentList.map(it=>it.enumList.map(e=>e.value)).flat(),
+                                        ...cmd.namedArgumentList.map(it=>it.typeList).flat(),
+                                        ...cmd.unnamedArgumentList.map(it=>it.description),
+                                        ...cmd.unnamedArgumentList.map(it=>it.enumList.map(e=>e.value)).flat(),
+                                        ...cmd.unnamedArgumentList.map(it=>it.typeList).flat(),
+                                        ...cmd.aliases,
+                                        cmd.helpString,
+                                    ];
+                                    const find = ()=>targets.find(t=>(fuzzyList.find(f=>f.test(t)) ?? quotedList.find(q=>t.includes(q))) !== undefined) !== undefined;
+                                    if (fuzzyList.length + quotedList.length == 0 || find()) {
+                                        this.itemMap[cmd.name].classList.remove('isFiltered');
+                                    } else {
+                                        this.itemMap[cmd.name].classList.add('isFiltered');
+                                    }
+                                }
+                            });
+                            lbl.append(inp);
+                        }
+                        search.append(lbl);
+                    }
+                    root.append(search);
+                }
+                const container = document.createElement('div'); {
+                    container.classList.add('commandContainer');
+                    const list = document.createElement('div'); {
+                        list.classList.add('autoComplete');
+                        this.cmdList = Object
+                            .keys(SlashCommandParser.commands)
+                            .filter(key => SlashCommandParser.commands[key].name == key) // exclude aliases
+                            .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
+                            .map(key => SlashCommandParser.commands[key])
+                        ;
+                        for (const cmd of this.cmdList) {
+                            const item = cmd.renderHelpItem();
+                            this.itemMap[cmd.name] = item;
+                            let details;
+                            item.addEventListener('click', ()=>{
+                                if (!details) {
+                                    details = document.createElement('div'); {
+                                        details.classList.add('autoComplete-detailsWrap');
+                                        const inner = document.createElement('div'); {
+                                            inner.classList.add('autoComplete-details');
+                                            inner.append(cmd.renderHelpDetails());
+                                            details.append(inner);
+                                        }
+                                    }
+                                }
+                                if (this.details != details) {
+                                    Array.from(list.querySelectorAll('.selected')).forEach(it=>it.classList.remove('selected'));
+                                    item.classList.add('selected');
+                                    this.details?.remove();
+                                    container.append(details);
+                                    this.details = details;
+                                    const pRect = list.getBoundingClientRect();
+                                    const rect = item.children[0].getBoundingClientRect();
+                                    details.style.setProperty('--targetOffset', rect.top - pRect.top);
+                                } else {
+                                    item.classList.remove('selected');
+                                    details.remove();
+                                    this.details = null;
+                                }
+                            });
+                            list.append(item);
+                        }
+                        container.append(list);
+                    }
+                    root.append(container);
+                }
+                root.classList.add('slashCommandBrowser');
+            }
+        }
+        parent.append(this.dom);
+
+        this.mo = new MutationObserver(muts=>{
+            if (muts.find(mut=>Array.from(mut.removedNodes).find(it=>it == this.dom || it.contains(this.dom)))) {
+                this.mo.disconnect();
+                window.removeEventListener('keydown', boundHandler);
+            }
+        });
+        this.mo.observe(document.querySelector('#chat'), { childList:true, subtree:true });
+        const boundHandler = this.handleKeyDown.bind(this);
+        window.addEventListener('keydown', boundHandler);
+        return this.dom;
+    }
+
+    handleKeyDown(evt) {
+        if (!evt.shiftKey && !evt.altKey && evt.ctrlKey && evt.key.toLowerCase() == 'f') {
+            if (!this.dom.closest('body')) return;
+            if (this.dom.closest('.mes') && !this.dom.closest('.last_mes')) return;
+            evt.preventDefault();
+            evt.stopPropagation();
+            evt.stopImmediatePropagation();
+            this.search.focus();
+        }
+    }
+}
diff --git a/public/scripts/slash-commands/SlashCommandClosure.js b/public/scripts/slash-commands/SlashCommandClosure.js
new file mode 100644
index 000000000..ce3ec783d
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommandClosure.js
@@ -0,0 +1,261 @@
+import { substituteParams } from '../../script.js';
+import { delay, escapeRegex } from '../utils.js';
+import { SlashCommandAbortController } from './SlashCommandAbortController.js';
+import { SlashCommandClosureExecutor } from './SlashCommandClosureExecutor.js';
+import { SlashCommandClosureResult } from './SlashCommandClosureResult.js';
+import { SlashCommandExecutor } from './SlashCommandExecutor.js';
+import { SlashCommandNamedArgumentAssignment } from './SlashCommandNamedArgumentAssignment.js';
+import { SlashCommandScope } from './SlashCommandScope.js';
+
+export class SlashCommandClosure {
+    /**@type {SlashCommandScope}*/ scope;
+    /**@type {boolean}*/ executeNow = false;
+    // @ts-ignore
+    /**@type {SlashCommandNamedArgumentAssignment[]}*/ argumentList = [];
+    // @ts-ignore
+    /**@type {SlashCommandNamedArgumentAssignment[]}*/ providedArgumentList = [];
+    /**@type {SlashCommandExecutor[]}*/ executorList = [];
+    /**@type {SlashCommandAbortController}*/ abortController;
+    /**@type {(done:number, total:number)=>void}*/ onProgress;
+
+    /**@type {number}*/
+    get commandCount() {
+        return this.executorList.map(executor=>executor.commandCount).reduce((sum,cur)=>sum + cur, 0);
+    }
+
+    constructor(parent) {
+        this.scope = new SlashCommandScope(parent);
+    }
+
+    toString() {
+        return '[Closure]';
+    }
+
+    /**
+     *
+     * @param {string} text
+     * @param {SlashCommandScope} scope
+     * @returns
+     */
+    substituteParams(text, scope = null) {
+        let isList = false;
+        let listValues = [];
+        scope = scope ?? this.scope;
+        const macros = scope.macroList.map(it=>escapeRegex(it.key)).join('|');
+        const re = new RegExp(`({{pipe}})|(?:{{var::([^\\s]+?)(?:::((?!}}).+))?}})|(?:{{(${macros})}})`);
+        let done = '';
+        let remaining = text;
+        while (re.test(remaining)) {
+            const match = re.exec(remaining);
+            const before = substituteParams(remaining.slice(0, match.index));
+            const after = remaining.slice(match.index + match[0].length);
+            const replacer = match[1] ? scope.pipe : match[2] ? scope.getVariable(match[2], match[3]) : scope.macroList.find(it=>it.key == match[4])?.value;
+            if (replacer instanceof SlashCommandClosure) {
+                isList = true;
+                if (match.index > 0) {
+                    listValues.push(before);
+                }
+                listValues.push(replacer);
+                if (match.index + match[0].length + 1 < remaining.length) {
+                    const rest = this.substituteParams(after, scope);
+                    listValues.push(...(Array.isArray(rest) ? rest : [rest]));
+                }
+                break;
+            } else {
+                done = `${done}${before}${replacer}`;
+                remaining = after;
+            }
+        }
+        if (!isList) {
+            text = `${done}${substituteParams(remaining)}`;
+        }
+
+        if (isList) {
+            if (listValues.length > 1) return listValues;
+            return listValues[0];
+        }
+        return text;
+    }
+
+    getCopy() {
+        const closure = new SlashCommandClosure();
+        closure.scope = this.scope.getCopy();
+        closure.executeNow = this.executeNow;
+        closure.argumentList = this.argumentList;
+        closure.providedArgumentList = this.providedArgumentList;
+        closure.executorList = this.executorList;
+        closure.abortController = this.abortController;
+        closure.onProgress = this.onProgress;
+        return closure;
+    }
+
+    /**
+     *
+     * @returns Promise<SlashCommandClosureResult>
+     */
+    async execute() {
+        const closure = this.getCopy();
+        return await closure.executeDirect();
+    }
+
+    async executeDirect() {
+        // closure arguments
+        for (const arg of this.argumentList) {
+            let v = arg.value;
+            if (v instanceof SlashCommandClosure) {
+                /**@type {SlashCommandClosure}*/
+                const closure = v;
+                closure.scope.parent = this.scope;
+                if (closure.executeNow) {
+                    v = (await closure.execute())?.pipe;
+                } else {
+                    v = closure;
+                }
+            } else {
+                v = this.substituteParams(v);
+            }
+            // unescape value
+            if (typeof v == 'string') {
+                v = v
+                    ?.replace(/\\\{/g, '{')
+                    ?.replace(/\\\}/g, '}')
+                ;
+            }
+            this.scope.letVariable(arg.name, v);
+        }
+        for (const arg of this.providedArgumentList) {
+            let v = arg.value;
+            if (v instanceof SlashCommandClosure) {
+                /**@type {SlashCommandClosure}*/
+                const closure = v;
+                closure.scope.parent = this.scope;
+                if (closure.executeNow) {
+                    v = (await closure.execute())?.pipe;
+                } else {
+                    v = closure;
+                }
+            } else {
+                v = this.substituteParams(v, this.scope.parent);
+            }
+            // unescape value
+            if (typeof v == 'string') {
+                v = v
+                    ?.replace(/\\\{/g, '{')
+                    ?.replace(/\\\}/g, '}')
+                ;
+            }
+            this.scope.setVariable(arg.name, v);
+        }
+
+        let done = 0;
+        for (const executor of this.executorList) {
+            this.onProgress?.(done, this.commandCount);
+            if (executor instanceof SlashCommandClosureExecutor) {
+                const closure = this.scope.getVariable(executor.name);
+                if (!closure || !(closure instanceof SlashCommandClosure)) throw new Error(`${executor.name} is not a closure.`);
+                closure.scope.parent = this.scope;
+                closure.providedArgumentList = executor.providedArgumentList;
+                const result = await closure.execute();
+                this.scope.pipe = result.pipe;
+            } else {
+                let args = {
+                    _scope: this.scope,
+                    _parserFlags: executor.parserFlags,
+                };
+                let value;
+                // substitute named arguments
+                for (const arg of executor.namedArgumentList) {
+                    if (arg.value instanceof SlashCommandClosure) {
+                        /**@type {SlashCommandClosure}*/
+                        const closure = arg.value;
+                        closure.scope.parent = this.scope;
+                        if (closure.executeNow) {
+                            args[arg.name] = (await closure.execute())?.pipe;
+                        } else {
+                            args[arg.name] = closure;
+                        }
+                    } else {
+                        args[arg.name] = this.substituteParams(arg.value);
+                    }
+                    // unescape named argument
+                    if (typeof args[arg.name] == 'string') {
+                        args[arg.name] = args[arg.name]
+                            ?.replace(/\\\{/g, '{')
+                            ?.replace(/\\\}/g, '}')
+                        ;
+                    }
+                }
+
+                // substitute unnamed argument
+                if (executor.unnamedArgumentList.length == 0) {
+                    if (executor.injectPipe) {
+                        value = this.scope.pipe;
+                    }
+                } else {
+                    value = [];
+                    for (let i = 0; i < executor.unnamedArgumentList.length; i++) {
+                        let v = executor.unnamedArgumentList[i].value;
+                        if (v instanceof SlashCommandClosure) {
+                            /**@type {SlashCommandClosure}*/
+                            const closure = v;
+                            closure.scope.parent = this.scope;
+                            if (closure.executeNow) {
+                                v = (await closure.execute())?.pipe;
+                            } else {
+                                v = closure;
+                            }
+                        } else {
+                            v = this.substituteParams(v);
+                        }
+                        value[i] = v;
+                    }
+                    if (!executor.command.splitUnnamedArgument) {
+                        if (value.length == 1) {
+                            value = value[0];
+                        } else if (!value.find(it=>it instanceof SlashCommandClosure)) {
+                            value = value.join(' ');
+                        }
+                    }
+                }
+                // unescape unnamed argument
+                if (typeof value == 'string') {
+                    value = value
+                        ?.replace(/\\\{/g, '{')
+                        ?.replace(/\\\}/g, '}')
+                    ;
+                }
+
+                let abortResult = await this.testAbortController();
+                if (abortResult) {
+                    return abortResult;
+                }
+                executor.onProgress = (subDone, subTotal)=>this.onProgress?.(done + subDone, this.commandCount);
+                this.scope.pipe = await executor.command.callback(args, value ?? '');
+                done += executor.commandCount;
+                this.onProgress?.(done, this.commandCount);
+                abortResult = await this.testAbortController();
+                if (abortResult) {
+                    return abortResult;
+                }
+            }
+        }
+        /**@type {SlashCommandClosureResult} */
+        const result = Object.assign(new SlashCommandClosureResult(), { pipe: this.scope.pipe });
+        return result;
+    }
+
+    async testPaused() {
+        while (!this.abortController?.signal?.aborted && this.abortController?.signal?.paused) {
+            await delay(200);
+        }
+    }
+    async testAbortController() {
+        await this.testPaused();
+        if (this.abortController?.signal?.aborted) {
+            const result = new SlashCommandClosureResult();
+            result.isAborted = true;
+            result.abortReason = this.abortController.signal.reason.toString();
+            return result;
+        }
+    }
+}
diff --git a/public/scripts/slash-commands/SlashCommandClosureExecutor.js b/public/scripts/slash-commands/SlashCommandClosureExecutor.js
new file mode 100644
index 000000000..50dc2e33c
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommandClosureExecutor.js
@@ -0,0 +1,7 @@
+import { SlashCommandNamedArgumentAssignment } from './SlashCommandNamedArgumentAssignment.js';
+
+export class SlashCommandClosureExecutor {
+    /**@type {String}*/ name = '';
+    // @ts-ignore
+    /**@type {SlashCommandNamedArgumentAssignment[]}*/ providedArgumentList = [];
+}
diff --git a/public/scripts/slash-commands/SlashCommandClosureResult.js b/public/scripts/slash-commands/SlashCommandClosureResult.js
new file mode 100644
index 000000000..4de4926df
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommandClosureResult.js
@@ -0,0 +1,8 @@
+export class SlashCommandClosureResult {
+    /**@type {boolean}*/ interrupt = false;
+    /**@type {string}*/ pipe;
+    /**@type {boolean}*/ isAborted = false;
+    /**@type {string}*/ abortReason;
+    /**@type {boolean}*/ isError = false;
+    /**@type {string}*/ errorMessage;
+}
diff --git a/public/scripts/slash-commands/SlashCommandCommandAutoCompleteOption.js b/public/scripts/slash-commands/SlashCommandCommandAutoCompleteOption.js
new file mode 100644
index 000000000..c0397f323
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommandCommandAutoCompleteOption.js
@@ -0,0 +1,37 @@
+import { SlashCommand } from './SlashCommand.js';
+import { AutoCompleteOption } from '../autocomplete/AutoCompleteOption.js';
+
+export class SlashCommandCommandAutoCompleteOption extends AutoCompleteOption {
+    /**@type {SlashCommand}*/ command;
+
+
+    get value() {
+        return this.command;
+    }
+
+
+
+
+    /**
+     * @param {SlashCommand} command
+     * @param {string} name
+     */
+    constructor(command, name) {
+        super(name);
+        this.command = command;
+    }
+
+
+    renderItem() {
+        let li;
+        li = this.command.renderHelpItem(this.name);
+        li.setAttribute('data-name', this.name);
+        li.setAttribute('data-option-type', 'command');
+        return li;
+    }
+
+
+    renderDetails() {
+        return this.command.renderHelpDetails(this.name);
+    }
+}
diff --git a/public/scripts/slash-commands/SlashCommandEnumAutoCompleteOption.js b/public/scripts/slash-commands/SlashCommandEnumAutoCompleteOption.js
new file mode 100644
index 000000000..9d9a5d40d
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommandEnumAutoCompleteOption.js
@@ -0,0 +1,46 @@
+import { AutoCompleteOption } from '../autocomplete/AutoCompleteOption.js';
+import { SlashCommandEnumValue } from './SlashCommandEnumValue.js';
+
+export class SlashCommandEnumAutoCompleteOption extends AutoCompleteOption {
+    /**@type {SlashCommandEnumValue}*/ enumValue;
+
+
+
+    /**
+     * @param {SlashCommandEnumValue} enumValue
+     */
+    constructor(enumValue) {
+        super(enumValue.value, '◊');
+        this.enumValue = enumValue;
+    }
+
+
+    renderItem() {
+        let li;
+        li = this.makeItem(this.name, '◊', true, [], [], null, this.enumValue.description);
+        li.setAttribute('data-name', this.name);
+        li.setAttribute('data-option-type', 'enum');
+        return li;
+    }
+
+
+    renderDetails() {
+        const frag = document.createDocumentFragment();
+        const specs = document.createElement('div'); {
+            specs.classList.add('specs');
+            const name = document.createElement('div'); {
+                name.classList.add('name');
+                name.classList.add('monospace');
+                name.textContent = this.name;
+                specs.append(name);
+            }
+            frag.append(specs);
+        }
+        const help = document.createElement('span'); {
+            help.classList.add('help');
+            help.textContent = this.enumValue.description;
+            frag.append(help);
+        }
+        return frag;
+    }
+}
diff --git a/public/scripts/slash-commands/SlashCommandEnumValue.js b/public/scripts/slash-commands/SlashCommandEnumValue.js
new file mode 100644
index 000000000..742c843b0
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommandEnumValue.js
@@ -0,0 +1,13 @@
+export class SlashCommandEnumValue {
+    /**@type {string}*/ value;
+    /**@type {string}*/ description;
+
+    constructor(value, description = null) {
+        this.value = value;
+        this.description = description;
+    }
+
+    toString() {
+        return this.value;
+    }
+}
diff --git a/public/scripts/slash-commands/SlashCommandExecutor.js b/public/scripts/slash-commands/SlashCommandExecutor.js
new file mode 100644
index 000000000..2cf0c4647
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommandExecutor.js
@@ -0,0 +1,45 @@
+// eslint-disable-next-line no-unused-vars
+import { SlashCommand } from './SlashCommand.js';
+// eslint-disable-next-line no-unused-vars
+import { SlashCommandClosure } from './SlashCommandClosure.js';
+import { SlashCommandNamedArgumentAssignment } from './SlashCommandNamedArgumentAssignment.js';
+// eslint-disable-next-line no-unused-vars
+import { PARSER_FLAG } from './SlashCommandParser.js';
+import { SlashCommandUnnamedArgumentAssignment } from './SlashCommandUnnamedArgumentAssignment.js';
+
+export class SlashCommandExecutor {
+    /**@type {Boolean}*/ injectPipe = true;
+    /**@type {Number}*/ start;
+    /**@type {Number}*/ end;
+    /**@type {Number}*/ startNamedArgs;
+    /**@type {Number}*/ endNamedArgs;
+    /**@type {Number}*/ startUnnamedArgs;
+    /**@type {Number}*/ endUnnamedArgs;
+    /**@type {String}*/ name = '';
+    /**@type {SlashCommand}*/ command;
+    // @ts-ignore
+    /**@type {SlashCommandNamedArgumentAssignment[]}*/ namedArgumentList = [];
+    /**@type {SlashCommandUnnamedArgumentAssignment[]}*/ unnamedArgumentList = [];
+    /**@type {Object<PARSER_FLAG,boolean>} */ parserFlags;
+
+    get commandCount() {
+        return 1
+            + this.namedArgumentList.filter(it=>it.value instanceof SlashCommandClosure).map(it=>/**@type {SlashCommandClosure}*/(it.value).commandCount).reduce((cur, sum)=>cur + sum, 0)
+            + this.unnamedArgumentList.filter(it=>it.value instanceof SlashCommandClosure).map(it=>/**@type {SlashCommandClosure}*/(it.value).commandCount).reduce((cur, sum)=>cur + sum, 0)
+        ;
+    }
+
+    set onProgress(value) {
+        const closures = /**@type {SlashCommandClosure[]}*/([
+            ...this.namedArgumentList.filter(it=>it.value instanceof SlashCommandClosure).map(it=>it.value),
+            ...this.unnamedArgumentList.filter(it=>it.value instanceof SlashCommandClosure).map(it=>it.value),
+        ]);
+        for (const closure of closures) {
+            closure.onProgress = value;
+        }
+    }
+
+    constructor(start) {
+        this.start = start;
+    }
+}
diff --git a/public/scripts/slash-commands/SlashCommandNamedArgumentAssignment.js b/public/scripts/slash-commands/SlashCommandNamedArgumentAssignment.js
new file mode 100644
index 000000000..023144608
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommandNamedArgumentAssignment.js
@@ -0,0 +1,12 @@
+import { SlashCommandClosure } from './SlashCommandClosure.js';
+
+export class SlashCommandNamedArgumentAssignment {
+    /**@type {number}*/ start;
+    /**@type {number}*/ end;
+    /**@type {string}*/ name;
+    /**@type {string|SlashCommandClosure}*/ value;
+
+
+    constructor() {
+    }
+}
diff --git a/public/scripts/slash-commands/SlashCommandNamedArgumentAutoCompleteOption.js b/public/scripts/slash-commands/SlashCommandNamedArgumentAutoCompleteOption.js
new file mode 100644
index 000000000..f6b114a25
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommandNamedArgumentAutoCompleteOption.js
@@ -0,0 +1,48 @@
+import { AutoCompleteOption } from '../autocomplete/AutoCompleteOption.js';
+import { SlashCommand } from './SlashCommand.js';
+import { SlashCommandNamedArgument } from './SlashCommandArgument.js';
+import { SlashCommandNamedArgumentAssignment } from './SlashCommandNamedArgumentAssignment.js';
+
+export class SlashCommandNamedArgumentAutoCompleteOption extends AutoCompleteOption {
+    /**@type {SlashCommandNamedArgument}*/ arg;
+    /**@type {SlashCommand}*/ cmd;
+
+    /**
+     * @param {SlashCommandNamedArgument} arg
+     */
+    constructor(arg, cmd) {
+        super(`${arg.name}=`);
+        this.arg = arg;
+        this.cmd = cmd;
+    }
+
+
+    renderItem() {
+        let li;
+        li = this.makeItem(this.name, '⌗', true, [], [], null, `${this.arg.isRequired ? '' : '(optional) '}${this.arg.description ?? ''}`);
+        li.setAttribute('data-name', this.name);
+        li.setAttribute('data-option-type', 'namedArgument');
+        return li;
+    }
+
+
+    renderDetails() {
+        const frag = document.createDocumentFragment();
+        const specs = document.createElement('div'); {
+            specs.classList.add('specs');
+            const name = document.createElement('div'); {
+                name.classList.add('name');
+                name.classList.add('monospace');
+                name.textContent = this.name;
+                specs.append(name);
+            }
+            frag.append(specs);
+        }
+        const help = document.createElement('span'); {
+            help.classList.add('help');
+            help.innerHTML = `${this.arg.isRequired ? '' : '(optional) '}${this.arg.description ?? ''}`;
+            frag.append(help);
+        }
+        return frag;
+    }
+}
diff --git a/public/scripts/slash-commands/SlashCommandParser.js b/public/scripts/slash-commands/SlashCommandParser.js
new file mode 100644
index 000000000..e886df0db
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommandParser.js
@@ -0,0 +1,949 @@
+import { power_user } from '../power-user.js';
+import { isTrueBoolean, uuidv4 } from '../utils.js';
+import { SlashCommand } from './SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument } from './SlashCommandArgument.js';
+import { SlashCommandClosure } from './SlashCommandClosure.js';
+import { SlashCommandExecutor } from './SlashCommandExecutor.js';
+import { SlashCommandParserError } from './SlashCommandParserError.js';
+import { AutoCompleteNameResult } from '../autocomplete/AutoCompleteNameResult.js';
+import { SlashCommandQuickReplyAutoCompleteOption } from './SlashCommandQuickReplyAutoCompleteOption.js';
+// eslint-disable-next-line no-unused-vars
+import { SlashCommandScope } from './SlashCommandScope.js';
+import { SlashCommandVariableAutoCompleteOption } from './SlashCommandVariableAutoCompleteOption.js';
+import { SlashCommandNamedArgumentAssignment } from './SlashCommandNamedArgumentAssignment.js';
+// eslint-disable-next-line no-unused-vars
+import { SlashCommandAbortController } from './SlashCommandAbortController.js';
+import { SlashCommandAutoCompleteNameResult } from './SlashCommandAutoCompleteNameResult.js';
+import { SlashCommandUnnamedArgumentAssignment } from './SlashCommandUnnamedArgumentAssignment.js';
+import { SlashCommandEnumValue } from './SlashCommandEnumValue.js';
+import { MacroAutoCompleteOption } from '../autocomplete/MacroAutoCompleteOption.js';
+
+/**@readonly*/
+/**@enum {Number}*/
+export const PARSER_FLAG = {
+    'STRICT_ESCAPING': 1,
+    'REPLACE_GETVAR': 2,
+};
+
+export class SlashCommandParser {
+    // @ts-ignore
+    /**@type {Object.<string, SlashCommand>}*/ static commands = {};
+
+    /**
+     * @deprecated Use SlashCommandParser.addCommandObject() instead.
+     * @param {string} command Command name
+     * @param {(namedArguments:Object.<string,string|SlashCommandClosure>, unnamedArguments:string|SlashCommandClosure|(string|SlashCommandClosure)[])=>string|SlashCommandClosure|void|Promise<string|SlashCommandClosure|void>} callback The function to execute when the command is called
+     * @param {string[]} aliases List of alternative command names
+     * @param {string} helpString Help text shown in autocomplete and command browser
+     */
+    static addCommand(command, callback, aliases, helpString = '') {
+        this.addCommandObject(SlashCommand.fromProps({
+            name: command,
+            callback,
+            aliases,
+            helpString,
+        }));
+    }
+    /**
+     *
+     * @param {SlashCommand} command
+     */
+    static addCommandObject(command) {
+        const reserved = ['/', '#', ':', 'parser-flag'];
+        for (const start of reserved) {
+            if (command.name.toLowerCase().startsWith(start) || (command.aliases ?? []).find(a=>a.toLowerCase().startsWith(start))) {
+                throw new Error(`Illegal Name. Slash command name cannot begin with "${start}".`);
+            }
+        }
+        this.addCommandObjectUnsafe(command);
+    }
+    /**
+     *
+     * @param {SlashCommand} command
+     */
+    static addCommandObjectUnsafe(command) {
+        if ([command.name, ...command.aliases].some(x => Object.hasOwn(this.commands, x))) {
+            console.trace('WARN: Duplicate slash command registered!', [command.name, ...command.aliases]);
+        }
+
+        this.commands[command.name] = command;
+
+        if (Array.isArray(command.aliases)) {
+            command.aliases.forEach((alias) => {
+                this.commands[alias] = command;
+            });
+        }
+    }
+
+
+    get commands() {
+        return SlashCommandParser.commands;
+    }
+    // @ts-ignore
+    /**@type {Object.<string, string>}*/ helpStrings = {};
+    /**@type {boolean}*/ verifyCommandNames = true;
+    /**@type {string}*/ text;
+    /**@type {number}*/ index;
+    /**@type {SlashCommandAbortController}*/ abortController;
+    /**@type {SlashCommandScope}*/ scope;
+    /**@type {SlashCommandClosure}*/ closure;
+
+    /**@type {Object.<PARSER_FLAG,boolean>}*/ flags = {};
+
+    /**@type {boolean}*/ jumpedEscapeSequence = false;
+
+    /**@type {{start:number, end:number}[]}*/ closureIndex;
+    /**@type {{start:number, end:number, name:string}[]}*/ macroIndex;
+    /**@type {SlashCommandExecutor[]}*/ commandIndex;
+    /**@type {SlashCommandScope[]}*/ scopeIndex;
+
+    get userIndex() { return this.index; }
+
+    get ahead() {
+        return this.text.slice(this.index + 1);
+    }
+    get behind() {
+        return this.text.slice(0, this.index);
+    }
+    get char() {
+        return this.text[this.index];
+    }
+    get endOfText() {
+        return this.index >= this.text.length || /^\s+$/.test(this.ahead);
+    }
+
+
+    constructor() {
+        //TODO should not be re-registered from every instance
+        // add dummy commands for help strings / autocomplete
+        if (!Object.keys(this.commands).includes('parser-flag')) {
+            const help = {};
+            help[PARSER_FLAG.REPLACE_GETVAR] = 'Replace all {{getvar::}} and {{getglobalvar::}} macros with scoped variables to avoid double macro substitution.';
+            help[PARSER_FLAG.STRICT_ESCAPING] = 'Allows to escape all delimiters with backslash, and allows escaping of backslashes.';
+            SlashCommandParser.addCommandObjectUnsafe(SlashCommand.fromProps({ name: 'parser-flag',
+                unnamedArgumentList: [
+                    SlashCommandArgument.fromProps({
+                        description: 'The parser flag to modify.',
+                        typeList: [ARGUMENT_TYPE.STRING],
+                        isRequired: true,
+                        enumList: Object.keys(PARSER_FLAG).map(flag=>new SlashCommandEnumValue(flag, help[PARSER_FLAG[flag]])),
+                    }),
+                    SlashCommandArgument.fromProps({
+                        description: 'The state of the parser flag to set.',
+                        typeList: [ARGUMENT_TYPE.BOOLEAN],
+                        defaultValue: 'on',
+                        enumList: ['on', 'off'],
+                    }),
+                ],
+                splitUnnamedArgument: true,
+                helpString: 'Set a parser flag.',
+            }));
+        }
+        if (!Object.keys(this.commands).includes('/')) {
+            SlashCommandParser.addCommandObjectUnsafe(SlashCommand.fromProps({ name: '/',
+                aliases: ['#'],
+                unnamedArgumentList: [
+                    SlashCommandArgument.fromProps({
+                        description: 'commentary',
+                        typeList: [ARGUMENT_TYPE.STRING],
+                    }),
+                ],
+                helpString: 'Write a comment.',
+            }));
+        }
+
+        //TODO should not be re-registered from every instance
+        this.registerLanguage();
+    }
+    registerLanguage() {
+        // NUMBER mode is copied from highlightjs's own implementation for JavaScript
+        // https://tc39.es/ecma262/#sec-literals-numeric-literals
+        const decimalDigits = '[0-9](_?[0-9])*';
+        const frac = `\\.(${decimalDigits})`;
+        // DecimalIntegerLiteral, including Annex B NonOctalDecimalIntegerLiteral
+        // https://tc39.es/ecma262/#sec-additional-syntax-numeric-literals
+        const decimalInteger = '0|[1-9](_?[0-9])*|0[0-7]*[89][0-9]*';
+        const NUMBER = {
+            className: 'number',
+            variants: [
+                // DecimalLiteral
+                { begin: `(\\b(${decimalInteger})((${frac})|\\.)?|(${frac}))` +
+        `[eE][+-]?(${decimalDigits})\\b` },
+                { begin: `\\b(${decimalInteger})\\b((${frac})\\b|\\.)?|(${frac})\\b` },
+
+                // DecimalBigIntegerLiteral
+                { begin: '\\b(0|[1-9](_?[0-9])*)n\\b' },
+
+                // NonDecimalIntegerLiteral
+                { begin: '\\b0[xX][0-9a-fA-F](_?[0-9a-fA-F])*n?\\b' },
+                { begin: '\\b0[bB][0-1](_?[0-1])*n?\\b' },
+                { begin: '\\b0[oO][0-7](_?[0-7])*n?\\b' },
+
+                // LegacyOctalIntegerLiteral (does not include underscore separators)
+                // https://tc39.es/ecma262/#sec-additional-syntax-numeric-literals
+                { begin: '\\b0[0-7]+n?\\b' },
+            ],
+            relevance: 0,
+        };
+
+        const COMMENT = {
+            scope: 'comment',
+            begin: /\/[/#]/,
+            end: /\||$|:}/,
+            contains: [],
+        };
+        const ABORT = {
+            scope: 'abort',
+            begin: /\/abort/,
+            end: /\||$|:}/,
+            contains: [],
+        };
+        const LET = {
+            begin: [
+                /\/(let|var)\s+/,
+            ],
+            beginScope: {
+                1: 'variable',
+            },
+            end: /\||$|:}/,
+            contains: [],
+        };
+        const SETVAR = {
+            begin: /\/(setvar|setglobalvar)\s+/,
+            beginScope: 'variable',
+            end: /\||$|:}/,
+            excludeEnd: true,
+            contains: [],
+        };
+        const GETVAR = {
+            begin: /\/(getvar|getglobalvar)\s+/,
+            beginScope: 'variable',
+            end: /\||$|:}/,
+            excludeEnd: true,
+            contains: [],
+        };
+        const RUN = {
+            match: [
+                /\/:/,
+                /(".+?(?<!\\)") |(\S+?) /,
+            ],
+            className: {
+                1: 'variable.language',
+                2: 'title.function.invoke',
+            },
+            contains: [], // defined later
+        };
+        const COMMAND = {
+            scope: 'command',
+            begin: /\/\S+/,
+            beginScope: 'title.function',
+            end: /\||$|(?=:})/,
+            excludeEnd: true,
+            contains: [], // defined later
+        };
+        const CLOSURE = {
+            scope: 'closure',
+            begin: /{:/,
+            end: /:}(\(\))?/,
+            beginScope: 'punctuation',
+            endScope: 'punctuation',
+            contains: [], // defined later
+        };
+        const NAMED_ARG = {
+            scope: 'property',
+            begin: /\w+=/,
+            end: '',
+        };
+        const MACRO = {
+            scope: 'variable',
+            begin: /{{/,
+            end: /}}/,
+        };
+        RUN.contains.push(
+            hljs.BACKSLASH_ESCAPE,
+            NAMED_ARG,
+            hljs.QUOTE_STRING_MODE,
+            NUMBER,
+            MACRO,
+            CLOSURE,
+        );
+        LET.contains.push(
+            hljs.BACKSLASH_ESCAPE,
+            NAMED_ARG,
+            NUMBER,
+            MACRO,
+            CLOSURE,
+            hljs.QUOTE_STRING_MODE,
+        );
+        SETVAR.contains.push(
+            hljs.BACKSLASH_ESCAPE,
+            NAMED_ARG,
+            NUMBER,
+            MACRO,
+            CLOSURE,
+            hljs.QUOTE_STRING_MODE,
+        );
+        GETVAR.contains.push(
+            hljs.BACKSLASH_ESCAPE,
+            NAMED_ARG,
+            hljs.QUOTE_STRING_MODE,
+            NUMBER,
+            MACRO,
+            CLOSURE,
+        );
+        COMMAND.contains.push(
+            hljs.BACKSLASH_ESCAPE,
+            NAMED_ARG,
+            NUMBER,
+            MACRO,
+            CLOSURE,
+            hljs.QUOTE_STRING_MODE,
+        );
+        CLOSURE.contains.push(
+            hljs.BACKSLASH_ESCAPE,
+            COMMENT,
+            ABORT,
+            NAMED_ARG,
+            NUMBER,
+            MACRO,
+            RUN,
+            LET,
+            GETVAR,
+            SETVAR,
+            COMMAND,
+            'self',
+            hljs.QUOTE_STRING_MODE,
+        );
+        hljs.registerLanguage('stscript', ()=>({
+            case_insensitive: false,
+            keywords: ['|'],
+            contains: [
+                hljs.BACKSLASH_ESCAPE,
+                COMMENT,
+                ABORT,
+                RUN,
+                LET,
+                GETVAR,
+                SETVAR,
+                COMMAND,
+                CLOSURE,
+            ],
+        }));
+    }
+
+    getHelpString() {
+        return '<div class="slashHelp">Loading...</div>';
+    }
+
+    /**
+     *
+     * @param {*} text The text to parse.
+     * @param {*} index Index to check for names (cursor position).
+     */
+    async getNameAt(text, index) {
+        if (this.text != text) {
+            try {
+                this.parse(text, false);
+            } catch (e) {
+                // do nothing
+                console.warn(e);
+            }
+        }
+        const executor = this.commandIndex
+            .filter(it=>it.start <= index && (it.end >= index || it.end == null))
+            .slice(-1)[0]
+            ?? null
+        ;
+
+        if (executor) {
+            const childClosure = this.closureIndex
+                .find(it=>it.start <= index && (it.end >= index || it.end == null) && it.start > executor.start)
+                ?? null
+            ;
+            if (childClosure !== null) return null;
+            const macro = this.macroIndex.findLast(it=>it.start <= index && it.end >= index);
+            console.log(macro);
+            if (macro) {
+                const frag = document.createRange().createContextualFragment(await (await fetch('/scripts/templates/macros.html')).text());
+                const options = [...frag.querySelectorAll('ul:nth-of-type(2n+1) > li')].map(li=>new MacroAutoCompleteOption(
+                    li.querySelector('tt').textContent.slice(2, -2).replace(/^([^\s:]+[\s:]+).*$/, '$1'),
+                    li.querySelector('tt').textContent,
+                    (li.querySelector('tt').remove(),li.innerHTML),
+                ));
+                const result = new AutoCompleteNameResult(
+                    macro.name,
+                    macro.start + 2,
+                    options,
+                    false,
+                    ()=>`No matching macros for "{{${result.name}}}"`,
+                    ()=>'No macros found.',
+                );
+                return result;
+            }
+            if (executor.name == ':') {
+                const options = this.scopeIndex[this.commandIndex.indexOf(executor)]
+                    ?.allVariableNames
+                    ?.map(it=>new SlashCommandVariableAutoCompleteOption(it))
+                    ?? []
+                ;
+                try {
+                    const qrApi = (await import('../extensions/quick-reply/index.js')).quickReplyApi;
+                    options.push(...qrApi.listSets()
+                        .map(set=>qrApi.listQuickReplies(set).map(qr=>`${set}.${qr}`))
+                        .flat()
+                        .map(qr=>new SlashCommandQuickReplyAutoCompleteOption(qr)),
+                    );
+                } catch { /* empty */ }
+                const result = new AutoCompleteNameResult(
+                    executor.unnamedArgumentList[0]?.value.toString(),
+                    executor.start,
+                    options,
+                    true,
+                    ()=>`No matching variables in scope and no matching Quick Replies for "${result.name}"`,
+                    ()=>'No variables in scope and no Quick Replies found.',
+                );
+                return result;
+            }
+            const result = new SlashCommandAutoCompleteNameResult(executor, this.commands);
+            return result;
+        }
+        return null;
+    }
+
+    /**
+     * Moves the index <length> number of characters forward and returns the last character taken.
+     * @param {number} length Number of characters to take.
+     * @param {boolean} keep Whether to add the characters to the kept text.
+     * @returns The last character taken.
+     */
+    take(length = 1) {
+        this.jumpedEscapeSequence = false;
+        let content = this.char;
+        this.index++;
+        if (length > 1) {
+            content = this.take(length - 1);
+        }
+        return content;
+    }
+    discardWhitespace() {
+        while (/\s/.test(this.char)) {
+            this.take(); // discard whitespace
+            this.jumpedEscapeSequence = false;
+        }
+    }
+    /**
+     * Tests if the next characters match a symbol.
+     * Moves the index forward if the next characters are backslashes directly followed by the symbol.
+     * Expects that the current char is taken after testing.
+     * @param {string|RegExp} sequence Sequence of chars or regex character group that is the symbol.
+     * @param {number} offset Offset from the current index (won't move the index if offset != 0).
+     * @returns Whether the next characters are the indicated symbol.
+     */
+    testSymbol(sequence, offset = 0) {
+        if (!this.flags[PARSER_FLAG.STRICT_ESCAPING]) return this.testSymbolLooseyGoosey(sequence, offset);
+        // /echo abc | /echo def
+        // -> TOAST: abc
+        // -> TOAST: def
+        // /echo abc \| /echo def
+        // -> TOAST: abc | /echo def
+        // /echo abc \\| /echo def
+        // -> TOAST: abc \
+        // -> TOAST: def
+        // /echo abc \\\| /echo def
+        // -> TOAST: abc \| /echo def
+        // /echo abc \\\\| /echo def
+        // -> TOAST: abc \\
+        // -> TOAST: def
+        // /echo title=\:} \{: | /echo title=\{: \:}
+        // -> TOAST: *:}* {:
+        // -> TOAST: *{:* :}
+        const escapeOffset = this.jumpedEscapeSequence ? -1 : 0;
+        const escapes = this.text.slice(this.index + offset + escapeOffset).replace(/^(\\*).*$/s, '$1').length;
+        const test = (sequence instanceof RegExp) ?
+            (text) => new RegExp(`^${sequence.source}`).test(text) :
+            (text) => text.startsWith(sequence)
+        ;
+        if (test(this.text.slice(this.index + offset + escapeOffset + escapes))) {
+            // no backslashes before sequence
+            //   -> sequence found
+            if (escapes == 0) return true;
+            // uneven number of backslashes before sequence
+            //   = the final backslash escapes the sequence
+            //   = every preceding pair is one literal backslash
+            //    -> move index forward to skip the backslash escaping the first backslash or the symbol
+            // even number of backslashes before sequence
+            //   = every pair is one literal backslash
+            //    -> move index forward to skip the backslash escaping the first backslash
+            if (!this.jumpedEscapeSequence && offset == 0) {
+                this.index++;
+                this.jumpedEscapeSequence = true;
+            }
+            return false;
+        }
+    }
+
+    testSymbolLooseyGoosey(sequence, offset = 0) {
+        const escapeOffset = this.jumpedEscapeSequence ? -1 : 0;
+        const escapes = this.text[this.index + offset + escapeOffset] == '\\' ? 1 : 0;
+        const test = (sequence instanceof RegExp) ?
+            (text) => new RegExp(`^${sequence.source}`).test(text) :
+            (text) => text.startsWith(sequence)
+        ;
+        if (test(this.text.slice(this.index + offset + escapeOffset + escapes))) {
+            // no backslashes before sequence
+            //   -> sequence found
+            if (escapes == 0) return true;
+            // otherwise
+            //   -> sequence found
+            if (!this.jumpedEscapeSequence && offset == 0) {
+                this.index++;
+                this.jumpedEscapeSequence = true;
+            }
+            return false;
+        }
+    }
+
+    replaceGetvar(value) {
+        return value.replace(/{{(get(?:global)?var)::([^}]+)}}/gi, (_, cmd, name) => {
+            name = name.trim();
+            // store pipe
+            const pipeName = `_PARSER_${uuidv4()}`;
+            const storePipe = new SlashCommandExecutor(null); {
+                storePipe.command = this.commands['let'];
+                storePipe.name = 'let';
+                const nameAss = new SlashCommandUnnamedArgumentAssignment();
+                nameAss.value = pipeName;
+                const valAss = new SlashCommandUnnamedArgumentAssignment();
+                valAss.value = '{{pipe}}';
+                storePipe.unnamedArgumentList = [nameAss, valAss];
+                this.closure.executorList.push(storePipe);
+            }
+            // getvar / getglobalvar
+            const getvar = new SlashCommandExecutor(null); {
+                getvar.command = this.commands[cmd];
+                getvar.name = 'cmd';
+                const nameAss = new SlashCommandUnnamedArgumentAssignment();
+                nameAss.value = name;
+                getvar.unnamedArgumentList = [nameAss];
+                this.closure.executorList.push(getvar);
+            }
+            // set to temp scoped var
+            const varName = `_PARSER_${uuidv4()}`;
+            const setvar = new SlashCommandExecutor(null); {
+                setvar.command = this.commands['let'];
+                setvar.name = 'let';
+                const nameAss = new SlashCommandUnnamedArgumentAssignment();
+                nameAss.value = varName;
+                const valAss = new SlashCommandUnnamedArgumentAssignment();
+                valAss.value = '{{pipe}}';
+                setvar.unnamedArgumentList = [nameAss, valAss];
+                this.closure.executorList.push(setvar);
+            }
+            // return pipe
+            const returnPipe = new SlashCommandExecutor(null); {
+                returnPipe.command = this.commands['return'];
+                returnPipe.name = 'return';
+                const varAss = new SlashCommandUnnamedArgumentAssignment();
+                varAss.value = `{{var::${pipeName}}}`;
+                returnPipe.unnamedArgumentList = [varAss];
+                this.closure.executorList.push(returnPipe);
+            }
+            return `{{var::${varName}}}`;
+        });
+    }
+
+
+    parse(text, verifyCommandNames = true, flags = null, abortController = null) {
+        this.verifyCommandNames = verifyCommandNames;
+        for (const key of Object.keys(PARSER_FLAG)) {
+            this.flags[PARSER_FLAG[key]] = flags?.[PARSER_FLAG[key]] ?? power_user.stscript.parser.flags[PARSER_FLAG[key]] ?? false;
+        }
+        this.abortController = abortController;
+        this.text = text;
+        this.index = 0;
+        this.scope = null;
+        this.closureIndex = [];
+        this.commandIndex = [];
+        this.scopeIndex = [];
+        this.macroIndex = [];
+        const closure = this.parseClosure(true);
+        return closure;
+    }
+
+    testClosure() {
+        return this.testSymbol('{:');
+    }
+    testClosureEnd() {
+        if (!this.scope.parent) {
+            // "root" closure does not have {: and :}
+            if (this.index >= this.text.length) return true;
+            return false;
+        }
+        if (!this.verifyCommandNames) {
+            if (this.index >= this.text.length) return true;
+        } else {
+            if (this.ahead.length < 1) throw new SlashCommandParserError(`Unclosed closure at position ${this.userIndex}`, this.text, this.index);
+        }
+        return this.testSymbol(':}');
+    }
+    parseClosure(isRoot = false) {
+        const closureIndexEntry = { start:this.index + 1, end:null };
+        this.closureIndex.push(closureIndexEntry);
+        let injectPipe = true;
+        if (!isRoot) this.take(2); // discard opening {:
+        let closure = new SlashCommandClosure(this.scope);
+        closure.abortController = this.abortController;
+        this.scope = closure.scope;
+        this.closure = closure;
+        this.discardWhitespace();
+        while (this.testNamedArgument()) {
+            const arg = this.parseNamedArgument();
+            closure.argumentList.push(arg);
+            this.scope.variableNames.push(arg.name);
+            this.discardWhitespace();
+        }
+        while (!this.testClosureEnd()) {
+            if (this.testComment()) {
+                this.parseComment();
+            } else if (this.testParserFlag()) {
+                this.parseParserFlag();
+            } else if (this.testRunShorthand()) {
+                const cmd = this.parseRunShorthand();
+                closure.executorList.push(cmd);
+                injectPipe = true;
+            } else if (this.testCommand()) {
+                const cmd = this.parseCommand();
+                cmd.injectPipe = injectPipe;
+                closure.executorList.push(cmd);
+                injectPipe = true;
+            } else {
+                while (!this.testCommandEnd()) this.take(); // discard plain text and comments
+            }
+            this.discardWhitespace();
+            // first pipe marks end of command
+            if (this.testSymbol('|')) {
+                this.take(); // discard first pipe
+                // second pipe indicates no pipe injection for the next command
+                if (this.testSymbol('|')) {
+                    injectPipe = false;
+                    this.take(); // discard second pipe
+                }
+            }
+            this.discardWhitespace(); // discard further whitespace
+        }
+        if (!isRoot) this.take(2); // discard closing :}
+        if (this.testSymbol('()')) {
+            this.take(2); // discard ()
+            closure.executeNow = true;
+        }
+        closureIndexEntry.end = this.index - 1;
+        this.discardWhitespace(); // discard trailing whitespace
+        this.scope = closure.scope.parent;
+        return closure;
+    }
+
+    testComment() {
+        return this.testSymbol(/\/[/#]/);
+    }
+    testCommentEnd() {
+        return this.testCommandEnd();
+    }
+    parseComment() {
+        const start = this.index + 1;
+        const cmd = new SlashCommandExecutor(start);
+        cmd.command = this.commands['/'];
+        this.commandIndex.push(cmd);
+        this.scopeIndex.push(this.scope.getCopy());
+        this.take(); // discard "/"
+        cmd.name = this.take(); // set second "/" or "#" as name
+        while (!this.testCommentEnd()) this.take();
+        cmd.end = this.index;
+    }
+
+    testParserFlag() {
+        return this.testSymbol('/parser-flag ');
+    }
+    testParserFlagEnd() {
+        return this.testCommandEnd();
+    }
+    parseParserFlag() {
+        const start = this.index + 1;
+        const cmd = new SlashCommandExecutor(start);
+        cmd.name = 'parser-flag';
+        cmd.unnamedArgumentList = [];
+        cmd.command = this.commands[cmd.name];
+        this.commandIndex.push(cmd);
+        this.scopeIndex.push(this.scope.getCopy());
+        this.take(13); // discard "/parser-flag "
+        cmd.startNamedArgs = -1;
+        cmd.endNamedArgs = -1;
+        cmd.startUnnamedArgs = this.index;
+        cmd.unnamedArgumentList = this.parseUnnamedArgument(true);
+        const [flag, state] = cmd.unnamedArgumentList ?? [null, null];
+        cmd.endUnnamedArgs = this.index;
+        if (Object.keys(PARSER_FLAG).includes(flag.value.toString())) {
+            this.flags[PARSER_FLAG[flag.value.toString()]] = isTrueBoolean(state?.value.toString() ?? 'on');
+        }
+        cmd.end = this.index;
+    }
+
+    testRunShorthand() {
+        return this.testSymbol('/:') && !this.testSymbol(':}', 1);
+    }
+    testRunShorthandEnd() {
+        return this.testCommandEnd();
+    }
+    parseRunShorthand() {
+        const start = this.index + 2;
+        const cmd = new SlashCommandExecutor(start);
+        cmd.name = ':';
+        cmd.unnamedArgumentList = [];
+        cmd.command = this.commands['run'];
+        this.commandIndex.push(cmd);
+        this.scopeIndex.push(this.scope.getCopy());
+        this.take(2); //discard "/:"
+        const assignment = new SlashCommandUnnamedArgumentAssignment();
+        if (this.testQuotedValue()) assignment.value = this.parseQuotedValue();
+        else assignment.value = this.parseValue();
+        cmd.unnamedArgumentList = [assignment];
+        this.discardWhitespace();
+        while (this.testNamedArgument()) {
+            const arg = this.parseNamedArgument();
+            cmd.namedArgumentList.push(arg);
+            this.discardWhitespace();
+        }
+        this.discardWhitespace();
+        // /run shorthand does not take unnamed arguments (the command name practically *is* the unnamed argument)
+        if (this.testRunShorthandEnd()) {
+            cmd.end = this.index;
+            return cmd;
+        } else {
+            console.warn(this.behind, this.char, this.ahead);
+            throw new SlashCommandParserError(`Unexpected end of command at position ${this.userIndex}: "/${cmd.name}"`, this.text, this.index);
+        }
+    }
+
+    testCommand() {
+        return this.testSymbol('/');
+    }
+    testCommandEnd() {
+        return this.testClosureEnd() || this.testSymbol('|');
+    }
+    parseCommand() {
+        const start = this.index + 1;
+        const cmd = new SlashCommandExecutor(start);
+        cmd.parserFlags = Object.assign({}, this.flags);
+        this.commandIndex.push(cmd);
+        this.scopeIndex.push(this.scope.getCopy());
+        this.take(); // discard "/"
+        while (!/\s/.test(this.char) && !this.testCommandEnd()) cmd.name += this.take(); // take chars until whitespace or end
+        this.discardWhitespace();
+        if (this.verifyCommandNames && !this.commands[cmd.name]) throw new SlashCommandParserError(`Unknown command at position ${this.index - cmd.name.length}: "/${cmd.name}"`, this.text, this.index - cmd.name.length);
+        cmd.command = this.commands[cmd.name];
+        cmd.startNamedArgs = this.index;
+        cmd.endNamedArgs = this.index;
+        while (this.testNamedArgument()) {
+            const arg = this.parseNamedArgument();
+            cmd.namedArgumentList.push(arg);
+            cmd.endNamedArgs = this.index;
+            this.discardWhitespace();
+        }
+        this.discardWhitespace();
+        cmd.startUnnamedArgs = this.index;
+        cmd.endUnnamedArgs = this.index;
+        if (this.testUnnamedArgument()) {
+            cmd.unnamedArgumentList = this.parseUnnamedArgument(cmd.command?.unnamedArgumentList?.length && cmd?.command?.splitUnnamedArgument);
+            cmd.endUnnamedArgs = this.index;
+            if (cmd.name == 'let') {
+                const keyArg = cmd.namedArgumentList.find(it=>it.name == 'key');
+                if (keyArg) {
+                    this.scope.variableNames.push(keyArg.value.toString());
+                } else if (typeof cmd.unnamedArgumentList[0]?.value == 'string') {
+                    this.scope.variableNames.push(cmd.unnamedArgumentList[0].value);
+                }
+            }
+        }
+        if (this.testCommandEnd()) {
+            cmd.end = this.index;
+            return cmd;
+        } else {
+            console.warn(this.behind, this.char, this.ahead);
+            throw new SlashCommandParserError(`Unexpected end of command at position ${this.userIndex}: "/${cmd.name}"`, this.text, this.index);
+        }
+    }
+
+    testNamedArgument() {
+        return /^(\w+)=/.test(`${this.char}${this.ahead}`);
+    }
+    parseNamedArgument() {
+        let assignment = new SlashCommandNamedArgumentAssignment();
+        assignment.start = this.index;
+        let key = '';
+        while (/\w/.test(this.char)) key += this.take(); // take chars
+        this.take(); // discard "="
+        assignment.name = key;
+        if (this.testClosure()) {
+            assignment.value = this.parseClosure();
+        } else if (this.testQuotedValue()) {
+            assignment.value = this.parseQuotedValue();
+        } else if (this.testListValue()) {
+            assignment.value = this.parseListValue();
+        } else if (this.testValue()) {
+            assignment.value = this.parseValue();
+        }
+        assignment.end = this.index;
+        return assignment;
+    }
+
+    testUnnamedArgument() {
+        return !this.testCommandEnd();
+    }
+    testUnnamedArgumentEnd() {
+        return this.testCommandEnd();
+    }
+    parseUnnamedArgument(split) {
+        /**@type {SlashCommandClosure|String}*/
+        let value = this.jumpedEscapeSequence ? this.take() : ''; // take the first, already tested, char if it is an escaped one
+        let isList = split;
+        let listValues = [];
+        /**@type {SlashCommandUnnamedArgumentAssignment}*/
+        let assignment = new SlashCommandUnnamedArgumentAssignment();
+        assignment.start = this.index;
+        while (!this.testUnnamedArgumentEnd()) {
+            if (this.testClosure()) {
+                isList = true;
+                if (value.length > 0) {
+                    assignment.end = assignment.end - (value.length - value.trim().length);
+                    this.indexMacros(this.index - value.length, value);
+                    assignment.value = value.trim();
+                    listValues.push(assignment);
+                    assignment = new SlashCommandUnnamedArgumentAssignment();
+                    assignment.start = this.index;
+                    value = '';
+                }
+                assignment.value = this.parseClosure();
+                assignment.end = this.index;
+                listValues.push(assignment);
+                assignment = new SlashCommandUnnamedArgumentAssignment();
+                assignment.start = this.index;
+            } else if (split) {
+                if (this.testQuotedValue()) {
+                    assignment.start = this.index;
+                    assignment.value = this.parseQuotedValue();
+                    assignment.end = this.index;
+                    listValues.push(assignment);
+                    assignment = new SlashCommandUnnamedArgumentAssignment();
+                } else if (this.testListValue()) {
+                    assignment.start = this.index;
+                    assignment.value = this.parseListValue();
+                    assignment.end = this.index;
+                    listValues.push(assignment);
+                    assignment = new SlashCommandUnnamedArgumentAssignment();
+                } else if (this.testValue()) {
+                    assignment.start = this.index;
+                    assignment.value = this.parseValue();
+                    assignment.end = this.index;
+                    listValues.push(assignment);
+                    assignment = new SlashCommandUnnamedArgumentAssignment();
+                } else {
+                    throw new SlashCommandParserError(`Unexpected end of unnamed argument at index ${this.userIndex}.`);
+                }
+                this.discardWhitespace();
+            } else {
+                value += this.take();
+                assignment.end = this.index;
+            }
+        }
+        if (isList && value.trim().length > 0) {
+            assignment.value = value.trim();
+            listValues.push(assignment);
+        }
+        if (isList) {
+            return listValues;
+        }
+        this.indexMacros(this.index - value.length, value);
+        value = value.trim();
+        if (this.flags[PARSER_FLAG.REPLACE_GETVAR]) {
+            value = this.replaceGetvar(value);
+        }
+        assignment.value = value;
+        return [assignment];
+    }
+
+    testQuotedValue() {
+        return this.testSymbol('"');
+    }
+    testQuotedValueEnd() {
+        if (this.endOfText) {
+            if (this.verifyCommandNames) throw new SlashCommandParserError(`Unexpected end of quoted value at position ${this.index}`, this.text, this.index);
+            else return true;
+        }
+        if (!this.verifyCommandNames && this.testClosureEnd()) return true;
+        if (this.verifyCommandNames && !this.flags[PARSER_FLAG.STRICT_ESCAPING] && this.testCommandEnd()) {
+            throw new SlashCommandParserError(`Unexpected end of quoted value at position ${this.index}`, this.text, this.index);
+        }
+        return this.testSymbol('"') || (!this.flags[PARSER_FLAG.STRICT_ESCAPING] && this.testCommandEnd());
+    }
+    parseQuotedValue() {
+        this.take(); // discard opening quote
+        let value = '';
+        while (!this.testQuotedValueEnd()) value += this.take(); // take all chars until closing quote
+        this.take(); // discard closing quote
+        if (this.flags[PARSER_FLAG.REPLACE_GETVAR]) {
+            value = this.replaceGetvar(value);
+        }
+        this.indexMacros(this.index - value.length, value);
+        return value;
+    }
+
+    testListValue() {
+        return this.testSymbol('[');
+    }
+    testListValueEnd() {
+        if (this.endOfText) throw new SlashCommandParserError(`Unexpected end of list value at position ${this.index}`, this.text, this.index);
+        return this.testSymbol(']');
+    }
+    parseListValue() {
+        let value = this.take(); // take the already tested opening bracket
+        while (!this.testListValueEnd()) value += this.take(); // take all chars until closing bracket
+        value += this.take(); // take closing bracket
+        if (this.flags[PARSER_FLAG.REPLACE_GETVAR]) {
+            value = this.replaceGetvar(value);
+        }
+        this.indexMacros(this.index - value.length, value);
+        return value;
+    }
+
+    testValue() {
+        return !this.testSymbol(/\s/);
+    }
+    testValueEnd() {
+        if (this.testSymbol(/\s/)) return true;
+        return this.testCommandEnd();
+    }
+    parseValue() {
+        let value = this.jumpedEscapeSequence ? this.take() : ''; // take the first, already tested, char if it is an escaped one
+        while (!this.testValueEnd()) value += this.take(); // take all chars until value end
+        if (this.flags[PARSER_FLAG.REPLACE_GETVAR]) {
+            value = this.replaceGetvar(value);
+        }
+        this.indexMacros(this.index - value.length, value);
+        return value;
+    }
+
+    indexMacros(offset, text) {
+        const re = /{{(?:((?:(?!}})[^\s:])+[\s:]*)((?:(?!}}).)*)(}}|}$|$))?/s;
+        let remaining = text;
+        let localOffset = 0;
+        while (remaining.length > 0 && re.test(remaining)) {
+            const match = re.exec(remaining);
+            this.macroIndex.push({
+                start: offset + localOffset + match.index,
+                end: offset + localOffset + match.index + (match[0]?.length ?? 0),
+                name: match[1] ?? '',
+            });
+            localOffset += match.index + (match[0]?.length ?? 0);
+            remaining = remaining.slice(match.index + (match[0]?.length ?? 0));
+        }
+    }
+}
diff --git a/public/scripts/slash-commands/SlashCommandParserError.js b/public/scripts/slash-commands/SlashCommandParserError.js
new file mode 100644
index 000000000..5124fce73
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommandParserError.js
@@ -0,0 +1,50 @@
+export class SlashCommandParserError extends Error {
+    /**@type {String}*/ text;
+    /**@type {Number}*/ index;
+
+    get line() {
+        return this.text.slice(0, this.index).replace(/[^\n]/g, '').length;
+    }
+    get column() {
+        return this.text.slice(0, this.index).split('\n').pop().length;
+    }
+    get hint() {
+        let lineOffset = this.line.toString().length;
+        let lineStart = this.index;
+        let start = this.index;
+        let end = this.index;
+        let offset = 0;
+        let lineCount = 0;
+        while (offset < 10000 && lineCount < 3 && start >= 0) {
+            if (this.text[start] == '\n') lineCount++;
+            if (lineCount == 0) lineStart--;
+            offset++;
+            start--;
+        }
+        if (this.text[start + 1] == '\n') start++;
+        offset = 0;
+        while (offset < 10000 && this.text[end] != '\n') {
+            offset++;
+            end++;
+        }
+        let hint  = [];
+        let lines = this.text.slice(start + 1, end - 1).split('\n');
+        let lineNum = this.line - lines.length + 1;
+        let tabOffset = 0;
+        for (const line of lines) {
+            const num = `${' '.repeat(lineOffset - lineNum.toString().length)}${lineNum}`;
+            lineNum++;
+            const untabbedLine = line.replace(/\t/g, ' '.repeat(4));
+            tabOffset = untabbedLine.length - line.length;
+            hint.push(`${num}:  ${untabbedLine}`);
+        }
+        hint.push(`${' '.repeat(this.index - lineStart + lineOffset + 1 + tabOffset)}^^^^^`);
+        return hint.join('\n');
+    }
+
+    constructor(message, text, index) {
+        super(message);
+        this.text = text;
+        this.index = index;
+    }
+}
diff --git a/public/scripts/slash-commands/SlashCommandQuickReplyAutoCompleteOption.js b/public/scripts/slash-commands/SlashCommandQuickReplyAutoCompleteOption.js
new file mode 100644
index 000000000..871d73c8e
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommandQuickReplyAutoCompleteOption.js
@@ -0,0 +1,40 @@
+import { AutoCompleteOption } from '../autocomplete/AutoCompleteOption.js';
+
+export class SlashCommandQuickReplyAutoCompleteOption extends AutoCompleteOption {
+    /**
+     * @param {string} name
+     */
+    constructor(name) {
+        super(name);
+    }
+
+
+    renderItem() {
+        let li;
+        li = this.makeItem(this.name, 'QR', true);
+        li.setAttribute('data-name', this.name);
+        li.setAttribute('data-option-type', 'qr');
+        return li;
+    }
+
+
+    renderDetails() {
+        const frag = document.createDocumentFragment();
+        const specs = document.createElement('div'); {
+            specs.classList.add('specs');
+            const name = document.createElement('div'); {
+                name.classList.add('name');
+                name.classList.add('monospace');
+                name.textContent = this.name;
+                specs.append(name);
+            }
+            frag.append(specs);
+        }
+        const help = document.createElement('span'); {
+            help.classList.add('help');
+            help.textContent = 'Quick Reply';
+            frag.append(help);
+        }
+        return frag;
+    }
+}
diff --git a/public/scripts/slash-commands/SlashCommandScope.js b/public/scripts/slash-commands/SlashCommandScope.js
new file mode 100644
index 000000000..f6a7100b9
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommandScope.js
@@ -0,0 +1,114 @@
+import { SlashCommandClosure } from './SlashCommandClosure.js';
+
+export class SlashCommandScope {
+    /**@type {string[]}*/ variableNames = [];
+    get allVariableNames() {
+        const names = [...this.variableNames, ...(this.parent?.allVariableNames ?? [])];
+        return names.filter((it,idx)=>idx == names.indexOf(it));
+    }
+    // @ts-ignore
+    /**@type {object.<string, string|SlashCommandClosure>}*/ variables = {};
+    // @ts-ignore
+    /**@type {object.<string, string|SlashCommandClosure>}*/ macros = {};
+    /**@type {{key:string, value:string|SlashCommandClosure}[]} */
+    get macroList() {
+        return [...Object.keys(this.macros).map(key=>({ key, value:this.macros[key] })), ...(this.parent?.macroList ?? [])];
+    }
+    /**@type {SlashCommandScope}*/ parent;
+    /**@type {string}*/ #pipe;
+    get pipe() {
+        return this.#pipe ?? this.parent?.pipe;
+    }
+    set pipe(value) {
+        this.#pipe = value;
+    }
+
+
+    constructor(parent) {
+        this.parent = parent;
+    }
+
+    getCopy() {
+        const scope = new SlashCommandScope(this.parent);
+        scope.variableNames = [...this.variableNames];
+        scope.variables = Object.assign({}, this.variables);
+        scope.macros = Object.assign({}, this.macros);
+        scope.#pipe = this.#pipe;
+        return scope;
+    }
+
+
+    setMacro(key, value) {
+        this.macros[key] = value;
+    }
+
+
+    existsVariableInScope(key) {
+        return Object.keys(this.variables).includes(key);
+    }
+    existsVariable(key) {
+        return Object.keys(this.variables).includes(key) || this.parent?.existsVariable(key);
+    }
+    letVariable(key, value = undefined) {
+        if (this.existsVariableInScope(key)) throw new SlashCommandScopeVariableExistsError(`Variable named "${key}" already exists.`);
+        this.variables[key] = value;
+    }
+    setVariable(key, value, index = null) {
+        if (this.existsVariableInScope(key)) {
+            if (index !== null && index !== undefined) {
+                let v = this.variables[key];
+                try {
+                    v = JSON.parse(v);
+                    const numIndex = Number(index);
+                    if (Number.isNaN(numIndex)) {
+                        v[index] = value;
+                    } else {
+                        v[numIndex] = value;
+                    }
+                    v = JSON.stringify(v);
+                } catch {
+                    v[index] = value;
+                }
+                this.variables[key] = v;
+            } else {
+                this.variables[key] = value;
+            }
+            return value;
+        }
+        if (this.parent) {
+            return this.parent.setVariable(key, value, index);
+        }
+        throw new SlashCommandScopeVariableNotFoundError(`No such variable: "${key}"`);
+    }
+    getVariable(key, index = null) {
+        if (this.existsVariableInScope(key)) {
+            if (index !== null && index !== undefined) {
+                let v = this.variables[key];
+                try { v = JSON.parse(v); } catch { /* empty */ }
+                const numIndex = Number(index);
+                if (Number.isNaN(numIndex)) {
+                    v = v[index];
+                } else {
+                    v = v[numIndex];
+                }
+                if (typeof v == 'object') return JSON.stringify(v);
+                return v;
+            } else {
+                const value = this.variables[key];
+                return (value === '' || isNaN(Number(value))) ? (value || '') : Number(value);
+            }
+        }
+        if (this.parent) {
+            return this.parent.getVariable(key, index);
+        }
+        throw new SlashCommandScopeVariableNotFoundError(`No such variable: "${key}"`);
+    }
+}
+
+
+
+
+export class SlashCommandScopeVariableExistsError extends Error {}
+
+
+export class SlashCommandScopeVariableNotFoundError extends Error {}
diff --git a/public/scripts/slash-commands/SlashCommandUnnamedArgumentAssignment.js b/public/scripts/slash-commands/SlashCommandUnnamedArgumentAssignment.js
new file mode 100644
index 000000000..12b28f951
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommandUnnamedArgumentAssignment.js
@@ -0,0 +1,11 @@
+import { SlashCommandClosure } from './SlashCommandClosure.js';
+
+export class SlashCommandUnnamedArgumentAssignment {
+    /**@type {number}*/ start;
+    /**@type {number}*/ end;
+    /**@type {string|SlashCommandClosure}*/ value;
+
+
+    constructor() {
+    }
+}
diff --git a/public/scripts/slash-commands/SlashCommandVariableAutoCompleteOption.js b/public/scripts/slash-commands/SlashCommandVariableAutoCompleteOption.js
new file mode 100644
index 000000000..8e9acf9f6
--- /dev/null
+++ b/public/scripts/slash-commands/SlashCommandVariableAutoCompleteOption.js
@@ -0,0 +1,40 @@
+import { AutoCompleteOption } from '../autocomplete/AutoCompleteOption.js';
+
+export class SlashCommandVariableAutoCompleteOption extends AutoCompleteOption {
+    /**
+     * @param {string} name
+     */
+    constructor(name) {
+        super(name);
+    }
+
+
+    renderItem() {
+        let li;
+        li = this.makeItem(this.name, '[𝑥]', true);
+        li.setAttribute('data-name', this.name);
+        li.setAttribute('data-option-type', 'variable');
+        return li;
+    }
+
+
+    renderDetails() {
+        const frag = document.createDocumentFragment();
+        const specs = document.createElement('div'); {
+            specs.classList.add('specs');
+            const name = document.createElement('div'); {
+                name.classList.add('name');
+                name.classList.add('monospace');
+                name.textContent = this.name;
+                specs.append(name);
+            }
+            frag.append(specs);
+        }
+        const help = document.createElement('span'); {
+            help.classList.add('help');
+            help.textContent = 'scoped variable';
+            frag.append(help);
+        }
+        return frag;
+    }
+}
diff --git a/public/scripts/templates/macros.html b/public/scripts/templates/macros.html
index d6436abe9..9f444ba2a 100644
--- a/public/scripts/templates/macros.html
+++ b/public/scripts/templates/macros.html
@@ -74,6 +74,7 @@
 </div>
 <div><small>Local variables = unique to the current chat</small></div>
 <div><small>Global variables = works in any chat for any character</small></div>
+<div><small>Scoped variables = works in STscript</small></div>
 <ul>
     <li><tt>&lcub;&lcub;getvar::name&rcub;&rcub;</tt> – replaced with the value of the local variable "name"</li>
     <li><tt>&lcub;&lcub;setvar::name::value&rcub;&rcub;</tt> – replaced with empty string, sets the local variable "name" to "value"</li>
@@ -85,4 +86,6 @@
     <li><tt>&lcub;&lcub;addglobalvar::name::value&rcub;&rcub;</tt> – replaced with empty string, adds a numeric value of "increment" to the global variable "name"</li>
     <li><tt>&lcub;&lcub;incglobalvar::name&rcub;&rcub;</tt> – replaced with the result of the increment of value of the global variable "name" by 1</li>
     <li><tt>&lcub;&lcub;decglobalvar::name&rcub;&rcub;</tt> – replaced with the result of the decrement of value of the global variable "name" by 1</li>
+    <li><tt>&lcub;&lcub;var::name&rcub;&rcub;</tt> – replaced with the value of the scoped variable "name"</li>
+    <li><tt>&lcub;&lcub;var::name::index&rcub;&rcub;</tt> – replaced with the value of item at index (for arrays / lists or objects / dictionaries) of the scoped variable "name"</li>
 </ul>
diff --git a/public/scripts/variables.js b/public/scripts/variables.js
index 093f2c34a..bfaaab2af 100644
--- a/public/scripts/variables.js
+++ b/public/scripts/variables.js
@@ -1,6 +1,12 @@
 import { chat_metadata, getCurrentChatId, saveSettingsDebounced, sendSystemMessage, system_message_types } from '../script.js';
 import { extension_settings, saveMetadataDebounced } from './extensions.js';
-import { executeSlashCommands, registerSlashCommand } from './slash-commands.js';
+import { executeSlashCommands } from './slash-commands.js';
+import { SlashCommand } from './slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from './slash-commands/SlashCommandArgument.js';
+import { SlashCommandClosure } from './slash-commands/SlashCommandClosure.js';
+import { SlashCommandEnumValue } from './slash-commands/SlashCommandEnumValue.js';
+import { SlashCommandParser } from './slash-commands/SlashCommandParser.js';
+import { SlashCommandScope } from './slash-commands/SlashCommandScope.js';
 import { isFalseBoolean } from './utils.js';
 
 const MAX_LOOPS = 100;
@@ -10,7 +16,7 @@ function getLocalVariable(name, args = {}) {
         chat_metadata.variables = {};
     }
 
-    let localVariable = chat_metadata?.variables[name];
+    let localVariable = chat_metadata?.variables[args.key ?? name];
     if (args.index !== undefined) {
         try {
             localVariable = JSON.parse(localVariable);
@@ -63,7 +69,7 @@ function setLocalVariable(name, value, args = {}) {
 }
 
 function getGlobalVariable(name, args = {}) {
-    let globalVariable = extension_settings.variables.global[name];
+    let globalVariable = extension_settings.variables.global[args.key ?? name];
     if (args.index !== undefined) {
         try {
             globalVariable = JSON.parse(globalVariable);
@@ -189,9 +195,14 @@ function decrementGlobalVariable(name) {
 /**
  * Resolves a variable name to its value or returns the string as is if the variable does not exist.
  * @param {string} name Variable name
+ * @param {SlashCommandScope} scope Scope
  * @returns {string} Variable value or the string literal
  */
-export function resolveVariable(name) {
+export function resolveVariable(name, scope = null) {
+    if (scope?.existsVariable(name)) {
+        return scope.getVariable(name);
+    }
+
     if (existsLocalVariable(name)) {
         return getLocalVariable(name);
     }
@@ -312,7 +323,8 @@ async function whileCallback(args, command) {
         const result = evalBoolean(rule, a, b);
 
         if (result && command) {
-            await executeSubCommands(command);
+            if (command instanceof SlashCommandClosure) await command.execute();
+            else await executeSubCommands(command, args._scope, args._parserFlags);
         } else {
             break;
         }
@@ -322,13 +334,24 @@ async function whileCallback(args, command) {
 }
 
 async function timesCallback(args, value) {
-    const [repeats, ...commandParts] = value.split(' ');
-    const command = commandParts.join(' ');
+    let repeats;
+    let command;
+    if (Array.isArray(value)) {
+        [repeats, command] = value;
+    } else {
+        [repeats, ...command] = value.split(' ');
+        command = command.join(' ');
+    }
     const isGuardOff = isFalseBoolean(args.guard);
     const iterations = Math.min(Number(repeats), isGuardOff ? Number.MAX_SAFE_INTEGER : MAX_LOOPS);
-
     for (let i = 0; i < iterations; i++) {
-        await executeSubCommands(command.replace(/\{\{timesIndex\}\}/g, i));
+        if (command instanceof SlashCommandClosure) {
+            command.scope.setMacro('timesIndex', i);
+            await command.execute();
+        }
+        else {
+            await executeSubCommands(command.replace(/\{\{timesIndex\}\}/g, i), args._scope, args._parserFlags);
+        }
     }
 
     return '';
@@ -339,9 +362,11 @@ async function ifCallback(args, command) {
     const result = evalBoolean(rule, a, b);
 
     if (result && command) {
-        return await executeSubCommands(command);
-    } else if (!result && args.else && typeof args.else === 'string' && args.else !== '') {
-        return await executeSubCommands(args.else);
+        if (command instanceof SlashCommandClosure) return (await command.execute()).pipe;
+        return await executeSubCommands(command, args._scope, args._parserFlags);
+    } else if (!result && args.else && ((typeof args.else === 'string' && args.else !== '') || args.else instanceof SlashCommandClosure)) {
+        if (args.else instanceof SlashCommandClosure) return (await args.else.execute(args._scope)).pipe;
+        return await executeSubCommands(args.else, args._scope, args._parserFlags);
     }
 
     return '';
@@ -386,6 +411,11 @@ function parseBooleanOperands(args) {
             return operandNumber;
         }
 
+        if (args._scope.existsVariable(operand)) {
+            const operandVariable = args._scope.getVariable(operand);
+            return operandVariable ?? '';
+        }
+
         if (existsLocalVariable(operand)) {
             const operandLocalVariable = getLocalVariable(operand);
             return operandLocalVariable ?? '';
@@ -483,17 +513,12 @@ function evalBoolean(rule, a, b) {
  * @param {string} command Command to execute. May contain escaped macro and batch separators.
  * @returns {Promise<string>} Pipe result
  */
-async function executeSubCommands(command) {
-    if (command.startsWith('"')) {
-        command = command.slice(1);
+async function executeSubCommands(command, scope = null, parserFlags = null) {
+    if (command.startsWith('"') && command.endsWith('"')) {
+        command = command.slice(1, -1);
     }
 
-    if (command.endsWith('"')) {
-        command = command.slice(0, -1);
-    }
-
-    const unescape = false;
-    const result = await executeSlashCommands(command, unescape);
+    const result = await executeSlashCommands(command, true, scope, true, parserFlags);
 
     if (!result || typeof result !== 'object') {
         return '';
@@ -537,9 +562,10 @@ function deleteGlobalVariable(name) {
 /**
  * Parses a series of numeric values from a string.
  * @param {string} value A space-separated list of numeric values or variable names
+ * @param {SlashCommandScope} scope Scope
  * @returns {number[]} An array of numeric values
  */
-function parseNumericSeries(value) {
+function parseNumericSeries(value, scope = null) {
     if (typeof value === 'number') {
         return [value];
     }
@@ -548,18 +574,18 @@ function parseNumericSeries(value) {
         .split(' ')
         .map(i => i.trim())
         .filter(i => i !== '')
-        .map(i => isNaN(Number(i)) ? Number(resolveVariable(i)) : Number(i))
+        .map(i => isNaN(Number(i)) ? Number(resolveVariable(i, scope)) : Number(i))
         .filter(i => !isNaN(i));
 
     return array;
 }
 
-function performOperation(value, operation, singleOperand = false) {
+function performOperation(value, operation, singleOperand = false, scope = null) {
     if (!value) {
         return 0;
     }
 
-    const array = parseNumericSeries(value);
+    const array = parseNumericSeries(value, scope);
 
     if (array.length === 0) {
         return 0;
@@ -574,72 +600,72 @@ function performOperation(value, operation, singleOperand = false) {
     return result;
 }
 
-function addValuesCallback(value) {
-    return performOperation(value, (array) => array.reduce((a, b) => a + b, 0));
+function addValuesCallback(args, value) {
+    return performOperation(value, (array) => array.reduce((a, b) => a + b, 0), false, args._scope);
 }
 
-function mulValuesCallback(value) {
-    return performOperation(value, (array) => array.reduce((a, b) => a * b, 1));
+function mulValuesCallback(args, value) {
+    return performOperation(value, (array) => array.reduce((a, b) => a * b, 1), false, args._scope);
 }
 
-function minValuesCallback(value) {
-    return performOperation(value, (array) => Math.min(...array));
+function minValuesCallback(args, value) {
+    return performOperation(value, (array) => Math.min(...array), false, args._scope);
 }
 
-function maxValuesCallback(value) {
-    return performOperation(value, (array) => Math.max(...array));
+function maxValuesCallback(args, value) {
+    return performOperation(value, (array) => Math.max(...array), false, args._scope);
 }
 
-function subValuesCallback(value) {
-    return performOperation(value, (array) => array[0] - array[1]);
+function subValuesCallback(args, value) {
+    return performOperation(value, (array) => array[0] - array[1], false, args._scope);
 }
 
-function divValuesCallback(value) {
+function divValuesCallback(args, value) {
     return performOperation(value, (array) => {
         if (array[1] === 0) {
             console.warn('Division by zero.');
             return 0;
         }
         return array[0] / array[1];
-    });
+    }, false, args._scope);
 }
 
-function modValuesCallback(value) {
+function modValuesCallback(args, value) {
     return performOperation(value, (array) => {
         if (array[1] === 0) {
             console.warn('Division by zero.');
             return 0;
         }
         return array[0] % array[1];
-    });
+    }, false, args._scope);
 }
 
-function powValuesCallback(value) {
-    return performOperation(value, (array) => Math.pow(array[0], array[1]));
+function powValuesCallback(args, value) {
+    return performOperation(value, (array) => Math.pow(array[0], array[1]), false, args._scope);
 }
 
-function sinValuesCallback(value) {
-    return performOperation(value, Math.sin, true);
+function sinValuesCallback(args, value) {
+    return performOperation(value, Math.sin, true, args._scope);
 }
 
-function cosValuesCallback(value) {
-    return performOperation(value, Math.cos, true);
+function cosValuesCallback(args, value) {
+    return performOperation(value, Math.cos, true, args._scope);
 }
 
-function logValuesCallback(value) {
-    return performOperation(value, Math.log, true);
+function logValuesCallback(args, value) {
+    return performOperation(value, Math.log, true, args._scope);
 }
 
-function roundValuesCallback(value) {
-    return performOperation(value, Math.round, true);
+function roundValuesCallback(args, value) {
+    return performOperation(value, Math.round, true, args._scope);
 }
 
-function absValuesCallback(value) {
-    return performOperation(value, Math.abs, true);
+function absValuesCallback(args, value) {
+    return performOperation(value, Math.abs, true, args._scope);
 }
 
-function sqrtValuesCallback(value) {
-    return performOperation(value, Math.sqrt, true);
+function sqrtValuesCallback(args, value) {
+    return performOperation(value, Math.sqrt, true, args._scope);
 }
 
 function lenValuesCallback(value) {
@@ -679,37 +705,1045 @@ function randValuesCallback(from, to, args) {
     return String(value);
 }
 
-export function registerVariableCommands() {
-    registerSlashCommand('listvar', listVariablesCallback, [], ' – list registered chat variables', true, true);
-    registerSlashCommand('setvar', (args, value) => setLocalVariable(args.key || args.name, value, args), [], '<span class="monospace">key=varname index=listIndex (value)</span> – set a local variable value and pass it down the pipe, index is optional, e.g. <tt>/setvar key=color green</tt>', true, true);
-    registerSlashCommand('getvar', (args, value) => getLocalVariable(value, args), [], '<span class="monospace">index=listIndex (key)</span> – get a local variable value and pass it down the pipe, index is optional, e.g. <tt>/getvar height</tt> or <tt>/getvar index=3 costumes</tt>', true, true);
-    registerSlashCommand('addvar', (args, value) => addLocalVariable(args.key || args.name, value), [], '<span class="monospace">key=varname (increment)</span> – add a value to a local variable and pass the result down the pipe, e.g. <tt>/addvar score 10</tt>', true, true);
-    registerSlashCommand('setglobalvar', (args, value) => setGlobalVariable(args.key || args.name, value, args), [], '<span class="monospace">key=varname index=listIndex (value)</span> – set a global variable value and pass it down the pipe, index is optional, e.g. <tt>/setglobalvar key=color green</tt>', true, true);
-    registerSlashCommand('getglobalvar', (args, value) => getGlobalVariable(value, args), [], '<span class="monospace">index=listIndex (key)</span> – get a global variable value and pass it down the pipe, index is optional, e.g. <tt>/getglobalvar height</tt> or <tt>/getglobalvar index=3 costumes</tt>', true, true);
-    registerSlashCommand('addglobalvar', (args, value) => addGlobalVariable(args.key || args.name, value), [], '<span class="monospace">key=varname (increment)</span> – add a value to a global variable and pass the result down the pipe, e.g. <tt>/addglobalvar score 10</tt>', true, true);
-    registerSlashCommand('incvar', (_, value) => incrementLocalVariable(value), [], '<span class="monospace">(key)</span> – increment a local variable by 1 and pass the result down the pipe, e.g. <tt>/incvar score</tt>', true, true);
-    registerSlashCommand('decvar', (_, value) => decrementLocalVariable(value), [], '<span class="monospace">(key)</span> – decrement a local variable by 1 and pass the result down the pipe, e.g. <tt>/decvar score</tt>', true, true);
-    registerSlashCommand('incglobalvar', (_, value) => incrementGlobalVariable(value), [], '<span class="monospace">(key)</span> – increment a global variable by 1 and pass the result down the pipe, e.g. <tt>/incglobalvar score</tt>', true, true);
-    registerSlashCommand('decglobalvar', (_, value) => decrementGlobalVariable(value), [], '<span class="monospace">(key)</span> – decrement a global variable by 1 and pass the result down the pipe, e.g. <tt>/decglobalvar score</tt>', true, true);
-    registerSlashCommand('if', ifCallback, [], '<span class="monospace">left=varname1 right=varname2 rule=comparison else="(alt.command)" "(command)"</span> – compare the value of the left operand "a" with the value of the right operand "b", and if the condition yields true, then execute any valid slash command enclosed in quotes and pass the result of the command execution down the pipe. Numeric values and string literals for left and right operands supported. Available rules: gt => a > b, gte => a >= b, lt => a < b, lte => a <= b, eq => a == b, neq => a != b, not => !a, in (strings) => a includes b, nin (strings) => a not includes b, e.g. <tt>/if left=score right=10 rule=gte "/speak You win"</tt> triggers a /speak command if the value of "score" is greater or equals 10.', true, true);
-    registerSlashCommand('while', whileCallback, [], '<span class="monospace">left=varname1 right=varname2 rule=comparison "(command)"</span> – compare the value of the left operand "a" with the value of the right operand "b", and if the condition yields true, then execute any valid slash command enclosed in quotes. Numeric values and string literals for left and right operands supported. Available rules: gt => a > b, gte => a >= b, lt => a < b, lte => a <= b, eq => a == b, neq => a != b, not => !a, in (strings) => a includes b, nin (strings) => a not includes b, e.g. <tt>/setvar key=i 0 | /while left=i right=10 rule=let "/addvar key=i 1"</tt> adds 1 to the value of "i" until it reaches 10. Loops are limited to 100 iterations by default, pass guard=off to disable.', true, true);
-    registerSlashCommand('times', (args, value) => timesCallback(args, value), [], '<span class="monospace">(repeats) "(command)"</span> – execute any valid slash command enclosed in quotes <tt>repeats</tt> number of times, e.g. <tt>/setvar key=i 1 | /times 5 "/addvar key=i 1"</tt> adds 1 to the value of "i" 5 times. <tt>{{timesIndex}}</tt> is replaced with the iteration number (zero-based), e.g. <tt>/times 4 "/echo {{timesIndex}}"</tt> echos the numbers 0 through 4. Loops are limited to 100 iterations by default, pass guard=off to disable.', true, true);
-    registerSlashCommand('flushvar', (_, value) => deleteLocalVariable(value), [], '<span class="monospace">(key)</span> – delete a local variable, e.g. <tt>/flushvar score</tt>', true, true);
-    registerSlashCommand('flushglobalvar', (_, value) => deleteGlobalVariable(value), [], '<span class="monospace">(key)</span> – delete a global variable, e.g. <tt>/flushglobalvar score</tt>', true, true);
-    registerSlashCommand('add', (_, value) => addValuesCallback(value), [], '<span class="monospace">(a b c d)</span> – performs an addition of the set of values and passes the result down the pipe, can use variable names, e.g. <tt>/add 10 i 30 j</tt>', true, true);
-    registerSlashCommand('mul', (_, value) => mulValuesCallback(value), [], '<span class="monospace">(a b c d)</span> – performs a multiplication of the set of values and passes the result down the pipe, can use variable names, e.g. <tt>/mul 10 i 30 j</tt>', true, true);
-    registerSlashCommand('max', (_, value) => maxValuesCallback(value), [], '<span class="monospace">(a b c d)</span> – returns the maximum value of the set of values and passes the result down the pipe, can use variable names, e.g. <tt>/max 10 i 30 j</tt>', true, true);
-    registerSlashCommand('min', (_, value) => minValuesCallback(value), [], '<span class="monospace">(a b c d)</span> – returns the minimum value of the set of values and passes the result down the pipe, can use variable names, e.g. <tt>/min 10 i 30 j</tt>', true, true);
-    registerSlashCommand('sub', (_, value) => subValuesCallback(value), [], '<span class="monospace">(a b)</span> – performs a subtraction of two values and passes the result down the pipe, can use variable names, e.g. <tt>/sub i 5</tt>', true, true);
-    registerSlashCommand('div', (_, value) => divValuesCallback(value), [], '<span class="monospace">(a b)</span> – performs a division of two values and passes the result down the pipe, can use variable names, e.g. <tt>/div 10 i</tt>', true, true);
-    registerSlashCommand('mod', (_, value) => modValuesCallback(value), [], '<span class="monospace">(a b)</span> – performs a modulo operation of two values and passes the result down the pipe, can use variable names, e.g. <tt>/mod i 2</tt>', true, true);
-    registerSlashCommand('pow', (_, value) => powValuesCallback(value), [], '<span class="monospace">(a b)</span> – performs a power operation of two values and passes the result down the pipe, can use variable names, e.g. <tt>/pow i 2</tt>', true, true);
-    registerSlashCommand('sin', (_, value) => sinValuesCallback(value), [], '<span class="monospace">(a)</span> – performs a sine operation of a value and passes the result down the pipe, can use variable names, e.g. <tt>/sin i</tt>', true, true);
-    registerSlashCommand('cos', (_, value) => cosValuesCallback(value), [], '<span class="monospace">(a)</span> – performs a cosine operation of a value and passes the result down the pipe, can use variable names, e.g. <tt>/cos i</tt>', true, true);
-    registerSlashCommand('log', (_, value) => logValuesCallback(value), [], '<span class="monospace">(a)</span> – performs a logarithm operation of a value and passes the result down the pipe, can use variable names, e.g. <tt>/log i</tt>', true, true);
-    registerSlashCommand('abs', (_, value) => absValuesCallback(value), [], '<span class="monospace">(a)</span> – performs an absolute value operation of a value and passes the result down the pipe, can use variable names, e.g. <tt>/abs i</tt>', true, true);
-    registerSlashCommand('sqrt', (_, value) => sqrtValuesCallback(value), [], '<span class="monospace">(a)</span> – performs a square root operation of a value and passes the result down the pipe, can use variable names, e.g. <tt>/sqrt i</tt>', true, true);
-    registerSlashCommand('round', (_, value) => roundValuesCallback(value), [], '<span class="monospace">(a)</span> – rounds a value and passes the result down the pipe, can use variable names, e.g. <tt>/round i</tt>', true, true);
-    registerSlashCommand('len', (_, value) => lenValuesCallback(value), [], '<span class="monospace">(a)</span> – gets the length of a value and passes the result down the pipe, can use variable names, e.g. <tt>/len i</tt>', true, true);
-    registerSlashCommand('rand', (args, value) => randValuesCallback(Number(args.from ?? 0), Number(args.to ?? (value.length ? value : 1)), args), [], '<span class="monospace">(from=number=0 to=number=1 round=round|ceil|floor)</span> – returns a random number between from and to, e.g. <tt>/rand</tt> or <tt>/rand 10</tt> or <tt>/rand from=5 to=10</tt>', true, true);
+/**
+ * Declare a new variable in the current scope.
+ * @param {{_scope:SlashCommandScope, key?:string}} args Named arguments.
+ * @param {String|[String, SlashCommandClosure]} value Name and optional value for the variable.
+ * @returns The variable's value
+ */
+function letCallback(args, value) {
+    if (Array.isArray(value)) {
+        args._scope.letVariable(value[0], typeof value[1] == 'string' ? value.slice(1).join(' ') : value[1]);
+        return value[1];
+    }
+    if (args.key !== undefined) {
+        const key = args.key;
+        const val = value;
+        args._scope.letVariable(key, val);
+        return val;
+    } else if (value.includes(' ')) {
+        const key = value.split(' ')[0];
+        const val = value.split(' ').slice(1).join(' ');
+        args._scope.letVariable(key, val);
+        return val;
+    }
+    args._scope.letVariable(value);
+}
+
+/**
+ * Set or retrieve a variable in the current scope or nearest ancestor scope.
+ * @param {{_scope:SlashCommandScope, key?:string, index?:String|Number}} args Named arguments.
+ * @param {String|[String, SlashCommandClosure]} value Name and optional value for the variable.
+ * @returns The variable's value
+ */
+function varCallback(args, value) {
+    if (Array.isArray(value)) {
+        args._scope.setVariable(value[0], typeof value[1] == 'string' ? value.slice(1).join(' ') : value[1], args.index);
+        return value[1];
+    }
+    if (args.key !== undefined) {
+        const key = args.key;
+        const val = value;
+        args._scope.setVariable(key, val, args.index);
+        return val;
+    } else if (value.includes(' ')) {
+        const key = value.split(' ')[0];
+        const val = value.split(' ').slice(1).join(' ');
+        args._scope.setVariable(key, val, args.index);
+        return val;
+    }
+    return args._scope.getVariable(args.key ?? value, args.index);
+}
+
+export function registerVariableCommands() {
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'listvar',
+        callback: listVariablesCallback,
+        helpString: 'List registered chat variables.',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'setvar',
+        callback: (args, value) => setLocalVariable(args.key || args.name, value, args),
+        returns: 'the set variable value',
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'key', 'variable name', [ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+            new SlashCommandNamedArgument(
+                'index', 'list index', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'value', [ARGUMENT_TYPE.STRING, ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.BOOLEAN, ARGUMENT_TYPE.LIST, ARGUMENT_TYPE.DICTIONARY], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Set a local variable value and pass it down the pipe. The <code>index</code> argument is optional.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/setvar key=color green</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'getvar',
+        callback: (args, value) => getLocalVariable(value, args),
+        returns: 'the variable value',
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'key', 'variable name', [ARGUMENT_TYPE.VARIABLE_NAME], false,
+            ),
+            new SlashCommandNamedArgument(
+                'index', 'list index', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'key', [ARGUMENT_TYPE.VARIABLE_NAME], false,
+            ),
+        ],
+        helpString: `
+            <div>
+                Get a local variable value and pass it down the pipe. The <code>index</code> argument is optional.
+            </div>
+            <div>
+                <strong>Examples:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/getvar height</code></pre>
+                    </li>
+                    <li>
+                        <pre><code class="language-stscript">/getvar key=height</code></pre>
+                    </li>
+                    <li>
+                        <pre><code class="language-stscript">/getvar index=3 costumes</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'addvar',
+        callback: (args, value) => addLocalVariable(args.key || args.name, value),
+        returns: 'the new variable value',
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'key', 'variable name', [ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'value to add to the variable', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.STRING], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Add a value to a local variable and pass the result down the pipe.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/addvar key=score 10</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'setglobalvar',
+        callback: (args, value) => setGlobalVariable(args.key || args.name, value, args),
+        returns: 'the set global variable value',
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'key', 'variable name', [ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+            new SlashCommandNamedArgument(
+                'index', 'list index', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'value', [ARGUMENT_TYPE.STRING, ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.BOOLEAN, ARGUMENT_TYPE.LIST, ARGUMENT_TYPE.DICTIONARY], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Set a global variable value and pass it down the pipe. The <code>index</code> argument is optional.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/setglobalvar key=color green</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'getglobalvar',
+        callback: (args, value) => getGlobalVariable(value, args),
+        returns: 'global variable value',
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'key', 'variable name', [ARGUMENT_TYPE.VARIABLE_NAME], false,
+            ),
+            new SlashCommandNamedArgument(
+                'index', 'list index', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'key', [ARGUMENT_TYPE.VARIABLE_NAME], false,
+            ),
+        ],
+        helpString: `
+            <div>
+                Get a global variable value and pass it down the pipe. The <code>index</code> argument is optional.
+            </div>
+            <div>
+                <strong>Examples:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/getglobalvar height</code></pre>
+                    </li>
+                    <li>
+                        <pre><code class="language-stscript">/getglobalvar key=height</code></pre>
+                    </li>
+                    <li>
+                        <pre><code class="language-stscript">/getglobalvar index=3 costumes</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'addglobalvar',
+        callback: (args, value) => addGlobalVariable(args.key || args.name, value),
+        returns: 'the new variable value',
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'key', 'variable name', [ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'value to add to the variable', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.STRING], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Add a value to a global variable and pass the result down the pipe.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/addglobalvar key=score 10</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'incvar',
+        callback: (_, value) => incrementLocalVariable(value),
+        returns: 'the new variable value',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'key', [ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Increment a local variable by 1 and pass the result down the pipe.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/incvar score</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'decvar',
+        callback: (_, value) => decrementLocalVariable(value),
+        returns: 'the new variable value',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'key', [ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Decrement a local variable by 1 and pass the result down the pipe.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/decvar score</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'incglobalvar',
+        callback: (_, value) => incrementGlobalVariable(value),
+        returns: 'the new variable value',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'key', [ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Increment a global variable by 1 and pass the result down the pipe.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/incglobalvar score</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'decglobalvar',
+        callback: (_, value) => decrementGlobalVariable(value),
+        returns: 'the new variable value',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'key', [ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Decrement a global variable by 1 and pass the result down the pipe.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/decglobalvar score</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'if',
+        callback: ifCallback,
+        returns: 'result of the executed command ("then" or "else")',
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'left', 'left operand', [ARGUMENT_TYPE.VARIABLE_NAME, ARGUMENT_TYPE.STRING, ARGUMENT_TYPE.NUMBER], true,
+            ),
+            new SlashCommandNamedArgument(
+                'right', 'right operand', [ARGUMENT_TYPE.VARIABLE_NAME, ARGUMENT_TYPE.STRING, ARGUMENT_TYPE.NUMBER], true,
+            ),
+            new SlashCommandNamedArgument(
+                'rule', 'comparison rule', [ARGUMENT_TYPE.STRING], true, false, null, [
+                    new SlashCommandEnumValue('gt',  'a > b'),
+                    new SlashCommandEnumValue('gte', 'a >= b'),
+                    new SlashCommandEnumValue('lt',  'a < b'),
+                    new SlashCommandEnumValue('lte', 'a <= b'),
+                    new SlashCommandEnumValue('eq',  'a == b'),
+                    new SlashCommandEnumValue('neq', 'a !== b'),
+                    new SlashCommandEnumValue('not', '!a'),
+                    new SlashCommandEnumValue('in',  'a includes b'),
+                    new SlashCommandEnumValue('nin', 'a not includes b'),
+                ],
+            ),
+            new SlashCommandNamedArgument(
+                'else', 'command to execute if not true', [ARGUMENT_TYPE.CLOSURE, ARGUMENT_TYPE.SUBCOMMAND], false,
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'command to execute if true', [ARGUMENT_TYPE.CLOSURE, ARGUMENT_TYPE.SUBCOMMAND], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Compares the value of the left operand <code>a</code> with the value of the right operand <code>b</code>,
+                and if the condition yields true, then execute any valid slash command enclosed in quotes and pass the
+                result of the command execution down the pipe.
+            </div>
+            <div>
+                Numeric values and string literals for left and right operands supported.
+            </div>
+            <div>
+                <strong>Available rules:</strong>
+                <ul>
+                    <li>gt => a > b</li>
+                    <li>gte => a >= b</li>
+                    <li>lt => a < b</li>
+                    <li>lte => a <= b</li>
+                    <li>eq => a == b</li>
+                    <li>neq => a != b</li>
+                    <li>not => !a</li>
+                    <li>in (strings) => a includes b</li>
+                    <li>nin (strings) => a not includes b</li>
+                </ul>
+            </div>
+            <div>
+                <strong>Examples:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/if left=score right=10 rule=gte "/speak You win"</code></pre>
+                        triggers a /speak command if the value of "score" is greater or equals 10.
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'while',
+        callback: whileCallback,
+        returns: 'result of the last executed command',
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'left', 'left operand', [ARGUMENT_TYPE.VARIABLE_NAME, ARGUMENT_TYPE.STRING, ARGUMENT_TYPE.NUMBER], true,
+            ),
+            new SlashCommandNamedArgument(
+                'right', 'right operand', [ARGUMENT_TYPE.VARIABLE_NAME, ARGUMENT_TYPE.STRING, ARGUMENT_TYPE.NUMBER], true,
+            ),
+            new SlashCommandNamedArgument(
+                'rule', 'comparison rule', [ARGUMENT_TYPE.STRING], true, false, null, [
+                    new SlashCommandEnumValue('gt',  'a > b'),
+                    new SlashCommandEnumValue('gte', 'a >= b'),
+                    new SlashCommandEnumValue('lt',  'a < b'),
+                    new SlashCommandEnumValue('lte', 'a <= b'),
+                    new SlashCommandEnumValue('eq',  'a == b'),
+                    new SlashCommandEnumValue('neq', 'a !== b'),
+                    new SlashCommandEnumValue('not', '!a'),
+                    new SlashCommandEnumValue('in',  'a includes b'),
+                    new SlashCommandEnumValue('nin', 'a not includes b'),
+                ],
+            ),
+            new SlashCommandNamedArgument(
+                'guard', 'disable loop iteration limit', [ARGUMENT_TYPE.STRING], false, false, null, ['off'],
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'command to execute while true', [ARGUMENT_TYPE.CLOSURE, ARGUMENT_TYPE.SUBCOMMAND], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Compares the value of the left operand <code>a</code> with the value of the right operand <code>b</code>,
+                and if the condition yields true, then execute any valid slash command enclosed in quotes.
+            </div>
+            <div>
+                Numeric values and string literals for left and right operands supported.
+            </div>
+            <div>
+                <strong>Available rules:</strong>
+                <ul>
+                    <li>gt => a > b</li>
+                    <li>gte => a >= b</li>
+                    <li>lt => a < b</li>
+                    <li>lte => a <= b</li>
+                    <li>eq => a == b</li>
+                    <li>neq => a != b</li>
+                    <li>not => !a</li>
+                    <li>in (strings) => a includes b</li>
+                    <li>nin (strings) => a not includes b</li>
+                </ul>
+            </div>
+            <div>
+                <strong>Examples:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/setvar key=i 0 | /while left=i right=10 rule=let "/addvar key=i 1"</code></pre>
+                        adds 1 to the value of "i" until it reaches 10.
+                    </li>
+                </ul>
+            </div>
+            <div>
+                Loops are limited to 100 iterations by default, pass <code>guard=off</code> to disable.
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'times',
+        callback: timesCallback,
+        returns: 'result of the last executed command',
+        namedArgumentList: [],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'repeats',
+                [ARGUMENT_TYPE.NUMBER],
+                true,
+            ),
+            new SlashCommandArgument(
+                'command',
+                [ARGUMENT_TYPE.CLOSURE, ARGUMENT_TYPE.SUBCOMMAND],
+                true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Execute any valid slash command enclosed in quotes <code>repeats</code> number of times.
+            </div>
+            <div>
+                <strong>Examples:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/setvar key=i 1 | /times 5 "/addvar key=i 1"</code></pre>
+                        adds 1 to the value of "i" 5 times.
+                    </li>
+                    <li>
+                        <pre><code class="language-stscript">/times 4 "/echo {{timesIndex}}"</code></pre>
+                        echos the numbers 0 through 4. <code>{{timesIndex}}</code> is replaced with the iteration number (zero-based).
+                    </li>
+                </ul>
+            </div>
+            <div>
+                Loops are limited to 100 iterations by default, pass <code>guard=off</code> to disable.
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'flushvar',
+        callback: (_, value) => deleteLocalVariable(value),
+        namedArgumentList: [],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'key', [ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Delete a local variable.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/flushvar score</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'flushglobalvar',
+        callback: (_, value) => deleteGlobalVariable(value),
+        namedArgumentList: [],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'key', [ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Deletes the specified global variable.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/flushglobalvar score</code></pre>
+                        Deletes the global variable <code>score</code>.
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'add',
+        callback: addValuesCallback,
+        returns: 'sum of the provided values',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'values', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME], true, true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Performs an addition of the set of values and passes the result down the pipe.
+                Can use variable names.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/add 10 i 30 j</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'mul',
+        callback: (args, value) => mulValuesCallback(args, value),
+        result: 'product of the provided values',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'values to multiply',
+                [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME],
+                true,
+                true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Performs a multiplication of the set of values and passes the result down the pipe. Can use variable names.
+            </div>
+            <div>
+                <strong>Examples:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/mul 10 i 30 j</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'max',
+        callback: maxValuesCallback,
+        returns: 'maximum value of the set of values',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'values',
+                [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME],
+                true,
+                true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Returns the maximum value of the set of values and passes the result down the pipe. Can use variable names.
+            </div>
+            <div>
+                <strong>Examples:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/max 10 i 30 j</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'min',
+        callback: minValuesCallback,
+        returns: 'minimum value of the set of values',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'values', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME], true, true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Returns the minimum value of the set of values and passes the result down the pipe.
+                Can use variable names.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/min 10 i 30 j</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'sub',
+        callback: subValuesCallback,
+        returns: 'difference of the provided values',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'values', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME], true, true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Performs a subtraction of the set of values and passes the result down the pipe.
+                Can use variable names.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/sub i 5</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'div',
+        callback: divValuesCallback,
+        returns: 'result of division',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'dividend', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+            new SlashCommandArgument(
+                'divisor', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Performs a division of two values and passes the result down the pipe.
+                Can use variable names.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/div 10 i</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'mod',
+        callback: modValuesCallback,
+        returns: 'result of modulo operation',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'dividend', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+            new SlashCommandArgument(
+                'divisor', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Performs a modulo operation of two values and passes the result down the pipe.
+                Can use variable names.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/mod i 2</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'pow',
+        callback: powValuesCallback,
+        returns: 'result of power operation',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'base', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+            new SlashCommandArgument(
+                'exponent', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Performs a power operation of two values and passes the result down the pipe.
+                Can use variable names.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/pow i 2</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'sin',
+        callback: sinValuesCallback,
+        returns: 'sine of the provided value',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'value', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Performs a sine operation of a value and passes the result down the pipe.
+                Can use variable names.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/sin i</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'cos',
+        callback: cosValuesCallback,
+        returns: 'cosine of the provided value',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'value', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Performs a cosine operation of a value and passes the result down the pipe.
+                Can use variable names.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/cos i</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'log',
+        callback: logValuesCallback,
+        returns: 'log of the provided value',
+        namedArgumentList: [],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'value', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Performs a logarithm operation of a value and passes the result down the pipe.
+                Can use variable names.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/log i</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'abs',
+        callback: absValuesCallback,
+        returns: 'absolute value of the provided value',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'value', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Performs an absolute value operation of a value and passes the result down the pipe.
+                Can use variable names.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/abs i</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'sqrt',
+        callback: sqrtValuesCallback,
+        returns: 'square root of the provided value',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'value', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Performs a square root operation of a value and passes the result down the pipe.
+                Can use variable names.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/sqrt i</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'round',
+        callback: roundValuesCallback,
+        returns: 'rounded value',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'value', [ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.VARIABLE_NAME], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Rounds a value and passes the result down the pipe.
+                Can use variable names.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/round i</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'len',
+        callback: (_, value) => lenValuesCallback(value),
+        returns: 'length of the provided value',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'value', [ARGUMENT_TYPE.STRING, ARGUMENT_TYPE.VARIABLE_NAME], true
+            ),
+        ],
+        helpString: `
+            <div>
+                Gets the length of a value and passes the result down the pipe. Can use variable names.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/len i</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'rand',
+        callback: (args, value) => randValuesCallback(Number(args.from ?? 0), Number(args.to ?? (value.length ? value : 1)), args),
+        returns: 'random number',
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'from',
+                'starting value for the range (inclusive)',
+                [ARGUMENT_TYPE.NUMBER],
+                false,
+                false,
+                '0',
+            ),
+            new SlashCommandNamedArgument(
+                'to',
+                'ending value for the range (inclusive)',
+                [ARGUMENT_TYPE.NUMBER],
+                false,
+                false,
+                '1',
+            ),
+            new SlashCommandNamedArgument(
+                'round',
+                'rounding method for the result',
+                [ARGUMENT_TYPE.STRING],
+                false,
+                false,
+                null,
+                ['round', 'ceil', 'floor'],
+            ),
+        ],
+        helpString: `
+            <div>
+                Returns a random number between <code>from</code> and <code>to</code> (inclusive).
+            </div>
+            <div>
+                <strong>Examples:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/rand</code></pre>
+                        Returns a random number between 0 and 1.
+                    </li>
+                    <li>
+                        <pre><code class="language-stscript">/rand 10</code></pre>
+                        Returns a random number between 0 and 10.
+                    </li>
+                    <li>
+                        <pre><code class="language-stscript">/rand from=5 to=10</code></pre>
+                        Returns a random number between 5 and 10.
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'var',
+        callback: (args, value) => varCallback(args, value),
+        returns: 'the variable value',
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'key', 'variable name', [ARGUMENT_TYPE.VARIABLE_NAME], false,
+            ),
+            new SlashCommandNamedArgument(
+                'index',
+                'optional index for list or dictionary',
+                [ARGUMENT_TYPE.NUMBER],
+                false, // isRequired
+                false, // acceptsMultiple
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'variable name',
+                [ARGUMENT_TYPE.VARIABLE_NAME],
+                false, // isRequired
+                false, // acceptsMultiple
+            ),
+            new SlashCommandArgument(
+                'variable value',
+                [ARGUMENT_TYPE.STRING, ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.BOOLEAN, ARGUMENT_TYPE.LIST, ARGUMENT_TYPE.DICTIONARY, ARGUMENT_TYPE.CLOSURE],
+                false, // isRequired
+                false, // acceptsMultiple
+            ),
+        ],
+        splitUnnamedArgument: true,
+        helpString: `
+            <div>
+                Get or set a variable.
+            </div>
+            <div>
+                <strong>Examples:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/let x foo | /var x foo bar | /var x | /echo</code></pre>
+                    </li>
+                    <li>
+                        <pre><code class="language-stscript">/let x foo | /var key=x foo bar | /var key=x | /echo</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'let',
+        callback: (args, value) => letCallback(args, value),
+        returns: 'the variable value',
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'key', 'variable name', [ARGUMENT_TYPE.VARIABLE_NAME], false,
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'variable name', [ARGUMENT_TYPE.VARIABLE_NAME], false,
+            ),
+            new SlashCommandArgument(
+                'variable value', [ARGUMENT_TYPE.STRING, ARGUMENT_TYPE.NUMBER, ARGUMENT_TYPE.BOOLEAN, ARGUMENT_TYPE.LIST, ARGUMENT_TYPE.DICTIONARY, ARGUMENT_TYPE.CLOSURE],
+            ),
+        ],
+        splitUnnamedArgument: true,
+        helpString: `
+            <div>
+                Declares a new variable in the current scope.
+            </div>
+            <div>
+                <strong>Examples:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/let x foo bar | /echo {{var::x}}</code></pre>
+                    </li>
+                    <li>
+                        <pre><code class="language-stscript">/let key=x foo bar | /echo {{var::x}}</code></pre>
+                    </li>
+                    <li>
+                        <pre><code class="language-stscript">/let y</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
 }
diff --git a/public/scripts/world-info.js b/public/scripts/world-info.js
index e62f175ae..af102a45c 100644
--- a/public/scripts/world-info.js
+++ b/public/scripts/world-info.js
@@ -2,7 +2,6 @@ import { saveSettings, callPopup, substituteParams, getRequestHeaders, chat_meta
 import { download, debounce, initScrollHeight, resetScrollHeight, parseJsonFile, extractDataFromPng, getFileBuffer, getCharaFilename, getSortableDelay, escapeRegex, PAGINATION_TEMPLATE, navigation_option, waitUntilCondition, isTrueBoolean, setValueByPath, flashHighlight } from './utils.js';
 import { extension_settings, getContext } from './extensions.js';
 import { NOTE_MODULE_NAME, metadata_keys, shouldWIAddPrompt } from './authors-note.js';
-import { registerSlashCommand } from './slash-commands.js';
 import { isMobile } from './RossAscends-mods.js';
 import { FILTER_TYPES, FilterHelper } from './filters.js';
 import { getTokenCountAsync } from './tokenizers.js';
@@ -11,6 +10,9 @@ import { getTagKeyForEntity } from './tags.js';
 import { resolveVariable } from './variables.js';
 import { debounce_timeout } from './constants.js';
 import { getRegexedString, regex_placement } from './extensions/regex/engine.js';
+import { SlashCommandParser } from './slash-commands/SlashCommandParser.js';
+import { SlashCommand } from './slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from './slash-commands/SlashCommandArgument.js';
 
 export {
     world_info,
@@ -674,12 +676,161 @@ function registerWorldInfoSlashCommands() {
         return '';
     }
 
-    registerSlashCommand('world', onWorldInfoChange, [], '<span class="monospace">[optional state=off|toggle] [optional silent=true] (optional name)</span> – sets active World, or unsets if no args provided, use <code>state=off</code> and <code>state=toggle</code> to deactivate or toggle a World, use <code>silent=true</code> to suppress toast messages', true, true);
-    registerSlashCommand('getchatbook', getChatBookCallback, ['getchatlore', 'getchatwi'], '– get a name of the chat-bound lorebook or create a new one if was unbound, and pass it down the pipe', true, true);
-    registerSlashCommand('findentry', findBookEntryCallback, ['findlore', 'findwi'], '<span class="monospace">(file=bookName field=field [texts])</span> – find a UID of the record from the specified book using the fuzzy match of a field value (default: key) and pass it down the pipe, e.g. <tt>/findentry file=chatLore field=key Shadowfang</tt>', true, true);
-    registerSlashCommand('getentryfield', getEntryFieldCallback, ['getlorefield', 'getwifield'], '<span class="monospace">(file=bookName field=field [UID])</span> – get a field value (default: content) of the record with the UID from the specified book and pass it down the pipe, e.g. <tt>/getentryfield file=chatLore field=content 123</tt>', true, true);
-    registerSlashCommand('createentry', createEntryCallback, ['createlore', 'createwi'], '<span class="monospace">(file=bookName key=key [content])</span> – create a new record in the specified book with the key and content (both are optional) and pass the UID down the pipe, e.g. <tt>/createentry file=chatLore key=Shadowfang The sword of the king</tt>', true, true);
-    registerSlashCommand('setentryfield', setEntryFieldCallback, ['setlorefield', 'setwifield'], '<span class="monospace">(file=bookName uid=UID field=field [value])</span> – set a field value (default: content) of the record with the UID from the specified book. To set multiple values for key fields, use comma-delimited list as a value, e.g. <tt>/setentryfield file=chatLore uid=123 field=key Shadowfang,sword,weapon</tt>', true, true);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'world',
+        callback: onWorldInfoChange,
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'state', 'set world state', [ARGUMENT_TYPE.STRING], false, false, null, ['off', 'toggle'],
+            ),
+            new SlashCommandNamedArgument(
+                'silent', 'suppress toast messages', [ARGUMENT_TYPE.BOOLEAN], false,
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'name', [ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        helpString: `
+            <div>
+                Sets active World, or unsets if no args provided, use <code>state=off</code> and <code>state=toggle</code> to deactivate or toggle a World, use <code>silent=true</code> to suppress toast messages.
+            </div>
+        `,
+        aliases: [],
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'getchatbook',
+        callback: getChatBookCallback,
+        returns: 'lorebook name',
+        helpString: 'Get a name of the chat-bound lorebook or create a new one if was unbound, and pass it down the pipe.',
+        aliases: ['getchatlore', 'getchatwi'],
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'findentry',
+        aliases: ['findlore', 'findwi'],
+        returns: 'UID',
+        callback: findBookEntryCallback,
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'file', 'bookName', ARGUMENT_TYPE.STRING, true,
+            ),
+            new SlashCommandNamedArgument(
+                'field', 'field value for fuzzy match (default: key)', ARGUMENT_TYPE.STRING, false, false, 'key',
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'texts', ARGUMENT_TYPE.STRING, true, true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Find a UID of the record from the specified book using the fuzzy match of a field value (default: key) and pass it down the pipe.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code>/findentry file=chatLore field=key Shadowfang</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'getentryfield',
+        aliases: ['getlorefield', 'getwifield'],
+        callback: getEntryFieldCallback,
+        returns: 'field value',
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'file', 'bookName', ARGUMENT_TYPE.STRING, true,
+            ),
+            new SlashCommandNamedArgument(
+                'field', 'field to retrieve (default: content)', ARGUMENT_TYPE.STRING, false, false, 'content',
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'UID', ARGUMENT_TYPE.STRING, true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Get a field value (default: content) of the record with the UID from the specified book and pass it down the pipe.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code>/getentryfield file=chatLore field=content 123</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'createentry',
+        callback: createEntryCallback,
+        aliases: ['createlore', 'createwi'],
+        returns: 'UID of the new record',
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'file', 'book name', [ARGUMENT_TYPE.STRING], true,
+            ),
+            new SlashCommandNamedArgument(
+                'key', 'record key', [ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'content', [ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        helpString: `
+            <div>
+                Create a new record in the specified book with the key and content (both are optional) and pass the UID down the pipe.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code>/createentry file=chatLore key=Shadowfang The sword of the king</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'setentryfield',
+        callback: setEntryFieldCallback,
+        aliases: ['setlorefield', 'setwifield'],
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'file', 'book name', [ARGUMENT_TYPE.STRING], true,
+            ),
+            new SlashCommandNamedArgument(
+                'uid', 'record UID', [ARGUMENT_TYPE.STRING], true,
+            ),
+            new SlashCommandNamedArgument(
+                'field', 'field name', [ARGUMENT_TYPE.STRING], true, false, 'content',
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'value', [ARGUMENT_TYPE.STRING], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Set a field value (default: content) of the record with the UID from the specified book. To set multiple values for key fields, use comma-delimited list as a value.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code>/setentryfield file=chatLore uid=123 field=key Shadowfang,sword,weapon</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+
 }
 
 // World Info Editor
diff --git a/public/style.css b/public/style.css
index 7ac30cfdf..1c25565b4 100644
--- a/public/style.css
+++ b/public/style.css
@@ -76,6 +76,7 @@
     /*base variable calculated in rems*/
     --fontScale: 1;
     --mainFontSize: calc(var(--fontScale) * 15px);
+    --mainFontFamily: "Noto Sans", "Noto Color Emoji", sans-serif;
 
     /* base variable for blur strength slider calculations */
     --blurStrength: 10;
@@ -133,7 +134,7 @@ body {
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
-    font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
+    font-family: var(--mainFontFamily);
     font-size: var(--mainFontSize);
     color: var(--SmartThemeBodyColor);
     overflow: hidden;
@@ -626,7 +627,6 @@ body .panelControlBar {
     flex-direction: row;
     column-gap: 5px;
     font-size: var(--bottomFormIconSize);
-    overflow: hidden;
     order: 25;
     width: 100%;
 }
@@ -688,6 +688,64 @@ body .panelControlBar {
     opacity: 0.7;
 }
 
+
+#form_sheld.isExecutingCommandsFromChatInput {
+    #send_but {
+        visibility: hidden;
+    }
+    #rightSendForm > div:not(.mes_send).stscript_btn {
+        &.stscript_pause, &.stscript_stop {
+            display: flex;
+        }
+    }
+    &.paused {
+        #rightSendForm > div:not(.mes_send).stscript_btn {
+            &.stscript_pause {
+                display: none;
+            }
+            &.stscript_continue {
+                display: flex;
+            }
+        }
+    }
+}
+#rightSendForm > div:not(.mes_send) {
+    &.stscript_btn {
+        padding-right: 2px;
+        place-self: center;
+        cursor: pointer;
+        transition: 0.3s;
+        opacity: 1;
+        display: none;
+        &.stscript_pause > .fa-solid {
+            background-color: rgb(146, 190, 252);
+        }
+        &.stscript_continue > .fa-solid {
+            background-color: rgb(146, 190, 252);
+        }
+        &.stscript_stop > .fa-solid {
+            background-color: rgb(215, 136, 114);
+        }
+        > .fa-solid {
+            --toastInfoColor: #2F96B4;
+            --progColor: rgba(0, 128, 0, 0.839);
+            border-radius: 35%;
+            border: 0 solid var(--progColor);
+            aspect-ratio: 1 / 1;
+            display: flex;
+            color: rgb(24 24 24);
+            font-size: 0.5em;
+            height: var(--bottomFormIconSize);
+            justify-content: center;
+            align-items: center;
+            box-shadow:
+                0 0 0 var(--progColor),
+                0 0 0 var(--progColor)
+            ;
+        }
+    }
+}
+
 #options_button {
     width: var(--bottomFormBlockSize);
     height: var(--bottomFormBlockSize);
@@ -1054,8 +1112,8 @@ select {
 }
 
 #send_textarea {
-    min-height: var(--bottomFormBlockSize);
-    height: var(--bottomFormBlockSize);
+    min-height: calc(var(--bottomFormBlockSize) + 3px);
+    height: calc(var(--bottomFormBlockSize) + 3px);
     max-height: 50vh;
     max-height: 50svh;
     word-wrap: break-word;
@@ -1070,6 +1128,683 @@ select {
     text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
     flex: 1;
     order: 3;
+
+    --progColor: rgb(146, 190, 252);
+    --progFlashColor: rgb(215, 136, 114);
+    --progSuccessColor: rgb(81, 163, 81);
+    --progErrorColor: rgb(189, 54, 47);
+    --progAbortedColor: rgb(215, 136, 114);
+    --progWidth: 3px;
+    --progWidthClip: calc(var(--progWidth) + 2px);
+    --prog: 0%;
+    --progDone: 0;
+    border-top: var(--progWidth) solid var(--progColor);
+    clip-path: polygon(
+        0% calc(var(--progDone) * var(--progWidthClip)),
+        var(--prog) calc(var(--progDone) * var(--progWidthClip)),
+        var(--prog) var(--progWidthClip),
+        100% var(--progWidthClip),
+        100% 100%,
+        0% 100%
+    );
+    transition: clip-path 200ms;
+}
+@keyframes script_progress_pulse {
+    0%, 100% {
+        border-top-color: var(--progColor);
+    }
+    50% {
+        border-top-color: var(--progFlashColor);
+    }
+}
+#form_sheld.isExecutingCommandsFromChatInput.script_paused #send_textarea {
+    animation-name: script_progress_pulse;
+    animation-duration: 1500ms;
+    animation-timing-function: ease-in-out;
+    animation-delay: 0s;
+    animation-iteration-count: infinite;
+}
+
+#form_sheld.script_success #send_textarea {
+    border-top-color: var(--progSuccessColor);
+}
+#form_sheld.script_error #send_textarea {
+    border-top-color: var(--progErrorColor);
+}
+#form_sheld.script_aborted #send_textarea {
+    border-top-color: var(--progAbortedColor);
+}
+
+.autoComplete-wrap {
+    --targetOffset: 0;
+    --direction: column;
+    --leftOffset: 1vw;
+    --rightOffset: 1vw;
+    display: flex;
+    flex-direction: var(--direction);
+    position: absolute;
+    left: var(--leftOffset);
+    right: var(--rightOffset);
+    z-index: 10000;
+
+
+    &.isFloating {
+        --direction: row;
+        left: 0;
+        right: 0;
+        &:before {
+            content: "";
+            flex: 0 1 calc(var(--targetOffset) * 1px);
+            display: block;
+            pointer-events: none;
+        }
+        .autoComplete {
+            flex: 0 0 auto;
+            width: 50vw;
+            pointer-events: all;
+        }
+        &:after {
+            content: "";
+            flex: 1 1 0;
+            display: block;
+            pointer-events: none;
+        }
+    }
+}
+
+.autoComplete-detailsWrap {
+    --targetOffset: 0;
+    --rightOffset: 1vw;
+    --bottomOffset: 0;
+    --leftOffset: 74vw;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 5vh;
+    right: var(--rightOffset);
+    bottom: var(--bottomOffset);
+    left: var(--leftOffset);
+    z-index: 10000;
+    pointer-events: none;
+
+    &:before {
+        content: "";
+        flex: 0 1 calc(var(--targetOffset) * 1px - 5vh);
+        display: block;
+    }
+    .autoComplete-details {
+        flex: 0 0 auto;
+        max-height: 80vh;
+        pointer-events: all;
+    }
+    &:after {
+        content: "";
+        flex: 1 1 0;
+        display: block;
+    }
+
+    &.isFloating {
+        flex-direction: row;
+        left: 0;
+        right: 0;
+        .autoComplete-details {
+            max-height: unset;
+            width: 25vw;
+        }
+        &.left {
+            &:before {
+                flex: 0 1 calc(var(--targetOffset) * 1px - 25vw);
+            }
+            &:after {
+                flex: 1 0 auto;
+                max-width: 50vw;
+            }
+        }
+        &.right {
+            &:before {
+                flex: 0 0 calc(var(--targetOffset) * 1px + 50vw);
+            }
+        }
+        &.full {
+            &:before {
+                content: "";
+                flex: 0 1 calc(var(--targetOffset) * 1px);
+                display: block;
+            }
+            .autoComplete-details {
+                flex: 0 0 auto;
+                max-width: 50vw;
+                width: unset;
+            }
+            &:after {
+                content: "";
+                flex: 1 1 0;
+                display: block;
+            }
+        }
+    }
+}
+
+
+body[data-stscript-style="dark"] {
+    --ac-style-color-border: rgba(69 69 69 / 1);
+    --ac-style-color-background: rgba(32 32 32 / 1);
+    --ac-style-color-text: rgba(204 204 204 / 1);
+    --ac-style-color-matchedBackground: rgba(0 0 0 / 0);
+    --ac-style-color-matchedText: rgba(108 171 251 / 1);
+    --ac-style-color-selectedBackground: rgba(32 57 92 / 1);
+    --ac-style-color-selectedText: rgba(255 255 255 / 1);
+    --ac-style-color-hoveredBackground: rgba(43 45 46 / 1);
+    --ac-style-color-hoveredText: rgba(204 204 204 / 1);
+    --ac-style-color-argName: rgba(171 209 239 / 1);
+    --ac-style-color-type: rgba(131 199 177 / 1);
+    --ac-style-color-cmd: rgba(219 219 173 / 1);
+    --ac-style-color-symbol: rgba(115 156 211 / 1);
+    --ac-style-color-string: rgba(190 146 122 / 1);
+    --ac-style-color-number: rgba(188 205 170 / 1);
+    --ac-style-color-variable: rgba(131 193 252 / 1);
+    --ac-style-color-variableLanguage: rgba(98 160 251 / 1);
+    --ac-style-color-punctuation: rgba(242 214 48 / 1);
+    --ac-style-color-punctuationL1: rgba(195 118 210 / 1);
+    --ac-style-color-punctuationL2: rgba(98 160 251 / 1);
+    --ac-style-color-currentParenthesis: rgba(195 118 210 / 1);
+    --ac-style-color-comment: rgba(122 151 90 / 1);
+}
+body[data-stscript-style="light"] {
+    --ac-style-color-border: rgba(200 200 200 / 1);
+    --ac-style-color-background: rgba(248 248 248 / 1);
+    --ac-style-color-text: rgba(59 59 59 / 1);
+    --ac-style-color-matchedBackground: rgba(0 0 0 / 0);
+    --ac-style-color-matchedText: rgba(61 104 188 / 1);
+    --ac-style-color-selectedBackground: rgba(232 232 232 / 1);
+    --ac-style-color-selectedText: rgba(0 0 0 / 1);
+    --ac-style-color-hoveredBackground: rgba(242 242 242 / 1);
+    --ac-style-color-hoveredText: rgba(59 59 59 / 1);
+    --ac-style-color-argName: rgba(16 24 125 / 1);
+    --ac-style-color-type: rgba(80 127 152 / 1);
+    --ac-style-color-cmd: rgba(113 94 43 / 1);
+    --ac-style-color-symbol: rgba(36 37 249 / 1);
+    --ac-style-color-string: rgba(139 31 24 / 1);
+    --ac-style-color-number: rgba(76 132 91 / 1);
+    --ac-style-color-variable: rgba(16 24 125 / 1);
+    --ac-style-color-currentParenthesis: rgba(195 118 210 / 1);
+    --ac-style-color-comment: rgba(70 126 26 / 1);
+}
+body[data-stscript-style="theme"] {
+    --ac-style-color-border: var(--SmartThemeBorderColor);
+    --ac-style-color-background: var(--SmartThemeBlurTintColor);
+    --ac-style-color-text: var(--SmartThemeEmColor);
+    --ac-style-color-matchedBackground: rgba(0 0 0 / 0);
+    --ac-style-color-matchedText: var(--SmartThemeQuoteColor);
+    --ac-style-color-selectedBackground: color-mix(in srgb, rgb(128 128 128) 75%, var(--SmartThemeChatTintColor));
+    --ac-style-color-selectedText: var(--SmartThemeBodyColor);
+    --ac-style-color-hoveredBackground: color-mix(in srgb, rgb(128 128 128) 30%, var(--SmartThemeChatTintColor));
+    --ac-style-color-hoveredText: var(--SmartThemeEmColor);
+    --ac-style-color-argName: rgba(171 209 239 / 1);
+    --ac-style-color-type: rgba(131 199 177 / 1);
+    --ac-style-color-cmd: rgba(219 219 173 / 1);
+    --ac-style-color-symbol: rgba(115 156 211 / 1);
+    --ac-style-color-string: rgba(190 146 122 / 1);
+    --ac-style-color-variable: rgba(131 193 252 / 1);
+    --ac-style-color-currentParenthesis: rgba(195 118 210 / 1);
+    --ac-style-color-comment: rgba(122 151 90 / 1);
+}
+body {
+    --ac-font-scale: 0.8;
+}
+.autoComplete, .autoComplete-details {
+    --ac-color-border: var(--ac-style-color-border, rgba(69 69 69 / 1));
+    --ac-color-background: var(--ac-style-color-background, rgba(32 32 32 / 1));
+    --ac-color-text: var(--ac-style-color-text, rgba(204 204 204 / 1));
+    --ac-color-matchedBackground: var(--ac-style-color-matchedBackground, rgba(0 0 0 / 0));
+    --ac-color-matchedText: var(--ac-style-color-matchedText, rgba(108 171 251 / 1));
+    --ac-color-selectedBackground: var(--ac-style-color-selectedBackground, rgba(32 57 92 / 1));
+    --ac-color-selectedText: var(--ac-style-color-selectedText, rgba(255 255 255 / 1));
+    --ac-color-hoveredBackground: var(--ac-style-color-hoveredBackground, rgba(43 45 46 / 1));
+    --ac-color-hoveredText: var(--ac-style-color-hoveredText, rgba(204 204 204 / 1));
+    --ac-color-argName: var(--ac-style-color-argName, rgba(171 209 239 / 1));
+    --ac-color-type: var(--ac-style-color-type, rgba(131 199 177 / 1));
+    --ac-color-cmd: var(--ac-style-color-cmd, rgba(219 219 173 / 1));
+    --ac-color-symbol: var(--ac-style-color-symbol, rgba(115 156 211 / 1));
+    --ac-color-string: var(--ac-style-color-string, rgba(190 146 122 / 1));
+    --ac-color-number: var(--ac-style-color-number, rgba(188 205 170 / 1));
+    --ac-color-variable: var(--ac-style-color-variable, rgba(131 193 252 / 1));
+    --ac-color-variableLanguage: var(--ac-style-color-variableLanguage, rgba(98 160 251 / 1));
+    --ac-color-punctuation: var(--ac-style-color-punctuation, rgba(242 214 48 / 1));
+    --ac-color-punctuationL1: var(--ac-style-color-punctuationL1, rgba(195 118 210 / 1));
+    --ac-color-punctuationL2: var(--ac-style-color-punctuationL2, rgba(98 160 251 / 1));
+    --ac-color-currentParenthesis: var(--ac-style-color-currentParenthesis, rgba(195 118 210 / 1));
+    --ac-color-comment: var(--ac-style-color-comment, rgba(122 151 90 / 1));
+
+    font-size: calc(var(--ac-font-scale) * 1em);
+
+    --bottom: 50vh;
+    background: var(--ac-color-background);
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    border: 1px solid var(--ac-color-border);
+    border-radius: 3px;
+    color: var(--ac-color-text);
+    max-height: calc(95vh - var(--bottom));
+    list-style: none;
+    margin: 0px;
+    overflow: auto;
+    padding: 0px;
+    padding-bottom: 1px;
+    line-height: 1.2;
+    text-align: left;
+    z-index: 10000;
+    * { text-shadow: none; }
+}
+body[data-stscript-style] .autoComplete [data-option-type] {
+    &[data-option-type="enum"] .type { color: var(--ac-color-string); }
+    &[data-option-type="command"] .type { color: var(--ac-color-cmd); }
+    &[data-option-type="namedArgument"] .type { color: var(--ac-color-argName); }
+    &[data-option-type="variable"] .type { color: var(--ac-color-punctuationL1); }
+    &[data-option-type="qr"] .type { color: var(--ac-color-variable); }
+    &[data-option-type="macro"] .type { color: var(--ac-color-variableLanguage); }
+}
+body[data-stscript-style] .hljs.language-stscript {
+    * { text-shadow: none !important; }
+    text-shadow: none !important;
+
+    background-color: var(--ac-style-color-background);
+    color: var(--ac-style-color-text);
+
+    .hljs-title.function_ { color: var(--ac-style-color-cmd); }
+    .hljs-title.function_.invoke__ { color: var(--ac-style-color-cmd); }
+    .hljs-string { color: var(--ac-style-color-string); }
+    .hljs-number { color: var(--ac-style-color-number); }
+    .hljs-variable { color: var(--ac-style-color-variable); }
+    .hljs-variable.language_ { color: var(--ac-style-color-variableLanguage); }
+    .hljs-property { color: var(--ac-style-color-argName); }
+    .hljs-punctuation { color: var(--ac-style-color-punctuation); }
+    .hljs-keyword { color: var(--ac-style-color-variableLanguage); }
+    .hljs-comment { color: var(--ac-style-color-comment); }
+    .hljs-abort { color: var(--ac-style-color-abort, #e38e23); }
+
+    .hljs-closure {
+        > .hljs-punctuation { color: var(--ac-style-color-punctuation); }
+        .hljs-closure {
+            > .hljs-punctuation { color: var(--ac-style-color-punctuationL1); }
+            .hljs-closure {
+                > .hljs-punctuation { color: var(--ac-style-color-punctuationL2); }
+                .hljs-closure {
+                    > .hljs-punctuation { color: var(--ac-style-color-punctuation); }
+                    .hljs-closure {
+                        > .hljs-punctuation { color: var(--ac-style-color-punctuationL1); }
+                        .hljs-closure {
+                            > .hljs-punctuation { color: var(--ac-style-color-punctuationL2); }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.autoComplete {
+    padding-bottom: 1px;
+    display: grid;
+    grid-template-columns: 0fr auto minmax(50%, 1fr);
+    align-items: center;
+    max-height: calc(95vh - var(--bottom));
+    container-type: inline-size;
+    > .item {
+        cursor: pointer;
+        padding: 3px;
+        text-shadow: none;
+        display: flex;
+        gap: 0.5em;
+        display: contents;
+        @container (max-width: 80em) {
+            .specs {
+                grid-column: 2 / 4;
+            }
+            > .help {
+                grid-column: 2 / 4;
+                padding-left: 1em;
+                opacity: 0.75;
+                height: auto;
+            }
+        }
+        &.blank {
+            display: block;
+            grid-column: 1 / 4;
+        }
+        &:hover > * {
+            background-color: var(--ac-color-hoveredBackground);
+            color: var(--ac-color-hoveredText);
+        }
+        &.selected > * {
+            background-color: var(--ac-color-selectedBackground);
+            color: var(--ac-color-selectedText);
+        }
+        > * {
+            height: 100%;
+        }
+        > *+* {
+            padding-left: 0.5em;
+        }
+
+        > .type {
+            flex: 0 0 auto;
+            display: inline-flex;
+            justify-content: center;
+            width: 2.25em;
+            font-size: 0.8em;
+            text-align: center;
+            /* opacity: 0.6; */
+            white-space: nowrap;
+            font-family: monospace;
+            line-height: calc(1.2em / 0.8);
+            /* &:before { content: "["; }
+            &:after { content: "]"; } */
+        }
+        > .specs {
+            align-items: flex-start;
+            > .name {
+                > .matched {
+                    background-color: var(--ac-color-matchedBackground);
+                    color: var(--ac-color-matchedText);
+                    font-weight: bold;
+                }
+            }
+            > .body {
+                flex-wrap: wrap;
+                column-gap: 0.5em;
+                > .arguments {
+                    display: contents;
+                    height: 100%;
+                }
+            }
+        }
+        > .help {
+            height: 100%;
+            > .helpContent {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 0.9em;white-space: nowrap;
+                line-height: 1.2;
+                max-height: 1.2em;
+                display: block;
+                > * {
+                    display: contents;
+                }
+            }
+        }
+    }
+}
+.autoComplete-details {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+    > .specs {
+        cursor: default;
+        flex-direction: column;
+        padding: 0.25em 0.25em 0.5em 0.25em;
+        border-bottom: 1px solid var(--ac-color-border);
+        > .name {
+            font-weight: bold;
+            color: var(--ac-color-text);
+            cursor: help;
+            &:hover {
+                text-decoration: 1px dotted underline;
+            }
+        }
+        > .body {
+            flex-direction: column;
+            gap: 0.5em;
+            > .arguments {
+                margin: 0;
+                padding-left: 1.25em;
+                > .argumentItem::marker {
+                    color: color-mix(in srgb, var(--ac-color-text), var(--ac-style-color-background));
+                }
+
+                .argumentSpec {
+                    display: flex;
+                    gap: 0.5em;
+                    .argument-default {
+                        &:before {
+                            content: " = ";
+                            color: var(--ac-color-text);
+                        }
+                        color: var(--ac-color-string);
+                    }
+                }
+
+                .argument {
+                    cursor: help;
+                    &:hover:not(:has(.argument-name:hover, .argument-types:hover, .argument-enums:hover)) {
+                        text-decoration: 1px dotted underline;
+                    }
+                }
+                .argument-name,
+                .argument-types,
+                .argument-enums,
+                .argument-default
+                {
+                    cursor: help;
+                    &:hover {
+                        text-decoration: 1px dotted underline;
+                    }
+                }
+
+                .argument.optional + .argument-description:before,
+                .argumentSpec:has(.argument.optional) + .argument-description:before
+                {
+                    content: "(optional) ";
+                    color: var(--ac-color-text);
+                    opacity: 0.5;
+                }
+                .argument-description {
+                    margin-left: 0.5em;
+                    font-family: var(--mainFontFamily);
+                    font-size: 0.9em;
+                }
+            }
+            .returns {
+                cursor: help;
+                &:hover {
+                    text-decoration: 1px dotted underline;
+                }
+            }
+        }
+    }
+    > .help {
+        padding: 0 0.5em 0.5em 0.5em;
+        div {
+            margin-block-end: 1em;
+        }
+        ul {
+            margin: 0;
+            padding-left: 1.5em;
+        }
+        pre {
+            margin: 0;
+            > code {
+                display: block;
+                padding: 0;
+            }
+        }
+    }
+    > .aliases {
+        padding: 0 0.5em 0.5em 0.5em;
+        &:before { content: '(alias: '; }
+        > .alias {
+            font-family: monospace;
+            &+.alias:before { content: ', '; }
+        }
+        &:after { content: ')'; }
+    }
+}
+
+.autoComplete > .item, .autoComplete-details {
+    > .specs {
+        display: flex;
+        gap: 0.5em;
+        > .name {
+            font-family: monospace;
+            white-space: nowrap;
+            /* color: var(--ac-color-text); */
+        }
+        > .body {
+            display: flex;
+            > .arguments {
+                font-family: monospace;
+                .argument {
+                    white-space: nowrap;
+                    &.namedArgument {
+                        &:before {
+                            content: "[";
+                            color: var(--ac-color-text);
+                        }
+                        &:after {
+                            content: "]";
+                            color: var(--ac-color-text);
+                        }
+                        &.optional:after {
+                            content: "]?";
+                            color: var(--ac-color-text);
+                        }
+                        > .argument-name {
+                            color: var(--ac-color-argName);
+                        }
+                    }
+                    &.unnamedArgument {
+                        &:before {
+                            content: "(";
+                            color: var(--ac-color-text);
+                        }
+                        &.multiple:before {
+                            content: "...(";
+                            color: var(--ac-color-text);
+                        }
+                        &:after {
+                            content: ")";
+                            color: var(--ac-color-text);
+                        }
+                        &.optional:after {
+                            content: ")?";
+                            color: var(--ac-color-text);
+                        }
+                    }
+                    > .argument-name + .argument-types:before {
+                        content: "=";
+                        color: var(--ac-color-text);
+                    }
+                    > .argument-types {
+                        color: var(--ac-color-type);
+                        word-break: break-all;
+                        white-space: break-spaces;
+                        > .argument-type + .argument-type:before {
+                            content: "|";
+                            color: var(--ac-color-text);
+                        };
+                    }
+                    > .argument-types + .argument-enums,
+                    > .argument-name + .argument-enums
+                    {
+                        &:before {
+                            content: "=";
+                            color: var(--ac-color-text);
+                        }
+                    }
+                    > .argument-enums {
+                        color: var(--ac-color-string);
+                        word-break: break-all;
+                        white-space: break-spaces;
+                        > .argument-enum + .argument-enum:before {
+                            content: "|";
+                            color: var(--ac-color-text);
+                        };
+                    }
+                }
+            }
+            > .returns {
+                font-family: monospace;
+                color: var(--ac-color-text);
+                &:before {
+                    content: "=> ";
+                    color: var(--ac-color-symbol);
+                }
+            }
+        }
+    }
+}
+@media screen and (max-width: 1000px) {
+    .autoComplete-wrap {
+        left: 1vw;
+        right: 1vw;
+    }
+    .autoComplete-detailsWrap:not(.full) {
+        left: 50vw;
+    }
+}
+.slashCommandBrowser {
+    > .search {
+        display: flex;
+        gap: 1em;
+        align-items: baseline;
+        white-space: nowrap;
+        > .searchLabel {
+            flex: 1 1 auto;
+            display: flex;
+            gap: 0.5em;
+            align-items: baseline;
+            > .searchInput {
+                flex: 1 1 auto;
+            }
+        }
+        > .searchOptions {
+            display: flex;
+            gap: 1em;
+            align-items: baseline;
+        }
+    }
+    > .commandContainer {
+        display: flex;
+        align-items: flex-start;
+        container-type: inline-size;
+        > .autoComplete {
+            flex: 1 1 auto;
+            max-height: unset;
+            > .isFiltered {
+                display: none;
+            }
+            .specs {
+                grid-column: 2 / 4;
+            }
+            .help {
+                grid-column: 2 / 4;
+                padding-left: 1em;
+                opacity: 0.75;
+            }
+        }
+        > .autoComplete-detailsWrap {
+            flex: 0 0 auto;
+            align-self: stretch;
+            width: 30%;
+            position: static;
+
+            &:before {
+                flex: 0 1 calc(var(--targetOffset) * 1px);
+            }
+            > .autoComplete-details {
+                max-height: 50vh;
+            }
+        }
+        @container (max-width: 1000px) {
+            > .autoComplete-detailsWrap {
+                width: 50%;
+                max-width: unset;
+                position: absolute;
+                left: unset;
+                right: 0;
+                top: 0;
+            }
+        }
+    }
 }
 
 #character_popup .editor_maximize {
@@ -2625,6 +3360,97 @@ input[type="range"]::-webkit-slider-thumb {
     background: var(--white100);
 }
 
+.doubleRangeContainer {
+    display: flex;
+    --markerWidth: 15px;
+    container-type: inline-size;
+    container-name: doubleRangeContainer;
+    > .doubleRangeInputContainer {
+        flex: 0 0 50%;
+        overflow: hidden;
+        position: relative;
+        > datalist {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            font-size: x-small;
+            > option {
+                flex: 0 0 0;
+                width: 0;
+                display: flex;
+                justify-content: center;
+            }
+        }
+        @container doubleRangeContainer (max-width: 200px) {
+            > datalist {
+                height: 2.5em;
+            }
+            &:nth-child(1) > datalist > option {
+                transform: rotate(-45deg);
+                transform-origin: bottom right;
+            }
+            &:nth-child(2) > datalist > option {
+                transform: rotate(45deg);
+                transform-origin: bottom left;
+            }
+        }
+        > input::-webkit-slider-thumb {
+            z-index: 2;
+        }
+        &:after {
+            /* shifted to center to hide corners of the inset shadow */
+            --shift: 2px;
+            /* 100% of the input width (1em padding) */
+            --inputWidth: calc(100% - 1em);
+            /* input padding max(20px, 20%) */
+            --inputPadding: calc(max(20px, var(--inputWidth) * 0.2));
+            /* 100% of the variable range width: 100% of input - input padding - marker width) */
+            --rangeWidth: calc(var(--inputWidth) - var(--inputPadding) - var(--markerWidth));
+            /* always visible part of the input range (value = 0) */
+            --zeroOffset: calc(var(--inputPadding) + var(--markerWidth) / 2);
+            content: '';
+            position: absolute;
+            top: 11px;
+            width: calc(var(--value) / 2 * var(--rangeWidth) + var(--zeroOffset) + var(--shift));
+            height: 5px;
+            background-color: var(--SmartThemeQuoteColor);
+            box-shadow: inset 0 0 2px black;
+        }
+        &:nth-child(1) {
+            --value: 0;
+            padding-left: 1em;
+            > input {
+                direction: rtl;
+                position: relative;
+                padding-right: max(20px, 20%);
+            }
+            > datalist {
+                direction: rtl;
+                padding-right: calc(var(--markerWidth)/2 + max(20px, 20%));
+                padding-left: calc(var(--markerWidth)/2 - 2px);
+            }
+            &:after {
+                right: -2px;
+            }
+        }
+        &:nth-child(2) {
+            --value: 0;
+            padding-right: 1em;
+            > input {
+                position: relative;
+                padding-left: max(20px, 20%);
+            }
+            > datalist {
+                padding-left: calc(var(--markerWidth)/2 + max(20px, 20%));
+                padding-right: calc(var(--markerWidth)/2 - 2px);
+            }
+            &:after {
+                left: -2px;
+            }
+        }
+    }
+}
+
 /*Notes '?' links*/
 
 .note-link-span {
@@ -3441,6 +4267,15 @@ a {
     transition: all 250ms;
 }
 
+#user-settings-block [name="MiscellaneousToggles"],
+#CustomCSS-block,
+#CustomCSS-textAreaBlock {
+    display: contents;
+}
+#customCSS {
+    flex: 1 1 auto;
+}
+
 #ui_language_select {
     width: 8em;
 }