Upload 3 files

ui/components/prompt_tabs.py

@@ -27,6 +27,7 @@ def create_prompt_tabs():
     - Tab 5: Auto-hide (tag removal patterns)
     """
     with gr.Tabs(elem_id="naia-prompt-tabs", elem_classes=["prompt-tabs"]) as prompt_tabs:
+
         # Tab 1: Positive Prompt
         with gr.Tab("Positive", id="positive"):
             positive_prompt = gr.Textbox(
@@ -37,6 +38,19 @@ def create_prompt_tabs():
                 elem_id="naia-positive-prompt"
             )
 
+            with gr.Accordion("Random Image Generation Guide", open=False, elem_id="naia-random-guide"):
+                gr.Markdown(
+                    "NAIA-WEB-Lite features a workflow where once you set your target prompt using Quick Search, you can generate random prompt-based images using the **[🎰 Random + Generate ]** button.\n\n"
+                    "1. **The prompt area is volatile.** This space is merely for briefly displaying random prompts. You should modify the prompt in this area only when you like the composition after clicking \"Generate\" and want to create a better image.\n\n"
+                    "2. **Pre-prompt and Post-prompt are non-volatile.** They are stored in your browser's LocalStorage. Every time an image is generated, it is combined in the format `[Person Count] + [Pre-prompt] + [Random Prompt - Auto-hide] + [Post-prompt]` and sent to the Novel AI API server.\n\n"
+                    "3. Generally, it is recommended to place **artist tags in [Pre-prompt]**, and **background, various style tags, and quality tags in [Post-prompt]**."
+                )
+                gr.Image(
+                    value="src/guide_4.png",
+                    show_label=False,
+                    container=False
+                )
+
         # Tab 2: Negative Prompt
         with gr.Tab("Negative (UC)", id="negative"):
             negative_prompt = gr.Textbox(

ui/components/settings_panel.py

@@ -217,7 +217,8 @@ LOCALSTORAGE_JS = """
     window.NAIAGenerate = {
         start: startGenerateTimer,
         stop: stopGenerateTimer,
-        getAvgTime: getAverageResponseTime
+        getAvgTime: getAverageResponseTime,
+        isGenerating: () => generateStartTime !== null
     };
 
     // Token management functions
@@ -468,7 +469,10 @@ LOCALSTORAGE_JS = """
             // Disable Autocomplete
             disable_autocomplete: getInputValue('#naia-disable-autocomplete', 'checkbox'),
             // Global Ban
-            global_ban: getInputValue('#naia-global-ban')
+            global_ban: getInputValue('#naia-global-ban'),
+            // Wildcard Mode
+            wildcard_mode: getInputValue('#naia-wildcard-mode', 'checkbox'),
+            wildcard_template: getInputValue('#naia-wildcard-template')
         };
 
         // Merge: use new value if not null, otherwise keep existing
@@ -995,6 +999,26 @@ LOCALSTORAGE_JS = """
             // Store token info for later use in insertion
             this.currentTokenInfo = tokenInfo;
 
+            // Check if this is a wildcard search (starts with __)
+            if (token.startsWith('__')) {
+                this.isWildcardMode = true;
+                const wildcardQuery = token.substring(2); // Remove leading __
+
+                // Search wildcard files
+                const wildcardResults = this.searchWildcards(wildcardQuery);
+                if (wildcardResults.length > 0) {
+                    this.currentResults = wildcardResults;
+                    this.selectedIndex = 0;
+                    this.renderDropdown();
+                    this.show();
+                } else {
+                    this.close();
+                }
+                return;
+            }
+
+            this.isWildcardMode = false;
+
             if (token.length < this.MIN_CHARS) {
                 this.close();
                 return;
@@ -1014,6 +1038,49 @@ LOCALSTORAGE_JS = """
             }
         },
 
+        // Search wildcard files from NAIAWildcard storage
+        searchWildcards(query) {
+            if (!window.NAIAWildcard) return [];
+
+            const results = [];
+            const queryLower = query.toLowerCase();
+            const categories = NAIAWildcard.categories || {};
+
+            for (const [category, files] of Object.entries(categories)) {
+                for (const filename of Object.keys(files)) {
+                    // Build wildcard reference: category/filename (without .txt)
+                    const baseName = filename.replace(/\\.txt$/i, '');
+                    let wildcardRef;
+                    if (category === 'default') {
+                        wildcardRef = baseName;
+                    } else {
+                        wildcardRef = category + '/' + baseName;
+                    }
+
+                    // Match against query
+                    if (queryLower === '' || wildcardRef.toLowerCase().includes(queryLower)) {
+                        const itemCount = files[filename]?.length || 0;
+                        // Format: [display_name, count, category_type]
+                        results.push([wildcardRef, itemCount, 'wildcard']);
+                    }
+                }
+            }
+
+            // Sort by relevance: exact prefix match first, then alphabetically
+            results.sort((a, b) => {
+                const aLower = a[0].toLowerCase();
+                const bLower = b[0].toLowerCase();
+                const aPrefix = aLower.startsWith(queryLower);
+                const bPrefix = bLower.startsWith(queryLower);
+
+                if (aPrefix && !bPrefix) return -1;
+                if (!aPrefix && bPrefix) return 1;
+                return aLower.localeCompare(bLower);
+            });
+
+            return results.slice(0, 15); // Limit to 15 results
+        },
+
         // Receive results from Gradio (called from JS parameter)
         setResults(results) {
             if (!results || results.length === 0) {
@@ -1044,15 +1111,21 @@ LOCALSTORAGE_JS = """
                 let categoryLabel = '';
                 if (category === 'artist') {
                     categoryColor = '#2196F3';
-                    categoryLabel = '🎨';
+                    categoryLabel = '🎨 ';
                 } else if (category === 'character') {
                     categoryColor = '#4CAF50';
-                    categoryLabel = '👤';
+                    categoryLabel = '👤 ';
+                } else if (category === 'wildcard') {
+                    categoryColor = '#FF9800';
+                    categoryLabel = '🃏 ';
                 }
 
                 // Format count
                 let countStr;
-                if (count >= 1000000) {
+                if (category === 'wildcard') {
+                    // For wildcards, show item count
+                    countStr = count + ' items';
+                } else if (count >= 1000000) {
                     countStr = (count / 1000000).toFixed(1) + 'M';
                 } else if (count >= 1000) {
                     countStr = Math.round(count / 1000) + 'k';
@@ -1118,10 +1191,13 @@ LOCALSTORAGE_JS = """
 
             const [tag, count, category] = this.currentResults[index];
 
-            // Add "artist:" prefix for artist tags
+            // Format insert text based on category
             let insertTag = tag;
             if (category === 'artist') {
                 insertTag = 'artist:' + tag;
+            } else if (category === 'wildcard') {
+                // Wrap with __ for wildcard syntax
+                insertTag = '__' + tag + '__';
             }
 
             // Check if this is the character search input
@@ -1140,6 +1216,10 @@ LOCALSTORAGE_JS = """
                         searchBtn.click();
                     }
                 }, 100);
+            } else if (this.isWildcardMode) {
+                // Wildcard mode: replace from the __ start position
+                this.insertWildcard(insertTag);
+                this.close();
             } else {
                 // Normal insert
                 this.insertTag(insertTag);
@@ -1147,6 +1227,49 @@ LOCALSTORAGE_JS = """
             }
         },
 
+        // Insert wildcard into textarea (replaces from __ position)
+        insertWildcard(wildcardSyntax) {
+            if (!this.activeTextarea) return;
+
+            const textarea = this.activeTextarea;
+            const text = textarea.value;
+            const tokenInfo = this.currentTokenInfo;
+
+            if (!tokenInfo) return;
+
+            // The tokenStart is where the full token begins (which includes __)
+            const replaceStart = tokenInfo.tokenStart;
+            const replaceEnd = tokenInfo.end;
+
+            // Build new text
+            const before = text.substring(0, replaceStart);
+            let after = text.substring(replaceEnd);
+
+            // Handle leading whitespace
+            let leadingSpace = '';
+            if (replaceStart > 0 && text[replaceStart - 1] === ',' && !before.endsWith(' ')) {
+                leadingSpace = ' ';
+            }
+
+            // Add comma+space suffix if appropriate
+            let tailSuffix = '';
+            if (!after.trim()) {
+                tailSuffix = ', ';
+            } else if (!after.startsWith(',') && !after.startsWith(' ')) {
+                tailSuffix = ', ';
+            }
+
+            const newText = before + leadingSpace + wildcardSyntax + tailSuffix + after;
+            textarea.value = newText;
+
+            // Move cursor after inserted wildcard + suffix
+            const newCursorPos = replaceStart + leadingSpace.length + wildcardSyntax.length + tailSuffix.length;
+            textarea.setSelectionRange(newCursorPos, newCursorPos);
+
+            // Trigger input event to sync with Gradio
+            textarea.dispatchEvent(new Event('input', { bubbles: true }));
+        },
+
         // Insert tag into textarea
         // Handles NAI weight syntax preservation
         insertTag(tag) {
@@ -1294,6 +1417,816 @@ LOCALSTORAGE_JS = """
     // Start initialization after page is more likely to be ready
     setTimeout(() => initAutocompleteWithRetry(1), 2000);
 
+    // ========== Wildcard Module ==========
+
+    const NAIAWildcard = {
+        STORAGE_KEY: 'naia_wildcards',
+        TEMPLATE_KEY: 'naia_wildcard_template',
+        MAX_DEPTH: 10,
+
+        // In-memory cache
+        categories: {},
+
+        // Initialize from LocalStorage
+        load() {
+            try {
+                const saved = localStorage.getItem(this.STORAGE_KEY);
+                this.categories = saved ? JSON.parse(saved) : {};
+                // Ensure 'default' category exists
+                if (!this.categories['default']) {
+                    this.categories['default'] = {};
+                }
+                // Migrate old 'uncategorized' to 'default'
+                if (this.categories['uncategorized']) {
+                    Object.assign(this.categories['default'], this.categories['uncategorized']);
+                    delete this.categories['uncategorized'];
+                    this.save();
+                }
+            } catch(e) {
+                console.error('NAIA-WEB: Error loading wildcards:', e);
+                this.categories = { 'default': {} };
+            }
+        },
+
+        // Save to LocalStorage
+        save() {
+            try {
+                localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.categories));
+            } catch(e) {
+                console.error('NAIA-WEB: Error saving wildcards:', e);
+            }
+        },
+
+        // Get template from LocalStorage
+        getTemplate() {
+            try {
+                return localStorage.getItem(this.TEMPLATE_KEY) || '';
+            } catch(e) {
+                return '';
+            }
+        },
+
+        // Save template to LocalStorage
+        saveTemplate(template) {
+            try {
+                localStorage.setItem(this.TEMPLATE_KEY, template);
+            } catch(e) {
+                console.error('NAIA-WEB: Error saving template:', e);
+            }
+        },
+
+        // Get random item from array
+        _randomChoice(arr) {
+            return arr[Math.floor(Math.random() * arr.length)];
+        },
+
+        // Resolve wildcard reference (e.g., "poses/standing" or "colors")
+        _resolveWildcard(ref) {
+            const parts = ref.split('/');
+            let category, filename;
+
+            if (parts.length === 1) {
+                // __colors__ → default/colors.txt
+                category = 'default';
+                filename = parts[0] + '.txt';
+            } else {
+                // __poses/standing__ → poses/standing.txt
+                category = parts.slice(0, -1).join('/');
+                filename = parts[parts.length - 1] + '.txt';
+            }
+
+            const items = this.categories[category]?.[filename];
+            return items && items.length > 0 ? this._randomChoice(items) : null;
+        },
+
+        // Expand __wildcard__ references (recursive)
+        // Note: ||opt1|opt2|| (NAI Prompt Randomizer) is NOT processed here
+        //       It's passed through to NAI API which handles it natively
+        _expandReferences(text, depth = 0) {
+            if (depth >= this.MAX_DEPTH) {
+                console.warn('[NAIAWildcard] Max recursion depth reached');
+                return text;
+            }
+
+            // Match __name__ or __category/name__ pattern
+            // Pattern explanation:
+            //   __ = start marker
+            //   (.+?) = capture group: any character (non-greedy), including Unicode (한글, 日本語, etc.)
+            //   __ = end marker
+            // Non-greedy ensures we match the shortest possible string between __ and __
+            const pattern = /__(.+?)__/g;
+
+            let result = text;
+            let hasMatch = false;
+
+            // Process all wildcards in the text
+            result = text.replace(pattern, (match, ref) => {
+                // Skip if ref contains spaces (not a valid wildcard name)
+                if (ref.includes(' ')) return match;
+
+                const resolved = this._resolveWildcard(ref.trim());
+                if (resolved !== null) {
+                    hasMatch = true;
+                    return resolved;
+                }
+                return match; // Keep original if not found
+            });
+
+            // If any wildcards were resolved, recursively process the result
+            // This handles nested wildcards (wildcard content containing more wildcards)
+            if (hasMatch && /__(.+?)__/.test(result)) {
+                return this._expandReferences(result, depth + 1);
+            }
+
+            return result;
+        },
+
+        // Main entry point: expand all wildcards in prompt
+        // Only expands __wildcard__ syntax
+        // NAI Prompt Randomizer ||..|| is left untouched for API processing
+        expand(prompt) {
+            if (!prompt) return prompt;
+            return this._expandReferences(prompt);
+        },
+
+        // ========== Category Management ==========
+
+        addCategory(name) {
+            if (!name || name === 'default') return false;
+            name = name.trim().toLowerCase().replace(/[^a-z0-9_-]/g, '_');
+            if (!this.categories[name]) {
+                this.categories[name] = {};
+                this.save();
+                return true;
+            }
+            return false;
+        },
+
+        removeCategory(name) {
+            if (name === 'default' || !this.categories[name]) return false;
+            delete this.categories[name];
+            this.save();
+            return true;
+        },
+
+        renameCategory(oldName, newName) {
+            if (oldName === 'default' || !this.categories[oldName]) return false;
+            newName = newName.trim().toLowerCase().replace(/[^a-z0-9_-]/g, '_');
+            if (this.categories[newName]) return false;
+
+            this.categories[newName] = this.categories[oldName];
+            delete this.categories[oldName];
+            this.save();
+            return true;
+        },
+
+        // ========== File Management ==========
+
+        addFile(category, filename, lines) {
+            if (!this.categories[category]) {
+                this.categories[category] = {};
+            }
+            // Ensure .txt extension
+            if (!filename.endsWith('.txt')) {
+                filename = filename + '.txt';
+            }
+            this.categories[category][filename] = lines;
+            this.save();
+        },
+
+        removeFile(category, filename) {
+            if (this.categories[category]?.[filename]) {
+                delete this.categories[category][filename];
+                this.save();
+                return true;
+            }
+            return false;
+        },
+
+        updateFile(category, filename, lines) {
+            if (this.categories[category]?.[filename] !== undefined) {
+                this.categories[category][filename] = lines;
+                this.save();
+                return true;
+            }
+            return false;
+        },
+
+        getFile(category, filename) {
+            return this.categories[category]?.[filename] || null;
+        },
+
+        // ========== Import/Export ==========
+
+        // Parse text file content (one item per line)
+        parseFileContent(content) {
+            return content.split('\\\\n')
+                .map(line => line.trim())
+                .filter(line => line && !line.startsWith('#'));
+        },
+
+        // Export file as text
+        exportFileAsText(category, filename) {
+            const items = this.getFile(category, filename);
+            return items ? items.join('\\\\n') : '';
+        },
+
+        // Get all data for export
+        exportAll() {
+            return JSON.stringify(this.categories, null, 2);
+        },
+
+        // Import all data (merge with existing, replacing duplicates)
+        // Export format: { "category": { "file.txt": ["item1", "item2"] } }
+        importAll(jsonString) {
+            try {
+                const data = JSON.parse(jsonString);
+                // Merge imported data with existing
+                for (const [cat, files] of Object.entries(data)) {
+                    if (!this.categories[cat]) {
+                        this.categories[cat] = {};
+                    }
+                    Object.assign(this.categories[cat], files);
+                }
+                // Ensure 'default' exists
+                if (!this.categories['default']) {
+                    this.categories['default'] = {};
+                }
+                this.save();
+                return true;
+            } catch(e) {
+                console.error('NAIA-WEB: Error importing wildcards:', e);
+                return false;
+            }
+        },
+
+        // ========== Statistics ==========
+
+        getStats() {
+            let totalFiles = 0;
+            let totalItems = 0;
+
+            for (const cat of Object.values(this.categories)) {
+                for (const items of Object.values(cat)) {
+                    totalFiles++;
+                    totalItems += items.length;
+                }
+            }
+
+            const storageSize = new Blob([JSON.stringify(this.categories)]).size;
+            const formattedSize = storageSize > 1024
+                ? (storageSize / 1024).toFixed(1) + ' KB'
+                : storageSize + ' B';
+
+            return { totalFiles, totalItems, storageSize, formattedSize };
+        },
+
+        // Get categories list for UI (default always first)
+        getCategoryList() {
+            return Object.keys(this.categories).sort((a, b) => {
+                if (a === 'default') return -1;
+                if (b === 'default') return 1;
+                return a.localeCompare(b);
+            });
+        },
+
+        // Get file count in category
+        getFileCount(category) {
+            return this.categories[category] ? Object.keys(this.categories[category]).length : 0;
+        },
+
+        // Get total item count in category
+        getItemCount(category) {
+            if (!this.categories[category]) return 0;
+            return Object.values(this.categories[category]).reduce((sum, items) => sum + items.length, 0);
+        },
+
+        // Get files in category for UI
+        getFilesInCategory(category) {
+            if (!this.categories[category]) return [];
+            return Object.entries(this.categories[category])
+                .map(([filename, items]) => ({
+                    filename,
+                    itemCount: items.length
+                }))
+                .sort((a, b) => a.filename.localeCompare(b.filename));
+        },
+
+        // Check if wildcard mode is enabled
+        isWildcardMode() {
+            try {
+                const saved = localStorage.getItem(SETTINGS_KEY);
+                if (saved) {
+                    const settings = JSON.parse(saved);
+                    return settings.wildcard_mode === true;
+                }
+            } catch(e) {}
+            return false;
+        }
+    };
+
+    // Initialize wildcards on load
+    NAIAWildcard.load();
+
+    // Expose globally
+    window.NAIAWildcard = NAIAWildcard;
+
+    // ========== Wildcard Manager UI ==========
+
+    const WildcardManagerUI = {
+        selectedCategory: 'default',
+        selectedFile: null,
+
+        // Initialize UI event handlers
+        init() {
+            this.bindEvents();
+            this.render();
+        },
+
+        bindEvents() {
+            // Add Category button
+            const addCatBtn = document.getElementById('naia-wc-add-category');
+            if (addCatBtn) {
+                addCatBtn.addEventListener('click', () => this.promptAddCategory());
+            }
+
+            // Export All button
+            const exportBtn = document.getElementById('naia-wc-export-all');
+            if (exportBtn) {
+                exportBtn.addEventListener('click', () => this.exportAll());
+            }
+
+            // Category list click delegation
+            const catContainer = document.getElementById('naia-wc-categories');
+            if (catContainer) {
+                catContainer.addEventListener('click', (e) => {
+                    const item = e.target.closest('.wc-category-item');
+                    if (item) {
+                        const deleteBtn = e.target.closest('.wc-cat-delete');
+                        if (deleteBtn) {
+                            this.deleteCategory(item.dataset.category);
+                        } else {
+                            this.selectCategory(item.dataset.category);
+                        }
+                    }
+                });
+            }
+
+            // File list click delegation
+            const fileContainer = document.getElementById('naia-wc-files');
+            if (fileContainer) {
+                fileContainer.addEventListener('click', (e) => {
+                    const item = e.target.closest('.wc-file-item');
+                    if (item) {
+                        const deleteBtn = e.target.closest('.wc-file-delete');
+                        if (deleteBtn) {
+                            this.deleteFile(item.dataset.filename);
+                        } else {
+                            this.selectFile(item.dataset.filename);
+                        }
+                    }
+                });
+            }
+
+            // Editor buttons - find actual button element inside Gradio container
+            const findButton = (containerId) => {
+                const container = document.getElementById(containerId);
+                return container ? (container.querySelector('button') || container) : null;
+            };
+
+            const newFileBtn = findButton('naia-wc-new-file');
+            if (newFileBtn) {
+                newFileBtn.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.newFile();
+                });
+            }
+
+            const editSelectedBtn = findButton('naia-wc-edit-selected');
+            if (editSelectedBtn) {
+                editSelectedBtn.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.editSelected();
+                });
+            }
+
+            const saveEditBtn = findButton('naia-wc-save-edit');
+            if (saveEditBtn) {
+                saveEditBtn.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    console.log('[WildcardManagerUI] Save button clicked');
+                    this.saveFile();
+                });
+            }
+
+            const deleteFileBtn = findButton('naia-wc-delete-file');
+            if (deleteFileBtn) {
+                deleteFileBtn.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.deleteCurrentFile();
+                });
+            }
+
+            const downloadFileBtn = findButton('naia-wc-download-file');
+            if (downloadFileBtn) {
+                downloadFileBtn.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.downloadCurrentFile();
+                });
+            }
+
+            console.log('[WildcardManagerUI] Editor buttons bound:', {
+                newFile: !!newFileBtn,
+                editSelected: !!editSelectedBtn,
+                save: !!saveEditBtn,
+                delete: !!deleteFileBtn,
+                download: !!downloadFileBtn
+            });
+        },
+
+        // Prompt user to add a new category
+        promptAddCategory() {
+            const name = prompt('Enter new category name:');
+            if (name && name.trim()) {
+                const cleanName = name.trim().toLowerCase().replace(/[^a-z0-9_-]/g, '_');
+                if (cleanName === 'default') {
+                    alert('Cannot use "default" as category name.');
+                    return;
+                }
+                if (NAIAWildcard.addCategory(cleanName)) {
+                    this.render();
+                    this.selectCategory(cleanName);
+                } else {
+                    alert('Category already exists or invalid name.');
+                }
+            }
+        },
+
+        // Delete a category
+        deleteCategory(name) {
+            if (name === 'default') return;
+            if (confirm(`Delete category "${name}" and all its files?`)) {
+                NAIAWildcard.removeCategory(name);
+                if (this.selectedCategory === name) {
+                    this.selectedCategory = 'default';
+                }
+                this.render();
+            }
+        },
+
+        // Select a category
+        selectCategory(name) {
+            this.selectedCategory = name;
+            this.selectedFile = null;
+            this.render();
+        },
+
+        // Select a file to preview
+        selectFile(filename) {
+            this.selectedFile = filename;
+            this.renderFileList();
+            this.renderPreview();
+            this.renderUsageHint();
+        },
+
+        // Delete a file
+        deleteFile(filename) {
+            if (confirm(`Delete file "${filename}"?`)) {
+                NAIAWildcard.removeFile(this.selectedCategory, filename);
+                if (this.selectedFile === filename) {
+                    this.selectedFile = null;
+                }
+                this.render();
+            }
+        },
+
+        // Export all wildcards as JSON
+        exportAll() {
+            const data = NAIAWildcard.exportAll();
+            const blob = new Blob([data], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'naia_wildcards.json';
+            a.click();
+            URL.revokeObjectURL(url);
+        },
+
+        // Render all UI components
+        render() {
+            this.renderCategoryList();
+            this.renderFileList();
+            this.renderPreview();
+            this.renderUsageHint();
+            this.renderStats();
+        },
+
+        // Render category list
+        renderCategoryList() {
+            const container = document.getElementById('naia-wc-categories');
+            const totalSpan = document.getElementById('wc-cat-total');
+            if (!container) return;
+
+            const categories = NAIAWildcard.getCategoryList();
+            let html = '';
+
+            for (const cat of categories) {
+                const fileCount = NAIAWildcard.getFileCount(cat);
+                const isSelected = cat === this.selectedCategory;
+                const isDefault = cat === 'default';
+                html += `<div class="wc-category-item ${isSelected ? 'selected' : ''} ${isDefault ? 'default-cat' : ''}" data-category="${cat}">
+                    <span class="wc-cat-name">${cat}</span>
+                    <span class="wc-cat-count">(${fileCount})</span>
+                    ${!isDefault ? '<span class="wc-cat-delete" title="Delete">×</span>' : ''}
+                </div>`;
+            }
+
+            container.innerHTML = html;
+
+            // Update total count
+            if (totalSpan) {
+                totalSpan.textContent = `(${categories.length})`;
+            }
+
+            // Update current category label
+            const currentCatSpan = document.getElementById('wc-current-category');
+            if (currentCatSpan) {
+                currentCatSpan.textContent = this.selectedCategory;
+            }
+        },
+
+        // Render file list for selected category
+        renderFileList() {
+            const container = document.getElementById('naia-wc-files');
+            if (!container) return;
+
+            const files = NAIAWildcard.getFilesInCategory(this.selectedCategory);
+
+            if (files.length === 0) {
+                container.innerHTML = '<p class="wc-empty-msg">No files. Upload .txt files.</p>';
+                return;
+            }
+
+            let html = '';
+            for (const file of files) {
+                const isSelected = file.filename === this.selectedFile;
+                html += `<div class="wc-file-item ${isSelected ? 'selected' : ''}" data-filename="${file.filename}">
+                    <span class="wc-file-name">${file.filename}</span>
+                    <span class="wc-file-count">(${file.itemCount})</span>
+                    <span class="wc-file-delete" title="Delete">×</span>
+                </div>`;
+            }
+
+            container.innerHTML = html;
+        },
+
+        // Render preview of selected file
+        renderPreview() {
+            const container = document.getElementById('naia-wc-preview');
+            const filenameSpan = document.getElementById('wc-preview-filename');
+            if (!container) return;
+
+            if (filenameSpan) {
+                filenameSpan.textContent = this.selectedFile ? `- ${this.selectedFile}` : '';
+            }
+
+            if (!this.selectedFile) {
+                container.innerHTML = '<p class="wc-empty-msg">Click a file to preview.</p>';
+                return;
+            }
+
+            const items = NAIAWildcard.getFile(this.selectedCategory, this.selectedFile);
+            if (!items || items.length === 0) {
+                container.innerHTML = '<p class="wc-empty-msg">File is empty.</p>';
+                return;
+            }
+
+            // Show first 20 items as preview
+            const previewItems = items.slice(0, 20);
+            let html = previewItems.map(item => `<div class="wc-preview-item">${this.escapeHtml(item)}</div>`).join('');
+            if (items.length > 20) {
+                html += `<div class="wc-preview-item" style="color: var(--body-text-color-subdued);">... and ${items.length - 20} more</div>`;
+            }
+
+            container.innerHTML = html;
+        },
+
+        // Render usage hint (shows how to call selected wildcard)
+        renderUsageHint() {
+            const container = document.getElementById('naia-wc-usage-hint');
+            if (!container) return;
+
+            if (!this.selectedFile) {
+                container.innerHTML = 'Select a file to see usage';
+                return;
+            }
+
+            // Remove .txt extension for wildcard reference
+            const baseName = this.selectedFile.replace(/\\.txt$/i, '');
+
+            // Build wildcard syntax
+            let wildcardSyntax;
+            if (this.selectedCategory === 'default') {
+                // default category: __filename__
+                wildcardSyntax = `__${baseName}__`;
+            } else {
+                // other categories: __category/filename__
+                wildcardSyntax = `__${this.selectedCategory}/${baseName}__`;
+            }
+
+            container.innerHTML = `Usage: <b>${wildcardSyntax}</b>`;
+        },
+
+        // Render statistics
+        renderStats() {
+            const container = document.querySelector('.wc-stats');
+            if (!container) return;
+
+            const stats = NAIAWildcard.getStats();
+            container.innerHTML = `Total: ${stats.totalFiles} files, ${stats.totalItems} items | Storage: ${stats.formattedSize}`;
+        },
+
+        // Escape HTML for safe display
+        escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        },
+
+        // Handle file upload (called from Gradio)
+        handleFileUpload(files, category) {
+            if (!files || files.length === 0) return;
+
+            for (const file of files) {
+                const filename = file.name || 'uploaded.txt';
+                // File content will be passed as text
+                if (typeof file === 'string') {
+                    const lines = file.split('\\n').map(l => l.trim()).filter(l => l && !l.startsWith('#'));
+                    NAIAWildcard.addFile(category, filename, lines);
+                }
+            }
+            this.render();
+        },
+
+        // Handle JSON import (called from Gradio)
+        handleImport(jsonContent) {
+            if (NAIAWildcard.importAll(jsonContent)) {
+                this.render();
+                alert('Import successful!');
+            } else {
+                alert('Import failed. Invalid JSON format.');
+            }
+        },
+
+        // ========== Editor Functions ==========
+
+        // Get editor elements (try both input and textarea for compatibility)
+        getEditorElements() {
+            const filenameContainer = document.querySelector('#naia-wc-edit-filename');
+            const textareaContainer = document.querySelector('#naia-wc-edit-textarea');
+            return {
+                filename: filenameContainer ? (filenameContainer.querySelector('input') || filenameContainer.querySelector('textarea')) : null,
+                textarea: textareaContainer ? textareaContainer.querySelector('textarea') : null
+            };
+        },
+
+        // Helper to set value and trigger Gradio sync
+        setInputValue(element, value) {
+            if (!element) return;
+            element.value = value;
+            // Dispatch input event to sync with Gradio state
+            element.dispatchEvent(new Event('input', { bubbles: true }));
+        },
+
+        // New file - clear editor for new file creation
+        newFile() {
+            const { filename, textarea } = this.getEditorElements();
+            this.setInputValue(filename, '');
+            this.setInputValue(textarea, '');
+            this.selectedFile = null;
+            this.renderFileList();
+            this.renderUsageHint();
+            // Focus on filename input
+            if (filename) filename.focus();
+        },
+
+        // Edit selected file - load into editor
+        editSelected() {
+            if (!this.selectedFile) {
+                alert('Please select a file first.');
+                return;
+            }
+            const { filename, textarea } = this.getEditorElements();
+            const items = NAIAWildcard.getFile(this.selectedCategory, this.selectedFile);
+
+            this.setInputValue(filename, this.selectedFile);
+            const content = items ? items.join('\\n') : '';
+            this.setInputValue(textarea, content);
+
+            // Fix scroll issue: focus and scroll to top after content is set
+            if (textarea) {
+                setTimeout(() => {
+                    textarea.focus();
+                    textarea.setSelectionRange(0, 0);
+                    textarea.scrollTop = 0;
+                }, 50);
+            }
+        },
+
+        // Save file from editor
+        saveFile() {
+            const { filename, textarea } = this.getEditorElements();
+            if (!filename || !textarea) {
+                console.error('[WildcardManagerUI] saveFile: Editor elements not found', { filename, textarea });
+                return;
+            }
+
+            let fname = filename.value.trim();
+            console.log('[WildcardManagerUI] saveFile: filename =', fname, 'category =', this.selectedCategory);
+
+            if (!fname) {
+                alert('Please enter a filename.');
+                filename.focus();
+                return;
+            }
+
+            // Ensure .txt extension
+            if (!fname.endsWith('.txt')) {
+                fname = fname + '.txt';
+            }
+
+            // Parse content - keep non-empty lines (comments allowed, just trim)
+            const content = textarea.value || '';
+            const lines = content.split('\\n')
+                .map(l => l.trim())
+                .filter(l => l.length > 0);  // Keep comments too for storage
+
+            console.log('[WildcardManagerUI] saveFile: saving', lines.length, 'lines to', this.selectedCategory + '/' + fname);
+
+            // Save to storage
+            NAIAWildcard.addFile(this.selectedCategory, fname, lines);
+
+            // Update UI
+            this.selectedFile = fname;
+            this.render();
+
+            // Update filename input with normalized name
+            this.setInputValue(filename, fname);
+
+            console.log('[WildcardManagerUI] saveFile: done');
+        },
+
+        // Delete current file (from editor)
+        deleteCurrentFile() {
+            const { filename } = this.getEditorElements();
+            const fname = filename ? filename.value.trim() : '';
+
+            if (!fname) {
+                alert('No file to delete.');
+                return;
+            }
+
+            if (confirm(`Delete file "${fname}"?`)) {
+                NAIAWildcard.removeFile(this.selectedCategory, fname);
+                this.newFile(); // Clear editor
+                this.render();
+            }
+        },
+
+        // Download current file
+        downloadCurrentFile() {
+            const { filename, textarea } = this.getEditorElements();
+            if (!filename || !textarea) return;
+
+            let fname = filename.value.trim();
+            if (!fname) {
+                alert('Please enter a filename first.');
+                return;
+            }
+
+            if (!fname.endsWith('.txt')) {
+                fname = fname + '.txt';
+            }
+
+            const content = textarea.value || '';
+            const blob = new Blob([content], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = fname;
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+    };
+
+    // Expose for Gradio callbacks
+    window.WildcardManagerUI = WildcardManagerUI;
+
     // ========== Output Image UI Customization ==========
 
     // Move download button into image container for overlay positioning
@@ -1313,11 +2246,23 @@ LOCALSTORAGE_JS = """
         }
     }
 
+    // Initialize Wildcard Manager UI
+    function setupWildcardManagerUI() {
+        const container = document.getElementById('naia-wc-categories');
+        if (container) {
+            WildcardManagerUI.init();
+        } else {
+            // Retry if Wildcard accordion not yet rendered
+            setTimeout(setupWildcardManagerUI, 500);
+        }
+    }
+
     // Initialize on page load - only load token
     // Settings and Get Random Prompt are handled by app.load in Python
     function startInit() {
         loadToken();
         setupOutputImageUI();
+        setupWildcardManagerUI();
     }
 
     // Handle various load states

ui/components/wildcard_panel.py

@@ -0,0 +1,536 @@
+"""
+NAIA-WEB Wildcard Panel Component
+Wildcard Manager UI for LocalStorage-based wildcard system
+"""
+
+import gradio as gr
+
+
+def create_wildcard_panel():
+    """
+    Create wildcard manager panel with category/file management.
+
+    Layout: 4-column grid
+    - Column 1 (1/4): Category list with selection
+    - Column 2-4 (3/4): File list for selected category
+
+    All data is stored in browser LocalStorage via JavaScript.
+    This Python component only provides the UI structure.
+
+    Returns:
+        Dict with UI components for event binding
+    """
+    # Action buttons row
+    with gr.Row():
+        add_category_btn = gr.Button(
+            "Add Category",
+            size="sm",
+            elem_id="naia-wc-add-category"
+        )
+        upload_file_btn = gr.UploadButton(
+            "Upload .txt",
+            file_count="multiple",
+            file_types=[".txt"],
+            size="sm",
+            elem_id="naia-wc-upload-file"
+        )
+        export_all_btn = gr.Button(
+            "Export All (.json)",
+            size="sm",
+            elem_id="naia-wc-export-all"
+        )
+        import_all_btn = gr.UploadButton(
+            "Import (.json)",
+            file_count="single",
+            file_types=[".json"],
+            size="sm",
+            elem_id="naia-wc-import-all"
+        )
+
+    # Main content area: 3-column layout (Categories | Files | Preview)
+    with gr.Row(elem_classes=["wc-main-row"]):
+        # Column 1: Category selector
+        with gr.Column(scale=1, min_width=100, elem_classes=["wc-category-col"]):
+            gr.HTML('<div class="wc-section-label">Categories <span id="wc-cat-total">(0)</span></div>')
+            category_list = gr.HTML(
+                value='<div id="naia-wc-categories" class="wc-category-list"><div class="wc-category-item selected default-cat" data-category="default"><span class="wc-cat-name">default</span><span class="wc-cat-count">(0)</span></div></div>',
+                elem_id="naia-wc-category-container"
+            )
+
+        # Column 2: File list for selected category
+        with gr.Column(scale=2, min_width=140, elem_classes=["wc-files-col"]):
+            gr.HTML('<div class="wc-section-label">Files in <span id="wc-current-category">default</span></div>')
+            file_list = gr.HTML(
+                value='<div id="naia-wc-files" class="wc-file-list"><p class="wc-empty-msg">No files. Upload .txt files.</p></div>',
+                elem_id="naia-wc-file-container"
+            )
+
+        # Column 3: Preview of selected file content
+        with gr.Column(scale=2, min_width=140, elem_classes=["wc-preview-col"]):
+            gr.HTML('<div class="wc-section-label">Preview <span id="wc-preview-filename"></span></div>')
+            preview_panel = gr.HTML(
+                value='<div id="naia-wc-preview" class="wc-preview-list"><p class="wc-empty-msg">Click a file to preview.</p></div>',
+                elem_id="naia-wc-preview-container"
+            )
+
+    # Bottom section: Usage hint + Editor
+    with gr.Row(elem_classes=["wc-bottom-row"]):
+        # Left: Usage hint
+        usage_hint = gr.HTML(
+            value='<div id="naia-wc-usage-hint" class="wc-usage-hint">Select a file to see usage</div>',
+            elem_id="naia-wc-usage-container"
+        )
+        # Right: Stats
+        stats_display = gr.HTML(
+            value='<div class="wc-stats">Total: 0 files, 0 items | Storage: 0 B</div>',
+            elem_id="naia-wc-stats"
+        )
+
+    # Editor panel (always visible)
+    with gr.Column(elem_id="naia-wc-edit-panel", elem_classes=["wc-edit-panel"]):
+        with gr.Row(elem_classes=["wc-edit-header-row"]):
+            gr.HTML('<span class="wc-edit-label">Editor</span>')
+            edit_filename = gr.Textbox(
+                value="",
+                placeholder="filename.txt",
+                show_label=False,
+                container=False,
+                elem_id="naia-wc-edit-filename",
+                elem_classes=["wc-edit-filename-input"],
+                scale=2
+            )
+            new_file_btn = gr.Button(
+                "New File",
+                size="sm",
+                elem_id="naia-wc-new-file"
+            )
+            edit_file_btn = gr.Button(
+                "Edit Selected",
+                size="sm",
+                elem_id="naia-wc-edit-selected"
+            )
+        edit_textarea = gr.Textbox(
+            label="",
+            placeholder="One item per line (lines starting with # are comments)",
+            lines=6,
+            max_lines=10,
+            elem_id="naia-wc-edit-textarea",
+            show_label=False,
+            interactive=True
+        )
+        with gr.Row():
+            save_edit_btn = gr.Button(
+                "💾 Save",
+                size="sm",
+                variant="primary",
+                elem_id="naia-wc-save-edit"
+            )
+            delete_file_btn = gr.Button(
+                "🗑️ Delete",
+                size="sm",
+                elem_id="naia-wc-delete-file"
+            )
+            download_file_btn = gr.Button(
+                "⬇️ Download",
+                size="sm",
+                elem_id="naia-wc-download-file"
+            )
+
+    # Hidden inputs
+    wc_action = gr.Textbox(
+        visible=True,
+        elem_id="naia-wc-action",
+        elem_classes=["hidden-component"]
+    )
+    selected_category = gr.Textbox(
+        value="default",
+        visible=True,
+        elem_id="naia-wc-selected-category",
+        elem_classes=["hidden-component"]
+    )
+
+    # Hidden file data holder for downloads
+    download_data = gr.Textbox(
+        visible=True,
+        elem_id="naia-wc-download-data",
+        elem_classes=["hidden-component"]
+    )
+
+    return {
+        "add_category_btn": add_category_btn,
+        "upload_file_btn": upload_file_btn,
+        "export_all_btn": export_all_btn,
+        "import_all_btn": import_all_btn,
+        "category_list": category_list,
+        "file_list": file_list,
+        "preview_panel": preview_panel,
+        "wc_action": wc_action,
+        "selected_category": selected_category,
+        "edit_textarea": edit_textarea,
+        "save_edit_btn": save_edit_btn,
+        "new_file_btn": new_file_btn,
+        "edit_file_btn": edit_file_btn,
+        "download_file_btn": download_file_btn,
+        "delete_file_btn": delete_file_btn,
+        "stats_display": stats_display,
+        "download_data": download_data
+    }
+
+
+def create_wildcard_template_input():
+    """
+    Create Wildcard Template input that appears above Prompt section
+    when Wildcard Mode is enabled.
+
+    Returns:
+        Dict with template input component
+    """
+    with gr.Group(visible=False, elem_id="naia-wc-template-group") as template_group:
+        gr.HTML(
+            '<div class="wc-template-label"><b>Wildcard Template</b> <span>(replaces Quick Search random prompts)</span></div>',
+            elem_id="naia-wc-template-label"
+        )
+        template_input = gr.Textbox(
+            label="",
+            placeholder="Example: 1girl, __poses__, __category/file__, ||red|blue|green|| hair",
+            lines=3,
+            elem_id="naia-wildcard-template",
+            show_label=False,
+            interactive=True
+        )
+        gr.HTML(
+            '<div class="wildcard-hint">&nbsp;&nbsp;<code>__wildcard__</code> = LocalStorage random selection, &nbsp;<code>||a|b|c||</code> = NAI Prompt Randomizer</div>'
+        )
+
+    return {
+        "template_group": template_group,
+        "template_input": template_input
+    }
+
+
+# CSS for Wildcard Panel
+WILDCARD_CSS = """
+/* ========== Wildcard Manager Layout ========== */
+
+/* Main row: category + files + preview - equal height columns */
+.wc-main-row {
+    min-height: 160px;
+    gap: 6px !important;
+    align-items: stretch !important;
+}
+
+.wc-main-row > div {
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+.wc-main-row .wc-category-list,
+.wc-main-row .wc-file-list,
+.wc-main-row .wc-preview-list {
+    flex: 1 !important;
+    min-height: 120px !important;
+}
+
+/* Section labels */
+.wc-section-label {
+    font-weight: 600;
+    font-size: 0.85em;
+    padding: 4px 8px;
+    background: var(--background-fill-secondary);
+    border-radius: 4px 4px 0 0;
+    border: 1px solid var(--border-color-primary);
+    border-bottom: none;
+}
+
+.wc-section-label span {
+    font-weight: normal;
+    color: var(--body-text-color-subdued);
+}
+
+/* Category column */
+.wc-category-col {
+    min-width: 100px !important;
+    max-width: 140px !important;
+}
+
+/* Category list container */
+.wc-category-list {
+    max-height: 160px;
+    overflow-y: auto;
+    border: 1px solid var(--border-color-primary);
+    border-radius: 0 0 4px 4px;
+    background: var(--background-fill-primary);
+}
+
+/* Category item */
+.wc-category-item {
+    padding: 5px 8px;
+    cursor: pointer;
+    border-bottom: 1px solid var(--border-color-primary);
+    font-size: 0.85em;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 4px;
+}
+
+.wc-category-item:last-child {
+    border-bottom: none;
+}
+
+.wc-category-item:hover {
+    background: var(--background-fill-secondary);
+}
+
+.wc-category-item.selected {
+    background: var(--color-accent-soft);
+    font-weight: 600;
+}
+
+.wc-category-item .wc-cat-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.wc-category-item .wc-cat-count {
+    font-size: 0.85em;
+    color: var(--body-text-color-subdued);
+    flex-shrink: 0;
+}
+
+.wc-category-item .wc-cat-delete {
+    display: none;
+    color: #e53935;
+    cursor: pointer;
+    padding: 0 2px;
+    font-size: 1em;
+    flex-shrink: 0;
+}
+
+.wc-category-item:hover .wc-cat-delete {
+    display: inline;
+}
+
+.wc-category-item.default-cat .wc-cat-delete {
+    display: none !important;
+}
+
+/* Files column */
+.wc-files-col {
+    min-width: 120px !important;
+}
+
+/* File list container */
+.wc-file-list {
+    max-height: 160px;
+    overflow-y: auto;
+    border: 1px solid var(--border-color-primary);
+    border-radius: 0 0 4px 4px;
+    background: var(--background-fill-primary);
+    padding: 3px;
+}
+
+.wc-empty-msg {
+    color: var(--body-text-color-subdued);
+    text-align: center;
+    padding: 15px 8px;
+    font-style: italic;
+    font-size: 0.85em;
+}
+
+/* File item */
+.wc-file-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 8px;
+    margin: 2px 0;
+    border-radius: 3px;
+    background: var(--background-fill-secondary);
+    cursor: pointer;
+    font-size: 0.85em;
+}
+
+.wc-file-item:hover {
+    background: var(--color-accent-soft);
+}
+
+.wc-file-item.selected {
+    background: var(--color-accent-soft);
+    font-weight: 600;
+}
+
+.wc-file-name {
+    flex: 1;
+    font-family: monospace;
+    font-size: 0.9em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.wc-file-count {
+    color: var(--body-text-color-subdued);
+    font-size: 0.85em;
+    flex-shrink: 0;
+    margin-left: 4px;
+}
+
+.wc-file-delete {
+    display: none;
+    color: #e53935;
+    cursor: pointer;
+    padding: 0 2px;
+    font-size: 1em;
+    flex-shrink: 0;
+    margin-left: 4px;
+}
+
+.wc-file-item:hover .wc-file-delete {
+    display: inline;
+}
+
+/* Preview column */
+.wc-preview-col {
+    min-width: 120px !important;
+}
+
+.wc-preview-list {
+    max-height: 160px;
+    overflow-y: auto;
+    border: 1px solid var(--border-color-primary);
+    border-radius: 0 0 4px 4px;
+    background: var(--background-fill-primary);
+    padding: 6px 8px;
+    font-size: 0.85em;
+    line-height: 1.5;
+}
+
+.wc-preview-list .wc-preview-item {
+    padding: 2px 0;
+    border-bottom: 1px dashed var(--border-color-primary);
+}
+
+.wc-preview-list .wc-preview-item:last-child {
+    border-bottom: none;
+}
+
+/* Bottom row: usage + stats */
+.wc-bottom-row {
+    margin-top: 4px;
+    align-items: center;
+}
+
+/* Usage Hint */
+.wc-usage-hint {
+    font-size: 0.9em;
+    color: var(--body-text-color-subdued);
+    padding: 4px 8px;
+    min-height: 24px;
+    flex: 1;
+}
+
+.wc-usage-hint b {
+    color: var(--body-text-color);
+    font-family: monospace;
+    background: var(--background-fill-secondary);
+    padding: 2px 6px;
+    border-radius: 3px;
+}
+
+/* Stats Display */
+.wc-stats {
+    text-align: right;
+    font-size: 0.8em;
+    color: var(--body-text-color-subdued);
+    padding: 4px 8px;
+}
+
+/* Edit Panel */
+.wc-edit-panel {
+    border: 1px solid var(--border-color-primary);
+    border-radius: 6px;
+    padding: 8px 10px;
+    margin-top: 8px;
+    background: var(--background-fill-secondary);
+}
+
+.wc-edit-header-row {
+    align-items: center;
+    gap: 8px !important;
+    margin-bottom: 6px;
+}
+
+.wc-edit-label {
+    font-weight: 600;
+    font-size: 0.9em;
+    padding-right: 8px;
+}
+
+.wc-edit-filename-input {
+    max-width: 200px !important;
+}
+
+.wc-edit-filename-input input {
+    font-family: monospace;
+    font-size: 0.9em;
+    padding: 4px 8px !important;
+}
+
+#naia-wc-edit-textarea textarea {
+    font-family: monospace;
+    font-size: 0.85em;
+    line-height: 1.4;
+}
+
+/* ========== Wildcard Template ========== */
+
+#naia-wc-template-group {
+    margin-bottom: 12px;
+    padding: 10px 12px;
+    border: 1px solid var(--border-color-primary);
+    border-radius: 8px;
+    background: var(--background-fill-primary);
+}
+
+.wc-template-label {
+    padding-left: 8px;
+    margin-bottom: 8px;
+    font-size: 0.95em;
+}
+
+.wc-template-label span {
+    color: var(--body-text-color-subdued);
+    font-weight: normal;
+}
+
+/* Template textarea - vertical center alignment */
+#naia-wildcard-template textarea {
+    padding-left: 16px !important;
+    line-height: 1.6 !important;
+}
+
+#naia-wildcard-template textarea::placeholder {
+    padding-left: 0 !important;
+}
+
+/* Hint text styling */
+.wildcard-hint {
+    font-size: 0.85em;
+    color: var(--body-text-color-subdued);
+    margin-top: 6px;
+    padding: 4px 0;
+    display: flex;
+    align-items: center;
+    min-height: 24px;
+}
+
+.wildcard-hint code {
+    background: var(--background-fill-secondary);
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 0.9em;
+}
+"""