fix(chat): pin all chat panels to bottom across async layout shifts

[b-client-vm]

Closes #594.

Why

Two chat panels in the dashboard had the same scroll-pinning bug, with their own copies of the broken logic:

• Cortex chat panel (CortexChatPanel.tsx) — the case called out in Chat sometimes doesn't scroll all the way to bottom on new message #594. Effect on [messages.length, isStreaming, toolActivity.length] missed tool-result expansion (status flip without length change), the ThinkingIndicator toggle, async Markdown reflow, and `behavior: "smooth"` raced layout shifts.
• Portal chat (PortalTimeline.tsx) — same pattern. Effect on `[visibleItems.length, isTyping]` missed tool-result expansion and per-message copy-button mount (`MessageBubble onCopy`); send-time effect used `behavior: "smooth"` inside `requestAnimationFrame`.

The channel timeline (ChannelDetail.tsx) uses flex-col-reverse for a CSS-only pin and didn't need the hook.

How

New hook `useStickToBottom(scrollRef, contentRef)`:

• A `ResizeObserver` on the content element catches every height change uniformly — no dep-array enumeration.
• A `scroll` listener tracks "is the user near the bottom" (within 64px). Re-pinning only happens when this is true, so scrolling up to read history is preserved.
• Snaps to bottom synchronously plus on the next two animation frames. The follow-up snaps catch growth that fires after the RO callback returns: scrollbar appearing and narrowing content (extra wrap row), web-font swap, late Markdown layout (images, code blocks), or a sibling element mounted a frame later (a per-message copy button is the case I caught testing).
• Uses `behavior: "auto"`. If a later shift happens during the scroll, the observer just snaps us forward again on the next callback — no animation race.

Wired into both Cortex and Portal panels: refs on the existing scroll container + inner content div, drop the old `useEffect`s + the now-unused `messagesEndRef` / `previousLengthRef`. Portal keeps a small useEffect on `sendCount` that force-snaps to the bottom — preserves "I just sent, take me to my message" even when the user had scrolled up.

Validation

• `tsc --noEmit` clean on all three files.
• `vite build` passes.
• Manual repro with a standalone harness (vanilla-JS port of the hook) verified all four Chat sometimes doesn't scroll all the way to bottom on new message #594 scenarios: initial mount at bottom, tool-result expansion re-pins, async growth re-pins, scroll-up preserves user position.
• Tested live in the running dashboard — Portal chat now pins through streaming responses including the copy button mount.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a2d75541-3eb0-403f-bd4a-0832247b7310

📥 Commits

Reviewing files that changed from the base of the PR and between f89fbc2 and 3d714f2.

📒 Files selected for processing (1)

• interface/src/components/portal/PortalTimeline.tsx

---

Walkthrough

The PR replaces a useEffect/scrollIntoView approach with a new useStickToBottom hook that uses a ResizeObserver and a pinned-state heuristic, and integrates it into CortexChatPanel and PortalTimeline via dedicated scrollRef and contentRef, removing the previous bottom sentinel element.

Changes

Auto-Scroll Stick-to-Bottom Behavior

Layer / File(s)	Summary
useStickToBottom Hook interface/src/hooks/useStickToBottom.ts	Defines NEAR_BOTTOM_PX, exports useStickToBottom(scrollRef, contentRef), initializes isPinnedRef, forces initial bottom snap across RAFs, adds a passive scroll listener to update pinned state, uses ResizeObserver on contentRef to reapply scrollTop = scrollHeight when pinned, and cleans up listeners/observer.
CortexChatPanel Integration interface/src/components/CortexChatPanel.tsx	Imports useStickToBottom, creates scrollRef and contentRef, calls useStickToBottom(scrollRef, contentRef), attaches refs to the messages container elements, and removes the previous bottom sentinel <div ref={messagesEndRef} /> and its effect-based scrollIntoView.
PortalTimeline Changes interface/src/components/portal/PortalTimeline.tsx	Adds contentRef, calls useStickToBottom(scrollRef, contentRef), removes prior smart auto-scroll/rAF behavior, and pins immediately to bottom on sendCount by setting scrollTop = scrollHeight.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: implementing a pin-to-bottom behavior for chat panels across async layout shifts, which is the core objective of this PR.
Description check	✅ Passed	The description is directly related to the changeset, explaining the problem, the solution via useStickToBottom hook, and how it's applied to both Cortex and Portal chat panels.
Linked Issues check	✅ Passed	The changes fully address issue #594's requirements by implementing a ResizeObserver-based hook that catches all height-changing events, preserves user scroll-up intent, and avoids smooth-scroll race conditions.
Out of Scope Changes check	✅ Passed	All changes are within scope—the new useStickToBottom hook, updates to CortexChatPanel and PortalTimeline are all directly tied to fixing the chat scroll-pinning issue described in #594.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

interface/src/hooks/useStickToBottom.ts (1)

37-37: 💤 Low value

Optional: Make scrollTop assignment more explicit.

Setting scroll.scrollTop = scroll.scrollHeight works because browsers clamp to the maximum valid value (scrollHeight - clientHeight), but the intent would be clearer as:

-		scroll.scrollTop = scroll.scrollHeight;
+		scroll.scrollTop = scroll.scrollHeight - scroll.clientHeight;

This is purely a readability suggestion—the current code is functionally correct.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@interface/src/hooks/useStickToBottom.ts` at line 37, The current assignment
in useStickToBottom (setting scroll.scrollTop) should be made explicit: compute
the target as scroll.scrollHeight minus scroll.clientHeight and assign that
value to scroll.scrollTop, clamping with Math.max to avoid negative values
(i.e., use Math.max(0, scroll.scrollHeight - scroll.clientHeight)); update the
assignment at the line that currently sets scroll.scrollTop to
scroll.scrollHeight to use this explicit, clamped value for clarity.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@interface/src/hooks/useStickToBottom.ts`:
- Line 37: The current assignment in useStickToBottom (setting scroll.scrollTop)
should be made explicit: compute the target as scroll.scrollHeight minus
scroll.clientHeight and assign that value to scroll.scrollTop, clamping with
Math.max to avoid negative values (i.e., use Math.max(0, scroll.scrollHeight -
scroll.clientHeight)); update the assignment at the line that currently sets
scroll.scrollTop to scroll.scrollHeight to use this explicit, clamped value for
clarity.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 20842779-63b7-41e4-8bea-92ffdd8bec86

📥 Commits

Reviewing files that changed from the base of the PR and between ac52277 and 40c1182.

📒 Files selected for processing (2)

• interface/src/components/CortexChatPanel.tsx
• interface/src/hooks/useStickToBottom.ts