
html=r"""
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Rechat Debug</title>
        <style>
            body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0; display: flex; height: 100vh; }
            #sidebar { width: 260px; border-right: 1px solid #ddd; padding: 12px; box-sizing: border-box; }
            #content { flex: 1; padding: 12px; overflow: auto; box-sizing: border-box; }
            input[type=text] { width: 100%; padding: 6px 8px; box-sizing: border-box; margin-bottom: 8px; }
            pre { white-space: pre-wrap; word-wrap: break-word; }
            .match { background: #fff3bf; }
        </style>
        <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    </head>
    <body>
        <div id="sidebar">
            <h3 style="margin-top:0">Rechat Debug</h3>
            <input id="search" type="text" placeholder="Search..." />
            <div id="status" style="font-size: 12px; color: #555;"></div>
        </div>
        <div id="content"><em>Loading...</em></div>
        <script>
            async function loadMarkdown() {
                const res = await fetch('/debug.md', {cache: 'no-store'});
                if (!res.ok) {
                    document.getElementById('content').textContent = 'Failed to load markdown: ' + res.status;
                    return '';
                }
                const text = await res.text();
                return text;
            }

            function renderMarkdown(md, query) {
                let source = md;
                if (query) {
                    const esc = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                    const re = new RegExp(esc, 'gi');
                    source = md.replace(re, m => `==${m}==`);
                }
                let html = marked.parse(source);
                if (query) {
                    const esc = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                    const re = new RegExp('==(' + esc + ')==', 'gi');
                    html = html.replace(re, '<span class="match">$1</span>');
                }
                document.getElementById('content').innerHTML = html;
            }

            (async () => {
                const md = await loadMarkdown();
                const search = document.getElementById('search');
                const status = document.getElementById('status');
                status.textContent = 'Loaded ' + md.length + ' characters';
                renderMarkdown(md, '');

                search.addEventListener('input', () => {
                    const q = search.value.trim();
                    renderMarkdown(md, q);
                });
            })();
        </script>
    </body>
</html>
"""


def get_debug_html() -> str:
    return html