setup-wizard.html

<!-- DeepLore — First-Run Setup Wizard -->
<div class="dle-wizard">

    <!-- Screen-reader-only progress announcer. Updated on every page advance so
         assistive tech hears "Step N of M: <title>" without a visible duplicate. -->
    <div id="dle-wizard-progress-live" class="dle-sr-only" role="status" aria-live="polite" aria-atomic="true"></div>

    <!-- Step indicator -->
    <nav class="dle-wizard-steps" role="tablist" aria-label="Setup progress" data-i18n="[aria-label]dle_wizard_progress_aria">
        <button type="button" id="dle-wizard-step-1" class="dle-wizard-step active" data-step="1" role="tab" aria-selected="true" aria-controls="dle-wizard-page-1" aria-current="step">
            <span class="dle-wizard-step-dot">1</span>
            <span class="dle-wizard-step-label" data-i18n="dle_wizard_step_1_welcome">Welcome</span>
        </button>
        <div class="dle-wizard-step-line" aria-hidden="true"></div>
        <button type="button" id="dle-wizard-step-2" class="dle-wizard-step" data-step="2" role="tab" aria-selected="false" aria-controls="dle-wizard-page-2">
            <span class="dle-wizard-step-dot">2</span>
            <span class="dle-wizard-step-label" data-i18n="dle_tab_connection">Connection</span>
        </button>
        <div class="dle-wizard-step-line" aria-hidden="true"></div>
        <button type="button" id="dle-wizard-step-3" class="dle-wizard-step" data-step="3" role="tab" aria-selected="false" aria-controls="dle-wizard-page-3">
            <span class="dle-wizard-step-dot">3</span>
            <span class="dle-wizard-step-label" data-i18n="dle_wizard_step_3_tags">Tags</span>
        </button>
        <div class="dle-wizard-step-line" aria-hidden="true"></div>
        <button type="button" id="dle-wizard-step-4" class="dle-wizard-step" data-step="4" role="tab" aria-selected="false" aria-controls="dle-wizard-page-4">
            <span class="dle-wizard-step-dot">4</span>
            <span class="dle-wizard-step-label" data-i18n="dle_tab_matching">Matching</span>
        </button>
        <div class="dle-wizard-step-line" aria-hidden="true"></div>
        <button type="button" id="dle-wizard-step-5" class="dle-wizard-step" data-step="5" role="tab" aria-selected="false" aria-controls="dle-wizard-page-5">
            <span class="dle-wizard-step-dot">5</span>
            <span class="dle-wizard-step-label" data-i18n="dle_wizard_step_5_ai">AI</span>
        </button>
        <div class="dle-wizard-step-line" aria-hidden="true"></div>
        <button type="button" id="dle-wizard-step-6" class="dle-wizard-step" data-step="6" role="tab" aria-selected="false" aria-controls="dle-wizard-page-6">
            <span class="dle-wizard-step-dot">6</span>
            <span class="dle-wizard-step-label" data-i18n="dle_analytics_section_librarian">Librarian</span>
        </button>
        <div class="dle-wizard-step-line" aria-hidden="true"></div>
        <button type="button" id="dle-wizard-step-7" class="dle-wizard-step" data-step="7" role="tab" aria-selected="false" aria-controls="dle-wizard-page-7">
            <span class="dle-wizard-step-dot">7</span>
            <span class="dle-wizard-step-label" data-i18n="dle_wizard_step_7_vault">Vault</span>
        </button>
        <div class="dle-wizard-step-line" aria-hidden="true"></div>
        <button type="button" id="dle-wizard-step-8" class="dle-wizard-step" data-step="8" role="tab" aria-selected="false" aria-controls="dle-wizard-page-8">
            <span class="dle-wizard-step-dot">8</span>
            <span class="dle-wizard-step-label" data-i18n="dle_wizard_step_8_import">Import</span>
        </button>
        <div class="dle-wizard-step-line" aria-hidden="true"></div>
        <button type="button" id="dle-wizard-step-9" class="dle-wizard-step" data-step="9" role="tab" aria-selected="false" aria-controls="dle-wizard-page-9">
            <span class="dle-wizard-step-dot">9</span>
            <span class="dle-wizard-step-label" data-i18n="dle_common_done">Done</span>
        </button>
    </nav>

    <!-- Page container -->
    <div class="dle-wizard-body">

        <!-- ═══ Page 1: Welcome ═══ -->
        <div id="dle-wizard-page-1" class="dle-wizard-page active" data-wizard-page="1" role="tabpanel" aria-labelledby="dle-wizard-step-1" tabindex="-1">
            <h2 data-i18n="dle_wizard_welcome_heading">Welcome to DeepLore</h2>
            <p class="dle-wizard-subtitle" data-i18n="dle_wizard_subtitle">Your Obsidian vault, connected to SillyTavern.</p>

            <div class="dle-wizard-card">
                <h3><i class="fa-solid fa-book-open" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_what_is_h3">What is this?</span></h3>
                <p data-i18n="dle_wizard_what_is_desc">DeepLore connects your Obsidian lore vault to SillyTavern, automatically injecting relevant worldbuilding entries into your roleplay context. Your characters, locations, lore, and rules — pulled in when they matter.</p>
            </div>

            <div class="dle-wizard-card">
                <h3><i class="fa-solid fa-gears" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_how_works_h3">How does it work?</span></h3>
                <ol>
                    <li data-i18n-html="dle_setup_wizard_how_works_step_1"><strong data-i18n="dle_col_keywords">Keywords</strong> in chat text match against your vault entries</li>
                    <li data-i18n-html="dle_setup_wizard_how_works_step_2"><strong>AI refinement</strong> (optional) picks the most relevant matches</li>
                    <li data-i18n-html="dle_setup_wizard_how_works_step_3">Matched entries <strong>are injected</strong> into the AI's context window</li>
                </ol>
            </div>

            <h3 class="dle-wizard-fork-heading" data-i18n="dle_wizard_fork_heading">How do you want to start?</h3>
            <div class="dle-wizard-fork" role="group" aria-label="Choose a starting path" data-i18n="[aria-label]dle_wizard_fork_aria">
                <button type="button" class="dle-wizard-choice-card dle-wizard-choice-recommended" data-fork="demo">
                    <span class="dle-wizard-choice-badge" data-i18n="dle_wizard_fork_easiest_badge">Easiest start</span>
                    <i class="fa-solid fa-flask dle-wizard-choice-icon" aria-hidden="true"></i>
                    <span class="dle-wizard-choice-title" data-i18n="dle_wizard_fork_demo_title">Try the demo vault</span>
                    <span class="dle-wizard-choice-desc" data-i18n="dle_wizard_fork_demo_desc">Explore DeepLore with the pre-built Duskfrost world — no vault of your own needed.</span>
                </button>
                <button type="button" class="dle-wizard-choice-card" data-fork="connect">
                    <i class="fa-solid fa-plug dle-wizard-choice-icon" aria-hidden="true"></i>
                    <span class="dle-wizard-choice-title" data-i18n="dle_wizard_fork_connect_title">Connect my Obsidian</span>
                    <span class="dle-wizard-choice-desc" data-i18n="dle_wizard_fork_connect_desc">Point DeepLore at your own Obsidian vault over the Local REST API.</span>
                </button>
                <button type="button" class="dle-wizard-choice-card" data-fork="import">
                    <i class="fa-solid fa-file-import dle-wizard-choice-icon" aria-hidden="true"></i>
                    <span class="dle-wizard-choice-title" data-i18n="dle_wizard_fork_import_title">Import a lorebook</span>
                    <span class="dle-wizard-choice-desc" data-i18n="dle_wizard_fork_import_desc">Bring an existing SillyTavern World Info book into a vault.</span>
                </button>
            </div>

            <p class="dle-wizard-muted" data-i18n="dle_wizard_welcome_note">This wizard will walk you through the full setup. You can change everything later in Settings.</p>
        </div>

        <!-- ═══ Page 2: Vault Connection ═══ -->
        <div id="dle-wizard-page-2" class="dle-wizard-page" data-wizard-page="2" role="tabpanel" aria-labelledby="dle-wizard-step-2" tabindex="-1">
            <h2 data-i18n="dle_wizard_connection_heading">Vault Connection</h2>
            <p class="dle-wizard-subtitle" data-i18n-html="dle_setup_wizard_connection_subtitle">Connect to your Obsidian vault via the <a href="https://github.com/coddingtonbear/obsidian-local-rest-api" target="_blank">Local REST API</a> plugin.</p>

            <div class="dle-wizard-field">
                <label for="dle-wiz-vault-name" data-i18n="dle_wizard_vault_name_label">Vault Name</label>
                <input id="dle-wiz-vault-name" class="text_pole" type="text" value="Primary" placeholder="A friendly label for this vault" data-i18n="[placeholder]dle_wizard_vault_name_placeholder">
            </div>
            <div class="dle-wizard-field">
                <label for="dle-wiz-host" data-i18n="dle_placeholder_host">Host</label>
                <input id="dle-wiz-host" class="text_pole" type="text" value="127.0.0.1" placeholder="127.0.0.1" />
            </div>
            <div class="dle-wizard-row">
                <div class="dle-wizard-field" style="flex: 1;">
                    <label for="dle-wiz-port" data-i18n="dle_placeholder_port">Port</label>
                    <input id="dle-wiz-port" class="text_pole" type="number" min="1" max="65535" value="27123" />
                </div>
                <div class="dle-wizard-field" style="flex: 2;">
                    <label for="dle-wiz-api-key" data-i18n="dle_placeholder_vault_apikey">API Key</label>
                    <input id="dle-wiz-api-key" class="text_pole" type="password" autocomplete="off" data-1p-ignore data-lpignore="true" placeholder="From Obsidian REST API plugin settings" data-i18n="[placeholder]dle_wizard_api_key_placeholder">
                </div>
            </div>
            <div class="dle-wizard-field">
                <label class="checkbox_label">
                    <input id="dle-wiz-https" type="checkbox" />
                    <span data-i18n="dle_wizard_https_label">Use HTTPS</span>
                    <small class="dle-wizard-muted" data-i18n="dle_wizard_https_port_note">(port 27124 — see note below)</small>
                </label>
                <a id="dle-wiz-trust-cert" href="#" class="dle-wizard-muted" style="font-size: 0.85em; display: none;">
                    <i class="fa-solid fa-shield-halved" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_trust_cert_link">Trust Certificate (open in new tab)</span>
                </a>
                <p class="dle-wizard-muted" style="font-size: 0.85em; margin-top: var(--dle-space-1);">
                    <i class="fa-solid fa-circle-info" aria-hidden="true"></i> <strong data-i18n="dle_wizard_http_recommended">HTTP is recommended.</strong> HTTPS requires trusting a self-signed certificate, which DLE does not provide support for. If you need HTTPS, see the
                    <a href="https://github.com/coddingtonbear/obsidian-web/wiki/How-do-I-get-my-browser-trust-my-Obsidian-Local-REST-API-certificate%3F" target="_blank" rel="noopener" data-i18n="dle_wizard_https_guide_link">Local REST API author's guide</a>.
                </p>
            </div>

            <div class="dle-wizard-action-row">
                <button type="button" id="dle-wiz-test-conn" class="menu_button dle-wizard-action-btn">
                    <i class="fa-solid fa-plug" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_test_connection_btn">Test Connection</span>
                </button>
                <button type="button" id="dle-wiz-scan-vaults" class="menu_button menu_button_icon">
                    <i class="fa-solid fa-radar" aria-hidden="true"></i> <span data-i18n="dle_vaultscan_launch_btn">Scan for vaults</span>
                </button>
            </div>
            <span class="dle-wizard-field-hint" data-i18n="dle_vaultscan_launch_hint">Not sure of your port? Scan localhost for a running Obsidian REST API.</span>

            <!-- Connection result banner -->
            <div id="dle-wiz-conn-result" class="dle-wizard-result-banner" style="display: none;"></div>

            <p class="dle-wizard-muted dle-wizard-wiki-link">
                <a href="https://github.com/pixelnull/sillytavern-DeepLore/wiki/Installation" target="_blank" rel="noopener"><i class="fa-solid fa-book" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_installation_guide_link">Installation guide</span></a>
            </p>

            <!-- Demo vault callout -->
            <div class="dle-wizard-card dle-wizard-demo-callout">
                <h3><i class="fa-solid fa-flask" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_demo_card_h3">New to DeepLore? Try the demo vault</span></h3>
                <p data-i18n-html="dle_setup_wizard_demo_card_p">A complete pre-built vault — the fantasy city of <strong>Duskfrost</strong>. Hundreds of characters, locations, lore, factions, and species. Perfect for exploring DLE before building your own vault.</p>
                <button type="button" id="dle-wiz-demo-toggle" class="menu_button menu_button_icon">
                    <i class="fa-solid fa-folder-open" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_demo_show_me_how_btn">Show me how</span>
                </button>
                <div id="dle-wiz-demo-instructions" style="display: none;">
                    <ol>
                        <li data-i18n-html="dle_setup_wizard_demo_step_1">In Obsidian, click the vault icon (bottom-left) → <strong>Open folder as vault</strong></li>
                        <li data-i18n-html="dle_setup_wizard_demo_step_2_intro">Navigate to the <code>test-vault</code> folder inside the DLE extension directory:
                            <div class="dle-wizard-demo-path-row">
                                <code id="dle-wiz-demo-path" class="dle-wizard-demo-path"></code>
                                <button type="button" id="dle-wiz-demo-copy" class="menu_button menu_button_icon dle-wizard-demo-copy" title="Copy path" aria-label="Copy path" data-i18n="[title]dle_wizard_demo_copy_tooltip;[aria-label]dle_wizard_demo_copy_tooltip">
                                    <i class="fa-solid fa-copy" aria-hidden="true"></i>
                                </button>
                            </div>
                        </li>
                        <li data-i18n-html="dle_setup_wizard_demo_step_3">Install &amp; enable the <strong>Local REST API</strong> community plugin in the demo vault</li>
                        <li data-i18n="dle_wizard_demo_step_4">Set an API key in the plugin settings, then come back here</li>
                    </ol>
                    <button type="button" id="dle-wiz-demo-autofill" class="menu_button dle-wizard-action-btn">
                        <i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_demo_autofill_btn">Auto-fill connection for demo vault</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- ═══ Page 3: Tags & Search Mode ═══ -->
        <div id="dle-wizard-page-3" class="dle-wizard-page" data-wizard-page="3" role="tabpanel" aria-labelledby="dle-wizard-step-3" tabindex="-1">
            <h2 data-i18n="dle_setup_wizard_tags_search_mode_h2">Tags &amp; Search Mode</h2>
            <p class="dle-wizard-subtitle" data-i18n="dle_wizard_tags_subtitle">Configure which Obsidian notes become lorebook entries and how they're matched.</p>

            <div class="dle-wizard-field">
                <label for="dle-wiz-lorebook-tag" data-i18n="dle_lorebook_tag_label">Lorebook Tag</label>
                <span class="dle-wizard-field-hint" data-i18n="dle_wizard_lorebook_tag_hint">Obsidian notes with this tag become lorebook entries</span>
                <input id="dle-wiz-lorebook-tag" class="text_pole" type="text" value="lorebook" />
            </div>

            <div class="dle-wizard-field">
                <label for="dle-wiz-constant-tag" data-i18n="dle_wizard_constant_tag_label">Constant Tag</label>
                <span class="dle-wizard-field-hint" data-i18n="dle_wizard_constant_tag_hint">Always-inject entries (e.g. world rules, system lore)</span>
                <input id="dle-wiz-constant-tag" class="text_pole" type="text" value="lorebook-always" />
            </div>

            <div class="dle-wizard-field">
                <label for="dle-wiz-seed-tag" data-i18n="dle_seed_tag_label">Seed Tag</label>
                <span class="dle-wizard-field-hint" data-i18n="dle_wizard_seed_tag_hint">Content sent to AI search as story context on new chats</span>
                <input id="dle-wiz-seed-tag" class="text_pole" type="text" value="lorebook-seed" />
            </div>

            <div class="dle-wizard-field">
                <label for="dle-wiz-bootstrap-tag" data-i18n="dle_wizard_bootstrap_tag_label">Bootstrap Tag</label>
                <span class="dle-wizard-field-hint" data-i18n="dle_wizard_bootstrap_tag_hint">Force-inject entries when chat is short (first few messages)</span>
                <input id="dle-wiz-bootstrap-tag" class="text_pole" type="text" value="lorebook-bootstrap" />
            </div>

            <hr class="dle-wizard-divider" />

            <div class="dle-wizard-field">
                <label data-i18n="dle_ai_search_mode_label">Search Mode</label>
                <div class="dle-wizard-radio-group">
                    <label class="dle-wizard-radio">
                        <input type="radio" name="dle-wiz-search-mode" value="keywords" checked />
                        <div>
                            <strong data-i18n="dle_wizard_search_keywords_title">Keywords Only</strong>
                            <span class="dle-wizard-field-hint" data-i18n="dle_wizard_search_keywords_desc">Fast and free — matches by keyword triggers in your entries.</span>
                        </div>
                    </label>
                    <label class="dle-wizard-radio">
                        <input type="radio" name="dle-wiz-search-mode" value="two-stage" />
                        <div>
                            <strong data-i18n="dle_wizard_search_two_stage_title">Two-Stage</strong> <span class="dle-wizard-badge-rec" data-i18n="dle_wizard_recommended_badge">Recommended</span>
                            <span class="dle-wizard-field-hint" data-i18n="dle_wizard_search_two_stage_desc">Keywords pre-filter, then AI picks the best matches. Best balance.</span>
                        </div>
                    </label>
                    <label class="dle-wizard-radio">
                        <input type="radio" name="dle-wiz-search-mode" value="ai-only" />
                        <div>
                            <strong data-i18n="dle_search_mode_ai_only">AI Only</strong>
                            <span class="dle-wizard-field-hint" data-i18n="dle_wizard_search_ai_only_desc">Full semantic search — AI sees entire vault manifest. Higher cost, no keywords needed.</span>
                        </div>
                    </label>
                </div>
            </div>

            <p class="dle-wizard-muted dle-wizard-wiki-link">
                <a href="https://github.com/pixelnull/sillytavern-DeepLore/wiki/Writing-Vault-Entries" target="_blank" rel="noopener"><i class="fa-solid fa-book" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_write_entries_link">How to write vault entries</span></a>
            </p>
        </div>

        <!-- ═══ Page 4: Matching Configuration ═══ -->
        <div id="dle-wizard-page-4" class="dle-wizard-page" data-wizard-page="4" role="tabpanel" aria-labelledby="dle-wizard-step-4" tabindex="-1">
            <h2 data-i18n="dle_wizard_matching_heading">Matching Configuration</h2>
            <p class="dle-wizard-subtitle" data-i18n="dle_wizard_matching_subtitle">How many entries to scan and inject. Pick a preset or customize.</p>

            <div class="dle-wizard-field">
                <label data-i18n="dle_wizard_preset_label">Vault Size Preset</label>
                <div class="dle-wizard-preset-group">
                    <button type="button" class="dle-wizard-preset" data-preset="small">
                        <i class="fa-solid fa-seedling" aria-hidden="true"></i>
                        <strong data-i18n="dle_wizard_preset_small_title">Small</strong>
                        <span data-i18n="dle_setup_wizard_preset_small_desc">&lt; 50 entries</span>
                    </button>
                    <button type="button" class="dle-wizard-preset active" data-preset="medium">
                        <i class="fa-solid fa-tree" aria-hidden="true"></i>
                        <strong data-i18n="dle_wizard_preset_medium_title">Medium</strong>
                        <span data-i18n="dle_wizard_preset_medium_desc">50–200 entries</span>
                    </button>
                    <button type="button" class="dle-wizard-preset" data-preset="large">
                        <i class="fa-solid fa-mountain" aria-hidden="true"></i>
                        <strong data-i18n="dle_wizard_preset_large_title">Large</strong>
                        <span data-i18n="dle_wizard_preset_large_desc">200+ entries</span>
                    </button>
                </div>
                <div id="dle-wiz-preset-badge" class="dle-wizard-confirm-badge">
                    <i class="fa-solid fa-check" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_preset_badge_medium">Configured for Medium vault</span>
                </div>
            </div>

            <div class="dle-wizard-row dle-wizard-row-3">
                <div class="dle-wizard-field">
                    <label for="dle-wiz-scan-depth" data-i18n="dle_wizard_scan_depth_label">Scan Depth</label>
                    <span class="dle-wizard-field-hint" data-i18n="dle_wizard_scan_depth_hint">Chat messages to scan for keywords</span>
                    <input id="dle-wiz-scan-depth" class="text_pole" type="number" value="6" min="1" max="100" />
                </div>
                <div class="dle-wizard-field">
                    <label for="dle-wiz-max-entries" data-i18n="dle_max_entries_label">Max Entries</label>
                    <span class="dle-wizard-field-hint" data-i18n="dle_wizard_max_entries_hint">Maximum entries to inject per message</span>
                    <input id="dle-wiz-max-entries" class="text_pole" type="number" value="15" min="1" max="100" />
                    <label class="checkbox_label dle-wizard-checkbox-inline">
                        <input id="dle-wiz-unlimited-entries" type="checkbox" class="checkbox" />
                        <span data-i18n="dle_wizard_unlimited_label">Unlimited</span>
                    </label>
                </div>
                <div class="dle-wizard-field">
                    <label for="dle-wiz-budget" data-i18n="dle_token_budget_label">Token Budget</label>
                    <span class="dle-wizard-field-hint" data-i18n="dle_wizard_budget_hint">Max tokens for injected lore</span>
                    <input id="dle-wiz-budget" class="text_pole" type="number" value="3072" min="100" max="100000" />
                    <label class="checkbox_label dle-wizard-checkbox-inline">
                        <input id="dle-wiz-unlimited-budget" type="checkbox" class="checkbox" />
                        <span data-i18n="dle_wizard_unlimited_label">Unlimited</span>
                    </label>
                </div>
            </div>

            <label class="checkbox_label dle-wizard-checkbox">
                <input id="dle-wiz-fuzzy" type="checkbox" class="checkbox" />
                <span data-i18n="dle_wizard_fuzzy_label">Enable fuzzy search</span>
            </label>
            <span class="dle-wizard-field-hint" style="margin-left: var(--dle-space-5);" data-i18n="dle_wizard_fuzzy_hint">Supplements keyword matching with ranked relevance scoring. Catches partial matches.</span>
        </div>

        <!-- ═══ Page 5: AI Search Setup ═══ -->
        <div id="dle-wizard-page-5" class="dle-wizard-page" data-wizard-page="5" role="tabpanel" aria-labelledby="dle-wizard-step-5" tabindex="-1">
            <h2 data-i18n="dle_wizard_ai_heading">AI Search Setup</h2>
            <p class="dle-wizard-subtitle" data-i18n="dle_wizard_ai_subtitle">Configure how DLE connects to an AI for entry selection.</p>

            <div class="dle-wizard-field">
                <label data-i18n="dle_wizard_ai_mode_label">Connection Mode</label>
                <div class="dle-wizard-radio-group">
                    <label class="dle-wizard-radio">
                        <input type="radio" name="dle-wiz-ai-mode" value="profile" checked />
                        <div>
                            <strong data-i18n="dle_wizard_ai_profile_title">SillyTavern Connection Profile</strong>
                            <span class="dle-wizard-field-hint" data-i18n="dle_wizard_ai_profile_desc">Use an existing SillyTavern connection profile (recommended)</span>
                        </div>
                    </label>
                    <!-- v2.5: Custom Proxy mode deprecated, hidden -->
                    <label class="dle-wizard-radio" style="display: none;">
                        <input type="radio" name="dle-wiz-ai-mode" value="proxy" />
                        <div>
                            <strong data-i18n="dle_mode_proxy">Custom Proxy</strong>
                            <span class="dle-wizard-field-hint" data-i18n="dle_wizard_ai_proxy_desc">Route through a custom API endpoint</span>
                        </div>
                    </label>
                </div>
            </div>

            <!-- Profile mode fields -->
            <div id="dle-wiz-ai-profile-fields">
                <div class="dle-wizard-field">
                    <label for="dle-wiz-ai-profile" data-i18n="dle_label_connection_profile">Connection Profile</label>
                    <select id="dle-wiz-ai-profile" class="text_pole">
                        <option value="" data-i18n="dle_wizard_ai_profiles_loading">Loading profiles...</option>
                    </select>
                </div>
            </div>

            <!-- Proxy mode fields -->
            <!-- v2.5: Custom Proxy mode deprecated, hidden -->
            <div id="dle-wiz-ai-proxy-fields" style="display: none !important;">
                <div class="dle-wizard-field">
                    <label for="dle-wiz-ai-proxy-url" data-i18n="dle_label_proxy_url">Proxy URL</label>
                    <input id="dle-wiz-ai-proxy-url" class="text_pole" type="text" value="http://127.0.0.1:42069" />
                </div>
                <div class="dle-wizard-field">
                    <label for="dle-wiz-ai-model" data-i18n="dle_wizard_ai_model_label">Model</label>
                    <input id="dle-wiz-ai-model" class="text_pole" type="text" placeholder="e.g. claude-haiku-4-5-20251001" data-i18n="[placeholder]dle_wizard_ai_model_placeholder">
                </div>
            </div>

            <button type="button" id="dle-wiz-test-ai" class="menu_button dle-wizard-action-btn">
                <i class="fa-solid fa-brain" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_test_ai_btn">Test AI Connection</span>
            </button>

            <div id="dle-wiz-ai-result" class="dle-wizard-result-banner" style="display: none;"></div>
        </div>

        <!-- ═══ Page 6: Librarian ═══ -->
        <div id="dle-wizard-page-6" class="dle-wizard-page" data-wizard-page="6" role="tabpanel" aria-labelledby="dle-wizard-step-6" tabindex="-1">
            <h2 data-i18n="dle_analytics_section_librarian">Librarian</h2>
            <p class="dle-wizard-subtitle" data-i18n="dle_wizard_librarian_subtitle">Let the AI search for and flag missing lore during generation.</p>

            <div class="dle-wizard-card dle-wizard-card-info">
                <h3><i class="fa-solid fa-book-bookmark" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_librarian_what_is_h3">What is the Librarian?</span></h3>
                <p data-i18n-html="dle_setup_wizard_librarian_what_is_p">The Librarian gives your writing AI two optional tools during generation: <strong data-i18n="dle_lib_summary_searches">search</strong> (look up vault entries the pipeline missed) and <strong>flag</strong> (note a gap in your lore for later). Flagged gaps appear in the drawer's Librarian tab, where you can review them and use an AI-assisted editor to create new entries.</p>
                <p data-i18n="dle_wizard_librarian_optional_note">This is completely optional and off by default. Most generations should have zero tool calls if your vault is well-maintained.</p>
            </div>

            <div class="dle-wizard-card dle-wizard-card-warning">
                <h3><i class="fa-solid fa-coins" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_librarian_token_cost_h3">Token Cost</span></h3>
                <p data-i18n="dle_wizard_librarian_cost_desc">Enabling the Librarian increases token usage. Tool definitions add ~300-500 tokens to every generation's system prompt. Each search call adds a round-trip to the generation (the model pauses, searches, then continues). Flag calls are cheaper (no round-trip results). Start with just the flag tool if you want to minimize cost and see what your AI reaches for before enabling search.</p>
            </div>

            <div class="dle-wizard-card">
                <label class="checkbox_label dle-wizard-checkbox">
                    <input id="dle-wiz-librarian-enabled" type="checkbox" class="checkbox" />
                    <span data-i18n="dle_librarian_enabled_label">Enable Librarian</span>
                </label>

                <div id="dle-wiz-librarian-sub" style="display: none; margin-top: var(--dle-space-2); padding-left: 20px;">
                    <label class="checkbox_label dle-wizard-checkbox">
                        <input id="dle-wiz-librarian-search" type="checkbox" class="checkbox" checked />
                        <span data-i18n="dle_wizard_librarian_search_label">Search tool (AI can look up vault entries)</span>
                    </label>
                    <label class="checkbox_label dle-wizard-checkbox">
                        <input id="dle-wiz-librarian-flag" type="checkbox" class="checkbox" checked />
                        <span data-i18n="dle_wizard_librarian_flag_label">Flag tool (AI can flag missing lore)</span>
                    </label>
                </div>

                <p class="dle-wizard-note"><i class="fa-solid fa-circle-info" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_librarian_requires_note">Requires a model that supports function calling (tool use).</span></p>
            </div>
        </div>

        <!-- ═══ Page 7: Prepare Your Vault ═══ -->
        <div id="dle-wizard-page-7" class="dle-wizard-page" data-wizard-page="7" role="tabpanel" aria-labelledby="dle-wizard-step-7" tabindex="-1">
            <h2 data-i18n="dle_wizard_prepare_heading">Prepare Your Vault</h2>
            <p class="dle-wizard-subtitle" data-i18n="dle_wizard_prepare_subtitle">Optional scaffolding for advanced features.</p>

            <div class="dle-wizard-card dle-wizard-card-info">
                <p><i class="fa-solid fa-circle-info" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_prepare_info_p">DeepLore scans your whole vault by tag, not by folder &mdash; so there's nothing to point at here. These files are just scaffolding for optional features. You can skip this entirely and add them later from Settings.</span></p>
            </div>

            <div id="dle-wiz-vault-conn-warning" class="dle-wizard-card" style="display: none;">
                <h3><i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_conn_not_verified_h3">Connection Not Verified</span></h3>
                <p data-i18n="dle_wizard_conn_not_verified_desc">You haven't successfully connected to Obsidian yet. Go back and verify your connection before creating helper files.</p>
                <div class="dle-wizard-action-row">
                    <button type="button" id="dle-wiz-vault-back-conn" class="menu_button">
                        <i class="fa-solid fa-arrow-left" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_back_to_connection_btn">Back to Connection</span>
                    </button>
                </div>
            </div>

            <div id="dle-wiz-vault-helpers-wrap">
                <div class="dle-wizard-card">
                    <h3><i class="fa-solid fa-file-lines" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_field_defs_h3">Field Definitions</span></h3>
                    <p data-i18n="dle_wizard_field_defs_desc">Contextual gating fields let you filter entries by era, location, scene type, and characters present.</p>
                    <label class="checkbox_label dle-wizard-checkbox">
                        <input id="dle-wiz-create-fields" type="checkbox" class="checkbox" checked />
                        <span data-i18n="dle_wizard_create_fields_label">Create a field definitions file</span>
                    </label>
                    <div class="dle-wizard-field">
                        <label data-i18n="dle_wizard_fields_path_label">Path in vault</label>
                        <input id="dle-wiz-fields-path" type="text" class="text_pole" placeholder="DeepLore/field-definitions.yaml" data-i18n="[placeholder]dle_default_field_definitions_path">
                    </div>
                    <details class="dle-wizard-template-details">
                        <summary data-i18n="dle_wizard_show_template">Show template</summary>
                        <pre id="dle-wiz-fields-yaml" class="dle-wizard-yaml-preview"></pre>
                    </details>
                    <div id="dle-wiz-fields-status" class="dle-wizard-file-status" style="display: none;"></div>
                </div>

                <details id="dle-wiz-optional-helpers">
                    <summary data-i18n="dle_setup_wizard_optional_sessions_summary">Optional: Session Scribe folder</summary>
                    <div class="dle-wizard-card">
                        <h3><i class="fa-solid fa-scroll" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_sessions_folder_h3">Sessions Folder</span></h3>
                        <p data-i18n="dle_wizard_sessions_desc">Session Scribe writes AI-generated summaries of your roleplay sessions to Obsidian. This creates the folder for those notes.</p>
                        <label class="checkbox_label dle-wizard-checkbox">
                            <input id="dle-wiz-create-sessions" type="checkbox" class="checkbox" />
                            <span data-i18n="dle_wizard_create_sessions_label">Create sessions folder</span>
                        </label>
                        <div class="dle-wizard-field">
                            <label data-i18n="dle_wizard_sessions_path_label">Folder path in vault</label>
                            <input id="dle-wiz-sessions-path" type="text" class="text_pole" placeholder="Sessions" data-i18n="[placeholder]dle_scribe_folder_placeholder">
                        </div>
                        <div id="dle-wiz-sessions-status" class="dle-wizard-file-status" style="display: none;"></div>
                    </div>
                </details>

                <div class="dle-wizard-action-row">
                    <button type="button" id="dle-wiz-create-files" class="menu_button dle-wizard-btn-primary">
                        <i class="fa-solid fa-folder-plus" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_create_helpers_btn">Create Helpers</span>
                    </button>
                    <button type="button" id="dle-wiz-vault-skip" class="menu_button">
                        <i class="fa-solid fa-forward" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_skip_step_btn">Skip this step</span>
                    </button>
                </div>

                <div id="dle-wiz-vault-result" class="dle-wizard-result-banner" style="display: none;"></div>
            </div>
        </div>

        <!-- ═══ Page 8: Import ═══ -->
        <div id="dle-wizard-page-8" class="dle-wizard-page" data-wizard-page="8" role="tabpanel" aria-labelledby="dle-wizard-step-8" tabindex="-1">
            <h2 data-i18n="dle_wizard_import_heading">Import Existing Lorebook</h2>
            <p class="dle-wizard-subtitle" data-i18n="dle_wizard_import_subtitle">Already have a SillyTavern lorebook? Import entries into your Obsidian vault.</p>

            <div class="dle-wizard-card dle-wizard-card-info">
                <p data-i18n-html="dle_setup_wizard_optional_step_p"><i class="fa-solid fa-circle-info" aria-hidden="true"></i> This step is optional. You can always import later with <code>/dle-import</code>.</p>
            </div>

            <div class="dle-wizard-field">
                <label data-i18n="dle_wizard_import_method_label">Import Method</label>
                <div class="dle-wizard-radio-group">
                    <label class="dle-wizard-radio">
                        <input type="radio" name="dle-wiz-import-method" value="skip" checked />
                        <div>
                            <strong data-i18n="dle_wizard_import_skip_title">Skip Import</strong>
                            <span class="dle-wizard-field-hint" data-i18n="dle_wizard_import_skip_desc">I'll set up entries in Obsidian manually or import later.</span>
                        </div>
                    </label>
                    <label class="dle-wizard-radio">
                        <input type="radio" name="dle-wiz-import-method" value="lorebook" />
                        <div>
                            <strong data-i18n="dle_wizard_import_lorebook_title">From SillyTavern Lorebook</strong>
                            <span class="dle-wizard-field-hint" data-i18n="dle_wizard_import_lorebook_desc">Import from an existing ST World Info book.</span>
                        </div>
                    </label>
                    <label class="dle-wizard-radio">
                        <input type="radio" name="dle-wiz-import-method" value="file" />
                        <div>
                            <strong data-i18n="dle_wizard_import_file_title">From JSON File</strong>
                            <span class="dle-wizard-field-hint" data-i18n="dle_wizard_import_file_desc">Upload a World Info export JSON or V2 character card.</span>
                        </div>
                    </label>
                    <label class="dle-wizard-radio">
                        <input type="radio" name="dle-wiz-import-method" value="paste" />
                        <div>
                            <strong data-i18n="dle_wizard_import_json_label">Paste JSON</strong>
                            <span class="dle-wizard-field-hint" data-i18n="dle_wizard_import_paste_desc">Paste World Info JSON directly.</span>
                        </div>
                    </label>
                </div>
            </div>

            <!-- Lorebook dropdown (shown when lorebook method selected) -->
            <div id="dle-wiz-import-lb-fields" style="display: none;">
                <div class="dle-wizard-field">
                    <label for="dle-wiz-import-lorebook" data-i18n="dle_wizard_import_lorebook_select_label">Select Lorebook</label>
                    <select id="dle-wiz-import-lorebook" class="text_pole">
                        <option value="" data-i18n="dle_cmd_import_select_placeholder">— Select a lorebook —</option>
                    </select>
                </div>
            </div>

            <!-- File upload (shown when file method selected) -->
            <div id="dle-wiz-import-file-fields" style="display: none;">
                <input type="file" id="dle-wiz-import-file" accept=".json" class="dle-hidden" />
                <button type="button" id="dle-wiz-import-browse" class="menu_button menu_button_icon" style="display: inline-flex;">
                    <i class="fa-solid fa-file-import" aria-hidden="true"></i>
                    <span data-i18n="dle_cmd_import_browse_btn">Browse local JSON file...</span>
                </button>
                <span id="dle-wiz-import-file-name" class="dle-wizard-field-hint" style="margin-left: var(--dle-space-2);"></span>
            </div>

            <!-- JSON paste (shown when paste method selected) -->
            <div id="dle-wiz-import-paste-fields" style="display: none;">
                <div class="dle-wizard-field">
                    <label for="dle-wiz-import-json" data-i18n="dle_wizard_import_json_label">Paste JSON</label>
                    <textarea id="dle-wiz-import-json" class="text_pole dle-import-textarea" placeholder="Paste World Info JSON here..." rows="6" data-i18n="[placeholder]dle_cmd_import_paste_placeholder"></textarea>
                </div>
            </div>

            <!-- Target folder -->
            <div id="dle-wiz-import-folder-row" style="display: none;">
                <div class="dle-wizard-field">
                    <label for="dle-wiz-import-folder" data-i18n="dle_wizard_import_folder_label">Target Folder (optional)</label>
                    <span class="dle-wizard-field-hint" data-i18n="dle_wizard_import_folder_hint">Entries will be created in this folder in your vault. Leave blank for vault root.</span>
                    <input id="dle-wiz-import-folder" class="text_pole" type="text" placeholder="e.g. Imported" data-i18n="[placeholder]dle_wizard_import_folder_placeholder">
                </div>
            </div>

            <!-- Import button + results -->
            <div id="dle-wiz-import-action" style="display: none;">
                <button type="button" id="dle-wiz-import-btn" class="menu_button dle-wizard-action-btn">
                    <i class="fa-solid fa-file-import" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_import_entries_btn">Import Entries</span>
                </button>
            </div>

            <div id="dle-wiz-import-result" class="dle-wizard-result-banner" style="display: none;"></div>
        </div>

        <!-- ═══ Page 9: All Done ═══ -->
        <div id="dle-wizard-page-9" class="dle-wizard-page" data-wizard-page="9" role="tabpanel" aria-labelledby="dle-wizard-step-9" tabindex="-1">
            <div class="dle-wizard-done-header">
                <div class="dle-wizard-done-check"><i class="fa-solid fa-circle-check" aria-hidden="true"></i></div>
                <h2 data-i18n="dle_wizard_done_heading">Setup Complete!</h2>
            </div>

            <div id="dle-wiz-summary" class="dle-wizard-summary"></div>

            <div class="dle-wizard-actions-grid">
                <button type="button" class="menu_button dle-wizard-done-btn" data-action="health">
                    <i class="fa-solid fa-stethoscope" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_done_health_btn">Run Health Check</span>
                </button>
                <button type="button" class="menu_button dle-wizard-done-btn" data-action="graph">
                    <i class="fa-solid fa-project-diagram" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_done_graph_btn">Open Graph</span>
                </button>
                <button type="button" class="menu_button dle-wizard-done-btn" data-action="browse">
                    <i class="fa-solid fa-book-open" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_done_browse_btn">Browse Entries</span>
                </button>
                <button type="button" class="menu_button dle-wizard-done-btn" data-action="settings">
                    <i class="fa-solid fa-gear" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_done_settings_btn">Open Settings</span>
                </button>
                <button type="button" class="menu_button dle-wizard-done-btn" data-action="meet-emma" title="Open Emma the Librarian to write your first style/meta guide. Guides are read by Emma only — never by the writing AI." data-i18n="[title]dle_wizard_done_emma_tooltip">
                    <i class="fa-solid fa-book-open-reader" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_done_meet_emma_btn">Meet Emma</span>
                </button>
            </div>
            <p class="dle-wizard-muted" style="text-align: center;" data-i18n-html="dle_setup_wizard_done_emma_recommended_p">
                <strong data-i18n="dle_wizard_done_emma_button">Meet Emma</strong> is the recommended next step — she'll walk you through writing your first style guide.
            </p>

            <p class="dle-wizard-wiki-link">
                <a href="https://github.com/pixelnull/sillytavern-DeepLore/wiki" target="_blank">
                    <i class="fa-solid fa-book" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_full_docs_link">Read the full documentation</span>
                </a>
            </p>
        </div>

    </div>

    <!-- Bottom navigation -->
    <div class="dle-wizard-nav">
        <button type="button" id="dle-wiz-prev" class="menu_button" style="display: none;">
            <i class="fa-solid fa-arrow-left" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_prev_btn">Previous</span>
        </button>
        <button type="button" id="dle-wiz-skip" class="menu_button dle-wizard-skip-btn">
            <i class="fa-solid fa-clock" aria-hidden="true"></i> <span data-i18n="dle_wizard_skip_btn">Finish later</span>
        </button>
        <div class="dle-wizard-nav-spacer"></div>
        <button type="button" id="dle-wiz-next" class="menu_button dle-wizard-btn-primary">
            <span data-i18n="dle_setup_wizard_next_btn">Next</span> <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
        </button>
        <button type="button" id="dle-wiz-finish" class="menu_button dle-wizard-btn-primary" style="display: none;">
            <i class="fa-solid fa-check" aria-hidden="true"></i> <span data-i18n="dle_setup_wizard_finish_btn">Finish</span>
        </button>
    </div>

</div>