{% extends "base.html" %}

{% block title %}weaverun{% endblock %}

{% block head %}
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        
        body {
            font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
            background: #0a0a0f;
            color: #e4e4e7;
            min-height: 100vh;
            padding: 24px;
        }
        
        .header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid #27272a;
        }
        
        .header-actions {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .icon-btn {
            width: 30px;
            height: 30px;
            border-radius: 6px;
            border: 1px solid #27272a;
            background: #18181b;
            color: #e4e4e7;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: all 0.15s;
        }
        
        .icon-btn:hover {
            background: #1f1f23;
            color: #a78bfa;
        }
        
        .logo {
            font-size: 20px;
            font-weight: 600;
            background: linear-gradient(135deg, #06b6d4, #8b5cf6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .status {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: #71717a;
        }
        
        .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #22c55e;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .count {
            font-size: 13px;
            color: #71717a;
        }
        
        .logs {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .log-wrapper {
            animation: slideIn 0.2s ease-out;
        }
        
        .log {
            display: grid;
            grid-template-columns: 24px 70px 64px 110px 90px auto 1fr auto auto auto auto;
            gap: 14px;
            align-items: center;
            padding: 12px 16px;
            background: #18181b;
            border-radius: 8px;
            font-size: 13px;
            cursor: pointer;
            transition: background 0.15s;
        }
        
        .log:hover {
            background: #1f1f23;
        }
        
        .log-wrapper.expanded .log {
            border-radius: 8px 8px 0 0;
        }
        
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .expand-icon {
            color: #52525b;
            font-size: 10px;
            transition: transform 0.2s;
            user-select: none;
        }
        
        .log-wrapper.expanded .expand-icon {
            transform: rotate(90deg);
        }
        
        .time { color: #71717a; }
        
        .method {
            font-weight: 600;
            color: #22c55e;
            min-width: 52px;
        }
        
        .path {
            color: #e4e4e7;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .model {
            color: #8b5cf6;
            font-size: 12px;
        }
        
        .call-id {
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 11px;
            color: #cbd5e1;
            font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
            padding: 4px 8px;
            background: #0f172a;
            border: 1px solid #1f2937;
            border-radius: 6px;
            min-width: 88px;
        }
        
        .provider {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 3px;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.03em;
        }
        
        .provider-openai { background: #1a3a2a; color: #4ade80; }
        .provider-anthropic { background: #2d1f1f; color: #f59e0b; }
        .provider-gemini { background: #1e293b; color: #60a5fa; }
        .provider-bedrock { background: #1c1917; color: #fb923c; }
        .provider-azure_openai { background: #172554; color: #38bdf8; }
        .provider-wandb_inference { background: #1e1b4b; color: #a78bfa; }
        .provider-cohere { background: #1e1b2e; color: #c084fc; }
        .provider-mistral { background: #1f2937; color: #f472b6; }
        .provider-groq { background: #0f172a; color: #22d3ee; }
        .provider-together { background: #1a1a2e; color: #818cf8; }
        .provider-ollama { background: #18181b; color: #71717a; }
        .provider-custom { background: #27272a; color: #a1a1aa; }
        
        .status-code {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .status-2xx { background: #14532d; color: #4ade80; }
        .status-4xx { background: #713f12; color: #fbbf24; }
        .status-5xx { background: #7f1d1d; color: #f87171; }
        
        .latency {
            color: #71717a;
            font-size: 12px;
            text-align: right;
            min-width: 60px;
        }
        
        .trace-link {
            font-size: 12px;
            text-decoration: none;
            padding: 2px 8px;
            border-radius: 4px;
            background: #1e1b4b;
            color: #a78bfa;
            transition: background 0.15s;
        }
        
        .trace-link:hover {
            background: #312e81;
        }
        
        .trace-none {
            font-size: 12px;
            color: #52525b;
        }
        
        .trace-pending {
            font-size: 12px;
            display: inline-block;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .trace-debug {
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 4px;
            background: #422006;
            color: #fbbf24;
            border: 1px dashed #a16207;
        }
        
        .debug-badge {
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 4px;
            background: #422006;
            color: #fbbf24;
            border: 1px dashed #a16207;
            margin-left: 8px;
        }
        
        .log.debug-mode {
            border-left: 3px solid #fbbf24;
        }
        
        .stream-badge {
            font-size: 9px;
            padding: 1px 4px;
            border-radius: 3px;
            background: #312e81;
            color: #a78bfa;
            margin-left: 4px;
            vertical-align: middle;
        }
        
        .streaming-indicator {
            display: inline-block;
            width: 6px;
            height: 6px;
            background: #8b5cf6;
            border-radius: 50%;
            margin-left: 4px;
            animation: pulse 1s infinite;
        }
        
        .details {
            display: none;
            background: #111114;
            border-radius: 0 0 8px 8px;
            border-top: 1px solid #27272a;
            overflow: hidden;
        }
        
        .log-wrapper.expanded .details {
            display: block;
        }
        
        .details-panels {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1px;
            background: #27272a;
        }
        
        .panel {
            background: #111114;
            padding: 16px;
            max-height: 400px;
            overflow: auto;
        }
        
        .panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        
        .panel-title {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .panel-title.request {
            color: #06b6d4;
        }
        
        .panel-title.response {
            color: #22c55e;
        }
        
        .copy-btn {
            font-size: 11px;
            padding: 3px 8px;
            border: none;
            border-radius: 4px;
            background: #27272a;
            color: #a1a1aa;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .copy-btn:hover {
            background: #3f3f46;
            color: #e4e4e7;
        }
        
        .copy-btn.copied {
            background: #14532d;
            color: #4ade80;
        }
        
        .json-view {
            font-size: 12px;
            line-height: 1.5;
            white-space: pre-wrap;
            word-break: break-all;
            color: #a1a1aa;
        }
        
        .json-view .key { color: #06b6d4; }
        .json-view .string { color: #fbbf24; }
        .json-view .number { color: #a78bfa; }
        .json-view .boolean { color: #f472b6; }
        .json-view .null { color: #71717a; }
        
        /* Chat rendering */
        .chat-view {
            background: #111114;
            border: 1px solid #27272a;
            border-radius: 8px;
            padding: 12px 14px;
            margin-bottom: 1px;
        }
        
        .chat-title {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #a1a1aa;
            margin-bottom: 8px;
        }
        
        .chat-bubbles {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .chat-bubble {
            padding: 10px 12px;
            border-radius: 8px;
            line-height: 1.5;
            font-size: 13px;
            max-width: 100%;
            word-break: break-word;
        }
        
        .chat-bubble .role {
            display: block;
            font-size: 11px;
            margin-bottom: 4px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #a1a1aa;
        }
        
        .chat-bubble.user { background: #0f172a; border: 1px solid #1e293b; }
        .chat-bubble.system { background: #292524; border: 1px solid #44403c; }
        .chat-bubble.assistant { background: #111827; border: 1px solid #1f2937; }
        .chat-bubble.tool { background: #1e1b4b; border: 1px solid #312e81; }
        
        .chat-bubble.pending {
            border-style: dashed;
            color: #a78bfa;
        }
        
        .chat-streaming {
            font-size: 12px;
            color: #a78bfa;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .chat-streaming::before {
            content: '';
            width: 8px;
            height: 8px;
            border: 2px solid #a78bfa;
            border-top-color: transparent;
            border-radius: 50%;
            display: inline-block;
            animation: spin 1s linear infinite;
        }
        
        .empty-body {
            color: #52525b;
            font-style: italic;
        }
        
        .empty {
            text-align: center;
            padding: 48px;
            color: #52525b;
        }
        
        /* Trace grouping styles */
        .trace-badge {
            font-size: 9px;
            padding: 1px 4px;
            border-radius: 3px;
            background: #1e293b;
            color: #64748b;
            font-family: monospace;
            margin-left: 8px;
        }
        
        .trace-group {
            border-left: 2px solid #3b82f6;
            margin-left: 8px;
            padding-left: 8px;
        }
        
        .trace-child {
            position: relative;
        }
        
        .trace-child::before {
            content: '';
            position: absolute;
            left: -10px;
            top: 50%;
            width: 8px;
            height: 1px;
            background: #3b82f6;
        }
        
        .trace-connector {
            width: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3b82f6;
            font-size: 10px;
        }
        
        /* Modal */
        .modal-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            padding: 16px;
        }
        
        .modal-backdrop.visible {
            display: flex;
        }
        
        .modal {
            background: #111114;
            border: 1px solid #27272a;
            border-radius: 10px;
            width: min(720px, 90vw);
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 10px 40px rgba(0,0,0,0.4);
        }
        
        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            border-bottom: 1px solid #27272a;
        }
        
        .modal-title {
            font-size: 14px;
            font-weight: 600;
            color: #e4e4e7;
        }
        
        .close-btn {
            border: none;
            background: transparent;
            color: #a1a1aa;
            cursor: pointer;
            font-size: 16px;
        }
        
        .close-btn:hover {
            color: #e4e4e7;
        }
        
        .modal-body {
            padding: 12px 16px 16px;
            overflow: auto;
        }
        
        .hide-chat .chat-container {
            display: none;
        }
        
        @media (max-width: 900px) {
            .log {
                grid-template-columns: 24px 1fr auto auto;
                gap: 12px;
            }
            .log .time, .log .method, .log .path { display: none; }
            .details-panels {
                grid-template-columns: 1fr;
            }
        }
    </style>
{% endblock %}

{% block body %}
    <div class="header">
        <span class="logo">weaverun</span>
        <span class="status"><span class="dot"></span> live</span>
        <span class="debug-badge" id="debug-indicator" style="display: none;">DEBUG MODE</span>
        <span class="count" id="count">0 requests</span>
        <div class="header-actions">
            <button class="icon-btn" id="config-btn" title="Show loaded config">⚙️</button>
            <button class="icon-btn" id="chat-toggle" title="Hide chat bubbles">💬</button>
        </div>
    </div>
    
    <div class="logs" id="logs">
        <div class="empty">Waiting for requests...</div>
    </div>
    
    <div class="modal-backdrop" id="config-modal">
        <div class="modal">
            <div class="modal-header">
                <div class="modal-title">Loaded Config</div>
                <button class="close-btn" id="config-close">✕</button>
            </div>
            <div class="modal-body" id="config-body">Loading...</div>
        </div>
    </div>
    
    <script>
        const logs = document.getElementById('logs');
        const count = document.getElementById('count');
        const configBtn = document.getElementById('config-btn');
        const configModal = document.getElementById('config-modal');
        const configClose = document.getElementById('config-close');
        const configBody = document.getElementById('config-body');
        const chatToggle = document.getElementById('chat-toggle');
        let total = 0;
        let chatVisible = true;
        
        function statusClass(code) {
            if (code >= 200 && code < 300) return 'status-2xx';
            if (code >= 400 && code < 500) return 'status-4xx';
            return 'status-5xx';
        }
        
        function isStreaming(entry) {
            return entry.request_body && entry.request_body.stream === true;
        }
        
        function streamBadge(entry) {
            if (!isStreaming(entry)) return '';
            const resp = entry.response_body;
            if (resp && resp._streaming && resp._status === 'in_progress') {
                return '<span class="streaming-indicator" title="Streaming"></span>';
            }
            return '<span class="stream-badge">stream</span>';
        }
        
        function traceLink(entry) {
            if (entry.debug_mode) {
                return `<span class="trace-debug" title="Debug mode - would be logged to Weave">would log</span>`;
            }
            if (entry.trace_url) {
                return `<a href="${entry.trace_url}" target="_blank" class="trace-link" onclick="event.stopPropagation()">🍩 trace</a>`;
            }
            if (entry.trace_pending) {
                return `<span class="trace-pending" title="Logging to Weave...">🍩</span>`;
            }
            return `<span class="trace-none">-</span>`;
        }
        
        function providerBadge(provider) {
            if (!provider) return '<span class="provider provider-custom">api</span>';
            const cls = 'provider-' + provider.toLowerCase().replace(/[^a-z0-9]/g, '_');
            return `<span class="provider ${cls}">${escapeHtml(provider)}</span>`;
        }
        
        function syntaxHighlight(json) {
            if (json === null || json === undefined) {
                return '<span class="empty-body">No body</span>';
            }
            const str = JSON.stringify(json, null, 2);
            return str.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\\s*:)?|\\b(true|false|null)\\b|-?\\d+(?:\\.\\d*)?(?:[eE][+\\-]?\\d+)?)/g, (match) => {
                let cls = 'number';
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'key';
                        match = match.slice(0, -1) + '</span><span>:';
                    } else {
                        cls = 'string';
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                } else if (/null/.test(match)) {
                    cls = 'null';
                }
                return `<span class="${cls}">${match}</span>`;
            });
        }
        
        function escapeHtml(str) {
            const div = document.createElement('div');
            div.textContent = str;
            return div.innerHTML;
        }

        function isChatEntry(entry) {
            const msgs = entry?.request_body?.messages;
            const hasReq = Array.isArray(msgs) && msgs.length > 0;
            const choices = entry?.response_body?.choices;
            const hasResp = Array.isArray(choices) && choices.length > 0 && (choices[0]?.message || choices[0]?.delta);
            return Boolean(hasReq || hasResp);
        }
        
        function normalizeContent(content) {
            if (content === undefined || content === null) return '';
            if (typeof content === 'string') return escapeHtml(content);
            if (Array.isArray(content)) {
                return content.map(part => {
                    if (typeof part === 'string') return escapeHtml(part);
                    if (part && typeof part === 'object') {
                        if (typeof part.text === 'string') return escapeHtml(part.text);
                        if (Array.isArray(part.text)) {
                            return part.text.map(t => typeof t === 'string' ? escapeHtml(t) : escapeHtml(JSON.stringify(t))).join('<br>');
                        }
                        if (part.content) return normalizeContent(part.content);
                        if (part.type === 'tool_call') return escapeHtml(JSON.stringify(part));
                        if (typeof part.type === 'string' && part.type !== 'text') return escapeHtml(JSON.stringify(part));
                    }
                    return escapeHtml(JSON.stringify(part));
                }).join('<br>');
            }
            if (typeof content === 'object') {
                if (typeof content.text === 'string') return escapeHtml(content.text);
                if (Array.isArray(content.text)) return normalizeContent(content.text);
                if (content.content) return normalizeContent(content.content);
                return escapeHtml(JSON.stringify(content));
            }
            return escapeHtml(String(content));
        }
        
        function renderChatBubble(msg) {
            if (!msg) return '';
            const role = (msg.role || 'assistant').toLowerCase();
            const cls = ['chat-bubble', role];
            const content = normalizeContent(msg.content);
            return `
                <div class="${cls.join(' ')}">
                    <span class="role">${escapeHtml(role)}</span>
                    <div>${content || '<span class="empty-body">No content</span>'}</div>
                </div>
            `;
        }
        
        function extractAssistantMessage(entry) {
            const resp = entry?.response_body;
            if (!resp || resp._status === 'in_progress') return null;
            const choices = Array.isArray(resp.choices) ? resp.choices : [];
            const first = choices[0] || {};
            const message = first.message || first.delta || null;
            if (!message) return null;
            const role = message.role || 'assistant';
            return { role, content: message.content };
        }
        
        function renderChat(entry) {
            if (!isChatEntry(entry)) return '';
            const messages = entry.request_body?.messages || [];
            const responseMessage = extractAssistantMessage(entry);
            const streaming = entry.response_body && entry.response_body._streaming;
            const bubbles = [];
            for (const msg of messages) {
                bubbles.push(renderChatBubble(msg));
            }
            if (responseMessage) {
                bubbles.push(renderChatBubble(responseMessage));
            } else if (streaming) {
                bubbles.push('<div class="chat-bubble assistant pending"><div class="chat-streaming">Streaming response…</div></div>');
            }
            return `
                <div class="chat-view">
                    <div class="chat-title">Chat</div>
                    <div class="chat-bubbles">
                        ${bubbles.join('')}
                    </div>
                </div>
            `;
        }
        
        function ensureChatContainer(wrapper, entry) {
            if (!isChatEntry(entry)) return null;
            let container = wrapper.querySelector('.chat-container');
            if (!container) {
                const details = wrapper.querySelector('.details');
                if (!details) return null;
                container = document.createElement('div');
                container.className = 'chat-container';
                container.id = 'chat-' + entry.id;
                details.insertBefore(container, details.firstChild);
            }
            return container;
        }
        
        function callIdBadge(entry) {
            return `<span class="call-id" title="Call ID">${escapeHtml(entry.id)}</span>`;
        }
        
        function copyToClipboard(btn, data) {
            event.stopPropagation();
            const text = data ? JSON.stringify(data, null, 2) : '';
            navigator.clipboard.writeText(text).then(() => {
                btn.classList.add('copied');
                btn.textContent = 'Copied!';
                setTimeout(() => {
                    btn.classList.remove('copied');
                    btn.textContent = 'Copy';
                }, 1500);
            });
        }
        
        function toggleExpand(wrapper) {
            wrapper.classList.toggle('expanded');
        }
        
        // Track traces for grouping
        const traceGroups = new Map();
        
        function traceBadge(entry) {
            if (!entry.trace_id) return '';
            const shortId = entry.trace_id.substring(0, 8);
            const hasParent = entry.parent_span_id ? ' ↳' : '';
            return `<span class="trace-badge" title="Trace: ${entry.trace_id}">${hasParent}${shortId}</span>`;
        }
        
        function addLog(entry) {
            if (total === 0) logs.innerHTML = '';
            total++;
            count.textContent = `${total} request${total === 1 ? '' : 's'}`;
            
            const wrapper = document.createElement('div');
            wrapper.className = 'log-wrapper';
            wrapper.id = 'entry-' + entry.id;
            const chatEnabled = isChatEntry(entry);
            
            // Track trace groups
            if (entry.trace_id) {
                if (!traceGroups.has(entry.trace_id)) {
                    traceGroups.set(entry.trace_id, []);
                }
                traceGroups.get(entry.trace_id).push(entry.id);
            }
            
            const isChild = entry.parent_span_id ? 'trace-child' : '';
            const debugClass = entry.debug_mode ? 'debug-mode' : '';
            
            wrapper.innerHTML = `
                <div class="log ${isChild} ${debugClass}" onclick="toggleExpand(this.parentElement)">
                    <span class="expand-icon">▶</span>
                    <span class="time">${escapeHtml(entry.timestamp)}${traceBadge(entry)}</span>
                    <span class="method">${escapeHtml(entry.method)}${streamBadge(entry)}</span>
                    ${callIdBadge(entry)}
                    ${providerBadge(entry.provider)}
                    <span class="path">${escapeHtml(entry.path)}</span>
                    <span class="model">${escapeHtml(entry.model || '-')}</span>
                    <span class="status-code ${statusClass(entry.status_code)}">${entry.status_code}</span>
                    <span class="latency">${entry.latency_ms}ms</span>
                    <span class="trace-slot" data-id="${entry.id}">${traceLink(entry)}</span>
                </div>
                <div class="details">
                    ${chatEnabled ? `<div class="chat-container" id="chat-${entry.id}">${renderChat(entry)}</div>` : ''}
                    <div class="details-panels">
                        <div class="panel">
                            <div class="panel-header">
                                <span class="panel-title request">Request</span>
                                <button class="copy-btn" id="copy-req-${entry.id}">Copy</button>
                            </div>
                            <div class="json-view">${syntaxHighlight(entry.request_body)}</div>
                        </div>
                        <div class="panel">
                            <div class="panel-header">
                                <span class="panel-title response">Response</span>
                                <button class="copy-btn" id="copy-res-${entry.id}">Copy</button>
                            </div>
                            <div class="json-view">${syntaxHighlight(entry.response_body)}</div>
                        </div>
                    </div>
                </div>
            `;
            
            logs.insertBefore(wrapper, logs.firstChild);
            
            // Attach copy handlers after insertion
            const reqBtn = document.getElementById('copy-req-' + entry.id);
            const resBtn = document.getElementById('copy-res-' + entry.id);
            if (reqBtn) reqBtn.onclick = () => copyToClipboard(reqBtn, entry.request_body);
            if (resBtn) resBtn.onclick = () => copyToClipboard(resBtn, entry.response_body);
            
            while (logs.children.length > 50) {
                logs.removeChild(logs.lastChild);
            }
        }
        
        function updateTraceUrl(id, traceUrl) {
            const slot = document.querySelector(`.trace-slot[data-id="${id}"]`);
            if (slot) {
                if (traceUrl) {
                    slot.innerHTML = `<a href="${traceUrl}" target="_blank" class="trace-link" onclick="event.stopPropagation()">🍩 trace</a>`;
                } else {
                    slot.innerHTML = `<span class="trace-none">-</span>`;
                }
            }
        }
        
        function updateLogEntry(entry) {
            const wrapper = document.getElementById('entry-' + entry.id);
            if (!wrapper) return;
            
            // Update latency
            const latencyEl = wrapper.querySelector('.latency');
            if (latencyEl) latencyEl.textContent = entry.latency_ms + 'ms';
            
            // Update status code
            const statusEl = wrapper.querySelector('.status-code');
            if (statusEl) {
                statusEl.textContent = entry.status_code;
                statusEl.className = 'status-code ' + statusClass(entry.status_code);
            }
            
            // Update method badge (remove streaming indicator)
            const methodEl = wrapper.querySelector('.method');
            if (methodEl) {
                methodEl.innerHTML = escapeHtml(entry.method) + streamBadge(entry);
            }
            
            // Update response panel
            const panels = wrapper.querySelectorAll('.panel');
            if (panels.length >= 2) {
                const responsePanel = panels[1];
                const jsonView = responsePanel.querySelector('.json-view');
                if (jsonView) {
                    jsonView.innerHTML = syntaxHighlight(entry.response_body);
                }
                // Update copy button handler
                const copyBtn = responsePanel.querySelector('.copy-btn');
                if (copyBtn) {
                    copyBtn.onclick = () => copyToClipboard(copyBtn, entry.response_body);
                }
            }
            
            // Update chat rendering if applicable
            const chatContainer = ensureChatContainer(wrapper, entry);
            if (chatContainer) {
                chatContainer.innerHTML = renderChat(entry);
            }
        }
        
        function handleEvent(data) {
            if (data.type === 'log') {
                addLog(data);
            } else if (data.type === 'log_update') {
                updateLogEntry(data);
            } else if (data.type === 'trace_update') {
                updateTraceUrl(data.id, data.trace_url);
            }
        }

        async function fetchConfig() {
            try {
                configBody.textContent = 'Loading...';
                const res = await fetch('/__weaverun__/config');
                if (!res.ok) throw new Error('Failed to load config');
                const data = await res.json();
                configBody.innerHTML = `
                    <div class="json-view">${syntaxHighlight(data)}</div>
                `;
            } catch (err) {
                configBody.textContent = 'Error loading config';
            }
        }

        function openConfigModal() {
            configModal.classList.add('visible');
            fetchConfig();
        }

        function closeConfigModal() {
            configModal.classList.remove('visible');
        }
        
        function setChatVisibility(on) {
            chatVisible = on;
            document.body.classList.toggle('hide-chat', !on);
            if (chatToggle) {
                chatToggle.textContent = on ? '💬' : '🙈';
                chatToggle.title = on ? 'Hide chat bubbles' : 'Show chat bubbles';
            }
        }
        
        const evtSource = new EventSource('/__weaverun__/events');
        evtSource.onmessage = (e) => handleEvent(JSON.parse(e.data));
        evtSource.onerror = () => console.log('SSE reconnecting...');
        
        // Config modal wiring
        if (configBtn) configBtn.onclick = openConfigModal;
        if (configClose) configClose.onclick = closeConfigModal;
        if (configModal) {
            configModal.addEventListener('click', (e) => {
                if (e.target === configModal) closeConfigModal();
            });
        }
        
        // Chat toggle wiring
        if (chatToggle) {
            chatToggle.onclick = () => setChatVisibility(!chatVisible);
        }
        setChatVisibility(true);
        
        // Check and display debug mode indicator
        async function checkDebugMode() {
            try {
                const res = await fetch('/__weaverun__/config');
                if (res.ok) {
                    const data = await res.json();
                    if (data.debug) {
                        const indicator = document.getElementById('debug-indicator');
                        if (indicator) {
                            indicator.style.display = 'inline-block';
                        }
                    }
                }
            } catch (e) {
                // Silently ignore errors
            }
        }
        checkDebugMode();
    </script>
{% endblock %}