From 4740922b8de82d9634155cc0593fc94216f83884 Mon Sep 17 00:00:00 2001
From: teernisse <teernisse@visiostack.com>
Date: Wed, 25 Feb 2026 16:32:00 -0500
Subject: [PATCH] refactor(dashboard): simplify chat rendering and add scroll
 behavior

Removes unnecessary complexity from ChatMessages while adding proper
scroll management to SessionCard:

ChatMessages.js:
- Remove scroll position tracking refs and effects (wasAtBottomRef,
  prevMessagesLenRef, containerRef)
- Remove spinner display logic (moved to parent components)
- Simplify to pure message filtering and rendering
- Add display limit (last 20 messages) with offset tracking for keys

SessionCard.js:
- Add chatPaneRef for scroll container
- Add useEffect to scroll to bottom when conversation updates
- Provides natural "follow" behavior for new messages

The refactor moves scroll responsibility to the component that owns
the scroll container, reducing prop drilling and effect complexity.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 dashboard/components/ChatMessages.js | 77 +++++-----------------------
 dashboard/components/SessionCard.js  | 14 +++--
 2 files changed, 25 insertions(+), 66 deletions(-)

diff --git a/dashboard/components/ChatMessages.js b/dashboard/components/ChatMessages.js
index 6a75935..16f03b2 100644
--- a/dashboard/components/ChatMessages.js
+++ b/dashboard/components/ChatMessages.js
@@ -1,50 +1,9 @@
-import { html, useRef, useEffect } from '../lib/preact.js';
-import { getUserMessageBg, getStatusMeta } from '../utils/status.js';
+import { html } from '../lib/preact.js';
+import { getUserMessageBg } from '../utils/status.js';
 import { MessageBubble, filterDisplayMessages } from './MessageBubble.js';
 
 export function ChatMessages({ messages, status }) {
-  const statusMeta = getStatusMeta(status);
-  const containerRef = useRef(null);
   const userBgClass = getUserMessageBg(status);
-  const wasAtBottomRef = useRef(true);
-  const prevMessagesLenRef = useRef(0);
-
-  // Scroll to bottom on initial mount
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    // Always scroll to bottom on first render
-    container.scrollTop = container.scrollHeight;
-  }, []);
-
-  // Check if scrolled to bottom before render
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const checkScroll = () => {
-      const threshold = 50;
-      const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
-      wasAtBottomRef.current = isAtBottom;
-    };
-
-    container.addEventListener('scroll', checkScroll);
-    return () => container.removeEventListener('scroll', checkScroll);
-  }, []);
-
-  // Scroll to bottom on new messages if user was at bottom
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container || !messages) return;
-
-    const hasNewMessages = messages.length > prevMessagesLenRef.current;
-    prevMessagesLenRef.current = messages.length;
-
-    if (hasNewMessages && wasAtBottomRef.current) {
-      container.scrollTop = container.scrollHeight;
-    }
-  }, [messages]);
 
   if (!messages || messages.length === 0) {
     return html`
@@ -54,28 +13,20 @@ export function ChatMessages({ messages, status }) {
     `;
   }
 
-  const displayMessages = filterDisplayMessages(messages).slice(-20);
+  const allDisplayMessages = filterDisplayMessages(messages);
+  const displayMessages = allDisplayMessages.slice(-20);
+  const offset = allDisplayMessages.length - displayMessages.length;
 
   return html`
-    <div class="flex h-full flex-col">
-      <div ref=${containerRef} class="flex-1 space-y-2.5 overflow-y-auto overflow-x-hidden pr-0.5">
-        ${displayMessages.map((msg, i) => html`
-          <${MessageBubble}
-            key=${i}
-            msg=${msg}
-            userBg=${userBgClass}
-            compact=${true}
-          />
-        `)}
-      </div>
-      ${statusMeta.spinning && html`
-        <div class="shrink-0 flex items-center gap-2 pt-2.5 pb-0.5 pl-1">
-          <span class="h-2 w-2 rounded-full spinner-dot" style=${{ backgroundColor: statusMeta.borderColor, color: statusMeta.borderColor }}></span>
-          <span class="working-dots font-mono text-xs" style=${{ color: statusMeta.borderColor }}>
-            <span>.</span><span>.</span><span>.</span>
-          </span>
-        </div>
-      `}
+    <div class="space-y-2.5">
+      ${displayMessages.map((msg, i) => html`
+        <${MessageBubble}
+          key=${`${msg.role}-${msg.timestamp || (offset + i)}`}
+          msg=${msg}
+          userBg=${userBgClass}
+          compact=${true}
+        />
+      `)}
     </div>
   `;
 }
diff --git a/dashboard/components/SessionCard.js b/dashboard/components/SessionCard.js
index 69061a2..676110f 100644
--- a/dashboard/components/SessionCard.js
+++ b/dashboard/components/SessionCard.js
@@ -1,4 +1,4 @@
-import { html, useEffect } from '../lib/preact.js';
+import { html, useEffect, useRef } from '../lib/preact.js';
 import { getStatusMeta } from '../utils/status.js';
 import { formatDuration, getContextUsageSummary } from '../utils/formatting.js';
 import { ChatMessages } from './ChatMessages.js';
@@ -19,6 +19,14 @@ export function SessionCard({ session, onClick, conversation, onFetchConversatio
     }
   }, [session.session_id, session.project_dir, agent, conversation, onFetchConversation]);
 
+  const chatPaneRef = useRef(null);
+
+  // Scroll chat pane to bottom when conversation loads or updates
+  useEffect(() => {
+    const el = chatPaneRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [conversation]);
+
   const handleDismissClick = (e) => {
     e.stopPropagation();
     onDismiss(session.session_id);
@@ -26,7 +34,7 @@ export function SessionCard({ session, onClick, conversation, onFetchConversatio
 
   return html`
     <div
-      class="glass-panel flex h-[850px] max-h-[850px] w-[600px] cursor-pointer flex-col overflow-hidden rounded-xl border border-selection/70 transition-all duration-200 hover:border-starting/35 hover:shadow-panel"
+      class="glass-panel flex h-[850px] max-h-[850px] w-[600px] cursor-pointer flex-col overflow-hidden rounded-xl border border-selection/70 transition-[border-color,box-shadow] duration-200 hover:border-starting/35 hover:shadow-panel"
       style=${{ borderLeftWidth: '3px', borderLeftColor: statusMeta.borderColor }}
       onClick=${() => onClick(session)}
     >
@@ -77,7 +85,7 @@ export function SessionCard({ session, onClick, conversation, onFetchConversatio
       </div>
 
       <!-- Card Content Area (Chat) -->
-      <div class="flex-1 min-h-0 overflow-y-auto bg-surface px-4 py-4">
+      <div ref=${chatPaneRef} class="flex-1 min-h-0 overflow-y-auto bg-surface px-4 py-4">
         <${ChatMessages} messages=${conversation || []} status=${session.status} />
       </div>