chevrons for tool result expansion

src/ifcchat/app.js

@@ -75,14 +75,16 @@ function addMessage(role, text) {
     const wrap = document.createElement("div");
     wrap.className = `msg ${role}`;
     wrap.innerHTML = `
-    <div class="role ${role}">${role}</div>
+    <div class="role ${role}">${role}${role === "tool" ? '<span class="chevron">▶</span>' : ''}</div>
     <div class="bubble"></div>`;
     const bubble = wrap.querySelector(".bubble");
     bubble.textContent = text;
     bubble.onclick = function () {
         if (bubble.scrollHeight > 100 && role === "tool") {
-            bubble.style.maxHeight = bubble.style.maxHeight == 'none' ? '' : 'none';
-            bubble.style.borderBottom = bubble.style.borderBottom == '' ? 'dotted 2px gray' : '';
+            const expanded = bubble.style.maxHeight === 'none';
+            bubble.style.maxHeight = expanded ? '' : 'none';
+            bubble.style.borderBottom = expanded ? '' : 'dotted 2px gray';
+            wrap.querySelector(".chevron").style.transform = expanded ? '' : 'rotate(90deg)';
         }
     }
     msgsEl.appendChild(wrap);

src/ifcchat/style.css

@@ -82,6 +82,15 @@ main {
     font-size: 60%;
     max-height: 100px;
     overflow: hidden;
+    cursor: pointer;
+}
+
+.chevron {
+    display: inline-block;
+    font-size: 10px;
+    margin-left: 6px;
+    transition: transform 0.2s;
+    vertical-align: middle;
 }
 
 .composer {