fix(ui): swap raw one-off values for design tokens in metagraphed components batch 3/5

[tryeverything24]

Ratchet-cleans the 59 Bone & Ink no-restricted-syntax violations across 17 apps/ui/src/components/metagraphed/ components (batch 3/5), swapping raw one-off values for the equivalent design token/primitive with zero intended visual or behavioral change.

Closes #8169

What changed, by category

• Bare arbitrary text sizes → .mg-type-* utilities (46 sites). Plain-sans text-[10px]/text-[11px] snaps to mg-type-caption (12px) — the smallest sans step on the scale, the same sub-2px normalization tolerance the batch 5/5 sweep (fix(ui): swap raw Bone & Ink one-off values for design tokens in batch 5/5 #8183) established. Mono-context sites keep their family exact via the mono tokens instead: mg-type-data (11px mono, exact match) for schema-drift-detail.tsx's link and schema-drift.tsx's row list, mg-type-data-sm (10px mono) for schema-drift-detail.tsx's copy button and operational-panel.tsx's two font-mono text-[9.5px] subtitles.
• Hand-rolled rounded border bg-card shells → <Panel> (2 sites). nav-omnibox.tsx's input pill and rpc-proxy.tsx's 7d/30d window toggle now wrap in <Panel as="div" flush>, with the flex layout moved to bodyClassName so the children stay direct flex children — same !p-* override pattern as take-management-modal.tsx's segmented control from batch 5/5.
• Raw <a target="_blank"> → <ExternalLink> from @jsonbored/ui-kit (5 sites). gittensor-registered-repos.tsx (repo rows + "View all" footer), nav-mega-menu-content.tsx (footer JSON link), network-switcher.tsx (local-dev setup link), neuron-table.tsx (CSV download, with its stopPropagation preserved on a wrapper span, mirroring endpoint-operational-list.tsx). All use the bare variant: these are custom-layout/pill links where the non-bare underline + external-icon treatment would visibly change them; bare still applies the safeExternalUrl filtering and target/rel handling the rule exists for.

Flagged — no matching token, left in place with an inline justified eslint-disable

• hero-subnet-chips.tsx — bg-card/80: the file already carries the Design tokens 3/5: surface-translucency tiers for bg-card/NN glass surfaces #7842-documented exception comment (.mg-glass would add unwanted blur and browser-dependent 80/95% opacity; .mg-glass-soft's 60% visibly lightens the chip). Added the disable directive under the existing comment rather than a wrong-tier swap.
• operational-panel.tsx — status-mosaic rounded-[2px]: CONTRIBUTING.md documents dense visualization grids (explicitly including the status mosaic) as a standing sub-token residual; every approved radius step would materially change the per-cell grid.
• resource-explorer.tsx — two TooltipTrigger asChild anchors (endpoint open-icon, surface host link): both already route through safeExternalUrl with a custom blocked-state fallback (including the Informative status dots/icons use aria-label without a role, so the label isn't reliably exposed to screen readers #6423 role="img" a11y carrier); ui-kit's <ExternalLink> doesn't forward the ref/hover handlers Radix's Slot injects, so swapping it in would silently break the tooltips.

If maintainers prefer these four to stay live warnings instead of disables (per CONTRIBUTING's "still flagged as a warning to stay visible" note for the mosaic residual), happy to drop the directives.

Gates (run from apps/ui/)

Gate	Command	Result
Lint	npx eslint src/components/metagraphed/<each of the 17 files>	0 problems (0 no-restricted-syntax) on every file
Format	npx prettier --check <17 touched files>	"All matched files use Prettier code style!"
Types	npm run typecheck (tsc --noEmit)	exit 0
Build	npm run build	"built in 17.06s", exit 0
Tests	npx vitest run	191 files / 1460 tests passed
Hygiene	git diff --check	clean

Screenshots

Captured with the repo's own capture tool (tests/e2e/capture-pr-screenshots.ts: fixed-viewport, 3 viewports x 2 themes, before = origin/main, after = this branch). Two routes cover the touched components: / (hero-subnet-chips, nav-omnibox, network-switcher, registry-ticker, mega-menu chrome) and /subnets/74 (gittensor-registered-repos, operational-panel, resource-explorer, schema-drift, neuron-table). All changes are token-equivalent swaps; the only expected visible deltas are the documented sub-2px caption normalizations (plus live API data drift between the two capture passes).

/ (home)

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

/subnets/74

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 (1b2db5b).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8190   +/-   ##
=======================================
  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/gittensor-registered-repos.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/hero-subnet-chips.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/integrability-board.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/mega-menu-live-preview-link.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/move-stake-destination-input.tsx (matched apps/ui/**), and 12 more.

Review summary
This is a mechanical Bone & Ink token-migration batch (17 files, 46 raw-text-size sites → mg-type-caption/data tokens, 2 raw shells → <Panel>, 5 raw <a target=_blank> → <ExternalLink bare>), consistent with the same patterns already established in prior batches (#8183, take-management-modal). The neuron-table.tsx CSV-link change moves stopPropagation from the anchor's own onClick to a wrapping <span onClick>, which still works correctly since the click bubbles from the inner ExternalLink's <a> up through the span before reaching further ancestors. resource-explorer.tsx correctly leaves two raw <a target=_blank> in place with justified inline eslint-disable comments (Radix Slot/asChild incompatibility) rather than forcing a broken ExternalLink swap under TooltipTrigger.

Nits — 7 non-blocking

• neuron-table.tsx:314 wraps the CSV ExternalLink in a bare `<span onClick={stopPropagation}>` — functionally fine (event still bubbles to the span before further ancestors), but the added non-interactive-element-with-onClick pattern triggers a jsx-a11y warning; consider putting stopPropagation on the row's own handler instead of a wrapper span.
• No test changes accompany 17 modified files, but this is consistent with the project's established pattern for pure token-swap batches (no behavioral change) — not flagged as a gap.
• operational-panel.tsx and hero-subnet-chips.tsx add `eslint-disable-next-line no-restricted-syntax` for documented sub-token residuals (dense-grid rounded-[2px], 80% opacity fraction) — matches CONTRIBUTING.md's documented exceptions, but worth double-checking these two are actually still absent from the approved scale rather than drifting further.
• Confirm nav-mega-menu-content.tsx, nav-omnibox.tsx, neuron-table.tsx, operational-panel.tsx, and resource-explorer.tsx (all now 400+ lines per the external size-smell scan) aren't accumulating enough token-migration churn to warrant a follow-up split, though that's out of scope for this batch.
• If any of these 17 files newly reach 0 no-restricted-syntax warnings, add them to RATCHETED_DIRS in this PR per the one-way-ratchet contract in CONTRIBUTING.md — worth a quick lint-warning-count check before merge.
• 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	#8169
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: 94 registered-repo PR(s), 44 merged, 4 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	tryeverything24; Gittensor profile; 94 PR(s), 4 issue(s).

Linked issue satisfaction

Addressed
The diff systematically touches all 17 listed files, replacing bare arbitrary text sizes with .mg-type-* utilities, hand-rolled panel shells with <Panel>, and raw target="_blank" anchors with <ExternalLink>, matching the issue's stated fix mapping and explicitly flagging the one un-mappable case with a justified inline eslint-disable per the issue's own escape hatch.

Review context

• Author: tryeverything24
• Role context: outside_contributor
• Public audience mode: oss maintainer
• Lane context: Repository is configured for direct PR review.
• Public profile languages: JavaScript, TypeScript, Python, HTML, C++, Java, PHP, C#
• Official Gittensor activity: 94 PR(s), 4 issue(s).
• Related work: Titles/paths share 14 meaningful terms. (PR #8192)
• Related work: Titles/paths share 11 meaningful terms. (PR #8191, PR #8186)

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