fix(ui): ratchet-clean apps/ui components batch 2/5 (17 files, 47 violations)

[philluiz2323]

Closes #8168

Converts every no-restricted-syntax design-guardrail warning in the 17 listed src/components/metagraphed/** files to its named token, following the recipe merged in #8177 (packages/ui-kit) and mirrored by #8186 (batch 1). Zero behavioral change — the touched sizes are homogenized onto the type scale (≤2px snaps), the same intent as #8177.

npx eslint <each file> reports 0 no-restricted-syntax; tsc --noEmit is clean (only the pre-existing posthog-js env gaps in analytics.ts/vite.config.ts remain, untouched here); prettier --check is clean; vitest run src/components/metagraphed passes (180 tests). This batch does not touch RATCHETED_DIRS — per the issue, that belongs to whichever batch clears the last file in src/components/metagraphed/**.

What changed

• 41 text snaps → mg-type-*: sans <12px → mg-type-caption; non-uppercase mono numeric → mg-type-data / mg-type-data-sm (nearest mono step), dropping the now-redundant font-mono / leading-relaxed. ⚠️ Homogenizes a few one-off sizes onto the scale — the batch's intent, same as fix(ui-kit): ratchet-clean src/components (16/19 files, 38/43 violations) #8177.
• 1 radius: rounded-[1px] → rounded (base; rounded-sm was eliminated from the approved scale).
• 1 external link: the standalone "open" anchor → <ExternalLink bare> (the icon-only opt-in prop fix(ui-kit): ratchet-clean src/components (16/19 files, 38/43 violations) #8177 added), routing through safeExternalUrl with identical rendering.
• 1 chip: dropped an !text-[10px] override so the cluster uses the Chip primitive's own size — matching its sibling overflow chip, which never had the override.

Documented eslint-disable (per #8172's "flag, don't invent" guidance)

Five sites have no token/primitive equivalent:

• 2× scroll-mt-32 (endpoint-detail-drawer, endpoint-operational-list) — anchor scroll-margin (8rem sticky-header clearance for deep-linked rows), not layout spacing; the guardrail's mt matcher flags it as a false positive and no on-scale step equals 8rem.
• 1× 20px mono latency stat (endpoint-operational-list) — the type scale tops out at mg-type-data (11px); no large-numeric token exists.
• 1× the Open-URL anchor inside a Radix <TooltipTrigger asChild> (endpoint-list) — must stay a raw <a> because <ExternalLink> is a plain function component (no forwardRef) and can't receive the ref the Slot injects.
• 1× the snippet language switcher (endpoint-snippet, role="tablist") — a segmented control, not a card shell, so <Panel> would impose card padding/semantics. The rule's rounded+border+bg-card matcher is a false positive here.

Screenshots

Representative route: /endpoints — it renders the bulk of the touched components (priority strip, operational list, glance, kind tabs, chip cluster, uptime bar, detail drawer, card list, snippet). The token snaps are ≤2px and the ExternalLink bare / chip-size changes are visual no-ops, so before/after are intentionally near-identical. The only visible deltas are live probe values (latency / degraded counts refresh between the two captures) — not from this change.

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

[superagent-security]

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.82%. Comparing base (6a156b4) to head (00092fe).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8191   +/-   ##
=======================================
  Coverage   97.82%   97.82%           
=======================================
  Files         415      415           
  Lines       28893    28893           
  Branches    10850    10850           
=======================================
  Hits        28265    28265           
  Misses        141      141           
  Partials      487      487           

🚀 New features to boost your workflow:

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

[loopover-orb]

Warning

⏸️ LoopOver review result - manual review recommended

_{Review updated: 2026-07-26 05:28:38 UTC}

17 files · 1 AI reviewer · no blockers · CI green · clean

⏸️ Suggested Action - Manual Review

• Touches a guarded path — held for manual review: This PR changes guardrail-protected path(s): apps/ui/src/components/metagraphed/charts/latency-heatmap.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/charts/subnet-pulse-grid.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/charts/validator-subnet-heatmap.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/command-palette-body.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/endpoint-card-list.tsx (matched apps/ui/**), and 12 more.

Review summary
Pure CSS-class token migration (raw text-[Npx]/font-mono → mg-type-* scale tokens) across 17 files, mirroring the already-merged #8177/#8186 recipe, plus one ExternalLink swap, one rounded-radius snap, one Chip override removal, and five documented eslint-disable exceptions with concrete rationale. All changes are non-behavioral className/token substitutions; CI (build, tests, typecheck, ui) is green and the visible diff is internally consistent with the stated intent.

Nits — 7 non-blocking

• endpoint-list.tsx:208 drops `font-mono` when swapping to `mg-type-data` for the URL cell — worth confirming `mg-type-data` itself carries a monospace family so the URL column doesn't silently switch to the sans font.
• No test-path changes accompany 17 source-file edits (0 test lines), though this is expected for a pure className-token ratchet with no logic change.
• The eslint-disable comments (endpoint-list.tsx, endpoint-detail-drawer.tsx, endpoint-operational-list.tsx, endpoint-snippet.tsx) are well-justified inline but add lasting suppression surface — worth a follow-up ticket if the design-token scale ever grows to cover these cases.
• Verify `mg-type-data` in the ui-kit token stylesheet includes a monospace font-family so dropping the explicit `font-mono` in endpoint-list.tsx:208 and endpoint-card-list.tsx doesn't regress the rendered font for URL/latency cells.
• If `scroll-mt-32` and the 20px mono latency stat recur across future batches, consider promoting them to named tokens rather than repeating the same eslint-disable rationale per file.
• 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.

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	#8168
Related work	⚠️ 2 scoped overlaps	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: 1027 registered-repo PR(s), 601 merged, 126 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	philluiz2323; Gittensor profile; 1027 PR(s), 126 issue(s).

Linked issue satisfaction

Partially addressed
The diff systematically converts arbitrary text-size/font-mono usages to mg-type-* tokens, replaces rounded-[1px] with rounded, and swaps a raw <a target="_blank"> for <ExternalLink>, covering the bulk of the 47 violations across all 17 named files as required. However, it introduces several eslint-disable suppressions (e.g. two scroll-mt-32 sites, a 20px mono latency stat, and a Panel-shell false

Review context

• Author: philluiz2323
• Role context: outside_contributor
• Public audience mode: oss maintainer
• Lane context: Repository is configured for direct PR review.
• Public profile languages: Python, JavaScript, MDX, TypeScript, CSS, Cuda, HTML, Kotlin
• Official Gittensor activity: 1027 PR(s), 126 issue(s).
• Related work: Titles/paths share 11 meaningful terms. (PR #8186)
• Related work: Titles/paths share 14 meaningful terms. (PR #8192, PR #8190)

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 /	diff /
/	mobile	before / (mobile)	after / (mobile)	diff / (mobile)

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

Scroll preview

Route	Before (production)	After (this PR's preview)
/	before / (scroll)	after / (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