Thinking indicator under chat

src/ifcchat/app.js

@@ -110,6 +110,7 @@ const apiKeyLabelEl = $("apiKeyLabel");
 const baseUrlRowEl = $("baseUrlRow");
 const baseUrlLabelEl = $("baseUrlLabel");
 const baseUrlEl = $("baseUrl");
+const thinkingIndicatorEl = $("thinkingIndicator");
 const modelEl = $("model");
 const providerEl = $("provider");
 const ifcFileEl = $("ifcFile");
@@ -180,12 +181,14 @@ function addMessage(role, text) {
             wrap.querySelector(".chevron").style.transform = expanded ? '' : 'rotate(90deg)';
         }
     }
-    msgsEl.appendChild(wrap);
+    msgsEl.insertBefore(wrap, thinkingIndicatorEl);
     msgsEl.scrollTop = msgsEl.scrollHeight;
 }
 
 function setStatus(text) {
     statusEl.textContent = text;
+    thinkingIndicatorEl.hidden = text !== "Thinking…";
+    msgsEl.scrollTop = msgsEl.scrollHeight;
 }
 
 const worker = new Worker("./ifc_worker.js", { type: "module" });

src/ifcchat/index.html

@@ -96,7 +96,12 @@
                 </div>
             </header>
                 
-            <div class="msgs" id="msgs"></div>
+            <div class="msgs" id="msgs">
+                <div class="thinking-indicator" id="thinkingIndicator" hidden>
+                    <span class="spinner"></span>
+                    <span>thinking...</span>
+                </div>
+            </div>
             <div class="composer">
                 <div class="inner">
                     <textarea id="input" placeholder="Ask or instruct about the IFC model…"></textarea>

src/ifcchat/style.css

@@ -53,6 +53,23 @@ main {
     margin: 10px 0;
 }
 
+.thinking-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    color: #555;
+    font-size: 80%;
+}
+
+.thinking-indicator[hidden] {
+    display: none;
+}
+
+.thinking-indicator .spinner {
+    width: 14px;
+    height: 14px;
+}
+
 .msg .role {
     font-size: 12px;
     opacity: 0.7;