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

@@ -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>
   `;
 }