backend/internal/web/ui/app.css

@@ -706,6 +706,12 @@
    Section 26 — Discussion message bubbles (Phase 17)
    ============================================================ */
 
+#discussion-messages {
+  max-height: 32rem;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+}
+
 .message-row {
   display: flex;
   flex-direction: column;

backend/static/discussion-sse.js

@@ -38,6 +38,11 @@
     return list;
   }
 
+  function scrollToBottom(container) {
+    var messages = container.querySelector("#discussion-messages");
+    if (messages) messages.scrollTop = messages.scrollHeight;
+  }
+
   function appendMessage(container, event) {
     if (!event || !event.messageId || !event.messageHtml || messageExists(event.messageId)) {
       return;
@@ -54,6 +59,7 @@
     var template = document.createElement("template");
     template.innerHTML = event.messageHtml.trim();
     list.appendChild(template.content);
+    scrollToBottom(container);
   }
 
   function connectDiscussion(container) {
@@ -62,6 +68,7 @@
     var streamURL = container.dataset.discussionStreamUrl;
     if (!streamURL || !window.EventSource) return;
 
+    scrollToBottom(container);
     container.dataset.discussionStreamConnected = "true";
     var source = new EventSource(streamURL);
     source.addEventListener("discussion-message", function (message) {
@@ -95,5 +102,8 @@
     form.reset();
     var textarea = form.querySelector("#discussion-message-body");
     if (textarea) textarea.value = "";
+
+    var tab = form.closest("[data-discussion-stream-url]");
+    if (tab) scrollToBottom(tab);
   });
 })();