pi-tau-web-server 1.0.8

package/public/markdown.js

@@ -0,0 +1,336 @@
+/**
+ * Lightweight Markdown renderer — no dependencies.
+ * Handles: headings, bold, italic, inline code, code blocks with language,
+ * links, unordered/ordered lists, blockquotes, horizontal rules, tables,
+ * task lists, images, paragraphs.
+ */
+export function renderMarkdown(text) {
+    if (!text)
+        return '';
+    // Normalize line endings
+    text = text.replace(/\r\n/g, '\n');
+    // Extract code blocks first to protect them
+    const codeBlocks = [];
+    text = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => {
+        const idx = codeBlocks.length;
+        codeBlocks.push({ lang, code: code.replace(/\n$/, '') });
+        return `%%CODEBLOCK_${idx}%%`;
+    });
+    // Extract display math after code fences (so $$ inside fences stays literal)
+    // but before the line split, since $$...$$ may span multiple lines.
+    const mathBlocks = [];
+    text = extractDisplayMath(text, mathBlocks);
+    // Split into lines and process block-level elements
+    const lines = text.split('\n');
+    let html = '';
+    let inList = false;
+    let listType = '';
+    let inBlockquote = false;
+    let blockquoteLines = [];
+    function flushBlockquote() {
+        if (inBlockquote) {
+            html += '<blockquote>' + blockquoteLines.map(l => renderInline(l)).join('<br>') + '</blockquote>';
+            inBlockquote = false;
+            blockquoteLines = [];
+        }
+    }
+    function flushList() {
+        if (inList) {
+            html += `</${listType}>`;
+            inList = false;
+        }
+    }
+    // Check if a line is a table separator (e.g. |---|---|)
+    function isTableSeparator(line) {
+        return /^\|?(\s*:?-{3,}:?\s*\|)+\s*:?-{3,}:?\s*\|?\s*$/.test(line);
+    }
+    // Check if a line looks like a table row
+    function isTableRow(line) {
+        return line.trim().startsWith('|') && line.trim().endsWith('|');
+    }
+    // Parse alignment from separator row
+    function parseAlignments(line) {
+        return line.split('|').filter((c) => c.trim()).map((cell) => {
+            const trimmed = cell.trim();
+            if (trimmed.startsWith(':') && trimmed.endsWith(':'))
+                return 'center';
+            if (trimmed.endsWith(':'))
+                return 'right';
+            return 'left';
+        });
+    }
+    for (let i = 0; i < lines.length; i++) {
+        let line = lines[i];
+        // Code block placeholder
+        const codeMatch = line.match(/^%%CODEBLOCK_(\d+)%%$/);
+        if (codeMatch) {
+            flushList();
+            flushBlockquote();
+            const block = codeBlocks[parseInt(codeMatch[1])];
+            const langLabel = block.lang || 'code';
+            html += `<div class="code-block-wrapper">`;
+            html += `<div class="code-block-header"><span>${escapeHtml(langLabel)}</span><button class="copy-btn" onclick="copyCode(this)">Copy</button></div>`;
+            html += `<pre><code>${escapeHtml(block.code)}</code></pre></div>`;
+            continue;
+        }
+        // Display math placeholder
+        const mathMatch = line.match(/^%%MATHBLOCK(\d+)%%$/);
+        if (mathMatch) {
+            flushList();
+            flushBlockquote();
+            html += `<div class="math-block">${mathBlocks[parseInt(mathMatch[1])]}</div>`;
+            continue;
+        }
+        // Table detection: look ahead for header + separator pattern
+        if (isTableRow(line) && i + 1 < lines.length && isTableSeparator(lines[i + 1])) {
+            flushList();
+            flushBlockquote();
+            const alignments = parseAlignments(lines[i + 1]);
+            // Parse header
+            const headerCells = line.split('|').filter((c) => c.trim() !== '' || line.trim() === '|');
+            // More robust: split between first and last pipe
+            const headerRow = line.trim().replace(/^\|/, '').replace(/\|$/, '').split('|');
+            html += '<div class="table-wrapper"><table><thead><tr>';
+            headerRow.forEach((cell, idx) => {
+                const align = alignments[idx] || 'left';
+                html += `<th style="text-align:${align}">${renderInline(cell.trim())}</th>`;
+            });
+            html += '</tr></thead><tbody>';
+            // Skip separator
+            i += 2;
+            // Parse body rows
+            while (i < lines.length && isTableRow(lines[i])) {
+                const rowCells = lines[i].trim().replace(/^\|/, '').replace(/\|$/, '').split('|');
+                html += '<tr>';
+                rowCells.forEach((cell, idx) => {
+                    const align = alignments[idx] || 'left';
+                    html += `<td style="text-align:${align}">${renderInline(cell.trim())}</td>`;
+                });
+                html += '</tr>';
+                i++;
+            }
+            html += '</tbody></table></div>';
+            i--; // back up since the for loop will increment
+            continue;
+        }
+        // Horizontal rule
+        if (/^(-{3,}|\*{3,}|_{3,})\s*$/.test(line)) {
+            flushList();
+            flushBlockquote();
+            html += '<hr>';
+            continue;
+        }
+        // Headings
+        const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
+        if (headingMatch) {
+            flushList();
+            flushBlockquote();
+            const level = headingMatch[1].length;
+            html += `<h${level}>${renderInline(headingMatch[2])}</h${level}>`;
+            continue;
+        }
+        // Blockquote — handle `>` with or without trailing space, and empty `>` lines
+        if (/^>\s?/.test(line)) {
+            flushList();
+            if (!inBlockquote) {
+                inBlockquote = true;
+                blockquoteLines = [];
+            }
+            const content = line.replace(/^>\s?/, '');
+            if (content === '') {
+                // Empty blockquote line acts as paragraph break within quote
+                blockquoteLines.push('');
+            }
+            else {
+                blockquoteLines.push(content);
+            }
+            continue;
+        }
+        else if (inBlockquote) {
+            flushBlockquote();
+        }
+        // Task list (must check before regular list)
+        const taskMatch = line.match(/^(\s*)[*\-+]\s+\[([ xX])\]\s+(.+)$/);
+        if (taskMatch) {
+            if (!inList || listType !== 'ul') {
+                flushList();
+                html += '<ul class="task-list">';
+                inList = true;
+                listType = 'ul';
+            }
+            const checked = taskMatch[2] !== ' ';
+            html += `<li class="task-list-item"><input type="checkbox" disabled ${checked ? 'checked' : ''}> ${renderInline(taskMatch[3])}</li>`;
+            continue;
+        }
+        // Unordered list
+        const ulMatch = line.match(/^(\s*)[*\-+]\s+(.+)$/);
+        if (ulMatch) {
+            flushBlockquote();
+            if (!inList || listType !== 'ul') {
+                if (inList)
+                    html += `</${listType}>`;
+                html += '<ul>';
+                inList = true;
+                listType = 'ul';
+            }
+            html += `<li>${renderInline(ulMatch[2])}</li>`;
+            continue;
+        }
+        // Ordered list
+        const olMatch = line.match(/^(\s*)\d+\.\s+(.+)$/);
+        if (olMatch) {
+            flushBlockquote();
+            if (!inList || listType !== 'ol') {
+                if (inList)
+                    html += `</${listType}>`;
+                html += '<ol>';
+                inList = true;
+                listType = 'ol';
+            }
+            html += `<li>${renderInline(olMatch[2])}</li>`;
+            continue;
+        }
+        // Close list if we're out of list items
+        flushList();
+        // Empty line
+        if (line.trim() === '') {
+            continue;
+        }
+        // Regular paragraph
+        html += `<p>${renderInline(line)}</p>`;
+    }
+    // Close any open blocks
+    flushList();
+    flushBlockquote();
+    return html;
+}
+/**
+ * Lightweight user-message renderer — inline formatting + blockquotes only.
+ * Preserves whitespace/newlines for everything else.
+ */
+export function renderUserMarkdown(text) {
+    if (!text)
+        return '';
+    text = text.replace(/\r\n/g, '\n');
+    const mathBlocks = [];
+    text = extractDisplayMath(text, mathBlocks);
+    const lines = text.split('\n');
+    let html = '';
+    let inBlockquote = false;
+    let bqLines = [];
+    function flushBq() {
+        if (inBlockquote) {
+            html += '<blockquote>' + bqLines.map(l => renderInline(l)).join('<br>') + '</blockquote>';
+            inBlockquote = false;
+            bqLines = [];
+        }
+    }
+    for (const line of lines) {
+        const mathMatch = line.match(/^%%MATHBLOCK(\d+)%%$/);
+        if (mathMatch) {
+            flushBq();
+            html += `<div class="math-block">${mathBlocks[parseInt(mathMatch[1])]}</div>`;
+            continue;
+        }
+        if (/^>\s?/.test(line)) {
+            if (!inBlockquote) {
+                inBlockquote = true;
+                bqLines = [];
+            }
+            bqLines.push(line.replace(/^>\s?/, ''));
+            continue;
+        }
+        flushBq();
+        html += renderInline(line) + '\n';
+    }
+    flushBq();
+    return html.replace(/\n$/, '');
+}
+function renderInline(text) {
+    // Inline code (must come first to protect content)
+    const codeSpans = [];
+    text = text.replace(/`([^`]+)`/g, (_, code) => {
+        const idx = codeSpans.length;
+        codeSpans.push(`<code>${escapeHtml(code)}</code>`);
+        return `%%ICODE${idx}%%`;
+    });
+    // Inline math — after inline code (so `$x$` stays code) but before the
+    // emphasis regexes, which would otherwise mangle math like $a_i * b_i$.
+    const mathSpans = [];
+    const putMath = (src) => `%%IMATH${mathSpans.push(renderMath(src.trim(), false)) - 1}%%`;
+    text = text.replace(/\\\((.+?)\\\)/g, (_, src) => putMath(src));
+    // Single-$ form with currency heuristics: opening $ not escaped/doubled and
+    // not followed by whitespace; closing $ not escaped, not preceded by
+    // whitespace, not followed by a digit ("$5 and $10" stays text).
+    text = text.replace(/(?<![\\$])\$(?!\s)((?:\\.|[^$])+?)(?<![\s\\])\$(?!\d)/g, (_, src) => putMath(src));
+    // Images (before links so ![...](...) isn't caught by link regex)
+    text = text.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" class="inline-image">');
+    // Bold + italic
+    text = text.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+    // Bold
+    text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+    text = text.replace(/__(.+?)__/g, '<strong>$1</strong>');
+    // Italic
+    text = text.replace(/\*(.+?)\*/g, '<em>$1</em>');
+    text = text.replace(/_(.+?)_/g, '<em>$1</em>');
+    // Strikethrough
+    text = text.replace(/~~(.+?)~~/g, '<del>$1</del>');
+    // Links
+    text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+    // Auto-link bare URLs
+    text = text.replace(/(^|[^"'])(https?:\/\/[^\s<]+)/g, '$1<a href="$2" target="_blank" rel="noopener">$2</a>');
+    // Restore inline math and inline code last so the regexes above never see
+    // the generated HTML.
+    text = text.replace(/%%IMATH(\d+)%%/g, (_, idx) => mathSpans[parseInt(idx)]);
+    text = text.replace(/%%ICODE(\d+)%%/g, (_, idx) => codeSpans[parseInt(idx)]);
+    return text;
+}
+function renderMath(src, displayMode) {
+    const katex = globalThis.katex;
+    if (!katex)
+        return `<code class="math-fallback">${escapeHtml(src)}</code>`;
+    try {
+        return katex.renderToString(src, { displayMode, throwOnError: false });
+    }
+    catch {
+        return `<code class="math-fallback">${escapeHtml(src)}</code>`;
+    }
+}
+// Replaces $$...$$ and \[...\] segments with %%MATHBLOCK<N>%% placeholders on
+// their own lines, pushing the KaTeX-rendered HTML into `blocks`. The
+// placeholder deliberately has no underscore (matching %%ICODE0%%) so the
+// italic regex can never split it.
+function extractDisplayMath(text, blocks) {
+    const put = (_, src) => `\n%%MATHBLOCK${blocks.push(renderMath(src.trim(), true)) - 1}%%\n`;
+    text = text.replace(/\$\$([\s\S]+?)\$\$/g, put);
+    text = text.replace(/\\\[([\s\S]+?)\\\]/g, put);
+    return text;
+}
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+// Global copy function for code blocks. Guarded so the module can be imported
+// under node --test, where there is no window.
+if (typeof window !== 'undefined') {
+    window.copyCode = function (btn) {
+        const wrapper = btn.closest('.code-block-wrapper');
+        if (!wrapper)
+            return;
+        const codeBlock = wrapper.querySelector('code');
+        if (!codeBlock)
+            return;
+        const text = codeBlock.textContent || '';
+        navigator.clipboard.writeText(text).then(() => {
+            btn.textContent = 'Copied!';
+            btn.classList.add('copied');
+            setTimeout(() => {
+                btn.textContent = 'Copy';
+                btn.classList.remove('copied');
+            }, 2000);
+        });
+    };
+}

package/public/message-renderer.js

@@ -0,0 +1,268 @@
+/**
+ * Message Renderer - Renders chat messages with markdown support
+ */
+import { renderMarkdown, renderUserMarkdown } from './markdown.js';
+export class MessageRenderer {
+    container;
+    isNearBottom;
+    constructor(container) {
+        this.container = container;
+        this.isNearBottom = true;
+        // Track scroll position for smart auto-scroll
+        this.container.addEventListener('scroll', () => {
+            const threshold = 100;
+            this.isNearBottom =
+                this.container.scrollHeight - this.container.scrollTop - this.container.clientHeight < threshold;
+        });
+    }
+    clear() {
+        this.container.innerHTML = '';
+    }
+    renderWelcome() {
+        this.container.innerHTML = `
+      <div class="welcome">
+        <div class="welcome-icon"><img src="icons/tau-192.png" alt="τ" class="tau-icon-welcome"></div>
+        <p>Welcome to Tau</p>
+        <p class="hint">Type a message below to start chatting with Pi, or select a session from the sidebar.</p>
+        <div class="shortcuts-hint">
+          <span>/ Focus input</span>
+          <span>Esc Abort</span>
+        </div>
+      </div>
+    `;
+    }
+    renderUserMessage(message, isHistory = false) {
+        // Remove welcome message if present
+        const welcome = this.container.querySelector('.welcome');
+        if (welcome)
+            welcome.remove();
+        const div = document.createElement('div');
+        div.className = `message user${isHistory ? ' history' : ''}`;
+        let imagesHtml = '';
+        if (message.images && message.images.length > 0) {
+            imagesHtml = '<div class="message-images">' +
+                message.images.map(img => {
+                    const src = img.data.startsWith('data:') ? img.data : `data:${img.mimeType || 'image/png'};base64,${img.data}`;
+                    return `<img class="message-image" src="${src}" alt="Attached image" />`;
+                }).join('') +
+                '</div>';
+        }
+        div.innerHTML = `
+      <div class="message-content">${imagesHtml}${renderUserMarkdown(message.content)}</div>
+      <button class="message-copy-btn" aria-label="Copy message"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
+    `;
+        this._setupCopyBtn(div);
+        this.container.appendChild(div);
+        if (!isHistory)
+            this.scrollToBottom();
+    }
+    renderAssistantMessage(message, isStreaming = false, isHistory = false) {
+        // Remove welcome message if present
+        const welcome = this.container.querySelector('.welcome');
+        if (welcome)
+            welcome.remove();
+        const div = document.createElement('div');
+        div.className = `message assistant${isHistory ? ' history' : ''}`;
+        div.dataset.messageId = message.id || 'streaming';
+        let contentHtml = '';
+        let usageHtml = '';
+        if (typeof message.content === 'string') {
+            contentHtml = isStreaming ? this.escapeHtml(message.content) : renderMarkdown(message.content);
+        }
+        else if (Array.isArray(message.content)) {
+            for (const block of message.content) {
+                if (block.type === 'text') {
+                    contentHtml += isStreaming ? this.escapeHtml(block.text) : renderMarkdown(block.text || '');
+                }
+                else if (block.type === 'thinking') {
+                    contentHtml += this.renderThinkingBlock(block.thinking);
+                }
+            }
+        }
+        // Usage/cost info
+        if (message.usage && message.usage.cost) {
+            const cost = message.usage.cost.total;
+            if (cost && cost > 0) {
+                usageHtml = `<span class="message-usage">$${cost.toFixed(4)}</span>`;
+            }
+        }
+        const streamingClass = isStreaming ? ' streaming' : '';
+        div.innerHTML = `
+      <div class="message-content${streamingClass}">${contentHtml}</div>
+      ${usageHtml}
+      ${!isStreaming ? '<button class="message-copy-btn" aria-label="Copy message"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>' : ''}
+    `;
+        if (!isStreaming)
+            this._setupCopyBtn(div);
+        this.container.appendChild(div);
+        if (!isHistory)
+            this.scrollToBottom();
+        return div;
+    }
+    renderThinkingBlock(thinking) {
+        const id = 'thinking-' + Math.random().toString(36).slice(2, 8);
+        return `<div class="thinking-block">
+<div class="thinking-toggle" onclick="var c=document.getElementById('${id}');c.classList.toggle('expanded');this.classList.toggle('expanded')">
+<span class="chevron"><svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor"><path d="M2 1l4 3-4 3z"/></svg></span>
+<span class="thinking-label"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M12 5v13"/><path d="M6.5 9h11"/><path d="M7 13h10"/></svg> Thinking</span>
+</div>
+<div class="thinking-content" id="${id}">${this.escapeHtml(thinking)}</div>
+</div>`;
+    }
+    updateStreamingThinking(messageElement, thinking) {
+        let thinkingDiv = messageElement.querySelector('.streaming-thinking');
+        if (!thinkingDiv) {
+            const contentDiv = messageElement.querySelector('.message-content');
+            if (!contentDiv)
+                return;
+            thinkingDiv = document.createElement('div');
+            thinkingDiv.className = 'thinking-block streaming-thinking';
+            thinkingDiv.innerHTML = `
+        <div class="thinking-toggle expanded" onclick="var c=this.nextElementSibling;c.classList.toggle('expanded');this.classList.toggle('expanded')">
+          <span class="chevron"><svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor"><path d="M2 1l4 3-4 3z"/></svg></span>
+          <span class="thinking-label"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M12 5v13"/><path d="M6.5 9h11"/><path d="M7 13h10"/></svg> Thinking</span>
+        </div>
+        <div class="thinking-content expanded"></div>`;
+            contentDiv.prepend(thinkingDiv);
+        }
+        const contentEl = thinkingDiv.querySelector('.thinking-content');
+        if (contentEl) {
+            contentEl.textContent = thinking;
+            this.scrollToBottom();
+        }
+    }
+    updateStreamingMessage(messageElement, content) {
+        const contentDiv = messageElement.querySelector('.message-content');
+        if (!contentDiv)
+            return;
+        // Render markdown incrementally so headings, lists, inline formatting,
+        // and other block elements appear live — not just after streaming ends.
+        const rendered = renderMarkdown(content);
+        const thinkingBlock = contentDiv.querySelector('.streaming-thinking');
+        if (thinkingBlock) {
+            // Keep the thinking block; update only the text portion
+            let textNode = contentDiv.querySelector('.streaming-text');
+            if (!textNode) {
+                // First time text arrives after thinking started:
+                // remove any stale text nodes that were placed directly in contentDiv
+                // before the thinking block existed.
+                let node = thinkingBlock.nextSibling;
+                while (node) {
+                    const next = node.nextSibling;
+                    node.remove();
+                    node = next;
+                }
+                textNode = document.createElement('div');
+                textNode.className = 'streaming-text';
+                contentDiv.appendChild(textNode);
+            }
+            textNode.innerHTML = rendered;
+            // Stash the raw markdown so finalizeStreamingMessage can do a clean
+            // re-render without scraping textContent from already-rendered HTML.
+            textNode.dataset.rawText = content;
+        }
+        else {
+            contentDiv.innerHTML = rendered;
+            contentDiv.dataset.rawText = content;
+        }
+        this.scrollToBottom();
+    }
+    finalizeStreamingMessage(messageElement, usage = null, thinking = '') {
+        const contentDiv = messageElement.querySelector('.message-content');
+        if (contentDiv) {
+            contentDiv.classList.remove('streaming');
+            // Recover the raw markdown text we stashed during streaming updates.
+            // Falls back to textContent (which loses formatting markers) only if
+            // the dataset is somehow missing.
+            const streamingText = contentDiv.querySelector('.streaming-text');
+            const rawText = (streamingText && streamingText.dataset.rawText) ||
+                contentDiv.dataset.rawText ||
+                contentDiv.textContent ||
+                '';
+            // Final render — catches edge cases like code blocks whose closing
+            // fence arrived on the very last delta.
+            let html = '';
+            if (thinking) {
+                html += this.renderThinkingBlock(thinking);
+            }
+            html += renderMarkdown(rawText);
+            contentDiv.innerHTML = html;
+        }
+        // Add copy button after streaming finishes
+        if (!messageElement.querySelector('.message-copy-btn')) {
+            const btn = document.createElement('button');
+            btn.className = 'message-copy-btn';
+            btn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+            messageElement.appendChild(btn);
+            this._setupCopyBtn(messageElement);
+        }
+        // Add usage info if available
+        if (usage && usage.cost) {
+            const total = usage.cost.total;
+            if (total && total > 0) {
+                if (!messageElement.querySelector('.message-usage')) {
+                    const span = document.createElement('span');
+                    span.className = 'message-usage';
+                    span.textContent = `$${total.toFixed(4)}`;
+                    messageElement.appendChild(span);
+                }
+            }
+        }
+    }
+    renderSystemMessage(text) {
+        const div = document.createElement('div');
+        div.className = 'system-message';
+        div.textContent = String(text ?? '');
+        this.container.appendChild(div);
+        this.scrollToBottom();
+    }
+    renderError(errorMessage) {
+        const div = document.createElement('div');
+        div.className = 'error-message';
+        div.textContent = `⚠️ ${errorMessage}`;
+        this.container.appendChild(div);
+        this.scrollToBottom();
+    }
+    _setupCopyBtn(messageEl) {
+        const btn = messageEl.querySelector('.message-copy-btn');
+        if (!btn)
+            return;
+        btn.addEventListener('click', () => {
+            const content = messageEl.querySelector('.message-content');
+            if (!content)
+                return;
+            const text = content.textContent;
+            // Fallback for non-HTTPS (LAN access)
+            const copyText = (t) => {
+                if (navigator.clipboard)
+                    return navigator.clipboard.writeText(t);
+                const ta = document.createElement('textarea');
+                ta.value = t;
+                ta.style.cssText = 'position:fixed;left:-9999px';
+                document.body.appendChild(ta);
+                ta.select();
+                document.execCommand('copy');
+                document.body.removeChild(ta);
+                return Promise.resolve();
+            };
+            copyText(text).then(() => {
+                btn.classList.add('copied');
+                setTimeout(() => {
+                    btn.classList.remove('copied');
+                }, 1500);
+            });
+        });
+    }
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = String(text ?? '');
+        return div.innerHTML;
+    }
+    scrollToBottom() {
+        if (this.isNearBottom) {
+            requestAnimationFrame(() => {
+                this.container.scrollTop = this.container.scrollHeight;
+            });
+        }
+    }
+}