settings.html

<div id="carrot_settings" class="carrot-extension-settings">
    <div class="inline-drawer">
        <div class="inline-drawer-toggle inline-drawer-header">
            <b>🥕 CarrotKernel</b>
            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
        </div>
        <div class="inline-drawer-content">
            
            <!-- Feature Controls -->
            <div class="carrot-card carrot-enable-card carrot-tutorial-target" id="carrot-feature-controls"
                 data-tutorial-step="feature-controls"
                 data-tooltip="Master controls for CarrotKernel functionality">
                <div class="carrot-card-header">
                    <h3>⚡ Feature Controls</h3>
                    <p class="carrot-card-subtitle">Character consistency tracking system</p>
                </div>
                <div class="carrot-card-body">
                    <div class="carrot-settings-grid">
                        <div class="carrot-setting-item">
                            <label class="carrot-toggle">
                                <input type="checkbox" id="carrot_enabled" checked>
                                <span class="carrot-toggle-slider"></span>
                                <span class="carrot-toggle-label">Master Enable</span>
                            </label>
                            <div class="carrot-help-text">Enable/disable CarrotKernel character tracking</div>
                        </div>
                        <div class="carrot-setting-item">
                            <label class="carrot-toggle">
                                <input type="checkbox" id="carrot_send_to_ai" checked>
                                <span class="carrot-toggle-slider"></span>
                                <span class="carrot-toggle-label">AI Injection</span>
                            </label>
                            <div class="carrot-help-text">Send character data to AI context for consistency</div>
                        </div>
                        <div class="carrot-setting-item">
                            <select id="carrot_display_mode" class="carrot-select">
                                <option value="none">No Display</option>
                                <option value="thinking">Thinking Box Style</option>
                                <option value="cards">Character Cards</option>
                            </select>
                            <div class="carrot-help-text">Choose how character data appears in chat</div>
                        </div>
                        <div class="carrot-setting-item">
                            <label class="carrot-toggle">
                                <input type="checkbox" id="carrot_auto_expand">
                                <span class="carrot-toggle-slider"></span>
                                <span class="carrot-toggle-label">Auto-expand thinking boxes</span>
                            </label>
                            <div class="carrot-help-text">Automatically expand thinking boxes when displayed</div>
                        </div>
                        <div class="carrot-setting-item">
                            <label class="carrot-toggle">
                                <input type="checkbox" id="carrot_debug_mode">
                                <span class="carrot-toggle-slider"></span>
                                <span class="carrot-toggle-label">Debug Mode</span>
                            </label>
                            <div class="carrot-help-text">Enable detailed console logging</div>
                        </div>
                        <div class="carrot-setting-item">
                            <label class="carrot-toggle">
                                <input type="checkbox" id="carrot_baby_bunny_mode">
                                <span class="carrot-toggle-slider"></span>
                                <span class="carrot-toggle-label">🐰 Baby Bunny Mode</span>
                            </label>
                            <div class="carrot-help-text">Guided automation for sheet processing and character archive creation</div>
                        </div>
                        <div class="carrot-setting-item">
                            <label class="carrot-toggle">
                                <input type="checkbox" id="carrot_worldbook_tracker">
                                <span class="carrot-toggle-slider"></span>
                                <span class="carrot-toggle-label">🌍 WorldBook Tracker</span>
                            </label>
                            <div class="carrot-help-text">Show WorldBook Tracker icon and panel for monitoring active lorebook entries</div>
                        </div>
                        <div class="carrot-setting-item">
                            <label class="carrot-toggle">
                                <input type="checkbox" id="carrot_auto_rescan" checked>
                                <span class="carrot-toggle-slider"></span>
                                <span class="carrot-toggle-label">🔄 Auto-rescan on chat load</span>
                            </label>
                            <div class="carrot-help-text">Automatically re-scan character repos when switching chats to restore tag display</div>
                        </div>
                        <div class="carrot-setting-item">
                            <label class="carrot-toggle">
                                <input type="checkbox" id="carrot_bunnymo_wrapping">
                                <span class="carrot-toggle-slider"></span>
                                <span class="carrot-toggle-label">🏷️ BunnymoTags Wrapping</span>
                            </label>
                            <div class="carrot-help-text">Wrap worldbook entries with &lt;BunnymoTags:Entry_Name&gt; tags when triggered</div>
                        </div>
                        <div class="carrot-setting-item">
                            <label class="carrot-toggle">
                                <input type="checkbox" id="carrot_exclude_tag_synthesis">
                                <span class="carrot-toggle-slider"></span>
                                <span class="carrot-toggle-label">🚫 Exclude TAG SYNTHESIS section</span>
                            </label>
                            <div class="carrot-help-text">Exclude the final TAG SYNTHESIS / BunnymoTags block from RAG chunking (prevents false keyword matching)</div>
                        </div>
                        <div class="carrot-setting-item carrot-slider-container">
                            <div class="carrot-slider-header">
                                <span class="carrot-slider-icon">👥</span>
                                <span class="carrot-slider-title">Max Characters Displayed: <span id="carrot_max_display_value">6</span></span>
                            </div>
                            <div class="carrot-slider-hint">Limit characters shown in chat to prevent visual clutter</div>
                            <input type="range" id="carrot_max_characters_display" class="carrot-slider" min="1" max="20" value="6">
                        </div>
                        <div class="carrot-setting-item carrot-slider-container">
                            <div class="carrot-slider-header">
                                <span class="carrot-slider-icon">💉</span>
                                <span class="carrot-slider-title">Max Characters Injected: <span id="carrot_max_inject_value">6</span></span>
                            </div>
                            <div class="carrot-slider-hint">Limit characters sent to AI context to save tokens</div>
                            <input type="range" id="carrot_max_characters_inject" class="carrot-slider" min="1" max="20" value="6">
                        </div>
                        <div class="carrot-setting-item carrot-slider-container">
                            <div class="carrot-slider-header">
                                <span class="carrot-slider-icon">⬇️</span>
                                <span class="carrot-slider-title">Injection Depth: <span id="carrot_injection_depth_value">4</span></span>
                            </div>
                            <div class="carrot-slider-hint">How many messages back to inject character data (0 = end of context)</div>
                            <input type="range" id="carrot_injection_depth" class="carrot-slider" min="0" max="10" value="4">
                        </div>
                    </div>
                </div>
            </div>

            <!-- RAG System (Experimental) -->
            <div class="carrot-card carrot-tutorial-target inline-drawer" id="carrot-rag-settings"
                 data-tutorial-step="rag-settings"
                 data-tooltip="Experimental RAG system for fullsheet vectorization">
                <div class="inline-drawer-toggle inline-drawer-header carrot-card-header" style="cursor: pointer;">
                    <div>
                        <h3 style="margin: 0;">
                            🔬 Smart Context (RAG)
                            <span class="carrot-experimental-badge">EXPERIMENTAL</span>
                        </h3>
                        <p class="carrot-card-subtitle" style="margin: 0;">Inject only relevant parts of fullsheets instead of everything</p>
                    </div>
                    <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
                </div>
                <div class="inline-drawer-content carrot-card-body">
                    <div class="carrot-settings-grid">
                        <!-- Vectorization Settings - Horizontal Layout at VERY TOP -->
                        <div style="grid-column: 1 / -1; background: var(--black30a, rgba(0,0,0,0.2)); border: 1px solid var(--SmartThemeBorderColor, rgba(255,255,255,0.1)); border-radius: 8px; padding: 16px; margin-bottom: 8px;">
                            <h4 style="margin: 0 0 12px 0; color: var(--SmartThemeQuoteColor, #10b981); font-size: 0.95em; font-weight: 600;">
                                <i class="fa-solid fa-microchip"></i> Embedding Configuration
                            </h4>

                            <!-- Source and Model in horizontal layout -->
                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px;">
                                <div>
                                    <label class="carrot-label">
                                        <span class="carrot-label-text">Vectorization Source</span>
                                        <span class="carrot-label-hint">Which AI service generates the embeddings</span>
                                    </label>
                                    <select id="carrot_rag_vector_source" class="carrot-select">
                                        <option value="transformers">Local (Transformers)</option>
                                        <option value="openai">OpenAI</option>
                                        <option value="cohere">Cohere</option>
                                        <option value="palm">Google AI Studio</option>
                                        <option value="vertexai">Google Vertex AI</option>
                                        <option value="togetherai">TogetherAI</option>
                                        <option value="ollama">Ollama</option>
                                        <option value="llamacpp">llama.cpp</option>
                                        <option value="koboldcpp">KoboldCpp</option>
                                        <option value="vllm">vLLM</option>
                                        <option value="mistral">MistralAI</option>
                                        <option value="nomicai">NomicAI</option>
                                        <option value="webllm">WebLLM Extension</option>
                                        <option value="extras">Extras (deprecated)</option>
                                    </select>
                                </div>

                                <!-- Model Selection Container - Changes based on source -->
                                <div id="carrot_rag_model_selection_container">
                                    <!-- OpenAI -->
                                    <div id="carrot_rag_openai_model_container" style="display: none;">
                                        <label class="carrot-label">
                                            <span class="carrot-label-text">Vectorization Model</span>
                                        </label>
                                        <select id="carrot_rag_openai_model" class="carrot-select">
                                            <option value="text-embedding-ada-002">text-embedding-ada-002</option>
                                            <option value="text-embedding-3-small">text-embedding-3-small</option>
                                            <option value="text-embedding-3-large">text-embedding-3-large</option>
                                        </select>
                                    </div>

                                    <!-- Cohere -->
                                    <div id="carrot_rag_cohere_model_container" style="display: none;">
                                        <label class="carrot-label">
                                            <span class="carrot-label-text">Vectorization Model</span>
                                        </label>
                                        <select id="carrot_rag_cohere_model" class="carrot-select">
                                            <option value="embed-english-v4.0">embed-english-v4.0</option>
                                            <option value="embed-multilingual-v4.0">embed-multilingual-v4.0</option>
                                            <option value="embed-english-v3.0">embed-english-v3.0</option>
                                            <option value="embed-multilingual-v3.0">embed-multilingual-v3.0</option>
                                            <option value="embed-english-light-v3.0">embed-english-light-v3.0</option>
                                            <option value="embed-multilingual-light-v3.0">embed-multilingual-light-v3.0</option>
                                            <option value="embed-english-v2.0">embed-english-v2.0</option>
                                            <option value="embed-multilingual-v2.0">embed-multilingual-v2.0</option>
                                        </select>
                                    </div>

                                    <!-- Google -->
                                    <div id="carrot_rag_google_model_container" style="display: none;">
                                        <label class="carrot-label">
                                            <span class="carrot-label-text">Vectorization Model</span>
                                        </label>
                                        <select id="carrot_rag_google_model" class="carrot-select">
                                            <option value="text-embedding-005">text-embedding-005</option>
                                            <option value="text-embedding-004">text-embedding-004</option>
                                            <option value="gemini-embedding-001">gemini-embedding-001</option>
                                            <option value="gemini-embedding-exp-03-07">gemini-embedding-exp-03-07</option>
                                            <option value="embedding-001">embedding-001</option>
                                        </select>
                                    </div>

                                    <!-- TogetherAI -->
                                    <div id="carrot_rag_togetherai_model_container" style="display: none;">
                                        <label class="carrot-label">
                                            <span class="carrot-label-text">Vectorization Model</span>
                                        </label>
                                        <select id="carrot_rag_togetherai_model" class="carrot-select">
                                            <option value="togethercomputer/m2-bert-80M-32k-retrieval">m2-bert-80M-32k-retrieval</option>
                                            <option value="togethercomputer/m2-bert-80M-8k-retrieval">m2-bert-80M-8k-retrieval</option>
                                            <option value="togethercomputer/m2-bert-80M-2k-retrieval">m2-bert-80M-2k-retrieval</option>
                                            <option value="WhereIsAI/UAE-Large-V1">UAE-Large-V1</option>
                                            <option value="BAAI/bge-large-en-v1.5">bge-large-en-v1.5</option>
                                            <option value="BAAI/bge-base-en-v1.5">bge-base-en-v1.5</option>
                                            <option value="sentence-transformers/msmarco-bert-base-dot-v5">msmarco-bert-base-dot-v5</option>
                                            <option value="bert-base-uncased">bert-base-uncased</option>
                                        </select>
                                    </div>

                                    <!-- Ollama -->
                                    <div id="carrot_rag_ollama_model_container" style="display: none;">
                                        <label class="carrot-label">
                                            <span class="carrot-label-text">Vectorization Model</span>
                                        </label>
                                        <input type="text" id="carrot_rag_ollama_model" class="carrot-select" placeholder="mxbai-embed-large" style="padding: 8px 12px;">
                                    </div>

                                    <!-- vLLM -->
                                    <div id="carrot_rag_vllm_model_container" style="display: none;">
                                        <label class="carrot-label">
                                            <span class="carrot-label-text">Vectorization Model</span>
                                        </label>
                                        <input type="text" id="carrot_rag_vllm_model" class="carrot-select" placeholder="Enter model name" style="padding: 8px 12px;">
                                    </div>

                                    <!-- WebLLM -->
                                    <div id="carrot_rag_webllm_model_container" style="display: none;">
                                        <label class="carrot-label">
                                            <span class="carrot-label-text">Vectorization Model</span>
                                        </label>
                                        <input type="text" id="carrot_rag_webllm_model" class="carrot-select" placeholder="Enter model name" style="padding: 8px 12px;">
                                    </div>
                                </div>
                            </div>

                            <!-- Secondary URL Settings (for Ollama, llama.cpp, KoboldCpp, vLLM) -->
                            <div id="carrot_rag_url_settings" style="display: none;">
                                <label class="carrot-toggle" style="margin-bottom: 8px;">
                                    <input type="checkbox" id="carrot_rag_use_alt_url">
                                    <span class="carrot-toggle-slider"></span>
                                    <span class="carrot-toggle-label">Use secondary URL</span>
                                </label>
                                <div id="carrot_rag_alt_url_container" style="display: none;">
                                    <label class="carrot-label">
                                        <span class="carrot-label-text">Secondary Embedding endpoint URL</span>
                                        <span class="carrot-label-hint">e.g. http://localhost:5001</span>
                                    </label>
                                    <input type="text" id="carrot_rag_alt_url" class="carrot-select" placeholder="e.g. http://localhost:5001" style="padding: 8px 12px;">
                                    <div class="carrot-help-text" style="margin-top: 4px; font-size: 0.85em;">
                                        <span id="carrot_rag_url_hint_text">Set the KoboldCpp URL in the Text Completion API connection settings.</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Ollama Keep in Memory -->
                            <div id="carrot_rag_ollama_keep_container" style="display: none; margin-top: 8px;">
                                <label class="carrot-toggle">
                                    <input type="checkbox" id="carrot_rag_ollama_keep">
                                    <span class="carrot-toggle-slider"></span>
                                    <span class="carrot-toggle-label">Keep model in memory</span>
                                </label>
                            </div>

                            <!-- Info messages for sources that don't need model selection -->
                            <div id="carrot_rag_llamacpp_info" style="display: none; margin-top: 8px;">
                                <div class="carrot-help-text" style="background: var(--black30a, rgba(0,0,0,0.3)); padding: 10px; border-radius: 6px; border: 1px solid var(--SmartThemeBorderColor, rgba(255,255,255,0.1)); font-size: 0.9em;">
                                    <i class="fa-solid fa-info-circle"></i> llama.cpp embedding endpoint will be used automatically.
                                </div>
                            </div>

                            <!-- NomicAI API Key Button (exact copy from ST vectors) -->
                            <div id="carrot_rag_nomicai_container" style="display: none; margin-top: 8px;">
                                <div style="display: flex; align-items: center; gap: 12px;">
                                    <label for="carrot_api_key_nomicai" style="flex: 1; margin: 0;">
                                        <span>NomicAI API Key</span>
                                    </label>
                                    <div id="carrot_api_key_nomicai" class="menu_button menu_button_icon manage-api-keys" data-key="api_key_nomicai" style="cursor: pointer;">
                                        <i class="fa-solid fa-key"></i>
                                        <span>Click to set</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Embedding Provider Change Warning -->
                        <div id="carrot_rag_provider_warning" style="
                            display: none;
                            grid-column: 1 / -1;
                            background: color-mix(in srgb, #dc2626 10%, transparent);
                            border: 2px solid #dc2626;
                            border-radius: 8px;
                            padding: 16px;
                            margin-bottom: 12px;
                            animation: warningPulse 2s ease-in-out infinite;
                        ">
                            <div style="display: flex; align-items: start; gap: 12px;">
                                <i class="fa-solid fa-triangle-exclamation" style="color: #dc2626; font-size: 1.5em; flex-shrink: 0; margin-top: 2px;"></i>
                                <div style="flex: 1;">
                                    <h4 style="margin: 0 0 8px 0; color: #dc2626; font-size: 1em; font-weight: 600;">
                                        Embedding Provider Changed
                                    </h4>
                                    <p style="margin: 0 0 12px 0; color: var(--SmartThemeEmColor, white); font-size: 0.95em; line-height: 1.5;">
                                        Your embedding provider has changed from <strong id="carrot_rag_old_provider">Unknown</strong> to <strong id="carrot_rag_new_provider">Unknown</strong>.
                                        Embeddings from different providers are incompatible and cannot be used together.
                                        You must re-vectorize all collections to use the new provider.
                                    </p>
                                    <button id="carrot_rag_revectorize_btn" class="carrot-primary-btn" style="
                                        background: #dc2626;
                                        border-color: #dc2626;
                                        padding: 8px 16px;
                                        font-weight: 600;
                                    ">
                                        <i class="fa-solid fa-rotate"></i> Re-vectorize All Collections
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="carrot-setting-item">
                            <label class="carrot-toggle">
                                <input type="checkbox" id="carrot_rag_enabled">
                                <span class="carrot-toggle-slider"></span>
                                <span class="carrot-toggle-label">Enable Smart Context</span>
                            </label>
                            <div class="carrot-help-text">Send only relevant fullsheet sections instead of the entire sheet (saves 80-90% context)</div>
                        </div>

                        <div class="carrot-setting-item">
                            <label class="carrot-toggle">
                                <input type="checkbox" id="carrot_rag_auto_vectorize" checked>
                                <span class="carrot-toggle-slider"></span>
                                <span class="carrot-toggle-label">Auto-save fullsheets</span>
                            </label>
                            <div class="carrot-help-text">Automatically save fullsheets when AI generates them</div>
                        </div>

                        <div class="carrot-setting-item">
                            <label class="carrot-toggle">
                                <input type="checkbox" id="carrot_rag_debug_mode">
                                <span class="carrot-toggle-slider"></span>
                                <span class="carrot-toggle-label">Show what's being sent</span>
                            </label>
                            <div class="carrot-help-text">Display full injection text in browser console</div>
                        </div>

                        <div class="carrot-setting-item">
                            <select id="carrot_rag_context_level" class="carrot-select">
                                <option value="global">Global Storage (All characters/chats)</option>
                                <option value="character">Character Storage (This character only)</option>
                                <option value="chat">Chat Storage (This chat only)</option>
                            </select>
                            <div class="carrot-help-text">Where to store fullsheet data - Global shares across all chats, Character is per-character, Chat is per-conversation</div>
                        </div>

                        <div class="carrot-setting-item">
                            <select id="carrot_rag_role" class="carrot-select">
                                <option value="system">System</option>
                                <option value="user">User</option>
                                <option value="assistant">Assistant</option>
                            </select>
                            <div class="carrot-help-text">How to label injected sections (System = instruction, User = conversation)</div>
                        </div>

                        <div class="carrot-setting-item">
                            <label class="carrot-toggle">
                                <input type="checkbox" id="carrot_rag_simple_chunking">
                                <span class="carrot-toggle-slider"></span>
                                <span class="carrot-toggle-label">Simple section-based chunking</span>
                            </label>
                            <div class="carrot-help-text">Split fullsheets by section headers only (e.g., "Boundary Architecture" = one chunk). Disables complex size/overlap settings.</div>
                        </div>

                        <div class="carrot-setting-item carrot-slider-container" id="carrot-rag-complex-settings">
                            <div class="carrot-slider-header">
                                <span class="carrot-slider-icon">📄</span>
                                <span class="carrot-slider-title">Sections to send: <span id="carrot_rag_topk_value">3</span></span>
                            </div>
                            <div class="carrot-slider-hint">How many relevant sections to inject (3 = ~3000 chars, 5 = ~5000 chars)</div>
                            <input type="range" id="carrot_rag_topk" class="carrot-slider" min="1" max="10" value="3">
                        </div>

                        <div class="carrot-setting-item carrot-slider-container">
                            <div class="carrot-slider-header">
                                <span class="carrot-slider-icon">🎯</span>
                                <span class="carrot-slider-title">Relevance filter: <span id="carrot_rag_threshold_value">0.15</span></span>
                            </div>
                            <div class="carrot-slider-hint">How closely sections must match your message (lower = more permissive)</div>
                            <input type="range" id="carrot_rag_threshold" class="carrot-slider" min="0" max="100" value="15" step="5">
                        </div>

                        <div class="carrot-setting-item carrot-slider-container">
                            <div class="carrot-slider-header">
                                <span class="carrot-slider-icon">💬</span>
                                <span class="carrot-slider-title">Consider last <span id="carrot_rag_context_value">3</span> messages</span>
                            </div>
                            <div class="carrot-slider-hint">How many recent messages to analyze for finding relevant sections</div>
                            <input type="range" id="carrot_rag_context" class="carrot-slider" min="1" max="10" value="3">
                        </div>

                        <div class="carrot-setting-item carrot-slider-container carrot-complex-setting">
                            <div class="carrot-slider-header">
                                <span class="carrot-slider-icon">✂️</span>
                                <span class="carrot-slider-title">Section size: <span id="carrot_rag_chunksize_value">1000</span> chars</span>
                            </div>
                            <div class="carrot-slider-hint">How large each section should be when splitting fullsheets</div>
                            <input type="range" id="carrot_rag_chunksize" class="carrot-slider" min="600" max="2000" value="1000" step="100">
                        </div>

                        <div class="carrot-setting-item carrot-slider-container carrot-complex-setting">
                            <div class="carrot-slider-header">
                                <span class="carrot-slider-icon">🔗</span>
                                <span class="carrot-slider-title">Section overlap: <span id="carrot_rag_overlap_value">300</span> chars</span>
                            </div>
                            <div class="carrot-slider-hint">How much sections should overlap (higher = better context bridging)</div>
                            <input type="range" id="carrot_rag_overlap" class="carrot-slider" min="0" max="600" value="300" step="50">
                        </div>

                        <div class="carrot-setting-item carrot-slider-container">
                            <div class="carrot-slider-header">
                                <span class="carrot-slider-icon">💉</span>
                                <span class="carrot-slider-title">Context depth: <span id="carrot_rag_depth_value">4</span></span>
                            </div>
                            <div class="carrot-slider-hint">Where in AI context to inject (4 = standard, higher = deeper in memory)</div>
                            <input type="range" id="carrot_rag_depth" class="carrot-slider" min="1" max="10" value="4">
                        </div>

                        <div class="carrot-setting-item carrot-slider-container">
                            <div class="carrot-slider-header">
                                <span class="carrot-slider-icon">dY"X</span>
                                <span class="carrot-slider-title">Crosslink sensitivity: <span id="carrot_rag_crosslink_value">0.25</span></span>
                            </div>
                            <div class="carrot-slider-hint">Pull related sections when themes overlap (higher = more aggressive linking)</div>
                            <input type="range" id="carrot_rag_crosslink" class="carrot-slider" min="0" max="100" value="25" step="5">
                        </div>

                        <div class="carrot-setting-item">
                            <label class="carrot-toggle">
                                <input type="checkbox" id="carrot_rag_keyword_fallback" checked>
                                <span class="carrot-toggle-slider"></span>
                                <span class="carrot-toggle-label">Keyword fallback</span>
                            </label>
                            <div class="carrot-help-text">If semantic search misses, add sections whose keywords appear in your latest messages.</div>
                        </div>

                        <div class="carrot-setting-item">
                            <label class="carrot-toggle">
                                <input type="checkbox" id="carrot_rag_keyword_priority">
                                <span class="carrot-toggle-slider"></span>
                                <span class="carrot-toggle-label">Prioritize keyword matches</span>
                            </label>
                            <div class="carrot-help-text">When enabled, keyword matches are injected before semantic results so critical topics never get buried.</div>
                        </div>

                        <div class="carrot-setting-item carrot-slider-container">
                            <div class="carrot-slider-header">
                                <span class="carrot-slider-icon">dY"&</span>
                                <span class="carrot-slider-title">Fallback sections: <span id="carrot_rag_keyword_limit_value">2</span></span>
                            </div>
                            <div class="carrot-slider-hint">Maximum sections added based on keyword overlap (0 = disable fallback additions)</div>
                            <input type="range" id="carrot_rag_keyword_limit" class="carrot-slider" min="0" max="5" value="2">
                        </div>
                    </div>

                    <!-- RAG Data Viewer -->
                    <div class="inline-drawer" style="margin-top: 24px;">
                        <div class="inline-drawer-toggle inline-drawer-header" style="padding: 14px 18px; background: var(--black30a, rgba(0,0,0,0.3)); border: 1px solid var(--SmartThemeBorderColor, rgba(255,255,255,0.1)); border-radius: 8px; cursor: pointer; transition: all 0.2s;">
                            <strong style="color: var(--SmartThemeEmColor, white); display: flex; align-items: center; gap: 8px; font-size: 1.05em;">
                                <i class="fa-solid fa-database" style="color: var(--SmartThemeQuoteColor, #10b981);"></i>
                                Saved Data Viewer
                            </strong>
                            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
                        </div>
                        <div class="inline-drawer-content" style="padding: 20px; background: var(--black30a, rgba(0,0,0,0.2)); border: 1px solid var(--SmartThemeBorderColor, rgba(255,255,255,0.1)); border-top: none; border-radius: 0 0 8px 8px; margin-top: -1px;">
                            <div id="carrot-rag-collections-viewer">
                                <!-- Storage Level Selector -->
                                <div class="carrot-setting-item" style="margin-bottom: 16px;">
                                    <label class="carrot-label">
                                        <span class="carrot-label-text" style="display: flex; align-items: center; gap: 6px;">
                                            <i class="fa-solid fa-layer-group"></i>
                                            Storage Level
                                        </span>
                                        <span class="carrot-label-hint">Select which storage to view: Global (all), Character (per-character), or Chat (current chat only)</span>
                                    </label>
                                    <select id="carrot_rag_viewer_context" class="carrot-select">
                                        <option value="global">🌍 Global Storage (All characters/chats)</option>
                                        <option value="character">👤 Character Storage (Current character)</option>
                                        <option value="chat">💬 Chat Storage (Current chat)</option>
                                    </select>
                                </div>

                                <!-- Refresh Button -->
                                <div style="display: flex; justify-content: center; margin-bottom: 16px;">
                                    <button id="carrot-rag-refresh-viewer" class="carrot-secondary-btn">
                                        <i class="fa-solid fa-refresh"></i>
                                        Refresh Data
                                    </button>
                                </div>

                                <!-- Collections List (dynamically populated) -->
                                <div id="carrot-rag-collections-list" style="display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--SmartThemeBorderColor, rgba(255,255,255,0.1));">
                                    <!-- Collections will be dynamically populated here by JavaScript -->
                                </div>

                                <!-- Empty State -->
                                <div id="carrot-rag-empty-state" style="
                                    text-align: center;
                                    padding: 32px 24px;
                                    color: var(--grey70, #94a3b8);
                                    background: var(--SmartThemeBlurTintColor, rgba(0,0,0,0.2));
                                    border-radius: 8px;
                                    border: 1px dashed var(--SmartThemeBorderColor, rgba(255,255,255,0.1));
                                ">
                                    <i class="fa-solid fa-database" style="font-size: 2.5em; opacity: 0.3; margin-bottom: 12px; display: block;"></i>
                                    <p style="margin: 0 0 8px; font-size: 1.1em; color: var(--SmartThemeEmColor, white);">No Saved Data</p>
                                    <p style="margin: 0; font-size: 0.95em; line-height: 1.6;">
                                        Click "Save All Fullsheets in Chat" above to start saving fullsheet data,<br>
                                        or enable "Auto-save fullsheets" for automatic saving.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="inline-drawer" style="margin-top: 20px;">
                        <div class="inline-drawer-toggle inline-drawer-header" style="padding: 12px; background: color-mix(in srgb, #3b82f6 10%, transparent); border-radius: 6px; cursor: pointer;">
                            <strong><i class="fa-solid fa-lightbulb"></i> How Smart Context Works</strong>
                            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
                        </div>
                        <div class="inline-drawer-content carrot-rag-tutorial">
                        <div class="carrot-tutorial-section">
                            <h4><i class="fa-solid fa-lightbulb"></i> What is Smart Context?</h4>
                            <p>
                                Instead of sending the AI your entire 15,000+ character fullsheet every message, Smart Context only sends
                                the 3-5 most relevant sections based on what you're talking about. This saves 80-90% of your context window!
                            </p>
                            <ul>
                                <li><strong>Automatic:</strong> When AI generates a fullsheet, it's automatically split into sections and saved</li>
                                <li><strong>Smart Matching:</strong> Your recent messages are analyzed to find what's relevant</li>
                                <li><strong>Related Sections:</strong> If "flirting" section mentions "trauma", trauma section is also retrieved</li>
                                <li><strong>Per-Character:</strong> Each character's data is stored separately (no mixing Atsu with Ahmosi!)</li>
                            </ul>

                            <h4><i class="fa-solid fa-cog"></i> Quick Settings Guide</h4>
                            <ul>
                                <li><strong>Sections to send:</strong> 3 = ~3000 chars (balanced), 5 = ~5000 chars (detailed)</li>
                                <li><strong>Relevance filter:</strong> 0.15 = permissive (recommended), 0.30 = strict, 0.05 = very loose</li>
                                <li><strong>Consider last X messages:</strong> 3 = recent focus, 5-7 = broader conversation context</li>
                                <li><strong>Section overlap:</strong> 300 = good bridging (recommended), 500 = better but more data</li>
                            </ul>

                            <h4><i class="fa-solid fa-flask"></i> Experimental Feature</h4>
                            <p class="carrot-warning-text">
                                <i class="fa-solid fa-exclamation-triangle"></i>
                                This is experimental! Test it first in a practice chat. Sometimes the AI might miss details if your
                                message doesn't semantically match the fullsheet sections. You can always click "Show what's being sent" to debug.
                            </p>
                        </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Status Panels -->
            <div class="carrot-status-section">
                <div class="carrot-status-panels">
                    <div class="carrot-status-panel carrot-status-system carrot-clickable" 
                         data-tooltip="Click to open System Tutorial - Learn how to configure CarrotKernel settings"
                         onclick="CarrotKernel.openSystemTutorial()">
                        <div class="carrot-status-icon">
                            <i class="fa-solid fa-microchip"></i>
                        </div>
                        <div class="carrot-status-content">
                            <div class="carrot-status-title">System Status</div>
                            <div class="carrot-status-value" id="carrot-system-status">Initializing...</div>
                            <div class="carrot-status-detail" id="carrot-system-detail">Click to open tutorial</div>
                        </div>
                        <div class="carrot-status-indicator" id="carrot-system-indicator">
                            <div class="carrot-pulse-dot"></div>
                        </div>
                        <div class="carrot-click-hint">
                            <i class="fa-solid fa-mouse-pointer"></i>
                        </div>
                    </div>
                    
                    <div class="carrot-status-panel carrot-status-repository carrot-clickable" 
                         data-tooltip="Click to manually scan repositories - Or learn about character indexing"
                         onclick="CarrotKernel.openRepositoryManager()">
                        <div class="carrot-status-icon">
                            <i class="fa-solid fa-database"></i>
                        </div>
                        <div class="carrot-status-content">
                            <div class="carrot-status-title">Character Repository</div>
                            <div class="carrot-status-value" id="carrot-repo-status">0 characters indexed</div>
                            <div class="carrot-status-detail" id="carrot-repo-detail">Click to manage repositories</div>
                        </div>
                        <div class="carrot-status-indicator" id="carrot-repo-indicator">
                            <div class="carrot-pulse-dot"></div>
                        </div>
                        <div class="carrot-click-hint">
                            <i class="fa-solid fa-mouse-pointer"></i>
                        </div>
                    </div>
                    
                    <div class="carrot-status-panel carrot-status-injection carrot-clickable" 
                         data-tooltip="Click to learn about AI injection - How character data gets sent to AI context"
                         onclick="CarrotKernel.openInjectionTutorial()">
                        <div class="carrot-status-icon">
                            <i class="fa-solid fa-syringe"></i>
                        </div>
                        <div class="carrot-status-content">
                            <div class="carrot-status-title">AI Injection</div>
                            <div class="carrot-status-value" id="carrot-injection-status">Standby</div>
                            <div class="carrot-status-detail" id="carrot-injection-detail">Click to learn about injection</div>
                        </div>
                        <div class="carrot-status-indicator" id="carrot-injection-indicator">
                            <div class="carrot-pulse-dot"></div>
                        </div>
                        <div class="carrot-click-hint">
                            <i class="fa-solid fa-mouse-pointer"></i>
                        </div>
                        <div class="carrot-hover-tooltip" id="carrot-injection-tooltip">
                            <div class="carrot-tooltip-header">
                                <i class="fa-solid fa-info-circle"></i>
                                <strong>AI Injection System</strong>
                            </div>
                            <div class="carrot-tooltip-content">
                                <p><strong>How it works:</strong></p>
                                <ul>
                                    <li>Detects character mentions in your messages</li>
                                    <li>Injects relevant character data at depth 4</li>
                                    <li>Uses ST's native /inject command for consistency</li>
                                    <li>Ephemeral injections don't clutter chat history</li>
                                </ul>
                                <p><strong>Current Status:</strong> <span id="carrot-injection-tooltip-status">Ready</span></p>
                                <div class="carrot-tooltip-example">
                                    <strong>Example injection:</strong>
                                    <code>&lt;NAME:Alice&gt;, &lt;SPECIES:Human&gt;, &lt;PERSONALITY:Shy&gt;</code>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="carrot-status-panel carrot-status-templates carrot-clickable" 
                         data-tooltip="Click to manage prompt templates - Create custom injection templates with variable control"
                         onclick="CarrotKernel.openTemplateManager()">
                        <div class="carrot-status-icon">
                            <i class="fa-solid fa-file-code"></i>
                        </div>
                        <div class="carrot-status-content">
                            <div class="carrot-status-title">Template Manager</div>
                            <div class="carrot-status-value" id="carrot-template-status">Default template</div>
                            <div class="carrot-status-detail" id="carrot-template-detail">Click to manage templates</div>
                        </div>
                        <div class="carrot-status-indicator" id="carrot-template-indicator">
                            <div class="carrot-pulse-dot"></div>
                        </div>
                        <div class="carrot-click-hint">
                            <i class="fa-solid fa-mouse-pointer"></i>
                        </div>
                    </div>
                    
                    <div class="carrot-status-panel carrot-status-packs carrot-clickable" 
                         data-tooltip="Click to manage BunnyMo pack installation and updates - Main pack, themes, and expansions"
                         onclick="CarrotKernel.openPackManager()">
                        <div class="carrot-status-icon">
                            <i class="fa-solid fa-cube"></i>
                        </div>
                        <div class="carrot-status-content">
                            <div class="carrot-status-title">Pack Manager</div>
                            <div class="carrot-status-value" id="carrot-pack-status">Ready</div>
                            <div class="carrot-status-detail" id="carrot-pack-detail">Click to browse BunnyMo packs</div>
                        </div>
                        <div class="carrot-status-indicator" id="carrot-pack-indicator">
                            <div class="carrot-pulse-dot"></div>
                        </div>
                        <div class="carrot-click-hint">
                            <i class="fa-solid fa-mouse-pointer"></i>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Lorebook Management -->
            <div class="carrot-card carrot-tutorial-target" id="carrot-lorebook-management"
                 data-tutorial-step="lorebook-management"
                 data-tooltip="Select and configure character repositories from your lorebooks">
                <div class="carrot-card-header">
                    <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                        <div>
                            <h3>📚 Lorebook Management</h3>
                            <p class="carrot-card-subtitle">Configure character repositories and tag libraries</p>
                        </div>
                        <button id="carrot-main-lorebook-popout-btn" class="menu_button" title="Open in separate window" style="background: none; border: none; color: var(--SmartThemeBodyColor); font-size: 18px; cursor: pointer; padding: 8px; border-radius: 6px; transition: all 0.2s ease;" onmouseenter="this.style.background='var(--SmartThemeEmColor)'; this.style.color='white';" onmouseleave="this.style.background='none'; this.style.color='var(--SmartThemeBodyColor)';">
                            <i class="fa-solid fa-window-restore"></i>
                        </button>
                    </div>
                </div>
                <div class="carrot-card-body">
                    <div class="carrot-search-container">
                        <input type="text" id="carrot-search-lorebooks" class="carrot-search-input" placeholder="🔍 Search lorebooks...">
                    </div>
                    <div class="carrot-lorebook-container">
                        <div class="carrot-lorebook-list" id="carrot-lorebook-list">
                            <div class="carrot-loading-state">
                                <div class="carrot-spinner"></div>
                                <p>Loading available lorebooks...</p>
                            </div>
                        </div>
                    </div>
                    <div class="carrot-action-bar">
                        <button id="carrot-scan-btn" class="carrot-primary-btn">
                            <i class="fa-solid fa-magnifying-glass"></i>
                            Scan Selected Lorebooks
                        </button>
                        <button id="carrot-test-display" class="carrot-secondary-btn">
                            <i class="fa-solid fa-eye"></i>
                            Test Display
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Tutorial Picker Section -->
            <div class="carrot-help-section">
                <div class="carrot-help-header">
                    <h4>💡 Need Help?</h4>
                    <p class="carrot-help-subtitle">Click any tutorial below to learn how to use CarrotKernel</p>
                </div>

                <div class="carrot-tutorial-grid">
                    <div class="carrot-tutorial-card" onclick="CarrotKernel.openSystemTutorial()">
                        <div class="carrot-tutorial-number">1</div>
                        <div class="carrot-tutorial-content">
                            <strong>System Setup</strong>
                            <span>Learn basic configuration and how to enable CarrotKernel</span>
                        </div>
                        <div class="carrot-tutorial-arrow">→</div>
                    </div>

                    <div class="carrot-tutorial-card" onclick="CarrotKernel.openRepositoryTutorial()">
                        <div class="carrot-tutorial-number">2</div>
                        <div class="carrot-tutorial-content">
                            <strong>Character Repository</strong>
                            <span>Scan lorebooks and manage your character data</span>
                        </div>
                        <div class="carrot-tutorial-arrow">→</div>
                    </div>

                    <div class="carrot-tutorial-card" onclick="CarrotKernel.openInjectionTutorial()">
                        <div class="carrot-tutorial-number">3</div>
                        <div class="carrot-tutorial-content">
                            <strong>AI Injection</strong>
                            <span>Understand how character data reaches your AI</span>
                        </div>
                        <div class="carrot-tutorial-arrow">→</div>
                    </div>

                    <div class="carrot-tutorial-card" onclick="CarrotKernel.openTemplateEditorTutorial()">
                        <div class="carrot-tutorial-number">4</div>
                        <div class="carrot-tutorial-content">
                            <strong>Template Editor</strong>
                            <span>Customize how character data is formatted for AI</span>
                        </div>
                        <div class="carrot-tutorial-arrow">→</div>
                    </div>

                    <div class="carrot-tutorial-card" onclick="CarrotKernel.openBabyBunnyTutorial()">
                        <div class="carrot-tutorial-number">5</div>
                        <div class="carrot-tutorial-content">
                            <strong>Baby Bunny Mode</strong>
                            <span>Create character archives from AI-generated sheets</span>
                        </div>
                        <div class="carrot-tutorial-arrow">→</div>
                    </div>
                </div>

                <div class="carrot-format-example">
                    <div class="carrot-format-header">
                        <i class="fa-solid fa-code"></i>
                        <strong>Character Repository Format Example</strong>
                    </div>
                    <div class="carrot-format-code">
                        <code>&lt;BunnymoTags&gt;&lt;Name:Atsu_Ibn_Oba_Al-Masri&gt;, &lt;GENRE:FANTASY&gt; &lt;PHYSICAL&gt; &lt;SPECIES:HUMAN&gt;, &lt;GENDER:MALE&gt;, &lt;BUILD:Muscular&gt;, &lt;BUILD:Tall&gt;, &lt;SKIN:FAIR&gt;, &lt;HAIR:BLACK&gt;, &lt;STYLE:ANCIENT_EGYPTIAN_ROYALTY&gt;,&lt;/PHYSICAL&gt; &lt;PERSONALITY&gt;&lt;Dere:Sadodere&gt;, &lt;Dere:Oujidere&gt;, &lt;ENTJ-U&gt;, &lt;TRAIT:CRUEL&gt;, &lt;TRAIT:INTELLIGENT&gt;, &lt;TRAIT:POWERFUL&gt;, &lt;TRAIT:DANGEROUS&gt;, &lt;TRAIT:SELFISH&gt;, &lt;TRAIT:HEDONISTIC&gt;, &lt;ATTACHMENT:FEARFUL_AVOIDANT&gt;, &lt;CONFLICT:COMPETITIVE&gt;, &lt;BOUNDARIES:RIGID&gt;,&lt;FLIRTING:AGGRESSIVE&gt;, &lt;/PERSONALITY&gt; &lt;NSFW&gt;&lt;ORIENTATION:PANSEXUAL&gt;, &lt;POWER:DOMINANT&gt;, &lt;KINK:BRAT_TAMING&gt;, &lt;KINK:PUBLIC_HUMILIATION&gt;, &lt;KINK:POWER_PLAY&gt;, &lt;KINK:EXHIBITIONISM&gt;, &lt;CHEMISTRY:ANTAGONISTIC&gt;, &lt;AROUSAL:DOMINANCE&gt;, &lt;TRAUMA:CHILDHOOD&gt;, &lt;JEALOUSY:POSSESSIVE&gt;,&lt;/NSFW&gt;

 &lt;Genre&gt; This story primarily uses &lt;GENRE:BLANK&gt; as its most prominent narrative foundation, establishing the core structure and pacing. This is often blended with &lt;GENRE:ROMANCE&gt; as a secondary layer, adding emotional stakes and relationship development to the primary genre framework. &lt;/Genre&gt;

&lt;Linguistics&gt; Character uses &lt;LING:COMMANDING&gt; as his primary mode of speech, asserting authority and control. This is almost always blended with &lt;LING:SUGGESTIVE&gt;, using a tone of cruel flirtation, possessive pet names, and psychological manipulation to achieve his goals. &lt;/linguistics&gt;&lt;/BunnymoTags&gt;</code>
                    </div>
                    <div class="carrot-format-note">
                        <i class="fa-solid fa-lightbulb"></i>
                        <span>Place these blocks in your lorebook entries to create character repositories</span>
                    </div>
                </div>
            </div>
            
            <!-- Popup Overlays -->
            <div class="carrot-popup-overlay" id="carrot-popup-overlay" style="display: none;">
                <div class="carrot-popup-container" id="carrot-popup-container">
                    <!-- Dynamic popup content will be inserted here -->
                </div>
            </div>
            
            <!-- Tutorial Overlay -->
            <div class="carrot-tutorial-overlay" id="carrot-tutorial-overlay" style="display: none;">
                <div class="carrot-tutorial-spotlight" id="carrot-tutorial-spotlight"></div>
                <div class="carrot-tutorial-popup" id="carrot-tutorial-popup">
                    <div class="carrot-tutorial-popup-header">
                        <h4 id="carrot-tutorial-popup-title">Tutorial Step</h4>
                        <button class="carrot-tutorial-close" onclick="CarrotKernel.closeTutorial()">
                            <i class="fa-solid fa-times"></i>
                        </button>
                    </div>
                    <div class="carrot-tutorial-popup-content" id="carrot-tutorial-popup-content">
                        <!-- Tutorial content -->
                    </div>
                    <div class="carrot-tutorial-popup-nav">
                        <button class="carrot-tutorial-prev" id="carrot-tutorial-prev" onclick="CarrotKernel.previousTutorialStep()">
                            <i class="fa-solid fa-arrow-left"></i> Previous
                        </button>
                        <span class="carrot-tutorial-progress" id="carrot-tutorial-progress">1 / 5</span>
                        <button class="carrot-tutorial-next" id="carrot-tutorial-next" onclick="CarrotKernel.nextTutorialStep()">
                            Next <i class="fa-solid fa-arrow-right"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- RAG Chunk Visualizer Modal -->
            <div id="carrot-rag-visualizer-modal" class="carrot-rag-overlay">
                <section class="drawer-content chunk-modal" role="dialog" aria-modal="true" aria-labelledby="carrot-rag-modal-title">
                    <header class="chunk-modal__header flex-container alignitemscenter spaceBetween">
                        <div class="chunk-modal__title flex-container flexFlowColumn">
                            <h2 id="carrot-rag-modal-title" class="chunk-modal__heading">
                                <i class="fa-solid fa-cube"></i> Chunk Visualizer
                            </h2>
                            <p id="carrot-rag-modal-subtitle" class="chunk-modal__subtitle"></p>
                        </div>
                        <button id="carrot-rag-modal-close" class="menu_button chunk-modal__close" type="button" aria-label="Close chunk viewer">
                            <i class="fa-solid fa-times"></i>
                        </button>
                    </header>
                    <div class="chunk-modal__toolbar flex-container alignitemscenter">
                        <input type="text" id="carrot-rag-chunk-search" class="text_pole textarea_compact chunk-search-input" placeholder="Search chunks...">
                        <button id="carrot-rag-add-chunk" class="menu_button" type="button" title="Add new chunk" style="padding: 4px 8px; font-size: 0.9em;">
                            <i class="fa-solid fa-plus"></i>
                        </button>
                        <button id="carrot-rag-format-toggle" class="menu_button chunk-format-toggle" type="button" title="Toggle formatted text display">
                            <i class="fa-solid fa-align-left"></i>
                            <span class="chunk-format-label">Plain</span>
                        </button>
                        <button id="carrot-rag-case-toggle" class="menu_button chunk-case-toggle" type="button" title="Toggle case-sensitive keyword matching">
                            <i class="fa-solid fa-font"></i>
                            <span class="chunk-case-label">Case: Ignore</span>
                        </button>
                        <div id="carrot-rag-chunk-stats" class="chunk-stat-list flex-container alignitemscenter" aria-live="polite"></div>
                    </div>
                    <div id="carrot-rag-chunks-container" class="chunk-list">
                        <!-- Chunks populated dynamically -->
                    </div>
                    <footer class="chunk-modal__footer flex-container alignitemscenter spaceBetween">
                        <div class="chunk-footer__info">
                            <i class="fa-solid fa-info-circle"></i> Click any chunk to edit, or delete unwanted chunks
                        </div>
                        <div class="chunk-footer__actions flex-container alignitemscenter">
                            <button id="carrot-rag-modal-save" class="carrot-primary-btn chunk-footer__button" type="button">
                                <i class="fa-solid fa-save"></i> Save Changes
                            </button>
                            <button id="carrot-rag-modal-cancel" class="carrot-secondary-btn chunk-footer__button" type="button">
                                Cancel
                            </button>
                        </div>
                    </footer>
                </section>
            </div>

            </div>
        </div>
    </div>
</div>