<div class="modal-backdrop ai-tools-modal" data-ai-tools-modal aria-hidden="true">
  <section class="modal ai-tools-dialog" role="dialog" aria-modal="true" aria-labelledby="ai-tools-title">
    <header class="modal-header">
      <div>
        <h2 id="ai-tools-title">Lumi AI Tools</h2>
        <p>AI-specific tool plugins from the configured Lumi repository.</p>
      </div>
      <button class="icon-button" type="button" data-ai-tools-close aria-label="Close Tools">&times;</button>
    </header>
    <div class="ai-tools-source" data-ai-tools-source>Checking configured repository...</div>
    <details class="ai-tool-diagnostics" data-ai-tool-diagnostics>
      <summary>Prompt exposure diagnostics</summary>
      <div class="ai-tool-diagnostic-controls">
        <label>Role
          <select data-ai-tool-diagnostic-role>
            <option value="admin">Admin</option>
            <option value="mod">Moderator</option>
            <option value="user">User</option>
          </select>
        </label>
        <label>Origin
          <select data-ai-tool-diagnostic-origin>
            <option value="webui">WebUI</option>
            <option value="discord">Discord</option>
            <option value="twitch">Twitch</option>
            <option value="youtube">YouTube</option>
            <option value="kick">Kick</option>
            <option value="other">Other</option>
          </select>
        </label>
        <button class="button subtle" type="button" data-ai-tool-diagnostic-refresh>Refresh diagnostics</button>
      </div>
      <div class="ai-tool-diagnostic-results" data-ai-tool-diagnostic-results>Open diagnostics to inspect registry exposure.</div>
      <details>
        <summary>Current ALLOWED TOOLS prompt preview</summary>
        <pre data-ai-tool-prompt-preview>(not loaded)</pre>
      </details>
    </details>
    <div class="ai-tools-list" data-ai-tools-list aria-live="polite">
      <div class="callout">Loading AI tool plugins...</div>
    </div>
    <footer class="modal-actions">
      <button class="button subtle" type="button" data-ai-tools-refresh>Refresh remote versions</button>
      <button class="button" type="button" data-ai-tools-close>Close</button>
    </footer>
  </section>
</div>

<div class="modal-backdrop ai-tool-settings-modal" data-ai-tool-settings-modal aria-hidden="true">
  <section class="modal ai-tool-settings-dialog" role="dialog" aria-modal="true" aria-labelledby="ai-tool-settings-title">
    <header class="modal-header">
      <div>
        <h2 id="ai-tool-settings-title" data-ai-tool-settings-title>Tool settings</h2>
        <p>These settings apply to WebUI and platform-triggered tool calls.</p>
      </div>
      <button class="icon-button" type="button" data-ai-tool-settings-close aria-label="Close tool settings">&times;</button>
    </header>
    <form data-ai-tool-settings-form>
      <div data-ai-tool-settings-custom></div>
      <div class="ai-tool-settings-fields" data-ai-tool-settings-fields></div>
      <div class="modal-actions">
        <button class="button danger" type="button" data-ai-tool-settings-reset>Reset to defaults</button>
        <button class="button subtle" type="button" data-ai-tool-settings-close>Cancel</button>
        <button class="button" type="submit" data-ai-tool-settings-save>Save settings</button>
      </div>
    </form>
  </section>
</div>

<div class="modal-backdrop ai-tool-readme-modal" data-ai-tool-readme-modal aria-hidden="true">
  <section class="modal ai-tool-readme-dialog" role="dialog" aria-modal="true" aria-labelledby="ai-tool-readme-title">
    <header class="modal-header">
      <h2 id="ai-tool-readme-title" data-ai-tool-readme-title>Tool documentation</h2>
      <button class="icon-button" type="button" data-ai-tool-readme-close aria-label="Close tool documentation">&times;</button>
    </header>
    <div class="ai-tool-readme" data-ai-tool-readme></div>
    <footer class="modal-actions">
      <button class="button" type="button" data-ai-tool-readme-close>Close</button>
    </footer>
  </section>
</div>
