fix(miner-ui): chat rail stick-to-bottom auto-scroll

[RealDiligent]

Summary

• Extends ui-kit ScrollArea with optional viewportRef to the Radix Viewport.
• MessageList stick-to-bottom auto-scrolls on new messages / content resize; respects manual scroll-up.
• Moves live StreamingText into the same ScrollArea via a footer slot so streaming stays in view.

Closes #7229

Before / after

Test plan

• npm --workspace @loopover/ui-miner run test (includes scrollTop regression cases)
• npm --workspace @loopover/ui-miner run typecheck
• CI green

[superagent-security]

Superagent didn't find any vulnerabilities or security issues in this PR.

[loopover-orb]

Tip

✅ LoopOver review result - approve/merge recommended

_{Review updated: 2026-07-19 13:36:40 UTC}

6 files · 1 AI reviewer · no blockers · readiness 88/100 · CI green · clean

✅ Suggested Action - Approve/Merge

• safe to merge

Review summary
This wires up stick-to-bottom auto-scroll for the chat rail as described: `ScrollArea` now exposes the Radix Viewport via a new `viewportRef` prop, `MessageList` tracks near-bottom state via a scroll listener plus pins on message growth and content resize via a `ResizeObserver`, and the streaming `StreamingText` moves into the same viewport via a `footer` slot so it no longer scrolls independently. The refactor is well-targeted, keeps the #7081 live-region invariant intact (footer stays outside the `aria-live` `<ol>`), and ships targeted regression tests (`chat-message-components.test.tsx`) that mock `scrollTop`/`scrollHeight`/`clientHeight` to assert both the pin-to-bottom and don't-yank-when-scrolled-up branches, plus the ResizeObserver-driven streaming-footer path. I don't see a reachable correctness defect in the effect wiring.

Nits — 5 non-blocking

• apps/loopover-miner-ui/src/components/chat/message-list.tsx: the `scroll` listener calls `setStickToBottom` on every scroll event with no throttling/debouncing, so a fast manual scroll (or the drag of the scrollbar thumb) triggers a React re-render per pixel — worth a `requestAnimationFrame` or simple threshold guard if scroll feels janky on long histories.
• apps/loopover-miner-ui/src/components/chat/message-list.tsx:55-63: the `ResizeObserver` effect fully disconnects and re-observes on every `stickToBottom` flip instead of observing once and reading a ref inside the callback — functionally fine but unnecessary churn.
• apps/loopover-miner-ui/src/lib/chat-scroll.ts: `CHAT_NEAR_BOTTOM_PX = 80` is a reasonable default but undocumented beyond the one-line comment — a sentence on why 80px (avoids fighting sub-pixel scroll rounding, matches bubble line-height, etc.) would help future tuning.
• apps/loopover-miner-ui/src/components/chat/message-list.tsx: two separate effects (scroll listener setting `stickToBottom`, and the resize/layout effects consuming it) could arguably be one effect keyed off a ref instead of state to avoid the extra render on every scroll-position change — not required, just a simplification option.
• Consider throttling the scroll handler in message-list.tsx with a rAF wrapper to cut re-render frequency during manual scroll.

Decision drivers

• ✅ Code review — No blockers (1 reviewer)
• ✅ Gate result — Passing (No configured blocker found.)

Context & advisory signals — never blocks the verdict

Signal	Result	Evidence
Linked issue	✅ Linked	#7229
Related work	✅ No active overlap found	No same-issue or scoped active PR overlap found.
Change scope	❌ 8/20	High review scope from cached public metadata (1 linked issue).
Validation posture	✅ 25/25	PR body includes validation/test evidence.
Contributor workload	✅ 10/10	Author activity: 397 registered-repo PR(s), 203 merged, 35 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	RealDiligent; Gittensor profile; 397 PR(s), 35 issue(s).
Improvement	✅ Minor	risk: clean · value: minor · LLM: significant

Linked issue satisfaction

Addressed
The PR adds a viewportRef to ScrollArea, implements stick-to-bottom logic in MessageList via useLayoutEffect/ResizeObserver keyed on messages.length and footer growth, moves live StreamingText into the same viewport as a footer slot so streaming stays pinned, and preserves manual scroll-up via a scroll listener that toggles stickToBottom off — directly matching the issue's requirements and deliver

Review context

• Author: RealDiligent
• Role context: outside_contributor
• Public audience mode: oss maintainer
• Lane context: Repository is configured for direct PR review.
• Public profile languages: Python, JavaScript, Ruby, Svelte, TypeScript, Markdown, MDX
• Official Gittensor activity: 397 PR(s), 35 issue(s).
• PR-specific overlap: none found.

Contributor next steps

• Start here: Add a concise scope and risk note.
• Then work through the remaining 1 step in the Signals table above.

Signal definitions

• Related work = same linked issue, overlapping active PRs, or title/path similarity.
• Change scope = cached public metadata such as size labels, draft state, and review-burden hints.
• Validation posture = whether the PR provides enough public validation/test evidence for maintainer review.
• Contributor workload = public contributor activity and cleanup pressure, not a repo-wide quality failure.
• Contributor context = public GitHub/Gittensor identity context; non-Gittensor status is not a blocker.

🧪 Chat with LoopOver

Ask LoopOver a question about this PR directly in a comment — grounded only in the same cached, public-safe facts shown above, never a new claim.

• @loopover ask <question> answers contribution-quality Q&A with source citations and freshness.
• @loopover chat <question> answers in natural prose from cached decision-pack facts via local inference (maintainer/collaborator; read-only).
• A plain-language @loopover mention with a real question is routed to the closest matching read-only command automatically — no exact syntax required.

Full command reference: https://loopover.ai/docs/loopover-commands

🧪 Experimental — new and may change.

Visual preview

Route	Viewport	Before (production)	After (this PR's preview)	Diff
/	desktop	before /	after /	—
/	mobile	before / (mobile)	after / (mobile)	—

Click any thumbnail to open the full-size screenshot. Before = production · After = this PR's preview deploy.

_{🟩 Safe / merged · 🟦 Advisory · 🟨 Held for review · 🟥 Blocked / closed}

---

💰 Earn for open-source contributions like this. Gittensor lets GitHub contributors earn for the work they already do — register to start earning →.

Checked by LoopOver, a quiet PR intelligence layer for OSS maintainers.

• Re-run LoopOver review

[loopover-orb]

LoopOver approves — the gate is satisfied and CI is green.