Add focus-visible ring styling to the ProfileTabs and EndpointKindTabs buttons

[JSONbored]

Context

apps/ui/src/components/metagraphed/profile-tabs.tsx (ProfileTabs, the <button> inside the .map at lines 31-58) and apps/ui/src/components/metagraphed/endpoint-kind-tabs.tsx (EndpointKindTabs, the <button role="tab"> at lines 25-49) both build their className via classNames(...) with zero focus-visible/outline classes — confirmed by reading both files, neither string list contains focus: or mg-focus*. apps/ui/src/styles.css already defines a reusable ring utility, .mg-focus-ring (line 1189: outline: none + a two-layer box-shadow using var(--ring) and --accent), which is applied elsewhere via classNames (e.g. components/metagraphed/hero-subnet-chips.tsx:80, "mg-metric-tile mg-focus-ring snap-start shrink-0") — so these two tab strips are the outliers, not the design system.

Requirement

Add the existing mg-focus-ring utility class to the tab <button> element in both ProfileTabs and EndpointKindTabs so keyboard-focused tabs get a visible ring, matching the rest of the design system. This is a pure styling fix — no new component, no markup restructuring, no CSS additions (the utility class already exists and is proven in production use).

Deliverable

• apps/ui/src/components/metagraphed/profile-tabs.tsx — add "mg-focus-ring" into the classNames(...) call on the <button> at line 40 (the call currently starts "relative inline-flex items-center gap-1.5 py-3 text-[13px] font-medium whitespace-nowrap transition-colors"); no other props on this <button> need to change.
• apps/ui/src/components/metagraphed/endpoint-kind-tabs.tsx — add "mg-focus-ring" into the classNames(...) call on the <button role="tab"> at line 31/32 (the call currently starts "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 font-mono text-[10px] uppercase tracking-widest transition-colors"); no other props on this <button> need to change.
• Done = both buttons visibly render the box-shadow ring (0 0 0 1px var(--ring), 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent)) when reached via Tab/keyboard focus, and show no ring on mouse click (that's what :focus-visible gives you for free — no extra logic needed).
• No coordination needed with another open issue for this specific change — it's a self-contained 2-line CSS-class fix; 🎨 Wave 3 — Frontend explorer enrichment (LIVE — 219 issues filed) #2542 is only the parent Wave 3 tracker, not a blocking sibling.

Acceptance criteria

• apps/ui/src/components/metagraphed/profile-tabs.tsx diff shows mg-focus-ring added to the tab button's classNames(...) call
• apps/ui/src/components/metagraphed/endpoint-kind-tabs.tsx diff shows mg-focus-ring added to the tab button's classNames(...) call
• No changes to apps/ui/src/styles.css (the utility class already exists at line 1189 — this issue only wires it up, it doesn't define new CSS)
• Tabbing to a ProfileTabs item and an EndpointKindTabs item shows the same ring styling used elsewhere in the app (e.g. .mg-metric-tile, hero-subnet-chips.tsx), verified via keyboard navigation in a local preview
• Diff touches only these two component files (plus a before/after screenshot table per the repo's UI-PR requirement for visual changes)

Non-goals

• Do not add a new CSS class or rule to styles.css — mg-focus-ring already exists and is already used elsewhere; reuse it, don't reinvent it
• Do not touch any other tab-like component in the codebase (e.g. .mg-lb-tab, .mg-metric-tile) — those already have their own :focus-visible rules and are out of scope here
• Do not change hover/active/selected styling, layout, spacing, or any non-focus visual behavior of either component
• Do not fold in unrelated items from the 🎨 Wave 3 — Frontend explorer enrichment (LIVE — 219 issues filed) #2542 Wave 3 checklist — this issue is scoped to exactly these two components

Size

Size: S — keep this PR small (aim for ≤10 files / ≤1000 LOC).

Part of #2542.

[linear-code]

JSO-2747