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

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

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

EndpointKindTabs — endpoints page (/endpoints)

Viewport · Theme	Before	After
Desktop · Light
Desktop · 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.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.94%. Comparing base (4c3dbbf) to head (29f2f77).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4913   +/-   ##
=======================================
  Coverage   97.94%   97.94%           
=======================================
  Files         162      162           
  Lines       19425    19425           
  Branches     7349     7349           
=======================================
  Hits        19025    19025           
  Misses         53       53           
  Partials      347      347           

🚀 New features to boost your workflow:

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

[gittensory-orb]

Warning

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

⏸️ Gittensory review result - manual review recommended

_{Review updated: 2026-07-11 19:36:35 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
Trivial, correct CSS-only change: adds the existing `mg-focus-ring` utility class to the tab buttons in ProfileTabs and EndpointKindTabs, matching the pattern already used elsewhere in the app (e.g. mg-metric-tile). No markup, logic, or behavior changes beyond the focus-visible ring; the +2/-2 diff matches the stated scope exactly and directly closes issue #3451.

Nits — 5 non-blocking

• No test coverage was added, but this is a pure styling/className change with no logic to unit test, so that's acceptable.
• Contributor trust check failed per CI status — this is a review-process signal, not a defect in the diff itself, but maintainers should confirm the contributor/PR provenance before merging.
• Consider a visual regression or accessibility (axe) test asserting focus-visible styling on tab buttons if the project has such tooling, to prevent silent regression later.
• 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 classNames() call on both the ProfileTabs button and the EndpointKindTabs button exactly as specified, touching only these two files with no CSS additions or unrelated changes.

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

[gittensory-orb]

This pull request changes UI/visual code but its screenshot evidence is incomplete. Every required viewport × theme combination needs its own before/after image pair in a labeled table row (e.g. "Desktop · Light | before | after"). Still missing: Tablet · Light, Tablet · Dark.

Please resubmit with the remaining rows filled in.

See https://github.com/JSONbored/metagraphed/blob/main/.claude/skills/metagraphed/SKILL.md for the exact format and examples. This is an automated maintenance action.