fix(ui): masthead title wraps instead of clipping on mobile; /agents drops its dishonest live-dot

[JSONbored]

Closes #8459. Found live on metagraph.sh/agents (mobile, 375px) — see the issue for the full report and a third item I could not reproduce (searched the whole apps/ui/src tree and live production directly), flagged there rather than guessed at here.

Bug 1 — masthead title clips mid-word on mobile

PageMasthead's <h1> used truncate (hard single-line ellipsis). On /agents, "Use AI to explore Bittensor" — a normal-length string, not a runaway one — rendered as "Use AI to explore B…" because its flex sibling (the actions slot, a ShareButton) claimed enough of the row on narrow viewports that the title's own space couldn't fit the full string on one line.

Every current caller either passes a short static string or a pre-shortened dynamic one (shortHash(), formatNumber()) — nothing was actually relying on single-line truncation. Swapped for line-clamp-2 break-words, matching the treatment description right below it already gets: short titles render identically to before, a longer one wraps instead of clipping mid-word.

Spot-checked /chain (short static title, keeps live — genuinely streams) and an account detail page (pre-shortened dynamic title) to confirm no regression; both screenshot-verified below plus manually in a live dev server.

Bug 2 — unexplained green "live" dot on /agents

/agents passed live to PageMasthead despite nothing on the page updating live — it's a static, one-time catalog fetch (agent resources, SDK commands, MCP tool list). Every other .mg-live-dot usage in the app is tied to something that genuinely streams or polls (a connected SSE status, a block ticker, live health probes); dropped it here rather than have it claim liveness the page doesn't have.

Screenshots

Viewport · Theme	Before	After
Desktop · Light	before	after
Desktop · Dark	before	after
Tablet · Light	before	after
Tablet · Dark	before	after
Mobile · Light	before	after
Mobile · Dark	before	after

Mobile-dark before/after is the clearest: title clipped + green dot → full two-line title, no dot.

Validation

npm run lint --workspace=apps/ui            # 0 errors
npm run format:check --workspace=apps/ui    # clean
npm run typecheck --workspace=apps/ui       # clean
npm test --workspace=apps/ui                # 1630 passed, 1 skipped
npm run test:e2e --workspace=apps/ui        # 40 passed
npm run build --workspace=apps/ui           # clean

PageMasthead is a shared component (used by every page carrying a masthead) — the line-clamp-2 change is scoped to that one component, and every other call site was spot-checked (screenshots above + /chain, an account page) for no regression. No API, schema, or generated-contract surface touched.

[superagent-security]

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

[loopover-orb]

Caution

🛑 LoopOver review result - fixes required

_{Review updated: 2026-07-27 22:07:15 UTC}

2 files · 1 AI reviewer · no blockers · CI failing · unstable

🛑 Suggested Action - Manual Review

• Touches a guarded path — held for manual review: This PR changes guardrail-protected path(s): apps/ui/src/components/metagraphed/primitives/page-masthead.tsx (matched apps/ui/**), apps/ui/src/routes/-agents-page.tsx (matched apps/ui/**).

Review summary
This is a small, self-contained UI fix: swapping the masthead h1 from `truncate` to `line-clamp-2 break-words` so a normal-length title with a competing flex sibling wraps instead of clipping mid-word, plus removing the `live` prop from `/agents` since that page is a static one-time catalog fetch, not a streaming surface. Both changes are minimal, isolated, and match the stated rationale (description already uses `line-clamp-2`); no other caller's behavior should regress since short titles still render on one line. The screenshot evidence provided shows only a minor font-weight difference and no visible wrapping/clipping change, which is a discrepancy worth noting but not a code defect.

Nits — 8 non-blocking

• The screenshot evidence (per the vision summary) doesn't show the claimed mobile wrapping fix or the live-dot removal on /agents — worth double-checking that the submitted images actually correspond to the claimed before/after states, though this doesn't block the code diff itself.
• The large inline comment block in page-masthead.tsx (apps/ui/src/components/metagraphed/primitives/page-masthead.tsx) is verbose for a one-line CSS change; could be trimmed to a shorter rationale.
• No test coverage was added for either change; a simple render/snapshot check on `/agents` confirming `live` is no longer passed would guard against regression.
• The `ui` CI check failed with no detail provided — worth confirming this isn't related to the line-clamp/break-words change before merge, though the cause can't be verified from what's given here.
• Consider a lightweight visual regression or snapshot test for PageMasthead covering both a short title (single line, no clamp truncation) and a long title (two-line clamp) to lock in the new behavior.
• PR author also opened the linked issue — Link an issue that was opened by a different contributor, or provide a rationale for why this self-authored issue represents genuine discovery work.
• Code changes lack test evidence — Add focused regression tests or explain why existing coverage is sufficient.
• Touches a guarded path — held for manual review — A maintainer must review and merge this change.

CI checks failing

• ui

Decision drivers

• ✅ Code review — No blockers (1 reviewer)
• ⚠️ Gate result — Not blocking (Advisory; not blocking this PR.)

Context & advisory signals — never blocks the verdict

Signal	Result	Evidence
Linked issue	✅ Linked	#8459
Related work	✅ No active overlap found	No same-issue or scoped active PR overlap found.
Change scope	✅ 20/20	Low 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: 13 registered-repo PR(s), 13 merged, 306 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	JSONbored; Gittensor profile; 13 PR(s), 306 issue(s).

Linked issue satisfaction

Addressed
The diff changes PageMasthead's h1 class from truncate to line-clamp-2 break-words (fixing mid-word clipping) and removes the live prop from the /agents PageMasthead call (removing the dishonest live-dot), matching both checked deliverables in the issue; Bug 3 is explicitly out of scope per the issue's own unchecked item.

Review context

• Author: JSONbored
• Role context: owner (maintainer lane)
• Public audience mode: oss maintainer
• Lane context: Repository is configured for direct PR review.
• Public profile languages: Python, TypeScript, Ruby, Go, MDX, Shell, Solidity, JavaScript
• Official Gittensor activity: 13 PR(s), 306 issue(s).
• PR-specific overlap: none found.

Contributor next steps

• Start here: Treat this as maintainer-lane context rather than normal contributor-lane activity.

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.

Decision record

• action: hold · clause: guardrail_hold
• config: 689b4478cc6a8d9a89107cf4f20dd3af5ec4fd8a427a2a9762b949775d6b2b14 · pack: oss-anti-slop · ci: failed
• record: cd1aef9392de927376b24ccf799004b0eb9e945602af467b36e58b19edbc8802 (schema v5, head f69bee9)

Visual preview

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

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

Scroll preview

Route	Before (production)	After (this PR's preview)
/-agents-page	before /-agents-page (scroll)	after /-agents-page (scroll)

A short scroll-through clip (desktop) — click either thumbnail to open the full animation. Evidence for scroll-linked behavior a single screenshot can't show.

_{🟩 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

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	metagraphed-ui	f69bee9	Commit Preview URL Branch Preview URL	Jul 27 2026, 09:24 PM

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.81%. Comparing base (befe16c) to head (f69bee9).
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8460   +/-   ##
=======================================
  Coverage   97.81%   97.81%           
=======================================
  Files         419      419           
  Lines       29074    29074           
  Branches    10931    10931           
=======================================
  Hits        28440    28440           
  Misses        143      143           
  Partials      491      491           

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.