☰

Civitai Prompt Autocomplete & Tag Wiki

Adds tag autocomplete and wiki lookup features

  1. // ==UserScript==
  2. // @name         Civitai Prompt Autocomplete & Tag Wiki
  3. // @namespace    http://tampermonkey.net/
  4. // @version      4.6
  5. // @description  Adds tag autocomplete and wiki lookup features
  6. // @author       AndroidXL
  7. // @match        https://civitai.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=civitai.com
  9. // @grant        GM.xmlHttpRequest
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // All variable declarations moved to top
  17.     let promptInput = null;
  18.     let negativePromptInput = null;  // Add negative prompt input reference
  19.     let activeInput = null;  // Track which input is currently active
  20.     let suggestionsBox = null;
  21.     let currentSuggestions = [];
  22.     let selectedSuggestionIndex = -1;
  23.     let debounceTimer;
  24.     const debounceDelay = 50;
  25.     let lastCurrentWord = "";
  26.     let lastStartPos = 0; // New variable to track word start position
  27.     let wikiOverlay = null;
  28.     let wikiSearchContainer = null;
  29.     let wikiContent = null;
  30.     let currentPosts = [];
  31.     let currentPostIndex = 0;
  32.     let wikiInitialized = false;
  33.     let autocompleteEnabled = true; // Default state for autocomplete
  34.     let wikiHotkey = 't'; // Default hotkey for wiki
  35.     let settingsOpen = false;
  36.  
  37.     // Wiki history navigation variables
  38.     let wikiHistory = [];
  39.     let historyIndex = -1;
  40.     let isNavigatingHistory = false;
  41.  
  42.     // Initialize customTags with defaults, will be overridden by localStorage if available
  43.     let customTags = {
  44.         'quality': 'masterpiece, best quality, amazing quality, very detailed',
  45.         'quality_pony': 'score_9, score_8_up, score_7_up, score_6_up',
  46.     };
  47.  
  48.     // Create and inject styles without GM_addStyle
  49.     const styleElement = document.createElement('style');
  50.     styleElement.textContent = `
  51.         #autocomplete-suggestions-box {
  52.             position: absolute;
  53.             background-color: #1a1b1e;
  54.             border: 1px solid #333;
  55.             border-radius: 5px;
  56.             margin-top: 2px;
  57.             z-index: 100;
  58.             overflow-y: auto;
  59.             max-height: 150px;
  60.             width: calc(100% - 6px);
  61.             padding: 2px;
  62.             box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  63.         }
  64.         #autocomplete-suggestions-box div {
  65.             padding: 4px 8px;
  66.             cursor: pointer;
  67.             white-space: nowrap;
  68.             overflow: hidden;
  69.             text-overflow: ellipsis;
  70.             color: #C1C2C5;
  71.             font-size: 14px;
  72.         }
  73.         #autocomplete-suggestions-box div:hover {
  74.             background-color: #282a2d;
  75.         }
  76.         .autocomplete-selected {
  77.             background-color: #383a3e;
  78.         }
  79.         .suggestion-count {
  80.             color: #98C379;
  81.             font-weight: normal;
  82.             margin-left: 8px;
  83.             font-size: 0.9em;
  84.         }
  85.  
  86.         .wiki-search-overlay {
  87.             position: fixed;
  88.             top: 0;
  89.             left: 0;
  90.             width: 100%;
  91.             height: 100%;
  92.             background: rgba(0,0,0,0.5);
  93.             z-index: 9999;
  94.             display: none;
  95.             overflow-y: auto;
  96.             padding: 20px;
  97.         }
  98.  
  99.         .wiki-search-container {
  100.             position: relative;
  101.             width: 90%;
  102.             max-width: 800px;
  103.             margin: 40px auto;
  104.             transition: all 0.3s ease;
  105.         }
  106.  
  107.         .wiki-search-bar {
  108.             width: 100%;
  109.             padding: 12px;
  110.             background: rgba(26,27,30,0.95);
  111.             border: 1px solid #383a3e;
  112.             border-radius: 8px;
  113.             color: #fff;
  114.             font-size: 16px;
  115.         }
  116.  
  117.         /* Container for all buttons on the right */
  118.         .wiki-buttons-container {
  119.             position: absolute;
  120.             top: 12px;
  121.             right: 12px;
  122.             display: flex;
  123.             align-items: center;
  124.             gap: 8px;
  125.             z-index: 10002;
  126.         }
  127.  
  128.         .wiki-settings-button {
  129.             background: rgba(26,27,30,0.95);
  130.             color: #C1C2C5;
  131.             border: 1px solid #383a3e;
  132.             border-radius: 4px;
  133.             padding: 5px 10px;
  134.             cursor: pointer;
  135.             font-size: 14px;
  136.             height: 30px;
  137.             display: flex;
  138.             align-items: center;
  139.         }
  140.  
  141.         /* Wiki navigation buttons */
  142.         .wiki-nav-history {
  143.             display: flex;
  144.             gap: 5px;
  145.         }
  146.  
  147.         .wiki-nav-button {
  148.             background: rgba(26,27,30,0.95);
  149.             color: #C1C2C5;
  150.             border: 1px solid #383a3e;
  151.             border-radius: 4px;
  152.             width: 30px;
  153.             height: 30px;
  154.             display: flex;
  155.             align-items: center;
  156.             justify-content: center;
  157.             cursor: pointer;
  158.             font-size: 16px;
  159.             opacity: 0.7;
  160.             transition: opacity 0.3s, background-color 0.3s;
  161.         }
  162.  
  163.         .wiki-nav-button:hover:not(:disabled) {
  164.             background: #383a3e;
  165.             opacity: 1;
  166.         }
  167.  
  168.         .wiki-nav-button:disabled {
  169.             cursor: not-allowed;
  170.             opacity: 0.3;
  171.         }
  172.  
  173.         .wiki-settings-button:hover {
  174.             background: #383a3e;
  175.         }
  176.  
  177.         .wiki-settings-panel {
  178.             position: absolute;
  179.             top: 50%;
  180.             left: 50%;
  181.             transform: translate(-50%, -50%);
  182.             width: 90%;
  183.             max-width: 600px;
  184.             background: rgba(26,27,30,0.98);
  185.             border: 1px solid #383a3e;
  186.             border-radius: 8px;
  187.             padding: 20px;
  188.             z-index: 10003;
  189.             color: #C1C2C5;
  190.             box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  191.         }
  192.  
  193.         .wiki-settings-panel h2 {
  194.             margin-top: 0;
  195.             border-bottom: 1px solid #383a3e;
  196.             padding-bottom: 10px;
  197.         }
  198.  
  199.         .settings-section {
  200.             margin-bottom: 20px;
  201.         }
  202.  
  203.         .settings-section h3 {
  204.             margin-bottom: 10px;
  205.             font-size: 16px;
  206.             color: #98C379;
  207.         }
  208.  
  209.         .hotkey-setting {
  210.             display: flex;
  211.             align-items: center;
  212.             margin-bottom: 10px;
  213.         }
  214.  
  215.         .hotkey-setting label {
  216.             margin-right: 10px;
  217.         }
  218.  
  219.         .hotkey-setting input {
  220.             width: 50px;
  221.             background: #1a1b1e;
  222.             border: 1px solid #383a3e;
  223.             border-radius: 4px;
  224.             padding: 5px;
  225.             color: #fff;
  226.             text-align: center;
  227.         }
  228.  
  229.         .custom-tags-section {
  230.             margin-top: 15px;
  231.         }
  232.  
  233.         .custom-tag-row {
  234.             display: flex;
  235.             margin-bottom: 8px;
  236.             gap: 10px;
  237.         }
  238.  
  239.         .custom-tag-name,
  240.         .custom-tag-value {
  241.             flex: 1;
  242.             background: #1a1b1e;
  243.             border: 1px solid #383a3e;
  244.             border-radius: 4px;
  245.             padding: 5px 8px;
  246.             color: #fff;
  247.         }
  248.  
  249.         .custom-tag-controls {
  250.             display: flex;
  251.             gap: 5px;
  252.         }
  253.  
  254.         .btn {
  255.             background: #383a3e;
  256.             color: #C1C2C5;
  257.             border: none;
  258.             border-radius: 4px;
  259.             padding: 5px 10px;
  260.             cursor: pointer;
  261.             font-size: 14px;
  262.         }
  263.  
  264.         .btn:hover {
  265.             background: #4a4c52;
  266.         }
  267.  
  268.         .btn-save {
  269.             background: #2c6e49;
  270.         }
  271.  
  272.         .btn-save:hover {
  273.             background: #358f5f;
  274.         }
  275.  
  276.         .btn-delete {
  277.             background: #6e2c2c;
  278.         }
  279.  
  280.         .btn-delete:hover {
  281.             background: #913a3a;
  282.         }
  283.  
  284.         .btn-add {
  285.             background: #2c4a6e;
  286.             margin-top: 10px;
  287.         }
  288.  
  289.         .btn-add:hover {
  290.             background: #385d89;
  291.         }
  292.  
  293.         .settings-panel-footer {
  294.             display: flex;
  295.             justify-content: flex-end;
  296.             margin-top: 20px;
  297.             padding-top: 15px;
  298.             border-top: 1px solid #383a3e;
  299.             gap: 10px;
  300.         }
  301.  
  302.         .wiki-content {
  303.             background: rgba(26,27,30,0.95);
  304.             border-radius: 8px;
  305.             margin-top: 20px;
  306.             padding: 20px;
  307.             width: 100%;
  308.             position: relative;
  309.         }
  310.  
  311.         .wiki-text-content {
  312.             padding-right: 420px;
  313.             min-height: 500px;
  314.             word-break: break-word;
  315.             overflow-wrap: break-word;
  316.         }
  317.  
  318.         .wiki-description {
  319.             line-height: 1.4;
  320.             white-space: pre-line;
  321.             font-size: 15px;
  322.         }
  323.  
  324.         .wiki-image-section {
  325.             position: absolute;
  326.             top: 20px;
  327.             right: 20px;
  328.             width: 400px;
  329.             background: rgba(0,0,0,0.2);
  330.             border-radius: 8px;
  331.             padding: 10px;
  332.             display: flex;
  333.             flex-direction: column;
  334.             gap: 10px;
  335.         }
  336.  
  337.         .wiki-image-navigation {
  338.             display: flex;
  339.             justify-content: space-between;
  340.             align-items: center;
  341.             width: 100%;
  342.             padding: 0 10px;
  343.             position: relative;
  344.             height: 40px;
  345.         }
  346.  
  347.         .image-nav-button {
  348.             position: absolute;
  349.             top: 50%;
  350.             transform: translateY(-50%);
  351.             background: rgba(0,0,0,0.7);
  352.             color: white;
  353.             border: none;
  354.             width: 40px;
  355.             height: 40px;
  356.             cursor: pointer;
  357.             border-radius: 20px;
  358.             opacity: 0.8;
  359.             transition: opacity 0.3s, background-color 0.3s;
  360.             font-size: 18px;
  361.             z-index: 2;
  362.             display: flex;
  363.             align-items: center;
  364.             justify-content: center;
  365.         }
  366.  
  367.         .image-nav-button:hover {
  368.             opacity: 1;
  369.             background: rgba(0,0,0,0.9);
  370.         }
  371.  
  372.         .image-nav-button.prev {
  373.             left: 10px;
  374.         }
  375.  
  376.         .image-nav-button.next {
  377.             right: 10px;
  378.         }
  379.  
  380.         .wiki-image-container {
  381.             width: 100%;
  382.             height: 350px;
  383.             position: relative;
  384.             margin: 0;
  385.             background: rgba(0,0,0,0.1);
  386.             border-radius: 4px;
  387.             overflow: hidden;
  388.         }
  389.  
  390.         .wiki-image {
  391.             width: 100%;
  392.             height: 100%;
  393.             object-fit: contain;
  394.             border-radius: 4px;
  395.             transition: transform 0.3s ease;
  396.         }
  397.  
  398.         .wiki-image:hover {
  399.             transform: scale(1.03);
  400.         }
  401.  
  402.         .wiki-image-section {
  403.             position: absolute;
  404.             top: 20px;
  405.             right: 20px;
  406.             width: 400px;
  407.             background: rgba(0,0,0,0.2);
  408.             border-radius: 8px;
  409.             padding: 10px;
  410.             display: flex;
  411.             flex-direction: column;
  412.             gap: 10px;
  413.         }
  414.  
  415.         .wiki-image-navigation {
  416.             display: flex;
  417.             justify-content: space-between;
  418.             align-items: center;
  419.             width: 100%;
  420.             padding: 0 10px;
  421.         }
  422.  
  423.         .image-nav-button {
  424.             background: rgba(0,0,0,0.5);
  425.             color: white;
  426.             border: none;
  427.             padding: 8px 12px;
  428.             cursor: pointer;
  429.             border-radius: 4px;
  430.             opacity: 0.7;
  431.             transition: opacity 0.3s;
  432.             font-size: 16px;
  433.         }
  434.  
  435.         .wiki-image-container {
  436.             width: 100%;
  437.             height: 350px;
  438.             display: flex;
  439.             justify-content: center;
  440.             align-items: center;
  441.             position: relative;
  442.             margin: 0;
  443.             background: rgba(0,0,0,0.1);
  444.             border-radius: 4px;
  445.         }
  446.  
  447.         .wiki-image {
  448.             max-width: 100%;
  449.             max-height: 100%;
  450.             object-fit: contain;
  451.             border-radius: 4px;
  452.         }
  453.  
  454.         .wiki-nav-buttons {
  455.             width: 100%;
  456.             display: flex;
  457.             justify-content: center;
  458.         }
  459.  
  460.         .wiki-button {
  461.             padding: 8px 16px;
  462.             background: #383a3e;
  463.             border: none;
  464.             border-radius: 4px;
  465.             color: #fff;
  466.             cursor: pointer;
  467.             width: 100%;
  468.             text-align: center;
  469.         }
  470.  
  471.         .wiki-tag {
  472.             display: inline-block;
  473.             margin: 2px 4px;
  474.             padding: 2px 4px;
  475.             background: rgba(97, 175, 239, 0.1);
  476.             border-radius: 3px;
  477.             color: #61afef;
  478.             cursor: pointer;
  479.             text-decoration: underline;
  480.         }
  481.  
  482.         .wiki-tag:hover {
  483.             background: rgba(97, 175, 239, 0.2);
  484.         }
  485.  
  486.         .wiki-link {
  487.             color: #98c379;
  488.             text-decoration: underline;
  489.         }
  490.  
  491.         .wiki-loading {
  492.             text-align: center;
  493.             padding: 20px;
  494.         }
  495.  
  496.         .wiki-description {
  497.             line-height: 1.6;
  498.             white-space: pre-wrap;
  499.             font-size: 15px;
  500.         }
  501.  
  502.         .wiki-description p {
  503.             margin: 1em 0;
  504.         }
  505.  
  506.         .wiki-search-suggestions {
  507.             position: fixed;
  508.             margin-top: 2px;
  509.             background: rgba(26,27,30,0.95);
  510.             border: 1px solid #383a3e;
  511.             border-radius: 0 0 8px 8px;
  512.             max-height: 200px;
  513.             overflow-y: auto;
  514.             z-index: 10001;
  515.             width: 90%;
  516.             max-width: 800px;
  517.             left: 50%;
  518.             transform: translateX(-50%);
  519.         }
  520.  
  521.         .wiki-search-suggestion {
  522.             padding: 8px 12px;
  523.             cursor: pointer;
  524.             color: #fff;
  525.         }
  526.  
  527.         .wiki-search-suggestion:hover,
  528.         .wiki-search-suggestion.selected {
  529.             background: #383a3e;
  530.         }
  531.  
  532.         .no-images-message {
  533.             color: #666;
  534.             text-align: center;
  535.             padding: 20px;
  536.             font-style: italic;
  537.         }
  538.  
  539.         @keyframes slideUp {
  540.             from { transform: translateY(20px); opacity: 0; }
  541.             to { transform: translateY(0); opacity: 1; }
  542.         }
  543.  
  544.         .wiki-description h1 { font-size: 1.8em; margin: 0.8em 0 0.4em; }
  545.         .wiki-description h2 { font-size: 1.6em; margin: 0.7em 0 0.4em; }
  546.         .wiki-description h3 { font-size: 1.4em; margin: 0.6em 0 0.4em; }
  547.         .wiki-description h4 { font-size: 1.2em; margin: 0.5em 0 0.4em; }
  548.         .wiki-description h5 { font-size: 1.1em; margin: 0.5em 0 0.4em; }
  549.         .wiki-description h6 { font-size: 1em; margin: 0.5em 0 0.4em; }
  550.         .wiki-description p { margin: 0.5em 0; }
  551.  
  552.         .wiki-description ul {
  553.             margin: 0.5em 0 0.5em 1.5em;
  554.             padding: 0;
  555.         }
  556.  
  557.         .wiki-description li {
  558.             margin: 0.3em 0;
  559.             line-height: 1.4;
  560.         }
  561.  
  562.         /* Autocomplete toggle checkbox styles */
  563.         .autocomplete-toggle {
  564.             display: flex;
  565.             align-items: center;
  566.             margin-bottom: 5px;
  567.             font-size: 0.9em;
  568.             color: #C1C2C5;
  569.         }
  570.  
  571.         .autocomplete-toggle input {
  572.             margin-right: 5px;
  573.         }
  574.  
  575.         .tag-validation-error {
  576.             color: #f55;
  577.             font-size: 12px;
  578.             margin-top: 5px;
  579.         }
  580.     `;
  581.     document.head.appendChild(styleElement);
  582.  
  583.     // Load settings from localStorage
  584.     function loadSettings() {
  585.         try {
  586.             // Load autocomplete preference
  587.             const savedAutoComplete = localStorage.getItem('civitai-autocomplete-enabled');
  588.             if (savedAutoComplete !== null) {
  589.                 autocompleteEnabled = savedAutoComplete === 'true';
  590.             }
  591.  
  592.             // Load wiki hotkey
  593.             const savedHotkey = localStorage.getItem('civitai-wiki-hotkey');
  594.             if (savedHotkey) {
  595.                 wikiHotkey = savedHotkey;
  596.             }
  597.  
  598.             // Load custom tags
  599.             const savedTags = localStorage.getItem('civitai-custom-tags');
  600.             if (savedTags) {
  601.                 try {
  602.                     customTags = JSON.parse(savedTags);
  603.                 } catch (e) {
  604.                     console.error('Error parsing custom tags:', e);
  605.                     // If parsing fails, keep the default tags
  606.                 }
  607.             }
  608.  
  609.             debug('Settings loaded from localStorage');
  610.         } catch (e) {
  611.             console.error('Error loading settings:', e);
  612.             // Use defaults if there's an error
  613.         }
  614.     }
  615.  
  616.     // Save settings to localStorage
  617.     function saveSettings() {
  618.         try {
  619.             localStorage.setItem('civitai-autocomplete-enabled', autocompleteEnabled);
  620.             localStorage.setItem('civitai-wiki-hotkey', wikiHotkey);
  621.             localStorage.setItem('civitai-custom-tags', JSON.stringify(customTags));
  622.             debug('Settings saved to localStorage');
  623.         } catch (e) {
  624.             console.error('Error saving settings:', e);
  625.         }
  626.     }
  627.  
  628.     // Load settings when script starts
  629.     loadSettings();
  630.  
  631.    // Replace handleInputEvents function
  632.     function handleInputEvents(e) {
  633.         const input = e.target;
  634.         if ((input.id === 'input_prompt' || input.id === 'input_negativePrompt') && autocompleteEnabled) {
  635.             activeInput = input; // Set the active input
  636.             const currentWordObj = getCurrentWord(input.value, input.selectionStart);
  637.             lastCurrentWord = currentWordObj.word;
  638.             lastStartPos = currentWordObj.startPos;
  639.             fetchSuggestions(lastCurrentWord);
  640.  
  641.             // Position suggestions box below the active input
  642.             if (suggestionsBox) {
  643.                 const inputRect = input.getBoundingClientRect();
  644.                 suggestionsBox.style.position = 'absolute';
  645.                 suggestionsBox.style.left = `${inputRect.left}px`;
  646.                 suggestionsBox.style.top = `${inputRect.bottom + window.scrollY}px`;
  647.                 suggestionsBox.style.width = `${inputRect.width}px`;
  648.             }
  649.         }
  650.     }
  651.  
  652.     // Create the toggle checkbox
  653.     function createAutocompleteToggle() {
  654.         const toggleContainer = document.createElement('div');
  655.         toggleContainer.className = 'autocomplete-toggle';
  656.  
  657.         const checkbox = document.createElement('input');
  658.         checkbox.type = 'checkbox';
  659.         checkbox.id = 'autocomplete-toggle-checkbox';
  660.         checkbox.checked = autocompleteEnabled;
  661.  
  662.         const label = document.createElement('label');
  663.         label.htmlFor = 'autocomplete-toggle-checkbox';
  664.         label.textContent = 'Enable Tag Autocomplete';
  665.  
  666.         toggleContainer.appendChild(checkbox);
  667.         toggleContainer.appendChild(label);
  668.  
  669.         checkbox.addEventListener('change', function() {
  670.             autocompleteEnabled = this.checked;
  671.             saveSettings();
  672.             if (!autocompleteEnabled) {
  673.                 clearSuggestions();
  674.             }
  675.         });
  676.  
  677.         return toggleContainer;
  678.     }
  679.  
  680.     function handleKeydownEvents(e) {
  681.         if (e.target.id !== 'input_prompt' && e.target.id !== 'input_negativePrompt') return;
  682.         
  683.         activeInput = e.target; // Update active input
  684.     
  685.         if (e.key === 'ArrowDown') {
  686.             if (suggestionsBox?.style.display === 'block' && currentSuggestions.length > 0) {
  687.                 e.preventDefault();
  688.                 selectedSuggestionIndex = Math.min(selectedSuggestionIndex + 1, currentSuggestions.length - 1);
  689.                 updateSuggestionSelection();
  690.             }
  691.         } else if (e.key === 'ArrowUp') {
  692.             if (suggestionsBox?.style.display === 'block' && currentSuggestions.length > 0) {
  693.                 e.preventDefault();
  694.                 selectedSuggestionIndex = Math.max(selectedSuggestionIndex - 1, -1);
  695.                 updateSuggestionSelection();
  696.             }
  697.         } else if (e.key === 'Tab' || e.key === 'Enter') {
  698.             if (suggestionsBox?.style.display === 'block' && currentSuggestions.length > 0) {
  699.                 e.preventDefault();
  700.                 if (selectedSuggestionIndex !== -1) {
  701.                     insertSuggestion(currentSuggestions[selectedSuggestionIndex].label);
  702.                 } else {
  703.                     insertSuggestion(currentSuggestions[0].label);
  704.                 }
  705.             }
  706.         } else if (e.key === 'Escape') {
  707.             clearSuggestions();
  708.         }
  709.     }
  710.  
  711.     function setupAutocomplete() {
  712.         // Clean up old elements
  713.         if (suggestionsBox) {
  714.             suggestionsBox.remove();
  715.         }
  716.  
  717.         // Remove old toggle if it exists
  718.         const oldToggle = document.getElementById('autocomplete-toggle-checkbox');
  719.         if (oldToggle && oldToggle.parentNode) {
  720.             oldToggle.parentNode.remove();
  721.         }
  722.  
  723.         // Get both input elements
  724.         promptInput = document.getElementById('input_prompt');
  725.         negativePromptInput = document.getElementById('input_negativePrompt');
  726.  
  727.         // Exit if neither input exists
  728.         if (!promptInput && !negativePromptInput) return;
  729.  
  730.         // Create suggestions box (attach to document body instead of a specific input)
  731.         suggestionsBox = document.createElement('div');
  732.         suggestionsBox.id = 'autocomplete-suggestions-box';
  733.         suggestionsBox.style.display = 'none';
  734.         document.body.appendChild(suggestionsBox);
  735.  
  736.         // Create the toggle and insert it before the positive prompt if it exists
  737.         if (promptInput) {
  738.             const toggleContainer = createAutocompleteToggle();
  739.             promptInput.parentNode.parentNode.parentNode.parentNode.insertBefore(
  740.                 toggleContainer,
  741.                 promptInput.parentNode.parentNode.parentNode.parentNode.firstChild
  742.             );
  743.         }
  744.  
  745.         // Remove old event listeners and add new ones using event delegation
  746.         document.removeEventListener('input', handleInputEvents, true);
  747.         document.removeEventListener('keydown', handleKeydownEvents, true);
  748.         document.addEventListener('input', handleInputEvents, true);
  749.         document.addEventListener('keydown', handleKeydownEvents, true);
  750.  
  751.         // Handle clicks outside
  752.         document.addEventListener('click', (e) => {
  753.             if ((!promptInput?.contains(e.target) && !negativePromptInput?.contains(e.target)) &&
  754.                 !suggestionsBox?.contains(e.target)) {
  755.                 clearSuggestions();
  756.             }
  757.         });
  758.     }
  759.  
  760.     // Set up a more aggressive observer
  761.     const observer = new MutationObserver((mutations) => {
  762.         for (const mutation of mutations) {
  763.             const addedNodes = Array.from(mutation.addedNodes);
  764.             const hasPromptInput = addedNodes.some(node =>
  765.                 node.id === 'input_prompt' ||
  766.                 node.querySelector?.('#input_prompt')
  767.             );
  768.  
  769.             if (hasPromptInput || !document.getElementById('autocomplete-suggestions-box')) {
  770.                 setupAutocomplete();
  771.                 break;
  772.             }
  773.         }
  774.     });
  775.  
  776.     // Start observing with more specific config
  777.     observer.observe(document.body, {
  778.         childList: true,
  779.         subtree: true,
  780.         attributes: true,
  781.         attributeFilter: ['id']
  782.     });
  783.  
  784.     // Initial setup
  785.     setupAutocomplete();
  786.     initializeWiki();
  787.  
  788.     function fetchSuggestions(term) {
  789.         if (!term || !autocompleteEnabled) {
  790.             clearSuggestions();
  791.             return;
  792.         }
  793.  
  794.         // First, check custom tags
  795.         const matchingCustomTags = Object.keys(customTags)
  796.             .filter(tag => tag.toLowerCase().startsWith(term.toLowerCase()))
  797.             .map(tag => ({
  798.                 label: tag,
  799.                 count: '⭐', // Star to indicate custom tag
  800.                 isCustom: true,
  801.                 insertText: customTags[tag]
  802.             }));
  803.  
  804.         // If we have matching custom tags, show them immediately
  805.         if (matchingCustomTags.length > 0) {
  806.             currentSuggestions = matchingCustomTags;
  807.             showSuggestions();
  808.         }
  809.  
  810.         // Continue with API request for regular tags
  811.         const apiTerm = term.replace(/ /g, '_');
  812.  
  813.         clearTimeout(debounceTimer);
  814.         debounceTimer = setTimeout(() => {
  815.             GM.xmlHttpRequest({
  816.                 method: 'GET',
  817.                 url: `https://gelbooru.com/index.php?page=autocomplete2&term=${encodeURIComponent(apiTerm)}&type=tag_query&limit=10`,
  818.                 onload: function(response) {
  819.                     if (response.status === 200) {
  820.                         try {
  821.                             const data = JSON.parse(response.responseText);
  822.                             const fetchedSuggestions = data.map(item => ({
  823.                                 label: item.label.replace(/[()]/g, '\\$&'),
  824.                                 count: item.post_count,
  825.                                 isCustom: false
  826.                             }));
  827.                             // Combine custom and API suggestions
  828.                             filterAndShowSuggestions([...matchingCustomTags, ...fetchedSuggestions]);
  829.                         } catch (e) {
  830.                             console.error("Error parsing Gelbooru API response:", e);
  831.                             clearSuggestions();
  832.                         }
  833.                     } else {
  834.                         console.error("Gelbooru API request failed:", response.status, response.statusText);
  835.                         clearSuggestions();
  836.                     }
  837.                 },
  838.                 onerror: function(error) {
  839.                     console.error("Gelbooru API request error:", error);
  840.                     clearSuggestions();
  841.                 }
  842.             });
  843.         }, debounceDelay);
  844.     }
  845.  
  846.     function filterAndShowSuggestions(fetchedSuggestions) {
  847.         const existingTags = promptInput.value.split(',').map(tag => tag.trim().toLowerCase());
  848.         const filteredSuggestions = fetchedSuggestions.filter(suggestion => {
  849.             return !existingTags.includes(suggestion.label.toLowerCase())
  850.         });
  851.  
  852.         currentSuggestions = filteredSuggestions;
  853.  
  854.         showSuggestions();
  855.     }
  856.  
  857.  
  858.     function showSuggestions() {
  859.         if (currentSuggestions.length === 0) {
  860.             clearSuggestions();
  861.             return;
  862.         }
  863.  
  864.         suggestionsBox.innerHTML = '';
  865.  
  866.  
  867.         currentSuggestions.forEach((suggestion, index) => {
  868.             const suggestionDiv = document.createElement('div');
  869.             suggestionDiv.innerHTML = `${suggestion.label} <span class="suggestion-count">[${suggestion.count}]</span>`;
  870.             suggestionDiv.addEventListener('click', () => {
  871.                 insertSuggestion(suggestion.label);
  872.             });
  873.             suggestionsBox.appendChild(suggestionDiv);
  874.         });
  875.  
  876.         suggestionsBox.style.display = 'block';
  877.         selectedSuggestionIndex = -1;
  878.     }
  879.  
  880.     function clearSuggestions() {
  881.         if (suggestionsBox) {
  882.             suggestionsBox.style.display = 'none';
  883.             suggestionsBox.innerHTML = '';
  884.         }
  885.         currentSuggestions = [];
  886.         selectedSuggestionIndex = -1;
  887.     }
  888.  
  889.     function insertSuggestion(suggestion) {
  890.         // Make sure we have an active input
  891.         if (!activeInput) return;
  892.     
  893.         // Find the matching suggestion object
  894.         const suggestionObj = currentSuggestions.find(s => s.label === suggestion);
  895.         const textToInsert = (suggestionObj?.isCustom ? suggestionObj.insertText : suggestion)
  896.     
  897.         // Use setRangeText to replace the current word with the suggestion
  898.         const start = lastStartPos;
  899.         const end = activeInput.selectionStart;
  900.     
  901.         // Focus the input to ensure changes register in the undo stack
  902.         activeInput.focus();
  903.     
  904.         // Create a composition session to properly register in the undo stack
  905.         // First delete the current word manually
  906.         activeInput.setSelectionRange(start, end);
  907.         document.execCommand('delete');
  908.     
  909.         // Then insert the new text with execCommand
  910.         document.execCommand('insertText', false, textToInsert + ', ');
  911.     
  912.         // Simulate focus and blur to mimic user interaction
  913.         activeInput.focus();
  914.         activeInput.blur();
  915.         setTimeout(() => {
  916.             activeInput.focus();
  917.         }, 0); // Delay refocus to allow React to process
  918.     
  919.         // Clear suggestions and keep focus
  920.         clearSuggestions();
  921.         activeInput.focus();
  922.     }
  923.  
  924.     function updateSuggestionSelection() {
  925.         if (!suggestionsBox) return;
  926.  
  927.         const suggestionDivs = suggestionsBox.querySelectorAll('div');
  928.         suggestionDivs.forEach((div, index) => {
  929.             if (index === selectedSuggestionIndex) {
  930.                 div.classList.add('autocomplete-selected');
  931.                 div.scrollIntoView({ block: 'nearest' });
  932.             } else {
  933.                 div.classList.remove('autocomplete-selected');
  934.             }
  935.         });
  936.     }
  937.  
  938.     function getCurrentWord(text, cursorPosition) {
  939.         if (cursorPosition === undefined) cursorPosition = text.length;
  940.  
  941.         const textBeforeCursor = text.substring(0, cursorPosition);
  942.         const lastCommaIndex = textBeforeCursor.lastIndexOf(',');
  943.         let startPos, word;
  944.  
  945.         if (lastCommaIndex !== -1) {
  946.             startPos = lastCommaIndex + 1;
  947.             word = textBeforeCursor.substring(startPos).trim();
  948.             // Find the exact position where the trimmed word starts
  949.             if (word) {
  950.                 const leadingSpaces = textBeforeCursor.substring(startPos).length - textBeforeCursor.substring(startPos).trimLeft().length;
  951.                 startPos = startPos + leadingSpaces;
  952.             }
  953.         } else {
  954.             startPos = 0;
  955.             word = textBeforeCursor.trim();
  956.             // If the text has leading spaces, adjust the start position
  957.             if (word && textBeforeCursor !== word) {
  958.                 startPos = textBeforeCursor.indexOf(word);
  959.             }
  960.         }
  961.         
  962.         return { word, startPos };
  963.     }
  964.  
  965.     // Add debug logging function
  966.     function debug(msg) {
  967.         console.log(`[Wiki Debug] ${msg}`);
  968.     }
  969.  
  970.     // Create settings panel DOM
  971.     function createSettingsPanel() {
  972.         const settingsPanel = document.createElement('div');
  973.         settingsPanel.className = 'wiki-settings-panel';
  974.  
  975.         // Header
  976.         const header = document.createElement('h2');
  977.         header.textContent = 'Wiki & Autocomplete Settings';
  978.         settingsPanel.appendChild(header);
  979.  
  980.         // Hotkey section
  981.         const hotkeySection = document.createElement('div');
  982.         hotkeySection.className = 'settings-section';
  983.  
  984.         const hotkeyTitle = document.createElement('h3');
  985.         hotkeyTitle.textContent = 'Hotkeys';
  986.         hotkeySection.appendChild(hotkeyTitle);
  987.  
  988.         const hotkeyContent = document.createElement('div');
  989.         hotkeyContent.className = 'hotkey-setting';
  990.  
  991.         const hotkeyLabel = document.createElement('label');
  992.         hotkeyLabel.textContent = 'Wiki search hotkey:';
  993.  
  994.         const hotkeyInput = document.createElement('input');
  995.         hotkeyInput.type = 'text';
  996.         hotkeyInput.value = wikiHotkey;
  997.         hotkeyInput.maxLength = 1;
  998.         hotkeyInput.addEventListener('keydown', function(e) {
  999.             e.preventDefault();
  1000.             this.value = e.key.toLowerCase();
  1001.         });
  1002.  
  1003.         hotkeyContent.appendChild(hotkeyLabel);
  1004.         hotkeyContent.appendChild(hotkeyInput);
  1005.         hotkeySection.appendChild(hotkeyContent);
  1006.         settingsPanel.appendChild(hotkeySection);
  1007.  
  1008.         // Custom tags section
  1009.         const tagsSection = document.createElement('div');
  1010.         tagsSection.className = 'settings-section';
  1011.  
  1012.         const tagsTitle = document.createElement('h3');
  1013.         tagsTitle.textContent = 'Custom Tags';
  1014.         tagsSection.appendChild(tagsTitle);
  1015.  
  1016.         const tagsContainer = document.createElement('div');
  1017.         tagsContainer.className = 'custom-tags-section';
  1018.  
  1019.         // Create UI for each existing tag
  1020.         Object.keys(customTags).forEach(tag => {
  1021.             const tagRow = createTagRow(tag, customTags[tag]);
  1022.             tagsContainer.appendChild(tagRow);
  1023.         });
  1024.  
  1025.         // Add new tag button
  1026.         const addTagBtn = document.createElement('button');
  1027.         addTagBtn.className = 'btn btn-add';
  1028.         addTagBtn.textContent = '+ Add New Tag';
  1029.         addTagBtn.addEventListener('click', function() {
  1030.             const newTagRow = createTagRow('', '');
  1031.             tagsContainer.insertBefore(newTagRow, addTagBtn);
  1032.             newTagRow.querySelector('.custom-tag-name').focus();
  1033.         });
  1034.  
  1035.         tagsContainer.appendChild(addTagBtn);
  1036.         tagsSection.appendChild(tagsContainer);
  1037.         settingsPanel.appendChild(tagsSection);
  1038.  
  1039.         // Footer with buttons
  1040.         const footer = document.createElement('div');
  1041.         footer.className = 'settings-panel-footer';
  1042.  
  1043.         const cancelBtn = document.createElement('button');
  1044.         cancelBtn.className = 'btn';
  1045.         cancelBtn.textContent = 'Cancel';
  1046.         cancelBtn.addEventListener('click', hideSettingsPanel);
  1047.  
  1048.         const saveBtn = document.createElement('button');
  1049.         saveBtn.className = 'btn btn-save';
  1050.         saveBtn.textContent = 'Save Settings';
  1051.         saveBtn.addEventListener('click', function() {
  1052.             const errors = validateAndSaveSettings(hotkeyInput, tagsContainer);
  1053.             if (errors.length === 0) {
  1054.                 hideSettingsPanel();
  1055.             } else {
  1056.                 // Display errors
  1057.                 const existingError = settingsPanel.querySelector('.tag-validation-error');
  1058.                 if (existingError) existingError.remove();
  1059.  
  1060.                 const errorDiv = document.createElement('div');
  1061.                 errorDiv.className = 'tag-validation-error';
  1062.                 errorDiv.textContent = errors.join(', ');
  1063.                 footer.insertBefore(errorDiv, cancelBtn);
  1064.             }
  1065.         });
  1066.  
  1067.         footer.appendChild(cancelBtn);
  1068.         footer.appendChild(saveBtn);
  1069.         settingsPanel.appendChild(footer);
  1070.  
  1071.         return settingsPanel;
  1072.     }
  1073.  
  1074.     // Helper function to create a tag row
  1075.     function createTagRow(name, value) {
  1076.         const row = document.createElement('div');
  1077.         row.className = 'custom-tag-row';
  1078.  
  1079.         const nameInput = document.createElement('input');
  1080.         nameInput.type = 'text';
  1081.         nameInput.className = 'custom-tag-name';
  1082.         nameInput.placeholder = 'Tag name';
  1083.         nameInput.value = name;
  1084.  
  1085.         const valueInput = document.createElement('input');
  1086.         valueInput.type = 'text';
  1087.         valueInput.className = 'custom-tag-value';
  1088.         valueInput.placeholder = 'Tag value (comma separated)';
  1089.         valueInput.value = value;
  1090.  
  1091.         const controlsDiv = document.createElement('div');
  1092.         controlsDiv.className = 'custom-tag-controls';
  1093.  
  1094.         const deleteBtn = document.createElement('button');
  1095.         deleteBtn.className = 'btn btn-delete';
  1096.         deleteBtn.textContent = '🗑️';
  1097.         deleteBtn.title = 'Delete tag';
  1098.         deleteBtn.addEventListener('click', function() {
  1099.             row.remove();
  1100.         });
  1101.  
  1102.         controlsDiv.appendChild(deleteBtn);
  1103.  
  1104.         row.appendChild(nameInput);
  1105.         row.appendChild(valueInput);
  1106.         row.appendChild(controlsDiv);
  1107.  
  1108.         return row;
  1109.     }
  1110.  
  1111.     // Validate settings and save
  1112.     function validateAndSaveSettings(hotkeyInput, tagsContainer) {
  1113.         const errors = [];
  1114.  
  1115.         // Validate hotkey
  1116.         const newHotkey = hotkeyInput.value.trim();
  1117.         if (!newHotkey) {
  1118.             errors.push('Hotkey cannot be empty');
  1119.         } else {
  1120.             wikiHotkey = newHotkey;
  1121.         }
  1122.  
  1123.         // Validate and collect tags
  1124.         const newCustomTags = {};
  1125.         const tagRows = tagsContainer.querySelectorAll('.custom-tag-row');
  1126.         const tagNames = new Set();
  1127.  
  1128.         tagRows.forEach(row => {
  1129.             const nameInput = row.querySelector('.custom-tag-name');
  1130.             const valueInput = row.querySelector('.custom-tag-value');
  1131.  
  1132.             const name = nameInput.value.trim();
  1133.             const value = valueInput.value.trim();
  1134.  
  1135.             if (name && value) {
  1136.                 if (tagNames.has(name)) {
  1137.                     errors.push(`Duplicate tag name: ${name}`);
  1138.                 } else {
  1139.                     tagNames.add(name);
  1140.                     newCustomTags[name] = value;
  1141.                 }
  1142.             } else if (name || value) {
  1143.                 errors.push(`Tag ${name || 'name'} is missing ${name ? 'value' : 'name'}`);
  1144.             }
  1145.             // Skip empty rows (both name and value empty)
  1146.         });
  1147.  
  1148.         if (errors.length === 0) {
  1149.             customTags = newCustomTags;
  1150.             saveSettings();
  1151.         }
  1152.  
  1153.         return errors;
  1154.     }
  1155.  
  1156.     // Show settings panel
  1157.     function showSettingsPanel() {
  1158.         settingsOpen = true;
  1159.  
  1160.         // Remove any existing panel
  1161.         const existingPanel = document.querySelector('.wiki-settings-panel');
  1162.         if (existingPanel) existingPanel.remove();
  1163.  
  1164.         // Create and append new panel
  1165.         const settingsPanel = createSettingsPanel();
  1166.         wikiOverlay.appendChild(settingsPanel);
  1167.     }
  1168.  
  1169.     // Hide settings panel
  1170.     function hideSettingsPanel() {
  1171.         const panel = document.querySelector('.wiki-settings-panel');
  1172.         if (panel) panel.remove();
  1173.         settingsOpen = false;
  1174.     }
  1175.  
  1176.     // Initialize wiki interface immediately
  1177.     function initializeWiki() {
  1178.         if (wikiInitialized) {
  1179.             debug('Wiki already initialized');
  1180.             return;
  1181.         }
  1182.  
  1183.         debug('Initializing wiki interface');
  1184.  
  1185.         // Make sure settings are loaded
  1186.         loadSettings();
  1187.         
  1188.         // Continue with wiki initialization
  1189.         wikiOverlay = document.createElement('div');
  1190.         wikiOverlay.className = 'wiki-search-overlay';
  1191.  
  1192.         wikiSearchContainer = document.createElement('div');
  1193.         wikiSearchContainer.className = 'wiki-search-container';
  1194.  
  1195.         const searchBar = document.createElement('input');
  1196.         searchBar.className = 'wiki-search-bar';
  1197.         searchBar.placeholder = 'Search tag wiki...';
  1198.  
  1199.         // Create container for all buttons
  1200.         const buttonsContainer = document.createElement('div');
  1201.         buttonsContainer.className = 'wiki-buttons-container';
  1202.  
  1203.         // Add navigation history buttons
  1204.         const navContainer = document.createElement('div');
  1205.         navContainer.className = 'wiki-nav-history';
  1206.  
  1207.         const backButton = document.createElement('button');
  1208.         backButton.className = 'wiki-nav-button back';
  1209.         backButton.textContent = '<';
  1210.         backButton.disabled = true;
  1211.         backButton.title = 'Go back to previous tag';
  1212.         backButton.addEventListener('click', navigateWikiHistory.bind(null, -1));
  1213.  
  1214.         const forwardButton = document.createElement('button');
  1215.         forwardButton.className = 'wiki-nav-button forward';
  1216.         forwardButton.textContent = '>';
  1217.         forwardButton.disabled = true;
  1218.         forwardButton.title = 'Go forward to next tag';
  1219.         forwardButton.addEventListener('click', navigateWikiHistory.bind(null, 1));
  1220.  
  1221.         navContainer.appendChild(backButton);
  1222.         navContainer.appendChild(forwardButton);
  1223.  
  1224.         // Add settings button
  1225.         const settingsButton = document.createElement('button');
  1226.         settingsButton.className = 'wiki-settings-button';
  1227.         settingsButton.textContent = '⚙️ Settings';
  1228.         settingsButton.addEventListener('click', function(e) {
  1229.             e.preventDefault();
  1230.             showSettingsPanel();
  1231.         });
  1232.  
  1233.         // Add navigation buttons first, then settings button
  1234.         buttonsContainer.appendChild(navContainer);
  1235.         buttonsContainer.appendChild(settingsButton);
  1236.  
  1237.         wikiContent = document.createElement('div');
  1238.         wikiContent.className = 'wiki-content';
  1239.         wikiContent.style.display = 'none';
  1240.  
  1241.         wikiSearchContainer.appendChild(searchBar);
  1242.         wikiSearchContainer.appendChild(buttonsContainer);
  1243.         wikiSearchContainer.appendChild(wikiContent);
  1244.         wikiOverlay.appendChild(wikiSearchContainer);
  1245.         document.body.appendChild(wikiOverlay);
  1246.  
  1247.         // Separate key handler based on configurable hotkey
  1248.         document.addEventListener('keydown', function(e) {
  1249.             if (e.key.toLowerCase() === wikiHotkey.toLowerCase() && !isInputFocused()) {
  1250.                 debug(`Hotkey ${wikiHotkey} pressed, showing wiki search`);
  1251.                 e.preventDefault();
  1252.                 showWikiSearch();
  1253.             }
  1254.         });
  1255.  
  1256.         searchBar.addEventListener('keydown', async function(e) {
  1257.             if (e.key === 'Enter') {
  1258.                 e.preventDefault();
  1259.                 await loadWikiInfo(searchBar.value);
  1260.             } else if (e.key === 'Escape') {
  1261.                 if (settingsOpen) {
  1262.                     hideSettingsPanel();
  1263.                 } else {
  1264.                     hideWikiSearch();
  1265.                 }
  1266.             }
  1267.         });
  1268.  
  1269.         wikiOverlay.addEventListener('click', function(e) {
  1270.             if (e.target === wikiOverlay) {
  1271.                 if (settingsOpen) {
  1272.                     hideSettingsPanel();
  1273.                 } else {
  1274.                     hideWikiSearch();
  1275.                 }
  1276.             }
  1277.         });
  1278.  
  1279.         setupWikiSearchAutocomplete(searchBar);
  1280.  
  1281.         wikiInitialized = true;
  1282.         debug('Wiki interface initialized');
  1283.     }
  1284.  
  1285.     // Navigate through wiki history
  1286.     function navigateWikiHistory(direction) {
  1287.         if (!wikiHistory.length) return;
  1288.  
  1289.         const newIndex = historyIndex + direction;
  1290.  
  1291.         if (newIndex >= 0 && newIndex < wikiHistory.length) {
  1292.             isNavigatingHistory = true;
  1293.             historyIndex = newIndex;
  1294.             updateHistoryButtons();
  1295.             loadWikiInfo(wikiHistory[historyIndex]);
  1296.         }
  1297.     }
  1298.  
  1299.     // Update the state of history navigation buttons
  1300.     function updateHistoryButtons() {
  1301.         const backButton = document.querySelector('.wiki-nav-button.back');
  1302.         const forwardButton = document.querySelector('.wiki-nav-button.forward');
  1303.  
  1304.         if (!backButton || !forwardButton) return;
  1305.  
  1306.         backButton.disabled = historyIndex <= 0;
  1307.         forwardButton.disabled = historyIndex >= wikiHistory.length - 1;
  1308.     }
  1309.  
  1310.     function hideWikiSearch() {
  1311.         debug('Hiding wiki search interface');
  1312.         wikiOverlay.style.display = 'none';
  1313.         hideSettingsPanel();
  1314.     }
  1315.  
  1316.     // Modified showWikiSearch function
  1317.     function showWikiSearch() {
  1318.         if (!wikiInitialized) {
  1319.             debug('Attempting to show wiki before initialization');
  1320.             initializeWiki();
  1321.         }
  1322.         debug('Showing wiki search interface');
  1323.         wikiOverlay.style.display = 'block';
  1324.         const searchBar = wikiSearchContainer.querySelector('.wiki-search-bar');
  1325.         searchBar.value = '';
  1326.         searchBar.focus();
  1327.         wikiContent.style.display = 'none';
  1328.  
  1329.         // Reset navigation buttons when opening search
  1330.         updateHistoryButtons();
  1331.     }
  1332.  
  1333.     // Add keyboard shortcut for closing with escape
  1334.     document.addEventListener('keydown', e => {
  1335.         if (e.key === 'Escape' && wikiOverlay.style.display === 'block') {
  1336.             if (settingsOpen) {
  1337.                 hideSettingsPanel();
  1338.             } else {
  1339.                 hideWikiSearch();
  1340.             }
  1341.         }
  1342.     });
  1343.  
  1344.     // Initialize wiki immediately
  1345.     initializeWiki();
  1346.  
  1347.     // The rest of the script remains unchanged
  1348.     function isInputFocused() {
  1349.         const activeElement = document.activeElement;
  1350.         return activeElement && (
  1351.             activeElement.tagName === 'INPUT' ||
  1352.             activeElement.tagName === 'TEXTAREA' ||
  1353.             activeElement.isContentEditable
  1354.         );
  1355.     }
  1356.  
  1357.     // Wiki helper functions
  1358.     async function loadWikiInfo(tag) {
  1359.         // Reset animation
  1360.         wikiSearchContainer.style.animation = 'none';
  1361.         wikiSearchContainer.offsetHeight; // Trigger reflow
  1362.         wikiSearchContainer.style.animation = null;
  1363.  
  1364.         // Update search bar value
  1365.         const searchBar = wikiSearchContainer.querySelector('.wiki-search-bar');
  1366.         searchBar.value = tag;
  1367.  
  1368.         // Add to history if not navigating through history
  1369.         if (!isNavigatingHistory) {
  1370.             // If we're in the middle of the history and searching a new tag,
  1371.             // remove all entries after current position
  1372.             if (historyIndex < wikiHistory.length - 1 && historyIndex >= 0) {
  1373.                 wikiHistory = wikiHistory.slice(0, historyIndex + 1);
  1374.             }
  1375.  
  1376.             // Don't add duplicate consecutive entries
  1377.             if (wikiHistory.length === 0 || wikiHistory[wikiHistory.length - 1] !== tag) {
  1378.                 wikiHistory.push(tag);
  1379.                 historyIndex = wikiHistory.length - 1;
  1380.             }
  1381.         } else {
  1382.             // Reset the flag after navigation
  1383.             isNavigatingHistory = false;
  1384.         }
  1385.  
  1386.         // Update button states
  1387.         updateHistoryButtons();
  1388.  
  1389.         wikiContent.innerHTML = '<div class="wiki-loading">Loading...</div>';
  1390.         wikiContent.style.display = 'block';
  1391.         wikiSearchContainer.style.animation = 'slideUp 0.3s forwards';
  1392.  
  1393.         try {
  1394.             const [wikiData, postsData] = await Promise.all([
  1395.                 fetchDanbooruWiki(tag),
  1396.                 fetchDanbooruPosts(tag)
  1397.             ]);
  1398.  
  1399.             currentPosts = postsData;
  1400.             currentPostIndex = 0;
  1401.  
  1402.             displayWikiContent(wikiData, tag);
  1403.             if (currentPosts.length > 0) {
  1404.                 displayPostImage(currentPosts[0]);
  1405.             }
  1406.         } catch (error) {
  1407.             wikiContent.innerHTML = `<div class="error">Error loading wiki: ${error.message}</div>`;
  1408.         }
  1409.     }
  1410.  
  1411.     function fetchDanbooruWiki(tag) {
  1412.         // Convert to lowercase and replace spaces with underscores
  1413.         const formattedTag = tag.trim().toLowerCase().replace(/\s+/g, '_');
  1414.         return new Promise((resolve, reject) => {
  1415.             GM.xmlHttpRequest({
  1416.                 method: 'GET',
  1417.                 url: `https://danbooru.donmai.us/wiki_pages.json?search[title]=${encodeURIComponent(formattedTag)}`,
  1418.                 onload: response => resolve(JSON.parse(response.responseText)),
  1419.                 onerror: reject
  1420.             });
  1421.         });
  1422.     }
  1423.  
  1424.     function fetchDanbooruPosts(tag) {
  1425.         const formattedTag = tag.trim().toLowerCase().replace(/\s+/g, '_');
  1426.         return new Promise((resolve, reject) => {
  1427.             GM.xmlHttpRequest({
  1428.                 method: 'GET',
  1429.                 url: `https://danbooru.donmai.us/posts.json?tags=${encodeURIComponent(formattedTag)}&limit=10`,
  1430.                 onload: response => resolve(JSON.parse(response.responseText)),
  1431.                 onerror: reject
  1432.             });
  1433.         });
  1434.     }
  1435.  
  1436.     function displayWikiContent(wikiData, tag) {
  1437.         const hasWiki = wikiData && wikiData[0];
  1438.         const hasPosts = currentPosts && currentPosts.length > 0;
  1439.  
  1440.         wikiContent.innerHTML = `
  1441.             <div class="wiki-text-content">
  1442.                 <h2>${tag}</h2>
  1443.                 <div class="wiki-description">
  1444.                     ${hasWiki ? `<p>${formatWikiText(wikiData[0].body)}</p>` :
  1445.                     `<p>No wiki information available for this tag${hasPosts ? ', but images are available.' : '.'}</p>`}
  1446.                 </div>
  1447.             </div>
  1448.             <div class="wiki-image-section">
  1449.                 ${hasPosts ? `
  1450.                     <div class="wiki-image-container">
  1451.                         <button class="image-nav-button prev" title="Previous image">←</button>
  1452.                         <img class="wiki-image" src="" alt="Tag example">
  1453.                         <button class="image-nav-button next" title="Next image">→</button>
  1454.                     </div>
  1455.                     <div class="wiki-nav-buttons">
  1456.                         <button class="wiki-button view-on-danbooru">View on Danbooru</button>
  1457.                     </div>
  1458.                 ` : `
  1459.                     <div class="no-images-message">No images available for this tag</div>
  1460.                 `}
  1461.             </div>
  1462.         `;
  1463.  
  1464.         // Always attach wiki tag event listeners
  1465.         attachWikiEventListeners();
  1466.  
  1467.         // Only display images if we have posts
  1468.         if (hasPosts) {
  1469.             displayPostImage(currentPosts[0]);
  1470.         }
  1471.     }
  1472.  
  1473.     function formatWikiText(text) {
  1474.         // Remove backticks that sometimes wrap the content
  1475.         text = text.replace(/^`|`$/g, '');
  1476.  
  1477.         // First handle the complex patterns
  1478.         text = text
  1479.             // Handle list items with proper indentation
  1480.             .replace(/^\* (.+)$/gm, '<li>$1</li>')
  1481.  
  1482.  
  1483.             // Handle Danbooru internal paths (using absolute URLs)
  1484.             .replace(/"([^"]+)":\s*\/((?:[\w-]+\/)*[\w-]+(?:\?[^"\s]+)?)/g, (match, text, path) => {
  1485.                 const fullUrl = `https://danbooru.donmai.us/${path.trim()}`;
  1486.                 return `<a class="wiki-link" href="${fullUrl}" target="_blank">${text}</a>`;
  1487.             })
  1488.  
  1489.             // Handle named links with square brackets
  1490.             .replace(/"([^"]+)":\[([^\]]+)\]/g, '<a class="wiki-link" href="$2" target="_blank">$1</a>')
  1491.  
  1492.             // Handle post references
  1493.             .replace(/!post #(\d+)/g, '<a class="wiki-link" href="https://danbooru.donmai.us/posts/$1" target="_blank">post #$1</a>')
  1494.  
  1495.             // Handle external links with proper URL capture (must come before wiki links)
  1496.             .replace(/"([^"]+)":\s*(https?:\/\/[^\s"]+)/g, '<a class="wiki-link" href="$2" target="_blank">$1</a>')
  1497.  
  1498.             // Handle wiki links with display text, preserving special characters
  1499.             .replace(/\[\[([^\]|]+)\|([^\]]+)\]\]/g, (match, tag, display) => {
  1500.                 const cleanTag = tag.trim();
  1501.                 return `<span class="wiki-tag" data-tag="${cleanTag}">${display}</span>`;
  1502.             })
  1503.  
  1504.             // Handle simple wiki links, preserving special characters
  1505.             .replace(/\[\[([^\]]+)\]\]/g, (match, tag) => {
  1506.                 const cleanTag = tag.trim();
  1507.                 return `<span class="wiki-tag" data-tag="${cleanTag}">${cleanTag}</span>`;
  1508.             })
  1509.  
  1510.             // Handle BBCode
  1511.             .replace(/\[b\](.*?)\[\/b\]/g, '<strong>$1</strong>')
  1512.             .replace(/\[i\](.*?)\[\/i\]/g, '<em>$1</em>')
  1513.             .replace(/\[code\](.*?)\[\/code\]/g, '<code>$1</code>')
  1514.             .replace(/\[u\](.*?)\[\/u\]/g, '<u>$1</u>')
  1515.  
  1516.             // Handle headers with proper spacing
  1517.             .replace(/^h([1-6])\.\s*(.+)$/gm, (_, size, content) => `\n<h${size}>${content}</h${size}>\n`)
  1518.  
  1519.             // Add spacing after tag name at start of line
  1520.         // Handle line breaks and paragraphs
  1521.         text = text
  1522.             .replace(/\r\n/g, '\n')  // Normalize line endings
  1523.             .replace(/\n\n+/g, '</p><p>')
  1524.             .replace(/\n/g, '<br>');
  1525.  
  1526.         // Wrap lists in ul tags
  1527.         text = text.replace(/(<li>.*?<\/li>)\s*(?=<li>|$)/gs, '<ul>$1</ul>');
  1528.  
  1529.         // Wrap in paragraph if not already wrapped
  1530.         if (!text.startsWith('<p>')) {
  1531.             text = `<p>${text}</p>`;
  1532.         }
  1533.  
  1534.         return text;
  1535.     }
  1536.  
  1537.     // Separate the keyboard handler into its own function
  1538.     function handleWikiKeydown(e) {
  1539.         if (wikiOverlay.style.display === 'block') {
  1540.             if (e.key === 'ArrowLeft') navigateImage(-1);
  1541.             if (e.key === 'ArrowRight') navigateImage(1);
  1542.         }
  1543.     }
  1544.  
  1545.     function attachWikiEventListeners() {
  1546.         const prevButton = wikiContent.querySelector('.image-nav-button.prev');
  1547.         const nextButton = wikiContent.querySelector('.image-nav-button.next');
  1548.         const viewButton = wikiContent.querySelector('.view-on-danbooru');
  1549.         const wikiImage = wikiContent.querySelector('.wiki-image');
  1550.         const wikiTags = wikiContent.querySelectorAll('.wiki-tag');
  1551.  
  1552.         // Only attach image navigation related listeners if we have posts
  1553.         if (currentPosts.length > 0) {
  1554.             if (prevButton) {
  1555.                 prevButton.addEventListener('click', () => navigateImage(-1));
  1556.             }
  1557.             if (nextButton) {
  1558.                 nextButton.addEventListener('click', () => navigateImage(1));
  1559.             }
  1560.  
  1561.             // Add keyboard navigation only if we have posts
  1562.             document.removeEventListener('keydown', handleWikiKeydown);
  1563.             document.addEventListener('keydown', handleWikiKeydown);
  1564.  
  1565.             if (wikiImage) {
  1566.                 wikiImage.addEventListener('click', () => {
  1567.                     if (currentPosts[currentPostIndex]) {
  1568.                         window.open(currentPosts[currentPostIndex].large_file_url, '_blank');
  1569.                     }
  1570.                 });
  1571.             }
  1572.  
  1573.             if (viewButton) {
  1574.                 viewButton.addEventListener('click', () => {
  1575.                     if (currentPosts[currentPostIndex]) {
  1576.                         window.open(`https://danbooru.donmai.us/posts/${currentPosts[currentPostIndex].id}`, '_blank');
  1577.                     }
  1578.                 });
  1579.             }
  1580.         }
  1581.  
  1582.         // Wiki tag navigation works regardless of posts
  1583.         if (wikiTags) {
  1584.             wikiTags.forEach(tag => {
  1585.                 tag.addEventListener('click', () => {
  1586.                     const tagName = tag.dataset.tag;
  1587.                     loadWikiInfo(tagName);
  1588.                 });
  1589.             });
  1590.         }
  1591.     }
  1592.  
  1593.     function displayPostImage(post) {
  1594.         const imageContainer = wikiContent.querySelector('.wiki-image-container');
  1595.         if (!imageContainer) return; // Guard against missing container
  1596.  
  1597.         if (!post || (!post.preview_file_url && !post.file_url)) return;
  1598.  
  1599.         const prevButton = imageContainer.querySelector('.image-nav-button.prev');
  1600.         const nextButton = imageContainer.querySelector('.image-nav-button.next');
  1601.         const image = imageContainer.querySelector('.wiki-image');
  1602.  
  1603.         if (!image) return; // Guard against missing image element
  1604.  
  1605.         image.src = post.large_file_url || post.preview_file_url || post.file_url;
  1606.  
  1607.         if (prevButton) prevButton.style.visibility = currentPostIndex <= 0 ? 'hidden' : 'visible';
  1608.         if (nextButton) nextButton.style.visibility = currentPostIndex >= currentPosts.length - 1 ? 'hidden' : 'visible';
  1609.  
  1610.         // Remove any existing event listeners first to prevent duplicates
  1611.         const newPrevButton = prevButton.cloneNode(true);
  1612.         const newNextButton = nextButton.cloneNode(true);
  1613.  
  1614.         prevButton.parentNode.replaceChild(newPrevButton, prevButton);
  1615.         nextButton.parentNode.replaceChild(newNextButton, nextButton);
  1616.  
  1617.         // Attach fresh event listeners
  1618.         newPrevButton.addEventListener('click', (e) => {
  1619.             e.stopPropagation();
  1620.             navigateImage(-1);
  1621.         });
  1622.  
  1623.         newNextButton.addEventListener('click', (e) => {
  1624.             e.stopPropagation();
  1625.             navigateImage(1);
  1626.         });
  1627.  
  1628.         // Reattach image click listener
  1629.         image.addEventListener('click', () => {
  1630.             window.open(post.large_file_url || post.file_url, '_blank');
  1631.         });
  1632.     }
  1633.  
  1634.     function navigateImage(direction) {
  1635.         const newIndex = currentPostIndex + direction;
  1636.         if (newIndex >= 0 && newIndex < currentPosts.length) {
  1637.             currentPostIndex = newIndex;
  1638.             displayPostImage(currentPosts[newIndex]);
  1639.         }
  1640.     }
  1641.  
  1642.     // Add new function for wiki search autocomplete
  1643.     function setupWikiSearchAutocomplete(searchBar) {
  1644.         const suggestionsBox = document.createElement('div');
  1645.         suggestionsBox.className = 'wiki-search-suggestions';
  1646.         suggestionsBox.style.display = 'none';
  1647.         document.body.appendChild(suggestionsBox); // Append to body instead
  1648.  
  1649.         let selectedIndex = -1;
  1650.  
  1651.         // Update suggestions box position when showing
  1652.         function updateSuggestionsPosition() {
  1653.             const searchBarRect = searchBar.getBoundingClientRect();
  1654.             suggestionsBox.style.top = `${searchBarRect.bottom + window.scrollY}px`;
  1655.         }
  1656.  
  1657.         searchBar.addEventListener('input', () => {
  1658.             const term = searchBar.value.replace(/\s+/g, '_').trim();
  1659.             if (term) {
  1660.                 fetchSuggestionsForWiki(term, suggestionsBox);
  1661.                 updateSuggestionsPosition();
  1662.             } else {
  1663.                 suggestionsBox.style.display = 'none';
  1664.             }
  1665.         });
  1666.  
  1667.         // Update position on scroll or resize
  1668.         window.addEventListener('scroll', () => {
  1669.             if (suggestionsBox.style.display === 'block') {
  1670.                 updateSuggestionsPosition();
  1671.             }
  1672.         });
  1673.  
  1674.         window.addEventListener('resize', () => {
  1675.             if (suggestionsBox.style.display === 'block') {
  1676.                 updateSuggestionsPosition();
  1677.             }
  1678.         });
  1679.  
  1680.         searchBar.addEventListener('keydown', (e) => {
  1681.             const suggestions = suggestionsBox.children;
  1682.             if (suggestions.length === 0) return;
  1683.  
  1684.             if (e.key === 'ArrowDown') {
  1685.                 e.preventDefault();
  1686.                 selectedIndex = Math.min(selectedIndex + 1, suggestions.length - 1);
  1687.                 updateWikiSuggestionSelection(suggestions, selectedIndex);
  1688.             } else if (e.key === 'ArrowUp') {
  1689.                 e.preventDefault();
  1690.                 selectedIndex = Math.max(selectedIndex - 1, -1);
  1691.                 updateWikiSuggestionSelection(suggestions, selectedIndex);
  1692.             } else if (e.key === 'Enter' && selectedIndex !== -1) {
  1693.                 e.preventDefault();
  1694.                 searchBar.value = suggestions[selectedIndex].textContent;
  1695.                 suggestionsBox.style.display = 'none';
  1696.                 loadWikiInfo(searchBar.value);
  1697.             }
  1698.         });
  1699.  
  1700.         // Close suggestions when clicking outside
  1701.         document.addEventListener('click', (e) => {
  1702.             if (!searchBar.contains(e.target) && !suggestionsBox.contains(e.target)) {
  1703.                 suggestionsBox.style.display = 'none';
  1704.             }
  1705.         });
  1706.     }
  1707.  
  1708.     function fetchSuggestionsForWiki(term, suggestionsBox) {
  1709.         clearTimeout(debounceTimer);
  1710.         debounceTimer = setTimeout(() => {
  1711.             GM.xmlHttpRequest({
  1712.                 method: 'GET',
  1713.                 url: `https://gelbooru.com/index.php?page=autocomplete2&term=${encodeURIComponent(term)}&type=tag_query&limit=10`,
  1714.                 onload: function(response) {
  1715.                     if (response.status === 200) {
  1716.                         try {
  1717.                             const data = JSON.parse(response.responseText);
  1718.                             showWikiSuggestions(data, suggestionsBox);
  1719.                         } catch (e) {
  1720.                             console.error("Error parsing suggestions:", e);
  1721.                         }
  1722.                     }
  1723.                 }
  1724.             });
  1725.         }, debounceDelay);
  1726.     }
  1727.  
  1728.     function showWikiSuggestions(suggestions, suggestionsBox) {
  1729.         suggestionsBox.innerHTML = '';
  1730.         if (suggestions.length === 0) {
  1731.             suggestionsBox.style.display = 'none';
  1732.             return;
  1733.         }
  1734.  
  1735.         suggestions.forEach(suggestion => {
  1736.             const div = document.createElement('div');
  1737.             div.className = 'wiki-search-suggestion';
  1738.             div.textContent = suggestion.label;
  1739.             div.addEventListener('click', () => {
  1740.                 const searchBar = suggestionsBox.parentNode.querySelector('.wiki-search-bar');
  1741.                 searchBar.value = suggestion.label;
  1742.                 suggestionsBox.style.display = 'none';
  1743.                 loadWikiInfo(suggestion.label);
  1744.             });
  1745.             suggestionsBox.appendChild(div);
  1746.         });
  1747.  
  1748.         suggestionsBox.style.display = 'block';
  1749.     }
  1750.  
  1751.     function updateWikiSuggestionSelection(suggestions, selectedIndex) {
  1752.         Array.from(suggestions).forEach((suggestion, index) => {
  1753.             suggestion.classList.toggle('selected', index === selectedIndex);
  1754.             if (index === selectedIndex) {
  1755.                 suggestion.scrollIntoView({ block: 'nearest' });
  1756.             }
  1757.         });
  1758.     }
  1759.  
  1760.     // Ensure script runs as soon as DOM is ready
  1761.     document.addEventListener('DOMContentLoaded', () => {
  1762.         loadSettings();
  1763.         setupAutocomplete();
  1764.         initializeWiki();
  1765.     });
  1766.  
  1767. })();