feat(miner-ui): chat message list, bubble, and typing indicator components

[jaytbarimbao-collab]

Summary

First presentational pieces of the miner-ui chat rail (#6515) — three standalone, backend-agnostic components under apps/loopover-miner-ui/src/components/chat/, driven entirely by fixture data (no network/WebSocket/live source; that's a later, separately-scoped issue).

Components (no new dependency; theme.css untouched)

• message-bubble.tsx — MessageBubble: Avatar/AvatarImage/AvatarFallback from @loopover/ui-kit/components/avatar with an initials fallback; a role-colored bubble built only from existing theme tokens (user=primary, assistant=muted, system=secondary); a rendered <time>.
• typing-indicator.tsx — TypingIndicator: an animated three-dot pulse with a typing-specific aria-label (deliberately distinct from ui-kit's loading-only Spinner); renders nothing when composing is false.
• message-list.tsx — MessageList: viewport via ScrollArea from @loopover/ui-kit/components/scroll-area (not a raw overflow div), wrapping StateBoundary from @loopover/ui-kit/components/state-views for its own loading/empty/error states, plus the TypingIndicator when composing.
• fixtures.ts — shared ChatMessage shape + empty / single / multi-turn / long-content sample arrays.

Tests (every branch)

src/chat-message-components.test.tsx — MessageList's loading/empty/error/populated StateBoundary branches; MessageBubble's per-role color, avatar-image-vs-fallback, and timestamp; TypingIndicator's composing/hidden states + accessible name (asserts it says typing, not loading). apps/** is outside Codecov's coverage.include (per repo CLAUDE.md) so codecov/patch won't score these — verification is the branch tests. Local gate: @loopover/ui-miner typecheck + 162 tests + eslint (0 errors) green.

Closes #6515

[superagent-security]

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

[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-16 14:33:43 UTC}

5 files · 1 AI reviewer · no blockers · readiness 82/100 · CI green · clean

✅ Suggested Action - Approve/Merge

• safe to merge

Review summary
This PR adds three presentational, backend-agnostic chat components (MessageBubble, TypingIndicator, MessageList) plus fixtures, closing #6515. The implementation is clean: role-colored bubbles use only existing theme tokens, TypingIndicator has a distinct accessible name from ui-kit's Spinner, and MessageList correctly wraps ScrollArea/StateBoundary. Tests cover the meaningful branches (loading/empty/error/populated, per-role color, avatar-present-vs-fallback, composing/hidden) and CI is green.

Nits — 5 non-blocking

• fixtures.ts:40,55 use example.test avatar URLs, which is fine for fixtures but worth a comment noting they're intentionally non-resolving test hosts.
• fixtures.ts:70 the `120` repeat count for long-content is a magic number; a named constant like LONG_CONTENT_TOKEN_COUNT would self-document the intent.
• message-bubble.tsx avatarInitials falls back to `message.role.slice(0,2)` (e.g. 'us', 'as', 'sy') which reads oddly compared to the uppercased role initials used elsewhere in tests (e.g. 'AS') — worth double-checking the intended fallback text for very short/empty authorName strings.
• The avatarUrl-present render path only verifies the fallback still shows (since jsdom never fires the Radix AvatarImage load event); consider a lightweight test asserting the `src`/`alt` props passed to AvatarImage to actually cover that branch's props rather than only the fallback state.
• Consider extracting the `120` repeat count in fixtures.ts into a named constant for clarity.

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	#6515
Related work	⚠️ 1 scoped overlap	Top overlaps are listed below; lower-confidence bulk is hidden.
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: 148 registered-repo PR(s), 78 merged, 4 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	jaytbarimbao-collab; Gittensor profile; 148 PR(s), 4 issue(s).
Improvement	✅ Minor	risk: clean · value: minor

Review context

• Author: jaytbarimbao-collab
• Role context: outside_contributor
• Public audience mode: oss maintainer
• Lane context: Repository is configured for direct PR review.
• Public profile languages: not available
• Official Gittensor activity: 148 PR(s), 4 issue(s).
• Related work: Titles/paths share 7 meaningful terms. (issue #6515, issue #6518)

Contributor next steps

• Start here: Review top overlaps.
• Then work through the remaining 2 steps 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