hyperclaw 5.4.1 → 5.4.2

package/static/chat.html

@@ -6,6 +6,7 @@
   <title>HyperClaw Chat</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   <style>
     /* ── ACCENT THEME VARS ── */
@@ -432,7 +433,10 @@
       ? chatHistory.filter(c => c.title.toLowerCase().includes(filter.toLowerCase()))
       : chatHistory;
     if (!items.length) { el.innerHTML = '<div style="padding:6px 22px;font-size:11px;color:#3a3a3a">' + (filter ? 'No results' : 'No recent chats') + '</div>'; return; }
-    el.innerHTML = items.map(c => `<button class="sidebar-chat-item" onclick="loadChat('${c.id}')" title="${escHtml(c.title)}">💬 ${escHtml(c.title)}</button>`).join('');
+    el.innerHTML = items.map(c => `<button class="sidebar-chat-item" data-chat-id="${escAttr(c.id)}" title="${escAttr(c.title)}">💬 ${escHtml(c.title)}</button>`).join('');
+    el.querySelectorAll('.sidebar-chat-item').forEach(btn => {
+      btn.onclick = () => loadChat(btn.getAttribute('data-chat-id') || '');
+    });
   }
 
   function loadChat(id) {
@@ -493,7 +497,12 @@
     const btn = document.createElement('button');
     btn.className = 'sidebar-project';
     btn.dataset.preset = proj.id;
-    btn.innerHTML = `<span class="sidebar-project-dot" style="background:${proj.color}"></span>${escHtml(proj.name)}`;
+    const safeColor = /^#[0-9a-fA-F]{3,8}$/.test(proj.color) ? proj.color : '#6b7280';
+    const dot = document.createElement('span');
+    dot.className = 'sidebar-project-dot';
+    dot.style.backgroundColor = safeColor;
+    btn.appendChild(dot);
+    btn.appendChild(document.createTextNode(' ' + (proj.name || '')));
     btn.onclick = () => {
       document.querySelectorAll('.sidebar-project').forEach(b => b.classList.remove('active'));
       btn.classList.add('active');
@@ -657,7 +666,11 @@
     const bubble = document.createElement('div');
     bubble.className = 'msg-bubble';
     if (!streaming && content) {
-      bubble.innerHTML = '<div class="prose">' + (role === 'assistant' ? marked.parse(content) : escHtml(content)) + '</div>';
+      const raw = role === 'assistant' ? marked.parse(content) : escHtml(content);
+      const html = (typeof DOMPurify !== 'undefined')
+        ? DOMPurify.sanitize(raw, { ALLOWED_TAGS: ['p','br','strong','em','code','pre','ul','ol','li','a','blockquote','h1','h2','h3','span','div'], ALLOWED_ATTR: ['href','class'] })
+        : raw;
+      bubble.innerHTML = '<div class="prose">' + html + '</div>';
     } else {
       bubble.textContent = content || '';
     }
@@ -696,7 +709,8 @@
     document.getElementById('typing-row')?.remove();
   }
 
-  function escHtml(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+  function escHtml(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
+  function escAttr(s) { return String(s).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/'/g,'&#39;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
 
   // ── Send ─────────────────────────────────────────────
   let msgCount = 0;