feat(ui): add focus-visible ring styling to ProfileTabs and EndpointKindTabs buttons

[dhgoal]

What & why

ProfileTabs and EndpointKindTabs built their tab <button> className via classNames(...) with no focus-visible/outline classes, so keyboard-focused tabs fell back to the raw default browser outline — the two outliers versus the rest of the app, which applies the existing .mg-focus-ring utility (styles.css, already used by mg-metric-tile, hero-subnet-chips, …).

This wires that same existing utility onto both tab buttons: a keyboard-focused tab shows the design-system ring; a mouse click shows no ring (:focus-visible).

• No new CSS (.mg-focus-ring already exists), no markup restructuring, no change to hover/active/selected styling.
• Net diff: +mg-focus-ring on the two tab buttons (+2 / -2).

Before / after — keyboard-focused tab (all viewports × themes)

ProfileTabs — subnet detail (/subnets/{netuid})

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

EndpointKindTabs — endpoints page (/endpoints)

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

The focused (3rd) tab is shown in each pair. Delta: raw default browser outline → the rounded .mg-focus-ring matching the rest of the app.

Closes #3451

[superagent-security]

🚨 Contributor flagged. Click here for more info: Superagent Dashboard

[superagent-security]

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

[gittensory-orb]

Warning

🟨🟨🟨🟨🟨🟨🟨🟨🟨🟨🟨🟨

⏸️ Gittensory review result - manual review recommended

_{Review updated: 2026-07-11 19:44:55 UTC}

2 files · 2 AI reviewers · no blockers · readiness 95/100 · CI green · 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/endpoint-kind-tabs.tsx (matched apps/ui/src/components/**), apps/ui/src/components/metagraphed/profile-tabs.tsx (matched apps/ui/src/components/**).

Review summary
Small, mechanical CSS-only change adding the existing `mg-focus-ring` utility class to two tab button className strings in ProfileTabs and EndpointKindTabs, matching the pattern already used elsewhere in the app (e.g. mg-metric-tile, hero-subnet-chips). The diff is minimal (+2/-2), touches no logic, markup, or new CSS, and correctly targets keyboard-focus-visible styling without affecting mouse-click behavior.

Nits — 6 non-blocking

• No test-path changes accompany this PR per the engine's test evidence, though a pure className addition is low-risk and arguably doesn't need dedicated tests.
• Screenshot evidence in the description covers only two viewport/theme rows in the visible excerpt; full matrix coverage should be confirmed but is not independently verified here per repo policy on automated capture.
• Consider verifying `.mg-focus-ring` in styles.css doesn't conflict with the `after:` pseudo-element active-state styling in ProfileTabs, though this is unlikely given it's a purely additive utility class.
• Consider adding a small focused-state visual/a11y regression coverage path for `apps/ui/src/components/metagraphed/profile-tabs.tsx` and `apps/ui/src/components/metagraphed/endpoint-kind-tabs.tsx` if this pattern keeps recurring, but the current two-class change is safe without it.
• 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.

Flagged checks (non-blocking)

• Contributor trust — Contributor flagged for review

Signal	Result	Evidence
Code review	✅ No blockers	2 reviewers, synthesized
Linked issue	✅ Linked	#3451
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	⚠️ 20/25	Preflight is ready, but the PR body does not name the validation run.
Contributor workload	✅ 10/10	Author activity: 107 registered-repo PR(s), 62 merged, 16 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	dhgoal; Gittensor profile; 107 PR(s), 16 issue(s).
Gate result	⚠️ Not blocking	Advisory; not blocking this PR.

Linked issue satisfaction

Addressed
The diff adds `mg-focus-ring` to the exact classNames call in both profile-tabs.tsx and endpoint-kind-tabs.tsx as specified, touches only those two files, and includes the required before/after screenshots demonstrating the ring appears on keyboard focus.

Review context

• Author: dhgoal
• 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: 107 PR(s), 16 issue(s).
• PR-specific overlap: none found.

Contributor next steps

• Add validation command/output.

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.

[BETA] Chat with Gittensory

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

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

Full command reference: https://gittensory.aethereal.dev/docs/gittensory-commands

Visual preview

Route	Viewport	Before (production)	After (this PR's preview)	Diff
/	desktop			—
/	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 Gittensory, a quiet PR intelligence layer for OSS maintainers.

• Re-run Gittensory review